/* ABOUT PAGE */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:8rem 5rem;background:var(--cream)}
.mission-text h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.2rem);color:var(--maroon);margin-bottom:1.5rem;line-height:1.1}
.mission-text p{color:#5a3040;line-height:1.85;font-size:.96rem;margin-bottom:1rem}
.mission-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.mission-badges span{font-size:.78rem;font-weight:600;color:var(--maroon);background:rgba(75,14,30,.08);padding:.32rem .9rem;border-radius:5rem}
.mission-img{position:relative}
.mission-img img{border-radius:2.5rem;height:500px;object-fit:cover;box-shadow:var(--sh2)}
.mission-stat{position:absolute;bottom:-1.5rem;left:-1.5rem;background:var(--gold);color:#fff;padding:1.5rem 2rem;border-radius:1.5rem;box-shadow:0 12px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center}
.mission-stat span{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:900;line-height:1}
.mission-stat small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.values{background:var(--maroon);padding:7rem 5rem;text-align:center}
.values h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);color:#fff;margin-bottom:4rem}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.val-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:1.5rem;padding:2.5rem 1.5rem;transition:background .3s,transform .3s}
.val-card:hover{background:rgba(91,191,214,.14);transform:translateY(-8px)}
.val-icon{font-size:2.5rem;margin-bottom:1rem}
.val-card h3{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--teal);margin-bottom:.5rem}
.val-card p{font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.65}

@media(max-width:900px){.mission{grid-template-columns:1fr;padding:5rem 2rem;gap:3rem}.mission-img img{height:320px}.values{padding:5rem 2rem}.val-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.val-grid{grid-template-columns:1fr}.mission-stat{left:auto;right:1rem}}

/* ══ ABOUT — THOROUGH RESPONSIVE ═════════════════════ */

@media(max-width:768px){
  .mission{grid-template-columns:1fr;padding:4rem 1.5rem;gap:2.5rem}
  .mission-img img{height:280px}
  .mission-text h2{font-size:1.8rem}
  .mission-text p{font-size:.9rem}
  .mission-stat{left:auto;right:1rem;bottom:-1rem;padding:1rem 1.4rem}
  .mission-stat span{font-size:2rem}
  .mission-badges span{font-size:.72rem}
  .values{padding:4rem 1.5rem}
  .values h2{font-size:1.8rem}
  .val-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .val-card{padding:1.8rem 1.2rem}
  .val-icon{font-size:2rem}
}

@media(max-width:480px){
  .mission{padding:3rem 1.2rem}
  .mission-img img{height:240px}
  .mission-text h2{font-size:1.6rem}
  .val-grid{grid-template-columns:1fr}
  .values{padding:3rem 1.2rem}
}

@media(max-width:375px){
  .mission-stat{right:.5rem;padding:.8rem 1rem}
  .mission-stat span{font-size:1.6rem}
  .val-grid{grid-template-columns:1fr}
}

/* ══ IMPACT INLINE GRID FIX ═══════════════════════════ */
@media(max-width:600px){
  div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important
  }
}
@media(max-width:375px){
  div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr!important
  }
}
