/* ═══════════════════════════════════════════════════
   HERO — Main headline + intro columns
   ═══════════════════════════════════════════════════ */

.hero {
    padding: var(--space-md) var(--space-md) 0;
}

.hero__title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 14vw, 5.5rem);
    font-weight: 900;
    text-align: center;
    line-height: 0.9;
    text-transform: uppercase;
    animation: fadeIn var(--duration-slow) var(--ease-out) 200ms both;
}

.hero__subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    text-align: center;
    text-transform: uppercase;
    color: var(--accent-red);
    letter-spacing: 4px;
    margin-block-start: var(--space-xs);
    animation: fadeIn var(--duration-slow) var(--ease-out) 400ms both;
}

.hero__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: justify;
    animation: fadeIn var(--duration-slow) var(--ease-out) 600ms both;
}

.hero__columns strong {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    display: block;
    margin-block-end: 4px;
}

@media (max-width: 480px) {
    .hero__columns {
        grid-template-columns: 1fr;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}