/* ============================================
   MOBILE RESPONSIVE — all pages / all sections
   Loaded after style.css
   ============================================ */

/* ----- Header (mobile / tablet) ----- */
@media (max-width: 1024px) {
    .site-header,
    .site-header-inner,
    .navbar {
        overflow-x: hidden;
        max-width: 100%;
    }

    .site-header .navbar .btn-start-project {
        width: auto !important;
        max-width: none !important;
    }

    .site-header .btn {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body,
    .min-h-screen {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container,
    .container.center,
    .recent-collections-container {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    section {
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    img,
    video,
    svg,
    iframe {
        max-width: 100%;
        height: auto;
    }

    .section-media-img,
    .tab-section-img,
    .why-us-photo {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: cover;
    }

    .video-placeholder {
        width: 100%;
        max-width: 100%;
        min-height: 0;
    }

    /* ----- Hero ----- */
    .hero-container {
        display: flex !important;
        flex-direction: column;
        gap: 1.35rem;
        padding: 1.5rem 1rem 2rem !important;
        width: 100%;
    }

    .hero-section:not(.services-hero-section) .hero-content {
        order: 1;
        width: 100%;
    }

    .hero-section:not(.services-hero-section) .hero-image {
        order: 2;
        width: 100%;
    }

    .hero-title {
        max-width: none !important;
        font-size: clamp(1.35rem, 5.5vw, 2rem) !important;
        line-height: 1.2;
        word-break: break-word;
    }

    .hero-description,
    .hero-section .hero-content p,
    .services-hero-desc {
        max-width: 100% !important;
        font-size: 0.9rem;
    }

    .hero-img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(320px, 62vw);
        object-fit: cover;
    }

    .hero-section--video .hero-img {
        width: auto !important;
        max-width: 85% !important;
        transform: none !important;
    }

    .hero-buttons,
    .services-hero-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.65rem;
    }

    .hero-buttons .btn,
    .services-hero-buttons .btn {
        width: 100%;
    }

    .hero-split-section .hero-container {
        flex-direction: column;
        padding: 1.5rem 1rem !important;
    }

    .hero-split-section .hero-image {
        order: -1;
        max-width: 100%;
    }

    .hero-split-section .hero-img {
        top: 0;
        max-height: min(300px, 58vw);
    }

    .services-hero-section .hero-container {
        padding: 1.25rem 0.85rem 1.5rem !important;
    }

    .services-hero-form-card {
        max-width: 100%;
        margin: 0;
    }

    .services-hero-form input,
    .services-hero-form textarea {
        font-size: 16px;
    }

    /* ----- Grids & sections ----- */
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .grid-2 > * {
        min-width: 0;
        width: 100%;
    }

    .section-title,
    .section-heading {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
        line-height: 1.25;
    }

    .section-description,
    .section-paragraph {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .button-group {
        flex-direction: column;
        width: 100%;
        gap: 0.65rem;
    }

    .button-group .btn {
        width: 100%;
    }

    .services-section .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.35rem;
    }

    .services-heading {
        font-size: clamp(1.3rem, 5vw, 1.65rem);
        line-height: 1.25;
    }

    .services-subtitle {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .services-section .services-buttons {
        flex-direction: column;
        width: 100%;
    }

    .services-section .services-buttons .btn {
        width: 100%;
    }

    .service-card-image {
        min-height: 0;
        padding: 0.5rem 0;
    }

    .service-card-image-crop {
        max-height: min(260px, 55vw);
    }

    /* ----- Premium / tabs ----- */
    .premium-title {
        font-size: clamp(1.35rem, 5vw, 1.65rem);
    }

    .premium-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }

    .tabs-header {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 0.4rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.65rem 0.85rem;
        font-size: 0.65rem;
    }

    .tab-inner {
        flex-direction: column;
        gap: 1.25rem;
        text-align: left;
    }

    .circle-image {
        width: min(220px, 75vw);
        height: min(220px, 75vw);
        margin: 0 auto;
    }

    /* ----- Pricing ----- */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        margin: 1.5rem 0;
    }

    .pricing-card {
        padding: 1.35rem;
    }

    .pricing-card.featured {
        transform: none !important;
    }

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

    .pricing-buttons .btn {
        width: 100%;
    }

    /* ----- Why us ----- */
    .why-us-section .container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .why-us-image {
        max-width: 100%;
        height: clamp(200px, 52vw, 280px);
        transform: none !important;
        margin: 0 auto;
    }

    .why-us-content {
        margin-top: 0;
        width: 100%;
    }

    /* ----- Testimonials ----- */
    .testimonials-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .testimonials-header h2 {
        font-size: 1.45rem;
    }

    .carousel-item {
        min-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .testimonial-card {
        padding: 1.25rem;
    }

    /* ----- FAQ ----- */
    .faq-section .container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .faq-icon {
        width: min(180px, 55vw);
        height: min(180px, 55vw);
        font-size: 2.5rem;
    }

    .faq-title,
    .faq-subtitle {
        font-size: 1.45rem;
    }

    .accordion-btn {
        font-size: 0.85rem;
        padding: 0.85rem 0.75rem;
        text-align: left;
    }

    /* ----- Contact ----- */
    .contact-section .container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .contact-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .contact-form-wrapper {
        padding: 1.25rem;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr !important;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

    /* ----- About ----- */
    .about-top-banner {
        height: auto;
        min-height: 160px;
        padding: 2rem 1rem;
    }

    .about-top-title {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
    }

    .about-story-grid {
        grid-template-columns: 1fr !important;
    }

    .about-story-illustration {
        width: 100%;
        height: clamp(220px, 55vw, 320px);
    }

    .about-story-illustration-img {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /* ----- Recent collections ----- */
    .recent-collections-section {
        padding: 2.5rem 1rem;
    }

    .recent-title {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .recent-cards {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .recent-card {
        width: 100%;
        max-width: 280px;
    }

    /* ----- Footer ----- */
    .footer {
        padding: 2.5rem 1rem 1rem;
    }

    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 1.75rem;
    }

    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-bottom-left > div {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ----- Modal ----- */
    .modal-content {
        width: min(94vw, 480px);
        max-height: 90vh;
        overflow-y: auto;
        margin: 0.75rem;
        padding: 1.15rem 1rem 1.35rem;
    }

    .modal-form {
        padding-left: 0;
        margin-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .form-input,
    .form-textarea {
        font-size: 16px;
    }

    .floating-social-left,
    .floating-contact-right {
        display: none !important;
    }
}

@media (max-width: 479px) {
    .hero-title {
        font-size: 1.3rem !important;
    }

    .pricing-list li {
        font-size: 0.8rem;
    }
}