/* ── Hero graphic boil — two frames swapped on a hard cut ─────────────────
   divi/group `.hero-boil` holding two divi/image modules on dynamic content
   `hero_graphic_1` and `hero_graphic_2` (Interior Hero ACF group), frame 2
   carrying `.hero-boil__frame2`. Both frames sit in the same grid cell, so they
   are the same size whatever the group's width and padding.
   Keep the hard cut — a cross-fade paints both positions at once and reads as
   misregistered printing. --hero-boil-speed is the full two-frame cycle. */

.hero-boil {
  --hero-boil-speed : 1.2s;

  /* Overrides the Divi group's flex so both frames stack instead of sitting
     one after the other. */
  display : grid;
}

.hero-boil > * {
  grid-area : 1 / 1;   /* every child occupies the same cell */
}

.hero-boil__frame2 {
  pointer-events : none;   /* never steals a click from anything beneath */
  animation      : hero-boil var(--hero-boil-speed) steps(1) infinite;
}

@keyframes hero-boil {
  0%,      50%  { opacity: 0; }   /* frame 1 visible */
  50.001%, 100% { opacity: 1; }   /* frame 2 visible */
}

/* Reduced motion — hold frame 1. */
@media (prefers-reduced-motion: reduce) {
  .hero-boil__frame2 {
    animation : none;
    opacity   : 0;
  }
}

/* ── Hero stack order (≤980px) — red panel between the two blue cards ─────
   `display: contents` drops the wrapping column's box so its two cards become
   flex items of the ROW, alongside the red column, where the modules' native
   Order settings do the reordering. The row's row-gap then spaces all three. */

@media (max-width: 980px) {
  .hero-stack-swap {
    display : contents;
  }
}


/* ── Keep the hero squiggle from widening the page ────────────────────────
   The squiggle module is absolutely positioned and `calc(100% + 5rem)` wide,
   so it deliberately runs past its column. On phones that column is nearly
   full-bleed, so those 5rem land off-screen and the page picks up a horizontal
   scrollbar — 12px at 600, 33px at 390, 36px at 360. The part that escapes is
   a cream stroke on a white background, invisible, so clipping it costs
   nothing.

   `clip`, not `hidden`: `overflow-x: hidden` forces `overflow-y` to compute to
   `auto`, making the section a scroll container and cutting vertical bleeds —
   including the one css/animations.css sets up below 981px, where a drawing
   runs on past its column's bottom edge. `clip` is the one value that pairs
   with `visible`.

   Scoped by `.hero-boil` so it lands on the interior hero — every page using
   that global layout — and never on the Home hero, which has no overflow. */

.et_pb_section:has( .hero-boil ) {
  overflow-x : clip;
}