.service-detail-page { min-height: 100vh; background: #f7f7ff; }

.service-detail-header { display: flex; align-items: center; gap: clamp(22px, 4vw, 56px); min-height: 76px; padding: 0 5.5vw; background: var(--ink); color: #fff; }
.service-detail-logo { flex: 0 0 auto; font: 600 36px Outfit, sans-serif; letter-spacing: -.04em; }
.service-detail-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 30px); }
.service-detail-nav a { padding: 8px 0; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 600; white-space: nowrap; }
.service-detail-nav a:hover, .service-detail-nav a:focus-visible { color: var(--accent); }
.service-detail-nav a.is-current { border-bottom: 1px solid var(--accent); color: #fff; }
.service-detail-contact { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid currentColor; color: var(--accent); font-size: 14px; font-weight: 700; }
.service-detail-contact span { transition: transform .2s; }
.service-detail-contact:hover, .service-detail-contact:focus-visible { color: #fff; }
.service-detail-contact:hover span, .service-detail-contact:focus-visible span { transform: translateX(5px); }

.service-detail-main { width: min(1120px, 89vw); margin: 0 auto; padding: clamp(76px, 10vw, 140px) 0; }
.service-detail-kicker { margin: 0; color: #4d839a; font: 700 14px Outfit, sans-serif; letter-spacing: .16em; }
.service-detail-main h1 { max-width: 760px; margin: 18px 0 0; font-size: clamp(42px, 6vw, 76px); line-height: 1.18; letter-spacing: .03em; }
.service-detail-lead { max-width: 680px; margin: 28px 0 0; color: #526779; font-size: clamp(16px, 1.6vw, 19px); line-height: 2; }
.service-detail-overview { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: clamp(30px, 7vw, 100px); margin-top: clamp(60px, 8vw, 100px); padding: clamp(28px, 5vw, 58px); background: #fff; }
.service-detail-overview h2, .service-detail-section h2 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.38; }
.service-detail-overview p { margin: 24px 0 0; color: #526779; font-size: 16px; line-height: 2; }
.service-detail-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.service-detail-points li { padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 1.7; }
.service-detail-points li::before { content: "—"; margin-right: 10px; color: #4d839a; }
.service-detail-section { margin-top: clamp(70px, 9vw, 120px); }
.service-detail-section > p { max-width: 680px; margin: 18px 0 0; color: #526779; font-size: 16px; line-height: 2; }
.service-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.service-detail-card { min-height: 200px; padding: 28px; border-top: 2px solid #4d839a; background: rgba(255, 255, 255, .68); }
.service-detail-card span { color: #4d839a; font: 600 13px Outfit, sans-serif; letter-spacing: .1em; }
.service-detail-card h3 { margin: 18px 0 0; font-size: 20px; }
.service-detail-card p { margin: 12px 0 0; color: #526779; font-size: 15px; line-height: 1.85; }
.service-detail-note { margin-top: 22px !important; padding-left: 16px; border-left: 2px solid var(--accent); color: #526779; font-size: 14px !important; }

@media (max-width: 760px) {
  .service-detail-header { display: block; padding: 20px 7vw; }
  .service-detail-logo { font-size: 30px; }
  .service-detail-nav { justify-content: flex-start; gap: 16px; margin-top: 18px; overflow-x: auto; }
  .service-detail-contact { margin-top: 20px; }
  .service-detail-main { width: min(100% - 40px, 640px); padding: 70px 0; }
  .service-detail-main h1 { font-size: 42px; }
  .service-detail-overview, .service-detail-grid { grid-template-columns: 1fr; }
  .service-detail-overview { gap: 34px; padding: 28px 24px; }
  .service-detail-card { min-height: 0; }
}