/* ph-hero-work.njk: the plumbing & heating hero with the firm's own work beside the words.
   Opt-in: listed in a site's `optInCss`, so no other demo carries a byte of it (6 Oct 2026, GH Plumbing).
   Unlayered, like the P&H hero's own phone rules, so it beats the utilities it sits beside.
   Phone first: a staggered strip of three photos over centred copy. From 1024px the copy goes left
   and the three photos stack as cards on the right. Sizes follow the screen's HEIGHT as well as its
   width (svh), so the counters stay on the first screen from an iPhone SE to a 1080p monitor. */

.gw-hero { --gw-gap: clamp(0.75rem, 2.2svh, 1.5rem); }
.gw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gw-gap); align-items: center; padding-block: clamp(0.9rem, 3svh, 2.6rem); }

/* ---- the photos */
.gw-visual { order: -1; position: relative; display: grid; grid-template-columns: 1fr 1.22fr 1fr; gap: 0.5rem; align-items: end; height: clamp(6.6rem, 17.5svh, 15rem); margin-bottom: 1.4rem; }
.gw-visual::before { content: ""; position: absolute; inset: -22% -8% -12%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-bright) 30%, transparent), transparent 72%); }
.gw-ph { position: relative; margin: 0; overflow: hidden; border-radius: 0.8rem; background: var(--color-ink-panel, #0c1a36); box-shadow: 0 22px 40px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.18); }
.gw-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw-ph-1 { height: 84%; }
.gw-ph-2 { height: 100%; }
.gw-ph-3 { height: 70%; }

/* ---- the badges: glass, like the pill */
.gw-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem 0.55rem 0.8rem; border-radius: 999px; color: #fff; text-decoration: none; background: color-mix(in srgb, var(--color-ink) 74%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 14px 30px -12px rgb(0 0 0 / 0.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.gw-badge-stars { left: 50%; bottom: -0.95rem; translate: -50% 0; flex-direction: row; font-size: 0.84rem; }
.gw-badge-stars-row { display: none; color: var(--color-star-bright, #f5b400); letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1; }
.gw-badge-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.82rem; }
.gw-badge-text b { font-weight: 800; }
.gw-badge-stars .gw-badge-text { flex-direction: row; gap: 0.3rem; }
.gw-badge-call { display: none; }
.gw-badge-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--color-signal, var(--color-brand)); color: #fff; flex: none; }
.gw-badge-call .gw-badge-text span { font-size: 0.78rem; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ---- the words */
.gw-copy { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.gw-h1wrap { display: flex; flex-direction: column; align-items: center; margin: 0; }
.gw-pill { font-size: clamp(0.92rem, 2.2svh, 1.08rem); box-shadow: inset 0 0 0 1px rgb(245 180 0 / 0.55), 0 12px 32px -12px rgb(0 0 0 / 0.55), 0 0 28px -6px rgb(245 180 0 / 0.28); }
.gw-h1 { margin-top: clamp(0.65rem, 2svh, 1.3rem); font-size: clamp(2rem, min(9.9vw, 6.2svh), 3.3rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.gw-h1 .accent { color: var(--accent-on-photo, var(--color-star-bright)); }
.gw-lede { margin: clamp(0.55rem, 1.8svh, 1.2rem) 0 0; max-width: 34rem; font-size: clamp(0.96rem, 2.1svh, 1.18rem); line-height: 1.5; }
.gw-ctas { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 22rem; margin-top: clamp(0.85rem, 2.8svh, 2rem); }
.gw-ctas .btn { width: 100%; }
.gw-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.1rem; margin: clamp(0.85rem, 2.5svh, 1.7rem) 0 0; padding: 0; list-style: none; font-size: 0.84rem; font-weight: 600; text-align: left; }
.gw-chips li { display: flex; align-items: center; gap: 0.45rem; }
.gw-chips li > span { flex: none; display: inline-flex; }
@media (max-width: 639px) { .gw-chips { display: none; } }
.gw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; max-width: 30rem; margin: clamp(0.9rem, 2.6svh, 2rem) 0 0; padding-top: clamp(0.65rem, 2svh, 1.4rem); border-top: 1px solid rgb(255 255 255 / 0.15); }
.gw-stats dd { margin: 0; font-size: clamp(1.7rem, 4svh, 2.6rem); line-height: 1.1; }
.gw-stats dt { margin-top: 0.3rem; word-break: break-word; }

@media (max-width: 639px) and (max-height: 700px) {
  .gw-visual { height: 5.6rem; margin-bottom: 1.2rem; }
  .gw-h1 { font-size: 1.95rem; margin-top: 0.5rem; }
  .gw-lede { font-size: 0.92rem; line-height: 1.42; margin-top: 0.45rem; }
  .gw-stats dd { font-size: 1.55rem; }
}

@media (max-width: 639px) and (max-height: 800px) {
  .gw-ctas { flex-direction: row; max-width: none; gap: 0.55rem; }
  .gw-ctas .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; font-size: 0.88rem; white-space: nowrap; }
}

@media (min-width: 640px) {
  .gw-ctas { flex-direction: row; width: auto; max-width: none; }
  .gw-ctas .btn { width: auto; }
  /* Four chips sit two by two (Mike, 7 Oct), two chips side by side. */
  .gw-chips { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 0.65rem 2rem; }
  .gw-visual { height: clamp(9rem, 26svh, 18rem); gap: 0.8rem; max-width: 40rem; margin-inline: auto; margin-bottom: 1.1rem; }
}

/* ---- a laptop and up: words left, three cards right */
@media (min-width: 1024px) {
  .gw-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); column-gap: clamp(2rem, 4.5vw, 5rem); }
  .gw-copy { align-items: flex-start; text-align: left; }
  .gw-h1wrap { align-items: flex-start; }
  .gw-h1 { font-size: clamp(2.6rem, min(4.3vw, 8.4svh), 4.3rem); }
  .gw-pill { font-size: clamp(1.02rem, 2.4svh, 1.22rem); padding: 0.7rem 1.5rem; }
  .gw-lede { max-width: 33rem; font-size: clamp(1.02rem, 2.3svh, 1.22rem); }
  .gw-ctas { justify-content: flex-start; }
  .gw-chips { justify-content: start; margin-top: clamp(1rem, 3svh, 2rem); }
  .gw-stats { max-width: 31rem; margin-top: clamp(1.1rem, 3.4svh, 2.4rem); }
  .gw-stats dd { font-size: clamp(1.9rem, 4.6svh, 2.9rem); }

  .gw-visual { order: 0; display: block; justify-self: end; width: auto; max-width: 100%; height: clamp(21rem, calc(100svh - 14rem), 38rem); aspect-ratio: 0.92; margin: 0; }
  .gw-visual::before { inset: -14%; }
  .gw-ph { position: absolute; border-radius: 1.1rem; height: auto; }
  .gw-ph-1 { left: 0; top: 11%; width: 50%; aspect-ratio: 3 / 4; z-index: 1; }
  .gw-ph-2 { right: 3%; bottom: 0; width: 53%; aspect-ratio: 1 / 1; z-index: 2; }
  .gw-ph-3 { right: 0; top: 0; width: 42%; aspect-ratio: 3 / 4; z-index: 1; }
  /* Both badges sit in the empty corners round the photos (top left, bottom left), never over one. */
  .gw-badge-stars { left: 0; bottom: 3%; translate: 0 0; flex-direction: column; align-items: flex-start; gap: 0.15rem; border-radius: 1.1rem; padding: 0.7rem 1.1rem; }
  .gw-badge-stars-row { display: block; }
  .gw-badge-stars .gw-badge-text { font-size: 0.92rem; }
  .gw-badge-call { display: flex; left: 0; top: 0; z-index: 4; }
}

@media (prefers-reduced-motion: no-preference) {
  /* `translate` is its own property, so the float never fights the reveal's `transform`. */
  @keyframes gw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.5rem; } }
  .gw-ph-1 { animation: gw-float 9s ease-in-out infinite; }
  .gw-ph-2 { animation: gw-float 11s ease-in-out -3.5s infinite; }
  .gw-ph-3 { animation: gw-float 10s ease-in-out -6s infinite; }
}