/* Homepage capabilities: a bento of six tiles in the pricing cards' language (#171717 on #111, #262626 rules, 12px
   corners, flat). Two lead tiles carry a small drawing of what they describe; four supporting tiles sit under
   them. Tiles answer the pointer like the plan cards: the border brightens, the tile lifts 2px and a soft light
   follows the cursor. The lift uses the translate property because motion.js animates transform on these tiles. */
.work-capabilities-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px!important;margin:56px 0 0;border:0!important;counter-reset:capability}
.work-capabilities-grid article{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:28px!important;background:var(--surface-muted,#171717);border:1px solid var(--interactive-border,#262626)!important;border-radius:12px;transition:translate 250ms var(--ease-out),border-color 250ms var(--ease-out)}
.work-capabilities-grid article[data-lead]{grid-column:span 2}
.work-capabilities-grid article::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0px),#ffffff0f,transparent 65%);opacity:0;transition:opacity 250ms var(--ease-out);pointer-events:none}
@media(hover:hover){.work-capabilities-grid article:hover{translate:0 -2px;background:var(--surface-muted,#171717);border-color:var(--interactive-border-hover,#363636)!important}.work-capabilities-grid article:hover::before{opacity:1}}
.work-capabilities-grid article::after{counter-increment:capability;content:'0' counter(capability);position:absolute;top:28px;right:28px;font:12px/1 'Eshlon Mono',monospace;color:#6f6f6f;letter-spacing:.04em}
.work-capabilities-grid .work-capability-icon{display:block;width:24px;height:24px;color:#c4c4c4;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.work-capabilities-grid article h3{font-size:18px!important;font-weight:500;line-height:1.3;letter-spacing:-.03em;margin:20px 0 8px!important;color:var(--surface-foreground,#fff)}
.work-capabilities-grid article[data-lead] h3{font-size:22px!important}
.work-capabilities-grid article p{font-size:14px!important;line-height:1.6!important;color:var(--surface-muted-foreground,#9e9e9e);margin:0;max-width:none}
.work-capabilities-grid article[data-lead] p{font-size:15px!important;max-width:44ch}
/* The lead tiles' drawings: an inset field on the page surface, the drawing in the design system's greys. */
.work-capability-art{margin-top:24px;padding:16px 20px;border:1px solid var(--interactive-border,#262626);border-radius:10px;background:var(--surface-background,#111);overflow:hidden}
.work-capability-art svg{display:block;width:100%;height:auto;max-height:132px;margin:auto}
.work-capability-art .ink{stroke:#e8e8e8}
.work-capability-art .mute{stroke:#4a4a4a}
.work-capability-art .line{stroke:#333}
.work-capability-art .fill{fill:#1f1f1f}
.work-capability-art .bar{fill:#3a3a3a}
.work-capability-art .bar-lit{fill:#d4d4d4}
@media(max-width:1000px){.work-capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.work-capabilities-grid{margin-top:40px;gap:12px!important}.work-capabilities-grid article{padding:24px!important}.work-capabilities-grid article::after{top:24px;right:24px}}
@media(max-width:560px){.work-capabilities-grid{grid-template-columns:1fr}.work-capabilities-grid article[data-lead]{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.work-capabilities-grid article,.work-capabilities-grid article::before{transition:none}.work-capabilities-grid article:hover{translate:none}}