/* Home-service cards share the site's existing color, spacing and radius tokens. */
.home-services { padding-block: var(--section-space); background: var(--soft); }
.home-services-intro { max-width: 46rem; margin: 0 auto 2.75rem; text-align: center; }
.home-services-intro p { margin-top: var(--space-base); }
.home-services-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-compact); padding: 0; margin: 0; list-style: none; }
.home-services-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.home-services-photo { display: block; width: 100%; aspect-ratio: 99 / 80; background-image: url('/assets/home-service-trades.webp'); background-repeat: no-repeat; background-size: 400% 330%; background-position: var(--photo-x) var(--photo-y); }
.home-services-photo--extra { background-image: url('/assets/home-service-trades-extra.webp'); }
.home-services-name { display: flex; min-height: 3.8rem; align-items: center; padding: var(--space-compact) var(--space-field-inline); color: var(--navy); font-size: var(--type-body-sm); font-weight: 750; line-height: 1.35; }
.home-services-slider .home-services-grid { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; gap: var(--space-compact); scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-services-slider .home-services-grid::-webkit-scrollbar { display: none; }
.home-services-slider .home-services-card { flex: 0 0 clamp(160px, 47vw, 200px); scroll-snap-align: start; }
.home-services-controls { display: flex; justify-content: center; gap: var(--space-compact); margin-top: var(--space-page-inline); }
.home-services-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--navy); }
.home-services-controls button:not(:disabled):hover { background: var(--mint); }
.home-services-controls button:disabled { opacity: .4; cursor: default; }
.home-services-controls .previous .icon { transform: rotate(180deg); }
@media (max-width: 900px) { .home-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-compact); } .home-services-intro { margin-bottom: var(--space-hero-inset); } .home-services-name { min-height: 3.5rem; } }