/* Expat World Cup — federation editorial system */

:root {
  /* Primary Colours */
  --color-emerald: #00A86B; /* Main brand colour */
  --color-emerald-deep: #008755;
  --color-emerald-light: rgba(0, 168, 107, 0.12);
  --color-primary: #00A86B;
  --color-primary-deep: #008755;

  /* Secondary Colours */
  --color-royal: #0057D9; /* Secondary brand colour */
  --color-royal-deep: #0043aa;
  --color-royal-dark: #071e4a;
  --color-secondary: #0057D9;
  --color-navy: #071739;
  --color-dark: #071426;

  /* Accent Colours */
  --color-yellow: #FFC72C; /* Golden Yellow for CTAs, highlights, icons, countdown */
  --color-yellow-hover: #e5b225;
  --color-yellow-glow: rgba(255, 199, 44, 0.35);

  --color-gold: #D4AF37; /* Championship Gold for trophy elements, premium badges, VIP */
  --color-gold-bright: #FFC72C;
  --color-gold-deep: #B8972E;
  --color-trophy: #D4AF37;

  /* Supporting Colours */
  --color-light: #F8FAFC; /* Light Background */
  --color-white: #ffffff;
  --color-paper: #F1F5F9;
  --color-ink: #111827; /* Dark Text */
  --color-muted: #4B5563;
  --color-line: rgba(17, 24, 39, 0.08);
  --color-line-strong: rgba(0, 87, 217, 0.16);
  --color-danger: #DC2626;

  --container-width: 1280px;
  --header-h: 64px;
  --gutter: clamp(1rem, 3vw, 2.4rem);
  --radius: 4px;
  --shadow: 0 16px 36px rgba(0, 87, 217, 0.08);
  --font-display: "Saira", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;
  --font-stat: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-bn: "Noto Sans Bengali", "Barlow", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  background: var(--color-light);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4, p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--color-emerald); color: #ffffff; }

:focus-visible {
  outline: 2px solid var(--color-emerald);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 80;
  background: var(--color-yellow);
  color: var(--color-ink);
  padding: 0.7rem 1rem;
  font-weight: 700;
}

.skip:focus { top: 1rem; }

.container {
  width: min(var(--container-width), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.band { padding: clamp(4.2rem, 8vw, 7.2rem) 0; overflow: hidden; max-width: 100%; }
.band-dark { background: var(--color-navy); color: #ffffff; }
.band-ivory { background: var(--color-light); }
.band-paper { background: var(--color-paper); }
.band-emerald { background: linear-gradient(135deg, #022b1c 0%, #00A86B 100%); color: #ffffff; }
.band-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

html[lang="bn"] body { font-family: var(--font-bn); }
html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] .brand-name,
html[lang="bn"] .hero-float { font-family: var(--font-bn); letter-spacing: 0; }
html[lang="bn"] .eyebrow,
html[lang="bn"] .btn,
html[lang="bn"] .primary-nav a,
html[lang="bn"] .link-arrow { text-transform: none; letter-spacing: 0.02em; }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

h1, h2, h3 { color: #071739; }
h2 { font-size: clamp(1.7rem, 2.6vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; }
h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; line-height: 1.2; font-size: 1.5rem; }

/* Universal High-Contrast White Headings on ALL dark backgrounds & hero sections */
:is(
  .band-dark,
  .band-emerald,
  .hero,
  .page-hero,
  .page-hero-awards,
  .page-hero-matches,
  .page-hero-news,
  .page-hero-players,
  .page-hero-standings,
  .page-hero-stats,
  .page-hero-teams,
  .page-hero-venues,
  [class*="page-hero"],
  .spotlight,
  .site-footer,
  .drawer,
  .search-panel,
  .doctrine-lead,
  .profile-banner,
  .squad-card,
  .leader,
  .award,
  .video-card,
  .lightbox,
  .lightbox .sheet,
  .cta-stage,
  .cta-band,
  .scorecard-banner-header,
  .featured-story-banner,
  .modal-header-hero,
  .team-modal-header,
  .standings-card-header,
  .tier-card
) :is(h1, h2, h3, h4) { 
  color: #ffffff !important; 
}

.lede {
  max-width: 42rem;
  color: var(--color-muted);
  font-size: 1.08rem;
}

:is(
  .band-dark,
  .band-emerald,
  .hero,
  .page-hero,
  .page-hero-awards,
  .page-hero-matches,
  .page-hero-news,
  .page-hero-players,
  .page-hero-standings,
  .page-hero-stats,
  .page-hero-teams,
  .page-hero-venues,
  [class*="page-hero"],
  .spotlight,
  .cta-stage,
  .lightbox .sheet
) .lede { 
  color: rgba(244, 241, 234, 0.9) !important; 
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--color-emerald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

:is(
  .band-dark,
  .band-emerald,
  .hero,
  .page-hero,
  .page-hero-awards,
  .page-hero-matches,
  .page-hero-news,
  .page-hero-players,
  .page-hero-standings,
  .page-hero-stats,
  .page-hero-teams,
  .page-hero-venues,
  [class*="page-hero"],
  .spotlight,
  .cta-stage,
  .lightbox .sheet
) .eyebrow { 
  color: var(--color-yellow) !important; 
}

.rule {
  display: block;
  width: 52px;
  height: 2px;
  margin: 1rem 0 1.15rem;
  background: var(--color-emerald);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.section-head h2 { max-width: 16ch; color: var(--color-royal); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-gold,
.btn-cta {
  background: #FFC72C;
  border: 2px solid #FFC72C;
  color: #111827;
  font-weight: 700;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 14px rgba(255, 199, 44, 0.35);
}

.btn-gold:hover,
.btn-cta:hover {
  background: #00A86B;
  border-color: #00A86B;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 168, 107, 0.4);
  transform: translateY(-2px);
}

.btn-primary,
.btn-emerald {
  background: #00A86B;
  border: 2px solid #00A86B;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 168, 107, 0.3);
}

.btn-primary:hover,
.btn-emerald:hover {
  background: #008755;
  border-color: #008755;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 135, 85, 0.4);
  transform: translateY(-2px);
}

.btn-secondary,
.btn-royal {
  background: #0057D9;
  border: 2px solid #0057D9;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 87, 217, 0.3);
}

.btn-secondary:hover,
.btn-royal:hover {
  background: #0043aa;
  border-color: #0043aa;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-ghost {
  border: 2px solid #FFC72C;
  color: #FFC72C;
  background: transparent;
}

.btn-ghost:hover {
  background: #FFC72C;
  border-color: #FFC72C;
  color: #111827;
  transform: translateY(-2px);
}

.btn-line {
  border-color: var(--color-royal);
  color: var(--color-royal);
}

.btn-line:hover {
  background: var(--color-royal);
  color: #ffffff;
  border-color: var(--color-royal);
}

.band-dark .btn-line,
.band-emerald .btn-line {
  border-color: rgba(248, 250, 252, 0.45);
  color: #ffffff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-royal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s, gap 0.2s;
}

.band-dark .link-arrow,
.band-emerald .link-arrow,
.spotlight .link-arrow { color: var(--color-yellow); }

.link-arrow::after { content: "→"; }

.link-arrow:hover {
  color: var(--color-emerald);
  gap: 0.7rem;
}

.icon-btn,
.nav-toggle {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(244, 241, 234, 0.2);
  background: transparent;
  color: var(--color-light);
}

.icon-btn:hover,
.nav-toggle:hover { border-color: var(--color-gold-bright); color: var(--color-gold-bright); }

.nav-toggle { display: none; gap: 5px; justify-items: center; align-content: center; }
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  grid-column: 1;
  background: currentColor;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: #fff;
  background: rgba(7, 23, 57, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 168, 107, 0.3);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.42);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00A86B 0%, #0057D9 45%, #FFC72C 80%, #D4AF37 100%);
}

.site-header.is-solid { background: rgba(5, 17, 43, 0.98); }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(var(--container-width), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  color: var(--color-light);
  border: 1.5px solid rgba(255, 199, 44, 0.6);
  background: #071739 url("../assets/logos/ewc-logo.jpg") center / cover no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 87, 217, 0.25);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}

.brand:hover .brand-mark {
  transform: scale(1.06);
  border-color: var(--color-yellow);
  box-shadow: 0 4px 16px rgba(0, 87, 217, 0.45), 0 0 16px rgba(255, 199, 44, 0.35);
}

.brand-mark svg { width: 100%; height: 100%; display: block; opacity: 0; }

.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  font-size: 0.72rem;
}

.brand-name span:last-child {
  margin-top: 0.28rem;
  color: var(--color-yellow);
  letter-spacing: 0.24em;
  font-size: 0.62rem;
}

.primary-nav { margin-inline: auto; }
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav > ul > li {
  position: relative;
}
.primary-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.2rem;
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.is-current > a,
.primary-nav > ul > li:hover > a {
  color: #00A86B;
}

.primary-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  background: #00A86B;
  box-shadow: 0 0 8px rgba(0, 168, 107, 0.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li.is-current > a::after,
.primary-nav > ul > li:hover > a::after {
  transform: scaleX(1);
}

.nav-chevron {
  display: inline-block;
  transition: transform 0.25s ease, stroke 0.2s ease;
  opacity: 0.75;
}

.primary-nav > ul > li:hover .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
  stroke: #00A86B;
}

.has-mega { position: relative; }

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 120;
  width: max-content;
  min-width: 320px;
  max-width: 480px;
  background: rgba(7, 23, 57, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 168, 107, 0.28);
  border-top: 3px solid #00A86B;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 168, 107, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  padding: 1.15rem 1.3rem;
  display: block;
}

.mega-align-right {
  left: auto;
  right: 0;
  transform: translateY(8px);
}

.has-mega:hover > .mega,
.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.has-mega:hover > .mega-align-right,
.has-mega:focus-within > .mega-align-right {
  transform: translateY(0);
}

.mega-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 0.65rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 168, 107, 0.22);
}

.mega-kicker {
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: #00A86B;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

.mega-tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  letter-spacing: 0.3px;
}

.mega-links-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mega-link-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mega-link-item:hover {
  background: rgba(0, 168, 107, 0.14);
  border-color: rgba(0, 168, 107, 0.45);
  transform: translateX(3px);
}

.mega-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(0, 168, 107, 0.15);
  border: 1px solid rgba(0, 168, 107, 0.3);
  color: #00A86B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mega-link-item:hover .mega-link-icon {
  background: #00A86B;
  color: #ffffff;
}

.mega-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega-link-title {
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #ffffff;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mega-link-item:hover .mega-link-title {
  color: #FFC72C;
}

.mega-link-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.25;
}

.header-tools { display: flex; align-items: center; gap: 0.65rem; margin-left: auto; }

.header-tools .icon-btn,
.header-tools .nav-toggle {
  width: 34px;
  height: 34px;
}

.header-tools .btn {
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  box-shadow: none;
}

.lang {
  position: relative;
  border: 1px solid rgba(0, 168, 107, 0.4);
  background: transparent;
}

.lang summary {
  list-style: none;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--color-yellow);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lang summary::-webkit-details-marker { display: none; }

.lang p {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  width: 230px;
  margin: 0;
  padding: 0.8rem 0.9rem;
  background: #071739;
  border: 1px solid rgba(0, 168, 107, 0.4);
  color: var(--color-light);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(7, 23, 57, 0.7);
  opacity: 0;
  pointer-events: none;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(400px, 88vw);
  padding: 0;
  background:
    linear-gradient(180deg, rgba(0, 168, 107, 0.16), transparent 140px),
    #071739;
  color: var(--color-light);
  border-left: 1px solid rgba(0, 168, 107, 0.38);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
  overflow: hidden;
}

.drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00A86B, #0057D9, #FFC72C);
}

.drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
}

.drawer-kicker {
  margin: 0;
  padding: 1rem 1.25rem 0.35rem;
  color: var(--color-yellow);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.drawer nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.2rem 0.75rem 0.45rem;
}

.drawer nav a {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.85rem;
  min-height: 0;
  margin: 0;
  padding: 0 0.7rem;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
}

.drawer nav a::after {
  content: "→";
  margin-left: auto;
  color: var(--color-yellow);
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.drawer nav a:hover,
.drawer nav a:focus-visible {
  color: #00A86B;
  background: rgba(0, 168, 107, 0.08);
}

.drawer nav a:hover::after,
.drawer nav a:focus-visible::after,
.drawer nav a[aria-current="page"]::after {
  opacity: 1;
}

.drawer nav a[aria-current="page"] {
  color: #00A86B;
  background: linear-gradient(90deg, rgba(0, 168, 107, 0.2), transparent 78%);
  box-shadow: inset 3px 0 0 #00A86B;
}

.drawer-foot {
  margin-top: auto;
  padding: 1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(198, 161, 91, 0.32);
  background: rgba(0, 0, 0, 0.18);
}

.drawer-foot .btn { width: 100%; margin: 0; }

.drawer-foot p {
  margin: 0.75rem 0 0;
  color: rgba(244, 241, 234, 0.68);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
}

.backdrop {
  backdrop-filter: blur(8px);
}

/* Hero — Splash Stylemix Reference Slider */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-light);
  overflow: hidden;
  background: var(--color-navy);
}

.hero-slides-wrapper {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
}

.stm-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.85s;
  z-index: 1;
}

.stm-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media-bg img,
.hero-media-bg video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 7s ease-out;
}

.stm-hero-slide.is-active .hero-media-bg img,
.stm-hero-slide.is-active .hero-media-bg video {
  transform: scale(1);
}

.stm-slider-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 23, 57, 0.72) 0%, rgba(7, 23, 57, 0.42) 38%, rgba(7, 23, 57, 0.94) 100%);
  pointer-events: none;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 248, 230, 0.75) 0 1px, transparent 1.6px);
  background-size: 120px 90px;
  opacity: 0.24;
  animation: particle-drift 22s linear infinite;
}

@keyframes particle-drift {
  from { background-position: 0 0; }
  to { background-position: 120px 180px; }
}

.hero-content-inner {
  position: relative;
  z-index: 3;
  width: min(var(--container-width), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 6rem);
  padding-bottom: 6.5rem;
}

.slider-layers {
  max-width: 860px;
  margin-top: 2rem;
}

/* Slider Date Badge */
.slider-date {
  display: inline-block;
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  background: #00A86B;
  color: #ffffff !important;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(0, 168, 107, 0.4);
  transform: translateY(-24px);
  opacity: 0;
  transition: transform 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s 0.2s;
}

.stm-hero-slide.is-active .slider-date {
  transform: translateY(0);
  opacity: 1;
}

/* Slider Title */
.slider-title {
  display: block;
  overflow: hidden;
  margin-bottom: 16px;
  line-height: 1.15;
}

.slider-title .first_text {
  color: #FFC72C !important;
  background: rgba(7, 23, 57, 0.85);
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  letter-spacing: 0.5px;
  line-height: 1.15;
  padding: 8px 18px 6px;
  display: inline-block;
  text-transform: uppercase;
  border-left: 4px solid #00A86B;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.65s 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s 0.35s;
}

.slider-title .second_text {
  color: #ffffff !important;
  background: rgba(7, 23, 57, 0.85);
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: 0.5px;
  line-height: 1.15;
  padding: 8px 18px 8px;
  display: inline-block;
  margin-top: 6px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.65s 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s 0.48s;
}

.stm-hero-slide.is-active .slider-title .first_text,
.stm-hero-slide.is-active .slider-title .second_text {
  transform: translateY(0);
  opacity: 1;
}

/* Slider Description */
.slider-description {
  font-family: "Roboto", "Barlow", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #ffffff;
  max-width: 520px;
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.6s 0.62s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s 0.62s;
}

.stm-hero-slide.is-active .slider-description {
  transform: translateY(0);
  opacity: 1;
}

/* Slider Action Buttons */
.slider-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s 0.75s;
}

.stm-hero-slide.is-active .slider-actions {
  transform: translateY(0);
  opacity: 1;
}

.slider-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 13px 28px;
  transition: all 0.3s ease;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.slider-actions .btn-gold {
  background: #FFC72C;
  color: #111827 !important;
  border: 2px solid #FFC72C;
  box-shadow: 0 4px 14px rgba(255, 199, 44, 0.35);
}

.slider-actions .btn-gold:hover {
  background: #00A86B;
  color: #ffffff !important;
  border-color: #00A86B;
  box-shadow: 0 6px 20px rgba(0, 168, 107, 0.45);
}

.slider-actions .btn-outline {
  background: rgba(7, 23, 57, 0.65);
  color: #ffffff !important;
  border: 2px solid rgba(0, 87, 217, 0.75);
  backdrop-filter: blur(4px);
}

.slider-actions .btn-outline:hover {
  background: #0057D9;
  color: #ffffff !important;
  border-color: #0057D9;
  box-shadow: 0 6px 20px rgba(0, 87, 217, 0.4);
}

/* Hades Navigation Arrows */
.hades-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  padding: 0;
}

.hades-prev { left: 0; }
.hades-next { right: 0; }

.hades-arrow svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.hades-arrow:hover {
  background: #00A86B;
  color: #ffffff;
  border-color: #00A86B;
}

/* Slider Pagination Dots */
.stm-dots {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.stm-dot {
  width: 32px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.stm-dot:hover,
.stm-dot.is-active {
  background: #FFC72C;
  width: 48px;
}

.hero-stats {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(244, 241, 234, 0.16);
  background: rgba(10, 70, 54, 0.38);
  backdrop-filter: blur(10px);
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 1.05rem 0.4rem 1.15rem;
  border-left: 1px solid rgba(244, 241, 234, 0.12);
}

.stat:first-child { border-left: 0; }

.stat b {
  display: block;
  font-family: var(--font-stat);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.stat span {
  display: block;
  margin-top: 0.3rem;
  color: rgba(244, 241, 234, 0.68);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Countdown */

.countdown {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
  align-items: end;
  position: relative;
  overflow: hidden;
}

.countdown h2 { max-width: 10ch; position: relative; z-index: 1; }

.wait-swipe {
  height: 1.8em;
  overflow: hidden;
  position: relative;
  z-index: 1;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  line-height: 0.9;
}

.wait-track {
  animation: wait-swipe 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.wait-swipe h2,
.wait-swipe p {
  margin: 0;
  height: 1.8em;
  max-width: 16ch;
  line-height: 0.9;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

@keyframes wait-swipe {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-20%); }
  40%, 56% { transform: translateY(-40%); }
  60%, 76% { transform: translateY(-60%); }
  80%, 100% { transform: translateY(-80%); }
}

.countdown .eyebrow {
  display: flex;
  align-items: center;
}

.countdown .eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: #d4523e;
  box-shadow: 0 0 0 0 rgba(212, 82, 62, 0.55);
  animation: live-dot 1.6s ease-out infinite;
}

@keyframes live-dot {
  70% { box-shadow: 0 0 0 7px rgba(212, 82, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 82, 62, 0); }
}

.watermark {
  position: absolute;
  right: 0;
  bottom: -0.35em;
  z-index: 0;
  font-family: var(--font-stat);
  font-size: clamp(6rem, 16vw, 13rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(12, 74, 56, 0.16);
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.count-unit { border-top: 2px solid var(--color-emerald); padding-top: 0.8rem; }

.count-unit b {
  display: block;
  font-family: var(--font-stat);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--color-yellow);
}

.count-unit span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-emerald);
}

/* Broadcast result */

.broadcast {
  background: var(--color-navy);
  color: #f4f1ea;
  border-top: 3px solid var(--color-emerald);
  overflow: hidden;
}

.broadcast-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: #05112b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.broadcast-stage {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px) 1fr;
  min-height: 300px;
}

.broadcast-player {
  position: relative;
  margin: 0;
  min-height: 300px;
  overflow: hidden;
}

.broadcast-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.broadcast-player figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  padding: 3.2rem 1.1rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(7, 23, 57, 0.94));
}

.broadcast-player strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.broadcast-player em {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.75);
}

.broadcast-player b {
  margin-top: 0.35rem;
  font-family: var(--font-stat);
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  font-weight: 600;
  line-height: 0.9;
}

.broadcast-player small {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
}

.broadcast-player.is-winner b,
.broadcast-player.is-winner strong { color: var(--color-yellow); }

.broadcast-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.2rem 1rem;
  text-align: center;
  background: var(--color-royal);
  border-left: 1px solid rgba(255, 199, 44, 0.35);
  border-right: 1px solid rgba(255, 199, 44, 0.35);
}

.broadcast-vs {
  margin: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-yellow);
  color: var(--color-yellow);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.broadcast-score {
  margin: 0;
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-stat);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 0.9;
  font-weight: 600;
}

.broadcast-score span { color: var(--color-yellow); }

.broadcast-note {
  margin: 0;
  max-width: 16rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

/* Scoreboard */

.scoreboard {
  background: var(--color-navy);
  color: var(--color-light);
  border-top: 3px solid var(--color-emerald);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}

.score-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.score-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.score-side { display: grid; gap: 0.2rem; }
.score-side.away { text-align: right; }

.score-side .club {
  font-family: var(--font-stat);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.score {
  font-family: var(--font-stat);
  font-weight: 600;
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 0.88;
}

.score-side.is-winner .score,
.score-side.is-winner .club { color: var(--color-gold-bright); }

.overs {
  color: rgba(244, 241, 234, 0.66);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vs {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 210, 162, 0.4);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.result-line {
  margin: 1.3rem 0 0;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold-bright);
}

.score-actions { display: flex; justify-content: center; margin-top: 1.2rem; }

.next-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 0.7rem;
  padding: 0.95rem 1.1rem;
  background: #1a4f8f;
  color: var(--color-light);
  font-size: 0.92rem;
}

.next-strip b { letter-spacing: 0.14em; font-size: 0.68rem; text-transform: uppercase; color: var(--color-gold-bright); }

/* Intro */

.intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.intro h2 { max-width: 8ch; margin-bottom: 1rem; }
.intro .lede { color: var(--color-muted); }

.pillars { display: grid; gap: 0.75rem; }

.pillars li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--color-line);
  background: rgba(255, 253, 248, 0.45);
}

.pillars li:nth-child(2) {
  margin-left: 8%;
  background: var(--color-primary-deep);
  color: var(--color-light);
  border-color: transparent;
}

.pillar-mark { display: grid; gap: 0.35rem; justify-items: start; }
.pillar-icon { width: 28px; height: 28px; color: var(--color-gold-deep); }
.pillars li:nth-child(2) .pillar-icon { color: var(--color-gold-bright); }

.pillars .num {
  font-family: var(--font-stat);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-gold-deep);
}

.pillars li:nth-child(2) .num { color: var(--color-gold-bright); }
.pillars h3 { font-size: 1.35rem; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pillars p { color: var(--color-muted); }
.pillars li:nth-child(2) p { color: rgba(244, 241, 234, 0.75); }

/* Map */

.footprint-layout {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  background: #0a1c36;
  border: 0;
  border-block: 1px solid rgba(198, 161, 91, 0.28);
  overflow: hidden;
}

.map-stage .map-land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: var(--color-gold-bright);
}

.marker i {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 6px rgba(198, 161, 91, 0.18);
  transform: translate(-50%, -50%);
}

.marker .pin-flag {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  width: 32px;
  height: 21px;
  border-radius: 2px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 248, 234, 0.82);
  transform: translate(calc(-50% + var(--nx, 0px)), var(--ny, 0px));
}

.marker:hover .pin-flag,
.marker:focus-within .pin-flag,
.marker:target .pin-flag {
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.38), 0 0 0 2px var(--color-gold);
}

.marker.is-on i,
.marker:hover i,
.marker:focus-visible i { animation: none; box-shadow: 0 0 0 8px rgba(198, 161, 91, 0.32); background: #fff6df; }

.map-card {
  position: absolute;
  z-index: 3;
  min-width: 190px;
  padding: 0.9rem 1rem;
  background: rgba(14, 100, 76, 0.94);
  border: 1px solid rgba(198, 161, 91, 0.45);
  pointer-events: none;
}

.map-card[hidden] { display: none; }
.map-card strong { display: flex; align-items: center; gap: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }
.map-card .flag { width: 22px; height: 15px; }
.map-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 0.55rem 0 0; font-size: 0.86rem; }
.map-card dt { color: rgba(244, 241, 234, 0.6); }
.map-card dd { margin: 0; text-align: right; }

.country-list { display: flex; flex-direction: column; justify-content: center; }

.country-list a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
  color: rgba(244, 241, 234, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.country-list a span:nth-child(2) { flex: 1; }
.country-list b {
  font-family: var(--font-stat);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-gold-bright);
}

.country-list a:hover,
.country-list a:focus-visible { color: var(--color-gold-bright); }

/* Journey */

.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.journey::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.journey li { position: relative; }

.stage-index {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 0.7rem;
  border: 1px solid var(--color-gold);
  background: var(--color-navy);
  color: var(--color-yellow);
  font-family: var(--font-stat);
  font-size: 1.15rem;
}

.stage-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 0.55rem;
  color: var(--color-yellow);
}

.stage-icon svg { width: 22px; height: 22px; }

.journey h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.journey p { color: rgba(231, 236, 232, 0.7); font-size: 0.92rem; }

/* Teams, cards */

.team-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.team-card,
.player-card,
.news-card,
.venue-card,
.award,
.story-card,
.video-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.team-card:hover,
.player-card:hover,
.news-card:hover,
.venue-card:hover,
.story-card:hover,
.video-card:hover { transform: translateY(-4px); border-color: var(--color-royal); }

.team-card { padding: 1.15rem 1.15rem 1.2rem; display: flex; flex-direction: column; min-height: 250px; }

.squad-card {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  background: var(--color-navy);
  color: #f4f1ea;
  border-color: rgba(0, 168, 107, 0.28);
}

.squad-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #040e24;
}

.squad-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 0.8s ease;
}

.squad-card:hover .squad-photo img { transform: scale(1.05); }

.squad-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 20, 38, 0.05) 30%, rgba(7, 20, 38, 0.9) 100%);
}

.squad-card .crest {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 60px;
  margin-top: -42px;
  font-size: 1.15rem;
}

.squad-body { display: flex; flex-direction: column; flex: 1; padding: 0.85rem 1rem 1.05rem; }

.squad-card .team-card__top { align-items: center; }

.squad-card h3 {
  margin: 0.35rem 0 0.15rem;
  color: #f6f3ec;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.squad-card .meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: rgba(244, 241, 234, 0.72);
}

.squad-card .stat-row div { border-top-color: rgba(244, 241, 234, 0.14); }
.squad-card .stat-row dt { color: rgba(244, 241, 234, 0.55); }
.squad-card .stat-row dd { color: var(--color-gold-bright); }
.squad-card .card-link { color: var(--color-gold-bright); }

.squad-note { margin: 0 0 1rem; }
.team-grid .squad-card:first-child { grid-column: span 2; }
.team-grid .squad-card:first-child .squad-photo { aspect-ratio: 16 / 10; }

.team-card__top,
.player-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; }

.crest {
  width: 64px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--crest, var(--color-primary));
  color: var(--crest-ink, #f4f1ea);
  clip-path: polygon(50% 0, 100% 16%, 100% 74%, 50% 100%, 0 74%, 0 16%);
  font-family: var(--font-stat);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.flag {
  width: 24px;
  height: 16px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  background: #888;
}

.flag-bd { background: radial-gradient(circle at 38% 50%, #f42a41 0 4.5px, transparent 4.8px), #006a4e; }
.flag-ae { background: linear-gradient(90deg, #e00 0 28%, transparent 28%), linear-gradient(#00732f 33%, #fff 33% 66%, #111 66%); }
.flag-qa { background: linear-gradient(90deg, #fff 0 32%, #8a1538 32%); }
.flag-gb { background: linear-gradient(#fff, #fff) center / 100% 4px no-repeat, linear-gradient(#fff, #fff) center / 4px 100% no-repeat, linear-gradient(#cf142b, #cf142b) center / 100% 2px no-repeat, linear-gradient(#cf142b, #cf142b) center / 2px 100% no-repeat, #012169; }
.flag-us { background: linear-gradient(#012169, #012169) left top / 42% 54% no-repeat, repeating-linear-gradient(#b22234 0 8%, #fff 8% 16%); }
.flag-ca { background: linear-gradient(90deg, #d80621 0 25%, #fff 25% 75%, #d80621 75%); }
.flag-au { background: radial-gradient(circle at 72% 72%, #fff 0 1.6px, transparent 1.9px), radial-gradient(circle at 78% 32%, #fff 0 1.4px, transparent 1.7px), linear-gradient(#fff, #fff) left top / 10px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 7px no-repeat, #012169; }
.flag-it { background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #ce2b37 66%); }
.flag-sa { background: linear-gradient(#fff, #fff) center / 70% 1px no-repeat, #006c35; }
.flag-my { background: linear-gradient(#012169, #012169) left top / 46% 54% no-repeat, repeating-linear-gradient(#cc0001 0 8%, #fff 8% 16%); }
.flag-om { background: linear-gradient(#fff, #fff) center / 70% 1px no-repeat, #db161b; }
.flag-fr { background: linear-gradient(90deg, #0055a4 33%, #fff 33% 66%, #ef4135 66%); }
.flag-es { background: linear-gradient(#c60b1e 25%, #ffc400 25% 75%, #c60b1e 75%); }
.flag-jp { background: radial-gradient(circle, #bc002d 0 6px, transparent 6.5px), #fff; }
.flag-de { background: linear-gradient(#000 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-sg { background: linear-gradient(#fff, #fff) 8px 5px / 8px 8px no-repeat, #ee2536; }
.flag-in { background: linear-gradient(#ff9933 33%, #fff 33% 66%, #138808 66%); }
.flag-pk { background: linear-gradient(90deg, #fff 0 22%, #01411c 22%); }
.map-status { margin: 0.45rem 0 0; color: var(--color-gold-bright); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nation-directory { margin-top: 1rem; }
.nation-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin-top: 0.8rem; }
.nation-wall li { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.55rem; align-items: center; padding: 0.7rem; border: 1px solid rgba(213, 175, 98, 0.28); background: rgba(7, 20, 38, 0.35); }
.nation-wall strong { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nation-wall em { grid-column: 2; font-style: normal; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-bright); }
.nation-wall a { display: contents; color: inherit; }
.profile-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.profile-head .flag { width: 42px; height: 28px; }
.profile-facts { grid-template-columns: 1fr 1fr; }
.office-list { display: grid; gap: 0.25rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.office-list li { font-size: 0.82rem; color: rgba(244, 241, 234, 0.78); }
.hero-countdown { margin-top: 1rem; max-width: 28rem; }
.hero-countdown .count-unit b { font-size: clamp(1.4rem, 2vw, 2rem); color: #f6f3ec; }
.hero-countdown .count-unit span { color: var(--color-gold-bright); }
.open-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; }
.score-modules { margin-top: 1.2rem; grid-template-columns: repeat(4, 1fr); }
.band-dark .note { color: rgba(244, 241, 234, 0.72); }
.open-tiers article { min-height: 140px; padding: 1rem; border-top: 3px solid var(--color-emerald); background: var(--color-navy); color: #f4f7fb; }
.band-dark .open-tiers article {
  background: rgba(7, 23, 57, 0.45);
  border: 1px solid rgba(0, 168, 107, 0.32);
  border-top: 3px solid var(--color-emerald);
}
.story-feature {
  max-width: 760px;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  background: #fff;
  border-top: 3px solid var(--color-gold);
  box-shadow: 0 18px 44px rgba(7, 20, 38, 0.07);
}
.story-feature h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0.2rem 0 0.9rem; }
.story-feature p { margin-bottom: 0.8rem; color: #2c3b4a; }
.news-grid .news-card .copy { padding-bottom: 1.1rem; }
.open-tiers h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.open-tiers p { margin: 0.8rem 0 0; color: var(--color-gold-bright); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; }
.flag-xx { background: linear-gradient(135deg, #0c4a38, #c6a15b); }

.team-card h3,
.player-card h3,
.news-card h3 { margin: 1rem 0 0.3rem; font-size: 1.35rem; }

.meta { color: var(--color-muted); font-size: 0.92rem; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
}

.stat-row div { border-top: 1px solid var(--color-line); padding-top: 0.45rem; }
.stat-row dt { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.stat-row dd { margin: 0.1rem 0 0; font-family: var(--font-stat); font-size: 1.45rem; line-height: 1; }

.card-link {
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}

.card-link:hover { color: var(--color-gold-deep); }

/* Fixtures */

.fixture,
.match-card {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 1rem 1.4rem;
  align-items: center;
  padding: 1.15rem 0;
  border-top: 1px solid var(--color-line-strong);
}

.fixture time,
.match-when {
  font-family: var(--font-stat);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.fixture time span,
.match-when span { display: block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

.versus { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: baseline; }
.versus b { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.02em; }
.versus i { font-style: normal; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--color-gold-deep); }

/* Standings */

.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--color-line-strong); margin-bottom: 0.4rem; }

.tabs button,
.tabs label {
  border: 0;
  background: transparent;
  padding: 0.85rem 1.05rem;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tabs button[aria-selected="true"] {
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.board-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.band-dark .board-wrap { background: #f7fbf8; color: var(--color-ink); }

.board { width: 100%; min-width: 640px; border-collapse: collapse; }

.board th {
  background: var(--color-navy);
  color: var(--color-yellow);
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.85rem 0.8rem;
  border-bottom: 2px solid var(--color-emerald);
}

.board td {
  padding: 0.95rem 0.8rem;
  border-bottom: 1px solid var(--color-line);
  font-variant-numeric: tabular-nums;
}

.board td.num,
.board th.num { text-align: right; }

.board tbody tr:hover td { background: rgba(0, 87, 217, 0.05); }
.board .rank { font-family: var(--font-stat); font-size: 1.25rem; color: var(--color-royal); }
.board .side { font-weight: 700; }
.board .out { color: var(--color-muted); font-size: 0.86rem; }

.head-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; }

.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.4rem; }
.leader {
  background: var(--color-navy);
  color: var(--color-light);
  border-top: 3px solid var(--color-gold);
  padding: 1.1rem 1.15rem 1.2rem;
}
.leader .pos { font-family: var(--font-stat); color: var(--color-yellow); font-size: 1.4rem; }
.leader h3 { margin: 0.45rem 0 0.15rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; font-size: 1.35rem; }
.leader .figure { margin-top: 0.7rem; font-family: var(--font-stat); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 0.9; }
.leader .figure span { display: block; margin-top: 0.25rem; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-yellow); }

.score-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0.8rem; margin-top: 0.8rem; }
.innings .board { min-width: 480px; }
.innings { background: #fffdf8; border-top: 3px solid var(--color-gold); }
.innings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--color-navy);
  color: #f4f1ea;
  border-bottom: 2px solid var(--color-emerald);
}
.innings-head p { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--color-yellow); }
.innings-head strong { display: block; margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }
.innings-head b { font-family: var(--font-stat); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; line-height: 0.9; }
.fow { margin: 0; padding: 0.75rem 1rem 1rem; color: var(--color-muted); font-size: 0.88rem; }

.faq-list { display: grid; gap: 0.55rem; max-width: 860px; }
.faq-list details { background: #fffdf8; border-top: 2px solid var(--color-gold); padding: 0 1.1rem; }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--font-stat); font-size: 1.7rem; line-height: 1; color: var(--color-gold-deep); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 1.05rem; max-width: 68ch; color: var(--color-muted); }

/* Spotlight */

.spotlight-band {
  padding: clamp(3.2rem, 6vw, 5.2rem) 0;
}

.spotlight {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 540px;
  background: var(--color-navy);
  color: var(--color-light);
  overflow: hidden;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 168, 107, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.spotlight-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.spotlight h2 { font-size: clamp(3rem, 6vw, 5.4rem); text-transform: uppercase; max-width: 8ch; }
.spotlight .role { margin: 0.8rem 0 1.4rem; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--color-yellow); }

.spotlight-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0.4rem 0 1.6rem; }
.spotlight-stats div { border-top: 1px solid rgba(230, 210, 162, 0.35); padding-top: 0.55rem; }
.spotlight-stats b { display: block; font-family: var(--font-stat); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 600; line-height: 1; }
.spotlight-stats span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 241, 234, 0.68); }

.spotlight-photo { position: relative; min-height: 420px; overflow: hidden; }
.spotlight-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; max-width: none; }
.spotlight-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 87, 217, 0.35), transparent 30%);
}

/* News, stories, video */

.news-layout { display: grid; grid-template-columns: 1.35fr 0.8fr; gap: 1rem; }

.feature-story { display: grid; align-content: start; }
.feature-story .frame { aspect-ratio: 16 / 10; }
.news-card .frame,
.story-card .frame,
.venue-card .frame,
.video-card .frame { position: relative; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform 0.8s ease; }
.feature-story:hover img,
.news-card:hover img,
.story-card:hover img,
.venue-card:hover img,
.video-card:hover img { transform: scale(1.04); }

.story-kicker,
.tag {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--color-royal);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.feature-story .copy,
.news-card .copy,
.story-card .copy { padding: 1rem 0.15rem 0.2rem; }
.feature-story h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.55rem; }

.news-stack { display: grid; gap: 0.8rem; }
.news-card { display: grid; grid-template-columns: 118px 1fr; background: transparent; border: 0; border-top: 1px solid var(--color-line-strong); padding-top: 0.8rem; }
.news-card:hover { transform: none; border-color: var(--color-line-strong); }
.news-card .frame { aspect-ratio: 1; }
.news-card h3 { font-size: 1.05rem; margin: 0; }

.story-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.8rem; }
.story-card { background: var(--color-navy); color: var(--color-light); border: 0; min-height: 420px; position: relative; }
.story-card .frame { position: absolute; inset: 0; }
.story-card .frame img { filter: saturate(0.8); }
.story-card .copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.1rem 1.15rem;
  background: linear-gradient(180deg, transparent, rgba(7, 23, 57, 0.94));
}
.story-card h3 { font-size: 1.45rem; }
.home-news .news-layout { align-items: stretch; }
.home-news .news-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  counter-reset: rail 1;
}

.lead-story {
  position: relative;
  display: block;
  min-height: 520px;
  overflow: hidden;
  color: #f6f3ec;
  background: #0c2344;
}

.lead-story img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.lead-story:hover img { transform: scale(1.04); }

.lead-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(8, 40, 32, 0.94));
}

.lead-copy .tag { color: var(--color-gold-bright); }
.lead-copy h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; }
.lead-copy p { margin: 0 0 0.8rem; max-width: 36rem; color: rgba(244, 241, 234, 0.82); }
.lead-copy .link-arrow { color: var(--color-gold-bright); }

.home-news .side-story {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1rem;
  flex: 1;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(20, 48, 40, 0.12);
  color: inherit;
  counter-increment: rail;
}

.home-news .side-story img {
  width: 148px;
  height: 108px;
  object-fit: cover;
}

.home-news .side-story h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.02;
}

.home-news .side-story h3::before {
  content: counter(rail, decimal-leading-zero);
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--font-stat);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold-deep);
}

.home-news .side-story:hover h3 { color: var(--color-primary); }

.home-stories .story-grid { counter-reset: tale; gap: 1rem; }
.home-stories .story-card {
  counter-increment: tale;
  min-height: 480px;
  border-top: 3px solid var(--color-gold);
}
.home-stories .story-card .copy::before {
  content: counter(tale, decimal-leading-zero);
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-stat);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-gold-bright);
}
.home-stories .story-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.home-stories .story-card:first-child { min-height: 540px; }
.home-stories .story-card:first-child h3 { font-size: clamp(1.8rem, 2.6vw, 2.45rem); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.chip {
  border: 1px solid rgba(244, 241, 234, 0.2);
  background: transparent;
  color: inherit;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chip[aria-pressed="true"],
.chip:hover { background: var(--color-gold); border-color: var(--color-gold); color: #1b1408; }
.band-ivory .chip,
.band-paper .chip { border-color: var(--color-line-strong); color: var(--color-ink); }

.video-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0.8rem;
  align-items: stretch;
}
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.video-layout .video-grid { grid-template-columns: 1fr 1fr; }
.video-card { position: relative; background: var(--color-navy); color: var(--color-light); border: 0; text-align: left; padding: 0; width: 100%; }
.video-card .frame { aspect-ratio: 16 / 9; }
.video-card .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-feature { display: flex; flex-direction: column; height: 100%; }
.video-feature .frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 420px; }
.video-grid .play { width: 44px; height: 44px; }
.video-grid .play::before { border-width: 6px 0 6px 10px; }
.play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-yellow);
  background: rgba(7, 23, 57, 0.6);
  color: var(--color-light);
  pointer-events: none;
}
.play::before {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 3px;
}
.video-card:hover .play { background: var(--color-yellow); color: var(--color-ink); }
.video-feature .play { animation: play-pulse 2.8s ease-out infinite; }

@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 44, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(255, 199, 44, 0); }
}
.video-card .copy { padding: 0.75rem 0.15rem 0.2rem; }
.video-card h3 { font-size: 1rem; margin: 0; }

/* Venues, awards, sponsors */

.venue-feature { display: grid; grid-template-columns: 1.4fr 0.8fr; min-height: 460px; background: var(--color-navy); color: var(--color-light); }
.venue-feature .frame { min-height: 320px; position: relative; overflow: hidden; }
.venue-feature .frame img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.venue-copy { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: flex-end; }
.venue-copy h3 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 0.6rem; }
.venue-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.venue-card .frame { aspect-ratio: 16 / 10; }
.venue-card .copy { padding: 0.9rem 1rem 1.05rem; }
.capacity { font-family: var(--font-stat); font-size: 1.5rem; }

.award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.award {
  background: var(--color-navy);
  color: var(--color-light);
  border: 0;
  border-top: 3px solid var(--color-gold);
  padding: 1.4rem 1.2rem 1.5rem;
  min-height: 210px;
}
.award:hover { transform: translateY(-4px); }
.award-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.award-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--color-gold-bright);
  border: 1px solid rgba(230, 210, 162, 0.55);
  background: rgba(8, 40, 32, 0.22);
}
.award-icon svg,
.pillar-icon,
.stage-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.award-icon svg { width: 24px; height: 24px; }
.award .idx { font-family: var(--font-stat); font-size: 1.45rem; line-height: 1; color: var(--color-gold-bright); }
.award h3 { margin-top: 1.15rem; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; }
.award p { margin-top: 0.45rem; color: rgba(231, 236, 232, 0.72); }

.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}

.logo-row span {
  flex: 1 1 180px;
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #f7f4ee;
  color: #5c675f;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.logo-row.featured span {
  min-height: 140px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.18em;
  color: var(--color-ink);
}

.logo-row img {
  width: min(180px, 100%);
  height: 48px;
  object-fit: contain;
  margin-inline: auto;
}

.logo-row.featured img { height: 64px; width: min(280px, 100%); }

.logo-row span:hover { color: var(--color-primary); background: #fff; }

.tier { margin-bottom: 1.4rem; }
.tier h3 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.55rem; color: var(--color-gold-deep); }

.cta-band { text-align: left; }
.cta-band h2 { max-width: 16ch; font-size: clamp(2.6rem, 6vw, 5rem); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

.newsletter {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
  align-items: end;
}

.newsletter h2 { max-width: 10ch; }

.inline-form { display: flex; gap: 0.5rem; align-items: stretch; }
.inline-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-line-strong);
  background: transparent;
  padding: 0.9rem 1rem;
  border-radius: 0;
}
.form-error { margin-top: 0.45rem; color: var(--color-danger); font-size: 0.9rem; }
.form-success { padding: 1rem 0; font-weight: 600; }

/* Footer */

.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 168, 107, 0.12), transparent 90px),
    #071739;
  color: #F8FAFC;
  padding-top: 0;
  overflow: hidden;
  max-width: 100%;
}
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #00A86B 0%, #0057D9 45%, #FFC72C 80%, #D4AF37 100%);
}
.footer-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 1.35rem 0 1.1rem;
  border-bottom: 1px solid rgba(0, 168, 107, 0.22);
}
.footer-banner p { margin: 0; }
.footer-banner p:first-child {
  color: #00A86B;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer-banner p:last-child {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  color: #f6f3ec;
}
.footer-brand p { max-width: 26rem; margin-top: 1rem; color: rgba(228, 236, 232, 0.78); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 2.2rem 1.6rem;
  padding: 2.6rem 0 2rem;
}
.footer-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.1rem;
  padding: 0.85rem 0 1rem;
  border-top: 1px solid rgba(0, 168, 107, 0.22);
}
.footer-platforms p {
  margin: 0 0.4rem 0 0;
  color: #FFC72C;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-platforms span {
  color: rgba(244, 241, 234, 0.72);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.site-footer h2 {
  color: #00A86B;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}
.site-footer h2:not(:first-child) { margin-top: 1.6rem; }
.site-footer a { color: rgba(248, 250, 252, 0.88); }
.site-footer .footer-grid > div > a:not(.brand) {
  display: block;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}
.site-footer .footer-grid > div > a:not(.brand):hover {
  color: #FFC72C;
  padding-left: 0.35rem;
}
.socials { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; }
.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 168, 107, 0.4);
  padding: 0;
  color: #FFC72C;
  transition: all 0.2s ease;
}
.socials a:hover { background: #00A86B; color: #ffffff; border-color: #00A86B; }
.socials svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.container.footer-base {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-block: 1.05rem 1.2rem;
  padding-inline: max(var(--gutter), calc((100% - var(--container-width)) / 2));
  border-top: 1px solid rgba(230, 210, 162, 0.32);
  background: #071426;
  color: rgba(244, 241, 234, 0.78);
}

.footer-base p { margin: 0; }

.footer-base p:first-child {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.footer-base p:last-child {
  max-width: 34rem;
  text-align: right;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.62);
}

.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-emerald);
  background: var(--color-navy);
  color: var(--color-yellow);
}

/* Inner pages */

.page-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 5.5rem);
  padding-bottom: 4rem;
  color: var(--color-light);
  background: var(--color-navy);
  overflow: hidden;
  border-bottom: 1px solid rgba(213, 175, 98, 0.35);
}
.page-hero .frame { position: absolute; inset: 0; }
.page-hero .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  filter: saturate(0.55) contrast(1.08);
  transform: scale(1.04);
}
.page-hero .shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 20, 38, 0.55), transparent 26%),
    linear-gradient(90deg, rgba(7, 20, 38, 0.94) 0%, rgba(7, 20, 38, 0.78) 46%, rgba(7, 20, 38, 0.38) 100%);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
}
.page-hero .container { position: relative; z-index: 1; margin-top: 1.5rem; }
.page-hero::before {
  content: "2027";
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), 3vw);
  top: calc(var(--header-h) + 1.5rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 8vw, 6.6rem);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(213, 175, 98, 0.55);
  pointer-events: none;
}
.page-hero .eyebrow { display: flex; align-items: center; gap: 0.7rem; }
.page-hero .eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--color-gold);
}
.page-hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  text-transform: uppercase;
  max-width: 12ch;
}
.page-hero .lede { max-width: 36rem; }
.crumbs {
  margin-bottom: 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.78);
}
.crumbs a,
.crumbs a:visited,
.crumbs a:link {
  color: var(--color-yellow) !important;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.18s ease;
}
.crumbs a:hover {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-bar {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1rem;
}

label.field,
.field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d5cfc3;
  background: #fffdf8;
  border-radius: 0;
  padding: 0.85rem 0.9rem;
  color: var(--color-ink);
}

textarea { min-height: 140px; resize: vertical; }
input:focus,
select:focus,
textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 1px var(--color-primary); }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--color-danger); }

.field-error { color: var(--color-danger); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.result-count { margin: 0 0 0.8rem; color: var(--color-muted); font-size: 0.88rem; }
.empty { padding: 2rem 0; color: var(--color-muted); }

.player-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.player-card { padding: 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.player-card:hover { transform: none; }
.player-card h3 { margin: 0 0 0.2rem; }
.player-main { display: flex; flex-direction: column; gap: 0.45rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status-live { color: #9d2c2c; }
.status-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0392b;
}
.status-final { color: var(--color-gold-deep); }
.status-soon { color: var(--color-primary); }

.scoreline { font-family: var(--font-stat); font-size: 1.6rem; line-height: 1; }

.form-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
  align-items: start;
}

fieldset {
  border: 0;
  margin: 0 0 1.2rem;
  padding: 0;
}

legend {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
}

.form-grid { display: grid; gap: 0.8rem; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.95rem; }
.check input { width: auto; margin-top: 0.25rem; }

.alert {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  margin-bottom: 0.8rem;
}

.success-panel {
  padding: 1.4rem;
  border-top: 2px solid var(--color-gold);
  background: #fffdf8;
}

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 2rem 0 0.7rem; }
.prose p,
.prose li { margin-bottom: 0.8rem; color: #24312c; }
.prose ul { list-style: disc; padding-left: 1.1rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.office {
  padding: 1.2rem;
  border-top: 2px solid var(--color-gold);
  background: #fffdf8;
}
.office h3 { margin-bottom: 0.4rem; }
.note { margin-top: 0.8rem; color: var(--color-muted); font-size: 0.92rem; }
.band-dark .note,
.band-emerald .note,
.spotlight .note { color: rgba(231, 236, 232, 0.68); }

.contact-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 2rem; }

dialog {
  border: 0;
  padding: 0;
  max-width: calc(100% - 2rem);
  color: var(--color-ink);
  background: var(--color-light);
}

dialog::backdrop { background: rgba(7, 23, 57, 0.78); }

.search-dialog { width: min(720px, calc(100% - 2rem)); background: var(--color-navy); color: var(--color-light); border: 1px solid rgba(0, 168, 107, 0.4); }
.search-dialog form { padding: 1rem; border-bottom: 1px solid rgba(244, 241, 234, 0.12); }
.search-dialog input { background: transparent; color: var(--color-light); border-color: rgba(244, 241, 234, 0.25); }
.search-results { max-height: 50vh; overflow: auto; padding: 0.4rem 1rem 1rem; }
.search-results a,
.search-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  background: transparent;
  color: inherit;
}
.search-results small { display: block; color: var(--color-yellow); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.66rem; }

.modal { width: min(860px, calc(100% - 2rem)); }
.modal-dark { background: var(--color-navy); color: var(--color-light); border: 1px solid rgba(0, 168, 107, 0.3); }
.modal-body { padding: 1.3rem; }
.modal-body .frame { aspect-ratio: 16 / 9; margin-bottom: 1rem; position: relative; overflow: hidden; }
.modal-body .frame img { width: 100%; height: 100%; object-fit: cover; }
.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
}
.modal { position: relative; }
.modal h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.4rem; }

.noscript {
  background: #1b1408;
  color: var(--color-gold-bright);
  padding: 0.6rem 1rem;
  text-align: center;
}

.deck-sheet { width: min(860px, 100%); margin: 0 auto; padding: 2rem 0 4rem; }
.deck-cover { min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2rem; border-bottom: 1px solid var(--color-line-strong); }
.deck-cover h1 { font-size: clamp(3rem, 8vw, 6rem); text-transform: uppercase; }

@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-fill linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
}

@keyframes header-fill {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: #000; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-cycle {
  0%, 18% { transform: translateX(0); }
  25%, 43% { transform: translateX(-25%); }
  50%, 68% { transform: translateX(-50%); }
  75%, 93% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

@keyframes hero-copy-1 {
  0%, 18% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hero-copy-2 {
  0%, 20% { opacity: 0; }
  25%, 43% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes hero-copy-3 {
  0%, 45% { opacity: 0; }
  50%, 68% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes hero-copy-4 {
  0%, 70% { opacity: 0; }
  75%, 93% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hero-dot {
  0%, 18% { transform: translateX(0); }
  25%, 43% { transform: translateX(2.55rem); }
  50%, 68% { transform: translateX(5.1rem); }
  75%, 93% { transform: translateX(7.65rem); }
  100% { transform: translateX(0); }
}

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes light-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3%, -2%, 0); }
}

/* CSS-only behaviour: menu, search, filters, tabs, lightboxes */

.nav-check,
.search-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body:has(.nav-check:checked) { overflow: hidden; }

.nav-check:checked ~ .backdrop {
  opacity: 1;
  pointer-events: auto;
}

.nav-check:checked ~ .drawer {
  transform: none;
  visibility: visible;
}

.nav-check:focus-visible ~ .site-header .nav-toggle,
.search-check:focus-visible ~ .site-header .icon-btn {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.search-panel {
  position: fixed;
  z-index: 60;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  width: min(720px, calc(100% - 2rem));
  transform: translateX(-50%);
  padding: 1rem 1.1rem 1.2rem;
  background: var(--color-navy);
  color: var(--color-light);
  border: 1px solid rgba(0, 168, 107, 0.4);
  visibility: hidden;
  opacity: 0;
}

.search-check:checked ~ .search-panel {
  visibility: visible;
  opacity: 1;
}

.search-panel h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.search-panel a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
}

.search-panel a span {
  color: var(--color-yellow);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-panel .close-search {
  display: inline-flex;
  margin-bottom: 0.6rem;
}

.marker .map-card { display: none; left: 1.5rem; top: -0.2rem; width: 210px; }
.marker:hover,
.marker:focus-within,
.marker:target { z-index: 5; }
.marker:hover .map-card,
.marker:focus-within .map-card,
.marker:target .map-card { display: block; }
.marker.flip .map-card { left: auto; right: 1.5rem; }
.marker a.pin-hit {
  position: absolute;
  inset: -28px -10px -8px;
  color: transparent;
}

.group-tabs { position: relative; }
.group-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.group-tabs .sheet { display: none; }
#group-a:checked ~ .sheet-a,
#group-b:checked ~ .sheet-b,
#group-c:checked ~ .sheet-c,
#group-d:checked ~ .sheet-d { display: block; }
#group-a:checked ~ .tabs label[for="group-a"],
#group-b:checked ~ .tabs label[for="group-b"],
#group-c:checked ~ .tabs label[for="group-c"],
#group-d:checked ~ .tabs label[for="group-d"] {
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-emerald);
}
.group-tabs:has(#group-a:focus-visible) label[for="group-a"],
.group-tabs:has(#group-b:focus-visible) label[for="group-b"],
.group-tabs:has(#group-c:focus-visible) label[for="group-c"],
.group-tabs:has(#group-d:focus-visible) label[for="group-d"] {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
}

.filter-set .chip { position: relative; cursor: pointer; }
.filter-set .chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.filter-set .chip:has(input:checked),
.filter-set .chip:has(input:focus-visible) {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  color: #fff;
}
.filter-set:has(input[value="gulf"]:checked) .team-card:not([data-tour="gulf"]),
.filter-set:has(input[value="europe"]:checked) .team-card:not([data-tour="europe"]),
.filter-set:has(input[value="americas"]:checked) .team-card:not([data-tour="americas"]),
.filter-set:has(input[value="pacific"]:checked) .team-card:not([data-tour="pacific"]) { display: none; }

.filter-set:has(input[value="Batter"]:checked) .player-card:not([data-role="Batter"]),
.filter-set:has(input[value="Bowler"]:checked) .player-card:not([data-role="Bowler"]),
.filter-set:has(input[value="All-rounder"]:checked) .player-card:not([data-role="All-rounder"]),
.filter-set:has(input[value="Wicket-keeper"]:checked) .player-card:not([data-role="Wicket-keeper"]) { display: none; }

.filter-set:has(input[value="live"]:checked) .match-card:not([data-status="live"]),
.filter-set:has(input[value="upcoming"]:checked) .match-card:not([data-status="upcoming"]),
.filter-set:has(input[value="completed"]:checked) .match-card:not([data-status="completed"]) { display: none; }

.filter-set:has(input[value="EWC News"]:checked) .news-card:not([data-cat="EWC News"]),
.filter-set:has(input[value="Team News"]:checked) .news-card:not([data-cat="Team News"]),
.filter-set:has(input[value="Club News"]:checked) .news-card:not([data-cat="Club News"]),
.filter-set:has(input[value="Country News"]:checked) .news-card:not([data-cat="Country News"]),
.filter-set:has(input[value="Press Releases"]:checked) .news-card:not([data-cat="Press Releases"]),
.filter-set:has(input[value="Sponsor News"]:checked) .news-card:not([data-cat="Sponsor News"]) { display: none; }

.filter-set:has(input[value="Match highlights"]:checked) .video-card:not([data-cat="Match highlights"]),
.filter-set:has(input[value="Best sixes"]:checked) .video-card:not([data-cat="Best sixes"]),
.filter-set:has(input[value="Best wickets"]:checked) .video-card:not([data-cat="Best wickets"]),
.filter-set:has(input[value="Interviews"]:checked) .video-card:not([data-cat="Interviews"]),
.filter-set:has(input[value="Behind the scenes"]:checked) .video-card:not([data-cat="Behind the scenes"]) { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 1.2rem;
  background: rgba(7, 23, 57, 0.85);
}
.lightbox:target { display: grid; }
.lightbox .sheet {
  position: relative;
  width: min(860px, 100%);
  padding: 1.4rem;
  background: var(--color-navy);
  color: #ffffff !important;
  border: 1px solid rgba(0, 168, 107, 0.4);
  border-radius: 6px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
.lightbox .frame { aspect-ratio: 16 / 9; margin-bottom: 0.9rem; overflow: hidden; border-radius: 4px; }
.lightbox .frame img { width: 100%; height: 100%; object-fit: cover; }
.lightbox h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.45rem; color: #ffffff !important; }
.lightbox p { color: rgba(255, 255, 255, 0.9) !important; font-size: 1rem; line-height: 1.6; }
.lightbox .tag { color: var(--color-yellow) !important; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 0.4rem; }
.lightbox .modal-close { position: absolute; top: 0.7rem; right: 0.7rem; color: #ffffff !important; }

#subscribed .form-success,
#sent .success-panel,
#received .success-panel,
#partnered .success-panel { display: none; }
#subscribed:target .inline-form,
#sent:target form,
#received:target form,
#partnered:target form { display: none; }
#subscribed:target .form-success,
#sent:target .success-panel,
#received:target .success-panel,
#partnered:target .success-panel { display: block; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
.news-grid .news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  padding: 0 0 1rem;
}
.news-grid .news-card .frame { aspect-ratio: 16 / 10; }
.news-grid .news-card .copy { padding: 0.9rem 1rem 0; }
.news-grid .news-card:hover { transform: translateY(-4px); }

.tabs label { cursor: pointer; }

/* Homepage section finish */

.intro-still {
  margin: 0 0 1.35rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-navy);
}

.intro-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.home .count-unit {
  background: var(--color-navy);
  color: #f4f1ea;
  padding: 1.15rem 0.7rem 0.95rem;
  border-top: 3px solid var(--color-emerald);
}

.home .count-unit b { color: #f6f3ec; }
.home .count-unit span { color: var(--color-yellow); }

.home .scoreboard {
  box-shadow: 0 28px 70px rgba(6, 20, 16, 0.22);
}

.home .next-strip {
  border: 1px solid rgba(16, 33, 28, 0.18);
  border-top: 0;
}

.home .pillars h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.home .pillars .num { font-size: 2.15rem; }

.home .journey li {
  padding-right: 0.6rem;
}

.home .journey h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.home .fixture {
  background: #fffdf8;
  border: 1px solid rgba(20, 33, 28, 0.1);
  border-top: 2px solid var(--color-gold);
  padding: 1.05rem 1.15rem;
  margin-top: 0.7rem;
}

.home .fixture:hover { border-color: rgba(184, 137, 61, 0.7); }

.home .group-tabs {
  padding: 0.35rem 0.35rem 1rem;
  background: #fffdf8;
  border: 1px solid rgba(20, 33, 28, 0.1);
}

.home .feature-story .frame { aspect-ratio: 16 / 9; min-height: 280px; }

.home .award {
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.12), transparent 42%),
    var(--color-navy);
  border-top: 3px solid var(--color-gold);
}

.home .story-card { min-height: 460px; }

.cta-stage {
  position: relative;
  isolation: isolate;
  background: var(--color-navy);
  color: #ffffff !important;
}

.cta-stage h2 {
  color: #ffffff !important;
}

.cta-stage p,
.cta-stage .lede {
  color: rgba(255, 255, 255, 0.92) !important;
}

.cta-stage .eyebrow {
  color: var(--color-yellow) !important;
}

.cta-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 23, 57, 0.95) 0%, rgba(0, 87, 217, 0.85) 55%, rgba(0, 168, 107, 0.75) 100%),
    url("../assets/images/stadium.jpg") center 40% / cover no-repeat;
}

.cta-stage .container { position: relative; z-index: 1; }

.home .newsletter {
  padding: 1.4rem 0 0;
  border-top: 2px solid var(--color-gold);
}

.home .team-grid .squad-card:first-child { grid-column: auto; }

/* Homepage sections keep their natural height so nothing is clipped. */

/* Motion and section finish. Content stays visible if scroll timelines are unsupported. */

.home .section-head h2::after,
.page-hero h1::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin-top: 0.85rem;
  background: var(--color-gold);
}

.btn-gold { position: relative; overflow: hidden; }

.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.38) 50%, transparent 66%);
  transform: translateX(-130%);
}

.btn-gold:hover::after { transform: translateX(130%); transition: transform 0.65s ease; }

.marker i { animation: pin-glow 2.8s ease-in-out infinite; }

.frame img,
.squad-photo img,
.intro-still img,
.spotlight-photo img {
  transition: transform 0.8s ease;
}

.feature-story:hover .frame img,
.venue-card:hover .frame img,
.venue-feature:hover .frame img,
.story-card:hover .frame img,
.intro-still:hover img { transform: scale(1.04); }

@keyframes pin-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(198, 161, 91, 0.18); }
  50% { box-shadow: 0 0 0 12px rgba(198, 161, 91, 0); }
}

@keyframes section-rise {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  .home .section-head,
  .home .count-unit,
  .home .broadcast,
  .home .next-strip,
  .home .intro-copy,
  .home .pillars li,
  .home .map-stage,
  .home .country-list,
  .home .journey li,
  .home .squad-card,
  .home .fixture,
  .home .group-tabs,
  .home .spotlight-copy,
  .home .spotlight-photo,
  .home .lead-story,
  .home .side-story,
  .home .chip-row,
  .home .video-card,
  .home .venue-feature,
  .home .venue-card,
  .home .award,
  .home .story-card,
  .home .tier,
  .home .cta-stage .container,
  .home .newsletter,
  .page-hero .container,
  main .section-head,
  main .squad-card,
  main .player-card,
  main .match-card,
  main .news-card,
  main .office,
  main .award,
  main .venue-card,
  main .video-card,
  main .story-card,
  main .fixture,
  main .journey li,
  main .form-panel,
  main .prose,
  main .doctrine-lead,
  main .doctrine-side,
  main .objective-grid li,
  main .eco-grid li,
  main .legal-grid article,
  main .expect-list li,
  main .faq-list details,
  main .profile-stage,
  main .page-rail {
    animation: section-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  :is(.count-unit, .pillars li, .journey li, .squad-card, .fixture, .side-story, .video-card, .venue-card, .award, .story-card, .tier, .player-card, .match-card, .news-card):nth-child(2) { animation-delay: 70ms; }
  :is(.count-unit, .pillars li, .journey li, .squad-card, .fixture, .side-story, .video-card, .venue-card, .award, .story-card, .tier, .player-card, .match-card, .news-card):nth-child(3) { animation-delay: 140ms; }
  :is(.count-unit, .journey li, .squad-card, .fixture, .video-card, .award, .story-card, .tier, .player-card, .match-card, .news-card):nth-child(4) { animation-delay: 210ms; }
  :is(.journey li, .squad-card, .fixture, .video-card, .award, .player-card, .news-card):nth-child(5) { animation-delay: 280ms; }
  :is(.journey li, .squad-card, .award, .player-card):nth-child(6) { animation-delay: 350ms; }
  :is(.objective-grid li, .eco-grid li, .legal-grid article, .expect-list li, .faq-list details):nth-child(2) { animation-delay: 60ms; }
  :is(.objective-grid li, .eco-grid li, .legal-grid article, .expect-list li, .faq-list details):nth-child(3) { animation-delay: 120ms; }
  :is(.objective-grid li, .eco-grid li, .faq-list details):nth-child(4) { animation-delay: 180ms; }
}

/* Inner pages — ceremonial panels, shared by every page under /pages */

body:not(.home) {
  background:
    radial-gradient(900px 280px at 100% 0, rgba(0, 87, 217, 0.05), transparent 55%),
    radial-gradient(800px 260px at 0% 0, rgba(0, 168, 107, 0.04), transparent 50%),
    var(--color-light);
  color: var(--color-ink);
}

body:not(.home) .band-paper { background: #f1f5f9; }
body:not(.home) .band-ivory { background: #ffffff; }

body:not(.home) .team-card,
body:not(.home) .player-card,
body:not(.home) .news-card,
body:not(.home) .venue-card,
body:not(.home) .story-card {
  background: #fff;
  border-color: rgba(0, 87, 217, 0.1);
  box-shadow: 0 16px 36px rgba(7, 23, 57, 0.06);
}

body:not(.home) .match-card,
body:not(.home) .fixture {
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.1);
  border-top: 3px solid var(--color-royal);
  padding: 1.15rem 1.2rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 12px 28px rgba(7, 23, 57, 0.05);
}

body:not(.home) .band:not(.band-dark):not(.band-emerald) .chip {
  border-color: rgba(0, 87, 217, 0.28);
  background: #fff;
  color: var(--color-royal);
}

body:not(.home) .board-wrap {
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  box-shadow: 0 16px 40px rgba(7, 23, 57, 0.06);
}

body:not(.home) fieldset {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.15rem;
  padding: 1.35rem 1.25rem 1.45rem;
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  box-shadow: 0 16px 40px rgba(7, 23, 57, 0.05);
}

body:not(.home) legend {
  margin: 0 0 0.85rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid rgba(0, 87, 217, 0.12);
  color: var(--color-royal);
  font-weight: 700;
}

body:not(.home) input:not([type="checkbox"]):not([type="radio"]),
body:not(.home) select,
body:not(.home) textarea {
  border-color: rgba(0, 87, 217, 0.18);
  background: #f8fafc;
}

body:not(.home) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.home) select:focus,
body:not(.home) textarea:focus {
  background: #fff;
  border-color: var(--color-royal);
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.14);
}

body:not(.home) .success-panel {
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-top: 3px solid var(--color-emerald);
  box-shadow: 0 16px 40px rgba(7, 23, 57, 0.05);
}

.office {
  position: relative;
  min-height: 168px;
  padding: 1.35rem 1.3rem 1.45rem;
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  box-shadow: 0 16px 36px rgba(7, 23, 57, 0.06);
}

.office::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-bottom: 0.85rem;
  background: var(--color-emerald);
}

.office h3 {
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-royal);
}

.office p {
  color: #111827;
  font-size: 0.94rem;
  line-height: 1.55;
  margin-top: 0.4rem;
}

.contact-grid { align-items: start; }

.contact-grid > aside {
  padding: 1.6rem 1.45rem 1.7rem;
  background:
    linear-gradient(160deg, rgba(0, 168, 107, 0.18), transparent 42%),
    var(--color-navy);
  color: #f4f1ea;
  box-shadow: 0 22px 48px rgba(7, 23, 57, 0.16);
  border-top: 3px solid var(--color-emerald);
}

.contact-grid > aside h2 { font-size: clamp(2rem, 3vw, 2.8rem); color: #fff; }
.contact-grid > aside p { color: rgba(244, 241, 234, 0.78); }
.contact-grid > aside a { color: var(--color-yellow); }
.contact-grid > aside .note { color: rgba(244, 241, 234, 0.62); }
.contact-grid > aside h3 {
  margin-top: 1.2rem;
  color: var(--color-yellow);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-grid > div {
  padding: 1.4rem 1.3rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  box-shadow: 0 18px 40px rgba(7, 23, 57, 0.06);
}

.faq-list { max-width: none; gap: 0.7rem; }

.faq-list details {
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-top: 3px solid var(--color-emerald);
  box-shadow: 0 12px 28px rgba(7, 23, 57, 0.05);
  padding: 0 1.2rem;
}

.faq-list summary { min-height: 68px; font-size: 1.02rem; color: var(--color-royal); }
.faq-list details[open] { background: linear-gradient(180deg, #fff, #f8fafc); }

.page-split {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) 1.38fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}

.page-rail { position: sticky; top: calc(var(--header-h) + 1.2rem); }
.page-rail h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 0.7rem; color: var(--color-royal); }
.page-rail p { color: #4d5b68; margin-bottom: 1.1rem; }

.doctrine {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.9rem;
}

.doctrine-lead,
.doctrine-side { padding: clamp(1.4rem, 3vw, 2.2rem); }

.doctrine-lead {
  background:
    linear-gradient(165deg, rgba(0, 168, 107, 0.18), transparent 38%),
    var(--color-navy);
  color: #f4f1ea;
  border-top: 3px solid var(--color-emerald);
}

.doctrine-lead h2,
.doctrine-side h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); }
.doctrine-side h2 { color: var(--color-royal); }

.doctrine-lead p:not(.eyebrow) { margin-top: 0.85rem; color: rgba(255, 255, 255, 0.92); font-size: 1.02rem; line-height: 1.6; }

.doctrine-side {
  background: #fff;
  border-top: 3px solid var(--color-royal);
  box-shadow: 0 18px 40px rgba(7, 23, 57, 0.06);
}

.doctrine-side p:not(.eyebrow) { margin-top: 0.85rem; color: #111827; font-size: 1.02rem; line-height: 1.6; }

.story-split {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: start;
}

.story-copy p { margin-bottom: 0.95rem; color: #2c3b4a; }

.objective-grid,
.eco-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
}

.objective-grid { counter-reset: obj; }

.objective-grid li,
.eco-grid li {
  min-height: 168px;
  padding: 1.15rem 1.1rem 1.25rem;
}

.objective-grid li {
  counter-increment: obj;
  background: rgba(7, 23, 57, 0.45);
  border: 1px solid rgba(0, 168, 107, 0.35);
  color: #f4f1ea;
}

.objective-grid li::before {
  content: counter(obj, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-stat);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--color-yellow);
}

.eco-grid li {
  display: flex;
  align-items: flex-end;
  background: #fff;
  border-top: 3px solid var(--color-emerald);
  box-shadow: 0 14px 32px rgba(7, 23, 57, 0.05);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-royal);
}

.company-band {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.2rem 2.2rem;
  align-items: start;
}

.company-band .eco-grid { grid-template-columns: 1fr 1fr; margin: 0; }
.company-band .note { grid-column: 1 / -1; margin: 0; }
.company-band .link-arrow { display: inline-flex; margin-top: 1.1rem; }

.pledge { max-width: 48rem; }
.pledge p { margin-top: 0.8rem; font-size: 1.14rem; color: rgba(244, 241, 234, 0.82); }
.pledge p:last-child { color: var(--color-yellow); font-size: 0.95rem; }

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.legal-grid article {
  min-height: 220px;
  padding: 1.45rem 1.35rem 1.55rem;
  background: #fff;
  border-top: 3px solid var(--color-royal);
  box-shadow: 0 16px 36px rgba(7, 23, 57, 0.06);
}

.legal-grid h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 0.7rem; color: var(--color-royal); }
.legal-grid p { color: #3d4c5c; }

.expect-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  list-style: none;
}

.expect-list li {
  padding: 1.15rem 1.2rem;
  background: #fff;
  border-left: 3px solid var(--color-emerald);
  box-shadow: 0 12px 28px rgba(7, 23, 57, 0.05);
}

.profile-stage {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  box-shadow: 0 22px 50px rgba(7, 23, 57, 0.08);
}

.profile-banner {
  padding: 1.45rem 1.5rem 1.3rem;
  background:
    linear-gradient(100deg, rgba(0, 168, 107, 0.18), transparent 36%),
    var(--color-navy);
  color: #f4f1ea;
  border-top: 3px solid var(--color-emerald);
}

.profile-banner h2 { color: #f4f1ea; font-size: clamp(2.4rem, 5vw, 4rem); }
.profile-body { padding: 1.35rem 1.5rem 1.55rem; }
.profile-body .lede { margin-bottom: 1rem; }
.profile-body .btn { margin-top: 1.15rem; }

body:not(.home) .nation-wall li {
  min-height: 92px;
  background: #fff;
  border: 1px solid rgba(0, 87, 217, 0.1);
  box-shadow: 0 10px 24px rgba(7, 23, 57, 0.05);
  color: var(--color-ink);
}

body:not(.home) .nation-wall strong { color: var(--color-royal); }
body:not(.home) .nation-wall em {
  color: #334155;
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}

body:not(.home) .prose h2 {
  padding-top: 1.15rem;
  border-top: 1px solid rgba(0, 87, 217, 0.14);
  color: var(--color-royal);
}

body:not(.home) .deck-sheet {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem 1.5rem 2.4rem;
  background: #fff;
  border-top: 3px solid var(--color-emerald);
  box-shadow: 0 18px 44px rgba(7, 23, 57, 0.06);
}

.reg-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.reg-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 1.2rem 1.1rem 1.15rem;
  color: #f6f3ec;
  background:
    linear-gradient(165deg, rgba(0, 168, 107, 0.16), transparent 46%),
    var(--color-navy);
  border: 1px solid rgba(0, 168, 107, 0.3);
  box-shadow: 0 18px 40px rgba(7, 23, 57, 0.15);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.reg-card:hover,
.reg-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--color-yellow);
  box-shadow: 0 22px 48px rgba(0, 168, 107, 0.22);
}

.reg-index {
  font-family: var(--font-stat);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
}

.reg-card svg {
  width: 34px;
  height: 34px;
  margin-top: 1.35rem;
  fill: none;
  stroke: var(--color-yellow);
  stroke-width: 1.6;
}

.reg-card h3 {
  margin-top: 0.85rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reg-card p {
  margin-top: 0.45rem;
  color: rgba(246, 243, 236, 0.74);
  font-size: 0.95rem;
  line-height: 1.45;
}

.reg-go {
  margin-top: auto;
  padding-top: 1.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.reg-form { display: none; }

.reg-form:target {
  display: block;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  background: #fff;
  border-top: 3px solid var(--color-emerald);
  box-shadow: 0 22px 48px rgba(7, 23, 57, 0.08);
}

.reg-desk:has(.reg-form:target) .reg-pick,
#received:target .reg-pick { display: none; }

.reg-back { margin: 0 0 1.1rem; }

.reg-back a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-royal);
}

.reg-back a:hover { color: var(--color-emerald); }

.reg-form .form-grid.two .field:has(textarea) { grid-column: 1 / -1; }

.reg-form:target .success-panel,
#received:target .success-panel { margin-top: 0; }

#received:target .success-panel .btn { margin-top: 1rem; }

.reg-form .form-grid.two .field:has(textarea) { grid-column: 1 / -1; }

.reg-form:target .success-panel,
#received:target .success-panel { margin-top: 0; }

#received:target .success-panel .btn { margin-top: 1rem; }

@media (max-width: 1100px) {
  .reg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .reg-cards { grid-template-columns: 1fr 1fr; }
  .reg-card { min-height: 260px; }
}

@media (max-width: 520px) {
  .reg-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ENHANCED OPEN-TIERS FALLBACK (Ensure responsive wrapping)
   ========================================================================== */
@media (max-width: 992px) {
  .open-tiers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .open-tiers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PREMIUM MERCHANDISE / SHOP STYLING
   ========================================================================== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.merch-card {
  background: #ffffff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 10px 24px rgba(7, 23, 57, 0.05);
}

.merch-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 87, 217, 0.12);
  border-color: var(--color-emerald);
}

.merch-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-navy);
}

.merch-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.merch-card:hover .merch-visual img {
  transform: scale(1.06);
}

.merch-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--color-yellow);
  color: #071739;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.merch-badge.emerald {
  background: var(--color-emerald);
  color: #ffffff;
}

.merch-badge.royal {
  background: var(--color-royal);
  color: #ffffff;
}

.merch-body {
  padding: 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.merch-cat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-royal);
  margin-bottom: 0.35rem;
}

.merch-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.merch-desc {
  font-size: 0.82rem;
  color: #556980;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

.merch-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #556980;
  margin-bottom: 0.9rem;
}

.merch-stars {
  color: var(--color-yellow);
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.merch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 87, 217, 0.08);
}

.merch-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-royal);
}

.merch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: var(--color-emerald);
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.merch-btn:hover {
  background: var(--color-royal);
  color: #ffffff !important;
}

/* ==========================================================================
   CORPORATE COMMERCIAL TIERS (Replacing .open-tiers)
   ========================================================================== */
.tier-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
  margin-top: 1.2rem;
}

.tier-card {
  background: linear-gradient(175deg, rgba(7, 23, 57, 0.98), rgba(11, 35, 84, 0.96));
  border: 1px solid rgba(0, 168, 107, 0.25);
  border-top: 3px solid var(--color-emerald);
  border-radius: 8px;
  padding: 1.35rem 1.15rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  color: #f4f7fb;
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-yellow);
  box-shadow: 0 16px 36px rgba(0, 87, 217, 0.22);
}

.tier-card.featured {
  border-top: 3px solid var(--color-yellow);
  border-color: rgba(212, 175, 55, 0.45);
}

.tier-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.tier-status-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: rgba(0, 168, 107, 0.22);
  color: var(--color-emerald);
  border: 1px solid rgba(0, 168, 107, 0.4);
}

.tier-card.featured .tier-status-pill {
  background: rgba(255, 199, 44, 0.22);
  color: var(--color-yellow);
  border-color: rgba(255, 199, 44, 0.4);
}

.tier-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tier-card .tier-sub {
  font-size: 0.8rem;
  color: rgba(244, 241, 234, 0.76);
  margin-bottom: 0.95rem;
  min-height: 2.2rem;
  line-height: 1.35;
}

.tier-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tier-bullets li {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.35;
}

.tier-bullets li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--color-yellow);
  margin-top: 1px;
}

.tier-price-row {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tier-price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-yellow);
  font-weight: 700;
}

.tier-cta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff !important;
  background: rgba(0, 87, 217, 0.65);
  border: 1px solid rgba(0, 87, 217, 0.8);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tier-cta:hover {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  color: #ffffff !important;
}

/* ==========================================================================
   STRATEGIC BENEFIT CARDS (Replacing awkward nation-wall on sponsors)
   ========================================================================== */
.benefit-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.benefit-card {
  background: #ffffff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-top: 3px solid var(--color-royal);
  border-radius: 8px;
  padding: 1.4rem 1.25rem;
  box-shadow: 0 10px 24px rgba(7, 23, 57, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 87, 217, 0.1);
  border-top-color: var(--color-emerald);
}

.benefit-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0, 87, 217, 0.08);
  color: var(--color-royal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.benefit-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.benefit-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--color-royal);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.benefit-card p {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #334155;
}

.benefit-metric {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-emerald);
  background: rgba(0, 168, 107, 0.08);
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
}

/* ==========================================================================
   AB MEDIA GROUP ECOSYSTEM CARDS (Replacing empty .eco-grid)
   ========================================================================== */
.ecosystem-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
}

.ecosystem-card {
  background: #ffffff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-top: 3px solid var(--color-emerald);
  border-radius: 8px;
  padding: 1.35rem 1.2rem;
  box-shadow: 0 10px 24px rgba(7, 23, 57, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ecosystem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 87, 217, 0.1);
  border-top-color: var(--color-royal);
}

.ecosystem-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.ecosystem-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(0, 168, 107, 0.1);
  color: var(--color-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ecosystem-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.ecosystem-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-royal);
  margin-bottom: 0.2rem;
}

.ecosystem-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--color-ink);
  font-family: var(--font-display);
}

.ecosystem-card p {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #334155;
  flex-grow: 1;
}

.ecosystem-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 87, 217, 0.08);
  font-size: 0.74rem;
  font-weight: 700;
  color: #556980;
}

.ecosystem-feature span:last-child {
  color: var(--color-emerald);
}

/* ==========================================================================
   MEDIA GALLERY DESKS & EWC TV CARDS (Replacing empty desk voids)
   ========================================================================== */
.gallery-desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.gallery-desk-card {
  background: #ffffff;
  border: 1px solid rgba(0, 87, 217, 0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(7, 23, 57, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
}

.gallery-desk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 87, 217, 0.12);
}

.gallery-desk-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-navy);
}

.gallery-desk-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-desk-card:hover .gallery-desk-visual img {
  transform: scale(1.06);
}

.gallery-desk-pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(7, 23, 57, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.gallery-desk-pill svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-yellow);
}

.gallery-desk-body {
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gallery-desk-cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-royal);
  margin-bottom: 0.3rem;
}

.gallery-desk-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  line-height: 1.35;
}

.gallery-desk-card p {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  color: #556980;
  line-height: 1.45;
}

.gallery-desk-foot {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-emerald);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}