.service-detail { background: #f5f3ed; }
.service-detail .site-header { position: relative; background: #111518; }
.service-detail .desktop-nav a { color: rgba(255,255,255,.74); }
.service-detail .desktop-nav .nav-cta { color: #fff; }
.detail-hero { position: relative; overflow: hidden; padding: 88px 0 92px; color: #fff; background: radial-gradient(circle at 82% 35%, rgba(246,201,0,.14), transparent 28%), linear-gradient(135deg,#171d21,#0d1114 72%); }
.detail-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -145px; top: -80px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012); }
.breadcrumbs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 31px; color: rgba(255,255,255,.55); font-size: 12px; }
.breadcrumbs a:hover { color: #f6c900; }
.detail-hero-copy { position: relative; z-index: 1; max-width: 850px; }
.detail-hero h1 { max-width: 790px; margin: 0; font-size: clamp(43px,6vw,72px); line-height: .98; letter-spacing: -.055em; }
.detail-hero h1 em { color: #f6c900; font-style: normal; }
.detail-hero .hero-lede { max-width: 690px; }
.detail-main { padding: 82px 0 96px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 70px; align-items: start; }
.detail-content { display: grid; gap: 62px; }
.detail-section h2 { margin: 0 0 18px; font-size: clamp(31px,4vw,45px); line-height: 1.06; letter-spacing: -.04em; }
.detail-section > p { max-width: 740px; margin: 0; color: #646b6f; font-size: 16px; line-height: 1.75; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 25px; padding: 0; list-style: none; }
.detail-list li { min-height: 76px; padding: 16px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(17,21,24,.12); border-radius: 12px; background: #fff; font-weight: 750; font-size: 14px; line-height: 1.4; }
.detail-list li::before { content: "✓"; width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(246,201,0,.18); color: #594a00; font-size: 12px; font-weight: 900; }
.process-list { display: grid; gap: 0; margin-top: 26px; }
.process-item { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 21px 0; border-top: 1px solid rgba(17,21,24,.13); }
.process-item:last-child { border-bottom: 1px solid rgba(17,21,24,.13); }
.process-item > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(17,21,24,.2); border-radius: 50%; font-size: 11px; font-weight: 850; }
.process-item h3 { margin: 0 0 6px; font-size: 17px; }
.process-item p { margin: 0; color: #646b6f; font-size: 14px; line-height: 1.6; }
.detail-aside { position: sticky; top: 28px; padding: 29px; border-radius: 18px; background: #111518; color: #fff; box-shadow: 0 20px 50px rgba(4,10,14,.13); }
.detail-aside .eyebrow { margin-bottom: 17px; }
.detail-aside h2 { margin: 0; font-size: 27px; line-height: 1.08; letter-spacing: -.035em; }
.detail-aside > p { margin: 15px 0 22px; color: rgba(255,255,255,.61); font-size: 13px; line-height: 1.65; }
.detail-aside .button { width: 100%; }
.detail-aside .button + .button { margin-top: 10px; }
.detail-aside .button-quiet { min-height: 48px; }
.prep-note { margin-top: 23px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.51); font-size: 11px; line-height: 1.55; }
.prep-note strong { display: block; margin-bottom: 4px; color: rgba(255,255,255,.88); font-size: 12px; }
.related-services { padding: 68px 0; background: #ebe8df; }
.related-services h2 { margin: 0 0 24px; font-size: clamp(29px,3.5vw,41px); letter-spacing: -.04em; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.related-grid a { min-height: 118px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 13px; background: #fff; border: 1px solid rgba(17,21,24,.1); transition: transform .2s ease; }
.related-grid a:hover { transform: translateY(-2px); }
.related-grid strong { font-size: 15px; }
.related-grid span { color: #646b6f; font-size: 12px; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; gap: 48px; } .detail-aside { position: static; } }
@media (max-width: 640px) { .service-detail .header-call { width: auto; height: 38px; padding: 0 12px; border-radius: 999px; } .service-detail .header-call span { display: block; } .detail-hero { padding: 62px 0 66px; } .detail-main { padding: 62px 0 70px; } .detail-list,.related-grid { grid-template-columns: 1fr; } .detail-content { gap: 49px; } .detail-aside { padding: 25px; } }