/* Homepage hero: headline + button over the video (EN + IT). */

.hero-video { position: relative; overflow: hidden; isolation: isolate; background: #1b2b1b; line-height: 0; }   /* its inner layers must never paint above the trust cards */
.hero-video-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Still image: covers the video until js/hero-video.js has seen a painted frame on every device, then fades out. */
.hero-video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .8s ease; pointer-events: none; }
.hero-video.is-revealed .hero-video-poster { opacity: 0; }

.hero-cta {
    position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; display: flex; align-items: flex-end;
    padding: 0 0 78px; line-height: 1.2; pointer-events: none;
    background: linear-gradient(to top, rgba(8,32,20,.78) 0%, rgba(8,32,20,.45) 38%, rgba(8,32,20,.08) 72%, rgba(8,32,20,0) 100%);
}
.hero-cta > .container { width: 100%; }

.hero-title {
    max-width: 820px; margin: 0 0 1.1rem; font-family: "Jost", sans-serif; font-size: var(--fs-h1); font-weight: 700;
    line-height: var(--lh-heading); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero-btn {
    pointer-events: auto; display: inline-flex; align-items: center; padding: .8rem 1.7rem !important;
    font-size: 1.05rem; font-weight: 700; color: #fff; background-color: var(--primary-text); border-color: var(--primary-text); border-radius: var(--radius-md);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.hero-btn:hover, .hero-btn:focus-visible { background-color: var(--primary-text-hover); border-color: var(--primary-text-hover); color: #fff; }
.hero-btn i { transition: transform .2s; }
.hero-btn:hover i { transform: translateX(4px); }

@media (max-width: 991.98px) {
    .hero-cta { padding-bottom: 56px; }
    .hero-title { max-width: 520px; }
}
@media (max-width: 575.98px) {
    .hero-cta { padding-bottom: 38px; }
    .hero-title { font-size: 1.15rem; margin-bottom: .6rem; max-width: 80%; }
    .hero-btn { padding: .45rem 1rem !important; font-size: .95rem; }
}