.sub-nav { position: sticky; top: 0; z-index: 90; background: rgba(19,19,17,.96); backdrop-filter: blur(6px); border-bottom: 5px solid var(--bronze-3); }
.sub-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 22px; padding-top: 12px; padding-bottom: 12px; }
.sub-nav .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.sub-nav nav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; justify-content: flex-end; }
.sub-nav nav a { font-family: var(--display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; color: var(--brass); text-decoration: none; padding: 12px 14px; border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.sub-nav nav a:hover { color: var(--parchment); }
.sub-nav nav a[aria-current="page"] { color: #131311; background: #d9b45a; }
.sub-nav nav a.cta { border: 1px solid #c9452f; color: var(--parchment); }
@media (max-width: 720px) {
  .sub-nav .brand span { display: none; }
  .sub-nav .wrap { padding-left: 14px; padding-right: 14px; }
  .sub-nav nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; width: 100%; }
  .sub-nav nav::-webkit-scrollbar { display: none; }
  .sub-nav nav a { flex: none; font-size: 12.5px; padding: 12px 12px; white-space: nowrap; }
}