/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--noir);
  color: var(--cream);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 14vh, 9rem) var(--space-xl);
  overflow: clip;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy .eyebrow {
  margin-bottom: var(--space-md);
}

.hero-title {
  font-size: var(--fs-hero);
  letter-spacing: -0.02em;
}

.hero-title .weight-light {
  font-weight: 300;
  display: block;
}

.hero-title .weight-bold {
  font-weight: 700;
  display: block;
}

.hero-sub {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--on-surface-soft);
}

.hero-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-visual {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: 2;
  }

  .hero-copy {
    order: 1;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-block: 6.5rem 4rem;
    min-height: auto;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}