/* ================= HOME — real-content sections ================= */

/* 4-step process */
.steps--4{ grid-template-columns:repeat(4,1fr); }

/* 2-col kanban for hero pipeline */
.kanban--2{ grid-template-columns:repeat(2,1fr); }

/* Discipline service lists */
.svc-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.svc-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.svc-list li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:7px; border-radius:2px;
  background:var(--brand); opacity:.75;
}
.svc-list li b{ color:var(--text); font-weight:600; }

/* Product card with badge */
.card .badge{ margin-bottom:14px; }

/* Product cards — real product screenshots */
.card-media{ display:block; margin:-26px -26px 16px; border-bottom:1px solid var(--line); overflow:hidden; background:#0d0d11; }
.card-media img{ width:100%; height:150px; object-fit:cover; object-position:top center; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.card--media:hover .card-media img{ transform:scale(1.05); }
@media (max-width:560px){
  .card-media img{ height:180px; }
}

/* Selected work grid */
.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.work-card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius,16px);
  overflow:hidden; min-width:0; transition:.35s;
}
.work-card:hover{ border-color:var(--brand-line); transform:translateY(-4px); }
.work-card .w-img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top center; display:block; border-bottom:1px solid var(--line); }
.work-card .w-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.work-card .w-over{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.work-card h3{ font-size:1.05rem; margin:0; }
.work-card p{ font-size:.86rem; color:var(--muted); margin:0; line-height:1.5; }

/* Identity work card — logo caption crop */
.work-card--logo .w-img{ aspect-ratio:auto; height:150px; object-fit:cover; object-position:left center; }

@media (max-width:1080px){
  .steps--4{ grid-template-columns:repeat(2,1fr); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .steps--4{ grid-template-columns:1fr 1fr; }
  .kanban--2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps--4{ grid-template-columns:1fr 1fr; }
  .work-grid{ grid-template-columns:1fr; }
}