
/* Services page */
.services-hero { position: relative; isolation: isolate; overflow: hidden; color: white; background: #101b3c; padding: 105px 0 0; }
.services-hero::before { position: absolute; content: ""; inset: 0; z-index: -2; background: radial-gradient(circle at 78% 45%, rgba(82,132,220,.22), transparent 32%), linear-gradient(115deg, #101b3c 0%, #14244d 58%, #1a3265 100%); }
.services-hero-inner { min-height: 460px; display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: 70px; padding-bottom: 80px; }
.services-hero-copy { max-width: 760px; }
.services-hero h1 { margin: 22px 0 22px; font: 800 clamp(48px, 6vw, 76px)/1.06 var(--font-display); letter-spacing: -.065em; }
.services-hero h1 span { color: #9db9ed; }
.services-hero-copy > p { max-width: 650px; margin: 0 0 32px; color: #c2cde3; font-size: 16px; line-height: 1.9; }
.services-hero-side { position: relative; min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(194,213,250,.18); border-radius: 50%; aspect-ratio: 1; max-width: 330px; justify-self: center; background: radial-gradient(circle, rgba(92,142,230,.15), transparent 67%); }
.services-hero-count { color: #fff; font: 800 112px/.9 var(--font-display); letter-spacing: -.09em; }
.services-hero-caption { margin-top: 16px; color: #bdcbe5; font-size: 12px; line-height: 1.7; text-align: center; }
.services-hero-lines { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 0 0 22px; opacity: .5; }
.services-hero-lines i { display: block; width: 3px; border-radius: 5px; background: #7fa7ed; }
.services-hero-lines i:nth-child(1), .services-hero-lines i:nth-child(7) { height: 28px; }
.services-hero-lines i:nth-child(2), .services-hero-lines i:nth-child(6) { height: 44px; }
.services-hero-lines i:nth-child(3), .services-hero-lines i:nth-child(5) { height: 60px; }
.services-hero-lines i:nth-child(4) { height: 78px; }
.services-hero-bottom { border-top: 1px solid rgba(255,255,255,.13); }
.services-hero-bottom .container { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #aebcda; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.services-hero-bottom b { margin-left: 6px; color: #fff; }
.services-intro { padding: 34px 0; border-bottom: 1px solid var(--line); background: #f8faff; }
.services-intro-grid { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 55px; }
.services-intro-label { color: #4f83df; font: 800 10px var(--font-display); letter-spacing: .15em; }
.services-intro-label b { color: #9aa8c0; font-weight: 600; }
.services-intro-grid p { max-width: 740px; margin: 0; color: #56637b; font-size: 13px; line-height: 1.8; }
.service-detail-list { padding-top: 105px; padding-bottom: 110px; }
.service-list-heading { margin-bottom: 45px; }
.service-list-heading h2 { margin: 17px 0 0; color: var(--navy); font: 800 clamp(38px, 4.5vw, 56px)/1.12 var(--font-display); letter-spacing: -.055em; }
.service-list-heading h2 span { color: #8996b0; }
.service-detail-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(45px, 7vw, 100px); padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.service-detail-row:last-child { border-bottom: 1px solid var(--line); }
.service-row-reverse .service-detail-image { order: 2; }
.service-row-reverse .service-detail-copy { order: 1; }
.service-detail-image { position: relative; overflow: hidden; border-radius: 5px; background: #eef3fb; }
.service-detail-image img { display: block; width: 100%; aspect-ratio: 1.28 / 1; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.service-detail-row:hover .service-detail-image img { transform: scale(1.035); }
.service-image-index { position: absolute; left: 18px; bottom: 18px; padding: 10px 13px; color: #fff; background: rgba(16,27,60,.88); border: 1px solid rgba(255,255,255,.22); border-radius: 2px; font: 700 12px var(--font-display); }
.service-image-index i { color: #aab9d6; font-style: normal; font-weight: 500; }
.service-detail-copy { max-width: 540px; }
.service-detail-kicker { display: inline-flex; align-items: center; gap: 9px; color: #6b7b99; font: 700 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.service-detail-copy h2 { margin: 17px 0 10px; color: var(--navy); font: 800 clamp(30px, 3.3vw, 43px)/1.12 var(--font-display); letter-spacing: -.05em; }
.service-detail-copy h3 { margin: 0 0 18px; color: #4f83df; font: 700 16px/1.5 var(--font-display); }
.service-detail-copy > p { margin: 0 0 16px; color: #59667e; font-size: 13px; line-height: 1.9; }
.service-detail-copy .service-pricing-note { margin: 0 0 24px; color: #929db1; font-size: 11px; line-height: 1.7; }
.service-action { min-height: 45px; padding: 0 19px; font-size: 10px; }
.services-contact-cta { padding: 78px 0; color: white; background: linear-gradient(115deg, #101b3c, #1b3670); }
.services-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.services-contact-inner h2 { margin: 17px 0 12px; font: 800 clamp(36px, 4.2vw, 54px)/1.1 var(--font-display); letter-spacing: -.055em; }
.services-contact-inner h2 span { color: #9db9ed; }
.services-contact-inner p { margin: 0; color: #bdc9df; font-size: 13px; line-height: 1.8; }
@media (max-width: 900px) {
  .services-hero-inner { gap: 30px; }
  .services-hero-side { max-width: 260px; min-height: 0; }
  .services-hero-count { font-size: 88px; }
  .service-detail-row { gap: 35px; }
}
@media (max-width: 760px) {
  .services-hero { padding-top: 75px; }
  .services-hero-inner { min-height: 0; grid-template-columns: 1fr; gap: 45px; padding-bottom: 55px; }
  .services-hero h1 { font-size: clamp(43px, 10vw, 58px); }
  .services-hero-copy > p { font-size: 13px; }
  .services-hero-side { width: 190px; justify-self: start; }
  .services-hero-count { font-size: 68px; }
  .services-hero-caption { font-size: 10px; margin-top: 8px; }
  .services-hero-lines { padding-bottom: 12px; }
  .services-hero-lines i:nth-child(1), .services-hero-lines i:nth-child(7) { height: 15px; }
  .services-hero-lines i:nth-child(2), .services-hero-lines i:nth-child(6) { height: 25px; }
  .services-hero-lines i:nth-child(3), .services-hero-lines i:nth-child(5) { height: 34px; }
  .services-hero-lines i:nth-child(4) { height: 42px; }
  .services-hero-bottom .container { min-height: 50px; flex-wrap: wrap; justify-content: flex-start; gap: 10px 25px; font-size: 8px; }
  .services-intro { padding: 25px 0; }
  .services-intro-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-detail-list { padding-top: 75px; padding-bottom: 75px; }
  .service-list-heading { margin-bottom: 28px; }
  .service-detail-row { grid-template-columns: 1fr; gap: 25px; padding: 36px 0 42px; }
  .service-row-reverse .service-detail-image, .service-row-reverse .service-detail-copy { order: initial; }
  .service-detail-image img { aspect-ratio: 1.35 / 1; }
  .service-detail-copy h2 { font-size: 32px; }
  .service-detail-copy h3 { font-size: 14px; }
  .service-detail-copy > p { font-size: 12px; }
  .services-contact-inner { align-items: flex-start; flex-direction: column; }
}

/* Distinguish the services CTA from the footer */
.services-contact-cta {
  color: #142348;
  background: linear-gradient(120deg, #edf4ff 0%, #e2edff 58%, #f4f7ff 100%);
  border-top: 1px solid #dce7fa;
  border-bottom: 1px solid #dce7fa;
}
.services-contact-inner h2 { color: #142348; }
.services-contact-inner h2 span { color: #4f83df; }
.services-contact-inner p { color: #5f6f8c; }
.services-contact-cta .eyebrow { color: #4d6389; }
.services-contact-cta .eyebrow-dot { background: #4f83df; box-shadow: 0 0 0 5px rgba(79,131,223,.13); }
.services-contact-cta .button-primary {
  color: #fff;
  background: #315fc4;
  border-color: #315fc4;
}
.services-contact-cta .button-primary:hover { background: #244fae; border-color: #244fae; }

/* Keep service artwork fully visible inside its frame; do not crop or stretch it. */
.service-detail-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 22px;
  background: #f5f8fe;
}
.service-detail-image img {
  width: 100%;
  height: 100%;
  max-height: 390px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .service-detail-image { min-height: 240px; padding: 14px; }
  .service-detail-image img { max-height: 330px; }
}

/* Services hero: replace the service count with a concise all-round growth message */
.services-hero-count.services-hero-mark {
  font-size: clamp(66px, 7vw, 94px);
  letter-spacing: -.075em;
  line-height: 1;
}
@media (max-width: 760px) {
  .services-hero-count.services-hero-mark { font-size: 62px; }
}

/* Lighter services hero + mobile spacing refinements */
.services-hero { color:#17294f; background:#eaf2ff; }
.services-hero::before { background:radial-gradient(circle at 78% 45%,rgba(112,157,226,.23),transparent 34%),linear-gradient(115deg,#edf4ff 0%,#e2edff 58%,#d8e7ff 100%); }
.services-hero h1 { color:#17294f; }
.services-hero h1 span { color:#4778c2; }
.services-hero-copy > p { color:#52627e; }
.services-hero-side { border-color:rgba(54,95,160,.22); background:radial-gradient(circle,rgba(93,143,220,.18),transparent 67%); }
.services-hero-count { color:#24477f; }
.services-hero-caption { color:#526b91; }
.services-hero-bottom { border-color:rgba(48,82,135,.18); }
.services-hero-bottom .container { color:#526b91; }
.services-hero-bottom b { color:#203e70; }
.services-hero-lines i { background:#5b8bd0; }
@media(max-width:760px) {
 .services-hero { padding-top:48px; }
 .services-hero-inner { gap:26px; padding-bottom:30px; }
 .services-hero h1 { font-size:clamp(38px,9.5vw,54px); line-height:1.08; }
 .services-hero-copy > p { font-size:14px; line-height:1.75; }
 .services-hero-side { width:160px; justify-self:start; }
 .services-hero-count { font-size:60px; }
 .services-hero-bottom .container { padding-top:12px; padding-bottom:12px; gap:8px 16px; }
 .service-detail-list { padding-top:58px; padding-bottom:58px; }
 .service-detail-row { gap:20px; padding:28px 0 34px; }
 .service-detail-image img { aspect-ratio:1.25 / 1; }
 .service-detail-copy h2 { font-size:clamp(28px,7vw,34px); }
 .services-contact-cta { padding:58px 0; }
 .services-contact-inner { gap:22px; }
}

/* Compact mobile service rows: image and copy share the available width */
@media (max-width: 760px) {
  .services-hero-inner { grid-template-columns: minmax(0,1fr); gap: 0; }
  .services-hero-side { display: none; }
  .services-hero { padding-top: 42px; }
  .services-hero-inner { padding-bottom: 26px; }
  .services-hero-bottom .container { justify-content: space-between; }
  .services-intro-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .service-detail-row,
  .service-row-reverse { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: start; gap: 15px; padding: 23px 0; }
  .service-row-reverse .service-detail-image,
  .service-row-reverse .service-detail-copy { order: initial; }
  .service-detail-image { min-height: 0; height: 118px; padding: 7px; border-radius: 7px; }
  .service-detail-image img { width: 100%; height: 100%; max-height: 104px; object-fit: contain; }
  .service-image-index { left: 6px; bottom: 6px; padding: 4px 6px; font-size: 8px; }
  .service-detail-copy { min-width: 0; }
  .service-detail-kicker { gap: 5px; font-size: 8px; letter-spacing: .08em; }
  .service-detail-copy h2 { margin: 8px 0 6px; font-size: clamp(19px,5vw,25px); line-height: 1.12; }
  .service-detail-copy h3 { margin-bottom: 8px; font-size: 11px; line-height: 1.4; }
  .service-detail-copy > p { margin-bottom: 8px; font-size: 10px; line-height: 1.55; }
  .service-detail-copy .service-pricing-note { margin-bottom: 10px; font-size: 9px; }
  .service-action { min-height: 34px; padding: 0 10px; font-size: 9px; }
  .services-contact-inner { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width: 390px) {
  .service-detail-row, .service-row-reverse { grid-template-columns: 31% minmax(0,1fr); gap: 11px; }
  .service-detail-image { height: 105px; }
  .service-detail-image img { max-height: 91px; }
  .service-detail-copy > p { font-size: 9px; }
}
