*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--pad) 96px}

.top{
  display:flex;justify-content:space-between;
  font-size:var(--fs-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line2);padding-bottom:14px;
}

.js .top{position:relative;border-bottom:0}
.js .top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line2);transform:scaleX(0);transform-origin:left center;
  animation:rule-in .9s var(--ease) .15s forwards;
}
@keyframes rule-in{to{transform:scaleX(1)}}

.js .reveal{opacity:0;transform:translateY(8px);transition:opacity var(--dur-reveal) ease,transform var(--dur-reveal) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.hero-l .reveal:nth-child(1){transition-delay:.05s}
.hero-l .reveal:nth-child(2){transition-delay:.12s}
.hero-l .reveal:nth-child(3){transition-delay:.19s}
.hero-l .reveal:nth-child(4){transition-delay:.26s}
.hero-l .reveal:nth-child(5){transition-delay:.33s}
.hero-l .reveal:nth-child(6){transition-delay:.40s}
.hero-r.reveal{transition-delay:.18s}

@media (max-width:880px){
  .wrap{padding:30px var(--pad-m) 70px}
  .top{flex-direction:column;gap:3px;font-size:var(--fs-micro)}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .top{border-bottom:1px solid var(--line2)}
  .js .top::after{animation:none}
}