/* ASG Football Agency: cool white, navy ink, green from the logo. Manrope, self-hosted. */
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope.woff2) format('woff2');font-weight:400 800;font-display:swap}
:root{
  --ink:#0A184D;--paper:#F5F7FB;--muted:#4D5878;--line:rgba(10,24,77,.13);
  --accent:#72B855;--on-accent:#0A184D;--royal:#22478A;
  --deep:#0A184D;--on-deep:#EEF2FA;--on-deep-muted:rgba(238,242,250,.72);--deep-line:rgba(238,242,250,.16);
  --card:#FFFFFF;--radius:14px;--btn-r:999px;
  --form-bg:rgba(255,255,255,.05);--field:rgba(255,255,255,.07);
  --fh:'Barlow Condensed','Arial Narrow',sans-serif;--fb:'Manrope',system-ui,sans-serif;--hw:700;--track:.003em;
  --foot-bg:#E8EDF6;--foot-ink:#0A184D;--foot-w:800;--logo-w:700;--bar-ink:#0A184D
}

/* header: every page in the top bar, the logo in the middle (Kacper's word, 9 Nov) */
.logo img{height:52px;width:auto;display:block}
.bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.bar .logo{grid-column:2;grid-row:1}
.bar nav{margin:0;gap:28px;align-items:center;font-size:15px;grid-row:1}
.bar .nl{grid-column:1;justify-self:start}
.bar .nr{grid-column:3;justify-self:end}
.btn.sm{height:42px;padding:0 20px;font-size:14.5px}
.bar .burger{grid-column:3;grid-row:1;justify-self:end;margin:0}
@media(max-width:1100px){.bar nav{display:none}.bar .burger{display:block}}
.foot .logo img{height:96px}
.foot-name,.foot-base{border-top-color:var(--line)}
.foot-name span{display:inline-block}

/* hero: a pencil drawing of the match that turns into the real thing from the grass up */
.ghero{height:260vh;position:relative;background:var(--paper)}
.gstage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#F1F3F7}
.gstage canvas,.gstage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gstage canvas{display:block}
.js .gstage .fallback{opacity:0}
.no-gl .gstage .fallback{opacity:1}
.gshade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,24,77,.86) 0%,rgba(10,24,77,.5) 30%,rgba(10,24,77,0) 56%);pointer-events:none}
.gpaper{position:absolute;inset:0 0 auto;height:20%;background:linear-gradient(to bottom,rgba(241,243,247,.92),rgba(241,243,247,0));opacity:calc(1 - var(--lit,0));transition:opacity .6s var(--ease);pointer-events:none}
.gtop{position:absolute;inset:0 0 auto;height:24%;background:linear-gradient(to bottom,rgba(245,247,251,.8),rgba(245,247,251,0));opacity:var(--lit,0);transition:opacity .6s var(--ease);pointer-events:none}
.gtext{position:absolute;left:0;right:0;bottom:calc(100lvh - 100svh + clamp(32px,7vh,76px));color:#fff;z-index:2}
.gtext .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.gtext .copy{display:grid;gap:22px}
.gtext h1{max-width:16ch}
.gtext .lead{color:rgba(255,255,255,.9);max-width:58ch}
.gtext .tlink{color:#fff}
@media(max-width:760px){.gtext .wrap{grid-template-columns:1fr}.season{width:100%}.gtext .copy{gap:16px}}

/* facts */
.gfacts{border-bottom:1px solid var(--line)}
.gfacts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.gfacts div{padding:clamp(26px,3.4vw,40px) 24px clamp(26px,3.4vw,40px) 0;display:grid;gap:4px}
.gfacts div+div{padding-left:24px;border-left:1px solid var(--line)}
.gfacts b{font-family:var(--fh);font-size:clamp(1.4rem,2.2vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.gfacts span{color:var(--muted);font-size:15px}
@media(max-width:760px){.gfacts .wrap{grid-template-columns:1fr 1fr}.gfacts div:nth-child(3){padding-left:0;border-left:0}.gfacts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.about figure{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.about figure img{width:100%;height:100%;object-fit:cover}
.about .copy{display:grid;gap:22px}
.about .copy p{color:var(--muted);max-width:56ch}
.about .sign{font-weight:600;color:var(--ink)}
@media(max-width:860px){.about{grid-template-columns:1fr}.about figure{aspect-ratio:4/3}}

/* the coloured band before the questions */
.band{background:var(--royal);color:#fff;padding-block:clamp(56px,7vw,96px)}
.band .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px}
.band h2{max-width:none}
.band p{margin-inline:auto}
.band p{color:rgba(255,255,255,.82);max-width:46ch;margin-top:14px}
.band .btn{background:#fff;color:var(--ink)}

/* how it works page: steps down a line */
.line{list-style:none;display:grid;max-width:860px;counter-reset:s}
.line li{counter-increment:s;position:relative;display:grid;gap:10px;padding:0 0 clamp(36px,4vw,52px) 76px}
.line li::before{content:counter(s);position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 18px/1 var(--fh)}
.line li::after{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:var(--line)}
.line li:last-child::after{display:none}
.line p{color:var(--muted);max-width:60ch}
.line .when{color:var(--royal);font-weight:600}

/* our players: waiting for Gerardo's photos */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.pslot{aspect-ratio:4/5;border:1.5px dashed var(--line);border-radius:var(--radius);display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-size:15px;background:var(--card)}
@media(max-width:760px){.pgrid{grid-template-columns:1fr 1fr}}

/* spam trap */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}


/* the floating apply pill: shows after the hero, hides when the footer arrives (as on allsortedsystems.com) */
.pill{position:fixed;z-index:80;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,160%);opacity:0;display:flex;align-items:center;gap:10px;padding:13px 22px 13px 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;white-space:nowrap;cursor:pointer;box-shadow:0 18px 40px -12px rgba(10,24,77,.55),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .55s var(--ease),opacity .4s,background .3s}
.pill.on{transform:translate(-50%,0);opacity:1}
.pill:hover{background:var(--royal)}
.pill svg{width:22px;height:22px;color:var(--accent)}
.pill b{font-size:15.5px;font-weight:700}
.pill span{font-size:13px;color:rgba(255,255,255,.62)}
@media(max-width:680px){.pill span{display:none}}

/* the pop-up form */
.mod{border:0;padding:0;margin:auto;width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 24px);border-radius:calc(var(--radius) * 1.4);background:var(--deep);color:var(--on-deep);overflow:auto;box-shadow:0 40px 120px -30px rgba(0,0,0,.6)}
.mod::backdrop{background:rgba(10,24,77,.55);backdrop-filter:blur(4px)}
.mod[open]{animation:modIn .45s var(--ease)}
@keyframes modIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
.mod-in{display:grid;gap:14px;padding:clamp(24px,4vw,44px)}
.mod h2{font-size:clamp(1.8rem,3.4vw,2.6rem);padding-right:44px}
.mod .lead{color:var(--on-deep-muted)}
.mod .form{padding:0;background:none;margin-top:8px}
.mod-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.mod-x:hover{background:rgba(255,255,255,.16)}

/* scroll motion: headings rise word by word, photos settle as they come in, hero words follow the loader */
.js .wr .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .wr .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--k) * 55ms)}
.js .wr.in .w>span{transform:none}
.zoom{overflow:hidden}
.zoom img{transform:scale(var(--z,1.14));will-change:transform}
.intro .gtext .copy>*{opacity:0;transform:translateY(28px)}
.gtext .copy>*{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gtext .copy>:nth-child(2){transition-delay:.12s}.gtext .copy>:nth-child(3){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .wr .w>span{transform:none}.zoom img{transform:none}}

/* headings: a strong condensed face, as on match-day graphics */
h1,h2,.foot-name span{text-transform:uppercase;line-height:.93}
h1{font-size:clamp(3.1rem,5.6vw,5.8rem)}
h2{font-size:clamp(2.7rem,5.2vw,4.9rem)}
h3{font-size:clamp(1.5rem,2vw,1.9rem);text-transform:uppercase;letter-spacing:.01em;line-height:1}
.faq summary{font-family:var(--fb);font-weight:700;letter-spacing:-.01em}
.gfacts b{text-transform:uppercase;font-size:clamp(1.6rem,2.5vw,2.3rem)}
.foot-name span{font-size:13.5vw;line-height:.82}
.page-head .wrap{justify-items:center;text-align:center}
.page-head .lead{max-width:60ch}
.center{text-align:center}
.sec-head.center{margin-inline:auto;justify-items:center;text-align:center}
.sec-head.center .lead{max-width:62ch}
.sn{display:inline-block;font:700 13px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}

/* the moving ticker */
.tick{background:var(--ink);color:#fff;overflow:hidden;padding:18px 0;border-block:1px solid rgba(255,255,255,.08)}
.tick-in{display:flex;width:max-content;animation:tick 32s linear infinite}
.tick span{font:700 clamp(22px,2.6vw,34px)/1 var(--fh);text-transform:uppercase;letter-spacing:.02em;padding:0 28px;display:flex;align-items:center;gap:56px;white-space:nowrap}
.tick span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:-28px}
@keyframes tick{to{transform:translateX(-50%)}}

.players-sec{overflow:hidden;background:linear-gradient(180deg,var(--paper),#E6ECF6)}

/* how it works, home: four illustrated steps on one line */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.steps-track{position:absolute;left:12%;right:12%;top:clamp(70px,7vw,100px);height:3px;background:var(--line);border-radius:3px}
.steps-track i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--accent);border-radius:3px}
.step{position:relative;display:grid;gap:12px;align-content:start;justify-items:center;text-align:center;padding:clamp(18px,2vw,28px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 40px -30px rgba(10,24,77,.35)}
.step .ill{max-width:190px}
.step p{color:var(--muted);font-size:15.5px}
.steps-more{margin-top:clamp(28px,3vw,44px)}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}.steps-track{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}


/* how it works page: illustration and text swap sides down a line that fills */
.zig{position:relative;display:grid;gap:clamp(40px,6vw,88px)}
.zline{position:absolute;left:50%;top:40px;bottom:40px;width:3px;margin-left:-1.5px;background:var(--line);border-radius:3px}
.zline i{position:absolute;inset:0 0 auto;height:calc(var(--p,0) * 100%);background:var(--accent);border-radius:3px}
.zrow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,140px);align-items:center}
.zrow:nth-child(odd) .zart{order:2}
.zart{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) * 1.4);padding:clamp(24px,4vw,56px);display:grid;place-items:center;box-shadow:0 30px 60px -40px rgba(10,24,77,.4)}
.zart .ill{max-width:300px}
.ztxt{display:grid;gap:16px;justify-items:start}
.ztxt .lead{color:var(--muted)}
.ztxt ul,.who-list ul{list-style:none;display:grid;gap:10px}
.ztxt li{display:flex;gap:12px;align-items:center;font-weight:600}
.ztxt li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
@media(max-width:820px){.zline{left:20px}.zrow{grid-template-columns:1fr;gap:24px;padding-left:44px}.zrow:nth-child(odd) .zart{order:0}}

/* questions: heading and help on the left, the questions on the right */
.qa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,120px);align-items:start}
.qa-side{position:sticky;top:calc(var(--bar) + 32px);display:grid;gap:20px;justify-items:start}
.qa-side .lead{color:var(--muted)}
.qa-side .ill{max-width:260px}
.qa .faq{max-width:none}
.fgroups{display:grid;gap:clamp(36px,4vw,56px)}
.fgroup{display:grid;gap:14px}
.fgroup h3{color:var(--royal)}
@media(max-width:860px){.qa{grid-template-columns:1fr}.qa-side{position:static}.qa-side .ill{max-width:200px}}

/* about: values and who we help */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.tcard{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.6vw,36px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.tcard .ill{max-width:200px}
.tcard p{color:var(--muted)}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
.who-sec{background:var(--ink);color:#fff}
.who{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.who-side .lead{color:rgba(255,255,255,.75);margin-top:20px}
.who-list{display:grid;gap:0}
.who-list div{display:grid;gap:8px;padding:26px 0;border-top:1px solid rgba(255,255,255,.16)}
.who-list b{font:700 clamp(1.7rem,2.4vw,2.2rem)/1 var(--fh);text-transform:uppercase;color:var(--accent)}
.who-list p{color:rgba(255,255,255,.8)}
@media(max-width:860px){.who{grid-template-columns:1fr}}

/* contact: the line centred on top, details left, form right */
.contact-top{background:var(--deep);color:var(--on-deep);padding-top:calc(var(--bar) + clamp(48px,6vw,84px));text-align:center}
.contact-top .wrap{display:grid;gap:18px;justify-items:center}
.contact-top .lead{color:var(--on-deep-muted);max-width:52ch}
.contact-top+.contact{padding-top:clamp(40px,5vw,72px)}
.contact-top+.contact .contact-copy h2{display:none}
.contact-top+.contact .contact-copy>.lead{display:none}
.direct{display:grid;gap:12px;margin-top:8px}
.dc{display:grid;gap:6px;padding:20px 22px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid var(--deep-line);transition:background .3s,border-color .3s}
a.dc:hover{background:rgba(255,255,255,.1);border-color:var(--accent)}
.dc .dt{font:700 1.35rem/1 var(--fh);text-transform:uppercase;letter-spacing:.01em}
.dc .dd{color:var(--on-deep-muted);font-weight:600;overflow-wrap:anywhere}
.dc-f{background:none}
.contact{background-image:radial-gradient(circle at 100% 0,rgba(114,184,85,.14),transparent 40%)}
.direct .dc{display:grid;justify-content:stretch;gap:6px;padding:20px 22px;border:1px solid var(--deep-line)}