/* ============================================================
   ALLIVE ARENA SPORTS — brand stylesheet
   Palette pulled from brand mark: navy / gold / crimson
   ============================================================ */

:root{
  --navy: #10254a;
  --navy-deep: #0a1a36;
  --gold: #f2a900;
  --gold-light: #ffc94d;
  --crimson: #c8102e;
  --cream: #faf8f3;
  --ink: #14181f;
  --steel: #5b6472;
  --line: #e4e1d8;
  --radius: 4px;
  --shadow: 0 12px 30px -12px rgba(16,37,74,0.25);
}

@font-face{ /* system fallback stack noted in font-family declarations below */ }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.font-display{
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--navy);
}

.font-condensed{
  font-family: 'Barlow Condensed', sans-serif;
}

.eyebrow{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--crimson);
}

a{ color: var(--navy); }
a:hover{ color: var(--crimson); }

::selection{ background: var(--gold); color: var(--navy-deep); }

/* focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Buttons ---------------- */
.btn-brand{
  background: var(--crimson);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 2px solid var(--crimson);
  transition: all 0.2s ease;
}
.btn-brand:hover{
  background: transparent;
  color: var(--crimson);
  border-color: var(--crimson);
}
.btn-outline-brand{
  background: transparent;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 2px solid var(--gold);
  transition: all 0.2s ease;
}
.btn-outline-brand:hover{
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-navy{
  background: var(--navy);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  transition: all 0.2s ease;
}
.btn-navy:hover{ background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }

/* ---------------- Navbar ---------------- */
.site-header{
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.navbar-brand img{ height: 52px; }
.navbar .nav-link{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--navy);
  padding: 0.5rem 1rem !important;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{ color: var(--crimson); }
.navbar .dropdown-menu{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.navbar .dropdown-item{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.6rem 1.25rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item.active{ background: var(--cream); color: var(--crimson); }
.nav-cta{
  background: var(--crimson);
  color: #fff !important;
  border-radius: var(--radius);
  padding: 0.55rem 1.4rem !important;
}
.nav-cta:hover{ background: var(--navy); color: #fff !important; }

/* ---------------- Hero (diagonal split, signature element) ---------------- */
.hero{
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
  color: #fff;
}
.hero-panel{
  position: relative;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0% 100%);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 65%);
  z-index: 2;
}
.hero-photo-wrap{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-photo-wrap img{
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: grayscale(15%) contrast(1.05);
}
.hero-swoosh{
  position: absolute;
  right: -4%;
  top: 8%;
  width: 46%;
  opacity: 0.9;
  z-index: 3;
  pointer-events: none;
}
.hero-kicker{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-size: 0.85rem;
}
.hero h1{
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.02;
}
.hero h1 span{ color: var(--gold); }
.hero p.lead{
  color: #d7deea;
  max-width: 34rem;
}
.page-hero{
  background: var(--navy-deep);
  color: #fff;
  padding: 5.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero::after{
  content: "";
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(242,169,0,0.18) 0%, transparent 70%);
}
.page-hero h1{ color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); }
.breadcrumb-brand a{ color: var(--gold-light); text-decoration: none; }
.breadcrumb-brand span{ color: #9fb0cc; }

/* ---------------- Scoreboard stat strip (signature element) ---------------- */
.scoreboard{
  background: var(--navy-deep);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
}
.scoreboard .stat{
  border-right: 1px solid rgba(255,255,255,0.12);
  padding: 2.25rem 1rem;
}
.scoreboard .stat:last-child{ border-right: none; }
.scoreboard .stat-num{
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--gold);
  line-height: 1;
}
.scoreboard .stat-label{
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cdd6e5;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* ---------------- Section rhythm ---------------- */
.section{ padding: 5rem 0; }
.section-tight{ padding: 3.5rem 0; }
.section-alt{ background: #fff; }
.divider-pitch{
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 40px, var(--gold) 40px 44px);
  opacity: 0.9;
}

/* ---------------- Cards ---------------- */
.card-brand{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 4px solid var(--navy);
}
.card-brand:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--crimson); }
.card-brand .icon{
  width: 52px; height: 52px;
  color: var(--crimson);
  margin-bottom: 1.1rem;
}
.card-brand h3{ font-size: 1.2rem; color: var(--navy); }
.card-brand p{ color: var(--steel); font-size: 0.97rem; margin-bottom: 0; }

.service-card{
  position: relative;
  display: block;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
  text-decoration: none;
  height: 100%;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.service-card:hover{ transform: translateY(-5px); color: #fff; }
.service-card::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(242,169,0,0.25) 100%);
  opacity: 0; transition: opacity 0.25s ease;
}
.service-card:hover::before{ opacity: 1; }
.service-card .icon{ width: 44px; height: 44px; color: var(--gold); margin-bottom: 1rem; }
.service-card h3{ color: #fff; font-size: 1.25rem; margin-bottom: 0.5rem; }
.service-card p{ color: #c3cde0; font-size: 0.92rem; margin-bottom: 1.25rem; }
.service-card .go{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--gold-light);
}

/* ---------------- Who we train / focus rows ---------------- */
.focus-row{
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.focus-row:last-child{ border-bottom: none; }
.focus-badge{
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 1.1rem;
}
.focus-row h4{ color: var(--navy); font-size: 1.05rem; margin-bottom: 0.25rem; }
.focus-row p{ color: var(--steel); margin-bottom: 0; font-size: 0.95rem; }

/* ---------------- Coach / about ---------------- */
.coach-photo{
  border-radius: var(--radius);
  border: 6px solid #fff;
  box-shadow: var(--shadow);
}
.credential-list li{
  padding: 0.9rem 0 0.9rem 2rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink);
  font-size: 0.98rem;
}
.credential-list li:last-child{ border-bottom: none; }
.credential-list li::before{
  content: "";
  position: absolute; left: 0; top: 1.25rem;
  width: 12px; height: 12px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* ---------------- Testimonials ---------------- */
.testimonial-card{
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 2rem;
  height: 100%;
}
.testimonial-card .quote-mark{
  font-family: 'Anton', sans-serif;
  font-size: 3rem; color: var(--gold);
  line-height: 0.6; display: block; margin-bottom: 0.75rem;
}
.testimonial-card p.quote{ color: var(--ink); font-size: 1rem; }
.testimonial-card .who{ font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem; }
.testimonial-card .who span{ display: block; font-weight: 400; text-transform: none; color: var(--steel); letter-spacing: 0; font-size: 0.85rem; }
.stars{ color: var(--gold); letter-spacing: 0.15em; font-size: 0.9rem; }

/* ---------------- FAQ (accordion) ---------------- */
.accordion-brand .accordion-item{
  border: none; border-bottom: 1px solid var(--line);
  background: transparent;
}
.accordion-brand .accordion-button{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  color: var(--navy);
  background: transparent;
  padding: 1.25rem 0.25rem;
  box-shadow: none;
}
.accordion-brand .accordion-button:not(.collapsed){ color: var(--crimson); background: transparent; }
.accordion-brand .accordion-button::after{ filter: none; }
.accordion-brand .accordion-body{ color: var(--steel); padding: 0 0.25rem 1.5rem; }

/* ---------------- CTA band ---------------- */
.cta-band{
  background: var(--crimson);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content: "";
  position: absolute; left: -5%; top: -60%;
  width: 30%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}
.cta-band h2{ color: #fff; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--navy-deep);
  color: #cdd6e5;
  padding: 4rem 0 1.5rem;
}
.site-footer h5{
  font-family: 'Barlow Condensed', sans-serif;
  color: #fff; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 1rem; margin-bottom: 1.1rem;
}
.site-footer a{ color: #cdd6e5; text-decoration: none; }
.site-footer a:hover{ color: var(--gold-light); }
.site-footer .footer-logo{ height: 46px; margin-bottom: 1rem; filter: brightness(1.15); }
.site-footer hr{ border-color: rgba(255,255,255,0.12); margin: 2.5rem 0 1.5rem; }
.footer-bottom{ font-size: 0.85rem; color: #8896ac; }
.social-pill{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.5rem; color: #fff;
}
.social-pill:hover{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

/* ---------------- Breadcrumbs on service pages ---------------- */
.related-services .list-group-item{
  border: none; border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.9rem 0.25rem;
  color: var(--navy);
}
.related-services .list-group-item.active{ color: var(--crimson); background: transparent; }
.related-services .list-group-item:hover{ color: var(--crimson); }

/* Sticky enquiry box on service pages */
.enquiry-box{
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem;
}
.enquiry-box h4{ color: #fff; }
.enquiry-box .btn-brand{ width: 100%; }

@media (max-width: 767.98px){
  .hero-panel{ clip-path: none; }
  .hero-photo-wrap{ position: relative; height: 260px; }
  .hero-swoosh{ display: none; }
  .scoreboard .stat{ border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .scoreboard .stat:last-child{ border-bottom: none; }
}