.service-detail-page { min-height: 100vh; color: #EDEFF1; background: #051018; }
.detail-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 0 var(--pad); border-bottom: 1px solid rgba(221,225,228,.12); }
.detail-back { padding: 12px 0; color: #D8DADE; border-bottom: 1px solid #403D40; font-size: 13px; }
.detail-back span { margin-left: 9px; }
.detail-hero { min-height: 68vh; display: flex; justify-content: center; flex-direction: column; padding: clamp(100px, 13vw, 190px) var(--pad); background: radial-gradient(circle at 80% 30%, #403D40 0, #000B15 27%, #051018 62%); }
.detail-kicker { margin: 0 0 28px; color: #D8DADE; font-family: monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.detail-hero h1 { max-width: 1100px; margin: 0; font-size: clamp(58px, 8.6vw, 140px); font-weight: 520; line-height: .88; letter-spacing: -.065em; }
.detail-lead { max-width: 690px; margin: 38px 0 0; color: #D8DADE; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.55; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 var(--pad) 130px; background: #DDE1E4; }
.detail-grid article, .detail-grid > a { min-height: 240px; padding: 30px 24px; color: #051018; border-right: 1px solid rgba(5,16,24,.14); border-bottom: 1px solid rgba(5,16,24,.14); transition: background .25s ease, transform .25s ease; }
.detail-grid article:nth-child(4n), .detail-grid > a:nth-child(4n) { border-right: 0; }
.detail-grid > a:hover { background: #EDEFF1; transform: translateY(-4px); }
.detail-grid span { color: #403D40; font-family: monospace; font-size: 14px; }
.detail-grid h2 { margin: 74px 0 0; font-size: clamp(23px, 2.4vw, 38px); line-height: 1; letter-spacing: -.045em; }
.detail-cta { padding: clamp(80px, 10vw, 150px) var(--pad); color: #051018; background: #EDEFF1; }
.detail-cta p { margin: 0; color: #403D40; text-transform: uppercase; font-size: 12px; letter-spacing: .14em; }
.detail-cta h2 { max-width: 920px; margin: 24px 0 42px; font-size: clamp(42px, 6.2vw, 88px); line-height: .94; letter-spacing: -.055em; }
.detail-cta > a { display: inline-flex; gap: 42px; align-items: center; min-height: 56px; padding: 0 24px; color: #EDEFF1; background: #051018; border-radius: 100px; font-size: 14px; }
.detail-footer { display: flex; justify-content: space-between; gap: 30px; padding: 38px var(--pad); color: #D8DADE; font-size: 12px; }
@media (max-width: 760px) {
  .detail-header { min-height: 70px; }.detail-back { font-size: 11px; }
  .detail-hero { min-height: 620px; padding-top: 125px; }.detail-hero h1 { font-size: clamp(50px, 15vw, 72px); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 80px; }.detail-grid article, .detail-grid > a { min-height: 190px; padding: 22px 15px; }.detail-grid article:nth-child(odd), .detail-grid > a:nth-child(odd) { border-right: 1px solid rgba(5,16,24,.14); }.detail-grid article:nth-child(even), .detail-grid > a:nth-child(even) { border-right: 0; }.detail-grid h2 { margin-top: 45px; font-size: 22px; }
  .detail-footer { align-items: flex-start; flex-direction: column; }
}