/* Hero from the ivory Figma frame and its 390px mobile composition. */
.st-hero {
  --hero-ink: #302822;
  --hero-rust: #aa452c;
  --hero-rule: rgb(107 84 64 / .22);
  color: var(--hero-ink);
  background: var(--paper);
  overflow: clip;
}
.st-hero::after { border-inline-color: var(--hero-rule); }
.st-header, .hero-strip { border-bottom-color: var(--hero-rule); }
.st-header .wordmark {
  color: var(--hero-rust);
  font-size: clamp(18px, 1.43cqw, 22px);
  letter-spacing: -.015em;
  font-weight: 550;
}
.st-header nav { gap: clamp(14px, 2.1cqw, 32px); }
.st-header nav a { font-size: clamp(12px, .85cqw, 15px); }
.st-header nav .mini-cta { color: #fff8ee; background: #2d251e; font-size: clamp(11px, .8cqw, 14px); }
.hero-strip {
  font-size: clamp(11px, .99cqw, 15px);
  color: var(--hero-ink);
}
.hero-strip a { border-right-color: var(--hero-rule); }
.hero-strip a > img { width: 1.18em; height: 1.18em; }
.hero-avatars { display: inline-flex; flex: none; align-items: center; }
.hero-avatars img {
  display: block;
  width: clamp(19px, 1.85cqw, 29px);
  height: clamp(19px, 1.85cqw, 29px);
  border-radius: 50%;
  object-fit: cover;
}
.hero-avatars img + img { margin-left: -.46cqw; }
.hero-copy h1 { color: var(--hero-ink); }
.hero-actions a {
  background: var(--hero-rust);
  color: #fff;
  letter-spacing: -.07em;
}
.hero-actions a + a {
  background: #f3ede3;
  color: var(--hero-ink);
  border: 1px solid rgb(186 172 157 / .6);
  min-width: 11.84cqw;
}
@media (max-width: 740px) {
  .st-hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .st-hero::after { display: none; }
  .st-header, .hero-strip { margin-inline: 0; padding-inline: 5.9%; }
  .st-header { height: 64px; }
  .st-header .wordmark { font-size: 21px; }
  .st-hero .mobile-nav-button {
    position: relative;
    color: var(--hero-ink);
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    margin-right: -7px;
    padding: 0;
  }
  .mobile-nav-button span,
  .mobile-nav-button::before,
  .mobile-nav-button::after {
    content: "";
    position: absolute;
    left: 12px;
    width: 20px;
    height: 2px;
    background: currentColor;
  }
  .mobile-nav-button span { top: 21px; }
  .mobile-nav-button::before { top: 16px; }
  .mobile-nav-button::after { top: 26px; }
  .hero-strip { min-height: 47px; font-size: clamp(12px, 3.65cqw, 15px); }
  .hero-strip > a { display: none; }
  .hero-audience { gap: 10px; }
  .hero-avatars img { width: 23px; height: 23px; }
  .hero-avatars img + img { margin-left: -6px; }
  .hero-copy { padding: 21px 5.9% 0; }
  .hero-copy h1 { font-size: clamp(43px, 13.06cqw, 72px); line-height: .85; }
  .hero-actions { display: flex; gap: min(3.08cqw, 12px); margin-top: min(6.1cqw, 24px); }
  .hero-actions a, .hero-actions a + a {
    min-width: 0;
    min-height: 46px;
    font-size: clamp(12px, 3.75cqw, 15px);
    padding: 8px;
    flex: 0 1 158px;
    box-shadow: none;
  }
  .hero-actions a + a { flex-basis: 174px; }
  .hero-art {
    order: 4;
    position: relative;
    flex: none;
    inset: auto;
    width: 100%;
    height: min(106.67cqw, 558px);
    margin-top: -2px;
  }
  .hero-art::after { display: none; }
  .hero-art video {
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: max(-18.72cqw, -100px);
    width: min(169.23cqw, 900px);
    height: auto;
    object-fit: contain;
  }
}