.hero-video-wrap {
  position: absolute;
  z-index: -4;
  inset: 0;
  overflow: hidden;
  background: #050505 url("assets/hero-rave-the-planet-2026-poster.jpg") center 42% / cover no-repeat;
}

.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.34) brightness(.5);
  transform: scale(1.025);
}

.hero-video-active .hero-image { display: none; }

.hero-video-active::before {
  background:
    linear-gradient(90deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.86) 38%, rgba(5,5,5,.26) 100%),
    linear-gradient(0deg, rgba(5,5,5,.9), transparent 50%);
}

.hero-proof {
  width: max-content;
  max-width: 100%;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #c7c7c1;
  font: 700 9px/1 monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-proof span { color: var(--grey); }
.hero-proof b { padding-bottom: 4px; border-bottom: 1px solid rgba(244,244,240,.38); }
.hero-proof:hover b { border-color: var(--white); color: var(--white); }

.appearance-proof {
  display: grid;
  grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr);
  gap: clamp(40px,8vw,130px);
  padding: clamp(80px,10vw,150px) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(105deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.82) 55%, rgba(5,5,5,.54) 100%),
    url("assets/hero-rave-the-planet-2026-poster.jpg") center 38% / cover no-repeat;
  background-color: #050505;
  background-blend-mode: normal, luminosity;
}

.appearance-mark {
  align-self: start;
  font: 900 clamp(46px,7vw,112px)/.76 Arial,Helvetica,sans-serif;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.appearance-content { max-width: 760px; }
.appearance-content h2 { margin: 22px 0; font-size: clamp(38px,6vw,90px); line-height: .84; letter-spacing: -.07em; }
.appearance-content > p:not(.index-label) { max-width: 650px; color: #bdbdb7; font-size: 15px; line-height: 1.55; }
.appearance-content .external-row { margin-top: 30px; }
.appearance-note { margin-top: 22px !important; color: var(--grey) !important; font: 700 9px/1.5 monospace !important; letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 760px) {
  .hero-video { object-position: center center; filter: grayscale(1) contrast(1.3) brightness(.46); }
  .hero-video-active::before { background: linear-gradient(0deg,rgba(5,5,5,.99) 0%,rgba(5,5,5,.72) 58%,rgba(5,5,5,.28) 100%); }
  .hero-proof { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 12px; }
  .appearance-proof { grid-template-columns: 1fr; gap: 34px; background-position: center top; }
  .appearance-mark { font-size: 18vw; }
  .appearance-content .action { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}