/* ============================================================
   MOBILE RESPONSIVE FIXES
   Loaded after page styles. Shared navigation.css loads after this file.
   Goals:
     - No content hidden behind the site nav on any page.
     - No horizontal scroll on any viewport.
     - Services page stat cards remain visible on mobile/tablet.
     - Hero/CTA buttons stack & fill width on small screens.
     - Card grids degrade cleanly at every breakpoint.
   ============================================================ */

/* ─────────────────────────────────────────────
   GLOBAL OVERFLOW & TYPOGRAPHY GUARDRAILS
   ───────────────────────────────────────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

@media (max-width: 768px) {
    /* Force long words / URLs to wrap instead of pushing layout out */
    h1, h2, h3, h4, h5, h6, p, a, span, li, strong, small {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Inputs that escape on tiny screens */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ─────────────────────────────────────────────
   NAVBAR / MOBILE MENU SAFETY
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Make sure the mobile menu has room for the close (toggle) button
       and that long link lists scroll if needed. */
}

/* ─────────────────────────────────────────────
   UNIVERSAL HERO CLEARANCE
   The site nav is FIXED at the top of every route.
   IndexStyling.css applies a high-specificity rule
   to non-home/non-products pages:

     body.page-shell:not(.page-home):not(.page-products)
         .hero-section / .apps-hero-section / .svc-hero {
             min-height: 100vh !important;
             align-items: center !important;
             padding-top: ... + 96px !important;
         }

   When the hero's CONTENT is taller than the viewport
   (e.g. Apps page on a phone: large title + subtitle +
   two buttons + side card), `align-items: center` causes
   the content to overflow UPWARD behind the fixed site nav.
   Padding-top alone cannot fix that — flex centering
   ignores padding when content > container.

   The fix below MATCHES that selector's specificity so
   our !important actually wins, then:
     1. anchors content to the top (align-items:flex-start),
     2. drops the 100vh min-height (let the section grow
        with content instead of forcing it tall),
     3. reserves enough padding-top to clear the floating
        site nav plus the iOS safe-area inset.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
    body.page-shell .hero-section,
    body.page-shell .apps-hero-section,
    body.page-shell .svc-hero,
    body.page-shell .coverflow-section,
    body.page-shell .products-hero-section,
    body.page-shell .cookie-prefs,
    body.page-shell:not(.page-home):not(.page-products) .hero-section,
    body.page-shell:not(.page-home):not(.page-products) .apps-hero-section,
    body.page-shell:not(.page-home):not(.page-products) .svc-hero {
        min-height: auto !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 140px) !important;
        padding-bottom: 3rem !important;
    }

    /* Reset any per-page rule that nudges the first heading up. */
    body.page-shell .hero-section h1,
    body.page-shell .apps-hero-section h1,
    body.page-shell .svc-hero h1,
    body.page-shell .coverflow-section h1,
    body.page-shell .products-hero-section h1 {
        margin-top: 0 !important;
    }

    body.page-shell .hero-section > .hero-row,
    body.page-shell .apps-hero-section > .hero-row,
    body.page-shell .svc-hero > .svc-hero-inner,
    body.page-shell .hero-section > .hero-content,
    body.page-shell .apps-hero-section > .apps-hero-content {
        margin-top: 0 !important;
    }
}

@media (max-width: 600px) {
    body.page-shell .hero-section,
    body.page-shell .apps-hero-section,
    body.page-shell .svc-hero,
    body.page-shell .coverflow-section,
    body.page-shell .products-hero-section,
    body.page-shell .cookie-prefs,
    body.page-shell:not(.page-home):not(.page-products) .hero-section,
    body.page-shell:not(.page-home):not(.page-products) .apps-hero-section,
    body.page-shell:not(.page-home):not(.page-products) .svc-hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 150px) !important;
    }
}

@media (max-width: 380px) {
    body.page-shell .hero-section,
    body.page-shell .apps-hero-section,
    body.page-shell .svc-hero,
    body.page-shell .coverflow-section,
    body.page-shell .products-hero-section,
    body.page-shell .cookie-prefs,
    body.page-shell:not(.page-home):not(.page-products) .hero-section,
    body.page-shell:not(.page-home):not(.page-products) .apps-hero-section,
    body.page-shell:not(.page-home):not(.page-products) .svc-hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 160px) !important;
    }
}

/* ─────────────────────────────────────────────
   CONTACT US — force hero text BEFORE side panel
   On mobile the .cu-hero .hero-row was rendering
   the "What Happens Next" panel above the title.
   Stack vertically and explicitly order the children:
     1) hero text (title / subtitle / CTAs)
     2) hero side panel
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cu-hero .hero-row,
    body.page-shell .cu-hero .hero-row,
    body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2rem !important;
    }

    .cu-hero .hero-row .hero-content,
    body.page-shell .cu-hero .hero-row .hero-content,
    body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row .hero-content {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cu-hero .hero-row .hero-side-card,
    body.page-shell .cu-hero .hero-row .hero-side-card,
    body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row .hero-side-card {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────
   SERVICES PAGE — show hero stat cards on mobile
   The original CSS hides .svc-hero-right at <=1024px
   which removes the four stat cards. Restore them.
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .svc-hero-right {
        display: block !important;
        width: 100%;
        margin-top: 2.25rem;
    }

    .svc-hero-inner {
        grid-template-columns: 1fr !important;
    }

    .svc-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.9rem;
        max-width: 100%;
    }

    .svc-hstat {
        padding: 1.1rem 0.9rem !important;
    }

    .svc-hstat .stat-number {
        font-size: 2rem !important;
    }
    .svc-hstat-sfx {
        font-size: 1.25rem !important;
    }
    .svc-hstat small {
        font-size: 0.65rem !important;
        letter-spacing: 0.08em !important;
    }
}

@media (max-width: 768px) {
    .svc-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .svc-hstat .stat-number { font-size: 1.85rem !important; }
}

@media (max-width: 380px) {
    .svc-hero-stats {
        grid-template-columns: 1fr 1fr;
    }
    .svc-hstat {
        padding: 0.95rem 0.75rem !important;
    }
    .svc-hstat .stat-number { font-size: 1.6rem !important; }
    .svc-hstat-sfx { font-size: 1.05rem !important; }
}

/* Keep the services hero domain tabs / panels readable on phones */
@media (max-width: 640px) {
    .svc-domains-section { padding: 4rem 1rem !important; }
    .svc-domain-tab {
        grid-template-columns: auto auto 1fr !important;
        padding: 0.95rem 1rem !important;
    }
    .svc-domain-tab .svc-domain-arrow { display: none; }
    .svc-domain-num { font-size: 0.85rem; }
    .svc-domain-meta strong { font-size: 0.95rem; }
    .svc-domain-meta small { font-size: 0.7rem; }
}

/* ─────────────────────────────────────────────
   ABOUT US — keep stats strip and tiles tidy
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .abt-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
    .abt-stat {
        padding: 1.1rem 0.9rem !important;
    }
    .abt-stat-num {
        font-size: 1.9rem !important;
    }
}

@media (max-width: 420px) {
    .abt-stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────
   APPS — apps hero stats: keep visible & tidy
   The page CSS stacks them as flex column with
   max-width:300px which works; just guarantee
   they aren't cut off horizontally.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .apps-hero-section .hero-row {
        gap: 2rem !important;
    }
    .apps-hero-stats {
        width: 100% !important;
        align-items: center !important;
    }
    .stat-item {
        width: 100% !important;
        max-width: 360px !important;
    }
}

/* ─────────────────────────────────────────────
   CONTACT US - form
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-actions .btn-primary,
    .hero-actions .cu-btn-ghost,
    .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────
   PRODUCTS — coverflow is touch friendly already,
   but make sure controls are reachable on tiny phones.
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .cf-nav {
        width: 36px !important;
        height: 36px !important;
    }
    .cf-meta-name { font-size: 1.1rem !important; }
    .cf-meta-tag { font-size: 0.8rem !important; }
}

/* ─────────────────────────────────────────────
   FOOTER — tighter on phones, no overflow
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .footer { padding: 3rem 0 0 !important; }
    .footer-content { padding: 0 1rem 1rem !important; }
    .footer-main { gap: 2rem !important; margin-bottom: 2rem !important; }
    .footer-links { gap: 1.75rem !important; }
    .footer-column h4 { margin-bottom: 1rem !important; }
    .perf-metrics {
        gap: 0.75rem !important;
        justify-content: center !important;
    }
    .perf-item { font-size: 0.6rem !important; }
}

/* ─────────────────────────────────────────────
   GENERIC GRID / CTA HARDENING
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Anything we render as a multi-column grid should collapse
       to one column at the smallest sizes if it hasn't already. */
    .features-grid,
    .platforms-grid,
    .monetization-grid,
    .process-timeline,
    .industries-grid,
    .svc-card-grid,
    .svc-cards-grid,
    .svc-industries-grid {
        grid-template-columns: 1fr !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* The home-page marquee is a single transform animation, so it is cheap enough
   to keep on touch devices. The global lite tier disables animation broadly;
   this opt-in restores only the marquee and still honors reduced motion. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px),
       (prefers-reduced-motion: no-preference) and (hover: none),
       (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    body.page-home .marquee-track {
        animation-name: marqueeScroll !important;
        animation-duration: 45s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
        will-change: transform;
    }
}

/* Mobile crisp rendering:
   desktop glass, glow, and cinematic layers can rasterize card text/icons
   softly on phone browsers. Keep the layout and color treatment, but remove
   blur filters and persistent 3D compositor transforms on touch viewports. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .feature-card,
    .stat-card,
    .stat-item,
    .process-step,
    .platform-card,
    .monetization-card,
    .about-tile,
    .services-tile,
    .contact-tile,
    .contact-card,
    .form-card,
    .cu-info-card,
    .cu-form-card,
    .hero-side-card,
    .cta-card,
    .svc-card,
    .svc-phase,
    .svc-hstat,
    .vm-card,
    .value-card,
    .adv-card,
    .abt-stat,
    .abt-highlight-card,
    .leader-card,
    .promise-card,
    .glass-card,
    .glass-panel,
    .glass-refract,
    .liquid-glass,
    [class*="glass"],
    [class*="liquid"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        transform-style: flat !important;
        perspective: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .feature-card:hover,
    .stat-card:hover,
    .stat-item:hover,
    .process-step:hover,
    .platform-card:hover,
    .monetization-card:hover,
    .about-tile:hover,
    .services-tile:hover,
    .contact-tile:hover,
    .contact-card:hover,
    .form-card:hover,
    .cu-info-card:hover,
    .cu-form-card:hover,
    .hero-side-card:hover,
    .cta-card:hover,
    .svc-card:hover,
    .svc-phase:hover,
    .svc-hstat:hover,
    .vm-card:hover,
    .value-card:hover,
    .adv-card:hover,
    .abt-stat:hover,
    .abt-highlight-card:hover,
    .leader-card:hover,
    .promise-card:hover {
        transform: none !important;
    }

    .cine-section,
    .cine-section.cine-ready,
    .cine-section.cine-visible,
    .cine-section .cine-child,
    .sa-reveal,
    .sa-hidden,
    .sa-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition-delay: 0s !important;
        will-change: auto !important;
    }

    .card-shine,
    .glass-shine,
    .liquid-caustics,
    .liquid-sheen,
    .liquid-border {
        display: none !important;
    }

    .stat-number,
    .stat-card-icon,
    .feature-icon,
    .feature-icon i,
    .step-icon,
    .step-icon i,
    .platform-icon,
    .platform-icon i,
    .monetization-icon,
    .monetization-icon i,
    .svc-card-icon,
    .svc-card-icon i,
    .svc-phase-icon,
    .svc-phase-icon i,
    .vm-icon-wrap,
    .vm-icon-wrap i,
    .value-icon,
    .value-icon i,
    .adv-card-icon,
    .adv-card-icon i,
    .abt-stat-icon,
    .abt-stat-icon i,
    .cu-info-icon,
    .cu-info-icon i,
    .contact-item h4 i {
        filter: none !important;
        text-shadow: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .values-section,
    .advantage-section,
    .promise-section,
    .app-process-section,
    .platforms-section,
    .monetization-section,
    .features-section,
    .svc-domains-section,
    .svc-process,
    .svc-industries,
    .svc-cta,
    .svc-hex-section,
    .adv-bento,
    .values-manifesto,
    .process-rail,
    .platform-triptych,
    .monetize-orbit {
        content-visibility: visible !important;
        contain-intrinsic-size: none !important;
    }
}

/* Reduce orb / glow blur on phones (perf + no overflow halos) */
@media (max-width: 600px) {
    .orb { filter: blur(80px) !important; }
}