/* Mobile-only refinements for the v62 release.
   Scoped to 720px and below so tablet and desktop remain unchanged. */
@media (max-width: 720px) {
  /* Homepage: keep the What we do introduction aligned to the same left edge
     as its cards, while retaining the existing card treatment. */
  .dark-block-inner > .mono,
  .dark-block-inner > h2,
  .dark-block-inner > p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Match the homepage's established hero/quote rhythm without changing the
     section-specific desktop or tablet spacing. */
  #root .home-quote-strip {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  #root .home-quote-strip > div {
    text-align: left !important;
  }
  #root .home-quote-strip .serif {
    font-size: 40px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* Recruitment hero copy is left aligned on phones; the CTA below it is a
     separate centred block and remains centred from the rules above. */
  .hiring-hero-1__grid > .hero-left-1 {
    text-align: left !important;
  }
  .hiring-hero-1__lede {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hiring-hero-1__actions {
    justify-content: flex-start !important;
  }

  /* AI hero button should retain its normal intrinsic button width rather
     than stretching across the mobile column. */
  .ai-page .hero-actions {
    align-items: flex-start !important;
  }
  .ai-page .hero-actions .btn-primary,
  .ai-page .hero-actions .btn-secondary {
    width: auto !important;
    align-self: flex-start !important;
  }

  /* Keep the descender on the process heading visible (the reveal clip used
     elsewhere in the site otherwise trims the lower edge of the capital G). */
  .hiring-process__title.text-reveal,
  .hiring-process__title.text-reveal.is-visible {
    clip-path: inset(0 0 -24% 0) !important;
    padding-bottom: .18em !important;
    overflow: visible !important;
  }

  /* Give each numbered step breathing room without changing its mobile grid. */
  .hiring-process__item {
    padding: 20px 0 !important;
  }
  .hiring-process__text {
    padding: 0 !important;
  }

  /* Centre the recruitment CTA content and its action. */
  .hiring-homepage-cta__inner,
  .hiring-homepage-cta__heading,
  .hiring-homepage-cta__link {
    text-align: center !important;
  }
  h2.hiring-homepage-cta__heading {
    text-align: center !important;
  }
  .hiring-homepage-cta__link {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Recruitment hero and Workforce Without Borders use normal intrinsic
     buttons on mobile, aligned with the copy rather than stretched full-width. */
  .hiring-hero-1__actions {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .hiring-hero-1__actions .btn-primary,
  .hiring-story__button {
    width: auto !important;
    align-self: flex-start !important;
    justify-content: center !important;
  }

  /* The CTA remains centred independently of the other Recruitment buttons. */
  .hiring-homepage-cta__inner,
  .hiring-homepage-cta__heading,
  .hiring-homepage-cta__link {
    text-align: center !important;
  }

  /* Keep the carousel controls above a single, full-width text card. */
  .hiring-carousel-v1__top {
    align-items: stretch !important;
  }
  .hiring-carousel-v1__arrows {
    align-self: flex-end !important;
  }
  .hiring-carousel-v1__body {
    grid-template-columns: 1fr !important;
  }
  .hiring-carousel-v1__track-wrap {
    width: 100% !important;
  }
  .hiring-carousel-v1__track {
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .hiring-carousel-v1__card {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }
  .hiring-carousel-v1__track-wrap {
    transition: height .35s ease;
  }

  /* The map/media half is not usable on a phone; retain the accessible text
     carousel and controls while removing only this visual panel. */
  .hiring-carousel-v1__media {
    display: none !important;
  }
}