/* Explain: Layout utilities for section padding and hero element styling. */
.section-pad {
    padding-top: clamp(4.5rem, 8vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}

.hero-shell {
    background-color: var(--primary-color);
}

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

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to left, rgba(12, 30, 58, 0.96) 4%, rgba(12, 30, 58, 0.84) 42%, rgba(12, 30, 58, 0.45) 100%);
}

[dir="ltr"] .hero-scrim {
    background: linear-gradient(to right, rgba(12, 30, 58, 0.96) 4%, rgba(12, 30, 58, 0.84) 42%, rgba(12, 30, 58, 0.45) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
}

.stat-band {
    background: linear-gradient(135deg, var(--primary-color), #0C1E3A);
}

.contact-section {
    background:
        radial-gradient(circle at 8% 12%, rgba(240, 140, 30, 0.08), transparent 22rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}

[dir="ltr"] .icon-flip {
    transform: scaleX(-1);
}