/* ASG, round 3 (Kacper's notes, 9 Nov): the loader, five heroes, the ring you can turn, the dealt squad,
   the drawings, the hovers and the footer name. Loads after site.css. */
@font-face{font-family:'Big Shoulders Display';src:url(fonts/big-shoulders-900.woff2) format('woff2');font-weight:900;font-display:swap}

/* ---------- loader: pitch lines draw, a ball rolls to the spot, the badge lands, the name rises, the screen splits ---------- */
.aload{position:fixed;inset:0;z-index:999;cursor:pointer}
.aload .half{position:absolute;left:0;right:0;height:50.5%;background:var(--paper);will-change:transform}
.aload .half.top{top:0}.aload .half.bot{bottom:0}
.aload .lc{position:absolute;inset:0;overflow:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.aload .lpitch{position:absolute;inset:0;width:100%;height:100%}
.aload .lp{fill:none;stroke:rgba(10,24,77,.13);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}
.aload .lspot{fill:rgba(10,24,77,.2);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.aload .lball{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px;filter:drop-shadow(0 10px 12px rgba(10,24,77,.25));transform:translateX(-70vw)}
.aload .bw{fill:#fff}.aload .bn{fill:var(--ink)}.aload .bo{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.aload .lball svg{width:100%;height:100%;display:block;overflow:visible}
.aload .lpulse{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;border:3px solid var(--accent);opacity:0}
.aload .lmark{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:clamp(12px,1.6vw,20px);text-align:center;padding:24px}
.aload .lg{position:relative;width:clamp(104px,12vw,160px);opacity:0}
.aload .lg img{width:100%;height:auto;display:block}
.aload .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:150% 0;-webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}
.aload .nm{font:700 clamp(38px,6.4vw,92px)/.95 var(--fh);text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;padding-top:.05em}
.aload .ch{display:inline-block;transform:translateY(112%)}
.aload .sub{font:600 clamp(11px,1.15vw,15px)/1 var(--fb);letter-spacing:.24em;color:var(--muted);text-transform:uppercase;opacity:0}
.aload .seam{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--accent);transform:scaleX(0)}
.aload.run .lp{animation:ldraw 1s var(--ease) forwards}
.aload.run .lp+.lp{animation-delay:.25s}
.aload.run .lspot{animation:lpop .4s var(--ease) .6s forwards}
.aload.run .lball{animation:lroll 1.05s cubic-bezier(.16,.8,.3,1) .45s both,lshrink .4s cubic-bezier(.6,0,.8,.4) 1.55s forwards}
.aload.run .lpulse{animation:lpulse 1.2s var(--ease) 1.6s}
.aload.run .lpulse.p2{animation-delay:1.78s}
.aload.run .lg{animation:llogo .9s cubic-bezier(.34,1.56,.64,1) 1.7s both}
.aload.run .shine{animation:lshine .9s ease-in-out 2.45s forwards}
.aload.run .ch{animation:lrise .75s var(--ease) calc(2.2s + var(--i) * 32ms) both}
.aload.run .sub{animation:lsub .8s var(--ease) 2.75s forwards}
.aload.out .lc{opacity:0;transform:scale(.97)}
.aload.out .seam{animation:lseam .45s var(--ease) .15s forwards,lfo .3s 1s forwards}
.aload.out .half{transition:transform .8s cubic-bezier(.76,0,.24,1) .5s}
.aload.out .half.top{transform:translateY(-101%)}
.aload.out .half.bot{transform:translateY(101%)}
.aload.gone{display:none}
@keyframes ldraw{to{stroke-dashoffset:0}}
@keyframes lpop{to{transform:scale(1)}}
@keyframes lroll{from{transform:translateX(-70vw) rotate(-1080deg)}to{transform:none}}
@keyframes lshrink{to{transform:scale(0)}}
@keyframes lpulse{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(2.8)}}
@keyframes llogo{from{opacity:0;transform:scale(.3) rotate(-12deg);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes lshine{to{background-position:-50% 0}}
@keyframes lrise{to{transform:none}}
@keyframes lsub{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.24em}}
@keyframes lseam{to{transform:scaleX(1)}}
@keyframes lfo{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.aload{display:none}}

/* ---------- the hero: five versions, picked with the switcher at the bottom left ---------- */
.ghero{--e:0;--l:0;--tq:1}
.hv{position:absolute;inset:0;display:none;overflow:hidden;background:var(--paper)}
.gshade{z-index:1}.gtop{z-index:1}
html[data-hero=circle] .hv-circle,html[data-hero=split] .hv-split,html[data-hero=video] .hv-video,html[data-hero=duo] .hv-duo,html[data-hero=flood] .hv-flood{display:block}
html[data-hero]:not([data-hero=sketch]) .gstage canvas,html[data-hero]:not([data-hero=sketch]) .gstage .fallback,html[data-hero]:not([data-hero=sketch]) .gpaper{visibility:hidden}
html[data-hero]:not([data-hero=sketch]) .gtext{opacity:var(--tq);transform:translateY(calc((1 - var(--tq)) * 30px))}
html[data-hero]:not([data-hero=sketch]) .gshade{opacity:var(--tq)}
html[data-hero]:not([data-hero=sketch]) .gtop{opacity:calc(var(--e) * .9)}
.hv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 2. centre circle: the match opens out of the centre circle, the halfway line runs through it */
.hv-circle{--cr:calc((9vmax + 72vmax * var(--e) * var(--e)) * (.4 + .6 * var(--l)))}
.hv-circle img{clip-path:circle(var(--cr) at 50% 50%);transform:scale(calc(1.18 - .18 * var(--e)))}
.hc-line{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);transform:scaleY(var(--l));opacity:calc(1 - var(--e) * 2.2)}
.hc-ring{position:absolute;left:50%;top:50%;width:calc(var(--cr) * 2 + 26px);aspect-ratio:1;border:3px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);opacity:calc(var(--l) - var(--e) * 2.2)}
.hc-spot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(114,184,85,.25);opacity:calc(var(--l) - var(--e) * 3)}
html[data-hero=circle] .gtop{opacity:0}

/* 3. split screen: navy on the left, the match on the right, and the match takes the whole screen as you scroll */
.hv-split{background:var(--ink)}
.hv-split img{left:42%;width:58%;clip-path:polygon(calc(18% + (1 - var(--l)) * 82%) 0,100% 0,100% 100%,calc((1 - var(--l)) * 100%) 100%);transform:scale(calc(1.06 - .06 * var(--l) + .05 * var(--e)))}
.hp-seam{position:absolute;top:0;bottom:0;left:40%;width:60%;background:var(--accent);clip-path:polygon(19.2% 0,20.7% 0,3.33% 100%,1.83% 100%);opacity:var(--l)}
html[data-hero=split] .gtext .copy{max-width:min(620px,42vw)}
@media(max-width:760px){
  .hv-split img{left:0;width:100%;height:56%;clip-path:polygon(0 0,100% 0,100% calc(70% + (1 - var(--l)) * 30%),0 100%)}
  .hp-seam{display:none}
  html[data-hero=split] .gtext .copy{max-width:none}
}

/* 4. team colours: the match in navy and green, and it comes into full colour as you scroll */
.hv-duo{background:var(--ink);isolation:isolate}
.hd-g{filter:grayscale(1) contrast(1.15) brightness(1.05)}
.hd-a,.hd-b,.hd-mow{position:absolute;inset:0}
.hd-a{background:#8FD46C;mix-blend-mode:darken}
.hd-b{background:var(--ink);mix-blend-mode:lighten}
.hv-duo .hd-c{opacity:calc(var(--e) * 1.4);transform:scale(calc(1.1 - .1 * var(--e)))}
.hv-duo .hd-g{transform:scale(calc(1.1 - .1 * var(--e)))}
.hd-mow{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 7vw,transparent 7vw 14vw);transform:translateX(calc((1 - var(--l)) * -14vw));opacity:calc(var(--l) * (1 - var(--e) * 1.6))}

/* 5. floodlights: a dark ground, the lights swing on, and the match comes up as you scroll */
.hv-flood{background:#050B22}
.hv-flood img{filter:brightness(calc(.28 + .72 * var(--e))) saturate(calc(.15 + .85 * var(--e))) contrast(1.08);transform:scale(calc(1.08 - .08 * var(--e)))}
.beam{position:absolute;top:-20%;width:44vw;height:150%;background:linear-gradient(to bottom,rgba(235,245,255,.55),rgba(235,245,255,.08) 55%,transparent 80%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:calc(var(--l) * (1 - var(--e)) * .9);transform-origin:50% 0}
.beam.b1{left:-14vw;--r:-24deg}.beam.b2{left:8vw;--r:-12deg}.beam.b3{right:8vw;--r:12deg}.beam.b4{right:-14vw;--r:24deg}
.beam{transform:rotate(var(--r))}
html[data-hero=flood]:not(.intro) .beam{animation:sweep 6s ease-in-out infinite alternate}
.beam.b2,.beam.b4{animation-delay:-3s!important}
@keyframes sweep{from{transform:rotate(calc(var(--r) - 5deg))}to{transform:rotate(calc(var(--r) + 5deg))}}
.hf-vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(5,11,34,.85) 100%);opacity:calc(1 - var(--e) * .8)}

html[data-hero=split] .home .bar:not(.solid),html[data-hero=video] .home .bar:not(.solid),html[data-hero=duo] .home .bar:not(.solid),html[data-hero=flood] .home .bar:not(.solid){color:#fff}
html[data-hero=split] .home .gtop,html[data-hero=video] .home .gtop,html[data-hero=duo] .home .gtop,html[data-hero=flood] .home .gtop{opacity:0}
.aload.run .lpitch{animation:ldim .8s ease 1.8s forwards}
@keyframes ldim{to{opacity:.45}}

/* the switcher */
.hsw{position:fixed;left:clamp(12px,2vw,24px);bottom:calc(14px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 16px;border-radius:999px;background:rgba(10,24,77,.9);color:#fff;backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px rgba(10,24,77,.7);font:600 12px/1 var(--fb);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hsw.off{opacity:0;transform:translateY(20px);pointer-events:none}
.hsw-l{letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hsw-b{display:flex;gap:4px}
.hsw button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:700 14px/1 var(--fh);cursor:pointer;transition:background .25s,transform .25s var(--ease),color .25s}
.hsw button:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.hsw button.on{background:var(--accent);color:var(--ink)}
.hsw-n{min-width:9em;color:#fff}
.intro .hsw{opacity:0}
@media(max-width:600px){.hsw-l,.hsw-n{display:none}.hsw{padding:6px}}

/* ---------- the player ring: turn it yourself, hover to slow it, click a player ---------- */
.players-sec .sec-head{margin-bottom:0}
.ring-stage{height:clamp(500px,50vw,660px);perspective:2000px;display:grid;place-items:center;margin:clamp(-12px,-1vw,0px) 0 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ring-stage.drag{cursor:grabbing}
.ring{--w:clamp(176px,16vw,240px);position:relative;width:var(--w);aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateX(-6deg) rotateY(var(--a,0deg))}
.rc{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r,420px)) scale(1);-webkit-user-drag:none}
.rf,.rb{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rf{background:var(--ink);box-shadow:0 30px 50px -24px rgba(10,24,77,.55)}
.rf img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .7s var(--ease)}
.rf::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,24,77,.92),rgba(10,24,77,0) 50%);transition:opacity .5s}
.rf::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .4s var(--ease)}
.rf b{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font:700 clamp(21px,2.1vw,30px)/1 var(--fh);text-transform:uppercase}
.rf b::after{content:"Meet the player \2192";display:block;margin-top:6px;font:600 12px/1 var(--fb);letter-spacing:.06em;text-transform:none;color:var(--accent);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.rf .ex{position:absolute;left:12px;top:12px;z-index:1;font:600 11px/1 var(--fb);color:var(--ink);background:rgba(255,255,255,.9);padding:6px 9px;border-radius:99px}
.rc:hover .rf{transform:translateZ(26px) scale(1.03);box-shadow:0 40px 60px -26px rgba(10,24,77,.7)}
.rc:hover .rf::before{box-shadow:inset 0 0 0 3px var(--accent)}
.rc:hover .rf img{transform:scale(1.06)}
.rc:hover .rf b::after{opacity:1;transform:none}
.rc:focus-visible .rf{outline:3px solid var(--accent);outline-offset:3px}
.rb{transform:rotateY(180deg);background:repeating-linear-gradient(90deg,#fff 0 22px,#F1F5FB 22px 44px);border:1px solid var(--line);display:grid;place-items:center}
.rb img{width:56%;opacity:.9;pointer-events:none}
.ring-hint{display:flex;justify-content:center;gap:28px;margin:0 0 clamp(26px,3vw,40px);font:600 13px/1 var(--fb);color:var(--muted);letter-spacing:.04em}
.ring-hint span{display:inline-flex;align-items:center;gap:8px}
.ring-hint span::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.ring-cta{display:flex;justify-content:center;align-items:center;gap:clamp(32px,4.4vw,56px);flex-wrap:wrap}
@media(max-width:700px){.ring{--w:136px}.ring-stage{height:360px;perspective:1100px}.ring-hint{gap:16px;font-size:12px}}

/* ---------- our players page: the ring, then the squad dealt out like cards ---------- */
.page-head.tight{padding-bottom:0}
.players-sec.on-page{padding-bottom:clamp(8px,2vw,24px)}
.squad{padding-block:clamp(48px,6vw,88px) clamp(72px,8vw,120px);background:linear-gradient(180deg,#E6ECF6,var(--paper) 30%)}
.squad .sec-head{margin-bottom:clamp(28px,3.4vw,48px)}
.deck-zone{position:relative}
.squad .wrap{width:min(1440px,100% - 48px)}
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
@media(max-width:1100px){.fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.fc{position:relative;aspect-ratio:3/4;cursor:pointer;--rx:0deg;--ry:0deg;--mx:50%;--my:30%;--lift:0px;--s:1;scroll-margin-top:calc(var(--bar) + 24px)}
.fc-tilt{position:absolute;inset:0;transform:perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.fc-tilt::before{content:"";position:absolute;left:10%;right:10%;bottom:-4%;height:12%;border-radius:50%;background:rgba(10,24,77,.45);filter:blur(14px);transform:translateZ(-1px);opacity:.5;transition:opacity .5s,transform .5s var(--ease)}
.fc-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.fc.flipped .fc-flip{transform:rotateY(180deg)}
.fc-face,.fc-shine{border-radius:18px}
.fc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--ink);box-shadow:0 30px 50px -24px rgba(10,24,77,.55)}
.fc-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,24,77,.92),rgba(10,24,77,0) 50%)}
.fc-front::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .4s var(--ease)}
.fc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.fc-front .ex{position:absolute;left:12px;top:12px;z-index:1;font:600 11px/1 var(--fb);color:var(--ink);background:rgba(255,255,255,.9);padding:6px 9px;border-radius:99px}
.fc-front b{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font:700 clamp(19px,1.9vw,28px)/1 var(--fh);text-transform:uppercase}
.fc-front b small{display:block;margin-top:6px;font:600 12px/1 var(--fb);letter-spacing:.06em;text-transform:none;color:var(--accent);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.fc-back{transform:rotateY(180deg);background:linear-gradient(170deg,var(--ink),#14296A);color:#fff;display:grid;align-content:center;justify-items:center;gap:12px;padding:14% 12%;text-align:center}
.fc-back img{width:26%}
.fc-back h3{font-size:clamp(20px,1.8vw,26px);color:var(--accent)}
.fc-back p{font-size:clamp(12px,1vw,14px);line-height:1.45;color:rgba(255,255,255,.82)}
.fc-ex{font:600 10px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fgrid.dealt .fc:hover .fc-front::before{box-shadow:inset 0 0 0 3px var(--accent)}
.fgrid.dealt .fc:hover .fc-front b small{opacity:1;transform:none}
.fc-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 45%,transparent 60%);mix-blend-mode:overlay;opacity:0;transition:opacity .4s;transform:translateZ(2px)}
.fgrid.dealt .fc:hover{--lift:-16px;--s:1.04;z-index:3}
.fgrid.dealt .fc:hover .fc-shine{opacity:1}
.fgrid.dealt .fc:hover .fc-tilt::before{opacity:.8;transform:translateY(24px) scale(.9)}
.fgrid.dealt .fc:hover .fc-photo{transform:scale(1.06)}
.fgrid.dealt .fc.tilting .fc-tilt{transition:transform .12s linear}
.fgrid:not(.dealt) .fc{cursor:pointer}
.fgrid:not(.dealt) .fc-tilt::before{opacity:.25}
.deal-btn{position:absolute;left:50%;top:var(--bt,60%);transform:translateX(-50%);z-index:20}
.fgrid.dealt~.deal-btn,.fgrid.dealing~.deal-btn{opacity:0;pointer-events:none;transition:opacity .3s}
.deal-hint{animation:dhint 2.4s ease-in-out infinite}
@keyframes dhint{50%{transform:translateY(-8px) rotate(-1.5deg)}}

/* ---------- drawings: flat pictures that act out their step on a loop, only while on screen ---------- */
.ill{width:100%;height:auto;overflow:visible;display:block}
.ill .ilt{font-family:var(--fh);font-weight:700}
.ill *{transform-box:fill-box}
.js .ill{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.js .ill.in{opacity:1;transform:none}
.step .ill{max-width:220px}.zart .ill{max-width:360px}.tcard .ill{max-width:230px}
.qa-art{width:100%;max-width:320px;margin-top:clamp(18px,2.4vw,32px)}.qa-side .ill{max-width:none}
.ill.in .ty{transform-origin:0 50%;animation:ty 6s var(--ease) infinite both}
.ill.in .t2{animation-delay:.25s}.ill.in .t3{animation-delay:.5s}.ill.in .t4{animation-delay:.7s}
@keyframes ty{0%{transform:scaleX(0)}18%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.ill.in .press{transform-origin:center;animation:press 6s ease-in-out infinite}
@keyframes press{0%,34%{transform:none}38%{transform:scale(.88)}42%,100%{transform:none}}
.ill.in .pp{animation:pp 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes pp{0%,38%{transform:translate(-48px,64px) scale(.5) rotate(10deg);opacity:0}42%{opacity:1}64%{transform:none;opacity:1}76%{transform:translate(26px,-34px) scale(.8);opacity:0}100%{opacity:0}}
.ill.in .trail{stroke-dashoffset:0;animation:trail 6s linear infinite}
@keyframes trail{0%,38%{opacity:0}46%,70%{opacity:.45}82%,100%{opacity:0}}
.ill.in .float{animation:float 4.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.ill.in .halo{transform-origin:center;animation:halo 2.2s ease-out infinite}
@keyframes halo{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.ill .tk{stroke-dasharray:1;stroke-dashoffset:0}
.ill.in .tk{animation:tk 6s var(--ease) .4s infinite both}
.ill.in .k1{animation-delay:1.4s}.ill.in .k2{animation-delay:2.4s}.ill.in .k3{animation-delay:3.4s}
@keyframes tk{0%{stroke-dashoffset:1}8%,80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1}}
.ill.in .pen{animation:pen 6s ease-in-out infinite}
@keyframes pen{0%{transform:none}5%,10%{transform:translate(-77px,-60px)}22%,27%{transform:translate(-77px,-39px)}39%,44%{transform:translate(-77px,-18px)}56%,61%{transform:translate(-77px,3px)}75%,100%{transform:none}}
.ill.in .flag{transform-origin:0 50%;animation:flag 1.6s ease-in-out infinite alternate}
@keyframes flag{from{transform:skewY(-6deg) scaleX(.94)}to{transform:skewY(5deg) scaleX(1.04)}}
.ill.in .pop{animation:pop 5s cubic-bezier(.34,1.56,.64,1) infinite both}
.ill.in .pop.p2{animation-delay:.6s}.ill.in .pop.p3{animation-delay:1.2s}
@keyframes pop{0%{transform:translateY(16px) scale(.8);opacity:0}12%,82%{transform:none;opacity:1}94%,100%{transform:translateY(-6px);opacity:0}}
.ill.in .stamp{animation:stamp 4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes stamp{0%,12%{transform:translateY(-6px)}30%{transform:translateY(33px)}36%{transform:translateY(31px)}55%,100%{transform:translateY(-6px)}}
.ill.in .mark{transform-origin:center;animation:mark 4s ease-out infinite}
@keyframes mark{0%,29%{opacity:0;transform:scale(1.25)}34%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0}}
.ill.in .cloud{animation:cloud 7s ease-in-out infinite alternate}.ill.in .c2{animation-duration:9s;animation-direction:alternate-reverse}
@keyframes cloud{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.ill.in .con{animation:con .8s linear infinite}
@keyframes con{to{stroke-dashoffset:13}}
.ill.in .jet{transform-origin:50% 50%;animation:jet 3.2s ease-in-out infinite}
@keyframes jet{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(6px,-6px) rotate(-6deg)}}
.ill.in .ball{transform-origin:center;animation:ball 4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ball{0%{transform:translate(-96px,72px) rotate(-540deg);opacity:0}6%{opacity:1}32%{transform:none}80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(8px)}}
.ill.in .net{transform-origin:50% 0;animation:net 4s ease-out infinite}
@keyframes net{0%,30%{transform:none}38%{transform:scale(1.04,1.06)}52%,100%{transform:none}}
.ill.in .burst{transform-origin:center;animation:burst 4s ease-out infinite}
@keyframes burst{0%,30%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(1)}56%,100%{opacity:0;transform:scale(1.2)}}
.ill.in .dot{animation:dot 1.2s ease-in-out infinite}.ill.in .d2{animation-delay:.15s}.ill.in .d3{animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ill .run{stroke-dasharray:1}
.ill.in .run{animation:tk 5s var(--ease) .3s infinite both}.ill.in .r2{animation-delay:1.1s}
.ill.in .star{transform-origin:center;animation:star 3.6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes star{0%,10%{transform:scale(0) rotate(-90deg)}30%,80%{transform:none}92%,100%{transform:scale(0) rotate(40deg)}}
.ill.in .rt{animation:con 1s linear infinite reverse}
.ill .trav{transform:translate(98px,96px)}
.ill.in .trav{animation:trav 5s ease-in-out infinite}
@keyframes trav{0%{transform:translate(40px,118px);opacity:0}6%{opacity:1}15%{transform:translate(60px,96px)}28%{transform:translate(85px,97px)}42%{transform:translate(109px,99px)}55%{transform:translate(128px,78px)}70%{transform:translate(147px,41px)}80%{transform:translate(160px,40px);opacity:1}92%,100%{transform:translate(160px,40px);opacity:0}}
@media(prefers-reduced-motion:reduce){.js .ill{opacity:1;transform:none}.ill.in *{animation:none!important}.tick-in{animation:none}}

/* how it works page: a dot lights on the line as each step is reached, rows come in from their side */
.zdot{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--paper);border:3px solid rgba(10,24,77,.18);z-index:1;transition:background .4s,border-color .4s,box-shadow .6s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.zdot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 9px rgba(114,184,85,.18);transform:scale(1.15)}
.js .zrow.rv{opacity:1;transform:none;filter:none}
.js .zrow .zart,.js .zrow .ztxt{opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease),box-shadow .5s var(--ease)}
.js .zrow .zart{transform:translateX(-60px) rotate(-2deg)}
.js .zrow .ztxt{transform:translateX(60px)}
.js .zrow:nth-child(odd) .zart{transform:translateX(60px) rotate(2deg)}
.js .zrow:nth-child(odd) .ztxt{transform:translateX(-60px)}
.js .zrow.in .zart,.js .zrow.in .ztxt{opacity:1;transform:none}
.js .zrow.in .ztxt{transition-delay:.12s}
@media(max-width:820px){.zdot{left:21.5px}}

/* ---------- hovers ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,1));transition:transform .45s var(--ease),color .35s var(--ease),box-shadow .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ink);border-radius:inherit;transform:translateY(102%);transition:transform .5s var(--ease)}
.btn::after{content:"";width:0;height:14px;margin-left:-10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 7h13M8.5 1.5L14 7l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 7h13M8.5 1.5L14 7l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:width .4s var(--ease),margin .4s var(--ease)}
.btn:hover{filter:none;color:#fff;box-shadow:0 14px 30px -14px rgba(10,24,77,.55)}
.btn:hover::before{transform:none}
.btn:hover::after{width:16px;margin-left:0}
.btn:active{--bs:.95}
.mod .btn::before,.who-sec .btn::before{background:#fff}
.mod .btn:hover,.who-sec .btn:hover{color:var(--ink)}
.band .btn::before{background:var(--accent)}
.band .btn:hover{color:var(--ink)}
.tlink{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:4px}
.tlink::after{content:"\2192";display:inline-block;transition:transform .4s var(--ease)}
.tlink:hover{animation:ul .7s var(--ease)}
.tlink:hover::after{transform:translateX(5px)}
@keyframes ul{0%{background-position:100% 100%;background-size:100% 1.5px}45%{background-position:100% 100%;background-size:0 1.5px}46%{background-position:0 100%;background-size:0 1.5px}100%{background-position:0 100%;background-size:100% 1.5px}}
.bar nav a:not(.btn){position:relative}
.bar nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform .4s var(--ease)}
.bar nav a:not(.btn):hover::after,.bar nav a[aria-current]::after{transform:scaleX(1)}
.js .step.rv,.js .tcard.rv{transition:opacity 1.1s var(--ease),transform .6s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.step:hover,.tcard:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(10,24,77,.45);border-color:rgba(114,184,85,.6)}
.zart{transition:box-shadow .5s var(--ease)}
.zrow:hover .zart{box-shadow:0 40px 70px -40px rgba(10,24,77,.55)}
.card figure img{transition:transform .9s var(--ease)}
.card:hover figure img{transform:scale(calc(var(--z,1) * 1.05))}
.faq summary{transition:color .3s}
.faq summary:hover{color:var(--royal)}
.faq summary::after{transition:transform .45s var(--ease),color .3s}
.faq summary:hover::after{color:var(--accent)}
.faq details>p{overflow:hidden}
.js .rv{filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.js .rv.in{filter:none}
.gfacts div{transition:background .4s}
.gfacts div b{transition:color .3s}
.gfacts div:hover b{color:var(--royal)}

/* ---------- footer name: a heavier, tighter face with a slow sheen, rising in from the line ---------- */
.foot-name span{font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:900;letter-spacing:-.01em;line-height:1;padding-top:.04em;margin-top:-.06em;background:linear-gradient(100deg,var(--ink) 0 30%,#2E6B9E 42%,var(--accent) 50%,#2E6B9E 58%,var(--ink) 70% 100%) 0 0/200% 100% repeat-x;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
.js .foot-name span{clip-path:inset(100% 0 0 0);transform:translateY(30%);transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease)}
.js .foot-name.in span{clip-path:inset(-30% -3% -30% -3%);transform:none}
@keyframes sheen{from{background-position:0 0}to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.js .foot-name span{clip-path:none;transform:none;animation:none}.js .rv{filter:none}}

/* ---------- the goal: a curled shot, the net takes it, sparks ---------- */
.ill .strail{opacity:0}
.ill.in .sball{animation:sball 4.4s cubic-bezier(.25,.6,.3,1) infinite}
@keyframes sball{0%{transform:translate(-106px,80px) scale(1.45) rotate(-720deg);opacity:0}4%{opacity:1}14%{transform:translate(-54px,30px) scale(1.2) rotate(-360deg)}28%{transform:none}33%{transform:translate(3px,-2px) scale(.92)}40%{transform:none}84%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.ill.in .strail{animation:strail 4.4s ease-out infinite}
@keyframes strail{0%{stroke-dashoffset:1;opacity:.95}28%{stroke-dashoffset:0;opacity:.95}52%,100%{stroke-dashoffset:0;opacity:0}}
.ill.in .snet{transform-origin:124px 66px;animation:snet 4.4s ease-out infinite}
@keyframes snet{0%,27%{transform:none}33%{transform:translate(2px,-1px) scale(1.04)}41%{transform:scale(.99)}50%,100%{transform:none}}
.ill.in .sburst{transform-origin:124px 66px;animation:sburst 4.4s ease-out infinite}
@keyframes sburst{0%,28%{opacity:0;transform:scale(.3)}36%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(1.3)}}
.ill.in .spost{animation:spost 4.4s ease-out infinite}
@keyframes spost{0%,28%{transform:none}31%{transform:translateY(-1px)}34%{transform:translateY(.6px)}38%,100%{transform:none}}
/* ---------- the ring: players fly out from the middle into their places ---------- */
.js .ring-stage .rc{transition:transform 1.5s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms),opacity .7s ease calc(var(--i)*70ms)}
.js .ring-stage:not(.flown) .rc{transform:rotateY(calc(var(--i) * 360deg / var(--n) + 200deg)) translateZ(0px) scale(.25);opacity:0}
@media(prefers-reduced-motion:reduce){.js .ring-stage .rc{transition:none}.js .ring-stage:not(.flown) .rc{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r,420px));opacity:1}}
.squad{overflow-x:clip}

/* ---------- hero 2. match video: real match footage on a loop, a navy shade for the words ---------- */
.hv-video{background:var(--ink)}
.hv-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.04 + .06 * var(--e)))}
.hvv-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,24,77,.92),rgba(10,24,77,.35) 55%,rgba(10,24,77,.55));opacity:calc(.85 + .15 * var(--e))}

/* ---------- what we do: the section holds still and the cards slide in one at a time ---------- */
.hsec.hs-on{padding-block:0;height:calc(100svh + (var(--n) - 1) * 85vh)}
.hs-on .hs-pin{position:sticky;top:0;height:100svh;padding-top:calc(var(--bar) + 14px);display:flex;align-items:center;overflow:hidden}
.hs-on .hs-pin>.wrap{width:min(1200px,100% - 48px)}
.hs-on .sec-head{margin-bottom:clamp(18px,2.4vw,30px)}
.hs-on .stack{display:flex;gap:28px;will-change:transform}
.hs-on .card{position:relative;top:auto;flex:0 0 100%;min-height:min(500px,calc(100svh - var(--bar) - 230px));transform:scale(calc(1 - .07 * var(--off,0)));opacity:calc(1 - .55 * var(--off,0));transform-origin:50% 50%}
.hs-dots{display:none;justify-content:center;gap:10px;margin-top:18px}
.hs-on .hs-dots{display:flex}
.hs-dots i{width:9px;height:9px;border-radius:99px;background:var(--line);transition:width .4s var(--ease),background .4s}
.hs-dots i.on{width:30px;background:var(--accent)}
@media(max-width:760px){.hs-on .card figure{aspect-ratio:2/1}.hs-on .card .txt{padding:20px;gap:12px}.hs-on .stack{gap:16px}.hs-on .hs-pin>.wrap{width:calc(100% - 32px)}}

/* ---------- a living page: buttons breathe, dots pulse, pictures drift ---------- */
@keyframes bpulse{0%{box-shadow:0 0 0 0 rgba(114,184,85,.55)}70%,100%{box-shadow:0 0 0 16px rgba(114,184,85,0)}}
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(114,184,85,.6)}80%,100%{box-shadow:0 0 0 9px rgba(114,184,85,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.gtext .actions .btn,.band .btn,.ring-cta .btn,.ap-form .btn[type=submit],.bar .btn{animation:bpulse 2.6s ease-out infinite}
.gfacts b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--accent);vertical-align:.18em;animation:dpulse 2.2s ease-out infinite}
.gfacts div:nth-child(2) b::before{animation-delay:-.55s}.gfacts div:nth-child(3) b::before{animation-delay:-1.1s}.gfacts div:nth-child(4) b::before{animation-delay:-1.65s}
.step .ill,.zart .ill{animation:bob 4.5s ease-in-out infinite}
.step:nth-child(odd) .ill,.zrow:nth-child(odd) .ill{animation-delay:-2.2s}
#about figure img,.page-head~.sec figure img{animation:drift 14s ease-in-out infinite alternate}
.sn{position:relative}

/* ---------- about: who we help, three clear cards ---------- */
.who-sec .sec-head{margin-inline:auto}
.who-sec .sec-head .lead{color:rgba(255,255,255,.75)}
.who-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.who-card{position:relative;display:grid;align-content:start;gap:12px;padding:clamp(24px,2.6vw,36px);border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:transform .5s var(--ease),background .5s,border-color .5s}
.who-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.1);border-color:var(--accent)}
.who-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);margin-bottom:8px;animation:dpulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * -.8s)}
.who-ic svg{width:34px;height:34px}
.who-card h3{font:700 clamp(1.7rem,2.4vw,2.2rem)/1 var(--fh);text-transform:uppercase;color:#fff}
.who-sub{font-weight:600;color:var(--accent)}
.who-card p:not(.who-sub){color:rgba(255,255,255,.78)}
.who-card .tlink{color:#fff;margin-top:6px}
@media(max-width:860px){.who-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.gtext .actions .btn,.band .btn,.ring-cta .btn,.ap-form .btn[type=submit],.bar .btn,.gfacts b::before,.step .ill,.zart .ill,#about figure img,.page-head~.sec figure img,.who-ic{animation:none}}