.mock{border-radius:var(--radius-lg);background:var(--m-bg);position:relative;overflow:hidden;container-type:inline-size}.mock__stage{background:radial-gradient(60em 40em at 85% 0%, color-mix(in srgb, var(--m-accent) 32%, transparent), transparent 70%),radial-gradient(50em 40em at 0% 100%, color-mix(in srgb, var(--m-accent) 14%, transparent), transparent 70%),var(--m-bg);height:64em;font-size:1cqw;position:relative}.mock--feature .mock__stage{height:56em}.mock__browser{background:var(--m-surface);width:72em;height:60em;box-shadow:0 3em 6em -2em #00000073,0 0 0 .1em color-mix(in srgb, var(--m-ink) 12%, transparent);transform:translateY(calc(var(--mock-lift) * -1.2em));transition:transform .9s var(--ease-out);border-radius:1.4em;position:absolute;top:8em;left:7em;overflow:hidden}.mock__bar{border-bottom:.1em solid color-mix(in srgb, var(--m-ink) 10%, transparent);align-items:center;gap:.6em;height:3.6em;padding:0 1.4em;display:flex}.mock__dot{background:color-mix(in srgb, var(--m-ink) 20%, transparent);border-radius:50%;width:.9em;height:.9em}.mock__client{background:color-mix(in srgb, var(--m-ink) 7%, transparent);color:var(--m-muted);border-radius:1em;margin:0 auto;padding:.4em 3em;font-size:1.1em;font-style:normal}.mock__screen{height:calc(100% - 3.6em);position:relative}.mock__phone{width:18em;height:38em;transform:translateY(calc(var(--mock-lift) * -2.4em)) rotate(calc(var(--mock-lift) * -2deg));transition:transform .9s var(--ease-out);background:#0c0c0e;border-radius:3em;padding:.8em;position:absolute;top:20em;right:6em;box-shadow:0 3em 5em -1.5em #0000008c,inset 0 0 0 .15em #ffffff1f}.mock__phone-screen{background:var(--m-surface);border-radius:2.3em;height:100%;position:relative;overflow:hidden}.mock__shot{object-fit:cover;object-position:top left}.mock--panel{background:0 0;border-radius:0;overflow:visible}.mock--panel .mock__stage{background:0 0;height:100%}.mock--panel .mock__browser{width:118em;height:78em;top:9em;left:12em}.mock--panel .mock__phone{border-radius:4.2em;width:26em;height:55em;padding:1.1em;inset:auto auto 7em 3em}.mock--panel .mock__phone-screen{border-radius:3.2em}@supports (animation-timeline:view()){@media (min-width:861px) and (prefers-reduced-motion:no-preference){.mock--panel .mock__phone{animation:linear both mock-drift;animation-timeline:view();animation-range:entry cover 45%}}}@keyframes mock-drift{0%{translate:0 64px}}.home-work__head{justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(32px,4vw,56px);display:flex}.work-stage{timeline-scope:var(--timelines);gap:clamp(24px,4vw,48px);list-style:none;display:grid}@media (min-width:861px){.work-stage{grid-auto-rows:1fr}.work-stage__item{top:calc(var(--header-h) + 16px + var(--i)*14px);view-timeline-name:var(--self);position:sticky}.work-stage__panel{height:100%}}.work-panel{--p-line:color-mix(in srgb, var(--p-ink) 14%, transparent);--p-label:color-mix(in srgb, var(--p-accent) 78%, var(--p-ink));isolation:isolate;min-height:clamp(520px,100svh - var(--header-h) - 48px,720px);border:1px solid var(--p-line);border-radius:var(--radius-lg);background:radial-gradient(70% 80% at 92% 0%, color-mix(in srgb, var(--p-accent) 30%, transparent), transparent 70%),radial-gradient(55% 65% at 0% 100%, color-mix(in srgb, var(--p-accent) 13%, transparent), transparent 70%),var(--p-bg);color:var(--p-ink);transform-origin:50% 0;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"copy mockup";display:grid;position:relative;overflow:hidden}.work-panel:hover{--mock-lift:1}.work-panel:after{content:"";z-index:5;opacity:0;pointer-events:none;background:#000;position:absolute;inset:0}.work-panel__copy{z-index:3;grid-area:copy;align-self:end;justify-items:start;gap:18px;padding:clamp(28px,4vw,56px);display:grid;position:relative}.work-panel__eyebrow{font-family:var(--font-serif);color:var(--p-label);font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);font-style:italic;line-height:1.2}.work-panel__title{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(1.75rem,1.1rem + 2vw,3rem);font-weight:650;line-height:1.04}.work-panel__summary{max-width:42ch;color:var(--p-muted);line-height:1.55}.work-panel__note{z-index:4;border:1px solid var(--p-line);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--p-bg) 84%, transparent);backdrop-filter:blur(14px);width:min(40ch,58%);font-size:var(--fs-xs);color:var(--p-muted);grid-area:mockup;place-self:end;gap:4px;margin:0 clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px) 0;padding:12px 14px;line-height:1.5;display:grid;position:relative;box-shadow:0 24px 48px -24px #00000080}.work-panel__note-label{font-size:var(--fs-small);color:var(--p-ink);font-weight:700}.work-panel__cta{border-bottom:1px solid var(--p-line);transition:gap .3s var(--ease-out),border-color .3s;align-items:center;gap:8px;padding-bottom:3px;font-weight:600;display:inline-flex}.work-panel__icon{width:15px;height:15px}.work-panel:hover .work-panel__cta{border-color:var(--p-ink);gap:12px}.work-panel__mockup{grid-area:mockup;min-width:0}@media (max-width:1100px){.work-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:860px){.work-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"mockup""note""copy";min-height:0}.work-panel__mockup{height:clamp(260px,68vw,440px);overflow:hidden}.work-panel__note{backdrop-filter:none;width:auto;box-shadow:none;grid-area:note;justify-self:stretch;margin:20px 24px 0}.work-panel__copy{gap:14px;padding:24px}}@supports (animation-timeline:view()){@media (min-width:861px) and (prefers-reduced-motion:no-preference){.work-stage__item:not(:last-child) .work-stage__panel{animation:linear both work-recede;animation-timeline:var(--next);animation-range:entry}.work-stage__item:not(:last-child) .work-stage__panel:after{animation:linear both work-dim;animation-timeline:var(--next);animation-range:entry}}}@keyframes work-recede{to{transform:scale(.94)}}@keyframes work-dim{to{opacity:.45}}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(20px,3vw,40px);display:grid}@media (max-width:760px){.work-grid{grid-template-columns:1fr}}.work-filter{flex-wrap:wrap;gap:8px;margin-bottom:48px;display:flex}.work-filter__btn{border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:var(--fs-small);color:var(--text-muted);transition:all .25s var(--ease-out);background:0 0;align-items:center;gap:10px;padding:10px 18px;font-weight:500;display:inline-flex}.work-filter__btn:hover{color:var(--text);border-color:var(--text)}.work-filter__btn[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}.work-filter__count{font-family:var(--font-mono);opacity:.8;font-size:.8125rem}.work-grid--index[data-filter=website] .project-card:not([data-categories~=website]),.work-grid--index[data-filter=platform] .project-card:not([data-categories~=platform]),.work-grid--index[data-filter=marketplace] .project-card:not([data-categories~=marketplace]),.work-grid--index[data-filter=product] .project-card:not([data-categories~=product]){display:none}.project-card{gap:22px;display:grid}.project-card:hover{--mock-lift:1}.project-card--feature{grid-column:1/-1}@media (min-width:861px){.project-card--feature{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:clamp(32px,4vw,64px)}}.project-card__visual{border:1px solid var(--line)}.project-card__meta{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.project-card__client{color:var(--text-muted)}.project-card__category{white-space:nowrap}.project-card__title{max-width:30ch;margin-top:10px}.project-card__summary{max-width:60ch;color:var(--text-muted);margin-top:14px}.project-card--feature .project-card__meta{flex-direction:column;gap:24px}.project-card--feature .project-card__title{max-width:36ch}.project-card__arrow{border:1px solid var(--line-strong);width:48px;height:48px;transition:background-color .3s,color .3s,transform .5s var(--ease-out);border-radius:50%;flex:none;place-items:center;display:grid}.project-card__icon{width:18px;height:18px}.project-card:hover .project-card__arrow{background:var(--text);color:var(--bg);transform:rotate(45deg)}