.nav .brand-mark {
  width: 48px;
  height: 48px;
  background: transparent;
  color: inherit;
}

.nav .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand .brand-mark {
  width: 48px;
  height: 48px;
  background: transparent;
  color: inherit;
}

.footer-brand .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}

.hero-art {
  background: transparent;
}

.hero-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(49% at 50% 50%);
  mix-blend-mode: normal;
}

.hero-art > p {
  display: none;
}

.roots-mark img {
  display: block;
  width: min(100%, 430px);
  height: auto;
  margin: 0 auto;
}

.product-visual.hat::before {
  display: none;
}

.product-visual {
  height: auto;
  aspect-ratio: 1;
}

.product-visual.hat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.concept-placeholder {
  flex-direction: column;
  gap: 28px;
  background: #e4ded0;
  text-align: center;
}

.concept-placeholder img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: .16;
}

.concept-placeholder p {
  display: grid;
  gap: 10px;
  margin: 0;
  letter-spacing: .18em;
}

.concept-placeholder p span {
  font-size: .72rem;
  font-weight: 700;
}

.concept-placeholder p strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.035em;
}

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    padding: 42px 24px 58px;
    gap: 38px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 15vw, 5rem);
  }

  .hero-lead {
    margin-bottom: 0;
  }

  .hero-actions {
    gap: 22px;
    margin-top: 28px;
  }

  .hero-art {
    width: min(72vw, 320px);
    margin-top: 4px;
  }

  .product-visual {
    height: min(105vw, 400px);
  }
}