/* ==========================================================================
   RESPONSIVE DESIGN RULES - MOBILE FIRST TO LARGE DESKTOP
   ========================================================================== */

/* Large Desktop (1920px+) */
@media screen and (min-width: 1920px) {
    :root {
        --container-max-width: 1540px;
    }

    .hero__card-box {
        padding: 72px 84px;
        gap: 72px;
    }

    .hero__title {
        font-size: 2.75rem;
    }

    .hero__desc-1,
    .hero__desc-2 {
        font-size: 1.15rem;
    }
}

/* Laptop / Desktop standard (1024px to 1439px) */
@media screen and (max-width: 1439px) {
    :root {
        --container-max-width: 1140px;
    }

    .hero__card-box {
        padding: 44px 48px;
        gap: 40px;
    }

    .hero__title {
        font-size: 2.15rem;
    }

    .stat-card {
        padding: 28px 16px;
    }

    .stat-card__number {
        font-size: 2rem;
    }
}

/* Tablet (768px to 1023px) */
@media screen and (max-width: 1023px) {
    .header-wrapper {
        top: 12px;
    }

    .header {
        padding: 12px 20px;
    }

    .nav-menu {
        left: 20px;
        right: 20px;
        top: calc(100% + 12px);
        border-radius: 28px;
        max-height: calc(100vh - 100px);
    }

    .nav-menu__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px 32px;
    }

    .nav-menu__link {
        font-size: 1.25rem;
        padding: 12px 16px;
    }

    /* Hero Section Tablet */
    .hero__card-box {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 36px;
        text-align: center;
    }

    .hero__content {
        align-items: center;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__buttons {
        justify-content: center;
    }

    .hero__visual {
        justify-content: center;
    }

    .hero__image-wrapper {
        max-width: 440px;
    }

    /* Stats Grid Tablet */
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .marquee-card {
        width: 330px;
        height: 194px;
        border-radius: 20px;
    }

    .philosophy__text {
        font-size: 1.85rem;
        line-height: 1.4;
    }

    .expertise__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .expertise__visual {
        position: relative;
        top: 0;
        order: -1;
    }

    .expertise {
        min-height: auto;
        padding: 60px 0;
    }

    .expertise__grid {
        overflow: visible;
    }

    .expertise__cards {
        gap: 28px;
        padding-bottom: 0;
        padding-left: 0;
        width: 100%;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .expertise-card {
        position: relative;
        top: auto !important;
        padding: 36px 36px;
    }

    .expertise-card:nth-child(odd),
    .expertise-card:nth-child(even) {
        transform: rotate(0deg);
    }

    .approach__grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .approach__header {
        margin-bottom: 64px;
    }

    .story-banner__card {
        padding: 64px 56px;
        border-radius: 36px;
    }

    .story-banner__title {
        font-size: 2.6rem;
        margin-bottom: 48px;
    }

    .crafted-work__grid {
        gap: 24px;
    }

    .crafted-work__title {
        font-size: 2.7rem;
    }

    .crafted-work__banner-title {
        font-size: 2.4rem;
    }

    .experience__title {
        font-size: 2.7rem;
    }

    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .testimonials__title {
        font-size: 2.7rem;
    }

    .contact__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .contact__card {
        max-width: 380px;
        margin: 0 auto;
    }

    .contact__title {
        font-size: 2.7rem;
    }

    .footer__title-wrap {
        max-width: 680px;
    }

    .footer__main-title {
        font-size: 3.8rem;
    }

    .footer {
        padding: 80px 0 0;
        margin: 0;
    }

    .about-main {
        padding-top: 100px;
    }

    .about-intro {
        padding: 44px 0 32px;
    }

    .about-intro__statement {
        font-size: 2.7rem;
        line-height: 1.3;
        letter-spacing: 0.012em;
    }

    .frame74-grid {
        gap: 24px;
    }

    .frame74-card {
        padding: 18px;
        border-radius: 24px;
    }

    .about-story {
        padding: 0 0 100px;
    }

    .story-banner {
        padding: 48px 44px;
        min-height: 340px;
        border-radius: 28px;
    }

    .story-banner__title {
        font-size: 2.6rem;
        margin: 36px 0 40px;
    }
}

/* Mobile (320px to 767px) */
@media screen and (max-width: 767px) {
    .header-wrapper {
        top: 8px;
    }

    .header {
        padding: 10px 16px;
        border-radius: 16px;
    }

    .nav-menu {
        left: 16px;
        right: 16px;
        top: calc(100% + 10px);
        border-radius: 24px;
        max-height: calc(100vh - 84px);
    }

    .nav-menu__inner {
        padding: 28px 20px;
        gap: 28px;
    }

    .nav-menu__link {
        font-size: 1.15rem;
        padding: 10px 12px;
    }

    .nav-menu__card {
        padding: 26px 20px;
        border-radius: 20px;
    }

    .nav-menu__info-title {
        font-size: 1.35rem;
    }

    .logo {
        font-size: 1rem;
    }

    .logo__mark {
        width: 32px;
        height: 32px;
    }

    .header__btn {
        display: none;
    }

    .hero__card-box {
        padding: 28px 20px;
        border-radius: 24px;
        gap: 28px;
    }

    .hero__title {
        font-size: 1.65rem;
        margin-bottom: 16px;
    }

    .hero__desc-1,
    .hero__desc-2 {
        font-size: 0.98rem;
        margin-bottom: 16px;
    }

    .hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    /* Stats Grid Mobile */
    .stats__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .stat-card {
        padding: 24px 16px;
    }

    .marquee-card {
        width: 276px;
        height: 162px;
        border-radius: 16px;
    }

    .marquee__row::before,
    .marquee__row::after {
        width: 45px;
    }

    .philosophy__text {
        font-size: 1.35rem;
        line-height: 1.44;
    }

    .expertise-card {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .expertise-card__title {
        font-size: 1.95rem;
        margin-bottom: 16px;
    }

    .approach {
        padding: 64px 0 96px;
    }

    .approach__title {
        font-size: 2.4rem;
    }

    .approach__header {
        margin-bottom: 48px;
    }

    .principles__grid {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .approach__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn--outline-orange,
    .btn--orange {
        justify-content: center;
        width: 100%;
    }

    .story-banner__card {
        padding: 48px 28px;
        border-radius: 28px;
    }

    .story-banner__title {
        font-size: 1.95rem;
        margin-bottom: 40px;
    }

    .btn--story-connect {
        width: 100%;
        justify-content: center;
    }

    .crafted-work__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .crafted-work__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .crafted-work__card {
        padding: 16px;
        border-radius: 24px;
    }

    .crafted-work__title {
        font-size: 2.3rem;
    }
    .crafted-work {
        padding: 40px 0 40px;
    }

    .experience {
        padding: 40px 0 80px;
    }

    .testimonials {
        padding: 40px 0 40px;
    }

    .contact {
        padding: 40px 0 40px;
    }

    .crafted-work__banner {
        padding: 28px 16px;
        border-radius: 20px;
    }

    .crafted-work__banner-subtitle {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .crafted-work__banner-title {
        font-size: 1.55rem;
        margin-bottom: 12px;
    }

    .crafted-work__banner-date {
        font-size: 0.85rem;
    }

    .experience__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
    }

    .experience__title {
        font-size: 2.3rem;
    }

    .experience__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 24px 0;
    }

    .experience__date {
        text-align: left;
    }

    .experience__role {
        font-size: 1.25rem;
    }

    .desktop-dots { display: none !important; }
    .mobile-dots { display: flex !important; }

    .testimonials__track {
        display: flex;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-bottom: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        transform: none !important;
    }

    .testimonials__track::-webkit-scrollbar {
        display: none;
    }

    .testimonials__slide, .testimonials__grid {
        display: contents;
    }

    .testimonials__title {
        font-size: 2.3rem;
        margin-bottom: 40px;
    }

    .testimonials__card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        padding: 28px 24px;
        border-radius: 28px;
        box-sizing: border-box;
    }

    .contact__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact__title {
        font-size: 2.3rem;
    }

    .contact__card {
        max-width: 100%;
        border-radius: 28px;
    }

    .btn--contact-submit {
        max-width: 100%;
    }

    .form-radio-group {
        gap: 24px;
    }

    .footer__main-title {
        font-size: 2.35rem;
        -webkit-text-stroke: 1.5px #FFFFFF;
        text-stroke: 1.5px #FFFFFF;
    }

    .footer__logo-img {
        width: 88px;
    }

    .footer__title-wrap {
        max-width: 92%;
    }

    .footer__bar {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .footer__divider {
        margin: 36px 0 0;
    }

    .footer {
        padding: 64px 0 0;
        margin: 0;
    }

    .about-main {
        padding-top: 92px;
    }

    .about-intro {
        padding: 32px 0 28px;
    }

    .about-intro__statement {
        font-size: 1.95rem;
        line-height: 1.34;
        letter-spacing: 0.01em;
    }

    .about-intro__statement .desktop-break {
        display: none;
    }

    .about-showcase {
        padding: 12px 0 80px;
    }

    .frame74-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .frame74-card {
        padding: 16px;
        border-radius: 20px;
    }

    .about-story {
        padding: 0 0 80px;
    }

    .story-banner,
    .story-banner-2 {
        padding: 36px 24px;
        min-height: 280px;
        border-radius: 24px;
    }

    .about-story .story-banner__title {
        font-size: 1.85rem;
        margin: 28px 0 32px;
    }

    .about-story .story-banner__title .desktop-break {
        display: none;
    }
}