/* == Zen bamboo deco - mobile sizing/position fix ==
   The per-page inline CSS mistakenly pins BOTH bamboo to right:0 at 200px
   on mobile, so they overlapped the text. This makes them narrow and keeps
   them at the very edges. Note: the stalks sit at x=22/x=68 inside a 160-wide
   viewBox (and x=166/x=120 in a 200-wide one), so do NOT use negative
   left/right offsets here - that pushes the stalks off screen entirely.
   Higher specificity so it wins over the inline page rule. */
@media (max-width: 768px) {
  .zen-bg-overlay .zen-bamboo-left {
    left: 0;
    right: auto;
    width: 64px;
    opacity: 0.12;
  }
  .zen-bg-overlay .zen-bamboo-right {
    right: 0;
    left: auto;
    width: 64px;
    opacity: 0.12;
  }
}
@media (max-width: 420px) {
  .zen-bg-overlay .zen-bamboo-left {
    width: 56px;
  }
  .zen-bg-overlay .zen-bamboo-right {
    width: 56px;
  }
}


/* ================================================================
   MOBILE RESPONSIVE FIX  —  added 2026
   Fixes: 2-column (text + image) sections squashing on phones,
          video frames overflowing their purple box,
          pale eyebrow text on dark purple cards.
   Works automatically on every page, including new ones.
   ================================================================ */

/* --- A. VIDEO FRAMES: video fills its box, never spills --------- */
div[style*="padding-top:56.25%"],
div[style*="padding-top: 56.25%"] {
    overflow: hidden !important;
}

div[style*="padding-top:56.25%"] > iframe,
div[style*="padding-top: 56.25%"] > iframe,
.video-frame > iframe:not([style*="transform"]) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
}

/* --- B. TABLET & MOBILE: stack side-by-side sections ----------- */
@media (max-width: 900px) {

    /* text + image sections become one column, text then image */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* let content shrink instead of forcing a wide column */
    div[style*="grid-template-columns"] > * {
        min-width: 0 !important;
    }

    /* images fill the column width */
    div[style*="grid-template-columns"] img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* stat cards + footer sitemap look better 2-across */
    div[style*="repeat(4"],
    div[style*="repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* --- C. Eyebrow text on dark purple cards: legible gold -------- */
div[style*="#4A2D78"] p[style*="lavender"],
div[style*="#5E3B8C"] p[style*="lavender"],
div[style*="#4a2d78"] p[style*="lavender"],
div[style*="#5e3b8c"] p[style*="lavender"] {
    color: #F2E7C9 !important;
    opacity: 1 !important;
}