/* Custom fixes to prevent header logo from enlarging on scroll (mobile)
   Loaded after main style.css so it can safely override site rules.
*/

/* Base override: prevent any transform/scale on header logos */
.brand-logo img,
.m-brand-logo img,
.mobile_logo img {
  -webkit-transform: none !important;
  transform: none !important;
  transition: none !important;
  max-width: 120px !important; /* sensible cap for most mobile devices */
  width: auto !important;
  height: auto !important;
}

/* Tighter cap for small phones */
@media (max-width: 480px) {
  .brand-logo img,
  .m-brand-logo img,
  .mobile_logo img {
    max-width: 90px !important;
  }
}

/* Ensure sticky state doesn't increase logo size */
.bi-header-section.sticky-on .brand-logo img,
.bi-header-section.sticky-on .m-brand-logo img {
  max-width: 120px !important;
}

/* In case JS toggles classes on the image directly */
.brand-logo img[style],
.m-brand-logo img[style] {
  max-width: 120px !important;
  width: auto !important;
}