.hero {
    position: relative;
    overflow: hidden;
    background: var(--rga-green);
    color: var(--color-white);
    min-height: clamp(420px, 58vh, 620px);
}

.hero__layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
    min-height: inherit;
}

.hero__content {
    padding: clamp(2.4rem, 6vw, 5rem) 0;
    max-width: 62ch;
}

.hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rga-white) 65%, transparent);
}

.hero__motto {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--rga-white) 80%, transparent);
}

.hero__title {
    font-size: clamp(1.95rem, 4vw, 3.15rem);
    text-transform: uppercase;
}

.hero__lead {
    font-size: 1.08rem;
    max-width: 58ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.hero__media {
    position: relative;
    min-height: 100%;
    background: var(--rga-green);
}

.hero__media img,
.hero__media-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__media-fallback {
    background: color-mix(in srgb, var(--rga-green-light) 52%, var(--rga-text-muted) 48%);
}

.hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--rga-green) 0%, color-mix(in srgb, var(--rga-green) 0%, transparent) 50%);
    pointer-events: none;
}

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

    .hero__media {
        min-height: 280px;
    }
}

@media (max-width: 767px) {
    .hero__content {
        padding: 2rem 0 1.2rem;
    }

    .hero__title {
        font-size: clamp(1.5rem, 7vw, 2.1rem);
    }

    .hero__actions {
        width: 100%;
    }

    .hero__actions .btn {
        flex: 1 1 auto;
    }
}