/* Homepage value cards, Sierra-style (14 Oct ~14:10 UTC, James: "lets do the cards on sierra.ai - could we create some kind of
   animation like they have for them? ... dont use colours like they have we can keep it in advisy branding").
   Pattern from sierra.ai's "Empower every team / Unify your channels / Pay for a job well done": a tall tile, the title at the top,
   one small looping scene in the middle, the line at the bottom. Advisy branding: navy to blue in three depths, the cyan light,
   white type, glass chips. Scenes carry no words (aria-hidden); a pause button per card; motion runs only while the card is on
   screen and never under reduced motion, where each scene shows its finished state. */

body main.homepage .home-vision .home-points.vx-cards{gap:16px;margin-top:3rem}
body main.homepage .home-vision .home-points.vx-cards>article.vx-card{
 position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:440px;padding:32px;border:0;border-radius:20px;overflow:hidden;
 color:#fff;background-color:var(--vx-a);
 background-image:radial-gradient(90% 55% at 8% 0%,rgba(98,216,255,.2) 0%,rgba(98,216,255,0) 62%),linear-gradient(150deg,var(--vx-a) 0%,var(--vx-b) 100%);
 box-shadow:0 34px 64px -44px rgba(7,26,51,.75)}
body main.homepage .home-vision .home-points.vx-cards>article.vx-card::before{display:none}
.vx-free{--vx-a:#071a33;--vx-b:#0f3a62}
.vx-team{--vx-a:#0a2544;--vx-b:#14638f}
.vx-human{--vx-a:#0f3a62;--vx-b:#2180b8}
body main.homepage .home-vision .vx-card h3{position:relative;z-index:1;margin:0 auto;max-width:17ch;padding-inline:36px;color:#fff;text-align:center}
body main.homepage .home-vision .vx-card p{position:relative;z-index:1;margin:0 auto;max-width:30ch;color:rgba(255,255,255,.82);text-align:center}
.vx-scene{position:relative;flex:1;min-height:210px;margin:10px -12px;container-type:inline-size}
.vx-stage{position:absolute;left:50%;top:50%;translate:-50% -50%}
@container (max-width:290px){.vx-stage{scale:.84}}

/* shared pieces */
.vx-node,.vx-chip,.vx-av{position:absolute;display:grid;place-items:center;border-radius:50%}
.vx-node{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 14px 30px -18px rgba(2,10,24,.8)}
.vx-node img{width:30px;height:auto}
.vx-node svg{width:28px;height:28px}
.vx-chip{width:36px;height:36px;margin:-18px 0 0 -18px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.vx-chip svg{width:18px;height:18px}
.vx-scene svg{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 1. Free the visionary: four jobs lift off one person and land with Nexus; the person is left free. 10s loop. */
.vx-free .vx-stage{width:280px;height:180px}
.vx-free .vx-link{position:absolute;left:104px;top:89px;width:72px;border-top:1px dashed rgba(255,255,255,.3)}
.vx-free .vx-me{left:70px;top:90px}
.vx-free .vx-nx{left:210px;top:90px}
.vx-free .vx-me::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 0 2px #62d8ff,0 0 26px rgba(98,216,255,.55);opacity:0;scale:.9}
.vx-free .vx-c1{left:37px;top:57px}.vx-free .vx-c2{left:103px;top:57px}.vx-free .vx-c3{left:37px;top:123px}.vx-free .vx-c4{left:103px;top:123px}
.vx-free .vx-c1{animation:vx-hop1 10s infinite}.vx-free .vx-c2{animation:vx-hop2 10s infinite}
.vx-free .vx-c3{animation:vx-hop3 10s infinite}.vx-free .vx-c4{animation:vx-hop4 10s infinite}
.vx-free .vx-me::after{animation:vx-free-ring 10s infinite}
.vx-free .vx-nx{animation:vx-catch 10s infinite}
@keyframes vx-hop1{0%,8%{transform:none;opacity:1;animation-timing-function:ease-in}10.5%{transform:translate(35px,-13px)}13%{transform:translate(70px,-17px)}15.5%{transform:translate(105px,-13px);animation-timing-function:ease-out}18%,86%{transform:translate(140px,0) scale(1);opacity:1}92%{transform:translate(140px,0) scale(.6);opacity:0}94%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes vx-hop2{0%,20%{transform:none;opacity:1;animation-timing-function:ease-in}22.5%{transform:translate(35px,-13px)}25%{transform:translate(70px,-17px)}27.5%{transform:translate(105px,-13px);animation-timing-function:ease-out}30%,86%{transform:translate(140px,0) scale(1);opacity:1}92%{transform:translate(140px,0) scale(.6);opacity:0}94%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes vx-hop3{0%,32%{transform:none;opacity:1;animation-timing-function:ease-in}34.5%{transform:translate(35px,13px)}37%{transform:translate(70px,17px)}39.5%{transform:translate(105px,13px);animation-timing-function:ease-out}42%,86%{transform:translate(140px,0) scale(1);opacity:1}92%{transform:translate(140px,0) scale(.6);opacity:0}94%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes vx-hop4{0%,44%{transform:none;opacity:1;animation-timing-function:ease-in}46.5%{transform:translate(35px,13px)}49%{transform:translate(70px,17px)}51.5%{transform:translate(105px,13px);animation-timing-function:ease-out}54%,86%{transform:translate(140px,0) scale(1);opacity:1}92%{transform:translate(140px,0) scale(.6);opacity:0}94%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes vx-free-ring{0%,56%{opacity:0;scale:.9}62%,86%{opacity:1;scale:1}92%,100%{opacity:0;scale:.9}}
@keyframes vx-catch{0%,17%,20%,29%,32%,41%,44%,53%,56%,100%{scale:1}18%,30%,42%,54%{scale:1.07}}

/* 2. Level up the team: Nexus at the centre of the team; what it knows reaches each person in turn. Orbit 48s, pulses 6.6s. */
.vx-team .vx-stage{width:240px;height:240px}
.vx-team .vx-nx{left:120px;top:120px;z-index:2}
.vx-team .vx-ring{position:absolute;left:32px;top:32px;width:176px;height:176px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vx-team .vx-orbit{position:absolute;inset:0;animation:vx-spin 48s linear infinite}
.vx-team .vx-arm{position:absolute;left:120px;top:120px;width:88px;height:0;transform-origin:0 0;rotate:var(--a)}
.vx-team .vx-spoke{position:absolute;left:34px;top:0;width:34px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.28))}
.vx-team .vx-spoke::after{content:"";position:absolute;left:0;will-change:transform,opacity;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#62d8ff;box-shadow:0 0 10px #62d8ff;opacity:0;animation:vx-pulse 6.6s var(--d) infinite}
.vx-team .vx-av{left:88px;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;rotate:calc(var(--a) * -1)}
.vx-team .vx-av i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--t);color:#071a33;font:700 11px/1 var(--site-body,sans-serif);font-style:normal;letter-spacing:.02em;animation:vx-spin 48s linear infinite reverse}
.vx-team .vx-av i::before{content:attr(data-i)}
.vx-team .vx-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px #62d8ff,0 0 16px rgba(98,216,255,.6);opacity:0;animation:vx-got 6.6s var(--d) infinite}
@keyframes vx-spin{to{rotate:360deg}}
@keyframes vx-pulse{0%{translate:0 0;opacity:0}3%{opacity:1}12%{translate:28px 0;opacity:1}15%,100%{translate:28px 0;opacity:0}}
@keyframes vx-got{0%,11%{opacity:0;scale:.85}14%,20%{opacity:1;scale:1}30%,100%{opacity:0;scale:1}}

/* 3. Keep consequential decisions human: Nexus drafts the work; a person signs it off. 10s loop. */
.vx-human .vx-stage{width:260px;height:196px}
.vx-human .vx-doc{position:absolute;left:30px;top:10px;width:200px;height:98px;border-radius:14px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 18px 34px -22px rgba(2,10,24,.85);animation:vx-doc 10s infinite}
.vx-human .vx-doc img{position:absolute;left:14px;top:14px;width:20px;height:auto}
.vx-human .vx-bar{position:absolute;left:14px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);transform-origin:0 50%;scale:0 1}
.vx-human .vx-b1{top:46px;width:164px;animation:vx-bar1 10s infinite}
.vx-human .vx-b2{top:60px;width:132px;animation:vx-bar2 10s infinite}
.vx-human .vx-b3{top:74px;width:96px;animation:vx-bar3 10s infinite}
.vx-human .vx-ok{position:absolute;left:80px;top:128px;display:grid;place-items:center;width:100px;height:38px;border-radius:19px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:0;animation:vx-ok 10s infinite}
.vx-human .vx-ok::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#62d8ff;box-shadow:0 0 24px rgba(98,216,255,.55);opacity:0;animation:vx-fill 10s infinite}
.vx-human .vx-ok svg{position:absolute;width:20px;height:20px}
.vx-human .vx-ok .vx-k2{stroke:#071a33;stroke-width:2.2;opacity:0;animation:vx-fill 10s infinite}
.vx-human .vx-hand{position:absolute;left:0;top:0;width:26px;height:26px;opacity:0;animation:vx-hand 10s infinite}
.vx-human .vx-hand svg{width:26px;height:26px;stroke:none}
.vx-human .vx-hand i{position:absolute;left:20px;top:18px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d9f4ff;color:#071a33;font:700 9px/1 var(--site-body,sans-serif);font-style:normal}
.vx-human .vx-hand i::before{content:attr(data-i)}
@keyframes vx-doc{0%{opacity:0;translate:0 6px}5%,86%{opacity:1;translate:0 0}94%,100%{opacity:0;translate:0 0}}
@keyframes vx-bar1{0%,6%{scale:0 1}14%,100%{scale:1 1}}
@keyframes vx-bar2{0%,12%{scale:0 1}20%,100%{scale:1 1}}
@keyframes vx-bar3{0%,18%{scale:0 1}26%,100%{scale:1 1}}
@keyframes vx-ok{0%,28%{opacity:0;scale:.94}34%,54%{opacity:1;scale:1}56%{scale:.95}58%,86%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes vx-fill{0%,56%{opacity:0}58%,100%{opacity:1}}
@keyframes vx-hand{0%,38%{opacity:0;translate:232px 196px}42%{opacity:1;translate:224px 186px;animation-timing-function:cubic-bezier(.2,.8,.2,1)}54%{opacity:1;translate:132px 146px;scale:1}56%{scale:.88}58%{scale:1;translate:132px 146px}62%{opacity:1;animation-timing-function:ease-in}72%,100%{opacity:0;translate:226px 150px}}

/* Pale variant (.vx-light): the same scenes on white-to-tint tiles with the site's own ink, for comparison with the navy tiles. */
body main.homepage .home-vision .home-points.vx-cards.vx-light>article.vx-card{color:#202d32;background-color:#fff;
 background-image:radial-gradient(90% 55% at 8% 0%,rgba(98,216,255,.16) 0%,rgba(98,216,255,0) 62%),linear-gradient(150deg,#ffffff 0%,var(--vx-b) 100%);
 box-shadow:inset 0 0 0 1px #d6e2ea,0 26px 50px -40px rgba(7,26,51,.35)}
.vx-light .vx-free{--vx-b:#f1f6fa}.vx-light .vx-team{--vx-b:#e8f1f7}.vx-light .vx-human{--vx-b:#dfecf5}
body main.homepage .home-vision .vx-light .vx-card h3{color:var(--site-ink,#202d32)}
body main.homepage .home-vision .vx-light .vx-card p{color:var(--site-muted,#606b70)}
.vx-light .vx-scene svg{stroke:#14638f}
.vx-light .vx-node{background:#fff;box-shadow:inset 0 0 0 1px #d6e2ea,0 14px 28px -18px rgba(20,99,143,.45)}
.vx-light .vx-chip{background:#fff;box-shadow:inset 0 0 0 1px #d6e2ea,0 8px 18px -12px rgba(20,99,143,.4)}
.vx-light .vx-free .vx-link{border-top-color:#b9d3e4}
.vx-light .vx-free .vx-me::after{box-shadow:0 0 0 2px #2180b8,0 0 22px rgba(33,128,184,.35)}
.vx-light .vx-team .vx-ring{box-shadow:inset 0 0 0 1px #c9dce9}
.vx-light .vx-team .vx-spoke{background:linear-gradient(90deg,rgba(33,128,184,.1),rgba(33,128,184,.35))}
.vx-light .vx-team .vx-spoke::after{background:#2180b8;box-shadow:0 0 10px rgba(33,128,184,.6)}
.vx-light .vx-team .vx-av i{box-shadow:inset 0 0 0 1px #c9dce9}
.vx-light .vx-team .vx-av::after{box-shadow:0 0 0 2px #2180b8,0 0 14px rgba(33,128,184,.45)}
.vx-light .vx-human .vx-doc{background:#fff;box-shadow:inset 0 0 0 1px #d6e2ea,0 18px 34px -22px rgba(20,99,143,.45)}
.vx-light .vx-human .vx-bar{background:#c9dce9}
.vx-light .vx-human .vx-ok{background:#fff;box-shadow:inset 0 0 0 1px #b9d3e4}
.vx-light .vx-human .vx-ok::before{background:#14638f;box-shadow:0 10px 24px -10px rgba(20,99,143,.6)}
.vx-light .vx-human .vx-ok .vx-k2{stroke:#fff}
.vx-light .vx-human .vx-hand svg path{fill:#071a33;stroke:#fff}
.vx-light .vx-toggle{background:#fff;color:#14638f;box-shadow:inset 0 0 0 1px #d6e2ea}
.vx-light .vx-toggle:hover{background:#f4f8fb}

/* pause button (top right of each card) */
.vx-toggle{position:absolute;right:16px;top:16px;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:#fff;cursor:pointer;opacity:.6;transition:opacity .2s ease,background-color .2s ease}
.vx-card:hover .vx-toggle,.vx-toggle:focus-visible,.vx-card.is-paused .vx-toggle{opacity:1}
.vx-toggle:hover{background:rgba(255,255,255,.22)}
.vx-toggle:active{transform:scale(.94)}
.vx-toggle:focus-visible{outline:2px solid #62d8ff;outline-offset:2px}
.vx-toggle svg{width:12px;height:12px;fill:currentColor;stroke:none}
.vx-toggle .vx-play,.vx-card.is-paused .vx-toggle .vx-pause{display:none}
.vx-card.is-paused .vx-toggle .vx-play{display:block}

/* motion only while on screen and not paused */
.vx-card:not(.is-on) .vx-scene *,.vx-card:not(.is-on) .vx-scene *::before,.vx-card:not(.is-on) .vx-scene *::after,
.vx-card.is-paused .vx-scene *,.vx-card.is-paused .vx-scene *::before,.vx-card.is-paused .vx-scene *::after{animation-play-state:paused!important}

/* reduced motion: no movement, each scene shows its finished state */
@media (prefers-reduced-motion:reduce){
 .vx-scene *,.vx-scene *::before,.vx-scene *::after{animation:none!important}
 .vx-toggle{display:none}
 .vx-free .vx-chip{transform:translate(140px,0)}
 .vx-free .vx-me::after{opacity:1;scale:1}
 .vx-team .vx-lit .vx-av::after{opacity:1}
 .vx-human .vx-bar{scale:1 1}
 .vx-human .vx-ok{opacity:1}
 .vx-human .vx-ok::before,.vx-human .vx-ok .vx-k2{opacity:1}
}
/* Tablets and phones (James: "and ensure its mobiel optimised"): one centred column below 900px so no scene is squeezed into a
   narrow third; on phones the tile hugs its content, and the pause button gets a 44px touch area. */
.vx-toggle::after{content:"";position:absolute;inset:-6px;border-radius:50%}
@container (max-width:240px){.vx-stage{scale:.72}}
@media (max-width:900px){
 body main.homepage .home-vision .home-points.vx-cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
 body main.homepage .home-vision .home-points.vx-cards>article.vx-card{min-height:400px;padding:28px}}
@media (max-width:640px){
 body main.homepage .home-vision .home-points.vx-cards{gap:12px;margin-top:2rem}
 body main.homepage .home-vision .home-points.vx-cards>article.vx-card{min-height:0;padding:24px 20px 26px;border-radius:18px}
 body main.homepage .home-vision .vx-card h3{padding-inline:40px}
 .vx-scene{flex:none;height:220px;min-height:0;margin:8px -8px 10px}
 .vx-toggle{right:12px;top:12px}}
@media (prefers-contrast:more){body main.homepage .home-vision .home-points.vx-cards>article.vx-card{box-shadow:0 0 0 1px #071a33}}