/* ODAYLABS traced assets from the brand board. Keep each SVG's own viewBox
   and aspect ratio; only the containing lockup scales between UI slots. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.brand-lockup__emblem {
  display: block;
  height: 42px;
  width: auto;
  flex: none;
}

.brand-lockup__divider {
  display: block;
  width: 1px;
  height: 42px;
  flex: none;
  background: rgba(245, 245, 245, 0.28);
}

.brand-lockup__type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.brand-lockup__wordmark {
  display: block;
  height: 14px;
  width: auto;
  max-width: none;
}

.brand-lockup--compact {
  gap: 9px;
}

.brand-lockup--compact .brand-lockup__emblem,
.brand-lockup--compact .brand-lockup__divider {
  height: 34px;
}

.brand-lockup--compact .brand-lockup__wordmark {
  height: 11px;
}

.brand-lockup__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .brand-lockup__emblem,
  .brand-lockup__divider { height: 32px; }
  .brand-lockup__wordmark { height: 9px; }
  .brand-lockup { gap: 8px; }
}

@media (max-width: 380px) {
  .brand-lockup__emblem,
  .brand-lockup__divider { height: 28px; }
  .brand-lockup__wordmark { height: 8px; }
  .brand-lockup { gap: 6px; }
}