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

/* process / local-context — four cards in one row */
/* "How a project runs" lives in playground.css: services.html carries the
   same markup but never loads this file, so the section was unstyled there.
   Shared sections belong in the shared sheet. */

/* mobile: numbered masonry cards 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; }

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

/* ---- projects page empty state (the showcase itself lives in projects.css) ---- */
.projects-empty { max-width: 560px; }

/* legal pages — comfortable reading measure */
.legal-body { max-width: 68ch; margin: 0 auto; padding: 8px 6px var(--section-gap); }
.legal-body h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 34px 0 12px; }
.legal-body p, .legal-body li { font-size: 1rem; line-height: 1.75; color: var(--muted); }
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px; padding-inline-start: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: #b34700; font-weight: 600; }

/* ---- related services ----
   Every service page used to end with a single link to /quote, which made it a
   dead end: nothing to click but the price, and no path deeper into the site.
   This block gives each one two or three honest onward routes. */
.svc-related { margin-top: clamp(30px, 4vw, 52px); }
.svc-related h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: 14px;
}
.svc-related p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; max-width: 62ch; }
.svc-related .pills { display: flex; flex-wrap: wrap; gap: 10px; }