/* MDI Access static export - shared behavior styles */
[data-dropdown-menu]{display:none;}
[data-dropdown-menu].is-open{display:block;}
.wedge-circle{background:#FFFFFF; transition:background 0.15s;}
.wedge-icon{stroke:#6B7280; transition:stroke 0.15s;}
.wedge-tooltip{opacity:0; transition:opacity 0.15s;}
.wedge-hover:hover + .wedge-tooltip{opacity:1;}
.wedge-hover:hover .wedge-circle{background:#EAF1F9;}
.wedge-hover:hover .wedge-icon{stroke:#1C5FA8;}
#bio-modal{display:none;}
#bio-modal.is-open{display:flex;}

/* ---------------------------------------------------------------------
   Mobile responsiveness pass
   The pages use a lot of inline px widths that were only ever checked on
   desktop. These rules fix the two real causes of horizontal overflow on
   phones, found by rendering every page at a 375px viewport and measuring
   scrollWidth vs. clientWidth.
   ------------------------------------------------------------------- */

/* 1) Several full-width sections combine "width: 100%" with left/right
      padding under the default content-box model, which adds the padding
      on top of 100% and overflows the viewport by exactly 2x the padding.
      border-box makes width:100% include the padding instead. */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Last-resort safety net: never let the page itself scroll sideways,
      even if a future edit reintroduces an oversized element. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg { max-width: 100%; }

@media (max-width: 680px) {
  /* The "Where This Fits" / "Services Executed" wedge-wheel diagram is a
     fixed 587x520 decorative component (a scaled-down 1128x1000 canvas).
     It appears identically on 28 pages. Shrink it to fit phone widths
     instead of letting it force the page wider than the screen. */
  div[style*="flex-shrink: 0; width: 587px; height: 520px"] {
    width: 260px !important;
    height: 230px !important;
  }
  div[style*="width: 1128px; height: 1000px; position: relative; transform: scale(0.52)"] {
    transform: scale(0.2305) !important;
  }
  .fits-row {
    padding: 24px !important;
    gap: 24px !important;
    justify-content: center !important;
  }

  /* The text column next to that diagram (and a few similar two-column
     sections) has a hard min-width floor of 260-320px, wider than most
     phone screens once padding is accounted for. Let it shrink to fit. */
  [style*="flex: 1; min-width: 320px"],
  [style*="flex: 1; min-width: 260px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Many content sections use a raw inline CSS Grid (image+text splits,
     icon/stat rows, stacked info panels) that was never given a mobile
     column count, unlike the few named grids (.solutions-grid etc.)
     the page already collapses at 860px. Grid columns don't wrap on
     their own, so these just got squeezed into unreadably narrow
     columns on a phone. Collapse any grid with 2+ equal columns down
     to one, unless the page's own class-based rule already handles it
     (those come later in the document and win the tie). */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(4,"],
  [style*="grid-template-columns: repeat(5,"] {
    grid-template-columns: 1fr !important;
  }
}