.site-header .bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(6px);
    transform: scale(1.02);
}

.site-header .colour-overlay {
    position: absolute;
    top: -40px;
    left: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    mix-blend-mode: screen;
    filter: blur(22px);
    background:
        radial-gradient(ellipse 90% 70% at 5% 5%, #5500aa 0%, transparent 65%),
        radial-gradient(ellipse 70% 90% at 8% 15%, #0044cc 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 18% 8%, #7700bb 0%, transparent 52%),
        radial-gradient(ellipse 45% 65% at 3% 40%, #0033bb 0%, transparent 48%),
        radial-gradient(ellipse 40% 35% at 25% 20%, #4400aa 0%, transparent 44%);
}

.header-fade {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(13, 13, 18, 0.06) 0%, rgba(13, 13, 18, 0.28) 100%),
        linear-gradient(to bottom,
            rgba(13, 13, 18, 0) 0%,
            rgba(13, 13, 18, 0) 28%,
            rgba(13, 13, 18, 0.5) 52%,
            rgba(13, 13, 18, 1) 68%,
            rgba(13, 13, 18, 1) 100%);
}