/* TrustUs — /services/ ---------------------------------------------------------
   Twelve cards on one grid. Pairs with page-services.php. */

.svc-head { padding-bottom: clamp(var(--sp-5), 3vw, var(--sp-6)); }
/* The eyebrow sits on the title's axis. Left as an inline it took the start
   edge from the line it was on while the title was centred, and the two read as
   belonging to different blocks. */
.svc-head .hp-eyebrow { display: block; text-align: center; }

.svc-grid { padding-top: clamp(var(--sp-5), 3vw, var(--sp-6)); }

/* `.hp` on the front of the list because tu-system.css sets `.hp ul`, which is
   two parts and beats a single class. */
.hp .svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
}

/* The whole card is the link: one target and one focus stop, rather than a card
   with a heading link, an image link and a paragraph pretending to be a button
   the way the Divi version had it. Grid rather than flex so the arrow line sits
   on the bottom edge of every card whatever the title's length. */
.svc-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-6));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc-card:hover {
  border-color: var(--red-edge);
  box-shadow: 0 18px 40px rgba(20, 18, 26, .07);
  transform: translateY(-3px);
}

.svc-card__icon {
  width: clamp(46px, 4vw, 56px);
  height: auto;
  margin-bottom: var(--sp-4);
}

.hp .svc-card__title {
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 800;
  line-height: 1.5;
}
.hp .svc-card__body {
  margin: 0 0 var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.8;
}

.svc-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  color: var(--red);
  font-size: var(--fs-caption);
  font-weight: 800;
}
/* The arrow moves, not the words: a label that shifts on hover is a label that
   is hard to read at the moment you are reading it. */
.svc-card__go svg { transition: transform .2s ease; }
.svc-card:hover .svc-card__go svg { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__go svg { transition: none; }
  .svc-card:hover { transform: none; }
}

@media (max-width: 1000px) {
  .hp .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hp .svc-list { grid-template-columns: minmax(0, 1fr); }
}