/* The work hero's middle on a phone (13 Oct 2026, Southend; Mike: "Top and bottom of mobile hero look good but middle
   needs some work"). The pill's stars and "Top Rated in Southend-on-Sea" just overran a phone's width, so it wrapped to
   two lines and stretched edge to edge with the words floating in it; the headline broke into four big lines. Here the
   pill shrinks to fit on one line (its words left beside the stars if a long town still wraps), and the headline is
   sized to land on three. Scoped to `.gw-hero` so it wins over ph-hero-work.css, which loads after it. Opt-in
   (`optInCss`); laptops are unchanged. */
@media (max-width: 639px) {
  .gw-hero .gw-pill { font-size: 0.88rem; gap: 0.5rem; padding: 0.45rem 0.95rem 0.45rem 0.8rem; text-align: left; }
  .gw-hero .gw-pill > span:first-child { font-size: 0.95em; letter-spacing: 0.03em; }
  .gw-hero .gw-h1 { font-size: clamp(1.85rem, 8.4vw, 2.45rem); line-height: 1.04; }
  /* Two lines (Mike, 13 Oct): sized so the longer line (--hl-n characters, set by ph-hero-work.njk) fits the phone's
     width; measured, Montserrat 800 runs 0.54-0.58em a character, so 0.6 leaves room. */
  .gw-hero .gw-h1[style*="--hl-n"] { font-size: min(2.6rem, calc((100vw - 2rem) / (var(--hl-n) * 0.6))); text-wrap: nowrap; }
  .gw-hero .gw-h1[style*="--hl-n"] .accent-block { display: block; }
  /* Balance on a tall phone (Mike, 13 Oct: "the top and bottom may now have been drawn too much into the middle ... the
     counters previously sat nicely on the fold"). The hero is the screen less the header; once the words are shorter,
     the spare height went above the photos and below the counters. Now the photos sit at the top, the counters at the
     foot of the screen, and the spare height is shared above the headline and above the counters. A short phone has
     none spare and is unchanged. */
  .gw-hero .gw-grid { flex: 1 1 auto; display: flex; flex-direction: column; }
  .gw-hero .gw-copy { flex: 1 1 auto; }
  .gw-hero .gw-h1wrap { margin-top: auto; }
  .gw-hero .gw-stats { margin-top: auto; }
  .gw-hero .gw-ctas { margin-bottom: clamp(0.9rem, 2.6svh, 2rem); }
}
/* On a tall phone some of the spare height goes to the photos, the firm's own work, rather than to empty bands. */
@media (max-width: 639px) and (min-height: 760px) {
  .gw-hero .gw-visual { height: clamp(10rem, 26svh, 16.5rem); }
}