/* ==========================================================================
   /work/ only. Layout follows design/work-reference.html; tokens are the site's.
   The stats, stories, video feature, project videos and quote are the
   service-page blocks; the slider is compare-slider.css; the showreel is the
   shared .reel facade. This sheet adds the hero, the section intros, the
   width and spacing of the shared pieces here, and the blue closing band.
   ========================================================================== */

  /* ---------- Hero: text only ---------- */

  .work-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
  .work-hero__title {
    font-size: min(clamp(2.8rem, 6.4vw, 5.75rem), calc((min(100vw, 1240px) - 64px) * 0.2));
    line-height: 0.98;
    letter-spacing: -0.03em;
  }
  .work-hero__lead { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }

  /* A section's opening paragraph, under its heading. */
  .work-intro { margin-top: 24px; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 64ch; }

  /* ---------- 2. Esco: the notched slider full width, then the stats on paper ---------- */

  .work-slider { margin: clamp(32px, 4vw, 48px) 0 0; }

  /* ---------- 3 and 4, held back: media splits, notched, alternating sides ---------- */

  .work-case__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
  .work-case__text p { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
  .work-case__media { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
  .work-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .work-case.is-flipped .work-case__text { order: 2; }

  /* ---------- 3. Stafford: the Esco layout, under a hairline ---------- */

  .work-stafford { border-top: 1px solid var(--line); }

  /* ---------- 5. Interactive tools ---------- */

  .work-tools__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(32px, 4vw, 48px); }
  .work-tools__item { border-top: 1px solid var(--ink); padding-top: 24px; }
  .work-tools__item p { line-height: 1.65; }
  .work-tools__item strong { font-weight: 600; }
  /* While the configurators are held back, the one live tool takes two columns. */
  .work-tools__item:only-child { grid-column: span 2; }
  .work-tools__item:only-child p { font-size: clamp(1.0625rem, 1.3vw, 1.125rem); max-width: 64ch; }

  /* ---------- 6. Video: the notched reel with the blue play button ---------- */

  .work-reel { margin-top: clamp(32px, 4vw, 48px); }
  .work-reel .reel { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
  .work-reel .video-slot__play { background: var(--blue); }
  .work-reel .video-slot:hover .video-slot__play { background: var(--blue-deep); }
  .work-more { margin-top: 32px; }

  /* ---------- 7. Three lessons across ---------- */

  .work-learned__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

  /* ---------- 8. The quote under the intro ---------- */

  .work-years .svc-quote { margin-top: clamp(40px, 5vw, 64px); }
  .work-tools__item a { color: var(--blue); font-weight: 600; }

  /* ---------- 9. Closing CTA: the page's one blue band ---------- */

  .work-cta { text-align: center; }
  .work-cta__inner { display: flex; flex-direction: column; align-items: center; }
  .work-cta .svc-title { max-width: 18ch; }
  .work-cta__text { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--on-blue-muted); max-width: 56ch; }
  .work-cta .svc-actions { justify-content: center; margin-top: 40px; }

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

  @media (max-width: 960px) {
    .work-tools__row,
    .work-learned__row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .work-tools__item:only-child { grid-column: auto; }
  }

  @media (max-width: 860px) {
    .work-case__inner { grid-template-columns: minmax(0, 1fr); }
    .work-case.is-flipped .work-case__text { order: 0; }
  }