html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

#intro-overlay[hidden] { display: none; }

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: transparent;
}

#intro-background,
#intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#intro-background { background: #111310; }
#intro-video { object-fit: contain; pointer-events: none; }

#intro-flight {
  position: absolute;
  left: 0;
  top: 0;
  width: 748px;
  height: 169px;
  opacity: 0;
  transform-origin: top left;
  pointer-events: none;
  will-change: transform;
}

#intro-flight img {
  position: absolute;
  top: 0;
  height: 169px;
  max-width: none;
}

/* Use the exact film glyphs and spacing for the header mark. */
.site-header .brand {
  position: relative;
  display: block;
  flex: none;
  width: 149.6px;
  height: 33.8px;
}

.brand-film {
  position: absolute;
  inset: 0 auto auto 0;
  width: 748px;
  height: 169px;
  transform: scale(.2);
  transform-origin: top left;
}

.brand-film img {
  position: absolute;
  top: 0;
  height: 169px;
  max-width: none;
}