/* ============================================================================
   SAJIDMK — Adaptive desktop Liquid Glass Navbar (13 Nov 2026)
   Added AFTER previous styles; applies to existing #topNav only.
   Top of page: preserves full size, links, icons, glass and CTA.
   Scroll >100px: 60%-width text-only 56px-high capsule, always visible.
   No visual/functional changes to mobile navbar/drawer or right display dock.
   ============================================================================ */
.nav-brand-short {display:none;}

@media (min-width:1180px) {
  /* Keep hero position independent from nav compaction: no page reflow on scroll. */
   :is(html,html[data-site-theme]) body main > .hero.vision-landing {
    margin-top:calc(35px + var(--adaptive-expanded-nav-height, 106px))!important;
  }

  :is(html,html[data-site-theme]) body #topNav {
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    z-index:1000!important;
    visibility:visible!important;
    /* Animated physical capsule, not a transform scale that would shrink text. */
    transition:width .46s cubic-bezier(.2,.82,.22,1),
      height .46s cubic-bezier(.2,.82,.22,1),
      min-height .46s cubic-bezier(.2,.82,.22,1),
      padding .46s cubic-bezier(.2,.82,.22,1),
      top .46s cubic-bezier(.2,.82,.22,1),
      gap .46s cubic-bezier(.2,.82,.22,1),
      box-shadow .35s ease!important;
  }
  /* Only once JS has measured the original at-rest bar: animate from a
     numeric size to a numeric size, not from auto to 56px. */
  :is(html,html[data-site-theme]) body #topNav.nav-adaptive-ready {
    height:var(--adaptive-expanded-nav-height,106px);
    box-sizing:border-box;
  }
  :is(html,html[data-site-theme]) body #topNav.nav--compact.nav-adaptive-ready {
    width:min(672px, calc(100% - 28px))!important; /* 60% of 1120px */
    height:56px!important;
    min-height:56px!important;
    padding:5px 11px!important;
    top:calc(10px + env(safe-area-inset-top,0px))!important;
    gap:5px!important;
    border-radius:999px!important;
    box-sizing:border-box!important;
    opacity:1!important;
    visibility:visible!important;
  }
  /* Full brand stays intact at top. The shortened brand prevents a squeezed
     six-link row and is readable without hovering. */
  :is(html,html[data-site-theme]) body #topNav.nav--compact .nav-brand {
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    gap:6px!important;
    padding:0 4px!important;
    font-size:clamp(11px,calc(12px * var(--site-font-scale,1)),14px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #topNav.nav--compact .nav-brand-name {display:none!important;}
  #topNav.nav--compact .nav-brand-short {display:inline!important;letter-spacing:.01em;}
  #topNav.nav--compact .nav-brand .ping {width:6px;height:6px;}

  :is(html,html[data-site-theme]) body #topNav.nav--compact .nav-links {
    flex:1 1 auto!important;
    min-width:0!important;
    height:44px!important;
    align-self:center!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:1px!important;
    margin:0!important;
    padding:0!important;
  }
  :is(html,html[data-site-theme]) body #topNav.nav--compact .nav-links > a.nav-link,
  :is(html,html[data-site-theme]) body #topNav.nav--compact .nav-more > summary.nav-link {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    flex:1 1 0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 3px!important;
    margin:0!important;
    gap:0!important;
    line-height:1.1!important;
    font-size:clamp(10px,calc(11px * var(--site-font-scale,1)),14px)!important;
    font-weight:600!important;
    overflow:visible!important;
    border-radius:999px!important;
  }
  :is(html,html[data-site-theme]) body #topNav.nav--compact .nav-more {
    display:flex!important;
    flex:1 1 0!important;
    align-items:center!important;
    height:44px!important;
    min-width:0!important;
  }
  /* Hide icons only in scrolled desktop mode; labels and focus targets stay. */
  #topNav.nav--compact .nav-links .optic-nav-icon {display:none!important;}
  #topNav.nav--compact .nav-links .optic-nav-label {
    display:inline!important;
    font-size:inherit!important;
    white-space:nowrap!important;
    transform:none!important;
  }
  #topNav .nav-more[open] > summary .optic-nav-label {transform:none!important;}
  :is(html,html[data-site-theme]) body #topNav.nav--compact > .nav-cta {
    flex:0 0 auto!important;
    min-width:76px!important;
    min-height:42px!important;
    height:42px!important;
    padding:7px 11px!important;
    font-size:clamp(10px,calc(11px * var(--site-font-scale,1)),13px)!important;
    line-height:1.15!important;
  }
  /* Keep the original moving dark active lens, but track the shallower bar. */
  #topNav.nav--compact .optic-active-lens {
    border-color:rgba(244,249,255,.14)!important;
  }
  /* Nav stays readable even with opacity=0; never make content opaque. */
  #topNav.nav--compact .nav-brand,
  #topNav.nav--compact .optic-nav-label,
  #topNav.nav--compact .nav-cta {text-shadow:0 1px 5px rgba(0,0,0,.85)!important;}
}

/* The mobile (<1180px) header and its drawer remain exactly as before. */
@media (max-width:1179px) {
  #topNav .nav-brand-short {display:none!important;}
  #topNav .nav-brand-name {display:inline!important;}
}

/* Discrete Back to Top: above the existing bottom-right "Quick find" launcher,
   and far below the right-edge display controls. */
html body .nav-back-to-top {
  position:fixed;
  right:max(16px,env(safe-area-inset-right,0px));
  bottom:72px;
  width:45px;
  height:45px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(239,248,255,.68);
  border-top-color:rgba(255,255,255,.92);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(4,10,15,.53));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.37),0 12px 30px -16px rgba(0,0,0,.85);
  color:#fff;
  z-index:940;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .25s ease,visibility .25s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .2s ease;
}
html body .nav-back-to-top.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
html body .nav-back-to-top:is(:hover,:focus-visible) {
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 21px rgba(223,241,255,.3),inset 0 1px rgba(255,255,255,.6);
}
html body .nav-back-to-top:focus-visible {outline:2px solid white;outline-offset:4px;}
@media (max-width:1179px), print {html body .nav-back-to-top{display:none!important;}}
@media (prefers-reduced-motion:reduce) {
  :is(html,html[data-site-theme]) body #topNav.nav-adaptive-ready,
  html body .nav-back-to-top {transition:none!important;}
}
html[data-sg-motion="off"] body #topNav.nav-adaptive-ready,
html[data-sg-motion="off"] body .nav-back-to-top {transition:none!important;}