/* ============================================================
   Shapes Infinity — services.html page layer
   Page-specific layout only; the system lives in playground.css
   ============================================================ */

/* .card--orange comes from the shared system */

/* mobile: numbered services must read 01→06 top-to-bottom */
@media (max-width: 899px) {
  .masonry .masonry-col { display: contents; }
  .masonry .card--purple { order: 1; }
  .masonry .card--amber { order: 2; }
  .masonry .card--green { order: 3; }
  .masonry .card--blue { order: 4; }
  .masonry .card--white { order: 5; }
  .masonry .card--orange { order: 6; }
}

/* AR mode: the card content is English — keep the tag pill on the text's side */
html[dir="rtl"] .masonry .block-card,
html[dir="rtl"] .process-row .block-card { direction: ltr; }

/* process — four cards in one row */
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.process-row .block-card { display: flex; flex-direction: column; align-items: flex-start; }
.process-row .block-card h3 { margin-top: 0; }

@media (max-width: 1099px) {
  .process-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .process-row { grid-template-columns: 1fr; }
}

/* faq sits in a comfortable measure */
.faq-wrap { max-width: 860px; }