/* mobile-vision.css — Vision & Mission page mobile overrides (max-width: 768px)
   Desktop: 1440px absolute canvas with fit-canvas zoom (zoom ≈ 0.27 at 390px).
   Mobile: cancel zoom, reflow all sections to single-column block flow. */

@media (max-width: 768px) {

  /* ── WRAPPER: cancel fit-canvas JS zoom, full width ─────────── */
  .vm-wrap {
    zoom: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ── MISSION SECTION ─────────────────────────────────────────── */
  .vm-mission-section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 36px 24px !important;
    box-sizing: border-box !important;
  }

  /* Decorative 300px quote glyphs: hide */
  .vm-quote { display: none !important; }

  /* Decorative outline portrait: hide */
  .vm-layer { display: none !important; }

  .vm-mission-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    font-size: 26px !important;
    line-height: 1.45 !important;
  }

  /* ── RULES ────────────────────────────────────────────────────── */
  .vm-gray-rule {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  .vm-amber-rule {
    position: static !important;
    display: block !important;
    width: 60% !important;
    height: 3px !important;
    top: auto !important;
    left: auto !important;
    margin: 4px auto 0 !important;
  }

  /* ── SECTION DOTS (all decorative on mobile) ─────────────────── */
  .vm-dot { display: none !important; }

  /* ── HEADINGS ────────────────────────────────────────────────── */
  .vm-h1, .vm-h2 {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    white-space: normal !important;
    font-size: 26px !important;
    padding: 24px 20px 6px !important;
    clear: both !important;
  }

  /* ── BODY TEXT ────────────────────────────────────────────────── */
  .vm-body {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    padding: 4px 20px 16px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ── LEGACY PHOTO ─────────────────────────────────────────────── */
  .vm-deco-circle { display: none !important; }

  .vm-legacy-photo {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: calc(100% - 40px) !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 20px 16px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* ── ETHOS: title label → amber circle → quest overlaid ─────── */
  /* ellipse-18.svg is a plain amber circle (no text).
     quest SVGs have WHITE text — only legible over the amber circle.
     Show ellipse, then pull quest UP into it with negative margin. */

  .vm-ethos-title {
    /* Arch text occupies top ~40% of the SVG bounding box; bottom ~60% is empty.
       Keep full dimensions (no clipping) and let the ellipse's negative margin
       slide up into that empty space instead. */
    position: static !important;
    display: block !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    width: 260px !important;
    height: auto !important;
    margin: 20px auto 0 !important;
  }

  .vm-ethos-ellipse {
    /* Pull the circle up ~100px into the empty lower half of the title SVG */
    position: static !important;
    display: block !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    width: 160px !important;
    height: 160px !important;
    margin: -100px auto 0 !important;
  }

  .vm-ethos-quest {
    /* White text visible on amber — centred inside ellipse via negative margin.
       Larger margin-bottom adds breathing room before next title arch. */
    position: static !important;
    display: block !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    width: 110px !important;
    height: 110px !important;
    margin: -135px auto 48px !important;
  }

  /* ── OBJECTIVES: amber-ruled list (same style as site rules) ── */
  .vm-obj-card { display: none !important; }
  .vm-obj-tag  { display: none !important; }

  .vm-obj-label {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #2a417d !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-top: 2px solid #ffb337 !important;
    padding: 14px 20px 4px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .vm-obj-desc {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: #202020 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 2px 20px 16px !important;
    margin: 0 !important;
  }

  /* Suppress forced <br> in desc text — let natural wrap handle it */
  .vm-obj-desc br { display: none !important; }

  /* ── FOCUS AREAS ─────────────────────────────────────────────── */
  .vm-focus-card { display: none !important; }

  .vm-focus-img {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 90px !important;
    height: 90px !important;
    margin: 20px auto 4px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .vm-focus-text {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    font-size: 18px !important;
    text-align: center !important;
    padding: 0 20px 16px !important;
  }

  /* ── GOVERNANCE & PARTNERSHIPS ───────────────────────────────── */
  .vm-partner-box { display: none !important; }
  /* Governance and Partnerships headings/body handled by .vm-h2 and .vm-body above */
}