/* Shared site navigation, homepage, About and portfolio */
.demo-nav .demo-logo img {display:block;width:clamp(61px,4.2vw,75px);max-width:none;height:auto;}
.works-topbar .works-topbar__logo {width:clamp(61px,4.2vw,75px);}
.site-menu-toggle {display:none;}
@media (max-width: 760px) {
  .demo-nav, .works-topbar {min-height:74px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;mix-blend-mode:normal;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  .demo-nav .demo-logo {margin-right:0;transform:none;}
  .demo-nav.demo-nav {padding-right:20px;padding-left:20px;justify-content:space-between;}
  .demo-nav .demo-logo img,.works-topbar .works-topbar__logo {width:65px;}
  .demo-nav .site-menu-toggle, .works-topbar .site-menu-toggle {margin-left:auto;}
  .site-menu-toggle {display:flex;position:relative;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:8px;background:transparent;border:0;cursor:pointer;flex:0 0 44px;}
  .site-menu-toggle span {display:block;width:24px;height:2px;background:#0265de;border-radius:3px;transition:transform .2s,opacity .2s;}
  .site-menu-toggle[aria-expanded="true"] span:first-child {transform:translateY(7px) rotate(45deg);}
  .site-menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0;}
  .site-menu-toggle[aria-expanded="true"] span:last-child {transform:translateY(-7px) rotate(-45deg);}
  .demo-nav .demo-nav__links, .works-topbar .works-topbar__links, .works-topbar > .works-topbar__links {display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 20px 22px;flex-direction:column;align-items:stretch;gap:0;background:rgba(255,255,255,.98);box-shadow:0 14px 22px rgba(0,0,0,.08);max-height:calc(100dvh - 74px);overflow-y:auto;}
  .demo-nav .demo-nav__links.is-open,.works-topbar .works-topbar__links.is-open {display:flex;}
  .demo-nav .demo-nav__links a,.works-topbar .works-topbar__links a {display:block;padding:13px 5px;font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:1.35;color:#0265de;text-decoration:none;white-space:normal;}
  .demo-nav .demo-nav__links a + a,.works-topbar .works-topbar__links a + a {border-top:1px solid #eef0f5;}
}

/* Mobile menu must completely cover the hero, including its animated text.
   Homepage's inline .demo-nav sets mix-blend-mode:multiply, so override it
   at higher specificity and use a fully opaque surface while expanded. */
@media (max-width: 760px) {
  .demo-nav.demo-nav {
    mix-blend-mode: normal;
    isolation: isolate;
    z-index: 1000;
  }
  .demo-nav .demo-nav__links,
  .works-topbar .works-topbar__links {
    background: #ffffff;
    opacity: 1;
    z-index: 10;
  }
  .demo-nav .demo-nav__links.is-open,
  .works-topbar .works-topbar__links.is-open {
    background: #ffffff;
  }
}

/* Compact dropdown attached to the hamburger, not a full-width overlay. */
.site-menu-legal { display:none; }
@media (max-width:760px) {
  .demo-nav.demo-nav, .works-topbar { overflow:visible; }
  .demo-nav .demo-nav__links,
  .works-topbar .works-topbar__links,
  .works-topbar > .works-topbar__links {
    box-sizing:border-box;
    top:calc(100% - 4px);
    left:auto;
    right:20px;
    width:min(240px, calc(100vw - 40px));
    max-height:calc(100dvh - 90px);
    padding:8px 14px 12px;
    gap:0;
    background:#fff;
    border:1px solid #e9edf4;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(10,34,70,.16);
    overflow-y:auto;
    align-items:stretch;
    z-index:1010;
  }
  .demo-nav .demo-nav__links a,
  .works-topbar .works-topbar__links a {
    padding:11px 4px; font-size:13px; line-height:1.35;
  }
  .demo-nav .demo-nav__links .site-menu-legal,
  .works-topbar .works-topbar__links .site-menu-legal {
    display:flex; flex-direction:column; gap:0;
    margin-top:7px; padding-top:7px;
    border-top:1px solid #e5eaf1;
  }
  .demo-nav .demo-nav__links .site-menu-legal a,
  .works-topbar .works-topbar__links .site-menu-legal a {
    font-size:10px; font-weight:400; color:#6a7282;
    padding:7px 4px; border-top:0;
  }
  .adtrak-legal-links { display:none !important; }
}


/* Shared canonical navigation metrics, used across all page variants. */
.demo-nav, .works-topbar {box-sizing:border-box; position:fixed; top:0;left:0;right:0;z-index:1000;min-height:74px;height:74px;display:flex;align-items:center;justify-content:space-between;padding:10px 5vw;margin:0;background:rgba(255,255,255,.97);mix-blend-mode:normal;backdrop-filter:blur(16px);}
.demo-nav .demo-logo, .works-topbar .works-topbar__logo {display:flex;align-items:center;flex:none;margin:0;padding:0;transform:none;}
.demo-nav .demo-logo img, .works-topbar .works-topbar__logo img {display:block;width:65px;height:auto;max-height:62px;object-fit:contain;}
.demo-nav .demo-nav__links, .works-topbar .works-topbar__links {display:flex;align-items:center;gap:clamp(15px,1.6vw,26px);margin-left:auto;}
.demo-nav .demo-nav__links > a, .works-topbar .works-topbar__links > a {font-family:Montserrat,Arial,sans-serif;font-size:13px;font-weight:500;line-height:1.35;color:#0265de;text-decoration:none;white-space:nowrap;}
.demo-nav .site-client-login-icon, .works-topbar .site-client-login-icon {width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center;}
@media(max-width:760px){
.demo-nav,.works-topbar {height:66px;min-height:66px;padding:8px 20px;overflow:visible;}
.demo-nav .demo-logo img,.works-topbar .works-topbar__logo img {width:65px;}
.demo-nav .site-menu-toggle,.works-topbar .site-menu-toggle {display:flex!important;position:relative;z-index:1012;margin-left:auto;}
.demo-nav .demo-nav__links,.works-topbar .works-topbar__links {display:none!important;position:absolute;top:calc(100% - 4px);right:20px;left:auto;width:min(240px,calc(100vw - 40px));padding:8px 14px 12px;background:#fff;border:1px solid #e9edf4;border-radius:12px;box-shadow:0 12px 30px rgba(10,34,70,.16);flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 80px);overflow-y:auto;}
.demo-nav .demo-nav__links.is-open,.works-topbar .works-topbar__links.is-open {display:flex!important;}
.demo-nav .demo-nav__links > a,.works-topbar .works-topbar__links > a {font-size:13px;padding:11px 4px;}
}