.film-site { background: #090f19; }
.film-site .studio-opening {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(27rem, 62vh, 45rem);
  padding: clamp(5rem, 13vw, 12rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: #0b1322;
}
.film-backdrop, .film-backdrop::after, .film-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-backdrop { z-index: -1; pointer-events: none; }
.film-backdrop img { object-fit: cover; object-position: center; }
.film-backdrop::after {
  content: "";
  background: linear-gradient(90deg, #070d19f2 5%, #070d199c 58%, #070d1933),
    linear-gradient(0deg, #090f19 2%, transparent 70%);
}
.film-site .studio-opening h1 { font-size: clamp(3rem, 8vw, 7rem); }
.film-site .studio-opening p { max-width: 52ch; }
.film-site .studio-section, .film-site .studio-offers { scroll-margin-top: 7rem; }
.film-site .film-slate { background: #090f19; }
.film-projects, .film-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.film-project {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 19rem;
  padding: clamp(1.1rem, 2.6vw, 2rem);
  border: 1px solid #b6c3e142;
  border-radius: 1rem;
  background: radial-gradient(ellipse at top right, var(--film-light), transparent 62%), #131b2a;
}
.film-thriller { --film-light: #59374e; }
.film-horror { --film-light: #59282d; }
.film-animation { --film-light: #1d5375; }
.film-project .film-format { color: #e2eaff; font-size: .8rem; font-weight: 700; margin: 0 0 .45rem; }
.film-project h3 { font-size: clamp(1.45rem, 2.6vw, 2.3rem); margin: 0; color: #fff; }
.film-project p:last-child { margin-bottom: 0; }
.film-process { list-style: none; padding: 0; counter-reset: film-step; }
.film-process li { counter-increment: film-step; border-top: 1px solid #6084a7; padding-top: 1rem; }
.film-process li::before { content: "0" counter(film-step); color: #a6ceff; font: 700 1.3rem Oxanium, sans-serif; }
.film-process h3 { margin: .45rem 0; }
.film-process p { margin-top: 0; }
@media (max-width: 790px) {
  .film-projects, .film-process { grid-template-columns: 1fr; }
  .film-project { min-height: 14rem; }
  .film-backdrop::after { background: linear-gradient(0deg, #090f19 3%, #070d19b8 54%, #070d1966); }
}