/**
 * Contact Convoy — shared header/footer brand (logo mark + wordmark).
 * Logo files: /assets/brand/logo-mark.svg, logo-horizontal.svg
 */
:root {
  --cc-midnight: #0B1120;
  --cc-purple: #7B61FF;
  --cc-grad: linear-gradient(120deg, #2e3192 0%, #7b61ff 55%, #1bffff 100%);
}

.cc-brand,
a.brand.cc-brand,
nav a.brand:has(.cc-brand-mark) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--cc-midnight, #0b1120);
}

.cc-brand:hover,
a.brand.cc-brand:hover {
  text-decoration: none;
  opacity: 0.92;
}

.cc-brand-mark,
.brand .cc-brand-mark,
.brand img.cc-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  display: block;
  object-fit: contain;
}

.cc-brand-name {
  color: var(--cc-midnight, #0b1120);
}

.cc-brand-grad,
.brand .grad-text {
  background: var(--cc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cc-brand--lg {
  font-size: 22px;
}

.cc-brand--lg .cc-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.cc-brand--on-dark,
footer .cc-brand {
  color: #fff;
}

.cc-brand--on-dark .cc-brand-name,
footer .cc-brand .cc-brand-name {
  color: #fff;
}

/* Legal / blog headers: align with sticky nav */
header nav .cc-brand {
  flex-shrink: 0;
}