/* Global Styles */
@font-face {
  font-family: Avenir;
  src: url('/wp-content/uploads/2025/03/Avenir-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Avenir;
  src: url('/wp-content/uploads/2025/03/Avenir-Heavy.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: Avenir;
  src: url('/wp-content/uploads/2025/03/Avenir-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

html {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;

  h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-button, a, p, div, span, ul, li {
    font-family: Avenir, Helvetica, Arial, sans-serif;
  }
  p, div, span, ul, li {
    font-weight: inherit;
    font-size: inherit;
  }
  h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-button {
    font-weight: 600;
  }
  h1, .uk-h1 {
    font-weight: 900;
  }
  p:not(.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-text-small) {
    text-align: justify;

    @media (max-width: 550px) {
      text-align: left;
    }
  }
}

// Custom Scrollbar Styles
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
  background: @primary-abyss;

  &-thumb {
    background: @primary-dark;
    border-radius: 5px;
  }
}

@primary: #87BF7E;
@primary-trans: fade(@primary, 75%);
@primary-ghost: fade(@primary, 30%);
@primary-dark: #3DAF2C;
@primary-dark-trans: fade(@primary-dark, 75%);
@primary-dark-ghost: fade(@primary-dark, 30%);
@primary-abyss: #1b5c10;
@primary-abyss-trans: fade(@primary-abyss, 75%);
@primary-abyss-ghost: fade(@primary-abyss, 30%);
@secondary: #4059FF;
@secondary-trans: fade(@secondary, 75%);
@secondary-ghost: fade(@secondary, 30%);
@secondary-dark: #2F41BB;
@secondary-dark-trans: fade(@secondary-dark, 75%);
@secondary-dark-ghost: fade(@secondary-dark, 30%);
@secondary-abyss: #1A2469;
@secondary-abyss-trans: fade(@secondary-abyss, 75%);
@secondary-abyss-ghost: fade(@secondary-abyss, 30%);
@highlight: #9E2CAF;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@highlight-dark: #661b6f;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@muted: #DAE8D8;
@muted-trans: fade(@muted, 90%);
@muted-ghost: fade(@muted, 30%);
@white: #ffffff;
@white-trans: fade(@white, 75%);
@white-ghost: fade(@white, 30%);
@white-wisp: fade(@white, 15%);
@black: #252627;
@black-trans: fade(@black, 75%);
@black-ghost: fade(@black, 30%);
@gray-light: #dedcdc;
@gray: #8c9196;
@gray-dark: #54575a;

@focal-color: #9E2CAF; // Contrast to site colors
@focal-outline: {
  outline: 3px solid @focal-color;
  outline-offset: -3px;
  transition: 0s;
}
@focal-outline-important: {
  outline: 3px solid @focal-color !important;
  outline-offset: -3px;
  transition: 0s;
}

@radius: 2px;
@border-width: 1px;
@border-width-thick: 3px;
@border-default: @border-width solid @gray-light;
@border-primary: @border-width solid @primary;
@border-white: @border-width solid @white;

.box-shadow(@shadows) {
  -webkit-box-shadow: @shadows;
  -moz-box-shadow: @shadows;
  box-shadow: @shadows;
}

// Example
// div {
//   .box-shadow(2px 2px 2px 0 fade(@black, 20%)~"," 0 30px 25px 0 fade(@black, 10%));
// }

.uk-button {
  &-default, &-primary, &-secondary {
    box-sizing: border-box;
    border-width: @border-width;
    border-radius: @radius;
    text-transform: uppercase;
  }

  &-secondary {
    position: relative;
    border: @border-width solid fade(@primary-abyss, 50%);
    background: none;
    overflow: hidden;
    color: @black;
    z-index: 1;
    transition: color .6s .2s, background .8s, border-color .8s;

    &::after {
      position: absolute;
      content: "";
      background: linear-gradient(90deg, transparent 10px, transparent 10.5px, transparent 20px, @primary-dark 20.5px, @primary-dark 30px, transparent 30.5px, transparent 40px, @primary-dark 40.5px, @primary-dark 50px, transparent 50.5px, transparent 60px, @primary-dark 60.5px);
      width: ~"calc(100% + 100px)";
      height: 100%;
      left: 100%;
      top: 0;
      transform-style: preserve-3d;
      will-change: transform;
      backface-visibility: hidden;
      transform: translateX(-40px);
      z-index: -1;
      transition: ease-in-out 1s;
    }

    span {
      display: inline-block;
      transform: translateX(-10px);
      transition: transform ease-in-out .8s;
    }

    &:hover {
      background: none;
      border: @border-width solid @primary-dark;
      color: @white;
      transition: color .2s 0s, background .4s, border-color .3s;

      &::after {
        transform: translateX(-100%);
        transition: ease-in .3s;
      }

      span {
        transform: translateX(0);
        transition: transform ease-in .3s;
      }
    }
  }

  &.spec {
    min-width: 259px;

    @media (max-width: 959px) {
      background: @white
    }
  }

  @media (max-width: 959px) {
    min-width: auto;
  }
}

.uk-container {
  max-width: 1400px;

  &-large {
    max-width: 1600px;
  }

  &-small {
    max-width: 900px;
  }
}

.tm-toolbar {
  background: none;

  > .uk-container-large {
    max-width: 1400px;
  }
}

[uk-lightbox]:not([uk-lightbox*="video"]) {
  position: relative;

  &::before {
    //display: inline-block;
    position: absolute;
    content: "\2922";
    padding: 2px 5px 0 5px;
    border: @border-width solid @white;
    border-radius: @radius;
    background: @primary;
    color: @white;
    font-size: 1.5rem;
    line-height: 1.1;
    bottom: 20px;
    right: 20px;
    pointer-events: none;
    transition: .8s;
  }

  &:hover {
    &::before {
      background: @white;
      color: @primary-dark;
      transition: .3s;
    }
  }
}

[href*="mailto"] {
  font-size: .9rem;
}

h1 {
  > span {
    display: block;
  }
}

html {
  h2 {
    font-weight: 400;

    span {
      display: inline-block;
      color: @primary-dark;
      font-weight: 900;
      transform: translateY(.5px);
    }
  }
}

.uk-dotnav>*>* {
  border-radius: @radius;
}

.bg-primary {
  background: @primary;
}

.bg-primary-trans {
  background: @primary-trans;
}

.bg-primary-ghost {
  background: @primary-ghost;
}

.bg-primary-dark {
  background: @primary-dark;
}

.bg-primary-dark-trans {
  background: @primary-dark-trans;
}

.bg-primary-dark-ghost {
  background: @primary-dark-ghost;
}

.bg-primary-abyss {
  background: @primary-abyss;
}

.bg-primary-abyss-trans {
  background: @primary-abyss-trans;
}

.bg-primary-abyss-ghost {
  background: @primary-abyss-ghost;
}

.bg-secondary {
  background: @secondary;
}

.bg-secondary-trans {
  background: @secondary-trans;
}

.bg-secondary-ghost {
  background: @secondary-ghost;
}

.bg-secondary-dark {
  background: @secondary;
}

.bg-secondary-dark-trans {
  background: @secondary-dark-trans;
}

.bg-secondary-dark-ghost {
  background: @secondary-dark-ghost;
}

.bg-secondary-abyss {
  background: @secondary;
}

.bg-secondary-abyss-trans {
  background: @secondary-abyss-trans;
}

.bg-secondary-abyss-ghost {
  background: @secondary-abyss-ghost;
}

.bg-white {
  background: @white;
}

.bg-white-trans {
  background: @white-trans;
}

.bg-white-ghost {
  background: @white-ghost;
}

.bg-black {
  background: @black;
}

.bg-black-trans {
  background: @black-trans;
}

.bg-black-ghost {
  background: @black-ghost;
}

.bg-muted {
  background: @muted;
}

.bg-muted-trans {
  background: @muted-trans;
}

.bg-muted-ghost {
  background: @muted-ghost;
}

.bg-gray {
  background: @gray;
}

.bg-gray-light {
  background: @gray-light;
}

.bg-gray-dark {
  background: @gray-dark;
}

.bg-highlight {
  background: @highlight;
}

.bg-highlight-trans {
  background: @highlight-trans;
}

.bg-highlight-ghost {
  background: @highlight-ghost;
}

.bg-gray {
  background: @gray;
}

.bg-graded {
  background: linear-gradient(0deg, @white 20%, @muted 75%);
  background: linear-gradient(in oklch 0deg, @white 20%, @muted 75%);
}

.bg-graded-flip {
  background: linear-gradient(180deg, @white 20%, @muted 75%);
  background: linear-gradient(in oklch 180deg, @white 20%, @muted 75%);
}

.bg-graded-angle {
  background: linear-gradient(150deg, @white 20%, @muted 75%);
  background: linear-gradient(in oklch 150deg, @white 20%, @muted 75%);
}

@bg-abyss-graded: linear-gradient(0deg, @primary-abyss 40%, @primary 80%);

hr {
  border-top: @border-width solid @gray-light
}

hr.thick {
  border-top-width: 4px;
}

hr.narrow {
  width: 60%;
}

hr.center {
  margin-left: auto;
  margin-right: auto;
}

hr.primary, .uk-section-primary:not(.uk-preserve-color) hr.primary {
  border-top-color: @primary;
}

hr.primary-dark, .uk-section-primary:not(.uk-preserve-color) hr.primary-dark {
  border-top-color: @primary-dark;
}

hr.primary-abyss, .uk-section-primary:not(.uk-preserve-color) hr.primary-abyss {
  border-top-color: @primary-abyss;
}

hr.black, .uk-section-primary:not(.uk-preserve-color) hr.black {
  border-top-color: @black;
}

hr.white, .uk-section-primary:not(.uk-preserve-color) hr.white {
  border-top-color: @white;
}

hr.gray, .uk-section-primary:not(.uk-preserve-color) hr.gray {
  border-top-color: @gray;
}

hr.gray-light, .uk-section-primary:not(.uk-preserve-color) hr.gray-light {
  border-top-color: @gray-light;
}

hr.gray-dark, .uk-section-primary:not(.uk-preserve-color) hr.gray-dark {
  border-top-color: @gray-dark;
}

.radius {
  border-radius: @radius;
}

.border-default {
  border: @border-default;
  border-radius: @radius;
}

.border-primary {
  border: @border-primary;
  border-radius: @radius;
}

.text-primary {
  color: @primary;
}

.text-primary-dark {
  color: @primary-dark;
}

.text-primary-abyss {
  color: @primary-abyss;
}

.text-secondary {
  color: @secondary;
}

.text-secondary-dark {
  color: @secondary-dark;
}

.text-secondary-abyss {
  color: @secondary-abyss;
}

.text-white {
  color: @white;
}

.text-white-trans {
  color: @white-trans;
}

.text-white-ghost {
  color: @white-ghost;
}

.text-black {
  color: @black;
}

.text-black-trans {
  color: @black-trans;
}

.text-black-ghost {
  color: @black-ghost;
}

.text-gray {
  color: @gray;
}

.text-gray-light {
  color: @gray-light;
}

.text-gray-dark {
  color: @gray-dark;
}

.text-highlight {
  color: @highlight;
}

.text-highlight-dark {
  color: @highlight-dark;
}

.tm-page {
  background: @muted;
}

.tm-main {
  .frontpage {
    margin-top: -90px;
  }
}
/* End Global Styles */

/* Header Format */
// Upper CTA
.tm-header {
  .upper-cta {
    position: relative;
    margin-right: -10px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: linear-gradient(110deg, fade(@muted, 0%) 0px, fade(@muted, 85%) 100px);
      width: 70vw;
      height: 100%;
      left: -120px;
      top: 0;
      z-index: -1;
      transition: .3s .15s;
    }

    > a {
      padding: 3px 10px 2px 10px;
      position: relative;
      z-index: 1;

      > span {
        display: inline-block;

        &:nth-child(1) {
          &.uk-icon {
            transform: scale(.95);
            backface-visibility: hidden;
            transform-style: preserve-3d;
            will-change: transform;
            transition: transform .8s;
          }
        }
      }

      &:hover {
        transition: .3s;

        > span {
          &:nth-child(1) {
            &.uk-icon {
              transform: scale(1.2);
              transition: transform .3s;
            }
          }
        }
      }
    }
  }

  &.uk-sticky-below {
    .upper-cta {
      &::before {
        transform: translateX(~"calc(100% + 100px)");
        transition: .6s .7s;
      }
    }
  }

  &:hover {
    &.uk-sticky-below {
      .upper-cta {
        &::before {
          transform: translateX(0);
          transition: .3s .1s;
        }
      }
    }
  }
}
//

.tm-header-mobile {
  > .uk-navbar-container {
    background: @white;
  }

  .uk-logo{
    img {
      padding: 4px 0;
      height: 40px;
      width: auto;
    }
  }

  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    min-height: 40px;
  }
}

#tm-dialog-mobile {
  .toggle_sub {
    width: 5% !important;
    color: @gray;
    transition: .3s;

    &.nr_active {
      color: @black;
    }
  }

  a {
    .uk-nav-parent-icon {
      display: none;
    }
  }

  .menu-item {
    &.uk-active {
      > a {
        text-transform: uppercase;
      }
    }
  }

  .uk-parent {
    > .uk-nav-sub {
      margin-left: 15px !important;
    }
  }
}
//

// Floating Logo If Layout Is Stacked
 .tm-header {
   .tm-headerbar-top {
     > .uk-container {
       position: relative;
       z-index: 2;

       .uk-logo {
         display: inline-block;
         position: absolute;
         content: "";
         width: 240px;
         bottom: -53px;
         left: 40px;

         img {
           width: 100%;
           height: auto;
         }
       }
     }
   }

   .uk-navbar-container {
     position: relative;
     z-index: 1;

     &::before {
       position: absolute;
       content: "";
       background: fade(@white, 85%);
       backdrop-filter: blur(5px);
       -webkit-backdrop-filter: blur(5px);
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       z-index: -1 ;
       transition: .3s 0s;
     }
     .uk-navbar {
       .uk-navbar-left {
         margin: 0 0 0 auto;
       }
     }
   }

   &.uk-sticky-below {
     box-shadow: 0 3px 3px 0 transparent;
     transition: .3s;

     .uk-navbar-container {
       &::before {
         background: fade(@white, 0%);
         backdrop-filter: blur(0px);
         -webkit-backdrop-filter: blur(0px);
         transition: .4s .5s;
       }
     }
   }

   &:hover {
     box-shadow: 0 3px 3px 0 fade(black, 7%);

     .uk-navbar-container {
       &::before {
         background: fade(@white, 85%);
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
         transition: .3s 0s;
       }
     }
   }
 }
//

// Header Styles for Regular Menu & Dropdowns
.tm-header {
  box-shadow: 0 3px 3px 0 rgba(0,0,0,.07);

  // Dropdown Menu Items
  .uk-navbar-dropdown {
    background: @muted;
    background: none;
    border-top: 1px solid #DCDCDC;
    border-bottom: 4px solid @gray;
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15);

    /* Blurred BG */
    > div {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: fade(@white, 80%);
        backdrop-filter: blur(10px);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }

    .uk-nav {
      > li {
        > a {
          padding: 10px 30px 10px 15px;
          transition: .4s;
        }

        &:hover {
          > a {
            background: @primary-dark;
            color: @white;
          }
        }

        &.uk-active {
          > a {
            border-left: 10px solid @primary-dark;
          }

          &:hover {
            > a {
              color: @white;
            }
          }
        }

        // Sub w/ Children
        &.uk-parent {
          > a.menu-item-has-children {
            position: relative;

            &::after {
              position: absolute;
              content: '\203A';
              font-size: 150%;
              font-weight: 700;
              top: 50%;
              transform: translateY(-50%);
              right: 15px;
              color: @primary-dark;
              transition: .4s;
            }

            &:hover {
              &::after {
                color: @white;
              }
            }
          }
        }
      }

      // Sub Children Dropdown
      .uk-nav-sub {
        background: @muted;

        a {
          padding: 12px 20px;
        }
      }
    }
  }
  //
}
//

// Nav Item Responsiveness
@media only screen and (max-width: 1300px) {
  .uk-navbar-nav>li>a {
     font-size: .9rem;
  }
  .uk-navbar-nav {
     gap: 17px;
  }
}

@media only screen and (max-width: 1130px) {
  .uk-navbar-nav>li>a {
    font-size: .8rem;
  }
  .tm-header .tm-headerbar-top > .uk-container .uk-logo {
    width: 160px;
    bottom: -46px;
  }
}
//

// Mobile Menu
#tm-mobile .toggle_sub, #tm-mobile .uk-nav > li > a, #tm-mobile>div .uk-nav>li.uk-active>a:hover {
}
//
/* End Header Menu Styles */

/* General */
.uk-button-text:not(.upper-cta .uk-button-text) {
  position: relative;
  padding: 5px 10px 5px 15px;
  text-align: left;
  text-transform: uppercase;
  z-index: 1;

  &::before {
    position: absolute;
    content: "";
    border-radius: @radius;
    border-left: @border-width solid @gray-light;
    border-bottom: @border-width solid @gray-light;
    width: 100%;
    height: 100%;
    left: 4px;
    top: 0;
    z-index: -1;
  }

  &::after {
    position: absolute;
    content: "\25B6";
    font-size: .8rem;
    line-height: 1;
    left: 0;
    top: 50%;
    transform: translateX(0) translateY(-50%);
    transition: transform .7s;
    z-index: -1;
  }

  &:hover {
    &::before {
      border-left-color: @primary;
      border-bottom-color: @primary;
    }

    &::after {
      transform: translateX(4px) translateY(-50%);
      transition: transform .2s;
    }
  }
}

.custom-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.body-plain {
  h2 {
    max-width: 75%;

    @media (max-width: 1399px) {
      max-width: 100%;
    }

    br {
      @media (max-width: 959px) {
        display: none;
      }
    }
  }

  &.simple {
    overflow: hidden;

    &.pad-adjust {
      margin-bottom: -40px;
      padding-bottom: 100px;
    }

    .hut-hut {
      position: relative;
      z-index: 2;

      &::before {
        position: absolute;
        content: "";
        width: 0px;
        height: 0px;
        left: ~"calc(50% - 61.4px)";
        bottom: -100px;
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
        border-top: 40px solid @white;

        @media (max-width: 1145px) {
          display: none;
        }
      }
    }

    .image-hut {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: 2.8px;
        height: 134%;
        right: ~"calc(50% - 0px)";
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;

        @media (max-width: 1145px) {
          display: none;
        }
      }

      &::after {
        position: absolute;
        content: "";
        border: @border-width-thick solid @primary-abyss;
        border-left: none;
        background: @white;
        width: ~"calc(50% + 20px)";
        height: ~"calc(100% + 40px)";
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;

        @media (max-width: 1145px) {
          display: none;
        }
      }

      .uk-cover-container {
        height: 600px;
        max-height: 600px;
        border: @border-width-thick solid @primary-abyss;
        border-radius: @radius;

        @media (max-width: 959px) {
          height: 350px;
          max-height: 350px;
        }
      }
    }

    .video-hut {
      border: @border-width-thick solid @primary-abyss;
      border-radius: @radius;
    }
  }

  &.expand {
    position: relative;
    padding-top: 140px;
    padding-bottom: 140px;

    @media (max-width: 1399px) {
      padding-top: 80px;
      padding-bottom: 60px;
    }

    &::before {
      position: absolute;
      content: "";
      background: @primary-abyss;
      width: 3px;
      height: ~"calc(100% + 1px)";
      left: 25%;
      left: ~"calc(25% - 2px)";
      top: 0;
      backface-visibility: hidden;
      will-change: transform;
      transform-origin: center;

      @media (max-width: 1399px) {
        display: none;
      }
    }

    .container-container-container {
      position: relative;
      z-index: 1;

      .cover-container-container {
        .uk-cover-container {
          border: @border-width-thick solid @primary-abyss;
          border-radius: @radius;
          transform: perspective(345px) rotateY(3deg) translateX(-10px);
        }

        .video-hut {
          position: relative;
          margin: 0 0 0 auto;
          border: @border-width-thick solid @primary-abyss;
          border-radius: @radius;
          overflow: hidden;
          outline: 2px solid @primary-abyss;
          outline-offset: -4.1px;
          max-width: 1000px;
          transform: perspective(100px) rotateY(1.5deg) translateX(30px) translateZ(0);

          @media (max-width: 1399px) {
            margin: 0 auto;
            border-left: none;
            border-right: none;
            outline: none;
            transform: unset;
          }
        }
      }
    }

    &.flip {
      &::before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: @border-width-thick;
        height: ~"calc(92% + 2px)";
        left: 75%;
        top: 0;
        transform: translateX(1px);
      }

      &::after {
        position: absolute;
        content: "";
        border-top: @border-width-thick solid @primary-abyss;
        border-left: @border-width-thick solid @primary-abyss;
        border-radius: @radius;
        width: ~"calc(50% + 2px)";
        height: 100%;
        top: 92%;
        left: 50%;
        will-change: transform;
        transform: translateX(-50%);

        @media (max-width: 1399px) {
          display: none;
        }
      }

      .cover-container-container {
        .uk-cover-container {
          border: @border-width-thick solid @primary-abyss;
          border-radius: @radius;
          transform: perspective(345px) rotateY(-3deg) translateX(-10px);

          @media (max-width: 1399px) {
            border-left: none;
            border-right: none;
            transform: unset;
          }
        }
      }
    }

    .uk-cover-container {
      height: 600px;

      @media (max-width: 1399px) {
        height: 500px;
      }

      @media (max-width: 959px) {
        height: 400px;
      }
    }

    .content-container {
      position: relative;
      z-index: 2;
    }
  }
}

.body-fancy-bg {
  position: relative;
  border-top: @border-width-thick solid @primary-abyss;
  border-bottom: @border-width-thick solid @primary-abyss;
  background-color: fade(@primary-abyss, 50%);
  background-blend-mode: multiply;
  z-index: 2;

  .uk-card {
    border-radius: @radius;
    background-color: fade(@white, 75%);
    backdrop-filter: blur(10px);

    h2 {
      margin: 0 auto;
      max-width: 75%;

      @media (max-width: 959px) {
        max-width: 100%;
      }
    }

    hr {
      margin: 0 auto 5px auto;
      border-top-color: @gray;
    }

    .hover-target {
      .icon-hut {
        padding: 20px;
        overflow: hidden;
        max-height: 160px;
        will-change: transform;
        backface-visibility: hidden;
        transform-origin: bottom;
        transform: scale(1);
        transition: transform .8s;

        svg {
          width: 100%;
          max-width: 100px;

          .cls-1 {
            fill: @primary-abyss;
            transition: .8s;
          }
        }
      }

      h3 {
        position: relative;
        border-top: @border-width solid @black;
        border-bottom: @border-width solid @black;
        line-height: 1.4;
        color: @black;
        text-shadow: 0 1px 0 transparent, 0 2px 0 transparent, 0 3px 0 transparent;
        transition: color .6s, text-shadow .6s;

        @media (max-width: 666px) {
          font-size: 1.3rem;
        }

        @media (max-width: 659px) {
          font-size: 1.5rem;
        }

        &::before {
          position: absolute;
          content: "";
          background: @primary-abyss;
          width: 100%;
          height: @border-width-thick;
          left: 0;
          top: -1.5px;
          will-change: transform;
          transform-origin: left center;
          transform: scaleX(0);
          transition: .8s;
        }

        &::after {
          position: absolute;
          content: "";
          background: @primary-abyss;
          width: 100%;
          height: @border-width-thick;
          right: 0;
          bottom: -1.5px;
          will-change: transform;
          transform-origin: right center;
          transform: scaleX(0);
          transition: .8s;
        }

        span {
          display: inline-block;
          transform: translateY(0);
          transition: transform .6s;
        }
      }

      &:hover {
        .icon-hut {
          transform: scale(1.05);
          transition: transform .3s;

          svg {
            .cls-1 {
              fill: @primary-dark;
              transition: .3s;
            }
          }
        }

        h3 {
          color: @primary-dark;
          text-shadow: 0 1px 0 @primary-abyss, 0 2px 0 @primary-abyss, 0 3px 0 @primary-abyss;
          transition: color .3s, text-shadow .3s;

          &::before {
            transform: scaleX(1);
            transition: .3s;
          }

          &::after {
            transform: scaleX(1);
            transition: .3s;
          }

          span {
            transform: translateY(-1px);
            transition: transform .3s;
          }
        }
      }
    }
  }
}
/* End General */

/* Frontpage Styles */
.frontpage {
  header {
    background-position: 30% 50%;
    overflow: hidden;

    .gradient-light {
      background: linear-gradient(329deg, fade(@white, 85%) 24%, fade(@white, 0%) 41%);

      @media (max-width: 959px) {
        background: linear-gradient(0deg, fade(@white, 75%) 24%, fade(@white, 0%) 50%);
      }

      @media (max-width: 431px) {
        background: linear-gradient(0deg, fade(@white, 75%) 24%, fade(@white, 0%) 90%);
      }

      @media (max-width: 400px) {
        background: fade(@white, 60%);
      }
    }

    .uk-card {
      position: relative;
      margin: 0 0 0 auto;
      padding-bottom: 40px;
      width: 550px;
      z-index: 1;

      @media (max-width: 959px) {
        margin: 0 auto;
        width: 100%;
      }

      h1 {
        font-size: 2.2rem;
        line-height: 1.2;

        span {
          &:nth-child(1) {
            position: relative;
            margin: 0 0 10px auto;
            max-width: 500px;
            color: @primary-dark;
            text-transform: uppercase;
            text-shadow: 0 -.05em .03em fade(@white, 60%), 0 .09em 0 fade(@primary-abyss, 100%);
            z-index: 1;

            @media (max-width: 959px) {
              margin: 0 auto 10px auto;
            }
          }

          &:nth-child(2) {
            position: relative;
            color: @black;
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.6;
            font-style: italic;
            text-shadow: 0 .05em 1px fade(white, 85%), 0 .1em .2em fade(white, 85%);
            z-index: 1;
          }
        }
      }
    }
  }

  .services {
    .hover-hut {
      position: relative;
      overflow: hidden;
      width: 100%;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: 100%;
        height: 120%;
        left: 0;
        top: 0;
        transform: translateY(-100%);
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
        transition: .6s;
        z-index: -1;
      }

      a {
        display: block;
        position: relative;
        padding: 16px 0 14px 0;
        font-size: 1.3rem;
        text-transform: uppercase;
        font-weight: 400;
        text-shadow: 0 1px 0 transparent, 0 2px 0 transparent, 0 3px 0 transparent, 0 4px 0 transparent;
        transition: .4s .1s;

        @media (max-width: 1165px) {
          font-size: 1.12rem;
        }

        @media (max-width: 959px) {
          padding: 7px 0 10px 0;
          font-weight: 600;
        }

        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: 100px;
          height: @border-width;
          left: 50%;
          bottom: 15px;
          transform: translateX(-50%) scaleX(1);
          transition: .8s .2s;

          @media (max-width: 959px) {
            width: 200px;
            bottom: 10px;
          }
        }

        &::after {
          position: absolute;
          content: "";
          background: @white;
          width: @border-width;
          height: 50px;
          left: 50%;
          top: ~"calc(100% - 15px)";
          transform: translateX(-50%) translateY(0);
          transition: .3s 0s;

          @media (max-width: 959px) {
            height: 5px;
            top: ~"calc(100% - 10px)";
          }
        }
      }

      &:hover {
        &::before {
          transform: translateY(0);
          transition: .2s;
        }

        a {
          text-shadow: 0 1px 0 @primary-abyss, 0 2px 0 @primary-abyss, 0 3px 0 @primary-abyss, 0 4px 0 @primary-abyss;

          &::before {
            transform: translateX(-50%) scaleX(0);
            transition: .1s 0s;
          }

          &::after {
            transform: translateX(-50%) translateY(16px);
            transition: .1s .1s;
          }
        }
      }
    }
  }

  .first-section {
    position: relative;
    margin-bottom: -40px;
    padding-bottom: 90px;
    overflow: hidden;
    background: @muted;
    background: linear-gradient(0deg, @primary-abyss 0%, @primary 90px, @muted 75%);
    background: linear-gradient(in oklch 0deg, @primary-abyss 0%, @primary 90px, @muted 75%);
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% ~"calc(100% - 40px)", ~"calc(75% + 60px)" ~"calc(100% - 40px)", ~"calc(75% + 2.5px)" 100%, ~"calc(75% - 60px)" ~"calc(100% - 40px)", 0 ~"calc(100% - 40px)");
    z-index: 2;

    @media (max-width: 1399px) {
      clip-path: polygon(0 0, 100% 0, 100% ~"calc(100% - 40px)", ~"calc(50% + 60px)" ~"calc(100% - 40px)", 50% 100%, ~"calc(50% - 60px)" ~"calc(100% - 40px)", 0 ~"calc(100% - 40px)");
    }

    .logomark {
      position: absolute;
      width: 1800px;
      left: ~"calc(50% - 0px)";
      bottom: 0;
      transform: translate(-50%, 25%);
      opacity: .8;
      pointer-events: none;
    }

    .uk-container {
      padding: 0 80px;

      @media (max-width: 639px) {
        padding: 0 40px;
      }

      .image-hut {
        position: relative;
        text-align: center;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @black;
          width: 50%;
          height: @border-width;
          left: ~"calc(50% + 30px)";
          bottom: -4px;
          z-index: -1;
        }

        &::after {
          position: absolute;
          content: "";
          background: @black;
          width: 50%;
          height: @border-width;
          right: ~"calc(50% + 30px)";
          bottom: -4px;
          z-index: -1;
        }

        a {
          display: inline-block;
          position: relative;
          width: 100%;
          max-width: 400px;
          z-index: 1;

          span {
            position: absolute;
            width: 20px;
            height: 20px;
            left: ~"calc(50% - 9px)";
            bottom: -9px;

            svg {
              color: @black;
              backface-visibility: hidden;
              will-change: transform, color;
              transform: rotate(0);
              transition: .8s ease;
            }
          }

          > img {
            padding: 10px 30px 20px 30px;
            max-width: 400px;
            will-change: transform, filter;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transform: scale(1);
            filter: drop-shadow(0 -1.5px 1px transparent) drop-shadow(0 1px 1px transparent) drop-shadow(0 1.5px 1px transparent) drop-shadow(0 2.25px 1px transparent);
            transition: ease-in-out .8s;
          }

          &:hover {
            > img {
              transform: scale(1.03);
              filter: drop-shadow(0 -1.5px 1px @white) drop-shadow(0 1px 1px fade(@primary-abyss, 50%)) drop-shadow(0 1.5px 1px fade(@primary-abyss, 50%)) drop-shadow(0 2.25px 1px fade(@primary-abyss, 50%));
              transition: ease-in-out .2s;
            }

            span {
              svg {
                color: @primary-dark;
                transform: rotate(45deg);
                transition: .3s ease;
              }
            }
          }
        }
      }

      p {
        text-align: justify;
        text-shadow: 0 0 2px fade(@white, 50%), 0 0 4px fade(@white, 75%), 0 0 10px fade(@white, 75%);
      }
    }
  }
}
//

// Last Section
.last-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, @primary-abyss 0%, @primary 200px, @muted 80%);
  background: linear-gradient(in oklch 180deg, @primary-abyss 0%, @primary 200px, @muted 80%);
  z-index: 1;

  .massive-mil {
    position: absolute;
    pointer-events: none;
    width: 200vw;
    min-width: 2000px;
    max-width: 3000px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  h2 {
    position: relative;
    margin-bottom: 30px;

    &::before {
      position: absolute;
      content: "";
      background: fade(@white, 65%);
      backdrop-filter: blur(10px);
      width: 50%;
      height: @border-width-thick;
      left: -20px;
      bottom: -6px;
    }

    &::after {
      position: absolute;
      content: "";
      background: fade(@white, 65%);
      backdrop-filter: blur(10px);
      width: 50%;
      height: @border-width-thick;
      right: -20px;
      bottom: -6px;
    }

    span {
      display: block;
      color: @white;

      &:nth-child(1) {
        font-size: 2.6rem;
        font-weight: 900;
        text-shadow: 0 .5px 0 @primary, 0 1px 0 @primary, 0 1.5px 0 @primary-dark, 0 2px 0 @primary-dark, 0 2.5px 0 @primary-dark, 0 3px 0 @primary-dark, 0 3.5px 0 @primary-abyss, 0 4px 0 @primary-abyss, 0 4.5px 0 @primary-abyss, 0 5px 0 @primary-abyss, 0 5.5px 0 @primary-abyss, 0 6px 0 @primary-abyss, 0 6.5px 0 @primary-abyss, 0 7px 0 @primary-abyss;

        @media (max-width: 639px) {
          font-size: 2rem;
        }
      }

      &:nth-child(2) {
        color: @black;
        font-weight: 400;
        letter-spacing: 3px;
      }
    }
  }

  p {
    position: relative;
    padding: 10px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: fade(@white, 65%);
      backdrop-filter: blur(10px);
      width: ~"calc(100% + 40px)";
      height: ~"calc(100% + 20px)";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
  }

  .grid-house {
    position: relative;
    margin-top: 40px;
    padding: 0 10px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      border-radius: @radius;
      background: fade(@white, 65%);
      backdrop-filter: blur(10px);
      width: ~"calc(100% + 40px)";
      height: ~"calc(100% + 40px)";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
  }
}
//
/* End Frontpage Styles */

/* Footer Styles */
#footer {
  overflow: hidden;

  h3, a {
    color: darken(@primary-abyss, 3%);
  }

  a {
    transition: .6s;

    &:hover {
      color: @white;
      transition: .2s;
    }
  }

  .footer-logo {
    img {
      filter: drop-shadow(0 1px 0 transparent) drop-shadow(0 2px 0 transparent) drop-shadow(0 3px 0 transparent) drop-shadow(0 3px 2px fade(@black, 0%));
      transition: .8s;
    }

    &:hover {
      img {
        filter: drop-shadow(0 1px 0 @primary-dark) drop-shadow(0 2px 0 @primary-dark) drop-shadow(0 3px 0 @primary-dark) drop-shadow(0 3px 2px fade(@black, 50%));
        transition: .3s;
      }
    }
  }

  .hover-target {
    hr.white {
      position: relative;
      border-color: @primary-abyss;

      &::before {
        position: absolute;
        content: "";
        background: @primary-dark;
        width: 100%;
        height: @border-width;
        left: 0;
        top: -1px;
        transform-origin: left;
        transform: scaleX(0);
        transition: .5s .3s ease-in-out;
      }

      &::after {
        position: absolute;
        content: "";
        background: @white;
        width: 100%;
        height: @border-width;
        right: 0;
        top: -1px;
        transform-origin: right;
        transform: scaleX(0);
        transition: .3s 0s ease-in-out;
      }
    }

    &:hover {
      hr.white {
        &::before {
          transform: scaleX(1);
          transition: .3s 0s ease-in-out;
        }

        &::after {
          transform: scaleX(1);
          transition: .3s .3s ease-in-out;
        }
      }
    }
  }

  .description-block {
    position: relative;
    padding: 0 20px;
    z-index: 1;

    @media (max-width: 1399px) {
      padding: 20px;
    }

    &::before {
      position: absolute;
      content: "";
      background: @primary-abyss;
      width: 100%;
      height: 2000vh;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;

      @media (max-width: 1399px) {
        height: 100%;
      }
    }
  }

  .uk-accordion-content {
    .uk-list {
      li {
        position: relative;
        padding-left: 25px;

        &::before {
          position: absolute;
          content: "";
          border-radius: @radius;
          background: @primary-abyss;
          width: 15px;
          height: 15px;
          left: 0;
          top: 50%;
          transform-origin: left;
          transform: translateY(-50%) scaleX(0);
          transition: .6s ease-in-out;
        }

        &:hover {
          &::before {
            background: @white;
            transform: translateY(-50%) scaleX(1);
            transition: .2s ease-in-out;
          }
        }
      }
    }
  }
}

// Mobile CTA
.mobile-cta {
  display: none;

  @media (max-width: 959px) {
    display: flex;
    position: fixed;
    top: 40px;
    left: 0;
    border-radius: 0;
    width: 100%;
    z-index: 555;

    a {
      &:nth-child(1) {
        padding: 0;
        border-radius: 0;
        border-right: 1px solid @white;
      }

      &:nth-child(2) {
        padding: 0;
        border-radius: 0;
        border-left: 1px solid @white;
      }
    }
  }
}

@media (max-width: 959px) {
  .tm-main {
    margin-top: 30px;
  }
}
//
/* End Footer Styles */

/* Mainpage Styles */
.mainpage {
  .header-main {
    .the-void {
      position: relative;
      z-index: 2;

      img {
        border-radius: @radius;
        border: @border-width solid @white;;
      }
    }

    .content-cell {
      position: relative;
      margin: 0 auto;
      z-index: 1;
      max-width: 606px;

      &::before {
        position: absolute;
        content: "";
        border-radius: @radius;
        border-left: @border-width solid @white;
        border-right: @border-width solid @white;
        background: @white-trans;
        background: linear-gradient(-10deg, fade(@white, 90%) 50%, @muted-ghost 75%, transparent 100%);
        backdrop-filter: blur(10px);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%);


        @media (max-width: 959px) {
          border-top: @border-width solid @white;
          background: linear-gradient(0deg, fade(@white, 90%) 60%, @muted-ghost 90%, transparent 100%);
          height: 100%;
          top: 0;
          transform: translateY(0%);
        }
      }

      .uk-tile {
        padding-top: 70px;
        padding-bottom: 70px;
      }

      h1 {
        position: relative;
        padding: 10px;
        color: @primary-abyss;
        font-size: 2.6rem;
        text-align: center;
        z-index: 1;

        @media (max-width: 639px) {
          font-size: 2rem;
        }

        span {
          &:nth-child(1) {
            position: relative;

            &::before {
              position: absolute;
              content: "";
              background: @primary-dark;
              width: 40%;
              height: @border-width;
              left: 50%;
              bottom: -3px;
              transform: translateX(-50%);
            }
          }

          &:nth-child(2) {
            margin-top: 10px;
            color: @black;
            font-size: 1.5rem;
            font-weight: 400;

            @media (max-width: 639px) {
              font-size: 1.2rem;
            }
          }
        }
      }

      .cta-hut {
        position: relative;
        z-index: 1;

        .uk-button {
          &.spec {
            min-width: 248px;
            font-size: .85rem;
          }
        }
      }
    }
  }

  .children {
    position: relative;
    margin-bottom: -20px;
    padding-top: 0;
    padding-bottom: 30px;
    background: @primary;
    clip-path: polygon(0 -30px, 100% -30px, 100% ~"calc(100% - 20px)", 50% 100%, 0 ~"calc(100% - 20px)");
    z-index: 2;

    &.bg-abyss-graded {
      background: @bg-abyss-graded;
    }

    .arrow {
      svg {
        polyline {
          stroke-width: @border-width-thick;
        }
      }

      &.left {
        position: relative;
        margin-right: -15px;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          border-radius: @radius;
          background: @primary-abyss;
          width: 100%;
          height: 100%;
          right: 50%;
          top: 0;
          transform-origin: center;
          transform: translateX(55%) scaleX(.15);
          z-index: -1;
          transition: .6s;
        }
      }

      &.right {
        position: relative;
        margin-left: -15px;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          border-radius: @radius;
          background: @primary-abyss;
          width: 100%;
          height: 100%;
          left: 50%;
          top: 0;
          transform-origin: center;
          transform: translateX(-55%) scaleX(.15);
          z-index: -1;
          transition: .6s;
        }
      }

      &:hover {
        &.left {
          &::before {
            background: @black;
            transform: translateX(50%) scaleX(1);
            transition: .1s;
          }
        }

        &.right {
          &::before {
            background: @black;
            transform: translateX(-50%) scaleX(1);
            transition: .1s;
          }
        }
      }
    }

    .uk-slider-container {
      margin-top: -30px;
    }

    .overlay-card {
      .uk-cover-container {
        border-radius: @radius;

        h3 {
          position: relative;
          padding: 10px 15px;
          color: @white;
          font-size: 1rem;
          font-weight: 400;
          text-transform: uppercase;
          line-height: 1.1;
          vertical-align: middle;
          text-shadow: 0 1px 0 @primary-abyss-ghost, 0 2px 0 @primary-abyss-ghost, 0 3px 0 @primary-abyss-ghost, 0 4px 0 @primary-abyss-ghost, 0 0 2px @primary-abyss-ghost, 0 0 2px @primary-abyss-ghost, 0 0 4px @primary-abyss-ghost, 0 0 4px @primary-abyss-ghost;
          backface-visibility: hidden;
          will-change: transform;
          transform: translateY(0);
          z-index: 1;
          transition: .8s ease-in-out;

          &::before {
            position: absolute;
            content: "";
            border-top: @border-width solid @primary-abyss;
            border-bottom: @border-width solid @primary-abyss;
            background: fade(@primary-abyss, 65%);
            backdrop-filter: blur(.5px);
            width: 110%;
            height: 100%;
            left: 50%;
            top: 50%;
            backface-visibility: hidden;
            will-change: transform;
            transform-origin: center;
            transform: translate(-50%, ~"calc(-50% + .5px)") scaleY(2);
            z-index: -1;
            transition: .8s ease-in-out;
          }
        }
      }

      &:hover {
        .uk-cover-container {
          h3 {
            text-shadow: 0 1px 0 @primary-abyss, 0 2px 0 @primary-abyss, 0 3px 0 @primary-abyss, 0 4px 0 @primary-abyss, 0 0 2px @primary-abyss-ghost, 0 0 2px @primary-abyss-ghost, 0 0 4px @primary-abyss-ghost, 0 0 4px @primary-abyss-ghost;
            transform: translateY(40px);
            transition: .3s ease-in-out;

            &::before {
              position: absolute;
              content: "";
              background: fade(@primary-dark, 70%);
              backdrop-filter: blur(4px);
              transform: translate(-50%, ~"calc(-50% + .5px)") scaleY(1.09);
              transition: .3s ease-in-out;
            }
          }
        }
      }
    }
  }

  .basic {
    padding: 70px 0;

    &.pad-adjust {
      padding-top: 100px;
    }

    .image-cell {
      position: relative;
      border: @border-width-thick solid @primary-abyss;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        border-radius: @radius;
        background: @primary-abyss;
        width: 50%;
        height: 75%;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        z-index: -1;

        @media (max-width: 959px) {
          width: ~"calc(100% + 30px)";
          left: 50%;
          transform: translate(-50%, -50%);
          clip-path: none;
        }
      }

      &::after {
        position: absolute;
        content: "";
        border-radius: @radius;
        background: @primary-dark;
        width: 50%;
        height: 40%;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: inset 5px 0 5px 0 fade(@black, 20%), inset 15px 0 10px 0 fade(@black, 20%);
        z-index: -1;

        @media (max-width: 959px) {
          width: ~"calc(100% + 30px)";
          left: 50%;
          transform: translate(-50%, -50%);
          clip-path: none;
          box-shadow: inset 5px 0 5px 0 fade(@black, 30%), inset -5px 0 5px 0 fade(@black, 30%);
        }
      }

      .uk-cover-container {
        height: 600px;
        max-height: 600px;

        @media (max-width: 959px) {
          max-height: 400px;
        }
      }
    }

    h2 {
      position: relative;
      text-align: center;

      &:before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: 40%;
        height: @border-width-thick;
        left: 50%;
        bottom: -7.5px;
        transform: translateX(-50%);
      }
    }

    &.flip {
      .image-cell {
        &::before {
          left: unset;
          right: -30px;
          clip-path: polygon(0 50%, 100% 0, 100% 100%);

          @media (max-width: 959px) {
            width: ~"calc(100% + 30px)";
            left: 50%;
            right: unset;
            transform: translate(-50%, -50%);
            clip-path: none;
          }
        }

        &::after {
          left: unset;
          right: -30px;
          box-shadow: inset -5px 0 5px 0 fade(@black, 20%), inset -15px 0 10px 0 fade(@black, 20%);

          @media (max-width: 959px) {
            width: ~"calc(100% + 30px)";
            left: 50%;
            right: unset;
            transform: translate(-50%, -50%);
            clip-path: none;
            box-shadow: inset 5px 0 5px 0 fade(@black, 30%), inset -5px 0 5px 0 fade(@black, 30%);
          }
        }
      }
    }
  }

  .cta-ribbon {
    position: relative;
    z-index: 1;

    &.ziggy {
      padding: 30px 0;
    }

    &::before {
      position: absolute;
      content: "";
      background: @primary;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
      z-index: -1;
    }

    .uk-card {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: ~"calc(100% + 40px)";
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
        z-index: -1;
      }

      > div {
        position: relative;
        padding: 70px 40px;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: ~"calc(100% + 40px)";
          height: 100%;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
          z-index: -1;
        }

        h2 {
          font-size: clamp(1.6rem, 3vw,2.7rem);
        }

        p {
          font-weight: 900;
        }
      }
    }
  }
}
/* End Mainpage Styles */

/* Subpage Styles */
.subpage {
  .uk-accordion {
    li {

      .uk-accordion-title {
        position: relative;
        transition: .3s;

        &::after {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: @border-width;
          left: 0;
          bottom: 0;
          transform-origin: left;
          transform: scaleX(0);
          transition: transform ease-in-out .8s;
        }
      }

      &.uk-open {
        .uk-accordion-title {
          color: @primary;

          &::after {
            transform: scaleX(1);
            transition: transform ease-in-out .3s;
          }
        }
      }
    }
  }

  &.base {
    .header-sub {
      h1 {
        font-size: 1.9rem;

        span {
          &:nth-child(2) {
            margin-top: 10px;
            font-size: 1.1rem;
            font-weight: 400;
          }
        }
      }
    }
  }

  .header-sub {
    padding-top: 40px;
    padding-bottom: 80px;
    overflow: hidden;

    @media (max-width: 959px) {
      padding: 40px 0
    }

    .coloring-book {
      background: fade(@primary-dark, 35%);
      backdrop-filter: saturate(110%);
    }

    .image-hut {
      border: @border-width solid @white;
      height: 250px;

      img {
        border-radius: @radius;
      }
    }

    .card-hut {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: fade(@white, 35%);
        backdrop-filter: blur(5px);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%) skewX(15deg);
        z-index: -1;

        @media (max-width: 959px) {
          display: none;
        }
      }

      &::after {
        position: absolute;
        content: "";
        background: fade(@white, 30%);
        backdrop-filter: blur(5px);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%) skewX(5deg);
        z-index: -1;

        @media (max-width: 959px) {
          display: none;
        }
      }

      .uk-card {
        h1 {
          color: @primary-abyss;
        }
      }
    }

    .uk-card {
      position: relative;
      z-index: 1;

      @media (max-width: 959px) {
        border: @border-width solid @white;
        border-radius: @radius;
      }

      &::before {
        position: absolute;
        content: "";
        background: fade(@white, 35%);
        backdrop-filter: blur(5px);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%) skewX(-15deg);
        z-index: -1;

        @media (max-width: 959px) {
          display: none;
        }
      }

      &::after {
        position: absolute;
        content: "";
        background: fade(@white, 15%);
        backdrop-filter: blur(5px);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 50%;
        transform: translateY(-50%) skewX(-5deg);
        z-index: -1;

        @media (max-width: 959px) {
          background: fade(@white, 45%);
          top: 0;
          transform: translateY(0) skewX(0deg);
        }
      }
    }
  }

  .first-section {
    padding: 70px 0;

    .uk-card {
      padding: 0 50px;
      border-left: 20px solid @primary;
      border-right: 20px solid @primary;

      @media (max-width: 749px) {
        padding: 0 15px;
        border-left-width: 5px;
        border-right-width: 5px;
      }
    }
  }

  &.base {
    .first-section {
      padding: 40px 0;

      .uk-card {
        position: relative;

        &::before {
          position: absolute;
          content: "";
          background: @primary;
          width: 100vw;
          height: 100%;
          left: 100%;
          top: 0;
        }

        &::after {
          position: absolute;
          content: "";
          background: @primary;
          width: 100vw;
          height: 100%;
          right: 100%;
          top: 0;
        }
      }
    }
  }

  .pseudo-divider {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      background: @primary-abyss;
      width: 100%;
      max-width: 1100px;
      height: @border-width;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }

  .angle {
    position: absolute;
    content: "";
    background: @white;
    width: 100%;
    height: 60px;
    left: 0;
    bottom: -1px;
    clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  }

  .cta-ribbon-sub {
    position: relative;
    margin: 0 auto;
    width: ~"calc(100% - 40px)";
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: @primary;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
      z-index: -1;
    }

    .uk-card {
      position: relative;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: ~"calc(100% + 40px)";
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
        z-index: -1;
      }

      > div {
        position: relative;
        padding: 70px 40px;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: ~"calc(100% + 40px)";
          height: 100%;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
          z-index: -1;
        }

        h2 {
          font-size: clamp(1.6rem, 3vw,2.7rem);
        }

        p {
            //font-size: clamp(1.1rem, 2.4vw,1.5rem);
            font-weight: 900;
        }
      }
    }
  }

  .content-loop {
    &.uk-card {
      padding: 40px;
      border-radius: @radius;
      border-left: @border-width solid @primary-abyss;
      border-bottom: @border-width solid @primary-abyss;
      background: @white;
      z-index: 1;

      @media (max-width: 639px) {
        padding: 20px;
      }

      .content-container {
        > :last-child {
          margin-bottom: 0;
        }

        h2 {
          position: relative;

          &::before {
            position: absolute;
            content: "";
            background: @primary-dark;
            width: 33%;
            height: @border-width;
            left: -60px;
            bottom: -5px;

            @media (max-width: 639px) {
              width: 50%;
              left: -40px;
            }
          }
        }
      }
    }
  }

  .basic {
    h2 {
      span {
        display: inline-block;
        position: relative;
        color: @black;
        font-weight: 400;
        text-shadow: 0 1px 1px @muted, 0 2px 2px @muted, 0 3px 3px @muted;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: @primary;
          background: linear-gradient(0deg, @primary-abyss 0%, @primary 75%);
          width: ~"calc(100% + 20px)";
          height: .5em;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          z-index: -1;
        }
      }
    }

    .uk-h4 {
      margin-top: 10px;
    }
  }
}
// Header - Sub
//

// Content Section
//

// Sidebar
aside {
  nav {
    border-bottom: @border-width-thick solid @primary-abyss;

    > a {
      color: @white;

      h3 {
        margin-bottom: 0;
        border-radius: @radius;
        border-top: @border-width-thick solid @primary-abyss;
        border-bottom: @border-width-thick solid @primary-abyss;
        background: @primary;
        padding: 10px;
        color: @white;
        text-align: center;
        text-shadow: 0 1px 1px @muted, 0 2px 2px @muted;
      }
    }

    ul {
      background: @white;
      margin-top: 0;

      li {
        padding: 8px 10px;

        &:not(:first-child) {
          border-top: @border-width solid @gray-light;
        }

        a {
          color: @primary-abyss;
          transition: .5s;
        }

        &:hover { // hover effects for li & child elements
          a {
            color: @primary;
          }
        }
      }

      &.uk-list>:nth-child(n+2) { // targeting li after first
        margin: 0;
      }
    }
  }
}
//
/* End Subpage Styles */

/* Misc Styles */
.related-pages {
  .uk-h3 {
    span {
      display: inline-block;
      position: relative;
      padding: 10px 15px;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary;
        width: 50%;
        height: @border-width;
        left: 100%;
        top: 50%;
        z-index: -1;
      }

      &::after {
        position: absolute;
        content: "";
        background: @primary;
        width: 50%;
        height: @border-width;
        right: 100%;
        top: 50%;
        z-index: -1;
      }
    }
  }
}

.about {
  @media (min-width: 1300px) {
    .uk-width-2-5\@l {
      width: 41%;
    }
  }
  @media (max-width: 1399px) {
    .uk-width-2-5\@l {
      width: 100%;
    }
  }

  .first-section {
    @media (max-width: 959px) {
      padding-bottom: 75px;
    }

    .image-cell {
      position: relative;
      margin: 0 auto 30px auto;
      max-width: 800px;
      z-index: 1;

      &::before {
        position: absolute;
        content: "";
        background: @primary-abyss;
        width: 105%;
        height: @border-width-thick;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-35deg);
        z-index: -1;
      }

      img {
        border: @border-width-thick solid @primary-abyss;
      }
    }
  }

  #sticky-staff {
    .image-cell {
      z-index: 1;

      img {
        padding: 20px;
        background: @primary;
      }
    }

    .uk-h3 {
      margin-top: 15px;
      font-size: 1.8rem;

      span {
        &::before, &::after {
          border-bottom-color: @primary;
        }
      }
    }

    .text-primary {
      span {
        display: inline-block;
        position: relative;
        padding: 0 10px 5px 10px;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          border: @border-width solid @primary;
          border-radius: @radius;
          border-top: none;
          width: ~"calc(100% + .5px)";
          height: ~"calc(100% + 1px)";
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
        }
      }
    }
  }
}

.vid-archive-section {
  &.pad-adjust {
    @media (max-width: 959px) {
      padding-top: 75px;
    }
  }
}

.fees {
  hr {
    &.tweak {
      @media (max-width: 959px) {
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

 .basic {
   .image-cell {
     position: relative;
     border: @border-width-thick solid @primary-abyss;
     z-index: 1;

     &::before {
       position: absolute;
       content: "";
       border-radius: @radius;
       background: @primary-abyss;
       width: 50%;
       height: 75%;
       left: -30px;
       top: 50%;
       transform: translateY(-50%);
       clip-path: polygon(0 0, 100% 50%, 0 100%);
       z-index: -1;

       @media (max-width: 959px) {
         width: ~"calc(100% + 30px)";
         left: 50%;
         transform: translate(-50%, -50%);
         clip-path: none;
       }
     }

     &::after {
       position: absolute;
       content: "";
       border-radius: @radius;
       background: @primary-dark;
       width: 50%;
       height: 40%;
       left: -30px;
       top: 50%;
       transform: translateY(-50%);
       box-shadow: inset 5px 0 5px 0 fade(@black, 20%), inset 15px 0 10px 0 fade(@black, 20%);
       z-index: -1;

       @media (max-width: 959px) {
         width: ~"calc(100% + 30px)";
         left: 50%;
         transform: translate(-50%, -50%);
         clip-path: none;
         box-shadow: inset 5px 0 5px 0 fade(@black, 30%), inset -5px 0 5px 0 fade(@black, 30%);
       }
     }

     .uk-cover-container {
       height: 600px;
       max-height: 600px;

       @media (max-width: 959px) {
         max-height: 400px;
       }
     }
   }

   .flip {
     .image-cell {
       &::before {
         left: unset;
         right: -30px;
         clip-path: polygon(0 50%, 100% 0, 100% 100%);

         @media (max-width: 959px) {
           width: ~"calc(100% + 30px)";
           left: 50%;
           right: unset;
           transform: translate(-50%, -50%);
           clip-path: none;
         }
       }

       &::after {
         left: unset;
         right: -30px;
         box-shadow: inset -5px 0 5px 0 fade(@black, 20%), inset -15px 0 10px 0 fade(@black, 20%);

         @media (max-width: 959px) {
           width: ~"calc(100% + 30px)";
           left: 50%;
           right: unset;
           transform: translate(-50%, -50%);
           clip-path: none;
           box-shadow: inset 5px 0 5px 0 fade(@black, 30%), inset -5px 0 5px 0 fade(@black, 30%);
         }
       }
     }
   }
 }
}

.faq {
  .uk-accordion {
    position: relative;
    padding: 40px 20px;
    z-index: 1;
  }
}

.careers {
  .basic {
    > .uk-container {
      max-width: 1100px;
    }
  }
  .careers-grid {
    &.uk-padding, .uk-padding {
      @media (max-width: 959px) {
        padding: 10px;
      }
    }

    .uk-list * {
      text-align: left;
    }

    .uk-accordion {
      .uk-accordion-content {
        .uk-card {
          padding-top: 10px;

          @media (max-width: 600px) {
            padding: 10px;
          }
        }
      }
    }
  }
}

.login {
  .login-grid {
    .hover-target {
      .uk-card {
        position: relative;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          background: linear-gradient(0deg, @muted 0%, @white 25%, @white 75%, @muted 100%);
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          transform-origin: top;
          transform: translateY(100%);
          opacity: 0;
          transition: transform ease-in-out .8s, opacity ease .8s;
          z-index: -1;
        }
      }

      &:hover {
        .uk-card {
          position: relative;
          z-index: 1;

          &::before {
            transform: translateY(0%);
            opacity: 1;
            transition: transform ease-in-out .2s, opacity ease .2s;
          }
        }
      }
    }
  }
}

.contact-us {
  .coloring-book {
    position: absolute;
    background-color: fade(@muted, 60%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    mix-blend-mode: lighten;
  }

  h1 {
    position: relative;
    color: @primary-abyss;

    &::before {
      position: absolute;
      content: "";
      background: @primary-abyss;
      width: 7em;
      height: @border-width;
      left: 0;
      bottom: -5px;
    }
  }

  .table-hut {
    border-bottom: 1px solid @primary-abyss;

    table {
      tr {
        > td:nth-child(1) {
          width: 75px;
          text-transform: uppercase;
        }
      }
    }
  }

  .first-section {
    border: @border-width solid @primary-abyss;
    border-radius: @radius;
    background: @muted-trans
  }

  .form-cell {
    padding-top: 110px;
  }

  .email-tr {
    a {
      @media (max-width: 1000px) {
        font-size: .9rem;
      }
    }
  }
}

.ziggy {
  margin: -20px 0;
  padding: 105px 0 105px 0;
  clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 50% ~"calc(100% - 20px)", 0 100%);
}

// Egg
#egg {
  z-index: 9999;
}

.egg-stuff {
  position: absolute;
  content: "";
  display: block;
  background: rgba(0,0,0,.3);
  width: 3px;
  height: 3px;
  top: 90%;
  left: 20%;
  transform: translateX(-50%) translateY(-50%);
  opacity: .25;
}

.that-body {
  width: 510px;
}

@media only screen and (max-width: 959px) {
  .egg-stuff {
    top: unset;
    bottom: 30px;
    transform: unset;
  }
}
//

// For uk-heading-line Correction
//.uk-heading-line > ::after, .uk-heading-line > ::before {
//  top: 50%;
//  border-bottom: 1px solid @primary-dark;
//}
//

// Gravity Form Styles
.gfield_select option {
  line-height: 4;
}

.gform-theme-button.button {
  // padding: 5px 15px;
  // font-family: 'Nunito Sans';
  // font-size: 1rem;
  // font-weight: 900;
}

.gform_next_button.gform-theme-button.button {
  border: 1px solid @primary-dark;
  border-radius: 0;
  background: @white;
  color: @primary-abyss;
  transition: .3s;
}

.gform_next_button.gform-theme-button.button:hover {
  background: @primary-abyss;
  color: @white;
}

.gform_previous_button.gform-theme-button.button {
  border: 1px solid fade(gray, 50%);
  transition: .3s;
}

.gform_previous_button.gform-theme-button.button:hover {
  background: fade(gray, 80%);
  color: @white;
}

.gform_wrapper .gform_footer input[type=Submit] {
  background-color: @primary-dark;
  border: 1px solid @primary-abyss;
  border-radius: @radius;
  color: @white;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  transition: .3s;
}

.gform_wrapper .gform_footer input[type=Submit]:hover {
  background-color: darken(@primary-dark, 15%);
  box-shadow: none;
}

.gform_wrapper .gform_footer input[type=Submit]:focus-visible {
  @focal-outline-important();
}

.gform_wrapper.gravity-theme .gfield_required {
  color: lighten(@secondary, 10%);
}

.gform_wrapper .gfield_error label {
  color: red;
  opacity: 1!important;
}

h2.gform_submission_error.hide_summary {
  color: red;
}
// Move Submit Button to Right
// .wake-wednesday .gform_footer {
//   justify-content: right;
// }
//
/* End Misc Styles */

/* Media Queries For Phones and Tablets and Styles for Accessibility*/
// @media (hover: none) and (pointer: coarse) {

// }

@media (prefers-reduced-motion), (max-width: 959px) {
  .tm-header {
    .uk-navbar-container {
      &::before {
        background: fade(@white, 90%);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      }
    }
    &.uk-sticky-below {
      box-shadow: 0 3px 3px 0 fade(@black, 7%);
      .uk-navbar-container {
        &::before {
          background: fade(@white, 90%);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
        }
      }
    }
  }
}

// Focus Styles - Remember to use non-generic selectors to avoid conflicts with 3rd-party API styles
.tm-toolbar-default :focus-visible, .uk-card-primary.uk-card-body :focus-visible, .uk-card-primary>:not([class*=uk-card-media]) :focus-visible, .uk-card-secondary.uk-card-body :focus-visible, .uk-card-secondary>:not([class*=uk-card-media]) :focus-visible, .uk-light :focus-visible, .uk-offcanvas-bar :focus-visible, .uk-overlay-primary :focus-visible, .uk-section-primary:not(.uk-preserve-color) :focus-visible, .uk-section-secondary:not(.uk-preserve-color) :focus-visible, .uk-tile-primary:not(.uk-preserve-color) :focus-visible, .uk-tile-secondary:not(.uk-preserve-color) :focus-visible {
  outline-color: @focal-color;
}

.tm-header a:focus-visible, .tm-main a:focus-visible, #footer a:focus-visible, .uk-button:focus-visible, a:focus-visible .uk-position-cover, .attribution a:focus-visible {
  @focal-outline();
}

// MAY BE NECESSARY
// .uk-navbar-dropdown a:focus-visible, .tm-main #inventory a:focus-visible, .tm-main #inventory .uk-button:focus-visible, a.uk-link-reset:focus-visible h2 {
//   @focal-outline-important();
// }
/* End Media Queries For Phones and Tablets */