:root {
      --bg-top: #d7d7d7;
      /* --bg-bottom: #c4c4c4; */
      --bg-bottom: #d7d7d7;
      --bar: #6a6a6a;
      --bar-deep: #555555;
      --panel: #f1f1f1;
      --panel-2: #e5e5e5;
      --text: #222222;
      --text-soft: #4b4b4b;
      --text-light: #f7f7f7;
      --border: #bdbdbd;
      --line: #8a8a8a;
      --shadow: rgba(0, 0, 0, 0.16);
      --hover: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      /* font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; */
      color: var(--text);
      background:
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
      min-height: 100vh;
    }

    .header-shell {
      padding: 0px 40px;
    }


	.menu-wrap {
	  width: 100%;
	  border: 1px solid rgba(255, 255, 255, 0.28);
	  box-shadow: 0 14px 34px var(--shadow);
	  background:
		linear-gradient(180deg, #757575 0%, var(--bar) 45%, var(--bar-deep) 100%);
	}









    .menu {
      position: relative;
    }

    .menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }


	
	.menu > ul {
	  display: flex;
	  align-items: stretch;
	  justify-content: stretch;
	  width: 100%;
	}	
	
	

    .menu li {
      position: relative;
    }


	
	.menu > ul > li {
	  flex: 1 1 auto;
	  border-right: 1px solid rgba(255, 255, 255, 0.12);
	}	
	
	

    .menu > ul > li:last-child {
      border-right: none;
    }

    .menu a {
      display: block;
      text-decoration: none;
      white-space: nowrap;
    }



	.menu > ul > li > a {
	  color: var(--text-light);
	  padding: 18px 26px;
	  font-size: 14px;
	  letter-spacing: 0.12em;
	  text-transform: uppercase;
	  position: relative;
	  transition: background 0.22s ease, color 0.22s ease;
	  text-align: center;
	}








    .menu > ul > li > a::before {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 10px;
      height: 1px;
      background: rgba(255, 255, 255, 0.18);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.22s ease;
    }

    .menu > ul > li:hover > a,
    .menu > ul > li:focus-within > a {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
    }

    .menu > ul > li:hover > a::before,
    .menu > ul > li:focus-within > a::before {
      transform: scaleX(1);
    }

    .menu li ul {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 250px;
      padding: 10px 0;
      background:
        linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border: 1px solid var(--border);
      box-shadow: 0 14px 26px var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      z-index: 50;
    }

    .menu li:hover > ul,
    .menu li:focus-within > ul {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .menu li ul li {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .menu li ul li:last-child {
      border-bottom: none;
    }

    .menu li ul a {
      color: var(--text-soft);
      padding: 13px 18px;
      font-size: 15px;
      transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    }

    .menu li ul a:hover,
    .menu li ul a:focus {
      background: rgba(255, 255, 255, 0.72);
      color: var(--text);
      padding-left: 22px;
    }

    .menu li ul li ul {
      top: -1px;
      left: 100%;
    }

    .has-submenu > a {
      padding-right: 42px;
    }

    .menu > ul > li.has-submenu > a::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid rgba(255, 255, 255, 0.85);
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.85);
      transform: translateY(-60%) rotate(45deg);
    }

    .menu li ul .has-submenu > a::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid #666666;
      border-bottom: 1.5px solid #666666;
      transform: translateY(-50%) rotate(-45deg);
    }

    @media (max-width: 980px) {
      .header-shell {
        padding: 20px;
      }

      .menu > ul {
        flex-direction: column;
      }

      .menu > ul > li {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }

      .menu > ul > li:last-child {
        border-bottom: none;
      }

      .menu li ul,
      .menu li ul li ul {
        position: static;
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
        border-left: none;
        border-right: none;
      }

      .menu li:hover > ul,
      .menu li:focus-within > ul {
        display: block;
      }

      .menu > ul > li > a::before {
        display: none;
      }
    }