/* SecurityLabs shared brand layer: colour atmosphere + services story canvas */

/* colour atmosphere behind inner pages */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#090a0f}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.22;will-change:transform}
.aurora i:nth-child(1){background:#2F7FE6;left:-22vmax;top:-26vmax;animation:au1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#4FB53A;right:-26vmax;top:-18vmax;opacity:.14;animation:au2 31s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#F2A52E;right:-20vmax;bottom:-30vmax;opacity:.13;animation:au3 29s ease-in-out infinite alternate}
.aurora i:nth-child(4){background:#E23A48;left:-24vmax;bottom:-30vmax;opacity:.16;animation:au4 34s ease-in-out infinite alternate}
.aurora::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(236,238,242,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(236,238,242,.035) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
@keyframes au1{to{transform:translate(14vmax,10vmax) scale(1.1)}}
@keyframes au2{to{transform:translate(-12vmax,12vmax) scale(.9)}}
@keyframes au3{to{transform:translate(-14vmax,-8vmax) scale(1.15)}}
@keyframes au4{to{transform:translate(12vmax,-12vmax) scale(.95)}}
body.has-aurora .g5{position:relative;z-index:1;background:transparent !important}
@media (prefers-reduced-motion: reduce){.aurora i{animation:none !important}}

/* services: practice colour carried by the active tab and service */
.tab::before{background:var(--pc,#ECEEF2) !important}
.svc.on b{color:var(--pc,#FFFFFF) !important}
.story{display:block;width:100%;height:440px;margin:-10px 0 4px}
@media (max-width:760px){.story{height:auto;aspect-ratio:1;max-height:320px}}

/* animated ring mark + two-colour name (header, every page) */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#ECEEF2}
.brand-mark{width:42px;height:42px;flex:none;overflow:visible}
.brand-mark .q{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.brand-mark .o,.brand-mark .i{fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:bm-draw 1.2s cubic-bezier(.16,1,.3,1) forwards}
.brand-mark .o{stroke-width:30}.brand-mark .i{stroke-width:26;stroke-dasharray:160;stroke-dashoffset:160;animation-delay:.25s}
.brand-mark .n{fill:#0a0b0e;stroke-width:13;opacity:0;animation:bm-pop .5s ease forwards;animation-delay:.9s}
.brand-mark .q2 *{animation-delay:.12s}.brand-mark .q3 *{animation-delay:.24s}.brand-mark .q4 *{animation-delay:.36s}
.brand-mark .q2 .n{animation-delay:1s}.brand-mark .q3 .n{animation-delay:1.1s}.brand-mark .q4 .n{animation-delay:1.2s}
.brand-mark .spin{transform-origin:200px 200px;animation:bm-spin 40s linear infinite}
.brand:hover .q1{transform:translate(-14px,-14px)}.brand:hover .q2{transform:translate(14px,-14px)}
.brand:hover .q3{transform:translate(14px,14px)}.brand:hover .q4{transform:translate(-14px,14px)}
@keyframes bm-draw{to{stroke-dashoffset:0}}
@keyframes bm-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes bm-spin{to{transform:rotate(360deg)}}
.brand-t .s{color:#6FA8F5}.brand-t .l{color:#7BCB66}
@media (max-width:760px){.brand-mark{width:34px;height:34px}}
@media (prefers-reduced-motion: reduce){.brand-mark .spin{animation:none}.brand-mark .o,.brand-mark .i{stroke-dashoffset:0;animation:none}.brand-mark .n{opacity:1;animation:none}}