/* The navigation has its own snapshot, separate from the page dissolve. */
@view-transition{navigation:auto}
html[data-transition-mode=native]::after{display:none!important}
html[data-transition-mode=native] .studio-header:not(.studio-header-transfer){view-transition-name:studio-navigation}
::view-transition-group(root){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-new(root){animation:studio-content-in .46s cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal}
::view-transition-group(studio-navigation){z-index:10;animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(studio-navigation){animation:studio-content-out .24s ease both;mix-blend-mode:normal}
::view-transition-new(studio-navigation){animation:studio-content-in .24s ease both;mix-blend-mode:normal}
@keyframes studio-content-out{to{opacity:0}}
@keyframes studio-content-in{from{opacity:0}}
/* Scripted fallback leaves its carried header above the content veil. */
html[data-transition-mode=fallback]::after{z-index:90}
html[data-transition-mode=fallback].studio-entering main,html[data-transition-mode=fallback].studio-entering.studio-entering-ready main{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* The real menu remains usable even during the short dissolve. */
::view-transition{pointer-events:none}
::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}

/* One viewport-anchored box across every page and scroll state. */
html body .studio-header.header:not(.studio-header-transfer){position:fixed!important;inset:22px auto auto calc(50vw / var(--studio-scale,1))!important;transform:translateX(-50%)!important;margin:0!important;width:calc(88vw / var(--studio-scale,1))!important;max-width:1440px!important;height:70px!important;min-height:70px!important;padding:13px 20px!important;border-width:0!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:14px!important;transition-property:background,border-color,box-shadow,opacity,visibility!important}
html body .studio-header .wordmark{font-size:29px!important;line-height:1.2!important;margin:0 auto 0 0!important;padding:0 8px 0 0!important;flex-shrink:0}
html body .studio-header nav{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;width:auto!important;order:0!important;margin:0!important;padding:0!important;gap:6px!important}
html body .studio-header nav>a,html body .studio-header .learn-trigger{box-sizing:border-box!important;height:44px!important;min-height:44px!important;padding:0 10px!important;border-width:0!important;font-family:StudioNavigation,Arial,sans-serif!important;font-weight:450!important;font-size:13px!important;line-height:1.2!important;letter-spacing:.015em!important;transition-property:background,color,box-shadow!important}
@media(min-width:1101px){html body .studio-header nav>a{font-size:14px!important;padding-inline:14px!important}}
@media(max-width:760px){
 html body .studio-header.header:not(.studio-header-transfer){top:12px!important;width:calc(100vw - 24px)!important;max-width:none!important;height:60px!important;min-height:60px!important;padding:8px 14px!important;gap:8px!important}
 html body .studio-header .wordmark{font-size:25px!important;padding-right:0!important}
 html body .studio-header nav{gap:0!important}
 html body .studio-header nav>a,html body .studio-header .learn-trigger{font-size:12px!important;padding-inline:8px!important;letter-spacing:0!important}
}
@media(max-width:360px){html body .studio-header.header:not(.studio-header-transfer){width:calc(100vw - 16px)!important;padding-inline:9px!important;gap:6px!important}html body .studio-header nav>a,html body .studio-header .learn-trigger{padding-inline:6px!important}}
/* The header stays fixed while its light/dark ink blends with the page. */
::view-transition-group(studio-navigation),::view-transition-image-pair(studio-navigation){animation:none!important}
::view-transition-old(studio-navigation){animation:none!important;opacity:1}
::view-transition-new(studio-navigation){animation:studio-content-in .46s cubic-bezier(.22,1,.36,1) both!important}
@media(prefers-reduced-motion:reduce){::view-transition-new(studio-navigation){animation:none!important}}

/* White navigation over the desktop scene; the compact layout stays on cream. */
@media(min-width:1101px){
 body.marketplace-home .scene-hero:after{content:'';position:absolute;inset:0 0 auto auto;width:55%;height:190px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(15,20,23,.70),rgba(15,20,23,.40) 48%,transparent);}
 body.marketplace-home .scene-hero:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.12' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(15,20,23,.70),rgba(15,20,23,.40) 48%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%),linear-gradient(#000 55%,transparent);mask-composite:intersect}
 html body .studio-header.over-home-hero nav>a,html body .studio-header.over-home-hero .learn-trigger{color:#fff!important;text-shadow:0 1px 8px #0003}
 html body .studio-header.over-home-hero .wordmark{color:#29262e!important;text-shadow:none}
 html body .studio-header.over-home-hero{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* Leave room for the viewport-fixed navigation above case introductions. */
html body .cases-main{padding-top:140px!important}
html body.study-page .study-intro{padding-top:140px!important}
@media(max-width:760px){html body .cases-main,html body.study-page .study-intro{padding-top:108px!important}}

/* Keep every page's menu on Home's content edges, including layout zoom. */
@media(min-width:1000px){
 html body .studio-header.header:not(.studio-header-transfer){width:calc(100vw / var(--studio-scale,1) - 2 * clamp(80px,8vw,180px) + 40px)!important;max-width:1240px!important}
}
@media(min-width:1601px){
 html body .studio-header.header:not(.studio-header-transfer){width:calc(100vw / var(--studio-scale,1) - 216px)!important}
}

/* Unified 2026-10-27 arrival. One veil, no nested/staggered entrances. */
@view-transition{navigation:none}
html[data-transition-mode=fallback]::after{content:'';position:fixed;inset:0;z-index:90;background:#f8f8f3;opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.4,0,.6,1)}
html[data-transition-mode=fallback].studio-leaving::after,html[data-transition-mode=fallback].studio-entering::after{opacity:1}
html[data-transition-mode=fallback].studio-entering:not(.studio-entering-ready)::after{transition:none}
html[data-transition-mode=fallback].studio-entering.studio-entering-ready::after{opacity:0;transition:opacity .64s cubic-bezier(.25,.1,.25,1)}
html[data-transition-mode=fallback].studio-entering:not(.studio-entering-ready) .studio-header:not(.studio-header-transfer){opacity:0!important}
html.studio-initial .studio-header:not(.studio-header-transfer){opacity:0;transition:opacity .64s cubic-bezier(.25,.1,.25,1)!important}
html.studio-initial.studio-entering-ready .studio-header:not(.studio-header-transfer){opacity:1}
html[data-transition-mode=fallback] .reveal-pending{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){html[data-transition-mode=fallback]::after{display:none!important}html.studio-initial .studio-header:not(.studio-header-transfer){opacity:1!important;transition:none!important}}

/* Animate a dedicated layer after bootstrap so root/Lenis styles cannot cancel the dissolve. */
#studio-transition-veil{position:fixed;inset:0;z-index:90;background:#f8f8f3;pointer-events:none}
html[data-transition-veil=element]::after{display:none!important}
@media(prefers-reduced-motion:reduce){#studio-transition-veil{display:none!important}}