:root{
  --font-title: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body{
  font-family: var(--font-body);
}

h1, h2, h3, .display-6{
  font-family: var(--font-title);
}

.hero{
  background:
    radial-gradient(800px 300px at 15% 15%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, #1a1a1a, #2b2b2b);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.brand-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding: 0;
}
.brand-card{
  position: relative;
  overflow: hidden;
}

.brand-card::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: transparent;
}

.brand-card[data-accent="red"]::after{
  background: #b11217;
}

.brand-card[data-accent="beige"]::after{
  background: #c7b299;
}

.brand-card[data-accent="black"]::after{
  background: #000;
}


.brand-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: rgba(13,110,253,.35);
}

.brand-card:focus-visible{
  outline: 3px solid rgba(13,110,253,.35);
  outline-offset: 3px;
}

.brand-logo-wrap{
  /*height: 96px;*/
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.03);
  border-radius: 1rem;
  padding: 12px;
}

.brand-logo{
  /*max-height: 72px;*/
  width: auto;
  object-fit: contain;
}

.modal-logo-wrap{
  background: rgba(0,0,0,.03);
  padding: 18px;
}

#modalDesc em{
  font-style: normal;
  font-weight: 600;
}

.hero-logo-wrap{
  /* width: 84px;
  height: 84px; */
  border-radius: 1.25rem;
  background: rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
}

.hero-logo{
  max-height: 130px;
  width: auto;
  object-fit: contain;
}

.btn-primary{
  background-color: #1f1f1f;
  border-color: #1f1f1f;
}

.btn-primary:hover{
  background-color: #000;
  border-color: #000;
}

.btn-outline-light:hover{
  background-color: rgba(255,255,255,.15);
}