.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem}@media (max-width: 767px){.bento{grid-template-columns:1fr;gap:1rem}}.bento-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:1.25rem;background:var(--project-accent, rgb(var(--color-accent) / 1));transition:transform .3s ease,box-shadow .3s ease;--project-accent: rgb(var(--color-accent) / 1)}.bento-tile:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff0f;z-index:1}.bento-tile{grid-column:span 4 / span 4;aspect-ratio:1 / 1}.bento-tile[data-project-type=ios]{grid-column:span 3 / span 3;grid-row:span 2 / span 2;aspect-ratio:3 / 5}.bento-tile[data-project-type=web],.bento-tile[data-project-type=saas-internal]{grid-column:span 6 / span 6;aspect-ratio:16 / 10}.bento-tile[data-project-type=ecommerce]{grid-column:span 4 / span 4;aspect-ratio:1 / 1}.bento-tile[data-project-type=telegram]{grid-column:span 3 / span 3;grid-row:span 2 / span 2;aspect-ratio:3 / 5}.bento-tile[data-featured=true]{grid-column:span 8 / span 8;grid-row:span 2 / span 2;aspect-ratio:16 / 11}@media (max-width: 1023px){.bento-tile,.bento-tile[data-project-type],.bento-tile[data-featured=true]{grid-column:span 6 / span 6;grid-row:auto;aspect-ratio:4 / 3}}@media (max-width: 767px){.bento-tile,.bento-tile[data-project-type],.bento-tile[data-featured=true]{grid-column:span 1 / span 1;aspect-ratio:4 / 3}}.bento-tile-media{position:absolute;inset:0;overflow:hidden}.bento-tile-media :is(img,picture){display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center top;object-position:center top;transition:transform .6s cubic-bezier(.22,.61,.36,1)}.bento-tile-overlay{position:relative;z-index:1;margin-top:auto;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;background:linear-gradient(180deg,transparent 0%,rgb(0 0 0 / .55) 60%,rgb(0 0 0 / .78) 100%);color:#fff}.bento-tile-overlay h3{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}.bento-tile-overlay p{font-size:.875rem;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bento-tile-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85}.bento-tile-meta-dot{width:.375rem;height:.375rem;border-radius:9999px;background:var(--project-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--project-accent) 25%,transparent)}.bento-tile[data-preset=editorial]:hover{transform:scale(1.01)}.bento-tile[data-preset=editorial]:hover:after{box-shadow:inset 0 0 0 1px #ffffff2e}.bento-tile[data-preset=product]:hover{transform:translateY(-4px);box-shadow:0 12px 32px -16px color-mix(in srgb,var(--project-accent) 60%,transparent)}.bento-tile[data-preset=dark-code]:hover{transform:translateY(-2px)}.bento-tile[data-preset=dark-code] .bento-tile-meta{font-family:var(--font-mono, ui-monospace, monospace)}.bento-tile[data-preset=minimal]:hover:after{box-shadow:inset 0 0 0 1px #ffffff24}.bento-tile:not([data-preset=minimal]):hover .bento-tile-media :is(img,picture){transform:scale(1.05)}.bento-tile-metric{position:absolute;top:1rem;right:1rem;z-index:2;display:inline-flex;flex-direction:column;align-items:flex-end;gap:.125rem;padding:.5rem .75rem;border-radius:.875rem;background:#00000073;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);color:#fff;border:1px solid rgb(255 255 255 / .12);transform:translateY(-2px);opacity:.9;transition:opacity .24s ease,transform .24s ease,border-color .24s ease;pointer-events:none}.bento-tile-metric-value{font-family:var(--font-heading);font-size:1rem;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--project-accent, #fff);text-shadow:0 0 12px rgb(0 0 0 / .4)}.bento-tile-metric-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;opacity:.8}.bento-tile:hover .bento-tile-metric{opacity:1;transform:translateY(0);border-color:color-mix(in srgb,var(--project-accent) 35%,transparent)}@media (prefers-reduced-motion: reduce){.bento-tile-metric{transition:none!important;transform:none!important}}.bento-grid[data-active-filter=all] .bento-tile{display:flex}.bento-grid[data-active-filter=ios] .bento-tile:not([data-category=ios]),.bento-grid[data-active-filter=web] .bento-tile:not([data-category=web]),.bento-grid[data-active-filter=ecommerce] .bento-tile:not([data-category=ecommerce]),.bento-grid[data-active-filter=landing] .bento-tile:not([data-category=landing]){display:none}.category-filter-sentinel{height:1px;width:100%;pointer-events:none}.category-filter-wrap{position:sticky;top:4rem;z-index:30;margin-top:2.5rem;padding:.5rem 0;display:flex;justify-content:flex-start;background:transparent;transition:background-color .24s ease,box-shadow .24s ease,backdrop-filter .24s ease}.category-filter-wrap.is-stuck{background:rgb(var(--color-bg) / .78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 4px 18px -8px #00000026}.category-filter{display:inline-flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border-radius:9999px;border:1px solid rgb(var(--color-border-subtle) / 1);background:rgb(var(--color-surface) / 1)}.category-filter button{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .875rem 0 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:rgb(var(--color-muted) / 1);transition:background .22s ease,color .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}.category-filter button[aria-selected=true]{background:rgb(var(--color-accent) / 1);color:#fff;transform:scale(1.04)}.category-filter button:not([aria-selected=true]):hover{background:rgb(var(--color-elevated) / 1);color:rgb(var(--color-text) / 1)}.category-filter button:active{transform:scale(.98)}.category-filter button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.category-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.125rem;padding:0 .375rem;border-radius:9999px;background:rgb(var(--color-elevated) / 1);color:rgb(var(--color-muted) / 1);font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background .22s ease,color .22s ease}.category-filter button[aria-selected=true] .category-filter-count{background:#ffffff38;color:#fff}.category-filter button:not([aria-selected=true]):hover .category-filter-count{background:rgb(var(--color-surface) / 1)}.bento-tile{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,opacity .22s ease}@media (prefers-reduced-motion: reduce){.category-filter-wrap,.category-filter button,.category-filter-count,.bento-tile{transition:none!important;transform:none!important}.category-filter-wrap.is-stuck{backdrop-filter:none}}.case-meta-bar{position:sticky;top:6rem;align-self:start;display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border-radius:1rem;border:1px solid rgb(var(--color-border-subtle) / 1);background:rgb(var(--color-surface) / 1)}.case-meta-bar dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:rgb(var(--color-muted) / 1)}.case-meta-bar dd{margin:.25rem 0 0;font-size:.95rem;color:rgb(var(--color-text) / 1)}.phone-frame{position:relative;width:100%;max-width:280px;aspect-ratio:9 / 19.5;border-radius:2.25rem;border:8px solid rgb(20 20 22);background:#000;overflow:hidden;box-shadow:0 24px 48px -16px #00000080}.phone-frame:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:6.5rem;height:1.6rem;border-radius:0 0 1rem 1rem;background:#141416;z-index:2}.phone-frame img,.phone-frame picture{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center}@media (prefers-reduced-motion: reduce){.bento-tile,.bento-tile-media :is(img,picture){transition:none!important;transform:none!important}}