/* Canonical site-wide header and four-image carousel styling. */
:root {
  --site-hero-height: clamp(540px, 52vw, 620px);
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--site-hero-height) !important;
  max-height: min(78svh, 620px) !important;
  padding: 0 !important;
  overflow: hidden;
  color: #fff;
  background: #030918 url('../assets/images/hero-scene-work.webp') center center / cover no-repeat !important;
}

.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-carousel__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: #030918;
  transition: none !important;
}

.hero-carousel__scene.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-carousel__scene img,
.hero-carousel__scene.is-active img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

.hero-carousel__sparkle {
  display: none !important;
}

@media (max-width: 991.98px) {
  :root { --site-hero-height: clamp(510px, 75vw, 580px); }
  .hero { max-height: min(80svh, 580px) !important; }
}

@media (max-width: 575.98px) {
  :root { --site-hero-height: 500px; }
  .hero { max-height: min(82svh, 500px) !important; }
}