.page .hero { height: 100vh; background: #181818; display: flex; align-items: normal; margin: -48px 0 0 }
.page .site { display: flex; gap: 20px; align-items: flex-end; font-size: 100px; color: #fff; margin: 50px }

@media (max-width: 900px) {
  .page .site { flex-wrap: nowrap; overflow-x: auto; gap: 10px; font-size: 50px; color: #fff; margin: 15px }
  .site svg { width: 70px; height: auto; flex-shrink: 0 }
}

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wipeLR { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.site .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s ease forwards; }
.site .w svg { animation: wipeLR 2s ease forwards; }