:root{
    --hero-radius: 18px;
}

body{
    background: #f2f2f2;
}

.hero{
    position: relative;
    min-height: 700px;
    background:
            url("hero.jpg"),
            linear-gradient(135deg, #cfcfcf, #e9e9e9);
    background-position: center;
    background-size: contain;
}

.hero-overlay{
    min-height: 700px;
    display: flex;
    align-items: center;
    padding: 64px 0;
    background: rgba(0,0,0,.28);
}

.hero-kicker{
    letter-spacing: .18em;
    color: rgba(255,255,255,.85);
    font-size: .85rem;
}

.hero-title{
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
}

.hero-subtitle{
    color: rgba(255,255,255,.9);
    font-size: 1.1rem;
    max-width: 56ch;
    margin: 0 auto;
}

.card{
    border-radius: var(--hero-radius);
}

.btn-lg{
    margin-top: 1em;
    border-radius: 999px;
}