/* ==========================================================================
   DEEJAY CHRISTIAN — stylesheet
   Donker, minimalistisch design geïnspireerd op de uitstraling van
   grote internationale DJ-websites: full-bleed beeld, grote typografie,
   veel witruimte en subtiele bewegingen.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-alt: #dfeafc;
  --panel: #ffffff;
  --text: #10182b;
  --text-muted: #5b6577;
  --accent: #2774e8;
  --accent-soft: rgba(39, 116, 232, 0.12);
  --border: rgba(16, 24, 43, 0.12);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.82);
  --max-width: 1200px;
  --nav-height: 84px;
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0 0 0.4em;
  text-transform: uppercase;
}

h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

p { color: var(--text-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: transparent;
  color: var(--accent);
}

/* Op de blauwe verloop-secties zou "transparant + blauwe tekst" onleesbaar
   worden tegen de blauwe achtergrond -- daar krijgt de hover-status een
   witte achtergrond zodat de knop zichtbaar blijft. */
.bg-alt .btn-primary:hover {
  background: #ffffff;
  color: var(--accent);
  border-color: #ffffff;
}

/* Op de sectie met achtergrondvideo kan de knop wegvallen tegen wisselend
   beeldmateriaal -- een witte outline + zachte gloed houdt hem zichtbaar. */
.history-video-section .btn-primary {
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.history-video-section .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.2);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Ghost-knoppen die over een foto met donkere overlay liggen (hero/cta-banner)
   moeten licht blijven, ongeacht het algemene kleurenschema. */
.hero-content .btn-ghost,
.cta-banner .btn-ghost {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero-content .btn-ghost:hover,
.cta-banner .btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(39, 116, 232, 0.28);
}

.btn:active { transform: translateY(0); }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color 0.3s ease;
}

.site-header.is-scrolled .logo,
body.nav-open .logo { color: var(--text); }

.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.site-header.is-scrolled .nav-links a,
body.nav-open .nav-links a { color: var(--text); }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-links a.is-active { color: var(--accent) !important; }

.nav-cta { display: flex; align-items: center; gap: 20px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--on-dark);
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.3s ease;
}

.site-header.is-scrolled .nav-toggle span,
body.nav-open .nav-toggle span { background: var(--text); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,11,22,0.35) 0%, rgba(7,11,22,0.4) 40%, rgba(6,10,20,0.96) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 12% 100%, rgba(39, 116, 232, 0.28), transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
  width: 100%;
  color: var(--on-dark);
}

.hero-content h1 { color: var(--on-dark); margin-bottom: 0.1em; }

.hero-tagline {
  max-width: 560px;
  font-size: 1.1rem;
  margin-bottom: 32px;
  color: var(--on-dark-muted);
}

.hero.hero-sm {
  min-height: 56vh;
  align-items: flex-end;
}

.hero.hero-sm .hero-content { padding-bottom: 64px; }

.scroll-cue {
  position: absolute;
  bottom: 32px;
  right: 40px;
  z-index: 2;
  color: var(--on-dark-muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll-cue::after {
  content: '';
  width: 1px;
  height: 50px;
  background: var(--on-dark-muted);
}

/* ---------- Decoratief vinyl-accent (homepage hero) ---------- */
.vinyl-deco {
  position: absolute;
  right: 6%;
  bottom: 18%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(39, 116, 232, 0.3);
  background:
    repeating-radial-gradient(circle at center, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1.5px, transparent 1.5px, transparent 6px),
    radial-gradient(circle at center, #101a2c 0%, #101a2c 28%, #070b14 29%, #070b14 100%);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  animation: vinyl-spin 14s linear infinite;
}

.vinyl-deco::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .vinyl-deco { width: 90px; height: 90px; right: 5%; bottom: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-deco { animation: none; }
}

/* ---------- Sections ---------- */
section { padding: 120px 0; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 56px;
}

.section-header p { max-width: 460px; margin: 0; }

.bg-alt {
  position: relative;
  background: linear-gradient(135deg, #00386a 0%, #2774e8 100%);
  overflow: hidden;
}

.bg-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 85% at 12% 10%, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}

.bg-alt:nth-of-type(even)::before {
  background: radial-gradient(65% 85% at 88% 90%, rgba(255, 255, 255, 0.16), transparent 60%);
}

.bg-alt > * {
  position: relative;
  z-index: 1;
}

.bg-alt .section-header h2,
.bg-alt .section-header p {
  color: var(--on-dark);
}

.bg-alt .section-header p { color: var(--on-dark-muted); }

/* ---------- About teaser / grid ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split img { border-radius: 4px; }

.split-media { position: relative; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ---------- Photo strip / gallery ---------- */

.photo-strip a, .gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  position: relative;
}

.photo-strip img, .gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-strip a:hover img, .gallery-grid a:hover img {
  transform: scale(1.06);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-grid .wide { grid-column: span 2; aspect-ratio: 8 / 5; }

/* ---------- Eerdere optredens (agenda pagina, met bijschrift) ---------- */
.bg-alt .eyebrow { color: #9cc3ff; }
.bg-alt .eyebrow::before { background: #9cc3ff; }

.history-video-section { position: relative; }

.section-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 56, 106, 0.85) 0%, rgba(39, 116, 232, 0.72) 100%);
}

.history-heading-wrap { margin-bottom: 40px; }
.history-heading-wrap h2 { margin: 0; }
.bg-alt .history-heading-wrap h2 { color: var(--on-dark); }

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.history-item {
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 20, 50, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.history-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 20, 50, 0.2);
}

.history-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.history-photo a { display: block; width: 100%; height: 100%; }

.history-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.history-item:hover .history-photo img { transform: scale(1.08); }

.history-date-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 20, 50, 0.68);
  backdrop-filter: blur(3px);
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
}

.history-date-badge .hd-day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.history-date-badge .hd-month {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.history-body { padding: 16px 16px 20px; }

.history-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.history-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 8px;
}

.history-meta svg { flex-shrink: 0; }

/* ---------- Crew ---------- */
/* auto-fit i.p.v. een vast aantal kolommen: bij 1 of 2 crewleden vullen de
   kaarten de volle breedte (geen leeg gat), bij 3 of meer worden het
   automatisch maximaal 3 kaarten per rij die daarna doorschuiven naar een
   nieuwe rij. */
.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.crew-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.crew-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(16, 24, 43, 0.14);
}

.crew-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-alt);
}

.crew-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crew-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--accent);
  background: linear-gradient(160deg, var(--bg-alt), var(--panel));
}

/* De foto vloeit onderaan over in de kleur van het infoblok. */
.crew-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(18, 27, 46, 0) 0%, var(--panel) 90%);
  pointer-events: none;
}

.crew-info {
  position: relative;
  z-index: 2;
  margin-top: -38px;
  padding: 0 24px 26px;
}

.crew-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
}

.crew-role {
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 8px;
}

.crew-bio {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 12px;
}

.crew-socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.crew-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.crew-socials a svg { width: 16px; height: 16px; }
.crew-socials a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Upcoming events (lijst) ---------- */
.event-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.event-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.event-row:hover { background: rgba(16, 24, 43, 0.035); }

.event-date {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1;
}

.event-date span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 4px;
}

.event-name { font-weight: 600; font-size: 1.05rem; }
.event-loc { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(16, 24, 43, 0.14);
}

.card img { aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Evenement-categorieën carousel ---------- */
.category-carousel {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  margin-top: 40px;
}

.category-carousel-wrap { padding-top: 32px; }

.category-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 140% at 15% 20%, rgba(39, 116, 232, 0.35), transparent 60%), var(--bg-alt);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.category-slide.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.category-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 10, 20, 0.88) 0%, rgba(6, 10, 20, 0.62) 45%, rgba(6, 10, 20, 0.25) 100%);
}

.category-slide-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.category-slide-content h3 {
  font-family: var(--font-display);
  font-size: 3.4rem;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  padding-top: 28px;
  position: relative;
  color: var(--on-dark);
}

.category-slide-content h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.category-slide-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 560px;
}

.category-carousel-dots {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.category-dot:hover { border-color: var(--accent); }

.category-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

@media (max-width: 700px) {
  .category-carousel { min-height: 640px; }
  .category-slide-content h3 { font-size: 2.5rem; }
}

/* ---------- Bedrijfslogo's carousel (homepage) ---------- */
.logo-carousel-section { overflow: hidden; padding: 64px 0; }

.logo-carousel-section .section-header { margin-bottom: 32px; }

.diagonal-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}

.diagonal-edge-top {
  top: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 55%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 100%);
}

.diagonal-edge-bottom {
  bottom: 0;
  background: linear-gradient(315deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 55%, transparent 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 62%, 0 0);
}

.logo-carousel {
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logo-carousel-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: logo-scroll 34s linear infinite;
}

.logo-carousel:hover .logo-carousel-track { animation-play-state: paused; }

.logo-carousel-item {
  flex-shrink: 0;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-carousel-item img {
  height: 440px;
  width: auto;
  max-width: none;
  flex: none;
  margin: 0 -20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.logo-carousel-item img:hover {
  transform: scale(1.05);
  opacity: 1;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track { animation: none; }
}

/* ---------- Contact / booking form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}

.contact-info-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.contact-info-item .label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.contact-info-item .value { font-size: 1.15rem; font-weight: 600; }

.social-row { display: flex; gap: 16px; margin-top: 32px; }

.social-row a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  font-size: 0.8rem;
  font-weight: 700;
}

.social-row a svg { width: 19px; height: 19px; }
.social-row a:hover { border-color: var(--accent); color: var(--accent); }

form { display: grid; gap: 20px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

input, select, textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

textarea { resize: vertical; min-height: 120px; }

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.form-section {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 20px;
}

.form-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.form-section h3 {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}

.form-subsection {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
}

.form-subsection-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
  padding: 0;
}

.checkbox-item-block {
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.checkbox-item-block input[type="checkbox"] {
  margin-top: 3px;
}

.form-alert {
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.form-alert ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.form-alert-success {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.form-alert-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}


/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  padding: 80px 56px;
  overflow: hidden;
  text-align: center;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(9,16,32,0.78), rgba(6,10,20,0.7));
}

.cta-banner > * { position: relative; z-index: 2; }
.cta-banner .btn-row { justify-content: center; }
.cta-banner h2 { color: var(--on-dark); }
.cta-banner p { color: var(--on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid #00386a;
  padding: 56px 0 32px;
  background: #00386a;
  color: #ffffff;
}

.site-footer .logo { color: #ffffff; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  align-items: start;
}

.footer-col h4 {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-col a { color: #ffffff; transition: color 0.2s ease; }
.footer-col a:hover { color: #9cc3ff; }

.footer-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.92rem;
}

.footer-social-row.social-row {
  margin-top: 0;
  gap: 10px;
}

.footer-social-row.social-row a {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.35);
}

.footer-social-row.social-row a:hover {
  border-color: #9cc3ff;
  color: #9cc3ff;
}

.footer-social-row.social-row a svg { width: 16px; height: 16px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

/* ---------- Lightbox (media pagina) ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 7, 0.94);
  padding: 40px;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1100px, 90vw);
  max-height: 90vh;
}

.lightbox img {
  max-width: min(1100px, 90vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: block;
}

/* Bijschrift als glazen overlay-balk die over de onderkant van de foto ligt */
.lightbox-caption {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
  padding: 40px 28px 22px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to top, rgba(6, 10, 20, 0.95) 0%, rgba(6, 10, 20, 0.75) 60%, transparent 100%);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.lightbox.is-open .lightbox-caption { opacity: 1; transform: translateY(0); }

.lightbox-caption-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-dark);
  line-height: 1.1;
  position: relative;
  padding-left: 16px;
}

.lightbox-caption-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
}

.lightbox-caption-meta {
  margin-top: 6px;
  padding-left: 16px;
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 700px) {
  .lightbox-caption { padding: 28px 18px 16px; }
  .lightbox-caption-title { font-size: 1.15rem; }
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--on-dark);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lightbox-close {
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 1.8rem;
  line-height: 1;
}

.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }

.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.4rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.99);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal :is(.card-grid, .crew-grid, .gallery-grid, .history-grid, .photo-strip) > * {
    transition: none !important;
  }
}

/* Gestaffelde entrance-animatie voor grid-items binnen een reveal-sectie */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; }

  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-media { order: -1; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .wide { grid-column: span 2; }
  .stat-row { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .event-row {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
  }

  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 80px 0; }
}

/* Mobile nav open state */
body.nav-open .nav-links {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--bg);
  padding: 32px 24px;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 32px rgba(16, 24, 43, 0.12);
}

body.nav-open .nav-cta .btn { display: inline-flex; }

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Veelgestelde vragen (FAQ) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-answer p {
  margin: 0;
  padding-bottom: 20px;
  color: var(--text-muted);
  line-height: 1.65;
}

.faq-item.is-open .faq-answer { max-height: 400px; }

/* ---------- Reviews (homepage) ---------- */
.reviews-section {
  position: relative;
  overflow: hidden;
  background: #05070c;
  padding: 110px 0;
}

.reviews-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.55;
}

.reviews-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #05070c 0%, rgba(5, 7, 12, 0.92) 40%, rgba(6, 12, 24, 0.55) 68%, rgba(6, 12, 24, 0.25) 100%);
}

.reviews-inner { position: relative; z-index: 1; }

.reviews-header { position: relative; margin-bottom: 44px; }

.reviews-ghost-text {
  position: absolute;
  top: -46px;
  left: -4px;
  font-family: var(--font-display);
  font-size: 5.5rem;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(120, 170, 255, 0.16);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.reviews-title {
  position: relative;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #ffffff;
  text-shadow: 0 0 24px rgba(79, 156, 255, 0.45);
  margin: 0;
}

.reviews-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.reviews-divider-line {
  width: 48px;
  height: 1px;
  background: rgba(120, 170, 255, 0.4);
  display: inline-block;
}

.reviews-divider-icon { color: #4f9cff; flex-shrink: 0; }

.reviews-carousel {
  position: relative;
  min-height: 340px;
  max-width: 560px;
}

.review-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  background: rgba(15, 22, 38, 0.72);
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow: 0 0 40px rgba(40, 100, 220, 0.18);
}

.review-card.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.review-quote-icon {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4rem;
  line-height: 1;
  color: #4f9cff;
  margin-bottom: 4px;
}

.review-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.review-stars { margin-bottom: 16px; }

.review-star {
  color: rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
  margin-right: 2px;
}

.review-star.is-filled { color: #4f9cff; }

.review-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-dots {
  position: absolute;
  bottom: -40px;
  left: 0;
  display: flex;
  gap: 10px;
}

.review-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
}

.review-dot.is-active { background: #4f9cff; }

.reviews-average {
  margin-top: 96px;
  text-align: center;
}

.reviews-average-label {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  font-size: 1rem;
  margin-bottom: 18px;
}

.reviews-average-stars { display: flex; align-items: center; justify-content: center; gap: 10px; }

.review-star-lg { font-size: 1.8rem; }

@media (max-width: 700px) {
  .reviews-ghost-text { display: none; }
  .reviews-carousel { max-width: 100%; }
}

/* ---------- FAQ-pagina (podium-stijl) ---------- */
.faq-stage {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: calc(var(--nav-height) + 70px) 0 110px;
  background:
    radial-gradient(60% 45% at 8% 4%, rgba(39, 116, 232, 0.45), transparent 62%),
    radial-gradient(60% 45% at 92% 4%, rgba(39, 116, 232, 0.45), transparent 62%),
    radial-gradient(80% 40% at 50% 100%, rgba(39, 116, 232, 0.28), transparent 70%),
    linear-gradient(180deg, #050a16 0%, #070d1f 55%, #040712 100%);
  color: var(--on-dark);
}

.faq-stage::before,
.faq-stage::after {
  content: '';
  position: absolute;
  top: 0;
  width: 220px;
  height: 520px;
  background: linear-gradient(180deg, rgba(120, 180, 255, 0.35), transparent 85%);
  filter: blur(24px);
  opacity: 0.55;
  pointer-events: none;
}
.faq-stage::before { left: 3%; transform: rotate(-24deg); transform-origin: top left; }
.faq-stage::after { right: 3%; transform: rotate(24deg); transform-origin: top right; }

.faq-stage .container { position: relative; z-index: 2; }

.faq-head { text-align: center; margin-bottom: 56px; }

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  color: #4b95ff;
  text-transform: uppercase;
}
.faq-eyebrow::before,
.faq-eyebrow::after {
  content: '';
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2774e8);
}
.faq-eyebrow::after { transform: scaleX(-1); }

.faq-head h1 {
  color: #fff;
  font-size: clamp(3rem, 9vw, 6.5rem);
  margin: 10px 0 8px;
  text-shadow: 0 0 40px rgba(39, 116, 232, 0.45);
}

.faq-head p {
  color: var(--on-dark-muted);
  font-size: 1.15rem;
  margin: 0 auto;
  max-width: 560px;
}

.faq-eq {
  display: block;
  margin: 28px auto 0;
  width: min(420px, 80%);
  color: #2f7dff;
  filter: drop-shadow(0 0 8px rgba(47, 125, 255, 0.8));
}

.faq-stage .faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  align-items: start;
  max-width: 1080px;
}

.faq-stage .faq-item {
  background: rgba(12, 20, 40, 0.72);
  border: 1px solid rgba(120, 160, 230, 0.28);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.faq-stage .faq-item:hover { border-color: rgba(75, 149, 255, 0.7); }

.faq-stage .faq-item.is-open {
  border-color: #3f8cff;
  background: rgba(14, 28, 60, 0.85);
  box-shadow: 0 0 0 1px rgba(63, 140, 255, 0.5), 0 0 28px rgba(39, 116, 232, 0.4);
}

.faq-stage .faq-question {
  color: #fff;
  padding: 18px 20px;
  font-size: 1.05rem;
}

.faq-stage .faq-icon {
  width: 34px;
  height: 34px;
  background: #2774e8;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 0 14px rgba(39, 116, 232, 0.7);
}

.faq-stage .faq-answer { padding: 0 20px; }
.faq-stage .faq-answer p { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 800px) {
  .faq-stage .faq-list { grid-template-columns: 1fr; }
  .faq-stage::before, .faq-stage::after { opacity: 0.3; }
}

/* ---------- Logo (afbeelding) ---------- */
.logo.logo-img { display: inline-flex; align-items: center; }
.logo.logo-img img {
  display: block;
  height: 52px;
  width: auto;
  transition: filter 0.3s ease;
}
/* Wit logo wordt donker op het lichte menu (na scrollen / open mobiel menu) */
.site-header.is-scrolled .logo.logo-img img,
body.nav-open .logo.logo-img img { filter: brightness(0); }
.site-footer .logo.logo-img img { height: 72px; }
@media (max-width: 800px) {
  .logo.logo-img img { height: 42px; }
}

/* FAQ: foto die aan de rechterkant in de donkere achtergrond vervloeit */
.faq-photo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh; /* vaste hoogte: de foto mag niet meeschalen als een antwoord openklapt */
  width: 66%;
  background-size: auto 94%;
  background-repeat: no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(to right, #000 45%, transparent 100%),
    linear-gradient(to bottom, #000 72%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 45%, transparent 100%),
    linear-gradient(to bottom, #000 72%, transparent 97%);
  mask-composite: intersect;
}
.faq-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 10, 22, 0.35), rgba(39, 116, 232, 0.18));
  mix-blend-mode: multiply;
}
@media (max-width: 800px) {
  .faq-photo { width: 100%; opacity: 0.35; background-size: cover; }
}

/* FAQ: vragen links, in het vak naast de foto (ca. 7% - 66% van de schermbreedte); titel blijft gecentreerd */
.faq-stage .faq-list {
  width: 59vw;
  max-width: none;
  margin-left: auto;
  margin-right: calc(50% - 43vw);
  gap: 20px 24px;
}
.faq-stage .faq-question { padding: 24px 28px; font-size: 1.15rem; }
.faq-stage .faq-answer { padding: 0 28px; }
@media (max-width: 1000px) {
  .faq-stage .faq-list { width: auto; margin: 0 auto; }
}
@media (max-width: 800px) {
  .faq-stage .faq-list { max-width: none; }
}

/* =====================================================================
   PODIUM-THEMA — dezelfde donkerblauwe stijl als de FAQ-pagina, voor de hele site
   ===================================================================== */
:root {
  --bg: #050a16;
  --bg-alt: #0a1530;
  --panel: rgba(12, 20, 40, 0.78);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.74);
  --accent: #2f7dff;
  --accent-soft: rgba(47, 125, 255, 0.2);
  --border: rgba(120, 160, 230, 0.28);
}

body {
  background:
    radial-gradient(55% 40% at 6% 0%, rgba(39, 116, 232, 0.35), transparent 62%),
    radial-gradient(55% 40% at 94% 0%, rgba(39, 116, 232, 0.35), transparent 62%),
    linear-gradient(180deg, #050a16 0%, #070d1f 55%, #040712 100%);
  background-attachment: fixed;
}

/* Menu: donker glas na het scrollen, tekst en logo blijven wit */
.site-header.is-scrolled {
  background: rgba(5, 10, 22, 0.88);
  box-shadow: 0 1px 0 var(--border);
}
.site-header.is-scrolled .logo.logo-img img,
body.nav-open .logo.logo-img img { filter: none; }

/* Kaarten / panelen: donker glas met blauwe rand */
.card, .faq-item, .crew-card {
  backdrop-filter: blur(6px);
}

/* Kopblok van de subpagina's in dezelfde stijl als de FAQ: gecentreerd, label met lijntjes, gloeiende titel, equalizer */
.hero.hero-sm { align-items: center; min-height: 58vh; }
.hero.hero-sm .hero-content {
  text-align: center;
  padding-top: calc(var(--nav-height) + 20px);
  padding-bottom: 56px;
}
.hero.hero-sm .eyebrow {
  justify-content: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  color: #4b95ff;
}
.hero.hero-sm .eyebrow::before,
.hero.hero-sm .eyebrow::after {
  content: '';
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2774e8);
}
.hero.hero-sm .eyebrow::after { transform: scaleX(-1); }
.hero.hero-sm h1 { text-shadow: 0 0 40px rgba(39, 116, 232, 0.45); }
.hero.hero-sm .hero-content::after {
  content: '';
  display: block;
  height: 46px;
  width: min(420px, 80%);
  margin: 22px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 50' fill='none'%3E%3Cpath d='M0 25h130M290 25h130' stroke='%232f7dff' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M152 20v10M160 14v22M168 19v12M176 9v32M184 16v18M192 4v42M200 12v26M208 4v42M216 16v18M224 9v32M232 19v12M240 14v22M248 20v10' stroke='%232f7dff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(47, 125, 255, 0.8));
}
.hero.hero-sm .eyebrow { color: #7db4ff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }

/* Footer: strak zwart, minimalistisch (festival/DJ-stijl) */
.site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-col h4 { color: rgba(255, 255, 255, 0.55); letter-spacing: 0.22em; }
.footer-nav-links { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 600; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }
.site-footer .footer-social-row.social-row a { border-color: rgba(255, 255, 255, 0.45); }

/* Liggende foto's bij "Wie is Christian" / bio: breed boven de tekst */
.split.has-landscape { grid-template-columns: 1fr; gap: 40px; }
.split.has-landscape .split-media { order: -1; }
.split.has-landscape .split-media img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 10px;
}
.split.has-landscape > div:not(.split-media) { max-width: 820px; }

/* ---------- Tekst over een foto die in de donkere achtergrond vervloeit ---------- */
.blend-section { position: relative; overflow: hidden; padding: 80px 0; }
.blend-section .split { position: static; grid-template-columns: minmax(0, 50%) 1fr; }
.blend-section .split-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 8%, #000 30%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 8%, #000 30%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.blend-section .split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 0;
  max-height: none;
  opacity: 0.9;
}
.blend-section .split > div:not(.split-media) { position: relative; z-index: 2; max-width: none; }
.blend-section .split > div:not(.split-media) p { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.blend-section .split.has-landscape { grid-template-columns: minmax(0, 50%) 1fr; }
.blend-section .split.has-landscape .split-media { order: 0; }

@media (max-width: 900px) {
  .blend-section { padding: 0 0 70px; }
  .blend-section .split, .blend-section .split.has-landscape { grid-template-columns: 1fr; gap: 0; }
  .blend-section .split-media {
    position: relative;
    width: 100%;
    height: 340px;
    order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .blend-section .split > div:not(.split-media) { margin-top: -20px; padding: 0 4px; }
}
/* Geen transform op het blok zelf, anders blijft de foto binnen de container en loopt hij niet tot de schermrand */
.blend-section .split.reveal,
.blend-section .split.reveal.is-visible { transform: none; will-change: opacity; }

/* Duidelijke scheiding tussen de kopfoto (hero) en het volgende blok: gloeiende blauwe lijn */
.blend-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, #2f7dff 22%, #7db4ff 50%, #2f7dff 78%, transparent 100%);
  box-shadow: 0 0 18px 2px rgba(47, 125, 255, 0.65);
}

/* Grote schermen (4K e.d.): foto blijft aan het tekstblok vast zitten en groeit niet mee met het scherm */
@media (min-width: 1600px) {
  .blend-section .split-media {
    width: 700px;
    right: calc(50% - 640px);
    -webkit-mask-image:
      linear-gradient(to left, #000 38%, transparent 100%),
      linear-gradient(to right, #000 80%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, transparent 8%, #000 30%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(to left, #000 38%, transparent 100%),
      linear-gradient(to right, #000 80%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, transparent 8%, #000 30%, #000 82%, transparent 100%);
  }
}

/* Zachtere blend: eased verlopen + organische vignet in plaats van harde lineaire randen */
.blend-section .split-media {
  -webkit-mask-image:
    radial-gradient(ellipse 88% 66% at 78% 48%, #000 42%, rgba(0,0,0,.88) 55%, rgba(0,0,0,.6) 67%, rgba(0,0,0,.3) 79%, rgba(0,0,0,.1) 90%, transparent 100%),
    linear-gradient(to left, #000 18%, rgba(0,0,0,.94) 32%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.52) 58%, rgba(0,0,0,.27) 72%, rgba(0,0,0,.09) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 88% 66% at 78% 48%, #000 42%, rgba(0,0,0,.88) 55%, rgba(0,0,0,.6) 67%, rgba(0,0,0,.3) 79%, rgba(0,0,0,.1) 90%, transparent 100%),
    linear-gradient(to left, #000 18%, rgba(0,0,0,.94) 32%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.52) 58%, rgba(0,0,0,.27) 72%, rgba(0,0,0,.09) 86%, transparent 100%);
  mask-composite: intersect;
}
/* Kleurafstemming: foto krijgt dezelfde donkerblauwe toon als de achtergrond */
.blend-section .split-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 10, 22, 0.75) 0%, rgba(5, 10, 22, 0.25) 45%, rgba(5, 10, 22, 0) 70%),
    linear-gradient(180deg, rgba(10, 30, 80, 0.18), rgba(5, 10, 22, 0.25));
}
@media (min-width: 1600px) {
  .blend-section .split-media {
    -webkit-mask-image:
      radial-gradient(ellipse 66% 64% at 66% 48%, #000 40%, rgba(0,0,0,.88) 53%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.3) 77%, rgba(0,0,0,.1) 89%, transparent 100%),
      linear-gradient(to left, #000 25%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.25) 80%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 66% 64% at 66% 48%, #000 40%, rgba(0,0,0,.88) 53%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.3) 77%, rgba(0,0,0,.1) 89%, transparent 100%),
      linear-gradient(to left, #000 25%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.25) 80%, transparent 100%);
  }
}
@media (max-width: 900px) {
  .blend-section .split-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
  }
}

/* Lichtere foto en een steviger, korter verloop (geen lange donkere sluier) */
.blend-section .split-media::after { display: none; }
.blend-section .split-media img { opacity: 1; filter: brightness(1.08) saturate(1.05); }
.blend-section .split-media {
  -webkit-mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%);
  mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%);
}
@media (min-width: 1600px) {
  .blend-section .split-media {
    -webkit-mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%);
    mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%);
  }
}

/* Onderkant van de foto zacht laten uitlopen zodat er geen harde rand tegen de footer ontstaat */
.blend-section .split-media {
  -webkit-mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%),
    linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%),
    linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
  mask-composite: intersect, intersect;
}
@media (min-width: 1600px) {
  .blend-section .split-media {
    -webkit-mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%),
      linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%),
      linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
  }
}
@media (max-width: 900px) {
  .blend-section .split-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
}

/* Liggende foto's in een blend-sectie vullen de volle hoogte (de 560px-limiet geldt alleen buiten de blend) */
.blend-section .split.has-landscape .split-media img { max-height: none; height: 100%; border-radius: 0; }

/* Alle vier de randen van de foto lopen zacht uit (links, boven, onder én rechts) */
.blend-section .split-media,
.blend-section .split.has-landscape .split-media {
  -webkit-mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.8) 72%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%),
    linear-gradient(to right, #000 70%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.45) 89%, rgba(0,0,0,.12) 96%, transparent 100%);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask-image:
    radial-gradient(ellipse 100% 78% at 82% 50%, #000 60%, rgba(0,0,0,.85) 72%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
    linear-gradient(to left, #000 42%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.2) 80%, transparent 94%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.8) 72%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%),
    linear-gradient(to right, #000 70%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.45) 89%, rgba(0,0,0,.12) 96%, transparent 100%);
  mask-composite: intersect, intersect, intersect;
}
@media (min-width: 1600px) {
  .blend-section .split-media,
  .blend-section .split.has-landscape .split-media {
    -webkit-mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%),
      linear-gradient(to bottom, #000 62%, rgba(0,0,0,.8) 72%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%),
      linear-gradient(to right, #000 70%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.45) 89%, rgba(0,0,0,.12) 96%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 70% 72% at 66% 50%, #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.18) 92%, transparent 100%),
      linear-gradient(to left, #000 45%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.18) 84%, transparent 96%),
      linear-gradient(to bottom, #000 62%, rgba(0,0,0,.8) 72%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.15) 93%, transparent 100%),
      linear-gradient(to right, #000 70%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.45) 89%, rgba(0,0,0,.12) 96%, transparent 100%);
  }
}
@media (max-width: 900px) {
  .blend-section .split-media,
  .blend-section .split.has-landscape .split-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.2) 85%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
}

/* "Where Deejay Christian Has Set the Stage": bovenste en onderste rand lopen zacht over in de donkere secties */
.logo-carousel-section {
  padding: 130px 0;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.28) 12%, rgba(0,0,0,.55) 19%, rgba(0,0,0,.82) 26%, #000 34%,
    #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.55) 81%, rgba(0,0,0,.28) 88%, rgba(0,0,0,.08) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.28) 12%, rgba(0,0,0,.55) 19%, rgba(0,0,0,.82) 26%, #000 34%,
    #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.55) 81%, rgba(0,0,0,.28) 88%, rgba(0,0,0,.08) 94%, transparent 100%);
}
.logo-carousel-section .diagonal-edge { display: none; }
@media (max-width: 800px) { .logo-carousel-section { padding: 90px 0; } }
.logo-carousel-section {
  padding: 180px 0 170px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.32) 10%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.88) 20%, #000 25%,
    #000 76%, rgba(0,0,0,.88) 81%, rgba(0,0,0,.62) 86%, rgba(0,0,0,.32) 91%, rgba(0,0,0,.1) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.32) 10%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.88) 20%, #000 25%,
    #000 76%, rgba(0,0,0,.88) 81%, rgba(0,0,0,.62) 86%, rgba(0,0,0,.32) 91%, rgba(0,0,0,.1) 96%, transparent 100%);
}

/* Meer ruimte tussen de secties */
section:not(.hero):not(.blend-section):not(.reviews-section):not(.logo-carousel-section):not(.faq-stage):not(.category-carousel-wrap) { padding: 150px 0; }
.blend-section { padding: 110px 0; }
.reviews-section { padding: 140px 0; }
@media (max-width: 900px) {
  section:not(.hero):not(.blend-section):not(.reviews-section):not(.logo-carousel-section):not(.faq-stage):not(.category-carousel-wrap) { padding: 100px 0; }
  .reviews-section { padding: 100px 0; }
}
section.category-carousel-wrap { padding: 32px 0 150px; }
@media (max-width: 900px) { section.category-carousel-wrap { padding: 32px 0 100px; } }

/* Extra ruimte tussen het "Wie is Christian"-blok en de logo-band, zodat ze niet in elkaar overlopen */
.blend-section { margin-bottom: 110px; }
@media (max-width: 900px) { .blend-section { margin-bottom: 50px; } }

/* Gloeiende blauwe scheidingslijn bovenaan een sectie (zelfde stijl als onder de kopfoto's) */
/* Op de felblauwe achtergrond valt een blauwe lijn weg: daar een lichtere lijn gebruiken */

/* =====================================================================
   Samengevoegde sectie: categorie-carrousel (links) + reviews (rechts)
   ===================================================================== */

/* Blauwe gloeiende scheidingslijn bovenaan een donkere sectie (onder de kopfoto) */
.line-top-blue { position: relative; }
.line-top-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, #2f7dff 22%, #7db4ff 50%, #2f7dff 78%, transparent 100%);
  box-shadow: 0 0 18px 2px rgba(47, 125, 255, 0.65);
}

/* Gecombineerde sectie: carrousel bovenaan, reviews eronder (onder elkaar) */

/* Reviews: foto loopt boven en onder zacht over in de secties ervoor en erna */
.reviews-section {
  padding: 210px 0;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.55) 15%, rgba(0,0,0,.82) 20%, #000 27%,
    #000 73%, rgba(0,0,0,.82) 80%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.28) 90%, rgba(0,0,0,.08) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.55) 15%, rgba(0,0,0,.82) 20%, #000 27%,
    #000 73%, rgba(0,0,0,.82) 80%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.28) 90%, rgba(0,0,0,.08) 95%, transparent 100%);
}
@media (max-width: 900px) { .reviews-section { padding: 150px 0; } }

/* Reviews-foto helderder */
.reviews-bg { opacity: 0.95; filter: brightness(1.15) saturate(1.05); }
.reviews-overlay {
  background: linear-gradient(90deg, rgba(5, 7, 12, 0.86) 0%, rgba(5, 7, 12, 0.62) 38%, rgba(6, 12, 24, 0.2) 66%, rgba(6, 12, 24, 0) 100%);
}

/* Categorie-carrousel op de homepage: blauwe lijn bovenaan, foto's lopen onderaan zacht uit tot aan de footer */
section.category-carousel-wrap.line-top-blue { padding: 90px 0 0; }
.category-carousel-wrap .category-carousel { margin-top: 0; min-height: 700px; overflow: visible; }
.category-carousel-wrap .category-slide {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.88) 56%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.36) 76%, rgba(0,0,0,.16) 86%, rgba(0,0,0,.05) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.88) 56%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.36) 76%, rgba(0,0,0,.16) 86%, rgba(0,0,0,.05) 94%, transparent 100%);
}
.category-carousel-wrap .category-carousel-dots { bottom: 36px; }
@media (max-width: 900px) {
  section.category-carousel-wrap.line-top-blue { padding: 60px 0 0; }
  .category-carousel-wrap .category-carousel { min-height: 560px; }
}

/* Categorie-carrousel: foto's lopen zowel boven als onder zacht uit (geen lijn meer) */
section.category-carousel-wrap.category-fade { padding: 40px 0 0; }
.category-carousel-wrap.category-fade .category-carousel { min-height: 760px; }
.category-carousel-wrap.category-fade .category-slide {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.16) 10%, rgba(0,0,0,.36) 15%, rgba(0,0,0,.62) 20%, rgba(0,0,0,.88) 26%, #000 33%,
    #000 52%, rgba(0,0,0,.88) 59%, rgba(0,0,0,.62) 67%, rgba(0,0,0,.36) 75%, rgba(0,0,0,.16) 84%, rgba(0,0,0,.05) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.05) 5%, rgba(0,0,0,.16) 10%, rgba(0,0,0,.36) 15%, rgba(0,0,0,.62) 20%, rgba(0,0,0,.88) 26%, #000 33%,
    #000 52%, rgba(0,0,0,.88) 59%, rgba(0,0,0,.62) 67%, rgba(0,0,0,.36) 75%, rgba(0,0,0,.16) 84%, rgba(0,0,0,.05) 93%, transparent 100%);
}
@media (max-width: 900px) {
  section.category-carousel-wrap.category-fade { padding: 30px 0 0; }
  .category-carousel-wrap.category-fade .category-carousel { min-height: 600px; }
}

/* CTA op de homepage met dezelfde donkere achtergrond als de rest (geen felblauwe band) */
.cta-dark { background: transparent; }

/* CTA helder: foto duidelijk zichtbaar, alleen een zachte donkere gloed achter de tekst voor de leesbaarheid */
.cta-dark .cta-banner::before {
  background:
    radial-gradient(55% 70% at 50% 50%, rgba(6, 10, 20, 0.62) 0%, rgba(6, 10, 20, 0.3) 60%, rgba(6, 10, 20, 0.05) 100%);
}
.cta-dark .cta-banner { filter: brightness(1.12) saturate(1.08); box-shadow: 0 0 44px rgba(40, 110, 255, 0.22); }
.cta-dark .cta-banner h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.cta-dark .cta-banner p { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.cta-dark .cta-banner .eyebrow { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.cta-dark .cta-banner .eyebrow::before { background: #ffffff; }

/* Review-tekstvak iets breder */
.reviews-carousel { max-width: 700px; }
.review-text { -webkit-line-clamp: 6; }
.reviews-carousel { min-height: 290px; }

/* Reviews-sectie minder hoog (kortere overgang en minder ruimte) */
.reviews-section {
  padding: 130px 0;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.32) 8%, rgba(0,0,0,.62) 12%, rgba(0,0,0,.88) 16%, #000 21%,
    #000 79%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.62) 88%, rgba(0,0,0,.32) 92%, rgba(0,0,0,.1) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.32) 8%, rgba(0,0,0,.62) 12%, rgba(0,0,0,.88) 16%, #000 21%,
    #000 79%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.62) 88%, rgba(0,0,0,.32) 92%, rgba(0,0,0,.1) 96%, transparent 100%);
}
.reviews-section .reviews-header { margin-bottom: 32px; }
.reviews-section .reviews-average { margin-top: 70px; }
@media (max-width: 900px) { .reviews-section { padding: 100px 0; } }

/* Reviews: gemiddelde waardering rechts naast het review-kader, duidelijker */
.reviews-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.reviews-row .reviews-carousel { flex: 1 1 700px; max-width: 700px; margin: 0; }
.reviews-row .reviews-average {
  flex: 0 0 300px;
  margin: 0;
  padding: 30px 26px;
  text-align: center;
  background: rgba(10, 18, 40, 0.72);
  border: 1px solid rgba(90, 150, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 0 34px rgba(47, 125, 255, 0.28);
}
.reviews-row .reviews-average-label {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.reviews-average-score {
  font-family: var(--font-display);
  font-size: 5.2rem;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 26px rgba(47, 125, 255, 0.7);
}
.reviews-average-score span { font-size: 1.6rem; margin-left: 6px; color: rgba(255, 255, 255, 0.65); }
.reviews-row .reviews-average-stars { margin: 14px 0 10px; gap: 6px; }
.reviews-row .review-star-lg { font-size: 2.1rem; color: rgba(255, 255, 255, 0.2); }
.reviews-row .review-star-lg.is-filled { color: #19b4ff; text-shadow: 0 0 14px rgba(25, 180, 255, 0.8); }
.reviews-average-count { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 1100px) {
  .reviews-row { flex-direction: column; align-items: stretch; gap: 70px; }
  .reviews-row .reviews-carousel { max-width: none; flex: none; width: 100%; }
  .reviews-row .reviews-average { flex: none; max-width: 420px; width: 100%; margin: 0 auto; }
}

/* Review-kader en waardering even hoog, met meer ruimte ertussen */
.reviews-row { align-items: stretch; gap: 64px; }
.reviews-row .reviews-carousel { min-height: 320px; align-self: stretch; }
.reviews-row .reviews-average {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1100px) {
  .reviews-row { gap: 70px; }
  .reviews-row .reviews-average { align-self: center; }
}
.reviews-row { gap: 110px; }
@media (max-width: 1250px) { .reviews-row { gap: 70px; } }
@media (max-width: 1100px) { .reviews-row { gap: 70px; } }

/* Review-kader links uitgelijnd met de CTA, waardering rechts uitgelijnd met de CTA */
.reviews-row { justify-content: space-between; gap: 40px; width: 100%; }
.reviews-row .reviews-carousel { flex: 0 1 700px; width: 700px; max-width: 700px; margin: 0; }
.reviews-row .reviews-average { flex: 0 0 300px; margin: 0; }
@media (max-width: 1100px) {
  .reviews-row { justify-content: flex-start; }
  .reviews-row .reviews-carousel { width: 100%; max-width: none; flex: none; }
}

/* Logo-band en reviews-sectie even hoog */
.logo-carousel-section,
.reviews-section {
  min-height: 680px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.logo-carousel-section { padding: 90px 0; }
.reviews-section { padding: 90px 0; }
.logo-carousel-section > .container,
.reviews-section > .container { width: 100%; }
@media (max-width: 900px) {
  .logo-carousel-section, .reviews-section { min-height: 0; padding: 90px 0; }
}
.logo-carousel-section, .reviews-section { min-height: 600px; padding-top: 60px; padding-bottom: 60px; }
.reviews-section .reviews-header { margin-bottom: 24px; }
.reviews-section .reviews-row .reviews-carousel { min-height: 300px; }
.logo-carousel-section, .reviews-section { min-height: 650px; padding-top: 80px; padding-bottom: 80px; }
.reviews-section .reviews-header { margin-bottom: 32px; }

/* Logo-band: titel dichter op de logo's en de sectie lager */
.logo-carousel-section { min-height: 540px; padding-top: 60px; padding-bottom: 60px; }
.logo-carousel-section .section-header { margin-bottom: -40px; position: relative; z-index: 3; }
.logo-carousel-section .logo-carousel { margin-top: 0; }

/* Logo-band: minder ruimte onder de logo's */
.logo-carousel-section {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 80px;
  padding-bottom: 10px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.32) 10%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.88) 20%, #000 26%,
    #000 84%, rgba(0,0,0,.8) 89%, rgba(0,0,0,.45) 94%, rgba(0,0,0,.12) 98%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.32) 10%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.88) 20%, #000 26%,
    #000 84%, rgba(0,0,0,.8) 89%, rgba(0,0,0,.45) 94%, rgba(0,0,0,.12) 98%, transparent 100%);
}
@media (max-width: 900px) { .logo-carousel-section { padding-top: 70px; padding-bottom: 10px; } }

/* Label boven de titel: lichtblauw, vet en met een zachte donkere gloed (geen kader), zodat het op elke foto leesbaar blijft */
.hero.hero-sm .eyebrow {
  color: #cfe3ff;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.85), 0 2px 28px rgba(0, 0, 0, 0.8);
}
.hero.hero-sm .eyebrow::before,
.hero.hero-sm .eyebrow::after { background: linear-gradient(90deg, transparent, #7db4ff); box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); }
.hero.hero-sm h1 { text-shadow: 0 3px 22px rgba(0, 0, 0, 0.75), 0 0 40px rgba(39, 116, 232, 0.45); }
/* Iets donkerder in het midden van de kopfoto, achter de tekst */
.hero.hero-sm::before {
  background:
    radial-gradient(55% 60% at 50% 48%, rgba(5, 10, 22, 0.5), rgba(5, 10, 22, 0) 100%),
    linear-gradient(180deg, rgba(7,11,22,0.35) 0%, rgba(7,11,22,0.4) 40%, rgba(6,10,20,0.96) 100%);
}
.hero.hero-sm .eyebrow { font-size: 1.6rem; letter-spacing: 0.3em; }
@media (max-width: 700px) { .hero.hero-sm .eyebrow { font-size: 1.15rem; letter-spacing: 0.2em; } }
.hero.hero-sm .eyebrow { color: #3f8cff; text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 255, 255, 0.25); }
.hero.hero-sm .eyebrow::before, .hero.hero-sm .eyebrow::after { background: linear-gradient(90deg, transparent, #3f8cff); }

/* FAQ-label exact gelijk aan het label op de andere pagina's */
.faq-eyebrow {
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #3f8cff;
  gap: 18px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 255, 255, 0.25);
}
.faq-eyebrow::before, .faq-eyebrow::after { width: 56px; background: linear-gradient(90deg, transparent, #3f8cff); }
@media (max-width: 700px) { .faq-eyebrow { font-size: 1.15rem; letter-spacing: 0.2em; } }

/* =====================================================================
   Call-to-action knop (homepage): groter, met verloop, gloed, pijl en glans
   ===================================================================== */
/* glansstreep die bij hover over de knop veegt */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(125, 180, 255, 0.55), 0 10px 34px rgba(47, 125, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 0 0 1px rgba(160, 205, 255, 0.75), 0 12px 52px rgba(47, 125, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

/* =====================================================================
   CTA als groot tekstelement i.p.v. een knop: titel-achtige tekst met lijn en pijl,
   de hele banner is klikbaar
   ===================================================================== */
.cta-dark .cta-banner .btn-row { margin-top: 6px; justify-content: center; }
/* de hele banner is klikbaar via een onzichtbare laag over het kader */
.cta-dark .cta-banner { cursor: pointer; }

/* CTA: simpel tekstlinkje met pijl (geen knop, geen versiering) */
.cta-dark .cta-banner .btn-row { margin-top: 0; justify-content: center; }
.cta-simple {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-simple span { display: inline-block; transition: transform 0.2s ease; }
.cta-simple:hover { color: #ffffff; border-bottom-color: #3f8cff; }
.cta-simple:hover span { transform: translateX(5px); }
.cta-dark .cta-banner { cursor: default; }

/* Agenda: de video van "Eerdere events" vloeit bovenaan weg in de sectie erboven */
.history-video-section.bg-alt { background: none; overflow: visible; }
.history-video-section.bg-alt::before { display: none; }
.history-video-section .section-bg-video,
.history-video-section .section-bg-overlay {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) 7%, rgba(0, 0, 0, 0.45) 16%, rgba(0, 0, 0, 0.8) 28%, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) 7%, rgba(0, 0, 0, 0.45) 16%, rgba(0, 0, 0, 0.8) 28%, #000 42%);
}
.history-video-section { padding-top: 200px; }
.history-video-section .history-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .history-video-section .history-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .history-video-section .history-grid { grid-template-columns: 1fr; } }

/* Algemene voorwaarden */
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }
.checkbox-item a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.terms-page { padding: calc(var(--nav-height) + 80px) 0 120px !important; }
.terms-wrap { max-width: 820px; }
.terms-page h1 { margin: 0 0 40px; }
.terms-page h3 { margin: 40px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.terms-page p { margin: 0 0 16px; color: var(--text-muted); line-height: 1.8; font-size: 1.02rem; }

/* Homepage-hero: label boven de titel groter en met donkere gloed, zoals op de andere pagina's */
.hero:not(.hero-sm) .hero-content .eyebrow {
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  gap: 16px;
  margin-bottom: 18px;
  color: #3f8cff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 255, 255, 0.25);
}
.hero:not(.hero-sm) .hero-content .eyebrow::before {
  width: 56px;
  background: linear-gradient(90deg, transparent, #3f8cff);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
@media (max-width: 700px) { .hero:not(.hero-sm) .hero-content .eyebrow { font-size: 1.1rem; letter-spacing: 0.2em; } }

/* Homepage-label: iets kleiner, met 3D-effect (opbouw in diepte) zodat het eruit springt */
.hero:not(.hero-sm) .hero-content .eyebrow {
  font-size: 1.2rem;
  letter-spacing: 0.28em;
  color: #e4efff;
  text-shadow:
    1px 1px 0 #3f8cff,
    2px 2px 0 #2f78e6,
    3px 3px 0 #2262c4,
    4px 4px 0 #184c9c,
    5px 5px 0 #103878,
    6px 8px 14px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(63, 140, 255, 0.55);
}
@media (max-width: 700px) {
  .hero:not(.hero-sm) .hero-content .eyebrow {
    font-size: 0.95rem;
    text-shadow: 1px 1px 0 #3f8cff, 2px 2px 0 #2262c4, 3px 3px 0 #184c9c, 4px 6px 10px rgba(0, 0, 0, 0.7), 0 0 18px rgba(63, 140, 255, 0.5);
  }
}

/* Homepage-label: blauwe letters (geen wit) met donkerblauwe 3D-diepte */
.hero:not(.hero-sm) .hero-content .eyebrow {
  color: #4b95ff;
  text-shadow:
    1px 1px 0 #2a6fd6,
    2px 2px 0 #2360c0,
    3px 3px 0 #1b4f9f,
    4px 4px 0 #143f82,
    5px 5px 0 #0e2f66,
    6px 9px 14px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(47, 125, 255, 0.45);
}
@media (max-width: 700px) {
  .hero:not(.hero-sm) .hero-content .eyebrow {
    text-shadow: 1px 1px 0 #2a6fd6, 2px 2px 0 #1b4f9f, 3px 3px 0 #143f82, 4px 6px 10px rgba(0, 0, 0, 0.75), 0 0 16px rgba(47, 125, 255, 0.4);
  }
}

/* Homepage-label: subtielere 3D-diepte */
.hero:not(.hero-sm) .hero-content .eyebrow {
  text-shadow:
    1px 1px 0 #2a6fd6,
    2px 2px 0 #1b4f9f,
    3px 3px 4px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
  .hero:not(.hero-sm) .hero-content .eyebrow {
    text-shadow: 1px 1px 0 #2a6fd6, 2px 2px 0 #1b4f9f, 2px 3px 6px rgba(0, 0, 0, 0.6);
  }
}

/* Homepage-label: terug naar de rustige stijl van de andere pagina's (zonder 3D), iets kleiner */
.hero:not(.hero-sm) .hero-content .eyebrow {
  font-size: 1.2rem;
  color: #3f8cff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 255, 255, 0.25);
}
@media (max-width: 700px) {
  .hero:not(.hero-sm) .hero-content .eyebrow {
    font-size: 0.95rem;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 20px rgba(0, 0, 0, 0.85);
  }
}

/* Homepage-label: puur blauw, zonder witte gloed */
.hero:not(.hero-sm) .hero-content .eyebrow {
  color: #3f8cff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 26px rgba(0, 0, 0, 0.85);
}

/* Homepage-label: een klein beetje kleiner */
.hero:not(.hero-sm) .hero-content .eyebrow { font-size: 1.05rem; }
@media (max-width: 700px) { .hero:not(.hero-sm) .hero-content .eyebrow { font-size: 0.85rem; } }

/* Logo in de carousel met originele kleuren (i.p.v. wit) */
.logo-carousel-item img.keep-color { filter: none; opacity: 1; }

/* Logo-carousel: meer ruimte tussen de logo's (was -20px, nu +20px = 80px extra per tussenruimte) */
.logo-carousel-item img { margin: 0 20px; }

/* Footer: juridische links naast elkaar */
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: #fff; }
.checkbox-item + .form-note a, .form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Logo-carousel: de oorspronkelijke afstand tussen de logo's terug (-20px) */
.logo-carousel-item img { margin: 0 -20px; }

/* Zonder reviews blijft alleen de foto staan */
.reviews-section.reviews-leeg { min-height: 520px; }
@media (max-width: 900px) { .reviews-section.reviews-leeg { min-height: 340px; } }

/* FAQ: vraag niet gevonden, dan mailen */
.faq-cta { max-width: 760px; margin: 64px auto 0; padding: 40px 32px; text-align: center; border: 1px solid rgba(120, 160, 230, 0.28); border-radius: 18px; background: linear-gradient(135deg, rgba(47, 125, 255, 0.16), rgba(6, 12, 24, 0.55)); position: relative; z-index: 2; }
.faq-cta h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.faq-cta p { margin: 0 auto 24px; max-width: 520px; color: var(--on-dark-muted); }
@media (max-width: 600px) { .faq-cta { margin-top: 44px; padding: 32px 22px; } }
.faq-stage .faq-cta { width: 59vw; max-width: none; margin-left: auto; margin-right: calc(50% - 43vw); box-sizing: border-box; }
@media (max-width: 1000px) { .faq-stage .faq-cta { width: auto; margin: 44px auto 0; } }

/* Crew: poster-stijl met schuine fotorand, grote naam op de foto en gloed bij hover */
.crew-grid { gap: 40px; }
.crew-card {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 6px;
  background: #060b18;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
}
.crew-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(47, 125, 255, 0.6), 0 0 54px rgba(47, 125, 255, 0.28);
}
.crew-photo {
  aspect-ratio: 3 / 3.7;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
  border-radius: 6px 6px 0 0;
}
.crew-photo::after { height: 70%; background: linear-gradient(to bottom, rgba(6, 11, 24, 0), rgba(6, 11, 24, 0.92)); }
.crew-photo img { transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); filter: saturate(1.08) contrast(1.04); }
.crew-card:hover .crew-photo img { transform: scale(1.06); }
.crew-info { margin-top: -118px; padding: 0 28px 30px; z-index: 3; }
.crew-name { font-size: 2.6rem; line-height: 0.95; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7); }
.crew-role {
  display: inline-flex; align-items: center; margin-top: 14px; padding: 7px 14px;
  border-radius: 999px; background: rgba(47, 125, 255, 0.14);
  border: 1px solid rgba(47, 125, 255, 0.38); color: #a9cbff;
}
.crew-bio { margin-top: 22px; padding-left: 16px; border-left: 2px solid #2f7dff; line-height: 1.7; }
.crew-socials a { transition: all 0.25s ease; }
.crew-socials a:hover { background: #2f7dff; border-color: #2f7dff; color: #fff; transform: translateY(-3px); }
@media (max-width: 600px) {
  .crew-name { font-size: 2.1rem; }
  .crew-info { margin-top: -96px; padding: 0 22px 26px; }
}

/* 404-pagina */
.nf-stage {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 100vh; padding: calc(var(--nav-height, 80px) + 40px) 0 90px;
  background: #050a16;
}
.nf-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(47, 125, 255, 0.28), rgba(47, 125, 255, 0) 70%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(47, 125, 255, 0.22), rgba(47, 125, 255, 0) 70%);
}
.nf-inner { position: relative; z-index: 2; }
.nf-code {
  font-family: var(--font-display); font-size: clamp(7rem, 24vw, 17rem); line-height: 0.9; letter-spacing: 0.04em;
  color: #fff; margin: 6px 0 4px;
  text-shadow: 0 0 22px rgba(47, 125, 255, 0.9), 0 0 60px rgba(47, 125, 255, 0.55), 0 0 120px rgba(47, 125, 255, 0.35);
}
.nf-inner h1 { font-size: clamp(1.8rem, 4.2vw, 3rem); margin: 0 0 14px; }
.nf-inner p { max-width: 560px; margin: 0 auto; color: var(--on-dark-muted, #a9b8d6); line-height: 1.7; }
.nf-eq { display: block; margin: 30px auto 28px; color: #8fbcff; width: min(420px, 80%); height: auto; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Crew: ronde knoppen voor e-mail en socials, in dezelfde stijl als de functie-label */
.crew-socials { gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.crew-socials a {
  width: 40px; height: 40px;
  border: 1px solid rgba(47, 125, 255, 0.38); background: rgba(47, 125, 255, 0.12); color: #a9cbff;
}
.crew-socials a svg { width: 18px; height: 18px; }
.crew-socials a:hover { background: #2f7dff; border-color: #2f7dff; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(47, 125, 255, 0.45); }

/* Lokveld tegen spam: buiten beeld, maar wel aanwezig voor bots */
.hp-veld { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Reviews: link naar het Google-bedrijfsprofiel, onder de waardering */
.reviews-google { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
.reviews-google .btn { padding: 11px 20px; font-size: 0.85rem; text-align: center; justify-content: center; }
.reviews-google .btn-ghost { border-color: rgba(47, 125, 255, 0.65); background: rgba(47, 125, 255, 0.14); color: #fff; }
.reviews-google .btn-ghost:hover { background: #2f7dff; border-color: #2f7dff; color: #fff; }
.reviews-google .btn-primary:hover { color: #fff; }

/* Contactpagina: iconen in dezelfde stijl als de knoppen op de crew-pagina */
.contact-grid .social-row { gap: 12px; flex-wrap: wrap; }
.contact-grid .social-row a {
  width: 40px; height: 40px;
  border: 1px solid rgba(47, 125, 255, 0.38); background: rgba(47, 125, 255, 0.12); color: #a9cbff;
  transition: all 0.25s ease;
}
.contact-grid .social-row a svg { width: 18px; height: 18px; }
.contact-grid .social-row a:hover { background: #2f7dff; border-color: #2f7dff; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(47, 125, 255, 0.45); }

/* Menu bovenaan: gewone tekst met een gloeiende lijn onder de actieve pagina, een lijn die vanuit het midden groeit bij hover,
   en een lagere glazen balk bij scrollen. */
.site-header { height: 88px; transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; background: linear-gradient(to bottom, rgba(5, 10, 22, 0.72), transparent); }
.site-header.is-scrolled {
  height: 68px; background: rgba(5, 10, 22, 0.82); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(120, 160, 230, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
}
.site-header .logo.logo-img img { transition: transform 0.3s ease; }
.site-header.is-scrolled .logo.logo-img img { transform: scale(0.88); transform-origin: left center; }
.nav-links { gap: 42px; }
.nav-links a { padding: 8px 2px; font-size: 0.8rem; letter-spacing: 0.17em; color: rgba(255, 255, 255, 0.84); transition: color 0.25s ease, text-shadow 0.25s ease; }
.site-header.is-scrolled .nav-links a, body.nav-open .nav-links a { color: rgba(255, 255, 255, 0.84); }
.nav-links a::after { left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #4b95ff, transparent); transition: width 0.3s ease; }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.is-active, .site-header.is-scrolled .nav-links a.is-active { color: #fff !important; text-shadow: 0 0 16px rgba(75, 149, 255, 0.85); }
.nav-links a.is-active::after { width: 100%; background: linear-gradient(90deg, #2f7dff, #8fbcff, #2f7dff); box-shadow: 0 0 12px rgba(47, 125, 255, 0.95); }
@media (max-width: 900px) {
  .nav-links { gap: 0; }
  body.nav-open .nav-links { padding: 18px 24px 28px; background: rgba(5, 10, 22, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(120, 160, 230, 0.3); }
  body.nav-open .nav-links li + li { border-top: 1px solid rgba(120, 160, 230, 0.14); }
  body.nav-open .nav-links a { display: block; padding: 16px 4px 16px 14px; font-size: 1rem; letter-spacing: 0.12em; border-left: 3px solid transparent; }
  body.nav-open .nav-links a::after { display: none; }
  body.nav-open .nav-links a.is-active { border-left-color: #2f7dff; background: linear-gradient(90deg, rgba(47, 125, 255, 0.16), transparent); }
}

/* Knoppen in dezelfde stijl als de bolletjes op de crew-pagina (met tekst) */
.btn-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-bubble {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(47, 125, 255, 0.38); background: rgba(47, 125, 255, 0.12); color: #cfe0ff;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; text-decoration: none; transition: all 0.25s ease;
}
.btn-bubble .ico { display: inline-flex; width: 18px; height: 18px; }
.btn-bubble .ico svg { width: 18px; height: 18px; }
.btn-bubble:hover { background: #2f7dff; border-color: #2f7dff; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(47, 125, 255, 0.45); }

/* Bevestiging na het versturen van het boekingsformulier (zelfde opbouw als de bevestigingsmail) */
.boek-succes { display: block; padding: 26px 28px; }
.boek-succes h3 { margin: 0 0 6px; font-size: 1.5rem; }
.boek-succes p { margin: 0; }
.boek-succes ol { list-style: none; margin: 18px 0 0; padding: 0; }
.boek-succes li { position: relative; padding: 0 0 14px 34px; line-height: 1.5; }
.boek-succes li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2f7dff; box-sizing: border-box; }
.boek-succes li.klaar::before { background: #2f7dff; }
.boek-succes li::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 2px; background: rgba(47, 125, 255, 0.35); }
.boek-succes li:last-child { padding-bottom: 0; }
.boek-succes li:last-child::after { display: none; }
.boek-succes li strong { display: block; }
.boek-succes .btn-bubbles { justify-content: flex-start; margin-top: 22px; }
.boek-succes, .boek-succes p, .boek-succes li { color: #c9d6ee; }
.boek-succes h3, .boek-succes li strong { color: #fff; }

/* Toetsenbord: zichtbare focus op alles wat je kunt bedienen */
:focus-visible { outline: 2px solid #8fbcff; outline-offset: 3px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #8fbcff; outline-offset: 1px; }

/* Boekingsformulier: datum als dag, maand en jaar */
.date-fields { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 10px; }
.date-fields select { width: 100%; min-width: 0; }

/* Boekingsformulier: tijd als uur en minuten */
.time-fields { display: flex; align-items: center; gap: 10px; }
.time-fields select { flex: 1; min-width: 0; }
.time-fields .time-sep { color: var(--on-dark-muted, #a9b8d6); font-weight: 700; }