/* Figma 486:2106: 420 × 52 pill, 4 px inset/gaps, Inter Medium, indigo CTA.
   Inactive labels use the existing darker text token for readable contrast. */
:root{--nav-surface:#fff;--nav-border:#f3f4f6;--nav-ink:#111827;--nav-muted:#545b68;--nav-accent:#5850ec;--nav-accent-border:#8da2fb;--nav-active:rgba(209,213,219,.12);--nav-shadow:0 0 4px 1px rgb(0 0 0 / 12%)}
.portfolio-header{position:fixed;z-index:1000;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:26.25rem;max-width:calc(100% - 32px);font-family:Inter,sans-serif;font-size:1rem;font-weight:500;line-height:1.5;letter-spacing:normal;color:var(--nav-ink);pointer-events:none}
.portfolio-header *{box-sizing:border-box}.portfolio-header a,.portfolio-header button,.portfolio-header nav{pointer-events:auto}
.portfolio-nav{display:flex;align-items:center;gap:4px;padding:4px;background:var(--nav-surface);border-radius:100px;box-shadow:var(--nav-shadow)}
.portfolio-header a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 16px;border:0;border-radius:100px;font:inherit;line-height:1.5;letter-spacing:normal;text-decoration:none;color:var(--nav-muted);white-space:nowrap;transition:background-color 180ms,color 180ms}
.portfolio-nav>a{flex:1 1 0}.portfolio-header a[aria-current]{background:var(--nav-active);color:var(--nav-ink);box-shadow:inset 0 0 0 1px var(--nav-border)}
.portfolio-header a:hover{background:var(--nav-active);color:var(--nav-ink)}
.portfolio-header a.portfolio-nav-contact{flex:0 0 auto;min-width:121px;padding:8px 20px;background:var(--nav-accent);color:#fff;box-shadow:inset 0 0 0 1px var(--nav-accent-border)}
.portfolio-header a.portfolio-nav-contact:hover{background:#4941d8}
.portfolio-header :is(a,button):focus-visible{outline:3px solid var(--nav-accent);outline-offset:3px}
.portfolio-mobile-bar{display:none;align-items:center;justify-content:space-between;gap:16px;min-height:52px}.portfolio-mobile-actions{display:flex;align-items:center;gap:12px}.portfolio-header .portfolio-brand{padding:0;width:44px;height:52px}.portfolio-brand img{display:block;width:39px;height:44px;max-width:none;object-fit:contain}
.portfolio-menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:52px;height:52px;flex-shrink:0;padding:4px;background:var(--nav-surface);border:1px solid var(--nav-border);border-radius:100px;box-shadow:var(--nav-shadow);cursor:pointer}.portfolio-menu-toggle span{display:block;width:20px;height:1.5px;background:var(--nav-ink)}
.portfolio-mobile-menu{position:absolute;top:calc(100% + 12px);left:0;right:0;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--nav-surface);border:1px solid var(--nav-border);border-radius:24px;box-shadow:var(--nav-shadow);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}.portfolio-header [hidden]{display:none!important}
body:has(.portfolio-header) .ovalix{padding-top:100px}body:has(.portfolio-header) main.page{padding-top:120px}
@media(max-width:700px){.portfolio-header{top:max(16px,env(safe-area-inset-top));max-width:calc(100% - 40px)}.portfolio-nav{display:none}.portfolio-mobile-bar{display:flex}body:has(.portfolio-header) .ovalix{padding-top:88px}body:has(.portfolio-header) main.page{padding-top:104px}}
@media(prefers-reduced-motion:reduce){.portfolio-header a{transition:none}}

@media(max-width:700px){.portfolio-mobile-bar,.portfolio-mobile-actions{gap:8px}.portfolio-mobile-actions .portfolio-nav-contact{padding-inline:12px}}
@media(max-width:350px){.portfolio-header{max-width:calc(100% - 24px)}}