:root {
  --mr-service-hero-copy-width: 1030px;
  --mr-service-hero-text-width: 835px;
  --mr-service-hero-visual-width: 1030px;
}

.mr-service-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    radial-gradient(circle at 50% 72%, rgba(71, 89, 245, 0.07), transparent 31%),
    #fff;
}

.mr-service-hero__inner { position: relative; }

.mr-service-hero__copy {
  width: 100%;
  max-width: var(--mr-service-hero-copy-width);
  margin-inline: auto;
  text-align: center;
}

.mr-service-hero__breadcrumbs {
  max-width: var(--mr-service-hero-copy-width);
  margin: 0 auto 22px;
  text-align: center;
}

.mr-service-hero__breadcrumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.4;
}

.mr-service-hero .mr-eyebrow { margin-bottom: 16px; }

.mr-service-hero h1 {
  max-width: 1040px;
  margin: 0 auto;
  font-family: var(--mr-font-heading);
  font-size: var(--mr-display-size);
  font-weight: var(--mr-weight-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.mr-service-hero__lead {
  max-width: var(--mr-service-hero-text-width);
  margin: 24px auto 0;
  color: var(--mr-color-copy);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
  text-align: center;
  text-wrap: balance;
}

.mr-service-hero__support {
  max-width: 760px;
  margin: 4px auto 0;
  color: var(--mr-color-copy);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.mr-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.mr-service-hero__scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 20px auto 0;
  color: #737373;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.mr-service-hero__scope span { display: inline-flex; align-items: center; }
.mr-service-hero__scope span:not(:last-child)::after {
  content: "·";
  margin: 0 8px;
  color: #a5a5a5;
}

.mr-service-hero__disclaimer {
  max-width: 760px;
  margin: 12px auto 0;
  color: #797979;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.mr-service-hero__visual {
  width: 100%;
  max-width: var(--mr-service-hero-visual-width);
  margin: 40px auto 0;
}

.mr-service-hero .p03-hero__grid,
.mr-service-hero .p04-hero__grid,
.mr-service-hero .p05-hero__grid { display: block; }

@media (max-width: 640px) {
  .mr-service-hero { padding: 48px 0 64px; }
  .mr-service-hero__breadcrumbs { margin-bottom: 18px; }
  .mr-service-hero__breadcrumbs ol { font-size: 11px; }
  .mr-service-hero h1 { font-size: var(--mr-display-size); line-height: 1.12; }
  .mr-service-hero__lead { margin-top: 22px; font-size: 16px; line-height: 1.55; }
  .mr-service-hero__support { margin-top: 9px; font-size: 14px; }
  .mr-service-hero__actions { flex-direction: column; gap: 10px; margin-top: 26px; }
  .mr-service-hero__actions .mr-button { width: 100%; }
  .mr-service-hero__scope { margin-top: 18px; font-size: 11px; }
  .mr-service-hero__disclaimer { font-size: 11px; line-height: 1.45; }
  .mr-service-hero__visual { margin-top: 38px; }
}


