/* Horizontal brand lockup using the official, unchanged symbol. */
.hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.8vw, 40px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  color: #fff;
}
.hero-brand-symbol {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: clamp(120px, 13.4vw, 184px);
  aspect-ratio: 187 / 483;
  overflow: hidden;
}
.hero-brand-symbol img {
  position: absolute;
  width: 534.75936%;
  max-width: none;
  height: auto;
  left: -213.90374%;
  top: -54.65839%;
  filter: brightness(0) invert(1);
}
.hero-brand-copy { min-width: 0; width: clamp(160px, 19vw, 260px); text-align: center; }
.hero-brand .hero-brand-name {
  font-family: var(--font-company, 'Oswald', sans-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .025em;
  color: #fff;
  margin: 0;
}
.hero-brand .hero-brand-sub {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
  margin: 14px 0 0;
}
.hero-brand + .hero-btns, .hero-brand + div { margin-top: 32px !important; }
.profile-hero .hero-brand { margin-bottom: 48px; }
@media (max-width: 480px) {
  .hero-brand { gap: 18px; }
  .hero-brand-symbol { height: 112px; }
  .hero-brand-copy { width: min(190px, 51vw); }
  .hero-brand .hero-brand-name { font-size: clamp(34px, 10.5vw, 44px); }
  .hero-brand .hero-brand-sub { font-size: 8px; letter-spacing: .07em; margin-top: 10px; }
}