.mobile-menu-toggle {
  display: none;
}

.mobile-menu {
  --menu-gutter: clamp(20px, 5vw, 38px);
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  border: 0;
  background: #91cfe9;
  color: #171918;
  overscroll-behavior: contain;
}

html:has(.mobile-menu[open]) {
  overflow: hidden;
}

.mobile-menu-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--menu-gutter) - 10px) 0 var(--menu-gutter);
  border-bottom: 1px solid rgb(23 25 24 / 22%);
}

.mobile-menu-brand {
  color: inherit;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-menu-close,
.mobile-menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 23px;
  height: 1.5px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-links a,
.mobile-menu-links button {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 12px var(--menu-gutter);
  border: 0;
  border-bottom: 1px solid rgb(23 25 24 / 22%);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: clamp(1rem, 4.3vw, 1.25rem);
  letter-spacing: .06em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-menu-links button {
  cursor: pointer;
}

.mobile-menu-links .mobile-menu-inquire {
  font-weight: 600;
}

.mobile-menu-services {
  justify-content: space-between;
}

.mobile-menu-chevron {
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
}

.mobile-menu-back .mobile-menu-chevron {
  margin-right: 0;
  margin-left: 3px;
  transform: rotate(225deg);
}

.mobile-menu :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

@media (max-width: 800px) {
  .has-mobile-menu .mobile-menu-toggle {
    display: inline-grid;
    flex: 0 0 44px;
    place-content: center;
    gap: 5px;
  }

  .mobile-menu-toggle span {
    width: 22px;
    height: 1.5px;
    background: currentColor;
  }

  .nav .mobile-menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .has-mobile-menu .story-nav .story-home,
  .has-mobile-menu .presentation-nav nav a:last-of-type,
  .has-mobile-menu .info-nav .back-link {
    display: none;
  }
}