/* MAGS web refinement v01. The supplied navy/green identity sits in the existing film-led site. */
:root {
  --mags-navy: #232c4a;
  --mags-green: #14956f;
  --mt-color-accent: #35c598;
  --mt-color-action: #12664d;
}
.site-header .brand-link img { width: 152px; height: auto; }
.site-footer .footer-brand { margin-left: 0; }
.site-footer .footer-brand img { width: 230px; height: auto; }
.v5-hero .hero-copy h1 { width: min(420px, 100%); max-width: 100%; line-height: 1; }
.mags-hero-logo { display: block; width: 100%; height: auto; }
.cobrand-panel img[src*="MAGS_Logo"] { width: min(260px, 42%); height: auto; }
.brand-link:focus-visible { outline: 2px solid var(--mt-color-focus); outline-offset: 6px; }
.button-primary:hover { background: #0e503c; border-color: #0e503c; }
.catalog-filters button[aria-pressed="true"] { background: var(--mt-color-action); border-color: var(--mt-color-action); }
.hotspot-point:hover:not([aria-pressed="true"]) { background: var(--mt-color-action); }
/* Opening/closing brand cards already contain their own clear text. */
.v5-hero:after { transition: opacity .25s ease; }
.v5-hero.overlay-off:after { opacity: 0; }
.v5-hero.overlay-off:has(.hero-copy:focus-within):after { opacity: 1; }
/* Keep the compact hero composition; longer service and product information is read from the left. */
@media(max-width:767px) {
  .site-header .brand-link img { width: 142px; }
  .v5-hero .hero-copy h1 { width: min(300px, 88%); margin-inline: auto; }
  body .service-detail-copy :is(h3,p),
  body .service-checklist :is(p,li),
  body .service-process li,
  body .catalog-detail-intro p:not(.eyebrow),
  body .contact-layout :is(p,h2,h3),
  body .contact-layout .text-link { text-align: left; }
  body .service-checklist ul { padding-left: 1.2em; list-style-position: outside; }
  body .service-detail-copy p,
  body .service-checklist p,
  body .contact-layout p { margin-inline: 0; }
}