/* logo-orbs.css (v19z4, Om 2026-11-08 10:17) - HOME ONLY. Replaces the v19u logo cloud in its own section #brands.
   10 white discs with thin concentric rings and a soft prismatic halo (pink, lilac, periwinkle, mint, soft yellow), scattered as a loose
   constellation across the full content width; the client logo sits in the centre of each disc. Own drawing: the halo is one
   pre-rendered image (work/v19z4/halo.py -> images/v19/orbs/halo.webp, rotated / mirrored per circle), the rings are CSS.
   GPU-light: no runtime filters; the only motion is a very slow halo rotation (transform) and the logo swaps (js/logo-orbs.js).
   Stage units: desktop 1000 x 300 (--x/--y centre, --s disc size, all in units of stage width); phone 1000 x 980 (--mx/--my/--ms). */
body[data-page=index] .hv-brands{position:relative;overflow:hidden;overflow-x:clip;overflow-y:visible;background:#fff}  /* halos may bleed up into Built by us, never sideways */
body[data-page=index] .lo{position:relative;margin:0;padding:0}
body[data-page=index] .lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-page=index] .lo-stage{position:relative;width:100%;aspect-ratio:1000/300}
body[data-page=index] .lo-o{position:absolute;left:calc(var(--x) * 0.1%);top:calc(var(--y) / 3 * 1%);width:calc(var(--s) * 0.1%);aspect-ratio:1;
 transform:translate(-50%,-50%)}
/* halo: 1.9x the disc, behind it */
body[data-page=index] .lo-h{position:absolute;left:-45%;top:-45%;width:190%;height:190%;pointer-events:none;
 background:url(../images/v19/orbs/halo.webp) center/100% 100% no-repeat;transform:rotate(var(--r)) scaleX(var(--f));
 animation:lo-spin var(--t,52s) linear infinite}
@keyframes lo-spin{from{transform:rotate(var(--r)) scaleX(var(--f))}to{transform:rotate(calc(var(--r) + 360deg)) scaleX(var(--f))}}
/* disc: white, thin rings (outer lilac hairline, inner grey and periwinkle rings), soft shadow */
body[data-page=index] .lo-d{position:absolute;inset:0;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;
 box-shadow:0 0 0 1px rgba(160,145,225,.55),0 16px 34px -18px rgba(90,80,160,.30)}
body[data-page=index] .lo-d::before,body[data-page=index] .lo-d::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
body[data-page=index] .lo-d::before{inset:6%;border:1px solid rgba(206,204,222,.85)}
body[data-page=index] .lo-d::after{inset:11%;border:1px solid rgba(150,160,230,.45)}
/* logo: centred where the earbud sits in the reference; wide wordmarks get the width, square marks the height */
body[data-page=index] .lo-d img{grid-area:1/1;position:relative;z-index:1;display:block;width:60%;height:40%;max-width:none;object-fit:contain;margin:0;
 transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
body[data-page=index] .lo-d img.in{opacity:0;transform:scale(.6)}
body[data-page=index] .lo-d img.out{opacity:0;transform:scale(1.25)}
/* phone: 8 circles in a staggered 3-2-3 cluster */
@media (max-width:700px){
 body[data-page=index] .lo-stage{aspect-ratio:1000/930;margin-top:12px}
 body[data-page=index] .lo-o{left:calc(var(--mx) * 0.1%);top:calc(var(--my) / 9.3 * 1%);width:calc(var(--ms) * 0.1%)}
 body[data-page=index] .lo-dk{display:none}
}
@media (prefers-reduced-motion:reduce){
 body[data-page=index] .lo-h{animation:none}
 body[data-page=index] .lo-d img{transition:none}
}
html.riq-night body[data-page=index] .hv-brands{background:#fff}
/* #brands continues straight on from Built by us (both white), so it needs no top padding of its own */
html:not(.riq-night) body[data-page=index] main>.sec.hv-brands{padding-top:clamp(8px,1.2vw,16px)}