@media (max-width: 767px) {
    html,
    body {
        min-width: 320px;
        overflow-x: hidden;
        background: #fff;
    }

    body {
        width: 100%;
    }

    .mobile-menu-toggle span {
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(min(18px, 2.4vw)) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(max(-18px, -2.4vw)) rotate(-45deg);
    }

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

    .design-stage,
    .about-stage,
    .artist-stage,
    .business-stage,
    .case-stage,
    .join-stage,
    .footer-stage {
        transform: scale(var(--hx-mobile-stage-scale, 1));
        transform-origin: center top;
    }

    .design-stage .banner-side-text svg {
        display: block;
        width: 9px;
        height: 108px;
    }

    .design-stage .banner-side-text svg path {
        transform: scale(0.4355);
        transform-box: view-box;
        transform-origin: 0 0;
    }

    .artist-mobile-pagination .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        margin: 0 10px !important;
        background: #f4b5df;
        opacity: 1;
    }

    .artist-mobile-pagination .swiper-pagination-bullet-active {
        background: #f41486;
    }

    .artist-mobile-swiper {
        contain: paint;
        isolation: isolate;
    }

    .artist-mobile-swiper .swiper-wrapper,
    .artist-mobile-swiper .swiper-slide {
        max-width: 100%;
    }

    .business-video-modal {
        padding: 18px;
    }

    .business-video-modal__panel {
        width: calc(100vw - 36px);
        border-radius: 6px;
    }

    .business-video-modal__panel.is-portrait {
        width: min(82vw, 520px);
    }

    .case-swiper {
        clip-path: inset(-111px -29px -123px -29px);
    }

    .case-swiper:not(.case-swiper-transitioning) .swiper-slide:not(.swiper-slide-active) {
        visibility: hidden;
        pointer-events: none;
    }

    .case-swiper.case-swiper-transitioning .swiper-slide {
        visibility: visible;
    }

    .case-swiper .swiper-slide.is-phone-target:not(.swiper-slide-active)::after {
        display: none;
    }

    .case-swiper .swiper-slide.swiper-slide-active.is-phone-target::after {
        left: -29px;
        top: -111px;
        width: 502px;
        height: 1022px;
        background-size: contain;
        background-position: center;
    }

    .join-form-card .el-select::after {
        right: 31px;
        top: 32px;
        width: 20px;
        height: 20px;
        border-width: 0 3px 3px 0;
    }

    .join-form-card .el-form-item__error {
        display: none;
    }

    .el-message-box.join-validation-dialog {
        width: calc(100vw - 40px);
        max-width: 420px;
        padding: 28px 24px 22px;
        border: 0;
        border-radius: 16px;
        box-shadow: 0 18px 54px rgba(65, 16, 45, 0.24);
    }

    .join-validation-dialog .el-message-box__header {
        padding: 0 0 14px;
    }

    .join-validation-dialog .el-message-box__title {
        color: #28292d;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.35;
    }

    .el-message-box.join-validation-dialog .el-message-box__content {
        padding: 0;
        color: #55565a;
        font-size: 15px;
        line-height: 1.9;
        text-align: left;
        white-space: pre-line;
    }

    .join-validation-dialog .el-message-box__status {
        color: #f41486;
    }

    .join-validation-dialog .el-message-box__btns {
        padding: 22px 0 0;
        text-align: center;
    }

    .join-validation-dialog .el-button--primary,
    .join-validation-dialog .el-button--primary:focus,
    .join-validation-dialog .el-button--primary:hover {
        min-width: 148px;
        height: 44px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, #ff2b78 0%, #ff6292 100%);
        font-size: 16px;
        font-weight: 700;
    }
}

@media (max-width: 420px) {
    .business-video-modal__close {
        right: 8px;
        top: 8px;
        width: 36px;
        height: 36px;
    }
}