/* ============================================
   ECPSOLUTIONS — Mobile Optimization Layer
   Loaded LAST so these rules win in the cascade.
   Strategy:
   - Reduce expensive effects (heavy blur, large orbs) on mobile
   - Enforce 44px touch targets across interactive elements
   - Tighten spacing
   - Improve typography for thumb readability
   - Disable hover-only effects on touch devices
   - Sticky-hover prevention for navbar/menus/cards
   ============================================ */

/* ============================================
   1. PERFORMANCE — reduce expensive effects on mobile
   backdrop-filter blur is the #1 performance hog on
   mid-range Android. Drop blur radius significantly.
   ============================================ */
@media (max-width: 768px) {
    /* Navbar — was 40px blur */
    .navbar-bg {
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
    }

    /* Mega-dropdown — was 32px */
    .nav-mega {
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
    }

    /* Mobile menu — was 40px */
    .mobile-menu-bg {
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }

    /* Cards / pills that natively use backdrop-blur — clamp to 8px on mobile.
       (Intentionally narrow list — only elements that genuinely have the
       property today; we don't want to ADD blur where there was none.) */
    .hero-chip,
    .mv-card,
    .ct-form-wrap,
    .ct-connect,
    .svc-industries,
    .story-stamps li {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* Reduce gradient orb sizes (they're huge by default) */
    .gradient-orb-1 { width: 380px; height: 380px; filter: blur(60px); }
    .gradient-orb-2 { width: 320px; height: 320px; filter: blur(60px); }
    .gradient-orb-3 { width: 260px; height: 260px; filter: blur(60px); }

    /* Reduce footer glow */
    .ft-bg-glow { height: 220px; filter: blur(40px); }

    /* Reduce contact section orbs */
    .ct-orb-1 { width: 300px; height: 300px; filter: blur(60px); }
    .ct-orb-2 { width: 260px; height: 260px; filter: blur(60px); }
}

/* ============================================
   2. TOUCH TARGET ENFORCEMENT
   Every interactive element should be >= 44x44px.
   Apple HIG / WCAG recommendation.
   IMPORTANT: only set min-height/min-width here — do NOT override
   display/padding/alignment from the page CSS, otherwise we break
   the carefully-designed grid/flex layouts.
   ============================================ */
@media (max-width: 1024px) {
    .mobile-link,
    .mobile-services-toggle { min-height: 56px; }
    .mobile-sublink         { min-height: 48px; }
    .ft-social              { min-width: 44px; min-height: 44px; }
    .ct-quick-btn           { min-height: 64px; }
    .svc-cta,
    .svc-cta-ghost,
    .nf-cta,
    .nf-cta-ghost,
    .story-cta,
    .ct-submit              { min-height: 48px; }
    .faq-q                  { min-height: 56px; }
    .hero-chip              { min-height: 44px; }
    .ft-col-list a          { min-height: 36px; }
}

/* ============================================
   3. STICKY-HOVER PREVENTION
   On touch devices, :hover sticks after a tap.
   Disable hover-only visual effects on devices
   that can't truly hover.
   ============================================ */
@media (hover: none) {
    /* Cards: don't keep transform after tap */
    .service-card:hover,
    .cap-card:hover,
    .mv-card:hover,
    .ct-quick-btn:hover,
    .ct-channel:hover,
    .ct-ecp360:hover,
    .nav-mega-item:hover,
    .stack-item:hover,
    .industry-card:hover,
    .hero-chip:hover,
    .ft-social:hover,
    .proc-step:hover,
    .nf-quick a:hover {
        transform: none !important;
    }

    /* Navbar links: disable decoder + tumble + glow on touch */
    .nav-link:hover .nav-icon,
    .nav-link:hover .nav-label,
    .nav-link:hover .nav-underline {
        transform: none !important;
        filter: none !important;
    }

    /* Footer column link underline draws — keep static */
    .ft-col-list a::before { display: none; }
}

/* ============================================
   4. TYPOGRAPHY — thumb readability
   Smallest body text on mobile should be >= 14px,
   smallest UI text >= 13px. Many uppercase tracking
   pills get unreadable below 11px.
   ============================================ */
@media (max-width: 540px) {
    /* Bump up the smallest uppercase pills */
    .svc-tag,
    .ct-tag,
    .story-tag,
    .section-tag,
    .ft-status,
    .ct-quick-label {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    /* Bottom strips can be tiny but not invisible */
    .ft-bottom,
    .ct-stamp {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    /* Body paragraphs comfortable */
    .hero-description,
    .story-p,
    .svc-hero-lede,
    .ct-lede,
    .nf-lede,
    .section-description,
    .page-hero-subtitle {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Capability card body */
    .cap-desc {
        font-size: 0.92rem;
    }

    /* FAQ answer text */
    .faq-a p {
        font-size: 0.95rem;
        padding: 0 1.15rem 1.15rem;
    }
}

/* ============================================
   5. SECTION SPACING — tighter on mobile
   Many sections use 6-8rem vertical padding which
   feels excessive on a 6" screen.
   ============================================ */
@media (max-width: 640px) {
    .svc-hero { padding: 2.5rem 1.25rem 3rem; }
    .svc-section { padding: 3.5rem 1.25rem; }
    .svc-section-head { margin-bottom: 2rem; }
    .services-overview { padding: 3rem 1.25rem 4rem; }

    /* Hero on home */
    .hero { padding: 3rem 1.25rem 2.5rem; min-height: auto; }

    /* About story */
    .story-section { padding: 3.5rem 1.25rem; }
    .story-intro { padding: 3rem 1.25rem 1.5rem; }
}

/* ============================================
   6. HERO TEXT — mobile alignment improvements
   Prevent cycle word from causing horizontal scroll.
   Make sure ECP360 wordmark fits.
   ============================================ */
@media (max-width: 640px) {
    .hero-title {
        font-size: clamp(2.1rem, 11vw, 3.5rem);
    }

    /* Cycling word stays inline rather than wrapping awkwardly */
    .title-line-cycle {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.18em;
    }

    /* The cycle slot itself: cap width to viewport */
    .title-cycle {
        max-width: 100%;
    }

    /* Ensure cycle word doesn't overflow */
    .title-cycle-word {
        white-space: nowrap;
    }

    /* Hero brand line: fit nicely */
    .hero-brand-line {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    .brand-divider { display: none; }

    /* Hero description tighter */
    .hero-description {
        margin-bottom: 1.5rem;
    }

    /* Service hero CTA stacks */
    .svc-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .svc-cta, .svc-cta-ghost {
        justify-content: center;
    }
}

/* ============================================
   7. SECTION HEADERS / TITLES on mobile
   ============================================ */
@media (max-width: 640px) {
    .svc-hero-title { font-size: clamp(2rem, 9vw, 3.2rem); }
    .svc-section-h  { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .story-h        { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .story-title    { font-size: clamp(2rem, 10vw, 3.2rem); }
    .ct-title       { font-size: clamp(1.9rem, 8.5vw, 3rem); }
    .page-hero-title { font-size: clamp(1.9rem, 9vw, 3.2rem); }

    /* Mega dropdown isn't shown on mobile (collapses to mobile menu),
       but if it ever is, make it scrollable */
    .nav-mega {
        max-width: 92vw;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ============================================
   8. SERVICE NUMBER WATERMARKS on mobile
   Smaller, more subtle, anchored to the side
   so they don't visually fight with content.
   ============================================ */
@media (max-width: 760px) {
    .svc-num,
    .story-num {
        position: absolute;
        top: 0.5rem !important;
        right: -0.25rem !important;
        left: auto !important;
        transform: none !important;
        font-size: clamp(4rem, 18vw, 7rem) !important;
        opacity: 0.4;
        line-height: 0.85;
    }

    .svc-section:nth-of-type(even) .svc-num {
        left: -0.25rem !important;
        right: auto !important;
    }

    /* Section padding-top gives the small watermark room and prevents
       the content from butting up against the navbar / previous section */
    .svc-section,
    .story-section {
        padding-top: 4.5rem;
    }
}

/* ============================================
   9. NAVBAR — slightly smaller brand on small phones
   ============================================ */
@media (max-width: 380px) {
    .navbar-container { padding: 0 0.85rem; }
    .brand-name { font-size: 0.95rem; letter-spacing: 0.05em; }
    .brand-inc  { display: none; } /* hide tiny INC chip when ultra-narrow */
    .brand-logo { width: 36px; height: 36px; min-width: 36px; }
    .navbar-toggle { width: 42px; height: 42px; }
}

/* ============================================
   10. SAFETY: prevent any horizontal scroll
   Common cause: overly-wide watermarks, SVGs
   ============================================ */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

@media (max-width: 640px) {
    .nf-watermark,
    .ft-watermark,
    .ct-watermark,
    .hero-watermark,
    .nexus-word,
    .story-num,
    .svc-num {
        max-width: 100vw;
        word-break: keep-all;
    }
}

/* ============================================
   11. MOTION — reduce overall animation cost on small screens
   ============================================ */
@media (max-width: 640px) {
    /* Slower / smaller particle population already handled in JS.
       Halve the gradient-orb float distance on mobile to reduce repaints. */
    @keyframes orbFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(8px, -8px) scale(1.02); }
    }
}

/* ============================================
   12. PORTAL SHELL — safe areas, main offset, background
   ============================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

@media (max-width: 1024px) {
    main,
    .story-main,
    .svc-main {
        padding-top: 5rem;
    }

    .nexus-main {
        padding-top: 5rem;
    }

    .grid-overlay {
        background-size: 48px 48px;
        opacity: 0.65;
    }

    .ai-background .particles {
        opacity: 0.55;
    }
}

@media (max-width: 768px) {
    main,
    .story-main,
    .svc-main {
        padding-top: 4.75rem;
    }

    .contact {
        padding-top: 3.5rem;
    }
}

/* ============================================
   13. HOME PAGE
   ============================================ */
@media (max-width: 768px) {
    .hero {
        padding: 2.75rem 1.25rem 2rem;
        gap: 2rem;
    }

    .hero-watermark {
        font-size: clamp(5rem, 26vw, 11rem);
        opacity: 0.75;
    }

    .hero-chips {
        gap: 0.5rem;
        justify-content: center;
    }

    .hero-chip {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }

    .section-header {
        margin-bottom: 2rem;
        text-align: center;
    }

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

    .section-description {
        font-size: 0.95rem;
        margin-left: auto;
        margin-right: auto;
    }

    .service-card {
        padding: 1.65rem 1.35rem;
        border-radius: 18px;
    }

}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.85rem, 10vw, 2.75rem);
    }

    .title-line {
        display: block;
    }

    .hero-chips {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-chip {
        justify-content: center;
        min-height: 44px;
    }

    /* 404 watermark: shrink on tiny screens so it fits rather than relying on the overflow-x clip */
    .nf-watermark {
        font-size: clamp(4.5rem, 26vw, 8rem);
    }
}

/* ============================================
   14. SERVICES OVERVIEW
   ============================================ */
@media (max-width: 768px) {
    .page-hero {
        padding: 3.5rem 1.25rem 2rem;
    }

    .page-hero-subtitle {
        font-size: 1rem;
    }

    .services-overview-section {
        padding: 2rem 1.25rem 4rem;
    }

    .services-grid {
        gap: 1rem;
    }

    .service-card h2 {
        font-size: 1.25rem;
    }
}

/* ============================================
   15. SERVICE DETAIL PAGES (all 4)
   ============================================ */
@media (max-width: 900px) {
    .svc-hero-visual {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

@media (max-width: 860px) {
    .svc-hero {
        padding: 2.5rem 1.25rem 2.5rem;
    }

    .svc-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .svc-hero-visual {
        order: -1;
        max-width: min(100%, 340px);
        margin-bottom: 0.5rem;
    }

    .svc-hero-svg {
        max-width: 100%;
        height: auto;
    }

    .svc-industries {
        justify-content: center;
    }

    .svc-industries-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 0.65rem;
    }

    .svc-section {
        /* keep the 4.5rem top clearance for the .svc-num watermark (set at <=760px);
           the shorthand here previously reset it to 3rem and let the number crowd the heading */
        padding: 4.5rem 1.25rem 3rem;
    }

    .svc-section-lede {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .stack-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .cap-card {
        padding: 1.35rem 1.2rem;
    }
}

@media (max-width: 640px) {
    .svc-hero-title {
        font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    }

    .svc-hero-lede {
        font-size: 0.95rem;
    }

    .svc-hero-cta {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .svc-cta,
    .svc-cta-ghost {
        width: 100%;
    }

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

    .proc-step {
        grid-template-columns: 48px 1fr;
        padding: 1rem;
        gap: 0.85rem;
    }

    .proc-num {
        font-size: 1.35rem;
        padding-right: 0.75rem;
    }

    .faq-q {
        padding: 1rem 1.1rem;
        font-size: 0.95rem;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .svc-tag {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .svc-hero-visual {
        max-width: 100%;
    }
}

/* ============================================
   16. ABOUT — MISSION & VISION
   ============================================ */
@media (max-width: 860px) {
    .story-main {
        padding-top: 4.75rem;
    }

    .story-intro {
        padding: 3rem 1.25rem 1.5rem;
        text-align: center;
    }

    .story-title {
        font-size: clamp(1.85rem, 9vw, 2.75rem);
    }

    .story-section {
        padding: 3rem 1.25rem;
    }

    .story-visual {
        order: -1;
        max-width: min(100%, 320px);
        margin: 0 auto 0.5rem;
    }

    .story-grid {
        display: flex;
        flex-direction: column;
    }

    .story-text {
        width: 100%;
    }

    .story-p {
        font-size: 0.95rem;
    }

    .story-stamps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .story-stamps li {
        font-size: 0.68rem;
    }
}

/* ============================================
   17. CONTACT & FOOTER (shared components)
   ============================================ */
@media (max-width: 768px) {
    .contact {
        padding: 3.5rem 0 2.5rem;
    }

    .ct-container {
        padding: 0 1.15rem;
    }

    .ct-head {
        text-align: center;
        margin-bottom: 2rem;
    }

    .ct-title {
        align-items: center;
    }

    .ct-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .ct-watermark {
        font-size: clamp(4.5rem, 22vw, 9rem);
        opacity: 0.5;
    }

    .ct-quick-btn {
        padding: 0.85rem 1rem;
    }

    .ct-form-wrap,
    .ct-connect {
        border-radius: 18px;
        padding: 1.35rem 1.15rem;
    }

    .footer {
        padding: 3.5rem 0 1.75rem;
    }

    .ft-container {
        padding: 0 1.15rem;
    }

    .ft-brand-tier {
        padding-bottom: 2rem;
    }

    .ft-wordmark {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .ft-tagline {
        font-size: 0.92rem;
        max-width: 32ch;
        margin-left: auto;
        margin-right: auto;
    }

    .ft-socials {
        justify-content: center;
    }
}

@media (max-width: 540px) {
    .ft-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.65rem;
    }

    .ft-bottom-sep {
        display: none;
    }

    .ct-stamp {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .ct-stamp-item {
        justify-content: center;
    }
}

/* ============================================
   18. NEXUS PAGE (portal layer; page CSS also applies)
   ============================================ */
@media (max-width: 1024px) {
    .nexus-stage {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .nexus-cta {
        min-height: 48px;
    }

    .nexus-item:hover .nexus-item-title,
    .nexus-item:hover .nexus-item-desc,
    .nexus-item:hover .nexus-item-index {
        -webkit-text-fill-color: unset;
        background: none;
        color: inherit;
        text-shadow: none;
    }
}

/* ============================================
   19. 404 PAGE
   ============================================ */
@media (max-width: 768px) {
    .nf-page .nf-main {
        min-height: auto;
        padding: 5rem 1.25rem 3rem;
        align-items: flex-start;
        padding-top: 5.5rem;
    }

    .nf-watermark {
        font-size: clamp(5rem, 28vw, 10rem);
        top: 42%;
    }

    .nf-title {
        font-size: clamp(1.85rem, 8vw, 2.5rem);
    }

    .nf-lede {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .nf-cta-row {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .nf-cta,
    .nf-cta-ghost {
        width: 100%;
        justify-content: center;
    }

    .nf-quick {
        gap: 0.6rem;
    }

    .nf-quick a {
        font-size: 0.72rem;
        padding: 0.45rem 0.95rem;
        min-height: 44px;
    }
}

/* ============================================
   20. TOUCH TARGETS — portal-wide extras
   ============================================ */
@media (max-width: 1024px) {
    .nexus-cta,
    .nav-link,
    .nav-link-trigger {
        min-height: 44px;
    }

    .service-card {
        min-height: 44px;
    }

    .card-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================
   21. HOVER RESET — more portal components
   ============================================ */
@media (hover: none) {
    .service-card:hover,
    .story-cta:hover,
    .nexus-cta:hover {
        transform: none !important;
    }

    .svc-hero-cta .svc-cta:hover,
    .svc-hero-cta .svc-cta-ghost:hover {
        transform: none !important;
    }
}

/* ============================================
   22. ULTRA-NARROW (320–380px)
   ============================================ */
@media (max-width: 380px) {
    .hero-chips {
        grid-template-columns: 1fr;
        max-width: 220px;
    }

    .mobile-link-label {
        font-size: 1rem;
    }

    .ct-quick-label {
        font-size: 0.7rem;
    }

    .page-hero-title,
    .section-title {
        letter-spacing: -0.02em;
    }
}