/* ============================================================
   Goodwood Marine — services

   A reference page. The six blocks share one shape on purpose —
   a captain arrives looking for one of six things and scans for
   it — but they alternate sides so the page still has a rhythm.
   ============================================================ */

/* Six consecutive light sections each paying full padding would
   leave holes. One gap between them. */
.svcp + .svcp { padding-top: 0; }

.svcp__grid { display: grid; gap: var(--sp-6); align-items: center; }

.svcp__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.svcp__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Same unifying grade as the home cards, so the photography reads
     as one set across the site. */
  filter: saturate(.66) contrast(1.05);
}

.svcp__body h2 { max-width: 16ch; margin-bottom: var(--sp-4); }
.svcp__body > p { color: var(--muted-light); max-width: 50ch; }
.svcp__body .btn { margin-top: var(--sp-7); }

/* Tick list — used here and on the home guardianage block. */
.ticks { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.ticks li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.ticks svg { width: 19px; height: 19px; flex: none; color: var(--amber); margin-top: 3px; }

@media (min-width: 900px) {
  .svcp__grid { grid-template-columns: 0.85fr 1fr; gap: var(--sp-10); }
  /* Alternating sides — the image moves to the right on every second
     block, which is what stops six identical rows reading as a list. */
  .svcp--flip .svcp__media { order: 2; }
}