/* =========================================================================
   USA Landing Page — dedicated responsive stylesheet
   Independent from css/landing/mobile.css (Australia/city pages) — that
   file is never linked or edited from this page. Every rule below is
   scoped to markup that only exists on this page (.usa-landing / usa-*
   classes), so nothing here can affect the Australia or city pages even
   though a few selectors target class names those pages also use (e.g.
   .landing-services-grid) — the .usa-landing ancestor qualifier keeps
   the rule from ever matching outside this page.

   Breakpoints are chosen to keep the page free of overlap/horizontal
   scroll across the full requested test matrix: 1920, 1600, 1440, 1366,
   1280, 1024, 992, 768, 576, 480, 390, 375, 360, 320.
   ========================================================================= */

/* ===== ≤1400px — laptop: services grid needs to shrink before the
   6-card row runs out of room inside the shared 1400px-capped inner
   container. ===== */
@media (max-width: 1400px) {
  .usa-landing .landing-services-inner {
    padding: 26px 32px;
  }

  .usa-landing .landing-services-grid {
    gap: 20px;
  }

  /* Serving Across the USA: the artwork is sized off the section's
     WIDTH (see style.css), so as the viewport narrows below desktop
     the artwork shrinks while the text column (driven by line-wrapped
     copy, not by width) barely does — top:0 alone would leave a
     growing dead-space gap under the artwork (58px at 1440 growing to
     150px+ by 1280 and worse below that). Vertically centering it
     keeps the artwork looking anchored to the content at every tablet
     width instead of stranded at the top with visibly more blank space
     underneath as the screen narrows. Left untouched above 1400px so
     the existing desktop layout (top:0) is not affected. */
  .usa-states-artwork {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ===== ≤1280px — covers 1280/1200/1024 laptop widths, plus the
   Trusted-By logo row: gap:60px (5 gaps = 300px) plus the 6 logos' own
   natural content width (~751px at max-height:50) needs ~1051px — that
   stops fitting once the container drops below ~1050px (viewport
   ≈1170px, e.g. iPad Pro portrait at 1024, iPad Air at 820, iPad Mini
   at 768), and nowrap+space-between doesn't shrink to compensate — it
   just pushes the last logo (NetSuite) off the right edge of the
   container and, at these widths, off the viewport entirely.
   flex-wrap:wrap makes that impossible: whatever doesn't fit drops to
   its own row instead of overflowing off-screen. Above 1280px there's
   always enough room for one row, so this never visibly wraps there. */
@media (max-width: 1280px) {
  .usa-landing .landing-services-inner {
    padding: 26px 24px;
  }

  .usa-landing .landing-services-grid {
    grid-template-columns: repeat(3, minmax(0, 170px));
  }

  .usa-industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .usa-why-container {
    gap: 32px;
  }

  .usa-trusted .landing-trusted-logos {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    column-gap: 40px;
  }
}

/* ===== ≤1100px — process steps wrap before they get too cramped ===== */
@media (max-width: 1100px) {
  .usa-process-grid {
    flex-wrap: wrap;
    row-gap: 32px;
  }
}

/* ===== ≤1024px — covers 1024/992: header/nav is handled sitewide by
   css/landing/style.css; here we start tightening the USA-only
   sections before the 900px stacking breakpoint below. ===== */
@media (max-width: 1024px) {
  .landing-page.usa-landing .usa-why-section {
    padding: 72px 32px;
  }

  .usa-why-container {
    gap: 24px;
  }

  .usa-why-stats {
    flex: 0 0 110px;
  }

  .usa-why-stat {
    width: 110px;
  }
}

/* ===== ≤900px — tablet: stack the two-column sections, switch the
   hero CTAs to static flow, drop to a 2-column state grid. ===== */
@media (max-width: 900px) {
  .landing-page.usa-landing .usa-hero {
    padding-top: 110px;
  }

  .usa-hero-banner {
    display: flex;
    flex-direction: column;
  }

  .usa-hero-ctas {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }

  .usa-landing .landing-services-inner {
    padding: 26px 24px;
  }

  .usa-landing .landing-services-grid {
    grid-template-columns: repeat(2, minmax(0, 170px));
  }

  .landing-page.usa-landing .usa-why-section {
    padding: 56px 24px;
  }

  .usa-why-container {
    flex-direction: column;
  }

  .usa-why-left {
    flex-direction: column;
    width: 100%;
  }

  .usa-why-illustration {
    flex: none;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  .usa-why-illustration img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .usa-why-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }

  .usa-why-right {
    margin-top: 0;
    text-align: center;
  }

  .usa-why-feature {
    text-align: left;
  }

  .usa-industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  /* Tablet (900px down to the 640px breakpoint below): still
     side-by-side like desktop — .usa-states-content's percentage width
     and .usa-states-artwork's height-bound scaling both already track
     the section box on their own — just drop to 2 columns and tighten
     the gaps. Cards stay 158x43 (not shrunk). */
  .usa-state-grid {
    grid-template-columns: repeat(2, 158px);
    column-gap: 14px;
    row-gap: 18px;
  }

  .usa-outsource-grid {
    flex-direction: column;
  }

  .usa-outsource-list {
    max-width: 100%;
    text-align: left;
  }

  .usa-process-step {
    width: 100%;
    max-width: 280px;
  }
}

/* ===== ≤768px — tablet portrait: needs a bit more breathing room than
   900px already gives; content padding tightens further. ===== */
@media (max-width: 768px) {
  .landing-page.usa-landing .usa-why-section {
    padding: 48px 20px;
  }

  .usa-outsource-visual {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ===== ≤640px — mobile: the states section stops being a side-by-side
   layout; the map artwork becomes a de-emphasized band under the
   (now centered, full-width) text instead of sitting beside it. ===== */
@media (max-width: 640px) {
  .usa-hero-ctas {
    width: 100%;
  }

  /* min-height:44px keeps the CTA buttons at a real touch target size
     (they render at ~38px with the mobile padding alone). */
  .usa-hero-ctas a {
    min-height: 44px;
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 10px 14px;
    font-size: 13px;
  }

  .usa-landing .landing-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .usa-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-page.usa-landing .usa-states {
    width: 100%;
    aspect-ratio: auto;
    /* Artwork band is max-width:420px at aspect-ratio 2046/1180, i.e.
       up to ~243px tall — padding-bottom needs a few px of headroom
       past that so the note text above it never touches the band. */
    padding-bottom: 264px;
    overflow: hidden;
  }

  .usa-states-artwork {
    top: auto;
    right: 50%;
    bottom: 0;
    height: auto;
    width: 80%;
    max-width: 420px;
    transform: translateX(50%);
  }

  .usa-states-content {
    margin-left: 0;
    width: 100%;
    min-width: 0;
    padding: 40px 24px 0;
    text-align: center;
  }

  .usa-states-content .landing-section-subtitle {
    text-align: left;
  }

  .usa-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    width: 100%;
  }

  .usa-state-pill {
    width: 100%;
  }

  .usa-outsource-grid {
    gap: 32px;
  }

  .usa-process-grid {
    gap: 24px;
  }
}

/* ===== ≤480px — small phones: single-column grids everywhere,
   tighter section padding, smaller display type. ===== */
@media (max-width: 480px) {
  .landing-page.usa-landing .usa-hero {
    padding-top: 90px;
  }

  .usa-hero-ctas {
    flex-direction: column;
  }

  .usa-landing .landing-services-inner {
    padding: 24px 16px;
  }

  .usa-landing .landing-services-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 220px;
  }

  .usa-trusted .landing-trusted-logos {
    gap: 24px;
  }

  .usa-trusted .landing-trusted-logos img {
    max-width: 110px;
  }

  .landing-page.usa-landing .usa-why-section {
    padding: 40px 16px;
  }

  .usa-why-stats {
    gap: 12px;
  }

  .usa-why-stat {
    width: 100%;
    max-width: 140px;
  }

  .usa-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .usa-industry-card {
    padding: 14px 8px;
  }

  .usa-states-content {
    padding: 32px 16px 0;
  }

  .usa-states-artwork {
    width: 90%;
  }

  .usa-state-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page.usa-landing .usa-outsource {
    padding: 0 16px;
  }

  .usa-outsource-list li {
    font-size: 17px;
  }

  .landing-page.usa-landing .usa-process {
    padding: 0 16px;
  }
}

/* ===== ≤375px — covers 375/360/320: final tightening so nothing
   clips or forces horizontal scroll on the smallest phones. ===== */
@media (max-width: 375px) {
  .usa-why-label {
    font-size: 16px;
  }

  .usa-why-heading {
    font-size: 26px;
  }

  .usa-state-pill {
    font-size: 16px;
    padding: 0 12px;
  }

  .usa-states-content .landing-section-subtitle {
    font-size: 16px;
    line-height: 1.5;
  }

  .usa-process-step {
    max-width: 100%;
  }

  .usa-process-step p {
    max-width: 100%;
  }
}