@font-face{font-family:PortfolioInter;src:url(inter-complete-400.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PortfolioInter;src:url(inter-complete-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:PortfolioInter;src:url(inter-complete-600.woff) format('woff');font-weight:600;font-style:normal;font-display:swap}











.scroll-menu.portfolio-menu{box-sizing:border-box;position:fixed;z-index:100;top:24px;left:24px;right:26px;width:auto;max-width:none;height:112px;display:block;margin:0;padding:0;border:2px solid rgb(0 0 0 / 80%);border-radius:38px;background:#fff;color:#000;box-shadow:none;backdrop-filter:none;opacity:0;transform:translateY(-24px);pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1);font-family:PortfolioInter,Inter,Arial,sans-serif;line-height:normal;letter-spacing:normal;text-align:left}
.scroll-menu.portfolio-menu.is-visible{opacity:1;transform:none;pointer-events:auto}
.portfolio-menu .pm-inner{box-sizing:border-box;width:100%;max-width:none;height:100%;margin:0;padding:0 30px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;text-align:left}
.portfolio-menu .pm-identity{display:flex;align-items:center;gap:24px;flex:none;margin:0;padding:0;width:auto;max-width:none;color:#000;font-family:PortfolioInter,Inter,Arial,sans-serif;font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.07em;text-decoration:none;white-space:nowrap}
.portfolio-menu .pm-identity img{display:block;flex:none;width:64px;height:64px;border:0;border-radius:50%;background:transparent}
.portfolio-menu .pm-identity span{display:block;margin:0;padding:0;font:inherit;letter-spacing:inherit}
.portfolio-menu .pm-links{display:flex;align-items:center;justify-content:flex-end;gap:48px;flex:none;width:auto;max-width:none;margin:0;padding:0}
.portfolio-menu .pm-link{position:relative;display:inline-block;margin:0;padding:0;color:#000;font-family:PortfolioInter,Inter,Arial,sans-serif;font-size:18px;line-height:22px;font-weight:500;letter-spacing:-.07em;text-decoration:none;white-space:nowrap;transform:none}
.portfolio-menu .pm-dribbble{color:#eb5991}.portfolio-menu a:hover{color:#323232}.portfolio-menu a.pm-dribbble:hover{color:#eb5991}.portfolio-menu a:focus-visible{outline:2px solid #000;outline-offset:6px}
.portfolio-page-header.portfolio-menu{box-sizing:border-box;position:absolute;z-index:10;top:112px;left:40px;right:40px;width:auto;max-width:none;height:64px;margin:0;padding:0;display:block;border:0;border-radius:0;background:#fff;color:#000;font-family:PortfolioInter,Inter,Arial,sans-serif}
.portfolio-page-header.portfolio-menu .pm-inner{height:64px;padding:0}
.has-portfolio-header>header:not(.portfolio-menu){padding-top:208px}.has-portfolio-header>.shell{padding-top:208px}.has-portfolio-header .back:not(.portfolio-back){display:none}
.portfolio-case-controls{box-sizing:border-box;position:fixed;z-index:90;top:24px;left:24px;right:24px;height:60px;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;transition:top .35s cubic-bezier(.22,1,.36,1)}
.portfolio-case-controls .portfolio-close.close{position:static;display:block;flex:none;width:60px;height:60px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#000;outline:none;box-shadow:none;pointer-events:auto;transition:none}
/* 60px resting circle / 48px hover circle, as in the two Figma states. */
.portfolio-close.close svg{display:block;width:100%;height:100%;overflow:visible}
.portfolio-close.close .pc-bg{fill:#fff;stroke:#f5f5f5;transform-origin:30px 30px;transition:fill .26s ease,stroke .26s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.portfolio-close.close .pc-cross{stroke:currentColor}
.portfolio-close.close .pc-progress{transition:opacity .26s ease}
.portfolio-case-controls .portfolio-close.close{transition:color .26s ease}
.portfolio-case-controls .portfolio-close.close.is-morphed{background:transparent;color:#fff}
.portfolio-close.close.is-morphed .pc-bg{transform:scale(.8)}
.portfolio-close.close.is-morphed .pc-bg{fill:#000;stroke:#000}
.portfolio-close.close.is-morphed .pc-progress{opacity:0}
.portfolio-close.close:focus-visible{outline:2px solid #000;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.portfolio-close.close svg,.portfolio-close.close .pc-bg,.portfolio-close.close .pc-progress,.portfolio-case-controls .portfolio-close.close{transition:none}}

.portfolio-case-controls .portfolio-back{position:static;display:flex;align-items:center;height:60px;margin:0 0 0 16px;padding:0;pointer-events:auto;color:#000;font-family:PortfolioInter,Inter,Arial,sans-serif;font-size:18px;line-height:22px;font-weight:500;letter-spacing:-.07em;text-decoration:none}.portfolio-back:hover{color:#323232}.portfolio-back:focus-visible{outline:2px solid #000;outline-offset:5px}
.portfolio-menu a.pm-dribbble,.hero-top-links a.hero-dribbble,.portfolio-footer a.pf-dribbble{position:relative;transform:none!important;transition:color .2s}.portfolio-menu a.pm-dribbble::after,.hero-top-links a.hero-dribbble::after,.portfolio-footer a.pf-dribbble::after{content:none!important;display:none!important}
.portfolio-link-arrow{position:absolute;left:calc(100% + 6px);top:50%;width:11px;height:11px;opacity:0;overflow:visible;pointer-events:none;transform:translate(0,-50%);transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1)}.portfolio-link-arrow path{stroke-dasharray:none;stroke-dashoffset:0}a:hover>.portfolio-link-arrow,a:focus-visible>.portfolio-link-arrow{opacity:1;transform:translate(2px,-50%)}
.portfolio-copy-tip{position:fixed;z-index:250;width:168px;height:74px;display:grid;place-items:center;padding-bottom:8px;font-family:PortfolioInter,Inter,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;letter-spacing:-.04em;color:#000;opacity:0;visibility:hidden;transform:translateY(6px) scale(.95);transition:opacity .18s,transform .25s cubic-bezier(.22,1,.36,1),visibility .25s;pointer-events:none;isolation:isolate}.portfolio-copy-tip svg{position:absolute;inset:0;z-index:-1;overflow:visible}.portfolio-copy-tip.is-visible{opacity:1;visibility:visible;transform:none}.portfolio-copy-tip.is-below{padding-bottom:0;padding-top:8px}.portfolio-copy-tip.is-below svg{transform:rotate(180deg)}
body.portfolio-footer-returning .scroll-menu.portfolio-menu{opacity:0;pointer-events:none}
@media(max-width:1000px){.portfolio-menu .pm-inner{gap:20px}.portfolio-menu .pm-links{gap:24px}.portfolio-menu .pm-identity{gap:16px}}
@media(max-width:740px){.scroll-menu.portfolio-menu{height:auto;min-height:132px;border-radius:28px}.portfolio-menu .pm-inner{height:auto;min-height:128px;padding:16px 24px;flex-wrap:wrap;gap:16px}.portfolio-menu .pm-identity{font-size:18px;gap:12px}.portfolio-menu .pm-identity img{width:44px;height:44px}.portfolio-menu .pm-links{flex:1 1 100%;width:100%;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-start;gap:12px 24px}.portfolio-menu .pm-link{font-size:16px;line-height:20px}.portfolio-page-header.portfolio-menu{height:auto;min-height:128px}.portfolio-page-header.portfolio-menu .pm-inner{height:auto;min-height:128px;padding:0}.has-portfolio-header>header:not(.portfolio-menu),.has-portfolio-header>.shell{padding-top:280px}.portfolio-case-controls{height:48px}.portfolio-case-controls .portfolio-close.close{width:48px;height:48px}.portfolio-case-controls .portfolio-back{height:48px}.hero-top-links{flex-wrap:wrap;gap:12px 20px}.hero-top-links .hero-link{font-size:16px}}
@media(prefers-reduced-motion:reduce){.scroll-menu.portfolio-menu,.portfolio-case-controls,.portfolio-link-arrow,.portfolio-copy-tip{transition:none}}

/* Internal content retains its centre; side controls use the window insets. */
body.has-case-toc{--case-sticky-top:156px}
.has-case-toc .portfolio-page-header.portfolio-menu{top:40px}
.portfolio-case-layout{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,898px) minmax(0,1fr);width:calc(100% - 80px);max-width:1360px;margin:0 auto;padding:204px 0 206px;align-items:stretch;position:relative}
.portfolio-case-content{grid-column:2;min-width:0}
.portfolio-case-content>.case-header,.portfolio-case-content>.article{width:100%;max-width:898px;margin-inline:0}
.has-case-toc .portfolio-case-content>.case-header{padding:0;margin-top:0;margin-bottom:80px}
.portfolio-case-content>.article{padding:0;margin-block:0}
.portfolio-case-sidebar{grid-column:1;grid-row:1;min-width:0}
.portfolio-case-toc{box-sizing:border-box;position:sticky;top:var(--case-sticky-top);width:128px;margin:0;padding:0;font-family:PortfolioInter,Inter,Arial,sans-serif;color:#000}
.portfolio-case-toc summary{display:none}
.portfolio-case-toc nav{display:flex;flex-direction:column;gap:10px}
.portfolio-case-toc a{display:block;padding:0;margin:0;color:rgb(0 0 0 / 24%);text-decoration:none;font-size:16px;font-weight:600;line-height:32px;letter-spacing:-.04em;overflow-wrap:break-word}
.portfolio-case-toc a:hover,.portfolio-case-toc a[aria-current]{color:#000;text-decoration:none}
.portfolio-case-toc a:focus-visible{outline:2px solid #000;outline-offset:4px}
.portfolio-case-close-rail{grid-column:3;grid-row:1;min-width:0;display:flex;justify-content:flex-end;align-items:flex-start}
.has-case-toc .portfolio-case-controls{position:sticky;top:var(--case-sticky-top);left:auto;right:auto;width:60px;height:60px;display:block;transition:none;z-index:90}
.has-case-toc .article section[id]{scroll-margin-top:var(--case-sticky-top)}
@media(prefers-reduced-motion:no-preference){html:has(.has-case-toc){scroll-behavior:smooth}}
@media(min-width:1051px) and (max-width:1250px){.portfolio-case-layout{grid-template-columns:148px minmax(0,1fr) 84px}.portfolio-case-toc{width:128px}}
@media(max-width:1050px){
 .portfolio-case-layout{display:block;padding-top:204px;padding-bottom:100px}
 .portfolio-case-content{width:100%;max-width:898px;margin-inline:auto}
 .portfolio-case-sidebar{margin:0 80px 32px 0}
 .portfolio-case-toc{position:static;width:auto}
 .portfolio-case-toc summary{display:list-item;cursor:pointer;font-size:16px;font-weight:600;line-height:32px}
 .portfolio-case-toc nav{padding-top:12px;gap:6px}
 .portfolio-case-toc a{line-height:28px}
 .portfolio-case-close-rail{position:absolute;right:0;top:204px;bottom:100px;width:60px;pointer-events:none}
 .portfolio-case-content>.case-header{padding-right:0}
 .has-case-toc .portfolio-case-controls{pointer-events:auto}
}
@media(max-width:740px){
 body.has-case-toc{--case-sticky-top:176px}
 .portfolio-case-layout{width:calc(100% - 40px);padding-top:204px;padding-bottom:80px}
 .portfolio-case-close-rail{top:204px;width:48px;bottom:80px}
 .has-case-toc .portfolio-case-controls,.has-case-toc .portfolio-case-controls .portfolio-close.close{width:48px;height:48px}
 .has-case-toc .portfolio-case-content>.case-header{margin-bottom:56px}
 .has-case-toc .portfolio-page-header.portfolio-menu{left:20px;right:20px;top:24px}
}
.portfolio-case-toc{border:0;border-radius:0;background:transparent}

@media(min-width:1051px){
 .portfolio-case-layout{width:calc(100% - 112px);max-width:none}
 .portfolio-case-toc{width:min(128px,100%)}
}
@media(min-width:1051px) and (max-width:1250px){
 .portfolio-case-layout{grid-template-columns:132px minmax(0,1fr) 68px}
}
@media(min-width:741px) and (max-width:1050px){
 .portfolio-case-sidebar{margin-left:16px}
 .portfolio-case-close-rail{right:16px}
}

/* Static case header repeats the homepage wordmark. */
.portfolio-page-header.portfolio-menu .pm-identity{min-height:64px;gap:4px;font-size:26px;line-height:31px}
@media(min-width:601px) and (max-width:1050px){.portfolio-page-header.portfolio-menu .pm-identity{font-size:20px}}
@media(max-width:740px){.portfolio-page-header.portfolio-menu .pm-identity{min-height:44px}}
@media(max-width:600px){.portfolio-page-header.portfolio-menu .pm-identity{font-size:18px;line-height:20px}}

/* Case header uses the same 56px window insets as the homepage. */
.has-case-toc .portfolio-page-header.portfolio-menu{left:56px;right:56px}

/* Case year follows the lead typography, with Semibold weight. */
.has-case-toc .case-header .year{font-size:22px;line-height:32px;letter-spacing:-.04em;font-weight:600;color:#000}
@media(max-width:600px){.has-case-toc .case-header .year{font-size:19px;line-height:28px}}

.has-case-toc .portfolio-case-content>.case-header{position:relative;top:-2px}

@media(max-width:740px){
 .has-case-toc .portfolio-page-header.portfolio-menu{left:20px;right:20px}
 .scroll-menu.portfolio-menu{left:20px;right:20px}
 .scroll-menu.portfolio-menu .pm-inner{padding-left:18px;padding-right:18px}
 .portfolio-case-layout{width:calc(100% - 40px)}
 #figma-mode-toggle{right:6px!important;bottom:10px!important}
}

/* Close icon shares the year line's horizontal centre. */
@media(min-width:1051px){.portfolio-case-layout:has(.case-header .year) .portfolio-case-close-rail{margin-top:-16px}}

/* Menu bottom 136px + 20px gap; close and first contents line share a centre. */
@media(min-width:1051px){
 body.has-case-toc{--case-sticky-top:172px}
 .portfolio-case-sidebar{margin-top:-2px}
 .portfolio-case-toc{top:calc(var(--case-sticky-top) - 2px)}
 .portfolio-case-close-rail{margin-top:-16px}
 .has-case-toc .portfolio-case-controls{top:calc(var(--case-sticky-top) - 16px)}
}

/* Figma 71:191 — fixed return-to-top control, 44px hit area / 32px icon. */
#portfolio-scroll-top{position:fixed;z-index:120;left:50px;bottom:50px;width:44px;height:44px;display:grid;place-items:center;margin:0;padding:6px;border:0;background:transparent;color:#000;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .22s}
#portfolio-scroll-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
#portfolio-scroll-top svg{display:block;width:32px;height:32px;overflow:visible}
#portfolio-scroll-top .pt-bg{fill:#fff;transition:fill .2s ease}
#portfolio-scroll-top path{transition:stroke .2s ease}
#portfolio-scroll-top:hover .pt-bg{fill:#000}
#portfolio-scroll-top:hover path{stroke:#fff}
#portfolio-scroll-top:focus-visible{outline:2px solid #000;outline-offset:3px;border-radius:16px}
@media(max-width:740px){#portfolio-scroll-top{left:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){#portfolio-scroll-top,#portfolio-scroll-top .pt-bg,#portfolio-scroll-top path{transition:none}}

/* Static headers share the homepage top navigation geometry. */
.portfolio-page-header.portfolio-menu,.has-case-toc .portfolio-page-header.portfolio-menu{top:40px;height:64px}
.portfolio-page-header.portfolio-menu .pm-inner{align-items:flex-start;padding-top:10px}
.portfolio-page-header.portfolio-menu .pm-links{padding-top:4px}
@media(max-width:740px){.portfolio-page-header.portfolio-menu,.has-case-toc .portfolio-page-header.portfolio-menu{top:24px}.portfolio-page-header.portfolio-menu .pm-inner{padding-top:0}.portfolio-page-header.portfolio-menu .pm-links{padding-top:0}}

/* Align the static wordmark to the homepage text line, not a 64px avatar box. */
.portfolio-page-header.portfolio-menu .pm-identity{min-height:0;height:31px;align-items:baseline}
@media(max-width:600px){.portfolio-page-header.portfolio-menu .pm-identity{height:20px}}

/* Identical font rendering for homepage, static and floating headers. */
#top .brand-name,#top .hero-top-links,.portfolio-menu,.portfolio-menu .pm-identity,.portfolio-menu .pm-link{font-family:PortfolioInter,Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#top .brand-name,.portfolio-menu .pm-identity{font-weight:600}
#top .hero-top-links .hero-link,.portfolio-menu .pm-link{font-weight:500}

/* Contents only belongs in the desktop side column. */
@media(max-width:1050px){.portfolio-case-sidebar{display:none!important}}

/* Match the year gutter to the 32px contents gutter. */
@media(min-width:1051px){
 .has-case-toc .portfolio-case-content>.case-header{gap:32px}
 .has-case-toc .portfolio-case-content>.case-header>div{flex:1 1 0;min-width:0}
 .has-case-toc .portfolio-case-content>.case-header>.year{flex:0 0 auto;white-space:nowrap}
}