/* ==========================================================================
   OSA — Open Soccer Alliance | Design System
   ========================================================================== */

:root{
  /* Brand */
  --c-blue: #003b5c;
  --c-blue-light: #0d6690;
  --c-blue-pale: #4a92b8;
  --c-red: #d22630;
  --c-red-light: #ff4d58;
  --c-black: #000000;
  --c-white: #ffffff;
  --c-grey: #eeeeee;
  --c-grey-dim: #b9c2c8;

  /* Surfaces */
  --bg-0: #0c141c;
  --bg-1: #070d13;
  --bg-2: #0a121a;
  --surface: #0e1620;
  --surface-2: #131e29;
  --surface-soft: rgba(0, 59, 92, .32);
  --surface-soft-2: rgba(0, 59, 92, .16);
  --border-soft: rgba(238, 238, 238, .1);
  --border-softer: rgba(238, 238, 238, .06);

  /* Text */
  --text-primary: #f5f7f8;
  --text-secondary: #a7b2ba;
  --text-muted: #6f7c85;

  /* Type */
  --font-heading: 'Montserrat', -apple-system, sans-serif;
  --font-body: 'avenir-next-lt-pro', 'Avenir Next', 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  /* Motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --container: 1280px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --header-h: 92px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-padding-top: var(--header-h);
}
body{
  margin: 0;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.01em;
}
p{ margin: 0; }
::selection{ background: var(--c-red); color: var(--c-white); }

/* ---------- Custom cursor ---------- */
html.has-fine-pointer, html.has-fine-pointer a, html.has-fine-pointer button{ cursor: none; }
.cursor-dot, .cursor-ring{
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}
.cursor-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-white);
  transform: translate(-50%,-50%);
  transition: opacity .3s ease, background-color .25s ease, width .25s var(--ease), height .25s var(--ease);
}
.cursor-ring{
  width: 21px; height: 21px;
  transition: opacity .3s ease, width .35s var(--ease), height .35s var(--ease);
}
.cursor-ring-inner{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(238,238,238,.55);
  animation: cursorSpin 6s linear infinite;
  transition: border-color .3s ease, border-style .3s ease, background-color .3s ease, animation-duration .3s ease;
}
@keyframes cursorSpin{ to{ transform: rotate(360deg); } }
html.cursor-ready .cursor-dot, html.cursor-ready .cursor-ring{ opacity: 1; }
.cursor-ring.is-hover{ width: 38px; height: 38px; }
.cursor-ring.is-hover .cursor-ring-inner{
  border-color: var(--c-white);
  border-style: solid;
  background: rgba(238,238,238,.1);
  animation-duration: 1.5s;
}
.cursor-dot.is-hover{ background: var(--c-white); width: 4px; height: 4px; }

/* ---------- Layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.section{
  position: relative;
  padding: 128px 0;
}
.section-tight{ padding: 88px 0; }
@media (max-width: 780px){
  .section{ padding: 88px 0; }
  .section-tight{ padding: 64px 0; }
  .container{ padding: 0 20px; }
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-red-light);
}
.eyebrow::before{
  content: '';
  width: 26px;
  height: 2px;
  background: var(--c-red-light);
  display: inline-block;
}
.eyebrow-live::before{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: eyebrowPulse 2.2s ease-in-out infinite;
}
@keyframes eyebrowPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(210,38,48,.5); transform: scale(1); }
  50%{ box-shadow: 0 0 0 6px rgba(210,38,48,0); transform: scale(1.25); }
}

.section-head{
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 14px;
  color: var(--c-white);
}
.section-head p{
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 620px;
}
.section-head.center p{ margin-left: auto; margin-right: auto; }

.accent{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--c-red-light);
}
.accent.gold{ color: #d8b775; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn svg{ width: 15px; height: 15px; transition: transform .35s var(--ease); }
.btn:hover{ transform: translateY(-2px); }
.btn:hover svg{ transform: translate(3px,-2px); }

.btn-primary{
  background: var(--c-red);
  color: var(--c-white);
  box-shadow: 0 10px 30px -12px rgba(210,38,48,.6);
}
.btn-primary:hover{ background: var(--c-red-light); }

.btn-ghost{
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-soft);
}
.btn-ghost:hover{ border-color: var(--c-white); }

.btn-light{
  background: var(--c-white);
  color: var(--c-black);
}
.btn-light:hover{ background: var(--c-grey); }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-white);
  position: relative;
}
.link-arrow svg{ width: 13px; height: 13px; transition: transform .3s var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }
.link-arrow::after{
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--border-soft);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-scale{ opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: padding .4s var(--ease), background-color .4s ease;
}
.header-box{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  border-radius: 999px;
  background: var(--surface-soft);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(238,238,238,.08);
  transition: background-color .4s ease, box-shadow .4s ease, height .4s ease;
}
.site-header.is-scrolled{ padding: 12px 0; }
.site-header.is-scrolled .header-box{
  background: rgba(6,11,16,.78);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7);
  height: 60px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img{ height: 42px; width: auto; transition: height .4s ease; }
.site-header.is-scrolled .brand img{ height: 36px; }
.brand-word{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--c-white);
}
.brand-word span{
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--c-red-light);
  margin-top: 2px;
}

.main-nav{ display: flex; align-items: center; gap: 2px; }
.main-nav a{
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: 999px;
  transition: color .3s ease, background-color .3s ease;
}
.main-nav a:hover, .main-nav a.is-active{ color: var(--c-white); background: rgba(238,238,238,.08); }

.header-actions{ display: flex; align-items: center; gap: 14px; }
.header-actions .btn{ padding: 12px 22px; }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-white);
  transition: transform .35s var(--ease), opacity .3s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 560px){
  .header-actions{ gap: 10px; }
  .header-actions .btn-primary{ padding: 11px 16px; font-size: .72rem; }
  .brand-word{ font-size: .86rem; }
  .brand img{ height: 36px; }
  .header-box{ padding: 0 14px 0 16px; }
}

@media (max-width: 980px){
  .main-nav{
    position: fixed;
    top: 96px; left: 20px; right: 20px;
    background: #0a1119;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 2px;
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s var(--ease), opacity .4s ease, visibility .4s;
  }
  .main-nav.is-open{ transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a{ padding: 14px 18px; text-align: left; border-radius: 12px; }
  .header-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: block;
  padding: calc(var(--header-h) + 56px) 0 100px;
  overflow: hidden;
  background:
    linear-gradient(96deg, rgba(28,30,33,.88) 0%, rgba(28,30,33,.68) 26%, rgba(28,30,33,.34) 50%, rgba(28,30,33,.1) 72%, rgba(28,30,33,.24) 100%),
    linear-gradient(0deg, rgba(4,7,10,.78) 0%, rgba(20,22,24,.08) 20%, rgba(20,22,24,.06) 55%, rgba(20,22,24,.45) 84%, rgba(4,7,10,.97) 100%),
    url('../images/hero-female-invitational.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 38%;
}
.hero-lines{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(238,238,238,.05) 0px, rgba(238,238,238,.05) 1px, transparent 1px, transparent 96px);
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.7) 30%, rgba(0,0,0,.7) 70%, transparent);
  pointer-events: none;
}
.hero-glow{
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  right: -160px; top: -160px;
  background: radial-gradient(circle, rgba(0,120,175,.35), transparent 70%);
  filter: blur(10px);
  animation: floaty 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floaty{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-30px, 30px); }
}

.hero::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 360px;
  background: linear-gradient(180deg, transparent 0%, rgba(4,7,10,.5) 45%, rgba(4,7,10,.92) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner{
  position: relative;
  z-index: 2;
}
.hero-copy{ max-width: 720px; }
.hero-copy h1{
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  color: var(--c-white);
  margin-top: 22px;
}
.hero-copy h1 em{
  font-style: italic;
  font-family: var(--font-accent);
  font-weight: 500;
  color: var(--c-red-light);
  display: inline-block;
}
.hero-copy p.lede{
  margin-top: 26px;
  max-width: 560px;
  font-size: 1.14rem;
  color: var(--text-secondary);
}
.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.hero-stats{
  position: relative;
  z-index: 2;
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-soft);
  padding-top: 34px;
}
.hero-stats div{ padding: 0 22px; border-left: 1px solid var(--border-softer); }
.hero-stats div:first-child{ border-left: none; padding-left: 0; }
.hero-stats strong{
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--c-white);
  font-weight: 800;
}
.hero-stats span{
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--c-grey);
  letter-spacing: .03em;
}

.hero-wordmark{
  position: absolute;
  bottom: -4vw;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 16vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238,238,238,.08);
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

@media (max-width: 980px){
  .hero-stats{ grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .hero-stats div:nth-child(3){ border-left: none; }
  .hero::after{ height: 640px; }
}
@media (max-width: 560px){
  .hero-stats{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Shared: card surfaces
   ========================================================================== */
.surface-card{
  background: linear-gradient(165deg, rgba(14,22,32,.9) 0%, rgba(19,30,41,.9) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s ease;
}
.surface-card:hover{
  transform: translateY(-6px);
  border-color: rgba(238,238,238,.22);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}

.tag{
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.tag-red{ background: rgba(210,38,48,.16); color: var(--c-red-light); }
.tag-blue{ background: rgba(13,102,144,.22); color: #6fbadd; }
.tag-white{ background: rgba(238,238,238,.1); color: var(--c-grey); }

/* ==========================================================================
   News
   ========================================================================== */
.news-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
.news-feature{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 44px;
  isolation: isolate;
  transition: opacity .45s ease;
}
.news-feature::before{
  content:'';
  position:absolute; inset:0;
  background: var(--news-grad, linear-gradient(135deg, #003b5c, #071019));
  background-size: cover;
  background-position: center;
  transition: background-image .4s ease;
  z-index: -2;
}
.news-feature::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 60%);
  z-index: -1;
}
.news-feature-body{ max-width: 480px; }
.news-feature-body .tag{ margin-bottom: 18px; }
.news-feature-body h3{ color: var(--c-white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.news-feature-body p{ margin-top: 14px; color: var(--c-grey); font-size: .95rem; opacity: .85; }
.news-feature-body .link-arrow{ margin-top: 24px; }

.news-side{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-card{
  flex: 1;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.news-card-thumb{
  width: 86px; height: 86px;
  flex: none;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.7);
}
.news-card-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  align-self: stretch;
}
.news-card h4{ color: var(--c-white); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.news-card .meta{ display:flex; align-items:center; justify-content: space-between; }
.news-card .meta .date{ font-size: .74rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-heading); }

.news-dots{ display: flex; gap: 8px; }
.news-dot{
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: rgba(238,238,238,.3);
  flex: none;
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.news-dot:hover{ background: rgba(238,238,238,.6); }
.news-dot.is-active{
  background: var(--c-red);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(210,38,48,.25);
}

.news-footer-row{
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 980px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-feature{ min-height: 380px; }
}

/* ==========================================================================
   Tournaments
   ========================================================================== */
.tournament-feature{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 56px;
  background:
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.25), transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
}
.tournament-feature h3{ color: var(--c-white); font-size: clamp(1.7rem, 3vw, 2.5rem); margin-top: 16px; }
.tournament-feature p.desc{ margin-top: 16px; color: var(--text-secondary); max-width: 480px; }
.tournament-meta{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px 40px;
}
.tournament-meta div span{ display:block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-heading); font-weight: 700; }
.hero-copy .tournament-meta div span{ color: var(--c-grey); }
.tournament-meta div strong{ display:block; margin-top: 6px; color: var(--c-white); font-size: 1.05rem; }

.price-card{
  align-self: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px;
}
.price-card h4{
  font-family: var(--font-heading);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-grey-dim);
  margin-bottom: 18px;
}
.price-row{
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border-softer);
  font-family: var(--font-heading);
}
.price-row:first-of-type{ border-top: none; }
.price-row span:first-child{ color: var(--c-grey); font-weight: 600; font-size: .92rem; }
.price-row span:last-child{ color: var(--c-red-light); font-weight: 800; }
.price-perks{ margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.price-perks li{ display:flex; gap:8px; align-items:center; font-size: .82rem; color: var(--text-secondary); }
.price-perks svg{ width: 14px; height: 14px; color: var(--c-red-light); flex: none; }
.price-card .btn{ width: 100%; justify-content: center; margin-top: 22px; }

.tournaments-past{ margin-top: 40px; }
.tournaments-past h4{
  font-family: var(--font-heading);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.past-list{ display: flex; flex-direction: column; }
.past-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  border-top: 1px solid var(--border-softer);
  transition: padding-left .35s var(--ease), border-color .3s ease;
}
.past-item:hover{ padding-left: 14px; border-color: rgba(238,238,238,.18); }
.past-item .past-title{ display: flex; align-items: center; gap: 16px; }
.past-thumb{
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}
.past-item .past-title .past-text{ display:flex; flex-direction:column; gap:4px; }
.past-item .past-title strong{ color: var(--c-white); font-size: 1.05rem; font-weight: 700; }
.past-item .past-title span{ color: var(--text-muted); font-size: .82rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }

/* Tournaments section: light background band (Featured Tournament card stays dark, untouched) */
#tournaments{ background: #dce1e5; }
#tournaments .section-head .eyebrow{ color: var(--c-red); }
#tournaments .section-head .eyebrow::before{ background: var(--c-red); }
#tournaments .section-head h2{ color: #12212c; }
#tournaments .section-head h2 .accent{ color: var(--c-red); }
#tournaments .section-head p{ color: #45565f; }
#tournaments .tournaments-past h4{ color: #5c6d76; }
#tournaments .past-item{ border-top-color: rgba(18,33,44,.15); }
#tournaments .past-item:hover{ border-color: rgba(18,33,44,.32); }
#tournaments .past-item .past-title strong{ color: #12212c; }
#tournaments .past-item .past-title span{ color: #5c6d76; }
#tournaments .past-item .btn-ghost{ color: #12212c; border-color: rgba(18,33,44,.3); }
#tournaments .past-item .btn-ghost:hover{ border-color: #12212c; }

/* Contact section: light background band (Get In Touch card stays dark, untouched) */
#contact{ background: #dce1e5; }

/* Why Join OSA section: light background band (feature cards stay dark blue, untouched) */
#why-join{ background: #dce1e5; }
#why-join .section-head .eyebrow{ color: var(--c-red); }
#why-join .section-head .eyebrow::before{ background: var(--c-red); }
#why-join .section-head h2{ color: #12212c; }
#why-join .section-head h2 .accent{ color: var(--c-red); }
#why-join .section-head p{ color: #45565f; }

/* Join The Movement section (about/index.html): light background band (card stays dark, untouched) */
#join-movement{ background: #dce1e5; }

/* OSA Foundational Pillars section (edge/index.html): light background band (pillar cards stay dark blue, untouched) */
#pillars{ background: #dce1e5; }
#pillars .section-head .eyebrow{ color: var(--c-red); }
#pillars .section-head .eyebrow::before{ background: var(--c-red); }
#pillars .section-head h2{ color: #12212c; }
#pillars .section-head h2 .accent{ color: var(--c-red); }
#pillars .section-head p{ color: #45565f; }

/* Upcoming Tournaments section (tournaments/index.html): light background band (tournament-feature card stays dark blue, untouched) */
#upcoming{ background: #dce1e5; }
#upcoming .section-head .eyebrow{ color: var(--c-red); }
#upcoming .section-head .eyebrow::before{ background: var(--c-red); }
#upcoming .section-head h2{ color: #12212c; }
#upcoming .section-head h2 .accent{ color: var(--c-red); }
#upcoming .section-head p{ color: #45565f; }

@media (max-width: 900px){
  .tournament-feature{
    grid-template-columns: 1fr;
    padding: 32px;
    background:
      radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.16), transparent 60%),
      linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  }
}

/* Registration/deposit sections (invitational, summer, mens, u19, youth):
   light background band, .tournament-feature card stays dark blue, untouched. */
#pricing, #deposit, #membership, #registration{ background: #dce1e5; }

/* ==========================================================================
   Competitions
   ========================================================================== */
.comp-featured-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 26px;
}
.comp-feature-card{
  position: relative;
  padding: 42px;
  min-height: 340px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  text-decoration: none;
}
.comp-feature-card::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--card-grad);
  background-size: cover;
  background-position: center;
}
.comp-feature-card.summer{
  --card-grad:
    linear-gradient(0deg, rgba(6,13,20,.96) 0%, rgba(6,13,20,.55) 45%, rgba(6,13,20,.2) 100%),
    linear-gradient(100deg, rgba(6,13,20,.92) 0%, rgba(6,13,20,.78) 45%, rgba(6,13,20,.62) 100%),
    url('../images/hero-summer-season.jpg');
}
.comp-feature-card.u19{
  --card-grad:
    linear-gradient(0deg, rgba(10,3,4,.96) 0%, rgba(10,3,4,.55) 45%, rgba(10,3,4,.2) 100%),
    linear-gradient(100deg, rgba(10,3,4,.92) 0%, rgba(10,3,4,.75) 45%, rgba(10,3,4,.6) 100%),
    url('../images/hero-edge-u19.jpg');
}
.comp-feature-card h3{ color: var(--c-white); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 14px; }
.comp-feature-card p{ margin-top: 14px; color: var(--text-secondary); font-size: .95rem; max-width: 420px; }
.comp-feature-card .link-arrow{ margin-top: 24px; }
.comp-feature-card:hover .link-arrow svg{ transform: translateX(4px); }

.comp-tabs{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  overflow: hidden;
}
.tab-buttons{
  display: flex;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(238,238,238,.03);
  overflow-x: auto;
}
.tab-buttons button{
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tab-buttons button:hover{ color: var(--c-grey); border-color: var(--border-soft); }
.tab-buttons button.is-active{
  color: var(--c-white);
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: 0 10px 24px -10px rgba(210,38,48,.7);
}
.tab-buttons button.is-active:hover{ color: var(--c-white); border-color: var(--c-red); }
.tab-panels{ position: relative; }
.tab-panel{
  display: none;
  padding: 40px;
  gap: 30px;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
}
.tab-panel-thumb{
  width: 110px; height: 110px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  flex: none;
}
.tab-panel.is-active{ display: grid; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }
.tab-panel h4{ color: var(--c-white); font-size: 1.3rem; }
.tab-panel p{ margin-top: 12px; color: var(--text-secondary); max-width: 560px; }
.tab-panel .btn{ justify-self: end; }

@media (max-width: 900px){
  .comp-featured-grid{ grid-template-columns: 1fr; }
  .comp-feature-card.summer::before{ background: linear-gradient(180deg, rgba(6,13,20,.82) 0%, rgba(6,13,20,.985) 60%), url('../images/hero-summer-season.jpg'); background-size: cover; background-position: center; }
  .comp-feature-card.u19::before{ background: linear-gradient(180deg, rgba(10,3,4,.82) 0%, rgba(10,3,4,.985) 60%), url('../images/hero-edge-u19.jpg'); background-size: cover; background-position: center; }
  .tab-panel{ grid-template-columns: 1fr; }
  .tab-panel-thumb{ width: 100%; height: 160px; }
  .tab-panel .btn{ justify-self: start; }
}

/* ==========================================================================
   OSA Edge
   ========================================================================== */
.edge-section{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(0,59,92,.5), transparent 60%),
    linear-gradient(100deg, rgba(6,11,16,.97) 0%, rgba(6,11,16,.9) 38%, rgba(6,11,16,.55) 68%, rgba(6,11,16,.88) 100%),
    url('../images/hero-osa-edge.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, 70% 30%;
}
.edge-inner{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.edge-copy h2{ font-size: clamp(2rem, 4vw, 3.1rem); color: var(--c-white); margin-top: 16px; }
.edge-copy h1{ font-size: clamp(2.2rem, 4.2vw, 3.4rem); color: var(--c-white); margin-top: 16px; }
.edge-copy p{ margin-top: 20px; color: var(--text-secondary); font-size: 1.05rem; max-width: 480px; }
.edge-copy .btn{ margin-top: 30px; }

.edge-hero{ padding: calc(var(--header-h) + 56px) 0 90px; }

.edge-pillars{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.edge-pillar{
  padding: 28px 24px;
  border-radius: var(--radius-md);
}
.edge-pillar .num{
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 2rem;
  color: var(--c-red-light);
}
.edge-pillar h5{ margin-top: 10px; color: var(--c-white); font-size: 1rem; font-family: var(--font-heading); font-weight: 700; }
.edge-pillar p{ margin-top: 8px; color: var(--text-muted); font-size: .86rem; line-height: 1.5; }

@media (max-width: 980px){
  .edge-inner{ grid-template-columns: 1fr; }
  .edge-section{
    background:
      radial-gradient(900px 500px at 15% 0%, rgba(0,59,92,.4), transparent 60%),
      linear-gradient(180deg, rgba(6,11,16,.97) 0%, rgba(6,11,16,.95) 100%),
      url('../images/hero-osa-edge.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, 70% 30%;
  }
}
@media (max-width: 560px){
  .edge-pillars{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Instagram
   ========================================================================== */
.insta-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 44px;
}
.insta-handle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-white);
}
.insta-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.insta-tile{
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
}
.insta-tile::before{
  content: '';
  position: absolute; inset: 0;
  background: var(--tile-grad);
  background-size: cover;
  background-position: center;
  transition: transform .6s var(--ease);
}
.insta-tile:hover::before{ transform: scale(1.08); }
.insta-tile::after{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--tile-after, repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px));
}
.insta-tile.has-photo{ --tile-after: linear-gradient(0deg, rgba(4,7,10,.8) 0%, rgba(4,7,10,.05) 50%); }
.insta-tile svg{
  position: absolute;
  bottom: 12px; right: 12px;
  width: 18px; height: 18px;
  color: rgba(255,255,255,.85);
  z-index: 2;
  transition: transform .4s var(--ease);
}
.insta-tile:hover svg{ transform: scale(1.2); }
.insta-tile span{
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.insta-tile:nth-child(3){ --tile-grad: linear-gradient(140deg, #0d6690, #003b5c); }
.insta-tile:nth-child(5){ --tile-grad: linear-gradient(140deg, #7a1015, #1a0507); }

.insta-footer{
  margin-top: 34px;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}

@media (max-width: 980px){ .insta-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .insta-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.about-copy p{ color: var(--text-secondary); font-size: 1.02rem; margin-top: 18px; }
.about-copy p:first-of-type{ margin-top: 22px; }
.about-mission{
  margin-top: 28px;
  padding: 26px 28px;
  border-left: 3px solid var(--c-red);
  background: rgba(210,38,48,.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.about-mission span{ font-family: var(--font-heading); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red-light); font-weight: 800; }
.about-mission p{ margin-top: 10px; color: var(--c-white); font-family: var(--font-accent); font-style: italic; font-size: 1.15rem; line-height: 1.5; }

.pillars-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pillar-card{
  position: relative;
  overflow: hidden;
  padding: 26px;
  background:
    radial-gradient(320px 220px at 100% 0%, rgba(210,38,48,.25), transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
}
.pillar-card .idx{ font-family: var(--font-heading); font-weight: 800; color: var(--text-muted); font-size: .8rem; }
.pillar-card h5{ margin-top: 14px; color: var(--c-white); font-family: var(--font-heading); font-size: 1.05rem; }
.pillar-card p{ margin-top: 8px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }

.about-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.about-stats div{ text-align: center; padding: 20px 10px; border-radius: var(--radius-sm); background: rgba(238,238,238,.04); }
.about-stats strong{ display:block; font-family: var(--font-heading); font-size: 1.5rem; color: var(--c-white); }
.about-stats span{ display:block; margin-top: 4px; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.about-map{
  margin-top: 30px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-white);
  padding: 10px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.about-map img{ border-radius: calc(var(--radius-md) - 6px); display: block; }

@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px){
  .pillars-grid, .about-stats{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section{
  background:
    radial-gradient(800px 500px at 100% 100%, rgba(0,59,92,.35), transparent 60%),
    linear-gradient(180deg, #060b10, #04070a);
}
.contact-panel{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.25), transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
}
.contact-panel h2{ color: var(--c-white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.contact-panel > div:first-child p{ margin-top: 18px; color: var(--text-secondary); max-width: 460px; }
.contact-methods{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-method{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-softer);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s ease;
}
.contact-method::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--method-glow);
  opacity: 0;
  transition: opacity .4s ease;
}
.contact-method:hover{
  transform: translateY(-5px);
  border-color: rgba(238,238,238,.22);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.7);
}
.contact-method:hover::before{ opacity: 1; }
.contact-method .icn{
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--method-bg);
  color: var(--method-color);
  transition: transform .4s var(--ease);
}
.contact-method:hover .icn{ transform: scale(1.1) rotate(-6deg); }
.contact-method .icn svg{ width: 19px; height: 19px; }
.contact-method strong{ display: block; color: var(--c-white); font-size: .95rem; }
.contact-method span{ display: block; color: var(--text-muted); font-size: .82rem; margin-top: 2px; }

.contact-method--email{
  --method-bg: rgba(210,38,48,.16);
  --method-color: var(--c-red-light);
  --method-glow: radial-gradient(140px 90px at 0% 0%, rgba(210,38,48,.16), transparent 70%);
}
.contact-method--instagram{
  --method-bg: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
  --method-color: #fff;
  --method-glow: radial-gradient(140px 90px at 0% 0%, rgba(221,42,123,.2), transparent 70%);
}
.contact-method--facebook{
  --method-bg: rgba(13,102,144,.24);
  --method-color: #6fbadd;
  --method-glow: radial-gradient(140px 90px at 0% 0%, rgba(13,102,144,.2), transparent 70%);
}
.contact-method--x{
  --method-bg: rgba(238,238,238,.14);
  --method-color: var(--c-white);
  --method-glow: radial-gradient(140px 90px at 0% 0%, rgba(238,238,238,.1), transparent 70%);
}
.contact-method--blue{
  --method-bg: rgba(13,102,144,.24);
  --method-color: #6fbadd;
  --method-glow: radial-gradient(140px 90px at 0% 0%, rgba(13,102,144,.2), transparent 70%);
}

@media (max-width: 900px){
  .contact-panel{ grid-template-columns: 1fr; padding: 40px 28px; }
}
@media (max-width: 560px){
  .contact-methods{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding: 80px 0 34px;
  background: var(--bg-1);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 60px;
}
.footer-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-brand img{ width: 140px; height: 34px; object-fit: contain; object-position: left center; }
.footer-brand p{ color: var(--text-muted); font-size: .88rem; max-width: 280px; line-height: 1.6; }
.footer-social{ display: flex; gap: 12px; margin-top: 6px; }
.footer-social a{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, transform .3s var(--ease), border-color .3s ease;
}
.footer-social a svg{ width: 16px; height: 16px; }
.footer-social a:hover{ background: var(--c-red); border-color: var(--c-red); transform: translateY(-3px); }

.footer-col h6{
  font-family: var(--font-heading);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-grey-dim);
  margin-bottom: 20px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 13px; }
.footer-col a{ color: var(--text-muted); font-size: .9rem; transition: color .3s ease, padding-left .3s ease; }
.footer-col a:hover{ color: var(--c-white); padding-left: 4px; }

.footer-bottom{
  padding-top: 30px;
  border-top: 1px solid var(--border-softer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-muted);
  font-size: .8rem;
}
.footer-legal{ display: flex; align-items: center; gap: 10px; }
.footer-legal a{ color: var(--text-muted); transition: color .3s ease; }
.footer-legal a:hover{ color: var(--c-white); }

@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   News archive page
   ========================================================================== */
.archive-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.archive-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.archive-card::before{ content:''; position:absolute; inset:0; z-index:-2; background: var(--news-grad); background-size: cover; background-position: center; }
.archive-card::after{ content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.1) 65%); }
.archive-card h3{ color: var(--c-white); font-size: 1.15rem; }
.archive-card .date{ font-family: var(--font-heading); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-grey-dim); margin-top: 12px; display: block; }

@media (max-width: 980px){ .archive-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .archive-grid{ grid-template-columns: 1fr; } }

/* ---------- Grid overflow guard ----------
   1fr tracks default to min-width:auto, so text-bearing grid items can
   force a track wider than its container. Force them shrinkable. */
.hero-inner > *, .news-grid > *, .comp-featured-grid > *, .comp-tabs .tab-panel > *,
.edge-inner > *, .edge-pillars > *, .about-grid > *, .pillars-grid > *, .about-stats > *,
.contact-panel > *, .footer-top > *, .archive-grid > *, .tournament-feature > *,
.tournament-meta > *, .insta-grid > *, .stat-row > *, .feature-grid > *,
.editorial-block > *, .partner-grid > *, .contact-methods > * {
  min-width: 0;
}

/* ==========================================================================
   Dynamic section dividers
   ========================================================================== */
@keyframes dividerPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(210,38,48,.5); transform: translate(-50%,-50%) scale(1); }
  50%{ box-shadow: 0 0 0 8px rgba(210,38,48,0); transform: translate(-50%,-50%) scale(1.25); }
}
.section-divider{ position: relative; height: 1px; }
.about-section{ position: relative; }
.edge-section, .site-footer{ position: relative; }

.section-divider::before,
.about-section + .about-section::before,
.edge-section::before,
.site-footer::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-soft) 20%, var(--border-soft) 80%, transparent 100%);
  pointer-events: none;
}

.section-divider::after,
.about-section + .about-section::after,
.edge-section::after,
.site-footer::after{
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-red);
  transform: translate(-50%, -50%);
  animation: dividerPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Back to top ---------- */
.to-top{
  position: fixed;
  right: 26px; bottom: 26px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--c-red);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s var(--ease), visibility .4s, background .3s ease, box-shadow .3s ease;
  box-shadow: 0 16px 34px -14px rgba(210,38,48,.7);
  cursor: pointer;
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{
  background: var(--c-red-light);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -12px rgba(210,38,48,.9);
}
.to-top:active{ transform: translateY(-2px); }

.to-top svg{
  width: 18px; height: 18px;
  color: var(--c-white);
  animation: toTopBob 2.2s ease-in-out infinite;
}
.to-top:hover svg{ animation-play-state: paused; }
.to-top.is-launching svg{ animation: toTopLaunch .55s var(--ease); }

@keyframes toTopBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes toTopLaunch{
  0%{ transform: translateY(0); opacity: 1; }
  45%{ transform: translateY(-16px); opacity: 0; }
  50%{ transform: translateY(12px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .to-top svg{ animation: none; }
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-red), var(--c-red-light));
  z-index: 900;
  transition: width .1s linear;
}

/* ==========================================================================
   Page hero (subpages)
   ========================================================================== */
.page-hero{
  position: relative;
  /* Sized to match .edge-hero's content-driven height (~640-700px on typical desktop
     viewports) with a solid floor so short browser windows don't compress it, and
     capped to a 16:9 crop of the viewport width so a 1920x1080 hero photo never has
     to crop horizontally — only ever vertically, per background-position. */
  min-height: clamp(560px, min(74vh, 56.25vw), 820px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 56px) 0 90px;
  background:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-osa-news.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 32%;
  overflow: hidden;
}
.page-hero-lines{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(238,238,238,.05) 0px, rgba(238,238,238,.05) 1px, transparent 1px, transparent 96px);
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.7) 30%, rgba(0,0,0,.7) 70%, transparent);
  pointer-events: none;
}
.page-hero .container{ position: relative; z-index: 2; }
.page-hero h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--c-white); margin-top: 16px; max-width: 780px; }
.page-hero .lede{ margin-top: 20px; max-width: 620px; color: var(--text-secondary); font-size: 1.1rem; }
.page-hero-quote{
  margin-top: 34px;
  padding: 24px 28px;
  max-width: 640px;
  border-left: 3px solid var(--c-red);
  background: rgba(210,38,48,.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-white);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
}
@media (max-width: 780px){
  .page-hero{
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%),
      url('../images/hero-osa-news.jpg');
    background-size: cover, cover;
    background-position: center, center 30%;
  }
}

.page-hero--invitational{
  background:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.78) 30%, rgba(28,30,33,.55) 55%, rgba(28,30,33,.4) 76%, rgba(28,30,33,.5) 100%),
    linear-gradient(0deg, rgba(4,7,10,.92) 0%, rgba(20,22,24,.15) 24%, rgba(20,22,24,.1) 55%, rgba(4,7,10,.6) 88%, rgba(4,7,10,.95) 100%),
    url('../images/hero-female-invitational.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, left center;
}
@media (max-width: 780px){
  .page-hero--invitational{
    background:
      linear-gradient(180deg, rgba(4,7,10,.85) 0%, rgba(4,7,10,.8) 45%, rgba(4,7,10,.96) 100%),
      url('../images/female-invitational-cover.jpg');
    background-size: cover, cover;
    background-position: center, left center;
  }
}

/* ---- Per-page hero photo variants (each subpage gets its own image) ---- */
.page-hero--about{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-about-osa.jpg');
}
.page-hero--mens{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-mens.jpg');
}
.page-hero--youth{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-youth.jpg');
}
.page-hero--u19{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-edge-u19.jpg');
}
.page-hero--summer{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-summer-season.jpg');
}
.page-hero--tournaments{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-tournaments.jpg');
}
.page-hero--competitions{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-competitions.jpg');
}
.page-hero--terms{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-terms-and-conditions.jpg');
}
.page-hero--privacy{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-privacy-policy.jpg');
}
.page-hero--cookies{ background-image:
    linear-gradient(96deg, rgba(28,30,33,.9) 0%, rgba(28,30,33,.74) 30%, rgba(28,30,33,.42) 55%, rgba(28,30,33,.16) 76%, rgba(28,30,33,.34) 100%),
    linear-gradient(0deg, rgba(4,7,10,.9) 0%, rgba(20,22,24,.1) 24%, rgba(20,22,24,.08) 55%, rgba(4,7,10,.55) 88%, rgba(4,7,10,.94) 100%),
    url('../images/hero-cookie-notice.jpg');
}
@media (max-width: 780px){
  .page-hero--about{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-about-osa.jpg'); }
  .page-hero--mens{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-mens.jpg'); }
  .page-hero--youth{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-youth.jpg'); }
  .page-hero--u19{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-edge-u19.jpg'); }
  .page-hero--summer{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-summer-season.jpg'); }
  .page-hero--tournaments{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-tournaments.jpg'); }
  .page-hero--competitions{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-competitions.jpg'); }
  .page-hero--terms{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-terms-and-conditions.jpg'); }
  .page-hero--privacy{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-privacy-policy.jpg'); }
  .page-hero--cookies{ background-image: linear-gradient(180deg, rgba(4,7,10,.9) 0%, rgba(4,7,10,.82) 45%, rgba(4,7,10,.96) 100%), url('../images/hero-cookie-notice.jpg'); }
}

/* ---- Photo-free hero variant for the news article template (no dedicated photo yet) ---- */
.page-hero--article{ background-image: radial-gradient(700px 460px at 100% 0%, rgba(210,38,48,.24), transparent 60%), linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%); }

/* ==========================================================================
   Sub-navigation (in-page scrollspy)
   ========================================================================== */
.subnav-wrap{
  position: sticky;
  top: var(--header-h);
  z-index: 300;
  background: rgba(6,10,15,.88);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-softer);
}
.subnav{
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar{ display: none; }
.subnav a{
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .3s ease, background-color .3s ease;
}
.subnav a:hover{ color: var(--c-grey); }
.subnav a.is-active{ color: var(--c-white); background: rgba(210,38,48,.18); }

/* ==========================================================================
   Section heading utility (used across About page)
   ========================================================================== */
.about-section{ scroll-margin-top: calc(var(--header-h) + 64px); }

/* ==========================================================================
   Count-up stats
   ========================================================================== */
.stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.stat-row .stat{
  padding: 26px 18px;
  border-radius: var(--radius-md);
  background: rgba(238,238,238,.04);
  border: 1px solid var(--border-softer);
  text-align: center;
}
.stat-row strong{
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  color: var(--c-white);
  overflow-wrap: break-word;
  word-break: break-word;
}
.stat-row span{
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}
@media (max-width: 700px){ .stat-row{ grid-template-columns: 1fr 1fr; } }

.regions-map-card{
  margin-top: 40px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid var(--border-softer);
}
.regions-map-card img{ width: 100%; height: auto; display: block; border-radius: calc(var(--radius-lg) - 10px); }
.regions-note{ margin-top: 32px; max-width: 720px; color: var(--text-secondary); font-size: 1.02rem; }
.regions-note strong{ color: var(--c-white); }

/* ==========================================================================
   Feature cards (Why Join OSA)
   ========================================================================== */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-card{
  position: relative;
  overflow: hidden;
  padding: 30px;
  display: flex;
  gap: 18px;
  background:
    radial-gradient(320px 220px at 100% 0%, rgba(210,38,48,.25), transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
}
.feature-card .num{
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(210,38,48,.14);
  color: var(--c-red-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
}
.feature-card h4{ color: var(--c-white); font-size: 1.05rem; font-family: var(--font-heading); }
.feature-card p{ margin-top: 8px; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 700px){ .feature-grid{ grid-template-columns: 1fr; } }

/* Competitions page: stacked full-width row per competition */
.comp-row{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 48px 56px;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s ease;
}
.comp-row::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--row-grad, radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.2), transparent 60%));
  background-size: cover, cover, cover;
  background-position: center, center, center 30%;
  transform: scale(1);
  transition: transform .7s var(--ease);
}
.comp-row:hover{
  transform: translateY(-6px);
  border-color: rgba(238,238,238,.24);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.85);
}
.comp-row:hover::before{ transform: scale(1.06); }
.comp-row + .comp-row{ margin-top: 24px; }
.comp-row h3{ color: var(--c-white); font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 14px; }
.comp-row p{ margin-top: 16px; color: var(--text-secondary); max-width: 640px; line-height: 1.7; }
.comp-row .btn{ margin-top: 26px; }
@media (max-width: 700px){ .comp-row{ padding: 32px; } }

/* Competitions page rows: each linked division gets its own subpage hero photo */
.comp-row--summer{ --row-grad:
    linear-gradient(100deg, rgba(6,13,20,.95) 0%, rgba(6,13,20,.82) 42%, rgba(6,13,20,.55) 75%, rgba(6,13,20,.74) 100%),
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.16), transparent 60%),
    url('../images/hero-summer-season.jpg');
}
.comp-row--mens{ --row-grad:
    linear-gradient(100deg, rgba(6,10,15,.95) 0%, rgba(6,10,15,.82) 42%, rgba(6,10,15,.55) 75%, rgba(6,10,15,.74) 100%),
    radial-gradient(650px 400px at 100% 0%, rgba(13,102,144,.22), transparent 60%),
    url('../images/hero-mens.jpg');
}
.comp-row--u19{ --row-grad:
    linear-gradient(100deg, rgba(10,3,4,.95) 0%, rgba(10,3,4,.82) 42%, rgba(10,3,4,.55) 75%, rgba(10,3,4,.74) 100%),
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.22), transparent 60%),
    url('../images/hero-edge-u19.jpg');
}
.comp-row--youth{ --row-grad:
    linear-gradient(100deg, rgba(6,10,15,.95) 0%, rgba(6,10,15,.82) 42%, rgba(6,10,15,.55) 75%, rgba(6,10,15,.74) 100%),
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.16), transparent 60%),
    url('../images/hero-youth.jpg');
}
/* Tournaments isn't a competition division — light card so it stands apart from the rest */
.comp-row--tournaments{
  --row-grad:
    linear-gradient(100deg, rgba(220,225,229,.97) 0%, rgba(220,225,229,.9) 42%, rgba(220,225,229,.6) 75%, rgba(220,225,229,.82) 100%),
    url('../images/hero-tournaments.jpg');
  border-color: rgba(18,33,44,.12);
}
.comp-row--tournaments::before{ background-size: cover, cover; background-position: center, center 30%; }
.comp-row--tournaments:hover{ border-color: rgba(18,33,44,.28); }
.comp-row--tournaments .tag{ background: var(--c-red); color: var(--c-white); }
.comp-row--tournaments h3{ color: #12212c; }
.comp-row--tournaments p{ color: #45565f; }
.comp-row--women{ --row-grad:
    linear-gradient(100deg, rgba(6,10,15,.95) 0%, rgba(6,10,15,.82) 42%, rgba(6,10,15,.55) 75%, rgba(6,10,15,.74) 100%),
    radial-gradient(650px 400px at 100% 0%, rgba(210,38,48,.18), transparent 60%),
    url('../images/hero-women.jpg');
}
@media (max-width: 700px){
  .comp-row::before{ background-size: cover, cover; background-position: center, center 30%; }
  .comp-row--summer{ --row-grad: linear-gradient(180deg, rgba(6,13,20,.92) 0%, rgba(6,13,20,.97) 100%), url('../images/hero-summer-season.jpg'); }
  .comp-row--mens{ --row-grad: linear-gradient(180deg, rgba(6,10,15,.92) 0%, rgba(6,10,15,.97) 100%), url('../images/hero-mens.jpg'); }
  .comp-row--u19{ --row-grad: linear-gradient(180deg, rgba(10,3,4,.92) 0%, rgba(10,3,4,.97) 100%), url('../images/hero-edge-u19.jpg'); }
  .comp-row--youth{ --row-grad: linear-gradient(180deg, rgba(6,10,15,.92) 0%, rgba(6,10,15,.97) 100%), url('../images/hero-youth.jpg'); }
  .comp-row--tournaments{ --row-grad: linear-gradient(180deg, rgba(220,225,229,.94) 0%, rgba(220,225,229,.97) 100%), url('../images/hero-tournaments.jpg'); }
  .comp-row--women{ --row-grad: linear-gradient(180deg, rgba(6,10,15,.92) 0%, rgba(6,10,15,.97) 100%), url('../images/hero-women.jpg'); }
}

/* ==========================================================================
   Editorial alternating blocks (Why Alliance)
   ========================================================================== */
.editorial{ display: flex; flex-direction: column; gap: 28px; }
.editorial-block{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 30px;
  padding: 28px 0;
  border-top: 1px solid var(--border-softer);
}
.editorial-block:first-child{ border-top: none; padding-top: 0; }
.editorial-block .label{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-red-light);
}
.editorial-block p{ color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.editorial-block p + p{ margin-top: 14px; }
@media (max-width: 700px){
  .editorial-block{ grid-template-columns: 1fr; gap: 10px; }
}

.differentiator-panel{ grid-template-columns: 1fr !important; padding: 40px !important; }
.differentiator-panel ul{ display: flex; flex-direction: column; gap: 14px; }
.differentiator-panel li{
  display: flex;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}
.differentiator-panel li::before{
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-red-light);
}

/* ==========================================================================
   Accordion (Team bios)
   ========================================================================== */
.accordion{ display: flex; flex-direction: column; gap: 14px; }
.accordion-item{ overflow: hidden; }
.accordion-header{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  text-align: left;
}
.accordion-avatar{
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-white);
  background: linear-gradient(150deg, var(--c-blue-light), var(--c-blue));
}
.accordion-title{ flex: 1; min-width: 0; }
.accordion-title strong{ display: block; color: var(--c-white); font-size: 1.05rem; font-family: var(--font-heading); }
.accordion-title span{ display: block; margin-top: 3px; color: var(--c-red-light); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.accordion-chevron{
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease), border-color .3s ease;
}
.accordion-chevron svg{ width: 14px; height: 14px; }
.accordion-item.is-open .accordion-chevron{ transform: rotate(180deg); border-color: rgba(238,238,238,.3); }
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.accordion-panel-inner{ padding: 0 24px 24px 98px; }
.accordion-panel-inner p{ color: var(--text-muted); font-size: .92rem; line-height: 1.65; }
.accordion-panel-inner a{ color: var(--c-red-light); font-size: .82rem; font-weight: 600; display: inline-block; margin-top: 10px; }
@media (max-width: 560px){
  .accordion-panel-inner{ padding: 0 20px 20px 20px; }
}

/* ==========================================================================
   Pill links (quick-nav lists)
   ========================================================================== */
.pill-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.pill-links a{
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-grey);
  background: rgba(238,238,238,.06);
  border: 1px solid var(--border-soft);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.pill-links a:hover{
  background: rgba(210,38,48,.14);
  border-color: var(--c-red);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* ==========================================================================
   Partner cards
   ========================================================================== */
.partner-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.partner-card{ padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.partner-card h4{ color: var(--c-white); font-family: var(--font-heading); font-size: 1.1rem; }
.partner-card p{ color: var(--text-muted); font-size: .88rem; line-height: 1.6; flex: 1; }
.partner-links{ display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.partner-social{ display: flex; gap: 8px; }
.partner-social a{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, border-color .3s ease;
}
.partner-social a svg{ width: 13px; height: 13px; }
.partner-social a:hover{ background: var(--c-red); border-color: var(--c-red); }
@media (max-width: 900px){ .partner-grid{ grid-template-columns: 1fr 1fr; } }

.partner-logos{
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.partner-logos img{
  width: 130px;
  height: 52px;
  object-fit: contain;
  object-position: center;
  opacity: .75;
  transition: opacity .3s ease, transform .3s ease;
}
.partner-logos img:hover{ opacity: 1; transform: scale(1.06); }
@media (max-width: 700px){
  .partner-logos{ gap: 36px; margin-top: 36px; }
  .partner-logos img{ width: 100px; height: 40px; }
}
@media (max-width: 560px){ .partner-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Age matrix table
   ========================================================================== */
.age-matrix-wrap{ padding: 10px; overflow-x: auto; }
.age-matrix{ width: 100%; border-collapse: collapse; min-width: 420px; }
.age-matrix th{
  text-align: left;
  padding: 16px 22px;
  font-family: var(--font-heading);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--c-grey);
  background: rgba(210,38,48,.12);
}
.age-matrix th:first-child{ border-radius: var(--radius-sm) 0 0 0; }
.age-matrix th:last-child{ border-radius: 0 var(--radius-sm) 0 0; text-align: right; }
.age-matrix td{
  padding: 14px 22px;
  border-top: 1px solid var(--border-softer);
  color: var(--text-secondary);
  font-size: .92rem;
  transition: background-color .3s ease;
}
.age-matrix td:last-child{
  text-align: right;
  color: var(--c-red-light);
  font-weight: 800;
  font-family: var(--font-heading);
}
.age-matrix tbody tr:hover td{ background: rgba(238,238,238,.03); }

/* ==========================================================================
   Live news: loading / error states + load more
   ========================================================================== */
.news-loading{
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Bouncing-ball loader — same red glow language as the section-divider dot */
.ball-loader{
  display: inline-flex;
  gap: 16px;
  align-items: flex-end;
  height: 30px;
}
.ball-loader span{
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 10px rgba(210,38,48,.6);
  animation: ballBounce 1.1s ease-in-out infinite;
}
.ball-loader span::after{
  content: '';
  position: absolute;
  left: 50%; bottom: -13px;
  width: 10px; height: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  transform: translateX(-50%);
  animation: ballShadow 1.1s ease-in-out infinite;
}
.ball-loader span:nth-child(2){ animation-delay: .12s; }
.ball-loader span:nth-child(2)::after{ animation-delay: .12s; }
.ball-loader span:nth-child(3){ animation-delay: .24s; }
.ball-loader span:nth-child(3)::after{ animation-delay: .24s; }
@keyframes ballBounce{
  0%, 100%{ transform: translateY(0); }
  40%{ transform: translateY(-16px); }
}
@keyframes ballShadow{
  0%, 100%{ transform: translateX(-50%) scale(1); opacity: .4; }
  40%{ transform: translateX(-50%) scale(.55); opacity: .15; }
}
@media (prefers-reduced-motion: reduce){
  .ball-loader span, .ball-loader span::after{ animation: none; }
}
.news-error{
  grid-column: 1 / -1;
  padding: 50px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.news-error p{ color: var(--text-muted); font-size: .95rem; }

.archive-load-more{
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
.archive-load-more button:disabled{ opacity: .5; pointer-events: none; }

/* ==========================================================================
   Single news article
   ========================================================================== */
.post-eyebrow{ display: block; }
.post-meta{
  display: block;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-grey-dim);
}
.post-container{
  max-width: 760px;
  margin: 0 auto;
}
/* Wider reading column than the base .post-container (760px) — used on news
   articles and the legal pages, so body copy isn't cramped next to the wide hero above it. */
.post-container--article{ max-width: 980px; }
.post-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  margin-bottom: 40px;
}
.post-content{ color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; }
.post-content > *:first-child{ margin-top: 0; }
.post-content p{ margin-top: 20px; }
.post-content h2, .post-content h3, .post-content h4{
  color: var(--c-white);
  margin-top: 40px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.post-content h2{ font-size: 1.6rem; }
.post-content h3{ font-size: 1.3rem; }
.post-content h4{ font-size: 1.1rem; }
.post-content a{ color: var(--c-red-light); text-decoration: underline; text-underline-offset: 3px; }
.post-content ul, .post-content ol{ margin-top: 18px; padding-left: 22px; }
.post-content li{ margin-top: 8px; }
.post-content img{ max-width: 100%; height: auto; border-radius: var(--radius-md); margin-top: 24px; display: block; }
.post-content figure{ margin-top: 24px; }
.post-content figcaption{ margin-top: 8px; font-size: .82rem; color: var(--text-muted); text-align: center; }
.post-content blockquote{
  margin-top: 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--c-red);
  background: rgba(210,38,48,.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-white);
  font-style: italic;
}
.post-back-row{ margin-top: 48px; }

/* ==========================================================================
   OSA Edge: brand / scouting network strip
   ========================================================================== */
.scout-marquee{
  padding: 40px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.scout-track{
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: scoutScroll 32s linear infinite;
}
.scout-marquee:hover .scout-track{ animation-play-state: paused; }
.scout-track img{
  height: 104px;
  width: auto;
  flex: none;
  opacity: .85;
  transition: opacity .3s ease, transform .3s ease;
}
.scout-track img:hover{ opacity: 1; transform: scale(1.08); }
@keyframes scoutScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .scout-track{ animation: none; }
}
@media (max-width: 700px){
  .scout-marquee{ padding: 30px 0; }
  .scout-track{ gap: 40px; }
  .scout-track img{ height: 80px; }
}

/* ==========================================================================
   Newsletter popup
   ========================================================================== */
.newsletter-popup{
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.newsletter-popup.is-visible{ opacity: 1; visibility: visible; }
.newsletter-popup-backdrop{
  position: absolute; inset: 0;
  background: rgba(4,7,10,.78);
  backdrop-filter: blur(6px);
}
.newsletter-popup-card{
  position: relative;
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  background:
    radial-gradient(500px 320px at 100% 0%, rgba(210,38,48,.25), transparent 60%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85);
  transform: translateY(16px) scale(.96);
  transition: transform .45s var(--ease);
}
.newsletter-popup.is-visible .newsletter-popup-card{ transform: translateY(0) scale(1); }
.newsletter-popup-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color .3s ease, background-color .3s ease;
}
.newsletter-popup-close:hover{ color: var(--c-white); background: rgba(238,238,238,.08); }
.newsletter-popup-close svg{ width: 16px; height: 16px; }
.newsletter-popup-body h3{ color: var(--c-white); font-size: 1.5rem; margin-top: 16px; }
.newsletter-popup-body p{ margin-top: 10px; color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.newsletter-popup-form{ display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.newsletter-popup-form input{
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: rgba(238,238,238,.04);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: .92rem;
  transition: border-color .3s ease;
}
.newsletter-popup-form input::placeholder{ color: var(--text-muted); }
.newsletter-popup-form input:focus{ outline: none; border-color: var(--c-red-light); }
.newsletter-popup-form .btn{ justify-content: center; }
.newsletter-popup-form .btn:disabled{ opacity: .6; pointer-events: none; }
.newsletter-popup-status{ margin-top: 14px; font-size: .85rem; min-height: 1em; }
.newsletter-popup-status.is-success{ color: #6fd88a; }
.newsletter-popup-status.is-error{ color: var(--c-red-light); }
@media (max-width: 480px){
  .newsletter-popup-card{ padding: 34px 26px; }
}
@media (prefers-reduced-motion: reduce){
  .newsletter-popup, .newsletter-popup-card{ transition: none; }
}

/* ==========================================================================
   Full-site loading splash — shown once per session, on first arrival
   ========================================================================== */
.site-loader{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-0);
  transition: opacity .7s ease, visibility .7s;
}
.site-loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader-inner{ display: flex; flex-direction: column; align-items: center; gap: 28px; }
.site-loader-logo{
  width: 84px;
  height: auto;
  animation: siteLoaderPulse 1.8s ease-in-out infinite;
}
@keyframes siteLoaderPulse{
  0%, 100%{ opacity: .7; transform: scale(.94); }
  50%{ opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .site-loader{ transition: none; }
  .site-loader-logo{ animation: none; }
}