/* Shared dark glass navigation. Keep the established site geometry. */
:root{--ag-pill-radius:12px;--ag-header-height:75px}
@media(max-width:1180px){:root{--ag-header-height:68px}}
@media(max-width:640px){:root{--ag-pill-radius:10px;--ag-header-height:64px}}
html:root{scrollbar-gutter:stable;scroll-padding-top:calc(var(--ag-header-height) + 20px)}
body:not([data-page="home"]){padding-top:var(--ag-header-height)}
.site-header{
  position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:var(--ag-header-height);max-width:none;width:100%;gap:32px;
  padding-inline:max(var(--gutter),calc((100% - 1552px)/2));
}
html body[data-page] header.site-header.ag-dark-header{
  isolation:isolate;z-index:1000;color:#fff;background:transparent!important;box-shadow:none;
  font:400 16px/1.55 var(--sans);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
}
/* Apply blur to the named header layer itself, outside its backdrop root. */
html body[data-page] header.site-header.ag-dark-header::before{
  content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgb(22 22 24 / .8);border-bottom:1px solid rgb(255 255 255 / .08);
  opacity:1;transition:none;box-shadow:none;
}
html body[data-page] header.site-header.ag-dark-header::after{content:none;display:none}
.skip-link{z-index:5001}
.site-header .brand{
  display:flex;align-items:center;position:relative;isolation:isolate;box-sizing:content-box;
  width:clamp(184px,20vw,288px);min-width:0;flex:0 0 auto;gap:0;padding:7px 18px;
}
html body[data-page] header.site-header.ag-dark-header .brand::before{content:none;display:none}
.site-header .brand img{position:relative;display:block;width:100%;height:auto;object-fit:contain}
html body[data-page] header.site-header.ag-dark-header .brand .brand-logo-black{display:none}
html body[data-page] header.site-header.ag-dark-header .brand .brand-logo-white{
  display:block;filter:none!important;opacity:1;transition:none;
}
.site-header .desktop-nav{
  display:flex;align-items:center;gap:clamp(18px,2vw,32px);margin-left:auto;flex-shrink:0;
  min-height:44px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;
}
html body[data-page] header.site-header.ag-dark-header .desktop-nav>a{
  display:flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;
  font:400 14px/1.55 var(--sans);min-width:0;flex:0 0 var(--ag-nav-link-width,auto);
  color:#fff;text-shadow:none;background:transparent;border:0;border-radius:0;padding:0;
  box-shadow:none;transform:none;translate:none;
}
.site-header .desktop-nav>a::after{display:block;bottom:7px;background:currentColor}
.site-header .desktop-nav>a:is([href$="index.html"],[href="/"],[href$="/index"],[href$="/index/"]){--ag-nav-link-width:2.65em}
.site-header .desktop-nav>a:is([href$="services.html"],[href$="/services"],[href$="/services/"]){--ag-nav-link-width:4em}
.site-header .desktop-nav>a:is([href$="demos.html"],[href$="/demos"],[href$="/demos/"]){--ag-nav-link-width:2.65em}
.site-header .desktop-nav>a:is([href$="work.html"],[href$="/work"],[href$="/work/"]){--ag-nav-link-width:3.5em}
.site-header .desktop-nav>a:is([href$="about-us.html"],[href$="/about-us"],[href$="/about-us/"]){--ag-nav-link-width:2.65em}
.site-header .desktop-nav>a:is([href$="news.html"],[href$="/news"],[href$="/news/"]){--ag-nav-link-width:2.4em}
.site-header .desktop-nav>a:is([href$="contact-us.html"],[href$="/contact-us"],[href$="/contact-us/"]){--ag-nav-link-width:3.65em}
.site-header .header-actions{display:none;align-items:center;flex-shrink:0;gap:16px}
.site-header .menu-toggle{display:none}
html body[data-page] header.site-header.ag-dark-header :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:5px}
.site-header .mobile-nav[hidden]{display:none!important}
@media(max-width:1180px){
  html body[data-page] header.site-header.ag-dark-header{
    height:calc(var(--ag-header-height) + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);gap:20px;z-index:5000;
  }
  .site-header .brand{width:clamp(176px,28vw,240px)}
  .site-header .desktop-nav{display:none}
  .site-header .header-actions{display:flex}
  html body[data-page] header.site-header.ag-dark-header .menu-toggle{
    position:relative;z-index:2;width:46px;height:46px;padding:10px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
    color:#fff;background:transparent;border:0;border-radius:0;box-shadow:none;touch-action:manipulation;
  }
  .site-header .menu-toggle span{background:currentColor;box-shadow:none}
  html body[data-page] header.site-header.ag-dark-header .mobile-nav{
    position:fixed;inset:0;height:100dvh;max-height:none;z-index:1;
    padding:calc(var(--ag-header-height) + env(safe-area-inset-top,0px) + 24px) max(var(--gutter),env(safe-area-inset-right,0px)) max(36px,env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));
    display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(18px,3.2vh,30px);
    overflow-y:auto;overscroll-behavior:contain;color:#fff;background:rgb(22 22 24 / .95);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
    border:0;box-shadow:none;touch-action:pan-y pinch-zoom;
  }
  html body[data-page] header.site-header.ag-dark-header .mobile-nav>a{
    display:flex;align-items:center;min-height:48px;flex-shrink:0;padding:0;
    font:400 clamp(34px,8vw,54px)/1.02 var(--sans);color:#fff;text-shadow:none;
    background:transparent;border:0;border-radius:0;box-shadow:none;
  }
  html body[data-page] header.site-header.ag-dark-header .mobile-nav .mobile-email{
    font:500 14px/1.4 var(--sans);margin-top:auto;padding-top:20px;min-height:44px;
  }
  body.mobile-menu-open{overflow:hidden}
  /* The open drawer owns the blur and viewport; links restore the header before navigation. */
  html body.mobile-menu-open[data-page] header.site-header.ag-dark-header{
    -webkit-backdrop-filter:none;backdrop-filter:none;view-transition-name:none;
  }
  body.mobile-menu-open .site-header .brand{z-index:2}
}
@media(max-width:640px){
  html body[data-page] header.site-header.ag-dark-header{gap:16px}
  .site-header .brand{width:min(200px,calc(80vw - 76.8px));padding:10px}
  .site-header .header-actions{gap:0}
  html body[data-page] header.site-header.ag-dark-header .menu-toggle{width:42px;height:44px;padding:8px}
  html body[data-page] header.site-header.ag-dark-header .mobile-nav{padding-top:calc(var(--ag-header-height) + env(safe-area-inset-top,0px) + 18px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body[data-page] header.site-header.ag-dark-header::before{background:rgb(22 22 24 / .97)}
  html body[data-page] header.site-header.ag-dark-header .mobile-nav{background:#161618}
}
@media print{.site-header{display:none}body:not([data-page="home"]){padding-top:0}}

/* Opening media starts below the fixed navigation; scrolling keeps its existing motion. */
html body[data-page]:is([data-page="home"],[data-page="demos"],[data-page="work"],[data-page="services"]){
  --ag-hero-offset:calc(var(--ag-header-height) + env(safe-area-inset-top,0px));
  padding-top:var(--ag-hero-offset);
  background-image:linear-gradient(to bottom,#171719 0 var(--ag-hero-offset),transparent var(--ag-hero-offset));
  background-repeat:no-repeat;
}
html body[data-page] .home-cinema,
html body[data-page] .work-intro.work-cinema{height:calc(100svh - var(--ag-hero-offset))}
html body[data-page] .home-cinema.is-scroll-ready{height:calc(100svh - var(--ag-hero-offset) + var(--cinema-travel,70svh))}
html body[data-page] .work-intro.work-cinema.is-scroll-ready{height:calc(100svh - var(--ag-hero-offset) + var(--work-cinema-travel,70svh))}
html body[data-page] :is(.home-cinema-stage,.work-cinema-stage){height:calc(100svh - var(--ag-hero-offset))}
@media(prefers-reduced-motion:reduce){
  html body[data-page] .home-cinema.is-scroll-ready,
  html body[data-page] .work-intro.work-cinema.is-scroll-ready{height:calc(100svh - var(--ag-hero-offset))}
}
@media print{
  html body[data-page]:is([data-page="home"],[data-page="demos"],[data-page="work"],[data-page="services"]){padding-top:0;background-image:none}
}


/* Every page starts black and uses the same dark glass when scrolling. */
html body[data-page] header.site-header.ag-dark-header::before{background:rgb(22 22 24 / var(--ag-nav-opacity,1));transition:background-color 240ms ease}
html body[data-page] header.site-header.ag-dark-header.is-scrolled{--ag-nav-opacity:.8}
@media(prefers-reduced-motion:reduce){html body[data-page] header.site-header.ag-dark-header::before{transition:none}}

/* Laptop density keeps the same fixed glass header with smaller content. */
@media screen and (min-width:901px) and (max-width:1600px){
 :root{--ag-header-height:60px}
 html body[data-page] header.site-header.ag-dark-header{padding-inline:max(var(--gutter),calc((100% - 1242px)/2));gap:26px}
 html body[data-page] header.site-header.ag-dark-header .brand{width:clamp(147px,16vw,230px);padding:6px 14px}
 html body[data-page] header.site-header.ag-dark-header .desktop-nav{gap:clamp(15px,1.6vw,26px)}
 html body[data-page] header.site-header.ag-dark-header .desktop-nav>a{font-size:12px}
}