/* SXM homepage pillars — the sticky stage (desktop only; the phone/tablet stack is untouched). CLAUDE.md §51.
   .sxm-services = the TRACK: one viewport of stage plus (N-1) steps of scroll.
   .sxm-pillars-stage = the STAGE: sticky under the header, exactly one viewport tall, the three columns
   centred in it. The browser positions it; the script only reads progress. */
@media (min-width: 1025px){
  body:not(.elementor-editor-active) .elementor-16061 .e-con.sxm-services{
    --hd: var(--sxm-hd-h, 97px);                  /* the fixed desktop header's real height (§60: the homepage bar is taller) */
    --stage: calc(100vh - var(--hd));
    --step: max(360px, 60vh);                     /* scroll distance per pillar */
    display: block;
    height: calc(var(--stage) + (var(--n, 5) - 1) * var(--step));
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
  body:not(.elementor-editor-active) .elementor-16061 .e-con.sxm-pillars-stage{
    position: -webkit-sticky; position: sticky !important; top: var(--hd);
    height: var(--stage); box-sizing: border-box;
    /* the columns are 75vh (the section's own rule): centre them in the stage */
    padding-top: calc((var(--stage) - 75vh) / 2) !important; padding-bottom: 0 !important;
    z-index: 10;
  }
  .sxm-services .sxm-service-item,
  .sxm-services .sxm-text-item{ transition: opacity .45s ease; }
  .sxm-services .sxm-media-item{ transition: opacity .55s ease; }
  /* while the stage is up the header stays (its scroll-down hide would leave a 97px void above the stage) */
  body.sxm-pillars-pinned.sxm-hd-hidden .sxm-hd{ transform: none !important; }
}
/* tablet + phone: the track is a plain section again; a column flex container with Elementor's default
   flex-wrap:wrap sizes its child to its intrinsic height (§37.1), so the wrap is off at every level */
@media (max-width: 1024px){
  .elementor-16061 .e-con.sxm-services,
  .elementor-16061 .e-con.sxm-pillars-stage{ flex-wrap: nowrap; height: auto; }
  .elementor-16061 .e-con.sxm-pillars-stage{ position: relative; top: auto; padding: 0; width: 100%; }
}