/* ══════════════════════════════════════════════════════════════════════
   SERVICES PAGE — the eight engagements, grouped by the three phases.

   The home page carries the names only, as a rail with one open at a
   time. This page is where each one says what it actually is, so the
   layout is built for reading: a phase, its strapline, then the work
   under it in two columns.
   ────────────────────────────────────────────────────────────────────── */

.sp-intro { padding: 48px 0 6px; }
.sp-intro h1 {
  margin: 0; font-weight: 500; font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02; letter-spacing: -.048em; color: var(--ink);
}
.sp-intro h1 span { color: #936910; }
.sp-lede {
  margin: 16px 0 0; max-width: 62ch;
  font-size: 16px; font-weight: 400; line-height: 1.6; color: rgba(16,64,59,.72);
}

/* padding-block only. .sp-wrap is also .wrap, and a padding shorthand
   here wiped out the 40px horizontal gutter it inherits — which is why
   the phase cards sat flush to the screen edge while the heading above
   them kept its margin. */
.sp-wrap { padding-block: 34px 14px; }

.sp-phase { padding: 0 0 8px; }
.sp-phase + .sp-phase { margin-top: 8px; padding-top: 26px; border-top: 1px solid rgba(16,64,59,.12); }

.sp-head { margin-bottom: 16px; }
.sp-phase-name {
  /* An h2, and sized like one. It was 11px tracked caps sitting above a
     25px strap — a kicker in everything but name, and once it became a
     heading it was smaller than the h3s inside its own section. The phase
     is the section; it carries the weight and the strap supports it. */
  margin: 0;
  font-weight: 500; font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1; letter-spacing: -.04em; color: var(--ink);
}
.sp-strap {
  margin: 8px 0 0; font-weight: 400; font-size: 17px;
  line-height: 1.5; letter-spacing: 0; color: var(--text-secondary);
}

.sp-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 12px; }
/* linked to from the home rail, so each has to land below the bar rather
   than under it */
.sp-item { scroll-margin-top: 104px; }
.sp-item {
  background: #fff; border: 1px solid rgba(16,64,59,.12);
  border-radius: 14px; padding: 16px 18px 18px;
  transition: background 240ms cubic-bezier(.2,0,0,1);
}
/* colour only, no shadow and no lift: eight of these in a column and any
   movement turns the page into a fidget */
.sp-item:hover { background: #F6F8F3; }
.sp-item h3 {
  margin: 0; font-weight: 500; font-size: 16.5px;
  letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.sp-item p {
  margin: 6px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.55;
  color: rgba(16,64,59,.7);
}

/* ── the closing panel ───────────────────────────────────────────────── */
.sp-cta { padding: 24px 0 64px; }
.sp-panel .contact-grid { align-items: center; }
.sp-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ── coming down in steps ─────────────────────────────────────────────
   The page went from its widest layout straight to the narrow one at
   900px, and two of the jumps were the harsh ones: the shared .wrap
   gutter halves from 40px to 20 in a single step, and the closing panel
   went from 72/64 of inner padding to 40/24. Both take an intermediate
   stop now, and the cards go to one column a little earlier than the
   gutter changes, so the two do not land at the same width.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .sp-intro { padding: 40px 0 4px; }
  .sp-wrap { padding-block: 28px 12px; }
  .sp-panel { padding: 52px 40px; }
  .sp-items { gap: 10px; }
}

/* one column before the gutter narrows: two columns of dense text at
   420px each is where the cards start reading as columns of a table */
@media (max-width: 960px) {
  .sp-items { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 900px) {
  .sp-intro { padding: 34px 0 4px; }
  .sp-wrap { padding-block: 24px 10px; }
  .sp-phase + .sp-phase { padding-top: 22px; }
  .sp-head { margin-bottom: 14px; }
  .sp-item { padding: 14px 16px 16px; }
  .sp-panel { padding: 40px 28px; }
  .sp-cta { padding: 20px 0 56px; }
  /* the shared wrap drops to a 20px gutter here. This page is dense text
     rather than cards with pictures, so it takes a little of that back
     until the screen is genuinely phone-width. */
  .sp-intro > .wrap, .sp-wrap, .sp-cta > .wrap { padding-inline: 28px; }
}

@media (max-width: 560px) {
  .sp-intro > .wrap, .sp-wrap, .sp-cta > .wrap { padding-inline: 20px; }
  .sp-panel { padding: 32px 20px; }
}