@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    .text-overlay { top: auto !important; bottom: 12% !important; left: 5% !important; right: 5% !important; max-width: 90% !important; }
    .portfolio-link { top: 10% !important; bottom: auto !important; left: 5% !important; right: 5% !important; max-width: 90%; }
    .story-card { padding: 2rem; }
    .floating-wrapper { animation: none; } 
    .intro-title { font-size: 5rem !important; } 
    .start-btn {
        margin-top: -4rem;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    #text4,
    #text5 {
        bottom: 5% !important;
        top: auto !important;
    }
    #portfolio-4,
    #portfolio-5 {
        top: 4% !important;
        bottom: auto !important;
    }
    #portfolio-8 {
        top: 4% !important;
        bottom: auto !important;
    }
    #text4 .story-card,
    #text5 .story-card,
    #portfolio-4 .portfolio-card,
    #portfolio-5 .portfolio-card,
    #portfolio-8 .portfolio-card {
        max-width: min(88vw, 34rem);
        margin: 0 auto;
    }
    #text17 {
        top: 5% !important;
        bottom: auto !important;
        max-width: 88% !important;
    }
    #text14 {
        bottom: 18% !important;
        top: auto !important;
    }
    #text13 {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        max-width: min(82vw, 24rem) !important;
        left: auto !important;
        right: 5% !important;
    }
    #portfolio-17 {
        top: auto !important;
        bottom: 8% !important;
        left: 5% !important;
        right: 5% !important;
        max-width: 90% !important;
    }
    .contact-card {
        padding: 1.2rem;
    }
    .cta-button,
    .cta-button-large {
        min-width: 0;
        width: min(88vw, 20rem);
    }
    .final-cta-title {
        font-size: clamp(1.2rem, 5.8vw, 1.9rem);
        letter-spacing: 0.05em;
    }
    #text17 .story-card,
    #portfolio-17 .contact-card {
        max-width: min(88vw, 30rem);
        margin: 0 auto;
    }
    #text17 .story-card {
        padding: 1.35rem;
    }
    #portfolio-17 .final-cta-content {
        gap: 0.9rem;
    }
    .scene-return-link {
        width: 100%;
        justify-content: center;
        font-size: 0.76rem;
        letter-spacing: 0.06em;
    }
    #portfolio-5 .sketch-reveal {
        max-height: min(62vh, 32rem);
        object-fit: cover;
    }
    #portfolio-8 .scene8-card {
        max-width: min(88vw, 34rem);
    }
    #text13 .story-card {
        max-width: min(88vw, 36rem);
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    #text4,
    #text5,
    #text8,
    #text10,
    #text12 {
        top: 6% !important;
        bottom: auto !important;
    }

    #text4,
    #text5,
    #text8,
    #text15 {
        left: 5% !important;
        right: 5% !important;
        max-width: 90% !important;
    }

    #portfolio-4,
    #portfolio-5 {
        top: auto !important;
        bottom: 10% !important;
        left: 5% !important;
        right: 5% !important;
        max-width: 90% !important;
        z-index: 90 !important;
    }

    #portfolio-8 {
        top: auto !important;
        bottom: 6% !important;
        left: 5% !important;
        right: 5% !important;
        max-width: 90% !important;
        z-index: 90 !important;
    }

    #text4,
    #text5,
    #text8 {
        z-index: 130 !important;
    }

    #portfolio-4 .portfolio-card,
    #portfolio-5 .portfolio-card {
        max-width: min(82vw, 23rem);
        margin: 0 auto;
    }

    #portfolio-8 .scene8-card,
    #portfolio-8 .portfolio-card {
        max-width: min(80vw, 22rem);
        margin: 0 auto;
    }

    #text13 {
        right: 5% !important;
        left: auto !important;
        max-width: min(82vw, 24rem) !important;
    }

    #text13 .story-card {
        padding: 0.85rem 0.95rem !important;
    }

    #text13 .story-text,
    #text15 .story-text {
        font-size: 1.02rem !important;
        line-height: 1.45 !important;
    }

    #text14 {
        bottom: 14% !important;
        max-width: 86% !important;
    }

    #text14 .story-card {
        padding: 1.15rem 1.25rem !important;
    }

    #text15 {
        bottom: 10% !important;
    }

    #text15 .story-card {
        max-width: min(82vw, 24rem);
        margin: 0 auto;
        padding: 0.9rem 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #portfolio-4,
    #portfolio-5 {
        left: auto !important;
        right: 5% !important;
    }

    #portfolio-4 .portfolio-card,
    #portfolio-5 .portfolio-card {
        max-width: min(62vw, 20rem);
        margin: 0 auto;
    }

    #text6 {
        left: 5% !important;
        right: auto !important;
        max-width: min(52vw, 30rem) !important;
    }

    #text7 {
        left: 5% !important;
        right: auto !important;
        top: 8% !important;
        bottom: auto !important;
        max-width: min(42vw, 22rem) !important;
        text-align: left;
    }

    #text7 .story-card,
    #text9 .story-card {
        max-width: min(88vw, 42rem);
        margin: 0 auto;
    }

    #portfolio-8 {
        left: 5% !important;
        right: auto !important;
        top: auto !important;
        bottom: 8% !important;
        max-width: min(62vw, 20rem) !important;
    }

    #portfolio-8 .scene8-card {
        max-width: min(62vw, 20rem);
        margin: 0;
    }

    #text9 {
        left: 5% !important;
        right: 5% !important;
        top: 50% !important;
        bottom: auto !important;
        max-width: 90% !important;
        transform: translateY(-50%) !important;
        text-align: center;
    }

    #text11 {
        left: 5% !important;
        right: auto !important;
        max-width: min(42vw, 23rem) !important;
    }

    #text13 {
        right: 5% !important;
        left: auto !important;
        max-width: min(38vw, 20rem) !important;
    }

    #text13 .story-card {
        padding: 0.8rem 0.9rem !important;
    }

    #text13 .story-text {
        font-size: 1rem !important;
        line-height: 1.38 !important;
    }

    #text15 {
        left: 5% !important;
        right: auto !important;
        max-width: min(40vw, 21rem) !important;
    }

    #text15 .story-card {
        padding: 0.85rem 0.95rem !important;
    }

    #text15 .story-text {
        font-size: 1.08rem !important;
        line-height: 1.45 !important;
    }

    #portfolio-17 {
        left: auto !important;
        right: 5% !important;
        max-width: min(34vw, 18rem) !important;
    }


    #portfolio-17 .contact-card {
        padding: 1rem 1.15rem !important;
    }
}