/* ═══════════════════════════════════════════════════════════
   Service Pages — /services/build/ + /services/transform/ + /services/lead/
   Requires: design-system.css, components.css, company.css
   company.css already supplies .breadcrumb, .cp-hero*, .cp-sec*,
   .cp-final-cta* — reused as-is on these three pages. This file
   adds only the rules specific to Service-page content shapes
   that /about/ and /why-techsutra/ do not need.
   ═══════════════════════════════════════════════════════════ */

/* ── PER-SERVICE APPROACH / DELIVERABLES BREAKOUT (Transform, Lead) ── */
.svc-approach-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.75rem; }
.svc-approach-block { border-left: 2px solid var(--gold-g); padding-left: 1.5rem; }
.svc-approach-t { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gold-l); margin-bottom: .5rem; }
.svc-approach-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 720px; margin: 0; }

/* ── TYPICAL SITUATIONS / DELIVERABLES BULLET LISTS ───────── */
.svc-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; max-width: 760px; }
.svc-list li { font-size: var(--text-base); color: var(--text-2); line-height: 1.65; padding-left: 1.4rem; position: relative; }
.svc-list li::before { content: '—'; position: absolute; left: 0; color: var(--text-3); }

/* ── PROOF SECTION ─────────────────────────────────────────── */
.svc-proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
.svc-proof-grid--single { grid-template-columns: 1fr; max-width: 520px; }
.svc-proof-block { padding: 1.75rem; border-radius: var(--radius-xl); }
.svc-proof-block:not(.svc-proof-block--placeholder) { background: var(--bg-c); border: 1px solid var(--b1); }
.svc-proof-block--placeholder { border: 1px dashed var(--b2); background: transparent; }
.svc-proof-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .85rem; }
.svc-proof-body { font-size: var(--text-sm); color: var(--text-2); line-height: 1.7; margin: 0; }
.svc-proof-placeholder { font-size: var(--text-sm); color: var(--text-3); font-style: italic; line-height: 1.5; margin: 0; }

/* ── FAQ (static list, no accordion — see brief §7.2) ─────── */
.svc-faq-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2.25rem; max-width: 800px; }
.svc-faq-item { border-top: 1px solid var(--b0); padding-top: 1.5rem; }
.svc-faq-item:first-child { border-top: none; padding-top: 0; }
.svc-faq-q { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text-1); margin-bottom: .6rem; }
.svc-faq-a { font-size: var(--text-base); color: var(--text-2); line-height: 1.7; margin: 0; }

/* ── FLOW LINE (Build page "Understand → ... → Transform") ── */
.svc-flow-line { font-family: var(--font-display); font-weight: 600; color: var(--gold-l); font-size: 1.1rem; letter-spacing: .01em; margin: 1.25rem 0; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .svc-proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .svc-approach-block { padding-left: 1.1rem; }
}