/* Services page: builds on the shared sub-page rules in clients-page.css */
@import url('clients-page.css');
.part { width: min(860px, 100% - 2 * var(--gut)); margin: 0 auto; padding: var(--s5) 0; border-top: 1px solid var(--line); line-height: 1.7; }
.part-title { margin: var(--s1) 0 var(--s3); font: 300 clamp(24px, 4vw, 36px)/1.2 var(--font-display); letter-spacing: .16em; text-transform: uppercase; overflow-wrap: anywhere; }
.part p, .part li { color: var(--accent); max-width: 68ch; }
.part h3 { margin: var(--s4) 0 var(--s2); font: 300 14px/1.4 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.part ul { padding-left: 1.2em; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.tags, .cases { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; padding: 0; }
.part .tags li { padding: 10px 16px; border: 1px solid var(--line); color: var(--ink); font: 300 12px/1.4 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.cases a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 48px; min-width: 200px; padding: 16px 20px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color var(--t-ctl) var(--ease); }
.cases a:hover, .cases a:focus-visible { border-color: var(--accent); }
.cases .more { color: var(--soft); font-size: 14px; }
.platform { margin: var(--s4) 0; }
.platform-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s2); }
.platform img { width: 100%; height: auto; border: 1px solid var(--line); }
.platform figcaption { margin-top: var(--s1); }
.prods { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--s4); }
.prod { padding: var(--s3); border: 1px solid var(--line); background: var(--surface); }
.prod h3 { margin-top: 0; }
.prod p + p { margin-top: var(--s1); }
.k { display: block; font: 300 11px/1.6 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }

/* lists read left-aligned inside the centred page */
main ul, main ol { text-align: left; }