html {
  scroll-padding-top: 94px;
}

.site-header {
  position: fixed;
  z-index: 999;
  transition: height .35s ease, background-color .35s ease, color .35s ease,
    border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.site-header.scrolled {
  height: 76px;
  color: var(--ink);
  background: rgba(246, 243, 236, .92);
  border-bottom-color: rgba(38, 49, 45, .12);
  box-shadow: 0 8px 30px rgba(20, 27, 24, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header.scrolled nav a,
.site-header.scrolled .menu-button {
  color: var(--ink);
}

.site-header.scrolled .nav-cta {
  border-color: rgba(38, 49, 45, .35);
}

@media (max-width: 900px) {
  html { scroll-padding-top: 74px; }
  .site-header.scrolled { height: 74px; }
  .site-header nav { box-shadow: 0 16px 30px rgba(10, 15, 13, .18); }
  .site-header.scrolled nav a { color: #fff; }
  .site-header.scrolled nav .nav-cta { border-color: rgba(255, 255, 255, .55); }
}

/* Give the formal program name a little more presence without competing with the promise. */
.hero .eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .22em;
  margin-bottom: 27px;
}

@media (max-width: 580px) {
  .hero .eyebrow {
    font-size: 14px;
    letter-spacing: .18em;
  }
}