/* The Lupaan logo: a dark glass tile holding the lupin spike in emerald, with a thin ring of light running round the edge and the
   dots drifting. The Solicitors Point Lupin button, as a mark. The still frame of it (no motion) is the favicon and the brand file. */
@property --lpa{syntax:"<angle>";inherits:false;initial-value:0deg}
.ll{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s,34px);height:var(--s,34px);border-radius:30%;background:radial-gradient(120% 120% at 30% 20%,#13201a 0%,#070a09 62%);isolation:isolate;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 6px 18px -8px rgba(62,229,143,.55)}
.ll::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;background:conic-gradient(from var(--lpa),rgba(62,229,143,0) 0deg,rgba(62,229,143,.95) 70deg,rgba(62,229,143,0) 140deg,rgba(62,229,143,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:llSpin 3.6s linear infinite}
.ll::after{content:"";position:absolute;inset:-30%;z-index:-2;background:radial-gradient(50% 50% at 50% 55%,rgba(62,229,143,.30),transparent 70%);animation:llGlow 4s ease-in-out infinite}
.ll svg{display:block;width:calc(var(--s,34px) * .22);height:calc(var(--s,34px) * .64);overflow:visible;filter:drop-shadow(0 0 3px rgba(62,229,143,.75))}
.ll circle{fill:#3ee58f;transform-box:fill-box;transform-origin:center;animation:llDrift 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.34s)}
.ll path{stroke:#3ee58f}
.logo:hover .ll::before,.cc-brand a:hover .ll::before{animation-duration:1.4s}
@keyframes llSpin{to{--lpa:360deg}}
@keyframes llGlow{50%{transform:translateX(12%);opacity:.7}}
@keyframes llDrift{0%,100%{transform:translate(0,0)}30%{transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5))}60%{transform:translate(calc(var(--dx) * -.3),calc(var(--dy) * -.3))}}
@media (prefers-reduced-motion:reduce){.ll::before,.ll::after,.ll circle{animation:none}.ll::before{background:linear-gradient(135deg,rgba(62,229,143,.9),rgba(62,229,143,.1))}}
.ll svg,.cc .ll svg{fill:#3ee58f;stroke:none;width:calc(var(--s,34px) * .22);height:calc(var(--s,34px) * .64)}
.ll circle{stroke:none}
.ll path,.cc .ll path{fill:none;stroke:#3ee58f;stroke-width:1.5;stroke-linecap:round}
