/* ════════════════════════════════════════════════════════════════
   experience.css  —  Experience & Expertise page styles
   Sections: 4-column stats · How We Work process steps
   ════════════════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ───────────────────────────────────────────────── */
.section-page { background: var(--bg); padding: 60px 0 120px; }

/* ── 4-COLUMN EXPERIENCE GRID ───────────────────────────────────── */
/* Matches post-33: 25% each, gap 30px, margin-top 60px            */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.exp-card-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exp-card-col img {
  width: 100%;
  border-radius: var(--r-card);
  object-fit: cover;
}
.exp-card-col h3 {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4rem;
  color: var(--white);
}
.exp-card-col p {
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--muted);
}

/* ── SECTION TITLE BLOCK ────────────────────────────────────────── */
.section-title-wrap { margin-top: 120px; }

/* ── HOW WE WORK — PROCESS STEPS ───────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.process-step {
  background: rgba(97, 128, 236, .1);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  padding: 28px 20px;
}
.step-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: .6rem;
  line-height: 1;
}
.process-step h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .5rem;
}
.process-step p {
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--muted);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .exp-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .exp-grid     { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
  .exp-grid     { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
}