.site-header .nav-shell {
  grid-template-columns: 180px minmax(0, 1fr) auto;
}

.site-header .main-nav {
  justify-content: center;
  gap: 8px;
}

.site-header .main-nav > .nav-primary-link,
.site-header .nav-directory > summary {
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.site-header .main-nav > .nav-primary-link b,
.site-header .nav-directory > summary b {
  color: #fff;
  font: 900 10px "DM Sans", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-header .main-nav > .nav-primary-link span,
.site-header .nav-directory > summary span {
  color: rgba(255,255,255,.46);
  font: 700 7px "DM Sans", sans-serif;
  letter-spacing: .025em;
  text-transform: none;
  white-space: nowrap;
}

.site-header .main-nav > .nav-primary-link::after { display: none; }
.site-header .main-nav > .nav-primary-link:hover,
.site-header .nav-directory > summary:hover,
.site-header .nav-directory[open] > summary {
  border-color: rgba(239,36,50,.6);
  background: linear-gradient(180deg,rgba(239,36,50,.18),rgba(255,255,255,.025));
}

.site-header .main-nav > .nav-pricing-link {
  border-color: rgba(213,169,85,.34);
  background: linear-gradient(180deg,rgba(213,169,85,.12),rgba(213,169,85,.025));
}
.site-header .main-nav > .nav-pricing-link b { color: #f1d58c; }

.nav-directory { position: relative; }
.nav-directory > summary { list-style: none; }
.nav-directory > summary::-webkit-details-marker { display: none; }
.nav-directory > summary > i {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #d5a955;
  border-bottom: 1px solid #d5a955;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.nav-directory[open] > summary > i { transform: rotate(225deg) translate(-2px,-2px); }

.nav-directory-panel {
  position: absolute;
  z-index: 106;
  top: calc(100% + 15px);
  right: 0;
  width: min(720px, 78vw);
  overflow: hidden;
  border: 1px solid rgba(238,37,52,.56);
  border-radius: 16px;
  background: radial-gradient(circle at 92% 5%,rgba(238,37,52,.2),transparent 35%),rgba(6,6,6,.988);
  box-shadow: 0 32px 100px rgba(0,0,0,.78);
  backdrop-filter: blur(26px);
}

.nav-directory-panel > header {
  min-height: 92px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(190px,.7fr);
  align-items: end;
  gap: 30px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: left;
}
.nav-directory-panel > header div { display: grid; gap: 7px; }
.nav-directory-panel > header small { color: #ef2a39; font: 900 7px "DM Sans",sans-serif; letter-spacing: .16em; }
.nav-directory-panel > header strong { color: #fff; font: 900 25px/.92 "Barlow Condensed",sans-serif; letter-spacing: -.01em; }
.nav-directory-panel > header > span { color: rgba(255,255,255,.48); font: 600 9px/1.5 "DM Sans",sans-serif; letter-spacing: 0; text-transform: none; }

.nav-directory-scroll {
  max-height: min(520px, calc(100vh - 205px));
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d5a955 #101010;
}

.nav-pricing-spotlight {
  min-height: 116px;
  margin-bottom: 8px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-content: center;
  gap: 7px 24px;
  border: 1px solid rgba(213,169,85,.52);
  border-radius: 11px;
  color: #fff;
  background: radial-gradient(circle at 92% 10%,rgba(239,36,50,.23),transparent 34%),linear-gradient(120deg,rgba(213,169,85,.14),rgba(12,10,8,.96));
  text-align: left;
  transition: transform .2s ease,border-color .2s ease;
}
.nav-pricing-spotlight:hover { transform: translateY(-1px); border-color: #d5a955; }
.nav-pricing-spotlight small { grid-column: 1/-1; color: #d5a955; font: 900 7px "DM Sans",sans-serif; letter-spacing: .13em; }
.nav-pricing-spotlight strong { font: 900 21px/.95 "Barlow Condensed",sans-serif; letter-spacing: -.01em; }
.nav-pricing-spotlight span { grid-column: 1; color: rgba(255,255,255,.62); font: 600 9px/1.5 "DM Sans",sans-serif; }
.nav-pricing-spotlight b { grid-column: 2; grid-row: 2/4; align-self: center; color: #fff; font: 900 8px "DM Sans",sans-serif; letter-spacing: .08em; white-space: nowrap; }

.nav-submenu {
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.nav-submenu:last-child { border-bottom: 0; }
.nav-submenu > summary {
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-content: center;
  gap: 4px 20px;
  list-style: none;
  text-align: left;
  cursor: pointer;
}
.nav-submenu > summary::-webkit-details-marker { display: none; }
.nav-submenu > summary b { color: #fff; font: 900 13px "DM Sans",sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nav-submenu > summary span { color: rgba(255,255,255,.43); font: 600 8px "DM Sans",sans-serif; letter-spacing: 0; text-transform: none; }
.nav-submenu > summary i { grid-column: 2; grid-row: 1/3; align-self: center; color: #d5a955; font: 400 22px "DM Sans",sans-serif; transition: transform .2s ease; }
.nav-submenu[open] > summary i { transform: rotate(45deg); }
.nav-submenu > div {
  padding: 0 4px 12px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.site-header .nav-submenu a {
  min-height: 72px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  text-align: left;
  background: rgba(255,255,255,.025);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.site-header .nav-submenu a::after { display: none; }
.site-header .nav-submenu a:hover { border-color: rgba(239,36,50,.62); background: rgba(239,36,50,.1); transform: translateY(-1px); }
.site-header .nav-submenu a.is-featured { border-color: rgba(213,169,85,.42); background: linear-gradient(125deg,rgba(213,169,85,.11),rgba(239,36,50,.08)); }
.site-header .nav-submenu a b { color: #fff; font: 900 11px "DM Sans",sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.site-header .nav-submenu a span { color: rgba(255,255,255,.52); font: 600 9px/1.45 "DM Sans",sans-serif; letter-spacing: 0; text-transform: none; }

@media (max-width: 1200px) {
  .site-header .nav-shell { grid-template-columns: 154px minmax(0,1fr) auto; gap: 12px; }
  .site-header .main-nav > .nav-primary-link,
  .site-header .nav-directory > summary { min-width: 96px; padding-inline: 9px; }
  .site-header .main-nav > .nav-primary-link span,
  .site-header .nav-directory > summary span { display: block; }
}

@media (max-width: 820px) {
  .site-header .nav-shell { grid-template-columns: 1fr auto; }
  .site-header .main-nav {
    top: 72px;
    display: block;
    max-height: calc(100dvh - 72px);
    padding: 12px 14px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header .main-nav > .nav-primary-link,
  .site-header .nav-directory > summary {
    width: 100%;
    min-height: 58px;
    margin-bottom: 7px;
    align-items: flex-start;
    padding: 11px 14px;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.025);
    text-align: left;
  }
  .site-header .main-nav > .nav-primary-link span,
  .site-header .nav-directory > summary span { display: block; }
  .nav-directory { position: static; }
  .nav-directory > summary > i { right: 30px; }
  .nav-directory-panel {
    position: static;
    width: 100%;
    margin: 0 0 10px;
    border-color: rgba(238,37,52,.42);
    border-radius: 12px;
    box-shadow: none;
  }
  .nav-directory-panel > header { min-height: 78px; padding: 15px; grid-template-columns: 1fr; gap: 8px; }
  .nav-directory-panel > header strong { font-size: 22px; }
  .nav-directory-panel > header > span { display: none; }
  .nav-directory-scroll { max-height: none; padding: 7px; overflow: visible; }
  .nav-submenu > div { grid-template-columns: 1fr; }
  .site-header .nav-submenu a { min-height: 64px; }
  .nav-pricing-spotlight { grid-template-columns: 1fr; }
  .nav-pricing-spotlight b { grid-column: 1; grid-row: auto; }
}

@media (max-width: 420px) {
  .site-header .nav-submenu a { padding: 12px; }
}

/* Premium world-stage menu — release 221 */
.nav-directory-panel {
  width: min(790px, 82vw);
  background:
    linear-gradient(135deg,rgba(7,7,7,.985),rgba(12,6,7,.97)),
    radial-gradient(circle at 90% 0,rgba(238,37,52,.28),transparent 34%);
  box-shadow: 0 38px 120px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.025) inset;
  transform-origin: top right;
}
.nav-directory[open] .nav-directory-panel { animation: nav-world-reveal .38s cubic-bezier(.2,.8,.2,1) both; }
.nav-directory-panel > header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg,rgba(0,0,0,.18),rgba(120,8,18,.16));
}
.nav-directory-panel > header::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -76px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(213,169,85,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(213,169,85,.025),0 0 0 52px rgba(239,36,50,.018);
  pointer-events: none;
}
.nav-directory-panel > header strong { font-size: 29px; letter-spacing: -.015em; }
.nav-directory-scroll { padding: 13px; }
.nav-pricing-spotlight {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  background:
    linear-gradient(100deg,rgba(13,11,7,.96) 0%,rgba(55,28,10,.72) 52%,rgba(92,8,17,.72) 100%),
    url("/experience/assets/real-people/band-rehearsal-pexels-7088373.jpg") center 41%/cover;
}
.nav-pricing-spotlight::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -28%;
  display: block;
  width: 18%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  pointer-events: none;
}
.nav-pricing-spotlight:hover::after { animation: nav-world-shine .8s ease-out; }
.nav-submenu > summary { transition: background .22s ease,padding-left .22s ease; }
.nav-submenu > summary:hover { padding-left: 17px; background: linear-gradient(90deg,rgba(239,36,50,.08),transparent 70%); }
.nav-submenu[open] > summary b { color: #f1d58c; }
.nav-submenu[open] > div { animation: nav-section-reveal .32s cubic-bezier(.2,.8,.2,1) both; }
.site-header .nav-submenu a.nav-destination {
  --nav-image: linear-gradient(135deg,#2c0a10,#090909);
  position: relative;
  isolation: isolate;
  min-height: 112px;
  overflow: hidden;
  justify-content: flex-end;
  padding: 17px;
  gap: 5px;
  background: #090909;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  transition: transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.site-header .nav-submenu a.nav-destination::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(180deg,rgba(0,0,0,.08) 8%,rgba(0,0,0,.46) 54%,rgba(0,0,0,.96) 100%),var(--nav-image);
  background-position: center;
  background-size: cover;
  filter: saturate(.88) contrast(1.05);
  transition: transform .55s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
.site-header .nav-submenu a.nav-destination::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  background: linear-gradient(110deg,rgba(239,36,50,.14),transparent 42%,rgba(213,169,85,.06));
  pointer-events: none;
}
.site-header .nav-submenu a.nav-destination:hover {
  transform: translateY(-4px);
  border-color: rgba(213,169,85,.62);
  background: #090909;
  box-shadow: 0 22px 55px rgba(0,0,0,.46),0 0 28px rgba(239,36,50,.09);
}
.site-header .nav-submenu a.nav-destination:hover::before { transform: scale(1.045); filter: saturate(1.14) contrast(1.07); }
.site-header .nav-submenu a.nav-destination small {
  color: #d5a955;
  font: 900 6px "DM Sans",sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-header .nav-submenu a.nav-destination small i {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 50%;
  background: #ef2432;
  box-shadow: 0 0 12px #ef2432;
  animation: nav-live-dot 1.35s ease-in-out infinite;
}
.site-header .nav-submenu a.nav-destination b { font: 900 17px/.95 "Barlow Condensed",sans-serif; letter-spacing: .025em; }
.site-header .nav-submenu a.nav-destination > span:not(.nav-radio-motion):not(.nav-news-ticker) { max-width: 88%; color: rgba(255,255,255,.67); font-size: 8px; }
.site-header .nav-submenu a.nav-destination > em {
  margin-top: 7px;
  color: #fff;
  font: 900 6px "DM Sans",sans-serif;
  font-style: normal;
  letter-spacing: .11em;
  opacity: .66;
  transition: color .2s ease,opacity .2s ease,transform .2s ease;
}
.site-header .nav-submenu a.nav-destination:hover > em { color: #d5a955; opacity: 1; transform: translateX(4px); }
.site-header .nav-submenu a.nav-radio,.site-header .nav-submenu a.nav-news { min-height: 160px; }
.nav-radio { --nav-image: url("assets/home-boiler-room-v1.webp"); background-position: center!important; }
.nav-news { --nav-image: url("assets/real-people/live-audience-phone-pexels-11209927.jpg"); }
.nav-artists { --nav-image: url("/artists/reckless-live.jpg"); }
.nav-venues { --nav-image: url("assets/venues/arena-torquay-interior-v1.webp"); }
.nav-rehearsal { --nav-image: url("assets/rooms/rehearsal-room-hero-v1.webp"); grid-column: 1/-1; }
.nav-musicians { --nav-image: url("/experience/assets/real-people/venue-soundcheck-unsplash-CNzKwgiAeI.jpg"); }
.nav-network { --nav-image: url("/artists/reckless-live.jpg"); }
.nav-plans { --nav-image: url("/experience/assets/real-people/band-rehearsal-pexels-7088373.jpg"); grid-column: 1/-1; }
.nav-broadcast { --nav-image: url("assets/real-people/broadcast-phone-band-pexels-6270152.jpg"); }
.nav-boost { --nav-image: url("/experience/assets/real-people/live-audience-phone-pexels-11209927.jpg"); }
.nav-suite { --nav-image: url("/experience/assets/real-people/live-creative-desk-pexels-14536014.jpg"); }
.nav-wiz { --nav-image: url("assets/real-people/live-creative-desk-pexels-14536014.jpg"); }
.nav-competitions { --nav-image: url("/artists/reckless-live.jpg"); }
.nav-wiztv { --nav-image: url("assets/real-people/live-sound-engineer-pexels-34623194.jpg"); }
.nav-radio-motion {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 44px;
  height: 28px;
  display: flex!important;
  align-items: flex-end;
  justify-content: space-between;
  opacity: .82;
}
.nav-radio-motion i { width: 4px; min-height: 5px; border-radius: 4px 4px 0 0; background: linear-gradient(#f1d58c,#ef2432); animation: nav-radio-level 1s ease-in-out infinite; transform-origin: bottom; }
.nav-radio-motion i:nth-child(2){animation-delay:-.35s}.nav-radio-motion i:nth-child(3){animation-delay:-.7s}.nav-radio-motion i:nth-child(4){animation-delay:-.18s}.nav-radio-motion i:nth-child(5){animation-delay:-.52s}
.nav-news-ticker {
  position: absolute;
  right: 15px;
  bottom: 18px;
  max-width: 125px!important;
  overflow: hidden;
  color: #f1d58c!important;
  font: 900 6px "DM Sans",sans-serif!important;
  letter-spacing: .12em!important;
  white-space: nowrap;
  opacity: .78;
}
.nav-news-ticker::after { content: "  ·  BREAKING THE BEAT  ·  LATEST"; }
.nav-news:hover .nav-news-ticker { animation: nav-news-flow 2.4s linear infinite; }
@keyframes nav-world-reveal { from { opacity: 0; transform: translateY(-12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes nav-section-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes nav-world-shine { from { left: -28%; } to { left: 118%; } }
@keyframes nav-live-dot { 50% { opacity: .38; transform: scale(.72); } }
@keyframes nav-radio-level { 0%,100% { height: 6px; } 45% { height: 27px; } 72% { height: 13px; } }
@keyframes nav-news-flow { from { transform: translateX(0); } to { transform: translateX(-42px); } }

@media (max-width: 820px) {
  .nav-directory-panel { width: 100%; }
  .site-header .nav-submenu a.nav-destination { min-height: 132px; }
  .site-header .nav-submenu a.nav-radio,.site-header .nav-submenu a.nav-news { min-height: 155px; }
  .nav-rehearsal,.nav-plans { grid-column: auto; }
}
@media (max-width: 420px) {
  .site-header .nav-submenu a.nav-destination { padding: 15px; }
  .site-header .nav-submenu a.nav-destination > span:not(.nav-radio-motion):not(.nav-news-ticker) { max-width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-directory[open] .nav-directory-panel,.nav-submenu[open] > div,.nav-pricing-spotlight:hover::after,.site-header .nav-submenu a.nav-destination small i,.nav-radio-motion i,.nav-news:hover .nav-news-ticker { animation: none!important; }
  .site-header .nav-submenu a.nav-destination,.site-header .nav-submenu a.nav-destination::before { transition: none!important; }
}
