@keyframes kenburns-slow {
  0% { transform: scale(1); }
  50% { transform: scale(1.08) translate(1%, -1%); }
  100% { transform: scale(1); }
}

@keyframes mobile-fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   EXTRACTED FROM atspl-mobile.js (CONSOLIDATION)
   ================================================================ */
/* =============================================
     ATSPL – Mobile / Tablet Responsive Overrides
     Breakpoints: tablet ≤1024px | mobile ≤480px
  ============================================= */

  /* ---------- Desktop Safety ---------- */
  @media screen and (min-width: 1025px) {
    #atspl-sidebar, #atspl-overlay, #atspl-hamburger {
      display: none !important;
    }
  }

  /* ---------- Overlay ---------- */
  #atspl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
    opacity: 0;
  }
  #atspl-overlay.active { display: block; opacity: 1; }

  /* ---------- Sidebar – slides in from the RIGHT ---------- */
  #atspl-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    background: #0a1520; /* Deep navy */
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smoother iOS-like ease */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  #atspl-sidebar.open { transform: translateX(0); }

  /* ---------- Sidebar Header ---------- */
  #atspl-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: #0a1520;
    border-bottom: 2px solid var(--color-brass, #E68C3A);
    flex-shrink: 0;
  }
  #atspl-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  #atspl-sidebar-logo img {
    height: 42px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
  }
  #atspl-sidebar-logo .atspl-logo-text {
    font-size: 11px;
    color: #cdd9e5;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  #atspl-close-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  #atspl-close-btn:hover { background: rgba(255,255,255,0.16); }
  #atspl-close-btn svg { width:18px; height:18px; }

  /* ---------- Nav Links ---------- */
  #atspl-sidebar nav { flex: 1; padding: 8px 0; }

  .atspl-nav-link, .atspl-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    color: #cdd9e5;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.18s, color 0.18s;
    cursor: pointer;
    width: 100%;
    background: none;
    border-left: 3px solid transparent;
    border-top: none;
    border-right: none;
    text-align: left;
    min-height: 52px;
  }
  
  .atspl-nav-toggle-group {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
  }

  .atspl-nav-link:hover, .atspl-nav-toggle:hover {
    background: rgba(230, 140, 58, 0.08);
    color: #fff;
    border-left-color: var(--color-brass, #E68C3A);
  }
  .atspl-nav-link.active-page {
    color: #fff;
    background: rgba(230, 140, 58, 0.08);
    border-left-color: var(--color-brass, #E68C3A);
  }
  .atspl-nav-toggle-icon {
    width: 18px; height: 18px;
    transition: transform 0.25s ease;
    opacity: 0.5;
    flex-shrink: 0;
    color: #cdd9e5;
    pointer-events: none; /* Prevents SVG click capture */
  }
  .atspl-nav-toggle-btn.open .atspl-nav-toggle-icon {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--color-brass, #E68C3A);
  }
  .atspl-nav-toggle-group {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .atspl-nav-toggle-btn {
    padding: 16px 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---------- Submenus ---------- */
  .atspl-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,0,0,0.25);
  }
  .atspl-submenu.open { max-height: 700px; }
  .atspl-submenu-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-brass, #E68C3A);
    padding: 10px 20px 4px;
    text-transform: uppercase;
  }
  .atspl-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px 14px 40px; 
    color: #9fb8d0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    border-bottom: none;
    transition: color 0.15s, background 0.15s;
    min-height: 48px;
  }
  .atspl-submenu a::before {
    content: '›';
    color: var(--color-brass, #E68C3A);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
  }
  .atspl-submenu a:hover { color: #fff; background: rgba(230, 140, 58, 0.08); }

  /* ---------- Sidebar Footer ---------- */
  #atspl-sidebar-footer {
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    background: #0a1520;
  }
  #atspl-sidebar-footer .atspl-cta-btn {
    display: block;
    background: var(--color-brass, #E68C3A) !important;
    color: #fff !important;
    text-align: center;
    padding: 13px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s;
    margin-bottom: 10px;
  }
  #atspl-sidebar-footer .atspl-cta-btn:hover { background: var(--color-navy, #213E60) !important; }
  .atspl-footer-contact {
    font-size: 12px;
    color: #6a8099;
    text-align: center;
  }
  .atspl-footer-contact a { color: #7fb3d3; text-decoration: none; }

  /* ---------- FIX 1: Header company name – show on mobile ---------- */
  @media screen and (max-width: 1024px) {
    .main-header .logo-text {
      display: flex !important;
    }
  }

  /* ---------- FIX 2: Footer brand row – override the inline display:flex ---------- */
  @media screen and (max-width: 1024px) {
    /* The .footer-logo anchor has inline style="display:flex;align-items:center;gap:12px"
       We must use !important to beat inline styles */
    .footer-logo {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      max-width: 100% !important;
      width: 100% !important;
    }
    .footer-logo img {
      max-width: 90px !important;
      width: 90px !important;
      height: auto !important;
      flex-shrink: 0 !important;
      margin: 0 auto !important; /* Centered logo on mobile */
    }

    /* ---------- FIX 3: Footer Accordion (Mobile Redesign) ---------- */
    .footer-nav-col ul {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.35s ease;
      opacity: 0;
    }
    .footer-nav-col.open ul {
      max-height: 500px;
      opacity: 1;
      padding-top: 16px;
    }
    .footer-heading {
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px; /* Space for plus/minus */
    }
    .footer-heading svg {
      display: block !important;
      width: 20px !important;
      height: 20px !important;
      transition: transform 0.3s ease;
      color: #E68C3A;
      opacity: 0.8;
    }
    .footer-nav-col.open .footer-heading svg {
      transform: rotate(180deg);
      opacity: 1;
    }

    .footer-brand-col {
      width: 100% !important;
      max-width: 100% !important;
    }
    .footer-grid {
      grid-template-columns: 1fr !important;
      width: 100% !important;
    }
    .footer-bottom-flex {
      flex-direction: column !important;
      gap: 12px !important;
      width: 100% !important;
    }
    .footer-legal-links {
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
  }

  /* ---------- Hamburger Button ---------- */
  #atspl-hamburger {
    display: none;
    position: fixed;
    top: 17px; right: 14px;
    z-index: 9997;
    background: var(--color-brass, #E68C3A) !important;
    border: none;
    border-radius: 8px;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(230, 140, 58, 0.45) !important;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  #atspl-hamburger:active { transform: scale(0.93); }
  #atspl-hamburger svg { width: 22px; height: 22px; }
  #atspl-hamburger svg line {
    stroke: #ffffff !important;
  }

  /* ---------- Global Overflow Kill (CRITICAL) ---------- */
  @media screen and (max-width: 1024px) {
    html, body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
      touch-action: pan-x pan-y !important;
    }
  }

  /* ---------- Responsive Layout Fixes ---------- */
  @media screen and (max-width: 1024px) {

    /* Show hamburger, hide desktop nav */
    #atspl-hamburger { display: flex; }

    .nav-menu,
    header nav > ul,
    header > nav > ul,
    nav.desktop-nav,
    .navbar ul,
    .main-nav ul,
    header .nav-links,
    .nav-cta-btn {
      display: none !important;
    }

    /* Make header solid to match sidebar color */
    .main-header {
      background: #0d1b2a !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
    }

    /* ── OVERFLOW FIX: clip any element wider than screen ── */
    * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    /* Exception: let sidebar, overlay and hamburger be unconstrained */
    #atspl-sidebar, #atspl-overlay, #atspl-hamburger {
      max-width: unset !important;
    }
    /* Exception: Swiper internals must not be width-clamped —
       the swiper-wrapper is intentionally wider than the viewport to loop */
    .swiper-wrapper,
    .swiper-slide,
    .swiper-slide * {
      max-width: unset !important;
    }
    /* Exception: hero-actions centering container must allow max-width constraint to work */
    .inner-page-hero .hero-actions {
      max-width: 340px !important;
    }

    /* Hero section – scale text down */
    h1, .hero h1, .hero-title, .premium-hero-title, section:first-of-type h1 {
      font-size: clamp(28px, 8vw, 56px) !important;
      line-height: 1.15 !important;
    }
    h2, .section-title {
      font-size: clamp(22px, 6vw, 38px) !important;
    }
    h3 { font-size: clamp(16px, 4.5vw, 26px) !important; }

    /* Body paragraph text */
    p, li, .hero p, .hero-description {
      font-size: clamp(14px, 3.8vw, 17px) !important;
      line-height: 1.65 !important;
    }

    /* Buttons */
    .btn, button.btn, a.btn,
    [class*="btn-"], [class*="-btn"],
    .cta-button, .hero a[href] {
      padding: 12px 22px !important;
      font-size: 13px !important;
      min-width: unset !important;
    }

    /* Section padding */
    section, .section, .section-container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    /* Grid / flex layouts → stack */
    .grid-2, .grid-3, .grid-4,
    [class*="col-"],
    .two-col, .three-col,
    .features-grid, .services-grid,
    .industries-grid, .cards-wrapper,
    .about-grid, .contact-grid, .stats-grid {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
      width: 100% !important;
    }

    /* Hero actions → stack vertically */
    .hero-actions, .cta-actions, .premium-hero-actions {
      flex-direction: column !important;
      align-items: center !important;
      gap: 12px !important;
    }

    /* Card fixes */
    .card, [class*="-card"] {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Image fixes - exclude header/footer/sidebar logos to prevent blowout */
    img:not(header img):not(footer img):not(#atspl-sidebar img) {
      max-width: 100% !important;
      height: auto !important;
    }

    /* Hero flex row → stack */
    .hero-content, .hero-wrapper, .hero-inner,
    .hero-flex, .banner-content {
      flex-direction: column !important;
      text-align: center !important;
      width: 100% !important;
    }
    .hero-content > *, .hero-wrapper > * {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Table scrolling */
    table { display: block; overflow-x: auto; max-width: 100% !important; }

    /* Ticker / marquee – shrink text */
    .ticker, .marquee, [class*="ticker"], [class*="marquee"] {
      font-size: 12px !important;
    }

    /* ── FOOTER FIX: force full single-column stack ── */
    footer,
    footer > *,
    footer div,
    footer section,
    footer ul {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
    }
    footer {
      overflow-x: hidden !important;
    }
    footer > div,
    footer .footer-grid,
    footer .footer-inner,
    footer .footer-brand-col,
    footer .footer-loc-col {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      align-items: flex-start !important;
      gap: 24px !important;
      width: 100% !important;
    }
    footer img {
      max-width: 160px !important;
      height: auto !important;
    }
    footer ul {
      list-style: none !important;
      padding: 0 !important;
    }
    footer li { margin-bottom: 8px !important; }
    footer h3, footer h4, footer strong {
      font-size: 13px !important;
      letter-spacing: 0.08em !important;
      margin-bottom: 12px !important;
    }
  }

  @media screen and (max-width: 480px) {
    html, body { overflow-x: hidden !important; }
    h1, .hero h1, .hero-title, .premium-hero-title, section:first-of-type h1 {
      font-size: clamp(24px, 9vw, 36px) !important;
    }
    section, .section, .section-container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
    footer > div,
    footer [class*="footer-"],
    footer [class*="col"] {
      padding: 0 12px !important;
    }
  }

/* ================================================================
   ATSPL THERMAL — MOBILE OVERRIDE
   Scope: max-width 1024px ONLY. Desktop (≥1025px) is UNTOUCHED.
   Load order: injected after styles.css
================================================================ */

/* ── 0. Swiper — critical exception ─────────────────────────── */
/* The atspl-mobile.js CSS injection sets * { max-width: 100% !important }
   which would clamp the .swiper-wrapper and break the loop carousel.
   These rules undo that for Swiper only. Must live in this file
   so it can be ordered AFTER the injected <style> tag. */
/* ── 0. Desktop Swiper — hidden on mobile, replaced by atspl-mobile.js carousel ── */
@media screen and (max-width: 1024px) {
  /* Hide the entire Swiper carousel wrapper on mobile */
  .osmo-carousel-wrapper {
    display: none !important;
  }
  /* The JS-built mobile carousel sits here instead */
  #atspl-mobile-carousel {
    display: block;
    margin: 24px 0 8px;
    overflow: hidden;
  }
  .atspl-mc-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 8px 40px 16px; /* Extra padding on sides for center alignment */
  }
  .atspl-mc-track::-webkit-scrollbar { display: none; }
  .atspl-mc-slide {
    flex-shrink: 0;
    width: 80%; /* 80% width so next card peeks */
    scroll-snap-align: center;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transform: scale(0.95);
    opacity: 0.7;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  .atspl-mc-slide.active {
    transform: scale(1);
    opacity: 1;
  }
  .atspl-mc-slide a.industry-swiper-card {
    width: 100% !important;
    height: 250px !important;
    max-width: unset !important;
    aspect-ratio: unset !important;
    display: block !important;
    border-radius: 16px !important;
    transform: none !important;
    transition: none !important;
  }
  .atspl-mc-slide .industry-swiper-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: unset !important;
    object-fit: cover !important;
  }
  .atspl-mc-slide .industry-swiper-overlay {
    padding: 20px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%) !important;
  }
  .atspl-mc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0 16px;
  }
  .atspl-mc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .atspl-mc-dot.active {
    width: 24px;
    border-radius: 4px;
    background: #E68C3A !important;
    box-shadow: 0 0 10px rgba(230, 48, 34, 0.5) !important;
  }
}


/* ── 1. Hero Section — Homepage only ────────────────────────── */
@media screen and (max-width: 1024px) {
  /* Hero Spacing Variables following 8px system */
  :root {
    --hero-space-xs: 12px;
    --hero-space-sm: 16px;
    --hero-space-md: 24px;
    --hero-space-lg: 32px;
    --hero-space-xl: 48px;
  }

  /* Mobile Trust Badge - Premium Pill with Animation */
  .mobile-trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-bottom: var(--hero-space-xs) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    order: 1 !important;
    opacity: 0;
    animation: mobile-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation-delay: 0.1s !important;
  }

  /* Un-absolute the hero so it flows naturally in the document */
  .hero-carousel-pin-wrapper > .premium-hero-section {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    pointer-events: auto !important;     /* RE-ENABLES ALL HERO BUTTONS */
    background: var(--color-navy, #213e60) !important; /* Premium Dark Navy BG to match desktop */
    z-index: auto !important;
    overflow: hidden !important;
    padding: 32px 0 0 !important;
  }

  /* Un-absolute the split wrapper */
  .hero-split-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Restore pointer events on the content div */
  .hero-content {
    pointer-events: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    z-index: 2 !important;
    position: relative !important;
  }

  .hero-typography-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide clone layers — GSAP desktop artefacts */
  .hero-clone-layer {
    display: none !important;
  }

  /* Industries section: reduce padding top for static flow */
  .hero-carousel-pin-wrapper > .industries-section {
    position: relative !important;
    z-index: auto !important;
    padding-top: 48px !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Premium Hero Headline */
  .hero-massive-headline {
    order: 2 !important;
    font-size: clamp(1.8rem, 7vw, 2.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-align: left !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
    margin-bottom: var(--hero-space-sm) !important;
    width: 100% !important;
    opacity: 0;
    animation: mobile-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation-delay: 0.3s !important;
  }

  /* Premium Hero Support Text */
  .hero-support-text {
    order: 3 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-align: left !important;
    margin-bottom: var(--hero-space-md) !important;
    max-width: 100% !important;
    text-shadow: none !important;
    width: 100% !important;
    opacity: 0;
    animation: mobile-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation-delay: 0.5s !important;
  }

  /* Premium Hero CTAs */
  .hero-cta-wrapper {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-bottom: var(--hero-space-lg) !important;
    margin-top: 0 !important;
    opacity: 0;
    animation: mobile-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation-delay: 0.7s !important;
  }

  .hero-cta-primary {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #E68C3A !important;
    box-shadow: 0 4px 12px rgba(230, 48, 34, 0.25) !important;
    border: none !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    transform: none !important;
    color: #ffffff !important;
  }
  .hero-cta-primary:active {
    transform: scale(0.96) !important;
  }

  .hero-cta-secondary {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    transform: none !important;
  }
  .hero-cta-secondary:active {
    transform: scale(0.96) !important;
  }

  /* Mobile-only Industrial Image Card - Visual Conclusion */
  .mobile-hero-visual-container {
    order: 5 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    align-self: center !important;
    margin-bottom: var(--hero-space-xl) !important;
    opacity: 0;
    animation: mobile-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation-delay: 0.9s !important;
  }

  .mobile-hero-image-card {
    width: 100% !important;
    max-width: 280px !important; /* Slightly larger for better visual presentation */
    height: 210px !important; /* aspect-ratio 4:3 */
    border-radius: 14px !important; /* premium rounded corners */
    overflow: hidden !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    background: #060b13 !important;
    position: relative !important;
  }

  #siteHeader ~ .hero-carousel-pin-wrapper .mobile-hero-image-card img.mobile-hero-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 210px !important; /* Force matching card height */
    display: block !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 1.5s ease-in-out, transform 5.5s linear !important; /* slow scale zoom */
    transform: scale(1) !important;
    z-index: 1 !important;
  }
  
  #siteHeader ~ .hero-carousel-pin-wrapper .mobile-hero-image-card img.mobile-hero-image.active {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    z-index: 2 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-trust-badge,
    .hero-massive-headline,
    .hero-support-text,
    .hero-cta-wrapper,
    .mobile-hero-visual-container {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
    .mobile-hero-image {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }
    .mobile-hero-image.active {
      transform: none !important;
    }
  }

  /* Injected ATSPL engineering overlay responsive styling to match desktop look and feel */
  .atspl-engineering-overlay.desktop-only-rollback {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important; /* Sits behind content (z-index: 2) but above background */
    pointer-events: none !important;
    mix-blend-mode: screen !important;
    opacity: 0.9 !important;
    overflow: visible !important; /* Allow sun to bleed into top-right corner */
    transform: translateY(-22%) !important; /* Shift sun up to top-right corner as designed */
    transform-origin: top right !important;
  }

  .atspl-engineering-overlay svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right top !important; /* Keep the glow at top right */
  }

  /* Hide desktop-only hero text block (SHIELDING ASSETS / SCHEDULE TECHNICAL CONSULTATION)
     — this is the rollback desktop typography that must NOT appear on mobile */
  .hero-typography-container.hero-split-layout.desktop-only-rollback {
    display: none !important;
  }

  /* Shimmer, Pulse, and Blink animations for mobile */
  .eng-shimmer {
    animation: engShimmer-mobile 6s infinite ease-in-out !important;
  }
  
  .eng-pulse {
    transform-origin: 1150px 150px !important;
    animation: engPulse-mobile 8s infinite ease-in-out !important;
  }
  
  .eng-particle {
    animation: engBlink-mobile 4s infinite ease-in-out alternate !important;
  }

  @keyframes engShimmer-mobile {
    0% { opacity: 0.4; }
    50% { opacity: 0.9; }
    100% { opacity: 0.4; }
  }

  @keyframes engPulse-mobile {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(0.95); opacity: 0.5; }
  }

  @keyframes engBlink-mobile {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
  }
}



/* ── 2. Header — mobile clean-up ────────────────────────────── */
@media screen and (max-width: 1024px) {
  .header-container {
    height: 64px !important;
    padding: 0 14px !important;
  }

  /* Full company name — allowed to wrap to 2 lines at small font size */
  .main-header .logo-title {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    max-width: 180px !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* Shrink header logo slightly by default and add transition */
  .main-header .logo-symbol img {
    height: 44px !important;
    transition: height 0.3s ease !important;
  }

  /* On scroll > 50px (extended scrolled class) */
  .main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  }
  .main-header.scrolled .logo-symbol img {
    height: 36px !important;
  }

  /* Fully hide mobile-toggle-btn and nav-menu — rely on atspl-hamburger */
  .mobile-toggle-btn,
  .nav-menu {
    display: none !important;
  }
}


/* ── 3. Stats Section ────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .stat-counter-num {
    font-size: 2.2rem !important;
  }
  .stat-counter-suffix {
    font-size: 1.6rem !important;
  }
  .stat-counter-icon {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    /* Subtle icon fade-in per item */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: inherit;
  }
  .stat-counter-item.visible .stat-counter-icon {
    opacity: 1;
    transform: scale(1);
  }
  .stat-counter-label {
    font-size: 0.78rem !important;
  }

  /* Stagger counter items */
  .stats-grid.stagger-children > *:nth-child(1) { transition-delay: 0.1s !important; }
  .stats-grid.stagger-children > *:nth-child(2) { transition-delay: 0.25s !important; }
  .stats-grid.stagger-children > *:nth-child(3) { transition-delay: 0.4s !important; }
  .stats-grid.stagger-children > *:nth-child(4) { transition-delay: 0.55s !important; }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    gap: 14px !important;
  }
  .stat-counter-num {
    font-size: 1.9rem !important;
  }
}


/* ── 4. Why Choose Us — override the inline style grid ──────── */
@media screen and (max-width: 1024px) {
  /* The .grid-3 inside .why-section has inline style="grid-template-columns: 1fr auto 1fr"
     which requires !important to override */
  .why-section .grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Show compact mobile version of .why-center-badge (with smooth rotation and no clipping) */
  .why-center-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 20px 0 !important;
    transform: scale(0.85) !important;
    padding: 0 !important;
    width: 200px !important;
    height: 200px !important;
    overflow: visible !important;
  }
  .why-center-badge .rotating-glow-ring {
    border-top-color: var(--red-primary) !important;
    border-right-color: var(--red-light) !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Disable card hover translate — janky on touch */
  .why-card {
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    padding: 24px !important;
  }
  .why-card:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
  }

  .why-feature-stack {
    gap: 14px !important;
    width: 100% !important;
  }
}


/* ── 5. CTA Banner ───────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .cta-banner {
    padding: 48px 20px !important;
  }
  .cta-banner-title {
    font-size: clamp(20px, 5.5vw, 30px) !important;
    margin-bottom: 10px !important;
  }
  .cta-banner-desc {
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }
  .cta-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-actions .btn,
  .cta-actions a {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}


/* ── 6. Inner-Page Hero (all sub-pages) ─────────────────────── */
@media screen and (max-width: 1024px) {
  .page-inner-hero {
    min-height: auto !important;
    padding: 32px 20px 40px !important; /* Header is sticky (not fixed), section starts below it — no large offset needed */
    background: linear-gradient(135deg, #0d1b2a 0%, #1a2a3a 100%) !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  /* Adding a subtle gradient mesh over the inner hero */
  .page-inner-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center 80%, rgba(230, 48, 34, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .inner-page-hero-content {
    padding: 0 !important;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .page-inner-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    text-align: center !important;
  }
  .page-inner-breadcrumb {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    opacity: 0.9 !important;
    display: inline-flex !important;
    background: rgba(255,255,255,0.05) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* ── 6b. Service Detail Hero (.inner-page-hero) ────────────── */
  .inner-page-hero {
    min-height: auto !important;
    height: auto !important;
    padding: 100px 20px 40px !important; /* Shortened padding */
    background: linear-gradient(135deg, #0a121e 0%, #16222f 100%) !important; /* Sleek dark background matching index */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  /* Adding a subtle gradient mesh over the inner hero */
  .inner-page-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center 80%, rgba(230, 48, 34, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  
  .inner-page-hero-content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important; /* Must be higher than ::after background grid to allow clicks */
    pointer-events: auto !important;
  }

  .inner-page-hero .hero-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    color: #ffffff !important;
  }

  .inner-page-hero .hero-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    opacity: 0.85 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    max-width: 480px !important; /* Keep it narrow and readable */
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Center the premium badge if it exists */
  .premium-badge-hvof, 
  .inner-page-hero [class*="premium-badge"] {
    align-self: center !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }

  /* Centering the CTA buttons */
  .inner-page-hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-top: 16px !important;
  }
  
  .inner-page-hero .hero-actions a {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Hide visual anchor images on mobile */
  .hvof-visual-anchor,
  .inner-page-hero .hvof-visual-anchor,
  .inner-page-hero [class*="visual-anchor"] {
    display: none !important;
  }
  
  .hvof-depth-layer {
    display: none !important;
  }

  /* Trust Tags Strip: Hidden on mobile — too cramped and clips off-screen */
  .inner-page-hero .hero-trust-strip {
    display: none !important;
  }
}


/* ── 7. Osmo Title & Industries Swiper ──────────────────────── */
@media screen and (max-width: 1024px) {
  .osmo-massive-title {
    font-size: clamp(20px, 5.5vw, 32px) !important;
    gap: 8px !important;
    padding: 0 16px !important;
    text-align: center !important;
  }
  .swiper-industries {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }
}


/* ── 8. Animation Reduction — Performance ───────────────────── */
@media screen and (max-width: 1024px) {
  /* Kill the infinite zoom on hero background image */
  .hero-bg-image {
    animation: none !important;
    transform: scale(1) !important;
  }

  /* Kill the 3D grid plane animation */
  .hero-grid-plane {
    animation: none !important;
  }

  /* Kill the grid drift overlay animation */
  .hero-section::before {
    animation: none !important;
  }

  /* Kill the rotating glow ring - Removed to restore active spin animation */

  /* Mobile-safe reveals */
  .fade-in-up,
  .stagger-children > * {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.5s !important;
    transition-timing-function: ease-out !important;
  }

  .fade-in-up.visible,
  .fade-in-up.animated-visible,
  .stagger-children.visible > *,
  .visible .stagger-children > *,
  .visible.stagger-children > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .stagger-children > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* Reduce all CSS transition durations globally, excluding animations and carousels */
  *:not(#atspl-sidebar):not(#atspl-overlay):not(.fade-in-up):not(.stagger-children):not(.stagger-children > *):not(.atspl-mc-slide):not(.atspl-mc-dot) {
    transition-duration: 0.18s !important;
  }
}


/* ── 9. Services Grid ────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* ── 10. Products Page ───────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .products-grid,
  .products-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-card {
    max-width: 100% !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  }

  /* Horizontal scroll-snap and peek overrides for 3D Carousel on mobile */
  .carousel-3d-container {
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 20px 0 !important;
  }
  .carousel-3d-slider {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    transform: none !important;
    animation: none !important;
  }
  .carousel-3d-slider::-webkit-scrollbar {
    display: none !important;
  }
  .carousel-3d-slider .item-3d {
    flex: 0 0 85% !important;
    width: 85% !important;
    scroll-snap-align: center !important;
    position: relative !important;
    transform: none !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  /* Mobile filter chips bar */
  .mobile-category-filter {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mobile-category-filter::-webkit-scrollbar {
    display: none !important;
  }
  .mobile-filter-chip {
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .mobile-filter-chip.active {
    background: #E68C3A !important;
    border-color: #E68C3A !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(230, 48, 34, 0.3) !important;
  }
}


/* ── 11. Contact / Enquiry Forms ─────────────────────────────── */
@media screen and (max-width: 1024px) {
  .contact-grid,
  .enquiry-grid,
  .form-grid-2,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .contact-form-wrapper,
  .enquiry-form-wrapper,
  .contact-form {
    padding: 24px 16px !important;
  }
  .form-group {
    margin-bottom: 16px !important;
  }
}


/* ── 12. Industries Visual Grid (industries.html) ────────────── */
@media screen and (max-width: 1024px) {
  .industries-visual-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .industry-detail-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── 13. About Page Layout ───────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .about-split-grid,
  .about-grid,
  .about-content-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-timeline-item {
    flex-direction: column !important;
    gap: 10px !important;
  }
}


/* ── 14. WhatsApp Float Button ───────────────────────────────── */
@media screen and (max-width: 1024px) {
  .whatsapp-float-btn {
    width: 52px !important;
    height: 52px !important;
    bottom: 18px !important;
    right: 14px !important;
    font-size: 26px !important;
    line-height: 52px !important;
  }
}


/* ── 15. Section containers — global padding ─────────────────── */
@media screen and (max-width: 480px) {
  .section-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── 16. Header Branding Narrow Screens ──────────────────────── */
@media screen and (max-width: 360px) {
  .main-header .logo-title {
    font-size: 8px !important;
    max-width: 105px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }
}

/* ── 17. Carousel Safe Area Padding ──────────────────────────── */
@media screen and (max-width: 1024px) {
  .swiper-industries {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 18. Footer Stacking & Alignment ─────────────────────────── */
@media screen and (max-width: 1024px) {
  .footer-grid {
    text-align: left !important;
    gap: 32px !important;
  }
  .footer-loc-col .footer-contact-item {
    justify-content: center !important;
    text-align: center !important;
  }
  .footer-nav-col ul li a {
    padding: 8px 0 !important;
    display: inline-block !important;
  }
}

/* ── 19. Contact Page Map ────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  body.contact-page .contact-map-section,
  .contact-map-section {
    display: none !important;
  }
}

/* ── 20. Service & About Page Localized Spacing ──────────────── */
@media screen and (max-width: 1024px) {
  .abo-manifesto-heading {
    word-wrap: break-word !important;
  }
  .detail-main .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .detail-main .gallery-grid .gallery-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    line-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .detail-main .gallery-grid .gallery-item > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .detail-main .gallery-grid .gallery-item:hover > img {
    transform: none !important;
  }
  /* Gallery wrapper card: remove ALL box/padding/margin so photos sit flush */
  .gallery-card-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Reduce the gap between stacked detail-cards on mobile to eliminate dead zones */
  .detail-main {
    gap: 16px !important;
  }
  .detail-card {
    margin-bottom: 0 !important;
    padding: 20px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  }
  .detail-card p {
    opacity: 0.7 !important;
  }
  .hero-cta-primary,
  .hero-cta-secondary {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
}

/* ── 21. LEVEL 2: Mobile Hero Spacing & Typography ───────────── */
@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  .hero-description {
    opacity: 0.8 !important;
    font-size: 1.05rem !important;
    margin-bottom: 32px !important;
  }
  .inner-page-hero-content {
    padding-bottom: 32px !important;
  }
}

/* ── 22. LEVEL 2: Mobile Product Pages ───────────────────────── */
@media screen and (max-width: 1024px) {
  .product-card {
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    padding: 24px !important;
  }
  .product-title {
    font-size: 1.5rem !important;
  }
  .product-description {
    opacity: 0.7 !important;
  }
}

/* ── 23. LEVEL 2: Mobile About Page Flow ─────────────────────── */
@media screen and (max-width: 1024px) {
  .abo-quote-block {
    padding: 32px 24px !important;
    border-left-width: 3px !important;
    margin: 32px 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
  }
  .abo-manifesto {
    padding: 48px 0 !important;
  }
}

/* ── 24. LEVEL 2: Contact Page Map Replacement CTA ───────────── */
@media screen and (max-width: 1024px) {
  .contact-map-section {
    display: none !important;
  }
  /* Show Google Maps button specifically for mobile */
  .mobile-maps-cta {
    display: flex !important;
    margin-top: 32px !important;
  }
}
@media screen and (min-width: 1025px) {
  .mobile-maps-cta {
    display: none !important;
  }
}

/* ── 25. BUG FIXES: Footer BG & Product Modal Close ──────────── */
@media screen and (max-width: 1024px) {
  /* Restore footer dark background that was overridden by light theme */
  .main-footer {
    background-color: #0a1520 !important;
  }
  .main-footer .footer-heading {
    color: #ffffff !important;
  }
  .main-footer .footer-about-text,
  .main-footer .footer-contact-item,
  .main-footer .footer-contact-item a,
  .main-footer .footer-contact-item span,
  .main-footer .footer-bottom p {
    color: rgba(255, 255, 255, 0.75) !important;
  }
  .main-footer .footer-contact-item i {
    color: #E68C3A !important; /* Proper orange/red brand color for icons */
  }
  
  /* Lock the Product modal close button to the viewport so it never scrolls out of view */
  .modal-close-btn {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0a1520 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
  }
}

/* ── 26. PREMIUM MOBILE FOOTER REDESIGN (UI/UX) ──────────── */
@media screen and (max-width: 1024px) {
  /* Prevent clash with floating whatsapp button and fix footer touching */
  .main-footer {
    padding-bottom: 0 !important;
    margin-top: 0 !important; /* Eliminate white gap between sections on mobile */
  }
  .footer-top {
    padding-top: 40px !important; /* Better top space for logo */
    padding-bottom: 30px !important; /* Proper bottom padding */
  }
  .footer-bottom {
    padding-top: 30px !important;
    padding-bottom: 95px !important; /* Safety margin for WhatsApp button */
    margin-top: 0 !important; /* Let contact list card margin handle spacing */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  /* Center footer brand column and location column elements */
  footer .footer-brand-col,
  .main-footer .footer-brand-col,
  footer .footer-loc-col,
  .main-footer .footer-loc-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .main-footer .footer-loc-col .footer-heading {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Centered about text on mobile */
  .main-footer .footer-about-text {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 16px !important;
    margin-bottom: 32px !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Accordion modernization */
  .footer-nav-col .footer-heading {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .footer-nav-col.open {
    background: rgba(255, 255, 255, 0.01) !important;
    border-radius: 8px;
    padding: 0 12px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
  .footer-nav-col.open .footer-heading {
    border-bottom-color: transparent !important;
  }

  /* Center contact section column using specific selectors */
  footer .footer-loc-col,
  .main-footer .footer-loc-col {
    margin-top: 32px !important; /* Clear gap separating navigation from Contact Us section */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-loc-col .footer-heading {
    display: block !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }
  .footer-loc-col .footer-contact-list {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    margin-top: 12px !important;
    margin-bottom: 32px !important; /* Solid bottom gap above copyright bar */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .footer-loc-col .footer-contact-item {
    display: flex !important;
    flex-direction: column !important; /* Stack icon above text on mobile */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .footer-loc-col .footer-contact-item:last-child {
    margin-bottom: 0 !important;
  }
  .footer-loc-col .footer-contact-item i {
    background: rgba(230, 48, 34, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    margin-top: 0 !important;
  }
}

/* ── 27. PREMIUM MOBILE HERO (UI/UX) Consolidated into Section 1 ── */

/* ── 16. Footer Contact Items — centered column layout on mobile ─────────── */
@media screen and (max-width: 1024px) {
  .footer-contact-item,
  .footer-loc-col .footer-contact-item {
    display: flex !important;
    flex-direction: column !important; /* Stack icon above text */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .footer-contact-item i {
    flex-shrink: 0 !important;
    background: rgba(230, 48, 34, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    margin-top: 0 !important;
    color: #E68C3A !important; /* Proper orange/red brand color */
  }
  .footer-contact-item span,
  .footer-contact-item a,
  .footer-loc-col .footer-contact-item span,
  .footer-loc-col .footer-contact-item a {
    text-align: center !important;
    flex: none !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    width: 100% !important;
    display: block !important;
  }
  .footer-contact-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
}

/* ── 17. Footer nav — columns side by side on mobile ─────────── */
@media screen and (max-width: 1024px) {
  /* Allow nav and key-industries columns to sit 2-up */
  .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .footer-nav-col {
    width: 100% !important;
  }
  /* Keep the brand col and loc col full width */
  .footer-brand-col {
    width: 100% !important;
  }
  .footer-loc-col {
    width: 100% !important;
  }
}

/* ── 18. Sidebar — group items: link navigates, chevron toggles ── */
@media screen and (max-width: 1024px) {
  .atspl-nav-group-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  .atspl-nav-group-link {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 0 14px 24px !important;
    color: #cdd9e5 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    transition: background 0.18s, color 0.18s, border-left-color 0.18s !important;
  }
  .atspl-nav-group-link:hover,
  .atspl-nav-group-link.active-page {
    background: rgba(230,48,34,0.08) !important;
    color: #fff !important;
    border-left-color: #E68C3A !important;
  }
  .atspl-nav-chevron-btn {
    background: none !important;
    border: none !important;
    color: #cdd9e5 !important;
    padding: 13px 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.18s !important;
    border-left: 1px solid rgba(255,255,255,0.07) !important;
  }
  .atspl-nav-chevron-btn:hover { color: #fff !important; }
  .atspl-nav-chevron-btn svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.25s ease !important;
  }
  .atspl-nav-chevron-btn.open svg {
    transform: rotate(180deg) !important;
  }
  /* Remove the old single-button toggle style when using new layout */
  .atspl-nav-group-row ~ .atspl-submenu {
    border-left: 3px solid transparent !important;
  }
}

/* ── LEVEL 3: PREMIUM UI/UX & AUDIT UPGRADES (max-width: 1024px) ── */
@media screen and (max-width: 1024px) {
  /* 1. Translucent Glassmorphism Overhaul (Dark Pages) */
  .product-card, 
  .premium-product-card {
    background: rgba(10, 21, 32, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  /* 2. Glassmorphic Cards on Light Backgrounds (Why Choose Us, Contact Info, VM Cards) */
  .why-card, 
  .contact-info-card, 
  .contact-form-panel,
  .abo-vm-card {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.04) !important;
    border-radius: 16px !important;
    transition: background-color 0.25s, box-shadow 0.25s !important;
  }

  /* About VM Card mobile padding fix */
  .abo-vm-card {
    padding: 30px 24px !important;
    margin-bottom: 20px !important;
  }
  .abo-vm-card-text {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
  }

  /* 3. Stat Counter Item Upgrades */
  .stat-counter-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
  }
  .stat-counter-item::after {
    display: none !important;
  }

  /* 4. Contact Form Input Glows & Spacing */
  .form-group input, 
  .form-group select, 
  .form-group textarea {
    border-radius: 10px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    min-height: 48px !important;
    font-size: 15px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  }
  .form-group textarea {
    min-height: 120px !important;
  }
  .form-group input:focus, 
  .form-group select:focus, 
  .form-group textarea:focus {
    border-color: #E68C3A !important;
    box-shadow: 0 0 0 3px rgba(230, 48, 34, 0.15) !important;
    background-color: #ffffff !important;
  }

  /* 5. Mobile Image Overlay Softening */
  .industry-swiper-overlay {
    background: linear-gradient(to top, rgba(10, 21, 32, 0.85) 0%, rgba(10, 21, 32, 0.3) 100%) !important;
  }

  /* 6. Interaction Optimization: Kill Hover transforms, enable Active Tap scaling */
  .why-card:hover,
  .product-card:hover,
  .detail-card:hover,
  .premium-product-card:hover,
  .contact-info-card:hover,
  .stat-counter-item:hover,
  .abo-vm-card:hover {
    transform: none !important;
  }
  
  .btn:active,
  .cta-button:active,
  .hero-cta-primary:active,
  .hero-cta-secondary:active,
  .atspl-cta-btn:active,
  .contact-submit-btn:active,
  .why-card:active,
  .product-card:active,
  .detail-card:active,
  .premium-product-card:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
    transition: transform 0.1s ease !important;
  }

  /* 7. Tap Target Spacing Improvements */
  .page-inner-breadcrumb a,
  .page-inner-breadcrumb span {
    padding: 6px 10px !important;
    display: inline-block !important;
  }

  /* 9. Clean Detail Card Upgrades (No Fancy Box Look) */
  .detail-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(33, 62, 96, 0.08) !important; /* Subtle dark border instead of white */
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .detail-card:last-of-type {
    border-bottom: none !important;
  }
  .detail-card-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important; /* High contrast dark slate */
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .detail-card-title i {
    color: #E68C3A !important;
    font-size: 1.1rem !important;
  }
  .detail-card p {
    color: #475569 !important; /* High contrast readable body text */
    line-height: 1.7 !important;
    font-size: 14px !important;
  }
  
  /* Style the list elements beautifully */
  .components-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  .component-item {
    background: rgba(255, 255, 255, 0.6) !important; /* Light translucent card on white background */
    border: 1px solid rgba(33, 62, 96, 0.08) !important; /* Subtle dark border */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important; /* High contrast dark slate text */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 2px 8px rgba(33, 62, 96, 0.03) !important; /* Modern soft shadow */
  }
  .component-item i {
    color: #E68C3A !important;
    font-size: 12px !important;
  }

  /* 10. Process Badges Visibility Fix (No Blank White Pills) */
  .process-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  .process-badge {
    background: rgba(230, 48, 34, 0.08) !important;
    border: 1px solid rgba(230, 48, 34, 0.25) !important;
    color: #E68C3A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
  }

  /* 11. Homepage Hero Layout Spacing & Spacing Vignette */
  .hero-carousel-pin-wrapper > .premium-hero-section {
    min-height: auto !important;
    padding: 0 !important;
  }
  .hero-content {
    min-height: auto !important;
    padding: 80px 20px 40px !important;
  }
  .premium-hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 5% !important;
    left: -15% !important;
    width: 70% !important;
    height: 70% !important;
    background: radial-gradient(circle, rgba(230, 48, 34, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .premium-hero-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 5% !important;
    right: -15% !important;
    width: 70% !important;
    height: 70% !important;
    background: radial-gradient(circle, rgba(33, 62, 96, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Clean up integrated brand logo in footer */
  .main-footer .footer-logo {
    margin-top: 30px !important; /* Create gap between top golden line and logo box */
    margin-bottom: 20px !important;
  }
  .main-footer .footer-logo img {
    background: #ffffff !important;
    padding: 6px !important; /* Slightly smaller padding */
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    max-width: 90px !important;
    width: 90px !important;
    height: auto !important;
    margin: 0 auto !important; /* Centered for proper mobile flow */
    display: block !important;
  }

  /* Deep Brand sidebar CTA card */
  .sidebar-cta-card {
    background: linear-gradient(135deg, rgba(230, 48, 34, 0.1) 0%, rgba(10, 21, 32, 0.9) 100%) !important;
    border: 1px solid rgba(230, 48, 34, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    text-align: center !important;
  }
  .sidebar-cta-icon {
    background: rgba(230, 48, 34, 0.1) !important;
    color: #E68C3A !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px !important;
  }
}

/* ── 28. FLUID SPACING & WHITESPACE (UI/UX Polish) ──────────── */
@media screen and (max-width: 1024px) {
  :root {
    --space-section: clamp(60px, 9vw, 90px) !important;
    --space-card: clamp(24px, 5vw, 36px) !important;
  }
}


/* ── 29. SERVICE PAGE HERO: Button & Layout Fixes ───────────── */
@media screen and (max-width: 1024px) {

  /* Fix "All Services" button — text was dark/invisible on dark hero bg */
  .inner-page-hero .hvof-btn-secondary,
  .inner-page-hero .btn-secondary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .inner-page-hero .hvof-btn-secondary:hover,
  .inner-page-hero .btn-secondary:hover {
    border-color: #E68C3A !important;
    color: #ffffff !important;
  }

  /* Ensure hero-actions stacks neatly and buttons are full-width */
  .inner-page-hero .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 16px auto 0 !important;
  }

  .inner-page-hero .hero-actions a {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }
}