/* The services overview band, ported from site30.com when the agency
   perspective moved here. The only place on this site that carries
   photography, so its rules live apart from roles.css.
   Tokens per tokens.css — note `--accent` is documented there as never
   defined, so hover is carried by the image and an underline instead. */

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem 2rem;
}

.svc-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.svc-shot {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-panel);
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line-2);
}

.svc-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.svc-card:hover .svc-shot img {
    transform: scale(1.04);
}

.svc-count {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: 0.4rem;
}

.svc-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.1vw, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: underline transparent;
    text-underline-offset: 6px;
    transition: text-decoration-color 300ms ease;
}

a.svc-card:hover .svc-title {
    text-decoration-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .svc-shot img {
        transition: none;
    }
    a.svc-card:hover .svc-shot img {
        transform: none;
    }
}

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

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