.service-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 48px; padding-top: 72px; padding-bottom: 72px; }
.service-intro-copy { min-width: 0; }
.service-intro-no-cover { grid-template-columns: minmax(0, 1fr); }
.service-intro-cover { width: 100%; min-width: 0; overflow: hidden; border-radius: 8px; background: #d9d9d9; }
.service-intro h2, .service-related h2 { margin: 0 0 24px; font-size: 36px; line-height: 56px; font-weight: 600; color: #000; }
.service-related h2 span { color: #169edc; }
.service-rich-text { font-size: 16px !important; line-height: 26px !important; color: rgba(0,0,0,.8); overflow-wrap: anywhere; overflow-x: auto; }
/* CMS 富文本可能包含内联字号/行距，统一锁定为 Figma 正文规格。 */
.service-rich-text * { font-size: 16px !important; line-height: 26px !important; }
.service-rich-text p { margin: 0 0 24px !important; }
.service-rich-text img { max-width: 100%; height: auto; }
.service-rich-text h2, .service-rich-text h3 { margin: 24px 0 16px; }
.service-rich-text ul, .service-rich-text ol { padding-left: 24px; margin-bottom: 24px; list-style: revert; }
.service-rich-text a { color: #169edc; text-decoration: underline; }
.service-intro-image { display: block; width: 100%; aspect-ratio: 576 / 410; object-fit: cover; border-radius: 8px; }
.service-related { padding: 72px 0; background: #f9f9f9; }
.service-related h2 { margin-bottom: 40px; }
.service-related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.service-related-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; transition: box-shadow .2s, translate .2s; }
.service-related-media { overflow: hidden; border-radius: 8px; aspect-ratio: 282 / 158; }
.service-related-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.service-related-card-body { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 20px 24px 24px; }
.service-related-card h3 { margin: 0 0 16px; font-size: 20px; line-height: 28px; font-weight: 600; color: #000; overflow-wrap: anywhere; transition: color .2s; }
.service-related-card-body > span { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 16px; line-height: 20px; font-weight: 500; color: #169edc; }
.service-related-card-body > span img { flex: none; width: 20px; height: 20px; transition: translate .2s; }
.service-related-card:hover { translate: 0 -4px; box-shadow: 0 8px 24px #0000000d; }
.service-related-card:hover h3 { color: #169edc; }
.service-related-card:hover .service-related-media img { scale: 1.04; }
.service-related-card:hover .service-related-card-body > span img { translate: 3px 0; }
.service-related-card:focus-visible { outline: 2px solid #169edc; outline-offset: 4px; }
.service-contact-cta { padding-top: 72px; padding-bottom: 160px; }
.service-contact-strip { position: relative; isolation: isolate; overflow: hidden; min-height: 110px; padding: 24px 32px; border-radius: 12px; background: #ecf7fc; text-align: center; }
.service-contact-strip::before, .service-contact-strip::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 500px; height: 800px; background: url('../images/contact-cta/medical.webp') center / cover no-repeat; opacity: .16; }
.service-contact-strip::before { left: -310px; top: -300px; transform: rotate(57.65deg); mask-image: linear-gradient(to right, #000, transparent); }
.service-contact-strip::after { right: -90px; top: -350px; transform: rotate(-117.21deg); mask-image: linear-gradient(to right, #000, transparent); }
.service-contact-cta h2 { margin: 0 0 12px; font-size: 20px; line-height: 28px; font-weight: 600; }
.service-contact-cta a { color: #169edc; }
.service-contact-cta ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; line-height: 22px; }
.service-contact-cta li { display: flex; align-items: center; }
.service-contact-cta li + li::before { content: ""; display: block; width: 1px; height: 16px; margin-right: 24px; background: rgba(22,158,220,.15); }
.service-contact-cta li a { display: inline-flex; align-items: center; gap: 9px; }
.service-contact-cta li img { flex: 0 0 18px; width: 18px; height: 18px; }
.service-contact-cta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-contact-cta a:focus-visible { outline: 2px solid #169edc; outline-offset: 4px; border-radius: 2px; }
@media (max-width: 1023px) {
  .service-intro { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .service-intro h2, .service-related h2 { font-size: 28px; line-height: 40px; }
  .service-related { padding: 40px 0; }
  .service-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .service-related-card-body { padding: 16px; }
  .service-related-card h3 { font-size: 16px; line-height: 24px; }
  .service-related-card-body > span { font-size: 14px; }
  .service-contact-cta { padding-top: 40px; padding-bottom: 64px; }
  .service-contact-strip { padding: 24px 20px; }
  .service-contact-cta h2 { font-size: 18px; }
  .service-contact-cta ul { flex-direction: column; align-items: center; gap: 12px; font-size: 14px; }
  .service-contact-cta li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-related-card, .service-related-media img, .service-related-card h3, .service-related-card-body > span img { transition: none; }
  .service-related-card:hover, .service-related-card:hover .service-related-card-body > span img { translate: none; }
  .service-related-card:hover .service-related-media img { scale: none; }
}
.service-intro-copy > h2 { font-size: 36px !important; line-height: 56px !important; font-weight: 600; }