/* ==========================================================================
   /work/esco/ only. The Esco Tool case study's extras on top of the shared
   assets/css/case-study.css: the homepage screenshot in the hero, the band's lead, the selector steps and the head-to-head table.
   ========================================================================== */

  /* ---------- 1. Hero: text beside the escotool.com homepage ---------- */

  .es-hero-shot { align-self: center; }

  /* ---------- 2. Results band: the lead over the stats ---------- */

  .es-band-lead { color: var(--on-blue-muted); max-width: 52ch; }
  .cs-results .cs-stats { margin-top: clamp(40px, 5vw, 56px); }

  /* ---------- 4. Approach: six cards in one grid, no row labels ---------- */

  .cs-cards--solo { margin-top: clamp(40px, 5vw, 56px); }

  /* ---------- 4b. The before and after replica ---------- */

  .es-slider { margin: clamp(40px, 5vw, 56px) 0 0; }
  .es-slider figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }

  /* ---------- 7b. Video: the COHOG film beside the COHOG photo ---------- */
  /* Both cells share one 16:9 frame so the portrait poster and the landscape photo
     line up. */

  .es-video { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 56px); align-items: start; }
  .es-video .svc-videos__media,
  .es-video__photo img { display: block; width: 100%; aspect-ratio: 16 / 10; }
  .es-video .svc-videos__media { height: auto; }
  .es-video .video-slot__poster { width: 100%; height: 100%; object-fit: cover; }
  .es-video__photo { margin: 0; }
  .es-video__photo img { height: auto; object-fit: cover; clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%); }
  .es-video__photo figcaption { margin-top: 14px; font-weight: 600; }
  .work-more { margin-top: 32px; }

  /* ---------- 5, change 05. Head to head, Esco's column in blue ---------- */

  .es-h2h-wrap { margin-top: 24px; overflow-x: auto; }
  .es-h2h { width: 100%; min-width: 520px; border-collapse: collapse; }
  .es-h2h th, .es-h2h td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
  .es-h2h thead th { font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); white-space: nowrap; }
  .es-h2h tbody th { font-weight: 500; color: var(--ink-2); }
  .es-h2h td { font-family: var(--f-mono); font-size: 0.9375rem; color: var(--muted); white-space: nowrap; }
  .es-h2h .es-h2h__us { color: var(--blue); }
  .es-h2h td.es-h2h__us { font-weight: 500; }
  .es-h2h td.es-h2h__us span { color: var(--muted); font-weight: 400; }

  /* ---------- 6. Selector: the screenshot, then the steps ---------- */

  .es-selector-shot { margin-top: clamp(40px, 5vw, 56px); max-width: 1000px; }

  .es-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 56px); padding: 0; }
  .es-steps li { padding: 24px; background: var(--wash); clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%); }
  .es-steps__n { display: block; font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; color: var(--blue); }
  .es-steps strong { display: block; margin-top: 12px; font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.2; letter-spacing: -0.02em; }
  .es-steps li > span:last-child:not(.es-steps__n) { display: block; margin-top: 8px; color: var(--ink-2); line-height: 1.55; }

  /* ---------- Narrow screens ---------- */

  @media (max-width: 960px) {
    .es-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* "about 2x better" is the one long change figure: let it wrap on a phone. */
  @media (max-width: 720px) {
    .cs-metrics td.chg { white-space: normal; }
    .cs-metrics td.num { font-size: 0.875rem; }
  }

  @media (max-width: 720px) {
    .es-video { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 480px) {
    .es-steps { grid-template-columns: minmax(0, 1fr); }
  }