/* Approved eCOLOR Design artwork. Add after the existing site styles.
   The original 1536 x 512 JPEG is unchanged. This 5.3:1 display window
   removes only surplus white space above/below the artwork (source rows
   111.1–400.9); the full mark/slogan/brush lettering at y137–381 remain.
   Existing nav type, CTA, hero, forms and SEO rules are not replaced. */
.header .logo.logo--design,
.footer .footer-brand .logo.logo--design {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 360px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 5.3 / 1;
  padding: 0;
  overflow: hidden;
}
.header .logo.logo--design > img,
.footer .footer-brand .logo.logo--design > img {
  position: absolute;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: center;
}
.footer .footer-brand .logo.logo--design {
  width: 280px;
}
/* Keep the live +3px navigation clear at compact desktop widths. */
@media (min-width: 901px) and (max-width: 1150px) {
  .header .logo.logo--design { width: clamp(248px, 27vw, 310px); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .header .logo.logo--design { width: min(52%, 360px); }
}
/* Phone: exactly 60% of the existing padded header's usable width.
   The existing 44px menu button and its spacing remain untouched. */
@media (max-width: 600px) {
  .header .logo.logo--design { width: 60%; }
  .footer .footer-brand .logo.logo--design { width: min(280px, 100%); }
}