/**
 * Block: hero-shell (patterns/hero-shell.php)
 *
 * Composed homepage hero, layered:
 *   1. wave-2-decor.svg — CSS background on the hero visual
 *      (≥601px: center crop at ~125%→108% width so more of the art shows than
 *      `cover`; ≤600px: fixed 600px-wide centered crop; ≤450px lifts the wave
 *      ~30px so it intersects the bin more like desktop; mobile icons+bin
 *      cluster may run ~40–48px wider than the top soft-measure)
 *   2. hero-icon-*.svg — three benefit icons (stagger float-up)
 *   3. trash-bin-final.svg — branded bin (smooth wave-ride entrance)
 *   4. Homepage-Hero-side-sparkles.svg — fade in staggered, then continuous pulse
 *      Logo sparkles stay baked into trash-bin-final.svg and are never animated.
 *      Mobile crops the composition to the icons+bin band, sized like the top
 *      brand measure, so art stays locked and fills the stage width.
 * Logo/description overlay in the left field; CTAs in the dark-blue field.
 * Icons/bin/logo cluster caps at the ~1250px-viewport composition size
 * (~1210px after side pads) so wider screens show more wave on the sides
 * instead of growing the trash can / icons / left copy.
 *
 * Divider seam (hero → media explainer): top fill matches wave navy `#00225C`,
 * bottom stays `surface-soft`. Keep that seam in sync if the art bottom color changes.
 *
 * Shared utilities used by other page heroes: `.tidal-wave-hero__lead`,
 * `.tidal-wave-hero__actions`.
 */

/* ——— Shared (about / page heroes) ——— */

.tidal-wave-hero__lead {
  max-width: 34rem;
  margin-block: var(--tidal-wave-block-gap);
}

.tidal-wave-hero__actions {
  display: flex;
  flex-wrap: wrap;
  /* Tighter stack when buttons sit one above the other. */
  column-gap: var(--tidal-wave-block-gap);
  row-gap: 0.55rem;
  margin-block-start: var(--tidal-wave-copy-action-gap);
}

/* ——— Composed homepage hero ——— */

.tidal-wave-hero--composed.tidal-wave-wave-section {
  /*
   * Wave crop width (≥601px): still center-zoomed, but shows more of the SVG
   * than `cover` (~162% wide). Eases further out on larger viewports.
   * ≤600px overrides to a fixed 600px centered crop.
   */
  --tidal-wave-hero-wave-width: 125%;
  position: relative;
  z-index: auto;
  /*
   * Clip both axes. Mixing overflow-x:clip with overflow-y:visible makes
   * overflow-y compute to auto (CSS overflow quirk) and the navy/CTA band
   * becomes an inner scrollport when the bin overhangs.
   */
  overflow: clip;
  isolation: auto;
  background: #ffffff !important;
  color: var(--wp--preset--color--ink);
  border-radius: 0 !important;
  --tidal-wave-hero-navy: #00225c;
  --tidal-wave-hero-art-ratio: 2880 / 1440;
  /*
   * Lock the composition at the proportions seen near a 1250px-wide viewport
   * (cluster = 1250 − 2×20px side pads). Wider screens keep this size centered
   * and reveal more wave decor on the sides.
   */
  --tidal-wave-hero-cluster-max: var(--tidal-wave-home-content-max);
  --tidal-wave-hero-cluster-half: calc(var(--tidal-wave-home-content-max) / 2);
  /*
   * Outer side gutters: hold cluster at max until padding hits ~20px
   * (viewport ≈ cluster-max + 40px), then let content shrink below that.
   */
  --tidal-wave-hero-side-pad-min: 20px;
  /* Inset brand + cluster art from both edges (keeps bin/sparkles from clipping). */
  --tidal-wave-hero-inline-pad: 0.065;
  /* Slightly slower reveal for logo / copy / CTAs / benefit icons. */
  --tidal-animate-duration: 0.9s;
  --tidal-animate-stagger: 95ms;
}

.tidal-wave-hero--composed .tidal-wave-hero__lead {
  max-width: min(100%, 416px);
}

.tidal-wave-hero--composed .tidal-animate-stagger--wide {
  --tidal-animate-stagger: 145ms;
}

.tidal-wave-hero--composed .tidal-wave-hero__stage,
.tidal-wave-hero--composed .tidal-wave-hero__cluster,
.tidal-wave-hero--composed .tidal-wave-hero__copy,
.tidal-wave-hero--composed .tidal-wave-hero__brand,
.tidal-wave-hero--composed .tidal-wave-hero__icons,
.tidal-wave-hero--composed .tidal-wave-hero__actions-band {
  border-radius: 0 !important;
}

.tidal-wave-hero--composed.tidal-wave-wave-section + .wp-block-tidal-wave-wave-divider,
.tidal-wave-hero--composed.tidal-wave-wave-section + .tidal-wave-wave-divider--split {
  position: relative;
  z-index: auto;
  border-radius: 0 !important;
}

.tidal-wave-hero--composed.tidal-wave-wave-section + .tidal-wave-wave-divider--split
  .tidal-wave-wave-divider__band--top
  .tidal-wave-wave-divider__top,
.tidal-wave-hero--composed.tidal-wave-wave-section + .wp-block-tidal-wave-wave-divider
  .tidal-wave-wave-divider__band--top
  .tidal-wave-wave-divider__top {
  color: var(--tidal-wave-hero-navy, #00225c) !important;
}

.tidal-wave-hero--composed.tidal-wave-wave-section + .tidal-wave-wave-divider--split
  .tidal-wave-wave-divider__band--bottom
  .tidal-wave-wave-divider__bottom,
.tidal-wave-hero--composed.tidal-wave-wave-section + .wp-block-tidal-wave-wave-divider
  .tidal-wave-wave-divider__band--bottom
  .tidal-wave-wave-divider__bottom {
  color: var(--wp--preset--color--surface-soft, #b6d7fa) !important;
}

.tidal-wave-hero--composed .tidal-wave-hero__stage {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.tidal-wave-hero--composed .tidal-wave-hero__visual {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: clip;
  /* theme.json gives core/group 24px radius — must stay square at the divider seam */
  border-radius: 0 !important;
  background-color: #ffffff;
  background-image:
    url("../../images/wave-2-decor.svg"),
    linear-gradient(
      to top,
      var(--tidal-wave-hero-navy, #00225c) 0,
      var(--tidal-wave-hero-navy, #00225c) 40px,
      transparent 40px
    );
  background-repeat: no-repeat;
  /* Center-cropped; width token controls how much of the wave is visible. */
  background-position: center bottom, center bottom;
  background-size: var(--tidal-wave-hero-wave-width, 125%) auto, 100% 100%;
}

/* Progressively show more of the wave as the viewport widens. */
@media (min-width: 900px) {
  .tidal-wave-hero--composed.tidal-wave-wave-section {
    --tidal-wave-hero-wave-width: 118%;
  }
}

@media (min-width: 1200px) {
  .tidal-wave-hero--composed.tidal-wave-wave-section {
    --tidal-wave-hero-wave-width: 112%;
  }
}

@media (min-width: 1600px) {
  .tidal-wave-hero--composed.tidal-wave-wave-section {
    --tidal-wave-hero-wave-width: 108%;
  }
}

@media (min-width: 1800px) {
  .tidal-wave-hero--composed.tidal-wave-wave-section {
    --tidal-wave-hero-wave-width: 104%;
  }
}

@media (min-width: 2200px) {
  .tidal-wave-hero--composed.tidal-wave-wave-section {
    --tidal-wave-hero-wave-width: 100%;
  }
}

/*
 * Ultra-wide: keep the wave seated on the bottom edge of the hero.
 */
@media (min-width: 2900px) {
  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    background-position: center bottom, center bottom;
  }
}

.tidal-wave-hero--composed .tidal-wave-hero__cluster {
  /*
   * Cap at --tidal-wave-hero-cluster-max (~1250px layout). Below that, width =
   * 100% − 40px so padding floors at 20px and content may scale down.
   */
  --tidal-wave-hero-cluster-width: min(
    var(--tidal-wave-hero-cluster-max),
    calc(100% - 2 * var(--tidal-wave-hero-side-pad-min))
  );
  position: relative;
  z-index: 1;
  width: var(--tidal-wave-hero-cluster-width);
  max-width: var(--tidal-wave-hero-cluster-max);
  margin-inline: auto;
  line-height: 0;
  aspect-ratio: var(--tidal-wave-hero-art-ratio);
}

.tidal-wave-hero--composed .tidal-wave-hero__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--tidal-wave-hero-art-ratio);
  pointer-events: none;
  user-select: none;
}

/* Benefit icons — positioned within the 2880×1440 composition frame. */
.tidal-wave-hero--composed .tidal-wave-hero__guides {
  display: none !important; /* removed; hide leftovers until Sync Layouts */
}

.tidal-wave-hero--composed .tidal-wave-hero__icons {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.tidal-wave-hero--composed .tidal-wave-hero__icon {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.tidal-wave-hero--composed .tidal-wave-hero__icon img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left top;
}

.tidal-wave-hero--composed .tidal-wave-hero__icon--steam {
  left: 40.97%;
  top: 22%;
  width: 21.53%;
}

.tidal-wave-hero--composed .tidal-wave-hero__icon--bacteria {
  left: 40.97%;
  top: 36%;
  width: 21.53%;
}

.tidal-wave-hero--composed .tidal-wave-hero__icon--odors {
  left: 40.97%;
  top: 52%;
  width: 21.53%;
}

/* Branded bin — rests on the wave; rides in smoothly from upper-right on inview. */
.tidal-wave-hero--composed .tidal-wave-hero__bin {
  position: absolute;
  z-index: 3;
  left: 64.5%;
  top: 7.5%;
  width: 29%;
  height: auto;
  max-height: 82%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate3d(38%, -18%, 0) rotate(-6deg);
  transform-origin: 40% 75%;
  transition:
    transform 1.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.tidal-wave-hero--composed .tidal-wave-hero__bin img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: 82%;
  object-fit: contain;
  object-position: bottom center;
}

/* Side sparkles — stay in place; each fades in staggered, then pulses. */
.tidal-wave-hero--composed .tidal-wave-hero__sparkles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.tidal-wave-hero--composed .tidal-wave-hero__sparkles-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tidal-wave-hero--composed .tidal-wave-hero__sparkle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.33, 0.0, 0.2, 1);
}

/* Blue outline on the left white sparkle — mobile only (wave contrast). */
.tidal-wave-hero--composed .tidal-wave-hero__sparkle--outline {
  stroke: none;
  stroke-width: 0;
}

@media (max-width: 979px) {
  .tidal-wave-hero--composed .tidal-wave-hero__sparkle--outline {
    stroke: #7ba8e8;
    stroke-width: 5;
    stroke-linejoin: round;
  }
}

.tidal-wave-hero--composed .tidal-wave-hero__sr-benefits {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Desktop / tablet landscape: left copy column (logo → description → CTAs)
 * locks to the inset cluster; wave stays full-bleed behind.
 */
@media (min-width: 980px) {
  .tidal-wave-hero--composed .tidal-wave-hero__stage {
    --tidal-wave-hero-cluster-width: min(
      var(--tidal-wave-hero-cluster-max),
      calc(100vw - 2 * var(--tidal-wave-hero-side-pad-min))
    );
    min-height: 0;
  }

  /*
   * Same top inset as other page heroes (.tidal-wave-wave-panel padding-block).
   * Keeps left title + right bin art aligned under one shared margin.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    padding-top: var(--tidal-wave-section-padding);
    box-sizing: border-box;
    /* Lift wave + cluster art; copy stays pinned via absolute top below. */
    top: -20px;
    margin-bottom: -20px;
  }

  /*
   * ~20px shorter on desktop without touching padding/margins.
   * Base art is 2880×1440; 1400 cuts ~23px at the locked cluster max.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__cluster,
  .tidal-wave-hero--composed .tidal-wave-hero__frame {
    aspect-ratio: 2880 / 1400;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__copy {
    position: absolute;
    z-index: 2;
    left: calc(
      50% - (var(--tidal-wave-hero-cluster-width) / 2) +
        var(--tidal-wave-hero-cluster-width) * var(--tidal-wave-hero-inline-pad)
    );
    top: var(--tidal-wave-section-padding);
    width: calc(var(--tidal-wave-hero-cluster-width) * 0.32);
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Same global text → button measure as other blocks (not cluster %). */
    gap: var(--tidal-wave-copy-action-gap);
    box-sizing: border-box;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__brand {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tidal-wave-title-support-gap);
    box-sizing: border-box;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__title {
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__lead {
    max-width: min(100%, 416px);
    margin-block: 0;
    font-size: var(--wp--preset--font-size--md, 1.125rem);
    line-height: 1.5;
    color: var(--wp--preset--color--primary, #0b4093);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions-band {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions,
  .tidal-wave-hero--composed .wp-block-buttons.tidal-wave-hero__actions {
    position: static;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* Gap lives on .tidal-wave-hero__copy — don’t double the global action margin. */
    margin-block-start: 0 !important;
    max-width: 100%;
    width: 100%;
    /* Match stacked Schedule / How It Works rhythm on mid-desktop. */
    row-gap: 0.55rem;
    column-gap: 0;
    transition-delay: 200ms;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions.tidal-animate:not(.is-inview) {
    transition-delay: 0ms;
  }
}

/*
 * Mid desktop: tighten brand stack so Schedule / How It Works
 * still fit below the description inside the left copy column.
 */
@media (min-width: 980px) and (max-width: 1355px) {
  .tidal-wave-hero--composed .tidal-wave-hero__lead {
    font-size: clamp(0.9rem, 1.35vw, 1.05rem);
  }
}

/*
 * Mobile: brand title + description on top → taller icons/bin/wave
 * art (mobile cluster omits vertical rule) → centered side-by-side CTAs.
 * Matches About hero stacked breakpoint (979px).
 */
@media (max-width: 979px) {
  .tidal-wave-hero--composed .tidal-wave-hero__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    row-gap: 0;
    background: #ffffff;
    overflow: clip;
  }

  /* Let brand / visual / actions order independently on mobile. */
  .tidal-wave-hero--composed .tidal-wave-hero__copy {
    display: contents;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__brand {
    order: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.85rem, 3.5vw, 1.25rem);
    /* Match other page-hero panel top padding. */
    padding: var(--tidal-wave-section-padding) var(--tidal-wave-gutter-inline)
      clamp(0.4rem, 1.8vw, 0.75rem);
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Soft-measure comes from global/tokens.css + global/responsive.css. */
  .tidal-wave-hero--composed .tidal-wave-hero__title {
    width: 100%;
    max-width: min(100%, var(--tidal-wave-measure-sm, 20rem));
    margin: 0 auto;
    text-align: center;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__lead {
    flex: 0 0 auto;
    min-width: 0;
    margin-block: 0;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
    line-height: 1.5;
    color: var(--wp--preset--color--primary, #0b4093);
    text-align: center;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    order: 2;
    position: relative;
    /* Above the navy CTA band so the bin is never painted underneath it. */
    z-index: 3;
    width: 100%;
    max-width: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline: 0;
    /*
     * Clip both axes — overflow-x:hidden + overflow-y:visible creates a
     * scrollable bottom when the bin/icons overhang the art stage.
     */
    overflow: clip;
    /*
     * Art stage only — no navy padding under the wave. The CTA navy band is a
     * separate sibling below this visual so it cannot float into the hero.
     *
     * 601–979px: same fluid center-crop as desktop (token above).
     * ≤600px: fixed 600px-wide centered crop.
     */
    aspect-ratio: auto;
    min-height: clamp(17.5rem, 78vw, 24rem);
    padding-bottom: 0;
    box-sizing: border-box;
    background-color: #ffffff;
    background-image:
      url("../../images/wave-2-decor.svg"),
      linear-gradient(
        to top,
        var(--tidal-wave-hero-navy, #00225c) 0,
        var(--tidal-wave-hero-navy, #00225c) 8px,
        transparent 8px
      );
    background-repeat: no-repeat;
    background-position: center bottom, center bottom;
    background-size: var(--tidal-wave-hero-wave-width, 125%) auto, 100% 100%;
  }

  /* Kill leftover seam fillers; navy bottom strip is in background-image above. */
  .tidal-wave-hero--composed .tidal-wave-hero__visual::before,
  .tidal-wave-hero--composed .tidal-wave-hero__visual::after {
    display: none;
  }

  /*
   * Mobile art: crop the 2880×1440 composition to the icons+bin band.
   * Cluster runs ~40px wider than the top soft-measure so icons/bin read larger
   * while percentage layout keeps icon↔bin spacing locked.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__cluster {
    --tidal-wave-hero-mobile-crop-start: 0.385;
    --tidal-wave-hero-mobile-crop-span: 0.57;
    --tidal-wave-hero-mobile-art-inset: var(--tidal-wave-gutter-inline);
    /* Top copy soft-caps at measure-sm; art may exceed it by ~40px. */
    --tidal-wave-hero-mobile-art-max: calc(
      var(--tidal-wave-measure-sm, 20rem) + 2.5rem
    );
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 5%;
    width: min(
      calc(100% - 2 * var(--tidal-wave-hero-mobile-art-inset)),
      var(--tidal-wave-hero-mobile-art-max)
    );
    max-width: calc(100% - 2 * var(--tidal-wave-hero-mobile-art-inset));
    height: auto;
    margin: 0;
    /* Cropped composition aspect (full 2:1 frame × visible span). */
    aspect-ratio: calc(2880 * var(--tidal-wave-hero-mobile-crop-span)) / 1440;
    transform: translateX(-50%);
    display: block;
    box-sizing: border-box;
    overflow: visible;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__frame {
    display: none;
  }

  /*
   * Expand icons + sparkles to the full composition coordinate space, shifted
   * so the crop window shows only the icons→bin band.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__icons,
  .tidal-wave-hero--composed .tidal-wave-hero__sparkles {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: calc(100% / var(--tidal-wave-hero-mobile-crop-span)) !important;
    left: calc(
      -100% * var(--tidal-wave-hero-mobile-crop-start) /
        var(--tidal-wave-hero-mobile-crop-span)
    ) !important;
    right: auto !important;
    margin: 0 !important;
    display: block !important;
    flex: none !important;
    transform: none !important;
    overflow: visible;
    pointer-events: none;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__sparkles {
    z-index: 7;
    transform: translateY(20px) !important;
  }

  /*
   * Nudge the three benefit icons down on mobile so the icon stack’s vertical
   * center lines up with the trash bin’s center (~40px).
   */
  .tidal-wave-hero--composed .tidal-wave-hero__icons {
    z-index: 5;
    transform: translateY(40px) !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__sparkles-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__sparkles-left {
    transform: none;
  }

  /* Remap bin into the crop window (same relative seat as desktop). */
  .tidal-wave-hero--composed .tidal-wave-hero__bin {
    position: absolute !important;
    /* +40px width / −20px left = ~20px growth on each side; top stays put so growth goes down. */
    left: calc(
      (0.645 - var(--tidal-wave-hero-mobile-crop-start)) /
        var(--tidal-wave-hero-mobile-crop-span) * 100% - 20px
    ) !important;
    top: 7.5% !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(
      (0.29 / var(--tidal-wave-hero-mobile-crop-span) * 100%) + 40px
    ) !important;
    max-width: none !important;
    height: auto !important;
    /* Was 82% — raise so the taller bin is not clipped as it grows downward. */
    max-height: calc(82% + 40px) !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: top center;
    transform: none !important;
    transform-origin: top center;
    z-index: 6;
    flex: none !important;
  }

  .tidal-wave-hero--composed.is-inview .tidal-wave-hero__bin {
    transform: none !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__bin img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__icon,
  .tidal-wave-hero--composed .tidal-wave-hero__icon--steam,
  .tidal-wave-hero--composed .tidal-wave-hero__icon--bacteria,
  .tidal-wave-hero--composed .tidal-wave-hero__icon--odors {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
    transform: none !important;
    transform-origin: center center;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__icon--steam {
    left: 40.97% !important;
    top: 11.11% !important;
    width: 21.53% !important;
    max-width: none !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__icon--bacteria {
    left: 40.97% !important;
    top: 27.78% !important;
    width: 21.53% !important;
    max-width: none !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__icon--odors {
    left: 40.97% !important;
    top: 45.83% !important;
    width: 21.53% !important;
    max-width: none !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__icons.tidal-animate-stagger > .tidal-wave-hero__icon,
  .tidal-wave-hero--composed .tidal-wave-hero__icons.tidal-animate-stagger.is-inview > .tidal-wave-hero__icon {
    transform: none !important;
  }

  /*
   * Navy CTA band lives only under the art stage (never inside / over the wave).
   * Band itself stays put; only the button children float in.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__actions-band {
    order: 3;
    position: relative;
    /* Keep below the visual/bin layer. */
    z-index: 1;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    /*
     * Overlap the art stage + paint a 1px navy line above the band so
     * subpixel/retina hairlines of stage white can’t show at the seam.
     */
    margin: -4px 0 0;
    padding: calc(0.85rem + 4px) var(--tidal-wave-gutter-inline, clamp(1rem, 4vw, 1.5rem)) 1.5rem;
    background: var(--tidal-wave-hero-navy, #00225c);
    box-shadow: 0 -1px 0 0 var(--tidal-wave-hero-navy, #00225c);
    box-sizing: border-box;
    transform: none !important;
    opacity: 1 !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions-band .tidal-wave-hero__actions {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.45rem;
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    /* Prevent the actions' tidal-animate transform from moving the navy band. */
    opacity: 1 !important;
    transform: none !important;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions-band .tidal-wave-hero__actions > .wp-block-button {
    opacity: 0;
    transform: translate3d(0, var(--tidal-animate-distance, 1.25rem), 0);
    transition:
      opacity var(--tidal-animate-duration, 0.65s) var(--tidal-animate-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      transform var(--tidal-animate-duration, 0.65s) var(--tidal-animate-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions-band .tidal-wave-hero__actions.is-inview > .wp-block-button {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /*
   * Fallback if the band wrapper is missing from synced content: keep the navy
   * rectangle visible and float only the button children.
   */
  .tidal-wave-hero--composed .tidal-wave-hero__stage > .tidal-wave-hero__actions.tidal-animate {
    order: 3;
    position: relative;
    flex: 0 0 auto;
    opacity: 1 !important;
    transform: none !important;
    background: var(--tidal-wave-hero-navy, #00225c);
    box-shadow: 0 -1px 0 0 var(--tidal-wave-hero-navy, #00225c);
    padding: 0.85rem var(--tidal-wave-gutter-inline, clamp(1rem, 4vw, 1.5rem)) 1.5rem;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__stage > .tidal-wave-hero__actions.tidal-animate
    > .wp-block-button {
    opacity: 0;
    transform: translate3d(0, var(--tidal-animate-distance, 1.25rem), 0);
    transition:
      opacity var(--tidal-animate-duration, 0.65s) var(--tidal-animate-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      transform var(--tidal-animate-duration, 0.65s) var(--tidal-animate-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .tidal-wave-hero--composed .tidal-wave-hero__stage > .tidal-wave-hero__actions.tidal-animate.is-inview
    > .wp-block-button {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button__link {
    width: auto;
    max-width: none;
    min-width: 0;
    padding-inline: clamp(0.85rem, 3.5vw, 1.35rem);
    justify-content: center;
    white-space: nowrap;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button.is-style-outline .wp-block-button__link,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .tidal-wave-btn-outline .wp-block-button__link {
    color: var(--wp--preset--color--surface, #ffffff) !important;
    border-color: var(--wp--preset--color--surface, #ffffff) !important;
    background: transparent !important;
  }

  /* Restore global outline hover (light blue) — transparent rest state above wins otherwise. */
  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button.is-style-outline .wp-block-button__link:hover,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button.is-style-outline .wp-block-button__link:active,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .tidal-wave-btn-outline .wp-block-button__link:hover,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .tidal-wave-btn-outline .wp-block-button__link:focus-visible,
  .tidal-wave-hero--composed .tidal-wave-hero__actions .tidal-wave-btn-outline .wp-block-button__link:active {
    background: var(--wp--preset--color--surface-soft, #b6d7fa) !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--surface, #ffffff) !important;
  }
}

@media (max-width: 600px) {
  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    min-height: clamp(16.5rem, 82vw, 22rem);
    /* Fixed 600px wave, centered — zooms into the middle below 600px. */
    background-size: 600px auto, 100% 100%;
    background-position: center bottom, center bottom;
  }
}

/* Mid mobile / large phone — a touch more bottom clearance when there’s room. */
@media (min-width: 551px) and (max-width: 979px) {
  .tidal-wave-hero--composed .tidal-wave-hero__cluster {
    bottom: 6%;
  }
}

/* Narrow phones: title scales with soft-measure; raise wave; widen art for ~140px icons. */
@media (max-width: 450px) {
  .tidal-wave-hero--composed .tidal-wave-hero__title {
    max-width: 100%;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__cluster {
    /*
     * Tighter side inset than the brand gutters so the icons+bin band can use
     * the extra ~40–48px vs the top soft-measure (icons land near ~140px).
     * Relative % placement keeps distance to the bin unchanged.
     */
    --tidal-wave-hero-mobile-art-inset: 0.5rem;
    --tidal-wave-hero-mobile-art-max: calc(
      var(--tidal-wave-measure-sm, 20rem) + 3rem
    );
  }

  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    /*
     * Lift the wave ~30px so the crest cuts the bin more like desktop.
     * Navy fill under the raised art prevents a white gap above the CTA band.
     */
    background-position: center calc(100% - 30px), center bottom;
    background-image:
      url("../../images/wave-2-decor.svg"),
      linear-gradient(
        to top,
        var(--tidal-wave-hero-navy, #00225c) 0,
        var(--tidal-wave-hero-navy, #00225c) 36px,
        transparent 36px
      );
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions-band {
    /* Taller navy under the CTAs; overlap past the raised wave + 1px buffer. */
    margin-top: -34px;
    padding-top: calc(0.85rem + 34px);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__stage > .tidal-wave-hero__actions.tidal-animate {
    margin-top: -34px;
    padding-top: calc(0.85rem + 34px);
  }
}

@media (max-width: 500px) {
  .tidal-wave-hero--composed .tidal-wave-hero__brand {
    padding: var(--tidal-wave-section-padding) var(--tidal-wave-gutter-inline)
      clamp(0.35rem, 1.5vw, 0.65rem);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__visual {
    min-height: clamp(16rem, 86vw, 21rem);
    padding-bottom: 0;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__cluster {
    bottom: 4%;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions {
    column-gap: 0.55rem;
    row-gap: 0.4rem;
    padding-inline: var(--tidal-wave-gutter-inline, 1rem);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button__link {
    padding-inline: 0.75rem;
    font-size: 0.8rem;
  }
}

/*
 * Narrow phones: stack CTAs vertically at full button size (don’t squeeze
 * side-by-side). Navy band grows with the stack; buttons stay centered.
 */
@media (max-width: 385px) {
  .tidal-wave-hero--composed .tidal-wave-hero__actions-band .tidal-wave-hero__actions,
  .tidal-wave-hero--composed .tidal-wave-hero__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    row-gap: 0.55rem;
    padding-inline: var(--tidal-wave-gutter-inline, 1rem);
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .tidal-wave-hero--composed .tidal-wave-hero__actions .wp-block-button__link {
    width: auto;
    max-width: 100%;
    padding-inline: var(--tidal-wave-btn-padding-x, 1.4rem);
    font-size: var(--tidal-wave-btn-font-size, 0.875rem);
    white-space: nowrap;
  }
}

/* ——— Homepage hero motion ——— */

/* Scale-only so staggered opacity fade-in can run at the same time. */
@keyframes tidal-hero-sparkle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.32);
  }
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__bin {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

/*
 * Staggered fade-in — starts ~0.5s earlier than the prior mid bin-ride timing,
 * and stays visible after `is-sparkling` starts so the pulse does not
 * snap them back through opacity: 0.
 */
.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(1) {
  opacity: 0.85;
  transition-delay: 0.4s;
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(2) {
  opacity: 0.85;
  transition-delay: 0.6s;
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(3) {
  opacity: 0.85;
  transition-delay: 0.8s;
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(1) {
  opacity: 0.85;
  transition-delay: 1s;
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(2) {
  opacity: 0.85;
  transition-delay: 1.2s;
}

.tidal-wave-hero--composed.is-inview .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(3) {
  opacity: 0.85;
  transition-delay: 1.4s;
}

.tidal-wave-hero--composed:not(.is-inview) .tidal-wave-hero__sparkle {
  opacity: 0;
  transition-delay: 0s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkle {
  /* Keep opacity transition for fade-in; pulse only scales. */
  animation: tidal-hero-sparkle 2.65s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Pulse delays match fade-in so each sparkle begins scaling as it appears. */
.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(1) {
  animation-delay: 0.4s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(2) {
  animation-delay: 0.6s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-svg > .tidal-wave-hero__sparkle:nth-child(3) {
  animation-delay: 0.8s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(1) {
  animation-delay: 1s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(2) {
  animation-delay: 1.2s;
}

.tidal-wave-hero--composed.is-inview.is-sparkling .tidal-wave-hero__sparkles-left > .tidal-wave-hero__sparkle:nth-child(3) {
  animation-delay: 1.4s;
}

.tidal-wave-hero--composed:not(.is-sparkling) .tidal-wave-hero__sparkle {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .tidal-wave-hero--composed .tidal-wave-hero__bin,
  .tidal-wave-hero--composed .tidal-wave-hero__sparkles,
  .tidal-wave-hero--composed .tidal-wave-hero__sparkle {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}