/* Page-coloured navigation. The red rule is static; only the header moves. */
:root{--header-surface:#0a0b0c;--header-visible-height:var(--header-height)}
html[data-page=home]{--header-surface:#090a0b}
html[data-page=studio],html[data-page=services],html[data-page=collaborate]{--header-surface:#0e1112}
html[data-page=blue-z]{--header-surface:#080d18}
html[data-header-hidden=true]{--header-visible-height:0px}
.header{height:var(--header-height);gap:28px;background:var(--header-surface);border-bottom:0;backdrop-filter:none;transform:translateY(0);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.header[data-header-hidden=true]{transform:translateY(-100%);pointer-events:none}
.header .logo{flex-shrink:0}
.header nav.studio-navigation{display:flex;align-items:center;gap:38px;margin-left:auto;margin-right:24px;padding:0;background:none;border:0;clip-path:none;box-shadow:none}
.header .studio-navigation a,.header .studio-navigation .nav-contact{position:relative;display:flex;align-items:center;justify-content:center;gap:0;min-height:54px;padding:10px 2px;border:0!important;background:none!important;color:#a2a8ae!important;white-space:nowrap;font-size:16px;line-height:1.4;clip-path:none;transition:none;text-shadow:none}
.header .studio-navigation span{color:inherit;margin:0}
.header .studio-navigation .nav-no,.header .studio-navigation .nav-signal,.header .studio-navigation .nav-bars{display:none}
.header .studio-navigation .nav-label{display:inline-block;transform:none;transition:none}
.header .studio-navigation a:before{content:none}
.header nav.studio-navigation a:after{content:"";display:none!important;position:absolute;left:50%;right:auto;bottom:4px;width:24px;height:2px;background:var(--red);transform:translateX(-50%);box-shadow:none;filter:none;transition:none;pointer-events:none}
.header .studio-navigation a:hover,.header .studio-navigation a:focus-visible,.header .studio-navigation a[aria-current=page]{color:#f4f3ed!important;text-shadow:none}
.header .studio-navigation a[aria-current=page]:after{display:block!important}
.header .studio-navigation a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.header .studio-navigation .nav-bluez{color:#e4ebfb!important}
.header .studio-navigation .nav-bluez-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;font:900 30px/.9 Arial,Helvetica,sans-serif;letter-spacing:-.075em;color:#e4ebfb;filter:none;transition:none}
.header .studio-navigation .nav-bluez-dash{color:#dbe2fa;font-weight:400;margin-inline:.015em}
.header .studio-navigation .nav-bluez-z{display:inline-block;color:#6385ff;transform:skewY(-6deg);text-shadow:1.5px 1.5px 0 #123dba}
.header .language{width:40px;height:40px;flex-shrink:0;border:0;background:none;font-size:14px;color:#a2a8ae}
.header .language:hover,.header .language:focus-visible{color:#f4f3ed}
.header .language:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.header .menu-toggle{display:none;align-items:center;gap:16px;justify-content:space-between;min-height:44px;min-width:84px;padding:10px 0;background:none;border:0;color:#e4e9ee;font-size:14px;clip-path:none}
.menu-glyph{position:relative;display:block;width:20px;height:14px}
.menu-glyph i{position:absolute;left:0;width:20px;height:1px;background:currentColor;transition:transform .2s,top .2s}
.menu-glyph i:first-child{top:3px}.menu-glyph i:last-child{top:11px;width:14px}
.header[data-menu-open=true] .menu-glyph i:first-child{top:7px;transform:rotate(45deg)}
.header[data-menu-open=true] .menu-glyph i:last-child{top:7px;width:20px;transform:rotate(-45deg)}
.header[data-menu-open=true] .menu-toggle{background:none;color:#f4f3ed}
.header .menu-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.filters{top:var(--header-visible-height);transition:top .26s cubic-bezier(.22,1,.36,1)}
.project-guide{top:calc(var(--header-visible-height) + 24px)}
.case-page .case-media{top:calc(var(--header-visible-height) + 20px)}
@media(min-width:1081px) and (max-width:1280px){.header{gap:22px}.header nav.studio-navigation{gap:28px;margin-right:16px}}
@media(max-width:1080px){
  html[data-navigation-open=true]{overflow:hidden}
  .header{gap:14px;position:sticky}.header .logo{margin-right:auto}.header .menu-toggle{display:flex}
  .header nav.studio-navigation{display:none;position:absolute;inset:100% 0 auto;height:calc(100svh - var(--header-height));height:calc(100dvh - var(--header-height));overflow:auto;scrollbar-width:none;overscroll-behavior:contain;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:clamp(28px,5vh,54px) var(--gutter) 70px;border:0;background:var(--header-surface);clip-path:none;box-shadow:none}
  .header nav.studio-navigation::-webkit-scrollbar{display:none}
  .header nav.studio-navigation:before,.header nav.studio-navigation:after{content:none}
  .header[data-menu-open=true] nav.studio-navigation{display:flex;flex-direction:column}
  .header .studio-navigation a,.header .studio-navigation .nav-contact{justify-content:flex-start;flex-shrink:0;gap:24px;min-height:clamp(76px,12vh,112px);padding:20px 5px;border:0!important;font-size:clamp(26px,4.5vw,38px);line-height:1.2;background:none!important}
  .header .studio-navigation .nav-no{display:inline;font:12px/1.4 var(--mono);min-width:22px;color:#737b86;align-self:start;margin-top:5px}
  .header .studio-navigation a[aria-current=page] .nav-no{color:var(--red)}
  .header nav.studio-navigation a:after{left:51px;right:auto;bottom:12px;transform:none;width:24px}
  .header .studio-navigation .nav-bluez-wordmark{font-size:42px}
}
@media(max-width:380px){.header{gap:8px}.header .logo{font-size:21px}.header .menu-toggle{min-width:76px;gap:12px}.header .language{width:32px}.header .studio-navigation a{gap:19px}.header nav.studio-navigation a:after{left:46px}}
@media(prefers-reduced-motion:reduce){.header,.filters,.menu-glyph i{transition:none}}