.services__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.services__filters::-webkit-scrollbar { display: none; }

.filter {
    padding: 8px 16px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--c-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.filter:hover { border-color: var(--c-purple-500); color: var(--c-purple-700); }
.filter.is-active { background: var(--c-purple-500); border-color: var(--c-purple-500); color: #fff; }

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}
.services__grid > li.is-hidden { display: none; }

.service-card { height: 100%; gap: 12px; }
.service-card .tag { align-self: flex-start; }

.service-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    margin-top: 12px;
}

.service-card__sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-purple-400);
}

.service-card__copy {
    font-size: 14px;
    line-height: 1.625;
    color: var(--c-text-muted);
    flex: 1;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .services__grid { grid-template-columns: repeat(4, 1fr); }
}