header.main {
    --header-padding-top: max(40px, calc(40 * var(--px)));
    padding-top: var(--header-padding-top);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    --item-gap: calc(41 * var(--px));
    pointer-events: none;
  }
  
  header.main .header-shade {
    display: block;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    opacity: 0;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--header-padding-top) * -2);
    transition: opacity 500ms var(--ttf-5);
  }
  
  body.scrolled[data-scroll-dir="up"] header.main .header-shade {
    opacity: 1;
  }
  
  header.main > .inner {
    position: relative;
    z-index: 2;
  }
  
  header.main a,
  header.main .btn {
    pointer-events: all;
  }

  header.main .col-set {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  
  header.main .col-set .col-2 {
    margin-left: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: -0.5em;
  }
  
  
  
  @media (max-width: 1000px) {
    
    header.main > .inner {
      padding-left: max(30px, calc(var(--page-padding-left) / 2));
      padding-right: max(30px, calc(var(--page-padding-right) / 2));
    }
    
  }
  
  
  @media (max-width: 750px) {
    
    header.main .header-shade {
      opacity: 1;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  header.main .site-title img,
  .footer-site-title img {
    width: max(170px, calc(211 * var(--px)));
    height: auto;
    max-width: none;
  }
  
  .site-title a {
    position: relative;
    display: inline-block;
  }
  
  .site-title a .black-logo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../imgs/mbition-black.svg) no-repeat center center;
    background-size: contain;
    opacity: 0;
  }
  
  
  
  
  
  
  
  
  nav.header {
    position: relative;
    transition: 500ms var(--ttf-5);
    transition-property: transform, opacity, filter;
  }
  
  body.scrolled nav.header {
    transform: translateY(-50px);
    opacity: 0;
  }
  
  body[data-scroll-dir="up"] nav.header {
    transform: none;
    opacity: 1;
    filter: drop-shadow(0px 0px 15px black);
  }
  
  nav.header .menu {
    display: flex;
    flex-flow: row nowrap;
  }
  
  nav.header .menu > li + li {
    margin-left: var(--item-gap);
  }
  
  nav.header .menu a {
    position: relative;
    display: inline-block;
  }
  
  nav.header .current-menu-any > a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(219,39,125);
    background: linear-gradient(90deg, rgba(219,39,125,1) 0%, rgba(225,175,2,1) 100%);
  }
  
  @media (max-width: 750px) {
    
    header.main .col-set .col-2 {
      display: none;
    }
    
  }
  
  
  
  
  
  
  
  


  .btn-menu {
    pointer-events: all;
    position: absolute;
    top: 6px;
    right: 30px;
    width: 30px;
    height: 30px;
    display: none;
  }
  
  .btn-menu .bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--base-color-white);
    position: absolute;
    left: 0;
    top: 7px;
    transition: transform 150ms var(--ttf-2);
  }
  
  .btn-menu .bar-2 {
    top: auto;
    bottom: 7px;
  }
  
  @media (max-width: 750px) {
    
    .btn-menu {
      display: block;
    }
    
    body.menu .btn-menu .bar-1 {
      transform: rotate(-45deg) translate(-5px, 5px);
    }
    
    body.menu .btn-menu .bar-2 {
      transform: rotate(45deg) translate(-5px, -5px);
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  div.flyout {
    display: none;
  }
  
  @media (max-width: 750px) {
    
    div.flyout {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 60;
      opacity: 0;
      pointer-events: none;
      transition: opacity 500ms var(--ttf-7) 200ms;
    }
    
    body.menu div.flyout {
      opacity: 1;
      pointer-events: all;
      transition-duration: 0ms;
      transition-delay: 0ms;
    }
    
    div.flyout::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      background: var(--base-color-black);
      z-index: 1;
      opacity: 0;
      transition: opacity 750ms var(--ttf-7) 0ms;
    }
    
    html.is-transitioning div.flyout::before {
      transition-delay: 200ms;
    }
    
    body.menu div.flyout::before {
      opacity: 1;
      transition-delay: 0ms;
    }
    
    div.flyout > .inner {
      position: relative;
      z-index: 2;
      padding-top: 116px;
      padding-bottom: 50px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
    }
    
    nav.flyout {
      font-size: 2.375rem;
      font-family: var(--base-font-1-bold);
      text-align: center;
    }
    
    nav.flyout li + li {
      margin-top: .5em;
    }
    
    nav.flyout li {
      transform: translateY(20px);
      opacity: 0;
      transition: 750ms var(--ttf-7) calc((50ms * var(--index, 0)) + 250ms);
      transition-property: opacity, transform;
    }
    
    body.menu nav.flyout li {
      transform: none;
      opacity: 1;
    }
    
    nav.flyout .current-menu-any a {
      text-decoration: underline;
      text-decoration-thickness: 0.1em;
      text-underline-offset: 0.3em;
    }
    
    .flyout-button {
      margin-top: auto;
      text-align: center;
      transform: translateY(20px);
      opacity: 0;
      transition: 750ms 550ms var(--ttf-7);
      transition-property: opacity, transform;
    }
    
    body.menu .flyout-button {
      opacity: 1;
      transform: none;
    }
    
    div.flyout .accessibility-panel {
      padding-inline: 27px;
      text-align: right;
      margin-bottom: 30px;
      opacity: 0;
      transition: 750ms 200ms var(--ttf-7);
      transition-property: opacity;
    } 
    
    body.menu div.flyout .accessibility-panel {
      opacity: 1;
    }
    
    div.flyout .btn-accessibility {
      margin-left: auto;
    }
    
    div.flyout .btn-accessibility svg {
      width: 34px;
    }
    
    div.flyout .accessibility-options {
      right: 30px;
    }
    
  }