/**
 * =====================================================================
 * MISSION & VISION COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the provided CSS. Class names were NOT
 * renamed/prefixed, for the same reason as page_hero/our_story: .mv,
 * .mv__item, .mv__label belong to the site's existing shared design
 * system, not an isolated component namespace.
 *
 * NOT REPEATED HERE: .section, .section__head, .eyebrow, .lede,
 * .container — already in assets/css/global.css.
 *
 * "div.mv"/"span.mv__label" (NOT bare selectors): same fix confirmed
 * live on statistics' ".stat__num" — a bare single-class selector
 * loses to Blocksy's own base styling. ".mv__label" was carrying the
 * same font-family + color combination that broke .stat__num.
 * ".mv__item h3"/".mv__item p" were already class+tag selectors and
 * were never at risk.
 * =====================================================================
 */

div.mv {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
  padding: 44px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white);
}
.mv__item h3 { font-family: var(--font-display) !important; font-size: var(--step-2); font-weight: 400; }
.mv__item p { color: var(--slate); }
span.mv__label {
  font-family: var(--font-sans) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
  display: inline-block;
}
@media (max-width: 700px) {
  div.mv { grid-template-columns: 1fr; padding: 28px; }
}

/* Homepage-only: a supporting photograph beside the Mission/Vision
   card — stacks the card's two items into one column so the photo has
   room, without touching ".mv"'s own default (still 2-up on
   about.html, which has no photo alongside it). */
.mv-media { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 40px; align-items: stretch; }
.mv-media__img { overflow: hidden; border: 1px solid var(--line); min-height: 320px; }
.mv-media__img img { width: 100%; height: 100%; object-fit: cover; }
.mv-media .mv { grid-template-columns: 1fr; }
@media (max-width: 800px) {
  .mv-media { grid-template-columns: 1fr; }
  .mv-media__img { min-height: 240px; }
}