/* Corafter Phase 17 — blended 30/70 service hero composition.
   Keep the service copy on a clean navy field while the service-specific poster
   occupies roughly 73–75% of the right side and fades naturally into the copy. */

.service-page .service-hero {
  background: linear-gradient(110deg, #06183d 0%, #08285f 31%, #0a3c91 70%, #0758d7 100%) !important;
  min-height: 0 !important;
  height: max(650px, calc(100svh - var(--cora-header-offset, 72px))) !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* The visual frame remains edge-to-edge vertically, but the poster starts at
   the 27% mark. The remaining left field is intentionally plain navy. */
.service-page .service-hero .service-poster-frame {
  inset: 0 0 0 27% !important;
  width: 73% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.service-page .service-hero .service-poster-frame img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: .98 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Blend the left edge of each different poster into the navy copy area. */
.service-page .service-hero .service-poster-frame::after {
  inset: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(5, 20, 54, .94) 0%,
      rgba(5, 22, 60, .88) 10%,
      rgba(5, 25, 67, .66) 27%,
      rgba(5, 25, 67, .34) 44%,
      rgba(5, 25, 67, .08) 66%,
      rgba(5, 25, 67, 0) 100%),
    linear-gradient(0deg, rgba(4, 17, 47, .28) 0%, transparent 34%, rgba(4, 17, 47, .06) 100%) !important;
}

/* A second gradient belongs to the hero canvas so the first 30% always reads
   as a solid, high-contrast text zone even on brighter artwork. */
.service-page .service-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    #06183d 0%,
    #071d49 22%,
    rgba(7, 29, 73, .98) 29%,
    rgba(7, 29, 73, .78) 37%,
    rgba(7, 29, 73, .22) 51%,
    rgba(7, 29, 73, 0) 66%) !important;
}

.service-page .service-hero > .service-hero-grid {
  position: relative !important;
  z-index: 3 !important;
  align-items: center !important;
  padding-top: clamp(30px, 4.5vh, 54px) !important;
  padding-bottom: clamp(30px, 4.5vh, 54px) !important;
}

.service-page .service-hero .service-hero-copy {
  flex: 0 1 550px !important;
  width: min(39vw, 550px) !important;
  max-width: 550px !important;
  position: relative !important;
  z-index: 4 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.service-page .service-hero .breadcrumb,
.service-page .service-hero .eyebrow,
.service-page .service-hero h1,
.service-page .service-hero .service-hero-lead,
.service-page .service-hero .hero-actions,
.service-page .service-hero .service-hero-trust {
  position: relative;
  z-index: 2;
}

.service-page .service-hero .breadcrumb {
  margin-bottom: clamp(15px, 2vh, 24px) !important;
  color: rgba(218, 233, 255, .82) !important;
}

.service-page .service-hero .eyebrow {
  color: #8fc8ff !important;
  margin-bottom: 12px !important;
}

.service-page .service-hero h1 {
  max-width: 11.5ch !important;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  line-height: 1.035 !important;
  letter-spacing: -.052em !important;
  margin-bottom: 18px !important;
  text-wrap: balance;
}

.service-page .service-hero .service-hero-lead {
  max-width: 47ch !important;
  color: rgba(231, 240, 255, .94) !important;
  font-size: clamp(.98rem, 1.08vw, 1.12rem) !important;
  line-height: 1.72 !important;
}

.service-page .service-hero .hero-actions {
  gap: 12px !important;
  margin-top: 23px !important;
}

.service-page .service-hero .service-hero-trust {
  gap: 7px 14px !important;
  margin-top: 17px !important;
  color: rgba(206, 226, 255, .92) !important;
}

.service-page .service-hero .wave {
  display: none !important;
}

@media (min-width: 1500px) {
  .service-page .service-hero .service-hero-copy {
    width: min(38vw, 570px) !important;
  }
}

@media (max-width: 1100px) {
  .service-page .service-hero .service-poster-frame {
    left: 25% !important;
    width: 75% !important;
  }
  .service-page .service-hero .service-hero-copy {
    width: min(43vw, 520px) !important;
    flex-basis: 520px !important;
  }
  .service-page .service-hero h1 {
    font-size: clamp(2.45rem, 4.8vw, 3.8rem) !important;
    max-width: 11ch !important;
  }
}

@media (max-width: 760px) {
  .service-page .service-hero {
    height: auto !important;
    min-height: calc(100svh - var(--cora-header-offset, 72px)) !important;
  }
  .service-page .service-hero .service-poster-frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .service-page .service-hero .service-poster-frame img {
    object-position: 62% center !important;
  }
  .service-page .service-hero .service-poster-frame::after {
    background:
      linear-gradient(90deg, rgba(5, 20, 54, .96) 0%, rgba(5, 22, 60, .88) 48%, rgba(5, 25, 67, .54) 100%),
      linear-gradient(0deg, rgba(4, 17, 47, .42) 0%, rgba(4, 17, 47, .18) 52%, rgba(4, 17, 47, .36) 100%) !important;
  }
  .service-page .service-hero::before {
    background: linear-gradient(90deg, rgba(6, 24, 61, .92) 0%, rgba(7, 29, 73, .7) 60%, rgba(7, 29, 73, .3) 100%) !important;
  }
  .service-page .service-hero > .service-hero-grid {
    min-height: calc(100svh - var(--cora-header-offset, 72px)) !important;
    height: auto !important;
    padding: 36px 24px 42px !important;
  }
  .service-page .service-hero .service-hero-copy {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 590px !important;
  }
  .service-page .service-hero h1 {
    max-width: 12ch !important;
    font-size: clamp(2.35rem, 8.7vw, 3.6rem) !important;
  }
  .service-page .service-hero .service-hero-lead {
    max-width: 43ch !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 420px) {
  .service-page .service-hero > .service-hero-grid {
    padding-inline: 19px !important;
  }
  .service-page .service-hero h1 {
    font-size: clamp(2.2rem, 10vw, 2.75rem) !important;
  }
  .service-page .service-hero .hero-actions .btn {
    min-height: 46px;
    padding-inline: 16px;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .service-page .service-hero {
    height: max(620px, calc(100svh - var(--cora-header-offset, 72px))) !important;
  }
  .service-page .service-hero h1 {
    font-size: clamp(2.35rem, 3.7vw, 3.65rem) !important;
    margin-bottom: 13px !important;
  }
  .service-page .service-hero .breadcrumb { margin-bottom: 11px !important; }
  .service-page .service-hero .hero-actions { margin-top: 16px !important; }
  .service-page .service-hero .service-hero-trust { margin-top: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .service-hero *,
  .service-page .service-hero *::before,
  .service-page .service-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}