/* Explain: App-specific layout utilities (container, sections, grid). */
.wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding-inline: 1.1rem;
}

@media (min-width: 640px) {
    .wrap {
        padding-inline: 1.75rem;
    }
}

.section {
    padding-block: 4rem;
}

@media (min-width: 1024px) {
    .section {
        padding-block: 5.5rem;
    }
}

.hero-section {
    position: relative;
    display: flex;
    overflow: hidden;
    background: #0b332d;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, rgba(8, 38, 33, .95) 0%, rgba(8, 38, 33, .80) 44%, rgba(8, 38, 33, .40) 100%),
        linear-gradient(to top, rgba(8, 38, 33, .65), rgba(8, 38, 33, 0) 55%);
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    padding: 2.5rem 1.75rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, #14584c 55%, #1c6b5c 100%);
    box-shadow: 0 26px 50px -30px rgba(8, 38, 33, .85);
}

@media (min-width: 768px) {
    .cta-band {
        padding: 3rem 3.25rem;
    }
}