/* v23 Mobile layout hard-fix: loaded after site.css */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

.mobile-title-break {
    display: none;
}

@media (max-width: 1024px) {
    .main-content,
    .det-home,
    .mock-hero,
    .mock-section,
    .section,
    .site-footer,
    .site-cta,
    .page-hero {
        max-width: 100%;
        overflow-x: hidden;
    }

    .shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .site-header {
        min-height: 76px !important;
    }

    .nav-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 76px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .brand {
        min-width: 0 !important;
        max-width: calc(100% - 68px) !important;
        flex: 1 1 auto !important;
        gap: 10px !important;
    }

    .brand__mark,
    .brand__mark img {
        width: 48px !important;
        height: 42px !important;
        flex: 0 0 48px !important;
    }

    .brand__text {
        min-width: 0 !important;
        font-size: clamp(.88rem, 4.1vw, 1.04rem) !important;
        letter-spacing: .045em !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand__text small {
        display: none !important;
    }

    .nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 52px !important;
        border-radius: 18px !important;
        padding: 0 !important;
    }

    .nav-toggle span {
        width: 24px !important;
        height: 2px !important;
        margin: 3px 0 !important;
    }

    .main-nav {
        display: none !important;
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        top: 84px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 105px) !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        z-index: 200 !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .mock-hero {
        padding-top: 18px !important;
        min-height: 0 !important;
    }

    .mock-hero__inner {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important;
    }

    .mock-hero__content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 0 0 !important;
        text-align: left !important;
    }

    .mock-hero__content h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(2.05rem, 10.2vw, 3.2rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.052em !important;
        margin-bottom: 18px !important;
        overflow-wrap: normal !important;
    }

    .mock-hero__content h1 span {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .mock-hero__content p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(.98rem, 4.4vw, 1.12rem) !important;
        line-height: 1.55 !important;
        margin-bottom: 22px !important;
        overflow-wrap: break-word !important;
    }

    .mock-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mock-btn,
    .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .mock-hero__scene,
    .mock-hero__scene--realistic {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 10.5 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .mock-hero__scene::before,
    .mock-hero__scene::after {
        max-width: 100% !important;
    }

    .hero-photo-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    .hero-photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .hero-live-badge,
    .hero-mini-widget,
    .hero-orbit,
    .hud-card {
        display: none !important;
    }

    .mock-stats__grid,
    .solution-grid,
    .why-row,
    .reference-grid,
    .mock-projects,
    .process-row,
    .card-grid,
    .project-grid,
    .seo-focus-grid,
    .service-premium-grid,
    .premium-strip,
    .form-grid,
    .counter-grid,
    .meta-grid,
    .logo-grid,
    .content-with-sidebar,
    .form-layout,
    .about-split,
    .detail-grid,
    .footer-grid,
    .services-hero__grid,
    .service-detail-hero__content,
    .det-game-shell {
        grid-template-columns: 1fr !important;
    }

    .listing-card__media img,
    .product-card__image img,
    .project-card__image img,
    .mock-project img,
    .service-premium-card__media img,
    .service-wide-card img {
        width: 100% !important;
        height: clamp(180px, 54vw, 260px) !important;
        object-fit: cover !important;
    }

    .reference-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .reference-wrap > button {
        display: none !important;
    }

    .footer-grid,
    .footer-bottom__inner {
        text-align: left !important;
    }
}

@media (max-width: 540px) {
    .shell {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .site-header {
        min-height: 72px !important;
    }

    .nav-shell {
        min-height: 72px !important;
    }

    .brand__mark,
    .brand__mark img {
        width: 44px !important;
        height: 39px !important;
        flex-basis: 44px !important;
    }

    .brand__text {
        font-size: clamp(.82rem, 5.2vw, .98rem) !important;
        letter-spacing: .04em !important;
    }

    .nav-toggle {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }

    .mock-hero__content h1 {
        font-size: clamp(1.95rem, 10.6vw, 2.75rem) !important;
    }

    .mobile-title-break {
        display: block !important;
    }

    .mock-hero__scene,
    .mock-hero__scene--realistic {
        aspect-ratio: 16 / 11.5 !important;
    }

    .mock-section,
    .section {
        padding-top: 26px !important;
        padding-bottom: 36px !important;
    }

    .solution-card {
        grid-template-columns: 52px 1fr !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    .solution-card em {
        display: none !important;
    }

    .det-game-card {
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .det-game-controls {
        grid-template-columns: 50px 1fr 50px !important;
        gap: 8px !important;
    }

    .det-game-control,
    .det-game-start {
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 390px) {
    .shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .brand__mark,
    .brand__mark img {
        width: 40px !important;
        height: 36px !important;
        flex-basis: 40px !important;
    }

    .brand__text {
        font-size: .78rem !important;
        letter-spacing: .035em !important;
    }

    .nav-toggle {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .mock-hero__content h1 {
        font-size: 1.82rem !important;
        letter-spacing: -.045em !important;
    }

    .mock-hero__content p {
        font-size: .95rem !important;
    }
}