/* ── MOBILE SCREENS (MAX 768PX) ── */
@media (max-width: 768px) {
    /* ── 1. NAVIGATION ── */
    .nav {
        padding: 0 16px;
        height: 70px;
    }
    .nav-logo {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-logo-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
    .nav-logo-text {
        font-size: 10px;
    }
    .nav-logo-text strong {
        font-size: 13px;
    }
    .hamburger {
        display: block;
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Dropdown Menu */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--brand-dark);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }
    .nav-menu.active {
        max-height: 600px;
        padding-bottom: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-links {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0;
    }
    .nav-links a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        font-size: 15px;
    }
    .nav-cta {
        flex-direction: column;
        width: 100%;
        padding: 20px;
        gap: 15px;
    }
    .btn-whatsapp,
    .btn-call {
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 14px;
    }

    /* ── 2. HERO SECTION ── */
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-left {
        padding: 40px 20px;
        text-align: left;
    }
    .hero-right {
        height: 350px;
    }
    .hero-h1 {
        font-size: 34px;
        line-height: 1.1;
        margin-bottom: 15px;
    }
    .hero-sub {
        font-size: 15px;
        max-width: 100%;
    }
    .hero-trust {
        flex-wrap: wrap;
        gap: 15px;
    }
    .hero-divider {
        display: none;
    }

    /* Fixed Mobile Tag */
    .hero-overlay-tag {
        top: 15px;
        right: 15px;
        font-size: 11px;
        padding: 6px 12px;
        width: max-content;
        white-space: nowrap;
    }

    /* ── 3. GENERAL LAYOUTS & PADDING ── */
    /* Kill all 2-column grids */
    .about-grid,
    .test-banner,
    .why-grid,
    .faq-grid,
    .enquiry-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section,
    .products-section,
    .why-section,
    .projects-section,
    .areas-section,
    .testimonials-section,
    .faq-section,
    .enquiry-section {
        padding: 40px 16px;
    }

    .section-title,
    .test-banner-title {
        font-size: 28px;
        line-height: 1.2;
    }

    /* ── 4. ABOUT SECTION ── */
    .about-image-mock {
        height: 300px;
    }
    .about-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .about-badge {
        padding: 16px;
    }
    .about-badge .big {
        font-size: 22px;
    }

    /* ── 5. FILTERS (Horizontal Scroll) ── */
    .product-filter,
    .projects-filter {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 5px;
        justify-content: flex-start;
    }
    .product-filter::-webkit-scrollbar,
    .projects-filter::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex-shrink: 0;
        padding: 8px 18px;
        font-size: 12px;
    }

    /* ── 6. MISC SECTIONS ── */
    .products-header {
        display: block;
    }
    .cert-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Drop to 2 columns */
        gap: 12px;
    }

    /* Make the filter dock stretch and scroll nicely on mobile */
    .premium-filter-dock {
        width: 100%;
        justify-content: flex-start;
        border-radius: 12px; /* Slightly square it off for mobile screens */
        padding: 10px;
    }

    .product-name {
        font-size: 18px; /* Prevent text wrapping awkwardly */
    }

    /* Projects */
    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .projects-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    .proj-cell,
    .proj-cell:nth-child(1),
    .proj-cell:nth-child(6) {
        height: 250px;
        grid-row: auto;
        grid-column: auto;
    }
    .proj-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9) 0%,
            transparent 70%
        );
    }
    .proj-info-tag {
        transform: translateY(0);
    }

    /* Areas */
    .areas-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
    }
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .area-card {
        padding: 12px 10px;
    }
    .area-name {
        font-size: 12px;
    }

    /* ── 7. TESTIMONIALS ── */
    .test-banner {
        text-align: center;
    }
    .test-features {
        align-items: flex-start;
        text-align: left;
    }
    .testimonials-grid {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 0 20px 30px 20px;
        gap: 16px;
    }
    .testimonial-card {
        flex: 0 0 90%;
        scroll-snap-align: center;
        padding: 24px 20px;
        border-radius: 12px;
    }
    .testimonial-text {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .testimonial-author {
        gap: 12px;
        padding-top: 16px;
    }
    .author-avatar {
        width: 40px;
        height: 40px;
    }
    .testimonial-author > div {
        flex: 1;
        min-width: 0;
    }
    .author-name {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .author-loc {
        font-size: 11px;
        line-height: 1.3;
    }
    .testimonial-quote {
        font-size: 80px;
        left: 16px;
        top: 0;
    }

    /* ── 8. FAQ & ENQUIRY FORM ── */
    .faq-question {
        font-size: 14px;
        padding: 16px 20px;
    }
    .faq-item.open .faq-answer {
        padding: 0 20px 20px;
    }
    .faq-schema-note {
        padding: 24px;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .form-card {
        padding: 24px 20px;
    }

    /* ── 9. FOOTER & FLOATING CTA ── */
    .footer {
        padding: 60px 20px 24px;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .footer-about-text {
        max-width: 100%;
        margin: 0 auto 24px auto;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        text-align: center;
    }
    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
    }
    .floating-whatsapp svg {
        width: 24px;
        height: 24px;
    }
}

/* ── TINY SCREENS (MAX 480PX) ── */
@media (max-width: 480px) {
    .hero-h1 {
        font-size: 32px;
    }
    .areas-grid {
        grid-template-columns: 1fr;
    }
    .btn-primary,
    .btn-outline {
        width: 100%;
        text-align: center;
    }
    .products-grid {
        grid-template-columns: 1fr; /* Force 1 single column */
        gap: 20px;
    }

    .product-card-image {
        height: 240px; /* Give the image a bit more room to breathe on single column */
    }

    /* Increase tap targets for thumbs */
    .card-btn-solid {
        padding: 14px 16px;
        font-size: 13px;
    }

    /* MOBILE UX FIX: 
       Because phones don't have "hover", tapping the image once will 
       slide up the specs (native iOS/Android behavior). 
       We ensure the specs font is large enough to read easily.
    */
    .spec-list {
        font-size: 12px;
    }
    .spec-list li {
        padding: 8px 0;
    }
}