.hero {
  isolation: isolate;
  background:
    linear-gradient(90deg,rgba(3,3,3,.94) 0%,rgba(3,3,3,.67) 37%,rgba(3,3,3,.12) 67%,rgba(3,3,3,.06) 100%),
    url("../assets/hero-lulean-studio.webp") center right / cover no-repeat,
    #080707;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 4% 40%,rgba(125,0,0,.13),transparent 43%);
  pointer-events: none;
}
.hero-inner { width: 100%; }
.hero-content { max-width: 660px; }
.hero-content h1 { text-wrap: balance; }
.hero-brand-mark {
  position: absolute;
  z-index: 1;
  top: clamp(108px,14vh,160px);
  right: 6%;
  width: clamp(125px,12vw,185px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.65));
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero { background-position: center, 59% center; }
  .hero-brand-mark { display: none; }
}
@media (max-width: 600px) {
  .hero {
    background:
      linear-gradient(90deg,rgba(3,3,3,.94),rgba(3,3,3,.66)),
      url("../assets/hero-lulean-studio.webp") 70% center / cover no-repeat,
      #080707;
  }
  .hero-content { max-width: 100%; }
}