/* Responsive hero backgrounds — Legend Forwarding Group */

.hero-shell {
    position: relative;
    isolation: isolate;
    background: #0a1217;
}

.hero-shell .page-header-large {
    position: relative;
    overflow: hidden;
}

.hero-shell .page-header-large .container--inner {
    min-height: calc(100vh - 56px);
}

.hero-shell .page-header-large__image.hero-bg {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0;
}

.hero-shell .page-header-large__image.hero-bg picture,
.hero-shell .page-header-large__image.hero-bg .hero-bg__img {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-shell .page-header-large__image.hero-bg .hero-bg__img {
    position: absolute;
    inset: 0;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 68%;
    opacity: 1 !important;
}

.hero-shell .page-header-large__image.hero-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 18, 23, 0.55) 0%, rgba(10, 18, 23, 0.22) 38%, rgba(10, 18, 23, 0.35) 100%),
        linear-gradient(90deg, rgba(10, 18, 23, 0.45) 0%, rgba(10, 18, 23, 0.12) 48%, rgba(10, 18, 23, 0.28) 100%);
}

.hero-shell .page-header-large__text {
    position: relative;
    z-index: 2;
    height: auto;
    min-height: calc(100vh - 56px);
    padding-top: 72px;
    padding-bottom: 48px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-shell .page-header-large__text h1,
.hero-shell .page-header-large__text p {
    color: #fff;
}

.hero-shell .page-header-large__text .btn {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* Mobile: tall crops — keep truck in lower half */
@media (max-width: 767px) {
    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: center 38%;
    }

    .hero-shell .page-header-large__text {
        min-height: calc(100svh - 56px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-shell .page-header-large__text h1 {
        font-size: 32px;
        line-height: 1.15;
    }
}

/* Short phones — use shorter mobile art + keep subject visible */
@media (max-width: 767px) and (max-height: 720px) {
    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: center 45%;
    }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .hero-shell .page-header-large .container--inner {
        min-height: min(92vh, 1100px);
    }

    .hero-shell .page-header-large__text {
        min-height: min(92vh, 1100px);
    }

    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: center 40%;
    }
}

/* Tablet landscape / small laptop — show more of the truck */
@media (min-width: 768px) and (max-width: 1399px) and (orientation: landscape),
       (min-width: 1024px) and (max-width: 1399px) {
    .hero-shell .page-header-large .container--inner {
        min-height: min(92vh, 900px);
    }

    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: 58% 70%;
    }
}

/* Hero copy visible even before scroll-animation JS */
.hero-shell .page-header-large__text h1 span,
.hero-shell .page-header-large__text p span {
    transform: none !important;
    -webkit-transform: none !important;
}
.hero-shell .page-header-large__text .btn {
    opacity: 1 !important;
}

/* Desktop — taller hero so cover keeps the full truck + road in frame */
@media (min-width: 1024px) {
    .hero-shell .page-header-large__text {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        justify-content: flex-start;
        padding-top: clamp(96px, 14vh, 160px);
    }

    .hero-shell .page-header-large .container--inner {
        min-height: clamp(720px, 92vh, 1080px);
    }

    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: 58% 72%;
    }
}

@media (min-width: 1400px) {
    .hero-shell .page-header-large .container--inner {
        min-height: clamp(780px, 94vh, 1120px);
    }

    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: 54% 70%;
    }
}

@media (min-width: 1800px) {
    .hero-shell .page-header-large .container--inner {
        min-height: clamp(820px, 96vh, 1180px);
    }

    .hero-shell .page-header-large__image.hero-bg .hero-bg__img {
        object-position: center 68%;
    }
}