/* Main working Demo A only: retain the approved mobile header below 768px. */
@media (min-width: 768px) {
 .demo-a .overlay-nav::before {
  inset:0 0 -70px;
  background:linear-gradient(180deg,rgba(10,29,22,.45) 0%,rgba(10,29,22,.24) 48%,transparent 100%);
  pointer-events:none;
 }
}
@media (min-width: 1100px) {
 .demo-a .site-nav nav {gap:30px}
 .demo-a .site-nav nav>a {
  font-size:14px;
  font-weight:600;
  color:#fff;
  letter-spacing:.015em;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
 }
 .demo-a .site-nav nav>a:hover,
 .demo-a .site-nav nav>a:active,
 .demo-a .site-nav nav>a[aria-current] {text-decoration:underline}
 .demo-a .site-nav nav>a:focus-visible {
  outline:2px solid #fff;
  outline-offset:5px;
  box-shadow:0 0 0 4px #243b31;
  text-decoration:underline;
 }
 .demo-a .site-nav .nav-cta {border-color:rgba(255,255,255,.9)}
 .demo-a .site-nav .nav-cta:hover,
 .demo-a .site-nav .nav-cta:active {background:rgba(255,255,255,.1)}
}