/* Homepage hero: headline + 16:9 film window. On wide screens scrolling slides the window over the headline. */
.hh{--red:#DC2626;position:relative;background:#0b0b0c;color:#fff}
.hh__pin{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hh__in{position:relative;width:min(1440px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:120px 0 80px}
.hh__copy{position:relative;z-index:1;min-width:0}
.hh__title{font:700 clamp(44px,6.2vw,104px)/.98 Inter,sans-serif;letter-spacing:-.045em;margin:0}
.hh__title em{font-style:normal;color:var(--red)}
.hh__title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hh__title .ln>span{display:inline-block}

.hh__stage{position:relative;perspective:1600px;z-index:2;min-width:0}
.hh__win{position:relative;aspect-ratio:16/9;width:100%;border-radius:clamp(14px,1.6vw,26px);overflow:hidden;background:#000;cursor:pointer;box-shadow:0 40px 100px rgba(0,0,0,.55);will-change:transform}
.hh__media{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hh__media img,.hh__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hh__win:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.9) 100%);opacity:0;transition:opacity .6s ease}
.hh__hint{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;font:600 clamp(18px,1.6vw,24px) Inter,sans-serif;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
@media (hover:hover){
  .hh__win:hover .hh__media{transform:scale(1.03)}
  .hh__win:hover:before{opacity:1}
  .hh__win:hover .hh__hint{opacity:1;transform:none;transition-delay:.18s}
}

/* wide screens: the section is tall and the hero sticks while the window travels */
@media (min-width:900px){
  .hh.is-scrolly{height:240vh}
  .hh.is-scrolly .hh__pin{position:sticky;top:0;height:100svh}
}

/* film overlay */
#hhModal{position:fixed;inset:0;z-index:12500;background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:none !important;align-items:center;justify-content:center;padding:24px}
#hhModal.is-open{display:flex !important}
#hhModal .hh__box{position:relative;width:min(1400px,100%,(100svh - 120px)*16/9);aspect-ratio:16/9}
#hhModal video{width:100%;height:100%;border-radius:18px;background:#000;object-fit:contain}
.hh__x{position:fixed;right:20px;top:20px;z-index:12600;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:none}
.hh__x.on{display:block}

@media (max-width:899px){
  .hh__in{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);padding:110px 0 64px}
  .hh__pin{min-height:0}
  #hhModal{padding:12px}
}
@media (prefers-reduced-motion:reduce){.hh__media video{display:none}}