/* ===== Variables ===== */
:root{
  --blue:#0B3A6A;
  --red:#C0392B;
  --red-dark:#A12E23;
  --bg:#ffffff;
  --text:#0e1521;
  --muted:#5f6b7a;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{font-family:"Montserrat", Arial, sans-serif; margin:0 0 .5rem}
h1{font-weight:800;font-size:clamp(28px,4.2vw,54px); line-height:1.05; letter-spacing: .5px}
h2{font-weight:800;font-size:clamp(22px,2.6vw,36px)}
h3{font-weight:700;font-size:clamp(18px,2vw,22px)}
p{margin:.25rem 0 1rem}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}
.center{text-align:center}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #eef1f5;
}
.header-inner{ align-items:center; justify-content:space-between; padding:.8rem 0 }
.row{ display:flex; gap:1rem }
.brand{display:flex; align-items:center; gap:.7rem}
.brand .brand-mark{ width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800 }
.brand .brand-text strong{letter-spacing:.5px}
.brand--small .brand-mark{ width:28px; height:28px; font-size:12px}
.nav{ display:flex; gap:1.2rem; align-items:center }
.nav a{color:#2a3748; font-weight:600}
.nav .btn--ghost{border:1px solid var(--blue); color:var(--blue); padding:.5rem .9rem; border-radius:999px}
.burger{display:none; background:none; border:0}
.burger span{display:block; width:24px; height:2px; background:#1f2d3d; margin:5px 0}

/* Buttons */
.btn{display:inline-block; padding:.9rem 1.2rem; border-radius:12px; font-weight:700; transition:.2s ease; text-align:center}
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(192,57,43,.35) }
.btn--primary:hover{ background:var(--red-dark) }
.btn--ghost{ background:transparent }
.btn--link{ color:var(--blue); font-weight:700 }
.btn--large{ padding:1rem 1.4rem; font-size:1.05rem }

/* Hero */
.hero{ padding: clamp(36px,4vw,64px) 0}
.hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:2rem; align-items:center }
.hero-media{ min-height:460px; background:url('/assets/img/hero.webp') center/cover no-repeat; border-radius:var(--radius) }
.hero-content .lead{ color:var(--muted); font-size:clamp(16px,1.3vw,18px) }
.cta-group{ display:flex; gap:1rem; margin:.6rem 0 1rem; flex-wrap:wrap }
.badges{ display:flex; gap:.75rem; padding:0; margin:0; list-style:none; flex-wrap:wrap }
.badges li{ background:#f1f5f9; border-radius:999px; padding:.45rem .8rem; font-size:.95rem }

/* Why section */
.why{ background:var(--red); color:#fff; margin-top:20px; border-radius:var(--radius); overflow:hidden }
.why h2{ text-align:center; padding: 2rem 0 1.2rem }
.cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; padding:0 0 2rem }
.card{ background:#fff; color:#1e293b; border-radius:14px; padding:1rem 1rem 1.1rem; box-shadow:0 10px 18px rgba(0,0,0,.08) }
.card .icon{ font-size:28px }
.quote{ background:var(--blue); padding:1.6rem 0 }
.quote blockquote{ font-size:clamp(18px,2vw,24px); text-align:center; font-weight:700; margin:0 }

/* About */
.about{ padding: 64px 0 }
.about-grid{ display:grid; grid-template-columns: 2fr 1.1fr; gap:2rem; align-items:center }
.list-check{ padding-left:1.1rem }
.list-check li{ margin:.35rem 0 }
.note{ color:var(--muted); margin-top:.6rem }

/* Coaches */
.coaches{ padding: 40px 0 16px }
.coach-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem }
.coach{ background:#fff; border:1px solid #eef1f5; border-radius:14px; padding:1rem; text-align:center }
.coach .avatar{ width:84px; height:84px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; margin:0 auto .6rem }
.coach p{ color:var(--muted) }

/* How */
.how{ padding: 56px 0 }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; counter-reset: step }
.steps li{ list-style:none; border:1px dashed #c9d2de; border-radius:12px; padding:1rem }
.steps li strong{ display:block; margin-bottom:.3rem }

/* Reviews */
.reviews{ padding: 56px 0 }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.review{ background:#fff; border:1px solid #eef1f5; border-radius:14px; padding:1rem }
.review .author{ color:var(--muted); margin-top:.5rem }

/* Schedule */
.schedule{ padding: 56px 0 }
.table{ display:grid; gap:6px }
.table .row{ display:grid; grid-template-columns: 1fr 1.6fr 1fr; gap:6px }
.table .row > div{ background:#f8fafc; padding:.75rem .8rem; border-radius:10px }
.table .head > div{ background:#e9eef5; font-weight:700 }
.price-note{ color:var(--muted) }

/* Contact */
.contact{ padding: 64px 0 80px }
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem }
.form{ display:grid; gap:.75rem }
.form label{ display:grid; gap:.35rem; font-weight:600 }
.form input{ padding:.75rem .9rem; border-radius:10px; border:1px solid #c9d2de; outline:0 }
.form button{ margin-top:.4rem }
.policy{ color:var(--muted); font-size:.9rem }
.hidden{ display:none }
.map-embed iframe{ width:100%; height:280px; border:0; border-radius:12px }
.contacts{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.4rem }

/* Footer */
.site-footer{ background:#0b1320; color:#c7d0dd; padding:1rem 0 }
.footer-grid{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:1rem }
.copy{ text-align:center }
.social a{ margin-left:.8rem; color:#c7d0dd }

/* Responsive */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .about-grid, .contact-grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns: repeat(2,1fr) }
  .coach-grid, .review-grid, .steps{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 640px){
  .nav{ display:none }
  .burger{display:block}
  .cards{ grid-template-columns:1fr }
  .coach-grid, .review-grid, .steps{ grid-template-columns:1fr }
  .table .row{ grid-template-columns: 1fr 1fr 1fr }
  .hero-media{ min-height:300px }
  .why{ border-radius:0 }
}


.brand-logo{
  height:32px;
  width:auto;
}
.athlete-photos{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.75rem;
}
.athlete-photos img{
  width:100%;
  display:block;
  border-radius:12px;
  object-fit:cover;
  aspect-ratio:4/3;
}
.coach-photo{
  width:100%;
  border-radius:14px;
  object-fit:cover;
  aspect-ratio:4/3;
  margin-bottom:0.75rem;
}
@media (max-width: 640px){
  .athlete-photos{
    grid-template-columns:1fr;
  }
}


.brand-logo{
  height:48px;
  width:auto;
  object-fit:contain;
  display:block;
}
.two-coaches{
  display:flex;
  justify-content:center;
  gap:40px;
}
.two-coaches .coach{
  max-width:320px;
}
.athlete-photos img{
  aspect-ratio: 3/2;
  width:100%;
  border-radius:14px;
}

.athlete-photos{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:20px;
}
.athlete-photos img{
  width:30%;
  max-width:260px;
}

.two-coaches{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:20px;
}
.two-coaches .coach{
  max-width:340px;
  text-align:center;
}
.coach-photo{
  width:100%;
  border-radius:14px;
  object-fit:cover;
  aspect-ratio:3/2;
  margin-bottom:12px;
}

.athlete-photos{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:24px;
}
.athlete-photos img{
  width:40%;
  max-width:340px;
  aspect-ratio:3/2;
  border-radius:14px;
  object-fit:cover;
}

/* Constrain athlete photos within text width */
.athlete-photos{
  max-width:700px;  /* keeps within text column */
  margin:24px auto;
  display:flex;
  justify-content:center;
  gap:18px;
}
.athlete-photos img{
  width:32%;
  max-width:220px;
  aspect-ratio:3/2;
  border-radius:14px;
  object-fit:cover;
}
@media(max-width:700px){
  .athlete-photos{
    flex-wrap:wrap;
  }
  .athlete-photos img{
    width:45%;
    max-width:240px;
  }
}

.prep{
  padding:60px 0;
}
.prep-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:24px;
}
.prep-item{
  text-align:center;
}
.prep-item img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
}
@media(max-width:800px){
  .prep-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:500px){
  .prep-grid{
    grid-template-columns:1fr;
  }
}

.contact-phones{
  margin-top:16px;
  list-style:none;
  padding:0;
  font-size:16px;
  line-height:1.5;
}
.social-block{
  margin-top:20px;
  text-align:center;
}
.social-grid{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:10px;
}
.social-circle{
  width:46px;
  height:46px;
  border-radius:50%;
  background:#0B3A6A;
  color:white;
  font-weight:700;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
}

.site-footer .copy{
  text-align:center;
}

@media (max-width: 700px){
  .two-coaches{
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    display: flex !important;
  }
  .two-coaches .coach{
    max-width: 90% !important;
    text-align: center !important;
  }
}