.branding {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: white;
  gap: 0.4em;
  line-height: 1;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.logo {
  height: 2em;        /* ← directly set the visual size, no transform tricks */
   width: 4em;    
  
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  /* NO transform, NO margin hacks */
}

.title {
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Small screens (mobile) */
@media (max-width: 768px) {
  .branding {
    font-size: 12px;
  }
}

/* Medium screens (tablet/laptop) */
@media (min-width: 769px) and (max-width: 1200px) {
  .branding {
    font-size: 13px;
  }
}

/* Large screens (desktop) */
@media (min-width: 1201px) and (max-width: 1600px) {
  .branding {
    font-size: 13.5px;
  }
}

/* Extra large screens */
@media (min-width: 1920px) {
  .branding {
    font-size: 20px;
  }
}