@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        padding: 0;
    }

    .site-main {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body:not(.home-page) .site-main {
        padding-top: var(--site-header-height);
    }

    img,
    picture,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    :is(h1, h2, h3, h4, p, a, span, strong, li) {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .site-header,
    .home-page .site-header,
    .home-page .site-header.is-scrolled {
        position: fixed !important;
        inset: 0 0 auto !important;
        z-index: 3000;
        height: var(--site-header-height);
        background: rgba(255,255,255,.98) !important;
        border-bottom: 1px solid var(--site-line) !important;
        box-shadow: 0 8px 28px rgba(11,37,70,.055) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .site-header-inner {
        width: calc(100% - 32px) !important;
        max-width: none;
        gap: 12px;
    }

    .site-brand {
        flex: 1 1 auto;
        max-width: calc(100% - 58px);
        gap: 9px;
    }

    .site-brand-copy {
        min-width: 0;
    }

    .site-brand-name {
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .site-menu-toggle {
        display: flex !important;
        flex: 0 0 44px;
        margin-left: auto;
        position: relative;
        z-index: 2;
    }

    .site-navigation-wrap {
        position: fixed !important;
        top: var(--site-header-height) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - var(--site-header-height) - 12px) !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow-y: auto !important;
        background: rgba(255,255,255,.995) !important;
        border: 1px solid rgba(11,37,70,.10) !important;
        border-top: 2px solid var(--site-accent) !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 20px 44px rgba(11,37,70,.14) !important;
    }

    .site-navigation {
        margin: 0 !important;
        width: 100%;
    }

        .site-navigation > a,
        .site-service-menu > summary {
            width: 100%;
            min-height: 48px;
            padding: 12px 10px !important;
        }

    .site-service-submenu {
        margin-inline: 8px !important;
    }

    .site-header-actions {
        width: 100%;
        margin: 4px 0 0 !important;
    }

    .site-header-cta {
        width: 100%;
        justify-content: space-between;
    }

    .home-page .site-hero {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden;
    }

    .home-page .site-hero-inner {
        order: 0;
        width: calc(100% - 32px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: calc(var(--site-header-height) + 28px) 0 28px !important;
    }

    .home-page .site-hero-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 650px !important;
        transform: none !important;
    }

    .home-page .site-hero-eyebrow {
        max-width: 100%;
        margin: 0 0 12px !important;
    }

    .home-page .site-hero-title {
        width: 100% !important;
        max-width: 650px !important;
        margin: 0 !important;
        font-size: clamp(40px, 9.8vw, 58px) !important;
        line-height: .96 !important;
        letter-spacing: -.035em !important;
    }

        .home-page .site-hero-title span {
            overflow-wrap: normal !important;
            word-break: keep-all !important;
        }

    .home-page .site-hero-description {
        width: 100%;
        max-width: 610px;
        margin-top: 18px !important;
    }

    .home-page .site-hero-actions {
        width: 100%;
        max-width: 610px;
        margin-top: 22px !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .home-page .site-hero-rail,
    .home-page .site-hero-cut-line,
    .home-page .site-hero-scroll-hint {
        display: none !important;
    }

    .home-page .site-hero-media {
        order: 1;
        position: relative !important;
        inset: auto !important;
        width: calc(100% - 32px) !important;
        height: clamp(280px, 65vw, 430px) !important;
        min-height: 0 !important;
        margin: 0 auto 18px !important;
        overflow: hidden;
        border-radius: 16px;
    }

    .home-page .site-hero-photo,
    .home-page .site-hero-photo-wash,
    .home-page .site-hero-photo-placeholder {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        border-radius: inherit;
    }

    .home-page .site-hero-photo {
        object-position: center center;
    }

    .home-reference-width,
    .about-container,
    .prj-container,
    .refs-container,
    .inquiry-container,
    .legal-content-inner,
    .service-empty-public,
    .service-detail-hero,
    .service-detail-body,
    .service-detail-gallery,
    .service-detail-closing-wrap {
        max-width: 100%;
    }

    .service-detail-page .service-detail-main-photo,
    .services-overview-page .services-overview-hero-media img,
    .projects-page img,
    .references-page img,
    .about-page img {
        max-width: 100%;
        height: auto;
    }

    .inquiry-page iframe,
    .inquiry-page .inquiry-map {
        width: 100%;
    }
}

@media (max-width: 620px) {
    :root {
        --site-header-height: 74px;
    }

    .site-header-inner {
        width: calc(100% - 24px) !important;
    }

    .site-brand {
        max-width: calc(100% - 54px);
    }

    .site-brand-logo {
        width: 42px !important;
        height: 38px !important;
    }

    .site-brand-name {
        font-size: 17px !important;
    }

    .site-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .site-navigation-wrap {
        left: 8px !important;
        right: 8px !important;
        padding: 10px !important;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    .home-page .site-hero-inner {
        width: calc(100% - 28px) !important;
        padding-top: calc(var(--site-header-height) + 24px) !important;
        padding-bottom: 24px !important;
    }

    .home-page .site-hero-eyebrow {
        margin-bottom: 10px !important;
        font-size: 9.5px !important;
        line-height: 1.4;
        letter-spacing: .11em;
    }

    .home-page .site-hero-title {
        font-size: clamp(36px, 10.8vw, 48px) !important;
        line-height: .97 !important;
        letter-spacing: -.032em !important;
    }

    .home-page .site-hero-description {
        margin-top: 16px !important;
        font-size: 14px !important;
        line-height: 1.58;
    }

    .home-page .site-hero-actions {
        grid-template-columns: 1fr !important;
        margin-top: 20px !important;
        gap: 9px;
    }

        .home-page .site-hero-actions .site-button {
            width: 100%;
            min-height: 46px;
            justify-content: space-between;
            padding-inline: 14px;
        }

    .home-page .site-hero-media {
        width: calc(100% - 28px) !important;
        height: clamp(250px, 68vw, 330px) !important;
        border-radius: 14px;
        margin-bottom: 14px !important;
    }

    .home-reference-width,
    .about-container,
    .prj-container,
    .refs-container,
    .inquiry-container,
    .legal-content-inner,
    .service-empty-public,
    .service-detail-hero,
    .service-detail-body,
    .service-detail-gallery,
    .service-detail-closing-wrap {
        width: calc(100% - 28px) !important;
        margin-inline: auto !important;
    }

    .about-page .about-timeline-scroll {
        overflow: visible !important;
    }

    .about-page .about-timeline {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

        .about-page .about-timeline > li {
            min-width: 0 !important;
        }

    .services-overview-page .services-featured-reference-slide,
    .services-overview-page .services-featured-reference-slide.is-active,
    .service-detail-page .service-detail-hero,
    .service-detail-page .service-detail-body,
    .inquiry-page .inquiry-contact-grid,
    .inquiry-page .inquiry-quote-stage,
    .projects-page .prj-hero-layout,
    .references-page .refs-coverage-grid {
        grid-template-columns: 1fr !important;
    }

    .services-overview-page .services-featured-reference-copy h2,
    .service-detail-page .service-detail-intro h1,
    .projects-page .prj-hero-copy h1,
    .references-page .refs-hero-copy h1,
    .about-page .about-hero-copy h1,
    .legal-page .legal-content h1 {
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    .service-detail-page .service-application-grid,
    .service-detail-page .service-standard-list,
    .references-page .refs-featured-project-list,
    .references-page .refs-statistics-grid,
    .projects-page .prj-sector-grid {
        grid-template-columns: 1fr !important;
    }

    .inquiry-page .inquiry-fields,
    .inquiry-page .inquiry-quote-actions {
        grid-template-columns: 1fr !important;
    }

    .inquiry-page .inquiry-map {
        min-height: 260px;
    }

    .site-footer-inner,
    .site-footer-bottom-inner {
        width: calc(100% - 28px) !important;
    }
}

@media (max-width: 390px) {
    :root {
        --site-header-height: 70px;
    }

    .site-brand-logo {
        width: 39px !important;
        height: 35px !important;
    }

    .site-brand-name {
        font-size: 15.5px !important;
    }

    .site-menu-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .home-page .site-hero-inner {
        width: calc(100% - 24px) !important;
        padding-top: calc(var(--site-header-height) + 20px) !important;
    }

    .home-page .site-hero-title {
        font-size: clamp(34px, 10.4vw, 41px) !important;
    }

    .home-page .site-hero-media {
        width: calc(100% - 24px) !important;
        height: 245px !important;
    }

    .home-reference-width,
    .about-container,
    .prj-container,
    .refs-container,
    .inquiry-container,
    .legal-content-inner,
    .service-detail-hero,
    .service-detail-body,
    .service-detail-gallery,
    .service-detail-closing-wrap {
        width: calc(100% - 24px) !important;
    }
}

/* =========================================================
   Mobile image composition repairs — 2026-09-27
   Keeps desktop untouched; fixes only the four reported views.
   ========================================================= */
@media (max-width: 620px) {
    /* Services overview hero: use the same compact, near-square visual rhythm as home. */
    .services-overview-page .services-overview-hero-media {
        position: relative !important;
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 8px auto 22px !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

        .services-overview-page .services-overview-hero-media img {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            max-height: none !important;
            aspect-ratio: auto !important;
            object-fit: cover !important;
            object-position: center center !important;
            border-radius: inherit !important;
        }

    /* About hero: remove the stretched strip / empty tail and match home image proportions. */
    .about-page .about-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
    }

        .about-page .about-hero > .about-container {
            flex: none !important;
            padding-top: 30px !important;
            padding-bottom: 34px !important;
        }

    .about-page .about-hero-media {
        position: relative !important;
        inset: auto !important;
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto 22px !important;
        aspect-ratio: 4 / 3 !important;
        flex: none !important;
        overflow: hidden !important;
        clip-path: none !important;
        border-radius: 16px !important;
        background: #f4f6f8 !important;
    }

        .about-page .about-hero-media > img,
        .site-main.about-page .motion-hero .about-hero-media > img.motion-hero-media,
        .site-main.about-page .motion-hero.is-motion-entered .about-hero-media > img.motion-hero-media {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            object-fit: cover !important;
            object-position: 62% 50% !important;
            border-radius: inherit !important;
        }

        .about-page .about-hero-media::after {
            border-radius: inherit !important;
        }

    /* Projects hero: keep the layered photo concept, but stop it colliding with the copy. */
    .prj-page .prj-hero {
        min-height: 0 !important;
        height: auto !important;
    }

    .prj-page .prj-hero-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 28px !important;
        padding-top: 34px !important;
        padding-bottom: 48px !important;
    }

    .prj-page .prj-hero-copy {
        order: 1 !important;
        position: relative !important;
        z-index: 4 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .prj-page .prj-photo-stack {
        order: 2 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 430px !important;
        height: clamp(300px, 92vw, 390px) !important;
        margin: 2px auto 0 !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .prj-page .prj-photo-layer {
        left: calc(2% + var(--prj-layer) * 4%) !important;
        top: calc(2% + var(--prj-layer) * 6%) !important;
        width: 86% !important;
        height: 76% !important;
        padding: 5px !important;
        border-radius: 10px !important;
        --prj-angle: calc(-4deg + var(--prj-layer) * 4deg);
    }

        .prj-page .prj-photo-layer img {
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            object-fit: cover !important;
            border-radius: 6px !important;
        }

    .prj-page .prj-hero h1 {
        margin-bottom: 16px !important;
        font-size: clamp(35px, 10vw, 44px) !important;
        line-height: 1.02 !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    /* References / featured projects: every project gets the same full-width image composition. */
    .refs-page .refs-featured-project-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .refs-page .refs-featured-project,
    .refs-page .refs-featured-project:first-child,
    .refs-page .refs-featured-project:last-child:nth-child(even) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

        .refs-page .refs-featured-project-media,
        .refs-page .refs-featured-project:first-child .refs-featured-project-media {
            grid-column: 1 !important;
            grid-row: 1 !important;
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            aspect-ratio: 4 / 3 !important;
            overflow: hidden !important;
            background: #edf1f4 !important;
        }

            .refs-page .refs-featured-project-media img,
            .refs-page .refs-featured-project:first-child .refs-featured-project-media img {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                max-height: none !important;
                object-fit: cover !important;
                object-position: center center !important;
            }

        .refs-page .refs-featured-project-copy,
        .refs-page .refs-featured-project:first-child .refs-featured-project-copy {
            grid-column: 1 !important;
            grid-row: 2 !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 20px 19px 23px !important;
        }
}

@media (max-width: 390px) {
    .services-overview-page .services-overview-hero-media,
    .about-page .about-hero-media {
        width: calc(100% - 20px) !important;
        border-radius: 14px !important;
    }

    .prj-page .prj-photo-stack {
        height: 300px !important;
    }

    .refs-page .refs-featured-project-media,
    .refs-page .refs-featured-project:first-child .refs-featured-project-media {
        aspect-ratio: 4 / 3 !important;
    }
}