.films-index-page { background: #06101c; }

.site-header nav a[aria-current="page"],
.site-header nav a[aria-current="page"] { color: var(--saffron); }

.films-hero {
  position: relative;
  min-height: 72svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 135px 7vw 7vw;
}

.films-hero > img,
.films-hero-shade {
  position: absolute;
  inset: 0;
  height: 100%;
}

.films-hero > img {
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.78) contrast(1.04);
}

.films-hero-shade {
  background:
    linear-gradient(90deg, rgba(3,9,17,.9) 0%, rgba(3,9,17,.54) 45%, rgba(3,9,17,.14) 78%),
    linear-gradient(0deg, rgba(3,9,17,.9), transparent 60%);
}

.films-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.films-hero h1 {
  max-width: 1000px;
  font-size: clamp(4.8rem, 9.5vw, 10rem);
  line-height: .86;
  text-transform: none;
}

.films-hero-copy > p:last-child {
  max-width: 720px;
  margin: 2rem 0 0;
  color: rgba(255,255,255,.82);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.productions { max-width: 1500px; }

.productions-heading {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: 4.5rem;
}

.productions-heading h2,
.films-contact h2 {
  font-size: clamp(3.2rem, 6.5vw, 6.5rem);
}

.productions-heading > p {
  max-width: 410px;
  margin: 0;
  color: #9da7b2;
}

.production-list {
  border-top: 1px solid rgba(255,255,255,.14);
}

.production-card {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) 72px minmax(360px, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 480px;
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.production-card figure {
  align-self: stretch;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  background: #0d1d31;
}

.production-card img {
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05);
  transition: transform .65s ease, filter .4s ease;
}

.production-card:first-child img { object-position: center 28%; }
.production-card:nth-child(2) img { object-position: center 32%; }
.production-card:nth-child(3) img { object-position: center; }

.production-card:hover img,
.production-card:focus-visible img {
  transform: scale(1.025);
  filter: saturate(.95) contrast(1.03);
}

.production-card:focus-visible { outline: 3px solid var(--saffron); outline-offset: 5px; }

.production-number {
  align-self: start;
  padding-top: .5rem;
  color: rgba(255,255,255,.18);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.8rem;
}

.production-copy { max-width: 620px; }
.production-meta { margin: 0 0 1.2rem; color: var(--saffron); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.production-copy h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.8rem, 5vw, 5.3rem); font-weight: 400; letter-spacing: -.045em; line-height: .88; }
.production-copy h3 em { color: var(--saffron); font-weight: 400; }
.production-role { margin: 1.6rem 0 .7rem; color: #f3f0e8; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; }
.production-role + p { max-width: 590px; margin: 0; color: #aab3bd; }
.production-copy span { display: inline-block; margin-top: 1.5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--saffron); color: #e6e5df; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.films-contact {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  min-height: 520px;
  padding-left: max(7vw, calc((100vw - 1320px) / 2));
  padding-right: max(7vw, calc((100vw - 1320px) / 2));
  background:
    linear-gradient(115deg, rgba(238,119,34,.16), transparent 31%),
    linear-gradient(245deg, rgba(11,123,82,.15), transparent 33%),
    #0d1d31;
}

.films-contact > div > a {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  margin-top: 2.6rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--saffron);
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.films-contact > div > a span { color: var(--saffron); }
.back-home { padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.32); color: #c4cbd2; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 960px) {
  .films-hero { min-height: 680px; }
  .production-card { grid-template-columns: minmax(250px, .9fr) 48px minmax(320px, 1.1fr); gap: 1.5rem; }
  .production-number { font-size: 2.8rem; }
}

@media (max-width: 740px) {
  .films-hero { display: grid; grid-template-rows: 46svh auto; min-height: 0; padding: 0; overflow: hidden; background: #06101c; }
  .films-hero > img { position: relative; inset: auto; grid-row: 1; height: 46svh; object-position: 58% center; }
  .films-hero-shade { inset: 0 0 auto; height: 46svh; background: linear-gradient(0deg, rgba(3,9,17,.58), rgba(3,9,17,.06) 68%); }
  .films-hero-copy { grid-row: 2; max-width: none; padding: 2.2rem 1.3rem 3rem; background: #06101c; }
  .films-hero h1 { font-size: clamp(3.5rem, 16vw, 4.8rem); }
  .films-hero-copy > p:last-child { margin-top: 1.4rem; font-size: 1.12rem; }
  .productions-heading { display: block; }
  .productions-heading > p { margin-top: 1.5rem; }
  .production-card { display: grid; grid-template-columns: 48px 1fr; min-height: 0; padding: 1.5rem 0 3rem; }
  .production-card figure { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 10; }
  .production-number { grid-column: 1; font-size: 2rem; }
  .production-copy { grid-column: 2; }
  .production-copy h3 { font-size: clamp(2.35rem, 11.5vw, 3.7rem); }
  .films-contact { grid-template-columns: 1fr; min-height: 500px; padding-left: 1.3rem; padding-right: 1.3rem; }
  .back-home { justify-self: start; }
}