/* Auckland Samoa Rugby Football Union — OFC Pro League-style league portal
   ASRFU brand: Talofa Blue / Mamana Red / Mana Gold · Archivo / Inter / Fraunces */

:root{
  --blue:#002B7F; --blue-700:#012A6B; --blue-900:#001A4D;
  --red:#CE1126; --white:#fff; --ink:#0A1A3F;
  --mist:#F4F6FB; --line:#E2E6EF; --muted:#6B7A99; --gold:#C9A24B;
  --maxw:1240px; --r:10px; --r-lg:16px;
  --shadow:0 16px 40px -22px rgba(0,20,60,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3,h4,.dsp{font-family:'Figtree',sans-serif;font-weight:900;line-height:1.04;letter-spacing:-.01em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.sa{font-family:'Fraunces',serif;font-style:italic}

/* placeholder boxes (where logos/photos go) */
.ph{background:repeating-linear-gradient(45deg,#e9edf6 0 12px,#eef2f9 12px 24px);
  border:1px dashed #b9c3d8;color:#8a97b3;display:grid;place-items:center;
  font-family:'Figtree';font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.ph.dark{background:repeating-linear-gradient(45deg,#0c245f 0 12px,#0e2a6e 12px 24px);border-color:#21407f;color:#7e92c6}
.cover{width:100%;height:100%;object-fit:cover;display:block}
.feature .cover{position:absolute;inset:0}
.rail .item .cover{height:100%;min-height:80px}
.card .cover{height:160px}
.vid-main .cover{height:230px}
.vid-list .v .cover{height:58px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Figtree';font-weight:800;font-size:14px;
  padding:11px 20px;border-radius:var(--r);cursor:pointer;border:0;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-out{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}

/* ---------- HEADER (two-tier, like OFC) ---------- */
.topbar{background:var(--blue-900);color:#cdd9ff;font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;height:38px;gap:20px}
.topbar .sa{color:var(--gold)}
.topbar nav{margin-left:auto;display:flex;gap:20px}
.topbar nav a{letter-spacing:.04em;text-transform:uppercase;font-weight:600;font-size:11.5px}
.topbar nav a:hover{color:#fff}

.mast{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px -8px rgba(0,20,60,.3)}
.mast .wrap{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;background:#fff;border-radius:8px}
.brand b{font-family:'Figtree';font-weight:900;font-size:14px;line-height:1.02;color:var(--blue)}
.brand span{display:block;font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mainnav{margin-left:auto;display:flex;gap:24px;align-items:center}
.mainnav>a,.mainnav .drop>a{font-family:'Figtree';font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;padding:8px 0;position:relative}
.mainnav>a:hover,.mainnav .drop:hover>a{color:var(--red)}
.mainnav .drop{position:relative}
.mainnav .drop>a:after{content:"▾";font-size:10px;margin-left:5px;color:var(--muted)}
.mainnav .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transition:.15s}
.mainnav .drop:hover .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mainnav .menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-size:13.5px;font-weight:600}
.mainnav .menu a:hover{background:var(--mist);color:var(--blue)}
.mainnav .menu .mph{width:22px;height:22px;border-radius:50%}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.navtoggle{display:none;margin-left:auto;border:0;background:transparent;font-size:26px;color:var(--blue)}

/* ---------- HERO (featured stories) ---------- */
.hero{background:var(--blue);padding:30px 0 38px}
.hero .grid{display:grid;grid-template-columns:1.65fr 1fr;gap:22px}
.feature{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:430px;display:flex;align-items:flex-end;
  border-bottom:4px solid var(--gold)}
.feature .ph{position:absolute;inset:0;height:100%;font-size:14px}
.feature .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,16,48,.92) 8%,rgba(0,16,48,.2) 60%,transparent)}
.feature .body{position:relative;padding:34px;color:#fff;max-width:90%}
.tag{display:inline-block;background:var(--red);color:#fff;font-family:'Figtree';font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:6px}
.feature h2{font-size:clamp(26px,3.4vw,40px);margin:14px 0 8px}
.feature .meta{font-size:13px;color:#cdd9ff}
.rail{display:flex;flex-direction:column;gap:14px}
.rail .item{display:grid;grid-template-columns:104px 1fr;gap:14px;background:#06226a;border-radius:var(--r);overflow:hidden;align-items:stretch}
.rail .item .ph{min-height:80px;font-size:9px}
.rail .item .t{padding:12px 14px 12px 0;color:#fff}
.rail .item .t b{font-family:'Figtree';font-weight:700;font-size:15px;line-height:1.15;display:block}
.rail .item .t span{font-size:12px;color:#aebbdc}
.rail .item:hover .t b{color:var(--gold)}

/* section scaffolding */
section{padding:54px 0}
.sec-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-bar h3{font-size:clamp(22px,3vw,30px);color:var(--blue);text-transform:uppercase}
.sec-bar h3 .bar{display:inline-block;width:34px;height:5px;background:var(--red);border-radius:3px;margin-right:12px;vertical-align:middle}
.sec-bar a{font-family:'Figtree';font-weight:800;font-size:13px;text-transform:uppercase;color:var(--red)}

/* ---------- NEWS GRID ---------- */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ph{height:160px;font-size:10px}
.card .c{padding:16px}

/* ---------- RESULTS + VIDEO ---------- */
.rv{background:#fff}
.rv .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tabs button{font-family:'Figtree';font-weight:800;font-size:13px;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.tabs button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.fixture{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}
.fixture .side{display:flex;align-items:center;gap:10px;flex:1}
.fixture .side.r{justify-content:flex-end;text-align:right}
.fixture .crest{width:34px;height:34px;border-radius:50%}
.fixture .nm{font-family:'Figtree';font-weight:700;font-size:14px}
.fixture .score{font-family:'Figtree';font-weight:900;font-size:18px;background:var(--mist);border-radius:8px;padding:6px 12px;min-width:62px;text-align:center;color:var(--blue)}
.fixture .rd{font-size:11px;color:var(--muted);width:100%;text-align:center;margin-top:2px}
.vid-main{border-radius:var(--r);overflow:hidden;position:relative;margin-bottom:14px}
.vid-main .ph{height:230px}
.vid-main .play{position:absolute;inset:0;display:grid;place-items:center}
.vid-main .play span{width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 8px 24px -8px rgba(206,17,38,.7)}
.vid-list .v{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.vid-list .v .ph{height:58px;font-size:9px}
.vid-list .v b{font-family:'Figtree';font-weight:700;font-size:13.5px;display:block}
.vid-list .v span{font-size:11px;color:var(--muted)}

/* ---------- STANDINGS ---------- */
.standings-sec{background:var(--mist)}
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.st{width:100%;border-collapse:collapse;font-size:14px}
table.st thead th{background:var(--blue);color:#fff;font-family:'Figtree';font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:13px 14px;text-align:center}
table.st thead th.l{text-align:left}
table.st td{padding:12px 14px;text-align:center;border-top:1px solid var(--line)}
table.st td.l{text-align:left}
table.st .teamc{display:flex;align-items:center;gap:12px;font-family:'Figtree';font-weight:700}
table.st .crest{width:30px;height:30px;border-radius:50%}
table.st tbody tr:nth-child(-n+4) td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
table.st .pts{font-family:'Figtree';font-weight:900;color:var(--blue)}

/* ---------- SIGNUP band ---------- */
.signup{background:linear-gradient(120% 120% at 80% 0,#0a3aa0,var(--blue) 60%,var(--blue-900));color:#fff;text-align:center}
.signup h3{font-size:clamp(24px,3.6vw,38px);color:#fff}
.signup p{color:#cdd9ff;max-width:54ch;margin:12px auto 0}
.signup form{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.signup input{padding:13px 16px;border-radius:var(--r);border:0;min-width:280px;font:inherit}

/* ---------- FOOTER ---------- */
footer{background:var(--blue-900);color:#aebbdc}
.partners-row{border-bottom:1px solid rgba(255,255,255,.12);padding:30px 0}
.partners-row .lab{font-family:'Figtree';font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7e92c6;text-align:center;margin-bottom:18px}
.partners-row .logos{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.partners-row .logos .ph{width:150px;height:60px;border-radius:8px}
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px;padding:46px 0}
.fcols .about img{width:52px;background:#fff;border-radius:8px;margin-bottom:12px}
.fcols .about p{font-size:13px;color:#9aa9d0}
.fcols .about .sa{color:var(--gold);font-size:16px}
.fcol h5{font-family:'Figtree';font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.fcol a{display:block;font-size:13.5px;padding:5px 0;color:#aebbdc}
.fcol a:hover{color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:12.5px}
.fbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.fbar .social{display:flex;gap:8px}
.fbar .social .ph{width:34px;height:34px;border-radius:50%}

/* responsive */
@media(max-width:980px){
  .mainnav{display:none}.navtoggle{display:block}
  .mainnav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:16px 22px;gap:14px;border-bottom:1px solid var(--line)}
  .hero .grid{grid-template-columns:1fr}.news-grid{grid-template-columns:repeat(2,1fr)}
  .rv .cols{grid-template-columns:1fr}.fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .news-grid{grid-template-columns:1fr}.fcols{grid-template-columns:1fr}.topbar nav{display:none}
}

/* ============================================================
   NAVY-PRIMARY THEME (navy dominant, not white)
   ============================================================ */
body{background:#04123A;color:#E9EEFC}
.ph{background:repeating-linear-gradient(45deg,#0c245f 0 12px,#0e2a6e 12px 24px);border-color:#284c93;color:#8aa0d4}

/* masthead → navy */
.mast{background:var(--blue);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 2px 14px -8px #000}
.brand b{color:#fff}.brand span{color:#aebbdc}
.mainnav>a,.mainnav .drop>a{color:#EAF0FF}
.mainnav>a:hover,.mainnav .drop:hover>a{color:var(--gold)}
.mainnav .drop>a:after{color:#aebbdc}
.mainnav .menu{background:#0A2363;border-color:rgba(255,255,255,.14)}
.mainnav .menu a{color:#EAF0FF}.mainnav .menu a:hover{background:#0E2C7A;color:#fff}
.iconbtn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.navtoggle{color:#fff}
.mainnav.open{background:var(--blue)!important}

/* section surfaces → navy tones */
.rv{background:#06205A}
.standings-sec{background:#04123A}
.sec-bar h3{color:#fff}
.sec-bar a{color:var(--gold)}

/* news cards → navy surface */
.card{background:#0A2363;border-color:rgba(255,255,255,.12)}
.card .c b{color:#fff}

/* tabs */
.tabs button{background:transparent;border-color:rgba(255,255,255,.25);color:#aebbdc}
.tabs button.on{background:#fff;color:var(--blue);border-color:#fff}

/* fixtures */
.fixture{border-bottom-color:rgba(255,255,255,.12)}
.fixture .nm{color:#fff}
.fixture .score{background:rgba(255,255,255,.12);color:#fff}
.fixture .rd{color:#aebbdc}

/* video */
.vid-list .v{border-top-color:rgba(255,255,255,.12)}
.vid-list .v b{color:#fff}.vid-list .v span{color:#aebbdc}

/* standings */
.tbl{background:#0A2363;border-color:rgba(255,255,255,.12)}
table.st td{color:#EAF0FF;border-top-color:rgba(255,255,255,.1)}
table.st .teamc{color:#fff}
table.st .pts{color:var(--gold)}
table.st tbody tr:nth-child(-n+4) td:first-child{box-shadow:inset 4px 0 0 var(--gold)}

/* ---- iteration 2 polish: OFC fidelity ---- */
.hero .grid{align-items:stretch}
.rail{height:100%}
.rail .item{flex:1 1 0;min-height:0}
.feature,.card{overflow:hidden}
.feature .cover,.card .cover{transition:transform .45s ease}
.feature:hover .cover,.card:hover .cover{transform:scale(1.05)}
.card{display:flex;flex-direction:column}
.card .c{flex:1}

/* crest badge fallback (colour + initials until a real logo PNG is added) */
.crestbadge{display:grid!important;place-items:center;font-family:'Figtree';font-weight:900;font-size:11px;line-height:1;border:1px solid rgba(255,255,255,.25)}
.mainnav .menu .crest{width:24px;height:24px;border-radius:50%}
.mainnav .menu .crestbadge{font-size:9px}
img.crest{object-fit:cover;background:#fff}

/* official-style standings header + pools */
.std-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-radius:12px 12px 0 0;padding:14px 22px;border:1px solid rgba(255,255,255,.14);border-bottom:0}
.std-header .std-crest{height:60px;width:auto;background:transparent}
.std-title{background:#46546b;color:#fff;font-family:'Figtree';font-weight:900;letter-spacing:.02em;text-align:center;padding:14px;font-size:20px;border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14)}
.pool{margin-top:22px}
.pool-h{font-family:'Figtree';font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding:10px 14px;background:#06205A;border-radius:8px 8px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0}
.pool .tbl{border-radius:0 0 8px 8px}
.pool-tbc{background:#0A2363;border:1px dashed rgba(255,255,255,.2);border-radius:0 0 8px 8px;padding:22px;color:#aebbdc;font-size:14px}

/* real crest logos: show full logo on a white circular badge */
img.crest{object-fit:contain!important;background:#fff;padding:2px;border:1px solid rgba(0,0,0,.06)}
.mainnav .menu img.crest{width:24px;height:24px;border-radius:50%}

/* ---- OFC-style team crest bar in the header ---- */
.crestbar{background:var(--blue);border-bottom:1px solid rgba(255,255,255,.14);position:sticky;top:74px;z-index:55}
.crestbar .wrap{display:flex;justify-content:center}
.crestbar-track{display:flex;gap:16px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.crestbar-track::-webkit-scrollbar{display:none}
.cb{flex:0 0 auto;display:block;transition:transform .15s}
.cb:hover{transform:translateY(-3px)}
.cb img,.cb .cbbadge{width:50px;height:50px;border-radius:50%;background:#fff;display:block}
.cb img{object-fit:contain;padding:3px;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.cb .cbbadge{display:grid;place-items:center;font-family:'Figtree';font-weight:900;font-size:15px;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.25)}
@media(max-width:980px){.crestbar{top:0}.crestbar-track{justify-content:flex-start}}

/* OFC fidelity: crest bar scrolls away (not a 2nd sticky bar) */
.crestbar{position:static!important}
.cb img,.cb .cbbadge{width:56px;height:56px}

/* logos sit natural: no white background, no circle container */
.cb img{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;width:56px;height:56px;object-fit:contain}
img.crest{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;object-fit:contain}

/* ============================================================
   ONE PRIMARY COLOUR SYSTEM (navy), like OFC's single dark grey
   Primary navy everywhere; gold + red as the only accents.
   ============================================================ */
:root{ --p:#0B1B3C; --e:#10224A; --d:#07142E; }
body{background:var(--p)!important}
.topbar{background:var(--d)!important}
.mast{background:var(--p)!important;border-bottom:1px solid rgba(255,255,255,.10)}
.crestbar{background:var(--p)!important;border-bottom:1px solid rgba(255,255,255,.08)}
.hero{background:var(--p)!important}
.rail .item{background:var(--e)!important}
.mainnav .menu{background:var(--e)!important}
.rv{background:var(--p)!important}
.standings-sec{background:var(--p)!important}
.card{background:var(--e)!important;border-color:rgba(255,255,255,.10)!important}
.tbl{background:var(--e)!important;border-color:rgba(255,255,255,.10)!important}
table.st thead th{background:var(--d)!important;color:var(--gold)!important}
.std-header{background:var(--e)!important;border-color:rgba(255,255,255,.10)}
.std-title{background:var(--d)!important}
.pool-h{background:var(--e)!important}
.pool-tbc{background:var(--e)!important}
.signup{background:var(--p)!important;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
footer{background:var(--d)!important}
/* active tab → gold accent instead of white */
.tabs button.on{background:var(--gold)!important;color:var(--d)!important;border-color:var(--gold)!important}
/* section divider accents stay gold/red; headings gold */
.sec-bar h3{color:#fff}

/* darker navy, closer to OFC's near-black */
:root{ --p:#060E20; --e:#0E1A33; --d:#03081A; }

/* crest sits natural on navy (no white badge) */
.brand img{background:transparent!important;border-radius:0!important;width:50px;height:50px;object-fit:contain}
.fcols .about img{background:transparent!important}

/* enlarge masthead ASRFU crest for visible detail */
.mast .wrap{height:92px}
.brand img{width:72px!important;height:72px!important}
.brand b{font-size:15px}

/* 2x larger masthead crest */
.mast .wrap{height:156px}
.brand img{width:144px!important;height:144px!important}

/* tighter masthead: less top/bottom space around the crest */
.mast .wrap{height:auto;padding-top:8px;padding-bottom:8px}
.brand img{width:auto!important;height:96px!important}

/* crest now trimmed: big but tight */
.brand img{height:118px!important;width:auto!important}
.mast .wrap{padding-top:7px!important;padding-bottom:7px!important;height:auto!important}

/* header refinements */
.mast{background:#04091A!important}                 /* slightly darker than primary #060E20 */
.brand img{height:112px!important;width:auto!important}   /* ASRFU logo = 2x the 56px team crests */
.mast .wrap{padding-top:7px!important;padding-bottom:7px!important;height:auto!important;gap:18px}
.brand{gap:16px}
.brand .wordmark{font-family:'Figtree',sans-serif;font-weight:900;font-size:60px;line-height:1;letter-spacing:.01em;color:#fff;text-transform:uppercase}

/* ASRFU wordmark proportionate to the 112px logo (balanced lockup) */
.brand{align-items:center}
.brand .wordmark{font-size:92px!important;line-height:.9!important}

/* stacked wordmark: top line sets width, bottom line justifies to match */
.brand .wordmark{display:inline-flex!important;flex-direction:column;justify-content:center;font-family:'Figtree',sans-serif;font-weight:900;color:#fff;text-transform:uppercase;line-height:.92;gap:2px}
.brand .wordmark .l1{display:block;font-size:46px;white-space:nowrap}
.brand .wordmark .l2{display:block;font-size:100%;width:100%;text-align:justify;text-align-last:justify}
/* size l2 so it justifies cleanly to l1 width */
.brand .wordmark .l2{font-size:25px}

/* full-width header like OFC, balanced across the top */
.mast .wrap{max-width:none!important;padding-left:44px!important;padding-right:44px!important}
.mainnav{gap:30px}
.mainnav>a,.mainnav .drop>a{font-size:15px}

/* wordmark fix: natural sizing, even spacing, equal width via tuned sizes */
.brand .wordmark .l1{font-size:48px!important;letter-spacing:0!important;white-space:nowrap!important;text-align:left!important;text-align-last:auto!important;width:auto!important}
.brand .wordmark .l2{font-size:34px!important;letter-spacing:0!important;white-space:nowrap!important;text-align:left!important;text-align-last:auto!important;width:auto!important}

/* wordmark: smaller width (like ASRFU), bold, white, both lines equal width */
.brand .wordmark{font-weight:900!important;color:#fff!important;line-height:.9}
.brand .wordmark .l1{font-size:32px!important;letter-spacing:0!important;white-space:nowrap!important;width:auto!important;text-align-last:auto!important}
.brand .wordmark .l2{font-size:23px!important;letter-spacing:0!important;white-space:nowrap!important;width:auto!important;text-align-last:auto!important}

/* force bold on wordmark lines */
.brand .wordmark .l1,.brand .wordmark .l2{font-weight:900!important}

/* logo height matches the wordmark height (tight lockup) */
.brand img{height:51px!important;width:auto!important}

/* GUARANTEE equal width: top line sets width, bottom line justifies to fill it; all white */
.brand .wordmark{display:inline-flex!important;flex-direction:column!important;width:max-content!important;color:#fff!important}
.brand .wordmark .l1{font-size:32px!important;font-weight:900!important;white-space:nowrap!important;width:auto!important;text-align:left!important;text-align-last:auto!important;letter-spacing:0!important;color:#fff!important}
.brand .wordmark .l2{font-size:23px!important;font-weight:900!important;white-space:normal!important;width:100%!important;text-align:justify!important;text-align-last:justify!important;letter-spacing:0!important;color:#fff!important}

/* ---- OFC-style Teams mega-menu ---- */
.drop-teams{position:static}
.drop-teams .megamenu{position:absolute;left:0;right:0;top:100%;background:#04091A;border-top:1px solid rgba(255,255,255,.10);box-shadow:0 26px 44px -22px #000;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:70}
.drop-teams:hover .megamenu{opacity:1;visibility:visible;transform:translateY(0)}
.megamenu .wrap{max-width:none;padding:30px 44px 40px}
.megamenu .mm-head{font-family:'Figtree',sans-serif;font-weight:900;color:var(--gold);text-transform:uppercase;letter-spacing:.04em;font-size:26px;margin:0 0 22px}
.megamenu .mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 56px}
.mm-team{display:flex;align-items:center;gap:16px}
.mm-crest{width:54px;height:54px;display:grid;place-items:center;flex:none}
.mm-crest img{width:54px!important;height:54px!important;object-fit:contain;background:transparent;border:0;border-radius:0}
.mm-crest .crestbadge{width:48px!important;height:48px!important;font-size:13px}
.mm-txt{display:flex;flex-direction:column;line-height:1.2}
.mm-region{font-size:13px;color:#9fb0da}
.mm-name{font-family:'Figtree',sans-serif;font-weight:800;color:#fff;font-size:17px}
.mm-team:hover .mm-name{color:var(--gold)}
/* Teams hover indicator like OFC (gold underline) */
.drop-teams:hover>a{color:var(--gold)!important;box-shadow:inset 0 -3px 0 var(--gold)}

/* ---- metallic white shiny wordmark ---- */
.brand .wordmark .l1,.brand .wordmark .l2{
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fc 30%,#c2cad9 50%,#ffffff 63%,#dde3ee 82%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}

/* fix: Teams mega-menu must span full width (beat .mainnav .drop position:relative) */
.mainnav .drop.drop-teams{position:static!important}
.drop-teams .megamenu{position:absolute!important;left:0!important;right:0!important;width:auto!important;top:100%!important}

/* a little more breathing room above/below the logo + wordmark */
.mast .wrap{padding-top:14px!important;padding-bottom:14px!important}

/* a touch more vertical padding around logo + wordmark */
.mast .wrap{padding-top:18px!important;padding-bottom:18px!important}

/* ---- About mega-menu (OFC layout) ---- */
.mainnav .drop.drop-about{position:static!important}
.drop-about .megamenu{position:absolute!important;left:0!important;right:0!important;width:auto!important;top:100%!important;background:#04091A;border-top:1px solid rgba(255,255,255,.10);box-shadow:0 26px 44px -22px #000;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:70}
.drop-about:hover .megamenu{opacity:1;visibility:visible;transform:translateY(0)}
.drop-about:hover>a{color:var(--gold)!important;box-shadow:inset 0 -3px 0 var(--gold)}
.megamenu-about .mm-links{max-width:380px}
.megamenu-about .mm-links a{display:block;font-family:'Figtree',sans-serif;font-weight:800;color:#fff;font-size:18px;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.14)}
.megamenu-about .mm-links a:first-child{border-top:0}
.megamenu-about .mm-links a:hover{color:var(--gold)}

/* ---- hero carousel blends into the background ---- */
.hero{padding-bottom:8px}
.feature{border-radius:0!important;border-bottom:0!important;min-height:480px}
.feature .cover{
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.35) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.35) 84%,transparent 100%);
}
/* overlay fades to the exact page navy so the photo melts into the bg + keeps text legible */
.feature .grad{background:linear-gradient(to top,#060E20 2%,rgba(6,14,32,.75) 30%,rgba(6,14,32,.15) 60%,transparent 78%)!important}
.feature .body{padding:34px 34px 30px}

/* ACCENT: ASRFU brand blue instead of OFC gold.
   Brand blue is #002869 (deep). Accents on the near-black navy use a brightened
   tint of the same royal-blue hue so they read; deep version kept for light areas. */
:root{ --accent:#2F6BEA; --accent-deep:#002869; }
/* NOTE: --gold stays copper #C9A24B (premium only). Primary accent is --accent (brand blue).
   Things that should read brand-blue use var(--accent); copper is reserved for premium flourishes. */

/* ============ HERO: centered carousel with faded side peeks (OFC) ============ */
.hero{position:relative!important;background:#060E20!important;padding:26px 0 18px!important;overflow:hidden}
.hcar{overflow:visible;width:100%}
.hcar-track{display:flex;gap:22px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.hslide{flex:0 0 76%;position:relative;min-height:560px;border-radius:5px;overflow:hidden;filter:brightness(.28) saturate(.85);transition:filter .55s ease}
.hslide.active{filter:none}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hslide .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,14,32,.92) 0%,rgba(6,14,32,.25) 42%,transparent 68%)}
.hslide .cap{position:absolute;left:0;bottom:0;padding:42px 50px;color:#fff;opacity:0;transition:opacity .45s ease .1s}
.hslide.active .cap{opacity:1}
.hslide .cap .tag{display:inline-block;background:var(--red);color:#fff;font-family:'Figtree',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.hslide .cap h2{font-family:'Figtree',sans-serif;font-weight:900;font-size:clamp(26px,3vw,40px);line-height:1.06;max-width:17ch;margin:14px 0 0}
.hcar-edge{position:absolute;top:26px;bottom:64px;width:9%;pointer-events:none;z-index:3}
.hcar-edge.left{left:0;background:linear-gradient(to right,#060E20 10%,transparent)}
.hcar-edge.right{right:0;background:linear-gradient(to left,#060E20 10%,transparent)}
.hcar-ctrl{position:relative;display:flex;align-items:center;justify-content:center;margin-top:18px;min-height:30px}
.hcar-dots{display:flex;gap:9px}
.hcar-dots button{width:9px;height:9px;border-radius:99px;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:.25s;padding:0}
.hcar-dots button.on{width:28px;background:var(--accent)}
.hcar-arrows{position:absolute;right:46px;display:flex;gap:18px}
.hcar-arrows button{background:transparent;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.75;transition:.2s}
.hcar-arrows button:hover{opacity:1;color:var(--accent)}
@media(max-width:880px){.hslide{flex:0 0 88%;min-height:420px}.hcar-arrows{right:18px}}

/* match OFC hero ratio: wide ~2.06:1, slightly wider slide */
.hslide{flex:0 0 80%!important;aspect-ratio:2.06/1;min-height:0!important}
.hcar-edge{bottom:72px}

/* hero caption like OFC: white headline only, bottom-left, not overpowering */
.hslide .cap{padding:34px 46px 30px}
.hslide .cap h2{font-size:clamp(22px,2.4vw,34px)!important;max-width:20ch;font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hslide .grad{background:linear-gradient(to top,rgba(6,14,32,.92) 0%,rgba(6,14,32,.45) 28%,transparent 55%)!important}

/* headline bigger + spans further across the hero image */
.hslide .cap{padding:40px 56px 36px;max-width:78%}
.hslide .cap h2{font-size:clamp(28px,3.4vw,46px)!important;max-width:none;line-height:1.08}

/* crest strip fits the hero frame, 7 bigger logos spread across, fades on rotate */
.crestbar .wrap{max-width:none}
.crestbar-track{width:80%!important;max-width:none!important;margin:0 auto!important;justify-content:space-between!important;gap:0!important;transition:opacity .3s ease}
.cb img,.cb .cbbadge{width:66px!important;height:66px!important}

/* compress (condense) the header wordmark horizontally */
.brand .wordmark{transform:scaleX(.88);transform-origin:left center}
.brand .wordmark .l1,.brand .wordmark .l2{letter-spacing:-.01em!important}

/* compress wordmark more */
.brand .wordmark{transform:scaleX(.76)!important;transform-origin:left center}
.brand .wordmark .l1,.brand .wordmark .l2{letter-spacing:-.02em!important}

/* compress wordmark more (tighter) */
.brand .wordmark{transform:scaleX(.64)!important;transform-origin:left center}

/* revert wordmark compression (back to natural) */
.brand .wordmark{transform:none!important}
.brand .wordmark .l1,.brand .wordmark .l2{letter-spacing:0!important}

/* collapse to hamburger before the lockup + nav titles overlap */
@media(max-width:1280px){
  .mainnav{display:none}
  .navtoggle{display:block}
  .mainnav.open{display:flex!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:#04091A;padding:16px 24px;gap:12px;border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 40px -20px #000;z-index:80;align-items:flex-start}
  .mainnav.open .drop{position:static!important}
  .mainnav.open .megamenu{display:none!important}   /* keep mobile menu simple: top-level links only */
  .mainnav.open .iconbtn{display:none}
  .mainnav.open>a,.mainnav.open .drop>a{font-size:17px;padding:6px 0}
}

/* crest strip: consistent fixed gaps, centered (count scales with width, not the gaps) */
.crestbar-track{width:auto!important;max-width:88%!important;margin:0 auto!important;justify-content:center!important;gap:34px!important}

/* ===== Latest News — OFC card layout (photo, date+icon, title, accent rule) ===== */
.news-grid{grid-template-columns:repeat(4,1fr)!important;gap:28px!important}
.card{background:transparent!important;border:0!important;border-bottom:2px solid var(--accent)!important;border-radius:0!important;overflow:visible!important;padding-bottom:18px;display:block!important}
.card:hover{transform:translateY(-3px);box-shadow:none!important}
.card .cover{height:auto!important;aspect-ratio:1/1;border-radius:2px;object-fit:cover}
.card .c{padding:16px 0 0!important}
.card .date{display:flex!important;align-items:center;gap:8px;font-size:13px!important;color:#9fb0da!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important}
.card .date svg{width:15px;height:15px;flex:none;color:var(--accent)}
.card .ttl{font-family:'DM Sans',sans-serif;font-weight:700;font-size:18px;color:#fff;margin:11px 0 0;line-height:1.32}
.card:hover .ttl{color:var(--accent)}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.news-grid{grid-template-columns:1fr!important}}

/* ===== Matches: results/upcoming carousel (OFC) + Pacific tapa pattern ===== */
.matches{position:relative;background-color:#060E20;background-image:url(assets/pattern-tapa.svg);background-size:240px;background-repeat:repeat}
.matches .wrap{position:relative}
.match-toggle{display:flex;gap:14px;background:#0b1530;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px;margin-bottom:26px}
.match-toggle .mt{flex:1;border:0;background:transparent;color:#aebbdc;font-family:'Figtree',sans-serif;font-weight:800;font-size:15px;padding:16px;border-radius:9px;cursor:pointer;transition:.18s}
.match-toggle .mt.on{background:var(--accent);color:#fff}
.match-car{overflow:hidden}
.match-track{display:flex;gap:22px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.mcard{flex:0 0 calc(33.333% - 15px);background:#0c1730;border:1px solid rgba(255,255,255,.10);border-radius:12px;overflow:hidden}
.mc-date{display:flex;align-items:center;gap:9px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--accent);font-size:14px;font-weight:600}
.mc-date svg{width:16px;height:16px}
.mc-date span{color:#cdd9ef}
.mc-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:30px 16px 34px}
.mc-team{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.mc-team .crest{width:58px!important;height:58px!important}
.mc-name{font-family:'Figtree',sans-serif;font-weight:700;font-size:14px;color:#fff;line-height:1.2}
.mc-score{display:flex;flex-direction:column;align-items:center;gap:6px}
.mc-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8aa0d4}
.mc-val{font-family:'Figtree',sans-serif;font-weight:900;font-size:34px;color:#fff;display:flex;align-items:center;gap:10px;line-height:1}
.mc-val i{color:var(--accent);font-style:normal}
.mc-vs{font-size:24px;color:var(--accent)}
.match-ctrl{position:relative;display:flex;align-items:center;justify-content:center;margin-top:24px;min-height:30px}
.match-dots{display:flex;gap:9px}
.match-dots button{width:9px;height:9px;border-radius:99px;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:.25s}
.match-dots button.on{width:28px;background:var(--accent)}
.match-arrows{position:absolute;right:0;display:flex;gap:16px}
.match-arrows button{background:transparent;border:0;color:#fff;font-size:30px;cursor:pointer;opacity:.75}
.match-arrows button:hover{opacity:1;color:var(--accent)}
.vidsec .vid-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
@media(max-width:980px){.mcard{flex:0 0 calc(50% - 11px)}.vidsec .vid-cols{grid-template-columns:1fr}}
@media(max-width:620px){.mcard{flex:0 0 86%}.match-toggle{flex-direction:column}}

/* matches section: FULL WIDTH + darkened copper-patterned band (clear section break) */
.matches{
  background-color:#070A12 !important;
  background-image:
    radial-gradient(130% 90% at 50% 118%, rgba(201,162,75,.13), transparent 62%),
    url(assets/pattern-tapa-copper.svg) !important;
  background-size:auto, 240px !important;
  background-repeat:no-repeat, repeat !important;
  padding:66px 0 !important;
  border-top:1px solid rgba(201,162,75,.14);
  border-bottom:1px solid rgba(201,162,75,.14);
}
.matches .wrap{max-width:none !important;padding-left:44px !important;padding-right:44px !important}
/* match cards keep ~3-4 across full width */
.mcard{flex:0 0 calc(25% - 17px)}
@media(max-width:1200px){.mcard{flex:0 0 calc(33.333% - 15px)}}
@media(max-width:980px){.mcard{flex:0 0 calc(50% - 11px)}}
@media(max-width:620px){.mcard{flex:0 0 86%}}

/* header: match the matches-band darkness + ensure sticky on scroll */
.mast{background:#070A12!important;position:sticky!important;top:0!important;z-index:100!important}
html,body{overflow-x:hidden}

/* restore overflow so position:sticky works (overflow-x:hidden was breaking it) */
html,body{overflow-x:visible!important;overflow-y:visible!important}

/* unify all section headers (match OFC: accent-coloured uppercase title + tick, consistent across every section) */
.sec-bar h3{color:var(--accent)!important}
.sec-bar h3 .bar{background:var(--accent)!important}
.sec-bar a{color:var(--accent)!important}
.matches .sec-bar{margin-bottom:22px}

/* ===== homepage standings: OFC-style team cards row ===== */
.stand-row{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.stand-row::-webkit-scrollbar{display:none}
.stand-card{flex:0 0 230px;background:#0c1730;border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:20px}
.sc-top{display:flex;align-items:center;gap:11px}
.sc-rank{font-family:'Figtree',sans-serif;font-weight:900;color:var(--accent);font-size:17px;min-width:18px}
.sc-top .crest{width:46px!important;height:46px!important}
.sc-name{font-family:'Figtree',sans-serif;font-weight:800;color:#fff;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-stats{display:flex;justify-content:space-between;gap:4px;border-top:1px solid rgba(255,255,255,.1);margin-top:16px;padding-top:14px}
.sc-stats div{display:flex;flex-direction:column;align-items:center;gap:3px}
.sc-stats b{font-family:'Figtree',sans-serif;font-weight:900;font-size:19px;color:#fff}
.sc-stats div:first-child b{color:var(--accent)}
.sc-stats span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8aa0d4}

/* ===== standings tournament title band ===== */
.std-brand{display:flex;align-items:center;gap:16px;margin:0 0 24px}
.std-brand .std-logo{height:60px;width:auto;background:transparent}
.std-brand b{font-family:'Figtree',sans-serif;font-weight:900;color:#fff;font-size:22px;display:block;line-height:1.1}
.std-brand span{color:var(--accent);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ===== standings cards — OFC layout (rank badge, centered crest, PTS/PLD/Won/Lost, recent form) ===== */
.stand-card{flex:0 0 300px!important;background:#0c1730!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;padding:0 0 20px!important;text-align:center!important;position:relative;overflow:visible!important}
.stand-card .sc-rank{position:absolute;top:18px;left:18px;background:var(--accent);color:#fff;font-family:'Figtree',sans-serif;font-weight:800;font-size:13px;padding:7px 12px;border-radius:8px}
.sc-crest-c{padding-top:26px}
.sc-crest-c .crest{width:84px!important;height:84px!important}
.stand-card .sc-name{font-family:'Figtree',sans-serif;font-weight:800;color:#fff;font-size:17px;margin:12px 16px 0!important;white-space:normal!important;line-height:1.2}
.stand-card .sc-stats{display:flex!important;justify-content:center!important;gap:24px!important;margin:18px 0 0!important;padding:0 16px!important;border:0!important}
.stand-card .sc-stats div{display:flex;flex-direction:column;align-items:center;gap:3px}
.stand-card .sc-stats b{font-family:'Figtree',sans-serif;font-weight:900;font-size:23px;color:#fff!important}
.stand-card .sc-stats span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8aa0d4}
.sc-form{border-top:1px solid rgba(255,255,255,.1);margin:18px 18px 0;padding-top:14px;text-align:left}
.sc-form-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8aa0d4;font-weight:700}
.sc-form-row{display:flex;gap:7px;margin-top:10px}
.sc-form-row i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:#fff}
.sc-form-row .w{background:#1f9d57}.sc-form-row .d{background:#9aa3b2;color:#0a1a3f}.sc-form-row .l{background:var(--red)}

/* standings card — match OFC exactly (gold rank badge, spread stats, outlined form badges) */
.stand-card .sc-rank{background:#C9A24B!important;color:#0a1a3f!important;font-size:14px!important;padding:8px 14px!important}
.stand-card .sc-stats{justify-content:space-between!important;gap:0!important;padding:0 26px!important;margin-top:20px!important}
.stand-card .sc-stats b{font-size:26px!important;letter-spacing:-.01em}
.stand-card .sc-stats span{font-size:12px!important;text-transform:none!important;letter-spacing:0!important;color:#8c99b5}
.sc-form{margin:20px 24px 0!important;padding-top:16px!important}
.sc-form-lbl{text-transform:none!important;font-size:13px!important;letter-spacing:0!important;color:#8c99b5!important;font-weight:600!important}
.sc-form-row{gap:9px!important;margin-top:11px!important}
.sc-form-row i,.sc-form-row .w,.sc-form-row .d,.sc-form-row .l{background:transparent!important;border:1px solid rgba(255,255,255,.26)!important;color:#dfe6ff!important;width:30px!important;height:30px!important;font-weight:600!important}

/* standings card fixes: rank badge = accent blue, crest centered */
.stand-card .sc-rank{background:var(--accent)!important;color:#fff!important}
.stand-card .sc-crest-c{display:flex!important;justify-content:center!important;align-items:center;padding-top:30px!important}
.stand-card .sc-crest-c .crest{margin:0 auto}

/* standings title: centered ASRFU Village League logo + subtitle */
.std-brand{flex-direction:column!important;align-items:center!important;gap:10px!important;text-align:center;margin:0 0 30px!important}
.std-brand .vl-logo{height:78px;width:auto}
.std-brand .std-sub{color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;font-family:'Figtree',sans-serif}

/* bigger Village League logo, tighter vertical padding */
.std-brand{margin:0 0 16px!important;gap:4px!important}
.std-brand .vl-logo{height:128px!important}
.std-brand .std-sub{margin-top:-6px}

/* ===== Official sponsors band (under hero) ===== */
.sponsors-band{background:#070A12;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:24px 0}
.sponsors-band .wrap{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}
.sb-label{font-family:'Figtree',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sb-logos{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.sb-chip{background:#fff;border-radius:10px;padding:12px 24px;display:flex;align-items:center;height:62px}
.sb-chip img{height:36px;width:auto;object-fit:contain;display:block}
/* footer partner chips */
.partners-row .logos{align-items:center}
.partner-chip{background:#fff;border-radius:8px;padding:10px 18px;height:52px;display:flex;align-items:center}
.partner-chip img{height:30px;width:auto;object-fit:contain;display:block}
@media(max-width:620px){.sb-chip img{height:28px}.sponsors-band .wrap{gap:16px}}

/* dark chip for white/light partner logos (e.g. North & South Trust) */
.partner-chip.dark{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.16)}
.partner-chip.dark img{height:38px}

/* remove white chips: sponsor + partner logos sit transparent, sized under the Village League logo */
.sb-chip{background:transparent!important;border:0!important;padding:0!important;height:auto!important}
.sb-chip img{height:72px!important}
.partner-chip,.partner-chip.dark{background:transparent!important;border:0!important;padding:0!important;height:auto!important}
.partner-chip img,.partner-chip.dark img{height:58px!important}
.partners-row .logos{gap:34px!important}
.sponsors-band .wrap{gap:40px}
.sb-logos{gap:34px}

/* ===== ASRFU tatau section-break image (replaces the plain darker band) ===== */
.matches{
  background-color:#060E20 !important;
  background-image:url(assets/section-break.png) !important;
  background-size:cover !important;
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}
/* reusable thin section-break divider for between other sections */
.tatau-break{height:120px;background:#060E20 url(assets/section-break.png) center bottom/cover no-repeat;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

/* use the tatau image as full-width section-break BANDS between sections (not a faint section bg) */
.matches{background-image:none !important;background-color:#070A12 !important}
.tatau-break{width:100%;height:150px;background:#060E20 url(assets/section-break.png) center/cover no-repeat;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

/* show the tatau pattern strip in the break band (anchor to the patterned bottom, full width) */
.tatau-break{height:170px!important;background:#060E20 url(assets/section-break.png) center bottom/100% auto no-repeat!important}

/* bigger sponsor + partner logos */
.sb-chip img{height:104px!important}
.sponsors-band{padding:30px 0!important}
.partner-chip img,.partner-chip.dark img{height:76px!important}

/* footer sponsor/partner ladder: logos same size as the sponsors band */
.partner-chip img,.partner-chip.dark img{height:88px!important}
.partners-row .lab.tier2{margin-top:34px}
.partners-row .logos{gap:40px!important;flex-wrap:wrap}

/* revert: partners back to original size, no ladder */
.partner-chip img,.partner-chip.dark img{height:58px!important}
.partners-row .logos{gap:34px!important}

/* footer: two roles — Official Sponsors (bigger) above Our Partners */
.partners-row .logos.spon-tier .partner-chip img{height:84px!important}
.partners-row .lab.tier2{margin-top:36px}

/* footer sponsors same size as top band (104px); ensure all logo chips transparent (no white bg) */
.partners-row .logos.spon-tier .partner-chip img{height:104px!important}
.sb-chip,.partner-chip,.partner-chip.dark{background:transparent!important;border:0!important;box-shadow:none!important}

/* bigger logos + guaranteed transparent (no white bg) */
.sb-chip img{height:120px!important}
.partners-row .logos.spon-tier .partner-chip img{height:120px!important}
.partner-chip img,.partner-chip.dark img{height:80px!important}
.sb-chip,.partner-chip,.partner-chip.dark,.sponsors-band,.partners-row{background:transparent!important;border:0!important;box-shadow:none!important}
.sponsors-band{border-top:1px solid rgba(255,255,255,.08)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.partners-row .logos{gap:44px!important}
.sb-logos{gap:44px!important}

/* standings carousel arrows (bottom-right) */
.stand-ctrl{display:flex;justify-content:flex-end;gap:16px;margin-top:18px}
.stand-ctrl button{background:transparent;border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer;opacity:.75;transition:.2s}
.stand-ctrl button:hover{opacity:1;color:var(--accent)}

/* RTS attribution bar (bottom of footer, every page) */
.rts-bar{border-top:1px solid rgba(255,255,255,.07);background:#03060E}
.rts-bar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px}
.rts-bar .rts-logo{height:26px;width:auto;opacity:.85}
.rts-bar span{color:#6b7894;font-size:13px;letter-spacing:.01em;text-align:center}

/* ============================================================
   OFC-style typography (Saira = free Eurostile-Extended stand-in)
   + mobile optimisation. Appended last so it wins.
   ============================================================ */
h1,h2,h3,h4,.dsp,.sec-bar h3,.page-title,.page-head h1,.pagehead h1,.page-head h2,
.hslide .cap h2,.std-sub,.sb-label,.lab,.mm-head,.hslide .cap .tag,.sc-rank,.std-brand b{
  font-family:'Saira','Figtree',sans-serif!important}
.brand .wordmark,.brand .wordmark .l1,.brand .wordmark .l2{font-family:'Figtree',sans-serif!important} /* keep brand lockup */
.sec-bar h3{letter-spacing:.012em}

/* ---- tablet ---- */
@media(max-width:900px){
  .wrap{padding:0 18px}
  .sec-bar h3{font-size:19px}
  .std-brand .vl-logo{height:92px!important}
  .sb-chip img{height:72px!important}
  .partners-row .logos.spon-tier .partner-chip img{height:72px!important}
  .partner-chip img,.partner-chip.dark img{height:52px!important}
  .tatau-break{height:104px!important}
  .hslide{min-height:440px}
}
/* ---- phone ---- */
@media(max-width:600px){
  .wrap{padding:0 15px}
  .sec-bar{flex-wrap:wrap;gap:6px;align-items:baseline}
  .sec-bar h3{font-size:18px}
  .sec-bar>a,.sec-bar a{font-size:12px}
  .hero{padding:16px 0 10px!important}
  .hslide{flex:0 0 88%;min-height:340px}
  .hslide .cap{padding:20px 18px}
  .hslide .cap h2{font-size:21px;margin-top:10px;max-width:20ch}
  .hslide .cap .tag{font-size:10px;padding:5px 10px}
  .hcar-edge{display:none}
  .match-toggle .mt{font-size:13px}
  .stand-card{flex:0 0 84%!important}
  .stand-ctrl{margin-top:14px}
  .std-brand{margin:0 0 14px!important}
  .std-brand .vl-logo{height:66px!important}
  .sb-label{font-size:11px}
  .sb-chip img{height:46px!important}
  .partners-row .logos.spon-tier .partner-chip img{height:54px!important}
  .partner-chip img,.partner-chip.dark img{height:40px!important}
  .partners-row .logos{gap:22px!important;flex-wrap:wrap}
  .sb-logos{gap:20px!important;flex-wrap:wrap}
  .sponsors-band .wrap{flex-direction:column;gap:14px}
  .tatau-break{height:60px!important}
  .vidsec .vid-cols{grid-template-columns:1fr!important}
  .fcols{padding:30px 0!important;gap:22px!important}
  .fbar .wrap{flex-direction:column;gap:10px;text-align:center;align-items:center}
  .rts-bar .wrap{gap:9px;padding:15px 16px}
  .rts-bar span{font-size:11px}
  .rts-bar .rts-logo{height:22px}
  .mainnav.open>a,.mainnav.open .drop>a{font-size:16px}
}

/* ============================================================
   CANONICAL SYSTEM + AUTHORITATIVE RESPONSIVE LAYER (final, wins cascade)
   Breakpoints: 900px (tablet), 600px (phone).
   - Page band:  bg #070A12, border-bottom 1px rgba(255,255,255,.10), pad 54px 0 48px
   - Page H1:    Figtree 900, clamp(32px,5vw,58px), uppercase #fff, ls -.01em, lh 1.02
   - Eyebrow:    Figtree 800, 12px, ls .18em, uppercase, var(--accent), mb 12px
   - Sec header: Figtree 900, clamp(22px,3vw,30px), uppercase var(--accent); tick 34x5 accent
   - .sa motto:  Fraunces italic, copper #C9A24B
   - Body:       16px / lh 1.7; small 15px; muted #9fb0da; stat label #8aa0d4
   - Section rhythm: 60px 0 64px
   ============================================================ */

/* --- canonical section header (one source of truth, all pages) --- */
.sec-bar h3{font-family:'Saira','Figtree',sans-serif!important;font-weight:900!important;
  font-size:clamp(22px,3vw,30px)!important;text-transform:uppercase!important;color:var(--accent)!important;letter-spacing:.012em!important}
.sec-bar h3 .bar{display:inline-block;width:34px;height:5px;background:var(--accent)!important;border-radius:3px;margin-right:12px;vertical-align:middle}
.sec-bar a{font-family:'Figtree',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;color:var(--accent)!important}
/* fixtures' parallel "match-head" inherits the sec-bar canon (accent blue, same scale, 34x5 tick) */
.matches .match-head{color:var(--accent)!important;font-size:clamp(22px,3vw,30px)!important;letter-spacing:.012em!important}
.matches .match-head .bar{width:34px!important;height:5px!important;background:var(--accent)!important}
/* teams pool divider: tick to canonical 34x5 (kept white as a deliberate sub-tier label) */
.pool-label .tick{width:34px!important}

/* --- motto: copper everywhere (premium), one size --- */
.sa{font-family:'Fraunces',serif;font-style:italic}
.pagehead .sa,.page-head .sa,.page-title .sa,.newshead .sa,.about-hero .sa,.th-sa,.gov-cols .sa,
.contact-info .sa,.league-grid .sa,.copper-break .sa,.fcols .about .sa,.topbar .sa{color:#C9A24B!important}

/* --- standardise muted body colour to the canonical #9fb0da on legacy spots --- */
.fixture .rd,.vid-list .v span,.fcol a,.rail .item .t span{color:#9fb0da}

/* ============ TABLET (<=900px) ============ */
@media(max-width:900px){
  .mast .wrap{padding-left:20px!important;padding-right:20px!important;gap:14px}
  .matches .wrap{padding-left:20px!important;padding-right:20px!important}
}

/* ============ PHONE (<=600px) ============ */
@media(max-width:600px){
  html,body{max-width:100%;overflow-x:hidden}

  /* ---- HEADER: shrink lockup, keep hamburger on-screen, kill 32px overflow ---- */
  .mast .wrap{padding-left:16px!important;padding-right:16px!important;gap:12px;
    padding-top:10px!important;padding-bottom:10px!important}
  .brand{gap:10px}
  .brand img{height:48px!important;width:auto!important}
  .brand .wordmark{transform:none!important}
  .brand .wordmark .l1{font-size:16px!important;letter-spacing:0!important;line-height:1!important}
  .brand .wordmark .l2{font-size:11.5px!important;letter-spacing:.01em!important;line-height:1.05!important;
    text-align:left!important;text-align-last:auto!important;white-space:nowrap!important}
  .navtoggle{display:block!important;margin-left:auto!important;font-size:26px;position:static!important;
    flex:none;width:auto;color:#fff}
  /* mobile drawer anchored under the sticky header */
  .mainnav.open{top:100%!important}

  /* crest strip: tighter so it reads as a strip, more crests visible */
  .crestbar-track{gap:18px!important;max-width:100%!important;justify-content:flex-start!important;padding:10px 16px!important}
  .cb img,.cb .cbbadge{width:44px!important;height:44px!important}

  /* ---- SECTION RHYTHM + GUTTERS ---- */
  section{padding:40px 0}
  .matches{padding:44px 0!important}
  .matches .wrap{padding-left:16px!important;padding-right:16px!important}
  .wrap{padding:0 16px}
  .sec-bar{margin-bottom:20px}

  /* ---- HERO ---- */
  .hslide .cap h2{font-size:clamp(24px,7vw,28px)!important}

  /* ---- NEWS: single column already; tighten ---- */
  .news-grid{gap:22px!important}

  /* ---- STANDINGS card swipe ---- */
  .stand-card{flex:0 0 86%!important}

  /* ---- SPONSORS / PARTNERS: cap heights ~48-64px, tighten gaps ---- */
  .sponsors-band{padding:26px 0!important}
  .sb-label{font-size:11px;letter-spacing:.18em}
  .sb-chip img{height:50px!important}
  .partners-row{padding:26px 0!important}
  .partners-row .logos.spon-tier .partner-chip img{height:56px!important}
  .partner-chip img,.partner-chip.dark img{height:44px!important}
  .partners-row .logos{gap:26px!important;justify-content:center}
  .sb-logos{gap:26px!important;justify-content:center}
  .sponsors-band .wrap{flex-direction:column;gap:14px}

  /* ---- FOOTER stacking ---- */
  .fcols{grid-template-columns:1fr!important;gap:24px!important;padding:34px 0!important}
  .fcol h5{margin-bottom:8px}

  /* ---- MATCH CARDS fit viewport ---- */
  .mcard{flex:0 0 86%!important}
  .match-toggle{flex-direction:column}

  /* ---- STANDINGS TABLES: stop clipping Pts/A/+- columns (scroll instead) ---- */
  .tbl,.pool .tbl{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .tbl::-webkit-scrollbar,.pool .tbl::-webkit-scrollbar{height:6px}
  table.st{min-width:520px}
  table.st thead th,table.st td{padding:10px 9px!important;font-size:13px}
  .std-header{padding:12px 16px!important}
  .std-title{font-size:16px!important;padding:12px!important}
}

/* mobile masthead: shrink wordmark + crest + side padding so it fits and hamburger shows */
@media(max-width:900px){
  .mast .wrap{padding-left:18px!important;padding-right:18px!important;gap:14px}
  .brand img{height:48px!important}
  .brand .wordmark .l1{font-size:26px!important}
  .brand .wordmark .l2{font-size:18px!important}
}
@media(max-width:600px){
  .mast .wrap{padding-left:13px!important;padding-right:13px!important;gap:9px}
  .brand img{height:38px!important}
  .brand .wordmark .l1{font-size:16.5px!important}
  .brand .wordmark .l2{font-size:11.5px!important}
  .navtoggle{font-size:23px;margin-left:auto;color:#fff}
}

/* ensure hamburger is visible + tappable on mobile */
@media(max-width:1280px){
  .navtoggle{display:block!important;color:#fff!important;font-size:26px!important;background:transparent;line-height:1;padding:4px 6px;flex:none}
  .brand{flex:0 1 auto;min-width:0}
}

/* CSS-drawn hamburger (glyph-independent) */
@media(max-width:1280px){
  .navtoggle{display:block!important;font-size:0!important;width:34px;height:30px;position:relative;padding:0;flex:none;margin-left:auto;background:transparent;border:0}
  .navtoggle::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:2px;background:#fff;box-shadow:0 7px 0 #fff,0 14px 0 #fff;border-radius:2px}
}

/* svg hamburger (replaces the css-bars hack) */
@media(max-width:1280px){
  .navtoggle::before{display:none!important;content:none!important}
  .navtoggle{display:block!important;width:auto!important;height:auto!important;font-size:0!important;padding:4px!important;margin-left:auto;flex:none;color:#fff!important;background:transparent;border:0}
  .navtoggle svg{display:block;width:26px;height:26px;color:#fff}
}

/* bulletproof: absolutely pin the hamburger to the header's right on mobile */
@media(max-width:1280px){
  .mast .wrap{position:relative}
  .navtoggle{position:absolute!important;right:16px;top:50%;transform:translateY(-50%);
    width:30px!important;height:30px!important;padding:0!important;margin:0!important;
    display:flex!important;align-items:center;justify-content:center;background:transparent!important;border:0!important;z-index:5}
  .navtoggle svg{display:block;width:26px;height:26px}
  .navtoggle svg line{stroke:#fff}
}
@media(max-width:600px){ .navtoggle{right:13px} .brand{padding-right:40px} }

/* use proven ::before bars inside the fixed 30px absolute button; hide svg */
@media(max-width:1280px){
  .navtoggle svg{display:none!important}
  .navtoggle::before{display:block!important;content:""!important;position:absolute;left:6px;right:6px;top:9px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 12px 0 #fff;border-radius:2px}
}

@media(max-width:1280px){.navtoggle{background:red!important;outline:3px solid lime!important}}

/* CORRECTIVE: hamburger in normal flow, fixed width, bars via ::before (kills debug + absolute) */
@media(max-width:1280px){
  .navtoggle{position:relative!important;display:block!important;width:32px!important;min-width:32px!important;max-width:32px!important;flex:0 0 32px!important;height:30px!important;margin-left:auto!important;padding:0!important;background:transparent!important;outline:0!important;border:0!important}
  .navtoggle svg{display:none!important}
  .navtoggle::before{display:block!important;content:""!important;position:absolute!important;left:6px!important;width:20px!important;right:auto!important;top:8px!important;height:2px!important;background:#fff!important;box-shadow:0 6px 0 #fff,0 12px 0 #fff!important;border-radius:2px!important}
}

/* ===== AUTHORITATIVE hamburger (resets all prior experimental offsets) ===== */
@media(max-width:1280px){
  .navtoggle{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;
    display:block!important;width:32px!important;min-width:32px!important;max-width:32px!important;flex:0 0 32px!important;height:24px!important;
    margin-left:auto!important;padding:0!important;background:transparent!important;outline:0!important;border:0!important;font-size:0!important}
  .navtoggle svg{display:none!important}
  .navtoggle::before{display:block!important;content:""!important;position:absolute!important;left:6px!important;width:20px!important;right:auto!important;top:3px!important;height:2px!important;background:#fff!important;box-shadow:0 7px 0 #fff,0 14px 0 #fff!important;border-radius:2px!important}
}