/* Distributor lockup.

   The trade side has its own mark: the Mvi monogram over a ruled DISTRIBUTOR
   wordmark, supplied as finished artwork. It replaces both the shop's square
   mark and the typed "Mecivi / Distributor Portal" subtitle that used to sit
   beside it, so the header carries one piece of brand instead of two.

   The mark itself is Mecivi's real one, downscaled from the 1024px master.
   Only the rule and the wordmark come from the supplied reference, repainted
   in the mark's own palette so the three parts read as one logo.

   Sizing is matched to the shop, by ink rather than by box. mecivi.com's mark
   sits in a 64px box (50px under 900px wide) but the artwork inside that PNG
   only fills 62.5% of its width and 40% of its height, so the M actually
   renders 40x25.5. This lockup is trimmed to its content, so an equal box
   would have looked half again as large — and did, until it was measured.
   65x38 here puts the monogram at the same visible size as the shop's; 50x30
   matches the shop's 50px step at the same 900px breakpoint.

   The cost is the wordmark: at this scale DISTRIBUTOR is about 3px tall and
   reads as a textured band rather than as letters. That is the deliberate
   trade for matching the shop, not an oversight. If it should be legible, the
   lockup needs roughly 74px of width and will then sit slightly larger than
   the shop's mark. */

   Nothing here sets `display`. The light/dark swap belongs to main.css
   (.logo-img.logo-light / .logo-img.logo-dark) and setting display here at
   equal specificity would win on load order and show both variants at once. */

.dp-brand {
  display: inline-flex; align-items: center;
  text-decoration: none; margin-right: 4px;
}
.dp-brand .logo-img {
  width: 65px; height: 38px;
  object-fit: contain;
  transition: transform .2s;
}
.dp-brand:hover .logo-img { transform: translateY(-1px) scale(1.02); }

/* Match the shop's own 900px step down to a 50px mark. */
@media (max-width: 900px) {
  .dp-brand .logo-img { width: 50px; height: 30px; }
}