.megamenu--menu.is-opened .megamenu__list > .megamenu__item:has(.megamenu__link--rich){
    max-height: 100%;
    min-height: auto;
    height: 100%;
    display: block;
}
body header.nav-phase-3 .megamenu__toggle[aria-expanded=true] + ul.megamenu__list{
  overflow: hidden;
}
.megamenu--menu.is-opened .megamenu__list > .megamenu__item:not(:last-child) .megamenu__link--rich{
  position: relative;
  margin-bottom: 12px;
  padding-bottom: 20px;
}
.megamenu--menu.is-opened .megamenu__list > .megamenu__item:not(:last-child) .megamenu__link--rich::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 20px;
  background-color: rgba(255, 255, 255, 0.2);

}

body header.nav-phase-3 .megamenu__toggle[aria-expanded=true] + ul.megamenu__list{
  height: 100vh;
}
body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--mirvac,
body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--logo{
  position: absolute;
  right: 50px;
  z-index: 9999;
  top: 25px;
}
@media(max-width: 1199px) {
  body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--mirvac,
  body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--logo{
    
    top: 10px;
  }
}
body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--logo{
  left: calc(50% - -10px);
  right: 50%;
  transform: translateX(-50%);
}

body header.nav-phase-3:has(.megamenu--three.is-opened) .image.image--mirvac:not(.image--logo){
  transform: unset;
}

@media (max-width: 1199px) {
    body header.nav-phase-3 div.megamenu--three .megamenu__item::after {
      display: none;
    }
}

/* ============================================================
   Header menu tweaks (first pass — tune with a screenshot)
   ============================================================ */

/* 1. Drop shadow on the project + Mirvac logos so they lift off the texture */
body header.nav-phase-3 .image.image--mirvac img,
body header.nav-phase-3 .image.image--logo img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* 2. Ivory texture behind the opened header menu (same asset as .bg-ivory) */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list {
  background-image: url('/harbourside-vip/images/bg/bg-ivory.jpg');
  background-size: 100% 100%;
  background-position: top left;
  background-repeat: repeat;
}
/* Hide the dark blurred photo layer so the ivory reads cleanly */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list::before {
  display: none !important;
}
/* Menu text in the site's charcoal (--navigationColor, #5e5452) for the ivory ground */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list,
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list a,
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list .megamenu__link,
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list .megamenu__link--rich {
  color: var(--navigationColor) !important;
}
/* No text-shadow: it existed to hold white text off a dark photo, and on ivory it
   would just smudge the charcoal. The :hover gold gradient still overrides colour
   via -webkit-text-fill-color, so hover is unaffected. */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__link.megamenu__link--rich h1 {
  font-size: 32px;
}
/* Show only the heading in the nav rich links — hide the paragraph */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__link.megamenu__link--rich p {
  display: none !important;
}
/* Item divider lines were white @20% — darken for the light background */
body
  header.nav-phase-3
  .megamenu--menu.is-opened
  .megamenu__list
  > .megamenu__item:not(:last-child)
  .megamenu__link--rich::after {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* 3. Reduce the menu font size and tighten the spacing */
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list a,
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list .megamenu__link,
body header.nav-phase-3 .megamenu--menu.is-opened .megamenu__list .megamenu__link--rich {
  font-size: 18px !important;
}
body
  header.nav-phase-3
  .megamenu--menu.is-opened
  .megamenu__list
  > .megamenu__item:not(:last-child)
  .megamenu__link--rich {
  margin-bottom: 6px !important;
  padding-bottom: 10px !important;
}

body header.nav-phase-3{
  backdrop-filter: blur(2px);
}
header.boutique-nav--1:has(.is-opened) .image.image--logo img{
  filter:brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(306%) hue-rotate(314deg) brightness(94%) contrast(88%);
}
@media(min-width: 1024px) {
  body header.nav-phase-3 .megamenu--three.is-opened {
    width: calc(100% - 242px);
  }

  header:has(.is-opened) .link-list ul:has(.btn-bordered){
    justify-content: center;
  }
}

/* Hamburger → X  */
body header.nav-phase-3 .megamenu__toggle > div {
  transition: top 0.3s ease-out, transform 0.3s ease-out, opacity 0.2s ease-out;
}
body header.nav-phase-3 .megamenu__toggle[aria-expanded='true'] > div:first-child {
  transform: translateY(-50%) rotate(45deg);
}
body header.nav-phase-3 .megamenu__toggle[aria-expanded='true'] > div:nth-child(2) {
  opacity: 0;
}
body header.nav-phase-3 .megamenu__toggle[aria-expanded='true'] > div:last-child {
  transform: translateY(-50%) rotate(-45deg);
}


@media(max-width: 420px){
  header .megamenu--menu.is-opened .megamenu__list{
    width: 100vw !important;
  }
}