/* ============================================================
   SECTIONS.CSS — Services, Why Us, Process, Coverage
   ============================================================ */

/* ── SERVICES ── */
.services { background: var(--white); }
.services-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3.5rem; gap: 2rem; }
.services-header .section-sub { margin-bottom: 0; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.service-card { background: var(--white); padding: 2.5rem 2rem; transition: background 0.2s; }
.service-card:hover { background: var(--off-white); }
.service-num { font-family: 'Cormorant Garamond', serif; font-size: 0.85rem; color: var(--sage); margin-bottom: 1.5rem; font-weight: 500; letter-spacing: 0.1em; }
.service-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 700; color: var(--slate); margin-bottom: 0.6rem; }
.service-card p { font-size: 0.82rem; line-height: 1.75; color: var(--text-muted); font-weight: 400; }

/* ── WHY US ── */
.why { background: var(--white); }
.why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.why-visual { position: relative; }
.why-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.why-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-accent { position: absolute; bottom: -20px; right: -20px; width: 55%; aspect-ratio: 1; background: var(--off-white); border: 1px solid var(--border); z-index: -1; }
.why-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 1.5rem; border: 1px solid var(--border); }
.why-stat { padding: 1.2rem 1.2rem; border-right: 1px solid var(--border); }
.why-stat:last-child { border-right: none; }
.why-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: var(--slate); line-height: 1; }
.why-stat-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.25rem; letter-spacing: 0.06em; font-weight: 400; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.5rem; }
.why-list li { display: flex; gap: 1rem; font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); font-weight: 400; align-items: flex-start; }
.why-dash { flex-shrink: 0; width: 16px; height: 1px; background: var(--sage); margin-top: 0.6em; }

/* ── PROCESS ── */
.process { background: var(--slate); }
.process .section-label { color: rgba(255,255,255,0.35); }
.process .section-title { color: var(--white); }
.process .section-sub { color: rgba(255,255,255,0.4); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.1); }
.process-step { padding: 2.5rem 2rem; border-right: 1px solid rgba(255,255,255,0.08); }
.process-step:last-child { border-right: none; }
.step-num { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; color: rgba(255,255,255,0.1); line-height: 1; margin-bottom: 0.8rem; }
.process-step h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.88); margin-bottom: 0.5rem; }
.process-step p { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.7; font-weight: 400; }

/* ── COVERAGE ── */
.coverage { background: var(--off-white); }
.coverage-inner { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area-pill { background: var(--white); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.72rem; font-weight: 300; padding: 0.35rem 0.9rem; letter-spacing: 0.04em; }
.coverage-note { margin-top: 1.5rem; font-size: 0.78rem; color: var(--text-muted); font-weight: 300; font-style: italic; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .why-layout { grid-template-columns: 1fr; gap: 3rem; }
  .why-accent { display: none; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .services-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr 1fr; }
  .why-stat:nth-child(2) { border-right: none; }
  .why-stat:nth-child(3) { border-top: 1px solid var(--border); grid-column: span 2; }
}