/* Homepage-only brand stage. The shared navigation keeps its existing height. */
.home-page .hero-grid {
  padding-top: 8rem;
  align-items: start;
}

.home-page .hero-copy {
  padding-top: 0;
  margin-top: -3rem;
}

.home-page .site-header {
  background: transparent;
  backdrop-filter: none;
}

.home-page .site-header.has-scroll-background {
  background: var(--ink);
}

.hero-brand {
  width: clamp(15rem, 22vw, 20rem);
  max-width: 100%;
  margin-bottom: 5rem;
}

.hero-brand img {
  width: 100%;
  height: auto;
}

/* Keep the header's grid cell, so the links never shift as the logo appears. */
.js .home-page .site-header .brand {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.js .home-page .site-header.has-compact-brand .brand,
.js .home-page.menu-open .site-header .brand {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 901px) {
  .home-page .site-nav {
    justify-self: end;
  }
}

@media (max-width: 900px) {
  .home-page .hero-grid {
    padding-top: 9rem;
  }

  .hero-brand {
    width: clamp(16rem, 32vw, 20rem);
    margin-bottom: 6rem;
  }
}

@media (max-width: 640px) {
  .home-page .hero-grid {
    padding-top: 7rem;
  }

  .home-page .hero-copy {
    padding-top: 0;
    margin-top: -2rem;
  }

  .hero-brand {
    width: clamp(13rem, 56vw, 15rem);
    margin-bottom: 5rem;
  }
}