/* home.css */

/* 11-service grid — auto-fill so it handles any count cleanly */
.services-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.service-card { display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -24px rgba(7,30,34,0.4); }
.svc-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 16%, var(--paper-2)); color: var(--teal); margin-bottom: 0.5rem; }
.svc-icon svg { width: 24px; height: 24px; }
.service-card p { flex: 1; }
.svc-go { color: var(--red); width: 26px; height: 26px; transition: transform 0.4s var(--ease-out); }
.svc-go svg { width: 22px; height: 22px; }
.service-card:hover .svc-go { transform: translateX(6px); }

/* Featured horizontal scroll */
.h-scroll-wrap { margin-top: clamp(1.5rem, 4vw, 2.5rem); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.h-scroll-wrap::-webkit-scrollbar { display: none; }
.h-scroll { display: flex; gap: clamp(1rem, 2vw, 1.6rem); padding-inline: var(--gutter); width: max-content; }
.h-card { width: clamp(230px, 30vw, 340px); flex: none; }
.h-card .video-frame { aspect-ratio: 3/4; }
.h-pinned .h-scroll-wrap { overflow: visible; }

.reel-section .reel { margin-top: clamp(1.5rem, 4vw, 2.5rem); }