/* ══════════════════════════════════════════════════════════════════════
   SERVICES — the work around the build, on the home page.

   A grid of cards rather than the rail it replaced. Eight engagements,
   each carrying its phase, its name and one line, and each a link to its
   own entry on the services page.

   The rail laid seven of the eight on their side as vertical spines: seven
   names you had to tilt your head to read, and only one legible at a time.
   Every card is legible at once here, which is what a list of eight things
   wants.

   Scoped to .svc — .sc-* and .svc-* exist nowhere else.
   ────────────────────────────────────────────────────────────────────── */

.svc {
  --hair: rgba(16,64,59,0.12);
  --am-deep: #936910;
  /* No top padding: #intro above is min-height:100dvh and centres its
     content, so it already leaves ~66px of slack under the hero visual.
     40px on top of that pushed this heading too far down the page. */
  padding: 0 0 8px;
}

/* ── the heading ─────────────────────────────────────────────────────── */
.svc-head { max-width: 760px; margin-bottom: 34px; }
.svc-head h2 {
  margin: 8px 0 0; font-weight: 500; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04; letter-spacing: -.045em; color: var(--ink);
}
/* the second half in the accent, the way the hero sets its third line */
.svc-head h2 span { color: var(--am-deep); }

/* ── the cards ───────────────────────────────────────────────────────
   Names only. The phase, the one-line description and the shape have all
   come off, so the box is only as tall as the name in it and the eight of
   them read as a list rather than eight panels. What each one involves is
   on the services page, one link below.
   ────────────────────────────────────────────────────────────────────── */
/* Six across, one row. It was eight over two rows of four; the set is six
   now and they sit in a single line, so the section reads as one gesture
   rather than a block. */
.svc-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px;
}

/* Padding and type sized off the longest name. At six across, the card is
   180px at the 1200 wrap; "Strategic management" measures 154px at 15px
   and would not fit inside 16px padding. At 14px it is 144, which clears
   12px padding with room. */
.svc-card {
  display: flex; align-items: center;
  background: #F3F6F0; border: 1px solid var(--hair); border-radius: 14px;
  padding: 13px 12px;
}
.sc-name {
  font-size: 14px; font-weight: 400; letter-spacing: -.02em;
  line-height: 1.3; color: var(--ink);
}

/* ── the way through ─────────────────────────────────────────────────── */
.svc-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid rgba(16,64,59,.22); padding-bottom: 3px;
  transition: gap 200ms cubic-bezier(.2,0,0,1), border-color 200ms;
}
.svc-more svg { width: 15px; height: 15px; }
.svc-more:hover { gap: 12px; border-color: var(--ink); }

/* ── narrow ──────────────────────────────────────────────────────────
   The row of six holds all the way down to 900px. Between there and the
   1200 wrap the cards are narrower than the longest name, so it takes
   two lines — the grid stretches them all to match, so it still reads as
   six boxes in a line. Under 900 six across would be 130px each, which
   is narrower than the words, so it becomes three and then two.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-more { transition: none; }
}