@media (max-width: 768px) {
    :root {
        --mobile-inline-pad: clamp(10px, 3.8vw, 16px);
        --mobile-block-gap: clamp(0.7rem, 2.8vw, 1.1rem);
    }

    html,
    body {
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .container {
        width: min(var(--container-width), calc(100% - (var(--mobile-inline-pad) * 2)));
    }

    .header {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    }

    .header__container {
        gap: 0.5rem;
    }

    .header__logo {
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-page-actions {
        flex-shrink: 0;
    }

    .nav-circle-btn {
        width: 40px;
        height: 40px;
    }

    .detail-page,
    .legal-content,
    main.detail-page,
    main.legal-content {
        margin-top: 88px !important;
        margin-bottom: 36px !important;
        padding-left: var(--mobile-inline-pad) !important;
        padding-right: var(--mobile-inline-pad) !important;
    }

    .detail-page h1,
    .legal-content h1,
    .detail-page > h1 {
        font-size: clamp(1.5rem, 6.8vw, 1.95rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        overflow-wrap: anywhere;
    }

    .detail-content,
    .legal-content div,
    .detail-body {
        font-size: 1rem !important;
        line-height: 1.58 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .detail-content h2,
    .legal-content h2,
    .detail-body h2 {
        font-size: 1.2rem !important;
        margin-top: 1.1rem !important;
    }

    .detail-content h3,
    .legal-content h3,
    .detail-body h3 {
        font-size: 1.08rem !important;
        margin-top: 1rem !important;
    }

    .detail-content p,
    .detail-content li,
    .legal-content p,
    .legal-content li,
    .detail-body p,
    .detail-body li {
        line-height: 1.58 !important;
        margin-bottom: 0.75em;
    }

    .detail-content ul,
    .detail-content ol,
    .legal-content ul,
    .legal-content ol,
    .detail-body ul,
    .detail-body ol {
        padding-left: 1.1rem;
        margin-left: 0;
    }

    .detail-content img,
    .detail-content video,
    .detail-content iframe,
    .detail-body img,
    .detail-body video,
    .detail-body iframe,
    .legal-content img,
    .legal-content video,
    .legal-content iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    .detail-content table,
    .detail-body table,
    .legal-content table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-content pre,
    .detail-body pre,
    .legal-content pre {
        overflow-x: auto;
        white-space: pre;
    }

    .detail-content code,
    .detail-body code,
    .legal-content code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .detail-content details {
        padding: 0.8rem 0.85rem !important;
    }

    .detail-content details summary {
        line-height: 1.45;
    }

    .detail-content > div[style*="margin-top: 28px"],
    .detail-content > div[style*="margin-top: 28px;"] {
        padding: 0.95rem !important;
    }

    .media-tabs {
        gap: 0.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .media-tab-btn {
        min-height: 42px;
        width: 100%;
    }

    .detail-media {
        border-radius: 10px;
    }

    .detail-container > div:first-child {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    #open-full-page-btn {
        font-size: 0.92rem !important;
        padding: 0.42rem 0.72rem !important;
    }

    .hero {
        padding-top: 6.2rem;
    }

    .hero__actions {
        margin-top: 1.75rem;
        gap: var(--mobile-block-gap);
    }

    .hero__actions > * {
        flex: 1 1 100%;
    }

    .hero__actions .btn {
        min-height: 48px;
        letter-spacing: 0.08em;
        font-size: 0.9rem;
    }

    #why .grid,
    #services .grid,
    #process .grid {
        gap: 0.95rem;
    }

    #services .service-item,
    #why .card,
    #process .card,
    #expertise .service-item {
        border-radius: 14px;
        padding: clamp(0.85rem, 2.6vw, 1.1rem);
    }

    .service-item.expanded {
        width: calc(100% - 18px) !important;
        max-height: 88dvh !important;
        border-radius: 14px !important;
        padding: 0.95rem !important;
    }

    .service-item.expanded h3 {
        font-size: 1rem !important;
    }

    .service-item .close-btn {
        width: 36px;
        height: 36px;
    }

    .contact__map-grid {
        gap: 0.9rem;
    }

    .contact__map-card {
        padding: 0.8rem;
    }

    .contact__map-title {
        font-size: 1rem;
    }

    .modal-overlay.active {
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    }

    .modal-content {
        border-radius: 14px !important;
    }

    .modal-header {
        padding: 1rem 1rem 0.75rem !important;
        gap: 0.7rem !important;
    }

    .modal-header h2 {
        font-size: 1.1rem !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .modal-body {
        padding: 0 1rem 1rem !important;
        font-size: 0.98rem;
        line-height: 1.52;
    }

    .modal-body p,
    .modal-body li,
    .modal-body td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .gallery-card {
        border-radius: 12px;
        min-width: 82vw;
        max-width: 82vw;
    }

    .gallery-card h3 {
        font-size: 1.05rem;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .gallery-card p {
        line-height: 1.42;
    }

    footer {
        margin-top: 2.5rem !important;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    footer p,
    footer a,
    #footer-about-link {
        line-height: 1.5;
    }

    footer a,
    #footer-about-link,
    #logo-about-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .header__nav-links a,
    .lang-switch a,
    .app-switch a,
    .back-link,
    .btn,
    .nav-circle-btn,
    .mobile-expertise-item,
    .media-tab-btn,
    .modal-close,
    .close-btn,
    .btn-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header__nav-links a,
    .lang-switch a,
    .app-switch a,
    .btn,
    .nav-circle-btn,
    .mobile-expertise-item,
    .media-tab-btn,
    .modal-close,
    .close-btn,
    .btn-back {
        min-height: 44px !important;
    }
}

@media (max-width: 479px) {
    .header__logo {
        max-width: 54vw;
        font-size: 1.05rem !important;
    }

    .header__container {
        gap: 0.35rem;
    }

    .nav-circle-btn {
        width: 38px;
        height: 38px;
    }

    .detail-page h1,
    .legal-content h1,
    .detail-page > h1 {
        font-size: clamp(1.35rem, 6.5vw, 1.75rem) !important;
    }

    .detail-content,
    .legal-content div,
    .detail-body {
        font-size: 0.98rem !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 0.9rem 0.85rem 0.7rem !important;
    }

    .modal-body {
        padding: 0 0.85rem 0.9rem !important;
    }

    .gallery-card {
        min-width: 86vw;
        max-width: 86vw;
    }

    .media-tabs {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
}

@media (max-width: 359px) {
    .container {
        width: min(var(--container-width), calc(100% - 16px));
    }

    .header__logo {
        max-width: 50vw;
        font-size: 0.98rem !important;
    }

    .detail-page,
    .legal-content,
    main.detail-page,
    main.legal-content {
        margin-top: 82px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .detail-content,
    .legal-content div,
    .detail-body {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .btn,
    .mobile-expertise-item,
    .media-tab-btn {
        font-size: 0.86rem !important;
    }

    .hero__actions .btn {
        padding: 0.68rem 0.75rem;
    }

    .modal-header h2 {
        font-size: 1.02rem !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .header {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: 0.45rem;
    }

    .hero {
        padding-top: 4.5rem;
    }

    .detail-page,
    .legal-content,
    main.detail-page,
    main.legal-content {
        margin-top: 72px !important;
    }

    .modal-content {
        height: 96dvh !important;
    }
}