/* =========================================================
   GRAVITY BADMINTON COMPLEX — site stylesheet
   Palette drawn from the court itself: navy synthetic flooring,
   orange boundary lines. Display type reads like stadium signage.
   ========================================================= */

:root{
  --navy-950:#071426;
  --navy-900:#0b2545;
  --navy-800:#123361;
  --navy-700:#1a4079;
  --navy-600:#245094;
  --orange-600:#e8630f;
  --orange-500:#ff7a29;
  --orange-300:#ffb067;
  --orange-100:#ffe3c6;
  --paper:#eef1f6;
  --paper-dim:#e2e7f0;
  --ink:#0b1626;
  --ink-soft:#3c4a63;
  --line:#ffffff;
  --court-line: rgba(255,122,41,.4);
  --radius-card: 6px;
  --shadow-card: 0 18px 40px -20px rgba(7,20,38,.55);
  --container: 1180px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:'Big Shoulders Expanded', 'Work Sans', sans-serif;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--navy-900);
  margin:0 0 .4em;
  line-height:1.05;
}

h2{font-size:clamp(2rem,3.4vw,2.9rem);}
h3{font-size:1.5rem;}

p{color:var(--ink-soft);}

a{color:inherit;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:.85rem 1.6rem;
  border-radius:3px;
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.btn-orange{
  background:var(--orange-500);
  color:var(--navy-950);
}
.btn-orange:hover{background:var(--orange-300); color:var(--navy-950);}

.btn-outline{
  background:transparent;
  color:var(--paper);
  border-color:rgba(255,255,255,.5);
}
.btn-outline:hover{border-color:var(--orange-500); color:var(--orange-300);}

.btn-outline-navy{
  background:transparent;
  color:var(--navy-900);
  border-color:var(--navy-900);
}
.btn-outline-navy:hover{background:var(--navy-900); color:var(--paper);}

/* -------------------- NAVBAR -------------------- */
.g-nav{
  background:var(--navy-950);
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:3px solid var(--orange-500);
}
.g-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:74px;
}
.g-brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  font-family:'Big Shoulders Expanded', sans-serif;
  font-weight:800;
  font-size:1.7rem;
  color:var(--paper);
  letter-spacing:.02em;
}
.g-links{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  margin:0;padding:0;
}
.g-links a{
  text-decoration:none;
  color:var(--paper-dim);
  font-weight:600;
  font-size:.95rem;
  padding:.3rem 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.g-links a:hover,
.g-links a.active{
  color:var(--orange-300);
  border-bottom-color:var(--orange-500);
}
.g-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:4px;
  padding:.4rem .6rem;
  color:var(--paper);
}
@media (max-width: 900px){
  .g-toggle{display:inline-flex;}
  .g-links{
    position:absolute;
    top:74px; left:0; right:0;
    background:var(--navy-950);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-bottom:3px solid var(--orange-500);
  }
  .g-links.open{max-height:340px; padding:.5rem 0 1rem;}
  .g-links li{width:100%;}
  .g-links a{display:block; padding:.8rem 24px; border-bottom:1px solid rgba(255,255,255,.06);}
}

/* -------------------- HERO -------------------- */
.hero{
  position:relative;
  color:var(--paper);
  padding:7.5rem 0 5rem;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,20,38,.94) 20%, rgba(7,20,38,.68) 55%, rgba(11,37,69,.55) 100%);
}
.hero .wrap{position:relative; z-index:2;}
.hero-kicker-line{
  width:56px; height:4px; background:var(--orange-500); margin-bottom:1.4rem; border-radius:2px;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  max-width:16ch;
}
.hero p.lede{
  font-size:1.2rem;
  color:var(--paper-dim);
  max-width:46ch;
  margin-bottom:2rem;
}
.hero-pins{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:2.2rem;
}
.pin-chip{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:40px;
  padding:.5rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--paper-dim);
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}

/* dropdown (bootstrap logic kept, styled ourselves) */
.dropdown-menu.g-menu{
  background:var(--navy-900);
  border:1px solid var(--navy-700);
  border-radius:4px;
  padding:.4rem;
  min-width:220px;
}
.dropdown-menu.g-menu .dropdown-item{
  color:var(--paper-dim);
  font-weight:600;
  border-radius:3px;
  padding:.6rem .8rem;
}
.dropdown-menu.g-menu .dropdown-item:hover,
.dropdown-menu.g-menu .dropdown-item:focus{
  background:var(--orange-500);
  color:var(--navy-950);
}

/* -------------------- SECTION SCAFFOLDING -------------------- */
.section{padding:5rem 0;}
.section-dark{background:var(--navy-900); color:var(--paper);}
.section-dark p{color:var(--paper-dim);}
.section-dark h2, .section-dark h3{color:var(--paper);}
.section-tint{background:var(--paper-dim);}
.about-intro{background:#e5f0ec;}
.about-intro .feature-strip{background:rgba(255,255,255,.58); border-color:#bdd3ca !important;}
.about-intro .feature-strip .feat{border-color:#bdd3ca !important;}
.about-intro .pillar{
  aspect-ratio:1 / 1;
  padding:2rem 1.5rem;
  background:rgba(255,255,255,.62);
  border-top:3px solid var(--orange-500);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-intro .pillar h5{
  margin-top:1rem !important;
  margin-bottom:.75rem !important;
  line-height:1.15;
}
.about-intro .pillar p{margin-bottom:0;}

.court-rule{
  border:none;
  border-top:2px dashed var(--court-line);
  margin:0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}
.section-head p{max-width:46ch; margin:0;}

/* -------------------- STAT / FEATURE STRIP -------------------- */
.feature-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--navy-800);
  border-radius:6px;
  overflow:hidden;
}
.feature-strip .feat{
  padding:2.2rem 1.8rem;
  border-left:1px solid var(--navy-800);
}
.feature-strip .feat:first-child{border-left:none;}
.feature-strip .feat .num{
  font-family:'Big Shoulders Expanded', sans-serif;
  color:var(--orange-500);
  font-size:2.6rem;
  font-weight:800;
  line-height:1;
  display:block;
  margin-bottom:.5rem;
}
@media (max-width: 760px){
  .feature-strip{grid-template-columns:1fr;}
  .feature-strip .feat{border-left:none; border-top:1px solid var(--navy-800);}
  .feature-strip .feat:first-child{border-top:none;}
}

/* -------------------- MATCH TICKET (branch card) -------------------- */
.ticket{
  position:relative;
  background:var(--navy-900);
  color:var(--paper);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.ticket-head{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.4rem 1.1rem;
  min-height:78px;
}
.ticket-head h3{margin:0; color:var(--paper); font-size:1.25rem;}
.ticket-map{height:180px; width:100%; display:block; border:0; filter:saturate(.85);}
.ticket-body{padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:1rem; flex-grow:1;}
.ticket-addr{font-size:.92rem; color:var(--paper-dim); margin:0;}
.ticket-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:auto;}
.perf{border-top:2px dashed rgba(255,122,41,.45); position:relative;}
.perf::before,.perf::after{
  content:"";
  position:absolute; top:-8px; width:16px; height:16px;
  background:var(--paper); border-radius:50%;
}
.perf::before{left:-8px;}
.perf::after{right:-8px;}

.timing-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:var(--paper-dim);
  font-weight:600;
  font-size:.85rem;
  padding:.55rem .9rem;
  border-radius:3px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.timing-toggle:hover{border-color:var(--orange-500); color:var(--orange-300);}
.timing-toggle .bi{transition:transform .2s ease;}
.timing-toggle[aria-expanded="true"] .bi{transform:rotate(180deg);}
.timing-list{
  list-style:none; margin:.9rem 0 0; padding:.9rem 0 0;
  border-top:1px solid var(--navy-700);
  font-size:.88rem;
  color:var(--paper-dim);
  display:grid; gap:.4rem;
}
.timing-list strong{color:var(--paper);}

/* -------------------- TESTIMONIALS -------------------- */
.simple-quote{
  height:100%;
  padding:1.5rem 1.6rem;
  border-top:2px solid var(--orange-500);
  background:rgba(255,255,255,.035);
}
.simple-quote p{
  color:var(--paper);
  font-size:1.05rem;
  margin:0 0 1.1rem;
}
.simple-quote span{
  color:var(--orange-300);
  font-weight:600;
}
.review-carousel{padding:0 3.5rem;}
.review-carousel .carousel-inner{min-height:170px;}
.review-carousel .simple-quote{height:100%;}
.review-control{width:2.5rem; color:var(--orange-300); opacity:1;}
.review-control:hover{color:var(--orange-500);}
@media (max-width:600px){
  .review-carousel{padding:0 2.4rem;}
  .review-carousel .carousel-inner{min-height:220px;}
}

/* -------------------- COACH ROWS (academy) -------------------- */
.coach-photo{
  width:100%;
  height:460px;
  object-fit:cover;
  border-radius:6px;
  box-shadow:var(--shadow-card);
}
.chip-row{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.2rem;}
.chip{
  border:1px solid var(--navy-700);
  color:var(--navy-800);
  font-weight:600;
  font-size:.82rem;
  padding:.35rem .75rem;
  border-radius:30px;
}
.coach-quote{
  border-left:3px solid var(--orange-500);
  padding-left:1rem;
  font-style:italic;
  color:var(--ink-soft);
  margin:1.1rem 0;
}
.coach-batches{
  background:var(--paper-dim);
  border-radius:6px;
  padding:1rem 1.3rem;
  font-size:.92rem;
}
.coach-eyebrow{
  font-family:'Big Shoulders Expanded', sans-serif;
  color:var(--orange-600);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.01em;
  margin-bottom:.2rem;
  display:block;
}

/* -------------------- GALLERY -------------------- */
.gallery-block{margin-bottom:4rem;}
.gallery-head{display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.2rem;}
.gallery-block .carousel-inner{border-radius:6px; box-shadow:var(--shadow-card);}
.gallery-block .carousel-inner img{height:560px; object-fit:cover;}
@media (max-width:760px){ .gallery-block .carousel-inner img{height:320px;} }

/* -------------------- ABOUT PAGE -------------------- */
.pillar{padding:1.8rem 0;}
.pillar .bi{color:var(--orange-500); font-size:1.9rem;}
.about-quote{
  background:#e5f0ec;
  color:var(--ink);
  border:1px solid #bdd3ca;
  border-radius:6px;
  padding:2.6rem;
  text-align:left;
  position:relative;
}
.about-quote p{color:var(--ink-soft); font-size:1.25rem; margin:0;}

/* -------------------- FOOTER -------------------- */
.g-footer{
  background:var(--navy-950);
  color:var(--paper-dim);
  padding:3.2rem 0 1.6rem;
  border-top:3px solid var(--orange-500);
}
.g-footer h5,.g-footer h6{color:var(--paper); font-family:'Big Shoulders Expanded', sans-serif; font-weight:700;}
.g-footer a{color:var(--paper-dim); text-decoration:none;}
.g-footer a:hover{color:var(--orange-300);}
.g-footer .socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.6rem;
}
.g-footer .socials a:hover{border-color:var(--orange-500);}
.g-footer .fine{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2.4rem;
  padding-top:1.2rem;
  font-size:.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}


@media (max-width:600px){
  .section{padding:3.4rem 0;}
  .hero{padding:6rem 0 3.6rem;}
}