/* Detailed service pages share the approved navy/orange site design. */
.service-hero { background: var(--navy-hero); }
.service-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: calc(var(--diag) + 32px); padding-bottom: 60px; }
.service-hero .hero__eyebrow { margin-left: 0; font-size: 16px; }
.service-hero .hero__title { font-size: clamp(36px, 3.8vw, 58px); line-height: 1.12; }
.service-hero .hero__lead { margin: 22px 0 0; font-size: 19px; line-height: 1.65; max-width: 630px; }
.service-hero .hero__actions { margin: 28px 0 0; align-items: center; gap: 12px 24px; }
.service-hero .hero__actions .btn { white-space: normal; height: auto; min-height: 60px; padding: 16px 24px; text-align: center; font-size: 17px; }
.service-hero__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; }
.service-hero__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.service-visual { margin: 0; padding: 30px; border: 1px solid #35506D; border-radius: 14px; background: #0A2C50; }
.diagram-eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--orange); font-size: 12px; font-weight: 800; margin-bottom: 26px; }
.service-visual figcaption { color: #D6E2EF; font-size: 13px; text-align: center; margin-top: 24px; }
.diagram-node { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid #496785; background: #12395E; border-radius: 8px; color: var(--white); text-align: center; }
.diagram-node small { color: #D6E2EF; font-size: 13px; }
.diagram-node svg { width: 50px; height: 40px; color: var(--orange); }
.diagram-node--accent { border-color: var(--orange); }
.node-symbol { color: var(--orange); font-size: 30px; line-height: 1; }
.diagram-connector { height: 22px; width: 2px; margin: 0 auto; background: var(--orange); }
.device-row, .vm-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.device-row span, .vm-row > span { padding: 14px 6px; text-align: center; background: #12395E; border: 1px solid #496785; border-radius: 8px; color: var(--white); font-size: 13px; }
.vm-row b { display: block; color: var(--orange); font-size: 11px; letter-spacing: .08em; margin-bottom: 7px; }
.server-base { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 8px; border: 1px solid #496785; background: #12395E; }
.server-base svg { width: 58px; flex: none; }
.server-base span { display: block; font-size: 12px; color: #D6E2EF; margin-top: 6px; }
.support-screen { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--white); padding: 4px 0 22px; }
.support-screen svg { width: 140px; height: 105px; }
.support-topics { display: grid; gap: 10px; }
.support-topics li { padding: 14px 16px; background: #12395E; border: 1px solid #496785; border-radius: 8px; color: #D6E2EF; }
.support-topics li::before { content: "✓"; color: var(--orange); margin-right: 12px; }
.service-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.service-detail-grid .detail-panel { border-top: 4px solid var(--orange); }
.service-detail-grid .check-list { font-size: 15px; }
.service-planning { background: var(--navy-hero); color: #D6E2EF; }
.service-planning .detail-eyebrow { color: var(--orange); }
.service-planning h2, .service-planning h3 { color: var(--white); }
.service-planning__panel { padding: 30px; border-radius: 12px; background: #0D3258; border: 1px solid #35506D; }
.service-planning .check-list li::before { color: var(--orange); }
.related-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
.related-service { display: block; }
.related-service:hover { border-color: #9DB9D8; background: var(--gray-bg); }
.related-service h3 { display: flex; justify-content: space-between; gap: 12px; }
.related-service h3 span { color: #005DA8; }
.submenu a[aria-current="page"] { background: var(--gray-bg); color: #005DA8; }
@media (max-width:1080px) {
  .service-hero__grid { grid-template-columns: 1fr; }
  .service-visual { max-width: 600px; width: 100%; }
  .service-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width:767px) {
  .service-hero__grid { padding-top: calc(var(--diag) + 24px); padding-bottom: 40px; }
  .service-hero .hero__actions { align-items: stretch; flex-direction: column; }
  .service-hero .hero__actions .btn { flex: none; min-width: 0; }
  .service-hero__link { justify-content: center; }
  .service-visual, .service-planning__panel { padding: 22px; }
  .device-row, .vm-row { gap: 7px; }
  .device-row span, .vm-row > span { font-size: 12px; }
  .related-service-grid { grid-template-columns: 1fr; }
}