/* The desktop hero keeps its original composition. On smaller screens the
   slides share one intrinsic grid row, so the longest slide sets the height.
   The repeated #top specificity overrides the existing theme adapters without
   altering their colours, font families or desktop rules. */
@media (max-width: 1000px) {
  html body:not(.services-view) #top#top .hero {
    display: grid!important;
  }

  html body #top#top .hero {
    grid-template-columns: minmax(0,1fr)!important;
    height: auto!important;
    min-height: 720px!important;
    isolation: isolate;
  }

  html body #top#top .hero > .slide {
    position: relative!important;
    inset: auto!important;
    grid-area: 1 / 1!important;
    display: flex!important;
    min-width: 0!important;
    width: 100%!important;
    min-height: 0!important;
    height: auto!important;
    visibility: hidden;
    pointer-events: none!important;
    transition: opacity .8s ease, visibility 0s linear .8s;
  }

  html body #top#top .hero > .slide.active {
    visibility: visible;
    pointer-events: auto!important;
    transition-delay: 0s;
  }

  html body #top#top .hero .slide-bg {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    translate: none!important;
  }

  html body #top#top .hero .container {
    display: flex!important;
    align-items: center!important;
    width: min(680px,calc(100% - 64px))!important;
    max-width: none!important;
    min-width: 0!important;
    height: auto!important;
    margin-inline: auto!important;
    padding: 72px 0 80px!important;
  }

  html body #top#top .hero .hero-grid {
    grid-template-columns: minmax(0,1fr)!important;
    align-items: start!important;
    width: 100%!important;
    min-width: 0!important;
    min-height: 0!important;
    height: auto!important;
    gap: 24px!important;
  }

  html body #top#top .hero .hero-grid > div:first-child {
    width: 100%!important;
    min-width: 0!important;
    max-width: none!important;
  }

  html body #top#top .hero .hero-title {
    width: 100%!important;
    max-width: 100%!important;
    margin: 0!important;
    font-size: clamp(44px,6.7vw,64px)!important;
    line-height: 1.04!important;
    letter-spacing: -.045em!important;
    text-wrap: balance;
    overflow-wrap: normal;
    transform: none!important;
  }

  html body #top#top .hero .hero-side {
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    align-self: start!important;
    width: 100%!important;
    max-width: none!important;
    min-width: 0!important;
    gap: 32px!important;
    padding: 0!important;
  }

  html body #top#top .hero .hero-side::before,
  html body #top#top .hero .hero-side::after {
    display: none!important;
  }

  html body #top#top .hero .hero-support-block {
    order: 0!important;
    width: 100%!important;
    max-width: 560px!important;
    min-width: 0!important;
    margin: 0!important;
    padding: 0!important;
    transform: none!important;
  }

  html body #top#top .hero .hero-support-label {
    margin: 0 0 10px!important;
    font-size: 9px!important;
    line-height: 1.35!important;
  }

  html body #top#top .hero .hero-support-copy {
    width: 100%!important;
    max-width: none!important;
    margin: 0!important;
    font-size: 17px!important;
    line-height: 1.55!important;
    text-wrap: pretty;
  }

  html body #top#top .hero .hero-support-action {
    justify-content: flex-start!important;
    margin: 22px 0 0!important;
    padding: 0!important;
    border-top: 0!important;
  }

  html body #top#top .hero .hero-support-action .btn-action {
    max-width: 100%!important;
    min-height: 48px!important;
    margin: 0!important;
    transform: none!important;
  }

  html body #top#top .hero .hero-support-action .btn-action .txt {
    height: auto!important;
    min-height: 48px!important;
    padding: 12px 23px!important;
    font-size: 13px!important;
    line-height: 1.35!important;
    white-space: normal!important;
  }

  html body #top#top .hero .hero-side .credential-hero-card {
    order: 1!important;
    width: 100%!important;
    max-width: 560px!important;
    min-width: 0!important;
    margin: 0!important;
    padding: 22px!important;
    transform: none!important;
  }

  html body #top#top .hero .credential-hero-head {
    min-width: 0!important;
    gap: 14px!important;
    margin-bottom: 14px!important;
  }

  html body #top#top .hero .credential-hero-head > div:last-child {
    min-width: 0!important;
  }

  html body #top#top .hero .credential-hero-card h3 {
    font-size: 18px!important;
    line-height: 1.2!important;
  }

  html body #top#top .hero .credential-hero-card p {
    font-size: 13px!important;
    line-height: 1.55!important;
    margin: 0 0 15px!important;
  }

  html body #top#top .hero .credential-hero-tags {
    flex-wrap: wrap!important;
    gap: 6px!important;
  }

  html body #top#top .hero .credential-hero-tags span {
    font-size: 9px!important;
    line-height: 1.35!important;
    min-height: 27px!important;
  }
}

@media (max-width: 600px) {
  html body #top#top .hero {
    min-height: 700px!important;
  }

  html body #top#top .hero .container {
    width: calc(100% - 44px)!important;
    padding: 56px 0 72px!important;
  }

  html body #top#top .hero .hero-title {
    font-size: clamp(38px,10.6vw,54px)!important;
    line-height: 1.04!important;
  }

  html body #top#top .hero .hero-support-copy {
    font-size: 16px!important;
  }

  html body #top#top .hero .hero-side .credential-hero-card {
    padding: 20px!important;
  }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  html body #top#top .hero > .slide {
    transition: none!important;
  }
}