/* ============================================================
   MOBILE.CSS — Completely Redesigned for Intiria / ArchitectsHive
   Breakpoints: 1100px | 860px | 640px | 480px | 380px
   ============================================================ */

/* ── Global: prevent horizontal scroll on ALL screen sizes ── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   1100px — Small laptops / compressed desktop
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .new-hero-layout {
        grid-template-columns: 1fr 280px;
        gap: 24px;
        padding: 28px 32px 90px;
    }
    .desktop-menu ul { gap: 8px; }
    .desktop-menu a { padding: 10px 10px; font-size: 0.9rem; }
    .header-cta { padding: 0 14px; font-size: 0.82rem; }
    .brand { min-width: 200px; }
    .brand-copy strong { font-size: 1.28rem; }
    .brand-copy small { font-size: 0.6rem; letter-spacing: 0.38em; }
    .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; transform: none; }
    .kpi-card { min-height: 140px; padding: 18px 14px 16px; }
    .kpi-card strong { font-size: 1.9rem; }
    .kpi-card span { font-size: 0.78rem; }
    .benefits-bar { gap: 16px; padding: 20px 24px; width: 96%; }
    .benefit-text { font-size: 0.96rem; }
    .benefit-item i { width: 48px; height: 48px; }
    .insight-grid, .stats-grid, .pricing-grid, .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-links { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   860px — Tablets portrait — Hamburger replaces desktop nav
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

    /* ── Fix overflow ── */
    html, body { overflow-x: hidden; }

    /* ── Header ── */
    header { border-radius: 0 0 20px 20px; }
    .header-shell { min-height: 62px; width: 96%; }

    /* Hide all desktop header items */
    .desktop-menu,
    .header-actions .header-cta,
    .header-actions .header-icon,
    .header-actions .profile-dropdown { display: none !important; }

    /* Show hamburger only */
    .hamburger { display: flex !important; }

    /* Show brand name text on mobile */
    .brand-copy { display: flex; flex-direction: column; gap: 1px; }
    .brand-copy strong { font-size: 1.05rem; display: block; }
    .brand-copy small { font-size: 0.48rem; letter-spacing: 0.26em; }
    .brand-mark img { width: 40px; height: 40px; }

    /* ── Mobile menu drawer ── */
    .mobile-menu { padding: 72px 16px 28px; }
    .mobile-menu ul {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column; gap: 6px;
    }
    .mobile-menu li + li { margin-top: 0; }
    .mobile-menu a {
        display: flex; align-items: center;
        padding: 14px 18px; border-radius: 14px;
        font-size: 1rem; font-weight: 600; color: #1f2124;
        background: rgba(255,255,255,0.78);
        border: 1px solid rgba(43,31,24,0.07);
        transition: background 0.2s ease, color 0.2s ease;
    }
    .mobile-menu a:hover { background: rgba(232,85,58,0.08); color: #E8553A; }
    /* Call link — green */
    .mobile-menu li:nth-last-child(3) a {
        background: rgba(37,211,102,0.08); color: #1a8c45;
        border-color: rgba(37,211,102,0.15);
    }
    /* Last 2 items (Enquiry + Book) — coral CTA buttons */
    .mobile-menu li:nth-last-child(2) a,
    .mobile-menu li:nth-last-child(2) button,
    .mobile-menu li:last-child a {
        background: linear-gradient(135deg, #E8553A, #cf4428);
        color: white !important; border: none;
        justify-content: center; margin-top: 4px;
        box-shadow: 0 8px 20px rgba(232,85,58,0.3);
    }
    /* Close button inside drawer */
    .close-menu {
        position: absolute; top: 18px; right: 18px;
        width: 40px; height: 40px;
        display: grid; place-items: center;
        border-radius: 50%;
        background: rgba(232,85,58,0.08);
        color: #E8553A; font-size: 1.3rem; cursor: pointer;
    }
    /* Overlay */
    .mobile-menu-overlay.open { display: block; }
    .mobile-menu.open { right: 0; }

    /* ── Hero — full width, no side gap ── */
    .hero { padding: 10px 0 0; }
    .redesigned-hero {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 24px 24px !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
    }
    .new-hero-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 52px 20px 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .hero-left-content { max-width: 100%; }
    .hero-right-content { display: flex; justify-content: center; width: 100%; }
    .hero-form-card {
        max-width: 480px; width: 100%;
        margin: 0 auto; padding: 20px 18px;
        box-sizing: border-box;
    }
    .hero-title { font-size: 1.8rem !important; min-height: auto !important; line-height: 1.1 !important; }
    .hero-tagline { font-size: 0.95rem; }
    .hero-subtitle { font-size: 0.85rem; max-width: 100%; }
    .hero-actions-new { margin-top: 16px; }
    /* Benefits bar — full width at bottom */
    .bottom-benefits {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 14px 20px !important;
        border-radius: 0 0 22px 22px !important;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .bottom-benefits .benefit-divider {
        height: 36px !important;
        width: 2px !important;
    }
    .bottom-benefits .benefit-text { font-size: 0.82rem !important; }
    .bottom-benefits .ben-icon { font-size: 1.5rem; }

    /* ── KPI scroll strip ── */
    .kpi-grid {
        display: flex; gap: 12px; overflow-x: auto;
        padding: 0 0 10px; transform: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .kpi-card { min-width: 52%; scroll-snap-align: start; flex-shrink: 0; }
    .kpi-card { min-height: 140px; padding: 18px 14px 16px; }

    /* ── General grids ── */
    .hero-meta,
    .insight-grid, .services-grid, .pricing-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-links { grid-template-columns: repeat(2, 1fr); }
    .contact-panel { grid-template-columns: 1fr; }
    .section-shell, .stats-section { padding: 48px 0; }
    .container { width: 96%; }

    /* ── Benefits bar (non-hero) ── */
    .benefits-bar {
        grid-template-columns: 1fr; gap: 14px;
        width: 96%; padding: 18px; border-radius: 22px;
    }
    .benefit-divider {
        width: 100%; height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,44,27,0.92), transparent);
    }

    /* ── CTA section ── */
    .cta-horizontal-layout { grid-template-columns: 1fr !important; gap: 28px; }
    .cta-intake-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cta-ambient-glow { display: none; }

    /* ── Studio ── */
    .studio-grid { grid-template-columns: 1fr !important; }
    .studio-story { height: 300px; border-radius: 20px; }
    .studio-highlights { border-radius: 20px; padding: 28px 22px; }

    /* ── Contact ── */
    .contact-mosaic { height: 260px; border-radius: 20px; }
    .contact-card { border-radius: 20px; }
    .contact-details { gap: 10px; }

    /* ── Section decorators ── */
    .section-shell::before { display: none; }
}

/* ══════════════════════════════════════════════════════════
   640px — Large phones (landscape / big portrait)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    html, body { overflow-x: hidden; }

    /* ── Header ── */
    header { border-radius: 0 0 16px 16px; }
    .header-shell { width: 97% !important; min-height: 56px; }
    .brand-copy strong { font-size: 0.96rem; }
    .brand-copy small { display: none; }
    .brand-mark img { width: 36px; height: 36px; }

    /* ── Hero ── */
    .redesigned-hero { border-radius: 0 0 18px 18px !important; }
    .new-hero-layout { padding: 44px 16px 14px; gap: 16px; }
    .hero-title { font-size: 1.55rem !important; }
    .hero-tagline { font-size: 0.88rem; margin-bottom: 8px; }
    .hero-subtitle { font-size: 0.8rem; line-height: 1.55; margin-bottom: 16px; }
    .hero-actions-new .btn { width: 100%; justify-content: center; }
    .hero-form-card { padding: 16px 14px; border-radius: 14px; }
    .bottom-benefits {
        padding: 10px 14px !important;
        gap: 6px !important;
        border-radius: 0 0 16px 16px !important;
    }
    .bottom-benefits .benefit-text { font-size: 0.75rem !important; }
    .bottom-benefits .ben-icon { font-size: 1.3rem; }
    .bottom-benefits .benefit-divider { height: 26px !important; }

    /* ── General ── */
    .section-shell { padding: 40px 0; }
    .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .container,
    .hero-grid,
    .insight-grid,
    .kpi-panel { width: 97% !important; margin: 0 auto; }
    .hero-copy,
    .pricing-inner,
    .contact-card,
    .studio-highlights,
    .stats-content { padding-left: 4%; padding-right: 4%; }
    .btn { padding: 12px 20px; font-size: 0.9rem; }

    /* ── KPI ── */
    .kpi-card { min-width: 70%; min-height: 130px; }

    /* ── Stats ── */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ── CTA ── */
    .cta-intake-cards { grid-template-columns: 1fr; gap: 12px; }
    .intake-card { padding: 20px 18px; border-radius: 16px; }
    .premium-cta { padding: 48px 0; }

    /* ── Studio ── */
    .studio-story { height: 260px; border-radius: 16px; }
    .studio-highlights { padding: 22px 18px; }
    .studio-highlights h3 { font-size: 1.65rem; }
    .process-list { grid-template-columns: 1fr; }

    /* ── Footer ── */
    .footer-links { grid-template-columns: 1fr 1fr; gap: 12px; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 10px; }

    /* ── Pricing ── */
    .pricing-plan { padding: 28px 20px; border-radius: 20px; }
    .pricing-grid { gap: 16px; }
}

/* ══════════════════════════════════════════════════════════
   480px — Small phones (iPhone SE, Galaxy A series)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    html, body { overflow-x: hidden; }

    /* ── Header: hide brand text, just show logo ── */
    .brand-copy { display: none !important; }
    .brand-mark img { width: 38px; height: 38px; }
    .hamburger { width: 42px; height: 42px; }

    /* ── Hero ── */
    .new-hero-layout { padding: 40px 14px 12px; gap: 14px; }
    .hero-title { font-size: 1.35rem !important; line-height: 1.12 !important; min-height: auto !important; }
    .hero-tagline { font-size: 0.8rem; margin-bottom: 6px; }
    .hero-subtitle { font-size: 0.76rem; margin-bottom: 14px; }
    .hero-form-card { padding: 14px 12px; border-radius: 12px; }
    .form-header h2 { font-size: 1.1rem; }
    .form-header p { font-size: 0.7rem !important; }
    .btn-red { padding: 10px 18px !important; font-size: 0.88rem !important; }
    /* Benefits — 3 icons wrap to row */
    .bottom-benefits {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
        padding: 10px 10px !important;
        border-radius: 0 0 14px 14px !important;
    }
    .bottom-benefits .benefit-divider { display: none !important; }
    .bottom-benefits .benefit-item {
        flex: 1 1 28%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px !important;
        min-width: 76px;
    }
    .bottom-benefits .benefit-text { font-size: 0.68rem !important; }
    .bottom-benefits .ben-icon { font-size: 1.2rem; }

    /* ── General ── */
    .section-shell { padding: 32px 0; }
    .section-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }
    .section-description { font-size: 0.88rem; }
    .btn { padding: 11px 16px; font-size: 0.87rem; }

    /* ── KPI ── */
    .kpi-card { min-width: 78%; }
    .kpi-card strong { font-size: 1.8rem; }

    /* ── Stats ── */
    .stats-grid { grid-template-columns: 1fr; }

    /* ── Footer ── */
    .footer-links { grid-template-columns: 1fr; }
    .footer-brand-copy { font-size: 0.82rem; }
    .footer-col h4 { font-size: 0.8rem; }
    .footer-col a { font-size: 0.82rem; }
    .footer-legal { font-size: 0.75rem; }

    /* ── Contact ── */
    .contact-card { padding: 5% 4%; }
    .contact-card h3 { font-size: 1.55rem; }
    .contact-card p { font-size: 0.88rem; margin-bottom: 16px; }
    .contact-detail-item { gap: 10px; }
    .contact-detail-item i { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }

    /* ── CTA ── */
    .premium-cta { padding: 36px 0; }
    .intake-card { padding: 16px 14px; border-radius: 14px; }
    .intake-title { font-size: 0.92rem; margin-bottom: 14px; }

    /* ── Pricing ── */
    .pricing-plan { padding: 22px 16px; border-radius: 16px; }
    .pricing-plan-price { font-size: 1.9rem; }
    .pricing-plan-period { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════
   380px — Very small phones
   ══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .new-hero-layout { padding: 36px 10px 10px; gap: 12px; }
    .hero-title { font-size: 1.18rem !important; }
    .hero-tagline { font-size: 0.74rem; }
    .hero-subtitle { font-size: 0.7rem; }
    .hero-form-card { padding: 12px 10px; }
    .form-header h2 { font-size: 1rem; }
    .kpi-card { min-width: 86%; }
    .btn { padding: 10px 14px; font-size: 0.84rem; }
    .bottom-benefits .benefit-item { min-width: 60px; }
    .bottom-benefits .benefit-text { font-size: 0.62rem !important; }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}