body {
    font-family: "Archivo", sans-serif;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

.js [data-animate="nav"],
.js [data-animate="nav-item"],
.js [data-animate="eyebrow"],
.js [data-animate="hero-copy"],
.js [data-animate="hero-actions"],
.js [data-animate="hero-visual"],
.js [data-animate="reveal"],
.js [data-animate="card"],
.js [data-animate="page-panel"] {
    opacity: 0;
}

.js .hero-word {
    opacity: 0;
    transform: translateY(110%);
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-animate],
    .js .hero-word {
        opacity: 1 !important;
        transform: none !important;
    }
}