/* Navigation attaches directly to the viewport edge. */
html{--shared-header-top:0px;--shared-header-height:56px}

html body header#site-navigation{
 position:fixed!important;inset:0 0 auto!important;z-index:101!important;
 display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto!important;align-items:center!important;
 width:min(1000px,calc(100% - 80px))!important;max-width:none!important;min-height:56px!important;height:auto!important;
 margin:0 auto!important;padding:8px 14px!important;gap:22px!important;overflow:visible!important;
 border:0!important;border-radius:0 0 20px 20px!important;background:#1c1b21!important;box-shadow:none!important;color:#fff!important;backdrop-filter:none!important
}
html body header#site-navigation::before,html body header#site-navigation::after{
 content:""!important;display:block!important;position:absolute!important;top:0!important;width:24px!important;height:24px!important;pointer-events:none!important;transform:none!important;filter:none!important;opacity:1!important;border:0!important;box-shadow:none!important;bottom:auto!important
}
html body header#site-navigation::before{left:-24px!important;right:auto!important;background:radial-gradient(circle at 0 100%,transparent 24px,#1c1b21 24.5px)!important}
html body header#site-navigation::after{right:-24px!important;left:auto!important;background:radial-gradient(circle at 100% 100%,transparent 24px,#1c1b21 24.5px)!important}
html body header#site-navigation :is(.site-brand,.account-brand){grid-area:1/1!important;justify-self:start!important;display:block!important;width:130px!important;max-width:100%!important;margin:0!important;padding:0!important;background:none!important;box-shadow:none!important}
html body header#site-navigation :is(.site-brand,.account-brand) img{display:block!important;width:100%!important;height:auto!important;filter:brightness(0) invert(1)!important}
html body header#site-navigation :is(.reference-menu,.account-site-nav){
 grid-area:1/2!important;justify-self:center!important;display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;
 width:max-content!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;gap:0!important;
 background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important
}
html body header#site-navigation :is(.reference-menu,.account-site-nav)::before,
html body header#site-navigation :is(.reference-menu,.account-site-nav)::after,
html body header#site-navigation .nav-glider{display:none!important}
html body header#site-navigation :is(.reference-menu,.account-site-nav) a{
 display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:36px!important;
 margin:0!important;padding:8px 11px!important;border:0!important;border-radius:7px!important;box-shadow:none!important;
 background:transparent!important;color:#a9a9ac!important;font:500 13px/1.2 Manrope,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important
}
html body header#site-navigation :is(.reference-menu,.account-site-nav) a:is([aria-current],:hover,:focus-visible){background:transparent!important;color:#fff!important}
html body header#site-navigation :is(.reference-actions,.account-site-actions){grid-area:1/3!important;display:flex!important;justify-self:end!important;align-items:center!important;gap:6px!important;min-width:0!important}
html body header#site-navigation :is(.reference-actions,.account-site-actions) :is(a,button){
 display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
 padding:0!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#c7c7c9!important;box-shadow:none!important;font:500 12px/1 Manrope,Arial,sans-serif!important
}
html body header#site-navigation .reference-actions .telegram,html body header#site-navigation .account-site-actions a:last-child{flex-basis:40px!important;width:40px!important;min-width:40px!important;background:#fff!important;color:#151515!important;border-radius:8px!important}
html body header#site-navigation :is(a,button):focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
/* Account content remains below its fixed navigation. */
body.cgd-account .account-shell{padding-top:80px!important}
@media(max-width:900px){
 html{--shared-header-height:98px}
 html body header#site-navigation{width:calc(100% - 48px)!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:2px 8px!important;padding:8px 10px!important;border-radius:0 0 16px 16px!important}
 html body header#site-navigation :is(.site-brand,.account-brand){grid-area:1/1!important;width:112px!important}
 html body header#site-navigation :is(.reference-actions,.account-site-actions){grid-area:1/2!important}
 html body header#site-navigation :is(.reference-menu,.account-site-nav){grid-area:2/1/3/-1!important;justify-self:stretch!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 html body header#site-navigation :is(.reference-menu,.account-site-nav)::-webkit-scrollbar{display:none}
 html body header#site-navigation :is(.reference-menu,.account-site-nav) a{min-height:40px!important;padding:8px 10px!important;font-size:13px!important}
 body.cgd-account .account-shell{padding-top:120px!important}
}
/* The hero also starts at the top edge, behind the navigation. */
html body.site-relay-home .stage.reference-stage{margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
/* Showreel window: retain clipping and corner shape without an outline. */
html body.site-relay-home .stage.reference-stage{border:0!important;outline:0!important;box-shadow:none!important}

/* All six mobile links stay on a single visible line. */
@media(max-width:900px){
 html{--shared-header-height:98px}
 html body header#site-navigation :is(.reference-menu,.account-site-nav){display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;gap:2px!important;width:100%!important;max-width:100%!important;overflow:visible!important;padding:4px 0 0!important}
 html body header#site-navigation :is(.reference-menu,.account-site-nav) a{flex:0 1 auto!important;min-width:0!important;min-height:38px!important;padding:8px 0!important;font-size:clamp(9px,2.8vw,13px)!important;letter-spacing:-.02em!important;white-space:nowrap!important;text-align:center!important}
 body.cgd-account .account-shell{padding-top:120px!important}
}
/* At the top the header joins the screen; scrolling reveals a rounded island. */
@media(max-width:900px){
html body header#site-navigation.navigation-detached{
 inset:10px 0 auto!important;border-radius:20px!important;
 box-shadow:0 8px 28px #0003!important
}
html body header#site-navigation.navigation-detached::before,
html body header#site-navigation.navigation-detached::after{opacity:0!important}
}
@media(max-width:900px){
 html body header#site-navigation{--navigation-logo-inset:8.4px}
 body.cgd-account header#site-navigation{--navigation-logo-inset:8.95px}
 html body header#site-navigation :is(.reference-menu,.account-site-nav){box-sizing:border-box!important;padding-left:0!important}
 html body header#site-navigation.navigation-detached{border-radius:16px!important}
}

/* Compensate for transparent pixels in the logo, keeping equal visible side insets. */
@media(max-width:900px){
 html body header#site-navigation :is(.site-brand,.account-brand) img{transform:translateX(calc(-1 * var(--navigation-logo-inset)))!important}
}

/* Smooth mobile shape changes in both scroll directions. */
@media(max-width:900px){
 html body header#site-navigation{transition:top .32s cubic-bezier(.22,1,.36,1),border-radius .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease!important}
 html body header#site-navigation::before,
 html body header#site-navigation::after{transition:opacity .24s ease!important}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
 html body header#site-navigation,
 html body header#site-navigation::before,
 html body header#site-navigation::after{transition:none!important}
}