.hero {
    position: relative;
    min-height: 100vh; 
    width: 100vw;      
    display: grid;
    place-items: center start;
    color: #ffffff;
    background: #09142c;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: calc(50% - 50vw);  
    margin-right: calc(50% - 50vw);
}

.hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,13,33,0.85) 0%, rgba(6,13,33,0.65) 40%, rgba(6,13,33,0.35) 100%);
}

.hero .hero-content {
    position: relative;
    z-index: 1;
    padding-top: 140px; 
    padding-left: 26px;
    padding-right: 26px;
    padding-bottom: 52px;
    text-align: left;
}

.eyebrow {
    margin: 0 0 8px 0;
    font-size: 42px;
    line-height: 1.1;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'TheSeasons', 'The Seasons', Georgia, serif;
    text-align: left;
}

.headline {
    margin: 0 0 18px 0;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 600;
    color: #ffffff;
}

.subhead {
    margin: 0 0 28px 0;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
}
.subhead span { color: #8ea2ff; }