/* =========================================================
   Thmanyah Arabic typefaces
   ========================================================= */
@font-face{
  font-family:'thmanyahsans';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahsans/woff2/thmanyahsans-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahsans';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahsans/woff2/thmanyahsans-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahsans';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahsans/woff2/thmanyahsans-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahsans';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahsans/woff2/thmanyahsans-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahsans';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahsans/woff2/thmanyahsans-Black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahserifdisplay';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahserifdisplay';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahserifdisplay';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'thmanyahserifdisplay';
  src:url('../assets/fonts/thmanyah-typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   SPORTEX 2026 — Design system tokens (see DESIGN.md)
   ========================================================= */

:root{
  /* Colors */
  --ink:#111111;
  --on-primary:#ffffff;
  --canvas:#ffffff;
  --soft-cloud:#f5f5f5;
  --charcoal:#39393b;
  --ash:#4b4b4d;
  --mute:#707072;
  --stone:#9e9ea0;
  --hairline:#cacacb;
  --hairline-soft:#e5e5e5;
  --sale:#d30005;
  --sale-deep:#780700;
  --success:#007d48;
  --success-bright:#1eaa52;
  --info:#1151ff;
  --info-deep:#0034e3;
  --accent-pink:#ed1aa0;
  --accent-pink-soft:#ffb0dd;
  --accent-purple-soft:#beaffd;
  --accent-purple-pale:#d6d1ff;
  --accent-teal:#0a7281;
  --accent-pink-deep:#4c012d;

  /* Radius */
  --r-none:0px;
  --r-sm:18px;
  --r-md:24px;
  --r-lg:30px;
  --r-full:9999px;

  /* Spacing */
  --sp-xxs:2px;
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:12px;
  --sp-lg:18px;
  --sp-xl:24px;
  --sp-xxl:30px;
  --sp-section:48px;

  /* Typography - English */
  --font-display:'Bebas Neue', 'Tajawal', sans-serif;
  --font-heading:'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Type sizes */
  --fs-display:96px;
  --fs-xl:32px;
  --fs-lg:24px;
  --fs-md:16px;
  --fs-body:16px;
  --fs-btn-sm:14px;
  --fs-caption-md:14px;
  --fs-caption-sm:12px;
  --fs-utility:9px;

  --max-width:1440px;
}

html.ar{
  --font-display:'thmanyahserifdisplay', 'Tajawal', serif;
  --font-heading:'thmanyahsans', 'Tajawal', sans-serif;
  --font-body:'thmanyahsans', 'Tajawal', sans-serif;
}

/* =========================================================
   Reset
   ========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}

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

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

ul{ list-style:none; }

button{ font-family:inherit; border:none; background:none; cursor:pointer; }

/* =========================================================
   Language toggle visibility
   ========================================================= */
html.en .ar-text{ display:none; }
html.ar .en-text{ display:none; }

html.ar{ direction:rtl; }
html.en{ direction:ltr; }

/* =========================================================
   Layout helpers
   ========================================================= */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}

@media (min-width:1920px){
  .container{ padding:0 80px; }
}

.section{
  padding-block:var(--sp-section);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-lg);
  margin-bottom:var(--sp-xl);
}

.eyebrow{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--fs-caption-sm);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:var(--sp-sm);
}

html.ar .eyebrow{ letter-spacing:0; }

.section-title{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-xl);
  line-height:1.2;
  color:var(--ink);
}

.section-desc{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--mute);
  max-width:560px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-sm);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  border-radius:var(--r-lg);
  height:48px;
  padding:0 32px;
  white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease;
}

.btn:active{ transform:scale(.96); opacity:.7; }

.btn-primary{
  background:var(--ink);
  color:var(--on-primary);
}

.btn-secondary{
  background:var(--soft-cloud);
  color:var(--ink);
}

.btn-outline{
  background:var(--canvas);
  color:var(--ink);
  height:auto;
  padding:12px 24px;
}

.btn-sm{
  height:40px;
  padding:0 24px;
  font-size:var(--fs-btn-sm);
}

/* =========================================================
   Utility bar
   ========================================================= */
.utility-bar{
  background:var(--soft-cloud);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-caption-sm);
  height:36px;
}

.utility-bar .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-lg);
}

.utility-bar__left,
.utility-bar__right{
  display:flex;
  align-items:center;
  gap:var(--sp-xl);
}

.utility-bar__right{ gap:var(--sp-md); }

.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-caption-sm);
  color:var(--ink);
}

.lang-switch button{
  font-family:inherit;
  font-weight:inherit;
  font-size:inherit;
  color:var(--mute);
  padding:2px 6px;
  border-radius:var(--r-full);
}

.lang-switch button.active{
  color:var(--ink);
  background:var(--canvas);
}

.utility-bar__divider{
  color:var(--hairline);
}

/* =========================================================
   Primary nav
   ========================================================= */
.primary-nav{
  background:var(--canvas);
  color:var(--ink);
  height:64px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
}

.primary-nav .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-lg);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-lg);
  letter-spacing:0.04em;
}

.brand img{
  width:36px;
  height:36px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-xl);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
}

.nav-links a{
  position:relative;
  padding-bottom:6px;
}

.nav-links a.active{
  border-bottom:2px solid var(--ink);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-md);
}

.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:var(--r-full);
  background:var(--soft-cloud);
  align-items:center;
  justify-content:center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  position:relative;
  transition:all .2s ease;
}

.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer{
  position:fixed;
  inset:0;
  background:var(--canvas);
  z-index:99;
  display:flex;
  flex-direction:column;
  padding:96px var(--sp-xl) var(--sp-xl);
  transform:translateX(-100%);
  transition:transform .3s ease;
}

html.ar .mobile-drawer{ transform:translateX(100%); }

.mobile-drawer.is-open{ transform:translateX(0); }

.mobile-drawer .nav-links{
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-xl);
  font-size:var(--fs-lg);
}

.mobile-drawer .nav-actions{
  margin-top:var(--sp-section);
  flex-direction:column;
  align-items:stretch;
}

.mobile-drawer .btn{ width:100%; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  background:var(--ink);
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.45) 30%, rgba(17,17,17,0.7) 65%, rgba(17,17,17,0.97) 100%),
    rgba(17,17,17,0.25);
}

.hero__content{
  position:relative;
  z-index:1;
  width:100%;
  padding-block: 180px 72px;
  color:var(--on-primary);
}

.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:var(--sp-md);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--fs-caption-md);
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:var(--sp-xl);
  color:var(--on-primary);
}

html.ar .hero__eyebrow{ letter-spacing:0; }

.hero__eyebrow .dot{
  width:8px;
  height:8px;
  border-radius:var(--r-full);
  background:var(--sale);
  display:inline-block;
}

.hero__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-display);
  line-height:0.9;
  text-transform:uppercase;
  letter-spacing:0;
  max-width:1100px;
}

html.ar .hero__title{
  text-transform:none;
  font-weight:900;
}

.hero__title em{
  font-style:normal;
  color:var(--sale);
}

.hero__sub{
  margin-top:var(--sp-xxl);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-xl);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-lg);
  color:var(--on-primary);
}

.hero__sub-item{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
}

.hero__sub-item svg{ width:20px; height:20px; flex-shrink:0; }

.hero__actions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-md);
}

.hero__actions .btn-secondary{
  background:var(--on-primary);
}

.hero__actions .btn-outline-on-image{
  background:transparent;
  color:var(--on-primary);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-lg);
  height:48px;
  padding:0 32px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  display:inline-flex;
  align-items:center;
}

/* Countdown */
.countdown{
  margin-top:40px;
  display:flex;
  gap:var(--sp-md);
  flex-wrap:wrap;
}

.countdown__item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);
  padding:var(--sp-md) var(--sp-lg);
  min-width:84px;
  text-align:center;
}

.countdown__num{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:500;
  line-height:1;
  color:var(--on-primary);
}

.countdown__label{
  font-family:var(--font-heading);
  font-size:var(--fs-caption-sm);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--stone);
  margin-top:4px;
}

html.ar .countdown__label{ letter-spacing:0; }

/* =========================================================
   Stats strip
   ========================================================= */
.stats{
  background:var(--ink);
  color:var(--on-primary);
  padding-block:var(--sp-section);
}

.stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-xl);
}

.stat{
  display:flex;
  flex-direction:column;
  gap:var(--sp-sm);
  padding-inline-start:var(--sp-lg);
  border-inline-start:1px solid rgba(255,255,255,.18);
}

.stat:first-child{
  border-inline-start:none;
  padding-inline-start:0;
}

.stat__num{
  font-family:var(--font-display);
  font-weight:500;
  font-size:56px;
  line-height:1;
  letter-spacing:0;
}

html.ar .stat__num{ font-weight:900; }

.stat__label{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  color:var(--stone);
}

/* =========================================================
   About
   ========================================================= */
.about__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--sp-section);
  align-items:center;
}

.about__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--soft-cloud);
  overflow:hidden;
}

.about__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.about__body p{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--charcoal);
  margin-top:var(--sp-lg);
  max-width:560px;
}

.about__points{
  margin-top:var(--sp-xl);
  display:grid;
  gap:var(--sp-lg);
}

.about__point{
  display:flex;
  gap:var(--sp-md);
  align-items:flex-start;
}

.about__point .dot{
  width:8px; height:8px;
  border-radius:var(--r-full);
  background:var(--ink);
  margin-top:8px;
  flex-shrink:0;
}

.about__point strong{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  display:block;
}

.about__point span{
  font-family:var(--font-body);
  color:var(--mute);
  font-size:var(--fs-caption-md);
}

/* =========================================================
   Championships grid
   ========================================================= */
#championships .section-head{
  margin-bottom:var(--sp-section);
}

.champ-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-xxl) var(--sp-xl);
}

.champ-card{
  display:flex;
  flex-direction:column;
}

.champ-card__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--soft-cloud);
  overflow:hidden;
}

.champ-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.champ-card:hover .champ-card__media img{
  transform:scale(1.04);
}

.champ-card__cta{
  position:absolute;
  bottom:var(--sp-md);
  inset-inline-start:var(--sp-md);
}

.champ-card__body{
  padding:var(--sp-lg);
  display:flex;
  flex-direction:column;
  gap:var(--sp-sm);
}

.champ-card__number{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--fs-caption-sm);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
}

html.ar .champ-card__number{ letter-spacing:0; }

.champ-card__name{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-lg);
  color:var(--ink);
}

.champ-card__desc{
  font-family:var(--font-body);
  font-size:var(--fs-caption-md);
  color:var(--mute);
  line-height:1.7;
  max-width:42ch;
}

/* =========================================================
   Campaign feature tile (single editorial moment)
   ========================================================= */
.campaign-tile{
  position:relative;
  background:var(--ink);
  color:var(--on-primary);
  aspect-ratio:16/9;
  overflow:hidden;
}

.campaign-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.campaign-tile::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,0) 35%, rgba(17,17,17,.85) 100%);
}

.campaign-tile__content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--sp-xxl);
  gap:var(--sp-lg);
}

.campaign-tile__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:64px;
  line-height:0.95;
  text-transform:uppercase;
  max-width:760px;
}

html.ar .campaign-tile__title{
  text-transform:none;
  font-weight:900;
}

.campaign-tile__desc{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  max-width:560px;
  color:var(--on-primary);
  opacity:.85;
}

/* =========================================================
   Gallery
   ========================================================= */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:var(--sp-sm);
}

.gallery__item{
  overflow:hidden;
  background:var(--soft-cloud);
  position:relative;
}

.gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.gallery__item:hover img{
  transform:scale(1.05);
}

.gallery__item--wide{ grid-column:span 2; }
.gallery__item--tall{ grid-row:span 2; }

/* =========================================================
   CTA / Register band
   ========================================================= */
.cta-band{
  background:var(--ink);
  color:var(--on-primary);
  padding-block:var(--sp-section);
}

.cta-band__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-xl);
  flex-wrap:wrap;
}

.cta-band__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:48px;
  line-height:1;
  text-transform:uppercase;
  max-width:640px;
}

html.ar .cta-band__title{
  text-transform:none;
  font-weight:900;
}

.cta-band__desc{
  font-family:var(--font-body);
  color:var(--stone);
  margin-top:var(--sp-sm);
  max-width:480px;
}

.cta-band__contact{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-xl);
  margin-top:var(--sp-lg);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
}

.cta-band__contact a{
  color:var(--on-primary);
  unicode-bidi:plaintext;
}

.cta-band__contact a:hover{ color:var(--stone); }

.cta-band__actions{
  display:flex;
  gap:var(--sp-md);
  flex-wrap:wrap;
}

.cta-band .btn-primary{
  background:var(--on-primary);
  color:var(--ink);
}

.cta-band .btn-secondary{
  background:transparent;
  color:var(--on-primary);
  border:1px solid rgba(255,255,255,.3);
}

.cta-band__map{
  margin-top:var(--sp-section);
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.cta-band__map iframe{
  display:block;
  width:100%;
  filter:grayscale(.2) contrast(1.05);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-row{
  border-bottom:1px solid var(--hairline);
  padding-block:var(--sp-xl);
}

.faq-row__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-lg);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  line-height:1.75;
  color:var(--ink);
  cursor:pointer;
}

.faq-row__chevron{
  flex-shrink:0;
  width:20px;
  height:20px;
  transition:transform .25s ease;
}

.faq-row.is-open .faq-row__chevron{
  transform:rotate(180deg);
}

.faq-row__a{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--mute);
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding-top .3s ease;
}

.faq-row.is-open .faq-row__a{
  max-height:240px;
  padding-top:var(--sp-md);
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:var(--canvas);
  color:var(--mute);
  border-top:1px solid var(--hairline);
}

.footer__top{
  padding-block:var(--sp-section);
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:var(--sp-xxl);
}

.footer__contact{
  display:flex;
  flex-direction:column;
  gap:var(--sp-md);
}

.footer__contact a{ unicode-bidi:plaintext; }

.footer__brand{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-lg);
  color:var(--ink);
}

.footer__brand img{ width:36px; height:36px; }

.footer__tagline{
  margin-top:var(--sp-lg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--mute);
  max-width:320px;
}

.footer__col-title{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:var(--fs-md);
  color:var(--ink);
  margin-bottom:var(--sp-lg);
}

.footer__col ul{
  display:flex;
  flex-direction:column;
  gap:var(--sp-md);
}

.footer__col a{
  font-family:var(--font-body);
  font-size:var(--fs-caption-md);
  color:var(--mute);
}

.footer__col a:hover{ color:var(--ink); }

.footer__bottom{
  border-top:1px solid var(--hairline);
  padding-block:var(--sp-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-md);
  font-family:'Inter', sans-serif;
  font-size:var(--fs-utility);
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--mute);
}

html.ar .footer__bottom{ text-transform:none; letter-spacing:0; }

.footer__socials{
  display:flex;
  gap:var(--sp-sm);
}

.footer__socials a{
  width:40px; height:40px;
  border-radius:var(--r-full);
  background:var(--soft-cloud);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1199px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-xxl) var(--sp-xl); }
  .stat:nth-child(3){ border-inline-start:none; padding-inline-start:0; }
  .footer__top{ grid-template-columns:1.2fr 1fr 1fr; }
  .footer__col:last-child{ grid-column:span 1; }
}

@media (max-width:1023px){
  .primary-nav .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn{ display:none; }
  .nav-actions .nav-toggle{ display:flex; }

  .hero{ min-height:80vh; }
  .hero__content{ padding-block:120px var(--sp-section); }
  :root{ --fs-display:72px; }

  .champ-grid{ grid-template-columns:repeat(2,1fr); }
  .about__grid{ grid-template-columns:1fr; gap:var(--sp-xl); }
  .about__media{ aspect-ratio:16/9; order:-1; }

  .gallery__grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; }
  .gallery__item--wide{ grid-column:span 2; }

  .footer__top{ grid-template-columns:1fr 1fr; gap:var(--sp-xl); }
  .footer__brand-block{ grid-column:span 2; }
}

@media (max-width:959px){
  .section{ padding-block:32px; }
  :root{ --sp-section:32px; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:639px){
  :root{ --fs-display:48px; --fs-xl:24px; --fs-lg:20px; --sp-section:24px; }

  .container{ padding:0 var(--sp-lg); }

  .champ-grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .gallery__item--wide{ grid-column:span 2; }
  .gallery__item--tall{ grid-row:span 1; }

  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat__num{ font-size:40px; }

  .footer__top{ grid-template-columns:1fr; }
  .footer__brand-block{ grid-column:span 1; }

  .section-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-sm); }

  .cta-band__title{ font-size:36px; }
  .campaign-tile{ aspect-ratio:4/5; }
  .campaign-tile__title{ font-size:40px; }

  .countdown__item{ min-width:72px; padding:var(--sp-sm) var(--sp-md); }
  .countdown__num{ font-size:24px; }

  .hero__sub{ gap:var(--sp-md); font-size:var(--fs-md); }
}