/* ==========================================================================
   Components – Header, mega menu, mobile navigation
   ========================================================================== */

.vg-header {
  position: sticky; top: 0; z-index: var(--vg-z-header);
  background: color-mix(in srgb, var(--vg-offwhite) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--vg-dur) var(--vg-ease), background var(--vg-dur) var(--vg-ease);
}
.vg-header.is-scrolled { border-bottom-color: var(--vg-line); }
.vg-header--dark { background: color-mix(in srgb, var(--vg-black) 88%, transparent); color: var(--vg-offwhite); }
.vg-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--vg-space-5); min-height: var(--vg-header-h); }

/* Logo */
.vg-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; font-family: var(--vg-font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--vg-tracking-tight); line-height: 1; }
.vg-logo:hover { color: inherit; }
.vg-logo img { height: 36px; width: auto; }
.vg-logo__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.vg-logo__word { display: flex; flex-direction: column; gap: .15rem; }
.vg-logo__tag { font-family: var(--vg-font-body); font-weight: 500; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vg-text-muted); }
@media (max-width: 380px) { .vg-logo__tag { display: none; } }

/* Desktop nav */
.vg-nav { display: none; }
@media (min-width: 1024px) {
  .vg-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
  .vg-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
  .vg-nav__item { position: relative; }
  .vg-nav__item--mega { position: static; } /* mega menu centres on the header, not the item */
  .vg-nav__link {
    display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .8rem; min-height: 44px;
    font-size: var(--vg-text-sm); font-weight: 500; text-decoration: none; color: inherit; border-radius: var(--vg-radius-sm);
    background: none; border: 0; position: relative;
  }
  .vg-nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .35rem; height: 2px; background: var(--vg-green); transform: scaleX(0); transform-origin: left; transition: transform var(--vg-dur) var(--vg-ease-out); }
  .vg-nav__link:hover::after, .vg-nav__link[aria-expanded="true"]::after, .vg-nav__item.is-current > .vg-nav__link::after { transform: scaleX(1); }
  .vg-nav__link:hover { color: inherit; }
  .vg-nav__link .vg-icon { width: 16px; height: 16px; transition: transform var(--vg-dur) var(--vg-ease); }
  .vg-nav__link[aria-expanded="true"] .vg-icon { transform: rotate(180deg); }
  .vg-header__cta { margin-left: .75rem; }
}
.vg-header__cta { display: none; }
@media (min-width: 1024px) { .vg-header__cta { display: inline-flex; } }

/* Mega menu */
.vg-mega {
  position: absolute; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%) translateY(-6px);
  width: min(920px, 100%);
  background: var(--vg-white); color: var(--vg-black);
  border: var(--vg-border); border-radius: var(--vg-radius-md); box-shadow: var(--vg-shadow-menu);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--vg-dur) var(--vg-ease), transform var(--vg-dur) var(--vg-ease-out), visibility 0s linear var(--vg-dur);
  z-index: var(--vg-z-menu);
}
.vg-nav__item.is-open > .vg-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.vg-mega__inner { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
.vg-mega__col { padding: 1.5rem; }
.vg-mega__col + .vg-mega__col { border-left: var(--vg-border); }
.vg-mega__title { font-size: var(--vg-text-xs); font-weight: 600; letter-spacing: var(--vg-tracking-caps); text-transform: uppercase; color: var(--vg-text-muted); margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.vg-mega__title::before { content: ""; width: 8px; height: 8px; background: var(--vg-green); }
.vg-mega__col--dev .vg-mega__title::before { background: var(--vg-black); }
.vg-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.vg-mega__link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin-inline: -.6rem; border-radius: var(--vg-radius-sm); text-decoration: none; font-size: var(--vg-text-sm); font-weight: 500; line-height: 1.3; color: var(--vg-black); }
.vg-mega__link:hover, .vg-mega__link:focus-visible { background: var(--vg-offwhite); color: var(--vg-black); }
.vg-mega__link .vg-icon { width: 18px; height: 18px; color: var(--vg-grey-500); flex: 0 0 auto; }
.vg-mega__link:hover .vg-icon { color: var(--vg-green-deep); }
.vg-mega__stage { margin-left: auto; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-text-muted); font-family: var(--vg-font-display); }

/* Mega menu feature column – the growth system in miniature */
.vg-mega__feature { background: var(--vg-black); color: var(--vg-offwhite); border-radius: var(--vg-radius-md) 0 0 var(--vg-radius-md); display: flex; flex-direction: column; gap: 1rem; }
.vg-mega__feature p { color: var(--vg-text-on-dark-muted); font-size: var(--vg-text-sm); margin: 0; }
.vg-mega__feature .vg-mega__title { color: var(--vg-text-on-dark-muted); }
.vg-mega__feature .vg-mega__title::before { background: var(--vg-yellow); }
.vg-mega__feature .vg-link { color: var(--vg-offwhite); margin-top: auto; }
.vg-mega__feature .vg-link:hover { color: var(--vg-green); }
.vg-mega__rail { display: grid; gap: .35rem; margin: .25rem 0; }
.vg-mega__rail-item { display: grid; grid-template-columns: 1.5rem 1fr; align-items: center; gap: .5rem; font-family: var(--vg-font-display); font-size: var(--vg-text-sm); font-weight: 500; }
.vg-mega__rail-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--vg-green); justify-self: center; }
.vg-mega__rail-item:last-child::before { background: var(--vg-green); }

/* Mobile toggle */
.vg-burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -.5rem; border-radius: var(--vg-radius-sm); color: inherit; }
.vg-burger .vg-icon { width: 26px; height: 26px; }
@media (min-width: 1024px) { .vg-burger { display: none; } }
.vg-header__mobile-cta { display: inline-flex; margin-left: auto; }
@media (min-width: 1024px) { .vg-header__mobile-cta { display: none; } }
@media (max-width: 359px) { .vg-header__mobile-cta { display: none; } }

/* Mobile navigation panel – designed independently: big type, stage-grouped accordion, contact row */
.vg-mobile-nav {
  position: fixed; inset: 0; z-index: var(--vg-z-overlay);
  background: var(--vg-black); color: var(--vg-offwhite);
  display: flex; flex-direction: column;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform var(--vg-dur-slow) var(--vg-ease-out), opacity var(--vg-dur) var(--vg-ease), visibility 0s linear var(--vg-dur-slow);
  overflow-y: auto; overscroll-behavior: contain;
}
.vg-mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
body.vg-nav-open { overflow: hidden; }
.vg-mobile-nav__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--vg-header-h); padding-inline: var(--vg-gutter); border-bottom: 1px solid var(--vg-line-on-dark); flex: 0 0 auto; }
.vg-mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -.5rem; color: inherit; }
.vg-mobile-nav__close .vg-icon { width: 26px; height: 26px; }
.vg-mobile-nav__body { padding: var(--vg-space-5) var(--vg-gutter) var(--vg-space-8); flex: 1 1 auto; }
.vg-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.vg-mobile-nav__item { border-bottom: 1px solid var(--vg-line-on-dark); }
.vg-mobile-nav__link, .vg-mobile-nav__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: .9rem 0;
  font-family: var(--vg-font-display); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); font-weight: 700; letter-spacing: var(--vg-tracking-tight);
  color: inherit; text-decoration: none; text-align: left;
}
.vg-mobile-nav__link:hover, .vg-mobile-nav__toggle:hover { color: var(--vg-green); }
.vg-mobile-nav__toggle .vg-icon { width: 24px; height: 24px; transition: transform var(--vg-dur) var(--vg-ease); }
.vg-mobile-nav__toggle[aria-expanded="true"] .vg-icon { transform: rotate(45deg); }
.vg-mobile-nav__sub { display: none; padding: 0 0 1.25rem; }
.vg-mobile-nav__toggle[aria-expanded="true"] + .vg-mobile-nav__sub { display: grid; gap: 1.25rem; }
.vg-mobile-nav__group-title { font-size: var(--vg-text-xs); font-weight: 600; letter-spacing: var(--vg-tracking-caps); text-transform: uppercase; color: var(--vg-text-on-dark-muted); margin: 0 0 .5rem; }
.vg-mobile-nav__sublist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vg-mobile-nav__sublist { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.vg-mobile-nav__sublink { display: flex; align-items: center; min-height: 44px; padding: .4rem 0; color: var(--vg-offwhite); text-decoration: none; font-size: var(--vg-text-base); font-weight: 500; }
.vg-mobile-nav__sublink:hover { color: var(--vg-green); }
.vg-mobile-nav__sublink--all { color: var(--vg-green); font-weight: 600; }
.vg-mobile-nav__footer { position: sticky; bottom: 0; padding: var(--vg-space-5) var(--vg-gutter) calc(var(--vg-space-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--vg-line-on-dark); display: grid; gap: 1rem; background: var(--vg-grey-900); flex: 0 0 auto; }
.vg-mobile-nav__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--vg-text-sm); }
.vg-mobile-nav__contact a { display: inline-flex; align-items: center; gap: .4rem; color: var(--vg-text-on-dark-muted); text-decoration: none; min-height: 44px; }
.vg-mobile-nav__contact a:hover { color: var(--vg-green); }
.vg-mobile-nav__contact .vg-icon { width: 18px; height: 18px; }
.vg-mobile-nav__tag { font-family: var(--vg-font-display); font-size: var(--vg-text-sm); color: var(--vg-text-on-dark-muted); overflow-wrap: anywhere; }
@media (min-width: 1024px) { .vg-mobile-nav { display: none; } }