/* Final mobile safety layer. Loaded after all homepage component styles. */
@media (max-width: 809.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .route-home main,
    .route-home section,
    .route-home section > div {
        min-width: 0;
        max-width: 100%;
    }

    .route-home img,
    .route-home video,
    .route-home iframe {
        max-width: 100%;
    }

    .route-home input,
    .route-home select,
    .route-home textarea,
    .route-home button {
        min-width: 0;
        max-width: 100%;
    }

    /* Hero: preserve the composition but keep controls usable on narrow screens. */
    .be-hero__copy {
        inset: auto;
        width: auto;
        margin: 20px;
    }

    .be-hero__title,
    .be-hero__title > span {
        max-width: 100%;
    }

    .be-hero__title {
        height: auto;
        min-height: 0;
        align-items: flex-start;
        overflow: visible;
        font-size: clamp(34px, 9vw, 54px);
        line-height: .94;
    }

    .be-hero__title > span {
        padding-top: 0;
        overflow-wrap: normal;
        word-break: normal;
    }

    .be-hero__lead {
        max-width: 100%;
    }

    /* Services remain one line; JavaScript scales long names to this width. */
    .be-service__toggle {
        grid-template-columns: 24px minmax(0, 1fr) 40px;
        align-items: center;
    }

    .be-service__name {
        width: 100%;
        min-width: 0;
    }

    .be-service__name strong {
        max-width: 100%;
    }

    /* About: content-driven heights prevent translated or edited text being cut. */
    .route-home #about.be-about {
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .be-about__header,
    .be-about__content,
    .be-about__aside,
    .be-about__story,
    .be-about__story-copy,
    .be-about__stats,
    .be-about__partners {
        height: auto;
        min-height: 0;
        flex-basis: auto;
        overflow: visible;
    }

    .be-about__header {
        min-height: 73px;
    }

    .be-about__content {
        flex: none;
    }

    .be-about__main-media {
        height: auto;
        flex: none;
        aspect-ratio: 4 / 5;
    }

    .be-about__aside {
        flex: none;
    }

    .be-about__secondary-media {
        height: auto;
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .be-about__story {
        flex: none;
    }

    .be-about__story-copy {
        min-height: 180px;
    }

    .be-about__stats {
        padding: 38px 0;
    }

    .be-about__partners h3 {
        white-space: normal;
    }

    /* Projects become a normal card list on touch devices. */
    .route-home #projects.be-projects,
    .be-projects__inner {
        height: auto;
        min-height: 0;
    }

    .be-projects__stack {
        gap: 20px;
    }

    .be-projects__sticky {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        flex: none;
        aspect-ratio: 4 / 5;
        transform: none !important;
        will-change: auto;
    }

    .be-projects__media {
        border-radius: 24px;
    }

    .be-projects__info {
        height: auto;
        min-height: 118px;
        padding: 24px;
    }

    /* Comparison uses independent cards instead of sticky overlapping rows. */
    .be-comparison__table-shell {
        width: 100%;
        overflow: visible;
    }

    .be-comparison__table tbody,
    .be-comparison__table tbody tr {
        position: relative !important;
        top: auto !important;
    }

    .be-comparison__table tbody tr,
    .be-comparison__table tbody th,
    .be-comparison__table tbody td {
        filter: none !important;
        transform: none !important;
        will-change: auto;
    }

    .be-comparison__table tbody tr {
        z-index: auto !important;
    }

    .be-comparison__criterion,
    .be-comparison__result {
        align-items: center;
    }

    /* Keep complex forms and CTAs inside the viewport. */
    .be-project-brief__card,
    .be-contact__layout,
    .be-estimator,
    .be-estimator__form {
        width: 100%;
        min-width: 0;
    }

    .be-project-brief__media {
        min-height: clamp(280px, 92vw, 390px);
    }

    .be-contact__channels {
        width: 100%;
        max-width: 100%;
    }

    .be-testimonials {
        --be-testimonials-card-width: min(350px, calc(100vw - 40px));
    }

    /* Footer should grow with its real content, not an estimated pixel height. */
    .be-footer,
    .be-footer__inner,
    .be-footer__identity,
    .be-footer__contact,
    .be-footer__nav,
    .be-footer__location-wrap,
    .be-footer__location,
    .be-footer__bottom {
        height: auto;
        min-height: 0;
    }

    .be-footer__map {
        height: clamp(220px, 72vw, 300px);
    }
}

@media (max-width: 519.98px) {
    .be-hero__copy {
        inset: auto;
        margin: 16px;
    }

    .be-hero__kicker {
        font-size: clamp(18px, 5.8vw, 22px);
        white-space: normal;
    }

    .be-hero__description {
        margin: 14px 0 12px;
        font-size: 14px;
        line-height: 1.45;
    }

    .be-hero__lead {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 18px;
    }

    .be-hero__phone,
    .be-hero__lead-button {
        width: 100%;
    }

    .be-hero__team {
        grid-template-columns: minmax(0, 130px) 40px;
        max-width: 100%;
    }

    .be-hero__caption {
        width: min(54vw, 190px);
        font-size: 18px;
        line-height: 1;
    }

    .be-hero__disc {
        right: 10px;
        bottom: 88px;
        width: 82px;
        height: 82px;
    }

    .be-hero__disc-center {
        width: 44px;
        height: 44px;
    }

    .be-service__toggle {
        grid-template-columns: 22px minmax(0, 1fr) 36px;
        gap: 6px;
    }

    .be-service__name > span {
        font-size: 14px;
        line-height: 1.3;
    }

    .be-comparison__inner,
    .be-acquisition__inner,
    .be-benefits__inner,
    .be-system__inner,
    .be-project-brief__inner {
        padding-right: 16px;
        padding-left: 16px;
    }

    .be-comparison__table tbody th,
    .be-comparison__table tbody td {
        padding: 18px;
    }

    .be-estimator__directions > div {
        grid-template-columns: 1fr;
    }

    .be-advantages__cta-note,
    .be-advantages__cta-button,
    .be-project-brief__submit,
    .be-contact__submit {
        width: 100%;
    }

    .be-footer__inner {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 809.98px) and (orientation: landscape) {
    .be-hero {
        --hero-height: 680px;
    }

    .be-hero__frame {
        position: relative;
        top: 0;
    }

    .be-hero__left,
    .be-hero__right,
    .be-hero__left::after,
    .be-hero__bottom {
        transform: none;
        will-change: auto;
    }
}