/* vup_2018_child – Header component
 * Sticky header with shrink-on-scroll (single 0.25s transition) and shared
 * tokens for heights, icon stacks, and CTA chips. Tokens are intentionally
 * centralized so PHP/JS can rely on the same names:
 *   --scroll-range controls the scrollY threshold before .is-compact toggles.
 *   --hdr-h0/1, --logo-max/min, --icon-size0/1 define tall vs compact states.
 *   --logo-overlap0/1 + --icon-offset* keep vertical alignment in both states.
 */

@layer vu-header.reset, vu-header.base, vu-header.utilities;

/* ========== TOKENS (defined in css/skin.css) ========== */
@layer vu-header.base {

  /* ===== Runtime state mapping (tall vs compact) ===== */
  #vu-header{
    --hdr-h:        var(--hdr-h0);
    --logo-h:       var(--logo-max);
    --icon-h:       var(--icon-size0);
    --logo-overlap: var(--logo-overlap0);
    --icon-offset:  var(--icon-offset0);
    --icon-bottom-gap: var(--icon-bottom-gap0);
    --icon-label-gap: var(--icon-label-gap0);
  }

  #vu-header.is-compact{
    --hdr-h:        var(--hdr-h1);
    --logo-h:       var(--logo-min);
    --icon-h:       var(--icon-size1);
    --logo-overlap: var(--logo-overlap1);
    --icon-offset:  var(--icon-offset1);
    --icon-bottom-gap: var(--icon-bottom-gap1);
    --icon-label-gap: var(--icon-label-gap1);
  }
}

/* ========== RESET ========== */
@layer vu-header.reset {
  #vu-header *, #vu-header *::before, #vu-header *::after { box-sizing:border-box; }
  #vu-header ul, #vu-header li { list-style:none; margin:0; padding:0; }
  #vu-header img { display:block; height:auto; }
}

/* ========== BASE ========== */
@layer vu-header.base {
  #vu-header{
    background-color:var(--vu-black);
    background-image:var(--grad-header, none);
    color:var(--vu-fg);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow: 0 0 5rem 0 #000;
  }

  /* ===== CHIP BUTTON PAIR (shared styles for Contact + Menu toggles) ===== */
  .vu-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--chip-gap);
    min-height:var(--chip-height);
    padding:var(--chip-pad-block) var(--chip-pad-inline);
    border-radius:var(--chip-radius);
    border:var(--chip-border);
    background:var(--chip-bg);
    color:var(--chip-color);
    font-size:var(--chip-font-size);
    font-weight:var(--chip-font-weight);
    letter-spacing:var(--chip-letter);
    text-transform:uppercase;
    cursor:pointer;
    line-height:1;
    transition: background .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease;
  }
  .vu-chip:hover{
    background:var(--chip-bg-hover);
    border:var(--chip-border-hover);
    box-shadow:0 0 0 var(--chip-outline-hover) var(--chip-outline-color);
  }
  .vu-chip:focus-visible{
    outline:var(--chip-outline-size) solid var(--chip-outline-color);
    outline-offset:var(--chip-outline-offset);
    background:var(--chip-bg-hover);
    border:var(--chip-border-hover);
    box-shadow:0 0 0 var(--chip-outline-hover) var(--chip-outline-color);
  }


  .hdr-inner{
    position:relative;
    z-index:2;
    height:var(--hdr-h);
    /* Align with single-column layout shell (gutters + 1fr + gutters) */
    width:100%;
    margin-inline:0;
    padding-inline:var(--page-edge);
    display:grid;
    grid-template-columns:auto minmax(0, 1fr); /* logo | nav */
    align-items:center;
    gap:clamp(24px, 4vw, 80px);
    overflow:visible;
    transition: height .25s ease;
  }

  /* ===== LOGO ===== */
  .hdr-branding{
    grid-column:1;
    display:flex;
    align-items:center;
    gap:clamp(12px, 2vw, 18px);
    min-width:0;
  }
  .vu-logo{
    align-self:stretch;
    display:flex;
    align-items:center;
    grid-column:1;
    justify-self:start;
    position: auto;
    z-index:3;
    flex:0 0 auto;
  }
  .vu-logo-img{
    width:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    transform: translateY(var(--logo-overlap));
    transition: height .25s ease, transform .25s ease;
    flex:0 0 auto;
  }

  .vu-logo-tagline{
    display:flex;
    flex-direction:column;
    gap:2px;
    color:var(--vu-fg);
    line-height:1.05;
  }
  .vu-logo-tagline__line{
    white-space:nowrap;
    font-family:var(--vu-system-font);
    letter-spacing:0.04em;
  }
  .vu-logo-tagline__line--primary{
    font-size:clamp(0.8rem, 1.3vw, 0.95rem);
    font-weight:600;
  }
  .vu-logo-tagline__line--since{
    font-size:clamp(1rem, 1.6vw, 1.25rem);
    font-weight:700;
  }

  .vu-mobile-heritage{
    display:none;
  }
  @media (max-width: 820px){
    .vu-logo-tagline{
      display:none;
    }
  }

  /* ===== GOLD BAR ===== */
  .vu-gold-rule{
    position:absolute;
    inset-inline:0;
    bottom:0;
    height:4px;
    background:var(--vu-gold);
    z-index:1;
  }
  .vu-gold-tagline{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space:nowrap;
    border:0;
  }
  @media (max-width: 520px){
    .vu-gold-rule{
      height:14px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .vu-gold-rule .vu-gold-tagline{
      position:static;
      width:auto;
      height:auto;
      margin:0;
      overflow:visible;
      clip:auto;
      clip-path:none;
      padding:0;
      display:inline-block;
      font-size:.68rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family:var(--vu-system-font);
      color:var(--vu-black);
      white-space:nowrap;
      transition: opacity .2s ease;
    }
    #vu-header.is-compact .vu-gold-tagline{
      opacity:0;
    }
  }

  /* ===== NAV GRID / RESPONSIVE WRAPPER ===== */
  .vu-nav{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--icon-gap);
    position:relative;
    padding-bottom:0;
    grid-column:2;
    justify-self:end;
  }
  .vu-nav-panel{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    height:var(--hdr-h0);
    align-items:center; /* center children vertically */
    align-self:center;  /* keep the panel centered within the header row */
    justify-content:flex-end;
    width:100%;
    overflow:visible;
    --nav-panel-placement: translate3d(0,0,0);
    --nav-panel-motion: translate3d(0,0,0) scale(1);
    transform: var(--nav-panel-placement) var(--nav-panel-motion);
  }
  .vu-nav-panel > .vu-menu,
  .vu-nav-panel > ul.menu{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(var(--icon-slot-min), var(--icon-slot-max));
    justify-content:flex-end;
    align-content:end;
    align-items:end;
    gap:var(--icon-gap);
    padding:0;
    margin:0;
    width:100%;
  }
  .vu-menu > li{
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .vu-nav-overflow{
    position:fixed;
    right:var(--page-edge);
    top:calc(var(--vu-hdr-h, var(--hdr-h)) - 2px);
    display:none;
    z-index:6;
  }
  .vu-nav-overflow-toggle{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--overflow-chip-w);
    height:var(--overflow-chip-h);
    background:var(--vu-gold);
    color:var(--vu-black);
    border:0;
    border-radius:0 0 16px 16px;
    box-shadow:0 14px 28px rgba(0,0,0,.45);
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .vu-nav-overflow-toggle::after{
    content:"";
    position:absolute;
    top:calc(45%);
    left:50%;
    translate:-50% 0;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-top:12px solid var(--vu-black);
  }
  .vu-nav-overflow-toggle:is(:hover,:focus-visible){
    transform:translateY(1px);
    box-shadow:0 10px 20px rgba(0,0,0,.45);
  }
  .vu-nav-overflow-panel{
    position:absolute;
    top:calc(100% + 14px);
    right:0;
    min-width:clamp(220px, 35vw, 320px);
    background:var(--nav-panel-fill, var(--nav-panel-bg));
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--nav-panel-shadow);
    padding:clamp(14px, 4vw, 24px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-8px,0);
    transition: opacity .2s ease, transform .2s ease;
  }
  .vu-nav-overflow-panel::before{
    content:"";
    position:absolute;
    top:-10px;
    right:calc((var(--overflow-chip-w) / 2) - 10px);
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid var(--nav-panel-fill, var(--nav-panel-bg));
  }
  .vu-nav-overflow.is-open .vu-nav-overflow-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
  .vu-menu-overflow{
    display:flex;
    flex-direction:column;
    gap:clamp(.35rem, 1.5vw, .8rem);
    width:100%;
  }
  .vu-menu-overflow > li{
    display:none;
  }
  .vu-menu-overflow > li > a{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:var(--menu-panel-gap);
    font-size:var(--menu-panel-font-size);
    letter-spacing:var(--menu-letter-spacing);
    line-height:1.3;
    color:var(--vu-fg);
    text-transform:inherit;
    padding-block:.35rem;
  }
  .vu-menu-overflow > li > a .menu-icon{
    width:var(--menu-panel-icon-size);
    height:var(--menu-panel-icon-size);
    min-width:var(--menu-panel-icon-size);
    justify-self:start;
  }
  .vu-nav-toggle{
    order:0;
    margin-inline-start:0;
    align-self:flex-end;
    display:none;
  }
  .vu-nav-scrim{
    display:none;
  }

  /* ===== ICON + LABEL ===== */
  .vu-nav .menu-item > a{
    width:100%;
    display:grid;
    grid-template-rows:1fr auto;
    justify-items:center;
    align-items:start;
    row-gap:var(--icon-label-gap);
    text-align:center;
    text-transform:capitalize;
    font-size:var(--menu-font-size);
    font-weight:var(--menu-font-weight);
    letter-spacing:var(--menu-letter-spacing);
    line-height:1.2;
    color:var(--vu-fg);
    text-decoration:none;
    position:relative;
    z-index:2;
    pointer-events:auto;
    min-height:var(--icon-stack-height);
    padding-inline:clamp(.1rem, .75vw, .35rem);
    transform: translateY(var(--icon-offset));
    transition: color .2s ease, transform var(--bounce-speed) ease;
  }

  .menu-icon{
    align-self:end;
    justify-self:center;
    max-height:var(--icon-h);
    height:100%;
    min-width:clamp(52px, 7vw, 80px);
    aspect-ratio:1/1;
    object-fit:contain;
    display:block;
    transition: transform var(--bounce-speed) ease, max-height .25s ease;
  }

  /* Desktop/tablet icon alignment (icons visible) */
  @media (min-width: 520px){ /* Changed from 521px to close breakpoint gap - cross-browser fix */
    .vu-nav{
      align-self:stretch;
      height:100%;
      align-items:flex-end;
    }
    .vu-nav-panel{
      align-self:stretch;
      height:100%;
    }
    .vu-nav .menu-item > a{
      min-height:100%;
      justify-content:flex-start;
    }
    .hdr-inner{
      align-items:center;
      padding-left: 80px;
      padding-right: 80px;
    }
    #vu-header .hdr-branding{
      justify-self:start;
    }
    /* Force specific labels to two-line layout while retaining accessible text */
    #vu-header #menu-item-116{ --forced-menu-label:"Team\A Building"; }
    #vu-header #menu-item-416{ --forced-menu-label:"Extreme\A Teams"; }
    #vu-header #menu-item-110{ --forced-menu-label:"Clients\A Worldwide"; }
    #vu-header #menu-item-112{ --forced-menu-label:"Travel\A Journal"; }

    #vu-header #menu-item-116 > a,
    #vu-header #menu-item-416 > a,
    #vu-header #menu-item-110 > a,
    #vu-header #menu-item-112 > a{
      text-indent:0;
      overflow:visible;
      gap:0;
      font-size:0;         /* collapse original text so flex gap doesn’t double count */
      line-height:0;
      position:relative;
    }
    #vu-header #menu-item-116 > a::after,
    #vu-header #menu-item-416 > a::after,
    #vu-header #menu-item-110 > a::after,
    #vu-header #menu-item-112 > a::after{
      content:var(--forced-menu-label);
      display:block;
      margin-top:var(--icon-label-gap);
      font-size:var(--menu-font-size);
      font-weight:var(--menu-font-weight);
      letter-spacing:var(--menu-letter-spacing);
      line-height:1.1;
      color:currentColor;
      text-indent:0;
      white-space:pre-line;
      text-align:center;
      text-transform:inherit;
    }
  }

  /* ===== MOBILE TOGGLE ===== */
  .vu-nav-toggle-text{ font-size:.78rem; letter-spacing:.15em; }
  .vu-nav-toggle-bars{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
  }
  .vu-nav-toggle-bars .bar{
    width:22px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition: transform .3s ease, opacity .2s ease;
  }
  .vu-nav.is-open .vu-nav-toggle-bars .bar:first-child{
    transform: translateY(7px) rotate(45deg);
  }
  .vu-nav.is-open .vu-nav-toggle-bars .bar:nth-child(2){
    opacity:0;
  }
  .vu-nav.is-open .vu-nav-toggle-bars .bar:last-child{
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ===== RESPONSIVE TOKENS & LAYOUT ===== */
    @media (max-width: 1280px){
      .hdr-inner{
        gap:clamp(16px, 4vw, 40px);
      }
    }
  @media (max-width: 1050px) and (min-width: 520px){
    .hdr-inner{
      gap:clamp(24px, 5vw, 72px);
    }
    .vu-nav-panel{ max-width:100%; }
    .vu-nav-overflow{ display:block; }
    .vu-nav-toggle{ display:none; }
    #vu-header .vu-nav-panel > .vu-menu{ justify-content:flex-end; }
    #vu-header .vu-nav-panel > .vu-menu > #menu-item-8358{ display:none; }
    .vu-menu-overflow > li[data-source-id="menu-item-8358"]{ display:flex; }
  }  @media (max-width: 900px) and (min-width: 520px){
    #vu-header .vu-nav-panel > .vu-menu > #menu-item-112{ display:none; }
    .vu-menu-overflow > li[data-source-id="menu-item-112"]{ display:flex; }
  }
  @media (max-width: 820px) and (min-width: 520px){
    #vu-header .vu-nav-panel > .vu-menu > #menu-item-110{ display:none; }
    .vu-menu-overflow > li[data-source-id="menu-item-110"]{ display:flex; }
  }
  @media (max-width: 760px) and (min-width: 520px){
    #vu-header .vu-nav-panel > .vu-menu > #menu-item-114{ display:none; }
    .vu-menu-overflow > li[data-source-id="menu-item-114"]{ display:flex; }
  }
  @media (max-width: 700px) and (min-width: 520px){
    #vu-header .vu-nav-panel > .vu-menu > #menu-item-416{ display:none; }
    .vu-menu-overflow > li[data-source-id="menu-item-416"]{ display:flex; }
  }
  @media (max-width: 520px){
    .vu-nav-overflow,
    .vu-nav-overflow-panel{
      display:none !important;
    }

    /* Mobile header: logo + menu chip */
    #vu-header .hdr-inner{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
      justify-items:center;
      padding-inline:var(--page-edge);
    }

    #vu-header .vu-mobile-heritage{
      display:flex;
      grid-column:1;
      justify-self:center;
      align-self:center;
      flex-direction:column;
      align-items:center;
      line-height:1.05;
      gap:2px;
    }
    #vu-header .vu-mobile-heritage__line{
      font-family:var(--vu-system-font);
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:var(--vu-fg);
    }
    #vu-header .vu-mobile-heritage__line--label{
      font-size:clamp(.68rem, 2.8vw, .82rem);
      font-weight:600;
    }
    #vu-header .vu-mobile-heritage__line--year{
      font-size:clamp(.95rem, 3.2vw, 1.15rem);
      font-weight:700;
    }

    #vu-header .hdr-branding{
      grid-column:2;
      justify-self:center;
      align-items:center;
      gap:8px;
      position:relative;
      z-index:3;
      flex-direction:row;
    }

    /* Centered logo */
    #vu-header .vu-logo{
      grid-column:auto;
      justify-self:center;
      position: static;
      padding-top: 0;
    }

    /* Menu chip stays at the edge */
    #vu-header .vu-nav{
      grid-column:3;
      justify-self:center;
      position:relative;
      top:auto;
      margin-top:0;
      inset:auto;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      padding-top:0;
      padding-inline-end:0;
    }

    #vu-header .vu-nav-toggle{
      display:inline-flex;
      margin-inline-start:0;
    }

    #vu-header .vu-logo-tagline{
      flex-direction:row;
      align-items:center;
      gap:6px;
      line-height:1.1;
    }
    #vu-header .vu-logo-tagline__line--since{
      font-size:0.95rem;
    }
  }
}

/* ========== UTILITIES ========== */
@layer vu-header.utilities {
  #vu-header a, #vu-header a:visited { color:var(--vu-fg); text-decoration:none; }
  #vu-header a:hover { color:var(--vu-gold); }

  /* Touch padding */
  @media (pointer:coarse){
    .vu-menu > li > a, nav ul.menu > li > a{ padding-block:.35rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    #vu-header nav.vu-nav ul.vu-menu > li:hover > a > img.menu-icon,
    #vu-header nav.vu-nav ul.vu-menu > li:focus-within > a > img.menu-icon,
    #vu-header nav.vu-nav ul#header-menu > li:hover > a > img.menu-icon,
    #vu-header nav.vu-nav ul#header-menu > li:focus-within > a > img.menu-icon,
    #vu-header .vu-menu > li:hover > a > .menu-icon,
    #vu-header .vu-menu > li:focus-within > a > .menu-icon,
    #vu-header .vu-menu > li > a:hover > .menu-icon,
    #vu-header .vu-menu > li > a:focus-visible > .menu-icon{
      transform:none !important;
    }
  }

  /* Failsafe: keep header sticky even if parent CSS overrides positioning */
  #vu-header{
    position:sticky;
    top:0;
    z-index:1000;
  }

  /* Token-enforced dimensions so upstream img rules cannot flatten sizing */
  #vu-header .vu-logo-img{
    height:var(--logo-h)!important;
    min-height:var(--logo-floor)!important;
  }

  /* Single authoritative hover/focus lift for icons */
  #vu-header nav.vu-nav ul.vu-menu > li:hover > a > img.menu-icon,
  #vu-header nav.vu-nav ul.vu-menu > li:focus-within > a > img.menu-icon,
  #vu-header nav.vu-nav ul#header-menu > li:hover > a > img.menu-icon,
  #vu-header nav.vu-nav ul#header-menu > li:focus-within > a > img.menu-icon,
  #vu-header .vu-menu > li:hover > a > .menu-icon,
  #vu-header .vu-menu > li:focus-within > a > .menu-icon,
  #vu-header .vu-menu > li > a:hover > .menu-icon,
  #vu-header .vu-menu > li > a:focus-visible > .menu-icon{
    transform: translate3d(0, calc(-1 * var(--bounce-distance)), 0) !important;
    transition: transform var(--bounce-speed) ease !important;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: center bottom;
  }

  /* Mobile header overrides for the navigation panel */
  @media (max-width: 520px){
    #vu-header .vu-nav-panel{
      position:fixed;
      top:calc(var(--vu-hdr-h, var(--hdr-h)) + var(--menu-panel-offset));
      left:50%;
      right:auto;
      width:min(420px, calc(100vw - (2 * var(--menu-panel-offset))));
      max-height:calc(100vh - (var(--vu-hdr-h, var(--hdr-h)) + var(--menu-panel-offset)));
      height:auto;
      display:block;
      transform:translate3d(-50%, -10px, 0);
      padding:var(--menu-panel-pad);
      background:rgba(6, 6, 10, .92);
      border-radius:var(--nav-panel-radius);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--nav-panel-shadow);
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior:contain;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      z-index:5;
      transition: opacity .25s ease, transform .3s cubic-bezier(.22,.7,0,1);
    }
    #vu-header .vu-nav.is-open .vu-nav-panel{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translate3d(-50%, 0, 0);
    }
    #vu-header .vu-nav-panel .vu-menu{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      gap:var(--menu-panel-gap);
      width:100%;
      padding:0;
      margin:0;
    }
    #vu-header .vu-nav-panel .vu-menu > li{
      display:block;
      width:100%;
      opacity:0;
      transform:translate3d(0, 16px, 0);
      transition-property: opacity, transform;
      transition-duration:.28s, .36s;
      transition-timing-function:ease-out, cubic-bezier(.22,.7,0,1);
      transition-delay:calc(var(--menu-stagger-index, 0) * 45ms);
    }
    #vu-header .vu-nav.is-open .vu-nav-panel .vu-menu > li{
      opacity:1;
      transform:translate3d(0, 0, 0);
      transition: opacity .25s ease, transform .3s cubic-bezier(.22,.7,0,1);
    }
    #vu-header .vu-nav-panel .vu-menu > li > a{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:clamp(.45rem, 3vw, .9rem);
      padding:clamp(.75rem, 4vw, 1.3rem) clamp(.5rem, 3vw, 1.1rem);
      border-radius:16px;
      width:100%;
      font-size:clamp(1.05rem, .95rem + .45vw, 1.25rem);
      font-weight:650;
    }
    #vu-header .vu-nav-panel .vu-menu > li > a::after{
      content:none;
    }
    #vu-header .vu-nav-panel .menu-icon{
      width:clamp(2.8rem, 12vw, 3.6rem);
      height:clamp(2.8rem, 12vw, 3.6rem);
      min-width:clamp(2.8rem, 12vw, 3.6rem);
      margin-bottom:.35rem;
      margin-inline:auto;
    }
    #vu-header .vu-nav-scrim{
      display:block;
      position:fixed;
      top:calc(var(--vu-hdr-h, var(--hdr-h)));
      left:0;
      right:0;
      bottom:0;
      border:0;
      margin:0;
      padding:0;
      background:rgba(5,5,8,.6);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease;
      z-index:4;
    }
    #vu-header .vu-nav-scrim:focus{
      outline:none;
    }
    #vu-header .vu-nav.is-open .vu-nav-scrim{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
  }

  @media (max-width: 520px) and (prefers-reduced-motion: reduce){
    #vu-header .vu-nav-panel{
      transition:none;
      transform:translate3d(-50%, 0, 0);
    }
    #vu-header .vu-nav-panel .vu-menu > li{
      transition:none;
      transform:none;
    }
  }

  /* Extra-small refinements */
  @media (max-width: 360px){
    #vu-header .vu-nav-toggle-text{
      font-size:0;
    }
  }
}