/* Home "What we build" categories (mw-1qu.22). Replaces .pricing-section. Tokens only, no JS, no dependency.
   Same card surface as the home testimonial cards, so the page keeps one card look. */
.services-section { padding: var(--section-padding-desktop, 80px) 0; position: relative; }
.anchor-alias { position: absolute; top: 0; width: 0; height: 0; overflow: hidden; }   /* target for legacy /#pricing links */
.cat-group + .cat-group { margin-top: 32px; }
.cat-group-label { font-family: var(--font-mono); font-size: var(--type-label-size); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 12px; }
.cat-grid { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.cat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-card { display: flex; flex-direction: column; gap: 12px; padding: 24px;
    background: color-mix(in srgb, var(--card-floating) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--gcard-stroke); border-radius: var(--radius-card); box-shadow: var(--gcard-shadow); }
.cat-name { margin: 0; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--foreground); }
.cat-desc { margin: 0; font-size: var(--type-body-size); line-height: 1.5; color: var(--muted-foreground); }
.cat-built { margin: auto 0 0; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cat-built-label { font-family: var(--font-mono); font-size: var(--type-label-size); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); width: 100%; }
.cat-chip { font-size: .875rem; padding: 5px 12px; border: 1px solid var(--gcard-stroke); border-radius: 999px; color: var(--foreground); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.cat-chip:hover { border-color: var(--primary); color: var(--primary); }
.cat-more { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.cat-chip:focus-visible, .cat-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 1099px) { .cat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-grid--3 .cat-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 767px) {
    .services-section { padding: var(--section-padding-mobile, 48px) 0; }
    .cat-grid--4, .cat-grid--3 { grid-template-columns: none; }
    .cat-grid--3 .cat-card:last-child { grid-column: auto; }
    /* Phones: each group is the SAME native scroll-snap row as the services carousel and the home quotes: peek + thin scrollbar, no JS.
       Stacking seven cards would make this section 575px LONGER than the pricing it replaces. One shared .snap-row block should replace the three copies. */
    .cat-grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--spacing-container-mobile, 24px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
        margin-inline: calc(var(--spacing-container-mobile, 24px) * -1); padding: 0 var(--spacing-container-mobile, 24px) 14px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .cat-card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; padding: 20px; }
}