/* ============ Design Tokens ============ */
:root{
  --bg:#f6f7fb;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#1e3a8a;
  --accent:#2563eb;
  --card:#ffffff;
  --line:#e5e7eb;
  --band:#0b132b;
  --shadow:0 2px 8px rgba(2,6,23,.06);
}

/* ============ Base ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:24px auto;padding:24px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 20px 12px rgba(0,0,0,0.08)}
.section{margin:32px 0}
.section-centered { text-align: center; }
.section-centered .list-centered {
  display: inline-block;        /* lets it center as a block */
  text-align: left;             /* bullets remain left-aligned */
  margin: 0 auto;               /* centers the list itself */
  padding-left: 1.2rem;         /* keeps bullet spacing tidy */
}

.section p {
  max-width: 820px;     /* keeps text column narrower */
  margin: 0 auto;       /* centers the block inside section */
  text-align: justify;   /* optional: makes it look more balanced */
}

h1,h2,h3{color:#0b132b;margin:0 0 10px}
h1{font-size:clamp(24px,3.6vw,36px);line-height:1.15}
h2{font-size:clamp(18px,2.2vw,24px)}
h3{font-size:1.1rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:10px 14px;font-weight:600
}
.btn.secondary{background:#e2e8f0;color:var(--ink)}
.cta-row{display:inline-flex;gap:10px;flex-wrap:wrap}

/* Banner Section */

.banner{position:relative;width:100%;height:42vh;min-height:320px;background-size:60%;background-blend-mode:multiply;overflow:hidden}
#bg-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.55),rgba(2,6,23,.35));z-index:-1}
.banner-content{position:relative;height:100%;display:grid;place-items:center;text-align:center;color:#fff;padding:0 16px}
.banner-content h1{font-size:clamp(26px,4vw,44px);margin-bottom:8px;color:#fff}
.banner-content .sub{opacity:.9;font-size:clamp(12px,1.6vw,14px);margin-bottom:6px}

/* Reduced motion: use static poster */

@media (prefers-reduced-motion:reduce){
  #bg-video{display:none}
  .banner{background:url('assets/jcsp2-navy-logo.jpg') center/cover no-repeat,var(--band)}
}

/* ============ Card grids (Capabilities & Outcomes) ============ */
.card-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 2x2 on desktop */
}
@media (max-width:800px){
  .card-grid{grid-template-columns:1fr}           /* stack on mobile */
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px;box-shadow:var(--shadow)
}
.icon{font-size:28px;margin-bottom:6px;color:var(--accent)}
ul{margin:0;padding-left:18px}
li{margin:6px 0}

/* ============ Certifications badges ============ */
/* center the chips row */
.badge-row { 
  display: inline-flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  justify-content: center; 
}

/* responsive badge grid for Credly images */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
  gap: 16px;
  margin-top: 14px;
  max-width: 700px;     /* keeps it from stretching too wide */
  margin: 14px auto 0;
}

/* Individual badge card */
.cert{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 60px 10px;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
  display: flex; flex-direction: column; align-items: center;
}

.cert img{
  width: 96px; height: 96px;
  object-fit: contain;
  display: block;
  filter: saturate(.95);
}

.cert figcaption{
  margin-top: 8px;
  font-size: 13px; font-weight: 600; color: #0f172a;
}

/* subtle hover, optional */
.cert:hover{ box-shadow: 0 6px 18px rgba(2,6,23,.12); transform: translateY(-1px); transition: .18s ease; }

/* ============ Contact (full-bleed) ============ */
.contact-us{width:100%;background:var(--band);color:#fff;padding:28px 0;margin-top:28px}
.contact-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;justify-content:center;align-items:center;text-align:left;gap:20px}
.contact-left img{height:180px;width:auto}
.contact-info a{color:#93c5fd}
@media (max-width:700px){.contact-inner{flex-direction:column;text-align:center}}

/* ============ Legacy cleanup ============ */
.pricing-table{display:none!important} /* hide any leftover MSP table markup */