/* The supplied photo stays behind sharp, readable hero content. */
#top{position:relative;isolation:isolate;overflow:hidden;background:var(--white)}
#top::before,#top::after{content:"";position:absolute;pointer-events:none;z-index:-1}
#top::before{inset:-18px;background:url('./assets/hero-background.png') center 54%/cover no-repeat;filter:blur(6px);transform:scale(1.025)}
#top::after{inset:0;background:linear-gradient(90deg,rgb(0 0 0 / 43%),rgb(0 0 0 / 60%) 50%,rgb(0 0 0 / 43%))}
#top .hero-grid{position:relative;z-index:1}
#top h1,#top .hero-description{color:var(--white);text-shadow:0 2px 20px rgb(0 0 0 / 20%)}
#top .primary-button{position:relative;box-shadow:0 8px 28px rgb(0 0 0 / 16%)}
#top .primary-button:hover{background:rgb(255 255 255 / 10%);color:var(--white);box-shadow:inset 0 0 0 1px var(--brand)}
@media(min-width:1025px){
  #top{margin-top:-16px}
  #top .hero-grid{min-height:calc(100vh - 80px);min-height:calc(100svh - 80px)}
}
@media(min-width:768px) and (max-width:1024px){
  #top{margin-top:-24px}
  #top .hero-grid{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px)}
}
@media(max-width:767px){
  #top{margin-top:-12px}
  #top .hero-grid{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px)}
  #top::before{background-position:52% center;filter:blur(4px)}
  #top::after{background:rgb(0 0 0 / 55%)}
}

/* A highlighter stroke grows from the left behind the brand name. */
#top .brand-highlight{position:relative;isolation:isolate;background:transparent}
#top .brand-highlight::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand);transform-origin:left center;animation:hero-highlight 700ms cubic-bezier(.22,1,.36,1) 300ms both}
@keyframes hero-highlight{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){#top .brand-highlight::before{animation:none;transform:none}}