:root {
    --brandbox-dpp-petrol: #012934;
    --brandbox-dpp-cyan: #16bae7;
    --brandbox-dpp-violet: #6351d6;
    --brandbox-dpp-lime: #d8eb47;
    --brandbox-dpp-mist: #f5f8f9;
    --brandbox-dpp-static-gradient: linear-gradient(
        130deg,
        var(--brandbox-dpp-cyan) 0%,
        var(--brandbox-dpp-violet) 55%,
        var(--brandbox-dpp-lime) 100%
    );
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--brandbox-dpp-petrol);
    font-family: Asap, Arial, sans-serif;
}

:focus-visible {
    outline: 3px solid var(--brandbox-dpp-cyan);
    outline-offset: 3px;
}

.wp-site-blocks {
    overflow: clip;
}

.brandbox-dpp-hero {
    isolation: isolate;
    position: relative;
}

.brandbox-dpp-hero::before {
    background: var(--brandbox-dpp-static-gradient);
    border-radius: 48% 52% 42% 58% / 56% 42% 58% 44%;
    content: "";
    inset: 7% -18% auto auto;
    opacity: 0.38;
    position: absolute;
    width: min(62vw, 860px);
    aspect-ratio: 1.35;
    z-index: -1;
}

@media (max-width: 781px) {
    .brandbox-dpp-hero::before {
        inset: 4% -42% auto auto;
        width: 115vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}