/* Shared public-site navigation; reading surfaces retain their page colors. */
.studio-page .nav {
  background: #101722;
  border-bottom-color: #ffffff21;
  color: #f7f6f2;
}
.studio-page .nav.scrolled {
  border-bottom-color: #ffffff2e;
  box-shadow: 0 8px 24px #00000014;
}
.studio-page .nav-logo { position: relative; z-index: 100; }
.studio-page .nav-links { gap: clamp(24px, 2.6vw, 40px); }
.studio-page .nav-links > a,
.studio-page .nav-group > summary {
  color: #e2e5ec;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.studio-page .nav-links > a:hover,
.studio-page .nav-group > summary:hover,
.studio-page .nav-group[open] > summary { color: #ffffff; }
.studio-page .nav-links > a[aria-current],
.studio-page .nav-links > a.active,
.studio-page .nav-group.is-current > summary {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #9ab0ff;
  text-underline-offset: 7px;
}
.studio-page .nav .nav-cta {
  border-color: #ffffff55;
  color: #f7f6f2 !important;
  border-radius: 6px;
}
.studio-page .nav .nav-cta:hover {
  background: #ffffff0d !important;
  border-color: #ffffffa3;
  color: #ffffff !important;
}
.studio-page .nav-toggle span { background: #f7f6f2; }
.studio-page .nav a:focus-visible,
.studio-page .nav button:focus-visible,
.studio-page .nav-group > summary:focus-visible {
  outline: 2px solid #9ab0ff;
  outline-offset: 5px;
  border-radius: 3px;
}
.studio-page .nav-group { position: relative; flex: none; }
.studio-page .nav-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
.studio-page .nav-group > summary::-webkit-details-marker { display: none; }
.studio-page .nav-chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.studio-page .nav-group[open] .nav-chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}
.studio-page .nav-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  min-width: 232px;
  padding: 9px;
  background: #182230;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  box-shadow: 0 16px 40px #0000003d;
}
.studio-page .nav .nav-panel a {
  display: block;
  padding: 12px;
  border-radius: 3px;
  color: #e2e5ec;
  font-size: 14px;
  line-height: 1.4;
}
.studio-page .nav .nav-panel a:hover,
.studio-page .nav .nav-panel a:focus-visible,
.studio-page .nav .nav-panel a[aria-current] {
  background: #ffffff0d;
  color: #ffffff;
}
.studio-page .nav-panel a span { margin-left: 8px; }

@media (max-width: 1100px) {
  .studio-page .nav-links.open {
    gap: 12px;
    padding: 100px 6vw 40px;
    background: #101722;
  }
  .studio-page .nav-links.open > a,
  .studio-page .nav-group > summary {
    color: #f7f6f2;
    font-size: 26px;
    min-height: 44px;
    font-weight: 400;
  }
  .studio-page .nav-group { width: 100%; }
  .studio-page .nav-group > summary { justify-content: space-between; }
  .studio-page .nav-chevron { width: 9px; height: 9px; margin-right: 5px; }
  .studio-page .nav-panel {
    position: static;
    min-width: 0;
    margin: 8px 0 8px 2px;
    padding: 2px 0 2px 14px;
    border: 0;
    border-left: 1px solid #ffffff38;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .studio-page .nav .nav-panel a {
    min-height: 44px;
    padding: 10px;
    font-size: 18px;
  }
  .studio-page .nav-links.open .nav-cta { margin-top: 16px; }
}