/* =============================================================
   ClckIndex — Services (overview + detail) specific styles.
   Loads AFTER style.css + pages.css.
   ============================================================= */

/* ---------- SERVICE CARDS (extend .card) ---------- */
.card .read-more{margin-top:18px;}

/* ---------- DETAIL: overview split (reuses .about grid) ---------- */
.svc-overview .lead-p{font-size:17px;color:var(--ink);}

/* ---------- DETAIL: "what's included" checklist ---------- */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 36px;margin-top:12px;}
.check-item{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--ink);line-height:1.5;}
.check-item .tick{
  width:24px;height:24px;border-radius:50%;background:rgba(54,84,255,.1);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none;margin-top:1px;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.check-item:hover .tick{background:var(--accent);color:#fff;transform:scale(1.1);}

/* ---------- DETAIL: other services mini-grid ---------- */
.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .service-grid,.other-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .service-grid,.other-grid{grid-template-columns:1fr;}
  .check-grid{grid-template-columns:1fr;}
}