/* =====================================================================
   THE OHS — hero proportions: the picture wider, the gap closed
   ---------------------------------------------------------------------
   The hero is a two-column grid at 1.05fr / 1fr with a 66px gap, and at
   1900px that leaves the headline column about 920px wide holding text
   that only fills 550 of it. The result is a 430px hole between the
   last word and the photograph, and a photograph that stops 22px short
   of the right edge.

   Two changes, both to the grid rather than to anything inside it:

     · the text column is capped at a readable measure instead of
       taking a share of whatever the window happens to be, so the
       leftover width goes to the picture rather than to empty space
     · the right-hand padding is removed so the panel reaches the edge
       of the window, which is what "full width" means on that side

   At 1900px the picture goes from roughly 880px wide starting at x=985,
   to roughly 1200px wide starting at x=700 -- wider, and closer to the
   words, with no hole between them.

   NOTHING INSIDE THE PANEL CHANGES

   The slideshow keeps its 430px height from the markup and its images
   are object-fit: cover, so a wider panel simply shows more of each
   photograph. No aspect ratio is stretched and the licence card keeps
   its position against the panel's left edge, which is now further in.
   ===================================================================== */

@media (min-width: 1100px) {
  .hero .in {
    /* A measure, not a fraction. 660px holds "TRAINED. TESTED." on one
       line at the display size and gives the lead its 52ch without
       reserving the rest of a wide monitor for nothing. */
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr) !important;
    gap: clamp(26px, 2.6vw, 44px) !important;

    /* The picture runs to the window edge. The left padding stays: the
       headline still needs its margin. */
    padding-right: 0 !important;
  }

  /* The panel fills its column and the column now reaches the edge, so
     nothing more is needed -- but the rounded corner and the border on
     the right side would sit off-screen, so they are squared off to
     make the bleed deliberate rather than accidental. */
  .hero .heroimg .ph {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* Very wide monitors: past about 2200px the picture starts to dominate,
   so the text column is allowed a little more room to keep the balance
   roughly where it is at 1900. */
@media (min-width: 2200px) {
  .hero .in {
    grid-template-columns: minmax(0, 760px) minmax(0, 1fr) !important;
  }
}

/* Below 1100px the grid is already a single column in the page's own
   stylesheet, so there is deliberately nothing here for narrow screens:
   the picture sits under the text at full width, which is correct. */