/* Dot matrix: a 3x3 grid of bold dots with a diagonal wave running through it. Mobile optimised. */
.loader_box .loader76 {
    display: grid;
    grid-template-columns: repeat(3, 24px);
    gap: 16px;
    width: 104px;
    height: 104px;
}

.loader_box .loader76 span {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #036c91;
    opacity: 0.3;
    transform: scale(0.5);
    animation: loader76-wave 1.7s ease-in-out infinite;
}

/* colour and delay follow the diagonal (row + column) */
.loader_box .loader76 span:nth-child(1) { background: linear-gradient(180deg, #CDCDCD, #595A5A); animation-delay: 0s; }
.loader_box .loader76 span:nth-child(2),
.loader_box .loader76 span:nth-child(4) { background: linear-gradient(180deg, #49ABCB, #036C91); animation-delay: 0.14s; }
.loader_box .loader76 span:nth-child(3),
.loader_box .loader76 span:nth-child(5),
.loader_box .loader76 span:nth-child(7) { background: linear-gradient(180deg, #A5CE3A, #41AD49); animation-delay: 0.28s; }
.loader_box .loader76 span:nth-child(6),
.loader_box .loader76 span:nth-child(8) { background: linear-gradient(180deg, #4452A4, #3C3D71); animation-delay: 0.42s; }
.loader_box .loader76 span:nth-child(9) { background: linear-gradient(180deg, #CDCDCD, #595A5A); animation-delay: 0.56s; }

@keyframes loader76-wave {
    0%, 100% { opacity: 0.3; transform: scale(0.5); }
    35% { opacity: 1; transform: scale(1.08); }
    65% { opacity: 0.3; transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader76 span {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
}