.service-page { color: #183153; background: #fff; }
.service-kicker { margin: 0 0 14px; color: #1168c8; font-size: 12px; font-weight: 750; letter-spacing: .16em; }
.service-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 20px 14px 24px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 650; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease; }
.service-button:hover { transform: translateY(-2px); }
.service-button--light { background: #fff; color: #002794; }
.service-button--blue { margin-top: 30px; background: #002794; color: #fff; }
.service-button--outline { border-color: rgba(255,255,255,.35); color: #fff; }

.service-hero { position: relative; min-height: 700px; overflow: hidden; background: #03102a; }
.service-hero__image { position: absolute; inset: 0; }
.service-hero__image::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,5,18,.94) 0%,rgba(0,12,39,.78) 42%,rgba(0,18,61,.3) 76%,rgba(0,18,61,.2) 100%); content: ""; }
.service-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.service-hero .container { position: relative; z-index: 1; display: flex; min-height: 700px; align-items: center; }
.service-hero__content { max-width: 900px; padding: 85px 0 95px; }
.service-hero .service-kicker { color: #82dcf3; }
.service-hero h1 { margin: 0 0 28px; color: #fff; font-size: clamp(51px,6vw,84px); font-weight: 650; line-height: 1.08; letter-spacing: -.04em; }
.service-hero h1 span { color: #8ddff6; }
.service-hero__content > p:not(.service-kicker) { max-width: 700px; margin: 0; color: rgba(255,255,255,.76); font-size: 19px; line-height: 1.9; }
.service-hero .service-button { margin-top: 36px; }

.service-overview { padding: 115px 0 125px; scroll-margin-top: 90px; background: #f3f7fb; }
.service-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; }
.service-section-heading h2 { margin: 0; color: #10285f; font-size: clamp(40px,5vw,64px); font-weight: 650; line-height: 1.17; letter-spacing: -.03em; }
.service-section-heading > p { max-width: 470px; margin: 0 0 8px; color: #667893; font-size: 17px; line-height: 1.9; }
.service-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin-top: 65px; overflow: hidden; border: 1px solid #d9e3ed; border-radius: 25px; background: #d9e3ed; box-shadow: 0 18px 55px rgba(0,39,148,.06); }
.service-card { position: relative; min-width: 0; overflow: hidden; background: #fff; color: #183153; text-decoration: none; transition: background .25s ease, color .25s ease; }
.service-card:hover { background: #002794; color: #fff; }
.service-card__image { display: block; height: 155px; overflow: hidden; background: #dce6f0; }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card:hover .service-card__image img { transform: scale(1.06); }
.service-card__content { position: relative; display: flex; min-height: 150px; flex-direction: column; padding: 24px 22px; }
.service-card small { color: #1b71cb; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.service-card strong { max-width: 175px; margin-top: 8px; font-size: 20px; font-weight: 650; line-height: 1.45; }
.service-card__arrow { position: absolute; right: 20px; bottom: 20px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d9e2ec; border-radius: 50%; color: #236fc0; }
.service-card:hover small,
.service-card:hover .service-card__arrow { color: #8ddff6; }
.service-card:hover .service-card__arrow { border-color: rgba(255,255,255,.35); }

.service-detail { padding: 115px 0; scroll-margin-top: 82px; background: #fff; }
.service-detail--tinted { background: #f3f7fb; }
.service-detail__layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(480px,1.2fr); gap: clamp(70px,9vw,145px); }
.service-detail__feature { min-width: 0; }
.service-detail__media { position: relative; height: 300px; margin: 0 0 40px; overflow: hidden; border-radius: 25px; background: #dce6f0; box-shadow: 0 20px 50px rgba(0,39,148,.1); }
.service-detail__media::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent,rgba(0,17,54,.72)); content: ""; }
.service-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.service-detail__media figcaption { position: absolute; z-index: 1; right: 22px; bottom: 19px; color: #fff; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.service-detail__intro { position: relative; align-self: start; }
.service-detail__intro h2 { margin: 0 0 24px; color: #10285f; font-size: clamp(37px,4vw,56px); font-weight: 650; line-height: 1.18; letter-spacing: -.03em; }
.service-detail__intro > p:not(.service-kicker) { margin: 0; color: #647690; font-size: 18px; line-height: 1.95; }
.service-detail__scope { overflow: hidden; border: 1px solid #d9e3ed; border-radius: 25px; background: #fff; box-shadow: 0 18px 50px rgba(0,39,148,.055); }
.service-detail__scope-heading { padding: 22px 28px; border-bottom: 1px solid #e1e8f0; color: #17366d; }
.service-detail__scope-heading span { font-size: 17px; font-weight: 650; }
.service-detail__scope ul { margin: 0; padding: 0; list-style: none; }
.service-detail__scope li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 21px 28px; border-bottom: 1px solid #e8eef4; }
.service-detail__scope li:last-child { border-bottom: 0; }
.service-detail__scope li > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #edf4ff; color: #1168c8; font-size: 12px; font-weight: 750; }
.service-detail__scope li p { margin: 0; color: #4f627d; font-size: 16px; line-height: 1.75; }

.service-cta { padding: 105px 0; background: #002794; }
.service-cta .service-kicker { color: #8ddff6; }
.service-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; }
.service-cta h2 { margin: 0 0 20px; color: #fff; font-size: clamp(39px,4.5vw,60px); font-weight: 650; line-height: 1.18; letter-spacing: -.03em; }
.service-cta__inner > div:first-child > p:last-child { max-width: 680px; margin: 0; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.85; }
.service-cta__actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 12px; }

@media (max-width:1199.98px) {
  .service-cards { grid-template-columns: repeat(3,1fr); }
  .service-detail__layout { grid-template-columns: .8fr 1.2fr; gap: 65px; }
}

@media (max-width:991.98px) {
  .service-hero,
  .service-hero .container { min-height: 640px; }
  .service-section-heading,
  .service-cta__inner { align-items: flex-start; flex-direction: column; }
  .service-cards { grid-template-columns: repeat(2,1fr); }
  .service-detail__layout { grid-template-columns: 1fr; gap: 55px; }
  .service-detail__intro { max-width: 720px; }
  .service-cta__actions { flex-direction: row; }
}

@media (max-width:767.98px) {
  .service-hero,
  .service-hero .container { min-height: 590px; }
  .service-hero__image::after { background: linear-gradient(90deg,rgba(0,6,22,.94),rgba(0,12,40,.69)); }
  .service-hero__content { padding: 75px 0 80px; }
  .service-hero h1 { font-size: clamp(42px,12vw,59px); }
  .service-hero__content > p:not(.service-kicker) { font-size: 17px; }
  .service-overview,
  .service-detail { padding: 82px 0; }
  .service-cards { margin-top: 45px; }
  .service-card { min-height: 220px; }
  .service-detail__scope li { padding-inline: 20px; }
  .service-cta { padding: 80px 0; }
}

@media (max-width:575.98px) {
  .service-cards { grid-template-columns: 1fr; border-radius: 20px; }
  .service-card { display: grid; grid-template-columns: 130px 1fr; }
  .service-card__image { height: 100%; min-height: 155px; }
  .service-card__content { min-height: 155px; padding: 23px 22px; }
  .service-card strong { max-width: none; font-size: 20px; }
  .service-card__arrow { top: 20px; right: 20px; }
  .service-detail__scope { border-radius: 20px; }
  .service-detail__scope-heading { padding-inline: 20px; }
  .service-detail__scope li { grid-template-columns: 30px 1fr; gap: 10px; }
  .service-detail__scope li p { font-size: 15px; }
  .service-cta__actions { width: 100%; flex-direction: column; }
  .service-cta__actions .service-button { width: 100%; }
}

@media (prefers-reduced-motion:reduce) {
  .service-button,
  .service-card { transition: none; }
}