/* ===== "Why Us?" band =====
   Same machinery as the hero — same grid, same video-behind-windows
   technique, same type system. The only difference is that the cream text
   block is mirrored to the BOTTOM-LEFT instead of the top-left:

   ┌───────┬───────┬─────┬─────┐
   │   1   │   2   │     │     │
   ├───────┴───────┤  3  │  4  │
   │     TEXT      │     │     │
   └───────────────┴─────┴─────┘                                        */

.hero--flip {
  /* Image row on top, text row beneath — the mirror of the hero's 39/61. */
  grid-template-rows: 61fr 39fr;
}

.hero--flip .hero__text {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.hero--flip .pane-1 { grid-column: 1; grid-row: 1; }
.hero--flip .pane-2 { grid-column: 2; grid-row: 1; }
.hero--flip .pane-3 { grid-column: 3; grid-row: 1 / span 2; }
.hero--flip .pane-4 { grid-column: 4; grid-row: 1 / span 2; }

@media (max-width: 760px) {
  .hero--flip {
    grid-template-rows: 1fr 1fr auto;
  }
  .hero--flip .hero__text {
    grid-column: 1 / span 2;
    grid-row: 3;
  }
  .hero--flip .pane-1 { grid-column: 1; grid-row: 1; }
  .hero--flip .pane-2 { grid-column: 2; grid-row: 1; }
  .hero--flip .pane-3 { grid-column: 1; grid-row: 2; }
  .hero--flip .pane-4 { grid-column: 2; grid-row: 2; }
}