/* WAG Design 8: homepage section sizing correction.
   Keep the Licensed Trade / people section on the same true 80vw measure as
   the offer band. This file is versioned separately to avoid Oncord/CDN cache
   collisions with the earlier shared stylesheets. */

@media (min-width: 901px) {
  .wag-design8-shell .option-3 > .home-hero {
    width: 80vw !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(44px, 3.5vw, 72px) 0 !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(40px, 4vw, 96px) !important;
    align-items: center !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-card {
    width: 100% !important;
    max-width: none !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-card h2 {
    max-width: 720px !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-card p {
    max-width: 700px !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-image {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Capability and the service-summary bands were being constrained twice:
     the page system supplies the 80vw section, then polish.css added another
     max-1100px horizontal gutter inside it. Use the full established measure. */
  .wag-design8-shell .option-3 > .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .wag-design8-shell .option-3 > .section:not(.compact) > .section-intro {
    width: 100% !important;
    max-width: 980px !important;
  }

  .wag-design8-shell .option-3 > .section > :is(.service-feature-wall, .pill-grid) {
    width: 100% !important;
    max-width: none !important;
  }

  .wag-design8-shell .option-3 > .section.compact {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) !important;
    gap: clamp(48px, 5vw, 96px) !important;
  }

  .wag-design8-shell .option-3 > .section.compact > .section-intro {
    width: 100% !important;
    max-width: none !important;
  }

  .wag-design8-shell .option-3 > .section.compact .pill-grid {
    align-items: stretch;
  }

  .wag-design8-shell .option-3 > .section.compact .pill-grid span {
    padding: 12px 16px;
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .wag-design8-shell .option-3 > .home-hero {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 50px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-card,
  .wag-design8-shell .option-3 > .home-hero .home-hero-image {
    width: 100% !important;
    max-width: none !important;
  }

  .wag-design8-shell .option-3 > .home-hero .home-hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  .wag-design8-shell .option-3 > .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .wag-design8-shell .option-3 > .section.compact {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 600px) {
  .wag-design8-shell .option-3 > .home-hero {
    width: calc(100vw - 32px) !important;
    padding: 42px 0 !important;
    gap: 24px !important;
  }

  .wag-design8-shell .option-3 > .section:not(.compact) > .section-intro {
    max-width: none !important;
  }

  .wag-design8-shell .option-3 > .section.compact .pill-grid span {
    padding: 9px 12px;
    font-size: 10px;
  }
}