/* Explain: Layout utilities for airy one-page studio sections. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.hero-section {
    background:
        radial-gradient(circle at 50% -12%, rgba(86, 220, 232, 0.24), transparent 42rem),
        radial-gradient(circle at 10% 108%, rgba(46, 200, 216, 0.16), transparent 34rem),
        linear-gradient(180deg, var(--hero-top) 0%, var(--hero-mid) 48%, var(--hero-bottom) 100%);
}

.hero-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(143, 230, 238, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 230, 238, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000000 0%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 42%, #000000 0%, transparent 76%);
    content: "";
    pointer-events: none;
}