/* Homepage-only hero.
 *
 * Built entirely from CSS + inline SVG so it depends on no photograph and no
 * third-party asset. To switch to a real DISTCHOI field photo later, add an
 * <img> back inside .home-hero and drop the background gradient to an overlay. */

.home-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, #24405c 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, #3a2b25 0%, transparent 50%),
        linear-gradient(160deg, #1b2733 0%, #141a21 55%, #0f1216 100%);
}

/* Seismic traces sitting behind the type. */
.home-hero__traces {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

.home-hero__traces path {
    fill: none;
    stroke: #c6402f;
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
}

.home-hero__traces path:nth-child(even) {
    stroke: #7f97ad;
}

/* Vignette, so the type always has something to sit on. */
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(8, 10, 13, 0.75) 100%);
    pointer-events: none;
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 120px 24px 80px;
    max-width: 1000px;
}

.home-hero__eyebrow {
    color: #c6402f;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 28px;
}

.home-hero__inner h1 {
    color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
    font-size: 60px;
    line-height: 1.15;
    margin: 0 0 28px;
}

.home-hero__rule {
    width: 90px;
    height: 3px;
    background: #c6402f;
    margin: 0 auto 28px;
}

.home-hero__sub {
    color: #c3ccd6;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 21px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 720px;
}

.home-hero__cta {
    display: inline-block;
    margin-top: 44px;
    padding: 13px 34px;
    border: 2px solid #c6402f;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.home-hero__cta:hover {
    background: #c6402f;
    color: #fff;
    text-decoration: none;
}

.site-footer {
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    /* Less room for the type to breathe, so pull the backdrop further back. */
    .home-hero__traces {
        opacity: 0.16;
    }

    .home-hero__inner {
        padding: 110px 20px 70px;
    }

    .home-hero__inner h1 {
        font-size: 34px;
    }

    .home-hero__sub {
        font-size: 17px;
    }
}