/* ══════════════════════════════════════════
   Services page — Our Services grid
   Loaded only by: services.html
   ══════════════════════════════════════════ */

.our-services {
  background: linear-gradient(160deg, #f5fbff 0%, #f0fff8 100%);
  padding: 80px var(--pad-x) 96px;
}

.os-inner {
  max-width: 1020px;
  margin: 0 auto;
}

.os-header {
  text-align: center;
  margin-bottom: 48px;
}

.os-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.os-header p {
  font-size: 0.95rem;
  color: var(--text);
}

.os-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.os-card {
  background: var(--white);
  scroll-margin-top: 88px; /* clears the 68px sticky header on deep links */
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  padding: 36px 26px 32px;
  text-align: center;
  transition: box-shadow var(--t-md), transform var(--t-md);
}

.os-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.os-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* Icons are white on colored gradient backgrounds */
.os-card-icon { color: var(--white); }

.os-icon--blue   { background: linear-gradient(135deg, #4facfe 0%, #00c6fb 100%); }
.os-icon--teal   { background: linear-gradient(135deg, var(--teal) 0%, #38f9d7 100%); }
.os-icon--cyan   { background: linear-gradient(135deg, #00b4d8 0%, #48cae4 100%); }
.os-icon--purple { background: linear-gradient(135deg, #c471ed 0%, #7c3aed 100%); }
.os-icon--indigo { background: linear-gradient(135deg, #667eea 0%, #00b4d8 100%); }
.os-icon--green  { background: linear-gradient(135deg, var(--green) 0%, #00897B 100%); }

.os-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}

.os-card > p {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
}

.os-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.os-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
}

.os-bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .os-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .our-services { padding: 60px 16px 72px; }
  .os-grid { grid-template-columns: 1fr; }
}