@charset "UTF-8";

.hero {
  position: relative;
  
  padding-bottom: var(--hero-drop);
}

:root { --hero-drop: clamp(120px, 11vw, 170px); }

:root { --hero-h: clamp(420px, 38vw, 580px); }

@media (max-width: 699.98px) {
  :root { --hero-h: min(96vw, 420px); }
}

.hero__cover {
  position: absolute;
  inset: 0;
  
  bottom: var(--hero-drop);
  display: grid;
  
  align-items: end;
  justify-items: center;
  padding-inline: var(--gut);
  
  pointer-events: none;
}

.hero__copy {
  text-align: center;
  
  transform: translateY(50%);

  padding: clamp(2.6rem, 5vw, 4rem) clamp(2.2rem, 7vw, 5.5rem) clamp(1.2rem, 3vw, 1.8rem);
  
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .95) 55%,
    rgba(255, 255, 255, .80) 74%,
    rgba(255, 255, 255, .42) 87%,
    rgba(255, 255, 255, .15) 95%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero__eyebrow {
  margin: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--wood-deep);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.2rem);
  line-height: 1.25;
  letter-spacing: .08em;
  
  text-indent: .08em;
  color: var(--ink);
}

.lead-br { display: none; }
.lead-comma { display: inline; }

.hero__title { line-height: 0; }

.hero__logo {
  display: block;
  width: 424px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.hero__lead {
  margin: 1.1rem 0 0;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 2;
  color: var(--ink);
}

@media (max-width: 699.98px) {
  .hero__copy {
    padding: 1.9rem 1.6rem .9rem;
    background: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .95) 58%,
      rgba(255, 255, 255, .80) 76%,
      rgba(255, 255, 255, .42) 88%,
      rgba(255, 255, 255, .15) 95%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  
  .hero__logo { width: min(300px, 74vw); }
  .hero__eyebrow { margin-bottom: .6rem; font-size: .68rem; letter-spacing: .22em; }
  .hero__lead { margin-top: .8rem; line-height: 1.9; }
  .lead-br { display: inline; }
  .lead-comma { display: none; }
}

.verbadge {
  position: fixed; right: .6rem; bottom: .6rem; z-index: 300;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: .7rem; letter-spacing: .08em;
}
@media (max-width: 899.98px) { .verbadge { bottom: 5rem; } }