/*
 * v18 responsive hardening.
 *
 * The photographic desktop composition remains untouched above 1180px.
 * Tablet widths use a real reflow instead of scaling a 1920px fixed canvas,
 * and mobile widths use a single 100%-wide content box so padding can never
 * push headings, cards, carousels, or forms outside the viewport.
 */

html,
body {
    max-width: 100%;
    overflow-x: clip !important;
}

.page-home .home-panel,
.page-home .home-panel__inner,
.page-home .home-panel * {
    box-sizing: border-box;
}

.page-home .home-panel img,
.page-home .home-panel video,
.page-home .home-panel svg {
    max-width: 100%;
}

/* Reflow the fixed 1920px composition on landscape tablets and small laptops. */
@media (min-width: 861px) and (max-width: 1180px) {
    html body.page-home {
        --home-desktop-scale: 1 !important;
    }

    html body.page-home .site-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        zoom: 1 !important;
    }

    html body.page-home .home-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: calc(100svh - 70px) !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body.page-home .home-panel > .home-panel__inner {
        width: min(calc(100% - 64px), 1080px) !important;
        min-width: 0 !important;
        max-width: 1080px !important;
        height: auto !important;
        min-height: calc(100svh - 70px) !important;
        max-height: none !important;
        margin-inline: auto !important;
        padding: clamp(96px, 12vw, 136px) 0 !important;
        overflow: visible !important;
    }

    html body.page-home #section-1 > .home-panel__inner,
    html body.page-home #section-2 > .home-panel__inner,
    html body.page-home #section-core-services > .home-panel__inner,
    html body.page-home #section-4 > .home-panel__inner,
    html body.page-home #section-3 > .home-panel__inner,
    html body.page-home #section-5 > .home-panel__inner,
    html body.page-home #section-6 > .home-panel__inner,
    html body.page-home #section-7 > .home-panel__inner,
    html body.page-home #section-8 > .home-panel__inner {
        width: min(calc(100% - 64px), 1080px) !important;
        min-width: 0 !important;
        max-width: 1080px !important;
        height: auto !important;
        min-height: calc(100svh - 70px) !important;
        max-height: none !important;
        margin-inline: auto !important;
        padding: clamp(96px, 12vw, 136px) 0 !important;
        overflow: visible !important;
    }

    html body.page-home #section-1 > .home-panel__inner {
        min-height: clamp(680px, 100svh, 820px) !important;
        padding-top: clamp(150px, 20svh, 190px) !important;
        padding-bottom: 96px !important;
    }

    html body.page-home .hero-text-block,
    html body.page-home .hero-copy,
    html body.page-home .hero-copy--single-line,
    html body.page-home #section-1 .hero-copy--single-line {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    html body.page-home .panel-company-overview .company-overview {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
        gap: 48px !important;
        align-items: center !important;
        transform: none !important;
    }

    html body.page-home .company-overview__headline,
    html body.page-home .company-overview__text {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.page-home .company-overview__globe,
    html body.page-home .company-overview__earth {
        width: min(30vw, 320px) !important;
        height: min(30vw, 320px) !important;
        transform: none !important;
    }

    html body.page-home .core-services,
    html body.page-home .ceo-message,
    html body.page-home .vision-layout,
    html body.page-home .business-services,
    html body.page-home .business-safety,
    html body.page-home .products-showcase,
    html body.page-home .quote-contact {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.page-home .core-services__cards,
    html body.page-home .business-services__cards,
    html body.page-home .products-showcase__frame {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 42px !important;
        transform: none !important;
    }

    html body.page-home #section-5 .business-services,
    html body.page-home #section-5 .business-services__header,
    html body.page-home #section-5 .business-services__cards {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    html body.page-home .core-service-card,
    html body.page-home .business-service-card,
    html body.page-home .product-card.product-card--summary {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 300px !important;
    }

    html body.page-home #section-core-services .core-service-card h3,
    html body.page-home #section-5 .business-service-card h3,
    html body.page-home #section-6 .safety-trust-card h3,
    html body.page-home #section-7 .product-card h3 {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    html body.page-home .ceo-message,
    html body.page-home .vision-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 48px !important;
    }

    html body.page-home #section-4 .ceo-message__content,
    html body.page-home #section-3 .vision-copy,
    html body.page-home #section-3 .vision-copy__body,
    html body.page-home #section-3 .vision-copy__body p,
    html body.page-home #section-3 .vision-quote {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }

    html body.page-home .ceo-value-card,
    html body.page-home #section-3 .vision-challenges:not(.vision-challenges--text) {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        min-height: 0 !important;
        justify-self: center !important;
        align-self: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.page-home .vision-copy__title,
    html body.page-home .vision-copy__title span,
    html body.page-home .vision-copy__title em,
    html body.page-home .vision-copy__line-break {
        white-space: normal !important;
    }

    html body.page-home .business-safety__copy,
    html body.page-home .business-safety__badges,
    html body.page-home .business-safety__trust {
        width: min(100%, 900px) !important;
        max-width: 900px !important;
        justify-self: center !important;
        transform: none !important;
    }

    html body.page-home #section-7 .product-card:last-child {
        grid-column: 1 / -1 !important;
        width: min(100%, calc((100% - 22px) / 2)) !important;
        justify-self: center !important;
    }

    html body.page-home #section-7 .product-card__footer {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    html body.page-home #section-7 .product-card__footer,
    html body.page-home #section-7 .product-card__footer span,
    html body.page-home #section-7 .product-card__footer b {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    html body.page-home .quote-contact,
    html body.page-home .quote-contact__header,
    html body.page-home .quote-contact__layout,
    html body.page-home .quote-form {
        width: min(100%, 718px) !important;
        max-width: 718px !important;
        min-width: 0 !important;
        transform: none !important;
    }

    html body.page-home .site-nav,
    html body.page-home.home-after-hero .site-nav {
        gap: clamp(22px, 3vw, 38px) !important;
    }

    html body.page-home .site-nav > a,
    html body.page-home .site-nav__link,
    html body.page-home.home-after-hero .site-nav > a,
    html body.page-home.home-after-hero .site-nav__link {
        font-size: 15px !important;
    }
}

/* Mobile: every section owns one full-width content box with internal gutters. */
@media (max-width: 860px) {
    html body.page-home .site-main,
    html body.page-home .home-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.page-home .home-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body.page-home .home-panel > .home-panel__inner,
    html body.page-home #section-7 > .home-panel__inner {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: clamp(68px, 18vw, 92px) 16px !important;
        overflow: visible !important;
    }

    html body.page-home #section-1 > .home-panel__inner,
    html body.page-home #section-2 > .home-panel__inner,
    html body.page-home #section-core-services > .home-panel__inner,
    html body.page-home #section-4 > .home-panel__inner,
    html body.page-home #section-3 > .home-panel__inner,
    html body.page-home #section-5 > .home-panel__inner,
    html body.page-home #section-6 > .home-panel__inner,
    html body.page-home #section-7 > .home-panel__inner,
    html body.page-home #section-8 > .home-panel__inner {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: clamp(68px, 18vw, 92px) 16px !important;
        overflow: visible !important;
    }

    html body.page-home #section-1 > .home-panel__inner {
        min-height: max(640px, 100svh) !important;
        padding-top: clamp(126px, 22vh, 170px) !important;
        padding-bottom: 72px !important;
        align-items: flex-start !important;
    }

    html body.page-home .hero-text-block {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html body.page-home .hero-brand {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px !important;
        overflow: visible !important;
    }

    html body.page-home .hero-brand__main,
    html body.page-home .hero-brand__sub {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        white-space: nowrap !important;
        line-height: .95 !important;
        transform: none !important;
    }

    html body.page-home .hero-brand__main {
        font-size: clamp(43px, 13vw, 58px) !important;
    }

    html body.page-home .hero-brand__sub {
        font-size: clamp(27px, 8.5vw, 38px) !important;
    }

    html body.page-home .hero-copy,
    html body.page-home .hero-copy--tagline,
    html body.page-home .hero-copy--lead,
    html body.page-home .hero-copy--single-line {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    html body.page-home .company-overview,
    html body.page-home .core-services,
    html body.page-home .ceo-message,
    html body.page-home .vision-layout,
    html body.page-home .business-services,
    html body.page-home .business-safety,
    html body.page-home .products-showcase,
    html body.page-home .quote-contact,
    html body.page-home .quote-contact__header,
    html body.page-home .quote-contact__layout,
    html body.page-home .quote-form,
    html body.page-home .core-services__cards,
    html body.page-home .business-services__cards,
    html body.page-home .products-showcase__frame {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    html body.page-home .company-overview,
    html body.page-home .ceo-message,
    html body.page-home .vision-layout,
    html body.page-home .business-safety,
    html body.page-home .quote-contact {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.page-home .company-overview__globe,
    html body.page-home .company-overview__earth {
        width: min(62vw, 260px) !important;
        height: min(62vw, 260px) !important;
        max-width: 100% !important;
        justify-self: center !important;
        margin-inline: auto !important;
        transform: none !important;
    }

    html body.page-home .company-overview__headline,
    html body.page-home .company-overview__title,
    html body.page-home .company-overview__text,
    html body.page-home .core-services__title,
    html body.page-home .ceo-message__title,
    html body.page-home .vision-copy__title,
    html body.page-home .business-services__title,
    html body.page-home .business-safety__title,
    html body.page-home .products-showcase__title,
    html body.page-home .quote-contact__title {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    html body.page-home .vision-copy,
    html body.page-home .vision-copy__body,
    html body.page-home .vision-copy__body p,
    html body.page-home .vision-quote,
    html body.page-home .ceo-message__content,
    html body.page-home .ceo-message__body,
    html body.page-home .ceo-value-card,
    html body.page-home .vision-challenges:not(.vision-challenges--text) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    html body.page-home .vision-copy__title span,
    html body.page-home .vision-copy__title em,
    html body.page-home .vision-copy__line-break,
    html body.page-home .business-safety__title span {
        white-space: normal !important;
    }

    html body.page-home .core-service-card,
    html body.page-home .business-service-card,
    html body.page-home .product-card.product-card--summary,
    html body.page-home .ceo-value-card,
    html body.page-home .vision-challenges:not(.vision-challenges--text) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    html body.page-home #section-5 .business-service-card,
    html body.page-home #section-7 .product-card.product-card--summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        overflow: hidden !important;
    }

    html body.page-home #section-5 .business-service-card > *,
    html body.page-home #section-7 .product-card.product-card--summary > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.page-home #section-core-services .core-service-card h3,
    html body.page-home #section-5 .business-service-card h3,
    html body.page-home #section-6 .safety-trust-card h3,
    html body.page-home #section-7 .product-card h3 {
        height: auto !important;
        max-height: none !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }

    html body.page-home #section-5 .business-service-card__footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
    }

    html body.page-home #section-5 .business-service-card__footer > span {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    html body.page-home .business-safety__copy,
    html body.page-home .business-safety__badges,
    html body.page-home .business-safety__trust {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    html body.page-home .business-safety__copy {
        text-align: left !important;
    }

    html body.page-home .business-safety__title {
        white-space: normal !important;
        font-size: clamp(25px, 7.4vw, 32px) !important;
    }

    html body.page-home #section-6 .business-safety__title {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    html body.page-home .business-safety__badges {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-top: 16px !important;
    }

    html body.page-home .safety-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        padding: 5px !important;
    }

    html body.page-home .business-safety__trust {
        --safety-carousel-viewport: 100%;
        --safety-carousel-card: 100%;
        overflow: hidden !important;
    }

    html body.page-home .business-safety__trust-track {
        max-width: none !important;
    }

    html body.page-home .business-safety__trust .safety-trust-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.page-home .quote-contact__header {
        justify-items: start !important;
        text-align: left !important;
    }

    html body.page-home .quote-contact__title {
        font-size: clamp(23px, 7vw, 30px) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    html body.page-home #section-8 .quote-contact__title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(23px, 7vw, 30px) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    html body.page-home .quote-form {
        padding: 18px 14px !important;
        overflow: hidden !important;
    }

    html body.page-home .quote-form__grid,
    html body.page-home .quote-field,
    html body.page-home .quote-field input,
    html body.page-home .quote-field select,
    html body.page-home .quote-field textarea,
    html body.page-home .quote-form__submit {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.page-home .quote-field textarea {
        min-height: 120px !important;
        overflow: auto !important;
        resize: vertical !important;
    }

    html body .site-lang__menu {
        left: auto !important;
        right: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 520px) {
    html body .site-header,
    html body.page-home .site-header,
    html body.page-home.home-after-hero .site-header {
        height: auto !important;
        min-height: 82px !important;
    }

    html body .site-header__inner,
    html body.page-home .site-header__inner,
    html body.page-home.home-after-hero .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand spacer language"
            "navigation navigation navigation" !important;
        gap: 2px 10px !important;
        min-height: 82px !important;
        padding: 5px 12px 7px !important;
    }

    html body .site-brand {
        grid-area: brand !important;
    }

    html body .site-nav,
    html body.page-home .site-nav,
    html body.page-home.home-after-hero .site-nav {
        grid-area: navigation !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        transform: none !important;
    }

    html body .site-nav > a,
    html body .site-nav__link,
    html body.page-home .site-nav > a,
    html body.page-home .site-nav__link,
    html body.page-home.home-after-hero .site-nav > a,
    html body.page-home.home-after-hero .site-nav__link {
        min-width: 0 !important;
        padding: 3px 0 !important;
        font-size: clamp(10px, 3vw, 12px) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    html body .site-lang--dropdown,
    html body.page-home .site-lang--dropdown,
    html body.page-home.home-after-hero .site-lang--dropdown {
        grid-area: language !important;
        justify-self: end !important;
        transform: none !important;
    }

    html body.page-home #section-1 > .home-panel__inner {
        padding-top: 136px !important;
    }

    html body.page-home .business-safety__badges {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 350px) {
    html body.page-home .home-panel > .home-panel__inner,
    html body.page-home #section-7 > .home-panel__inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html body.page-home .hero-brand {
        gap: 6px !important;
    }

    html body.page-home .hero-brand__main {
        font-size: 42px !important;
    }

    html body.page-home .hero-brand__sub {
        font-size: 26px !important;
    }

    html body .site-nav > a,
    html body .site-nav__link {
        font-size: 9.5px !important;
    }
}