.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  align-content: end;
  gap: clamp(32px, 3.6vw, 52px);
  padding-top: 132px;
  padding-bottom: clamp(36px, 6vh, 72px);
}
.hero-copy {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  padding: 0;
}
h1 { font-size: clamp(40px, 4.5vw, 66px); }
.lead { font-size: 15px; margin-top: 22px; }
.hero-actions { margin-top: 28px; }
.poster-carousel { min-width: 0; width: 100%; }
.poster-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f3f4;
  box-shadow: 0 24px 70px rgba(33, 26, 44, 0.16), 0 0 0 1px rgba(24, 24, 32, 0.12);
  isolation: isolate;
  touch-action: pan-y;
}
.poster-viewport:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 5px; }
.poster-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity 420ms ease, transform 420ms ease, visibility 420ms;
  pointer-events: none;
}
.poster-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.poster-frame {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 600px;
  border: 0;
  transform: scale(var(--poster-scale, 0.7));
  transform-origin: top left;
  pointer-events: none;
}
.poster-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1024px) {
  html, body { overflow-y: auto; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 36px; padding-top: 148px; padding-bottom: 40px; }
  .hero-copy { width: 100%; padding: 0; }
  h1 { font-size: clamp(42px, 7vw, 64px); }
  .poster-carousel { max-width: 800px; }
}
@media (max-width: 620px) {
  h1 { font-size: clamp(36px, 10vw, 54px); }
  .lead { font-size: 14px; }
  .poster-viewport { border-radius: 9px; }
}
@media (min-width: 1025px) and (max-height: 700px) {
  html, body { overflow-y: auto; }
  .hero { padding-top: 132px; padding-bottom: 36px; }
  h1 { font-size: clamp(40px, 4vw, 56px); }
}
@media (prefers-reduced-motion: reduce) { .poster-slide { transition: none; } }