/*
 * ClutchHub v148 brand system
 * Shared by the desktop/mobile header and the site footer.
 */
.brand {
  --ch-logo-mark: url("/assets/brand/clutchhub-logo-mark-v148.webp");
}

.brand .brand-mark,
.header-inner > .brand .brand-mark,
.site-header .brand-mark,
.site-footer .brand-mark {
  color: transparent !important;
  background: var(--ch-logo-mark) center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  filter: drop-shadow(0 6px 9px rgba(240, 68, 11, 0.2)) !important;
  overflow: visible !important;
}

.brand .brand-mark > span,
.header-inner > .brand .brand-mark > span,
.site-header .brand-mark > span,
.site-footer .brand-mark > span {
  opacity: 0 !important;
}

.brand .brand-name {
  color: #142238 !important;
  letter-spacing: -0.045em !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

.brand .brand-name > span {
  color: #f05218 !important;
}

@media (min-width: 1024px) {
  .header-inner > .brand .brand-mark {
    width: 56px !important;
    height: 62px !important;
    flex: 0 0 56px !important;
  }
}

.site-footer .brand {
  align-items: center;
  gap: 9px;
}

.site-footer .brand-mark {
  width: 38px !important;
  height: 45px !important;
  flex: 0 0 38px !important;
}

.site-footer .brand-name {
  font-size: 19px !important;
}

@media (max-width: 1023px) {
  .site-header .brand-mark {
    width: 43px !important;
    height: 49px !important;
    flex: 0 0 43px !important;
  }

  .site-footer .brand-mark {
    width: 34px !important;
    height: 40px !important;
    flex-basis: 34px !important;
  }
}