body.mn-service {
  --mn-lower-hero-image: url("../img/page-hero/hero-service-dx.webp");
}

body.mn-page-flow {
  --mn-lower-hero-image: url("../img/page-hero/hero-flow-dx.webp");
}

body.mn-case {
  --mn-lower-hero-image: url("../img/page-hero/hero-case-dx.webp");
}

body.mn-faq {
  --mn-lower-hero-image: url("../img/page-hero/hero-faq-dx.webp");
}

body.mn-company {
  --mn-lower-hero-image: url("../img/page-hero/hero-company-dx.webp");
}

body.mn-contact {
  --mn-lower-hero-image: url("../img/page-hero/hero-contact-dx.webp");
}

body.mn-news {
  --mn-lower-hero-image: url("../img/page-hero/hero-news-dx.webp");
}

body.mn-privacy {
  --mn-lower-hero-image: url("../img/page-hero/hero-privacy-dx.webp");
}

body.mn-service .mn-page-hero,
body.mn-page-flow .mn-page-hero,
body.mn-case .mn-page-hero,
body.mn-faq .mn-page-hero,
body.mn-contact .mn-page-hero,
body.mn-privacy .mn-page-hero,
body.mn-company .mn-company-hero,
body.mn-news .mn-news-hero {
  position: relative;
  min-height: clamp(470px, 42vw, 570px);
  overflow: hidden;
  border-bottom: 1px solid rgba(217, 231, 229, 0.72);
  background-image:
    linear-gradient(90deg, rgba(246, 250, 249, 0.99) 0%, rgba(246, 250, 249, 0.96) 36%, rgba(246, 250, 249, 0.78) 58%, rgba(246, 250, 249, 0.38) 82%, rgba(246, 250, 249, 0.24) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(246, 250, 249, 0.88) 100%),
    var(--mn-lower-hero-image);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  isolation: isolate;
}

body.mn-service .mn-page-hero::after,
body.mn-page-flow .mn-page-hero::after,
body.mn-case .mn-page-hero::before,
body.mn-case .mn-page-hero::after,
body.mn-faq .mn-page-hero::after,
body.mn-contact .mn-page-hero::after,
body.mn-privacy .mn-page-hero::after,
body.mn-company .mn-company-hero::before,
body.mn-news .mn-news-hero::after {
  display: none;
}

body.mn-service .mn-page-hero > .mn-container,
body.mn-page-flow .mn-page-hero > .mn-container,
body.mn-case .mn-page-hero > .mn-container,
body.mn-faq .mn-page-hero > .mn-container,
body.mn-contact .mn-page-hero > .mn-container,
body.mn-privacy .mn-page-hero > .mn-container,
body.mn-company .mn-company-hero > .mn-container,
body.mn-news .mn-news-hero > .mn-container {
  position: relative;
  z-index: 1;
}

body.mn-service .mn-page-hero__grid,
body.mn-page-flow .mn-page-hero__grid,
body.mn-case .mn-page-hero__grid,
body.mn-contact .mn-page-hero__grid,
body.mn-news .mn-news-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  max-width: 820px;
}

body.mn-service .mn-page-hero__copy,
body.mn-page-flow .mn-page-hero__copy,
body.mn-case .mn-page-hero__copy,
body.mn-faq .mn-page-hero__copy,
body.mn-contact .mn-page-hero__copy,
body.mn-privacy .mn-privacy-hero__copy,
body.mn-company .mn-company-hero__copy,
body.mn-news .mn-news-hero__copy {
  max-width: min(820px, 100%);
}

body.mn-service .mn-page-hero h1,
body.mn-page-flow .mn-page-hero h1,
body.mn-case .mn-page-hero h1,
body.mn-faq .mn-page-hero h1,
body.mn-contact .mn-page-hero h1,
body.mn-privacy .mn-page-hero h1,
body.mn-company .mn-company-hero h1,
body.mn-news .mn-news-hero h1 {
  color: var(--mn-navy);
  text-wrap: balance;
}

body.mn-service .mn-page-hero .mn-lead,
body.mn-page-flow .mn-page-hero .mn-lead,
body.mn-case .mn-page-hero .mn-lead,
body.mn-faq .mn-page-hero .mn-lead,
body.mn-contact .mn-page-hero .mn-lead,
body.mn-privacy .mn-page-hero .mn-lead,
body.mn-company .mn-company-hero .mn-lead,
body.mn-news .mn-news-hero .mn-lead {
  color: #31495d;
}

@media (max-width: 900px) {
  body.mn-service .mn-page-hero,
  body.mn-page-flow .mn-page-hero,
  body.mn-case .mn-page-hero,
  body.mn-faq .mn-page-hero,
  body.mn-contact .mn-page-hero,
  body.mn-privacy .mn-page-hero,
  body.mn-company .mn-company-hero,
  body.mn-news .mn-news-hero {
    min-height: 440px;
    background-image:
      linear-gradient(90deg, rgba(246, 250, 249, 1) 0%, rgba(246, 250, 249, 0.98) 54%, rgba(246, 250, 249, 0.78) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(246, 250, 249, 0.9) 100%),
      var(--mn-lower-hero-image);
    background-position: center right;
  }
}

@media (max-width: 640px) {
  body.mn-service .mn-page-hero,
  body.mn-page-flow .mn-page-hero,
  body.mn-case .mn-page-hero,
  body.mn-faq .mn-page-hero,
  body.mn-contact .mn-page-hero,
  body.mn-privacy .mn-page-hero,
  body.mn-company .mn-company-hero,
  body.mn-news .mn-news-hero {
    min-height: 430px;
    background-image:
      linear-gradient(90deg, rgba(246, 250, 249, 1) 0%, rgba(246, 250, 249, 0.99) 62%, rgba(246, 250, 249, 0.88) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(246, 250, 249, 0.92) 100%),
      var(--mn-lower-hero-image);
    background-position: 68% center;
  }

  body.mn-service .mn-page-hero__grid,
  body.mn-page-flow .mn-page-hero__grid,
  body.mn-case .mn-page-hero__grid,
  body.mn-contact .mn-page-hero__grid,
  body.mn-news .mn-news-hero__grid,
  body.mn-service .mn-page-hero__copy,
  body.mn-page-flow .mn-page-hero__copy,
  body.mn-case .mn-page-hero__copy,
  body.mn-faq .mn-page-hero__copy,
  body.mn-contact .mn-page-hero__copy,
  body.mn-privacy .mn-privacy-hero__copy,
  body.mn-company .mn-company-hero__copy,
  body.mn-news .mn-news-hero__copy {
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 44px);
  }

  body.mn-service .mn-page-hero h1,
  body.mn-page-flow .mn-page-hero h1,
  body.mn-case .mn-page-hero h1,
  body.mn-faq .mn-page-hero h1,
  body.mn-contact .mn-page-hero h1,
  body.mn-privacy .mn-page-hero h1,
  body.mn-company .mn-company-hero h1,
  body.mn-news .mn-news-hero h1 {
    width: 100%;
    max-width: 9.8em;
    overflow-wrap: anywhere;
    word-break: break-all;
    text-wrap: wrap;
  }

  body.mn-service .mn-page-hero .mn-lead,
  body.mn-page-flow .mn-page-hero .mn-lead,
  body.mn-case .mn-page-hero .mn-lead,
  body.mn-faq .mn-page-hero .mn-lead,
  body.mn-contact .mn-page-hero .mn-lead,
  body.mn-privacy .mn-page-hero .mn-lead,
  body.mn-company .mn-company-hero .mn-lead,
  body.mn-news .mn-news-hero .mn-lead {
    max-width: calc(100vw - 44px);
    overflow-wrap: anywhere;
  }
}