/* =========================================================
   MOBILE — max-width: 640px / 560px
   Loaded last so it wins ties in the cascade over styles.css
   and tablet.css.
========================================================= */

@media (max-width: 640px){
  :root{ --header-h: 64px; --footer-h: 48px; }
}

@media (max-width:640px){
  .hero-arrows{ display:none; }
}

@media (max-width:640px){
  .hero-slide h1{ max-width:100%; }
  .about-mark{ max-width:260px; margin:0 auto; }
}

/* Hero slide dots: full-width bar, each dot sized by percentage,
   the active dot wider than the others. */
@media (max-width:640px){
  .hero-dots{
    width:100%;
    gap:0;
    justify-content:space-between;
  }
  .hero-dots button{
    flex:0 0 18%;
    width:18%;
  }
  .hero-dots button.active{
    flex:0 0 28%;
    width:28%;
  }
}

@media (max-width:560px){
  .site-footer{ font-size:12px; }
}

@media (max-width:560px){
  .service-grid{ grid-template-columns:1fr; }
}

/* Keep both partner cards on one row on narrow phones instead of wrapping. */
@media (max-width:480px){
  .partner-list .partner{ flex-basis:140px; height:64px; padding:10px 16px; }
}