.services-page { padding-top: 72px; background: #f6f7f6; }
.services-page .container { width: min(calc(100% - 48px), var(--container)); }
.services-hero { overflow: hidden; color: #fff; background: #061d2b; }
.services-hero__grid { display: grid; grid-template-columns: minmax(360px, .88fr) minmax(420px, 1.12fr); min-height: 510px; }
.services-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px 64px 0; }
.services-hero .section-eyebrow { color: #d99c33; }
.services-hero h1 { max-width: 680px; margin: 12px 0 20px; font-family: Georgia, serif; font-size: clamp(2.6rem, 4.7vw, 5rem); font-weight: 500; line-height: .98; }
.services-hero__copy > p:not(.section-eyebrow):not(.services-hero__trust) { max-width: 590px; margin: 0; color: rgba(255,255,255,.76); font-size: 1.06rem; line-height: 1.7; }
.services-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.services-hero__outline { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.services-hero__outline:hover { color: #061d2b; background: #fff; }
.services-hero__trust { margin: 34px 0 0; color: rgba(255,255,255,.66); font-size: .69rem; font-weight: 700; letter-spacing: .22em; }
.services-hero__visual { position: relative; min-height: 510px; overflow: hidden; background: #dce0df; }
.services-hero__visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, #061d2b 0%, rgba(6,29,43,.1) 32%, rgba(6,29,43,.06)); content: ""; }
.services-hero__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.94); }
.services-hero__drawing { position: absolute; z-index: 2; right: -13%; bottom: -18%; width: 88%; height: 70%; border: 1px solid rgba(7,40,54,.42); background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(7,40,54,.1) 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(7,40,54,.1) 28px); transform: rotate(-10deg); }
.services-hero__stamp { position: absolute; z-index: 3; top: 44px; right: 38px; color: rgba(6,29,43,.72); font-size: .64rem; font-weight: 800; letter-spacing: .18em; line-height: 1.8; text-align: right; }

.services-list { padding: 24px 0 18px; }
.services-list__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.service-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; min-height: 112px; padding: 17px; color: #142637; border: 1px solid #dce1e3; border-radius: 6px; background: #fff; cursor: pointer; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.service-card:hover, .service-card.is-selected { border-color: #d99c33; box-shadow: 0 10px 24px rgba(10, 35, 51, .1); transform: translateY(-2px); }
.service-card__icon { display: grid; width: 42px; height: 42px; place-items: center; color: #1b3446; border-radius: 50%; background: #f0f3f4; font-size: 1.35rem; }
.service-card strong, .service-card small { display: block; }
.service-card strong { font-family: Georgia, serif; font-size: .98rem; }
.service-card small { margin-top: 7px; color: #667682; font-size: .72rem; line-height: 1.4; }
.service-card b { color: #173b51; font-size: 1.45rem; font-weight: 400; }

.diagnostic { padding-top: 18px; padding-bottom: 84px; }
.diagnostic-panel { overflow: hidden; border: 1px solid #dce1e3; border-radius: 8px; background: #fff; box-shadow: 0 12px 35px rgba(10,35,51,.06); }
.diagnostic-panel__head { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(480px,1.15fr); gap: 34px; align-items: center; padding: 34px 42px 24px; border-bottom: 1px solid #e5e9eb; }
.diagnostic-panel__head .section-title { margin: 7px 0 4px; font-family: Georgia, serif; font-size: clamp(2rem,3vw,3rem); }
.diagnostic-panel__head p:not(.section-eyebrow) { margin: 0; color: #63727c; }
.diagnostic-steps { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 0; list-style: none; }
.diagnostic-steps li { display: flex; flex: 1; align-items: center; gap: 8px; color: #697984; font-size: .74rem; white-space: nowrap; }
.diagnostic-steps li::after { flex: 1; min-width: 12px; height: 1px; margin-left: 3px; background: #dbe2e5; content: ""; }
.diagnostic-steps li:last-child::after { display: none; }
.diagnostic-steps span { display: grid; width: 28px; height: 28px; place-items: center; color: #53646f; border: 1px solid #d3dbde; border-radius: 50%; background: #f3f5f5; font-weight: 700; }
.diagnostic-steps .is-active { color: #152c3d; font-weight: 700; }
.diagnostic-steps .is-active span { color: #fff; border-color: #d99c33; background: #d99c33; }
.diagnostic-panel__body { min-height: 280px; padding: 34px 42px; }
.diagnostic-question { margin: 0 0 20px; color: #172e3f; font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; }
.service-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.service-options button { min-height: 92px; padding: 14px; color: #203849; border: 1px solid #d7dfe2; border-radius: 5px; background: #fff; cursor: pointer; text-align: left; }
.service-options button:hover, .service-options button.is-selected { border-color: #d99c33; background: #fffdf8; box-shadow: inset 0 0 0 1px rgba(217,156,51,.16); }
.service-options strong, .service-options span { display: block; }
.service-options strong { font-size: .82rem; }
.service-options span { margin-top: 6px; color: #6a7881; font-size: .68rem; line-height: 1.35; }
.diagnostic-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.diagnostic-fields--one { grid-template-columns: 1fr; }
.diagnostic-fields label { display: grid; gap: 8px; color: #334c5d; font-size: .8rem; font-weight: 700; }
.diagnostic-fields input, .diagnostic-fields select, .diagnostic-fields textarea { width: 100%; padding: 12px 13px; color: #173043; border: 1px solid #cfd9de; border-radius: 4px; background: #fff; font: inherit; font-size: .92rem; }
.diagnostic-fields textarea { resize: vertical; }
.document-drop { display: grid; min-height: 135px; place-items: center; padding: 22px; color: #56707f; border: 1px dashed #bfcdd4; border-radius: 6px; background: #fafcfc; cursor: pointer; text-align: center; }
.document-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.document-drop span { color: #d99c33; font-size: 2rem; line-height: 1; }
.document-drop strong, .document-drop small { display: block; }
.document-drop strong { margin-top: 4px; color: #193447; }
.document-drop small { margin-top: 6px; }
.document-note { margin: 12px 0 0; color: #657783; font-size: .78rem; }
.diagnostic-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 42px; border-top: 1px solid #e5e9eb; background: #fbfcfc; }
.diagnostic-panel__footer p { margin: 0; color: #687984; font-size: .82rem; }
.diagnostic-panel__footer strong { color: #19374b; }
.diagnostic-back { margin-right: 8px; color: #304b5c; border-color: #cbd6dc; background: #fff; }

@media (max-width: 1100px) { .services-list__grid, .service-options { grid-template-columns: repeat(3,minmax(0,1fr)); } .services-hero__grid, .diagnostic-panel__head { grid-template-columns: 1fr; } .services-hero__copy { padding: 70px 0 42px; } .services-hero__visual { min-height: 340px; } }
@media (max-width: 720px) { .services-page { padding-top: 66px; } .services-hero__copy, .diagnostic-panel__head, .diagnostic-panel__body, .diagnostic-panel__footer { padding-right: 22px; padding-left: 22px; } .services-hero__grid { grid-template-columns: 1fr; } .services-hero__visual { min-height: 260px; } .services-list__grid, .service-options, .diagnostic-fields { grid-template-columns: 1fr; } .diagnostic-steps { display: grid; grid-template-columns: repeat(5,1fr); } .diagnostic-steps li { font-size: 0; } .diagnostic-steps li::after { display: none; } .diagnostic-steps span { width: 30px; height: 30px; } .diagnostic-panel__footer { align-items: flex-start; flex-direction: column; } .services-hero h1 { font-size: 2.65rem; } }