/*
Theme Name: Troyer Roofing and Construction

Fonts Used:
font-family: "Roboto", sans-serif;
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  font-size: 100%;
  font: inherit;
  padding: 0;
  border: 0;
  margin: 0;
  vertical-align: baseline
}
body {
  line-height: 1
}
ol, ul {
  list-style: none
}
blockquote, q {
  quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}
.clear {
  clear: both
}
.sticky {}
.bypostauthor {}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.alignright {}
.alignleft {}
.aligncenter {}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important
}
/*--------- BODY ELEMENTS --------- */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.444em;
  letter-spacing: -0.02em;
  word-spacing: 0.04em;
  max-width: 2400px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  transition: .5s;
}
b, strong {
  font-weight: 700;
}
nav, section, footer, div, li, a, input, select, textarea, img, td, article, header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input, select, textarea {
  -webkit-appearance: none;
}
p {
  margin: 0 0 1.5em 0;
}
p:last-child {
  margin: 0 !important;
}
a {
  text-decoration: none;
  transition: .5s;
}
em, i {
  font-style: italic;
}
img {
  height: auto;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.333em;
  box-sizing: border-box;
}
hr {
  border: 0;
  border-top: 1px solid #999;
  margin: 0 0;
}
:root {
  --blue-color: #14a3dd;
  --dark-gray-color: #878787;
  --light-gray-color: #d9d9d9;
  --very-light-gray-color: #f3f3f3;
  --blue-pale-color: #eaf3f9;
  --light-blue-color: #8ec4e8;
  --dark-blue-color: #0c6284;
  --border-radius-img: 1em;
  --border-radius-article: 1em;
  --border-radius-btn: 0.5em;
  --border-radius-left-only: 1em 0 0 1em;
  --border-radius-right-only: 0 1em 1em 0;
  --border-radius-top-only: 1em 1em 0 0;
  --border-radius-bottom-only: 0 0 1em 1em;
  --box-shadow-article: 0 1em 2em rgba(0, 0, 0, .15);
}
/*--------- HEADER ELEMENTS --------- */
#header {
  display: table;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(0.5em);
  border-bottom: 2px solid var(--blue-color);
  .headerbar {
    display: table;
    width: 100%;
    background: #000;
    .bar {
      display: grid;
      gap: 0;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      color: #fff;
      width: 92%;
      max-width: 1500px;
      margin: 0.667em auto;
      a {
        color: #fff;
        &:hover {
          color: var(--blue-color);
        }
        .fa-solid, .fa-brands {
          color: var(--blue-color);
        }
      }
      .spacer {
        display: inline-block;
        width: 1em;
      }
    }
    .left, .right {
      font-size: 1.222em;
      font-weight: 700;
      line-height: 1.333em;
    }
    .right {
      text-align: right;
    }
  }
}
#branding {
  display: grid;
  gap: 0;
  grid-template-columns: 0.25fr 0.78fr;
  align-items: center;
  width: 92%;
  max-width: 1500px;
  margin: 1em auto;
  .left img {
    display: table;
    margin: 0;
    float: left;
    width: 12em;
    max-width: 100%;
  }
  .right {
    .estimatebtn {
      display: table;
      margin: 0 0 1em 0;
      float: right;
      font-size: 1.111em;
      font-weight: 800;
      text-transform: uppercase;
      background: var(--blue-color);
      color: #fff;
      padding: 0.75em 1em;
      border-radius: var(--border-radius-btn);
      &:hover {
        background: #000;
        color: #fff;
      }
    }
  }
}
[id] {
  scroll-margin-top: var(--header-height, 0px);
}
/*--------- MOBILE HEADER ELEMENTS --------- */
.mobileheader {
    display: none;
}
/*--------- HEADER MENU ELEMENTS --------- */
.headermenu {
  display: table;
  width: 100%;
}
#mega-menu-wrap-main-menu {
  #mega-menu-main-menu {
    > li {
      &.mega-menu-flyout {
        ul.mega-sub-menu {
          width: auto !important;
          min-width: 200px;
          li.mega-menu-item {
            a.mega-menu-link {
              white-space: nowrap !important;
            }
          }
        }
      }
      &.mega-menu-item:last-child {
        margin: 0 !important;
      }
    }
  }
}
#mega-menu-wrap-main-menu {
  #mega-menu-main-menu {
    > li.mega-menu-megamenu {
      > ul.mega-sub-menu {
        > li.mega-menu-item {
          ul.mega-sub-menu {
            li:last-child a {
              border: none !important;
            }
          }
        }
      }
    }
  }
}
/*--------- USPs ELEMENTS --------- */
#usps {
  display: table;
  width: 100%;
  background: var(--blue-color);
  ul {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
    width: 92%;
    max-width: 1500px;
    margin: 0.5em auto;
    li {
      font-size: 1.111em;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      padding: 1.5em 2em;
      display: flex;
      align-items: center;
      position: relative;
      &:before {
        content: "";
        display: inline-block;
        margin: 0 0.667em 0 0;
        width: 3em;
        height: 3em;
      }
      &:nth-child(1) {
        background: rgba(0, 0, 0, 0.1);
        border-radius: var(--border-radius-left-only);
        &:before {
          background: url("images/usp1.webp") center no-repeat;
          background-size: contain;
        }
      }
      &:nth-child(2) {
        background: rgba(0, 0, 0, 0.2);
        &:before {
          background: url("images/usp2.webp") center no-repeat;
          background-size: contain;
        }
      }
      &:nth-child(3) {
        background: rgba(0, 0, 0, 0.3);
        &:before {
          background: url("images/usp3.webp") center no-repeat;
          background-size: contain;
        }
      }
      &:nth-child(4) {
        background: rgba(0, 0, 0, 0.4);
        border-radius: var(--border-radius-right-only);
        &:before {
          background: url("images/usp4.webp") center no-repeat;
          background-size: contain;
        }
      }
    }
  }
}
/*--------- F00TER ELEMENTS --------- */
#footer {
  display: table;
  width: 100%;
  background: var(--light-gray-color);
  .footerinfo {
    display: grid;
    gap: 1em 0;
    grid-template-columns: 0.25fr 0.7fr 0.05fr;
    width: 92%;
    max-width: 1500px;
    margin: 3em auto;
    .left img {
      display: table;
      margin: 0;
      float: left;
      width: 18em;
      max-width: 100%;
    }
    .middle {
      display: grid;
      gap: 1em 3em;
      grid-template-columns: repeat(3, 1fr);
      padding: 0 3em;
      font-size: 1.111em;
      line-height: 1.667em;
      a {
        color: #000;
        &:hover {
          color: var(--blue-color);
        }
      }
      hr {
        display: table;
        margin: 0.5em 0;
        width: 100%;
        height: 1px;
        border: none;
        border-bottom: 1px dashed #000;
      }
    }
    .right {
      text-align: right;
      a {
        font-size: 2.667em;
        color: var(--blue-color);
        &:hover {
          color: #000;
        }
      }
    }
    h3 {
      font-weight: 700;
      text-transform: uppercase;
      padding: 0 0 0.5em 0;
      margin: 0 0 0.5em 0;
      border-bottom: 1px dashed #000;
    }
  }
}
#copyright {
  display: table;
  width: 100%;
  .copyright {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 0.778em auto;
    font-size: 1em;
    text-align: center;
    line-height: 1.444em;
    color: var(--dark-gray-color);
    a {
      color: var(--dark-gray-color);
      &:hover {
        color: var(--blue-color);
      }
    }
  }
}
/*--------- HOME BANNER ELEMENTS ---------*/
#homebanner {
  display: table;
  width: 100%;
  position: relative;
  .metaslider {
    .flexslider {
      margin: 0;
      .flex-control-nav {
        li {
          a {
            background: var(--blue-color) !important;
            &.flex-active {
              background: #000 !important;
            }
          }
        }
      }
    }
    .flex-control-nav {
      bottom: 2em;
    }
  }
  .caption-wrap {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
    .caption {
      display: table;
      width: 92%;
      margin: 0 auto;
      color: #fff;
      .bannercontent {
        .content {
          display: table;
          width: 100%;
          h2 {
            font-size: 4em;
            font-weight: 800;
            text-transform: uppercase;
            line-height: 1.111em;
            margin: 0 0 0.5em 0;
            position: relative;
            &:after {
              content: "";
              display: table;
              width: 330px;
              height: 3px;
              margin: 0.25em 0 0.75em 0;
              background: var(--blue-color);
            }
          }
          p {
            font-size: 1.222em;
            line-height: 1.444em;
            max-width: 50%;
          }
          div.usp {
            display: inline-table;
            font-size: 1.111em;
            font-weight: 800;
            line-height: 1em;
            color: #fff;
            padding: 0.75em 1em;
            margin: 2em 1em 1em 0;
            border: 2px solid var(--dark-gray-color);
            border-radius: var(--border-radius-btn);
          }
          .actions {
            display: table;
            a {
              display: inline-table;
              font-size: 1.111em;
              font-weight: 800;
              text-transform: uppercase;
              line-height: 1em;
              background: var(--blue-color);
              color: #fff;
              margin: 0 1em 0 0;
              padding: 0.75em 1em;
              border-radius: var(--border-radius-btn);
              &:hover {
                background: #000;
              }
            }
          }
        }
      }
    }
  }
}
/*--------- HOME SOLUTIONS ELEMENTS ---------*/
#solutions {
  display: table;
  width: 100%;
  .solutions {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 4em auto 5em auto;
    h2 {
      justify-content: center;
      font-size: 2.667em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 1em 0;
      position: relative;
      &:after {
        content: "";
        display: table;
        margin: 0.125em auto 0 auto;
        height: 3px;
        width: 200px;
        background: var(--blue-color);
      }
    }
    ul {
      display: grid;
      gap: 1em;
      grid-template-columns: repeat(4, 1fr);
      align-content: flex-start;
      text-align: center;
      li {
        img {
          display: table;
          width: 100%;
          margin: 0;
          border-radius: var(--border-radius-img);
          box-shadow: var(--box-shadow-article);
        }
        h3 {
          font-size: 1.667em;
          font-weight: 800;
          color: var(--blue-color);
          line-height: 1.222em;
          text-transform: uppercase;
          margin: -2.5em 0 1em 0;
          position: relative;
          &:after {
            content: "";
            display: table;
            margin: 0.25em auto 0 auto;
            height: 3px;
            width: 100px;
            background: var(--blue-color);
          }
          &:before {
            content: "";
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1em auto;
          }
          &:nth-child(1) {
            /* no change */
          }
        }
        &:nth-child(1) h3:before {
          background: url("images/usp1-b.webp") center no-repeat var(--blue-color);
          background-size: 1.25em;
        }
        &:nth-child(2) h3:before {
          background: url("images/usp2-b.webp") center no-repeat var(--blue-color);
          background-size: 1.25em;
        }
        &:nth-child(3) h3:before {
          background: url("images/usp3-b.webp") center no-repeat var(--blue-color);
          background-size: 1.25em;
        }
        &:nth-child(4) h3:before {
          background: url("images/usp4-b.webp") center no-repeat var(--blue-color);
          background-size: 1.25em;
        }
        p {
          font-size: 1.222em;
          line-height: 1.444em;
        }
        a {
          font-weight: 700;
          text-transform: uppercase;
          color: #000;
          .fa-solid {
            color: var(--blue-color);
          }
          &:hover {
            color: var(--blue-color);
          }
        }
      }
    }
  }
}
/*--------- HOME SERVICES ELEMENTS ---------*/
#services {
  display: table;
  width: 100%;
  background: var(--very-light-gray-color);
  .services {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 4em auto 5em auto;
    h1 {
      justify-content: center;
      font-size: 2.667em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 1em 0;
      position: relative;
      &:after {
        content: "";
        display: table;
        margin: 0.125em auto 0 auto;
        height: 3px;
        width: 200px;
        background: var(--blue-color);
      }
    }
    .textwidget {
      ul {
        display: grid;
        gap: 2em;
        grid-template-columns: repeat(5, 1fr);
        align-content: flex-start;
        text-align: center;
        font-size: 1.111em;
        font-weight: 700;
        li {
          position: relative;
          &:before {
            content: "";
            display: table;
            margin: 0 auto;
            height: 6.3em;
            width: 6.3em;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(1):before {
            background-image: url("images/service1.webp");
          }
          &:nth-child(2):before {
            background-image: url("images/service2.webp");
          }
          &:nth-child(3):before {
            background-image: url("images/service3.webp");
          }
          &:nth-child(4):before {
            background-image: url("images/service4.webp");
          }
          &:nth-child(5):before {
            background-image: url("images/service5.webp");
          }
          &:nth-child(6):before {
            background-image: url("images/service6.webp");
          }
          &:nth-child(7):before {
            background-image: url("images/service7.webp");
          }
          &:nth-child(8):before {
            background-image: url("images/service8.webp");
          }
          &:nth-child(9):before {
            background-image: url("images/service9.webp");
          }
          &:nth-child(10):before {
            background-image: url("images/service10.webp");
          }
        }
      }
    }
  }
}
/*--------- HOME PLAN ELEMENTS ---------*/
#plan {
  display: table;
  width: 100%;
  background: var(--very-light-gray-color);
  .plan {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 5em auto 5em auto;
    .intro {
      display: grid;
      grid-template-columns: 0.65fr 1.35fr;
      gap: 6em;
      align-items: flex-end;
      margin: 0 0 3em 0;
      .heading {
        .eyebrow {
          color: var(--blue-color);
          font-size: 1.333em;
          font-weight: 700;
          line-height: 1.333em;
          margin: 0 0 0.25em 0;
        }
        h2 {
          font-size: 2.667em;
          font-weight: 800;
          line-height: 1.111em;
          margin: 0;
        }
      }
      .description {
        p {
          font-size: 1.333em;
          line-height: 1.556em;
          margin: 0;
        }
      }
    }
    .guidance-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1em;
      .step {
        background: #fff;
        padding: 2em 1em;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #cfcfcf;
        border-radius: var(--border-radius-article);
        box-shadow: var(--box-shadow-article);
        .number {
          width: 2.5em;
          height: 2.5em;
          border-radius: 50%;
          background: var(--blue-color);
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.667em;
          font-weight: 700;
          margin: 0 0 1em 0;
        }
        h3 {
          color: #000;
          font-size: 1.667em;
          font-weight: 800;
          line-height: 1.222em;
          margin: 0 0 0.75em 0;
          position: relative;
          &:after {
            content: "";
            display: table;
            margin: 0.25em auto 0 auto;
            height: 3px;
            width: 100px;
            background: var(--blue-color);
          }
        }
        p {
          font-size: 1.222em;
          line-height: 1.444em;
          margin: 0;
        }
      }
    }
  }
}
/*--------- HOME WORK ELEMENTS ---------*/
#work {
  display: table;
  width: 100%;
  position: relative;
  .work {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 4em auto 5em auto;
    h2 {
      justify-content: center;
      font-size: 2.667em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 1em 0;
      position: relative;
      &:after {
        content: "";
        display: table;
        margin: 0.125em auto 0 auto;
        height: 3px;
        width: 200px;
        background: var(--blue-color);
      }
    }
	  .gallerylinks {
		  display: table;
		  width: 100%;
		  padding: 2em 0 0 0;
		  text-align: center;
	  
    a.galbtn {
      display: inline-table;
      font-size: 1.111em;
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1em;
      background: var(--blue-color);
      color: #fff;
      margin: 0.5em;
      padding: 0.75em 1.5em;
      border-radius: var(--border-radius-btn);
      &:hover {
        color: var(--blue-color);
        background: #000;
      }
    }
		  }
    .ngg-gallery-thumbnail {
      border: none;
      margin: 0;
      img {
        border-radius: var(--border-radius-img);
      }
      span {
        font-size: 1.111em;
        font-weight: 700;
        padding: 0.125em;
      }
    }
    .ngg-galleryoverview {
      margin: 0;
    }
  }
}
/*--------- FANCYBOX ELEMENTS ---------*/
#fancybox-outer {
  border-radius: var(--border-radius-img);
  #fancybox-title {
    font-size: 1.111em;
    font-weight: 700;
  }
}
#fancybox-title {
  #fancybox-title-inside {
    padding: 0.125em;
  }
}
#fancybox-content {
  border-radius: var(--border-radius-img);
  #fancybox-img {
    border-radius: var(--border-radius-img);
  }
}
/*--------- NGG GALLERY ELEMENTS ---------*/
#container {
  #content {
    .ngg-gallery-thumbnail {
      img {
        border-radius: 18px;
      }
    }
  }
}
/*--------- HOME BRANDS ELEMENTS ---------*/
#brands {
  display: table;
  width: 100%;
  .brands {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 5em auto 0 auto;
    h2 {
      font-size: 2.667em;
      font-weight: 700;
      text-align: right;
      padding: 0 1em 0 0;
      border-right: 3px solid var(--blue-color);
    }
    .widget {
      display: grid;
      gap: 2em;
      grid-template-columns: 0.40fr 0.60fr;
      align-items: center;
      justify-content: center;
      .textwidget {
        display: grid;
        gap: 2em;
        grid-template-columns: repeat(4, auto);
        align-items: center;
        justify-content: center;
        img {
          display: table;
          margin: 0;
          width: auto;
          max-width: 100%;
          max-height: 6em;
        }
      }
    }
  }
}
/*--------- HOME AFFILIATIONS ELEMENTS ---------*/
#affiliations {
  display: table;
  width: 100%;
  .affiliations {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 4em auto 3em auto;
    border: 1px solid #ccc;
    padding: 3em;
    border-radius: var(--border-radius-article);
    box-shadow: var(--box-shadow-article);
    h2 {
      justify-content: center;
      font-size: 2.667em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 0.5em 0;
      position: relative;
      &:after {
        content: "";
        display: table;
        margin: 0.125em auto 0 auto;
        height: 3px;
        width: 200px;
        background: var(--blue-color);
      }
    }
    .textwidget {
      display: grid;
      gap: 5em;
      grid-template-columns: repeat(3, auto);
      align-items: center;
      justify-content: center;
      img {
        display: table;
        margin: 0;
        max-width: 100%;
		border-radius: 0;
      }
    }
  }
}
/*--------- HOME ACTIONS ELEMENTS ---------*/
#actions {
  display: table;
  width: 100%;
  background: var(--very-light-gray-color);
  .actions {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(3, 1fr);
    width: 92%;
    max-width: 1500px;
    margin: 5em auto;
    li {
      font-size: 1.333em;
      background: #fff;
      padding: 1.5em;
      border-radius: var(--border-radius-article);
      box-shadow: var(--box-shadow-article);
      &:last-child {
        background: var(--blue-color);
        color: #fff;
        h3 {
          color: #fff;
          &:after {
            background: #fff;
          }
        }
        .textwidget {
          a {
            display: table;
            background: #000;
            color: #fff;
            margin: 0;
            padding: 0.5em 0.75em;
            &:hover {
              background: #fff;
              color: #000;
            }
          }
        }
      }
      h3 {
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--blue-color);
        margin: 0 0 0.75em 0;
        position: relative;
        &:after {
          content: "";
          display: table;
          margin: 0.5em 0 0 0;
          height: 3px;
          width: 100px;
          background: var(--blue-color);
        }
      }
      .textwidget {
        line-height: 1.444em;
        a {
          font-weight: 700;
          text-transform: uppercase;
          color: #000;
          border-radius: var(--border-radius-btn);
          .fa-solid {
            color: var(--blue-color);
          }
          &:hover {
            color: var(--blue-color);
          }
        }
      }
    }
  }
}
/*--------- HOME QUALITY ELEMENTS ---------*/
#quality {
  display: table;
  width: 100%;
  background: #efefef;
  .quality {
    display: table;
    width: 92%;
    max-width: 1500px;
    margin: 4em auto 5em auto;
    h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 1em 0;
      position: relative;
      &:before, &:after {
        content: "";
        height: 1em;
        width: 1em;
        background: url("images/logo-icon.webp") center no-repeat;
        background-size: contain;
      }
      &:before {
        margin: 0 0.35em 0 0;
      }
      &:after {
        margin: 0 0 0 0.35em;
      }
    }
    h3 {
      font-size: 1.67em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 0.5em 0;
    }
    p {
      font-size: 1.33em;
      text-align: center;
      line-height: 1.444em;
      margin: 0 0 2em 0;
    }
    img {
      display: table;
      width: 50%;
      max-width: 100%;
      margin: 0 auto;
    }
  }
}
/*--------- HOME CONTACT ELEMENTS ---------*/
#contact {
  display: table;
  width: 100%;
  background: url("images/contact-bg.webp") center no-repeat #ff6100;
  background-size: cover;
  .contact {
    display: table;
    width: 1500px;
    margin: 4em auto 5em auto;
    h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3em;
      font-weight: 700;
      text-align: center;
      margin: 0 0 0.5em 0;
      position: relative;
      &:before, &:after {
        content: "";
        height: 1em;
        width: 1em;
        background: url("images/logo-icon.webp") center no-repeat;
        background-size: contain;
      }
      &:before {
        margin: 0 0.35em 0 0;
      }
      &:after {
        margin: 0 0 0 0.35em;
      }
    }
    table {
      display: table;
      width: 50%;
      margin: 0 auto;
      tr {
        td {
          padding: 0.25em;
          input, select, textarea {
            margin: 0;
          }
          input[type="submit"] {
            margin: 0 auto;
            width: 50%;
          }
        }
      }
    }
  }
}
/*--------- HOME CONTENT ELEMENTS ---------*/
.page-template-front-page {
  #container {
    display: table;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
#homecontent {
  display: table;
  width: 92%;
  max-width: 1500px;
  margin: 1em auto 3em auto;
  h2 {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    &:after {
      content: "";
      display: table;
      margin: 0.125em auto 0 auto;
      height: 3px;
      width: 200px;
      background: var(--blue-color);
    }
  }
  .homecontent {
    display: table;
    width: 100%;
    margin: 0 0 2em 0;
    font-size: 1.333em;
    line-height: 1.444em;
    .subhead {
      text-align: center;
    }
    .areas {
      display: grid;
      gap: 0;
      grid-template-columns: 25% 50% 25%;
      width: 100%;
      margin: 0;
      background: var(--blue-color);
      align-items: center;
      border-radius: var(--border-radius-article);
      box-shadow: var(--box-shadow-article);
      .left {
        padding: 1.5em;
        h3 {
          font-size: 1.5em;
          font-weight: 800;
          text-transform: uppercase;
          margin: 0;
        }
        ul {
          display: table;
          width: 100%;
          padding: 0;
          margin: 0.5em 0 0 0;
          li {
            padding: 0.5em 0;
            border-bottom: 1px dashed #fff;
            &:last-child {
              border: none;
            }
          }
        }
      }
      .middle {
        img {
          display: table;
          width: 100%;
          margin: 0 auto;
        }
      }
      .right {
        .container {
          padding: 1.5em;
          h3 {
            font-size: 1.5em;
            font-weight: 800;
            text-transform: uppercase;
            margin: 0 0 0.7em 0;
          }
          .call {
            display: table;
            font-size: 1.444em;
            font-weight: 700;
            color: #000;
            white-space: nowrap;
            margin: 1em 0 0 0;
            &:hover {
              color: #ffff;
            }
          }
        }
        .help {
          display: table;
          width: 100%;
          background: #000;
          font-size: 1em;
          font-weight: 700;
          color: #fff;
          text-align: center;
          margin: 0;
          padding: 1em;
        }
      }
    }
  }
}
/*--------- HOME CTA ELEMENTS ---------*/
#cta {
  display: table;
  width: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("images/home-cta-bg.webp") center no-repeat;
    background-size: cover;
    opacity: 0.20;
    z-index: -1;
  }
  .cta {
    display: grid;
    gap: 3em;
    grid-template-columns: 0.45fr 0.55fr;
    align-items: center;
    width: 92%;
    max-width: 1500px;
    margin: 5em auto;
    position: relative;
    z-index: 1;
    &:first-child {
      .eyebrow {
        color: var(--blue-color);
        font-size: 1.333em;
        font-weight: 700;
        line-height: 1.333em;
        margin: 0 0 0.25em 0;
      }
      h2 {
        font-size: 4em;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.111em;
        color: #fff;
        margin: 0 0 0.5em 0;
      }
      p {
        font-size: 1.222em;
        line-height: 1.444em;
        color: #fff;
      }
      a {
        color: #fff;
        &:hover {
          color: var(--blue-color);
        }
      }
    }
    li {
      &:last-child {
        background: #fff;
        padding: 2em;
        border-radius: var(--border-radius-article);
        box-shadow: var(--box-shadow-article);
        table {
          tr {
            td {
              padding: 0.25em;
              p {
                font-size: 1.111em;
              }
              label {
                display: inline-block;
                color: #000;
                text-transform: uppercase;
                font-weight: 700;
                margin: 0 0 0.25em 0;
              }
            }
          }
        }
      }
    }
  }
}
/* --------- PAGE ELEMENTS --------- */
#container {
  display: table;
  margin: 0 auto;
  width: 92%;
  max-width: 1500px;
  padding: 3em 0;
  #content {
    float: left;
    width: 71%;
    a {
      color: var(--blue-color);
      &:hover {
        color: #000000;
      }
    }
    h1 {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      font-size: 2.444em;
      line-height: 1.35em;
      margin: 0 0 0.5em 0;
    }
    h2 {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      font-size: 2em;
      line-height: 1.35em;
      margin: 0 0 0.600em 0;
      color: #000;
    }
    h3 {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      font-size: 1.667em;
      line-height: 1.35em;
      margin: 0 0 0.750em 0;
      color: #000;
    }
    h4 {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      font-size: 1.444em;
      line-height: 1.35em;
      margin: 0 0 0.900em 0;
      color: #000;
    }
    ul {
      line-height: 1.5em;
      margin-bottom: 1.5em;
      padding-left: 1em;
      li {
        list-style: none;
        padding: 0.5em 0 0.4em 1.35em;
        position: relative;
        &:before {
          content: "\f00c";
          left: 0;
          font-size: 0.889em;
          position: absolute;
          font-family: "Font Awesome 7 Free";
          font-weight: 900;
          color: var(--blue-color);
        }
        ul {
          margin-bottom: 0.5em;
        }
      }
    }
    ol {
      line-height: 1.5em;
      margin-bottom: 1.5em;
      padding-left: 2em;
      list-style: decimal;
      li {
        padding: 0.3em 0;
      }
    }
    .imgright {
      width: 32%;
      float: right;
      margin: 0 0 0.5em 1.5em;
      clear: right;
      img {
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: var(--border-radius-img);
      }
    }
    .threeimgs {
      display: table;
      width: 100%;
      padding: 0;
      margin: 0 0 2em 0;
      li {
        width: 32%;
        margin: 0 2% 0 0;
        padding: 0;
        list-style: none;
        background: none;
        float: left;
        &:last-child {
          margin: 0;
        }
        img {
          display: table;
          width: 100%;
          height: auto;
          margin: 0;
          border-radius: var(--border-radius-img);
        }
        &:before {
          display: none;
        }
        &.double {
          width: 64%;
          margin: 0 0 0 2%;
        }
      }
    }
    .altimages {
      display: grid;
      gap: 1.5em;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      padding: 0;
      margin: 0;
      li {
        padding: 0;
        margin: 0;
        img {
          display: table;
          width: 100%;
          height: auto;
          margin: 0;
          border-radius: var(--border-radius-img);
        }
        &:before {
          display: none;
        }
      }
    }
  }
}
#sidebar {
  float: right;
  width: 27%;
}
.alignleft {
  float: left;
  margin: 0 1.5em 0.5em 0;
  border-radius: var(--border-radius-img);
}
.alignright {
  float: right;
  margin: 0 0 0.5em 1.5em;
  border-radius: var(--border-radius-img);
}
.alignnone, .aligncenter {
  float: none;
  margin: 1.5em auto;
  display: table;
  border-radius: var(--border-radius-img);
}
/* --------- FORM ELEMENTS --------- */
.wpcf7 {
  .wpcf7-form {
    p {
      margin: 0 !important;
    }
  }
  .wpcf7-spinner {
    visibility: hidden;
    z-index: 999;
    position: relative;
    top: -30px;
    right: 10px;
    float: right;
    margin: 0 0 -20px 0 !important;
  }
  br {
    display: none;
  }
}
input {
  height: 2.8em;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.111em;
  width: 100%;
  padding: 0 0.75em;
  border: 1px solid #ccc;
  margin: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 5px;
  &[type="submit"] {
    display: table;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    color: #fff;
    font-size: 1.111em;
    font-weight: 700;
    line-height: 2.8em;
    text-transform: uppercase;
    background: var(--blue-color);
    cursor: pointer;
    border: none;
    padding: 0 1em;
    height: inherit;
    margin: 0 auto;
    width: 100%;
    transition: .5s;
    &:hover {
      color: #fff;
      background: #000000;
    }
  }
}
.wpcf7-form-control-wrap {
  position: relative;
  display: block;
  select {
    height: 2.8em;
    width: 100%;
    padding: 0 2.5em 0 0.75em;
    font-family: "Roboto", sans-serif;
    font-size: 1.111em;
    font-weight: 400;
    background: #fff;
    border: 1px solid #ccc;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
  }
  &:has(select)::after {
    content: "\f107";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
  }
}
textarea {
  height: 7em;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.111em;
  width: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid #ccc;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  resize: none;
  border-radius: 5px;
}
div.wpcf7-response-output {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  color: red !important;
  text-align: center !important;
  font-size: 1em !important;
  border: none !important;
  line-height: 1.25em !important;
}
div.wpcf7-mail-sent-ng {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  color: green !important;
  text-align: center !important;
  font-size: 1em !important;
  border: none !important;
  line-height: 1.25em !important;
}
span.wpcf7-not-valid-tip {
  margin: 0 0 5px 0 !important;
  color: red !important;
  font-size: 1em !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.25em !important;
}
div.wpcf7-validation-errors {
  color: red !important;
  border: none !important;
  font-weight: 400;
  margin: 0.556em 0 !important;
  line-height: 1.25em !important;
}
div.wpcf7-mail-sent-ok {
  border: none !important;
  margin: 0.556em 0 !important;
  line-height: 1.25em !important;
}
#searchform {
  #s {
    width: 75%;
    float: left;
    border: 1px solid #ccc;
    margin: 0;
    font-size: 1em;
    line-height: 2.222em;
    padding: 0 1em;
    box-shadow: 1px 1px 2px #333;
  }
  input[type="submit"] {
    width: 25%;
    float: left;
    font-size: 1em;
    line-height: 2.778em;
    padding: 0;
    box-shadow: 1px 1px 2px #333;
  }
}
/* --------- BLOG PAGE ELEMENTS --------- */
.entry-meta {
  margin: 0 0 1em 0;
}
.entry-footer {
  border: 1px solid #ededed;
  background: #fbfbfb;
  padding: 0.25em 1em;
  display: table;
  width: 100%;
  margin: 1.5em 0 0 0;
}
.cat-links, .tag-links {
  float: left;
  display: table;
  width: 100%;
  padding: 0;
}
#nav-below {
  margin: 1.5em 0 0 0;
}
.nav-previous {
  float: left;
  width: 50%;
}
.nav-next {
  float: right;
  width: 50%;
  text-align: right;
}
#container {
  #content {
    article {
      margin: 0 0 3em 0 !important;
    }
  }
}
.blog, .single {
  #container {
    #content {
      article {
        .size-post-thumbnail {
          display: none;
          width: 32%;
          float: right;
          margin: 0 0 0.5em 1.5em;
          clear: right;
        }
      }
    }
  }
}
/* --------- POPUP FORM ELEMENTS --------- */
.pum-container {
  display: table;
  width: 100%;
  background: var(--blue-color);
  padding: 1.5em;
  margin: 0 0 1.5em 0;
  border-radius: var(--border-radius-article);
  box-shadow: var(--box-shadow-article);
  h3 {
    font-family: "Roboto", sans-serif;
    font-size: 1.667em;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 0.25em 0;
  }
  .wpcf7 {
    margin: 0;
    table {
      display: table;
      margin: 0 auto;
      tr {
        td {
          float: left;
          width: 100%;
          padding: 0.25em 0;
          input, select, textarea {
            margin: 0;
          }
          input[type="submit"] {
            background: #000;
            &:hover {
              background: var(--dark-gray-color);
              color: #000;
            }
          }
          label {
            font-weight: 700;
          }
          div.wpcf7-response-output {
            color: yellow !important;
          }
          div.wpcf7-mail-sent-ng {
            color: white !important;
          }
          span.wpcf7-not-valid-tip {
            color: yellow !important;
          }
          div.wpcf7-validation-errors {
            color: yellow !important;
          }
        }
      }
    }
  }
}
/* --------- SIDEBAR ELEMENTS --------- */
.sidebarform {
  display: table;
  width: 100%;
  background: var(--blue-color);
  padding: 1.5em;
  margin: 0 0 1.5em 0;
  border-radius: var(--border-radius-article);
  box-shadow: var(--box-shadow-article);
  h3 {
    font-family: "Roboto", sans-serif;
    font-size: 1.667em;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 0.25em 0;
  }
  .wpcf7 {
    margin: 0;
    table {
      display: table;
      margin: 0 auto;
      tr {
        td {
          float: left;
          width: 100%;
          padding: 0.25em 0;
          input, select, textarea {
            margin: 0;
          }
          input[type="submit"] {
            background: #000;
            &:hover {
              background: var(--dark-gray-color);
              color: #000;
            }
          }
          label {
            font-weight: 700;
          }
          div.wpcf7-response-output {
            color: yellow !important;
          }
          div.wpcf7-mail-sent-ng {
            color: white !important;
          }
          span.wpcf7-not-valid-tip {
            color: yellow !important;
          }
          div.wpcf7-validation-errors {
            color: yellow !important;
          }
        }
      }
    }
  }
}
/* --------- VIDEO ELEMENTS --------- */
.videocontainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  .videosize {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  iframe {
    display: table;
  }
}
/* --------- FULL WIDTH PAGE ELEMENTS --------- */
.page-template-full-width {
  #container {
    #content {
      width: 100%;
      margin: 0;
    }
  }
}
/* --------- CONTACT PAGE ELEMENTS --------- */
.contactpage {
  #content {
    header {
      display: none;
    }
    p:empty {
      display: none;
    }
  }
  #container {
    #content {
      article {
        margin: 0 !important;
      }
      h3 {
        position: relative;
        &:after {
          content: "";
          display: table;
          margin: 0.5em 0 0 0;
          height: 3px;
          width: 100px;
          background: var(--blue-color);
        }
      }
      .quick-actions {
        .emergency-card {
          h3:after {
            background: #fff;
          }
        }
      }
      .sectionone {
        display: grid;
        gap: 0 0;
        grid-template-columns: 45% 55%;
        width: 100%;
        background: #000;
        border-radius: var(--border-radius-article);
        box-shadow: var(--box-shadow-article);
        .left {
          padding: 4em 3em;
          color: #fff;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            right: -8vw;
            width: 8vw;
            height: 100%;
            background: #000;
            clip-path: polygon(0 0, 100% 0, 0 100%);
            z-index: 3;
            display: none;
          }
          .eyebrow {
            color: var(--blue-color);
            font-size: 1.333em;
            font-weight: 700;
            line-height: 1.333em;
            margin: 0 0 0 0;
          }
          h1 {
            font-size: 3em;
            font-weight: 800;
            line-height: 1em;
            text-transform: uppercase;
            margin: 0 0 0.25em 0;
          }
          h2 {
            font-size: 2em;
            font-weight: 800;
            line-height: 1em;
            color: var(--blue-color);
            margin: 0 0 0.5em 0;
          }
          .badges {
            display: grid;
            gap: 1em;
            grid-template-columns: repeat(2, 1fr);
            div {
              display: flex;
              align-items: center;
              gap: 1em;
              i {
                font-size: 2em;
                color: var(--blue-color);
              }
            }
          }
        }
        .right {
          background: url("images/contactbanner.webp") center no-repeat;
          background-size: cover;
          border-radius: var(--border-radius-right-only);
        }
      }
      .quick-actions {
        display: grid;
        gap: 2em 2em;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        margin: 2em 0 0 0;
        .card {
          display: flex;
          flex-direction: column;
          gap: 1em;
          padding: 2em;
          border-radius: var(--border-radius-article);
          box-shadow: var(--box-shadow-article);
          a {
            display: table;
            background: #000;
            font-size: 1.111em;
            font-weight: 700;
            color: #fff;
            margin: 0;
            padding: 0.5em 0.75em;
            border-radius: var(--border-radius-btn);
            &:hover {
              background: #fff;
              color: #000;
            }
          }
          h3 {
            font-size: 1.33em;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--blue-color);
            margin: 0 0 0.5em 0;
          }
          p {
            margin: 0;
          }
        }
        .emergency-card {
          display: flex;
          flex-direction: column;
          gap: 1em;
          padding: 2em;
          background: var(--blue-color);
          color: #fff;
          h3 {
            font-size: 1.333em;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            margin: 0 0 0.5em 0;
          }
          p {
            margin: 0;
          }
        }
      }
      .contact-grid {
        display: grid;
        gap: 2em 2em;
        grid-template-columns: 2.075fr 1fr;
        width: 100%;
        margin: 2em 0 0 0;
        .project-form {
          padding: 2em;
          background: var(--light-gray-color);
          border-radius: var(--border-radius-article);
          box-shadow: var(--box-shadow-article);
          h2 {
            font-size: 1.667em;
            font-weight: 700;
            text-transform: uppercase;
            margin: 0 0 0.5em 0;
          }
          table {
            tr {
              td {
                padding: 0.25em;
                input, select {
                  margin: 0;
                }
                textarea {
                  margin: 0;
                  height: 10em;
                }
                label {
                  font-weight: 700;
                }
              }
            }
          }
        }
        .contact-info {
          display: flex;
          flex-direction: column;
          gap: 1px;
          align-items: stretch;
          background: var(--blue-color);
          border-radius: var(--border-radius-article);
          h2 {
            font-size: 1.667em;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            background: #fff;
            color: var(--blue-color);
            padding: 0 0 0.5em 0;
            margin: 0;
          }
          .contact-item {
            display: flex;
            align-items: center;
            gap: 1em;
            padding: 1em;
            background: #fff;
            i {
              font-size: 2em;
              color: var(--blue-color);
            }
          }
          .emergency-copy {
            i {
              color: #ff0000;
            }
          }
          .map-placeholder {
            position: relative;
            iframe {
              width: 100%;
              height: 100%;
              border-radius: var(--border-radius-bottom-only);
            }
          }
        }
      }
      .service-split {
        display: grid;
        gap: 2em;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        margin: 2em 0 0 0;
        .service-panel {
          display: grid;
          gap: 1em;
          grid-template-columns: 1fr 1.5fr;
          padding: 2em;
          border-radius: var(--border-radius-article);
          box-shadow: var(--box-shadow-article);
          .service-img {
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              margin: 0;
              border-radius: var(--border-radius-img);
            }
          }
          h3 {
            font-size: 1.33em;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--blue-color);
            margin: 0 0 0.5em 0;
          }
          a {
            display: table;
            background: #000;
            font-size: 1em;
            font-weight: 700;
            color: #fff;
            margin: 0;
            padding: 0.5em 0.75em;
            border-radius: var(--border-radius-btn);
            &:hover {
              background: var(--blue-color);
            }
          }
        }
      }
      .service-note {
        display: table;
        width: 100%;
        padding: 1.5em;
        font-size: 1.333em;
        text-align: center;
        display: none;
      }
      .process {
        display: grid;
        gap: 1px;
        grid-template-columns: 2fr repeat(4, 1fr);
        width: 100%;
        margin: 2em 0 0 0;
        background: var(--blue-color);
        padding: 1px;
        border-radius: var(--border-radius-article);
        box-shadow: var(--box-shadow-article);
        div {
          background: #fff;
          padding: 2em;
          text-align: center;
          position: relative;
          &:first-of-type {
            border-radius: var(--border-radius-left-only);
          }
          &:last-of-type {
            border-radius: var(--border-radius-right-only);
          }
          a {
            display: table;
            background: #000;
            font-size: 1em;
            font-weight: 700;
            color: #fff;
            margin: 0;
            padding: 0.5em 0.75em;
            border-radius: var(--border-radius-btn);
            &:hover {
              background: var(--blue-color);
            }
          }
          h3 {
            text-transform: uppercase;
          }
          h4 {
            font-size: 1.33em;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--blue-color);
            margin: 0 0 0.5em 0;
          }
          .step {
            display: inline-flex;
            width: 2em;
            height: 2em;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #000;
            color: #fff;
            font-weight: 700;
            margin: 0 0 0.5em 0;
          }
          &:before {
            content: "";
            display: table;
            margin: 0 auto 1em auto;
            height: 4em;
            width: 4em;
          }
          &:nth-of-type(1) {
            text-align: left;
            &:before {
              display: none;
            }
          }
          &:nth-of-type(2):before {
            background: url("images/step1.webp") center no-repeat;
            background-size: contain;
          }
          &:nth-of-type(3):before {
            background: url("images/step2.webp") center no-repeat;
            background-size: contain;
          }
          &:nth-of-type(4):before {
            background: url("images/step3.webp") center no-repeat;
            background-size: contain;
          }
          &:nth-of-type(5):before {
            background: url("images/step4.webp") center no-repeat;
            background-size: contain;
          }
          p {
            &:has(+ p: empty) {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
/* --------- WIDE WIDTH PAGE ELEMENTS --------- */
.page-template-wide-width {
  #container {
    display: table;
    width: 100%;
    max-width: 100%;
    margin: 0;
    #content {
      float: none;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      header {
        display: none;
      }
    }
  }
}
/*
.page-template-wide-width #container #content {
  .wrap {
    width: min(1500px, 92%);
    margin-inline: auto;
    .eyebrow {
      margin: 0 0 0.5em;
      color: var(--blue-color);
      text-transform: uppercase;
      font-size: 1em;
      line-height: 1.333em;
      font-weight: 800;
    }
    .eyebrow.light {
      color: var(--light-blue-color);
    }
    h2 {
      margin: 0 0 0.5em;
      font-size: clamp(2.05rem, 3.8vw, 3.45rem);
      font-weight: 700;
      line-height: 1.111em;
    }
    .lead {
      font-size: 1.333em;
      line-height: 1.556em;
    }
    p {
      font-size: 1.111em;
      line-height: 1.556em;
    }
    p:empty {
      display: none;
    }
    .split-heading {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: end;
      gap: 5em;
    }
    .check-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 1em;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 1.111em;
      line-height: 1.556em;
    }
    .feature-photo {
      position: relative;
      margin: 0;
      padding: 0 0 2em 2em;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 55%;
        height: 62%;
        background: var(--blue-pale);
        z-index: -1;
      }
      img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        margin: 0;
      }
      figcaption {
        position: absolute;
        right: -1em;
        bottom: 0;
        width: 74%;
        padding: 1em;
        background: var(--dark-blue-color);
        color: #fff;
        font-size: 1em;
        line-height: 1.333em;
      }
    }
    .steps-grid {
      margin: 2em 0 0 0;
      padding: 1px;
      list-style: none;
      display: grid;
      gap: 1px;
      grid-template-columns: repeat(4, 1fr);
      background: var(--light-gray-color);
      div {
        list-style: none;
        padding: 2em;
        background: #fff;
      }
    }
  }
  .service-strip {
    position: relative;
    background: var(--blue-color);
    color: #fff;
  }
  .service-strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: #fff;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 2em 1em;
      text-align: center;
      background: var(--blue-color);
      font-size: 1.111em;
      font-weight: 700;
    }
  }
  .section {
    padding: 6em 0;
    .two-column {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 5em;
      align-items: center;
    }
  }
  .decision-section {
    background: var(--very-light-gray-color);
  }
  .section-heading.centered {
    margin: 0 auto 4em;
    text-align: center;
  }
  .decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
  }
  .decision-card {
    position: relative;
    min-width: 0;
    padding: 2em 2em 4em 2em;
    background: #fff;
    border: 1px solid #ccc;
    margin: 0 !important;
    &:after {
      content: "";
      position: absolute;
      left: 2em;
      bottom: 1.5em;
      width: 2em;
      height: 3px;
      background: var(--blue-color);
    }
    .positioning {
      font-size: 1.111em;
      font-weight: 700;
      color: var(--blue-color);
      line-height: 1.222em;
      margin: 0 0 1em 0;
    }
  }
  .featured-card {
    background: var(--dark-blue-color);
    color: #d8e2e8;
    border-color: var(--dark-blue-color);
    transform: translateY(-1em);
    h3 {
      color: white;
    }
  }
  .foundation-section {
    background: var(--dark-blue-color);
    color: #fff;
    overflow: hidden;
    .foundation-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 5em;
      align-items: center;
    }
    .foundation-copy a {
      color: var(--light-blue-color);
    }
    .foundation-copy h2 {
      color: #fff;
    }
    .foundation-gallery {
      position: relative;
      min-height: 700px;
      &:after {
        content: "FOUNDATION IN PROGRESS";
        position: absolute;
        right: 1em;
        bottom: 5em;
        color: #fff;
        font-size: 1rem;
        font-weight: 900;
        writing-mode: vertical-rl;
      }
      .foundation-main {
        width: 80%;
        height: 550px;
        object-fit: cover;
        position: absolute;
        right: 0;
        top: 0;
      }
      .foundation-detail {
        width: 50%;
        height: 400px;
        object-fit: cover;
        position: absolute;
        left: 0;
        bottom: 0;
        border: 0.5em solid var(--dark-blue-color);
      }
    }
  }
  .trust-section {
    background: var(--dark-blue-color);
    color: #fff;
    .trust-grid {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 5em;
      align-items: center;
      .trust-section {
        color: #fff;
      }
      .trust-intro h2 {
        margin: 0;
        color: #fff;
      }
      .trust-points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em 2em;
        div {
          display: flex;
          flex-direction: column;
          padding: 0 0 0 1em;
          border-left: 3px solid var(--blue-color);
          font-size: 1.111em;
          strong {
            margin: 0 0 0.5em 0;
          }
        }
      }
    }
  }
  .faq-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5em;
    align-items: start;
    .faq-list {
      border-top: 1px solid var(--light-gray-color);
      details {
        position: relative;
        border-bottom: 1px solid var(--light-gray-color);
        summary {
          list-style: none;
          cursor: pointer;
          font-size: 1.111em;
          padding: 1.556em 0 1.556em 0;
          position: relative;
          font-weight: 700;
          &::-webkit-details-marker {
            display: none;
          }
          &:after {
            content: "+";
            position: absolute;
            right: 0.5em;
            top: 50%;
            transform: translateY(-50%);
            color: var(--blue-color);
            font-size: 1.556rem;
            font-weight: 400;
          }
        }
        &[open] summary:after {
          content: "−";
        }
        p {
          padding: 0 0 1.556em 0;
        }
      }
    }
    .related-panel {
      padding: 2em;
      background: var(--very-light-gray-color);
      border-top: 0.25em solid var(--blue-color);
      a {
        padding: 1em 0 1em 0;
        display: flex;
        justify-content: space-between;
        gap: 0;
        border-top: 1px solid var(--light-gray-color);
        font-size: 1.111em;
        font-weight: 800;
      }
      br {
        display: none;
      }
    }
  }*/
/* --------- ABOUT PAGE ELEMENTS --------- */
.troyer-about {
  .about-intro {
    display: grid;
    gap: 2em 5em;
    width: min(1500px, 92%);
    margin-inline: auto;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 5em 0 0;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0 calc(50% - 50vw);
      z-index: -1;
    }

    .about-intro__copy {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      align-items: center;
      margin-top: 2em;

      a:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1em;
        background: var(--blue-color);
        color: #fff;
        padding: .75em 1em;
        border-radius: var(--border-radius-btn);

        &:hover {
          background: #000;
        }
      }

      a:last-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1em;
        background: var(--light-blue-color);
        color: #000;
        padding: .75em 1em;
        border-radius: var(--border-radius-btn);

        &:hover {
          background: #000;
          color: #fff;
        }
      }

      .service-actions {
        margin: 0 !important;
      }
    }

    .about-photo-strip {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2em;
      margin: 0;

      figure {
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius-img);
        box-shadow: var(--box-shadow-article);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          min-height: 350px;
          border-radius: var(--border-radius-img);
          margin: 0;
        }

        figcaption {
          position: absolute;
          inset: auto 0 0;
          padding: 1em;
          background: linear-gradient(
            transparent,
            rgba(6, 24, 39, .9)
          );
          color: #fff;
          font-size: 1em;
          font-weight: 700;
          line-height: 1.333em;
        }
      }
    }
  }

  .about-story {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5em;
    align-items: start;

    .about-story__person {
      h2,
      p {
        max-width: 100% !important;
        margin-inline: auto !important;
        margin: 0 !important;
        text-align: left !important;
      }
    }

    .about-story__copy {
      p {
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: left !important;
      }
    }
  }

  .about-role {
    font-size: 1em;
  }

  .about-owner-photo {
    margin: 1em 0 0;
    overflow: hidden;
    border-radius: var(--border-radius-img);
    box-shadow: var(--box-shadow-article);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 450px;
      border-radius: var(--border-radius-img);
      margin: 0;
    }
  }

  .about-section-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 3em;
    margin-bottom: 1.333em;

    h2 {
      margin-bottom: 0;
    }

    > p {
      color: var(--tr-muted);
      margin: 0;
    }
  }

  .about-service-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
    padding: 2em 0;
    border-top: 1px solid var(--blue-color);

    &:last-child {
      padding-bottom: 0;
    }

    &__intro {
      > h3 {
        font-size: 1.667em;
        line-height: 1.1111;
        margin-bottom: .75em;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }

    h4 {
      font-size: 1em;
      line-height: 1.444em;
      text-transform: uppercase;
      margin: 0 0 .75em;
    }
  }

  .about-service-note {
    font-size: .778em !important;
  }

  .about-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1em;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;

    li {
      min-width: 0;
      padding: 0 !important;
      border-bottom: 1px solid #ccc;

      &::before {
        display: none !important;
      }
	  
    }

    a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1em;
      padding: 1em 0;
      min-height: 3em;
      height: 100%;
      font-size: 1em;
      line-height: 1.333em;
      font-weight: 700;
      text-decoration: none;

      &::after {
        content: "\2192";
        font-weight: 400;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .about-reviews {
    .about-reviews__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3em;
      margin: 2em 0 0;

      figure {
        display: flex;
        flex-direction: column;
        padding: 2em;
        border-radius: var(--border-radius-article);
        box-shadow: var(--box-shadow-article);
        background: #fff;
        margin: 0 0 2em;
      }

      blockquote {
        margin: 0;
        border: 0;
        padding: 0;

        p {
          max-width: 100% !important;
          font-size: 1.111em;
          font-style: italic;
          line-height: 1.556em;
          margin: 0;
        }
      }

      figcaption {
        margin: 1em 0 0;
        font-size: 1em;
        text-align: center;

        span {
          display: block;
          font-size: 1em;
        }
      }
    }

    > .about-reviews__more {
      max-width: 100% !important;
      margin: 1.556em 0;
      font-size: 1em;

      a {
        font-weight: 700;
      }
    }
  }

  .about-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5em;

    a {
      font-weight: 700;
    }

    .inline-cta {
      display: grid;
      gap: 1em;
      padding: 2em;
      background: var(--dark-blue-color);
      color: #fff;
      border: 1px solid var(--light-blue-color);
      border-radius: var(--border-radius-article);
      box-shadow: var(--box-shadow-article);

      h2 {
        color: #fff !important;
      }

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1em;
        background: var(--blue-color);
        color: #fff !important;
        padding: .75em 1em;
        border-radius: var(--border-radius-btn);
        white-space: nowrap;

        &:hover {
          background: #fff;
          color: #000 !important;
        }
      }
    }
  }
}