/* ── 03 · Services ────────────────────────────────────────
   Title left / intro right, 8 cards (4 × 2 desktop, 2 columns tablet, swipe row on phones),
   then a dark "not sure?" strip. No prices: every card leads to Get Price Quote. */
.svc { padding-block: var(--msp-section-y); background: var(--msp-surface); }
.svc__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: clamp(28px, 5vw, 96px); }
.svc__title { max-width: 12ch; margin-top: 20px; font-size: var(--msp-fs-h2); line-height: 1.04; letter-spacing: -.01em; }
.svc__intro { display: grid; justify-items: start; gap: 28px; }
.svc__intro p { max-width: 48ch; font-size: var(--msp-fs-lead); line-height: 1.6; }

.svc__swipe { display: none; }
.svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.svc__grid > li { display: flex; }

.svc-card {
  display: flex; flex-direction: column; width: 100%;
  padding: 14px;
  border: 1px solid var(--msp-divider); border-radius: var(--msp-radius-lg);
  background: #fff;
  transition: border-color .35s, box-shadow .35s, transform .45s var(--msp-ease-out);
}
.svc-card:hover { border-color: rgb(8 17 25 / .16); box-shadow: 0 30px 50px -32px rgb(8 17 25 / .4); transform: translateY(-4px); }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 0; }
.svc-card__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--msp-surface); color: var(--msp-secondary); transition: background-color .35s; }
.svc-card__icon .icon { width: 25px; height: 25px; }
.svc-card:hover .svc-card__icon { background: var(--msp-primary); }
.svc-card__num { font-size: 14px; font-weight: 500; color: var(--msp-muted); font-variant-numeric: tabular-nums; }
.svc-card__title { margin: 22px 10px 0; font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); line-height: 1.2; }
.svc-card__title a:hover { color: var(--msp-accent); }
.svc-card__desc { margin: 10px 10px 22px; font-size: 15px; line-height: 1.55; }
.svc-card__media { margin-top: auto; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--msp-radius-md); background: var(--msp-surface-2); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--msp-ease-out); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 2px; }
.svc-card__more {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border: 1px solid var(--msp-divider); border-radius: 50%;
  color: var(--msp-secondary);
  transition: background-color .3s, border-color .3s, color .3s;
}
.svc-card__more .icon { width: 18px; height: 18px; transition: transform .45s var(--msp-ease-inout); }
.svc-card__more:hover { background: var(--msp-secondary); border-color: var(--msp-secondary); color: var(--msp-primary); }
.svc-card__more:hover .icon { transform: rotate(45deg); }

/* "Not sure?" strip */
.svc__note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px;
  margin-top: 28px; padding: 22px 22px 22px 26px;
  border-radius: var(--msp-radius-lg);
  background: var(--msp-secondary); color: var(--msp-on-dark-muted);
}
.svc__note-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgb(155 213 5 / .16); color: var(--msp-primary); }
.svc__note-icon .icon { width: 24px; height: 24px; }
.svc__note p { flex: 1 1 320px; font-size: 15.5px; line-height: 1.5; }
.svc__note strong { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 400; color: #fff; }
.svc__note .btn { margin-left: auto; }
.svc__note .btn--primary:hover { background: #fff; color: var(--msp-secondary); }
.svc__note .btn--primary:hover .btn__icon { background: var(--msp-secondary); color: var(--msp-primary); }

@media (max-width: 1199px) {
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .svc__head { grid-template-columns: 1fr; align-items: start; }
}
/* Phones: one swipeable row instead of eight stacked cards. */
@media (max-width: 639px) {
  .svc__swipe { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 14px; color: var(--msp-muted); }
  .svc__swipe .icon { width: 16px; height: 16px; }
  .svc__grid {
    display: flex; gap: 14px;
    margin: 16px calc(-1 * var(--msp-gutter)) 0;
    padding: 4px var(--msp-gutter) 12px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--msp-gutter);
    scrollbar-width: thin;
  }
  .svc__grid > li { flex: 0 0 84%; scroll-snap-align: start; }
  .svc-card:hover { transform: none; }
  .svc__note { padding: 22px; }
  .svc__note .btn { width: 100%; margin-left: 0; justify-content: space-between; padding-left: 26px; }
}