/* =============================================================
   ClckIndex — About page specific styles.
   Loads AFTER style.css + pages.css; reuses their tokens,
   components and shared subpage patterns (.page-hero, .cta-band).
   ============================================================= */

/* ---------- STORY (reuses .about grid) ---------- */
.story .lead-p{font-size:17px;color:var(--ink);}
.signature{
  margin-top:24px;font-family:'Sora',sans-serif;font-weight:700;
  color:var(--dark);font-size:15px;
}
.signature span{display:block;font-family:'Inter',sans-serif;font-weight:500;color:var(--muted);font-size:13px;margin-top:2px;}

/* ---------- HOW WE WORK ---------- */
.process{background:var(--bg-alt);}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;}
.step{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 30px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.step:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(16,19,26,.12);border-color:var(--primary);}
.step-num{
  font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:#fff;
  width:44px;height:44px;border-radius:11px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.step:hover .step-num{transform:rotate(-8deg) scale(1.08);background:var(--primary);}
.step h3{margin-bottom:10px;}
.step p{font-size:14px;margin-bottom:0;}

/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.team-card{text-align:left;}
.team-photo{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:0 14px 30px rgba(16,19,26,.10);margin-bottom:16px;
}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.team-card:hover .team-photo img{transform:scale(1.06);}
.team-name{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:var(--dark);margin:0 0 3px;}
.team-role{font-size:13px;color:var(--primary);font-weight:600;margin:0;}

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