html {
    background: #bbe0e4;
}

body {
    position: relative;
    overflow-x: hidden;
    background: #bbe0e4;
}

.site-header,
#main,
.site-footer {
    position: relative;
    z-index: 1;
}

.site-header {
    background: #bbe0e4;
    isolation: isolate;
    z-index: 10;
    overflow: visible;
}

.primary-nav {
    position: relative;
    z-index: 20;
}

.primary-nav .sub-menu {
    z-index: 30;
    background: #ffffff;
    opacity: 1;
}

.primary-nav .sub-menu li {
    display: block;
    width: 100%;
}

.primary-nav .sub-menu a {
    display: block;
    white-space: nowrap;
}

.sky-clouds {
    position: absolute;
    z-index: 2;
    inset: 82px 0 0;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

.sky-cloud {
    position: absolute;
    display: block;
    width: clamp(150px, 17vw, 280px);
    height: auto;
    opacity: 0;
    animation: cloud-drift 42s linear infinite;
}

.sky-cloud-one {
    top: 4%;
    left: -18%;
    --cloud-opacity: .72;
    --cloud-text-opacity: .18;
}

.sky-cloud-two {
    top: 20%;
    left: 35%;
    width: clamp(110px, 13vw, 210px);
    --cloud-opacity: .52;
    --cloud-text-opacity: .13;
    animation-duration: 52s;
    animation-delay: -19s;
}

.sky-cloud-three {
    top: 36%;
    left: 78%;
    width: clamp(130px, 15vw, 240px);
    --cloud-opacity: .6;
    --cloud-text-opacity: .15;
    animation-duration: 45s;
    animation-delay: -31s;
}

.sky-cloud-four {
    top: 54%;
    left: 12%;
    width: clamp(120px, 14vw, 220px);
    --cloud-opacity: .5;
    --cloud-text-opacity: .12;
    animation-duration: 54s;
    animation-delay: -11s;
}

.sky-cloud-five {
    top: 71%;
    left: 58%;
    width: clamp(170px, 19vw, 300px);
    --cloud-opacity: .58;
    --cloud-text-opacity: .14;
    animation-duration: 48s;
    animation-delay: -38s;
}

.sky-cloud-six {
    top: 88%;
    left: 86%;
    width: clamp(100px, 12vw, 185px);
    --cloud-opacity: .42;
    --cloud-text-opacity: .1;
    animation-duration: 61s;
    animation-delay: -25s;
}

.sky-cloud-seven {
    top: 12%;
    left: 64%;
    width: clamp(120px, 14vw, 220px);
    --cloud-opacity: .48;
    --cloud-text-opacity: .12;
    animation-duration: 57s;
    animation-delay: -44s;
}

.sky-cloud-eight {
    top: 45%;
    left: -12%;
    width: clamp(160px, 18vw, 285px);
    --cloud-opacity: .55;
    --cloud-text-opacity: .13;
    animation-duration: 50s;
    animation-delay: -29s;
}

.sky-cloud-nine {
    top: 79%;
    left: 38%;
    width: clamp(110px, 13vw, 205px);
    --cloud-opacity: .46;
    --cloud-text-opacity: .11;
    animation-duration: 59s;
    animation-delay: -17s;
}

@keyframes cloud-drift {
    0% {
        opacity: 0;
        transform: translateX(-24vw);
    }
    12% {
        opacity: var(--cloud-opacity, .72);
    }
    16% {
        opacity: var(--cloud-opacity, .72);
    }
    24% {
        opacity: .3;
    }
    54% {
        opacity: .3;
    }
    64% {
        opacity: var(--cloud-opacity, .72);
    }
    82% {
        opacity: var(--cloud-opacity, .72);
    }
    100% {
        opacity: 0;
        transform: translateX(124vw);
    }
}

.site-footer {
    min-height: 390px;
    padding-bottom: 150px;
    overflow: visible;
    z-index: auto;
    background: linear-gradient(to bottom, transparent 108px, rgba(255, 255, 255, .34) 148px);
}

.site-footer > .footer-grid,
.site-footer > .footer-bottom {
    position: relative;
    z-index: 4;
}

.footer-landscape {
    position: absolute;
    inset: auto 0 0;
    height: 230px;
    z-index: 3;
    pointer-events: none;
}

.footer-grass {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 145px;
    object-fit: cover;
    object-position: center bottom;
}

@media (prefers-reduced-motion: reduce) {
    .sky-cloud {
        animation: none;
    }
}

@media (max-width: 820px) {
    .sky-clouds {
        inset: 82px 0 0;
        height: auto;
    }

    .sky-cloud-two {
        top: 80px;
    }

    .site-footer {
        min-height: 430px;
        padding-bottom: 130px;
        background: linear-gradient(to bottom, transparent 248px, rgba(255, 255, 255, .34) 248px);
    }

    .footer-landscape {
        height: 190px;
    }

    .footer-grass {
        height: 110px;
    }
}