/* Global Styles */
@primary: #404F41;
@primary-trans: fade(@primary, 75%);
@primary-ghost: fade(@primary, 30%);
@primary-dark: #364237;
@primary-dark-trans: fade(@primary-dark, 75%);
@primary-dark-ghost: fade(@primary-dark, 30%);
@primary-abyss: #232B24;
@primary-abyss-trans: fade(@primary-abyss, 75%);
@primary-abyss-ghost: fade(@primary-abyss, 30%);
@secondary: #ffa642;
@secondary-trans: fade(@secondary, 75%);
@secondary-ghost: fade(@secondary, 30%);
@secondary-dark: #BF6704;
@secondary-dark-trans: fade(@secondary-dark, 75%);
@secondary-dark-ghost: fade(@secondary-dark, 30%);
@secondary-abyss: #874800;
@secondary-abyss-trans: fade(@secondary-abyss, 75%);
@secondary-abyss-ghost: fade(@secondary-abyss, 30%);
@highlight: #2BFFAC;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@highlight-dark: #00BC73;
@highlight-trans: fade(@highlight, 75%);
@highlight-ghost: fade(@highlight, 30%);
@muted: #f0fff0;
@muted-trans: fade(@muted, 75%);
@muted-ghost: fade(@muted, 30%);
@white: #ffffff;
@white-trans: fade(@white, 75%);
@white-ghost: fade(@white, 30%);
@white-wisp: fade(@white, 15%);
@black: #161616;
@black-trans: fade(@black, 75%);
@black-ghost: fade(@black, 30%);
@black-wisp: fade(@black, 15%);
@gray: #a7a7b0;
@gray-light: #d5d5e3;
@gray-dark: #414141;

@focal-color: #2BFFAC; // 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: 2px;
@border-width-thick: 4px;
@border-default: @border-width solid @white;
@border-primary: @border-width solid @primary;

.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%));
// }

#tm-main {
  // margin-top: -118px;
}

.uk-button {
  &.spec {
    min-width: 237px;
    height: 40px;
    line-height: 1;
  }

  &.uk-button-default, &.uk-button-primary, &.uk-button-secondary {
    border-radius: @radius;
  }

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

.non-button {
  cursor: default !important;
}

.fat-font {
  font-weight: 900;
}

.uk-card {
  border-radius: @radius;
}

@media only screen and (max-width: 959px) {
  .uk-button {
    min-width: 0;
  }
}

// For Button Text Irregularity w/Icon
// a.uk-button > span:nth-child(2) {
//   transform: translateY(2px);
// }

h1 {
  margin-bottom: 30px;
  font-weight: 900;
}

h1 span:nth-child(2) {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 20px;
}

h2, .uk-h2 {
  text-transform: uppercase;

  span {
    color: @secondary;
  }
}

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

.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-abyss;
}

.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-black-wisp {
  background: @black-wisp;
}

.bg-muted {
  background: @muted;
}

.bg-muted-trans {
  background: fade(@muted, 75%);
}

.bg-muted-ghost {
  background: fade(@muted, 30%);
}

.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;
}

hr {
  border-top-width: @border-width;
}

hr.thick {
  border-top-width: @border-width-thick;
}

hr.narrow {
  width: 60%;
}

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

hr.primary {
  border-top-color: @primary;
}

hr.primary-dark {
  border-top-color: @primary-dark;
}

hr.primary-abyss {
  border-top-color: @primary-abyss;
}

hr.black {
  border-top-color: @black;
}

hr.white {
  border-top-color: @white !important;
}

hr.gray {
  border-top-color: @gray;
}

hr.gray-light {
  border-top-color: @gray-light;
}

hr.gray-dark {
  border-top-color: @gray-dark;
}

.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;
}

.canvas-l {
  height: 650px;
  max-height: 650px;
}

.canvas-m {
  height: 450px;
  max-height: 450px;
}

.canvas-s {
  height: 250px;
  max-height: 250px;
}
/* End Global Styles */

/* Header Format */
//  Floating Left Logo If Layout Is Not Stacked
.tm-header .uk-navbar-container > .uk-container {
  position: relative;
}

.tm-header .uk-navbar-container > .uk-container .uk-logo {
  position: absolute;
  content: "";
  width: 220px;
  left: -20px;
  bottom: -50px;
  z-index: 1;
  transition: 3s ease-in-out;

  &::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/02/Branches-5.webp);
    background-size: 100% 200px;
    background-repeat: no-repeat;
    background-position: left center;
    width: 410px;
    height: 250px;
    left: -121px;
    top: -45px;
    transform: rotate(20deg);
    pointer-events: none;
    z-index: -1;
  }

  @media only screen and (max-width: 1130px) {
    left: -500px;
    transition: 2s;
  }
}

.tm-header .uk-navbar-container > .uk-container .uk-logo img {
  padding: 7px;
  width: 100%;
  height: auto;
}

.tm-header-mobile .uk-logo img {
  padding: 5px;
  height: 60px;
  width: auto;
}

.tm-header .uk-navbar-right {
  z-index: 2;
}

#tm-dialog-mobile {
  background: @black;

  .toggle_sub {
    width: 5% !important;
    color: @white;
  }

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

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

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

// Floating Logo If Layout Is Stacked
// .tm-header > .uk-navbar-container .uk-navbar .uk-navbar-left {
//   margin: 0 0 0 auto;
// }

// .tm-header .tm-headerbar-top > .uk-container {
//   position: relative;
//   z-index: 2;
// }

// .tm-header .tm-headerbar-top > .uk-container .uk-logo {
//     position: absolute;
//     content: "";
//     width: 300px;
//     bottom: -53px;
//     left: 0;
// }

// .tm-header .tm-headerbar-top > .uk-container .uk-logo img {
//     width: 100%;
//     height: auto;
// }
//

// Navbar Logo Center
// .tm-header .uk-navbar-center {
//   position: relative;
//   width: 170px;
//   height: 60px;
// }

// .tm-header .uk-navbar-center .uk-logo {
//   position: absolute;
//   padding: 10px;
//   width: 100%;
//   height: auto;
//   bottom: -44px;
//   left: 50%;
//   transform: translateX(-50%);
//   transition: .4s;
// }
//
/* End Header Format */

/* Header Menu Styles */

// If Toolbar Has Pseudoelements
// .tm-toolbar > .uk-container {
//   position: relative;
//   z-index: 1;
// }
// 

// Upper CTA
.upper-cta {
  overflow: hidden;
  margin-right: -10px;
  padding: 6px 10px;
}

.upper-cta * {
  font-size: .85rem;
  line-height: 1;
}

.upper-cta > a {
  position: relative;
  z-index: 1;
  transition: .2s;
}

.upper-cta > a:hover {
  color: @secondary !important;
  transition: .1s;
}

.upper-cta > a::before {
  position: absolute;
  content: "";
  background: @primary;
  width: ~"calc(100% + 20px)";
  height: 50%;
  bottom: 0;
  left: 50%;
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateX(-50%) scaleX(0);
  z-index: -1;
  transition: 1s;
}

.upper-cta > a:hover::before {
  transform: translateX(-50%) scaleX(1);
  transition: .2s;
}

.upper-cta > a > span {
  display: inline-block;
}

.upper-cta > a .uk-icon {
  transform: scale(.95);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: .2s;
}

.upper-cta > a:hover .uk-icon {
  transform: scale(1.3);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: .2s;
}

#emergency-modal {
  .uk-card {
    background: @white;

    a {
      span:nth-child(2) {
        padding-right: 15px;
      }
    }
  }

  .uk-close {
    color: @black;
    transition: .3s;

    &:hover {
      color: @gray;
    }
  }
}
// 

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

  .uk-navbar-container {
    // Main Nav Items
    .uk-navbar-nav {
      li {
        &.uk-active {
          a {
            font-weight: 700;
          }
        }
      }
    }
  }

  .uk-navbar-nav > li > a::before {
    height: @border-width;
  }

  // Dropdown Menu Items
  .uk-navbar-dropdown {
    border-top: 1px solid @primary-abyss;
    border-bottom: 4px solid @primary;
    background: @black;
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15);

    .uk-nav {
      > li {
        > a {
          padding: 10px 30px 10px 15px;
          color: @gray-light;
          transition: .3s;
        }

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

        &.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;
              position: absolute;
              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;
        }
      }
    }
  }
  //
}
//

// Lines In-Between Main Nav Items
// .uk-navbar-nav > li:not(:last-child) > a {
//     position: relative;
//  }

// .uk-navbar-nav > li:not(:last-child) > a::after {
//     position: absolute;
//     content: "";
//     background: @primary;
//     width: 1px;
//     height: 25px;
//     right: 0;
// }
//

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

@media only screen and (max-width: 1300px) {
  .uk-navbar-nav>li>a {
    font-size: .7rem;
  }
}
// 

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

/* Frontpage Styles */
.frontpage {
  // background: linear-gradient(0deg, rgba(9,9,9,1) 20%, rgba(66,66,66,1) 100%);
  // background: linear-gradient(0deg, rgba(35,43,36,1) 0%, rgba(9,9,9,1) 81%);

  // .big-ol-tree {
  //   position: absolute;
  //   height: 300%;
  //   min-height: 100%;
  //   width: auto;
  //   right: 10%;
  //   top: -500px;
  //   transform: translateX(50%);

  //   img {
  //     height: 100%;
  //     width: auto;
  //     max-width: none;
  //   }
  // }

  .front-housing {
    .custom-cover, video, picture {
      pointer-events: none;
    }

    .darkening-overlay {
      background: fade(@primary-dark, 30%);
      mix-blend-mode: color-burn;

      @media only screen and (max-width: 959px) {
        background: fade(@primary-dark, 50%);
      }
    }

    .h1-container {
      // max-width: 600px;

      h1 {
        max-width: 770px;
        color: @secondary;
  
        span {
          text-shadow: 0 .1em 2px fade(@black, 50%);
          display: inline-block;
  
          &:nth-child(1) {
            position: relative;
            font-size: 3.2rem;
            text-transform: uppercase;
            text-shadow: 0 .09em 2px fade(@black, 65%), 0 .2em 10px fade(@black, 60%);

            @media only screen and (max-width: 959px) {
              font-size: 2.2rem;
            }
          }
  
          &:nth-child(2) {
            color: @white;
            margin-top: 15px;

            @media only screen and (max-width: 959px) {
              font-size: 1.3rem;
            }
          }
        }
      }
    }
  }

  .services-front {
    border-top: @border-width solid @black;
    border-bottom: @border-width solid @black;

    .uk-grid {
      position: relative;

      @media only screen and (max-width: 1399px) {
        &::before {
          position: absolute;
          content: "";
          background: @primary-abyss;
          width: 200px;
          height: @border-width;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;
          z-index: 2;
        }
        &::after {
          position: absolute;
          content: "";
          background: @primary-abyss;
          width: @border-width;
          height: 100px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;
          z-index: 2;
        }
      }

      @media only screen and (max-width: 639px) {
        &::before {
          border-top: @border-width solid @primary-abyss;
          border-bottom: @border-width solid @primary-abyss;
          background: none;
          width: 200px;
          height: 25%;
          left: 50%;
          top: 25%;
          transform: translate(-50%, -2px);
        }
        &::after {
          border-top: @border-width solid @primary-abyss;
          border-bottom: @border-width solid transparent;
          background: none;
          width: 200px;
          height: 25%;
          left: 50%;
          top: 75%;
          transform: translate(-50%, -2px);
        }
      }
    }

    .hover-target {      
      @bg-width: 340px;

      .overlay {
        &.front {
          background: @black;
          transition: .9s .2s ease-in-out;
        }
        
        &.middle {
          background-size: @bg-width auto;
          transform: rotate(0deg) scale(1);
          opacity: 1;
          transition: .7s .1s ease-in-out;
        }
        
        &.back {
          background-size: @bg-width auto;
          transform: rotate(0deg) scale(1);
          opacity: 1;
          transition: .5s 0s ease-in-out;
        }
      }

      h3 {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 7px 15px;
        z-index: 1;
        transition: .3s;

        &::before {
          position: absolute;
          content: "";
          background: @black-trans;
          width: 100%;
          height: 100%;
          left: 50%;
          top: 50%;
          will-change: transform;
          transform-origin: bottom;
          transform: translate(-50%, -50%) scaleY(0);
          z-index: -1;
          transition: .5s .1s;
        }
      }

      &:hover {
        .overlay {
          &.front {
            background: transparent;
            transition: .2s 0s ease-in-out;
          }
          
          &.middle {
            // transform: translateY(100%);
            transform: rotate(20deg) scale(2);
            opacity: 0;
            transition: .3s .1s ease-out;
          }
          
          &.back {
            // transform: translateY(-100%);
            transform: rotate(20deg) scale(2);
            opacity: 0;
            transition: .3s .1s ease-out;
          }
        }

        h3 {
          color: @secondary;
          transition: .3s;
  
          &::before {
            transform: translate(-50%, -50%) scaleY(1);
            transition: .2s .1s;
          }
        }
      }
    }
  }

  .tree-silhouette {
    position: absolute;
    left: 0;
    top: 6%;
    min-width: 920px;

    @media (max-width: 775px) {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .first-front {
    padding: 4em 40px 3em 40px;

    @media (max-width: 620px) {
      padding: 3em 20px 0 20px;
    }

    .uk-card {
      padding: 30px 9%;
      border: @border-width solid @white;
      text-align: justify;

      @media (max-width: 620px) {
        padding: 30px 15px;
      }

      .hover-target {
        .logo {
          width: 300px;
          filter: drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 1px transparent) drop-shadow(0 0 1px transparent);
          transition: .7s;
        }

        &:hover {
          .logo {
            width: 300px;
            filter: drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 1px @secondary) drop-shadow(0 0 1px @secondary);
            transition: .2s;
          }
        }
      }
    }
  }

  .content-block-body {
    padding: 3em 0;
  
    .uk-background-cover {
      min-height: 400px;
    }
  }
}
//

// Textured BG versions
.bg-tex {
  background-image: url(/wp-content/uploads/2025/02/Woodgrain-BG-scaled.webp);
  background-repeat: no-repeat;
  background-size: cover;

  &.fixed {
    background-attachment: fixed;
  }

  &.dark {
    background-image: url(/wp-content/uploads/2025/02/Woodgrain-BG-Green-scaled.webp);
  }
}

.bg-tex-element {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/02/Woodgrain-BG-scaled.webp);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  &.fixed {
    background-attachment: fixed;
  }

  &.dark {
    background-image: url(/wp-content/uploads/2025/02/Woodgrain-BG-Green-scaled.webp);
  }
}
// 

// General background section
.general-bg {
  padding: 70px 0;

  &.enlarged {
    padding: 120px 0;
  }

  .uk-heading-line {
    color: @white;

    > span {
      &::before, &::after {
        border-top: @border-width solid @white;
        border-bottom: @border-width solid @white;
      }
    }
  }

  .uk-card {
    max-width: 800px;
  }
}
//

//  CTA ribbon section
.cta-ribbon {
  background: #55321c;
  padding: 90px 0;
  margin: -25px 0;
  mask-image: url(/wp-content/uploads/2025/02/Masker-White-c.svg);
  mask-position: center;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  z-index: 2;
  transition: background 2s 1.5s;

  &.bg-change {
    background: @black;
  }

  @media (max-width: 959px) {
    background: @black;
    margin: -30px 0;
  }

  @media (max-width: 600px) {
    margin: -35px 0;
  }

  .tree-cover {
    width: 120vw;
    height: 120vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0s 0s ease-in;

    &.felled {
      width: 120vw;
      height: 120vh;
      background-position: 50% 110vh;
      transition: 4s 1.3s ease-in;
    }
  }

  .uk-container {
    max-width: 1303px;
  }

  .chainsaw {
    position: absolute;
    width: 1300px;
    top: 50%;
    right: 200px;
    transform-origin: 110% center;
    transform: translate(50%, -50%) rotate(70deg);
    transition: 0s;

    &.choppin-time {
      transform: translate(50%, -80%) rotate(-60deg);
      transition: 3s;
    }
  }

  .uk-card {
    margin-top: 1rem;
    margin-bottom: 1.6rem;

    h2 {
      span {
        display: block;
        line-height: .6;

        &:nth-child(1) {
          color: @white;

          @media (min-width: 960px) {
            font-size: clamp(1.8rem, 2.5vw, 2.5rem);
          }

          @media (max-width: 959px) {
            font-size: 1.7rem;
            line-height: .6;
          }
        }
  
        &:nth-child(2) {
          text-transform: none;

          @media (min-width: 960px) {
            font-size: clamp(2rem, 4.3vw, 4rem);
          }
  
          @media (max-width: 959px) {
            font-size: 2.1rem;
            line-height: 1.1;
          }
        }
      }
    }
  }
}
//

// Body content sections w/ image element
.body-a {
  padding: 90px 0 75px 0;

  .tree-silhouette-1 {
    position: absolute;
    left: 0;
    top: 6%;
    min-width: 920px;

    @media (max-width: 959px) {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .tree-silhouette-2 {
    position: absolute;
    right: 0;
    top: 6%;
    min-width: 920px;

    @media (max-width: 959px) {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.body-b {
  .uk-cover-container {
    border: @border-width-thick solid @primary;
    height: 600px;
    min-height: 600px;

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

// Projects
.uk-lightbox, .uk-modal {
  background-color: fade(@black, 70%);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='24' viewBox='0 0 12 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23161616' fill-opacity='0.44'%3E%3Cpath d='M2 0h2v12H2V0zm1 20c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM9 8c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-1 4h2v12H8V12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.projects-front {
  h2 {
    max-width: 730px;
    margin: 0 0 0 auto;
  }

  .hover-target {
    position: relative;

    .indicator {
      position: absolute;
      content: "";
      background: @secondary;
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
      transform-origin: top left;
      transform: translate(-2px, -2px) scale(0);
      transition: .7s ease-in-out;
    }

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

      img {
        position: relative;
      }

      .blend {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: fade(@secondary-abyss, 50%);
        mix-blend-mode: color;
        transition: 1s;
      }

      .uk-icon {
        position: absolute;
        padding: 3px 2px 2px 3px;
        border: 2px solid transparent;
        z-index: 2;
        transition: .7s;

        &:hover {
          background: @black-trans;
          color: @secondary;
        }
      }
    }

    &:hover {
      .indicator {
        transform: translate(-5px, -5px) scale(3);
        transition: .2s ease-in-out;
      }

      .uk-cover-container {
        .uk-icon {
          border-color: @white;
          transition: .2s;
        }

        .blend {
          background-color: transparent;
          transition: .2s;
        }
      }
    }
  }

  hr {
    margin-top: 35px;
  }
}
//

// Last Section
.last-section {
  overflow: hidden;
  border-top: @border-width-thick solid @primary-abyss;
  border-bottom: @border-width-thick solid @primary-abyss;
  
  div.bg-black-trans {
    // background: linear-gradient(0deg, rgba(36,42,36,1) 2%, rgba(64,79,65,1) 15%, rgba(24,24,24,0.65) 54%);
  }

  .uk-card {
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: @black-trans;
      width: 100%;
      height: ~"calc(100% + 3px)";
      left: 50%;
      top: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%) skewX(20deg);
      z-index: -1;
    }

    &::after {
      position: absolute;
      content: "";
      background: @black-trans;
      width: 100%;
      height: ~"calc(100% + 3px)";
      left: 50%;
      top: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%) skewX(-20deg);
      z-index: -1;
    }

    h2 {
      font-size: 2.1rem;

      @media (max-width: 600px) {
        font-size: 1.5rem;
      }
    }
  }
}
//
/* End Frontpage Styles */

/* Footer Styles */
#footer {
  .forest {
    pointer-events: none;

    &.back {
      width: 1920px;
      height: 570px;
      top: unset;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .owl-egg {
    position: absolute;
    width: 35px;
    left: ~"calc(50% - 880px)";
    top: 56%;

    .hover-target {
      .balls {
        position: absolute;
        width: 17px;
        height: auto;
        left: 15px;
        top: 11px;
        transform-origin: center;
        transform: scaleY(0);
        transition: .4s;
      }

      &:hover {
        .balls {
          transform: scaleY(1);
          transition: .2s;
        }
      }
    }
  }

  .description-block {
    position: relative;
    padding: 0 10px;
    z-index: 1;
  
    &::before {
      position: absolute;
      content: "";
      background: @primary-abyss-trans;
      width: ~"calc(100% + 20px)";
      height: 2000px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;

      @media (max-width: 1399px) {
        width: ~"calc(100% + 20px)";
        height: ~"calc(100% + 20px)";
        top: ~"calc(50% + 5px)";
      }
    }

    .footer-logo {
      position: relative;
      display: inline-block;
      width: 100%;
      max-width: 300px;
      filter: drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 .5px transparent) drop-shadow(0 0 1px transparent) drop-shadow(0 0 1px transparent);
      z-index: 2;
      transition: .7s;
      
      img {
        padding: 20px;
      }

      &:hover {
        filter: drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 .5px @secondary) drop-shadow(0 0 1px @secondary) drop-shadow(0 0 1px @secondary);
        transition: .2s;
      }
    }

    .description-words {
      text-align: justify;
    }
  }

  .width-adjust {
    min-width: 420px;

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

  .uk-icon {
    padding: 3px;
  }

  .hover-target {
    &.column {
      hr {
        position: relative;

        &::after {
          position: absolute;
          content: "";
          background: @secondary;
          width: 100%;
          height: @border-width;
          left: 0;
          top: -@border-width;
          transform-origin: left;
          transform: scaleX(0);
          transition: .7s;
        }
      }

      &:hover {
        hr {
          &::after {
            transform: scaleX(1);
            transition: .2s;
          }
        }
      }
    }
  }
}

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

@media only screen and (max-width: 959px) {
  .mobile-cta {
      display: flex;
      position: fixed;
      top: 61px;
      left: 0;
      border-radius: 0;
      width: 100%;
      z-index: 555;
  }
  .mobile-cta a:nth-child(1) {
    padding: 0;
    border-radius: 0;
    border-right: 1px solid @black;
  }
  .mobile-cta a:nth-child(2) {
    padding: 0;
    border-radius: 0;
    border-left: 1px solid @black;
  }
  .tm-main {
      // margin-top: 38px;
  }  
}
//
/* End Footer Styles */

/* Mainpage Styles */
.first-main {
  p {
    position: relative;
    padding: 30px 40px;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      border-left: @border-width solid @primary;
      border-right: @border-width solid @primary;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
  }
}

// Header Main
.header-main {
  .uk-card {
    position: relative;
    padding: 40px;
    min-height: 60vh;
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      background: @black-trans;
      width: 100%;
      height: ~"calc(100% + 3px)";
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }

    h1 {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @white;
        width: calc(100% + 120px);
        height: 1px;
        left: 50%;
        bottom: -12px;
        transform: translateX(-50%);
      }
      
      span {
        &:nth-child(1) {
          color: @secondary;
          font-size: 2.2rem;
          text-transform: uppercase;
        }
      }
    }
  }
}
//

// Children Main
.main-children {
  .uk-slider-container {
    margin-top: -30px;
  }

  .hover-target {
    h3 {
      padding: 5px 10px;
      width: 100%;
      background: @black-trans;
      font-size: 1.3rem;
      transform: translateY(1em);
      transition: .7s;
    }

    .uk-card-media {
      border: @border-width solid @black;
    }

    .blend {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: fade(@secondary-abyss, 50%);
      mix-blend-mode: color;
      transition: 1s;
    }

    &:hover {
      h3 {
        background: @secondary;
        color: @black;
        transform: translateY(2em);
        transition: .3s;
      }

      .blend {
        background-color: transparent;
        transition: .2s;
      }
    }
  }
}

.arrow {
  border-radius: @radius;
  background: @white;
  color: @primary-abyss !important;
  transition: .3s;

  &.left {
    margin-right: -10px;
    transform-origin: center;
    transform: translateX(0) translateY(5px) scale(1);
  }

  &.right {
    margin-left: -10px;
    transform-origin: center;
    transform: translateX(0) translateY(5px) scale(1);
  }

  &:hover {
    color: @white !important;
    background: @primary-abyss;

    &.left, &.right {
      transform: translateX(0) translateY(5px) scale(1.2);
    }
  }
}

@media only screen and (max-width: 639px) {
  .main-children .arrow.left {
    margin-right: -20px;
  }
  .main-children .arrow.right {
    margin-left: -20px;
  }
}
//
/* End Mainpage Styles */

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

    > a {
      h3 {
        margin-bottom: 0;
        background: @primary-abyss;
        padding: 10px;
        color: @white;
        text-align: center;
      }
    }

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

      li {
        padding: 8px 10px;

        &:not(:first-child) {
          border-top: 2px solid @primary;
        }

        a {
          color: @secondary-dark;
          transition: .5s;
        }
      }

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

      &:hover { // hover effects for li & child elements
        a {
          color: @secondary-dark;
        }
      }
    }
  }

  li {
    &.activate {
      a {
        color: @secondary !important;
      }
    }
  }

  .widget-menu {
    > h3 {
      padding: 5px 15px;
      border: @border-width solid @primary;
      text-align: center;
    }
  }
}
//

// Content Loop
.content-loop {
  padding: 40px;

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

    h2 {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @black;
        width: 45%;
        height: @border-width;
        left: -40px;
        bottom: -10px;
      }
    }

    p {
      text-align: justify;
    }
  }
}
//

// Header
.header-sub {
  overflow: hidden;

  .uk-tile {
    min-height: 350px;

    &.content-tile {
      margin-left: -31px;
      clip-path: polygon(0 0, 100% 0, ~"calc(100% + 1px)" ~"calc(100% + 1px)", 0 ~"calc(100% + 1px)", 30px 65%);

      @media (max-width: 959px) {
        margin-left: 0;
        margin-top: -30px;
        padding-top: 60px;
        clip-path: polygon(0 0, 65% 30px, 100% 0, 100% 100%, 0 100%);
      }
    }
  }
  
  h1 {
    position: relative;
    text-transform: uppercase;

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

    span {
      &:nth-child(2) {
        color: @white;
      }
    }
  }
}
//

// Subpage First Section
.first-sub {
  .uk-card {
    position: relative;
    padding: 15px 25px;
    border: @border-width solid @black;
    border-radius: @radius;

    &::before {
      position: absolute;
      content: "";
      background: @black;
      width: 100vw;
      height: @border-width;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
    }

    &::after {
      position: absolute;
      content: "";
      background: @black;
      width: 100vw;
      height: @border-width;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
    }

    p {
      text-align: justify;
    }
  }
}
//

// About
.about {
  .content-block {
    overflow: hidden;

    .image-container {
      position: relative;
      margin: 0 auto;
      padding-top: 30px;
      padding-bottom: 30px;
      max-width: 600px;
      z-index: 1;
  
      &::before {
        position: absolute;
        content: "";
        background: darken(@primary-abyss, 3%);
        background: @primary;
        width: 50%;
        height: 200vh;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        // clip-path: polygon(0 0, 100% 0, ~"calc(100% - 100px)" 50%, 100% 100%, 0 100%);
        z-index: -1;
      }
  
      img {
        box-shadow: 0 5px 5px 0 fade(@black, 50%), 0 30px 20px 0 fade(@black, 20%), 0 -1.5px 2px 0 fade(@white, 40%);
      }
    }
  }
}
//

// Reviews
.reviews {
  iframe {
    max-width: 100% !important;
  }
}
//

// Projects Page
.projects {
  .content-section {
    position: relative;

    .text-block {
      position: relative;
      margin-left: 20px;

      &::before {
        position: absolute;
        content: "";
        background: @secondary;
        width: @border-width-thick;
        height: 100%;
        left: -20px;
        top: 0;
      }

      p {
        position: relative;
        text-align: justify;

        &::after {
          position: absolute;
          content: "";
          background: @secondary;
          width: 200px;
          height: 4px;
          left: -20px;
          top: -15px;
        }
      }
    }

    .uk-cover-container {
      min-height: 200px;
    }

    .hover-target {
      position: relative;
  
      .indicator {
        position: absolute;
        content: "";
        background: @secondary;
        width: 20px;
        height: 20px;
        left: 0;
        top: 0;
        transform-origin: top left;
        transform: translate(-2px, -2px) scale(0);
        transition: .7s ease-in-out;
      }
  
      .uk-cover-container {
        height: 230px;
  
        img {
          position: relative;
        }
  
        .blend {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background-color: fade(@secondary-abyss, 50%);
          mix-blend-mode: color;
          transition: 1s;
        }
  
        .uk-icon {
          position: absolute;
          padding: 3px 2px 2px 3px;
          border: 2px solid transparent;
          z-index: 2;
          transition: .7s;
  
          &:hover {
            background: @black-trans;
            color: @secondary;
          }
        }
      }
  
      &:hover {
        .indicator {
          transform: translate(-5px, -5px) scale(3);
          transition: .2s ease-in-out;
        }
  
        .uk-cover-container {
          .uk-icon {
            border-color: @white;
            transition: .2s;
          }
  
          .blend {
            background-color: transparent;
            transition: .2s;
          }
        }
      }
    }
  }
}
//
/* End Subpage Styles */

/* Contact */
.contact {
  .info-grid {
    .links {
      &.uk-h4 {
        line-height: 1;
      }
    }

    .category {
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: @white;
        width: @border-width;
        height: ~"calc(100% + 10px)";
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      &::after {
        position: absolute;
        content: "";
        background: @secondary;
        width: @border-width;
        height: ~"calc(100% + 11px)";
        right: 0;
        top: 50%;
        transform-origin: center 29px;
        transform: translateY(-50%) scaleY(0);
        transition: .2s 0s;
      }

      span {
        display: block;
        position: relative;

        &::before {
          position: absolute;
          content: "";
          background: @white;
          width: 100%;
          height: @border-width;
          left: 0;
          bottom: 0;
        }

        &::after {
          position: absolute;
          content: "";
          background: @secondary;
          width: ~"calc(100% - 1px)";
          height: @border-width;
          left: 0;
          bottom: 0;
          transform-origin: left;
          transform: scaleX(0);
          transition: .2s .2s;
        }
      }
    }

    &:hover {
      .category {  
        &::after {
          transform: translateY(-50%) scaleY(1);
          transition: .1s .1s;
        }
  
        span {
          &::after {
            transform: scaleX(1);
            transition: .1s 0s;
          }
        }
      }
    }
  }

  .first-section {
    position: relative;
    padding: 40px;
    z-index: 1;

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

    &::after {
      position: absolute;
      content: "";
      border-radius: @radius;
      border: @border-width solid @black;
      background: @secondary;
      width: ~"calc(100% - 40px)";
      height: ~"calc(100% - 40px)";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    p {
      text-align: justify;
    }
  }
}
/* End Contact */

/* Misc Styles */
// Related Pages
.related-pages {
  a.uk-button-text {
    text-transform: uppercase;

    &.activate {
      background: none;
      color: @secondary;
    }

    &:hover {
      color: @secondary;
    }
  }
}
//

// Service Area
#serviceMap {
  z-index: 0;
}

.service-list a {
  text-decoration: none;
  border-bottom: 1px solid @secondary;
}

.service-list a:hover {
  border-bottom: 1px solid @white;
}
// 

// 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, > ::before {
    top: 50%;
  }
}
//

// Gravity Form Styles
.grecaptcha-badge {
  display: none;
}

.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: @secondary;
  color: @black;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: Outfit;
  font-size: 1rem;
  font-weight: 700;
  transition: .2s;

  &:hover {
    color: @white;
    box-shadow: none;
  }
}

.gform_wrapper .gform_footer input[type=Submit]:hover {
  background-color: @secondary-dark;
}

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

.gform_wrapper.gravity-theme .gfield_required {
  color: @secondary !important;
}

.gform_wrapper .gfield_error label {
  color: lighten(red, 20%);
  opacity: 1!important;
}

h2.gform_submission_error.hide_summary {
  color: lighten(red, 20%);
}

.ginput_container textarea {
  max-height: 200px;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper input[type=text], .ginput_container textarea {
  background: @muted;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):hover, .gform_wrapper input[type=text]:hover, .ginput_container textarea:hover {
  background: darken(@muted, 5%);
}
// 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) {
  .services-front {
    .hover-target {
      &:hover {
        .uk-cover-container {
          > picture {
            display: none;
          }
          .overlay {
            &.front {
              background: @black;
            }
            &.middle {
              display: none;
            }
            &.back {
              display: none;
            }
          }
        }
      }
    }
  }
  .cta-ribbon {
    .tree-cover {
      display: none;
      transform: none;
      transition: 0s;
      &.felled {
        background-position: 50% 50%;
        transition: 0s;
      }
    }
    .chainsaw {
      display: none !important;
      transform: translate(50%, -50%) rotate(0deg);
      transition: 0s;
      &.choppin-time {
        transform: translate(50%, -50%) rotate(0deg);
        transition: 0s;
      }
    }
  }
  .bg-tex {
    &.fixed {
      background-attachment: scroll;
    }
  }
  .bg-tex-element {
    &.fixed {
      background-attachment: scroll;
    }
  }
}

// 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 */