/* A softer charcoal background, scoped to the home page. */
body.home-page {
    --home-background: #09090f;
    --hero-page-background: var(--home-background);
    background: var(--home-background);
}

body.home-page .hero-section {
    background: var(--home-background);
}

body.home-page .footer {
    background: #000000;
    border-top-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 701px) {
    body.home-page .hero-mask {
        background:
            linear-gradient(90deg, rgba(12, 14, 17, .8), rgba(12, 14, 17, .66) 32%, rgba(12, 14, 17, .22) 62%, rgba(12, 14, 17, .06)),
            linear-gradient(0deg, #15171a 0%, #15171a 9%, rgba(21, 23, 26, .96) 16%, rgba(21, 23, 26, .76) 28%, rgba(21, 23, 26, .4) 42%, rgba(21, 23, 26, .1) 57%, transparent 70%),
            linear-gradient(180deg, rgba(12, 14, 17, .3), transparent 28%);
    }
}

@media (max-width: 700px) {
    body.home-page #hero-section .hero-mask {
        background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .04) 35%, rgba(21, 23, 26, .24) 55%, rgba(21, 23, 26, .6) 72%, rgba(21, 23, 26, .94) 88%, var(--home-background) 96%) !important;
    }
}