/* ClutchHub v198 — unified upper/lower navigation identity */
:root {
  --clutchhub-logo-v198: url("/assets/brand/clutchhub-logo-mark-v2.png");
  --clutchhub-ink: #0b1830;
  --clutchhub-orange: #ff5218;
}

.brand,
.site-header .brand,
.site-footer .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
  text-decoration: none !important;
}

.brand .brand-mark,
.header-inner > .brand .brand-mark,
.site-header .brand-mark,
.site-footer .brand-mark {
  position: relative;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  color: transparent !important;
  background: var(--clutchhub-logo-v198) center / contain no-repeat !important;
  filter: drop-shadow(0 5px 7px rgba(11, 24, 48, 0.16)) !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,
.header-inner > .brand .brand-name,
.site-header .brand-name,
.site-footer .brand-name {
  position: relative;
  display: inline-flex !important;
  align-items: baseline;
  color: var(--clutchhub-ink) !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-size: 27px !important;
  font-style: italic !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap;
  text-shadow: 0 1px 0 #fff;
}

.brand .brand-name > span,
.header-inner > .brand .brand-name > span,
.site-header .brand-name > span,
.site-footer .brand-name > span {
  color: var(--clutchhub-orange) !important;
}

.site-header .brand-name::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--clutchhub-orange), transparent);
  transform: skewX(-34deg);
  transform-origin: right center;
}

.site-footer .brand {
  gap: 9px !important;
}

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

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

@media (max-width: 1240px) and (min-width: 1024px) {
  .header-inner > .brand .brand-mark,
  .site-header .brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .header-inner > .brand .brand-name,
  .site-header .brand-name {
    font-size: 23px !important;
  }
}

@media (max-width: 1023px) {
  .site-header .brand {
    gap: 7px !important;
  }

  .site-header .brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .site-header .brand-name {
    font-size: 21px !important;
  }

  .site-header .brand-name::after {
    bottom: -5px;
    width: 32px;
  }
}

@media (max-width: 420px) {
  .site-header .brand-name {
    font-size: 18px !important;
  }

  .site-header .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}