/* MOBILE ONLY: Simple centering for hero logo - MUST BE LOADED LAST */
@media (max-width: 767px) {
  /* Center the content stack properly */
  .hero .hero__content {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 20px !important;
  }
  
  /* Make the overlay logo a normal centered block element above headings */
  .hero .hero-logo-overlay {
    position: static !important;
    display: block !important;
    margin: 0 auto 20px auto !important; /* centered with space below */
    width: clamp(140px, 36vw, 200px) !important;
    height: auto !important;
    animation: none !important;      /* disable breathe animation that breaks centering */
    transform: translateX(5px) !important;  /* nudge 5px right for visual centering */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  
  /* Ensure heading and text stay centered */
  .hero h1, .hero p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}