
.vision-menu {
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  width: min(760px, calc(100vw - 24px)) !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 1.35rem 2.5rem 1.5rem !important;
  border: 1px solid rgba(208,155,45,.3) !important;
  border-right: 0 !important;
  border-radius: 20px 0 0 20px !important;
  background: radial-gradient(circle at 100% 0,rgba(232,200,120,.2),transparent 28%),linear-gradient(145deg,#fcf9f2,#f4eee2) !important;
  box-shadow: -24px 0 80px rgba(2,20,43,.34) !important;
  transform: translate(110%,-50%);
}

.vision-menu.open { transform: translate(0,-50%); }
.vision-menu-close { top: 9px !important; right: 18px !important; width: 36px; height: 36px; }

.vision-menu-intro { margin: 0 0 .65rem !important; padding: .15rem 3rem .72rem 0 !important; }
.vision-menu .vision-menu-intro p { margin-bottom: .3rem !important; font-size: .7rem !important; }
.vision-menu-intro h2 { max-width: 650px; margin-bottom: .35rem; font-size: clamp(2rem,3.7vw,2.85rem) !important; line-height: 1.02; }
.vision-menu-intro > span { max-width: 650px; font-size: .88rem !important; line-height: 1.38; }

.vision-menu-journey { display: grid !important; grid-template-columns: 1fr !important; gap: .4rem !important; margin: 0 0 .7rem !important; }
.vision-menu .vision-menu-journey a {
  display: grid !important;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .58rem .85rem !important;
  border: 1px solid rgba(5,42,95,.14) !important;
  border-radius: 11px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 7px 22px rgba(5,42,95,.045);
  transition: border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.vision-menu .vision-menu-journey a::before { display: none !important; }
.vision-menu .vision-menu-journey a:hover,.vision-menu .vision-menu-journey a:focus-visible { border-color: rgba(208,155,45,.65) !important; box-shadow: 0 10px 27px rgba(5,42,95,.09); transform: translateX(-3px); }
.vision-menu-journey a > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(208,155,45,.58); border-radius: 50%; color: #9b671d; font-family: Georgia,serif; font-size: .88rem; }
.vision-menu-journey a > div { min-width: 0; }
.vision-menu-journey strong { display: block; margin-bottom: .1rem; color: var(--wm-blue); font-family: Georgia,serif; font-size: 1.3rem; line-height: 1.04; }
.vision-menu-journey small { display: block; color: rgba(18,63,48,.72); font-size: .72rem; font-weight: 600; line-height: 1.3; }
.vision-menu-journey a > b { color: var(--wm-orange); font-size: 1.3rem; }

.vision-menu-sections { margin: 0 0 .7rem; padding: .55rem .35rem .6rem; border-top: 1px solid rgba(5,42,95,.13); border-bottom: 1px solid rgba(5,42,95,.13); }
.vision-menu-sections > span { display: block; margin-bottom: .38rem; color: var(--wm-orange); font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.vision-menu-sections > div { display: flex; flex-wrap: wrap; gap: .35rem .55rem; }
.vision-menu .vision-menu-sections a { width: auto !important; padding: .29rem .55rem !important; border: 1px solid rgba(5,42,95,.13) !important; border-radius: 999px; background: rgba(255,255,255,.6); color: var(--wm-deep) !important; font-size: .68rem; font-weight: 800; line-height: 1.15 !important; }
.vision-menu .vision-menu-sections a:hover,.vision-menu .vision-menu-sections a:focus-visible { border-color: var(--wm-orange) !important; color: var(--wm-orange) !important; }

.vision-menu-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .75rem .85rem .85rem; border-radius: 13px; background: var(--wm-deep); }
.vision-menu .vision-menu-destinations > p { grid-column: 1 / -1; margin: 0 0 .08rem !important; color: var(--wm-gold); font-size: .64rem !important; letter-spacing: .17em; text-transform: uppercase; }
.vision-menu a.vision-menu-flagship,.vision-menu a.vision-menu-story,.vision-menu a.vision-menu-join { border-radius: 9px !important; }
.vision-menu a.vision-menu-flagship { margin: 0 !important; padding: .62rem .75rem !important; background: #fff !important; }
.vision-menu a.vision-menu-flagship strong { font-size: 1.05rem; }
.vision-menu a.vision-menu-story { position: relative; display: grid !important; grid-template-columns: 1fr auto; margin: 0 !important; padding: .62rem .75rem !important; background: rgba(255,255,255,.1); color: #fff !important; }
.vision-menu-story > span,.vision-menu-story small { grid-column: 1; color: #fff; }
.vision-menu-story small { color: rgba(255,255,255,.72); font-size: .76rem; }
.vision-menu-story > b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--wm-gold); }
.vision-menu a.vision-menu-join { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr auto; padding: .62rem .8rem !important; background: var(--wm-gold) !important; color: var(--wm-deep) !important; }
.vision-menu-join strong,.vision-menu-join small { grid-column: 1; }
.vision-menu-join strong { font-family: Georgia,serif; font-size: 1.3rem; }
.vision-menu-join small { margin-top: .15rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.vision-menu-join > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.3rem; }

@media (max-width: 850px) {
  .vision-menu { width: calc(100vw - 5px) !important; max-width: none !important; max-height: calc(100dvh - 8px) !important; padding: 1.15rem 1.2rem 1.2rem !important; border-radius: 17px 0 0 17px !important; }
  .vision-menu-close { top: 10px !important; right: 13px !important; }
  .vision-menu-intro { padding: .35rem 3rem .65rem 0 !important; }
  .vision-menu-intro h2 { font-size: clamp(2rem,8vw,2.65rem) !important; }
  .vision-menu-intro > span { display: block !important; font-size: .83rem !important; }
  .vision-menu .vision-menu-journey a { grid-template-columns: 40px 1fr auto; gap: .8rem; padding: .58rem .7rem !important; }
  .vision-menu-journey strong { font-size: 1.35rem; }
  .vision-menu-journey small { font-size: .75rem; }
  .vision-menu-sections { padding-left: .2rem; padding-right: .2rem; }
  .vision-menu-destinations { padding: .72rem; }
}

@media (max-width: 430px) {
  .vision-menu { padding-left: .95rem !important; padding-right: .95rem !important; }
  .vision-menu .vision-menu-journey a { grid-template-columns: 37px 1fr auto; gap: .65rem; padding: .78rem .65rem !important; }
  .vision-menu-journey a > span { width: 34px; height: 34px; }
  .vision-menu-journey strong { font-size: 1.22rem; }
  .vision-menu-journey small { font-size: .71rem; }
  .vision-menu-sections > div { gap: .3rem; }
  .vision-menu .vision-menu-sections a { font-size: .68rem; }
}

@media (max-height: 650px) {
  .vision-menu { max-height: calc(100dvh - 8px) !important; padding-top: .85rem !important; padding-bottom: .85rem !important; }
  .vision-menu-intro { margin-bottom: .35rem !important; padding-bottom: .4rem !important; }
  .vision-menu-intro > span { display: none !important; }
  .vision-menu-journey { gap: .25rem !important; margin-bottom: .4rem !important; }
  .vision-menu .vision-menu-journey a { padding-top: .4rem !important; padding-bottom: .4rem !important; }
  .vision-menu-journey small { display: none; }
  .vision-menu-sections { margin-bottom: .45rem; padding-top: .4rem; padding-bottom: .4rem; }
}
