/* ============================================================
   SERVICES PAGE — css/services.css
   ============================================================ */

.services-hero {
  padding: 72px 0 64px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.services-hero h1 { margin-bottom: 16px; }

.service-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.service-detail-grid h2 { margin-bottom: 16px; }
.service-detail-grid .p-lead { margin-bottom: 16px; }
.service-detail-grid .p-body { margin-bottom: 28px; }

/* Automation Examples */
.automation-examples {
  background: linear-gradient(135deg, var(--warm-light), #fde8d4);
  border-radius: var(--r); padding: 40px; border: none;
}
.auto-example { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.auto-example:last-child { margin-bottom: 0; }
.auto-example > span { font-size: 1.4rem; flex-shrink: 0; }

/* Process Steps */
.section-white { background: var(--white); }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
}
.process-steps::before {
  content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--teal), var(--warm));
  z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; padding: 0 16px; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--teal);
  color: var(--teal); font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(26,122,122,.2);
}
.step-num.step-warm {
  border-color: var(--warm); color: var(--warm);
  box-shadow: 0 4px 16px rgba(224,123,57,.2);
}
.process-step h3 { margin-bottom: 10px; }

/* Responsive */
@media (max-width: 960px) {
  .service-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .process-steps::before { display: none; }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; }
}