/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
.g-features-particle, .g-features2-particle {
  margin-left: -0.938rem;
  margin-right: -0.938rem;
}
.g-features-particle .g-grid, .g-features2-particle .g-grid {
  margin-bottom: 2.3445rem;
}
.g-features-particle .g-grid:last-child, .g-features2-particle .g-grid:last-child {
  margin-bottom: 0;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle .g-grid:last-child .g-features-particle-item:last-child, .g-features2-particle .g-grid:last-child .g-features-particle-item:last-child {
    margin-bottom: 0;
  }
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle .g-grid, .g-features2-particle .g-grid {
    margin-bottom: 0;
  }
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle .g-features-particle-item, .g-features-particle .g-features2-particle-item, .g-features2-particle .g-features-particle-item, .g-features2-particle .g-features2-particle-item {
    margin-bottom: 2.3445rem;
  }
}
.g-features-particle .size-33, .g-features2-particle .size-33 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 33.3333%;
  -moz-flex: 0 33.3333%;
  -ms-flex: 0 33.3333%;
  flex: 0 33.3333%;
  width: 33.3333%;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle .size-33, .g-features2-particle .size-33 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 100%;
    -moz-flex: 0 100%;
    -ms-flex: 0 100%;
    flex: 0 100%;
    width: 100%;
  }
}
.g-features-particle .size-16, .g-features2-particle .size-16 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 16.6666%;
  -moz-flex: 0 16.6666%;
  -ms-flex: 0 16.6666%;
  flex: 0 16.6666%;
  width: 16.6666%;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle .size-16, .g-features2-particle .size-16 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 100%;
    -moz-flex: 0 100%;
    -ms-flex: 0 100%;
    flex: 0 100%;
    width: 100%;
  }
}
.g-features-particle .g-content, .g-features2-particle .g-content {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.g-features-particle p, .g-features2-particle p {
  margin: 0;
}
.g-features-particle .g-features-particle-button, .g-features-particle .g-features-particle-subs, .g-features2-particle .g-features-particle-button, .g-features2-particle .g-features-particle-subs {
  margin-top: 20px;
}
.g-features-particle {
  text-align: center;
}
.g-features-particle .g-features-particle-title {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.g-features-particle .g-features-particle-title a {
  color: #4d4d4d;
}
.g-features-particle .g-features-particle-title a:hover {
  color: #001f6c;
}
.g-features-particle .g-features-particle-icon, .g-features-particle .g-circle-border {
  border-radius: 50%;
  font-size: 2rem;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 0.75rem;
  color: #001f6c;
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.g-features-particle .g-circle-border {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #e0e0e5;
  height: 98px;
  width: 98px;
  left: 1px;
  top: 1px;
  z-index: 1;
  position: absolute;
  -webkit-transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
  -moz-transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
  transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
}
.g-features-particle .g-features-particle-image {
  margin-bottom: 0.75rem;
  display: inline-block;
}
.g-features-particle .g-features-particle-item .g-content:hover .g-features-particle-icon {
  color: #ffffff;
  background: #001f6c;
}
.g-features-particle .g-features-particle-item .g-content:hover .g-circle-border {
  border-color: #001f6c;
  -webkit-transform: scale(1.18);
  -moz-transform: scale(1.18);
  -ms-transform: scale(1.18);
  -o-transform: scale(1.18);
  transform: scale(1.18);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.73);
  -moz-transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.73);
  transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.73);
}
.g-features-particle.style6 .g-grid {
  margin-bottom: 1.876rem;
}
.g-features-particle.style6 .g-grid .g-block {
  padding: 0 0.938rem;
}
.g-features-particle.style6 .g-grid:last-child {
  margin-bottom: 0;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style6 .g-grid:last-child .g-features-particle-item:last-child {
    margin-bottom: 0;
  }
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style6 .g-grid {
    margin-bottom: 0;
  }
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style6 .g-features-particle-item {
    margin-bottom: 1.876rem;
  }
}
.g-features-particle.style6 .g-content {
  padding: 3rem 2.5rem;
  background: #ffffff;
  border: 1px solid #e0e0e5;
}
.g-features-particle.style6 .g-features-particle-icon, .g-features-particle.style6 .g-features-particle-image {
  margin-bottom: 1.25rem;
}
.g-features-particle.style6 .g-features-particle-title {
  margin-bottom: 1.5rem;
}
.g-features-particle.style6 .g-features-particle-button, .g-features-particle.style6 .g-features-particle-subs {
  margin-top: 30px;
}
.g-features-particle.style6 .g-subs-item {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e5;
}
.g-features-particle.style6 .g-subs-item:last-child {
  border-bottom: none;
}
.g-features-particle.style7 .g-grid {
  margin-bottom: 1.876rem;
}
.g-features-particle.style7 .g-grid .g-block {
  padding: 0 0.938rem;
}
.g-features-particle.style7 .g-grid:last-child {
  margin-bottom: 0;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style7 .g-grid:last-child .g-features-particle-item:last-child {
    margin-bottom: 0;
  }
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style7 .g-grid {
    margin-bottom: 0;
  }
}
.g-features-particle.style7 .g-features-particle-item {
  margin-top: 40px;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style7 .g-features-particle-item {
    margin-bottom: 1.876rem;
  }
}
.g-features-particle.style7 .g-content {
  padding: 25px;
  background: #ffffff;
  border: 1px solid #e0e0e5;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.g-features-particle.style7 .g-content:hover {
  border-color: #2a487a;
}
.g-features-particle.style7 .g-content:hover .g-features-particle-icon {
  background: #2a487a;
}
.g-features-particle.style7 .g-features-particle-item-inner {
  margin-top: -64px;
}
.g-features-particle.style7 .g-features-particle-icon, .g-features-particle.style7 .g-features-particle-image {
  margin-bottom: 1.25rem;
}
.g-features-particle.style7 .g-features-particle-icon .g-circle-border, .g-features-particle.style7 .g-features-particle-image .g-circle-border {
  display: none;
}
.g-features-particle.style7 .g-features-particle-icon {
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 0;
  background: #001f6c;
  color: #ffffff;
  font-size: 24px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.g-features-particle.style7 .g-features-particle-title {
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.g-features-particle.style7 .g-features-particle-button, .g-features-particle.style7 .g-features-particle-subs {
  margin-top: 30px;
}
.g-features-particle.style7 .g-subs-item {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e5;
}
.g-features-particle.style7 .g-subs-item:last-child {
  border-bottom: none;
}
.g-features-particle.style8 {
  margin-left: 0;
  margin-right: 0;
  color: #ffffff;
  text-align: left;
}
.g-features-particle.style8 .g-grid {
  margin-bottom: 0;
}
.g-features-particle.style8 .g-grid:last-child .g-features-particle-item {
  box-shadow: -20px 0 20px -20px rgba(0, 0, 0, 0.07) inset;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style8 .g-grid:last-child .g-features-particle-item {
    box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
  }
}
.g-features-particle.style8 .g-grid:last-child .g-features-particle-item:last-child {
  box-shadow: 0 0 20px -20px rgba(0, 0, 0, 0.07) inset;
}
.g-features-particle.style8 .g-features-particle-item {
  padding: 35px 30px 40px;
  box-shadow: -20px -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(1) {
  background: #001343;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(2) {
  background: #001958;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(3) {
  background: #001f6c;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(4) {
  background: #002580;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(5) {
  background: #002b95;
}
.g-features-particle.style8 .g-features-particle-item:nth-child(6) {
  background: #0031a9;
}
.g-features-particle.style8 .g-features-particle-item:last-child {
  box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
}
@media only all and (max-width: 47.99rem) {
  .g-features-particle.style8 .g-features-particle-item {
    box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
    margin-bottom: 0;
  }
}
.g-features-particle.style8 .g-features-particle-icon, .g-features-particle.style8 .g-features-particle-image {
  margin-bottom: 10px;
  color: #ffffff;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: inherit;
  font-size: 40px;
}
.g-features-particle.style8 .g-features-particle-icon .g-circle-border, .g-features-particle.style8 .g-features-particle-image .g-circle-border {
  display: none;
}
.g-features-particle.style8 .g-features-particle-title {
  color: #ffffff !important;
  font-size: 1.35rem;
}
.g-features-particle.style8 .g-features-particle-title a {
  color: #ffffff;
}
.g-features-particle.style8 .g-features-particle-title a:hover {
  text-decoration: underline;
}
.g-features-particle.style8 .g-features-particle-desc, .g-features-particle.style8 .g-features-particle-subs {
  opacity: 0.85;
}
.g-features-particle.style8 .g-features-particle-button {
  margin-top: 25px;
}
.g-features-particle.style8 .g-features-particle-button .button {
  background: none;
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.g-features-particle.style8 .g-features-particle-button .button:hover {
  background: #4d4d4d;
  border-color: #4d4d4d;
}
.g-features-particle.style8.pull-up {
  margin-top: -7.5rem;
  position: relative;
  z-index: 4;
}
.g-features2-particle .g-features2-particle-title {
  margin-top: 0;
  margin-bottom: 1rem;
}
.g-features2-particle .g-features2-particle-title a {
  color: #4d4d4d;
}
.g-features2-particle .g-features2-particle-title a:hover {
  color: #001f6c;
}
.g-features2-particle .g-features2-particle-icon {
  margin-right: 20px;
  color: #001f6c;
  font-size: 130%;
}
.g-features2-particle .g-features2-particle-image {
  margin-right: 20px;
  display: inline-block;
}
.g-features2-particle.style3 .g-grid .g-block {
  padding: 0 1rem;
}
.g-features2-particle.style3 .g-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.g-features2-particle.style3 .g-content:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid rgba(0, 0, 0, 0.2);
  border-right: 15px solid transparent;
  position: absolute;
  margin-top: 16px;
  margin-left: -15px;
  z-index: 99;
}
.g-features2-particle.style4 .g-features2-particle-icon {
  float: left;
  font-size: 55px;
  margin-right: 0;
  color: #646b7e;
}
.g-features2-particle.style4 .g-features2-particle-image {
  float: left;
  margin: 5px 0 0;
  max-width: 60px;
}
.g-features2-particle.style4 .g-title-desc-container {
  margin-left: 75px;
}
.g-features2-particle.style4 .g-features2-particle-title {
  margin-bottom: 10px;
}
.g-features2-particle.style4 .accent1 .g-features2-particle-icon {
  color: #001f6c;
}
.g-features2-particle.style4 .accent2 .g-features2-particle-icon {
  color: #2a487a;
}
.g-features2-particle.style5 .g-features2-particle-icon {
  float: left;
  font-size: 24px;
  margin-right: 0;
  color: #595f6f;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-top: 5px;
  border: 1px solid;
  border-radius: 50%;
}
.g-features2-particle.style5 .g-features2-particle-image {
  float: left;
  margin: 5px 0 0;
  width: 60px;
  height: 60px;
}
.g-features2-particle.style5 .g-features2-particle-image img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.g-features2-particle.style5 .g-title-desc-container {
  margin-left: 75px;
}
.g-features2-particle.style5 .g-features2-particle-title {
  margin-bottom: 10px;
}
.g-features2-particle.style5 .accent1 .g-features2-particle-icon {
  color: #001f6c;
}
.g-features2-particle.style5 .accent2 .g-features2-particle-icon {
  color: #2a487a;
}
.g-feedback {
  margin-left: -0.938rem;
  margin-right: -0.938rem;
}
@media only all and (max-width: 47.99rem) {
  .g-feedback > .g-grid > .g-block {
    margin-bottom: 30px;
  }
  .g-feedback > .g-grid > .g-block:last-child {
    margin-bottom: 0;
  }
}
.g-feedback.style1 .g-content, .g-feedback-slider.style1 .g-content, .g-feedback-slideset.style1 .g-content {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.g-feedback.style1 .g-feedback-text, .g-feedback-slider.style1 .g-feedback-text, .g-feedback-slideset.style1 .g-feedback-text {
  background: #ffffff;
  color: #001f6c;
  border: 1px solid #001f6c;
  padding: 20px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 3px;
}
.g-feedback.style1 .g-feedback-text:before, .g-feedback-slider.style1 .g-feedback-text:before, .g-feedback-slideset.style1 .g-feedback-text:before {
  border-right: 17px solid transparent;
  border-top: 16px solid #001f6c;
  z-index: 1;
}
.g-feedback.style1 .g-feedback-text:after, .g-feedback-slider.style1 .g-feedback-text:after, .g-feedback-slideset.style1 .g-feedback-text:after {
  border-right: 15px solid transparent;
  border-top: 15px solid white;
  margin-left: 1px;
  margin-top: -1px;
  z-index: 2;
}
.g-feedback.style1 .g-feedback-text:before, .g-feedback.style1 .g-feedback-text:after, .g-feedback-slider.style1 .g-feedback-text:before, .g-feedback-slider.style1 .g-feedback-text:after, .g-feedback-slideset.style1 .g-feedback-text:before, .g-feedback-slideset.style1 .g-feedback-text:after {
  border-left: 0 solid transparent;
  content: "";
  height: 0;
  left: 60px;
  position: absolute;
  top: 100%;
  width: 0;
}
.g-feedback.style1 .g-user-image, .g-feedback-slider.style1 .g-user-image, .g-feedback-slideset.style1 .g-user-image {
  float: left;
  margin-right: 20px;
}
.g-feedback.style1 .g-user-image img, .g-feedback-slider.style1 .g-user-image img, .g-feedback-slideset.style1 .g-user-image img {
  border-radius: 50%;
  width: 80px;
}
.g-feedback.style1 .g-user-name, .g-feedback-slider.style1 .g-user-name, .g-feedback-slideset.style1 .g-user-name {
  font-weight: bold;
  letter-spacing: 2px;
  color: #001f6c;
}
.g-feedback.style1 .g-user-company, .g-feedback-slider.style1 .g-user-company, .g-feedback-slideset.style1 .g-user-company {
  color: #001f6c;
}
.g-feedback.style1 .g-user-company a:hover, .g-feedback-slider.style1 .g-user-company a:hover, .g-feedback-slideset.style1 .g-user-company a:hover {
  color: #001f6c;
  text-decoration: underline;
}
.g-feedback .uk-dotnav, .g-feedback-slider .uk-dotnav, .g-feedback-slideset .uk-dotnav {
  margin-left: 0;
}
.g-feedback.style2, .g-feedback-slider.style2, .g-feedback-slideset.style2 {
  text-align: center;
}
.g-feedback.style2 .g-content, .g-feedback-slider.style2 .g-content, .g-feedback-slideset.style2 .g-content {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.g-feedback.style2 .g-feedback-text, .g-feedback-slider.style2 .g-feedback-text, .g-feedback-slideset.style2 .g-feedback-text {
  position: relative;
  font-size: 120%;
}
.g-feedback.style2 .g-feedback-separator, .g-feedback-slider.style2 .g-feedback-separator, .g-feedback-slideset.style2 .g-feedback-separator {
  margin: 20px auto;
  color: #001f6c;
}
.g-feedback.style2 .g-feedback-separator i, .g-feedback-slider.style2 .g-feedback-separator i, .g-feedback-slideset.style2 .g-feedback-separator i {
  margin-right: 3px;
}
.g-feedback.style2 .g-feedback-separator i:last-child, .g-feedback-slider.style2 .g-feedback-separator i:last-child, .g-feedback-slideset.style2 .g-feedback-separator i:last-child {
  margin-right: 0;
}
.g-feedback.style2 .g-user-image, .g-feedback-slider.style2 .g-user-image, .g-feedback-slideset.style2 .g-user-image {
  display: inline-block;
  margin-bottom: 15px;
}
.g-feedback.style2 .g-user-image img, .g-feedback-slider.style2 .g-user-image img, .g-feedback-slideset.style2 .g-user-image img {
  border-radius: 50%;
  width: 70px;
}
.g-feedback.style2 .g-user-company a:hover, .g-feedback-slider.style2 .g-user-company a:hover, .g-feedback-slideset.style2 .g-user-company a:hover {
  color: #001f6c;
  text-decoration: underline;
}
.g-feedback.style2 .uk-dotnav > li:first-child, .g-feedback-slider.style2 .uk-dotnav > li:first-child, .g-feedback-slideset.style2 .uk-dotnav > li:first-child {
  padding-left: 0;
}
.g-feedback .uk-dotnav, .g-feedback-slider .uk-dotnav, .g-feedback-slideset .uk-dotnav {
  margin-left: 0;
}
.g-feedback.style3, .g-feedback-slider.style3, .g-feedback-slideset.style3 {
  text-align: center;
}
.g-feedback.style3 .g-content, .g-feedback-slider.style3 .g-content, .g-feedback-slideset.style3 .g-content {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.g-feedback.style3 .g-feedback-text, .g-feedback-slider.style3 .g-feedback-text, .g-feedback-slideset.style3 .g-feedback-text {
  position: relative;
  font-style: italic;
}
.g-feedback.style3 .g-feedback-separator, .g-feedback-slider.style3 .g-feedback-separator, .g-feedback-slideset.style3 .g-feedback-separator {
  margin: 20px auto;
  color: #001f6c;
}
.g-feedback.style3 .g-feedback-separator i, .g-feedback-slider.style3 .g-feedback-separator i, .g-feedback-slideset.style3 .g-feedback-separator i {
  margin-right: 3px;
}
.g-feedback.style3 .g-feedback-separator i:last-child, .g-feedback-slider.style3 .g-feedback-separator i:last-child, .g-feedback-slideset.style3 .g-feedback-separator i:last-child {
  margin-right: 0;
}
.g-feedback.style3 .g-user-image, .g-feedback-slider.style3 .g-user-image, .g-feedback-slideset.style3 .g-user-image {
  display: inline-block;
  margin-bottom: 30px;
}
.g-feedback.style3 .g-user-image img, .g-feedback-slider.style3 .g-user-image img, .g-feedback-slideset.style3 .g-user-image img {
  border-radius: 50%;
  width: 130px;
}
.g-feedback.style3 .g-user-details, .g-feedback-slider.style3 .g-user-details, .g-feedback-slideset.style3 .g-user-details {
  margin-bottom: 15px;
}
.g-feedback.style3 .g-user-name, .g-feedback-slider.style3 .g-user-name, .g-feedback-slideset.style3 .g-user-name {
  text-transform: uppercase;
  letter-spacing: 2px;
}
.g-feedback.style3 .g-user-company a:hover, .g-feedback-slider.style3 .g-user-company a:hover, .g-feedback-slideset.style3 .g-user-company a:hover {
  color: #001f6c;
  text-decoration: underline;
}
.g-feedback.style3 .uk-dotnav > li:first-child, .g-feedback-slider.style3 .uk-dotnav > li:first-child, .g-feedback-slideset.style3 .uk-dotnav > li:first-child {
  padding-left: 0;
}
.g-feedback .uk-dotnav, .g-feedback-slider .uk-dotnav, .g-feedback-slideset .uk-dotnav {
  margin-left: 0;
}
.g-cta-button.style1 .g-cta-inner {
  padding: 30px;
  border: 1px solid #e0e0e5;
  border-left: 2px solid #001f6c;
  background: #ffffff;
}
@media only all and (min-width: 60rem) and (max-width: 74.99rem) {
  .g-cta-button.style1 .g-cta-inner {
    padding: 20px;
  }
}
.g-cta-button.style1 .g-cta-inner .g-cta-left {
  float: left;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-left {
    float: none;
    display: block;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-left {
    float: none;
    display: block;
  }
}
.g-cta-button.style1 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
  margin: 12px 0 0;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
    margin-bottom: 25px;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
    margin-bottom: 25px;
  }
}
.g-cta-button.style1 .g-cta-inner .g-cta-right {
  float: right;
  margin-top: 4px;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-right {
    float: none;
    display: block;
    margin-top: 25px;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-right {
    float: none;
    display: block;
    margin-top: 25px;
  }
}
.g-cta-button.style1 .g-cta-inner .g-cta-right.no-desc {
  margin-top: 0;
}
.g-cta-button.style1 .g-cta-inner .g-cta-right .button {
  font-size: 1rem;
  padding: 1rem 1.5rem;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-right .button {
    display: block;
    text-align: center;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-right .button {
    display: block;
    text-align: center;
  }
}
@media only all and (min-width: 60rem) and (max-width: 74.99rem) {
  .g-cta-button.style1 .g-cta-inner .g-cta-right .button {
    padding: 1rem;
  }
}
.g-cta-button.style1 .g-cta-inner .g-cta-right .button i {
  margin-right: 10px;
}
.g-cta-button.style1 .g-cta-inner .g-cta-title {
  margin: 0 0 10px;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style2 .g-cta-inner {
    margin-bottom: 1.5rem;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style2 .g-cta-inner {
    margin-bottom: 1.5rem;
  }
}
.g-cta-button.style2 .g-cta-inner .g-cta-left {
  float: left;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-left {
    float: none;
    display: block;
    text-align: center;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-left {
    float: none;
    display: block;
    text-align: center;
  }
}
.g-cta-button.style2 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
  margin: 12px 0 0;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
    margin-bottom: 25px;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-left.no-desc .g-cta-title {
    margin-bottom: 25px;
  }
}
.g-cta-button.style2 .g-cta-inner .g-cta-right {
  float: right;
  margin-top: 4px;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-right {
    float: none;
    display: block;
    margin-top: 25px;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-right {
    float: none;
    display: block;
    margin-top: 25px;
  }
}
.g-cta-button.style2 .g-cta-inner .g-cta-right.no-desc {
  margin-top: 0;
}
.g-cta-button.style2 .g-cta-inner .g-cta-right .button {
  font-size: 1rem;
  padding: 1rem 1.5rem;
  background-color: transparent;
  color: #001f6c;
  border: 2px solid #001f6c;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.g-cta-button.style2 .g-cta-inner .g-cta-right .button:hover {
  background-color: #001f6c;
  color: #ffffff;
}
@media only all and (max-width: 47.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-right .button {
    display: block;
    text-align: center;
  }
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-right .button {
    display: block;
    text-align: center;
  }
}
@media only all and (min-width: 60rem) and (max-width: 74.99rem) {
  .g-cta-button.style2 .g-cta-inner .g-cta-right .button {
    padding: 1rem;
  }
}
.g-cta-button.style2 .g-cta-inner .g-cta-right .button i {
  margin-right: 10px;
}
.g-cta-button.style2 .g-cta-inner .g-cta-title {
  margin: 0 0 10px;
}
.g-single-project .size-70 {
  padding-right: 1.876rem;
}
@media only all and (max-width: 47.99rem) {
  .g-single-project .size-70 {
    padding-right: 0px;
    margin-bottom: 30px;
  }
}
.g-single-project .g-project-title {
  color: #fff;
}
.g-single-project .g-project-main-image img {
  max-width: 640px;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}
.g-single-project .g-project-gallery {
  margin-bottom: -1rem;
}
.g-single-project .g-project-gallery img {
  width: 130px;
  height: 98px;
  object-fit: cover;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.g-single-project .g-project-gallery .g-project-image-container {
  margin: 0 1.5rem 1.5rem 0;
}
.g-single-project .g-project-gallery .g-project-image-container:hover img {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}
.g-single-project .g-project-gallery .uk-overlay-panel {
  z-index: 4;
  border-radius: 0px;
}
.g-single-project .g-project-gallery .uk-overlay-area:empty::before, .g-single-project .g-project-gallery .uk-overlay-icon::before {
  font-size: 16px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
}
.g-single-project .g-project-details {
  margin-bottom: 1.5rem;
}
.g-single-project .g-project-details h3 {
  margin-bottom: 0;
  margin-top: -5px;
}
.g-single-project .g-project-details > div {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.75rem;
}
.g-single-project .g-project-details > div:last-child {
  margin-bottom: 0;
}
.g-single-project .title-clienttext, .g-single-project .title-tasktext, .g-single-project .title-budgettext {
  color: white !important;
  margin-right: 0.75rem;
}
.g-single-project .title-clientvalue, .g-single-project .title-taskvalue, .g-single-project .title-budgetvalue {
  color: #62ccf2 !important;
}
.g-single-project .g-project-features {
  margin-bottom: 25px;
}
.g-single-project .g-project-features-item {
  border: 1px solid #e0e0e5;
  padding: 25px;
  margin: 0 0.75rem 0.75rem 0;
}
@media only all and (max-width: 47.99rem) {
  .g-single-project .g-project-features-item {
    margin-right: 0;
  }
}
.g-single-project .g-project-features-item .g-item-icon {
  margin-right: 15px;
  color: #001f6c;
}
.g-single-project .g-project-features-item .g-item-title {
  font-weight: bold;
  margin-right: 10px;
}
.g-single-project .g-project-features-item .g-item-value {
  font-style: italic;
  color: #595f6f;
}
.g-single-project .g-project-desc p:last-child {
  margin-bottom: 0;
}
.g-single-project .g-project-link i {
  margin-right: 10px;
}
.g-single-project .g-project-link-container {
  margin-top: 30px;
}
.gp_imagegallery2 .gp_heading {
  margin: 0 0 50px;
}
.gp_imagegallery2 .column {
  float: left;
}
.gp_imagegallery2 .size-1of4 {
  width: 25%;
}
.gp_imagegallery2 .size-1of3 {
  width: 33.333%;
}
.gp_imagegallery2 .size-1of2 {
  width: 50%;
}
@media screen and (max-width: 450px) {
  .gp_imagegallery2 #gp_grid[data-columns]::before {
    content: "1 .column";
  }
}
@media screen and (min-width: 451px) and (max-width: 767px) {
  .gp_imagegallery2 #gp_grid[data-columns]::before {
    content: "2 .column.size-1of2";
  }
}
.gp_imagegallery2 .gp_items.has_margin > #gp_grid {
  margin: 0 -12px;
}
.gp_imagegallery2 .gp_items.has_margin > #gp_grid .gp_img_block {
  padding: 12px;
}
.gp_imagegallery2 .gp_img_block {
  position: relative;
}
.gp_imagegallery2 .gp_img_block:hover .gp_img_icon {
  transition-delay: 0.1s;
  opacity: 1;
}
.gp_imagegallery2 .gp_img_block .gp_img_title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 40px 20px 20px;
  margin: 0;
  color: #fff;
}
.gp_imagegallery2 .gp_img_block .gp_img:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
  transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
}
.gp_imagegallery2 .gp_img {
  position: relative;
  overflow: hidden;
}
.gp_imagegallery2 .gp_img_icon {
  position: absolute;
  color: #fff;
  z-index: 1;
  opacity: 0;
  right: 20px;
  bottom: 25px;
  transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
}
.gp_imagegallery2 #gp_grid > .gp_block {
  display: none;
}
/* =========================================================
   Inner-page pattern — the expansion's service pages
   (.page-hero on the header section + .page-prose on prose blocks)
   Utilitarian standard: flat brand colors, no background images.
   Section colors ride each outline's styles.yaml (the color ID system);
   this partial carries only the two shared hooks.
   ========================================================= */
/* --- The hero band (#g-header carrying class page-hero) ---
   #g-header selectors elsewhere outrank a bare class, so the
   id+class compound is REQUIRED for these overrides to win. */
#g-header.page-hero {
  padding: 3.5rem 0 3rem;
  /* same .subheading grammar as the homepage — only the color adapts to the band */
  /* Base header button is navy-on-white; on the navy band it inverts,
       matching the nav's white phone pill */
  /* The hero image renders as a circle — the round-like-the-logo pattern */
}
#g-header.page-hero h1 {
  color: inherit;
  /* base h1 is accent navy — invisible on the navy band */
  margin-bottom: 0.75rem;
}
#g-header.page-hero .subheading {
  color: inherit;
  margin-bottom: 1.5rem;
}
#g-header.page-hero .button {
  background: #ffffff;
  color: #001f6c;
  margin-bottom: 0.5rem;
}
#g-header.page-hero .button:hover, #g-header.page-hero .button:focus {
  background: #62ccf2;
  color: #001f6c;
}
#g-header.page-hero a:not(.button) {
  color: inherit;
  text-decoration: underline;
}
#g-header.page-hero .hero-round {
  align-self: center;
}
#g-header.page-hero .hero-round img {
  display: block;
  margin: 0 auto;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  /* the logo badge's warm ring, echoed — same token as the CTA band */
  border: 1rem solid #ba8156;
}
/* Phone: the round image yields to the copy, same as the homepage logo */
@media (max-width: 47.99rem) {
  #g-header.page-hero .hero-round img {
    width: min(70%, 16rem);
    margin-top: 1.5rem;
  }
}
/* --- Readable prose measure (block class page-prose) — ~70ch --- */
.page-prose {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.page-prose ul {
  padding-left: 1.25rem;
}
.page-prose ul li {
  margin-bottom: 0.65rem;
}
/* Dark CTA band: the cta particle's white card must not inherit the band's
   white text — reassert the base text color inside it. */
#g-expanded .g-cta-inner {
  color: #424753;
}
/* The CTA card takes the same corner radius as every other card on the site;
   the style1 navy left edge is dropped (Steve 2026-08-27) */
.g-cta-button .g-cta-inner, .g-cta-button.style1 .g-cta-inner {
  border-radius: 1.25rem;
  border-left: 1px solid #e0e0e5;
  overflow: hidden;
}
/* Dark CTA band: the closing cross-link inherits the band's text color.
   The cta-button particle's white card keeps its own navy text. */
#g-expanded .page-prose, #g-expanded .page-prose a {
  color: inherit;
}
#g-expanded .page-prose a {
  text-decoration: underline;
}
/* =========================================================
   THE ALIGNMENT GRAMMAR — from the 3-agent viewport audit, 2026-08-29.
   One rule: inner pages are LEFT-ALIGNED, on ONE rail, at every width.
   Home (outline-12) is exempt where marked — it gets its own redesign.
   ========================================================= */
/* --- Grammar: the features band joins the left-aligned system (inner pages) --- */
body:not(.outline-12) .g-features-particle .g-main-title, body:not(.outline-12) .g-features-particle .g-introtext, body:not(.outline-12) .g-features-particle-item {
  text-align: start;
}
body:not(.outline-12) .g-features-particle-item .g-features-particle-icon {
  margin-left: 0;
  /* the icon circle sits on the rail, not centered */
  margin-right: auto;
}
/* --- Grammar: the CTA button sits on the same rail as its text below desktop --- */
@media (max-width: 63.99rem) {
  #g-expanded .g-cta-right {
    text-align: start;
  }
  #g-expanded .g-cta-right .button {
    margin-left: 0;
  }
}
/* --- Grammar: quote tabs + form share one centered-card, left-content rail --- */
body:not(.outline-12) #g-expanded .uk-tab {
  justify-content: flex-start;
  text-align: start;
}
body:not(.outline-12) #g-expanded .convertforms {
  margin-inline: auto;
  /* kills the 190px right void — the card centers, content stays left */
}
/* --- The rail: #g-expanded stops inventing its own gutters ---
   Phone: sections drop side padding (content meets the 25px particle rail, same as prose).
   Tablet 768-1023: the theme zeroes it — restore a small inset so content clears the bezel.
   Desktop: 2.5rem = 40px, the same rail every other section's container rides. */
@media (max-width: 47.99rem) {
  #g-expanded {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* hero image clears the bezel in the band where it ran flush at 768
       (the g-grid's negative margins cancel section padding, so the
       clearance rides the image itself) */
  #g-expanded {
    padding-left: 15px;
    padding-right: 15px;
  }
  #g-header.page-hero {
    padding-left: 25px;
    padding-right: 25px;
  }
  #g-header.page-hero .hero-round img {
    width: calc(100% - 25px);
    margin: 0 25px 0 auto;
  }
}
@media (min-width: 64rem) {
  #g-expanded {
    padding-left: 2.5rem;
    /* was 3rem — the 8px rail shift the audit caught */
    padding-right: 2.5rem;
  }
}
/* --- The CTA card breathes on phones (was a 152px column at 360) --- */
@media (max-width: 47.99rem) {
  /* hero + cta buttons: the 56px-pad pill wrapped to 2 lines at <=390 */
  #g-expanded .g-cta-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  #g-header.page-hero .button, #g-expanded .button {
    padding: 1.25rem 2rem;
  }
}
/* --- The H1 scales fluidly instead of wrapping 3-4 lines mid-band --- */
#g-header.page-hero h1 {
  font-size: clamp(2rem, calc(0.75rem + 3.5vw), 3.5rem);
  line-height: 1.15;
}
/* --- Form tap targets (audit: 13px radios) --- */
#g-expanded .convertforms input[type="radio"], #g-expanded .convertforms input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}
/* --- Footer: one alignment through phone + tablet (right-align is desktop-only) --- */
@media (max-width: 63.99rem) {
  #g-footer .g-block {
    text-align: start;
  }
}
/* --- Option C intake (quote page): collapsed alternate forms --- */
#g-expanded details.rfq-alt {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 1rem;
}
#g-expanded details.rfq-alt summary {
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 0;
}
#g-expanded details.rfq-alt summary:hover {
  text-decoration: underline;
}
/* --- Store CTA: secondary to the quote CTA, marked as outbound --- */
.g-cta-button.store-cta .g-cta-inner {
  background: transparent;
  border: 2px solid #ba8156;
  color: inherit;
  /* darkened copper: white on $lep-accent-warm is only 3.3:1, below AA for
       label text — darken(15%) lifts it to ~5.6:1 without leaving the palette */
}
.g-cta-button.store-cta .g-cta-inner .g-cta-title, .g-cta-button.store-cta .g-cta-inner .g-cta-desc {
  color: inherit;
}
.g-cta-button.store-cta .g-cta-inner .g-cta-right .button {
  background: #8b5c39;
  color: #ffffff;
}
.g-cta-button.store-cta .g-cta-inner .g-cta-right .button:hover, .g-cta-button.store-cta .g-cta-inner .g-cta-right .button:focus {
  background: #67442a;
  color: #ffffff;
}
/* --- Accessibility: honor prefers-reduced-motion site-wide ---
   WOW.js + animate.css run on every page; without this guard the
   animations play for users who have asked the OS to stop them. */
@media (prefers-reduced-motion: reduce) {
  .wow, .animated {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* --- Google reviews band (feedback particle) --- */
.reviews-band {
  /* "Google review" reads as a source label, not a job title */
}
.reviews-band .g-feedback-text {
  font-style: normal;
}
.reviews-band .g-user-name {
  font-weight: 700;
}
.reviews-band .g-user-company {
  opacity: 0.75;
  font-size: 0.9rem;
}
/* --- Projects: both spotlights sit on the dark band, as on the homepage ---
   Same treatment the homepage gives its spotlight: #424753 field (styles.yaml)
   closed by the 20px copper edge. --- */
body.outline-21 #g-utility, body.outline-21 #g-testimonials {
  border-bottom: 20px solid #ba8156;
}
body.outline-21 #g-utility h2, body.outline-21 #g-utility h3, body.outline-21 #g-utility h4, body.outline-21 #g-utility p, body.outline-21 #g-utility li, body.outline-21 #g-utility span, body.outline-21 #g-utility .g-project-title, body.outline-21 #g-utility .g-project-info-title, body.outline-21 #g-utility .g-project-info-value, body.outline-21 #g-testimonials h2, body.outline-21 #g-testimonials h3, body.outline-21 #g-testimonials h4, body.outline-21 #g-testimonials p, body.outline-21 #g-testimonials li, body.outline-21 #g-testimonials span, body.outline-21 #g-testimonials .g-project-title, body.outline-21 #g-testimonials .g-project-info-title, body.outline-21 #g-testimonials .g-project-info-value {
  color: #ffffff;
}
body.outline-21 #g-utility a:not(.button), body.outline-21 #g-testimonials a:not(.button) {
  color: #62ccf2;
}
/* Base Typography */
body {
  font-family: "Lato", sans-serif;
  color: #424753;
  /* Neutral text */
  line-height: 2.2;
  /* Keeps base text compact */
}
/* Headers - Adjusted for Multi-Line Readability */
h1, h2, h3, h4, h5, h6 {
  font-family: "Bebas Neue", sans-serif;
  margin-bottom: 1.5rem;
}
/* h1 - Hero & Primary Titles */
h1 {
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 500;
  color: #001f6c;
  letter-spacing: 2px;
}
/* h2 - Section Headings */
h2 {
  font-size: 2.16rem;
  line-height: 2.75rem;
  /* Matches .subheading */
  font-weight: 500;
  color: #001f6c;
  letter-spacing: 2px;
}
/* .subheading - Section Headings */
.subheading {
  font-size: 2rem;
  line-height: 2.75rem;
  /* Matches .subheading */
  font-weight: 500;
  color: #001f6c;
  text-transform: uppercase;
}
/* h3 - Subsection Titles */
h3 {
  font-size: 1.34rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: 2px;
}
/* h4 - Smaller Section Headers */
h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}
/* h5 & h6 - Minimal Use */
h5 {
  font-size: 0.85rem;
  line-height: 1.25rem;
  font-weight: 400;
}
h6 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
}
#g-header .button {
  display: inline-block;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 700;
  /* Stronger weight for better emphasis */
  font-size: 1rem;
  /* Bigger text for readability */
  line-height: 1.5;
  /* Improves balance & multi-line spacing */
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  background: #001f6c;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 2.5rem;
  margin: 0 0 0.75rem 0;
  padding: 1.75rem 3.5rem;
  /* Slightly bigger padding for a better click target */
  vertical-align: middle;
  text-shadow: none;
  transition: background 0.3s ease, color 0.3s ease;
}
/* Subtle White Link Hover Effect */
#g-header .button:hover, .button:focus {
  background: #002276;
  /* Slightly lighter shade on hover */
  color: #ffffff;
  /* Ensures text remains bright */
  border-color: rgba(255, 255, 255, 0.2);
  /* Soft border effect */
  text-decoration: none;
}
/* =========================================================
   LOGO — rebuilt 2026-09-01 (Steve: "override my entire approach").

   WAS: a badge image PLUS a CSS logotype rendered by a hidden particle in
   the Gantry menu, shown wide / hidden narrow, held together by a blanket
   of !important. That is why the header never scaled cleanly.

   NOW: ONE image — the real brand lockup exported from the .ai — in a
   single `logo` particle. No text to lay out, so no breakpoint juggling
   and no !important. Alignment is the only thing that changes with width:
   LEFT on desktop/tablet, CENTRED on mobile (client's spec, and the
   conventional pattern where a hamburger occupies the left edge).
   ========================================================= */
.custom-logo {
  display: flex;
  align-items: center;
  /* the <a> is what Gantry emits; nomarginall/nopaddingall only reach
       .g-block and .g-content, so the zeroing has to happen here */
  margin: 0;
  padding: 0;
}
.custom-logo img {
  display: block;
  /* scales with the viewport between a floor and a ceiling, so the header
       never lurches at a breakpoint */
  height: clamp(3.25rem, calc(2.25rem + 2.2vw), 4.5rem);
  width: auto;
}
/* Desktop + tablet: left-justified */
#g-navigation .custom-logo {
  justify-content: flex-start;
}
/* Mobile: centred between the hamburger and the right edge.
   Uses the THEME's breakpoint mixin, not a hardcoded width, so the panel
   stays the single source of truth for where the site changes shape. */
@media only all and (max-width: 47.99rem) {
  #g-navigation .custom-logo {
    justify-content: center;
  }
}
/* The footer keeps the badge alone — the footer copy already carries the
   business name, so the lockup would repeat it. The particle's own height
   is deliberately EMPTY so this rule is the single home for the size:
   a Gantry logo particle with a height emits an INLINE style that no
   stylesheet rule can beat. */
#g-footer .custom-logo {
  justify-content: flex-start;
}
#g-footer .custom-logo img {
  height: auto;
  max-height: 4rem;
}
@media only all and (max-width: 47.99rem) {
  #g-footer .custom-logo {
    justify-content: center;
  }
}
/* =========================================================
   NAVIGATION — rebuilt 2026-09-01 from a 76-agent responsive audit
   (41 confirmed defects). The root cause of the 768-959px breakage was
   OUR OWN `font-size: 1.25rem !important` with no tablet override: the
   bar never scaled, so at tablet widths three labels wrapped to two
   lines and the phone number split mid-digit.
   ========================================================= */
/* Menu type scales with the viewport instead of being locked at 20px.
   Verified: at ~16px the tablet band stops wrapping entirely. */
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
  font-size: clamp(1rem, calc(0.75rem + 0.5vw), 1.25rem);
}
/* The theme sets `word-break: break-all` on the container, which drops each
   item's min-content width to one character. Because the container is a flex
   box, that lets multi-word labels ("Our Work", "Shop EV Chargers", "Get
   Quote") shrink and wrap to two lines while single words stay on one, so the
   row rendered items at four different heights. Force a single line here — the
   same rescue already applied to the pill and the sublevel, which the top
   level was missing. */
#g-navigation .g-toplevel > li > .g-menu-item-container, #g-navigation .g-toplevel > li > .g-menu-item-container .g-menu-item-content, #g-navigation .g-toplevel > li > .g-menu-item-container .g-menu-item-title {
  white-space: nowrap;
  word-break: normal;
}
/* The bar breathes instead of being pinned to a desktop height at every
   width — it was 120px on a phone carrying a 32px burger (57% empty). */
#g-navigation {
  display: flex;
  align-items: center;
  min-height: clamp(4.5rem, calc(3rem + 3vw), 7.5rem);
}
/* Every width gets a side gutter. At the 768px and 960px container steps
   the theme dropped to zero, putting the logo's ink on the bezel. */
#g-navigation > .g-container {
  padding-left: clamp(1rem, 2vw, 2.5rem);
  padding-right: clamp(1rem, 2vw, 2.5rem);
}
#g-navigation .g-main-nav {
  display: flex;
  align-items: center;
  height: 100%;
}
#g-navigation .g-toplevel {
  display: flex;
  align-items: center;
  height: 100%;
  /* Seven items were shoulder-to-shoulder in the left third of a wide bar.
       There is a whole header to use — give the items real horizontal air
       that grows with the viewport. */
  gap: clamp(0.75rem, 2.2vw, 2.75rem);
}
#g-navigation .g-menu-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
/* The phone pill is the bar's primary conversion control. The theme sets
   `word-break: break-all` on the menu item container and rescues only
   `.g-menu-item-content`; the pill is a particle, so it inherited the
   break and split the number as "419-262-0 / 078" at 768-959px. */
#g-navigation .box-outline {
  border: 2px solid #ffffff;
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  display: inline-block;
  white-space: nowrap;
  word-break: normal;
}
/* The dropdown was 180px wide while its labels stayed at top-level size,
   so all six wrapped to two lines. It now sizes to its OWN content — the
   longest child ("New Construction & Remodeling") sets the width — with a
   floor for short menus and a ceiling so it can never run off-screen. */
#g-navigation .g-dropdown, #g-navigation .g-sublevel {
  min-width: 15rem;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
}
#g-navigation .g-sublevel > li > .g-menu-item-container {
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
#g-navigation .g-menu-item-title {
  letter-spacing: 1px;
  font-weight: 400;
}
#g-navigation a {
  color: #ffffff;
}
/* Menu states — the brand light blue ($link-hover, Styles → Link → Hover).
   The active dropdown item was inheriting accent navy ON the navy dropdown,
   which rendered it invisible. Applies to the desktop dropdown and the
   off-canvas menu, which is the same menu. */
#g-navigation .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-sublevel li:hover > .g-menu-item-container, #g-navigation .g-sublevel li:focus-within > .g-menu-item-container, #g-navigation .g-sublevel li.active > .g-menu-item-container, #g-offcanvas .g-sublevel li:hover > .g-menu-item-container, #g-offcanvas .g-sublevel li.active > .g-menu-item-container, #g-navigation .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title, #g-navigation .g-sublevel li:hover > .g-menu-item-container .g-menu-item-title, #g-navigation .g-sublevel li:focus-within > .g-menu-item-container .g-menu-item-title, #g-navigation .g-sublevel li.active > .g-menu-item-container .g-menu-item-title, #g-offcanvas .g-sublevel li:hover > .g-menu-item-container .g-menu-item-title, #g-offcanvas .g-sublevel li.active > .g-menu-item-container .g-menu-item-title {
  color: #62ccf2;
}
/* The theme hardcodes PER-SECTION link colors using ID selectors, which outrank
   every component class rule. Two of them were wrong for this site:
     #g-header a      -> rgba(255,255,255,.6)  (hero phone link dimmed)
     #g-testimonials a -> #003cd2              (a blue that is not in the palette;
                                                it also hijacked the store button)
   Re-assert brand behaviour at matching specificity. Outline 21's dark
   testimonials band keeps its own rule (higher specificity still). */
#g-header.page-hero a:not(.button) {
  color: inherit;
}
#g-testimonials a:not(.button) {
  color: #001f6c;
}
#g-testimonials .g-cta-button .g-cta-right .button {
  color: #ffffff;
}
.highlight h3 {
  font-size: 1.5rem;
}
.highlight i {
  font-size: 2.5rem;
}
/* =========================================================
   BOX CARDS — TRUE GANTRY FEATURE PARITY
   (Matches .g-features-particle.style6 .g-content)
   ========================================================= */
/* Geometry + spacing — MUST target .g-content */
.box1 > .g-content, .box2 > .g-content, .box3 > .g-content, .box-gradient > .g-content {
  padding: 3rem 2.5rem;
  border-radius: 1.25rem;
  margin-bottom: 1.876rem;
  overflow: hidden;
  box-sizing: border-box;
}
/* ---------- BOX 2 : INFORMATIONAL (BLUE) ---------- */
.box2 > .g-content {
  background-color: #62ccf2;
  color: #001f6c;
}
.box2 > .g-content h1, .box2 > .g-content h2, .box2 > .g-content h3, .box2 > .g-content h4, .box2 > .g-content p, .box2 > .g-content li, .box2 > .g-content a {
  color: #001f6c;
}
/* ---------- BOX 3 : EMERGENCY / NOTICE (YELLOW) ---------- */
.box3 > .g-content {
  background-color: #f4d35e;
  color: #2b2b2b;
}
.box3 > .g-content h1, .box3 > .g-content h2, .box3 > .g-content h3, .box3 > .g-content h4, .box3 > .g-content p, .box3 > .g-content li, .box3 > .g-content a {
  color: #2b2b2b;
}
.box3 > .g-content a {
  font-weight: 600;
  text-decoration: underline;
}
.box3 > .g-content a:hover {
  opacity: 0.85;
}
/* Restore original left-column offset ONLY */
.g-grid > .g-block:first-child .box1 > .g-content, .g-grid > .g-block:first-child .box2 > .g-content, .g-grid > .g-block:first-child .box3 > .g-content, .g-grid > .g-block:first-child .box-gradient > .g-content {
  margin-left: 1.5rem;
}
#g-header .box-outline {
  border: 2px solid #001f6c !important;
  /* outline */
  border-radius: 50px !important;
  /* Pill shape */
  padding: 10px 20px !important;
  /* Adjust spacing inside */
  display: inline-block;
  /* Ensure correct button-like display */
}
body.outline-12 #g-features {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), white), url('../../../../images/backgrounds/background_g-features.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Ensure .g-features-particle.style6 has consistent styling */
.g-features-particle.style6 .g-content {
  padding: 3rem 2.5rem;
  background: #ffffff;
  border: 1px solid #001f6c;
  border-radius: 1.25rem;
  overflow: hidden;
}
.g-features-particle.style8 {
  border-radius: 1.25rem;
  overflow: hidden;
}
.g-features-particle.style6 .g-features-particle-title {
  font-size: 1.5rem;
  color: #001f6c;
}
.g-features-particle.style6 .g-features-particle-icon, .g-features-particle .g-circle-border {
  font-size: 2.8rem;
}
.g-features-particle.style6 .g-features-particle-icon, .g-features-particle.style6 .g-circle-border {
  transition: all 0.3s ease-in-out;
}
.g-features-particle.style6 .g-content:hover .g-features-particle-icon {
  background: #62ccf2 !important;
  color: #ffffff;
  transform: scale(1.1);
}
.g-features-particle.style6 .g-content:hover .g-circle-border {
  border: 8px solid !important;
  border-color: #ba8156 !important;
  transform: scale(1.15);
}
body.outline-12 #g-features .button {
  font-size: 1rem !important;
}
.g-features-particle p, .g-features2-particle p {
  font-weight: bold;
}
.g-cta-title {
  font-size: 1.5rem;
  color: #001f6c;
}
body.outline-12 #g-utility h2 {
  font-size: 2.16rem;
  line-height: 2.75rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 2px;
}
body.outline-12 #g-utility {
  position: relative;
  /* Required for absolute positioning of overlay */
  background-size: cover;
  /* Ensures full coverage */
  z-index: 0;
  /* Ensures the background stays behind content */
}
/* Creates the semi-transparent color overlay */
body.outline-12 #g-utility::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #424753;
  /* Uses Gantry's primary background color */
  opacity: 0.9;
  /* Sets transparency level */
  z-index: -1;
  /* Keeps it behind content but above the background image */
}
body.outline-12 #g-utility .button {
  font-size: 1rem !important;
}
body.outline-12 #g-utility {
  border-bottom: 20px solid #ba8156;
  /* Adjust thickness and color as needed */
}
body.outline-12 #g-above {
  position: relative;
  /* Required for absolute positioning of overlay */
  background: url('../../../../images/backgrounds/background_g-above.webp') no-repeat center center;
  background-size: cover;
  /* Ensures full coverage */
  background-attachment: fixed;
  z-index: 0;
  /* Ensures the background stays behind content */
}
/* Creates the semi-transparent color overlay */
body.outline-12 #g-above::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  /* Uses Gantry's primary background color */
  opacity: 0.9;
  /* Sets transparency level */
  z-index: -1;
  /* Keeps it behind content but above the background image */
}
/* The CTA band treatment, site-wide (Steve 2026-08-27): the warm copper
   gradient marks every page's call-to-action section, homepage included. */
#g-expanded {
  background: linear-gradient(to bottom, #67442a 0%, #ba8156 50%, #67442a 100%);
}
#g-footer {
  background: linear-gradient(to bottom, rgba(42, 72, 122, 0.8) 0%, rgba(0, 31, 108, 0.8) 100%), url('../../../../images/backgrounds/background_g-footer.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}
#g-footer .g-social-text, #g-footer .fa-brands {
  font-size: 0.8rem;
  color: #62ccf2;
}
#g-footer .g-social-text a {
  color: #62ccf2;
  text-decoration: none;
  /* Optional: remove underline */
}
@media only all and (max-width: 47.99rem) {
  .hidden-mobile {
    display: none !important;
  }
  .visible-mobile {
    display: block !important;
  }
}
@media only all and (min-width: 60rem) {
  .hidden-desktop-only {
    display: none !important;
  }
  .visible-desktop-only {
    display: block !important;
  }
}
@media only screen and (min-width: 834px) and (max-width: 1194px) and (orientation: portrait) {
  .hidden-ipad-pro-portrait {
    display: none !important;
  }
  .visible-ipad-pro-portrait {
    display: block !important;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .hidden-ipad-pro-landscape {
    display: none !important;
  }
  .visible-ipad-pro-landscape {
    display: block !important;
  }
}
@media only screen and (min-width: 834px) and (max-width: 1366px) {
  .hidden-ipad-pro {
    display: none !important;
  }
  .visible-ipad-pro {
    display: block !important;
  }
}
@media only screen and (orientation: landscape) {
  .hidden-landscape {
    display: none !important;
  }
  .visible-landscape {
    display: block !important;
  }
}
@media only screen and (orientation: portrait) {
  .hidden-portrait {
    display: none !important;
  }
  .visible-portrait {
    display: block !important;
  }
}
@media only all and (max-width: 47.99rem) {
  .hidden-mobile-menu {
    display: none !important;
  }
  .visible-mobile-menu {
    display: block !important;
  }
}
@media only all and (max-width: 47.99rem) {
  .mobile-center {
    text-align: center !important;
    justify-content: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* Tabs container */
#g-expanded .uk-tab {
  text-align: center;
  border-bottom: none;
  margin-bottom: 0.5rem;
}
/* Tab links */
#g-expanded .uk-tab > li > a {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  /* larger labels */
  color: #ffffff;
  /* white text */
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* Hover state */
#g-expanded .uk-tab > li > a:hover {
  color: #ffffff;
  /* stays white on hover */
}
/* Active state */
#g-expanded .uk-tab > li.uk-active > a {
  color: #ffffff;
  /* stays white when active */
  border-bottom: 2px solid #ffffff;
  /* white underline */
}
/* Convert Forms: headers and labels */
#rfq-switcher form h1, #rfq-switcher form h2, #rfq-switcher form h3, #rfq-switcher form h4, #rfq-switcher form h5, #rfq-switcher form h6, #rfq-switcher form label {
  font-family: "Bebas Neue", sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.3;
  /* add breathing space for wrapped text */
}
/* Force UIkit 2 tabs to stay inline on small screens */
.uk-tab > li {
  float: none;
  /* stack vertically instead of hamburger */
  display: inline-block;
}
.uk-tab {
  white-space: normal;
  overflow: visible;
}
.uk-tab-responsive {
  display: none !important;
  /* disable the auto-dropdown version */
}
.box2 > .g-content .g-features-particle-button a {
  color: #ffffff !important;
}
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  h1 {
    font-size: 2.75rem;
    line-height: 3.15rem;
  }
  h2 {
    font-size: 1.9rem;
    line-height: 2.4rem;
  }
  .subheading {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}
@media only all and (max-width: 47.99rem) {
  h1 {
    font-size: 2.15rem;
    line-height: 2.5rem;
    letter-spacing: 1px;
  }
  h2 {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  h3 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .subheading {
    font-size: 1.35rem;
    line-height: 1.85rem;
  }
  body {
    line-height: 1.7;
  }
  h1, h2, h3, .subheading {
    letter-spacing: 1px;
  }
}
@media only all and (max-width: 30rem) {
  h1 {
    font-size: 1.95rem;
    line-height: 2.3rem;
  }
  .subheading {
    font-size: 1.25rem;
    line-height: 1.7rem;
  }
}
#g-header a:not(.button) {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* =========================================================
   NAVIGATION ACCESSIBILITY — from the same audit.
   The hamburger is Gantry core markup (a div), so the semantics are
   added by JS in the outline head; these are the visual affordances
   that CSS alone can fix.
   ========================================================= */
/* The only nav control on touch was a 32x32 target sitting on top of a
   full-width logo link — a near-miss navigated home instead of opening
   the menu. Give it a real 44px hit area.
   SCOPED to the mobile-menu breakpoint (the theme's own, styles.yaml): the
   theme hides the toggle with `display:none` above it and shows it below. An
   earlier unguarded `display:flex` here (an id selector) beat that and left
   the hamburger showing on desktop ALONGSIDE the full menu. Only style the
   toggle where it is meant to exist. Kept at 60rem to match the breakpoint —
   seven items plus logo and pill do not fit horizontally on a tablet, so the
   hamburger takes over below 960px and the spaced bar shows only above it. */
@media only all and (max-width: 60rem) {
  #g-navigation .g-offcanvas-toggle, .g-offcanvas-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}
/* No focus indicator was designed anywhere, and two rules deleted the
   browser default. Keyboard users could not see where they were. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #62ccf2;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Current page was conveyed by a 2px underline at 20% white — 1.7:1,
   under the 3:1 floor for a non-text indicator, and by colour alone. */
#g-navigation .g-toplevel > li.active > .g-menu-item-container {
  box-shadow: inset 0 -3px 0 0 #62ccf2;
}
/* Skip link — keyboard users had to pass the whole nav on every page. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #ffffff;
  color: #001f6c;
  font-weight: 700;
}
.skip-to-content:focus {
  left: 0.5rem;
  top: 0.5rem;
}
/* =========================================================
   ACCESSIBILITY — keyboard + assistive tech (2026-09-01 audit)
   ========================================================= */
/* The dropdown only opened on hover, so the six service pages were
   unreachable by keyboard. Mirror the theme's .g-active state on
   :focus-within so tabbing to Services opens it. */
#g-navigation .g-toplevel > li:focus-within > .g-dropdown {
  visibility: visible;
  opacity: 1;
}
/* Screen-reader-only text (used to announce links that open a new window). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Off-canvas close control, injected for keyboard and touch users —
   there was no way out of the panel except the hamburger behind it. */
.g-offcanvas-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: none;
  border: 0;
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.g-offcanvas-close:hover, .g-offcanvas-close:focus-visible {
  color: #62ccf2;
}
/* =========================================================
   TAP TO CALL — mobile header (2026-09-01)
   The phone pill lives in the menu, so whenever the hamburger is up the
   number is hidden in the closed off-canvas drawer: an electrician's site
   with no visible way to call from the header. This mirrors the hamburger
   on the right, so it shows across the SAME band the hamburger does (up to
   60rem/960px) — otherwise the tablet band had a hamburger and no call
   button. It is a real tel: link, so GTM's existing click_to_call key event
   counts it with no extra tagging. */
.nav-call-block {
  position: static;
}
.nav-call {
  display: none;
}
@media only all and (max-width: 60rem) {
  .nav-call {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.1rem;
    text-decoration: none;
  }
  .nav-call:hover, .nav-call:focus-visible {
    background: #ffffff;
    color: #001f6c;
  }
}
/*# sourceMappingURL=custom_18.css.map */