.scene-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

.scene-video-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Fades to black over the clip's final second via opacity only — never touches
   playbackRate, so it stays smooth regardless of a video's keyframe spacing. */
.scene-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #05070A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

.scene-video-layer video,
.scene-video-layer img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.95);
}
.scene-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,10,0.35) 0%, rgba(5,7,10,0.2) 30%, rgba(5,7,10,0.8) 78%, var(--scene-void) 100%);
}

.hero .scene-video-layer video {
  object-position: 78% center;
}

.hero .scene-video-layer::after {
  background:
    linear-gradient(90deg, rgba(5,7,10,0.92) 0%, rgba(5,7,10,0.75) 30%, rgba(5,7,10,0.25) 58%, rgba(5,7,10,0.1) 75%),
    linear-gradient(180deg, rgba(5,7,10,0.15) 0%, rgba(5,7,10,0.1) 40%, rgba(5,7,10,0.85) 80%, var(--scene-void) 100%);
}

.scene-content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Video scenes stay dark/cinematic regardless of theme, so everything
     drawn over them — text, card/input borders, surface tints — must stay
     locked to the dark-mode values instead of inheriting the page theme's
     (possibly light) tokens. */
  --color-text: #E7ECEF;
  --color-text-dim: #9AA5AD;
  --color-panel: rgba(255,255,255,0.04);
  --color-panel-border: rgba(255,255,255,0.08);
  --surface-tint: 255,255,255;
  --surface-alpha-1: 0.03;
  --surface-alpha-2: 0.04;
  --surface-alpha-3: 0.08;
}

/* The gradient that fades each video into "void" at its edges must always
   settle on the dark void, never the light theme's — otherwise the last
   stretch of video gets a pale wash instead of fading to black. */
.scene-video-layer::after {
  --scene-void: #05070A;
}

/* Hero */
.hero {
  padding-top: 0;
  align-items: flex-end;
  padding-bottom: var(--space-xl);
}
.hero .scene-content {
  padding-bottom: var(--space-md);
}
.hero__eyebrow {
  color: var(--color-emerald);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-size: var(--fs-hero);
  max-width: 14ch;
}
.hero__sub {
  max-width: 46ch;
  font-size: 1.05rem;
}
.hero__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* Ambient background glow for the long stretch of plain sections between
   video scenes (Portfolio, Expertise, Certificeringen) — breaks up the flat
   black without adding more video weight. */
#work, #skills, #proof {
  position: relative;
  isolation: isolate;
}

#work::before, #skills::before, #proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#work::before {
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(16,185,129,0.10), transparent 70%),
    radial-gradient(32% 28% at 92% 85%, rgba(14,165,160,0.08), transparent 70%);
}

#skills::before {
  background:
    radial-gradient(34% 30% at 88% 6%, rgba(16,185,129,0.09), transparent 70%),
    radial-gradient(30% 26% at 8% 92%, rgba(245,158,11,0.05), transparent 70%);
}

#proof::before {
  background: radial-gradient(45% 40% at 50% 0%, rgba(16,185,129,0.08), transparent 72%);
}

/* Diensten and Expertise break out of the standard container: both hold a
   wide split/grid layout that needs the room. */
#services > .container,
#skills > .container,
#proof > .container { max-width: 1560px; }

/* Manifesto: asymmetric statement + live status panel */
.manifesto {
  padding: var(--space-xl) 0;
}

/* Wider than the page container so the statement pushes further left and the
   diagram gets room to breathe on the right. */
.manifesto__grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: var(--space-md);
  align-items: center;
  max-width: 1640px;
}

.manifesto__grid > .growth-panel {
  justify-self: end;
  width: 100%;
  max-width: 1040px;
}

.manifesto__quote {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-emerald);
  margin-bottom: var(--space-md);
}

.mission__text {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  padding-left: calc(var(--space-md) + 2px);
  color: var(--color-text-dim);
  margin: 0;
}
.mission__text .word {
  color: inherit;
  opacity: 0.25;
}

.cta-section .scene-video-layer::after {
  background:
    linear-gradient(90deg, rgba(5,7,10,0.94) 0%, rgba(5,7,10,0.8) 38%, rgba(5,7,10,0.35) 70%, rgba(5,7,10,0.2) 100%),
    linear-gradient(180deg, var(--scene-void) 0%, rgba(5,7,10,0.3) 22%, rgba(5,7,10,0.45) 70%, var(--scene-void) 100%);
}

/* Section heads */
.section-head { max-width: 640px; margin-bottom: var(--space-lg); }
.section-eyebrow {
  color: var(--color-emerald);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

/* About */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 760px;
}

/* CTA section */
.cta-section .contact-form {
  margin-top: var(--space-md);
}

/* Subject sits right in this clip, so keep the copy clear of them. */
.cta-section .contact-copy { max-width: 620px; }

.cta-section .scene-video-layer video { object-position: 72% center; }

/* Builder scene: standalone full-bleed statement between Diensten and Portfolio. */
.builder-scene .scene-content { max-width: 640px; }

.builder-scene__title {
  font-size: var(--fs-hero);
  max-width: 12ch;
  margin-bottom: var(--space-sm);
}

/* Responsive */
@media (max-width: 1023px) {
  .manifesto__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__links.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Matches the always-dark nav chrome rather than the page theme — its
       link text is hardcoded light and would vanish on a light background. */
    background: #05070A;
    gap: var(--space-lg);
  }
  .nav__links.is-open a { font-size: 1.3rem; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: 1fr; }

  section { padding: var(--space-lg) 0; }

  .footer__top { flex-direction: column; }

  /* Scene videos: 16:9 clips cropped into a tall 9:19 box show almost nothing
     but a narrow vertical sliver, so desktop object-position values (tuned
     for a wide frame with the subject off to one side) cut across faces at
     random. Center the crop and darken hard so the video reads as ambient
     texture behind the text instead of competing with it. */
  .scene-video-layer video {
    object-position: 50% 30% !important;
    filter: brightness(0.85) saturate(0.95);
  }

  /* Sections with text over the video keep a moderate scrim for legibility;
     the text-free builder scene barely needs one. */
  .scene-video-layer::after,
  .hero .scene-video-layer::after,
  .cta-section .scene-video-layer::after {
    background: linear-gradient(180deg, rgba(5,7,10,0.3) 0%, rgba(5,7,10,0.5) 45%, var(--scene-void) 100%) !important;
  }

  .builder-scene .scene-video-layer::after {
    background: linear-gradient(180deg, rgba(5,7,10,0.15) 0%, rgba(5,7,10,0.25) 60%, var(--scene-void) 100%) !important;
  }
}