/* ================================================================
   CREPO MEDIA — MOBILE RESPONSIVE OVERRIDES
   Covers 320px → 768px (mobile) and 769px → 1024px (tablet)
   Place this AFTER main.css in all HTML pages
   ================================================================ */

/* ── TOUCH TARGET MINIMUM (Apple/Google HIG: 44px) ── */
a, button, select, input[type="submit"] {
    min-height: 44px;
}

/* ── PREVENT HORIZONTAL SCROLL GLOBALLY ── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ================================================================
   TABLET — 769px to 1024px
   ================================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    nav { padding: 15px 30px; }

    .hero h1 { font-size: 7vw; letter-spacing: -1px; }

    .philo-box {
        padding: 50px 40px;
        max-width: 85%;
    }

    .editorial {
        grid-template-columns: 1fr 1fr;
    }

    .ed-text {
        padding: 50px 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* 2-col service grid on tablet */
    .srv-card {
        flex: 1 1 50%;
    }

    /* Contact form + visual */
    .contact-split {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================================================================
   MOBILE — max 768px
   ================================================================ */
@media (max-width: 768px) {

    /* ── NAVIGATION ── */
    nav {
        padding: 12px 16px;
    }

    .nav-logo img {
        height: 22px;
    }

    /* Hamburger animation — X transform */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile nav drawer */
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(5,5,5,0.98) !important;
        backdrop-filter: blur(15px) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 32px !important;
        transition: right 0.4s cubic-bezier(0.4,0,0.2,1) !important;
        z-index: 999 !important;
        display: flex !important;
    }

    .nav-links.active {
        right: 0 !important;
    }

    .nav-links a {
        font-size: 1.1rem !important;
        color: #fff !important;
        padding: 8px 0 !important;
        letter-spacing: 3px !important;
    }

    .nav-item-dropdown {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .dropdown-menu {
        position: static !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-width: auto !important;
        box-shadow: none !important;
        text-align: center;
    }

    .dropdown-menu a {
        padding: 8px 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
        color: #888 !important;
        letter-spacing: 2px !important;
    }

    .dropdown-menu a:hover {
        background: transparent !important;
        color: var(--accent) !important;
    }

    /* ── HERO ── */
    .hero {
        height: 100svh; /* safe on iOS */
        padding: 0 16px;
    }

    .hero h1 {
        font-size: 13vw !important;
        letter-spacing: -1px !important;
        line-height: 1 !important;
        margin: 15px 0 !important;
    }

    .hero-content {
        padding: 0 10px;
    }

    .hero-content .mono {
        font-size: 0.72rem !important;
        line-height: 1.7 !important;
        padding: 0 5px;
    }

    .meta-tag {
        font-size: 0.6rem !important;
    }

    .scroll-indicator {
        bottom: 20px;
        font-size: 0.6rem;
    }

    /* Fix parallax on mobile (causes jank) */
    [style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }

    /* ── TICKER ── */
    .ticker-item {
        font-size: 0.75rem !important;
    }

    /* ── PHILOSOPHY ── */
    .philosophy {
        min-height: auto;
        padding: 60px 16px;
    }

    .philo-box {
        padding: 30px 20px !important;
        max-width: 100% !important;
        box-shadow: 6px 6px 0px var(--accent) !important;
    }

    .philo-box h2 {
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    .mono-bold {
        font-size: 0.95rem !important;
    }

    .philo-box p.mono {
        font-size: 0.78rem !important;
        line-height: 1.7 !important;
    }

    /* ── METHODOLOGY CARDS ── */
    .methodology {
        padding: 60px 0 !important;
    }

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

    .method-card {
        padding: 36px 24px !important;
    }

    .method-card h3 {
        font-size: 1.2rem !important;
    }

    /* ── VISUAL BREAK (THE ARCHITECTS) ── */
    .visual-break {
        height: auto !important;
        min-height: 350px !important;
        padding: 80px 20px !important;
    }

    .break-bg {
        background-attachment: scroll !important;
        background-position: center !important;
    }

    .break-content h2 {
        font-size: 13vw !important;
        line-height: 1.1 !important;
    }

    /* ── SERVICES GRID ── */
    .services {
        padding: 0 !important;
    }

    .sec-head {
        padding: 40px 20px 20px !important;
    }

    .sec-head h2 {
        font-size: 1.8rem !important;
    }

    .srv-grid {
        display: block !important;
        width: 100% !important;
    }

    .srv-card {
        flex: 1 1 100% !important;
        height: auto !important;
        min-height: 260px !important;
        padding: 30px 20px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* Disable hover expand on mobile (no hover on touch) */
    .srv-card:hover {
        flex: 1 1 100% !important;
    }

    .srv-bg {
        opacity: 0.15 !important;
    }

    .srv-num {
        font-size: 0.75rem !important;
    }

    .srv-card h3 {
        font-size: 1.3rem !important;
        margin: 8px 0 !important;
    }

    .srv-list li {
        font-size: 0.78rem !important;
    }

    .srv-link {
        font-size: 0.75rem !important;
    }

    /* ── EDITORIAL ── */
    .editorial {
        grid-template-columns: 1fr !important;
    }

    .ed-img {
        min-height: 280px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .ed-text {
        padding: 40px 20px !important;
        border-left: none !important;
    }

    .ed-text h2 {
        font-size: 2.5rem !important;
    }

    /* ── CRISIS SECTION ── */
    .crisis-section {
        height: auto !important;
        min-height: 350px !important;
        padding: 60px 16px !important;
    }

    .glitch-large {
        font-size: 3rem !important;
    }

    .crisis-content {
        padding: 28px 20px !important;
        max-width: 100% !important;
    }

    /* ── TESTIMONIALS ── */
    .testi-content {
        padding: 50px 20px !important;
    }

    .testi-content h2 {
        font-size: 1.8rem !important;
    }

    .mono-quote {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }

    /* ── CONTACT SPLIT ── */
    .contact-split {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    .contact-vis {
        display: none !important; /* Hide the side image on mobile to save space */
    }

    .contact-form {
        padding: 40px 20px !important;
    }

    .contact-form h2 {
        font-size: 1.8rem !important;
    }

    /* ── FORM FIELDS ── */
    .input-row input,
    .input-row select,
    .input-row textarea {
        font-size: 14px !important; /* Prevent iOS zoom on focus */
        padding: 14px 12px !important;
    }

    .btn-submit {
        width: 100% !important;
        padding: 16px !important;
        font-size: 0.9rem !important;
    }

    /* ── FOOTER ── */
    footer {
        padding: 50px 20px 30px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        margin-bottom: 40px !important;
    }

    .f-item {
        padding: 30px 20px !important;
    }

    .end-title {
        font-size: 22vw !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 0.85 !important;
    }

    .legal {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        font-size: 0.65rem !important;
    }

    /* ── ABOUT PAGE ── */
    .grid-2col {
        grid-template-columns: 1fr !important;
    }

    .sticky-image-container {
        position: relative !important;
        height: 300px !important;
        top: auto !important;
    }

    .text-side {
        padding: 40px 20px !important;
    }

    /* ── SERVICES PAGES ── */
    .service-hero h1 {
        font-size: 11vw !important;
    }

    .service-content {
        padding: 40px 20px !important;
    }
}

/* ================================================================
   SMALL MOBILE — max 400px (older iPhones, budget Android)
   ================================================================ */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 15vw !important;
    }

    .philo-box h2 {
        font-size: 1.6rem !important;
    }

    .glitch-large {
        font-size: 2.5rem !important;
    }

    .end-title {
        font-size: 26vw !important;
    }
}

/* ================================================================
   PRINT / REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .noise-overlay,
    .scanline,
    .scan-effect::after,
    .scan-bar,
    .blink,
    .blink-red,
    .ticker-track,
    .tape-track,
    .particle,
    .crisis-glitch,
    .float-element {
        animation: none !important;
        transition: none !important;
    }
}

/* Contact page location section */
@media (max-width: 768px) {
    .loc-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .contact-hero h1 { font-size: 2.5rem !important; }
    .contact-hero { padding: 100px 16px 50px !important; }
    .contact-form { padding: 40px 20px !important; }
}