.homepage-carousel {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  background: #f7f8fa !important;
  background-image: none !important
}

.homepage-carousel:before,
.homepage-carousel:after {
  content: none !important
}

.homepage-carousel .banner-grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 610px !important;
  padding: 48px 0 !important
}

.homepage-carousel .banner-copy {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  max-width: none !important;
  width: 100% !important;
  padding: 0 30px !important;
  text-align: center
}

.banner-copy-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center
}

.banner-copy-slide.is-active {
  display: flex
}

.homepage-carousel .banner-copy-slide .kicker {
  margin: 0 0 18px !important;
  color: #d61319 !important;
  font-size: 18px !important;
  font-weight: 800
}

.homepage-carousel .banner-copy-slide h1,
.homepage-carousel .banner-copy-slide h2 {
  max-width: 700px;
  margin: 0 !important;
  color: #41464d !important;
  font-size: clamp(39px, 3.4vw, 56px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.035em;
  text-shadow: none !important
}

.homepage-carousel .banner-copy-slide .banner-description {
  max-width: 640px;
  margin: 19px auto 0 !important;
  color: #555e69 !important;
  font-size: 18px !important;
  line-height: 1.55
}

.homepage-carousel .banner-copy-slide .banner-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 0 !important
}

.homepage-carousel .banner-copy-slide .banner-actions .pill {
  min-width: 155px;
  min-height: 44px
}

.homepage-carousel .banner-copy-slide .banner-actions .pill.red {
  border-color: #d61319 !important;
  background: #d61319 !important;
  color: #fff !important
}

.homepage-carousel .banner-copy-slide .banner-actions .pill.light {
  border-color: #cfd5da !important;
  background: #fff !important;
  color: #41464d !important
}

.homepage-carousel .banner-form {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: 350px !important;
  margin: 0 !important
}

.banner-slides,
.banner-slide,
.banner-slide picture {
  position: absolute;
  inset: 0;
  display: block
}

.banner-slides {
  z-index: 0
}

.banner-slides:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(248, 249, 250, .80) 0%, rgba(248, 249, 250, .65) 31%, rgba(248, 249, 250, .34) 53%, rgba(248, 249, 250, .03) 78%, rgba(248, 249, 250, 0) 100%)
}

.banner-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease
}

.banner-slide.is-active {
  opacity: 1;
  visibility: visible
}

.banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.banner-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(65, 70, 77, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #41464d;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 5px 18px rgba(30, 35, 40, .08)
}

.banner-arrow:hover,
.banner-arrow:focus-visible {
  color: #d61319;
  border-color: #d61319;
  background: #fff
}

.banner-prev {
  left: 16px
}

.banner-next {
  right: 16px
}

.banner-dots {
  position: absolute;
  z-index: 4;
  bottom: 17px;
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%)
}

.banner-dot {
  width: 24px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(65, 70, 77, .38);
  cursor: pointer;
  transition: width .25s, background .25s
}

.banner-dot.is-active {
  width: 44px;
  background: #d61319
}

.banner-dot:focus-visible {
  outline: 2px solid #d61319;
  outline-offset: 4px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.trust-strip-visual {
  background: #fff !important;
  border-bottom: 1px solid #e8e9eb
}

.trust-strip-visual .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - 40px), 1200px)
}

.trust-strip-visual .wrap>.trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 100px;
  padding: 18px 20px;
  border-right: 1px solid #efd7d9;
  border-bottom: 1px solid #efd7d9
}

.trust-strip-visual .wrap>.trust-item:nth-child(4n+1) {
  border-left: 1px solid #efd7d9
}

.trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff5f5;
  color: #d61319
}

.trust-icon svg {
  width: 27px;
  height: 27px
}

.trust-strip-visual b {
  display: block;
  color: #41464d;
  font-size: 16px;
  line-height: 1.3
}

.trust-strip-visual .trust-item>div>span {
  display: block;
  margin-top: 5px;
  color: #697078;
  font-size: 12px;
  line-height: 1.4
}

@media(max-width:1000px) {
  .homepage-carousel .banner-grid {
    grid-template-columns: minmax(0, 1fr) 330px !important
  }

  .homepage-carousel .banner-form {
    width: 330px !important
  }

  .homepage-carousel .banner-copy {
    padding: 0 15px !important
  }

  .homepage-carousel .banner-copy-slide h1,
  .homepage-carousel .banner-copy-slide h2 {
    font-size: 38px !important
  }

  .trust-strip-visual .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .trust-strip-visual .wrap>.trust-item:nth-child(4n+1) {
    border-left: 0
  }

  .trust-strip-visual .wrap>.trust-item:nth-child(2n+1) {
    border-left: 1px solid #efd7d9
  }
}

@media(max-width:760px) {
  .homepage-carousel .banner-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 0 25px !important
  }

  .homepage-carousel .banner-copy {
    order: 1;
    min-height: 470px;
    padding: 54px 8px 34px !important
  }

  .homepage-carousel .banner-copy-slide .kicker {
    font-size: 14px !important;
    margin-bottom: 11px !important
  }

  .homepage-carousel .banner-copy-slide h1,
  .homepage-carousel .banner-copy-slide h2 {
    font-size: 30px !important;
    line-height: 1.2 !important
  }

  .homepage-carousel .banner-copy-slide .banner-description {
    font-size: 14px !important;
    margin: 12px auto 0 !important
  }

  .homepage-carousel .banner-copy-slide .banner-actions {
    gap: 8px;
    margin-top: 18px !important
  }

  .homepage-carousel .banner-copy-slide .banner-actions .pill {
    min-width: 0;
    min-height: 39px;
    padding: 0 12px;
    font-size: 12px
  }

  .homepage-carousel .banner-form {
    order: 2;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    margin: 0 !important
  }

  .banner-slides {
    inset: 0 0 auto;
    height: 470px
  }

  .banner-slides:after {
    background: linear-gradient(180deg, rgba(248, 249, 250, .04) 0%, rgba(248, 249, 250, .58) 42%, rgba(248, 249, 250, .90) 82%, rgba(248, 249, 250, .96) 100%)
  }

  .banner-arrow {
    top: 235px;
    width: 36px;
    height: 36px;
    font-size: 28px
  }

  .banner-prev {
    left: 10px
  }

  .banner-next {
    right: 10px
  }

  .banner-dots {
    top: 448px;
    bottom: auto
  }

  .trust-strip-visual .wrap {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .trust-strip-visual .wrap>.trust-item {
    min-height: 84px;
    gap: 9px;
    padding: 13px 9px
  }

  .trust-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px
  }

  .trust-icon svg {
    width: 21px;
    height: 21px
  }

  .trust-strip-visual b {
    font-size: 13px
  }

  .trust-strip-visual .trust-item>div>span {
    font-size: 10px
  }
}

@media(prefers-reduced-motion:reduce) {

  .banner-slide,
  .banner-dot {
    transition: none
  }
}

/* Designed copy is part of each uploaded banner image; controls stay fixed. */
.homepage-carousel .banner-copy {
  position: relative !important;
  min-height: 520px !important;
  padding: 0 !important
}

.homepage-carousel .banner-copy>.banner-actions {
  position: absolute !important;
  bottom: 37px;
  left: 0;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  gap: 14px;
  margin: 0 !important
}

.homepage-carousel .banner-copy>.banner-actions .pill {
  min-width: 165px;
  min-height: 46px;
  padding: 0 20px;
  font-weight: 700
}

.homepage-carousel .banner-copy>.banner-actions .pill.red {
  border-color: #d61319 !important;
  background: #d61319 !important;
  color: #fff !important
}

.homepage-carousel .banner-copy>.banner-actions .pill.light {
  border-color: #cfd5da !important;
  background: rgba(255, 255, 255, .97) !important;
  color: #41464d !important
}

.homepage-carousel .banner-slides:after {
  content: none !important
}

@media(max-width:760px) {
  .homepage-carousel .banner-copy {
    min-height: 470px !important;
    padding: 0 !important
  }

  .homepage-carousel .banner-copy>.banner-actions {
    bottom: 28px;
    gap: 8px
  }

  .homepage-carousel .banner-copy>.banner-actions .pill {
    min-width: 0;
    min-height: 39px;
    padding: 0 10px;
    font-size: 12px
  }
}

/* Course-specific advertisement art; fixed controls retain the same geometry. */
@media(min-width:761px) {
  .homepage-carousel .banner-copy>.banner-actions .pill {
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
    padding: 0 8px !important
  }
}

@media(max-width:760px) {
  .homepage-carousel .banner-copy>.banner-actions {
    bottom: 44px !important
  }

  .homepage-carousel .banner-copy>.banner-actions .pill {
    width: auto !important;
    max-width: none !important
  }
}

/* v7: artwork and controls share the 1200px content grid. */
.homepage-carousel .banner-grid {
  grid-template-columns: minmax(0, 1fr) 350px !important;
  min-height: 585px !important;
  padding: 18px 0 !important
}

.homepage-carousel .banner-copy {
  align-self: stretch !important;
  min-height: 549px !important
}

.homepage-carousel .banner-form {
  width: 350px !important
}

.homepage-carousel .banner-copy>.banner-actions {
  top: var(--action-top, 451px) !important;
  bottom: auto !important
}

.homepage-carousel .banner-copy>.banner-actions .pill {
  width: min(205px, calc(50% - 7px)) !important;
  min-width: 0 !important;
  max-width: 205px !important
}

.banner-slide img {
  object-fit: fill
}

@media(max-width:1000px) and (min-width:761px) {
  .homepage-carousel .banner-copy>.banner-actions .pill {
    font-size: 12px !important
  }
}

@media(max-width:760px) {
  .homepage-carousel {
    --mobile-art-height: 88vw
  }

  .homepage-carousel .banner-grid {
    min-height: 0 !important;
    padding: 0 0 24px !important
  }

  .homepage-carousel .banner-copy {
    height: var(--mobile-art-height) !important;
    min-height: var(--mobile-art-height) !important
  }

  .homepage-carousel .banner-form {
    width: 100% !important
  }

  .banner-slides {
    height: var(--mobile-art-height) !important
  }

  .homepage-carousel .banner-copy>.banner-actions {
    top: auto !important;
    bottom: 43px !important
  }

  .homepage-carousel .banner-copy>.banner-actions .pill {
    width: min(190px, calc(50% - 4px)) !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 39px !important
  }

  .banner-arrow {
    top: calc(var(--mobile-art-height) * .54) !important
  }

  .banner-dots {
    top: calc(var(--mobile-art-height) - 19px) !important;
    bottom: auto !important
  }
}

/* Center the visible controls and form together. The left column fits the
   two 205px buttons plus their 14px gap, rather than an oversized empty cell.
   Desktop SVG copy uses -(350px + column-gap) / 2 relative to viewport center. */
@media(min-width:761px) {
  .homepage-carousel .banner-grid {
    width: min(calc(100% - 64px), 992px) !important;
    grid-template-columns: minmax(0, 1fr) 350px !important;
    gap: clamp(24px, calc(100vw - 838px), 218px) !important;
    margin-inline: auto !important
  }
}