/* ---------------------------------------------------------------------------
   Responsive corrections — 2026-09-02

   Three horizontal-overflow bugs carried over from the Webflow export, each
   found by measuring document.scrollWidth against the viewport in Chrome at
   320 / 375 / 414 / 768 / 991 / 1280px across all 15 pages.

   Loaded AFTER loominatelabs.webflow.shared.css so these rules win, and kept
   in a separate file so the export stays untouched and this is easy to revert.
   --------------------------------------------------------------------------- */

/* 1. Off-screen scroll-in animations.
      Webflow's interactions park elements to the right with translateX and
      slide them in on scroll. Until they trigger, they extend the document
      sideways — on the service pages by 480px at 375px wide, which is what
      produces a horizontally scrollable page and shrunken-looking text.

      `clip` rather than `hidden`: hidden makes the body a scroll container,
      which silently breaks position:sticky. clip contains the overflow with
      no such side effect. */
html,
body {
  overflow-x: clip;
}

/* 2. Homepage hero image.
      .image-31 set max-width:none inside @media (max-width:479px), defeating
      Webflow's own img{max-width:100%} and forcing the whole document to
      685px on every phone. Its parent has overflow:clip but width:auto, so it
      sized to the image instead of clipping it — constrain the parent, and
      let the image scale with its aspect ratio intact. */
@media screen and (max-width: 767px) {
  .div-block-126 {
    max-width: 100%;
  }

  .image-31 {
    max-width: 100%;
    height: auto;
  }
}

/* 3. Tablet-width flex row.
      .content_horizontal is display:flex with no wrapping; at 768–991px its
      children refuse to shrink and push the About page out to 1102px.
      Allowing the row to wrap lets the columns stack instead. */
@media screen and (max-width: 991px) {
  .content_horizontal {
    flex-wrap: wrap;
  }
}

/* 4. Animation initial states that never resolve on phones.
      The export bakes Webflow's IX2 starting state into the HTML as inline
      style: transform:translate3d(500px,0,0) with opacity:0. On desktop and
      tablet the scroll interaction runs and slides the panel in. Below 768px
      that interaction is not configured, so the starting state is applied and
      never animated away — leaving the service copy permanently invisible and
      500px off-screen.

      Measured on all four service pages at 375px: opacity 0, left 520px.
      Resetting the initial state renders them in place, without animation.
      Scoped to <=767px so the working tablet and desktop animations are
      untouched. !important is required to beat the inline style. */
@media screen and (max-width: 767px) {
  .services_corepackage_wrap,
  .services_options {
    opacity: 1 !important;
    transform: none !important;
  }
}