/* ===============================
   Global Theme
   =============================== */
:root{
  --bg:#0b1f3b;            /* dark blue (trust) */
  --surface:#13294b;       /* darker surface */
  --muted:#2e3f63;         /* slate */
  --text:#e9eef7;          /* off white */
  --soft:#c8d3e6;          /* soft grey */
  --accent:#ffb703;        /* bright accent */
  --accent-ink:#1a1400;    /* accent contrast */
  --ring: 0 0 0 3px rgba(255,183,3,.35);
  --radius:20px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0a1a33);
  line-height:1.6;
}

/* ===============================
   Layout Helpers
   =============================== */
.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}
.section{
  padding:72px 0;
}
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.grid-2{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:36px;
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
}

/* ===============================
   Header / Nav
   =============================== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(11,31,59,.65);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{
  font-weight:700; letter-spacing:.3px; text-decoration:none; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.logo-mark{color:var(--accent)}
.site-nav ul{
  display:flex; gap:20px; list-style:none; padding:0; margin:0;
}
.site-nav a{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:999px;
}
.site-nav a:hover{background:rgba(255,255,255,.06)}
.btn{background:var(--accent); color:var(--accent-ink); border:0; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; display:inline-block; box-shadow:var(--shadow)}
.btn:hover{filter:brightness(.95)}
.btn-outline{background:transparent; color:var(--text); outline:1px solid rgba(255,255,255,.25)}
.btn-accent{background:var(--accent); color:var(--accent-ink)}

.nav-toggle{display:none; background:none; border:0}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0}
@media (max-width:860px){
  .site-nav{position:absolute; right:16px; top:58px; background:var(--surface); padding:10px; border-radius:14px; box-shadow:var(--shadow); display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; gap:6px}
  .nav-toggle{display:block}
}

/* ===============================
   Hero
   =============================== */
.hero{position:relative; min-height:72vh; display:grid; align-items:center}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; filter:grayscale(.2) contrast(1.05);
}
.hero-content{position:relative; padding:80px 0}
.headline{font-size:clamp(28px, 4vw, 48px); line-height:1.15; margin:0 0 12px}
.subhead{max-width:60ch}
.accent{color:var(--accent)}
.counter-card{
  margin:26px 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:18px 22px; border-radius:var(--radius); display:inline-block; text-align:center; box-shadow:var(--shadow)
}
.counter{font-size:clamp(34px,5vw,56px); font-weight:800}

/* ===============================
   Cards / Common
   =============================== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px)}
.card-img{width:100%; height:220px; object-fit:cover}
.card-body{padding:16px}

/* ===============================
   Pills
   =============================== */
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pill{
  padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)
}

/* ===============================
   Timeline
   =============================== */
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px
}
.time-item{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px dashed rgba(255,255,255,.2); border-radius:14px; padding:16px; text-align:center
}
.time-item span{display:block; font-weight:700}
.time-item em{font-style:normal; color:var(--soft); font-size:.95rem}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.timeline{grid-template-columns:1fr}}

/* ===============================
   Tabs
   =============================== */
.tabs{display:flex; gap:10px; margin:8px 0 16px}
.tab{
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.3);
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.tab.active{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}
.tab-panels .panel{display:none}
.tab-panels .panel.active{display:block}

.program-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:800px){.program-list{grid-template-columns:1fr}}
.program{
  padding:14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.program h4{margin:6px 0}
.badge{
  font-size:.8rem; background:rgba(255,255,255,.1); padding:4px 8px; border-radius:999px; margin-right:8px
}
.note{
  margin-top:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); padding:10px 12px; border-radius:12px;
}

/* ===============================
   Media Cards
   =============================== */
.media-cards .card-body .link{color:var(--accent); text-decoration:none}

/* ===============================
   Testimonials
   =============================== */
.testimonial-wrap{
  display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:stretch
}
@media (max-width:900px){.testimonial-wrap{grid-template-columns:1fr}}
.testimonial{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; position:relative
}
blockquote{margin:0 0 10px; font-size:1.2rem}
.cite{color:var(--soft)}
.t-controls{position:absolute; right:12px; bottom:12px; display:flex; gap:8px}
.t-controls button{
  background:var(--muted); border:0; color:var(--text); width:36px; height:36px; border-radius:50%
}
.video-card{
  margin:0; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)
}
.video-card img{display:block; width:100%; height:100%; object-fit:cover}
.video-card figcaption{padding:10px; font-size:.9rem; color:var(--soft)}

/* ===============================
   Gallery + Lightbox
   =============================== */
.masonry{
  columns: 4 220px; column-gap:12px;
}
.g-img{
  width:100%; margin:0 0 12px; border-radius:12px; display:block;
  border:1px solid rgba(255,255,255,.12); cursor:pointer; transition:opacity .15s ease;
}
.g-img:hover{opacity:.9}
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:1000;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(96vw,1100px); max-height:90vh; border-radius:14px; box-shadow:var(--shadow)}
.lightbox-close{
  position:absolute; top:20px; right:20px; background:rgba(255,255,255,.15); border:0; color:white; width:40px; height:40px; border-radius:50%;
}

/* ===============================
   Contact
   =============================== */
.contact-list{list-style:none; padding:0; margin:12px 0}
.contact-form{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); padding:18px; border-radius:16px
}
.contact-form label{display:block; font-weight:600; margin:8px 0}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:var(--text)
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; box-shadow:var(--ring)
}
.contact-form .btn{margin-top:8px}
.form-note{min-height:1.2em; color:var(--accent)}

/* ===============================
   Footer
   =============================== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
  padding:18px 0; margin-top:40px
}
.foot-grid{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--text)}

/* ===============================
   Reveal Animations (respect reduced motion)
   =============================== */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* Utility */
.wide{max-width:70ch}
.link{color:var(--accent)}