/* Locations hub page only. */
.locations-hero {
  min-height: 34rem;
  color: var(--brand-foreground);
}

.locations-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .48fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(5rem, 8vw, 7rem);
}

.locations-hero__copy {
  max-width: 48rem;
}

.locations-stat-card {
  border: 1px solid color-mix(in oklab, var(--brand-foreground) 20%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--brand) 88%, black 12%);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: var(--shadow-elegant);
  backdrop-filter: blur(14px);
}

.locations-stat-card strong {
  display: block;
  color: var(--brand-foreground);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
}

.locations-stat-card span {
  display: block;
  margin-top: .6rem;
  color: color-mix(in oklab, var(--brand-foreground) 78%, transparent);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.locations-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.locations-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.locations-intro-card {
  border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  border-radius: .75rem;
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}

.locations-intro-card h2 {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 800;
}

.locations-intro-card p {
  margin-top: .5rem;
  color: var(--muted-foreground);
  font-size: .94rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .locations-hero__grid,
  .locations-intro-grid {
    grid-template-columns: 1fr;
  }
}