/* Services catalog page. Builds on styles.css tokens only:
   no new colours, hairlines not panels, same type scale. */

.cat-head{max-width:820px;margin-bottom:calc(var(--u) * 8)}
.cat-head .h-lg{margin-top:calc(var(--u) * 4)}

.cards{
  display:grid;gap:calc(var(--u) * 4);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.cards-2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.card{
  display:flex;flex-direction:column;
  padding:calc(var(--u) * 6);
  border:1px solid var(--line);border-radius:6px;
  transition:border-color .4s var(--ease);
}
.card:hover{border-color:rgba(109,149,255,.45)}
.card:hover .num{color:var(--accent)}
.card .num{margin:0 0 calc(var(--u) * 3)}
.card-tag{margin:0 0 calc(var(--u) * 2);color:var(--accent)}
.card .body{margin-top:calc(var(--u) * 3);font-size:17px;line-height:1.55}
.card .pts{margin-top:calc(var(--u) * 4);gap:calc(var(--u) * 2)}
.card .pts li{font-size:15px}
.card-link{margin-top:auto;padding-top:calc(var(--u) * 5);align-self:flex-start}

.card-wide{grid-column:1/-1}

/* hero: the where-we-work line sits right under the lede */
.page-top .lede.cat-where{margin-top:calc(var(--u) * 2)}

/* AI part: the six stages as a numbered track, left to right */
.track-lab{margin:0 0 calc(var(--u) * 5)}
.track{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:calc(var(--u) * 4);
}
.track li{position:relative;padding-top:calc(var(--u) * 5);border-top:1px solid var(--line)}
.track li::before{
  content:"";position:absolute;left:0;top:-1px;
  width:32px;height:1px;background:var(--accent);
}
.track .num{margin:0 0 calc(var(--u) * 3)}
.track .body{margin-top:calc(var(--u) * 2);font-size:15px;line-height:1.55}

/* AI part: services grouped under their stage */
.ai-lab{margin-top:var(--gap-l)}
.ai-group{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:calc(var(--u) * 6);
  padding:calc(var(--u) * 8) 0;
  border-top:1px solid var(--line-soft);
}
.ai-stage .num{margin:0 0 calc(var(--u) * 2)}
.ai-cards > .card:only-child{grid-column:1/-1}
.ai-cards > .card:only-child .body,
.ai-cards > .card:only-child .pts{max-width:62ch}

/* plain facts under the three steps */
.ai-facts{display:grid;gap:calc(var(--u) * 4);margin-top:var(--gap);max-width:62ch}
.ai-facts .body{font-size:17px}
.ai-facts .body a{color:var(--bone);border-bottom:1px solid var(--accent);transition:color .3s var(--ease)}
.ai-facts .body a:hover{color:var(--accent)}

@media (max-width:1080px){
  .track{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(var(--u) * 8)}
}
@media (max-width:900px){
  .ai-group{grid-template-columns:minmax(0,1fr);gap:calc(var(--u) * 4)}
}

@media (max-width:560px){
  .cards,.cards-2{grid-template-columns:minmax(0,1fr)}
  .card{padding:calc(var(--u) * 5)}
  /* phones: the track turns vertical, one line down the left */
  .track{grid-template-columns:minmax(0,1fr);gap:0;border-left:1px solid var(--line)}
  .track li{border-top:0;padding:0 0 calc(var(--u) * 6) calc(var(--u) * 5)}
  .track li:last-child{padding-bottom:0}
  .track li::before{left:-1px;top:0;width:1px;height:28px}
}