/* ============================================================
   How It Works Section — Sticky Title Block
   "From Consultation to Clean Energy in 4 Simple Steps"

   ROOT CAUSE:
   Framer's SSR CSS already sets position:sticky on .framer-1m8mjmi,
   but the page wrapper, component root, and section wrapper all use
   overflow:clip. Those ancestors prevent the title from sticking to
   the viewport while the taller cards column moves beside it.

   This file fixes those constraints on desktop only (≥ 810px).
   Mobile is untouched.
   ============================================================ */

@media (min-width: 810px) {

  /* Keep one real vertical scroll container. Framer's exported
     html/body overflow pair otherwise makes body the sticky reference
     even though window scrolling occurs on the document element. */
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.home-page {
    overflow: visible !important;
  }

  /* The title is nested inside both of these Framer roots. Sticky
     cannot engage while either ancestor clips its descendants. */
  .framer-yFX2h.framer-1syhkjb,
  .framer-WiXf4.framer-72rtr7 {
    overflow: visible !important;
    --overflow-clip-fallback: visible !important;
  }

  /* The exported markup flattens this root with display:contents,
     leaving sticky descendants with a zero-height containing block. */
  .framer-WiXf4.framer-72rtr7 {
    display: flex !important;
    width: 100% !important;
  }

  /* Remove overflow:clip from the section wrapper.
     Both the property and the CSS variable fallback are cleared. */
  .framer-WiXf4 .framer-h7qpa4,
  .framer-h7qpa4 {
    overflow: visible !important;
    --overflow-clip-fallback: visible !important;
  }

  /* Keep Framer's transform optimizations from introducing an
     unnecessary containing context around the cards column. */
  .framer-WiXf4 .framer-1c4x54c,
  .framer-1c4x54c {
    will-change: auto !important;
    --framer-will-change-override: auto !important;
    overflow: visible !important;
    --overflow-clip-fallback: visible !important;
  }

  /* Ensure the two-column container doesn't clip. */
  .framer-WiXf4 .framer-1ozau40,
  .framer-1ozau40 {
    overflow: visible !important;
  }

  /* Pin the full badge, heading, and description while cards scroll. */
  .framer-WiXf4 .framer-1m8mjmi,
  .framer-1m8mjmi {
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start !important;
    overflow: visible !important;
  }
}