/* Showreel: one video pinned behind the hero AND the first content block (Over ons) */
.showreel{position:relative;background:var(--charcoal)}
.showreel__media{position:sticky;top:0;height:100vh;overflow:hidden;z-index:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:brightness(.5) contrast(1.05) saturate(1.05)}
.showreel__overlay{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(10,13,24,.40) 0%, rgba(10,13,24,.30) 30%, rgba(10,13,24,.55) 70%, rgba(10,13,24,.88) 100%),
  radial-gradient(110% 80% at 50% 40%, rgba(10,13,24,.12), rgba(9,12,24,.58))}
/* Content scrolls over the pinned media */
.showreel__body{position:relative;z-index:1;margin-top:-100vh}

.hero{min-height:100vh;display:grid;place-items:center;text-align:center;color:var(--white)}
.hero__content{position:relative;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.hero__accent{color:var(--gold)}
.hero__lead{max-width:44ch;margin:var(--s-2) auto var(--s-3);font-size:1.15rem;color:#eef1f8}
.hero__cta{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap}
.hero__hint{margin-top:var(--s-4);font-family:var(--font-display);letter-spacing:.3em;opacity:.85;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hero__hint{animation:none}}

/* Over ons sits on the video → light text + translucent cards */
.section--onmedia{color:var(--white)}
.section--onmedia h2{color:var(--white)}
.section--onmedia .lead,.section--onmedia p{color:#e7ebf5}
.section--onmedia .card{background:rgba(255,255,255,.07);color:var(--white);border-color:rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(3px)}

@media (max-width:820px){.hero__video{object-position:50% 18%}}