/* Explain: Layout utilities for full-height sections and background styling. */
.section-full {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    overflow: hidden;
    padding: clamp(6.5rem, 13vw, 9.5rem) 1.25rem;
}

@media (min-width: 640px) {
    .section-full {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

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

.section-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(230, 241, 253, 0.45), rgba(216, 233, 251, 0.06) 45%, rgba(232, 242, 253, 0.55));
}

.section-scrim-soft {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(234, 243, 252, 0.5), rgba(224, 238, 252, 0.08) 60%, rgba(236, 244, 253, 0.58));
}

.section-scrim-about {
    background: linear-gradient(180deg, rgba(230, 241, 253, 0.16), rgba(216, 233, 251, 0.02) 45%, rgba(232, 242, 253, 0.24));
}

.section-full h1,
.section-full h2,
.section-full h3,
.section-full p {
    text-shadow: 0 1px 2px rgba(240, 247, 254, 0.92), 0 2px 22px rgba(240, 247, 254, 0.85);
}

.home-electric {
    background-color: var(--electric-blue);
    background-image: linear-gradient(180deg, var(--electric-blue-deep) 0%, var(--electric-blue) 28%, var(--electric-blue-glow) 50%, var(--electric-blue) 72%, var(--electric-blue-deep) 100%);
}

.home-electric h1,
.home-electric h2,
.home-electric h3,
.home-electric p {
    text-shadow: none;
}

.home-electric .section-kicker {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

.home-electric .section-kicker::before {
    background: #FFFFFF;
}

.home-electric .scroll-cue {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
}