/* ==========================================================================
   Hero -- Timing-tower hero (60/40 grid), chequered-flag pattern bg
   ========================================================================== */

.hero {
    background-color: var(--c-surface);
    background-image:
        linear-gradient(45deg, rgba(240,240,240,0.01) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(240,240,240,0.01) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(240,240,240,0.01) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(240,240,240,0.01) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-bottom: 1px solid var(--c-border);
    padding: var(--s-64) 0 var(--s-48);
    margin-top: var(--header-h);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-48);
    align-items: center;
}

.hero__kicker {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--s-12);
}

.hero__title {
    margin-bottom: var(--s-16);
}

.hero__desc {
    color: var(--c-text-dim);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--s-32);
    max-width: 540px;
}

/* Small variant (inner pages) */
.hero--small {
    padding: var(--s-48) 0 var(--s-32);
}

.hero--small .hero__inner {
    grid-template-columns: 1fr;
    max-width: 780px;
}