/* ================================================================
   Spolton Mortgages — Services section
   ================================================================ */

.spm-services {
  background: #fff;
}

.spm-services-head {
  margin-bottom: 44px;
}

/* --- 3-column card grid ---------------------------------------- */
.spm-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 880px) {
  .spm-svc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .spm-svc-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Service card ---------------------------------------------- */
.spm-svc-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow   var(--dur) var(--ease),
    transform    var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.spm-svc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--purple-200);
}

.spm-svc-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Top row: icon chip + optional tag */
.spm-svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.spm-svc-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spm-svc-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-strong);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.spm-svc-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 9px;
  text-transform: none;
  letter-spacing: 0;
}

.spm-svc-body {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--slate);
  margin: 0 0 18px;
  flex: 1;
}

.spm-svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  transition: gap var(--dur) var(--ease);
  margin-top: auto;
}

.spm-svc-card:hover .spm-svc-link {
  gap: 10px;
}

/* View-all CTA below the grid */
.spm-services-all {
  text-align: center;
  margin-top: 40px;
}

/* --- Who we help (explicit ICP + service language) ------------- */
.spm-wwh { background: var(--surface); }

.spm-wwh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 48px;
  margin-top: 46px;
}

@media (max-width: 820px) { .spm-wwh-grid { grid-template-columns: 1fr; gap: 26px; } }

.spm-wwh-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 15px;
  row-gap: 6px;
  align-items: start;
  /* Items stretch to the tallest in their row. Without this, grid's default
     align-content:stretch shares that spare height out between the icon/heading
     row and the body row, so shorter items sat lower with an inflated gap under
     the heading. Pack the rows to the top and let the spare space fall below. */
  align-content: start;
}

.spm-wwh-icon {
  grid-column: 1;
  grid-row: 1;
  /* Match the heading's alignment. The heading is centred in row 1, so leaving
     the icon at the grid's default `start` made the two drift apart as soon as
     a heading wrapped and the row grew taller than the 44px icon. */
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spm-wwh-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.spm-wwh-body {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.spm-wwh-also {
  margin: 40px auto 0;
  max-width: 900px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.spm-wwh-geo {
  margin: 16px auto 0;
  max-width: 900px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}

.spm-wwh-geo svg {
  color: var(--brand);
  vertical-align: -2px;
  margin-right: 6px;
}

.spm-wwh-cta {
  text-align: center;
  margin-top: 36px;
}