/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — Services Page
   Scoped under body.cc-page-services. Loaded conditionally.
   =================================================================== */

.cc-service-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216,155,108,0.12);
  border: 1px solid rgba(184,122,78,0.28);
  color: var(--cc-peach-dark); margin-bottom: var(--cc-space-md);
}
.cc-service-icon svg { width: 22px; height: 22px; }

.cc-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--cc-space-lg); position: relative;
  margin-top: var(--cc-space-xl);
}
.cc-steps::before {
  content: ''; position: absolute; z-index: -1;
  top: 30px; left: 12%; right: 12%; height: 1px;
  background: var(--cc-line);
}
.cc-step { text-align: center; }
.cc-step .cc-card-num {
  font-size: 2rem; margin-bottom: var(--cc-space-md);
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cc-charcoal-soft);
  border: 1px solid rgba(184,122,78,0.3);
  color: var(--cc-peach-dark);
}
.cc-step h3 { margin-bottom: 0.6rem; }
.cc-step p {
  font-family: var(--cc-font-body); font-weight: 400; font-size: 0.925rem;
  line-height: 1.7; color: var(--cc-cream-soft);
  max-width: 300px; margin-inline: auto;
}
@media (max-width: 900px) {
  .cc-steps { grid-template-columns: 1fr; }
  .cc-steps::before { display: none; }
}

/* ───────────────────────────────────────────────
   TEMPLATE HELPERS (scoped to this page)
   ─────────────────────────────────────────────── */

/* Hero intro lead — constrained reading width, centred under the H1. */
.cc-page-services .cc-services-intro {
  max-width: 680px;
  margin: var(--cc-space-md) auto 0;
}