/* Silver Ice navigation and a continuous sky-to-white page background. */
.hero .city-menu-hub .navigation-strip.city-menu {
  height:78px;
  padding:8px clamp(12px,3vw,52px);
  gap:16px;
  border:0;
  border-bottom:1px solid rgba(109,173,208,.65);
  background:linear-gradient(115deg,rgba(248,253,255,.97),rgba(214,235,247,.94) 52%,rgba(241,250,255,.97));
  box-shadow:inset 0 1px #fff,inset 0 -1px rgba(255,255,255,.8),0 5px 24px rgba(20,65,99,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.city-menu .city-menu-links {
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2vw,30px);
  height:100%;
}
.city-menu .city-menu-links > a,
.city-menu .nav-feature > summary {
  flex:1 1 0;
  gap:9px;
  max-width:196px;
  height:48px;
  min-height:48px;
  padding:12px 18px;
  border:1px solid transparent;
  border-radius:10px;
  color:#294b66;
  font:600 clamp(12px,1.2vw,15px)/1.2 'Segoe UI',Arial,sans-serif;
  letter-spacing:.025em;
  text-shadow:0 1px rgba(255,255,255,.7);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.city-menu .city-menu-links .fa { color:#3f84af;font-size:1em; }
.city-menu .city-menu-links > a:hover,
.city-menu .city-menu-links > a.active,
.city-menu .nav-feature > summary:hover,
.city-menu .nav-feature[open] > summary,
body[data-route="information"] .city-menu .nav-feature > summary {
  color:#174c72;
  border-color:#a5cce2;
  background:linear-gradient(180deg,#ffffffed,#e5f3fced);
  box-shadow:inset 0 1px #fff,0 2px 7px #386c8710;
  text-shadow:none;
}
.city-menu .city-menu-links > a.active::after {
  content:'';
  position:absolute;
  left:calc(50% - 12px);
  bottom:4px;
  width:24px;
  height:2px;
  border-radius:2px;
  background:#4c9cc6;
}
.city-menu .city-menu-links > a[href="#downloads"] {
  border-color:#6b9fbd;
  color:#fff;
  background:linear-gradient(135deg,#367fa7,#245b80);
  box-shadow:inset 0 1px #acd9ef80,0 3px 9px #205b7c1f;
  text-shadow:0 1px #133e5d55;
}
.city-menu .city-menu-links > a[href="#downloads"]:hover,
.city-menu .city-menu-links > a[href="#downloads"].active {
  border-color:#487c9b;
  background:linear-gradient(135deg,#286f99,#1c4e72);
}
.city-menu .city-menu-links > a[href="#downloads"] .fa { color:#d9f2ff; }
.city-menu .city-menu-links > a[href="#downloads"].active::after { background:#c5eeff; }
.hero .city-menu .city-menu-links > .nav-feature {
  flex:1 1 0;
  align-self:center;
  max-width:196px;
  height:48px;
}
.city-menu .nav-feature > summary { width:100%; }
.city-menu .nav-feature-chevron { font-size:9px; }
.city-menu .nav-feature-menu {
  top:calc(100% + 12px);
  left:auto;
  right:0;
  min-width:190px;
  padding:7px;
  border:1px solid #a8cbdf;
  border-radius:12px;
  background:#f5fbfffa;
  box-shadow:inset 0 1px #fff,0 12px 28px #123e5b29;
  backdrop-filter:blur(18px);
}
.city-menu .nav-feature-menu > a {
  min-height:44px;
  padding:12px;
  border-radius:7px;
  color:#294b66;
  font-size:13px;
}
.city-menu .nav-feature-menu > a:hover,
.city-menu .nav-feature-menu > a.active { color:#164d72;background:#dceef9; }
.city-menu .navigation-account {
  flex:0 0 84px;
  width:84px;
  height:84px;
  margin:0 0 -9px;
  padding:14px 6px;
  font-size:11px;
  filter:drop-shadow(0 2px 5px #1e567549);
}
.city-menu .navigation-account:hover,
.city-menu .navigation-account.active { filter:brightness(1.13) drop-shadow(0 0 5px #67b9e4); }
.city-menu :is(a,button,summary):focus-visible { outline:2px solid #166693;outline-offset:3px; }
.skip-link { z-index:1100; }

/* The image already ends in this pale blue. Carry that color behind the full
   content height, then fade both image and surface together into white. */
body:not([data-route="account"]) .wrap > .hero + .main {
  background-color:#e3f1fa;
  background-image:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,.42) 57%,#fff 100%),url('../assets/grand-mu-menu-continuation-aligned-v5.jpg');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
  border-radius:0;
  padding-bottom:40px;
}
body[data-route="home"] .wrap #main-content > .home-hub {
  background:linear-gradient(180deg,rgba(239,248,255,.5),rgba(247,252,255,.45) 55%,rgba(255,255,255,.35));
  background-clip:padding-box;
}
body:not([data-route="account"]) .wrap { background:#fff; }
body:not([data-route="account"]) #main-content { scroll-margin-top:94px; }

@media(max-width:900px) {
  .hero .city-menu-hub .navigation-strip.city-menu { gap:8px;padding-inline:12px; }
  .city-menu .city-menu-links { gap:6px; }
  .city-menu .city-menu-links > a,
  .city-menu .nav-feature > summary { padding-inline:10px;gap:6px; }
}
@media(max-width:720px) {
  .hero .city-menu-hub .navigation-strip.city-menu { height:72px;padding:7px 6px;gap:3px; }
  .city-menu .city-menu-links { gap:3px; }
  .city-menu .city-menu-links > a,
  .city-menu .nav-feature > summary {
    flex-direction:column;
    justify-content:center;
    gap:5px;
    height:52px;
    min-height:52px;
    padding:5px 2px;
    border-radius:8px;
    font-size:11px;
    letter-spacing:0;
  }
  .hero .city-menu .city-menu-links > .nav-feature { height:52px; }
  .city-menu .city-menu-links > a > i,
  .city-menu .nav-feature > summary > i { display:block;font-size:15px; }
  .city-menu .nav-feature > summary > .nav-feature-chevron { display:none; }
  .city-menu .city-menu-links > a.active::after { bottom:2px;width:16px;left:calc(50% - 8px); }
  .city-menu .navigation-account { flex-basis:66px;width:66px;height:66px;margin:0;padding:9px 3px;font-size:9px; }
  .city-menu .nav-feature-menu { top:calc(100% + 10px);min-width:170px; }
  body:not([data-route="account"]) .wrap > .hero + .main { background-size:100% 100%,113.5% auto;padding-bottom:28px; }
  body:not([data-route="account"]) #main-content { scroll-margin-top:78px; }
}
@media(max-width:380px) {
  .hero .city-menu-hub .navigation-strip.city-menu { padding-inline:3px;gap:1px; }
  .city-menu .city-menu-links { gap:1px; }
  .city-menu .city-menu-links > a,
  .city-menu .nav-feature > summary { font-size:10px; }
  .city-menu .navigation-account { flex-basis:59px;width:59px;height:59px;font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .city-menu .city-menu-links > a,
  .city-menu .nav-feature > summary { transition:none; }
}