/* css/mission.css - styles for about-mission.html only (uses the tokens from style.css) */

/* ---- Hero: nav sits above it, so no 20% top padding needed ---- */
.mission-hero{padding-top:0;min-height:260px;display:flex;align-items:center;justify-content:center}
.mission-hero h4{font-size:clamp(32px,7vw,60px);margin:0;padding:0 16px}

/* ---- Keep style.css globals (p padding, centred h3) from leaking in ---- */
.ms p{padding:0}
.ms h2,.ms h3,.ms h4{text-align:left;margin:0}
.ms-wrap{max-width:1120px;margin:0 auto;padding:64px 20px 24px}

/* ---- Intro band ---- */
.ms-intro{background:var(--stella-navy);color:var(--stella-white);text-align:center;padding:64px 20px}
.ms-intro h2{color:var(--stella-white);text-align:center;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.25;max-width:760px;margin:0 auto 16px;font-weight:700}
.ms-intro p{max-width:640px;margin:0 auto;color:#d6e0ef;line-height:1.7;text-align:center}
.ms-intro .ms-kicker{color:var(--stella-accent);font-weight:600;margin-bottom:12px}

/* ---- Section titles (same accent bar the rest of the site uses) ---- */
.ms-title{text-align:center!important;font-size:2rem;font-weight:700;color:var(--stella-navy);margin:72px 0 32px!important}
.ms-title::after{content:'';display:block;width:60px;height:3px;background:var(--stella-accent-dark);margin:10px auto 0}

/* ---- Icons ---- */
.ms-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--stella-accent);color:var(--stella-navy);font-size:24px;margin-bottom:16px}

/* ---- Vision & Mission ---- */
.ms-two{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ms-card{background:var(--stella-white);border-radius:12px;padding:32px;box-shadow:0 4px 14px rgba(10,38,71,.08);border-top:4px solid var(--stella-accent-dark)}
.ms-card.alt{border-top-color:var(--stella-navy-light)}
.ms-card h3{font-size:1.5rem;font-weight:700;color:var(--stella-navy);margin-bottom:10px}
.ms-card p{line-height:1.7;color:var(--stella-dark-gray)}

/* ---- Values ---- */
.ms-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.ms-value{background:var(--stella-white);border-radius:10px;padding:28px 20px;text-align:center;box-shadow:0 2px 10px rgba(10,38,71,.07)}
.ms-value .ms-ico{background:var(--stella-navy);color:var(--stella-accent)}
.ms-value h4{text-align:center;font-size:1.05rem;font-weight:600;color:var(--stella-navy);margin-bottom:8px}
.ms-value p{font-size:.9rem;line-height:1.6;color:var(--stella-gray)}

/* ---- Objectives (a real sequence, so numbered) ---- */
.ms-obj{list-style:none;max-width:820px;margin:0 auto;padding:0;counter-reset:obj;display:grid;gap:16px}
.ms-obj li{counter-increment:obj;display:flex;gap:16px;align-items:flex-start;background:var(--stella-white);border-radius:10px;padding:20px 22px;box-shadow:0 2px 10px rgba(10,38,71,.07);line-height:1.7}
.ms-obj li::before{content:counter(obj);flex:none;width:32px;height:32px;border-radius:50%;background:var(--stella-navy);color:var(--stella-white);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}

@media (max-width:700px){
  .ms-two{grid-template-columns:1fr}
  .ms-wrap{padding-top:40px}
  .ms-card{padding:24px}
}