/* ATLTECHSPOT universal mobile hamburger centering override.
   Loaded after the existing header styles so no original CSS is replaced. */
@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
  }

  .mobile-menu-toggle .ats-menu-label {
    display: none !important;
  }

  .mobile-menu-toggle .menu-icon {
    width: 22px !important;
    height: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-menu-toggle .menu-icon span {
    display: block !important;
    flex: 0 0 2px !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  .mobile-nav-panel.open {
    max-height: min(620px, calc(100dvh - 120px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .mobile-nav-inner {
    padding: 10px 0 12px !important;
    gap: 4px !important;
  }

  .mobile-nav-inner a {
    min-height: 40px !important;
  }

  .mobile-nav-inner .mobile-call-link {
    margin-top: 3px !important;
  }
}

/* Match the shared service-page menu on compact phone screens. */
@media (max-width: 900px) and (max-height: 600px) {
  .mobile-nav-panel.open {
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    scrollbar-color: rgba(24, 228, 208, 0.7) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
  }

  .mobile-nav-inner {
    padding: 8px 0 10px !important;
    gap: 2px !important;
  }

  .mobile-nav-inner a {
    min-height: 37px !important;
  }

  .mobile-nav-inner .mobile-call-link {
    margin-top: 1px !important;
  }
}

/* Keep the simplified homepage hero compact on phones. */
@media (max-width: 620px) {
  .hero .hero-inner {
    padding-top: 48px;
    padding-bottom: 42px;
  }

  .hero .hero-visual,
  .hero .visual-placeholder {
    min-height: 220px;
  }

  .hero .visual-placeholder {
    padding: 0;
  }

  .hero .logo-motion {
    width: min(210px, 64%);
  }
}

/* Balance the shortened homepage grids after removing repeated cards. */
@media (min-width: 901px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card-console {
    grid-column: span 1;
  }

  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}