/* ══════════════════════════════════════════════════════════════
   INTER PLACER FC

   COLOUR SYSTEM
   Every section carries its own palette by way of a theme class.
   Components read tokens (--bg, --fg, --card …) rather than fixed
   colours, so to re-skin a block you change one class in the HTML:

       t-paper   off-white, the default light block
       t-ink     near-black
       t-green   forest green (the goalkeeper colour)
       t-navy    deep blue, used for the fixture band
       t-blue    electric blue gradient, used for the sponsor pitch

   BRAND
   Electric blue #1261FF · Forest green #0F3B2E · Black #0D0D0D
   ══════════════════════════════════════════════════════════════ */

:root{
  --blue:#1261FF;
  --blue-lt:#4A8BFF;
  --blue-dk:#0B3FA8;
  --green:#0F3B2E;
  --green-lt:#5FC79E;
  --black:#0D0D0D;
  --display:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1200px;
  --nav-h:92px;      /* bar height at the top of the page */
  --nav-h-sm:66px;   /* bar height once you scroll */
}

/* ---------- section themes ---------- */
.t-paper{
  --bg:#F1F4F9; --fg:#0B0D12; --muted:#525C6B; --soft:#646E7D;
  --card:#FFFFFF; --line:rgba(11,13,18,.11); --line-str:rgba(11,13,18,.20);
  --accent:var(--blue); --ghost-line:rgba(11,13,18,.28); --ph:rgba(11,13,18,.05);
}
.t-ink{
  --bg:#0B0C0F; --fg:#FFFFFF; --muted:#A2A9B4; --soft:#868F9B;
  --card:#16181D; --line:rgba(255,255,255,.10); --line-str:rgba(255,255,255,.20);
  --accent:var(--blue-lt); --ghost-line:rgba(255,255,255,.34); --ph:rgba(255,255,255,.04);
}
.t-green{
  --bg:#0E3A2C; --fg:#FFFFFF; --muted:#B3D4C7; --soft:#93BCAA;
  --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.15); --line-str:rgba(255,255,255,.26);
  --accent:var(--green-lt); --ghost-line:rgba(255,255,255,.38); --ph:rgba(255,255,255,.06);
}
.t-navy{
  --bg:#0A1329; --fg:#FFFFFF; --muted:#AFBCD3; --soft:#94A6C4;
  --card:rgba(255,255,255,.055); --line:rgba(255,255,255,.13); --line-str:rgba(255,255,255,.24);
  --accent:var(--blue-lt); --ghost-line:rgba(255,255,255,.36); --ph:rgba(255,255,255,.05);
}
.t-blue{
  --bg:#0E48C4; --fg:#FFFFFF; --muted:#CBDDFF; --soft:#A8C4F5;
  --card:rgba(255,255,255,.11); --line:rgba(255,255,255,.24); --line-str:rgba(255,255,255,.40);
  --accent:#FFFFFF; --ghost-line:rgba(255,255,255,.55); --ph:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#F1F4F9;color:#0B0D12;
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;line-height:.95;margin:0;
}
.eyebrow{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:13px;color:var(--accent);margin:0 0 14px;
}
.eyebrow.dim{color:var(--soft)}

/* every themed block paints itself */
section, footer, header{background:var(--bg);color:var(--fg)}
.section{padding:92px 0}
.section-head{margin-bottom:42px}
.section-head h2{font-size:clamp(32px,5vw,52px)}
.section-head p{color:var(--muted);max-width:60ch;margin:14px 0 0}

/* ---------- topo pattern (inherits the section's accent) ---------- */
.topo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg fill='none' stroke='%231261FF' stroke-width='1.4' opacity='.5'%3E%3Cpath d='M-50 120 C 120 60, 240 190, 380 130 S 620 40, 760 110'/%3E%3Cpath d='M-50 160 C 130 100, 250 230, 385 170 S 615 85, 760 150'/%3E%3Cpath d='M-50 205 C 140 145, 260 270, 390 212 S 610 130, 760 195'/%3E%3Cpath d='M-50 255 C 150 195, 270 315, 395 258 S 605 180, 760 245'/%3E%3Cpath d='M-50 310 C 160 250, 280 365, 400 308 S 600 235, 760 300'/%3E%3Cpath d='M-50 370 C 170 310, 290 420, 405 363 S 595 295, 760 360'/%3E%3Cpath d='M-50 435 C 180 375, 300 480, 410 423 S 590 360, 760 425'/%3E%3Cpath d='M-50 505 C 190 445, 310 545, 415 488 S 585 430, 760 495'/%3E%3Cpath d='M-50 580 C 200 520, 320 615, 420 558 S 580 505, 760 570'/%3E%3Cpath d='M-50 660 C 210 600, 330 690, 425 633 S 575 585, 760 650'/%3E%3C/g%3E%3C/svg%3E");
  background-size:700px 700px;
}
.t-green .topo{filter:hue-rotate(108deg) saturate(.8)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.10em;font-size:15px;
  padding:14px 26px;border-radius:3px;border:2px solid transparent;
  transition:transform .12s ease,background .2s ease,border-color .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#0B4FDB;border-color:#0B4FDB}
.t-blue .btn-primary{background:#fff;color:var(--blue-dk);border-color:#fff}
.t-blue .btn-primary:hover{background:#EAF0FF;border-color:#EAF0FF}
.t-green .btn-primary{background:var(--green-lt);color:#06251B;border-color:var(--green-lt)}
.t-green .btn-primary:hover{background:#7EDDB7;border-color:#7EDDB7}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--ghost-line)}
.btn-ghost:hover{border-color:currentColor;background:var(--ph)}
.btn-sm{padding:10px 18px;font-size:13px}

/* ══════════════ TOP STRIP ══════════════ */
.topstrip{background:#08090C;color:#8B93A0;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.08)}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topstrip a:hover{color:#fff}
.topstrip .socials{display:flex;gap:18px;font-weight:600}
.topstrip .note{letter-spacing:.06em;text-transform:uppercase;font-family:var(--display);font-weight:700;font-size:12px}

/* ══════════════ NAV — split menu, crest in the middle ══════════
   The crest is deliberately larger than the bar and overhangs the
   bottom edge, so it reads big while the bar itself stays slim.
   On scroll the bar shortens and the crest pulls back inside it.
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(9,10,13,.94);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#fff;overflow:visible;
}
.nav .wrap{
  display:flex;align-items:center;justify-content:center;gap:0;
  height:var(--nav-h);
  transition:height .3s cubic-bezier(.4,0,.2,1);
}
.navlinks{display:flex;align-items:center;gap:2px}
.nav-l{order:0;flex:1 1 0;justify-content:flex-end}
.nav-r{order:2;flex:1 1 0;justify-content:flex-start}
.navlinks a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:15px;padding:10px 15px;color:#E6E8EB;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.navlinks a:hover{color:#fff;border-bottom-color:var(--blue)}
.navlinks a[aria-current="page"]{color:#fff;border-bottom-color:var(--blue)}
.navlinks a.soon{color:#6E7681}
.navlinks a.soon:after{
  content:'SOON';font-size:9px;letter-spacing:.14em;margin-left:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  padding:2px 5px;border-radius:2px;vertical-align:middle;
}

.brand{
  order:1;flex:0 0 auto;margin:0 34px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.brand img{
  height:112px;width:auto;display:block;flex:0 0 auto;
  margin-bottom:-30px;              /* the overhang */
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
  transition:height .3s cubic-bezier(.4,0,.2,1),margin-bottom .3s cubic-bezier(.4,0,.2,1);
}
/* the wordmark stays in the page for search engines and screen
   readers, but the crest carries the identity visually */
.brand .name{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.nav.stuck .wrap{height:var(--nav-h-sm)}
.nav.stuck .brand img{height:54px;margin-bottom:0}
.nav.stuck .brand{margin:0 22px}

.nav .btn{display:none}
.burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.22);color:#fff;
  width:46px;height:42px;border-radius:3px;align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative}
.burger span:before,.burger span:after{content:'';position:absolute;left:0;width:20px;height:2px;background:#fff}
.burger span:before{top:-6px}.burger span:after{top:6px}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;background:#07080B;overflow:hidden}
/* the hero fills the first screen exactly — top strip (38) + nav */
.slides{position:relative;height:calc(100vh - 38px - var(--nav-h));min-height:540px}
@supports (height:100svh){
  .slides{height:calc(100svh - 38px - var(--nav-h))}
}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;display:flex;align-items:center}
.slide.on{opacity:1;visibility:visible}

/* Slide 1 is painted from the stylesheet so the hero appears with the
   page. Slides 2 and 3, the cards and the Who We Are block load their
   pictures only when they are about to be needed — see the loader at
   the foot of the file. Browsers that understand WebP get the smaller
   file; everything else falls back to the JPEG.                      */
.slide.s1{--bg-img:url('images/hero-1.jpg')}
@media (max-width:820px){ .slide.s1{--bg-img:url('images/hero-1-sm.jpg')} }
@supports (background-image:image-set(url('a.webp') type('image/webp'))){
  .slide.s1{--bg-img:image-set(url('images/hero-1.webp') type('image/webp'),
                               url('images/hero-1.jpg')  type('image/jpeg'))}
  @media (max-width:820px){
    .slide.s1{--bg-img:image-set(url('images/hero-1-sm.webp') type('image/webp'),
                                 url('images/hero-1-sm.jpg')  type('image/jpeg'))}
  }
}
.slide-bg{position:absolute;inset:0;overflow:hidden;background:#07080B}
.slide-photo{
  position:absolute;inset:0;background-image:var(--bg-img);
  background-size:cover;background-position:center 42%;transform:scale(1.04);
}
.slide.on .slide-photo{animation:kenburns 16s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.slide-bg .topo{position:absolute;inset:-10%;opacity:.14;animation:drift 60s linear infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-700px,-350px)}}
.slide-bg:after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(6,7,11,.93) 0%, rgba(6,7,11,.74) 44%, rgba(6,7,11,.22) 100%),
    linear-gradient(0deg,  rgba(6,7,11,.86) 0%, rgba(6,7,11,0) 46%);
}
.slide .wrap{position:relative;z-index:2;width:100%;padding-top:28px;padding-bottom:76px}
.slide-inner{max-width:720px;color:#fff;position:relative;z-index:0}
.slide-inner::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-8%;right:-16%;top:-10%;bottom:-10%;
  background:radial-gradient(78% 78% at 34% 50%,
    rgba(5,7,11,.58) 0%, rgba(5,7,11,.34) 52%, rgba(5,7,11,0) 78%);
}
.slide .eyebrow{color:#E4EEFF;text-shadow:0 2px 10px rgba(4,6,10,.6)}
.slide h1{font-size:clamp(42px,7.4vw,92px);letter-spacing:-.005em}
.slide h1 em{font-style:normal;color:var(--blue-lt);display:block}
.slide p.lede{color:#C9CFD8;font-size:clamp(16px,2.1vw,19px);max-width:52ch;margin:22px 0 32px;line-height:1.65}
.slide-cta{display:flex;flex-wrap:wrap;gap:12px}
.sl-nav{position:absolute;left:0;right:0;bottom:26px;z-index:5}
.sl-nav .wrap{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.dots{display:flex;gap:9px}
.dots button{width:34px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.28);padding:0;transition:background .25s}
.dots button[aria-current="true"]{background:var(--blue)}
.arrows{display:flex;gap:8px}
.arrows button{
  width:42px;height:42px;border-radius:3px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;
}
.arrows button:hover{background:rgba(255,255,255,.16);border-color:#fff}

/* ══════════════ FIXTURE BAND ══════════════ */
.fixture{position:relative;overflow:hidden}
.fixture .topo{position:absolute;inset:0;opacity:.13}
.fixture .wrap{position:relative;z-index:2;padding-top:48px;padding-bottom:48px}
.fx-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;margin-bottom:28px}
.fx-title{flex:1;min-width:260px}
.fx-title h2{font-size:clamp(28px,4vw,42px)}
.fx-title .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px 34px}
.fx-title .meta > div{display:flex;flex-direction:column;gap:5px;position:relative;padding-left:14px}
.fx-title .meta > div:before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--blue);border-radius:1px}
.fx-title .meta .lab{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--soft)}
.fx-title .meta b{color:var(--fg);font-weight:600;font-size:15px}
.countdown{display:flex;gap:10px}
.cd-cell{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:12px 14px;text-align:center;min-width:70px}
.cd-cell .n{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;display:block}
.cd-cell .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:20px;transition:border-color .2s,background .2s}
.game:hover{border-color:var(--line-str)}
.game .gtag{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.game .opp{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;margin:10px 0 12px;line-height:1.05}
.game .when{color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.game .when b{color:var(--fg);font-weight:600}
.game .score{
  font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em;color:#fff;
  background:rgba(18,97,255,.85);border-radius:3px;padding:3px 12px;display:inline-block;
}
.game .score.win {background:#12874B}    /* won  */
.game .score.loss{background:#BE3A32}    /* lost */
.game .score.draw{background:rgba(18,97,255,.85)}  /* drawn — the original blue */
.games.empty{grid-template-columns:1fr}
.games-soon{
  background:var(--card);border:1px dashed var(--line-str);border-radius:5px;
  padding:30px 24px;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;
}
.games-soon .t{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:22px;color:var(--fg);
}
.games-soon .s{color:var(--muted);font-size:14.5px}
.fx-foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fx-foot .fine{color:var(--soft);font-size:13px}

/* ══════════════ CTA CARDS ══════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;overflow:hidden;border-radius:7px;
  background:var(--card);border:1px solid var(--line);
  padding:34px 30px 30px;min-height:250px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(11,13,18,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 14px 34px rgba(11,13,18,.10)}
.card .topo{position:absolute;inset:0;opacity:.055;z-index:1}
.card > *{position:relative;z-index:3}
/* photo layer — sits under a colour scrim so the text stays dominant */
.card .card-photo{
  position:absolute;inset:0;z-index:0;
  background-image:var(--card-img);background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.card:hover .card-photo{transform:scale(1.07)}
.card .card-photo:after{
  content:'';position:absolute;inset:0;
  background:var(--card-scrim,linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.95)));
}
.card.feature{--card-scrim:linear-gradient(160deg,rgba(18,97,255,.68) 0%,rgba(11,55,150,.90) 100%)}
.card.green{--card-scrim:linear-gradient(160deg,rgba(18,80,60,.70) 0%,rgba(10,44,32,.92) 100%)}
.card h3{font-size:29px;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px;margin:0 0 22px;flex:1}
.card.feature{background:linear-gradient(160deg,#1261FF,#0B3FA8);border-color:transparent;color:#fff}
.card.feature .eyebrow{color:#D2E2FF}
.card.feature p{color:#D6E4FF}
.card.feature .topo{opacity:.16;filter:brightness(3)}
.card.feature .btn-primary{background:#fff;color:var(--blue-dk);border-color:#fff}
.card.green{background:linear-gradient(160deg,#12503C,#0C3123);border-color:transparent;color:#fff}
.card.green .eyebrow{color:#7FDCB8}
.card.green p{color:#B5D8C9}
.card.green .topo{opacity:.14;filter:hue-rotate(108deg) brightness(2.4)}
.card.green .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.card .badge{
  position:absolute;top:18px;right:18px;z-index:3;
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  padding:5px 9px;border-radius:2px;color:#fff;
}

/* ══════════════ CLUB STORY ══════════════ */
.story{position:relative;overflow:hidden}
.story > .topo{position:absolute;inset:0;opacity:.10;z-index:1}
.story .wrap{position:relative;z-index:3}
/* photo blended into the green — luminosity keeps the hue, the scrim
   keeps the headline readable over the busy left-hand side */
.story-photo{
  position:absolute;inset:0;z-index:0;
  background-image:var(--story-img);background-size:cover;background-position:center 55%;
  opacity:.7;mix-blend-mode:luminosity;
}
.story-photo:after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,58,44,.90) 0%,rgba(14,58,44,.60) 44%,rgba(14,58,44,.30) 100%);
}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-art{position:relative;display:flex;justify-content:center;align-items:center}
.story-art .glow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(95,199,158,.30),transparent 68%);filter:blur(30px)}
/* crest and wordmark share one box, so the name always centres
   on the shield rather than on the column */
.crest-lockup{
  position:relative;margin:0;width:min(290px,100%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.crest-lockup img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 48px rgba(0,0,0,.5))}
.crest-lockup .wordmark{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,22px);letter-spacing:.13em;line-height:1;
  color:#fff;text-align:center;text-shadow:0 4px 18px rgba(0,0,0,.55);
  max-width:100%;                      /* never wider than the crest */
}
.meanings{display:grid;gap:22px;margin-top:30px}
.meaning{display:flex;gap:16px;align-items:flex-start}
.meaning{align-items:center}
.meaning .ico{
  flex-shrink:0;width:66px;height:66px;border-radius:5px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.meaning .ico svg{width:32px;height:32px;display:block}
.meaning h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.10em;font-size:15px;margin:0 0 5px;color:var(--fg)}
.meaning p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

/* ══════════════ SQUAD ══════════════ */
.team-grid{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:stretch}
.coach{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:0 1px 2px rgba(11,13,18,.05)}
.coach .photo{aspect-ratio:4/5;background:var(--ph);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.coach .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.coach .photo .topo{position:absolute;inset:0;opacity:.10}
.coach .photo .ph{position:relative;color:var(--soft);font-size:13px;text-align:center;padding:0 20px;line-height:1.5}
.coach .info{padding:22px}
.coach .info .role{font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:11.5px;color:var(--accent);text-transform:uppercase}
.coach .info h3{font-size:27px;margin:8px 0 10px}
.coach .info p{color:var(--muted);font-size:14.5px;margin:0}
.roster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  grid-auto-rows:minmax(118px,1fr);gap:12px;height:100%;
}
.player{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:18px 20px;display:flex;align-items:center;gap:18px;
  transition:border-color .2s,transform .15s,box-shadow .2s;
}
.player:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,13,18,.08)}
.player.vacant{border-style:dashed;background:transparent}
.player.vacant .num{color:var(--soft)}
.player.vacant .nm{color:var(--soft);font-weight:500}
.player .num{
  font-family:var(--display);font-weight:800;font-size:46px;line-height:.9;
  color:var(--blue);flex:0 0 78px;width:78px;text-align:center;
}
.player .num.long{font-size:36px}      /* keeps 3-digit numbers inside the column */
.player .who{min-width:0}
.player .who .nm{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .who .ps{color:var(--soft);font-size:11px;letter-spacing:.10em;text-transform:uppercase;margin-top:4px;white-space:nowrap}

/* ══════════════ NEWS ══════════════ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.post:hover{transform:translateY(-4px);border-color:var(--blue)}
.post .thumb{aspect-ratio:16/10;position:relative;background:var(--ph);display:flex;align-items:center;justify-content:center;overflow:hidden}
.post .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.post:hover .thumb img{transform:scale(1.05)}
.post .thumb .topo{position:absolute;inset:0;opacity:.13}
.post .thumb .ph{position:relative;color:var(--soft);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--display);font-weight:700}
.post .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.post .date{font-size:12px;color:var(--soft);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.post h3{font-size:22px;margin:9px 0 10px;line-height:1.15}
.post p{color:var(--muted);font-size:14.5px;margin:0 0 16px;flex:1}
.presented{
  border-top:1px dashed var(--line-str);padding-top:13px;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;color:var(--soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.presented .slot{color:var(--blue);border:1px dashed rgba(18,97,255,.5);padding:3px 8px;border-radius:2px;background:rgba(18,97,255,.07)}

/* ══════════════ SPONSORSHIP ══════════════ */
.sponsor{position:relative;overflow:hidden;color:#fff;background:linear-gradient(150deg,#1261FF 0%,#0B3FA8 55%,#082C77 100%)}
.sponsor > .topo{position:absolute;inset:0;opacity:.16;filter:brightness(2.6)}
.sponsor .wrap{position:relative;z-index:2}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.tier{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:30px 26px;display:flex;flex-direction:column;backdrop-filter:blur(4px);color:#fff}
.tier.best{background:#fff;color:#0B0D12;border-color:#fff;position:relative;box-shadow:0 18px 44px rgba(4,20,60,.35)}
.tier.best:before{
  content:'MOST POPULAR';position:absolute;top:-11px;left:26px;
  background:var(--green);color:#fff;font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.16em;padding:5px 11px;border-radius:2px;
}
.tier .tname{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:.04em}
.tier .price{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;margin:14px 0 4px}
.tier .price small{font-size:14px;font-weight:600;letter-spacing:.08em;opacity:.7}
.tier ul{list-style:none;padding:0;margin:20px 0 24px;flex:1;display:grid;gap:11px}
.tier li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:#EAF0FF}
.tier.best li{color:#39424F}
.tier li:before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;background:#fff;border-radius:1px;transform:rotate(45deg)}
.tier.best li:before{background:var(--blue)}
.tier .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.tier.best .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.sponsor-note{margin-top:28px;color:#CBDDFF;font-size:14.5px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sponsor-note a.u{color:#fff;text-decoration:underline}
.sponsor .btn-primary{background:#fff;color:var(--blue-dk);border-color:#fff}
.sponsor .btn-primary:hover{background:#E8EFFF;border-color:#E8EFFF}

/* ══════════════ NEWSLETTER ══════════════ */
.signup{position:relative;overflow:hidden}
.signup > .topo{position:absolute;inset:0;opacity:.10}
.signup .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.signup h2{font-size:clamp(28px,3.6vw,40px)}
.signup p{color:var(--muted);margin:12px 0 0;font-size:15.5px}
/* channel list */
.socials-grid{display:grid;gap:9px;align-self:start;margin-top:16px}
.social{
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.07);border:1px solid var(--line-str);
  border-radius:6px;padding:11px 14px;
  transition:background .2s,border-color .2s,transform .15s;
}
.social .ico{
  flex-shrink:0;width:36px;height:36px;border-radius:4px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.social .ico svg{width:19px;height:19px;display:block}
.social .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.social .nm{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.10em;font-size:15px;color:#fff;line-height:1;
}
.social .hd{font-size:12.5px;color:var(--muted)}
.social .go{margin-left:auto;font-size:15px;color:var(--green-lt);flex-shrink:0}
.social.live:hover{
  background:rgba(255,255,255,.13);border-color:var(--green-lt);transform:translateY(-2px);
}
.social.soon{opacity:.62;border-style:dashed}
.signup .reach{margin-top:22px;font-size:15px;color:var(--muted)}
.signup .reach a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.signup .reach a:hover{color:var(--green-lt)}
.social.soon .hd{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:var(--soft);
}

/* ══════════════ PARTNERS ══════════════ */
.partners .wrap{padding-top:60px;padding-bottom:60px}
.partners-head{text-align:center;margin-bottom:32px}
.partners-head .eyebrow{margin-bottom:8px}
.partners-head p{color:var(--muted);font-size:14px;margin:0}
.plogos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.plogo{
  height:100px;border:1px dashed var(--line-str);border-radius:6px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--soft);font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px;
  transition:border-color .2s,color .2s,background .2s;
}
.plogo:hover{border-color:var(--blue);color:var(--blue);background:rgba(18,97,255,.05)}
.plogo.real{border-style:solid;border-color:var(--line);background:var(--card);padding:16px;box-shadow:0 1px 2px rgba(11,13,18,.05)}
.plogo.real:hover{border-color:var(--blue)}
.plogo.real img{max-height:100%;max-width:100%;width:auto;object-fit:contain}

/* ══════════════ FOOTER ══════════════ */
footer{padding:60px 0 28px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px}
.f-brand img{height:82px;width:auto;margin-bottom:16px}
.f-brand p{color:var(--muted);font-size:14px;margin:0;max-width:34ch}
footer h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:var(--fg);margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer ul a{color:var(--muted);font-size:14.5px}
footer ul a:hover{color:var(--green-lt)}
.f-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--soft);font-size:13px}

/* ══════════════ RESPONSIVE ══════════════ */
@media (min-width:1600px){
  :root{--maxw:1360px}
  .section{padding:110px 0}
  .roster{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media (min-width:2000px){ :root{--maxw:1500px} body{font-size:17px} }

@media (max-width:1200px){
  .story-grid{gap:44px}
  .team-grid{grid-template-columns:280px 1fr;gap:30px}
  .navlinks a{padding:10px 10px;font-size:14.5px}
  .brand{margin:0 18px}
}
@media (max-width:1024px){
  .games{gap:10px}.game{padding:16px}.game .opp{font-size:20px}
  .cards{gap:12px}.card{padding:26px 22px 24px;min-height:0}.card h3{font-size:24px}
  .news-grid{gap:12px}
  .tiers{gap:12px}.tier{padding:26px 20px}.tier .price{font-size:37px}
  .plogo{height:84px;font-size:11px}
}
@media (max-width:1080px){
  /* the bar shrinks here, so the hero grows to keep filling the screen */
  .slides{height:calc(100vh - 38px - var(--nav-h-sm))}
  @supports (height:100svh){
    .slides{height:calc(100svh - 38px - var(--nav-h-sm))}
  }
  .navlinks,.nav .btn{display:none}
  .burger{display:flex;order:1;margin-left:auto}
  .nav .wrap{justify-content:flex-start;height:var(--nav-h-sm);gap:14px;flex-wrap:wrap}
  .brand{order:0;margin:0}
  .brand img{height:74px;margin-bottom:-16px}
  .nav.stuck .wrap{height:var(--nav-h-sm)}
  .nav.stuck .brand img{height:50px;margin-bottom:0}
  .nav.stuck .brand{margin:0}

  /* open menu: the bar grows and the groups wrap onto full-width rows */
  .nav.open .wrap{height:auto;padding-bottom:12px;align-items:center;row-gap:0}
  .nav.open .brand img{margin-bottom:0}
  .nav.open .navlinks{
    display:flex;flex-direction:column;align-items:stretch;
    flex-basis:100%;width:100%;gap:0;
  }
  .nav.open .nav-l{order:2}
  .nav.open .nav-r{order:3}
  .nav.open .navlinks a{
    padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;
  }
  .nav.open .nav-r a:last-child{border-bottom:0}
  .nav.open .btn{display:inline-flex;order:4;flex-basis:100%;margin:14px 0 2px}

  .games,.cards,.news-grid,.tiers{grid-template-columns:1fr}
  /* once these two stack, the tight desktop gap reads as cramped —
     the "Most Popular" tag also needs clearance above its card */
  .news-grid{gap:22px}
  .tiers{gap:30px}
  .crest-lockup{width:min(230px,66%)}
  .story-grid{grid-template-columns:1fr;gap:44px}
  .story-art{order:-1}
  .team-grid{grid-template-columns:1fr;align-items:start}
  .coach{max-width:340px}
  .roster{height:auto}
  .signup .wrap{grid-template-columns:1fr;gap:28px}
  .plogos{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  /* the old wash was tuned for dark graphics; with a real photograph
     it crushed the picture to black, so it now only darkens the band
     the text actually sits in */
  .slide-bg:after{
    background:
      linear-gradient(90deg, rgba(6,7,11,.40) 0%, rgba(6,7,11,.16) 66%, rgba(6,7,11,.04) 100%),
      linear-gradient(180deg,
        rgba(6,7,11,.22) 0%,
        rgba(6,7,11,.44) 14%,
        rgba(6,7,11,.82) 30%,
        rgba(6,7,11,.84) 70%,
        rgba(6,7,11,.50) 87%,
        rgba(6,7,11,.28) 100%);
  }
}
@media (max-width:780px){
  .section{padding:72px 0}
  .coach{max-width:100%}
  .coach .photo{aspect-ratio:16/9}
  .roster{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));grid-auto-rows:minmax(104px,auto);height:auto}
  .player .num{flex:0 0 58px;width:58px;font-size:36px}
  .player .num.long{font-size:26px}
  .player{gap:14px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .topstrip .note{display:none}
  .fx-top{flex-direction:column;align-items:flex-start}
  .countdown{width:100%}
  .cd-cell{flex:1;min-width:0;padding:10px 6px}
  .cd-cell .n{font-size:26px}
  .plogos{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr}
  .brand img{height:60px;margin-bottom:-12px}
  .nav.stuck .brand img{height:44px;margin-bottom:0}
  .crest-lockup{width:min(190px,58%)}
  .news-grid{gap:20px}
  .tiers{gap:28px}
  .roster{grid-template-columns:1fr 1fr;gap:8px;grid-auto-rows:minmax(88px,auto);height:auto}
  .player{padding:14px;gap:11px}
  .player .num{font-size:32px;flex:0 0 50px;width:50px}
  .player .num.long{font-size:23px}
  .player .who .nm{font-size:14px}
  .slide-bg:after{
    background:linear-gradient(180deg,
      rgba(6,7,11,.24) 0%,
      rgba(6,7,11,.44) 16%,
      rgba(6,7,11,.82) 32%,
      rgba(6,7,11,.84) 68%,
      rgba(6,7,11,.48) 86%,
      rgba(6,7,11,.30) 100%);
  }
  .slide-cta{gap:10px}
  .slide-cta .btn{flex:1;min-width:150px}
  .fx-title .meta{gap:12px 22px}
  .social{padding:11px 13px;gap:12px}
  .social .ico{width:34px;height:34px}
}
@media (max-width:380px){
  .roster,.plogos{grid-template-columns:1fr}
  .brand img{height:54px}
  /* the hero is short here, so the text sits higher up the picture */
  .slide-bg:after{
    background:linear-gradient(180deg,
      rgba(6,7,11,.32) 0%,
      rgba(6,7,11,.64) 10%,
      rgba(6,7,11,.86) 24%,
      rgba(6,7,11,.86) 72%,
      rgba(6,7,11,.46) 88%,
      rgba(6,7,11,.28) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   SPONSORS PAGE   (sponsors.html)
   Everything above this line is shared by every page on the site.
   Everything below is used only by the sponsor page.
   ══════════════════════════════════════════════════════════════ */

/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;background:#07080B;color:#fff;--bg-img:url('images/hero-2.jpg')}
@media (max-width:820px){ .phero{--bg-img:url('images/hero-2-sm.jpg')} }
@supports (background-image:image-set(url('a.webp') type('image/webp'))){
  .phero{--bg-img:image-set(url('images/hero-2.webp') type('image/webp'),
                            url('images/hero-2.jpg')  type('image/jpeg'))}
  @media (max-width:820px){
    .phero{--bg-img:image-set(url('images/hero-2-sm.webp') type('image/webp'),
                              url('images/hero-2-sm.jpg')  type('image/jpeg'))}
  }
}
.phero-photo{position:absolute;inset:0;background-image:var(--bg-img);
  background-size:cover;background-position:center 46%}
.phero .topo{position:absolute;inset:-10%;opacity:.13}
.phero:after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,7,11,.95) 0%,rgba(6,7,11,.80) 46%,rgba(6,7,11,.32) 100%),
             linear-gradient(0deg, rgba(6,7,11,.88) 0%,rgba(6,7,11,0) 54%)}
.phero .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:88px}
.phero-inner{max-width:740px}
.phero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,6.4vw,74px);line-height:.95;margin:0 0 20px;
  text-shadow:0 3px 22px rgba(4,6,10,.6)}
.phero .lead{font-size:clamp(16px,1.9vw,19px);line-height:1.62;color:#D9E4F5;
  max-width:630px;margin:0 0 30px}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap}
.phero .eyebrow{color:#8FB6FF}
@media (max-width:640px){ .phero .wrap{padding-top:58px;padding-bottom:58px} }

/* ---------- "why back this team" ---------- */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px 26px}
.vcard h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:21px;letter-spacing:.03em;margin:0 0 10px;color:var(--fg)}
.vcard p{margin:0;font-size:15px;line-height:1.62;color:var(--muted)}
@media (max-width:760px){ .vgrid{grid-template-columns:1fr} }

/* ---------- where your brand shows up ---------- */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.place{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px 22px}
.place .k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--accent);margin:0 0 11px}
.place h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;margin:0 0 8px;color:var(--fg)}
.place p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){ .places{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .places{grid-template-columns:1fr} }

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step .n{font-family:var(--display);font-weight:800;font-size:52px;line-height:1;
  color:var(--accent);opacity:.45;margin-bottom:6px}
.step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;margin:0 0 8px;color:var(--fg)}
.step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (max-width:760px){ .steps{grid-template-columns:1fr;gap:22px} }

/* ---------- enquiry form ---------- */
.enquire{position:relative;overflow:hidden}
.enquire .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;
  display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start}
@media (max-width:900px){ .enquire .wrap{grid-template-columns:1fr;gap:34px} }
.sform{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sform .full{grid-column:1/-1}
.sform label{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
  margin:0 0 7px;color:#C5E3D5}
.sform input,.sform select,.sform textarea{
  width:100%;padding:13px 14px;border-radius:5px;font-family:var(--body);font-size:15px;
  color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);
}
.sform textarea{min-height:132px;resize:vertical}
.sform input::placeholder,.sform textarea::placeholder{color:rgba(255,255,255,.66)}
.sform input:focus,.sform select:focus,.sform textarea:focus{
  outline:2px solid var(--green-lt);outline-offset:1px;background:rgba(255,255,255,.16)}
.sform select option{color:#0B0D12;background:#fff}
.sform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sform .send{margin-top:4px}
.form-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:#A9CDBB}
@media (max-width:640px){ .sform{grid-template-columns:1fr} }

/* ---------- small shared bits ---------- */
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--accent);margin-bottom:18px}
.thanks{min-height:62vh;display:flex;align-items:center}

/* stacked hero buttons should match width on small phones */
@media (max-width:520px){
  .phero .cta{flex-direction:column;align-items:stretch}
  .phero .cta .btn{width:100%}
}