html.-no-scroll {
  overflow: hidden;
}
:root {
  --desktop-width: 1512;
  --desktop-height: 982;
  --mobile-width: 375;
  --mobile-height: 812;
  --full-width: calc(100vw - var(--scrollbar-width, 0px));
  --border-radius: 0;
  --big-radius: 6.25rem;
  --small-radius: 0.625rem;
  --small-spacing: 0.625rem;
  --xsmall-radius: 0.5rem;
  --xsmall-spacing: 0.3125rem;
  --subgrid-spacing: 0.15rem;
  --subgrid-offset: var(--grid-gutter);
  --button-height: 0.5rem;
  --header-height: calc(var(--button-height) + var(--grid-margin) * 2);
  --submenu-height: max(70svh, 500px);
  --ease-in-out-power2: cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media screen and ((max-width: 376px) or (max-height:800px)) {
  :root {
    --submenu-height: 62svh;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --subgrid-offset: calc(var(--subgrid-margin) - var(--grid-margin));
    --header-height: calc(var(--button-height) + var(--subgrid-margin) * 2);
  }
}

:root {
  --grid-columns: 6;
  --grid-margin: 0.11rem;
  --grid-gutter: 0.11rem;
  --grid-width: calc(var(--full-width) - var(--grid-margin) * 2);
  --grid-column-width: calc(
    (var(--grid-width) - ((var(--grid-columns) - 1) * var(--grid-gutter))) /
      var(--grid-columns)
  );
  --subgrid-margin: var(--grid-margin);
  --subgrid-gutter: var(--grid-gutter);
}

@media screen and (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --subgrid-gutter: 2.5rem;
  }
}

:root {
  --z-index-raised: 10;
  --z-index-modal: 20;
  --z-index-transition: 50;
  --z-index-debug: 9999;
}

.app-header {
  --ease-in-power1: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-power1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-power1: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-power2: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-power2: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-power2: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-power3: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-power3: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-power3: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-power4: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-power4: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-power4: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-bounce: cubic-bezier(0.47, 1.64, 0.41, 0.8);
  --ease-out-bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
  --ease-out: cubic-bezier(0.37, 0.31, 0, 1);
  --ease-out-swift: cubic-bezier(0.55, 0, 0.1, 1);
  --ease-smooth-out: cubic-bezier(0.4, 0, 0, 1);
  --ease-smooth-in-out: cubic-bezier(0.75, 0, 0.25, 1);
  --ease-out-gentle: cubic-bezier(0.17, 1.38, 0.35, 0.96);
  --ease-in-out-soft: cubic-bezier(0.4, 0.15, 0, 1);
  --color-black: #000;
  --color-charcoal: #282429;
  --color-white: #fff;
  --color-red: #f02222;
  --color-dark-blue: #fff;
  --color-dark-beige: #eae8e4;
  --color-darker-beige: #e2e0db;
  --color-beige: #f1efeb;
  --color-yellow: #ffac3a;
  --color-gray: #d6d9dd;
  --color-gray2: #c1bfbc;
  --color-blue-20: color-mix(in srgb, var(--color-dark-blue), transparent 80%);
  --color-blue-40: color-mix(in srgb, var(--color-dark-blue), transparent 60%);
  --color-overlay: color-mix(in srgb, #1a2f4b, transparent 80%);
  --color-footer: color-mix(in srgb, var(--color-dark-blue), transparent 20%);
}
#menu-modal {
  --ease-in-power1: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-power1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-power1: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-power2: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-power2: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-power2: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-power3: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-power3: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-power3: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-power4: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-power4: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-power4: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-bounce: cubic-bezier(0.47, 1.64, 0.41, 0.8);
  --ease-out-bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
  --ease-out: cubic-bezier(0.37, 0.31, 0, 1);
  --ease-out-swift: cubic-bezier(0.55, 0, 0.1, 1);
  --ease-smooth-out: cubic-bezier(0.4, 0, 0, 1);
  --ease-smooth-in-out: cubic-bezier(0.75, 0, 0.25, 1);
  --ease-out-gentle: cubic-bezier(0.17, 1.38, 0.35, 0.96);
  --ease-in-out-soft: cubic-bezier(0.4, 0.15, 0, 1);
  --color-black: #000;
  --color-charcoal: #282429;
  --color-white: #fff;
  --color-red: #f02222;
  --color-dark-blue: #4d4c4c;
  --color-dark-beige: #eae8e4;
  --color-darker-beige: #e2e0db;
  --color-beige: #f1efeb;
  --color-yellow: #b68a68;
  --color-green: #39aeb2;
  --color-gray: #d6d9dd;
  --color-gray2: #c1bfbc;
  --color-blue-20: color-mix(in srgb, var(--color-dark-blue), transparent 80%);
  --color-blue-40: color-mix(in srgb, var(--color-dark-blue), transparent 60%);
  --color-overlay: color-mix(in srgb, #1a2f4b, transparent 80%);
  --color-footer: color-mix(in srgb, var(--color-dark-blue), transparent 20%);
}
.app-header-container button,
.app-header-container input,
.app-header-container optgroup,
.app-header-container select,
.app-header-container textarea {
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
.app-header-container [type="button"],
.app-header-container [type="reset"],
.app-header-container [type="submit"],
.app-header-container button {
  background-color: transparent;
  background-image: none;
  border: 0;
}
.app-header-container button,
.app-header-container select {
  text-transform: none;
}
.t-h3 {
  font-size: 0.26rem !important;
  letter-spacing: normal;
}
.t-h3,
.t-h4 {
  font-weight: 300;
  line-height: 1.08;
  color: var(--color-dark-blue);
}
.t-h4 {
  font-size: max(
    20px,
    min(
      100 * calc(26 / var(--desktop-width)) * 1vw,
      100 * calc(26 / var(--desktop-height)) * 1svh
    )
  );
}
.t-h4,
.t-h5 {
  letter-spacing: -0.01em;
}
.ui-button[data-v-e2f6a032] {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: var(--button-height);
  --bg-color: var(--color-white);
}

.ui-image[data-v-92d8f32f] {
  width: 100%;
}

.ui-image img[data-v-92d8f32f] {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      .ui-button[data-v-e2f6a032]:is(a),
      .ui-button[data-v-e2f6a032]:is(button)
    ):not(:disabled):hover:before {
    transform: scale(1.1) translateZ(0);
  }
}

.ui-button[data-v-e2f6a032]:before {
  background-color: var(--bg-color);
  border-radius: 0;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  transition: transform 0.4s var(--ease-bounce);
}

.ui-button.small[data-v-e2f6a032] {
  width: 2.5rem;
}

.ui-button.big[data-v-e2f6a032] {
  width: 4.5rem;
}

.ui-button.beige[data-v-e2f6a032] {
  --bg-color: var(--color-beige);
}

.ui-button .container[data-v-e2f6a032] {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

:is(.ui-button .container) .tt-icon[data-v-e2f6a032],
:is(.ui-button .container[data-v-e2f6a032]) .clone {
  position: relative;
  width: 40%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-arrow[data-v-e2f6a032]:is(
    :is(.ui-button .container) .tt-icon,
    :is(.ui-button .container) :deep(.clone)
  ) {
  width: 30%;
}

.has-anime[data-v-e2f6a032]
  :is(
    :is(.ui-button .container) .tt-icon,
    :is(.ui-button .container) :deep(.clone)
  ) {
  position: absolute;
}

:is(.ui-button .container[data-v-e2f6a032]) .clone {
  transform: translate(-5rem);
}

.ui-button.yellow[data-v-e2f6a032] {
  --bg-color: var(--color-yellow);
}

.app-header[data-v-324bbae3] {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--header-height);
  pointer-events: none;
  position: fixed;
  width: calc(100% - var(--subgrid-margin) * 2);
  z-index: var(--z-index-modal);
}
.subgrid-padding {
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

@media screen and (min-width: 1024px) {
  .subgrid-padding {
    padding-left: var(--subgrid-margin);
    padding-right: var(--subgrid-margin);
  }
}

.app-header[data-v-324bbae3] a,
.app-header[data-v-324bbae3] button {
  pointer-events: all;
}

.app-header .app-searchBtn[data-v-324bbae3],
.app-header .brand[data-v-324bbae3],
.app-header .extras[data-v-324bbae3] {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

:is(.-theme-white .app-header:not(.is-scrolled)),
:is(.-theme-white .app-header:not(.is-scrolled)) .menu-label[data-v-324bbae3] {
  color: var(--color-white);
}

:is(.is-transitioning .app-header:not(.is-scrolled)),
:is(.is-transitioning .app-header:not(.is-scrolled))
  .menu-label[data-v-324bbae3] {
  transition-delay: 0.75s;
}

.app-header.is-scrolled,
.app-header.is-scrolled .menu-label[data-v-324bbae3] {
  opacity: 0;
  top: -100%;
}

:is(.-scroll-up .app-header.is-scrolled) .bg[data-v-324bbae3] {
  opacity: 1;
}

:is(.-scroll-up .app-header.is-scrolled),
:is(.-scroll-up .app-header.is-scrolled) .menu-label[data-v-324bbae3] {
  opacity: 1;
  transform: none !important;
}

:is(.-scroll-up .app-header.is-scrolled) .app-burgerBtn[data-v-324bbae3]:after {
  display: block;
}

:is(.-scroll-up .app-header.is-scrolled) .app-burgerBtn[data-v-324bbae3]:before,
:is(.-scroll-up .app-header.is-scrolled)
  .app-searchBtn[data-v-324bbae3]:before {
  background-color: var(--color-beige);
}

.app-header.-extras-hidden .app-burgerBtn[data-v-324bbae3]:after {
  display: none;
}

.app-header .bg[data-v-324bbae3] {
  background-color: var(--color-white);
  border-radius: var(--small-radius);
  inset: calc(var(--grid-margin) * 0.5);
  position: absolute;
  transition: opacity 0.2s var(--ease-in-out-power2);
  opacity: 0;
  z-index: -1;
}

@media screen and (min-width: 1024px) {
  .app-header .bg[data-v-324bbae3] {
    inset: var(--grid-margin);
  }
}
.header-searchBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--button-height) * 2 + var(--grid-margin));
}
/* header search hover-only visibility */
.global-enquire-button {
  position: relative;
}
.global-enquire-button .header-search {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s var(--ease-in-out-power2),
    transform 0.2s var(--ease-in-out-power2);
  background-color: transparent;
  padding: 0.06rem 0 0.14rem 0;
  min-width: 2.6rem;
  z-index: 2;
}
.global-enquire-button .header-search:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-white), transparent 65%);
}
.global-enquire-button.hover .header-search,
.global-enquire-button:focus-within .header-search {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
  pointer-events: auto;
}
.global-enquire-button .header-search input[type="text"] {
  width: calc(100% - 0.32rem);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-white);
  padding: 0 0.08rem 0 0;
  font-size: 0.16rem;
  line-height: 0.22rem;
}
.global-enquire-button .header-search input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--color-white), transparent 55%);
}
.global-enquire-button
  .header-search
  input[type="text"]::-ms-input-placeholder {
  color: color-mix(in srgb, var(--color-white), transparent 55%);
}
.global-enquire-button .header-search input[type="text"]:-ms-input-placeholder {
  color: color-mix(in srgb, var(--color-white), transparent 55%);
}
.global-enquire-button .header-search:focus-within:after {
  background-color: color-mix(in srgb, var(--color-white), transparent 35%);
}
@media screen and (max-width: 1023px) {
  .global-enquire-button .header-search {
    top: calc(100% + 0.08rem);
    transform: translateY(0) scaleX(0.98);
    width: 90vw;
    padding: 0;
  }
  .global-enquire-button.hover .header-search,
  .global-enquire-button:focus-within .header-search {
    transform: translateY(0) scaleX(1);
  }
  .global-enquire-button .header-search input[type="text"] {
    font-size: 0.18rem;
    line-height: 0.26rem;
    height: 0.9rem;
  }
  .global-enquire-button .header-search input[type="text"]::placeholder {
    font-size: 0.18rem;
  }
}
:is(
  .app-header .app-searchBtn[data-v-324bbae3],
  .app-header .app-burgerBtn[data-v-324bbae3]
):before {
  transition:
    background-color 0.2s var(--ease-in-out-power2),
    transform 0.4s var(--ease-bounce);
}

:is(.app-header .brand) a[data-v-324bbae3] {
  color: var(--color-dark-blue);
  display: inline-block;
  height: 0.47rem;
  transition:
    color 0.3s var(--ease-out-power2),
    opacity 0.2s var(--ease-in-out-power2);
}

@media screen and (min-width: 1024px) {
  :is(.app-header .brand) a[data-v-324bbae3] {
    height: 0.47rem;
  }
}
.app-header .extras[data-v-324bbae3] {
  align-items: center;
  display: flex;
  gap: var(--subgrid-spacing);
  margin-left: auto;
}

:is(.app-header .extras) .menu-label[data-v-324bbae3] {
  color: var(--color-dark-blue);
  font-size: 0.2rem;
  transition:
    color 0.3s var(--ease-out-power2),
    opacity 0.2s var(--ease-in-out-power2);
}

@media screen and (max-width: 1023px) {
  :is(.app-header .extras) .menu-label[data-v-324bbae3] {
    display: none;
  }
}

:is(:is(.app-header .extras) .app-burgerBtn[data-v-324bbae3]):after {
  content: "Menu";
  left: calc(var(--subgrid-spacing) * -1);
  opacity: 0;
  position: absolute;
  transform: translate(-100%);
}

.tt-modal[data-v-61692b67] {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: var(--z-index-modal);
}

.tt-modal.-active[data-v-61692b67] {
  visibility: visible;
}
#menu-modal[data-v-43247261] {
  color: var(--color-dark-blue);
  transition: visibility 0s linear 1.2s;
  --btn-margin: 0.22rem;
  --bg-end-radius: calc(var(--small-radius) + var(--grid-margin));
  --btn-spacing: 0.15625rem;
  --subgrid-spacing: 0.27rem;
  --link-height: 0.51rem;
  --px: 0;
  --py: 0;
  --pr: 0;
}

@media screen and (min-width: 1024px) {
  #menu-modal[data-v-43247261] {
    --btn-margin: 0.11rem;
    --link-height: 0.51rem;
  }
}

#menu-modal.-active[data-v-43247261] {
  transition-delay: 0s;
}

@media screen and (max-width: 1023px) {
  #menu-modal.-active .inner[data-v-43247261] {
    transform: translateZ(0);
  }
}

:is(#menu-modal.-active .inner[data-v-43247261]):before {
  clip-path: inset(
    calc(var(--btn-margin) - var(--subgrid-offset) * var(--py))
      calc(var(--btn-margin) - var(--subgrid-offset) * var(--px))
      calc(
        (100% - var(--button-height) - var(--btn-margin)) * (1 - var(--py)) +
          (var(--btn-margin) - var(--subgrid-offset)) * var(--py)
      )
      calc((100% - var(--button-height) - var(--btn-margin)) * (1 - var(--px)))
  );
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal.-active .inner[data-v-43247261]):before {
    opacity: 1;
    transition: opacty 0s linear 0s;
  }
}

#menu-modal.-active .close[data-v-43247261] {
  transform: scale(1) translateZ(0);
  transition: transform 0.4s var(--ease-out-power2) 0.2s;
  color: var(--color-white);
}

:is(#menu-modal.-active .close[data-v-43247261]):focus {
  outline: none;
}

@media screen and (max-width: 1023px) {
  #menu-modal.-active .close[data-v-43247261] {
    transition-delay: 0.5s;
  }
}

:is(#menu-modal.-active .close[data-v-43247261]):after {
  opacity: 1;
  transform: translateZ(0);
  transition:
    opacity 0.4s var(--ease-out-power2) 0.6s,
    transform 0.4s var(--ease-out-power2) 0.6s;
  color: #4d4c4c;
  font-size: 0.2rem;
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal.-active .close[data-v-43247261]):after {
    transition:
      opacity 0.4s var(--ease-out-power2) 1.1s,
      transform 0.4s var(--ease-out-power2) 1.1s;
  }
}

#menu-modal.-active .main-links li[data-v-43247261] {
  --d: calc(0.4s + var(--index) * 0.08s);
}

#menu-modal.-active .sub-links li[data-v-43247261] {
  --d: calc(0.6s + var(--row-index) * 0.08s);
}

:is(#menu-modal.-active .main-links, #menu-modal.-active .sub-links)
  a[data-v-43247261],
:is(#menu-modal.-active .main-links, #menu-modal.-active .sub-links)
  button[data-v-43247261] {
  opacity: 1;
  transform: translateZ(0);
  transition:
    color 0.4s var(--ease-out-power2),
    opacity 0.5s var(--ease-out-power2) var(--d),
    transform 0.6s var(--ease-out-power2) var(--d);
}

#menu-modal.-active .bottom .ui-card[data-v-43247261] {
  clip-path: inset(0 0 0 0 round var(--border-radius));
  opacity: 1;
  transform: translateZ(0);
  --d: 0.8s;
  margin: 0;
  transition:
    opacity 0.6s var(--ease-out-power2) var(--d),
    clip-path 0.6s var(--ease-out-power2) var(--d),
    transform 0.6s var(--ease-out-power2) var(--d);
}

:is(#menu-modal.-active .socials) .ui-button[data-v-43247261] {
  --d: 0.8s;
  opacity: 1;
  transform: scale(1);
  color: var(--color-dark-blue);
  transition:
    opacity 0.4s var(--ease-out-power2) var(--d),
    transform 0.4s var(--ease-out-power2) var(--d);
}

#menu-modal .bg[data-v-43247261] {
  background-color: #716f6abf;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.4s var(--ease-out-power2);
}

:is(#menu-modal .bg) .logo-container[data-v-43247261] {
  color: var(--color-beige);
  left: 25%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .bg) .logo-container[data-v-43247261] {
    display: none;
  }
}

:is(:is(#menu-modal .bg) .logo-container) .tt-icon[data-v-43247261] {
  display: block;
  opacity: 0;
  transform: scale(0.25);
  transition:
    opacity 0.4s var(--ease-out-power2),
    transform 0.4s var(--ease-out-power2);
  width: 14vw;
}

#menu-modal .inner[data-v-43247261] {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: var(--submenu-height);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

@media screen and (max-width: 1023px) {
  #menu-modal .inner[data-v-43247261] {
    background-color: var(--color-white);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    transform: translate3d(0, -100%, 0);
    transition: transform 0.6s var(--ease-in-out-power4);
  }
}

@media screen and (min-width: 1024px) {
  #menu-modal .inner[data-v-43247261] {
    height: calc(100vh - var(--grid-gutter) * 2);
    width: calc(50vw - var(--grid-gutter) * 2);
    padding: var(--btn-margin);
  }
}

:is(#menu-modal .inner[data-v-43247261]):before {
  background-color: var(--color-white);
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .inner[data-v-43247261]):before {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .inner[data-v-43247261]):before {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-power2) 0.75s;
  }
}

:is(#menu-modal .inner[data-v-43247261]):before {
  clip-path: inset(
    calc(var(--btn-margin) - var(--subgrid-offset) * var(--py) + 5px)
      calc(var(--btn-margin) - var(--subgrid-offset) * var(--px))
      calc(
        (100% - var(--button-height) - var(--btn-margin)) * (1 - var(--py)) +
          (var(--btn-margin) - var(--subgrid-offset)) * var(--py) + 10px
      )
      calc(
        (100% - var(--button-height) - var(--btn-margin)) * 1.015 *
          (1 - var(--px))
      )
  );
  will-change: clip-path, opacity;
}

#menu-modal .inner-bg[data-v-43247261] {
  background-color: #706e6a;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition:
    opacity 0.4s var(--ease-out-power2),
    visibility 0s linear 0.4s;
  visibility: hidden;
  z-index: 1;
}

.-active[data-v-43247261]:is(#menu-modal .inner-bg) {
  opacity: 0.75;
  transition-delay: 0s;
  visibility: visible;
}

@media screen and (min-width: 1024px) {
  #menu-modal .inner-bg[data-v-43247261] {
    display: none;
  }
}

#menu-modal .main-links[data-v-43247261] {
  padding-left: calc(var(--grid-margin) * 2);
  padding-top: 0.11rem;
}

@media screen and (min-width: 1024px) {
  #menu-modal .main-links[data-v-43247261] {
    padding-left: 0.25rem;
  }
}

:is(#menu-modal .main-links) a[data-v-43247261],
:is(#menu-modal .main-links) button[data-v-43247261] {
  align-items: center;
  display: flex;
  height: var(--link-height);
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    color 0.4s var(--ease-out-power2),
    opacity 0.4s var(--ease-out-power2),
    transform 0s linear 0.4s;
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .main-links) a[data-v-43247261],
  :is(#menu-modal .main-links) button[data-v-43247261] {
    padding: 0;
    width: 30vw;
  }
}

:is(:is(#menu-modal .main-links) button, :is(#menu-modal .main-links) a)
  span[data-v-43247261] {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      :is(#menu-modal .main-links) button[data-v-43247261],
      :is(#menu-modal .main-links) a[data-v-43247261]
    ):not([aria-expanded="true"]):not(:disabled):hover {
    color: color-mix(in srgb, var(--color-dark-blue) 50%, transparent 50%);
  }
}

:is(#menu-modal .main-links) button[data-v-43247261] {
  position: relative;
}

[aria-expanded="true"][data-v-43247261]:is(
    :is(#menu-modal .main-links) button
  ):before {
  opacity: 1;
}

[aria-expanded="true"]:is(:is(#menu-modal .main-links) button)
  + .dropdown[data-v-43247261] {
  visibility: visible;
}

:is(:is(#menu-modal .main-links) button[data-v-43247261]):before {
  background-color: var(--color-beige);
  content: "";
  height: 100%;
  left: calc(var(--grid-margin) * -1);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.3s var(--ease-out-power2);
  width: 70vw;
  z-index: -1;
}

@media screen and (min-width: 1024px) {
  :is(:is(#menu-modal .main-links) button[data-v-43247261]):before {
    left: calc(0.24rem * -1);
    width: 30vw;
  }
}

#menu-modal .sub-link-wrapper[data-v-43247261] {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: var(--btn-margin);
  margin-top: auto;
  width: calc(100% - (var(--grid-margin) + var(--grid-margin) * 2));
}

#menu-modal .sub-links[data-v-43247261] {
  -moz-column-gap: var(--subgrid-spacing);
  column-gap: var(--subgrid-spacing);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  padding: calc(var(--grid-margin) * 2);
  row-gap: calc(var(--small-spacing) * 0.5);
  width: 100%;
}

@media screen and (min-width: 1024px) {
  #menu-modal .sub-links[data-v-43247261] {
    padding: var(--subgrid-margin) var(--subgrid-spacing);
    width: calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  }
}

:is(#menu-modal .sub-links) a[data-v-43247261] {
  display: inline-block;
  opacity: 0;
  position: relative;
  transform: translate3d(0, 0.5rem, 0);
  transition:
    opacity 0.4s var(--ease-out-power2),
    transform 0s linear 0.4s;
}

:is(:is(#menu-modal .sub-links) a[data-v-43247261]):after {
  background-color: var(--color-dark-blue);
  bottom: 0;
  content: "";
  display: block;
  height: 0.0625rem;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease-out-power2);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  :is(:is(#menu-modal .sub-links) a[data-v-43247261]):not(
      :disabled
    ):hover:after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

#menu-modal .socials[data-v-43247261] {
  align-items: center;
  display: flex;
  gap: var(--grid-gutter);
  justify-content: center;
  padding-right: var(--subgrid-margin);
}

:is(#menu-modal .socials) .ui-button[data-v-43247261] {
  opacity: 0;
  transform: scale(0.25);
  transition:
    opacity 0.4s var(--ease-out-power2),
    transform 0.4s var(--ease-out-power2);
}

#menu-modal .bottom[data-v-43247261] {
  padding-bottom: 0;
  padding-right: var(--grid-margin);
  width: calc(100% - var(--grid-margin));
}

@media screen and (min-width: 1024px) {
  #menu-modal .bottom[data-v-43247261] {
    padding-bottom: var(--grid-margin);
  }
}

:is(#menu-modal .bottom) .ui-card[data-v-43247261] {
  height: 1.5rem;
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .bottom) .ui-card[data-v-43247261] {
    height: calc(33.33333svh - var(--grid-margin) * 16 / 2);
    width: auto;
  }
}

#menu-modal .close[data-v-43247261] {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  transform: scale(0) translateZ(0);
  transition: transform 0.4s var(--ease-out-power2) 0.2s;
  z-index: 1;
  border: 0;
  border-radius: 0;
}

@media screen and (max-width: 1023px) {
  #menu-modal .close[data-v-43247261] {
    transition-delay: 0s;
  }
}

:is(#menu-modal .close[data-v-43247261]):after {
  content: "Close";
  left: calc(var(--subgrid-spacing) * -1);
  margin-left: -100%;
  opacity: 0;
  position: absolute;
  transform: translate3d(0, 0.5rem, 0);
  transition:
    opacity 0.4s var(--ease-out-power2),
    transform 0s linear 0.4s;
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .close[data-v-43247261]):after {
    display: none;
    transition-delay: 0s;
  }
}

#menu-modal .submenu-bg[data-v-43247261] {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: visibility 0s linear 1.2s;
  visibility: hidden;
  width: calc(50vw - var(--grid-gutter) * 0.5);
  --bg-margin: calc(var(--btn-margin) - var(--subgrid-offset));
  --menu-index: -1;
}

@media screen and (max-width: 1023px) {
  #menu-modal .submenu-bg[data-v-43247261] {
    display: none;
  }
}

:is(#menu-modal .submenu-bg) .plus-icon[data-v-43247261] {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: var(--btn-margin);
  top: var(--btn-margin);
  transition:
    opacity 0.3s var(--ease-out-power2),
    transform 0s linear 0.3s;
  width: var(--button-height);
}

:is(:is(#menu-modal .submenu-bg) .plus-icon) .tt-icon[data-v-43247261] {
  transform: rotate(180deg);
  width: 30%;
}

.-active[data-v-43247261]:is(#menu-modal .submenu-bg) {
  transition-delay: 0s;
  visibility: visible;
}

.-active[data-v-43247261]:is(#menu-modal .submenu-bg):before {
  clip-path: inset(
    var(--bg-margin) calc(var(--bg-margin) / 2) var(--bg-margin)
      var(--bg-margin)
  ) !important;
  opacity: 1;
  transition: clip-path 0.6s var(--ease-in-out-power4) !important;
  will-change: clip-path;
}

.-active:is(#menu-modal .submenu-bg) .plus-icon[data-v-43247261],
.-active[data-v-43247261]:is(#menu-modal .submenu-bg):after {
  opacity: 0 !important;
  transition: none !important;
}

#menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg) {
  transition-delay: 0s;
  visibility: visible;
}

:is(
  #menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)
):before {
  clip-path: inset(
    calc(var(--btn-margin) + var(--link-height) * var(--menu-index))
      var(--btn-margin)
      calc(
        100% - var(--button-height) - var(--btn-margin) - var(--link-height) *
          var(--menu-index)
      )
      calc(100% - var(--button-height) - var(--btn-margin)) round
      var(--button-height)
  );
}

:is(#menu-modal.-active .-hovered:is(#menu-modal .submenu-bg))
  .plus-icon[data-v-43247261],
:is(
  #menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)
):after {
  opacity: 1;
  margin-top: 0.15rem;
  transform: translate3d(0, calc(var(--link-height) * var(--menu-index)), 0);
  transition:
    opacity 0.3s var(--ease-out-power2),
    transform 0.4s var(--ease-out-power2);
}

:is(#menu-modal.-active .-first-hovered:is(#menu-modal .submenu-bg))
  .plus-icon[data-v-43247261],
:is(
  #menu-modal.-active
    .-first-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)
):after {
  transition: opacity 0.3s var(--ease-out-power2);
}

:is(#menu-modal.-active[data-v-43247261] :is(#menu-modal .submenu-bg)):before {
  clip-path: inset(
    var(--btn-margin) var(--btn-margin)
      calc(100% - var(--btn-margin) - var(--button-height))
      calc(100% - var(--btn-margin) - var(--button-height))
  );
  transition:
    opacity 0s linear 0.4s,
    clip-path 0.4s var(--ease-in-out-power2);
  will-change: clip-path, opacity;
}

:is(#menu-modal .submenu-bg[data-v-43247261]):before {
  background-color: var(--color-white);
  clip-path: inset(
    calc(var(--btn-margin) - var(--subgrid-offset) * var(--py) + 5px)
      calc(
        (100% - var(--button-height) - var(--btn-margin)) * 1.015 *
          (1 - var(--px))
      )
      calc(
        (100% - var(--button-height) - var(--btn-margin)) * (1 - var(--py)) +
          (var(--btn-margin) - var(--subgrid-offset)) * var(--py) + 5px
      )
      calc(var(--btn-margin) - var(--subgrid-offset) * var(--px))
  );
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  will-change: clip-path, opacity;
  z-index: -1;
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .submenu-bg[data-v-43247261]):before {
    transition: opacity 0.4s var(--ease-out-power2) 0.8s;
  }
}

:is(#menu-modal .submenu-bg[data-v-43247261]):after {
  background-color: var(--color-white);
  content: "";
  height: var(--button-height);
  opacity: 0;
  position: absolute;
  right: var(--btn-margin);
  top: var(--btn-margin);
  transition:
    opacity 0.3s var(--ease-out-power2),
    transform 0s linear 0.3s;
  width: var(--button-height);
  z-index: -1;
}

#menu-modal[data-v-43247261] .collection-card,
#menu-modal[data-v-43247261] .ui-card {
  clip-path: inset(3rem 3rem 3rem 3rem round var(--border-radius));
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  transition:
    opacity 0.3s var(--ease-out-power2),
    transform 0s linear 0.4s,
    clip-path 0s linear 0.4s;
}

#menu-modal .dropdown[data-v-43247261] {
  padding: var(--grid-margin);
  display: grid;
  align-items: center;
  gap: var(--grid-margin);
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  height: var(--submenu-height);
  left: 0;
  position: fixed;
  transition: visibility 0s linear 1s;
  visibility: hidden;
  width: 100%;
  z-index: 1;
}

@media screen and (max-width: 1023px) {
  #menu-modal .dropdown[data-v-43247261] {
    --dropdown-height: var(--submenu-height) - var(--grid-margin) - 0.5rem;
    background-color: var(--color-beige);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: 0.5rem var(--grid-margin) var(--grid-margin);
    top: calc(100dvh - var(--dropdown-height));
    width: calc(100% - var(--grid-margin) * 2);
    transform: translate3d(0, 100%, 0);
    transition:
      transform 0.6s var(--ease-in-out-power2),
      visibility 0s linear 0.6s;
  }
}

@media screen and (min-width: 1024px) {
  #menu-modal .dropdown[data-v-43247261] {
    height: calc(100svh - var(--grid-margin) * 4);
    padding: calc(var(--grid-margin) * 2);
    top: 0;
    width: calc(50vw - var(--grid-gutter) * 4);
  }
}

.-active[data-v-43247261]:is(#menu-modal .dropdown) {
  transition-delay: 0s;
}

@media screen and (max-width: 1023px) {
  .-active[data-v-43247261]:is(#menu-modal .dropdown) {
    transform: translateZ(0);
  }
}

.-active[data-v-43247261]:is(#menu-modal .dropdown) .collection-card,
.-active[data-v-43247261]:is(#menu-modal .dropdown) .ui-card {
  clip-path: inset(0 0 0 0 round var(--border-radius));
  opacity: 1;
  transform: translateZ(0);
  --d: calc(0.4s + var(--index) * 0.04s);
  transition:
    opacity 0.4s var(--ease-out-power2) var(--d),
    clip-path 0.4s var(--ease-out-power2) var(--d),
    transform 0.4s var(--ease-out-power2) var(--d);
  height: calc(var(--cardh) / 3 - 0.66rem - 0.11rem);
  width: calc(50vw - 0.66rem - 0.56rem);
  --cardh: calc(100vh - 0.44rem);
}

:is(#menu-modal .dropdown[data-v-43247261]) .app-dragControl {
  left: 0;
  padding: 0.25rem 0 0.25rem;
  position: absolute;
  top: 0;
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  white-space: nowrap;
}

.dropdown .collection-card[data-v-30e5559c],
.dropdown .ui-card[data-v-30e5559c] {
  grid-column: span 2;
}

.ui-card[data-v-ff92402c] {
  height: calc(var(--submenu-height) / 3);
  padding: 0.33rem 0.4rem;
  position: relative;
  width: calc(50vw - 0.66rem - 0.66rem);
  margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c]:before {
    transform: scale(1.1) translateZ(0);
  }

  @media screen and (pointer: fine) {
    .ui-card:not(:disabled):hover .media[data-v-ff92402c]:after {
      opacity: 0.15;
    }
  }

  .ui-card:not(:disabled):hover .media .ui-image[data-v-ff92402c] img {
    transform: scale(1.025) translateZ(0);
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .tt-icon {
    transform: translate(5rem);
    width: 30%;
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .clone {
    transform: translate(0);
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .clone,
  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .tt-icon {
    transition: transform 0.4s var(--ease-in-out-soft);
  }
}

.ui-card .media[data-v-ff92402c] {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

:is(.ui-card .media[data-v-ff92402c]):after {
  background-color: #2c2c2c;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.4s var(--ease-out-power2);
}

@media screen and (pointer: coarse) {
  :is(.ui-card .media[data-v-ff92402c]):after {
    opacity: 0.15;
  }
}

:is(.ui-card .media) .ui-image[data-v-ff92402c] {
  height: 100%;
}
:is(.ui-card .title) .ui-image[data-v-ff92402c] {
  height: 100%;
}

:is(:is(.ui-card .media) .ui-image[data-v-ff92402c]) img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out-power2);
}
:is(:is(.ui-card .title) .ui-image[data-v-ff92402c]) img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out-power2);
}

:is(.ui-card .title-link[data-v-ff92402c]):before {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

.ui-card .title[data-v-ff92402c] {
  color: var(--color-white);
}

.ui-card .ui-button[data-v-ff92402c] {
  bottom: 1rem;
  position: absolute;
  right: 1rem;
}

.ui-card[data-v-ff92402c] .bg {
  background-color: #39aeb2;
  width: 100%;
  height: 100%;
}

.app-dragControl[data-v-9097774f] {
  display: block;
  padding: 0.25rem 0 0.25rem;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .app-dragControl[data-v-9097774f] {
    display: none;
  }
}

.app-dragControl[data-v-9097774f]:before {
  background-color: var(--color-gray2);
  content: "";
  display: block;
  height: 0.025rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter) * 1);
}

.-active[data-v-43247261]:is(#menu-modal .dropdown.is-odd) .ui-card {
  height: calc(100% - 0.11rem - 0.55rem);
  width: calc(100% - 0.66rem - 0.13rem);
}
:is(#menu-modal .dropdown.is-odd) .ui-card {
  height: calc(100% - 0.11rem - 0.55rem);
  width: calc(100% - 0.66rem - 0.13rem);
}

@media screen and (min-width: 1024px) {
  .-active[data-v-43247261]:is(#menu-modal .dropdown.is-odd) .ui-card {
    height: calc(100% - 0.11rem - 0.55rem);
    width: calc(100% - 0.66rem - 0.13rem);
  }
}

@media screen and (max-width: 1023px) {
  #menu-modal.-active .bottom .ui-card[data-v-43247261] {
    width: calc(100% - var(--grid-margin) * 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(#menu-modal .bottom) .ui-card[data-v-43247261] {
    width: calc(100% - var(--grid-margin) * 4 - 0.66rem) !important;
    margin: 0 auto;
  }
  .-active[data-v-43247261]:is(#menu-modal .dropdown) .ui-card {
    width: calc(100% - var(--grid-margin) * 4 - 0.66rem);
    height: calc(var(--submenu-height) / 3 - var(--grid-margin) * 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(#menu-modal .dropdown) .ui-card {
    width: calc(100% - var(--grid-margin) * 4 - 0.66rem);
    height: calc(var(--submenu-height) / 3 - var(--grid-margin) * 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(.ui-button .container) .tt-icon[data-v-e2f6a032],
  :is(.ui-button .container[data-v-e2f6a032]) .clone {
    font-size: 0.18rem;
  }
  :is(.ui-button .container) .tt-icon[data-v-e2f6a032] img,
  :is(.ui-button .container[data-v-e2f6a032]) .clone img {
    width: 100%;
  }
  .ui-logo {
    text-align: center;
  }
  .ui-logo img {
    width: auto;
    margin-right: 0.2rem;
    margin-top: 0.1rem;
  }
}