.site-header {
  mix-blend-mode: normal;
  color: var(--paper);
  transition: color .2s ease;
}

.site-header.is-on-light {
  color: var(--carbon);
}

.brand-mark {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  border: 0;
  border-radius: 50%;
  position: relative;
  mix-blend-mode: normal;
}

.brand-mark::after {
  content: none !important;
  display: none !important;
}

.brand > span:last-child,
.nav,
.menu-toggle {
  mix-blend-mode: normal;
}

.hero-emblem {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  height: auto;
  display: block;
}

.hero-emblem-desktop {
  right: 3.5vw;
  top: 16vh;
  width: min(33vw, 455px);
  opacity: .9;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .24));
}

.contact-mark {
  width: 200px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: block;
}

.contact-mark img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

.contact-mark:hover {
  transform: rotate(-3deg) scale(1.02);
  border-color: transparent;
}

@media (min-width: 821px) {
  .orb-one {
    width: 35vw;
    height: 35vw;
    right: -8vw;
    top: 12vh;
    opacity: .48;
    filter: blur(3px);
  }

  .orb-two {
    width: 26vw;
    height: 26vw;
    right: 20vw;
    top: 24vh;
    opacity: .24;
  }
}

@media (max-width: 820px) {
  .site-header,
  .site-header.is-on-light {
    color: var(--paper);
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .hero {
    display: block;
    min-height: 100svh;
    padding-top: 138px;
    padding-bottom: 56px;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    max-width: none;
    padding-right: 0;
  }

  .hero-copy .eyebrow {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
    white-space: nowrap;
    font-size: clamp(.68rem, 2.8vw, .78rem);
    letter-spacing: .08em;
    line-height: 1.35;
  }

  .hero h1 {
    display: none;
  }

  .hero-emblem-mobile {
    position: relative;
    inset: auto;
    width: min(86vw, 620px);
    max-width: 100%;
    margin: 0 auto 28px;
    opacity: .96;
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .28));
    z-index: 2;
  }

  .hero-intro,
  .hero-actions {
    position: relative;
    z-index: 2;
  }

  .hero-intro {
    max-width: 94%;
  }

  .orb-one {
    width: 112vw;
    height: 112vw;
    min-width: 0;
    min-height: 0;
    right: -34vw;
    top: 20vh;
    opacity: .26;
    filter: blur(8px);
  }

  .orb-two {
    width: 78vw;
    height: 78vw;
    min-width: 0;
    min-height: 0;
    right: -14vw;
    top: 31vh;
    opacity: .10;
  }

  .hero-note,
  .scroll-cue {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 132px;
  }

  .hero-copy .eyebrow {
    font-size: clamp(.66rem, 2.75vw, .74rem);
    letter-spacing: .065em;
  }

  .hero-emblem-mobile {
    width: 88vw;
    margin-bottom: 24px;
  }

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

  .contact-mark,
  .contact-mark img {
    width: 200px;
  }
}