/* =====================================================
   TABLET
   900px AND BELOW
===================================================== */

@media (max-width: 900px) {

  .desktop-nav,
  .desktop-whatsapp {
    display: none;
  }


  .menu-btn {
    display: flex;
  }


  /* =====================================================
     MOBILE / TABLET OPEN MENU
  ====================================================== */

  .desktop-nav.mobile-nav-open {
    display: flex;

    position: absolute;

    top: 82px;
    left: 0;
    right: 0;

    z-index: 999;

    flex-direction: column;

    align-items: center;

    gap: 0;

    padding:
      18px var(--page-padding) 24px;

    background: #040315;

    border-bottom:
      1px solid rgba(253, 249, 250, 0.08);
  }


  /* Normal responsive menu links */

  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn) {
    width: auto;

    min-width: 190px;

    text-align: center;

    padding:
      15px 0;

    border: none;

    color:
      rgba(253, 249, 250, 0.78);

    font-size: 15px;

    font-weight: 500;

    transition:
      color 0.25s ease,
      transform 0.25s ease;
  }


  /* Hover / focus / tap interaction */

  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn):hover,
  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn):focus-visible {
    color: #ecf401;

    transform:
      translateY(-2px);
  }


  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn):focus-visible {
    outline: none;
  }


  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn):active {
    color: #ecf401;

    transform:
      translateY(-1px);
  }


  /* Remove Contact link on tablet/mobile */

  .desktop-nav.mobile-nav-open .desktop-contact-link {
    display: none;
  }


  /* =====================================================
     GET IN TOUCH BUTTON
  ====================================================== */

  .desktop-nav.mobile-nav-open .mobile-contact-btn {
    display: flex;

    width: auto;

    min-width: 190px;

    min-height: 50px;

    margin:
      18px auto 0;

    padding:
      0 28px;

    align-self: center;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border:
      1px solid rgba(236, 244, 1, 0.26);

    border-radius: 999px;

    background: #ecf401;

    color: #040315;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.03em;

    text-align: center;

    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.18);

    transition:
      background 0.25s ease,
      color 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn span {
    font-size: 18px;

    transition:
      transform 0.25s ease;
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn:hover,
  .desktop-nav.mobile-nav-open .mobile-contact-btn:focus-visible {
    background: #fdf9fa;

    color: #040315;

    transform:
      translateY(-3px);

    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.22);
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn:hover span,
  .desktop-nav.mobile-nav-open .mobile-contact-btn:focus-visible span {
    transform:
      translateX(4px);
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn:focus-visible {
    outline: none;
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn:active {
    transform:
      translateY(-1px) scale(0.98);
  }


  /* HERO */

  .hero {
    grid-template-columns: 1fr;

    padding-top: 70px;
  }


  .hero-visual {
    height: 470px;
  }


  /* MOVING TICKER - SLOWER ON TABLET */

  .ticker-track {
    animation-duration: 42s;
  }


  /* SERVICES */

  .services-grid {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 18px;
  }


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

}



/* =====================================================
   MOBILE
   600px AND BELOW
===================================================== */

@media (max-width: 600px) {

  :root {
    --page-padding: 18px;
  }


  /* =====================================================
     HEADER
  ====================================================== */

  .site-header {
    height: 70px;
  }


  .brand {
    width: 170px;

    height: 64px;
  }


  .brand img {
    width: 155px;

    height: auto;

    max-width: 100%;

    object-fit: contain;

    transform: none;
  }


  /* =====================================================
     MOBILE MENU
  ====================================================== */

  .desktop-nav.mobile-nav-open {
    top: 70px;

    padding:
      16px 18px 22px;
  }


  .desktop-nav.mobile-nav-open>a:not(.mobile-contact-btn) {
    padding:
      14px 0;

    font-size: 15px;
  }


  .desktop-nav.mobile-nav-open .mobile-contact-btn {
    width: auto;

    min-width: 180px;

    min-height: 48px;

    margin:
      16px auto 0;

    padding:
      0 24px;

    align-self: center;

    font-size: 14px;
  }


  /* =====================================================
     HERO
  ====================================================== */

  .hero {
    padding-top: 55px;

    min-height: auto;
  }


  .hero h1 {
    font-size: 47px;
  }


  .hero-lead {
    font-size: 13px;
  }


  .hero-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .btn {
    text-align: center;
  }


  .hero-visual {
    height: 410px;

    margin-top: 15px;
  }


  /* =====================================================
     HERO ORBITS
  ====================================================== */

  .orbit-one {
    width: 280px;

    height: 280px;
  }


  .orbit-two {
    width: 360px;

    height: 180px;
  }


  .orbit-three {
    width: 230px;

    height: 360px;
  }


  .core {
    width: 145px;

    height: 145px;
  }


  .core img {
    width: 95px;
  }


  /* =====================================================
     HERO FLOATING SERVICES
  ====================================================== */

  .service-dot {
    font-size: 8px;

    padding:
      6px 8px;
  }


  .service-dot i {
    font-size: 10px;
  }


  .dot-1 {
    top: 4%;

    left: 0;
  }


  .dot-2 {
    top: 12%;

    right: 0;
  }


  .dot-3 {
    top: 39%;

    right: -5%;
  }


  .dot-4 {
    bottom: 17%;

    right: 0;
  }


  .dot-5 {
    bottom: 1%;

    left: 12%;
  }


  .dot-6 {
    bottom: 24%;

    left: -5%;
  }


  .dot-7 {
    top: 60%;

    left: -3%;
  }


  .dot-8 {
    top: 0;

    left: 35%;
  }


  .dot-9 {
    top: 48%;

    left: 7%;
  }


  /* =====================================================
     MOVING TICKER
  ====================================================== */

  .ticker-track {
    animation-duration: 55s;
  }


  /* =====================================================
     SERVICES
  ====================================================== */

  .services-section {
    padding-top: 80px;

    padding-bottom: 80px;
  }


  .services-section .section-head {
    margin-bottom: 45px;
  }


  .services-section .section-head h2 {
    font-size: 42px;

    line-height: 1.02;
  }


  .services-section .section-lead {
    font-size: 14px;
  }


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


  .service-card {
    min-height: 260px;

    padding: 28px;
  }

}



/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation: none !important;

    transition: none !important;
  }


  .pointer-glow {
    display: none;
  }

}
/* =====================================================
   MOBILE / TABLET MENU — FORCE CENTERED ALIGNMENT
   Keeps all responsive navigation items centered with
   the CONTACT US button.
===================================================== */

@media (max-width: 900px) {

  .desktop-nav.mobile-nav-open {
    align-items: center !important;
  }

  .desktop-nav.mobile-nav-open > a:not(.mobile-contact-btn) {
    display: block;

    width: 190px !important;
    min-width: 190px;

    margin-left: auto;
    margin-right: auto;

    text-align: center !important;
  }

  .desktop-nav.mobile-nav-open .mobile-contact-btn {
    margin-left: auto;
    margin-right: auto;

    align-self: center;
  }
}

@media (max-width: 600px) {

  .desktop-nav.mobile-nav-open > a:not(.mobile-contact-btn) {
    width: 180px !important;
    min-width: 180px;
  }
}


/* =====================================================
   RESPONSIVE MENU — REMOVE DUPLICATE CONTACT LINK
===================================================== */
@media (max-width: 900px) {
  .desktop-nav.mobile-nav-open .desktop-contact-link {
    display: none !important;
  }
}


/* =====================================================
   RESPONSIVE NAV — CENTER LINKS + KEEP ONE CONTACT BUTTON
===================================================== */
@media (max-width: 900px) {
  .desktop-nav.mobile-nav-open {
    align-items: center;
    text-align: center;
  }

  .desktop-nav.mobile-nav-open > a:not(.mobile-contact-btn) {
    width: auto;
    text-align: center;
  }

  .desktop-nav.mobile-nav-open .desktop-contact-link {
    display: none !important;
  }
}