/* MAJIFO Toolkit, site menu: the button, the open state and the link motion made by site-menu.js.
   The panel's look and layout come from Elementor (mj-menu-panel, mj-menu-link and friends). */
.mj-has-menu .mj-header__nav{display:none!important}
.mj-menu-pending .mj-header .mj-header__actions::after{content:"";flex:0 0 40px;width:40px;height:40px;box-shadow:inset 0 0 0 1px var(--border-strong,#6B6B6B)}   /* the menu button's place while the script loads */
html.mj-menu-locked{overflow:hidden}
#works,#services,#about,#contact{scroll-margin-top:96px}   /* menu anchors land below the fixed header */

/* the menu button: square, 40 px, two 1 px lines that shift apart on hover and become an x (scoped to the header to beat the theme's button styles) */
.mj-header .mj-menu-btn{position:relative;flex:0 0 auto;width:40px;min-width:40px;height:40px;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--border-strong,#6B6B6B);color:var(--text,#F5F5F5);cursor:pointer;transition:box-shadow 400ms cubic-bezier(.76,0,.24,1)}
.mj-header .mj-menu-btn:hover,.mj-header .mj-menu-btn:focus,.mj-header .mj-menu-btn:focus-visible{background:none;color:var(--text,#F5F5F5);box-shadow:inset 0 0 0 1px var(--text,#F5F5F5);outline:none}
.mj-header .mj-menu-btn i{position:absolute;left:11px;right:11px;height:1px;background:currentColor;transition:transform 400ms cubic-bezier(.76,0,.24,1),top 400ms cubic-bezier(.76,0,.24,1)}
.mj-header .mj-menu-btn i:nth-child(1){top:16px}
.mj-header .mj-menu-btn i:nth-child(2){top:23px}
.mj-header .mj-menu-btn:hover i:nth-child(1){transform:translateX(-2px)}
.mj-header .mj-menu-btn:hover i:nth-child(2){transform:translateX(2px)}
.mj-header .mj-menu-btn[aria-expanded="true"] i:nth-child(1){top:19.5px;transform:rotate(45deg)}
.mj-header .mj-menu-btn[aria-expanded="true"] i:nth-child(2){top:19.5px;transform:rotate(-45deg)}

/* the panel slides down; the links rise one after another; the rest follows */
body .mj-menu-panel{transition:clip-path 400ms cubic-bezier(.76,0,.24,1),visibility 0s linear 400ms}
body .mj-menu-panel.is-open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path 400ms cubic-bezier(.76,0,.24,1),visibility 0s}
.mj-menu-link{transition:color 400ms cubic-bezier(.76,0,.24,1)}
.mj-menu-link a{display:block;overflow:hidden}
.mj-menu__rise{display:block;transform:translateY(100%);transition:transform 500ms cubic-bezier(.76,0,.24,1) var(--d,0ms)}
.mj-menu-panel.is-open .mj-menu__rise{transform:none}
.mj-menu-link a:focus-visible{outline:none}
.mj-menu-link a:focus-visible .mj-menu__rise{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
body .mj-menu-panel__meta{opacity:0;transform:translateY(12px);transition:opacity 400ms cubic-bezier(.76,0,.24,1),transform 400ms cubic-bezier(.76,0,.24,1)}
body .mj-menu-panel.is-open .mj-menu-panel__meta{opacity:1;transform:none;transition-delay:300ms}

/* hover: letter windows roll up into a fresh copy (like the footer line); the other links dim. Hover screens only */
.mj-menu__rise b{display:inline-block;position:relative;overflow:hidden;vertical-align:top;font-weight:inherit}
.mj-menu__rise b i{display:block;font-style:normal;transition:transform 500ms cubic-bezier(.76,0,.24,1) var(--l,0ms)}
.mj-menu__rise b i+i{position:absolute;left:0;top:100%}
@media (hover:hover){
  .mj-menu-panel__links:hover .mj-menu-link:not(:hover){color:#6B6B6B}
  .mj-menu-link a:hover b i{transform:translateY(-100%)}
}

@media (prefers-reduced-motion:reduce){
  body .mj-menu-panel,body .mj-menu-panel.is-open,.mj-menu__rise,body .mj-menu-panel__meta,.mj-header .mj-menu-btn i{transition:none}
  .mj-menu__rise b i{transition:none;transform:none!important}
}

/* Elementor editor: show the panel in place so its content can be edited */
.elementor-editor-active .mj-menu-panel{position:relative!important;inset:auto!important;visibility:visible!important;clip-path:none!important;min-height:80vh}
.elementor-editor-active .mj-menu-panel .mj-menu-panel__meta{opacity:1;transform:none}