/* Rebuild-only mobile fixes (loaded AFTER the Webflow CSS; scoped to <=991px so
 * desktop rendering is byte-for-byte unchanged).
 *
 * Two problems on phones, both from the Webflow IX2 runtime not fully settling
 * on mobile (the durable cure is the Phase-2 Framer Motion port; this is the
 * belt-and-braces until then):
 *
 * 1. HORIZONTAL OVERFLOW — decorative IX2 elements sit off-screen-right (a
 *    parallax slider image scaled 1.3x, animated accent lines, a fixed-bg color
 *    layer at ~2x viewport). They should animate INTO view but stay parked
 *    off-screen, widening the page so the hero clips left and a white gutter
 *    shows right. NOTE: `overflow-x: clip` on html/body (my first attempt)
 *    works in Chromium but Safari/iOS IGNORES it for fixed/absolute overflow —
 *    verified with a WebKit engine. The reliable fix is `overflow: hidden` at
 *    the SECTION level (the element's own clipping box), not the root.
 *
 * 2. NAV NOT COLLAPSING — only `.nav-links` (About/Insights/Contact) is hidden
 *    at <=991px; the inline `.nav-dropdown` menus (Insurance/Surety/Compliance)
 *    stayed visible, widening the nav and pushing the hamburger off-screen.
 *    Hide them so the nav is just logo + burger; the burger opens the
 *    `.fullscreen-menu` overlay which carries all six links (verified working).
 */
@media screen and (max-width: 991px) {
  /* Nav: collapse to logo + hamburger. */
  .nav-main .nav-dropdown {
    display: none !important;
  }

  /* Kill horizontal overflow. overflow:hidden (not clip) — Safari-safe. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Clip the sections whose IX2 decorations park off-screen. */
  .hero-3,
  .hero-image-block,
  .parallax-slider {
    overflow: hidden !important;
  }

  /* The fixed background layer is ~2x viewport; pin it and clip its contents. */
  .content-3-fixed-bg {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    overflow: hidden !important;
  }
}