/* Skiper3-inspired expanding navigation. https://skiper-ui.com/v1/skiper3 */
.portfolio-header{position:relative;z-index:20;isolation:isolate;min-height:110px;padding:25px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}.portfolio-header .studio-mark{position:relative;left:auto;top:auto;z-index:3;display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 56px;padding:0 5px 5px 0;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:35px;letter-spacing:-4px;transform:none}.studio-mark.is-current{color:#fff}.studio-mark i{width:5px;height:5px;margin-left:6px}.studio-mark.is-current i{background:#dfff85}.studio-mark:focus-visible,.navigation-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.header-active-pill{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:30px;background:#2b2633;transition:transform .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1),height .6s,background .4s,opacity .2s}.header-active-pill.at-logo{background:#7960d7}.portfolio-header:not(.menu-open) .header-active-pill:not(.at-logo){opacity:0}
.portfolio-header .profile-switcher{position:relative;top:auto;right:auto;margin-left:auto;z-index:5}.portfolio-header .profile-trigger-copy{display:flex}.portfolio-header .profile-trigger:after{display:none}.portfolio-header .profile-chevron{display:block}.profile-options{z-index:30}
.navigation-island{position:absolute;inset:0;pointer-events:none;background:none;border:0;padding:0;margin:0;height:auto;max-width:none;box-shadow:none;isolation:auto}.navigation-toggle{position:absolute;left:50%;top:27px;transform:translateX(-50%);width:56px;height:56px;padding:0;display:grid;place-items:center;border:1px solid #e4dff0;border-radius:50%;background:#f1edf8;color:#42374f;pointer-events:auto;z-index:4;transition:background .25s,box-shadow .25s}.navigation-toggle:hover{background:#e6ddf7;box-shadow:0 5px 18px #52416b12}.menu-icon{width:21px;height:18px;position:relative;display:block}.menu-icon i{position:absolute;left:0;height:2px;border-radius:2px;background:currentColor;transition:transform .4s,width .4s,opacity .2s}.menu-icon i:nth-child(1){top:0;width:21px}.menu-icon i:nth-child(2){top:8px;width:14px}.menu-icon i:nth-child(3){top:16px;width:21px}.is-open .menu-icon i:nth-child(1){transform:translateY(8px) rotate(45deg)}.is-open .menu-icon i:nth-child(2){opacity:0;transform:translateX(-6px)}.is-open .menu-icon i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.navigation-reveal{position:absolute;left:94px;right:calc(50% + 38px);top:27px;height:56px;border-radius:30px;pointer-events:none;clip-path:inset(0 0 0 100% round 30px);opacity:0;visibility:hidden;background:#f0edf8;transition:clip-path .65s cubic-bezier(.22,1,.36,1),opacity .2s,visibility 0s .65s}.is-open .navigation-reveal{pointer-events:auto;clip-path:inset(0 0 0 0 round 30px);opacity:1;visibility:visible;transition:clip-path .65s cubic-bezier(.22,1,.36,1),opacity .2s,visibility 0s}.portfolio-header .menu{position:relative;z-index:2;width:100%;max-width:none;height:56px;display:flex;align-items:center;justify-content:space-evenly;gap:0;padding:7px 4px;margin:0;border:0;background:none;box-shadow:none}.portfolio-header .menu-item{height:42px;padding:0 10px;font-size:14px;color:#665c73;background:none}.portfolio-header .menu-item.profile{display:none}.portfolio-header .menu-item.contact{min-width:0;margin:0}.portfolio-header .menu-item.active{color:white}.portfolio-header .menu-item:not(.active):hover,.portfolio-header .menu-item:not(.active):focus-visible{background:#dcd2f3;color:#55418d}.navigation-reveal{z-index:0}.navigation-reveal:before{content:'';position:absolute;inset:0;border-radius:inherit;background:#f0edf8;z-index:-1}.header-active-pill{z-index:2}.navigation-island{z-index:3}.navigation-reveal,.navigation-reveal:before{background:transparent}.portfolio-header:before{content:'';position:absolute;left:94px;right:calc(50% + 38px);top:27px;height:56px;border-radius:30px;background:#f0edf8;clip-path:inset(0 0 0 100% round 30px);transition:clip-path .65s cubic-bezier(.22,1,.36,1);z-index:0}.portfolio-header.menu-open:before{clip-path:inset(0 0 0 0 round 30px)}
.dark .navigation-toggle,.dark.portfolio-header:before{background:#393044;color:#e9dfff}.dark .portfolio-header:before{background:#393044}.dark .portfolio-header .menu-item{color:#c9bfd6}.dark .portfolio-header .menu-item.active{color:#fff}.dark .header-active-pill{background:#6d568e}.dark .header-active-pill.at-logo{background:#7960d7}
@media(max-width:1100px){.portfolio-header .menu-item{font-size:12px;padding:0 6px}.portfolio-header .profile-trigger-copy{display:flex}}
@media(max-width:850px){.portfolio-header{min-height:104px;padding:22px 20px;transition:padding-bottom .5s}.portfolio-header.menu-open{padding-bottom:88px}.navigation-toggle{top:24px}.navigation-reveal,.portfolio-header:before{top:94px;left:20px;right:20px;height:54px}.portfolio-header .menu{height:54px}.portfolio-header .menu-item{font-size:14px;padding:0 13px}.portfolio-header .profile-trigger-copy{display:none}.portfolio-header .profile-chevron{display:none}.portfolio-header .profile-trigger:after{display:none}.portfolio-header .profile-switcher{position:relative;top:auto;right:auto}.navigation-reveal{clip-path:inset(0 50% 0 50% round 30px)}.portfolio-header:before{clip-path:inset(0 50% 0 50% round 30px)}}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}}

/* Logo typography local to this header; the existing page remains unchanged. */
.studio-mark{font-weight:700;line-height:1;cursor:pointer}.studio-mark span{font-weight:400}.studio-mark i{display:inline-block;border-radius:50%;background:var(--accent)}

/* Stable navigation geometry: opening/closing changes only the shell, never item positions. */
@media(min-width:851px){
  .navigation-reveal{visibility:visible;opacity:1;clip-path:none;pointer-events:none}
  .navigation-reveal .menu{visibility:visible;opacity:1;pointer-events:none}
  .navigation-island.is-open .navigation-reveal{pointer-events:auto}
  .navigation-island.is-open .navigation-reveal .menu{pointer-events:auto}
  .portfolio-header:before{clip-path:inset(0 50% 0 50% round 30px);opacity:0;transform:scaleX(.08);transform-origin:center;transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .22s ease,border-radius .48s ease}
  .portfolio-header.menu-open:before{clip-path:none;opacity:1;transform:scaleX(1)}
  .portfolio-header:not(.menu-open) .navigation-reveal .menu-item{opacity:0;transform:none;visibility:hidden;transition:opacity .16s ease,visibility 0s .18s}
  .portfolio-header.menu-open .navigation-reveal .menu-item{opacity:1;transform:none;visibility:visible;transition:opacity .24s ease .12s,visibility 0s}
}

/* Page-frame expansion: begins exactly on the inner-page edge, then grows to the canvas/background edge. */
.landing{position:relative}
.landing::after{content:'';position:absolute;inset:0;border:1.5px solid color-mix(in srgb,var(--accent) 64%,#d9d9e3);border-radius:inherit;opacity:0;pointer-events:none;z-index:50}
.landing.border-expand::after{animation:page-border-expand .82s cubic-bezier(.22,1,.36,1) both}
@keyframes page-border-expand{0%{top:0;right:0;bottom:0;left:0;opacity:.95;border-radius:24px}78%{opacity:.55}100%{top:var(--expand-top,-40px);right:var(--expand-right,-40px);bottom:var(--expand-bottom,-40px);left:var(--expand-left,-40px);opacity:0;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.landing.border-expand::after{animation-duration:.01ms}}

/* Pass 4: menu hover stays neutral; selection alone carries active color. */
.portfolio-header .menu-item:not(.active):hover{background:transparent!important;color:inherit!important}
.portfolio-header .menu-item:not(.active):focus-visible{background:transparent!important;color:inherit!important}

/* Active page is represented by fill only after selection; hover remains neutral. */
.portfolio-header .menu-item.active{background:var(--accent)!important;color:#fff!important;border-radius:22px}
.portfolio-header .menu-item:not(.active):hover,.portfolio-header .menu-item:not(.active):focus-visible{background:transparent!important;color:inherit!important}

/* Pass 6 — one gliding active indicator; hover never paints a menu item. */
.portfolio-header .menu-item:not(.active):hover,.portfolio-header .menu-item:not(.active):focus-visible{background:transparent!important;color:inherit!important}
.portfolio-header .menu-item.active{background:transparent!important;color:#fff!important}
.header-active-pill{display:block!important;opacity:1;background:var(--active-accent,var(--accent))!important;transition:transform .72s cubic-bezier(.22,1,.36,1),width .72s cubic-bezier(.22,1,.36,1),height .72s cubic-bezier(.22,1,.36,1),background-color .45s ease,opacity .25s ease!important}
.header-active-pill.at-logo{opacity:0!important}
/* Slower frame expansion, used only for logo/landing -> menu navigation. */
.landing.border-expand::after{animation-duration:1.55s!important;animation-timing-function:cubic-bezier(.16,1,.3,1)!important}


/* Pass 8 — one shared accent for the gliding active state; header geometry never moves. */
:root{--menu-live-accent:#6263e7}
.portfolio-header{box-sizing:border-box}
.header-active-pill{background:var(--menu-live-accent)!important}
.portfolio-header .menu-item.active{background:transparent!important}
@media(min-width:851px){
  .portfolio-header{padding-top:25px!important;padding-bottom:25px!important;min-height:110px!important}
  .portfolio-header.menu-open{padding-top:25px!important;padding-bottom:25px!important}
  .portfolio-header .studio-mark,.navigation-island,.profile-switcher{transform:none}
}