/* Fixed lettering and a compact, independently animated head. */
.vjuh-logo, .brand > .vjuh-logo, .agency-brand > .vjuh-logo, .mini-brand > .vjuh-logo {
  box-sizing: border-box; display: inline-flex; align-items: center; flex: 0 0 auto;
  width: 176px; height: 50px; padding: 0; border: 0; border-radius: 0;
  background: transparent; vertical-align: middle;
}
.vjuh-logo img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; margin: 0; border: 0; }
.vjuh-logo--live { gap: 8px; }
.vjuh-logo-mark { position: relative; display: block; flex: 0 0 50px; width: 50px; height: 50px; overflow: hidden; }
.vjuh-logo-mark canvas, .vjuh-logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vjuh-logo-mark canvas { opacity: 0; }
.vjuh-logo-mark[data-ready="true"] canvas { opacity: 1; }
.vjuh-logo-mark[data-ready="true"] img { visibility: hidden; }
.vjuh-logo-mark[data-static="true"] img { visibility: visible; }
.vjuh-logo-mark[data-static="true"] canvas { opacity: 0; }
.vjuh-logo .vjuh-logo-word { width: 114px; height: 36px; flex: 0 0 auto; }
.vjuh-loading-mark { display: block; width: 72px; height: 72px; margin: 0 auto 18px; }
@media (max-width: 430px) {
  .vjuh-logo, .brand > .vjuh-logo, .agency-brand > .vjuh-logo, .mini-brand > .vjuh-logo { width: 148px; height: 44px; }
  .vjuh-logo-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .vjuh-logo--live { gap: 6px; }
  .vjuh-logo .vjuh-logo-word { width: 98px; height: 32px; }
}