/* First screen: work and prices are visible before the long introduction. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
  gap: 5%;
  height: auto;
  min-height: 640px;
  padding: 56px 6.2% 78px;
}
.hero-backdrop {
  background: linear-gradient(90deg, rgba(12, 19, 31, .94), rgba(12, 19, 31, .68)),
    url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=78') center/cover;
}
.hero-copy { margin: 0; }
.hero h1 { font-size: clamp(58px, 6.4vw, 88px); }
.hero-text { max-width: 510px; font-size: 16px; line-height: 1.6; }
.hero-starting-price { margin: -15px 0 27px; font-size: 12px; color: #dbe7ff; }
.hero-starting-price strong { color: #fff; font-size: 16px; }
.hero-actions { gap: 18px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px; }
.hero-proof span { display: grid; gap: 4px; font-size: 11px; color: #d7e1ef; }
.hero-proof strong { color: #fff; font-size: 28px; line-height: 1; }
.hero-proof-note { margin: 8px 0 0; font-size: 10px; color: #b9c5d4; }
.hero-feature { position: relative; z-index: 1; min-width: 0; align-self: center; }
.hero-video-frame { aspect-ratio: 16/10; overflow: hidden; border: 1px solid #ffffff50; background: #0c131f; box-shadow: 0 20px 70px #0008; }
.hero-video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.hero-video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-video-frame [hidden] { display: none; }
.hero-video-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 10px; letter-spacing: .8px; color: #e1e8f4; }
.hero-video-caption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-bottom a { color: #e0e5ec; }
.films { padding-top: 75px; }
.film-grid:has(.film-card:only-child) { grid-template-columns: 1fr; }
.film-grid .film-card:only-child { height: 420px; }
.intro { grid-template-columns: 120px minmax(270px, 350px) 1fr; gap: 28px; align-items: start; }
.intro-photo { aspect-ratio: 4/5; overflow: hidden; background: #1b2431; }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; display: block; }
.intro-main { min-width: 0; }
.intro-text { max-width: 600px; }
.intro-stats { display: flex; flex-wrap: wrap; gap: 30px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
.intro-stats div { max-width: 180px; }
.stat-note { margin: 9px 0 22px; font-size: 10px; color: #8793a2; }
.video-embed { display: block; width: min(900px, 92vw); aspect-ratio: 16/9; border: 0; }
.video-embed[hidden], #video-dialog video[hidden] { display: none; }
footer { flex-wrap: wrap; }
footer .footer-legal { order: 3; flex-basis: 100%; margin: 0; font-style: normal; font-size: 10px; color: #bfc8d5; }
footer small { order: 4; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 54px 6% 82px; }
  .hero-feature { width: 100%; }
  .hero-proof { margin-top: 28px; }
  .intro { grid-template-columns: minmax(230px, .85fr) 1.15fr; }
  .intro-label { grid-column: 1 / -1; }
  .intro-main { grid-column: 2; }
  .intro-stats { grid-column: auto; }
}
@media (max-width: 640px) {
  .hero { display: flex; flex-direction: column; gap: 25px; padding: 35px 20px 82px; }
  .hero h1 { font-size: 52px; letter-spacing: -3px; }
  .hero-text { margin: 18px 0 20px; font-size: 13px; }
  .hero-starting-price { margin: -9px 0 16px; }
  .hero-actions { gap: 13px; }
  .hero-proof { margin-top: 22px; gap: 28px; }
  .hero-proof strong { font-size: 24px; }
  .hero-video-frame { aspect-ratio: 16/9; }
  .hero-bottom { bottom: 18px; }
  .hero-bottom span:nth-child(2) { display: none; }
  .film-grid .film-card:only-child { height: 320px; }
  .intro { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .intro-label, .intro-main { grid-column: 1; }
  .intro-photo { width: min(100%, 350px); aspect-ratio: 4/4.2; }
}