/* Rank Ray motion layer: transform/opacity only (no layout shift). Content is visible without JS; main.js adds .js, then .is-in. */
.js .rv{opacity:0;transform:translateY(1.5rem);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv-fade{transform:none}
.js .rv-scale{transform:scale(.94)}
.js .rv-l{transform:translateX(-2.5rem)}
.js .rv-r{transform:translateX(2.5rem)}
.js .rv.is-in{opacity:1;transform:none}
/* hover lifts + gradient border glow */
.lift{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.card::before,.glow-b::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--acc);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity var(--dur-2);pointer-events:none}
.glow-b{position:relative}
@media (hover:hover){
.lift:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.card:hover::before,.glow-b:hover::before{opacity:1}
/* button shine sweep */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-130%)}
.btn:hover::after{transform:translateX(130%);transition:transform .8s var(--ease)}
}
/* ambient drift for glow blobs: add .drift to any absolutely placed decorative element */
.drift{animation:rr-drift 14s ease-in-out infinite alternate}
@keyframes rr-drift{to{transform:translate3d(3rem,1.5rem,0) scale(1.08)}}
.nf::before,.section--gradient::before,.cta::before{content:"";position:absolute;width:32rem;height:32rem;left:-8rem;top:-12rem;border-radius:50%;background:radial-gradient(circle,rgba(4,115,251,.05),transparent 65%);pointer-events:none;animation:rr-drift 16s ease-in-out infinite alternate}
.nf>.wrap,.section--gradient>*,.cta>*{position:relative}
[data-count]{font-variant-numeric:tabular-nums}
/* ---- living hero background (template-parts/hero-fx.php) ---- */
.fx.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx~*{position:relative;z-index:1}
.fx-svg{position:absolute;inset:0;width:100%;height:100%}
.fx-grid{animation:fx-pan 22s linear infinite}
.fx-line-bg{fill:none;stroke:rgba(4,115,251,.14);stroke-width:2}
.fx-line{fill:none;stroke:#0473FB;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;animation:fx-draw 7s ease-in-out infinite}
.fx-nodes path{fill:none;stroke:rgba(18,183,106,.35);stroke-dasharray:4 8;animation:fx-flow 3s linear infinite}
.fx-nodes circle{fill:#12B76A;opacity:.6;transform-box:fill-box;transform-origin:center;animation:fx-pop 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.8s)}
.fx-streets path{fill:none;stroke:rgba(10,19,29,.04);stroke-width:10}
.fx-ring{fill:none;stroke:#0473FB;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:fx-ring 3.6s ease-out infinite;animation-delay:calc(var(--i,0)*1.2s)}
.fx-pin{transform-box:fill-box;transform-origin:50% 100%;animation:fx-bounce 2.4s ease-in-out infinite}
.fx-pin--sm{animation-delay:-1.2s}
.fx-chip{position:absolute;display:none;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:var(--r-pill);font:600 .78rem/1 var(--f-head);color:#0A131D;background:#fff;border:1px solid rgba(10,19,29,.08);box-shadow:0 6px 18px -8px rgba(10,19,29,.22);animation:fx-float 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.fx-chip i{width:.45rem;height:.45rem;border-radius:50%;background:#0473FB;box-shadow:0 0 0 0 rgba(4,115,251,.5);animation:fx-beat 2s ease-out infinite;animation-delay:calc(var(--i)*-.4s)}
.fx-chip:nth-of-type(odd){left:3%}.fx-chip:nth-of-type(even){right:3%}
.fx-chip:nth-of-type(1),.fx-chip:nth-of-type(2){top:18%}.fx-chip:nth-of-type(3),.fx-chip:nth-of-type(4){top:48%}.fx-chip:nth-of-type(5),.fx-chip:nth-of-type(6){top:78%}
@media(min-width:80rem){.fx-chip{display:inline-flex}}
.fx[data-paused] *{animation-play-state:paused!important}
@keyframes fx-pan{to{transform:translate(-48px,-48px)}}
@keyframes fx-draw{0%{stroke-dashoffset:1}55%,80%{stroke-dashoffset:0;opacity:.55}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fx-flow{to{stroke-dashoffset:-24}}
@keyframes fx-pop{50%{transform:scale(1.8);opacity:.9}}
@keyframes fx-ring{0%{opacity:.6;transform:scale(.3)}100%{opacity:0;transform:scale(3.2)}}
@keyframes fx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fx-float{50%{transform:translateY(-12px)}}
@keyframes fx-beat{70%,100%{box-shadow:0 0 0 .6rem rgba(4,115,251,0)}}
/* ---- living boxes: JS adds .rr-alive; pointer tilt + spotlight on hover screens, press feedback on touch ---- */
.rr-alive{position:relative;isolation:isolate}
.rr-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(22rem circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%);z-index:-1}
.rr-alive:hover>.rr-spot{opacity:1}
.rr-alive:active{transform:scale(.985)!important;transition:transform .12s!important}
/* ---- replying icons: stroke icons draw in when seen, bounce + redraw on hover of their box ---- */
.js .rr-ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease)}
.js .rr-ic.is-drawn *{stroke-dashoffset:0}
.lc-ic.rr-ic,.hm-ico.rr-ic,.rr-alive .rr-ic{transform-origin:center;animation:rr-breathe 4.5s ease-in-out infinite}
.rr-alive:hover .rr-ic{animation:rr-reply .7s var(--ease)}
.rr-alive:hover .rr-ic *{animation:rr-redraw 1s var(--ease)}
.hm-tile img,.rr-float{animation:rr-bobi 5s ease-in-out infinite}
.hm-svc-card:nth-child(2n) .hm-tile img{animation-delay:-2.5s}
.rf-social a svg,.mm-card svg{transition:transform .3s var(--ease)}
@keyframes rr-breathe{50%{transform:translateY(-3px) scale(1.05)}}
@keyframes rr-reply{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-8deg)}60%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1)}}
@keyframes rr-redraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes rr-bobi{50%{transform:translateY(-6px) rotate(-2deg)}}
/* ---- moving pictures: slow drift on photos, zoom on hover ---- */
/* drift starts after load (html.rr-loaded from main.js) and only on wide screens, so it never touches LCP on phones */
@media(min-width:62rem){.rr-loaded .frame>img{animation:rr-ken 22s ease-in-out infinite alternate}.rr-loaded .frame:nth-of-type(2n)>img{animation-direction:alternate-reverse}}
@keyframes rr-ken{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
@media (hover:hover){
.rf-social a:hover svg,.mm-card:hover svg{transform:scale(1.2) rotate(-6deg)}
.frame:hover>img{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,::before,::after{transition:none!important;animation:none!important}
.js .rv{opacity:1;transform:none}
.btn:hover::after{transform:translateX(-130%)}
.js .rr-ic *{stroke-dashoffset:0}
.fx-chip{display:none!important}
}

/* ---- LIGHT THEME: accent cycle (blue, green, red, amber, teal; purple only as a rare 6th) ---- */
.fx-chip:nth-of-type(3n+2) i{background:#12B76A}.fx-chip:nth-of-type(3n) i{background:#F79009}
:is(.sv-svc,.sv-box,.lc-svc,.lc-why-i,.lc-box,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.rr-gi,.bl-card,.card,.lc-step,.rr-iconbox):nth-child(5n+1){--acc:#0473FB}
:is(.sv-svc,.sv-box,.lc-svc,.lc-why-i,.lc-box,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.rr-gi,.bl-card,.card,.lc-step,.rr-iconbox):nth-child(5n+2){--acc:#12B76A}
:is(.sv-svc,.sv-box,.lc-svc,.lc-why-i,.lc-box,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.rr-gi,.bl-card,.card,.lc-step,.rr-iconbox):nth-child(5n+3){--acc:#F04438}
:is(.sv-svc,.sv-box,.lc-svc,.lc-why-i,.lc-box,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.rr-gi,.bl-card,.card,.lc-step,.rr-iconbox):nth-child(5n+4){--acc:#F79009}
:is(.sv-svc,.sv-box,.lc-svc,.lc-why-i,.lc-box,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.rr-gi,.bl-card,.card,.lc-step,.rr-iconbox):nth-child(5n){--acc:#0BA5C7}
/* accented boxes: top border, tinted icon tile, white card; text stays ink */
:is(.sv-svc,.lc-svc,.lc-why-i,.hm-val,.hm-stat,.hm-quote,.rr-list li,.rr-card,.rr-person,.sv-box-in,.lc-box-in,.bl-card,.card):not(.card--flat){border-top:3px solid var(--acc);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 2px rgba(10,19,29,.05),0 10px 24px -16px rgba(10,19,29,.18)}
.lc-ic.lc-ic,.hm-ico.hm-ico,.sv-box-h .lc-ic{background:color-mix(in srgb,var(--acc) 13%,#fff);color:var(--acc);box-shadow:none}
.sv-box-in::before,.sv-box:not(:has(.sv-box-in))::before{background:var(--acc)}
.sv-box:nth-child(5n+1) .sv-box-in,.lc-box:nth-child(5n+1) .lc-box-in{--acc:#0473FB}
.sv-box:nth-child(5n+2) .sv-box-in,.lc-box:nth-child(5n+2) .lc-box-in{--acc:#12B76A}
.sv-box:nth-child(5n+3) .sv-box-in,.lc-box:nth-child(5n+3) .lc-box-in{--acc:#F04438}
.sv-box:nth-child(5n+4) .sv-box-in,.lc-box:nth-child(5n+4) .lc-box-in{--acc:#F79009}
.sv-box:nth-child(5n) .sv-box-in,.lc-box:nth-child(5n) .lc-box-in{--acc:#0BA5C7}
.rr-ico,.mm-ic{color:var(--acc-ink)}
.btn.btn--outline{border-color:rgba(4,96,217,.45)}