@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Book.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Regular.otf') format('opentype');font-weight:450;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Medium.otf') format('opentype');font-weight:500;font-display:swap}

:root{font-family:Suisse,Arial,sans-serif;color:#131313;background:#fff;font-synthesis:none;--surface:#f7f7f7;--border:#e5e5e5;--muted:rgba(19,19,19,.5);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button,img{-webkit-user-drag:none}
button{cursor:pointer}
p,h1,h2{margin:0}
img{display:block}
.portfolio{width:min(618px,calc(100% - 32px));margin-inline:auto;padding-block:64px;display:flex;flex-direction:column;gap:64px}
.intro{padding-inline:16px;display:flex;flex-direction:column;gap:48px}
.identity{display:flex;flex-direction:column;gap:20px}
.avatar{width:60px;height:60px;border:.8px solid var(--border);border-radius:16px;overflow:hidden;display:grid;place-items:center}
.avatar img{object-fit:cover}
.signature{display:flex;flex-direction:column;gap:2px}
.signature h1,.signature .name{font-size:26px;font-weight:500;line-height:30.16px}
.signature>p:not(.name){font-size:20px;font-weight:450;line-height:30.16px;color:#b9b9b9}
.bio{font-size:16px;line-height:22px;font-weight:300}
.contacts,.contact-group{display:flex;align-items:center;gap:8px}
.contacts{justify-content:space-between;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:37px;padding:8px 12px;border:.8px solid var(--border);border-radius:999px;background:var(--surface);font-size:14px;line-height:18.9px;white-space:nowrap;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.pill img{flex:none;transition:transform .18s var(--ease)}
.pill-dark{background:#131313;color:#e5e5e5}
.cases h2{padding:16px;font-size:13px;line-height:16.9px;font-weight:400;letter-spacing:1.04px;text-transform:uppercase;color:var(--muted)}
.case-list{display:flex;flex-direction:column;gap:24px}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-SemiBold.otf') format('opentype');font-weight:600;font-display:swap}
.experience,.tools-section{min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;padding-inline:16px;margin-bottom:24px}
.section-heading h2,.tools-section h2{font-size:13px;line-height:16.9px;font-weight:400;letter-spacing:1.04px;text-transform:uppercase;color:var(--muted)}
.tools-section h2{padding:16px}
.experience-list{padding-inline:16px}
.experience-item+ .experience-item{margin-top:32px;padding-top:32px;border-top:1px solid var(--border)}
.experience-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:16px;line-height:22px;font-weight:450}
.experience-heading h3{margin:0 0 2px;font-size:16px;line-height:22px;font-weight:600}
.experience-heading>div>p{color:var(--muted)}
.experience-dates{flex:none;text-align:right;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.experience-description{margin-top:20px;font-size:13px;line-height:16.9px;color:var(--muted);font-weight:400}
.tool-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0 16px}
.tool-tag{display:flex;align-items:center;min-height:37px;padding:8px 12px;border:.8px solid var(--border);border-radius:999px;font-size:14px;line-height:18.9px;font-weight:400;cursor:default}
@media(max-width:599.98px){.section-heading{padding-right:16px}.experience-heading{align-items:flex-start;flex-direction:column;gap:8px}.experience-dates{text-align:left;font-size:14px;line-height:20px}.experience-dates br{display:none}.experience-description{font-size:14px;line-height:20px;margin-top:16px}}
.case-card{display:grid;grid-template-columns:minmax(0,316.2fr) minmax(0,298.6fr);width:100%;padding:0;text-align:left;border:.8px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;text-decoration:none;transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.case-copy{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0;min-height:300.2px;padding:16px}
.case-heading{display:flex;flex-direction:column;gap:8px;max-width:285px}
.case-title{display:block;font-size:22px;font-weight:500;line-height:25.52px}
.case-description,.metric-label{display:block;font-size:13px;line-height:16.9px;color:var(--muted);font-weight:400}
.metrics{display:flex;flex-direction:column;gap:20px}
.metric{display:flex;flex-direction:column;gap:4px}
.metric-value{font-size:16px;line-height:22.4px;font-weight:450}
.case-media{display:block;min-width:0;padding:8px;align-self:start}
.artwork{display:block;position:relative;aspect-ratio:1;overflow:hidden;border:.8px solid var(--border);border-radius:8px;container-type:inline-size}
.artwork-production{background:#0073eb}
.artwork-production img{position:absolute;left:10.82%;top:10.11%;width:372.24%;height:auto;max-width:none;border-radius:10.96px;box-shadow:0 0 0 .919px #00000005,0 9.19px 27.57px #0e0f0c1f}
.artwork-onboarding{background:linear-gradient(140.106deg,#874dd1 1.7723%,#45276b 82.048%)}
.artwork-onboarding img,.artwork-cpa img,.artwork-otus img{position:absolute;width:100.6%;height:auto;left:-.3%;top:-.4%}
.artwork-otus{background:#292929}
.divider{position:relative;height:1px;width:100%;overflow:hidden}
.divider-desktop{margin-inline:auto}
.divider-mobile{display:none}
.footer{padding-inline:16px;display:flex;flex-direction:column;gap:24px}
button:focus-visible,a:focus-visible{outline:2px solid #0073eb;outline-offset:5px}
@media(hover:hover){
 .pill:hover{background:#ededed;border-color:#d2d2d2;transform:translateY(-1px);box-shadow:0 3px 8px #13131308}
 .pill:hover img{transform:translate(1px,-1px)}
 .pill-dark:hover{background:#343434;border-color:#343434}
 .case-card:hover{background:#f0f0f0;border-color:#ccc;transform:translateY(-3px);box-shadow:0 10px 26px #1313130b}
}
.pill:active,.pill.is-pressed{transform:scale(.96);background:#dedede;box-shadow:none}
.pill-dark:active,.pill-dark.is-pressed{background:#000}
.case-card:active,.case-card.is-pressed{transform:scale(.992);background:#eaeaea;border-color:#bdbdbd;box-shadow:none}
@media(max-width:599.98px){
 .portfolio{width:calc(100% - 16px)}
 .case-card{grid-template-columns:minmax(0,1fr)}
 .case-copy{min-height:300px}
 .case-card-compact .case-copy{min-height:0}
 .case-media{width:100%;padding:2.68%}
 .artwork{border-radius:9.195px}
 .divider-desktop{display:none}
 .divider-mobile{display:block;margin-inline:auto}
 .footer{padding-bottom:128px}
}
@media(max-width:340px){
 .signature h1,.signature .name{font-size:24px}
 .contacts{column-gap:6px}
 .contact-group{gap:6px}
 .pill{padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
 .pill:hover,.case-card:hover,.pill:active,.case-card:active,.is-pressed{transform:none}
}

/* Shared colors and navigation for every portfolio page. */
:root{--page:#fff;--ink:#131313;--secondary:#b9b9b9;--hover:#ededed;--pressed:#dedede;--card-hover:#f0f0f0;--card-pressed:#eaeaea;--hover-border:#ccc;--inverse:#131313;--inverse-text:#e5e5e5;color:var(--ink);background:var(--page);color-scheme:light}
:root[data-theme=dark]{--page:#141414;--ink:#ededed;--surface:#202020;--border:#353535;--muted:#a0a0a0;--secondary:#858585;--hover:#303030;--pressed:#3b3b3b;--card-hover:#272727;--card-pressed:#303030;--hover-border:#555;--inverse:#eee;--inverse-text:#171717;color-scheme:dark}
body{background:var(--page);color:var(--ink)}
a{color:inherit}
.signature>p:not(.name){color:var(--secondary)}
.pill-dark{background:var(--inverse);color:var(--inverse-text)}
[data-theme=dark] .pill:not(.pill-dark) img[src$='arrow.svg'],[data-theme=dark] .pill-dark img{filter:invert(1)}
[data-theme=dark] .divider{background:var(--border)}
[data-theme=dark] .divider img{visibility:hidden}
.floating-nav{position:fixed;z-index:20;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(920px,calc(100% - 48px));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.floating-nav>*{pointer-events:auto}
.theme-dock{position:fixed;z-index:20;right:max(32px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom))}
.floating-nav>.pill,.theme-trigger{box-shadow:0 4px 18px #00000008;min-height:40px}
.theme-control{position:relative}
.theme-trigger{width:44px;height:44px;padding:0;color:var(--muted);box-shadow:none}
.theme-trigger:hover,.theme-trigger:focus-visible,.theme-trigger[aria-expanded=true]{color:var(--ink)}
.theme-panel{position:absolute;bottom:54px;right:0;min-width:220px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--page);box-shadow:0 12px 36px #0002}
.theme-panel[hidden]{display:none}
.floating-nav .theme-trigger{width:40px;height:40px;color:var(--ink);box-shadow:0 4px 18px #00000008}
.floating-nav .theme-panel{top:48px;bottom:auto}
.theme-panel button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;border:0;border-radius:8px;text-align:left;background:none;font-size:14px;line-height:20px}
.theme-panel button[aria-pressed=true]{background:var(--surface)}
.theme-check{margin-left:auto;visibility:hidden}
.theme-panel button[aria-pressed=true] .theme-check{visibility:visible}
@media(hover:hover){
 .pill:hover{background:var(--hover);border-color:var(--hover-border)}
 .pill-dark:hover{background:var(--ink);color:var(--page)}
 .case-card:hover{background:var(--card-hover);border-color:var(--hover-border)}
 .theme-panel button:hover{background:var(--hover)}
}
.pill:active,.pill.is-pressed{background:var(--pressed)}
.pill-dark:active,.pill-dark.is-pressed{background:var(--inverse)}
.case-card:active,.case-card.is-pressed{background:var(--card-pressed);border-color:var(--hover-border)}
@media(max-width:599.98px){.floating-nav{width:calc(100% - 32px)}}
@media(max-width:899.98px){
 .theme-dock{position:relative;right:auto;bottom:auto;width:min(586px,calc(100% - 48px));margin:0 auto;padding-bottom:max(32px,env(safe-area-inset-bottom));display:flex;justify-content:flex-end}
 .portfolio{padding-bottom:32px}
 .portfolio .footer{padding-bottom:0}
}