:root{
  --alt-ink:#111113;
  --alt-paper:#f5f2ec;
  --alt-blue:#3f4ed7;
  --alt-line:rgba(17,17,19,.2)
}

.alt-hero{background:#e7e4dd}
.alt-hero h1 em{color:var(--alt-blue)}
.alt-clients{background:#fff;color:var(--alt-ink)}

@media(min-width:801px){
  .alt-case-pair{display:block}
  .alt-case-offset{margin-top:0}
  .alt-case figure,.alt-case-wide figure,.alt-case-landscape figure{aspect-ratio:16/8}
}

.alt-wordmark{
  transition:color .25s ease
}
.alt-wordmark b,.alt-wordmark span{display:inline-block;transition:transform .38s cubic-bezier(.2,.8,.2,1),color .3s ease}
.alt-wordmark:hover b,.alt-wordmark:focus-visible b{transform:translateX(-.13rem)}
.alt-wordmark:hover span,.alt-wordmark:focus-visible span{color:var(--alt-blue);transform:translateX(.13rem)}

.alt-header-actions{justify-self:end;display:flex;align-items:center;gap:2rem}
.alt-clock{display:flex;align-items:center;gap:.55rem;white-space:nowrap;font:400 .72rem/1 var(--alt-mono);text-transform:uppercase;letter-spacing:.045em}
.alt-clock:before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--alt-blue)}
.alt-clock-value{min-width:3.25rem;font-variant-numeric:tabular-nums}

@media(max-width:800px){
  .alt-header{grid-template-columns:1fr auto auto;gap:1rem}
  .alt-header-actions{gap:0}
  .alt-clock-label{display:none}
  .alt-clock{font-size:.68rem}
}

@media(prefers-reduced-motion:reduce){
  .alt-wordmark,.alt-wordmark b,.alt-wordmark span{transition:none}
  .alt-wordmark:hover b,.alt-wordmark:focus-visible b,.alt-wordmark:hover span,.alt-wordmark:focus-visible span{transform:none}
}