/* ====================================================================
 * SECTION ORDER ON NARROW WINDOWS (below 1025px)
 *
 * On a desktop the home page reads as an argument: first the promise, then
 * the tools we work with, then the proof. Columns side by side keep that
 * short. On a phone every one of those sections stacks, two screen heights
 * turn into six, and a reader looking for a proof scrolls for minutes past
 * explanations.
 *
 * So below 1025px the two halves change places: what proves (client logos,
 * reference slider, projects, services, certifications, client quotes) moves
 * to the front, what explains (process tools, why CartCraft) moves behind
 * it. The desktop is untouched, the query below does not reach it.
 *
 * HOW
 * The page root becomes a column and every section is given a number. The
 * document sequence stays the desktop one: order moves what is seen, not
 * what is read. Search engines and screen readers keep following the
 * document, which is harmless here because both arrangements are the same
 * page with the same headings.
 *
 * WHAT NEEDED CARE
 * A column of flex items no longer lets vertical margins collapse: where
 * normal flow keeps the larger of two margins, flex adds them up. All
 * thirteen sections were therefore measured at 768, 430 and 375 pixels: no
 * two neighbours carry a bottom and a top margin at the same time, so the
 * change leaves every gap as it was. Anyone adding a section here, or giving
 * one a margin, please measure again.
 *
 * Both language versions of the home page carry the same element ids, only
 * the page container differs, which is why every rule is written twice. A
 * section added later and not named here lands at the end through the
 * default below rather than accidentally at the very top.
 * ==================================================================== */

@media (max-width: 1024px) {

  .elementor-8073,
  .elementor-22000 {
    display: flex;
    flex-direction: column;
  }

  /* Default for anything not named below: last. */
  .elementor-8073 > .e-con,
  .elementor-22000 > .e-con { order: 90; }

  /* 1  hero, key figures, marquee, references */
  .elementor-8073 > [data-id="788cf5ff"],
  .elementor-22000 > [data-id="788cf5ff"] { order: 1; }

  /* 2  client logos */
  .elementor-8073 > [data-id="64749ca3"],
  .elementor-22000 > [data-id="64749ca3"] { order: 2; }

  /* 3  reference slider, Trust Our Results */
  .elementor-8073 > [data-id="6dccf451"],
  .elementor-22000 > [data-id="6dccf451"] { order: 3; }

  /* 4  Shopify and WordPress projects */
  .elementor-8073 > [data-id="32128717"],
  .elementor-22000 > [data-id="32128717"] { order: 4; }

  /* 5  services */
  .elementor-8073 > [data-id="4c71e65f"],
  .elementor-22000 > [data-id="4c71e65f"] { order: 5; }

  /* 6  team and certifications, one section, see the head of the php file */
  .elementor-8073 > [data-id="782070b9"],
  .elementor-22000 > [data-id="782070b9"] { order: 6; }

  /* 7  client quotes */
  .elementor-8073 > [data-id="164f1cdc"],
  .elementor-22000 > [data-id="164f1cdc"] { order: 7; }

  /* 8  IT security */
  .elementor-8073 > [data-id="22691b4c"],
  .elementor-22000 > [data-id="22691b4c"] { order: 8; }

  /* 9  process tools, with the #tools anchor as its first child */
  .elementor-8073 > [data-id="c711a0d5"],
  .elementor-22000 > [data-id="c711a0d5"] { order: 9; }

  /* 10  why CartCraft */
  .elementor-8073 > [data-id="5da8cd69"],
  .elementor-22000 > [data-id="5da8cd69"] { order: 10; }

  /* 11  about CartCraft */
  .elementor-8073 > [data-id="7882a8a"],
  .elementor-22000 > [data-id="7882a8a"] { order: 11; }

  /* 12  charity banner */
  .elementor-8073 > [data-id="97f1c8b1"],
  .elementor-22000 > [data-id="97f1c8b1"] { order: 12; }

  /* 13  blog teaser */
  .elementor-8073 > [data-id="7d229a5b"],
  .elementor-22000 > [data-id="7d229a5b"] { order: 13; }
}