/* ============================================================
   Benjamin Runga Foundation — Mission Page Styles (mission.css)
   ============================================================ */

/* MISSION STATEMENT */
.mission-statement {
  padding: 3rem 2rem;
  background: var(--off-white);
  text-align: center;
}
.mission-statement-inner {
  max-width: 860px; margin: 0 auto;
  background: var(--white); border-radius: 14px; padding: 4rem 3.5rem;
  box-shadow: 0 4px 40px rgba(27,52,92,0.09), 0 1px 4px rgba(27,52,92,0.04);
  border: 1px solid rgba(27,52,92,0.07);
}
.mission-statement .eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.5rem; display: block;
}
.mission-quote {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 700; color: var(--navy); line-height: 1.3;
  margin-bottom: 2.5rem; position: relative;
}
.mission-quote::before {
  content: '\201C'; position: absolute; top: -1rem; left: -1.5rem;
  font-size: 6rem; color: var(--accent); opacity: 0.25; line-height: 1;
  font-family: var(--serif);
}
.mission-body { font-size: 1.05rem; color: #555; max-width: 680px; margin: 0 auto; }

/* VISION */
.vision-section {
  padding: 7rem 2rem;
  background: var(--navy);
}
.vision-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.vision-text .section-eyebrow { color: rgba(255,255,255,0.55); }
.vision-text .section-title { color: var(--white); }
.vision-text p { font-size: 1.02rem; color: rgba(255,255,255,0.75); margin-bottom: 1.2rem; }
.vision-visual {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 3rem 2.5rem; text-align: center;
}
.vision-visual .big-text {
  font-family: var(--serif); font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 600; color: var(--white); line-height: 1.4; font-style: italic;
}
.vision-visual .big-text em { color: var(--accent); font-style: normal; }
@media (max-width: 760px) { .vision-inner { grid-template-columns: 1fr; gap: 3rem; } }

/* HOW WE OPERATE */
.how-section { padding: 6rem 2rem; }
.how-inner { max-width: 1100px; margin: 0 auto; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.how-card {
  background: var(--off-white); border-radius: 8px; padding: 2.5rem 2rem;
  border-top: 4px solid var(--accent);
}
.how-card .num {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 700;
  color: var(--accent); opacity: 0.4; line-height: 1; margin-bottom: 1rem;
}
.how-card h3 {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  color: var(--navy); margin-bottom: 0.75rem;
}
.how-card p { font-size: 0.92rem; color: #555; }
@media (max-width: 700px) { .how-grid { grid-template-columns: 1fr; } }