/* ================================
   Metropolis font (self-hosted)
   Put these files in /fonts/
   ================================ */
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Brand palette: #0a1a4f ===== */
:root{
  --primary:#0a1a4f;      /* main brand */
  --primary-dark:#061238; /* darker shade */
  --secondary:#0a1a4f;
  --accent:#0a1a4f;
  --text:#333;
  --text-light:#666;
  --bg:#ffffff;
  --bg-light:#f8f9fa;
}

/* Kill any inherited page background images */
html,body{
  background-color:var(--bg);
  background-image:none !important;
}

body{
  font-family:"Metropolis", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* =========================================
   HERO — force brand blue gradient ALWAYS
   ========================================= */
.hero,
.hero.with-bg,
section.hero,
section.hero.with-bg{
  position:relative;
  height:100vh;

  /* FORCE the brand gradient; block any images set elsewhere */
  background-color:var(--primary) !important;
  background-image:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* If PHP adds inline background-image, kill it */
.hero.with-bg[style]{ background-image:none !important; }

/* Subtle wave overlay (kept) – NOT a photo */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><path d="M0,300 Q300,100 600,300 T1200,300" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="2"/><path d="M0,350 Q300,150 600,350 T1200,350" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="2"/></svg>');
  opacity:.5;
  animation:wave 20s linear infinite;
}
@keyframes wave { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.hero-overlay{
  position:absolute; inset:0;
  /* light center, darker edges over blue base */
  background:radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.35) 100%);
}

.hero-content{ position:relative; z-index:2; text-align:center; color:#fff; }

.hero-title{
  font-family:"Metropolis", sans-serif;
  font-weight:700;
  font-size:clamp(3rem, 8vw, 6rem);
  letter-spacing:2px;
  margin-bottom:20px;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
  animation:fadeInUp 1s ease-out;
}

.hero-subtitle{
  font-size:clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight:300;
  letter-spacing:1.5px;
  animation:fadeInUp 1s ease-out .3s both;
}
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }

/* scroll-indicator and scroll-arrow REMOVED */

/* Section Headers */
.section-header{ text-align:center; margin-bottom:60px; }
.section-tag{
  display:inline-block; padding:8px 20px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; border-radius:30px; font-size:.9rem; font-weight:600; letter-spacing:1px;
  margin-bottom:15px; text-transform:uppercase;
}
.section-header h2{
  font-family:"Metropolis", sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  color:var(--primary);
  letter-spacing:1px;
}

/* Story Section */
.story-section{ padding:120px 0; background:var(--bg); }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.story-image{ position:relative; }
.image-placeholder{
  width:100%; height:500px;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius:20px; overflow:hidden;
  box-shadow:0 20px 60px rgba(10,26,79,.25);
}
.belt-graphic{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg);
  width:300px; height:60px;
  background:linear-gradient(to right,#000 0%,#000 15%,var(--primary) 15%,var(--primary) 85%,#000 85%,#000 100%);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.story-content .lead{
  font-size:1.2rem; font-weight:600; color:var(--primary);
  margin-bottom:25px; line-height:1.8;
}
.story-content p{ font-size:1.05rem; color:var(--text-light); margin-bottom:20px; line-height:1.8; }

/* Philosophy */
.philosophy-section{ padding:120px 0; background:var(--bg-light); }
.tenets-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; }
.tenet-card{
  background:#fff; padding:40px 30px; border-radius:15px; text-align:center;
  transition:.4s ease; box-shadow:0 5px 20px rgba(0,0,0,.05); position:relative; overflow:hidden;
}
.tenet-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.tenet-card:hover{ transform:translateY(-10px); box-shadow:0 15px 40px rgba(10,26,79,.2); }
.tenet-card:hover::before{ transform:scaleX(1); }
.tenet-card h3{ font-size:1.25rem; color:var(--primary); margin-bottom:10px; font-weight:700; }
.tenet-card p{ color:var(--text-light); font-size:.95rem; }

/* Achievements */
.achievements-section{
  padding:120px 0;
  background:linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%);
  position:relative; overflow:hidden;
}
.achievements-section::before{
  content:''; position:absolute; top:-50%; right:-10%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(10,26,79,.12) 0%, transparent 70%);
  border-radius:50%;
}
/* H2 white, pill white w/ blue text */
.achievements-section .section-header h2{ color:#fff; }
.achievements-section .section-header .section-tag{
  background:#fff !important; color:var(--primary) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; }
.stat-card{
  text-align:center; padding:40px 20px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(10px);
  border-radius:15px; border:1px solid rgba(255,255,255,.1); transition:.4s ease;
}
.stat-card:hover{ background:rgba(255,255,255,.1); transform:scale(1.05); }
.stat-number{
  font-family:"Metropolis", sans-serif; font-weight:700;
  font-size:4rem; color:#fff; margin-bottom:10px;
  text-shadow:0 4px 20px rgba(255,255,255,.4);
}
.stat-number::after{ content:'+'; }
.stat-label{ color:#fff; font-size:1.05rem; font-weight:300; letter-spacing:1px; }

/* Instructors */
.instructors-section{ padding:120px 0; background:var(--bg); }
.instructors-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; }
.instructor-card{
  background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.1); transition:.4s ease;
}
.instructor-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.instructor-image{ position:relative; overflow:hidden; }
.instructor-placeholder{ width:100%; height:350px; background:linear-gradient(135deg, var(--secondary), var(--primary)); }
.instructor-placeholder::after{
  content:'🥋'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:5rem; opacity:.3;
}
.instructor-info{ padding:30px; }
.instructor-info h3{ font-size:1.35rem; color:var(--primary); margin-bottom:8px; }
.instructor-rank{ display:inline-block; padding:4px 12px; background:var(--primary); color:#fff; border-radius:15px; font-size:.85rem; font-weight:600; margin-bottom:15px; }
.instructor-info p{ color:var(--text-light); line-height:1.6; }

/* CTA */
.cta-section{
  padding:100px 0;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position:relative; overflow:hidden;
}
.cta-section::before{
  content:''; position:absolute; top:-100px; left:-100px; width:400px; height:400px;
  background:radial-gradient(circle, rgba(10,26,79,.2) 0%, transparent 70%);
  border-radius:50%; animation:pulse 4s infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:.5} 50%{transform:scale(1.2); opacity:.8} }
.cta-content{ text-align:center; position:relative; z-index:2; }
.cta-content h2{
  font-family:"Metropolis", sans-serif; font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.5rem); color:#fff; margin-bottom:20px; letter-spacing:1px;
}
.cta-content p{ color:rgba(255,255,255,.9); font-size:1.2rem; margin-bottom:40px; }
.cta-button{
  padding:18px 50px; background:var(--primary); color:#fff; border:none; border-radius:50px;
  font-size:1.05rem; font-weight:700; letter-spacing:1px; cursor:pointer; transition:.3s ease;
  box-shadow:0 10px 30px rgba(10,26,79,.35); text-transform:uppercase;
}
.cta-button:hover{ transform:translateY(-3px); box-shadow:0 15px 40px rgba(10,26,79,.45); background:#153275; }

/* Responsive */
@media (max-width:768px){
  .story-grid{ grid-template-columns:1fr; gap:40px; }
  .tenets-grid{ grid-template-columns:1fr; }

  /* ↓↓↓ CHANGE: Achievements = one column on mobile ↓↓↓ */
  .stats-grid{ grid-template-columns:1fr; }

  .instructors-grid{ grid-template-columns:1fr; }
  .hero-title{ font-size:3rem; }
  .section-header h2{ font-size:2.2rem; }
}

/* AOS */
[data-aos]{ opacity:0; transition-property:opacity,transform; }
[data-aos].aos-animate{ opacity:1; }
[data-aos="fade-up"]{ transform:translateY(50px); }
[data-aos="fade-up"].aos-animate{ transform:translateY(0); }
[data-aos="fade-left"]{ transform:translateX(50px); }
[data-aos="fade-left"].aos-animate{ transform:translateX(0); }
[data-aos="fade-right"]{ transform:translateX(-50px); }
[data-aos="fade-right"].aos-animate{ transform:translateX(0); }
[data-aos="zoom-in"]{ transform:scale(.8); }
[data-aos="zoom-in"].aos-animate{ transform:scale(1); }