/* ============================================================
   Services page. Pixel values transcribed from the
   services.html mockup (1440px reference width).
   ============================================================ */

/* Service cards with scope lists */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:36px max(56px,calc((100% - var(--content-w))/2)) 0;animation:sm-rise .85s ease .46s both}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:30px;transition:transform .35s,box-shadow .35s}
.svc-icon{width:48px;height:48px;border-radius:12px;background:var(--indigo-tint);display:grid;place-items:center}
.svc-icon svg{width:24px;height:24px}
.svc-card h2{margin:18px 0 0;font:700 19px var(--font)}
.svc-card>p{margin:9px 0 0;font:400 14.5px/1.6 var(--font);color:var(--ink-2)}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0 0;padding:0;font:400 14px/1.5 var(--font);color:#454060}
.svc-list li{display:flex;gap:9px}
.svc-list svg{width:15px;height:15px;flex:none;margin-top:3px}
.svc-cta{display:inline-block;font:600 13.5px var(--font);color:var(--orange);margin-top:20px;transition:color .25s,background .25s,border-color .25s}

/* Lift and colour change only on real pointers - on touch :hover sticks after a
   tap and shifts the card out from under the finger mid-tap. */
@media (hover:hover) and (pointer:fine){
  .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
  .svc-cta:hover{color:var(--indigo)}
}

/* "How we work" band */
.process{margin-top:56px}
.process-title{margin:10px 0 0;font:700 34px var(--font);letter-spacing:-.02em}
.process-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:36px 0 0;padding:0}
.process-step{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:26px}
.process-num{width:44px;height:44px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font:800 15px var(--font)}
.process-step:last-child .process-num{background:var(--orange)}
.process-step h3{margin:16px 0 0;font:700 16.5px var(--font)}
.process-step p{margin:8px 0 0;font:400 14px/1.6 var(--font);color:var(--ink-2)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .svc-grid{padding:32px 32px 0}
  .process{margin-top:40px}
}
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  /* Tablets are touch devices: grow the link's hit box to 44px without
     changing how it reads (the margin drop keeps the optical gap at ~20px). */
  .svc-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
}
@media (max-width:760px){
  /* One card per row, with enough air above and below that the hero, the card
     stack and the grey "How we work" band read as three separate blocks. */
  .svc-grid{grid-template-columns:1fr;padding:32px 20px 4px;gap:16px;animation-delay:.2s}
  .svc-card{padding:24px}
  .svc-card h2{font-size:18.5px}
  /* Wrapped scope items must not group with the next bullet: item gap > leading */
  .svc-list{font-size:14.5px;line-height:1.6;gap:13px}
  .svc-list svg{margin-top:4px}
  /* The inline text link is an 18px tap target on desktop - on touch it becomes
     a full-width outlined pill so it clears the 44px minimum. */
  .svc-cta{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;padding:0 18px;font-size:14.5px;border:1px solid var(--border);border-radius:var(--r-pill)}
  .svc-cta:active{background:var(--indigo-tint)}
  .process{margin-top:44px}
  .process-title{font-size:26px}
  .process-grid{grid-template-columns:1fr;gap:14px;margin-top:24px}
  /* Number beside the text instead of above it - reads as a 1-2-3-4 sequence
     and saves ~200px of scrolling. */
  .process-step{display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:start;padding:20px 22px}
  .process-num{width:38px;height:38px;font-size:14px}
  .process-step h3{margin:8px 0 0;font-size:16px}
  .process-step p{grid-column:2;margin-top:6px}
}
@media (max-width:430px){
  .process-title{font-size:23px}
}