@font-face{font-family:'Roboto';src:url('../font/Roboto-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../font/Roboto-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../font/Roboto-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../font/Roboto-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../font/Roboto-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{--blue:#0038c2;--dark:#040e28;--ink:#0a1020;--muted:#5d6472;--line:rgba(4,14,40,.12);--pad:min(2.2vw,32px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Roboto',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.shell{width:min(1320px,calc(100vw - 48px));margin:0 auto}
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;padding:22px 0;opacity:1;transform:none;animation:fadeHeader .85s ease both;background:var(--dark);transition:padding .3s ease}
.site-header.scrolled{backdrop-filter:blur(16px);padding:14px 0}
@keyframes fadeHeader{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.header-inner{width:min(1480px,calc(100vw - 28px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.brand img{height:58px;width:auto;max-width:200px;object-fit:contain;display:block}
.site-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nav-link{position:relative;color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.95}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-toggle{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:transparent;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:#fff}
.nav-toggle span:first-child{top:17px}
.nav-toggle span:last-child{top:25px}
main{overflow:visible}
.hero-stack{position:relative;background:#000}
.stack-panel{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-items:end}
.stack-panel:nth-child(1){z-index:1}
.stack-panel:nth-child(2){z-index:2}
.stack-panel:nth-child(3){z-index:3}
.stack-panel:nth-child(4){z-index:4}
.stack-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,14,40,.86) 0%,rgba(4,14,40,.38) 35%,rgba(4,14,40,.08) 65%,transparent 100%);z-index:1}
.stack-panel.panel-blue::after{background:linear-gradient(to top,rgba(4,14,40,.94) 0%,rgba(0,56,194,.28) 42%,rgba(0,56,194,.06) 70%,transparent 100%)}
.stack-media{position:absolute;inset:0;overflow:hidden}
.stack-media img{width:100%;height:100%;object-fit:cover;will-change:transform}.stack-media img.slide{position:absolute!important;inset:0!important}
.stack-copy{position:relative;z-index:2;color:#fff;padding:0 var(--pad) 7vh;max-width:min(1420px,100vw);will-change:opacity,transform}
.stack-spacer{height:100vh}
.eyebrow{margin:0 0 18px;padding:0;background:none!important;color:inherit;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.stack-copy h1,.stack-copy h2,.page-hero h1,.section-head h2,.section-title{margin:0;font-weight:900;line-height:.92;letter-spacing:-.06em;text-align:left}
.stack-copy h1,.page-hero h1{font-size:clamp(3.5rem,8.6vw,8rem);color:#fff}
.stack-copy h2{font-size:clamp(2.7rem,6.4vw,5.8rem);color:#fff}
.stack-copy .lead{max-width:720px;margin:20px 0 0;color:rgba(255,255,255,.94);font-size:clamp(0.95rem,1.6vw,1.22rem)}
.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;border:1px solid transparent;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:transform .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.48)}
.btn-ghost.dark{color:var(--blue);border-color:rgba(0,56,194,.28)}
.feature-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.feature-chip{padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.honours-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:42px;max-width:1200px;align-items:stretch}
.honours-grid div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 18px 20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.honour-trophy{width:auto;height:64px;margin:0 auto auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.honours-grid strong{display:block;font-size:clamp(2rem,4vw,3rem);line-height:1;font-weight:900;margin-top:18px}
.honours-grid span{display:block;margin-top:8px;color:rgba(255,255,255,.88);font-size:13px}
.honour-founding{justify-content:center !important}
.honour-founding strong{font-size:clamp(2.4rem, 5vw, 3.6rem) !important;margin-top:0 !important}
.honours-copy{padding-bottom:12vh}
.honours-copy h2{max-width:18ch}
.content-section{padding:92px 0;background:#fff}
.content-section.alt{background:#fff}
.content-section.dark{background:var(--dark);color:#fff}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.section-head h2,.section-title{font-size:clamp(2.1rem,4.2vw,4rem);color:var(--ink)}
.section-head .eyebrow,.content-section .eyebrow{color:var(--blue)}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.text-link::after{content:'';transition:transform .2s ease}
.text-link:hover::after{transform:translateX(3px)}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-card{background:#fff;overflow:hidden}
.image-card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.news-card div{padding:18px 0 0}
.news-card h3{margin:0;font-size:1.38rem;line-height:1.02;letter-spacing:-.04em;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tile-card{position:relative;min-height:340px;overflow:hidden;display:block}
.tile-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile-card:hover img{transform:scale(1.04)}
.tile-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,14,40,.88),rgba(4,14,40,.1))}
.tile-card span{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;font-size:1.28rem;font-weight:700;line-height:1.05;color:#fff}
.partner-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;background:#fff}
.partner-track{display:flex;align-items:center;gap:60px;min-width:max-content;animation:marquee 70s linear infinite}
.partner-track img{height:60px;width:auto;object-fit:contain;opacity:.8;filter:grayscale(1) contrast(1.03);transition:opacity .3s ease,filter .3s ease;flex-shrink:0}
.partner-track img:hover{opacity:1;filter:grayscale(0) contrast(1)}
.partner-marquee:hover .partner-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.partner-card{display:flex;align-items:center;justify-content:center;padding:28px;border:1px solid var(--line);background:#fff;overflow:hidden}
.partner-card img{height:76px;object-fit:contain;filter:grayscale(1) contrast(1.03)}
.insta-section{padding:92px 0 0;background:#fff}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:32px}
.insta-tile{position:relative;overflow:hidden;aspect-ratio:1/1;display:block;background:#f2f2f2}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.insta-tile:hover img{transform:scale(1.06)}
.insta-hover{position:absolute;inset:0;background:rgba(0,56,194,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .3s ease}
.insta-tile:hover .insta-hover{opacity:1}
.page-hero{padding:170px 0 54px}
.page-hero .eyebrow{color:var(--blue)}
.page-hero h1{color:var(--ink)}
.page-hero .lead{max-width:780px;color:var(--muted);font-size:1.07rem;margin-top:16px}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.team-panel{display:grid;grid-template-columns:40% 1fr;border:1px solid var(--line);background:#fff;overflow:hidden}
.team-panel img{height:100%;min-height:340px;object-fit:cover}
.team-panel>div{padding:24px}
.team-panel h2{margin:0 0 12px;color:var(--blue);font-size:1.85rem;letter-spacing:-.05em;line-height:.98}
.team-panel p{color:var(--muted)}
.membership-grid,.contact-grid,.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.info-card{padding:26px;border:1px solid var(--line);background:#fff;overflow:hidden}
.info-card h2{margin:0 0 12px;color:var(--blue);font-size:1.85rem;letter-spacing:-.05em;line-height:.98}
.info-card p{color:var(--muted)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.prose p{margin:0 0 18px;font-size:0.98rem;color:#273043;line-height:1.7}
.prose p:last-child{margin-bottom:0}
.card-grid .info-card{background:transparent;border:none;padding-left:0;padding-right:0}.card-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr))!important}.structure-section{padding:48px!important}.structure-section .card-grid{gap:32px}
.card-grid .info-card p{color:var(--muted);font-size:0.97rem;line-height:1.65}
.sofa-embed-wrap{width:100%;overflow:hidden}
.sofa-frame{width:100%;min-height:560px;border:none;background:transparent;display:block}
.sofa-frame-tall{min-height:780px}
.sofa-frame-squad{min-height:700px}
.contact-form-wrap{max-width:680px}
.contact-form-card{display:grid;gap:18px}
.form-group{display:grid;gap:6px}
.form-group label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;font-size:1rem;color:var(--ink);border-radius:0;outline:none;transition:border-color .2s ease}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d6472' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.footer-wordmark-wrap{background:#fff;overflow:hidden;margin:0;padding:0;display:block;width:100%}
.footer-wordmark{width:100%;background:#fff;overflow:hidden;margin:0;padding:0;display:block}
.footer-wordmark span{display:block;font-family:'Roboto',Arial,sans-serif;font-weight:900;font-size:100px;line-height:0.78;letter-spacing:-.06em;color:var(--dark);white-space:nowrap;padding:0;margin:0;position:relative;top:0.06em}
.site-footer{background:var(--dark);color:#fff;padding:36px 0 0;margin:0}
.footer-shell{width:min(1400px,calc(100% - 80px));margin:0 auto}
.footer-upper{display:grid;grid-template-columns:200px 280px 1fr 200px;gap:0;align-items:start;padding-bottom:40px}
.footer-col-label{display:block;margin:0 0 16px;color:var(--blue);font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.footer-navblock{padding-right:40px}
.footer-navblock nav{display:flex;flex-direction:column}
.footer-navblock nav a{color:#fff;text-decoration:none;font-size:13px;line-height:1;margin-bottom:14px;display:block;opacity:.9}
.footer-navblock nav a:hover{opacity:.65}
.footer-middle-col{padding-left:48px}
.footer-tagline-col{padding-left:40px}.footer-tagline{margin:0 0 0;color:#fff;font-size:1.1rem;font-weight:700;line-height:1.2;letter-spacing:-.03em;white-space:nowrap}
.footer-contact-col a{display:block;color:#fff;text-decoration:none;font-size:13px;line-height:1.35;margin-bottom:13px;opacity:.9}
.footer-contact-col a:hover{opacity:.65}
.footer-socials{display:flex;align-items:center;gap:10px;margin-top:18px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;background:transparent;flex-shrink:0;transition:opacity .2s}
.social-icon:hover{opacity:.75}
.social-icon img{width:32px;height:32px;display:block;filter:brightness(0) invert(1)}
.footer-brand-col{display:flex;justify-content:flex-end;align-items:flex-start}
.footer-brand-col img{height:190px;width:auto;max-width:100%;filter:brightness(0) invert(1);display:block;object-fit:contain}
.footer-lower{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--blue);padding:12px 0;font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.03em}
.footer-lower a{color:rgba(255,255,255,.75);text-decoration:none}
.footer-lower a:hover{color:#fff}
@media(max-width:1200px){
  .honours-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles,.news-grid,.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid{grid-template-columns:1fr 1fr}
  .footer-upper{grid-template-columns:180px 1fr 300px 170px}
  .footer-brand-col img{height:170px}
}
@media(max-width:900px){
  .footer-upper{grid-template-columns:160px 1fr 260px 150px}
  .footer-brand-col img{height:150px}
  .partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .membership-grid,.contact-grid,.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .honour-trophy{height:52px}
}
@media(max-width:760px){
  /* === Full-page mobile nav overlay === */
  .site-nav{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    padding:84px 24px 40px;
    margin:0;
    background:var(--blue);
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    border:none;
    z-index:99;
    opacity:0;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    pointer-events:none;
    overflow-y:auto;
  }
  .site-nav.open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  .site-nav .nav-link{
    color:#fff !important;
    font-size:1.7rem !important;
    font-weight:900;
    letter-spacing:-.02em;
    line-height:1.2;
    padding:10px 24px;
    text-align:center;
    text-decoration:none;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.18);
    max-width:320px;
  }
  .site-nav .nav-link:last-child{border-bottom:none}
  .site-nav .nav-link:active,.site-nav .nav-link:hover{opacity:.7}

  /* Nav toggle button — sits above the nav overlay, transforms into X when open */
  .nav-toggle{
    display:block;
    z-index:101;
    position:relative;
    transition:border-color .25s ease;
  }
  body.nav-open .nav-toggle{
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.08);
  }
  .nav-toggle span{transition:transform .25s ease, opacity .2s ease, background .2s ease}
  body.nav-open .nav-toggle span{background:#fff}
  body.nav-open .nav-toggle span:first-child{top:50%;transform:translateY(-50%) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:last-child{top:50%;transform:translateY(-50%) rotate(-45deg)}

  /* Lock body scroll when nav open */
  body.nav-open{overflow:hidden}

  .brand span{display:none}
  .tiles,.partner-grid,.membership-grid,.contact-grid,.card-grid,.team-grid,.news-grid,.about-grid{grid-template-columns:1fr}
  .honours-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .honours-grid div{padding:18px 14px 16px}
  .honour-trophy{height:46px}
  .honours-grid strong{font-size:1.7rem;margin-top:14px}
  .honour-founding strong{font-size:2.2rem !important}
  .honours-grid span{font-size:11px;margin-top:6px}
  .team-panel{grid-template-columns:1fr}
  .team-panel img{min-height:260px}
  .section-head{flex-direction:column;align-items:flex-start}
  .page-hero{padding-top:150px}
  .content-section{padding:72px 0}
  .insta-section{padding:72px 0 0}
  .insta-grid{grid-template-columns:repeat(3,1fr);gap:2px}
  .footer-upper{grid-template-columns:1fr;gap:0}
  .footer-navblock{display:none}
  .footer-middle-col{padding-left:0;margin-bottom:24px}
  .footer-tagline-col{padding-left:0;margin-bottom:20px}
  .footer-tagline{font-size:1rem;white-space:normal}
  .footer-brand-col{justify-content:flex-start;margin-top:20px}
  .footer-brand-col img{width:auto;height:auto;max-width:100px;max-height:100px;object-fit:contain}
  .footer-lower{flex-direction:column;align-items:flex-start;gap:6px}
  .footer-shell{width:calc(100% - 32px)}
}
@media(max-width:480px){
  .insta-grid{grid-template-columns:repeat(2,1fr);gap:2px}
}

/* about structure 2-col */
.structure-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:0}
.structure-col p{margin:0 0 18px;font-size:0.98rem;color:var(--muted);line-height:1.7}
.structure-col p:last-child{margin-bottom:0}
/* matches cta */
.matches-embed{background:#f5f7fb;padding:40px;border-radius:0}
.matches-cta p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:680px;margin:0 0 24px}
@media(max-width:760px){
  .structure-2col{grid-template-columns:1fr}
}

.hero-slideshow{position:absolute;inset:0}
.hero-slideshow .slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;opacity:0!important;transition:opacity 1.2s ease;will-change:opacity}
.hero-slideshow .slide.active{opacity:1!important;transform:none!important}





/* ===== FIXTURES SECTION ===== */
.fixtures-wrap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}
.fixtures-block{
  background:#0d1e3d;
  border:1px solid rgba(0,56,194,0.3);
  border-radius:12px;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.fixtures-block-title{
  background:var(--blue);
  padding:12px 20px;
}
.fixtures-block-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
}
.fixtures-list{padding:6px 0}
.fixture-row{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:background 0.15s;
}
.fixture-row:last-child{border-bottom:none}
.fixture-row:hover{background:rgba(255,255,255,0.04)}
.fixture-row.next-match{
  background:rgba(0,56,194,0.15);
  border-left:3px solid var(--blue);
}
.fixture-comp{
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(255,255,255,0.5);
  margin-bottom:7px;display:flex;align-items:center;gap:8px;
}
.next-badge{
  background:var(--blue);color:#fff;font-size:9px;
  padding:2px 7px;border-radius:20px;letter-spacing:0.06em;
}
.fixture-teams{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.fixture-team{
  display:flex;align-items:center;gap:6px;flex:1;
  font-size:13px;font-weight:600;color:#fff;min-width:0;
}
.fixture-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixture-team img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.fixture-teams > img.team-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.fixture-team.sofc{font-weight:800}
.fixture-team.away{flex-direction:row-reverse;text-align:right}
.fixture-score{
  font-size:18px;font-weight:900;letter-spacing:-0.02em;
  padding:4px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0;color:#fff;
}
.fixture-score.win{background:rgba(74,222,128,0.2);color:#4ade80}
.fixture-score.loss{background:rgba(248,113,113,0.2);color:#f87171}
.fixture-score.draw{background:rgba(148,163,184,0.15);color:#cbd5e1}
.fixture-vs{font-size:12px;font-weight:800;color:rgba(255,255,255,0.4);flex-shrink:0;padding:0 2px}
.fixture-meta{display:flex;align-items:center;justify-content:space-between}
.fixture-date{font-size:11px;color:rgba(255,255,255,0.5);font-weight:500}
.fixture-time{
  font-size:11px;color:#fff;font-weight:700;
  background:rgba(0,56,194,0.4);padding:3px 9px;border-radius:20px;
}
.fixture-result-tag{
  font-size:10px;font-weight:800;width:22px;height:22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.fixture-result-tag.win{background:#4ade80;color:#000}
.fixture-result-tag.loss{background:#f87171;color:#fff}
.fixture-result-tag.draw{background:#94a3b8;color:#fff}

/* Ladder */
.fixtures-table-wrap{padding:4px 0}
.ft-header{
  display:grid;grid-template-columns:18px 1fr 24px 24px 24px 24px 32px 30px;
  gap:2px;padding:6px 12px;font-size:9px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);border-bottom:1px solid rgba(255,255,255,0.08);
}
.ft-row{
  display:grid;grid-template-columns:18px 1fr 24px 24px 24px 24px 32px 30px;
  gap:2px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.05);
  align-items:center;font-size:11px;color:rgba(255,255,255,0.75);transition:background 0.15s;
}
.ft-row:hover{background:rgba(255,255,255,0.04)}
.ft-row.is-sofc{background:rgba(0,56,194,0.2);color:#fff;font-weight:700}
.ft-pos-dot,.ft-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ft-pos-dot.green,.ft-dot.green{background:#22c55e}
.ft-pos-dot.blue,.ft-dot.blue{background:#3b82f6}
.ft-pos-dot.orange,.ft-dot.orange{background:#f97316}
.ft-pos-dot.red,.ft-dot.red{background:#ef4444}
.ft-pos-dot.grey,.ft-dot.grey{background:rgba(255,255,255,0.15)}
.ft-team-name{display:flex;align-items:center;gap:5px;font-size:11px;overflow:hidden}
.ft-team-name img{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.ft-team-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-num{text-align:center;font-size:11px}
.ft-pts{text-align:center;font-weight:800;font-size:12px;color:#fff}
.ft-legend{
  display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:9px;color:rgba(255,255,255,0.4);letter-spacing:0.04em;
}
.ft-legend span{display:flex;align-items:center;gap:4px}

/* Desktop: always 3 columns */
/* Mobile: hide the 3-col grid, show Next Game card instead */
@media(max-width:900px){
  .fixtures-section-scroll{display:none}
  .fixtures-mobile{display:block!important}
}

/* ===== SQUAD CAROUSEL ===== */
.squad-section{
  background:linear-gradient(180deg, #0038c2 0%, #040e28 100%);
  padding:80px 0 60px;
  overflow:hidden;
  position:relative;
}
.squad-section--women{
  background:var(--dark);
  /* subtle texture so it doesn't read as flat — radial glow in the top-right */
  background-image:
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(0,56,194,.18) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 0% 100%, rgba(0,56,194,.12) 0%, transparent 60%);
  background-color:var(--dark);
}
.squad-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:40px;
}
.squad-title{
  font-size:clamp(28px,4vw,48px);
  font-weight:900;
  color:#fff;
  line-height:1;
  margin-top:8px;
}
.squad-slider-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.squad-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--blue);
  border:none;
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  transition:background 0.2s,transform 0.2s;
}
.squad-arrow:hover{background:#0046f0;transform:translateY(-50%) scale(1.08)}
.squad-arrow--prev{left:16px}
.squad-arrow--next{right:16px}
.squad-track-outer{
  overflow:hidden;
  width:100%;
  padding:0 80px;
}
.squad-track{
  display:flex;
  gap:16px;
  /* No CSS transition - JS handles continuous scroll with requestAnimationFrame */
}
.squad-card{
  flex:0 0 calc(20% - 13px);
  min-width:155px;
}
.squad-card-inner{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#040e28;
  cursor:pointer;
}
.squad-card-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  position:absolute;
  inset:0;
  transition:transform 0.4s ease;
}
.squad-card-inner:hover img{transform:scale(1.04)}
/* Dark fade at bottom only — NO blue tint, gradient bg shows naturally at top */
.squad-card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    transparent 50%,
    rgba(4,14,40,0.7) 75%,
    rgba(4,14,40,0.97) 100%
  );
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px 14px 14px;
}

.squad-number{
  position:absolute;
  bottom:68px;
  right:10px;
  font-size:64px;
  font-weight:900;
  color:rgba(255,255,255,0.12);
  line-height:1;
  letter-spacing:-0.03em;
  font-style:italic;
  pointer-events:none;
}
.squad-info{position:relative;z-index:2}
.squad-firstname{
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  line-height:1.4;
}
.squad-lastname{
  display:block;
  font-size:26px;
  font-weight:900;
  color:#fff;
  line-height:1.1;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.squad-pos{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6b9fff;
  margin-top:4px;
}
@media(max-width:1024px){.squad-card{flex:0 0 calc(25% - 12px)}}
@media(max-width:760px){
  .squad-card{flex:0 0 calc(44vw);min-width:160px}
  .squad-track-outer{padding:0 44px}
  .squad-arrow{width:36px;height:36px;font-size:22px}
  .squad-arrow--prev{left:4px}
  .squad-arrow--next{right:4px}
  .squad-lastname{font-size:20px}
  .squad-firstname{font-size:12px}
  .squad-pos{font-size:10px}
  .squad-number{font-size:44px;bottom:56px}
}
@media(max-width:480px){
  .squad-card{flex:0 0 68vw}
  .squad-track-outer{padding:0 38px}
}

/* ===== NEXT GAME MOBILE CARD ===== */
.fixtures-mobile{display:none}
.next-game-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.1);
  max-width:420px;
  margin:0 auto;
}
.next-game-header{
  background:#f5f5f5;
  padding:24px 24px 16px;
  border-bottom:1px solid #e8e8e8;
}
.next-game-eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#888;
  margin-bottom:4px;
}
.next-game-label{
  font-size:36px;
  font-weight:900;
  line-height:1;
  color:#111;
  text-transform:uppercase;
}
.next-game-label span{
  color:var(--blue);
  display:block;
}
.next-game-body{
  padding:28px 24px;
  background:#fff;
}
.next-game-teams{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:28px;
}
.next-game-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex:1;
  text-align:center;
}
.next-game-team img{
  width:80px;
  height:80px;
  object-fit:contain;
}
.next-game-team span{
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#111;
  line-height:1.2;
}
.next-game-vs{
  font-size:28px;
  font-weight:900;
  color:var(--blue);
  flex-shrink:0;
  letter-spacing:0.02em;
}
.next-game-datetime{
  text-align:center;
  font-size:15px;
  font-weight:800;
  color:var(--blue);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.next-game-venue{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#666;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.next-game-footer{
  border-top:1px solid #e8e8e8;
  padding:16px 24px;
  background:#fff;
}
.next-game-link{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue);
  text-decoration:none;
}
.next-game-link:hover{opacity:0.75}

/* ===== PROFESSIONAL DESIGN SYSTEM — REBUILD ===== */

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* Section number (magazine-style) */
.section-number{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 16px;
  font-feature-settings:"tnum";
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.section-number::before{
  content:"";
  display:inline-block;
  width:24px;
  height:2px;
  background:var(--blue);
}

/* Page hero refinements */
.page-hero{padding:140px 0 64px;position:relative}
.page-hero .eyebrow{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;display:block}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);font-weight:900;line-height:1.04;letter-spacing:-.04em;color:var(--ink);margin:0 0 24px;max-width:18ch}
.page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;color:var(--muted,#3a4159);max-width:60ch;margin:0 0 24px}
.page-hero .button-row{margin-top:32px}

/* Soft hero atmosphere */
/* page-hero::before radial gradient removed — was creating soft blue "boxes" in corners */
.page-hero > *{position:relative}

/* Page hero stats strip */
.page-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid rgba(0,56,194,.15);
  max-width:760px;
}
.page-stat{display:flex;flex-direction:column;align-items:flex-start}
.page-stat strong{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--ink);font-feature-settings:"tnum"}
.page-stat > span{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
@media (max-width:520px){.page-stats{grid-template-columns:1fr 1fr;gap:18px 14px}}

/* Improved content-section spacing for page rebuilds */
.content-section{padding:80px 0;background:#fff}
.content-section.alt{background:#fff}
.content-section.dark{background:var(--ink);color:#fff}
.content-section.dark .eyebrow,.content-section.dark .section-number{color:#7aa5ff}
.content-section.dark h2,.content-section.dark h3,.content-section.dark p{color:#fff}

/* Section head: align eyebrow + h2 nicely */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.06;margin:0;color:var(--ink);max-width:18ch}
.section-head .eyebrow{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:12px}
.section-head .text-link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue);text-decoration:none;text-transform:uppercase;white-space:nowrap}
.section-head .text-link:hover{text-decoration:underline}

/* Info card refinement */
.info-card{background:#f5f7fb;border:1px solid rgba(0,56,194,.08);padding:36px 32px;border-radius:2px;display:flex;flex-direction:column;gap:14px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.info-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,56,194,.08);border-color:rgba(0,56,194,.2)}
.info-card h2,.info-card h3{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;margin:0;color:var(--ink);line-height:1.15}
.info-card p{margin:0;color:#3a4159;line-height:1.6;font-size:.98rem}
.info-card .text-link{color:var(--blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;text-decoration:none;margin-top:auto}
.info-card .text-link:hover{text-decoration:underline}
.info-card .button-row{margin-top:auto}

/* Pull-quote */
.pull-quote{
  margin:32px 0 36px;
  padding:24px 0 24px 28px;
  border-left:4px solid var(--blue);
  font-size:clamp(1.25rem,2vw,1.55rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--ink);
  font-style:normal;
}
.pull-quote em{color:var(--blue);font-style:italic}

/* Brand quote card (blue background) */
.quote-card{
  position:relative;
  background:var(--blue);
  color:#fff;
  padding:48px 36px 36px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,56,194,.15);
}
.quote-card .quote-mark{position:absolute;top:-30px;left:24px;font-family:Georgia,serif;font-size:180px;line-height:1;color:rgba(255,255,255,.18);font-weight:900;user-select:none;pointer-events:none}
.quote-card p{position:relative;margin:0 0 20px;font-size:1.22rem;line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#fff}
.quote-card .quote-credit{position:relative;display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* Spotlight (image+text alternating block) */
.spotlight{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
  align-items:stretch;
  background:#f5f7fb;
}
.spotlight + .spotlight{border-top:1px solid rgba(0,56,194,.08)}
.spotlight.reverse{grid-template-columns:.85fr 1.15fr}
.spotlight.reverse .spotlight-media{order:2}
.spotlight.reverse .spotlight-copy{order:1}
.spotlight-media{position:relative;min-height:420px;overflow:hidden}
.spotlight-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.spotlight-media:hover img{transform:scale(1.04)}
.spotlight-copy{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(28px,5vw,72px);background:#fff;position:relative}
.spotlight-copy::before{content:"";position:absolute;left:0;top:48px;width:32px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .2s}
.spotlight.in-view .spotlight-copy::before{transform:scaleX(1)}
.spotlight-copy{padding-left:clamp(44px, 5vw, 88px) !important}
.spotlight-copy h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:0 0 20px;color:var(--ink);max-width:18ch}
.spotlight-copy p{margin:0 0 20px;font-size:1.02rem;line-height:1.7;color:#3a4159}
.spotlight-copy .text-link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue);text-decoration:none;text-transform:uppercase}
.spotlight-copy .text-link:hover{text-decoration:underline}

/* Two-column purpose block (text + quote card) */
.purpose-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:56px;
  align-items:start;
}
.purpose-text h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.06;margin:0 0 24px;color:var(--ink);max-width:18ch}
.purpose-text p{margin:0 0 18px;font-size:1.02rem;line-height:1.7;color:#3a4159}

/* Closing CTA */
.closing-cta{padding:88px 0;text-align:center;background:linear-gradient(180deg, #fff 0%, #f5f7fb 100%)}
.closing-cta-inner{max-width:680px;margin:0 auto;padding:0 24px}
.closing-cta h2{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:0 0 16px;color:var(--ink)}
.closing-cta p{margin:0 0 28px;font-size:1.1rem;line-height:1.55;color:#3a4159}
.closing-cta .button-row{justify-content:center;display:flex;gap:14px;flex-wrap:wrap}

/* Partner card hover (white -> blue) */
.partner-card{display:flex;align-items:center;justify-content:center;padding:40px 32px;min-height:180px;border:1px solid rgba(0,56,194,.1);background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;border-radius:2px}
a.partner-card{cursor:pointer}
a.partner-card:hover,.partner-card a:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,56,194,.25);border-color:var(--blue);background:var(--blue)}
a.partner-card:hover img,.partner-card a:hover img{filter:brightness(0) invert(1)}
.partner-card a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:inherit}
.partner-card img{max-height:90px;max-width:80%;width:auto;height:auto;object-fit:contain;display:block;transition:filter .3s ease}

/* Prose styling for privacy / long text */
.prose{max-width:780px;margin:0 auto;font-size:1.02rem;line-height:1.75;color:#3a4159}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:900;letter-spacing:-.025em;color:var(--ink);margin:48px 0 16px;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin:32px 0 12px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose ul li,.prose ol li{margin-bottom:10px}
.prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-color:rgba(0,56,194,.3);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--blue)}

/* News card refinement */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.news-card{background:#fff;border:1px solid rgba(0,56,194,.08);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,56,194,.1)}
.news-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.news-card:hover img{transform:scale(1.04)}
.news-card > div{padding:28px}
.news-card .eyebrow{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;display:block}
.news-card h2,.news-card h3{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--ink)}
.news-card p{margin:12px 0 0;color:#3a4159;font-size:.95rem;line-height:1.5}

/* Team panel — enhanced */
.team-panel{display:grid;grid-template-columns:40% 1fr;border:1px solid rgba(0,56,194,.08);background:#fff;overflow:hidden;border-radius:2px;transition:transform .3s ease,box-shadow .3s ease}
.team-panel:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,56,194,.1)}
.team-panel img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.team-panel:hover img{transform:scale(1.04)}
.team-panel > div{padding:36px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.team-panel h2{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:900;letter-spacing:-.02em;margin:0;color:var(--ink);line-height:1.15}
.team-panel p{margin:0;color:#3a4159;line-height:1.55}
.team-panel .button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* Sponsorship / tier cards */
.sponsorship-head{margin-bottom:48px;text-align:left}
.sponsorship-head .eyebrow{color:#7aa5ff;display:block;margin-bottom:14px}
.sponsorship-head h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:0;max-width:14ch}
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tier-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.tier-card:hover{transform:translateY(-3px);border-color:var(--blue);background:rgba(0,56,194,.08)}
.tier-card--feature{background:var(--blue);border-color:var(--blue)}
.tier-card--feature:hover{background:#0046f0}
.tier-name{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;color:#fff;margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tier-pill{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:20px}
.tier-availability{display:flex;align-items:baseline;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.tier-availability strong{font-size:1.8rem;font-weight:900;color:#fff;letter-spacing:-.02em}
.tier-availability span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.tier-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tier-list li{position:relative;padding:5px 0 5px 18px;font-size:.9rem;color:rgba(255,255,255,.88);line-height:1.4}
.tier-list li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--blue)}
.tier-card--feature .tier-list li::before{background:#fff}
.tier-note{font-size:.75rem;color:rgba(255,255,255,.55);letter-spacing:.04em;margin-top:auto}
.sponsorship-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.sponsorship-cta p{margin:0;color:#fff;font-size:1.1rem;font-weight:600}

/* Responsive */
@media (max-width:1024px){
  .spotlight,.spotlight.reverse{grid-template-columns:1fr}
  .spotlight.reverse .spotlight-media{order:1}
  .spotlight.reverse .spotlight-copy{order:2}
  .spotlight-media{min-height:0;aspect-ratio:16/10}
  .spotlight-copy{padding:48px 28px !important}
  .purpose-grid{grid-template-columns:1fr;gap:32px}
  .team-panel{grid-template-columns:1fr}
  .team-panel img{min-height:220px}
  .news-grid{grid-template-columns:1fr 1fr;gap:20px}
  .tier-grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:760px){
  .page-hero{padding:120px 0 48px}
  .content-section{padding:56px 0}
  .closing-cta{padding:56px 0}
  .news-grid{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr}
  .sponsorship-cta{flex-direction:column;align-items:flex-start}
  .sponsorship-cta .btn-primary{width:100%;justify-content:center}
  .quote-card{padding:42px 28px 28px}
  .quote-card p{font-size:1.1rem}
  .quote-card .quote-mark{font-size:140px;top:-22px}
}

/* ===== TIGHTER HEADINGS (fix excessive line breaks) ===== */
.hero-h1-tight,
.page-hero h1.hero-h1-tight{
  font-size:clamp(2.2rem,4.8vw,4rem);
  letter-spacing:-.03em;
  line-height:1.05;
  max-width:24ch;
  text-wrap:balance;
}
.section-head h2,
.purpose-text h2,
.spotlight-copy h2{
  text-wrap:balance;
  max-width:24ch;
}

/* Page-hero defaults: more breathing room, smaller default h1 to avoid heavy wrapping */
.page-hero{padding:140px 0 56px}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,4rem);max-width:24ch;letter-spacing:-.03em;line-height:1.06}
.page-hero .lead{max-width:62ch}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:3px;
  height:100vh;
  background:var(--blue);
  transform:scaleY(0);
  transform-origin:top;
  z-index:80;
  pointer-events:none;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{display:none}
}

/* ===== SCROLL-DRIVEN MOTION HOOKS ===== */
[data-scroll-scale]{transform-origin:center;will-change:transform}
[data-parallax]{will-change:transform}

/* ===== ABOUT V2: TIMELINE LAYOUT ===== */
.about-hero-v2{padding-top:130px;padding-bottom:48px}

.timeline-section{
  padding:80px 0 100px;
  background:#fff;
  position:relative;
}

.timeline{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:40px 0;
}
.timeline-axis{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, transparent 0%, var(--blue) 8%, var(--blue) 92%, transparent 100%);
  transform:translateX(-50%);
  z-index:1;
}

.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  align-items:center;
  margin-bottom:80px;
  z-index:2;
}
.tl-item:last-child{margin-bottom:0}

.tl-marker{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  border-radius:50%;
  background:var(--blue);
  border:6px solid #fff;
  box-shadow:0 8px 24px rgba(0,56,194,.25);
  margin:0 auto;
  position:relative;
  z-index:3;
  will-change:transform;
}
.tl-marker span{
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-align:center;
  line-height:1.05;
}

.tl-left .tl-card{grid-column:1;padding-right:48px}
.tl-right .tl-card{grid-column:3;padding-left:48px}

.tl-card{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}

.tl-media{
  width:100%;
  aspect-ratio:16/10;
  max-height:340px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(0,56,194,.08);
  margin-bottom:24px;
}
.tl-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform;
}

.tl-body{padding:0}
.tl-era{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 12px;
}
.tl-body h3{
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0 0 14px;
  color:var(--ink);
  text-wrap:balance;
  max-width:24ch;
}
.tl-body p{
  margin:0 0 14px;
  color:#3a4159;
  font-size:1rem;
  line-height:1.65;
}
.tl-body p:last-child{margin-bottom:0}

/* Right-aligned text for left-side cards (so card hugs the axis) */
.tl-left .tl-card{text-align:left}
.tl-right .tl-card{text-align:left}

/* Mobile timeline: single column with line on left */
@media (max-width:900px){
  .timeline{padding:20px 0}
  .timeline-axis{left:30px;transform:none}
  .tl-item{
    grid-template-columns:60px 1fr;
    gap:20px;
    margin-bottom:56px;
  }
  .tl-marker{
    grid-column:1;
    width:60px;
    height:60px;
    border-width:4px;
  }
  .tl-marker span{font-size:11px}
  .tl-left .tl-card,.tl-right .tl-card{
    grid-column:2;
    padding:0;
  }
  .tl-right .tl-card,.tl-right .tl-media{order:0}
  .tl-media{aspect-ratio:16/10;max-height:240px;margin-bottom:18px}
  .tl-body h3{font-size:1.3rem}
}


/* ===== CONTACT PAGE — 2-col info + map ===== */
.contact-map-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:start;
}
.contact-info-col{display:flex;flex-direction:column;gap:48px}
.contact-info-block{display:flex;flex-direction:column;gap:14px}
.contact-info-block h2{
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0;
  color:var(--ink);
}
.contact-info-block p{margin:0;color:#3a4159;line-height:1.6;font-size:1rem}
.contact-info-address{font-weight:700;color:var(--ink) !important;font-size:1.05rem !important}
.contact-info-block .text-link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue);text-transform:uppercase;text-decoration:none;align-self:flex-start;margin-top:6px}
.contact-info-block .text-link:hover{text-decoration:underline}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(0,56,194,.08)}
.contact-list li:last-child{border-bottom:none}
.contact-list-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);min-width:60px}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem}
.contact-list a:hover{color:var(--blue)}
.contact-socials{display:flex;flex-wrap:wrap;gap:14px}
.contact-socials a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  padding:10px 18px;
  border:1px solid rgba(0,56,194,.15);
  border-radius:24px;
  transition:all .3s ease;
}
.contact-socials a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.contact-map-col{
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-map-frame{
  width:100%;
  aspect-ratio:4/5;
  max-height:720px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(0,56,194,.15);
  box-shadow:0 12px 40px rgba(4,14,40,.08);
  background:#eef2f8;
}
.contact-map-frame iframe{display:block;width:100%;height:100%;border:0}
.contact-map-link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blue);text-transform:uppercase;text-decoration:none;align-self:flex-end;padding:8px 14px}
.contact-map-link:hover{text-decoration:underline}

@media (max-width:900px){
  .contact-map-layout{grid-template-columns:1fr;gap:40px}
  .contact-map-col{position:static}
  .contact-map-frame{aspect-ratio:4/3;max-height:none}
  .contact-info-col{gap:36px}
}

/* ===== SPONSORS PAGE — animated tier carousel + mobile partner marquees ===== */
.sponsorship-section{
  background:var(--ink);
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}
.sponsorship-section .shell{padding-left:24px;padding-right:24px}
.sponsorship-section .sponsorship-head{padding:0 24px}
.sponsorship-carousel{
  overflow:hidden;
  position:relative;
  margin:0 -24px;
  padding-left:24px;
}
.sponsorship-track{
  display:flex;
  gap:22px;
  animation:tierScroll 60s linear infinite;
  min-width:max-content;
  will-change:transform;
}
.sponsorship-section:hover .sponsorship-track{animation-play-state:paused}
@keyframes tierScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.sponsorship-track .tier-card{
  width:420px;
  flex-shrink:0;
}

.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--blue);
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.carousel-arrow:hover{background:#0046f0;transform:translateY(-50%) scale(1.08)}
.carousel-arrow--prev{left:14px}
.carousel-arrow--next{right:14px}

/* Mobile partner marquees */
@media (max-width:760px){
  .partner-grid{display:none}
  .partner-grid-mq{display:block;overflow:hidden;margin:0 -24px}
  .partner-grid-mq-row{
    display:flex;
    gap:36px;
    align-items:center;
    min-width:max-content;
    padding:14px 0;
    will-change:transform;
  }
  .partner-grid-mq-row--a{animation:mqRowA 28s linear infinite}
  .partner-grid-mq-row--b{animation:mqRowB 34s linear infinite}
  .partner-grid-mq-row img{height:42px;width:auto;object-fit:contain;opacity:.85;flex-shrink:0}
  @keyframes mqRowA{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  @keyframes mqRowB{
    from{transform:translateX(-50%)}
    to{transform:translateX(0)}
  }
  .sponsorship-cta{flex-direction:column;align-items:flex-start;gap:16px}
  .sponsorship-cta p{font-size:1rem}
  .sponsorship-cta .btn-primary{width:100%;justify-content:center;padding:12px 24px}
  .carousel-arrow{display:none}
  .sponsorship-track{animation-duration:80s}
}
@media (min-width:761px){
  .partner-grid-mq{display:none}
}


/* ============================================================
   FINAL PASS — 5-size type system + heading clamps + about hero
   + dynamic timeline. All later rules win via source order.
============================================================ */

/* TYPE SCALE — exactly 5 sizes site-wide
   --t-display : hero h1
   --t-heading : section h2 / h3 large
   --t-body-lg : lead paragraphs
   --t-body    : default paragraph + nav + buttons
   --t-small   : eyebrows, section numbers, labels, captions
*/
:root{
  --t-display: clamp(2.1rem, 4.6vw, 3.8rem);
  --t-heading: clamp(1.45rem, 2.6vw, 2.1rem);
  --t-body-lg: 1.12rem;
  --t-body:    1rem;
  --t-small:   .72rem;
}

/* Apply scale */
h1, .hero-h1-tight, .page-hero h1,
.about-hero-v2 h1{
  font-size: var(--t-display) !important;
  letter-spacing:-.035em;
  line-height:1.04;
  font-weight:900;
  max-width:22ch;
  text-wrap:balance;
  margin:0 0 22px;
}
h2, .section-head h2, .purpose-text h2, .spotlight-copy h2,
.info-card h2, .news-card h2, .team-panel h2, .quote-card p,
.contact-info-block h2, .closing-cta h2, .sponsorship-head h2,
.tl-body h3{
  font-size: var(--t-heading) !important;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.08;
  max-width:22ch;
  text-wrap:balance;
}
h3, .tier-name, .info-card h3, .news-card h3{
  font-size: var(--t-heading) !important;
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.1;
  max-width:22ch;
  text-wrap:balance;
}
.lead, .page-hero .lead, .about-hero-text .lead{
  font-size: var(--t-body-lg) !important;
  line-height:1.55;
  font-weight:500;
}
p, .info-card p, .news-card p, .team-panel p,
.tl-body p, .about-hero-text p, .prose p,
.spotlight-copy p, .quote-card .quote-credit{
  font-size: var(--t-body);
}
.eyebrow, .section-number, .tier-pill, .footer-col-label,
.tl-era, .contact-list-label, .page-stat > span,
.fixtures-block-label, .footer-navblock nav a, .footer-contact-col a,
.footer-lower, .nav-link{
  font-size: var(--t-small) !important;
}

/* Heading line caps: no more than 2 lines anywhere */
h1, h2, h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* keep marquee / tier headings free of clamp where they're short */
.tier-name, .quote-card p{
  display:block;
  -webkit-line-clamp:none;
  overflow:visible;
}

/* Sponsorship h2 — force exactly 2 lines:
   "Partner with Sydney Olympic" / "for the season." */
.sponsorship-head h2{
  max-width:18ch !important;
  text-wrap:balance;
}

/* ===== ABOUT HERO — 2-col body text + quote card alongside ===== */
.about-hero-v2{padding-top:130px;padding-bottom:60px}
.about-hero-body{
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:64px;
  align-items:start;
  margin:32px 0 44px;
}
.about-hero-text{
  column-count:1;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.about-hero-text > p{margin:0;font-size:var(--t-body);line-height:1.6;color:#3a4159}
.about-hero-text > p.lead{font-size:var(--t-body-lg);font-weight:500;color:var(--ink);line-height:1.5}
/* The body paragraphs (not the lead) flow in 2 columns on desktop */
.about-hero-text-cols{
  column-count:2;
  column-gap:32px;
  margin-top:8px;
}
.about-hero-text-cols p{break-inside:avoid;margin:0 0 14px;font-size:var(--t-body);line-height:1.6;color:#3a4159}

.about-hero-v2 .quote-card{align-self:stretch}
.about-hero-v2 .page-stats{margin-top:8px}

@media (max-width:1024px){
  .about-hero-body{grid-template-columns:1fr;gap:36px}
  .about-hero-text-cols{column-count:1}
}

/* ===== TIMELINE — dynamic scroll animations ===== */
/* Cards slide in from their respective sides */
.tl-left[data-reveal]{transform:translate(-40px, 28px)}
.tl-right[data-reveal]{transform:translate(40px, 28px)}
.tl-left[data-reveal].is-visible,
.tl-right[data-reveal].is-visible{transform:translate(0,0)}

/* Marker pops in with a small scale + glow */
.tl-marker{
  transform:scale(.55);
  opacity:.4;
  transition:transform .8s cubic-bezier(.22, .9, .28, 1), opacity .6s ease, box-shadow .6s ease;
  will-change:transform,opacity;
}
[data-reveal].is-visible .tl-marker,
.tl-item.is-visible .tl-marker,
.tl-item[data-reveal].is-visible > .tl-marker{
  transform:scale(1);
  opacity:1;
  box-shadow:0 8px 28px rgba(0,56,194,.45), 0 0 0 4px rgba(0,56,194,.12);
}

/* Active marker gets a stronger highlight when centered */
.tl-marker.is-active{
  box-shadow:0 10px 32px rgba(0,56,194,.55), 0 0 0 8px rgba(0,56,194,.18);
  transform:scale(1.08);
}

/* The axis line "fills" as user scrolls */
.timeline-axis{
  background:rgba(0,56,194,.15);
}
.timeline-axis::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:var(--tl-fill, 0%);
  background:linear-gradient(180deg, var(--blue) 0%, rgba(0,56,194,.6) 100%);
  transition:height .15s linear;
  will-change:height;
}

/* Image entry animation: scale + slight rotate on enter */
.tl-media img{
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.tl-item[data-reveal] .tl-media img{transform:scale(1.08)}
.tl-item[data-reveal].is-visible .tl-media img{transform:scale(1)}


/* ============================================================
   LANDING PAGE — bigger uniform section headings
   Scoped to body.page-home so other pages keep the 5-size scale
============================================================ */
body.page-home .section-head h2,
body.page-home .squad-title,
body.page-home .stack-copy h2,
body.page-home .stack-copy h1,
body.page-home .insta-section h2,
body.page-home .insta-section h3,
body.page-home .partner-section h2,
body.page-home #fixtures h2,
body.page-home main h1,
body.page-home main h2{
  font-size: clamp(2.8rem, 8.4vw, 7.6rem) !important;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  max-width: min(22ch, 100%);
  text-wrap: balance;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Instagram feed — video/Reel indicator */
.insta-tile.is-video::after{content:"";position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:2;pointer-events:none}
.insta-tile.is-video::before{content:"";position:absolute;top:19px;right:20px;width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 8px;border-color:transparent transparent transparent #fff;z-index:3;pointer-events:none}

/* NPL Women fixtures page — ladder has P / GD / Pts only (no W/D/L in source) */
.page-womens-fixtures .ft-header,
.page-womens-fixtures .ft-row{grid-template-columns:18px 1fr 32px 40px 34px}

/* ===== Teams dropdown nav ================================================= */
.nav-item.has-sub{position:relative;display:flex;align-items:center}
/* Invisible bridge on the ITEM (not the menu) so the pointer can cross the gap
   between the Teams link and the dropdown without losing :hover. It lives on
   .nav-item so it stays hoverable even while .nav-sub has pointer-events:none. */
.nav-item.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;
  height:22px;display:none}
.nav-item.has-sub:hover::after,
.nav-item.has-sub:focus-within::after{display:block}
.nav-sub-toggle{display:none}
.nav-caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:transform .2s ease}
.nav-item.has-sub:hover .nav-caret{transform:rotate(180deg)}

.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
  margin-top:12px;min-width:290px;max-height:min(74vh,640px);overflow-y:auto;background:var(--dark);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px 0;box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:120}
/* Extends the menu's own hit area upward into the gap once it is open, so
   moving the pointer down from the link keeps it open. */
.nav-sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub,
.nav-item.has-sub.is-open .nav-sub{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-item.has-sub.is-open .nav-caret{transform:rotate(180deg)}

.nav-sub-head{display:block;padding:9px 18px 4px;color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.95}
.nav-sub-head:hover{color:var(--blue)}
.nav-sub-head + .nav-sub-link{margin-top:0}
.nav-sub-link{display:block;padding:6px 18px 6px 18px;color:rgba(255,255,255,.62);
  font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;
  transition:color .15s ease,background .15s ease}
.nav-sub-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-sub-head:not(:first-child){margin-top:8px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08)}

@media(max-width:960px){
  /* Nav is a full-screen overlay here — dropdown becomes an inline accordion */
  .nav-item.has-sub{display:block;width:100%;position:relative}
  .nav-caret{display:none}
  .nav-sub-toggle{display:block;position:absolute;top:6px;right:8px;width:44px;height:44px;
    border:0;background:transparent;cursor:pointer;z-index:2}
  .nav-sub-toggle::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;
    margin:-2px 0 0 -5px;border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid #fff;opacity:.85;transition:transform .2s ease}
  .nav-item.has-sub.open .nav-sub-toggle::after{transform:rotate(180deg)}

  .nav-sub{position:static;transform:none;min-width:0;margin:0;padding:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;pointer-events:auto;
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-sub::before{display:none}
  .nav-item.has-sub.open .nav-sub{max-height:800px}
  .nav-item.has-sub:hover .nav-sub{max-height:0}
  .nav-item.has-sub.open:hover .nav-sub{max-height:800px}

  .nav-sub-head{padding:12px 24px 4px;font-size:12px !important;opacity:.85}
  .nav-sub-head:not(:first-child){border-top:0;margin-top:4px}
  .nav-sub-link{padding:8px 24px 8px 36px;font-size:14px !important;color:rgba(255,255,255,.7)}
}

/* ===== Competition pages ================================================== */
.comp-section{padding-top:40px}
.comp-note{margin:14px 0 0;font-size:11px;letter-spacing:.04em;color:rgba(10,10,10,.45)}
.fixture-empty{padding:22px 16px;text-align:center}
.fixture-empty p{margin:0 0 10px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55)}
.fixture-empty .text-link{font-size:11px}
/* Ladder without W/D/L (source doesn't publish them) */
.ft-compact .ft-header,.ft-compact .ft-row{grid-template-columns:18px 1fr 32px 40px 34px}


/* Hero / stack images: default object-fit:cover crops equally top and bottom,
   which cuts players' heads off on tall or narrow viewports. Bias the crop
   upward so faces are always kept and the grass is sacrificed instead. */
.stack-media img{object-position:50% 28%}
/* The hero slideshows sit lower in frame — keep a touch more headroom. */
.hero-slideshow img{object-position:50% 25%}
@media(max-width:760px){
  .stack-media img,.hero-slideshow img{object-position:50% 20%}
}