/* Keep the hero image covering its section on every screen size. */
.hero-section {
    background-size: cover;
    background-position: center;
    animation: none;
}

@media (max-width: 550px) {
    .hero-section {
        min-height: calc(100svh - 76px);
        background-size: cover;
        background-position: center;
    }

    .hero-content {
        width: calc(100% - 40px);
        margin: 0 auto 40px;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1rem;
        line-height: 1.6;
    }
}