/* ================================================ */
/* KNIGHT PLUMBING - COMPLETE custom.css            */
/* Structure: Legacy CSS → New Design CSS → Fixes   */
/* ================================================ */

.frm_style_formidable-style.with_frm_style .frm_form_field input:invalid {
  color: #555555 !important;
  background-color: #ffffff !important;
}

/* ---- LEGACY CSS BLOCK 1 (lines 1-1551) ---- */
html {
  scroll-behavior: smooth;
}


html {
     --size: 14px!important;
     position: inherit;
}

.site{
  max-width: 1700px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0em 0em 2em #e0e5ff;
}

.show-for-small-only{
  display: none!important;
}

a {
    -webkit-transition: color .4s ease 0s;
    -moz-transition: color .4s ease 0s;
    -o-transition: color .4s ease 0s;
    transition: color .4s ease 0s;
}

.hide{
  display: none;
}


.modal-dialog {
    max-width: 660px;
    margin: 12.75rem auto!important;
    z-index: 99999;
}

.modal-backdrop{
  z-index: 1!important;
}

.schema a{
  text-decoration: none;
}

body .btn-primary, body .btn-secondary{
  border: 0;
  text-transform: uppercase;
  padding: 0.72em 1.6em;
  margin: 1em 0 0 0;
  letter-spacing: .09em;
  margin: auto;
  display: block;
  position: relative;
  color: black;
  font-weight: 700;
  border-radius: 0em;
}

.btn-primary.content-btn{
  max-width: 500px;
  margin-left: 0;
}


body .btn-secondary{  
  font-weight: 900;
}

body .btn-secondary:hover{ 
}

.post-thumbnail img{
  position: relative;
  padding: 0!important;
  margin: auto;
  display: block;
}

.post-thumbnail{
    overflow: hidden;
    margin-top: 1em;
}


body .button:focus, body .button:hover { 
    color: #fefefe;
}


.single-blog img{
  padding: 5%;
}

.single-blog .entry-title{
  font-size: 2em;
  color: black;
}

.single-blog .entry-meta{
  position: relative;
  padding: 2%;
  background: #f4f4f4;
  border-left: .5em solid #f43b3b;
}

.single-blog .nav-links a{
  display: block;
  background: #f43b3b;
  color: white;
  transition: all .3s ease-in-out;
  padding: 2% 5%!important;
  margin-bottom: 7%;
}

.single-blog .nav-links a:hover{
  background: black!important;
}

 a[href^="tel"]{
    color:inherit;
    text-decoration:none;
    margin-bottom: 3%;

 }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ededd!important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ededd!important;
}  




@font-face {
  font-family: 'icomoon';
  src:  url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.eot?jw3tcp');
  src:  url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.eot?jw3tcp#iefix') format('embedded-opentype'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.woff2?jw3tcp') format('woff2'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.ttf?jw3tcp') format('truetype'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.woff?jw3tcp') format('woff'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.svg?jw3tcp#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-thumbs-pm:before {
  content: "\e90c";
  font-size: 2.2em;
}

.icon-bb-thumbsup:before {
  content: "\e977";
}

.icon-drain-cleaning:before {
  content: "\eb0f";
}

.icon-max-sewer-replace:before {
  content: "\e981";
}

.icon-x1:before {
  content: "\e904";
}

.icon-x2:before {
  content: "\e951";
}

.icon-x .path1:before {
  content: "\e921";
  color: #000;
}
.icon-x .path2:before {
  content: "\e9cf";
  color: #fff;
  margin-left: -1em;
}

.icon-facebook-square:before {
  content: "\f082";
}

.icon-youtube-square:before {
  content: "\f166";
}

.icon-bb-truck:before {
  content: "\e9cb";
}



.icon-check-circle:before {
  content: "\f058";
}

.icon-map-marker:before {
  content: "\f041";
}

.icon-location1:before {
  content: "\e9dd";
}

.icon-location3:before {
  content: "\e9f6";
}

.icon-check-circle-o:before {
  content: "\f05d";
}

.icon-phone:before {
  content: "\f095";
}

.icon-home1:before {
  content: "\f015";
}

.icon-search:before {
  content: "\f002";
}

.icon-search1:before {
  content: "\f003";
}

.icon-check-circle:before {
  content: "\f058";
}

.icon-clock-ni:before {
  content: "\e99e";
}



.icon-money1:before {
  content: "\f0d6";
}

.icon-airlux-truck:before {
  content: "\e9c9";
}

.icon-sump-pmp-tr:before {
  content: "\e949";
}

.icon-heating-ico-patriot:before {
  content: "\eb70";
}

.icon-sewer-cam:before {
  content: "\ead8";
}

.icon-sewer-pumpcon:before {
  content: "\e905";
}

.icon-droplet:before {
  content: "\e979";
}

.icon-tools-hales:before {
  content: "\e92c";
}

.icon-line-tools-2-icon:before {
  content: "\e925";
}

.icon-tools-pm:before {
  content: "\e90f";
}

.icon-mastercraft-emergency:before {
  content: "\e99b";
}

.icon-water-leaks-icon:before {
  content: "\e933";
}
.icon-money-icon-secop:before {
  content: "\e934";
}
.icon-building-icon:before {
  content: "\e935";
}
.icon-calendar-spotcon:before {
  content: "\e908";
}
.icon-price-tag-spotcon:before {
    content: "\e922";
    font-size: 1.6em;
}
.icon-watercondcon:before {
  content: "\e927";
}
.icon-leak-detectcon:before {
  content: "\e92e";
}
.icon-background-check-crcon:before {
  content: "\e932";
}
.icon-tankless-water-heater-cr-con:before {
  content: "\e92d";
}
.icon-water-heater-cr-con:before {
  content: "\e930";
}
.icon-wac-er-icon:before {
  content: "\e93c";
}
.icon-thumbs-up-sm:before {
  content: "\e938";
}
.icon-toolcon-sm:before {
  content: "\e939";
}
.icon-service-area-patriot-icon:before {
  content: "\e928";
}
.icon-drain-clean-patriot-icon:before {
  content: "\e92f";
}
.icon-sewer-patriot-icon:before {
  content: "\e931";
}
.icon-fast-truck-con:before {
  content: "\e92c";
}
.icon-calculator-icon:before {
  content: "\e929";
}
.icon-coin-hands-icon:before {
  content: "\e920";
}
.icon-gear-aplus-icon:before {
  content: "\e925";
}

.icon-aplus-ontime-con:before {
  content: "\e90d";
}
.icon-aplus-fam-con:before {
  content: "\e91b";
}
.icon-ac-repair-con:before {
  content: "\e936";
}
.icon-toilet-con:before {
  content: "\e923";
}
.icon-plumbcon:before {
  content: "\e91e";
}
.icon-newtech-icon:before {
  content: "\e902";
}
.icon-ontime-icon:before {
  content: "\e904";
}
.icon-clean-masters:before {
  content: "\e900";
}
.icon-trophy-masters:before {
  content: "\e903";
}
.icon-pricetag-masters:before {
  content: "\e91f";
}
.icon-finance-masters:before {
  content: "\e921";
}
.icon-customer-education:before {
  content: "\e901";
}
.icon-home-comfort:before {
  content: "\e905";
}
.icon-live-answer:before {
  content: "\e92a";
}
.icon-mid-finance:before {
  content: "\e907";
}
.icon-mid-shield:before {
  content: "\e909";
}
.icon-mid-thumbs-up:before {
  content: "\e90b";
}
.icon-schedule-icon-spring:before {
  content: "\e906";
}
.icon-emergency-icon-spring:before {
  content: "\e926";
}
.icon-tools-icon-spring:before {
  content: "\e90a";
}
.icon-family-icon-spring:before {
  content: "\e91d";
}
.icon-live-answer-icon-spring:before {
  content: "\e919";
}
.icon-truck-icon-spring:before {
  content: "\e924";
}
.icon-calendar-icon-spring:before {
  content: "\e91a";
}
.icon-finance-icon-spring:before {
  content: "\e90e";
}
.icon-stars-icon-spring:before {
  content: "\e90f";
}
.icon-trustedtechs-icon-spring:before {
  content: "\e917";
}
.icon-pricing-icon-spring:before {
  content: "\e918";
}
.icon-leftcoast-repaircon:before {
  content: "\e91c";
}
.icon-circ-yelp-icon:before {
  content: "\e910";
}
.icon-fb-circle:before {
  content: "\e911";
}
.icon-instagram-circle:before {
  content: "\e912";
}
.icon-linkedin-cricle:before {
  content: "\e913";
}
.icon-morrow-bbb:before {
  content: "\e914";
}
.icon-new-x-circle:before {
  content: "\e915";
}
.icon-yt-circle:before {
  content: "\e916";
}
.icon-plus:before {
  content: "\f067";
}
.icon-minus:before {
  content: "\f068";
}
.icon-search:before {
  content: "\f002";
}
.icon-heart:before {
  content: "\f004";
}
.icon-star:before {
  content: "\f005";
}
.icon-star-o:before {
  content: "\f006";
}
.icon-user:before {
  content: "\f007";
}
.icon-check:before {
  content: "\f00c";
}
.icon-close:before {
  content: "\f00d";
}
.icon-remove:before {
  content: "\f00d";
}
.icon-times:before {
  content: "\f00d";
}
.icon-search-plus:before {
  content: "\f00e";
}
.icon-search-minus:before {
  content: "\f010";
}
.icon-cog:before {
  content: "\f013";
}
.icon-gear:before {
  content: "\f013";
}
.icon-home:before {
  content: "\f015";
}
.icon-clock-o:before {
  content: "\f017";
}
.icon-play-circle-o:before {
  content: "\f01d";
}
.icon-print:before {
  content: "\f02f";
}
.icon-image:before {
  content: "\f03e";
}
.icon-photo:before {
  content: "\f03e";
}
.icon-picture-o:before {
  content: "\f03e";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-chevron-left:before {
  content: "\f053";
}
.icon-chevron-right:before {
  content: "\f054";
}
.icon-check-circle:before {
  content: "\f058";
}
.icon-check-circle-o:before {
  content: "\f05d";
}
.icon-calendar:before {
  content: "\f073";
}
.icon-cogs:before {
  content: "\f085";
}
.icon-gears:before {
  content: "\f085";
}
.icon-comments:before {
  content: "\f086";
}
.icon-phone:before {
  content: "\f095";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-facebook-f:before {
  content: "\f09a";
}
.icon-wrench:before {
  content: "\f0ad";
}
.icon-group:before {
  content: "\f0c0";
}
.icon-users:before {
  content: "\f0c0";
}
.icon-bars:before {
  content: "\f0c9";
}
.icon-navicon:before {
  content: "\f0c9";
}
.icon-reorder:before {
  content: "\f0c9";
}
.icon-google-plus:before {
  content: "\f0d5";
}
.icon-money:before {
  content: "\f0d6";
}
.icon-caret-down:before {
  content: "\f0d7";
}
.icon-caret-up:before {
  content: "\f0d8";
}
.icon-caret-left:before {
  content: "\f0d9";
}
.icon-caret-right:before {
  content: "\f0da";
}
.icon-envelope:before {
  content: "\f0e0";
}
.icon-linkedin:before {
  content: "\f0e1";
}
.icon-angle-double-left:before {
  content: "\f100";
}
.icon-angle-double-right:before {
  content: "\f101";
}
.icon-angle-double-up:before {
  content: "\f102";
}
.icon-angle-double-down:before {
  content: "\f103";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-angle-up:before {
  content: "\f106";
}
.icon-angle-down:before {
  content: "\f107";
}
.icon-mobile:before {
  content: "\f10b";
}
.icon-mobile-phone:before {
  content: "\f10b";
}
.icon-ticket:before {
  content: "\f145";
}
.icon-level-down:before {
  content: "\f149";
}
.icon-thumbs-up:before {
  content: "\f164";
}
.icon-youtube:before {
  content: "\f167";
}
.icon-instagram:before {
  content: "\f16d";
}
.icon-yelp:before {
  content: "\f1e9";
}
.icon-newspaper-o:before {
  content: "\f1ea";
}
.icon-calculator:before {
  content: "\f1ec";
}
.icon-calendar-check-o:before {
  content: "\f274";
}
.icon-user-circle:before {
  content: "\f2bd";
}
.icon-user-circle-o:before {
  content: "\f2be";
}


/* -------------------------------------------------------------------- */

.wrap1 {
    z-index: 2;
    position: relative;
    padding: 0 2%;
}

.row {
    max-width:100%!important;
    margin: auto;
}

.clear{
    clear:both;
}
  
ul {
    margin-left: 0em!important;
}

 /* -------------------------------------------------------Header Section CSS---------------------------------  */


 .main-bar__quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  background: var(--brand-accent);
  color: var(--brand-navy-deep, #1a1a2e);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  margin: auto;
}

.main-bar__quote-btn:hover {
  background: #fff;
  color: var(--brand-primary);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .main-bar__schedule-btn,
  .main-bar__quote-btn { font-size: 0.72rem !important; padding: 10px 12px !important; white-space: nowrap !important; }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .main-bar__schedule-btn,
  .main-bar__quote-btn { font-size: 0.8rem !important; padding: 11px 16px !important; }
}

/* Search Bar & Page */

 /* Top Bar Section CSS  */


 /* ---------------------------------------------------------------------------------------- */

.desk-nav{
  display: none;
  width: 100%;
  max-width: none;
  padding: 0% 0% 0% 0%;
}  


.logo-block{
  position:relative;
  z-index:99;
  background-color:#fff;
}


.desk-nav .row>* , .mobile-nav .row>* {
   padding: 0;
}

.mobile-nav{
  padding: 0;
  width: 100%;
  max-width: none;
  padding: 0% 0 0% 0;
  z-index: 3;
  position: relative;
  background: white;
}

.main-bar{
  padding: 0% 0%;
}

.logo-image{
  position: relative;
}

.logo-image img{
  position: relative;
  width: 18em;
  display: block;
  margin: auto;
  transition: all .3s ease-in-out;
  left: -0.8em;
  z-index: -2;
}

.logo-image a{
  position: relative;
  display: block;
  transform: scale(1);
  /* z-index: -2; */
} 

.smallbar .logo-image img{
  width: 11em;
}

.contact-info {
    font-size: 1.7em;
    font-weight: 900;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    line-height: 1;
    letter-spacing: .04em;
    text-align: -webkit-center;
    margin-top: 0%;
    padding-right: 1%;
}

.contact-info strong{
  position: relative;
  font-size: 0.9em;
  font-weight: 400;
  color: #0a05e4;
  letter-spacing: .04em;
  top: .1em;
  display: block;
}

.contact-info span{
  position: relative;
  top: 0.1em;
}

.contact-info a:hover{
  color: #137bbe;
}
 

.contact-info a{
    font-size: 1.4em;
    display: block;
    background-color: #2c1466;
    width: 1.9em;
    border-radius: 23em;
    height: 1.9em;
    line-height: 2;
    color: #ffffff;
    margin: auto;
    transition: all .3s ease-in-out;
    text-align: center;
    text-decoration: none;
    outline: .1em solid #65ee61;
    outline-offset: -0.2em;
}

.mobile-nav .btn-primary {
    color: #1f1f1f;
    border: 0;
    border-radius: 0;
    padding: 0.8em 1.6em;
    background: #edf5fc;
    margin-left: 0;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    font-size: 1.3em;
}

.mobile-nav .btn-primary span{
  display: block;
}

.shift-menu{
  background: rgb(42,42,42);
  background: -moz-radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
  background: radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
  padding: 10.2em 0 0 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a2a2a",endColorstr="#161616",GradientType=1);
}

.shift-item{
  position: relative;
}

.offcanvas-end{
  z-index: 9999;
  width: 25em;
}

.shift-item a{
  display: block;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85em 0em .85em 1em;
  background: #ff000000;
  color: white;
  margin: 0em 0;
  border-bottom: 1px solid #ffffff1a;
  border-left: 0em solid #003046;
  transition: all .3s ease-in-out;
}

.shift-item .btn-secondary{
  display: none;
  position: absolute;
  right: 0em;
  top: 0.3em;
  background: #ff000000;
  border: 0;
  font-size: 1.3em;
  padding: 0.2em 0.7em;
}

.shift-item a:hover{
  color: #ffffff;
  background-color: #2c1466;
  border-left: 0.5em solid #2c1466;
}

.dropdown.shift-item .btn-secondary{
  display: block;
}

.shift-item a.sub-item{
  background: #0000005c;
}

.shift-item a.sub-item:hover{
    background-color: #2c1466;
}

/* ---------------------- */


/* NAV CSS  */ 

 .modal {
    z-index: 999999999999999999999999999999;
}

.modal-header {
    padding: 0;
    border: 0;
}

.section-protecte .modal-header h5{
  color: white!important;
}

.section-protecte .with_frm_style .frm_primary_label, .section-protecte .with_frm_style .frm_checkbox label{
  color: white;
}

.frm_style_formidable-style.with_frm_style .frm_submit button{
  width: 100%!important;
  display: block;
  background-color: #2c1466;
  color: black;
}

.pop-label{
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6em;
  letter-spacing: .05em;
}

.modal-content {
    background-color: #2c1466;
    box-shadow: 0em 0em 1em #0000004f;
}

.modal-content iframe{
  height: 46em!important;
}

.modal-header .btn-close{
  position: relative;
  left: -.9em;
}

.modal-title {
    display: block;
    text-align: center!important;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 1.3em;
    padding-top: 1em;
    margin-bottom: -0.5em;
}

header#masthead {
    margin-bottom: 0;
    background-color: #ffffff !important;
    /* box-shadow: none!important; */
    padding: 0rem 0rem!important;
    z-index: 9999;
    width: 100%;
    transition: all .3s ease-in-out;
    top: 0em;
    display: block;
    position: fixed;
    max-width: 1700px;
}

 header#masthead.smallbar{
     box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%)!important; 
}

.nav-accent{
  position: relative;
  padding: 1em 0;
}

.nav-accent:before, .nav-accent:after{
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #2c1466;
  z-index: -1;
  clip-path: polygon(2.5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.nav-accent:after{
  background: #044ba1;
  z-index: -2;
  right: 0;
  clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 101.2%;
}

.contact-info-desk a{
  color: white;
  text-align: center;
  font-weight: 900;
  font-size: 2em;
  line-height: 1.1;
  margin-bottom: 0;
}

.contact-info-desk a em{
  display: block;
  font-style: normal;
  font-size: .45em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-info-desk a span{
  color: #2c1466;
}

.nav-accent .btn{
  transform: skew(-10deg);
}

.top-bar{
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  letter-spacing: .1em;
  transition: all .3s ease-in-out;
  border-bottom: 1px solid #ffffff1f;
  color: #0099bb;
  margin: auto;
  padding-right: 10em;
}

.top-bar #menu-top-menu{
  -webkit-align-items: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.smallbar .top-bar{
  font-size: 1em;
}

.top-bar input::-webkit-input-placeholder,.top-bar textarea::-webkit-input-placeholder {
  color: #fff!important;
}
.top-bar input:-moz-placeholder,.top-bar textarea:-moz-placeholder {
  color: #fff!important;
}  

.top-bar .btn-primary{
  display: block;
  letter-spacing: .08em;
  font-size: .9em;
  color: black;
  border: 0;
  border-radius: 0;
}

.main-nav{
  position: relative;
  padding-top: 1%;
}

.search-bar input{
  background-color: #ffffff00;
  border: 0;
  color: white;
  border-bottom: 1px solid white;
}

 .smallbar .desk-nav .btn-primary{
   font-size: 0.9em;
 }
 
.desk-nav .top-bar .btn-primary{
  color: white;
  font-size: .8em;
  width: 100%;
  margin-left: auto;
  transition: all .3s ease-in-out;
  padding-left: 2em;
}

.menu{
  position: relative;
  list-style: none;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  list-style-type: none;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
}

#menu-top-nav{
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
}
 
.top-bar .menu>li a{
  font-size: 0.7em;
  padding: 0.2em 0.7em;
  color: black!important;
}

.top-bar .menu>li a svg{
  width: 2.1em;
}

.top-bar .menu>li a svg path{
  fill: #044ba1;
}


.top-bar .menu>li a span{
  color: #044ba1;
}

.menu>li a:hover span{
  color: white;
}

.menu>li.sched-link a{
  color: white!important;
  background: #e78b3d;
  border-radius: 0em;
font-family: 'Exo 2', sans-serif;  
}

.menu>li a{
  padding: 0.3em 0.9em 0.6em 0.9em;
  text-decoration: none;
  color: black!important;
  font-size: 1.0em;
  display: block;
  transition: all .3s ease-in-out;
  position: relative;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.08em;
}

.menu>li a span{
  color: #00b1b9;
}

.smallbar .menu>li a{
  font-size: 0.86em;
}

 .menu>li.menu-item-has-children> a:before {
    content: "\f107";
    font-family: 'icomoon' !important;
    color: #000000;
    display: block;
    position: absolute;
    font-size: 0.8em;
    top: 22%;
    right: 0.2%;
}


 .menu>li.menu-item-has-children> a:hover:before {
    color: #ffffff;
}
 
.sub-menu li a{
  color: #030303!important;
}
 

.top-bar .menu>li:nth-child(3) a{
  border: 0;
}

.menu>li a:hover{
  background-color: #044ba1!important;
  color: white!important;
}
 

.mainnav{
  text-align: right;
  padding: 0.7% 0;
  position: relative;
}
.nav-border{
  padding-left: 0em!important;
  padding-right: 0em!important;
}

.mainnav .menu {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.mainnav .menu .active>a {
    color: #ffffff;
    background: #f78d1f;
}

.mainnav .menu .active>a:before{
  color: black!important;
}

.mainnav .menu .current-menu-item.active>a {
    color: #ffffff;
    background: #faa61a;
}

.mainnav .menu .sub-menu .current-menu-item.active>a {
    color: #fefefe!important;
    background: #f78d1f!important;
}


.mainnav .menu>li>a {
    display: block;
    padding: 0.7rem 0.6rem;
    line-height: 1;
    font-weight: 400;
    font-size: 0.78em;
    color: black;
    letter-spacing: .02em;
}


.mainnav .menu>li>a:hover{
    color: #ffffff;
    background: #f78d1f;
}

.mainnav .menu>li>a:hover:before{
  color: white;
}

.menu-item-has-children{
  position: relative;
  transition: all .3s ease-in-out;
}


.menu>li .sub-menu  a{
  text-transform: none;
  letter-spacing: inherit;
  padding: 0.6em 1em;
  text-align: left;
}


.mainnav .menu>li.menu-item-has-children >a:before {
    content: "\f107";
    font-family: 'icomoon' !important;
    color: #ffffff;
    display: block;
    position: absolute;
    font-size: 0.8em;
    top: 37%;
    right: 0.5%;
}

.main-nav .menu-item-has-children > .sub-menu{
    top: 100%;
    right: auto;
    left: 0;
}

.main-nav .menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #ebebec;
  list-style: none;
  margin-left: 0.0rem;
  width: 17em;
  height: 0;
  display: none;
  z-index: 99;
}

.main-nav .menu-item-has-children:hover .sub-menu{
  opacity: 1;
  height: auto;
  top: 100%;
  left: 0;
  display: block;
  animation: fadeIn .2s;
  font-size: .88em;
  text-align: left;
  padding-left: 0;
}

.main-nav .last-column.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    height: auto;
    top: 100%;
    right: 0%;
    left: auto!important;
    display: block;
    animation: fadeIn .2s;
    font-size: .88em;
    text-align: left;
    left: auto;
}

.main-nav .slim.menu-item-has-children .sub-menu{

    color: #9ad25d;
    background: #33204d;;
  width: 165%;
  text-align: left;
  padding-left: 0%;
}

.main-nav .slim.menu-item-has-children:hover .sub-menu {
    left: 0%;
}


.main-nav .menu-item-has-children .sub-menu>li{
  padding: 0%;
} 

.sub-menu a{
  padding: 5% 4% 5% 4%;
  display: block;
  color: #1d1d1d;
  font-size: .9em;
  transition: all .3s ease-in-out;
  border-bottom: 1px solid #00000014;
}

.sub-menu a:hover{
    color: #ffffff;
    background: #e62318;
    padding: 5% 4% 5% 7%;
}


/* Heating Tab 2 columns Sub menu */

.main-nav .double-column.menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #e1e1e1;
  list-style: none;
  margin-left: 0.0rem;
  width: 36em;
  height: 0;
  display: none;
  text-align: left;
  z-index: 99;
} 




.main-nav .double-column.menu-item-has-children:hover .sub-menu{
  opacity: 1;
  height: auto;
  top: 100%;
  left: 0%;
  display: block;
  animation: fadeIn .2s;
}

.main-nav .double-column.menu-item-has-children .sub-menu>li{
  width: 50%;
  float: left;
  padding: 0%;
} 

.main-nav .double-column.menu-item-has-children .sub-menu>li.full-sub{
  width: 100%;
  float: left;
  padding: 0%;
} 

.double-column .sub-menu .full-sub a {
    padding: 0.3em 0.6em 0.7em 0.6em;
    border-right: 1px solid #00000014;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

.double-column .sub-menu .full-sub a span{
   font-size: 1.8em;
   position: relative;
   top: 0.2em;
}

.last-cool{
  float: right!important;
}

.double-column .sub-menu a{
  padding: 0.9em 0.6em 0.9em 0.7em;
  border-right: 1px solid #00000014;
}


.main-nav .double-column-l.menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #006ee3;
  list-style: none;
  margin-left: 0.0rem;
  width: 410%;
  height: 0;
  display: none;
  text-align: left;
  z-index: 99;
} 

.main-nav .double-column-l.menu-item-has-children:hover .sub-menu{
  opacity: 1;
  height: auto;
  top: 100%;
  right: 0%;
  display: block;
  left: auto;
  animation: fadeIn .2s;
}

.main-nav .double-column-l.menu-item-has-children .sub-menu>li{
  width: 50%;
  float: left;
  padding: 0%;
} 

/* Fly out menu */


.main-nav .double-column .fly-out.menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #1a6887;
  list-style: none;
  margin-left: 0.0rem;
  width: 18.8em;
  height: 0;
  display: none;
  text-align: left;
  z-index: 99;
} 

.main-nav .double-column.menu-item-has-children .sub-menu>li.fly-out:hover{
  background-color: #f2a525;
}


.main-nav .double-column.menu-item-has-children .sub-menu>li.fly-out:hover .sub-menu{
   opacity: 1;
   position: absolute;
   background: #dcdcdc;
   height: auto;
   top: 0%;
   right: -18.8em;
   display: block;
   animation: fadeInUp .2s;
   left: auto;
}

.main-nav .double-column .fly-out.menu-item-has-children .sub-menu>li {
    width: 100%;
    float: left;
    padding: 0%;
}

.quick-nav{
  position: fixed;
  top: -3em;
  width: 100%;
  background-color: #044ba1;
  padding: 2% 2% 5.5% 2%;
  opacity: 0;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

.quick-nav.adjust{
  padding: 5% 2% 1% 2%;
  opacity: 1;
  top: 5em;
}

.quick-nav .col-3 {
    flex: 0 0 auto;
    padding: 0;
}

.quick-nav a{
  color: #ffffff;
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 9% 1% 9% 1%;
  font-size: 0.9em;
  transition: all .3s ease-in-out;
  border-right: 1px solid #00000030;
}

.quick-nav a:hover{
  color: white;
  background-color: #209ad6;
}

.smallbar .quick-nav{
}

.quick-nav a span{
  font-size: 1.4em;
  display: block;
  position: relative;
  top: -0.2em;
  transition: all .3s ease-in-out;
  color: #ffffff;
}

.quick-nav a em{
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  display: block;
  margin: 1.5em auto -2.6em auto;
  color: white;
  bottom: 0em;
  font-size: 0.7em;
  position: relative;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.quick-nav a em:after{
  content: '';
  position: absolute;
  height: 11.5em;
  width: 100%;
  background-color: #b00c03;
  border-radius: 900em;
  z-index: -1;
  left: 0%;
  bottom: -9.6em;
}

.quick-nav a:hover em{
  bottom: 1.2em;
  opacity: 1;
}

.quick-nav a:hover span{
  /* top: -0.6em; */
  font-size: .9em;
}


/* ------------------------------------------------------------------------------------- */

#site-wrap {
    max-width: 1700px;
    margin: auto;
    box-shadow: 0px 0px 2em rgba(181,193,199,.46);
}




 /* ---------------------- */
/* ============================================================

/* ---- LEGACY CSS BLOCK 2 (page builder, AOS, etc.) ---- */

/* Global Inner CSS  */ 


/* ===== PriceGuideAi Template ===== */
/* ============================================================
   HERO
============================================================= */
.quote-hero {
  background: #14062e;
  padding: 64px 24px;
  text-align: center;
  margin-top: 160px; /* pushes hero below the fixed header — same job .insideimage's margin-top does elsewhere */
}

@media (max-width: 767px) {
  .quote-hero {
    margin-top: 110px; /* mobile header is shorter */
  }
}

.quote-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

.quote-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.quote-hero__accent {
  color: var(--brand-accent);
}

.quote-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   REPAIR VS INSTALLATION NOTICE
============================================================= */
.quote-notice {
  max-width: 900px;
  margin: 32px auto 48px; /* was -32px, now positive so it doesn't overlap anything */
  background: #fdf6e8;
  border-left: 4px solid var(--brand-accent);
  border-radius: 4px;
  padding: 24px 28px;
}

.quote-notice__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #a05a12;
  margin: 0 0 12px;
}

.quote-notice__body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4a3f2c;
  margin: 0;
}

.quote-notice__body a {
  color: var(--brand-primary);
  font-weight: 600;
}

/* ============================================================
   SERVICE CARD GRID
============================================================= */
.quote-services {
  max-width: 1000px;
  margin: 0 auto 24px;
  text-align: center;
}

.quote-services .eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.quote-services__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--brand-primary);
  margin: 0 0 12px;
}

.quote-services__subtitle {
  max-width: 640px;
  margin: 0 auto 40px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
}

.quote-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}

.quote-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 4px solid var(--brand-primary);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.quote-card__icon {
  font-size: 2rem;
  margin-bottom: 12px;
  line-height: 1;
}

.quote-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand-primary);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.quote-card__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
  margin: 0 0 20px;
  flex: 1;
}

.quote-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--brand-primary);
  border: none;
  padding: 12px 22px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.quote-card__btn:hover {
  background: var(--brand-accent);
  color: var(--brand-navy-deep, #1a1a2e);
}

/* ============================================================
   ACTIVE ESTIMATOR PANEL
============================================================= */
.quote-panel {
  max-width: 1000px;
  margin: 40px auto;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  scroll-margin-top: 24px;
}

.quote-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-primary);
  padding: 16px 24px;
}

.quote-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
}

.quote-panel__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.quote-panel__close:hover {
  color: var(--brand-accent);
}

.quote-panel__frame-wrap {
  background: #fff;
}

.quote-panel__iframe {
  width: 100%;
  height: 80vh;
  border: 0;
  display: block;
}

/* ============================================================
   NEED A REPAIR CTA
============================================================= */
.quote-repair-cta {
  background: #14062e;
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 48px 40px;
  border-radius: 8px;
}

.quote-repair-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.quote-repair-cta__body {
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  margin: 0 0 18px;
  font-size: 0.98rem;
}

.quote-repair-cta__body strong {
  color: #fff;
}

.quote-repair-cta__dispatch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}

.quote-dispatch-box {
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
}

.quote-dispatch-box__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 8px;
}

.quote-dispatch-box__number {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--brand-accent) !important;
    text-decoration: none;
    margin-bottom: 10px;
}

.quote-dispatch-box__area {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}

.quote-repair-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-navy-deep, #1a1a2e);
  background: var(--brand-accent);
  padding: 14px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.quote-repair-cta__btn:hover {
  opacity: 0.88;
  color: var(--brand-navy-deep, #1a1a2e);
}

/* ============================================================
   HOW IT WORKS
============================================================= */
.quote-how {
  max-width: 1000px;
  margin: 56px auto 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
}

.quote-how__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand-primary);
  margin: 0 0 32px;
  text-transform: uppercase;
}

.quote-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.quote-how__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.quote-how__step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.quote-how__step-desc {
  font-size: 0.9rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   DISCLAIMER
============================================================= */
.quote-disclaimer {
  max-width: 900px;
  margin: 40px auto 64px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.4);
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 767px) {
  .quote-hero { padding: 48px 20px; }
  .quote-hero__title { font-size: 1.8rem; }
  .quote-notice { margin-top: -20px; padding: 20px; }
  .quote-services__grid { grid-template-columns: 1fr; }
  .quote-repair-cta { padding: 32px 24px; }
  .quote-repair-cta__dispatch { grid-template-columns: 1fr; }
  .quote-how { padding: 28px 20px; }
  .quote-how__grid { grid-template-columns: 1fr; gap: 28px; }
  .quote-panel__iframe { height: 85vh; }
}


/* ===== PHOTO GALLERY PAGE ===== */

/* Background colour */
.galler-section {
  background: #14062e !important;
  padding: 40px 32px !important;
}

/* Column gap */
.galler-section .col-sm-12.col-md-4.col-lg-4 {
  padding: 8px !important;
  margin-bottom: 0 !important;
}

/* Uniform image size — same height, cover crop */
.galler-section img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 4px !important;
}

/* Ensure row wraps correctly */
.galler-section .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}

/* Tablet: 2 across */
@media (max-width: 991px) and (min-width: 576px) {
  .galler-section .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: 1 across */
@media (max-width: 575px) {
  .galler-section .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .galler-section img {
    height: 220px !important;
  }
}



.inside-content{
  padding-bottom: 8%;
}

.insideimage{
  position: relative;
  padding: 8% 4% 2% 4%;
  margin-top: 11%;
  border-bottom: 0.3em solid #000000;
  background-position: bottom right;
  background-size: 43%;
  z-index: 12;
  background-image: url(/wp-content/uploads/2026/07/top-banner.jpg);
  background-repeat: no-repeat;
  background-color: black;
}

.insideimage:before,.insideimage:after{
  content:'';
  position: absolute;
  left: 0%;
  bottom: 0%;
  height: 110%;
  width: 62%;
  background: #2c1466;
  margin-bottom: -1px;
  background-image: url(/wp-content/uploads/2026/06/orange-bg-pattern.gif);
  background-size: 100%;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0% 100%);
}

.insideimage:after{
  background: #2c1466;
  left: 0.7%;
  z-index:-1;
}


.insideimage .slider-usp{
  bottom: -2em;
  position: relative;
  z-index: 3;
  width: 65%;
  margin: 2em auto -1em 0;
}

.insideimage .truck-image:after{
  bottom: 0em;
  right: 2em;
}

.insideimage .slider-usp.row>*{
  padding: 0 .4em;
}

.insideimage .slider-usp .usp-box p{
  opacity: 1;
  font-size: 1.1em;
  bottom: -1.2em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.1;
}
 
.insideimage .slider-usp .usp-box{
  font-size: 0.7em;
  width: 100%;
  /* color: black; */
  transition: all .3s ease-in-out;
  height: 7.8em;
  text-align: center;
  border: 1px solid #e6e6e6;
  background: white;
  padding: 0.1em;
  border-radius: 0.7em;
  border-top: 4px solid var(--brand-primary);
} 

.insideimage .slider-usp .usp-box span{
  font-size: 2.3em;
  line-height: 1.9;
  margin: 0.2em auto 0.25em auto;
  left: 0em;
  color: var(--brand-accent);
  width: 1.9em;
  height: 1.9em;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-primary), var(--brand-navy));
  display: block;
}

.insideimage .slider-usp .usp-box span.icon-skagit-state-con{
  font-size: 2.8em;
  margin: 0.5em auto 0.5em auto;
  display: block;
}

.banner-head{
  position: relative;
  color: #ffffff;
  letter-spacing: .12em;
  font-size: 1.9em;
  text-transform: uppercase;
  z-index: 2;
  padding-left: 0.5em;
  border-radius: 0em;
  width: 55%;
}

.banner-head:after{
  content:'';
  position: absolute;
  left: -0.3em;
  top: 0em;
  background: var(--brand-accent);
  border-radius: 90em;
  width: .25em;
  height: 100%;
}

.extra-pad{
  padding: 0 5%;
}

.wp-video{
  margin: auto;
}


#breadcrumbs {
    border-bottom: solid 1px rgba(0, 0, 0, 0.18);
    color: black;
    z-index: 999;
    position: relative;
    margin-bottom: 0px;
    margin-right: auto;
    margin-top: 30px;
    padding: 0% 2% 1.8% 1%;
}

#breadcrumbs a {
    color: var(--brand-navy);
    font-weight: 900;
    text-decoration: none;
}

#breadcrumbs .icon-home {
    font-size: 1.2em;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: rgba(0, 0, 0, 0.2);
    padding: 1em;
    margin-right: 12px;
    color: var(--brand-accent);
}

 
.inside-section-3 h2, .inside-section-4 h2{
  font-size: 2em;
  font-weight: 900;
}

.inside-section-3 p strong, .inside-section-4 p strong{
  font-family: "Montserrat", sans-serif !important;
}

.inside-section-4 h2{
  color: #343434;
}

.inside-section-3.careers-padding{
  margin-top: 15%;
}

.inside-section-3{
  position: relative;
  background-color: var(--brand-paper);
  padding: 6% 7% 4% 7%;
  color: #000000;
  z-index: 9;
}

.inside-section-3:after {
    content: '';
    position: absolute;
    top: -6em;
    left: 0;
    width: 100%;
    height: 7em;
    transform: scale(-1,-1);
    background-size: 100%;
    background-repeat: no-repeat;
}

.inside-section-3 blockquote:before{
}

.inside-section-3 h2{
  color: #373737;
}

.inside-section-3 .accordion-button,.inside-section-4  .accordion-button{
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #2c1466;
    letter-spacing: .08em;
}

.inside-section-3 .accordion-item, .inside-section-4 .accordion-item{
  background-color: #e9e9e9;
  color: #070707;
}

.inside-section-3 .accordion-button:not(.collapsed),.inside-section-4 .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #044ba1;
}

.inside-section-3 .accordion,.inside-section-4 .accordion{
  margin-bottom: 2em;
}

.inside-section-4{
  position: relative;
  background-color: #ffffff;
  padding: 3% 7% 6% 7%;
  color: black;
}

.inside-section-3 .accordion-button::after, .inside-section-4 .accordion-button::after{
  -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.inside-section-3 .accordion-button:hover, .inside-section-4 .accordion-button:hover{
  background-color: #18134f;
  color: white!important;
}

.inside-section-3 .accordion-button:hover h2, .inside-section-4 .accordion-button:hover h2{
  color: white;
}

.inside-section-3 .accordion-button:not(.collapsed) h2,.inside-section-4 .accordion-button:not(.collapsed) h2{
  color: white;
}

.inside-section-3 .bullet-list{
  position: relative;
  /* color: white; */
}

.inside-section-3 a,.inside-section-4 a{
  color: var(--brand-accent);
  text-decoration: none;
  display: unset!important;
}

.inside-section-3 a{
  color: #492a96;
}

.inside-section-3 .bullet-list li{
  padding: 0.1em 0.1em 0.1em 1.8em;
}

.inside-section-3 .bullet-list li:after {
    top: 0.05em;
    left: 0.2em;
}


.emp-form{
    position: relative;
    padding: 6% 5% 3% 5%;
    background-color: #ebebeb;
    border-radius: 1em;
  margin: 1em auto 3em auto;
  width: 85%;
}

.emp-form .with_frm_style .vertical_radio .frm_checkbox label, .emp-form .with_frm_style .vertical_radio .frm_radio label{
  color: #fff;
}

.emp-form .frm_style_formidable-style-2.with_frm_style input[type=submit]{
  display: block;
  width: 100%;
  padding: 1em 0em;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.1em;
  background-color: #03a8e2;
  color: white;
  border: 0;
  box-shadow: none;
}

.emp-label{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #383838;
  font-size: 1.5em;
  margin-bottom: .8em;
}

.insideimage .not-active{
  display: none;
}

.insideimage .activate{
  position: relative;
  display: block!important;
  z-index: 9;
}

.insideimage .activate a{
  color: white;
  position: relative;
  z-index: 3;
  transition: all .3s ease-in-out;
  display: block;
  padding-left: 0em;
  border-radius: 900em;
  letter-spacing: .09em;
  font-size: 1.2em;
  margin-bottom: -1em;
  width: 16.5em;
  text-align: center;
  margin-left: 3.8em;
}

.insideimage .activate a:hover{
  background-color: #5b6363;
}

.team-page{
  position: relative;
}

.team-page h1{
  text-align: center;
}

.team-page .text-highlight{
  padding: 0;
}

.team-page .text-highlight:not(.no-line):after{
  left: 0;
  width: 100%;
}

.team-box{
  position: relative;
  background: #eaeaea;
  margin: 1em auto;
  border-radius: 1em;
  overflow: hidden;
  border: 0.2em solid #3a1a6e;
  max-width: 290px;
}

.team-box img{
  margin: auto;
  display: block;
}

.emp-name{
  position: relative;
  padding: 0.3em 0.8em;
  background: #51259a;
  color: white;
  font-size: 1.4em;
  font-family: "Oswald", sans-serif !important;
  font-weight: 900;
}

.emp-info{
  padding: 0.6em 1.4em 1em 1.4em;
  font-size: 0.8em;
}

/* Opening CTA Inner CSS  */ 

blockquote {
    font-size: 1.22em!important;
    margin-top: 35px!important;
    width: 95%;
    border-left: aliceblue;
    position: relative;
    padding: 1em 4em 1em 2.5em!important;
    margin: 4% 1% 6% 1%!important;
    z-index: 9;
    color: #000000!important;
}

blockquote, blockquote p {
    line-height: 1.6;
    margin-bottom: 0em;
    color: #ffffff !important;
}

blockquote:after {
    content: '';
    position: absolute;
    bottom: 0em;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
    height: 6.5em;
    width: 4.3em;
    transition: all .3s ease-in-out;
    background-position: center;
    right: -1em;
    background-image: url(/wp-content/uploads/2026/06/skagit-mascot.png);
}

blockquote:before {
    content: '';
    position: absolute;
    bottom: 0em;
    left: 0em;
    height: 100%;
    width: 100%;
    transition: all .3s ease-in-out;
    z-index: -01;
    background-color: var(--brand-navy);
    border-top-right-radius: 0em;
    border-radius: 1em;
    border-left: 0.8em solid var(--brand-accent);
    border-top: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}
 
blockquote a{color: #f15b22;text-decoration: none;}

blockquote a:hover{color: #ffffff;}

#breadcrumbs {
    border-bottom: solid 1px rgba(0, 0, 0, 0.18);
    color: black;
    z-index: 0;
    position: relative;
    margin-bottom: 0px;
    margin-right: auto;
    margin-top: 2.5em;
}

.inside-content h1 {
    margin-bottom: -1px;
    color: #2c1466;
    font-weight: 900;
    font-size: 2.5em;
}

.inside-content h1 strong{
    color: #3f6fa6;
}

.inside-content h1 span{
  display: block;
  font-size: .6em;
  font-family: 'Poppins';
  font-weight: normal;
  color: white;
}

.inside-content h2 em{
  font-size: .8em;
  font-family: 'Poppins';
  font-weight: normal;
  font-style: normal
}

.inside-content h2 {
    color: #313131;
    font-weight: 900;
    font-size: 2em;
}

.inside-content h3 , .inside-section-3 h3, .inside-section-4 h3 {
    font-weight: 900;
    font-size: 1.6em;
}

.inside-content h5{
  font-size:  1.3em;
}

.coup-page{
  position: relative;
  padding-bottom: 7%;
}

.max-coupon .home-price{
  font-size: 3em;
  line-height: 1.3;
}

.max-coupon .btn{
  display: block;
}

.max-coupon p{
  font-size: .7em;
}

.max-coupon .disc{
  font-size: .9em;
  text-transform: uppercase;
}

.max-coupon .offer{
  font-size: 1.4em;
  margin-bottom: 1em;
}

.coup-page .text-highlight{
  margin-bottom: 3em;
}

.coup-page .col-lg-6{
  margin: 0em  0 2.5em 0!important;
}

.rev-sec-in{
  padding: 1em 2em 1em 2em!important;
  z-index: 12;
}

#sidebar1 .price{
  font-size: 3em;
}

#sidebar1 .offer{
  font-size: 1.1em;
}

#sidebar1 .coupon a{
  display: block;
  font-size: 0.8em;
}

/* List Style 1 Inner CSS  */ 

.bullet-list{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 10px;
}

.bullet-list li {
    position: relative;
    padding: 0.2em .1em 0.2em .1em;
    padding-left: 2em;
    font-size: 1.2em;
    font-weight: 500;
    width: 48%;
}

.bullet-list li:after {
    content: "\f058";
    font-family: 'icomoon' !important;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--brand-navy);
    font-size: 1.333em;
    border-radius: 50%;
    line-height: 1;
}

.bullet-list li a{
  color: #2c1466;
  text-decoration: none;
}

.bullet-list li a:hover{
  color: #2c1466;
}


.side-label {
    text-align: center;
    font-size: 2em;
    font-weight: 900;
    position: relative;
    font-family: poppins;
    letter-spacing: .05em;
    margin-bottom: 0%;
    color: #ffffff;
}

.side-form {
    position: relative;
    background-color: #2c1466;
    padding: 5% 5%;
    margin-bottom: 5%;
    /* border: 1px solid #e4e4e4; */
}

.side-form iframe {
    height: 51em!important;
}

/* ---------------------- */

/* List Style 2 Inner CSS  */ 

.check-list li{
    display: block!important;
    padding: .8em 0.8em .8em 2.9em!important;
    position: relative!important;
    line-height: 1.5em!important;
    text-align: left!important;
    width:100%!important;
    border-radius: 900em;
    background: #f1e4fb;
    margin: 0.5em 0;
    box-shadow: -0.3em 0em var(--brand-navy);
}

.check-list  {
    display: block!important;
    margin: 1em 0!important;
    padding: 0!important;
}

.check-list li:before {
    content: "\f00c";
    font-family: 'icomoon' !important;
    color: var(--brand-navy);
    display: block;
    position: absolute;
    font-size: 1.2em;
    top: calc(50% - 0.8em);
    left: 0.86em;
    z-index: 2;
}

.check-list li:after{
  content: '';
  position: absolute;
  background-size: 100%;
  width: 2.5em;
  height: 2.5em;
  top: 0.4em;
  left: 0.3em;
  background-repeat: no-repeat;
}

.check-list li strong {
    text-transform: uppercase;
    font-size: 1.025em;
    color: var(--brand-navy);
}

.check-list li a{
  color: #492a96!important;
}

.check-list li a:hover{
  color: #00458d!important;
}


/* Page creator Template */

.pc-default{
  position: relative;
  padding: 2% 3%;
  background-size: cover;
  background-position: center;
}



.pc-default .accordion-button{
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #2c1466;
    letter-spacing: .08em;
}

.pc-default .accordion-item{
  background-color: #efefef;
  color: #070707;
}

.pc-default .accordion-button:not(.collapsed){
    color: #ffffff;
    background-color: #000000;
}

.pc-default .accordion{
  margin-bottom: 2em;
}

.pc-default .usp-box{
  position: relative;
  padding: 2em 2em;
  text-align: center;
  border: 1px solid #00000047;
  border-radius: .5em;
  margin: 1em auto;
  background: white;
}

.pc-default h2{
  font-weight: 900;
}

.pc-default .usp-label{
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pc-default .usp-box span{
  display: block;
  text-align: center;
  font-size: 4em;
  color: #0056a6;
}

.center-head{
  text-align: center;
  display: block;
}

.pc-default h1{
  font-weight: 900;
  color: var(--brand-primary);
}

.topsec{
  padding-bottom: 3em;
}

.section-faqsec h2{
  color: #2c1466;
  font-weight: 900;
}

.pc-default .accordion-button h3{
  margin: 0;
  color: white;
}

/* Flex Template */

.column-section{
  position: relative;
  padding: 5% 5%;
}

.column-section strong.highlight{
    font-size: 1.36em;
    font-style: italic;
    color: #000000;
    position: relative;
    font-weight: 500!important;
    margin-top: 8px;
    padding-bottom: 3%;
    margin-bottom: 1em;
    line-height: 1.4!important;
    display: block;
}

.column-section strong.highlight:not(.no-line):after {
    content: ' ';
    display: block;
    width: 159%;
    height: 4px;
    background-color: #4fc8e3;
    position: absolute;
    top: 95%;
    right: 20px;
}

.column-section  .btn-primary{
  max-width: 450px;
  margin-left: 0;
  color: white;
}

.column-section no{
  display: none;
}

.text-highlight p{
  margin-bottom: 0;
}

.column-section h1{
  color: #414141;
  font-size: 2.6em;
  margin: 0em 0em -0.5em 0em;
}

.compressed-sec{
  padding: 5% 18%;
  background: #ededed;
}

.content-header{
  font-weight: 900;
  font-size: 1.2em;
  color: #ff601f;
}

.usp-box-section{
  position: relative;
  padding: 5% 5%;
  background: #ff5f1f;
}

.usp-box-section .usp-box{
  height: 23em;
  padding: 4em 1em 1em 1em;
}

.accordion-section{
  position: relative;
  padding: 2% 5%;
}


.accordion-section .accordion-button{
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #209ad6;
    letter-spacing: .08em;
}

.accordion-section .accordion-item{
  background-color: #272727;
  color: white;
}

.accordion-section .accordion-button:not(.collapsed){
    color: #ffffff;
    background-color: #000000;
}

.accordion-section .accordion{
  margin-bottom: 2em;
}
 

.accordion-section .accordion-button::after{
  -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.accordion-section .accordion-button:hover{
  background-color: #333a45;
  color: white!important;
}

.accordion-section .accordion-button:hover h2{
  color: white;
}

.accordion-section .accordion-button:not(.collapsed) h2{
  color: white;
}

.galler-section {
  position: relative;
  padding: 3% 5%;
}



/* Opening CTA Inner CSS  */ 

.text-highlight {
    font-size: 1.36em;
    font-style: italic;
    color: #000000;
    position: relative;
    font-weight: 500!important;
    margin-top: 8px;
    padding-bottom: 3%;
    margin-bottom: 39px;
    line-height: 1.4!important;
}

.text-highlight:not(.no-line):after {
    content: ' ';
    display: block;
    width: 159%;
    height: 4px;
    background-color: var(--brand-navy);
    position: absolute;
    top: 99%;
    right: 20px;
}

.text-highlight p{
  margin-bottom: 0;
}

 .text-highlight2 {
    font-size: 1.25em;
    padding: 1.5em 3% 1.1em;
    position: relative;
    border-bottom: solid 1px #00000054;
    text-align: center;
    margin: 4.5rem 0 0.5rem 0em;
    color: #000000;
    font-weight: 900;
    text-wrap: balance;   
}

.text-highlight2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right,#00000040 41.99%,#FFFFFB 42%,#FFFFFF 58.99%,#00000040 55%);
}


.text-highlight2:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3.4em;
    background-size: 4.6em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    left: 0.2em;
    top: -2.15em;
    background-image: url(/wp-content/uploads/2026/06/knights-plumbing-logo.webp);
}

 .text-highlight2 a{
   display: unset;
   color: #b00c03;
   transition: all .3s ease-in-out;
   transform: scale(1);
   position: relative;
   bottom: 0em;
 }

  .text-highlight2 a:hover{
    font-size: 1.04em;
    bottom: 0.12em;

 }

.inner-bottom{
  margin-top: 0%;
  color: #000!important;
  z-index: 99;
  padding: 8em 7% 2em 7%;
  position: relative;
  background-color: #2c1466;
  z-index: 13;
  position: relative;
}

.inner-bottom .usp-blk{
  height: 24em;
}

.inner-bottom .usp-label{
  font-weight: 900;
  line-height: 1.1;
  margin: .4em 0;
  color: #044ba1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inner-bottom.section-2:before{
  height: 100%;
}


.inner-bottom .carousel-control-prev {
    left: -6em;
}

.inner-bottom .carousel-control-next {
    right: -6em;
}


.inner-bottom .carousel{
}

.inner-bottom .row>*{
  /* padding: 0 .8%; */
}

.inner-bottom .usp-wrap{
  position: relative;
  margin-top: 0em;
}

.inner-bottom .usp-wrap.row>* {
    /* padding: 0% 0.7%; */
}


/* ---------------------- */


/* Closing CTA Inner CSS  */ 


/* ------------------------------------------------------------------------------------- */


.faq-page .accordion-button{
  background-color: #2c1466;
  color: white;
  }

.faq-page .accordion-button[aria-expanded=true], .faq-page .accordion-button:hover{
  background-color: #343434;
  color: white;
}

.faq-page .accordion-button::after{
   -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);  
}

/* 404 Page */


.error-page {
    padding: 11% 4% 6% 4%;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: black;
    margin-top: 05;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);
}

.error-page .inside-content {
    position: relative;
    padding-top: 0px;
    background-color: #00000059;
    padding: 7% 1% 4% 1%;
}

.error-page .error{
  font-size: 14em;
  font-weight: 900;
  color: #2c1466;
  position: relative;
  display: block;
  line-height: 0.8;
  letter-spacing: .03em;
  z-index: 2;
  margin-top: -2%;
  text-shadow: -4px 4px #373535;
  margin-bottom: 1%;
}


.error-page .inside-content h1{
  font-size: 4.2em;
  color: #ffffff;
  position: relative;
  z-index: 1;
  margin-top: -0.2em;
}

.error-page .entry-content{
  font-size: 1.4em;
  padding: 0% 13%;
  position: relative;
  color: white;
}


.reroute-btns{
  padding: 0%;
  position: relative;
}

.reroute-btns .column,.reroute-btns .columns {
    padding-left: .3375rem;
    padding-right: .3375rem;
}

.reroute-btns .btn{
  width: 100%;
  font-size: 1.1em;
  box-shadow: 1px 1px 16px 8px #0000000f;
  text-transform: uppercase;
  /* font-weight: 900; */
  letter-spacing: .03em;
  border: 0;
  display: block;
  border-radius: 0;
  margin: .7em 0;
  border-radius: 900em;
  color: #ffffff !important;
}

.reroute-btns .btn:hover{
  background-color: #209ad6!important;
  color: white!important;
  text-shadow: none;
}


.reroute-btns span{
  position: relative;
  top: 0.15em;
  font-size: 1.3em;
}


.single-blog ul{
  margin-left: 2em!important;
}

/* Default Template CSS  */ 

.full-inner-max{
  padding-top: 2%;
  background: white;
  z-index: 11;
  position: relative;
}

.main-blog{
  position: relative;
}


  .wa-intcode-card strong:first-child{
    display: none;
  }


.main-blog a{
  text-decoration: none;
  color: #2c1466!important;
}

.main-blog .page-nav{
  position: relative;
  background-color: #efefef;
  padding: 1.5em;
  margin-bottom: 1em;
}

.main-blog .post-thumbnail img{
  width: 100%;
  display: block;
}

.single-blog{
  position: relative;
  padding: 5% 15% 4% 15%;
}

/* ------------------------------------------------------------------------------------- */

.inside-content a{
  display: unset;
  color: var(--brand-accent);
  text-decoration: none;
}

.inside-content .btn-primary{
  color: #000000;
}

/* Thank You Template CSS  */ 

.thank-you {
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
    padding: 9% 1% 5% 1%;
    margin-top: 0%;
    z-index: 99;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);
    position: relative;
}

.thank-you .bg-inner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.39);
    border: solid 1px #0000005e;
    position: relative;
    padding: 4.063rem 0 3.363rem 0;
    color: white;
}

.thank-you .bg-inner {
    width: 100%;
    max-width: 1100px!important;
    margin: 0 auto;
    position: relative;
}

.thank-you .bg-inner p {
    font-size: 1.5rem;
    line-height: 1.5em;
}

.thank-you .bg-inner  h1{
    margin: 0;
    color: #2c1466;
    font-weight: 900;
    font-size: 5.3rem;
    line-height: 1;
    margin-bottom: 0.2em;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: -6px -1px .8em #2b2b2b;
}

.thank-you .bg-inner h1 strong {
    display: block;
    font-size: 1.847em;
    color: #fa4f41;
}

.thank-you .button{
  display: block;
  background-color: #2c1466;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .08em;
  color: #ffffff;
  text-decoration: none;
  padding: 0.65em 0em;
  margin: 0.7em 0;
  border-radius: 900em;
  font-family: 'Fredoka', sans-serif!important;
}

/* ------------------------------------------------------------------------------------- */

/* Client Response Template CSS  */ 

.client-resp-wrap{
  padding: 0% 5%;
}


.client-response .entry-content{
  padding: 0% 7%;
}

.client-response .frm_style_formidable-style.with_frm_style input[type=submit]{
  display: block;
  width: 100%;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .08em;
  background-color: #e62318;
}

.client-response .frm_style_formidable-style.with_frm_style input[type=submit]:hover{
  background-color: black;
  color: white;
}

.client-response .frm_style_formidable-style-2.with_frm_style .frm_primary_label{
  color: white;
}

.client-response .frm_style_formidable-style-2.with_frm_style input[type=submit]{
  display: block;
  background-color: #199ad6;
  color: white;
  width: 100%;
  padding: .85em 0em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1em;
  text-shadow: -0.03em 0.08em black;
}

.client-response .frm_forms.frm_style_formidable-style-2.with_frm_style{
  margin: auto;
}

.client-response .bg-inner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.31);
    border: solid 1px #000000a6;
    position: relative;
    padding: 3.063rem 0 1.363rem 0;
    color: white;
}

.client-response .bg-inner {
    width: 100%;
    max-width: 1100px!important;
    margin: 0 auto;
    position: relative;
}

.client-response .bg-inner p {
    font-size: 1.6rem;
    line-height: 1.5em;
    padding: 0% 5%;
}

.client-response .bg-inner  h1{
    margin: 0;
    color: #ffffff;
    font-size: 4.3rem;
    line-height: 0.9;
    margin-bottom: 3%;
    text-shadow: 4px 4px 0.7em #00000075;
    text-transform: uppercase;
}


.client-response .bg-inner h1 strong {
    display: block;
    font-size: 1.647em;
    color: #2c1466;
    position: relative;
}

.client-response .bg-inner  h1 span strong{
  font-size: 1.2em;
}

.client-response .bg-inner  h1 span{
  font-size: 0.7em;
  display: block;
  font-weight: normal;
}

.client-response .with_frm_style .frm_primary_label{
  color: white;
}

.client-response .frm_button_submit {
  position: relative;
  display: block;
  width: 100%;
  background-color: #e7090c;
  padding: .85em 0em;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

/* ------------------------------------------------------------------------------------- */


/* Client Feedback Review Template CSS  */ 


.client-response {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 13% 1% 7% 1%;
    background-color: #4e4e4e;
    margin-top: 0%;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);
}

.client-review {
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;
    padding: 11% 4% 5% 4%;
    position: relative;
    z-index: 9;
    margin-top: 8%;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/feedback-bg.jpg);
    text-align: center;
}
 

.client-review  p {
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0% 0%;
    color: black;
}

.client-review  h1{
    margin: 0;
    color: #000000;
    font-weight: normal;
    font-size: 4.2rem;
    line-height: 1;
    margin-bottom: -0.1em;
    /* text-shadow: 4px 4px 0.4em #00000057; */
    text-transform: uppercase;
    position: relative;
}


.client-review h1 strong {
    display: block;
    font-size: 1.47em;
    color: #044ba1;
}


.resp-box{
  border-top: 1px solid #00304624;
  FONT-WEIGHT: 100;
  position: relative;
  margin-top: 2%;
  border-bottom: 1px solid #00304624;
}

.resp-txt{
  font-weight: 900;
  font-size: 1.7em;
  letter-spacing: 0.03em;
  margin-bottom: 2%;
  line-height: 1.7;
  padding: 1% 5% 0% 5%;
}

.resp-box .btn{
  display: block;
  width: 80%;
  max-width: 440px;
  border-radius: 900em;
  border: 0;
  margin: auto;
}

.client-review img{
  display: block;
  width: 90%;
  margin: auto;
}

.client-review .col-12 img{
  max-width: 450px;
}

.client-review .row-cols-5{
  padding: 0% 15%;
  margin-top: 2%;
}


/* ------------------------------------------------------Media Queries CSS ---------------------------------------- */ 


 @media screen and (min-width: 5.001em) and (max-width: 25em) {


/* NEW QUERIES */

.sliderfull{
  margin-top: 15%;
}
   
   .slider-header{
     font-size: 1.7em;
   }


   .main-bar__schedule-btn{
     font-size: 0.8em!important;
     padding: 10px 10px!important;
   }

   .main-bar{
     padding: 0 1em!important;
   }

   
.hero-section{
  height: 8em;
  min-height: 48em!important;
}

   .hero-overlay{
  height: 11em;
  min-height: 50em!important;
  }

 

/* END NEW QUERIES */

      #breadcrumbs{
     font-size: .6em;
     margin-top: 6em;
   }

   blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }   

   .error-page .inside-content h1{
     font-size: 1.5em;
     margin-bottom: 0em;
   }


   .error-page .error{
     font-size: 8.1em;
   }   

.error-page .entry-content {
    font-size: 1em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   
   

.client-review{
  text-align: center;
  margin-top: 15%;
  padding: 22% 4% 5% 4%;
}


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}


.client-review img, .client-review .btn{
  margin: auto;
  width: 100%;
}

.client-review h1{
  font-size: 1.7em;
}   

 
.client-response .bg-inner p {
    font-size: 1.1rem;
    padding: 0% 0%;
}

.client-response .bg-inner h1 {
    font-size: 1.9rem;
}

.thank-you .bg-inner h1 {
    font-size: 2.2rem;
}

.thank-you .button{
  margin: .5em 0;
}

.thank-you .bg-inner p {
    font-size: 1rem;
}


   .bullet-list li{
     width: 100%;
   }

.inner-bottom {
    background-position: 100% 100%;
}   

   .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }
  
.insideimage .slider-usp .usp-box {
    font-size: 0.6em;
    padding: 5% 15%;
}


   .single-blog {
    position: relative;
    padding: 12% 4% 4% 4%;
}

   .insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 12%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
    background-color: #2c1466;
}

    .insideimage:after{
     width: 155%;
     border-radius: 0;
     display: none;
   }

   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: 0.5em;
   }
   
   
.thank-you {
    padding: 15% 1% 5% 1%;
    margin-top: 0%;
}


.banner-head{
   font-size: 1.1em;
}


.insideimage .col-lg-6{
  padding-right: 35%;
}

.banner-head{
  font-size: 0.83em;
  width: 100%;
}

.logo-image img{
  width: 8.4em;
  top: .1em;
}

.smallbar .logo-image img{
  width: 6em;
}


.logo-foot img{
  width: 19em;
}

.quick-nav.adjust {
    font-size: .9em;
    top: 4.7em;
}


.close-cta{
  font-size: 0.8em;
  padding: 6% 2% 3% 2%;
}
 
.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
    font-size: 0.6em;
}

.resp-txt{
  font-size: 1em;
}

.client-response {
    padding: 17% 1% 7% 1%;
    margin-top: 0%;
}


.hide-for-small-only{
  display: none!important;
}

.error-page {
    padding: 13% 4% 6% 4%;
    margin-top: 0%;
}

.help-links a{
  text-align: center;
}

.side-form iframe {
    height: 64em!important;
}


.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  font-size: 0.7em;
  position: relative;
  margin-top: 1em;
  bottom: -2em;
}

.insideimage:before{
  display: none;
}   

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

.show-for-small-only{
  display: block!important;
}


.emp-info em{
  width: 90em;
}

   .compressed-sec {
    padding: 5% 3%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

}



 @media screen and (max-width: 35em) and (min-width: 25.001em) {


/* NEW QUERIES */

.sliderfull{
  margin-top: 17%;
}
   
   .slider-header{
     font-size: 2.2em;
   }


   .main-bar__schedule-btn{
     font-size: 0.8em!important;
     padding: 10px 10px!important;
   }

   .main-bar{
     padding: 0 1em!important;
   }
 
   
.hero-section{
  height: 8em;
  min-height: 44em!important;
}

   .hero-overlay{
  height: 11em;
  min-height: 44em!important;
  }



/* END NEW QUERIES */

.logo-foot img{
  width: 19em;
}

.widget .home-form .camp-form iframe {
    height: 36.3em!important;
}

.modal-dialog .camp-form iframe {
    height: 32em!important;
}

.sched-row a ,.sched-row button{
  font-size: .8em;
}
  

.close-cta{
  font-size: 0.8em;
}
  
.insideimage .slider-usp .usp-box{
  font-size: .5em;
}

   #breadcrumbs{
     font-size: .7em;
     margin-top: 9em;
   }


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}

      blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }

      .bullet-list li{
     width: 100%;
   }

   .inner-bottom {
    background-position: 100% 100%;
}

      .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }

   .error-page .error{
     font-size: 8.9em;
   }

   .error-page .inside-content h1{
     font-size: 1.8em;
     margin-bottom: 0em;
   }

.error-page .entry-content {
    font-size: 1em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   

.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 15%;
}

.client-review img, .client-review .btn{
  margin: auto;
}

.client-review h1{
  font-size: 2.3em;
}    

.resp-txt{
  font-size: 1.3em;
}   

.client-response .bg-inner p {
    font-size: 1.4rem;
}

.client-response .bg-inner h1 {
    font-size: 2.4rem;
}

.thank-you .bg-inner h1 {
    font-size: 2.9rem;
}

.thank-you .button{
  margin: .5em 0;
}

.thank-you .bg-inner p {
    font-size: 1rem;
}

.thank-you {
    padding: 15% 1% 5% 1%;
    margin-top: 0%;
}
 

.client-response {
    padding: 16% 1% 7% 1%;
    margin-top: 0%;
}


.hide-for-small-only{
  display: none!important;
}

.error-page {
    padding: 16% 4% 14% 4%;
    margin-top: 0%;
}
.logo-image a {
    margin-top: .2em;
    transform: scale(1);
    top: 0em;
}

  .logo-image img {
    width: 9.8em;
    left: -0.2em;
    top: 0.1em;
}

   
   .single-blog {
    position: relative;
    padding: 10% 4% 4% 4%;
}

   .insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 9%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
    background-color: #2c1466;
}

   .insideimage:after{
     width: 155%;
     border-radius: 0;
     display: none;
   }

   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: 0.5em;
   }
   

.quick-nav.adjust {
    font-size: .9em;
    top: 4em;
}

.smallbar .logo-image img {
    width: 6em;
}

   
.help-links a{
  text-align: center;
}


.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  position: relative;
  margin-top: -1em;
  bottom: -3em;
}

   .insideimage:before{
     display: none;
   }

.insideimage .slider-usp.row>*{
  padding: 0 1%;
} 

.insideimage .col-lg-6{
  padding-right: 35%;
}

.banner-head{
  font-size: 1.1em;
  width: 100%;
}

.insideimage .activate a{
  font-size: .88em;
}
 
.show-for-small-only{
  display: block!important;
} 

   .compressed-sec {
    padding: 5% 5%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

}




 @media screen and (max-width: 39.938em) and (min-width: 35.001em) {



/* NEW QUERIES */


.sliderfull{
  margin-top: 19%;
}
   
   .slider-header{
     font-size: 2.7em;
   }
   

   .main-bar__schedule-btn{
     font-size: 0.8em!important;
     padding: 10px 10px!important;
   }

   .main-bar{
     padding: 0 1em!important;
   }

   
.hero-section{
  height: 8em;
  min-height: 45em!important;
}

   .hero-overlay{
  height: 11em;
  min-height: 51em!important;
  }

 

/* END NEW QUERIES */

.logo-foot img{
  width: 22em;
}

   .side-form iframe {
    height: 51em!important;
}
.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   
   
  .logo-image img {
    width: 14.3em;
    left: -0.3em;
    top: .1em;
}

.quick-nav.adjust {
    top: 4.4em;
}   

  .smallbar .logo-image img {
    width: 10.6em;
} 

.error-page {
    padding: 13% 4% 11% 4%;
    margin-top: 0%;
}


.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 12%;
}

.client-review img, .client-review .btn{
  margin: auto;
}


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}

.client-review h1{
  font-size: 3.2em;
}   

.resp-txt {
    font-size: 1.5em;
}    

   
   .single-blog {
    position: relative;
    padding: 5% 4% 4% 4%;
}
   
.insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 8%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
    background-color: #2c1466;
}

   .insideimage:after{
     width: 100%;
     left: 0;
     border-radius: 0;
     transform: none;
     display: none;
   }


   .insideimage .truck-image:after{
     display: none;
   }
   
   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: .7em;
   }

.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  position: relative;
  margin-top: 0.5em;
}

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

 
.banner-head{
   font-size: 1.2em;
}

   #breadcrumbs{
     font-size: .79em;
     margin-top: 5em;
   }


   .bullet-list li{
     width: 100%;
   }

   .inner-bottom {
    background-position: 100% 100%;
}

      .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }

   blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }

      .error-page .inside-content h1{
     font-size: 2.7em;
     margin-bottom: 0em;
   }

   .error-page .error{
     font-size: 10em;
   }

.error-page .entry-content {
    font-size: 1.2em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   

.close-cta{
  font-size: 1em;
}


.client-response .bg-inner p {
    font-size: 1.5rem;
    padding: 0% 0%;
}

.client-response .bg-inner h1 {
    font-size: 3.1rem;
}

.thank-you .bg-inner h1 {
    font-size: 4.2rem;
}

.thank-you .button{
  margin: .5em 0;
}
 
.thank-you {
    padding: 13% 1% 5% 1%;
    margin-top: 0%;
} 

.client-response {
    padding: 15% 1% 7% 1%;
    margin-top: 0%;
}
 

.hide-for-small-only{
  display: none!important;
}

.help-links a{
  text-align: center;
} 
 
.show-for-small-only{
  display: block!important;
}
  

   .compressed-sec {
    padding: 5% 8%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

 }



 @media screen and (max-width: 55em) and (min-width: 39.939em) {



/* NEW QUERIES */

.sliderfull{
  margin-top: 19%;
}
   
   .slider-header{
     font-size: 3.1em;
   }
   
.hero-section{
  height: 14em;
  min-height: 40em!important;
}

   .hero-overlay{
  height: 14em;
  min-height: 41em!important;
  }

 

/* END NEW QUERIES */

.logo-foot img{
  width: 24em;
}
 
.banner-head{
  font-size: 1.3em;
}

.compressed-sec {
    padding: 5% 8%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}
   
.col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
}

   .side-form iframe {
    height: 51em!important;
}

   .quick-nav.adjust{
     top: 4.5em;
   }

.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   

    .logo-image img {
    width: 15em;
    left: -0.3em;
    top: 0.1em;
}


   .single-blog {
    position: relative;
    padding: 5% 4% 4% 4%;
}

   
.insideimage {
    padding: 20% 4% 0% 4%;
    margin-top: 9%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
    background-color: #2c1466;
}

   .insideimage:after{
     width: 100%;
     border-radius: 0;
     display: none;
   }
   
.client-response {
    padding: 16% 2% 7% 2%;
    margin-top: 0%;
}
   
   .smallbar .logo-image img {
    width: 11em;
}

.error-page {
    padding: 15% 4% 12% 4%;
    margin-top: 0%;
}

.sliderfull .col-sm-12, .section-1 .col-sm-12, .section-2 .col-sm-12, .section-3 .col-sm-12, .section-4 .col-sm-12, .section-6 .col-sm-12{
    width: 100%!important;
}

.section-1 .col-md-3{
  width: 50%!important;
}
   
.sliderfull .col-md-7{
  width: 100%;
}
   
.show-for-small-only{
  display: block!important;
} 

.insideimage .slider-usp .usp-box{
  font-size: .73em;
}

.insideimage:before{
  display: none;
}

.inner-bottom{background-position: 100% 100%;}   

   .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }
   
.side-label{
  font-size: 2em;  
} 

.insideimage .slider-usp{
  width: 90%;
  margin-right: auto;
  position: relative;
}

.insideimage .col-lg-6{
  padding-right: 39%;
}

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

.error-page .error{
  font-size: 11em;
}

.close-cta{
  font-size: 1.1em;
}

.hide-for-small-only{
  display: none!important;
}
 
.help-links a{
  text-align: center;
}

   .error-page .inside-content h1{
     font-size: 2.9em;
     margin-bottom: 0em;
   }

.error-page .entry-content {
    font-size: 1.3em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   
 
.insideimage .col-md-4{
  width: 33.33%!important;
}


   .modal-dialog iframe {
    height: 43em!important;
}

.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 12%;
}

.client-review img, .client-review .btn{
  margin: auto;
}

.client-review .row-cols-5 {
    padding: 0% 8%;
    margin-top: 2%;
}

.client-review .row-cols-5 .col{
  padding: 0.5%;
}

.client-review h1{
  font-size: 3.5em;
}   

.resp-txt {
    font-size: 1.5em;
}

.copyright{
  font-size: .9em!important;
}

.client-response .bg-inner p {
    font-size: 1.5rem;
}

.thank-you .bg-inner h1 {
    font-size: 5rem;
}

.thank-you {
    padding: 9% 1% 5% 1%;
    margin-top: 0%;
}

.thank-you .button{
  margin: .5em 0;
}


.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
} 

 }


 @media screen and (max-width: 59.999em) and (min-width: 55.001em) {


/* NEW QUERIES */

 
   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull{
     margin-top: 14%;
   }

  .main-bar{
    padding: 0em 1em!important;
  }

   .main-bar__menu > li > a{
     font-size: 0.7em!important;
     padding: 24px 10px!important;
   }

  .utility-bar__left{
    font-size: .6em!important;
  }

   .main-bar__schedule-btn{
     font-size: 0.8em!important;
     padding: 10px 10px!important;
   }
   

/* END NEW QUERIES */

.sched-row a strong{
  font-size: 2em;
}   

.side-form iframe {
    height: 44em!important;
}

.smallbar .logo-image img {
    width: 11em;
}
  
 .quick-nav.adjust {
    top: 4em;
} 
 

.client-review {
    margin-top: 12%;
    padding: 14% 4% 5% 4%;
}   

   
.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   

 
.logo-image img{
  width: 15em;
  top: 0;
}
 
   
.thank-you {
    margin-top: 0%;
}   

.sliderfull .col-md-7{
  width: 100%;
}
  
.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
}

.insideimage .slider-usp .usp-box{
  font-size: .8em;
}

.insideimage {
    margin-top: 9%;
    padding: 11% 2% 1% 2%;
    background-size: 55%;
}

.rev-sec-in .sec4-header {
    font-size: 2.3em;
}

   .rev-sec-in .btn{
     font-size: .748em;
   }   

.side-coup .btn-primary{
  font-size: .9em;
}   
   
 
.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}

 

.insideimage .slider-usp{
  width: 53%;
  font-size: .84em;
}

.close-cta{
  font-size: 1.1em;
} 

.site-footer .bullet-list li{
  font-size: .9em;
}

.sched-row a{
  font-size: 0.9em;
}   

.error-page {
    padding: 11% 4% 6% 4%;
    margin-top: 0%;
}


.resp-txt {
    font-size: 1.5em;
}

.client-review h1{
  font-size: 4.5em;
}

.sched-row:after {
    content: " ";
    position: absolute;
    bottom: 35%;
    height: 2.4em;
    width: .4em;
    left: 50.8%;
}

.sliderfull .btn{
  font-size: 1em;
}

.copyright{
  font-size: .9em!important;
}   

.hide-for-small-only{
  /* display: none; */
}
 
.show-for-small-only{
  display: none;
}
    .sidebar.show-for-small-only{
  display: block!important;
     width: 100%;
}

 }


 @media screen and (min-width: 60em) and (max-width: 63.938em) {
 
/* NEW QUERIES */

   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull{
     margin-top: 13%;
   }


   .main-bar__menu > li > a{
     font-size: 0.74em!important;
     padding: 24px 10px!important;
   }

  .utility-bar__left{
    font-size: .6em!important;
  }

   .main-bar__schedule-btn{
     font-size: 0.8em!important;
     padding: 10px 10px!important;
   }

/* END NEW QUERIES */

 
.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
}
 
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.65em;
    padding: 0.7em 1.4em;
}

   .top-bar .menu>li a {
    font-size: 0.67em;
}

.menu-top-menu-container .menu>li a{
  font-size: 0.7em;
  padding: .4em .7em;
}

.top-menu .btn{
  font-size: .8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: .68em;
}

.smallbar    .menu>li a {
    font-size: 0.6em;
}

.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}

.insideimage {
    padding: 8% 3% 1% 3%!important;
    margin-top: 18%!important;
    background-size: 59%;
}

  .logo-image img {
    width: 11em;
}

   .section-protecta h1{
     font-size: 2em;
   }
  

.client-review {
    padding: 13% 4% 5% 4%;
}   
   
.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}


.smallbar .logo-image img {
    width: 10em;
}

.smallbar .desk-nav .btn-primary{
  font-size: 0.7em;
}


.copyright{
  font-size: .9em!important;
}   

.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
    font-size: .9em;
}


.close-cta{
  font-size: 1.1em;
}

.home-form .row {
    font-size: 1.3em;
}



html {
    font-size: 15px!important;
}
 

.show-for-small-only{
  display: none;
}

   .sidebar.show-for-small-only{
  display: block!important;
     width: 100%;
}


 }


 @media screen and (max-width: 75em) and (min-width: 63.939em) {
 

/* NEW QUERIES */

   .main-bar__menu > li > a{
     font-size: .8em!important;
   }

  .utility-bar__left{
    font-size: .6em!important;
  }

   .main-bar__schedule-btn{
     font-size: 0.7em!important;
     padding: 10px 10px!important;
   }

   .main-bar{
     padding: 0 1em!important;
   }
 
 
   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull {
    margin-top: 13%;
}

/* END NEW QUERIES */


   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.69em;
}

.menu-top-menu-container .menu>li a {
    font-size: 0.68em;
    padding: 0.4em .9em;
}

.top-menu .btn{
  font-size: .8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: 0.7em;
}

.smallbar    .menu>li a {
    font-size: 0.61em;
}

.smallbar .desk-nav .btn-primary{
  font-size: 0.8em;
}


.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}
 

.contact-desk a{
  font-size: 1.8em;
}

.logo-image img {
    width: 11em;
}

   .section-protecta h1{
     font-size:2.2em;
   }

   .section-protectc .usp-box {
    height: 17em;
    color: black;
     font-size: .7em;
}


.client-review {
    padding: 13% 4% 5% 4%;
}   

.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}


.smallbar .logo-image img {
    width: 8em;
}
 
html {
    font-size: 16px!important;
}

 
.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.2em;
}

.sched-row a ,.sched-row button{
  font-size: .9em;
}

.show-for-small-only{
  display: none;
}



 }


 @media screen and (max-width: 85em) and (min-width: 75.001em) {

/* NEW QUERIES */
   
   .slider-header{
     font-size: 2.5em;
   }

   .sliderfull {
    margin-top: 13%;
}
 
/* END NEW QUERIES */


   html {
    font-size: 17px!important;
}

.home-form iframe{
  height: 43em!important;
}
  
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

  

.menu>li a {
    padding: 0.7em 1.3em;
    font-size: 0.7em;
}

.menu-top-menu-container .menu>li a{
  font-size: 0.7em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: .79em;
}

.top-menu .btn{
  font-size: .9em;
}

.smallbar .menu>li a {
    font-size: 0.67em;
}

.logo-image img {
    width: 14em;
}

.side-rev .btn{
  font-size: 1em;
}

 

.smallbar .logo-image img {
    width: 8em;
}

.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.3em;
}

.sched-row a ,.sched-row button {
    padding: 1% 2% 2% 2%;
}

.show-for-small-only{
  display: none;
}


 } 



 @media screen and (max-width: 95.001em) and (min-width: 85.001em) {


/* NEW QUERIES */

   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 2.94em;
   }

/* END NEW QUERIES */

   html {
    font-size: 17px!important;
}
 
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.9em;
}

.menu-top-menu-container .menu>li a{
  font-size: .8em;
}

.smallbar    .menu>li a {
    font-size: 0.8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: 0.9em;
}
 

.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}

  .logo-image img {
    width: 14em;
}


.smallbar .logo-image img {
    width: 11em;
}

   .section-8:after{
     width: 52%;
   }
 

.sched-row:after {
    content: " ";
    position: absolute;
    bottom: 35%;
    height: 2.4em;
    width: .4em;
    left: 50.8%;
}

.sliderfull .btn{
  font-size: 1em;
}

.copyright{
  font-size: .9em!important;
}   


.close-cta{
}

.show-for-small-only{
  display: none;
}

 }


 @media screen and (max-width: 125em) and (min-width: 95.001em) {


/* NEW QUERIES */


   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 3.24em;
   }

 
   
/* END NEW QUERIES */

   html {
    font-size: 17px!important;
}
  
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }
  

.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.6em;
}

.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
}


.show-for-small-only{
  display: none;
}
 


 } 
  
  
 @media screen and (min-width: 125.001em) and (max-width: 999.9em) {
 

/* NEW QUERIES */
 
   
   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 3.64em;
   }

 

/* END NEW QUERIES */


.sliderfull {
} 
 
 
html {
    font-size: 17px!important;
}
 

   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 1.1em;
}
.smallbar .desk-nav .btn-primary{
  font-size: .9em;
}


.copyright{
  font-size: .9em!important;
}   

.sched-row a ,.sched-row button{
    padding: 3% 0% 3% 0%;
    font-size: 1.1em;
}

.show-for-small-only{
  display: none;
}

 }




/* ================================================ */
/* NEW KNIGHT PLUMBING DESIGN CSS — v2 PURPLE THEME */
/* ================================================ */

/* ============================================================
   CUSTOM.CSS — Knight Plumbing Inc.
   New design system — #51269a purple brand palette
   Organized by section:
     1. CSS Variables & Reset
     2. Utility Classes
     3. Global Buttons & Typography helpers
     4. HEADER
     5. HERO / SLIDER
     6. SERVICES STRIP
     7. EMERGENCY BAND
     8. WHY US (Section 1)
     9. USP CARDS
    10. REVIEWS (Section 2)
    11. ADDITIONAL SERVICES
    12. WHY LOCAL (Section 5)
    13. MEMBERSHIP
    14. FINANCING
    15. COUPONS
    16. SERVICE AREA
    17. BLOG
    18. CLOSING CTA & BADGES
    19. FOOTER (CTA Band + Footer)
    20. OFFCANVAS & MODAL
    21. MOBILE RESPONSIVE
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES & RESET
   ============================================================ */

:root {
  /* Brand palette */
  --brand-primary:        #51269a;
  --brand-primary-deep:   #3b1a6e;
  --brand-primary-darker: #25104a;
  --brand-primary-light:  #7e55c2;
  --brand-navy:           #2c1466;
  --brand-navy-mid:       #3b1d80;
  --brand-navy-deep:      #14062e;
  --brand-accent:         #c7b5f2;
  --brand-accent-deep:    #a88fe0;
  --brand-accent-rgb:     199, 181, 242;
  --brand-accent-warm:    #faf1ff;
  --brand-paper:          #f4eff8;
  --brand-stone:          #e8e0f0;
  --brand-charcoal:       #1f1a2e;
  --brand-charcoal-soft:  #3b3450;

  /* Typography */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Open Sans", -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --site-max:    1700px;
  --content-max: 1320px;
  --section-pad: 80px 64px;
  --section-pad-sm: 48px 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--brand-charcoal);
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

/* Icomoon icon font (keep existing @font-face from old custom.css) */


/* ============================================================
   2. UTILITY CLASSES
   ============================================================ */

.show-for-small-only { display: block; }
.hide-for-small-only { display: none; }

@media (min-width: 768px) {
  .show-for-small-only { display: none !important; }
  .hide-for-small-only { display: block !important; }
}

.text-primary { color: var(--brand-primary); }
.accent-word  { color: var(--brand-accent); }


/* ============================================================
   3. GLOBAL BUTTONS & TYPOGRAPHY HELPERS
   ============================================================ */

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-primary);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--brand-primary);
}
.eyebrow--light {
  color: var(--brand-accent);
}
.eyebrow--light::before,
.eyebrow--light::after {
  background: var(--brand-accent);
}

/* Primary button */
.btn-primary-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 26px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
  line-height: 1;
  text-decoration: none;
}
.btn-primary-brand:hover {
  background: var(--brand-primary-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline primary */
.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  background: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  line-height: 1;
  text-decoration: none;
}
.btn-outline-primary:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* Outline white */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  line-height: 1;
  text-decoration: none;
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}

/* Accent dark button (accent bg, navy text) */
.btn-accent-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 26px;
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
  line-height: 1;
  text-decoration: none;
}
.btn-accent-dark:hover {
  background: var(--brand-accent-deep);
  color: var(--brand-navy-deep);
}

/* Carousel arrow button */
.carousel-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-size: 1.2rem;
}
.carousel-arrow-btn:hover {
  background: rgba(255,255,255,0.20);
}
.carousel-arrow-btn--dark {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  color: var(--brand-navy);
}
.carousel-arrow-btn--dark:hover {
  background: var(--brand-paper);
}

/* Carousel controls row */
.carousel-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}


/* ============================================================
   4. HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
}

/* -- UTILITY BAR -- */
.utility-bar {
  background: var(--brand-navy-deep);
  padding: 8px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utility-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.85);
}

.utility-bar__badge-icon {
  color: var(--brand-accent);
  font-size: 1rem;
}

.utility-bar__right { display: flex; align-items: center; }

.utility-bar__menu,
.utility-bar__menu ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.utility-bar__menu li a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  padding: 4px 12px;
  transition: color 0.2s ease;
}

.utility-bar__menu li a:hover {
  color: var(--brand-accent);
}

/* -- MAIN BAR (Desktop) -- */
.main-bar {
    background: var(--brand-primary);
    padding: 0 62px 0 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.main-bar__logo {
  flex-shrink: 0;
  padding: 10px 0;
}

.main-bar__logo img {
  max-height: 54px;
  width: auto;
  margin: auto;
}

.main-bar__nav {
  flex: 1;
}

.main-bar__menu,
.main-bar__menu ul {
  display: flex;
  align-items: center;
  align-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  list-style-type: none;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
}

.main-bar__menu > li > a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.90);
  padding: 16px 11px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.main-bar__menu > li > a:hover,
.main-bar__menu > li.current-menu-item > a,
.main-bar__menu > li.current_page_item > a {
  color: var(--brand-accent);
}

/* Dropdown */
.main-bar__menu li {
  position: relative;
}

.main-bar__menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--brand-primary-deeper, var(--brand-primary-dark, #3b1a6e));
  background: var(--brand-primary-deep);
  flex-direction: column;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.main-bar__menu li:hover > ul {
  display: flex;
}

.main-bar__menu li ul li a {
  display: block;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.main-bar__menu li ul li a:hover {
  background: var(--brand-navy);
  color: var(--brand-accent);
}

/* Main bar actions (phone + button) */
.main-bar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.main-bar__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
  text-decoration: none;
}

.main-bar__phone:hover {
  color: var(--brand-accent);
}

.main-bar__phone-number {
  white-space: nowrap;
}

.main-bar__schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  background: #fff;
  color: var(--brand-primary);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  margin: auto;
}

.main-bar__schedule-btn:hover {
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
}

/* -- MOBILE NAV -- */
.mobile-nav {
  display: none;
  background: var(--brand-primary);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.mobile-nav__hamburger {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.mobile-nav__logo {
  flex: 1;
  text-align: center;
}

.mobile-nav__logo img {
  max-height: 74px;
  width: auto;
  display: inline-block;
}

.mobile-nav__phone-icon {
  color: #fff;
  font-size: 1.4rem;
  padding: 4px 8px;
  width: 2em;
  height: 2em;
  background: white;
  border-radius: 900em;
  font-size: 1.7em;
  line-height: 1.9;
  display: block;
  text-align: center;
}

.mobile-nav__quick-nav {
  display: flex;
  background: var(--brand-navy);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mobile-nav__quick-link {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s ease;
  border-right: 1px solid rgba(255,255,255,0.10);
}

.mobile-nav__quick-link:last-child {
  border-right: none;
}

.mobile-nav__quick-link:hover {
  color: var(--brand-accent);
}

/* Show/hide per breakpoint */
@media (min-width: 768px) {
  .mobile-nav { display: none !important; }
  .desk-nav   { display: block !important; }
}

@media (max-width: 767px) {
  .mobile-nav { display: block; }
  .desk-nav   { display: none; }
}


/* ============================================================
   5. HERO / SLIDER
   ============================================================ */

.hero-section {
  position: relative;
  min-height: 560px;
  background: var(--brand-navy-deep);
  color: #fff;
  border-bottom: 8px solid var(--brand-primary);
  overflow: hidden;
  margin-top: 11%;
}

#video-banner {
    position: absolute;
    bottom: -60%;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    /* width: 130%; */
    z-index: 1;
    /* height: 285%; */
    opacity: 0.8;
}


/* Hero USP chips */
.hero-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px 0;
}

.hero-usp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* background: rgba(255,255,255,0.12); */
  /* border: 1px solid rgba(255,255,255,0.30); */
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}

.hero-usp-chip .icon-check-circle {
  color: var(--brand-accent);
  font-size: 1rem;
}

@media (max-width: 576px) {
  .hero-usp-chip {
    font-size: 0.72rem;
    padding: 6px 12px;
  }
}



.hero-static,
.hero-section .carousel-item {
  position: relative;
  min-height: 560px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20,6,46,0.92) 0%,
    rgba(44,20,102,0.78) 38%,
    rgba(44,20,102,0.30) 65%,
    rgba(44,20,102,0.05) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 10em 5em 9em 6em;
  max-width: var(--site-max);
  margin: 0 auto;
}

.hero-review-badge {
  margin-bottom: 20px;
  max-width: 340px;
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0.04em 0.06em rgba(0,0,0,0.55);
  margin: 0 0 12px;
  max-width: 720px;
}

.hero-subline {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 580px;
  margin-bottom: 18px;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-usp-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.hero-usp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.90);
}

/* Carousel overrides in hero */
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}


/* ============================================================
   6. SERVICES STRIP
   ============================================================ */

.services-strip {
  background: var(--brand-navy);
  color: #fff;
  padding: 48px 40px 56px;
  overflow: hidden;
  position: relative;
}

.services-strip__chess-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background-image:
    linear-gradient(45deg, rgba(199,181,242,0.5) 25%, transparent 25% 75%, rgba(199,181,242,0.5) 75%),
    linear-gradient(45deg, rgba(199,181,242,0.5) 25%, transparent 25% 75%, rgba(199,181,242,0.5) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.services-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: var(--content-max);
  margin: 8px auto 28px;
}

.services-strip__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: #fff;
  margin: 8px 0 0;
  line-height: 1.05;
}

.services-strip__slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 4px;
}

/* Service tile */
.service-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.service-tile:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(var(--brand-accent-rgb), 0.50);
  transform: translateY(-3px);
}

.service-tile__ring {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-primary), var(--brand-navy-mid));
  border: 2px solid rgba(var(--brand-accent-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--brand-accent);
  flex-shrink: 0;
}

.service-tile__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}

.service-tile__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  flex: 1;
}

.service-tile__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-accent);
  margin-top: auto;
}


/* ============================================================
   7. EMERGENCY BAND
   ============================================================ */

.emergency-band {
  background: var(--brand-primary);
  color: #fff;
  padding: 28px 40px;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.emergency-band__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

.emergency-band__icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emergency-band__icon {
  font-size: 2.4rem;
  color: var(--brand-accent);
}

.emergency-band__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  margin-bottom: 4px;
}

.emergency-band__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
}

.emergency-band__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}


/* ============================================================
   8. WHY US (SECTION 1)
   ============================================================ */

.why-us {
  background: #fff;
  padding: var(--section-pad);
}

.why-us__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

.why-us__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.08;
  color: var(--brand-navy);
  margin: 10px 0 18px;
  text-transform: uppercase;
}

.why-us__content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: #333;
  margin-bottom: 24px;
}

/* Style the intro_content wysiwyg output */
.why-us__content p:first-child {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-navy-deep);
  border-left: 3px solid var(--brand-primary);
  padding-left: 16px;
  line-height: 1.55;
}

.why-us__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.why-us__photo-frame {
  background: var(--brand-navy);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.why-us__photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.why-us__photo-stripe {
  background: var(--brand-navy);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.why-us__photo-stripe span:first-child {
  color: var(--brand-accent);
  font-size: 1.2rem;
}


/* ============================================================
   9. USP CARDS
   ============================================================ */

.usp-cards {
  background: var(--brand-paper);
  padding: 56px 40px;
}

.usp-cards__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.usp-card {
  background: #fff;
  padding: 30px 28px 26px;
  border-radius: 8px;
  border: 1px solid var(--brand-stone);
  border-top: 4px solid var(--brand-primary);
  box-shadow: 0 4px 14px rgba(20,6,46,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.usp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20,6,46,0.12);
}

.usp-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-primary), var(--brand-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(85,39,153,0.25);
  font-size: 1.6rem;
  color: var(--brand-accent);
}

.usp-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-navy-deep);
  margin: 0 0 10px;
}

.usp-card__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--brand-charcoal-soft);
  margin: 0;
}

/* Mobile carousel for USP cards */
#mobile-usp1 .usp-card {
  margin: 0 16px;
}


/* ============================================================
   10. REVIEWS (SECTION 2)
   ============================================================ */

.reviews-section {
  background: #fff;
  padding: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.reviews-section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.reviews-section__head {
  text-align: center;
  margin-bottom: 36px;
}

.reviews-section__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.reviews-section__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  color: var(--brand-primary);
  line-height: 1;
}

.reviews-section__stars {
  color: #f5a623;
  font-size: 1.4rem;
  display: flex;
  gap: 2px;
}

.reviews-section__count {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--brand-charcoal-soft);
  font-weight: 600;
}

.reviews-section__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--brand-navy-deep);
  text-transform: uppercase;
  margin: 0;
}

.reviews-section__widget {
  margin-bottom: 32px;
}

.reviews-section__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   11. ADDITIONAL SERVICES
   ============================================================ */

.addl-services {
  background: #fff;
  padding: var(--section-pad);
  overflow: hidden;
}

.addl-services__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: stretch;
  max-width: var(--content-max);
  margin: 0 auto;
}

.addl-services__photo-frame {
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.12);
  height: 100%;
  display: flex;
}

.addl-services__photo {
  width: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.addl-services__h2 {
  margin: 10px 0 0;
}

.addl-services__h2-primary {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.05;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.addl-services__accent-bar {
  width: 80px;
  height: 4px;
  background: var(--brand-accent);
  margin: 16px 0 14px;
}

.addl-services__intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.addl-services__box {
  background: var(--brand-navy);
  color: #fff;
  padding: 24px 28px 20px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  flex: 1;
}

.addl-services__box-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.addl-services__box-rule {
  flex: 1;
  height: 1px;
  background: rgba(var(--brand-accent-rgb), 0.30);
  display: block;
}

.addl-services__box-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.addl-services__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.addl-services__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.addl-services__check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.addl-services__item-text {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.90);
  text-decoration: none;
  transition: color 0.2s ease;
}

.addl-services__item-text:hover {
  color: var(--brand-accent);
}

.addl-services__box-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.70);
  text-align: center;
  font-style: italic;
}


/* ============================================================
   12. WHY LOCAL (SECTION 5)
   ============================================================ */

.why-local {
  background: var(--brand-paper);
  padding: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.why-local__bg-accent {
  position: absolute;
  top: -160px;
  left: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb),0.22), transparent 68%);
  pointer-events: none;
}

.why-local__head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 1;
}

.why-local__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--brand-navy);
  margin: 10px 0 18px;
  text-transform: uppercase;
}

.why-local__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--brand-charcoal-soft);
}

.why-local__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-local__card {
  background: #fff;
  border: 1px solid var(--brand-stone);
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 6px 20px rgba(20,6,46,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-local__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20,6,46,0.12);
}

.why-local__icon-ring {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-primary), var(--brand-primary-darker));
  border: 2px solid rgba(var(--brand-accent-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.7rem;
  color: var(--brand-accent);
}

.why-local__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-navy);
  margin: 0 0 10px;
}

.why-local__card-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--brand-charcoal-soft);
  margin: 0;
}

.why-local__foot-cta {
  max-width: var(--content-max);
  margin: 48px auto 0;
  padding: 28px 36px;
  background: var(--brand-navy);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.30);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 1;
}

.why-local__foot-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: #fff;
  font-weight: 600;
  flex: 1;
  margin: 0;
}

.why-local__foot-brand {
  color: var(--brand-accent);
}

.why-local__foot-phone {
  color: var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  font-weight: 700;
  text-decoration: none;
}


/* ============================================================
   13. MEMBERSHIP
   ============================================================ */

.membership-section {
  background: var(--brand-navy);
  color: #fff;
  padding: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.membership-section__bg-chess {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(var(--brand-accent-rgb),0.08) 25%, transparent 25% 75%, rgba(var(--brand-accent-rgb),0.08) 75%),
    linear-gradient(45deg, rgba(var(--brand-accent-rgb),0.08) 25%, transparent 25% 75%, rgba(var(--brand-accent-rgb),0.08) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  pointer-events: none;
  z-index: 0;
}

.membership-section__bg-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,6,46,0.28) 0%, rgba(44,20,102,0.24) 50%, rgba(20,6,46,0.40) 100%);
  pointer-events: none;
  z-index: 0;
}

.membership-section__bg-glow {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb),0.16) 0%, rgba(var(--brand-accent-rgb),0.10) 30%, rgba(var(--brand-accent-rgb),0.04) 55%, transparent 78%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.membership-section__head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
}

.membership-section__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.1;
  color: #fff;
  margin: 10px 0 14px;
  text-transform: uppercase;
}

.membership-section__h2 span {
  color: var(--brand-accent);
}

.membership-section__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 760px;
  margin: 0 auto;
}

/* Inspection panel */
.membership-section__inspection {
  max-width: 1100px;
  margin: 0 auto 44px;
  padding: 22px 28px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.membership-section__inspection-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.membership-section__rule {
  flex: 1;
  height: 1px;
  background: rgba(var(--brand-accent-rgb), 0.35);
  display: block;
}

.membership-section__inspection-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  white-space: nowrap;
}

.membership-section__inspection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}

.membership-section__inspection-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}

.membership-section__check-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-accent);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-block;
}

/* Tier grid */
.membership-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.membership-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 30px 26px;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.membership-card--featured {
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  border-color: var(--brand-accent);
  transform: scale(1.04);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.membership-card__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-navy-deep);
  color: var(--brand-accent);
  padding: 6px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.membership-card__tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.membership-card__tagline {
  font-family: var(--font-body);
  font-size: 0.8rem;
  opacity: 0.80;
  margin-top: 4px;
  margin-bottom: 18px;
}

.membership-card__price-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 4px;
}

.membership-card__dollar {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 10px;
}

.membership-card__price {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
}

.membership-card__cadence {
  font-family: var(--font-body);
  font-size: 0.85rem;
  align-self: flex-end;
  opacity: 0.70;
  margin-bottom: 8px;
}

.membership-card__visit {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.membership-card--featured .membership-card__visit {
  border-bottom-color: rgba(44,20,102,0.20);
}

.membership-card__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.membership-card__perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.4;
}

.membership-card__check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(var(--brand-accent-rgb), 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.membership-card--featured .membership-card__check {
  background: rgba(44,20,102,0.18);
}

.membership-card__star {
  color: var(--brand-accent);
  flex-shrink: 0;
}

.membership-card--featured .membership-card__star {
  color: var(--brand-navy);
}

.membership-card__divider {
  margin: 18px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.membership-card__divider-lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  padding: 4px 12px;
  background: rgba(var(--brand-accent-rgb), 0.12);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
  border-radius: 999px;
}

.membership-card__divider-lbl--featured {
  color: var(--brand-navy-deep);
  background: rgba(20,6,46,0.12);
  border-color: rgba(20,6,46,0.30);
}

.membership-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  margin-top: 22px;
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease;
  border-radius: 0;
}

.membership-card__btn:hover {
  background: var(--brand-accent-deep);
  color: var(--brand-navy-deep);
}

.membership-card__btn--featured {
  background: var(--brand-navy-deep);
  color: #fff;
}

.membership-card__btn--featured:hover {
  background: #000;
  color: #fff;
}

.membership-section__foot {
  text-align: center;
  margin-top: 36px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.70);
  position: relative;
  z-index: 1;
}


/* ============================================================
   14. FINANCING
   ============================================================ */

.financing-section {
  background: #fff;
  padding: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.financing-section__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
}

.financing-section__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1.05;
  color: var(--brand-navy-deep);
  margin: 10px 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.financing-section__h2-primary {
  color: var(--brand-primary);
}

.financing-section__content {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #333;
  margin-bottom: 24px;
}

.financing-section__content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--brand-primary);
  text-transform: none;
  margin: 20px 0 8px;
}

.financing-section__content ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.financing-section__content ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.financing-section__content ul li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 7px;
  box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.25);
}

.financing-section__footer {
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--brand-stone);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.financing-section__right {
  position: relative;
  padding-top: 30px;
}

.financing-section__photo-frame {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--brand-stone);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(20,6,46,0.15);
}

.financing-section__photo {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.financing-section__accent-tl {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 96px;
  height: 96px;
  border: 4px solid var(--brand-accent);
  border-radius: 6px;
  z-index: -1;
}

.financing-section__accent-br {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: var(--brand-primary);
  border-radius: 6px;
  opacity: 0.90;
  z-index: -1;
}


/* ============================================================
   15. COUPONS
   ============================================================ */

.coupons-section {
  background: #f5f5f5;
  padding: 72px 40px;
  overflow: hidden;
}

.coupons-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto 28px;
}

.coupons-section__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--brand-navy);
  margin: 10px 0 8px;
  text-transform: uppercase;
}

.coupons-section__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #666;
  margin: 0;
}

.coupons-section__controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.coupons-section__slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 4px;
}

.coupon-tile {
  background: var(--brand-primary);
  color: #fff;
  padding: 26px 26px 22px;
  border: 3px dashed rgba(255,255,255,0.50);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

.coupon-tile__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coupon-tile__amt-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.coupon-tile__amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.coupon-tile__off {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--brand-accent);
  padding-bottom: 6px;
}

.coupon-tile__offer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.coupon-tile__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  border: none;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.25s ease;
}

.coupon-tile__btn:hover {
  background: var(--brand-accent-deep);
  color: var(--brand-navy-deep);
}

.coupons-section__disclaimer {
  max-width: var(--content-max);
  margin: 20px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #666;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.coupons-section__disclaimer .icon-info {
  color: var(--brand-primary);
  font-size: 0.875rem;
}


/* ============================================================
   16. SERVICE AREA
   ============================================================ */

.service-area {
  background: var(--brand-navy);
  color: #fff;
  padding: 72px 40px;
  position: relative;
  overflow: hidden;
}

.service-area__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px;
}

.service-area__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.05;
  color: #fff;
  margin: 10px 0 14px;
  text-transform: uppercase;
}

.service-area__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
}

.service-area__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
  transition: background 0.2s ease;
}

.city-chip:hover {
  background: rgba(255,255,255,0.14);
}

.city-chip__icon {
  color: var(--brand-accent);
  font-size: 0.7rem;
}

.service-area__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.service-area__map-frame {
  position: relative;
  height: 520px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 36px rgba(0,0,0,0.40);
}

.service-area__map-frame iframe {
  width: 100% !important;
  height: calc(100% + 60px) !important;
  margin-top: -60px !important;
  border: 0 !important;
  display: block !important;
}

/* Handle wysiwyg <p> wrapper around iframe */
.service-area__map-frame p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.service-area__map-frame p iframe {
  width: 100% !important;
  height: calc(100% + 60px) !important;
  margin-top: -60px !important;
  border: 0 !important;
  display: block !important;
}


/* ============================================================
   17. BLOG
   ============================================================ */

.blog-section {
  background: #fff;
  padding: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.blog-section__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 44px;
}

.blog-section__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--brand-navy-deep);
  margin: 10px 0 14px;
  line-height: 1.1;
  text-transform: uppercase;
}

.blog-section__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--brand-charcoal-soft);
  margin: 0;
}

.blog-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--brand-stone);
  box-shadow: 0 6px 20px rgba(20,6,46,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20,6,46,0.12);
}

.blog-card__thumb {
  position: relative;
  height: 200px;
  background: linear-gradient(150deg, var(--brand-primary), var(--brand-navy));
  overflow: hidden;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__img {
  transform: scale(1.04);
}

.blog-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--brand-primary), var(--brand-navy));
}

.blog-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  padding: 5px 12px;
  border-radius: 3px;
  z-index: 1;
}

.blog-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--brand-charcoal-soft);
  margin-bottom: 10px;
}

.blog-card__date-icon {
  color: var(--brand-primary);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--brand-navy-deep);
  margin: 0 0 12px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.blog-card:hover .blog-card__title {
  color: var(--brand-primary);
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--brand-charcoal-soft);
  margin: 0 0 16px;
  flex: 1;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.72rem;
  color: var(--brand-primary);
  gap: 4px;
  margin-top: auto;
}

.blog-section__footer {
  text-align: center;
  margin-top: 44px;
}


/* ============================================================
   18. CLOSING CTA & BADGES
   ============================================================ */

.closing-cta {
  background: var(--brand-paper);
  padding: 48px 40px;
  border-top: 1px solid var(--brand-stone);
}

.closing-cta__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--brand-navy-deep);
}

.closing-cta__inner a {
  color: var(--brand-primary);
  border-bottom: 2px solid var(--brand-accent);
  font-weight: 700;
}

.badges-strip {
  background: #fff;
  padding: 24px 40px;
  border-top: 1px solid var(--brand-stone);
}

.badges-strip__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--content-max);
  margin: 0 auto;
}

.badge-item {
  flex: 0 0 auto;
}

.main-bar__quote-btn.float-btn{
  position: fixed;
  bottom: 0.5em;
  left: 1em;
  width: 100%;
  max-width: 270px;
  text-align: center;
  display: block;
  font-size: 1.2em!important;
  box-shadow: 0em 0em 1em black;
  border: 2px solid #ffffff;
  padding: 0.4em 1em 0.6em 1em!important;
}

.main-bar__quote-btn.float-btn span{
  position: relative;
  top: .27em;
}


/* ============================================================
   19. FOOTER: CTA BAND + FOOTER
   ============================================================ */

/* -- CTA BAND -- */
.cta-band {
  background: var(--brand-navy);
}

.cta-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

/* Left: Call */
.cta-band__call {
  background: var(--brand-navy);
  color: #fff;
  padding: 36px 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-decoration: none;
  transition: background 0.25s ease;
  min-height: 130px;
}

.cta-band__call:hover {
  background: var(--brand-navy-mid);
}

/* Right: Schedule */
.cta-band__schedule {
  background: var(--brand-accent);
  color: var(--brand-navy-deep);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-decoration: none;
  transition: background 0.25s ease;
  min-height: 130px;
}

.cta-band__schedule:hover {
  background: var(--brand-accent-deep);
}

.cta-band__icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.95;
}

.cta-band__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cta-band__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.cta-band__label-pre {
  color: var(--brand-accent);
  margin-right: 8px;
}

.cta-band__label--dark {
  color: var(--brand-navy-deep);
}

.cta-band__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.cta-band__sub--dark {
  color: rgba(44,20,102,0.70);
}

/* -- FOOTER -- */
.site-footer {
  background: var(--brand-navy-deep);
  color: rgba(255,255,255,0.80);
  border-top: 8px solid var(--brand-primary);
  padding: 60px 40px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-col__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-accent);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.25);
}

/* Col 1 */
.footer-col--brand .footer-logo img {
  max-height: 115px;
  width: auto;
  margin-bottom: 12px;
}

.footer-license {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  line-height: 1.5;
}

/* Col 2: Address */
.footer-address {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12px;
}

.footer-address a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-address a:hover {
  color: var(--brand-accent);
}

.footer-google-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.40);
  transition: color 0.2s ease;
}

.footer-google-link:hover {
  color: #fff;
}

/* Col 3: We Accept + Social */
.footer-we-accept {
  margin-bottom: 20px;
}

.footer-we-accept img {
  max-width: 100%;
  height: auto;
}

.footer-social__list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-social__list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.80);
  border-radius: 4px;
  font-size: 1.1rem;
  transition: background 0.2s, color 0.2s;
}

.footer-social__list li a:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* Col 4: Links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-links__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.footer-links__item:hover {
  color: var(--brand-accent);
}

.footer-links__arrow {
  font-size: 0.65rem;
  color: var(--brand-accent);
  opacity: 0.75;
}

/* Copyright */
.footer-copyright {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.40);
  text-align: center;
  letter-spacing: 0.04em;
}


/* ============================================================
   20. OFFCANVAS & MODAL
   ============================================================ */

.offcanvas {
  max-width: 320px;
  background: var(--brand-navy-deep);
}

.offcanvas .btn-close {
  filter: invert(1);
  opacity: 0.75;
}

.shift-menu {
  padding: 0;
}

.shift-item {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.shift-item > a {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  padding: 14px 20px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.shift-item > a:hover {
  color: var(--brand-accent);
}

.shift-item > .btn-secondary {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.50);
  font-size: 0.75rem;
  padding: 14px 12px;
}

.shift-item .collapse {
  width: 100%;
  background: rgba(0,0,0,0.25);
}

.shift-item .sub-item {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  padding: 10px 28px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s ease, background 0.2s ease;
}

.shift-item .sub-item:hover {
  color: var(--brand-accent);
  background: rgba(255,255,255,0.04);
}

/* Modal */
.modal-content {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.modal-body {
  padding: 24px 24px 16px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
}

.modal-footer {
  padding: 12px 24px;
  background: var(--brand-paper);
  border-top: 1px solid var(--brand-stone);
}

.modal-footer .btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}


/* ============================================================
   21. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  :root {
    --section-pad: 60px 32px;
  }

  .why-us__row,
  .addl-services__row,
  .financing-section__row {
    grid-template-columns: 1fr;
  }

  .why-us__photo {
    height: 300px;
  }

  .financing-section__photo {
    height: 300px;
  }

  .blog-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .membership-section__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .membership-card--featured {
    transform: none;
  }

  .membership-section__inspection-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .service-area__row {
    grid-template-columns: 1fr;
  }

  .why-local__foot-cta {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 767px) {
  :root {
    --section-pad: 48px 20px;
  }

  /* Header */
  .mobile-nav { display: block; }
  .desk-nav   { display: none; }

  /* Hero */
  .hero-content {
    padding: 48px 20px 40px;
  }

  .hero-h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-cta-row {
    flex-direction: column;
    gap: 10px;
  }

  .hero-cta-row a {
    width: 100%;
    justify-content: center;
  }

  /* Emergency band */
  .emergency-band {
    padding: 20px 20px;
  }

  .emergency-band__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .emergency-band__icon-wrap {
    margin: 0 auto;
  }

  .emergency-band__actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .emergency-band__actions a {
    width: 100%;
    justify-content: center;
  }

  /* Services strip */
  .services-strip__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* USP cards */
  .usp-cards__row {
    grid-template-columns: 1fr;
  }

  /* Reviews */
  .reviews-section__btns {
    flex-direction: column;
    align-items: center;
  }

  /* Additional services */
  .addl-services__list {
    grid-template-columns: 1fr;
  }

  /* Why local */
  .why-local__grid {
    grid-template-columns: 1fr;
  }

  /* Coupons */
  .coupons-section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .coupons-section__slide {
    grid-template-columns: 1fr;
  }

  /* Service area */
  .service-area__map-frame {
    height: 320px;
  }

  /* Blog */
  .blog-section__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .cta-band__grid {
    grid-template-columns: 1fr;
  }

  .cta-band__call,
  .cta-band__schedule {
    padding: 24px 20px;
    min-height: auto;
  }

  .cta-band__label {
    font-size: 1.4rem;
  }

  /* Membership */
  .membership-section__inspection-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .why-us__btns,
  .financing-section__footer,
  .service-area__actions {
    flex-direction: column;
  }

  .why-us__btns a,
  .financing-section__footer a,
  .service-area__actions a {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================ */
/* CRITICAL CSS FIXES — Override conflict rules      */
/* ================================================ */

/* =======================================================================
   KNIGHT PLUMBING — CRITICAL CSS FIXES
   Paste the contents of this file at the very BOTTOM of custom.css.
   These rules fix conflicts where old CSS overrides new design styles.
   =======================================================================


   STEP 0 — GOOGLE FONTS
   -----------------------------------------------------------------------
   The new design uses Oswald (headings) and Open Sans (body text).
   If these aren't loaded, all typography falls back to system fonts.

   BEST: Add this to your theme's functions.php inside the
   wp_enqueue_scripts hook:

     function knight_enqueue_fonts() {
       wp_enqueue_style(
         'knight-google-fonts',
         'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap',
         array(),
         null
       );
     }
     add_action( 'wp_enqueue_scripts', 'knight_enqueue_fonts' );

   ALTERNATIVE: Add this @import at the very TOP of custom.css
   (must be the first line of the file, before any other CSS):
     @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

   ======================================================================= */


/* -----------------------------------------------------------------------
   FIX 1 — .show-for-small-only / .hide-for-small-only
   Problem: Old CSS at line ~18 has `.show-for-small-only { display:none!important; }`
   with no media query. This hides mobile sections on ALL screen sizes,
   breaking the mobile carousels (services, USP cards, why-local).
   ----------------------------------------------------------------------- */
.show-for-small-only {
  display: block !important;
}
@media (min-width: 768px) {
  .show-for-small-only {
    display: none !important;
  }
}

.hide-for-small-only {
  display: none !important;
}
@media (min-width: 768px) {
  .hide-for-small-only {
    display: block !important;
  }
}


/* -----------------------------------------------------------------------
   FIX 2 — PHONE LINK BUTTONS
   Problem: Old CSS has `a[href^="tel"] { display: block; margin-bottom: 3%; }`
   which has higher specificity (attribute + element = 0,0,1,1) than button
   classes (0,1,0,0). This forces all phone-number <a> buttons to display
   as block with 3% bottom margin, breaking the horizontal button rows.
   ----------------------------------------------------------------------- */
.btn-primary-brand,
.btn-outline-white,
.btn-outline-primary,
.btn-accent-dark,
.main-bar__phone,
.cta-band__call,
.cta-band__schedule,
.why-local__foot-phone,
.footer-google-link,
.footer-links__item,
.service-area__actions a,
.reviews-section__btns a,
.blog-card,
.blog-card__more,
.city-chip {
  display: inline-flex !important;
  margin-bottom: 0 !important;
}

/* Ensure hero CTA row is flex so buttons sit side-by-side */
.hero-cta-row,
.why-us__btns,
.emergency-band__actions,
.reviews-section__btns,
.financing-section__footer,
.service-area__actions {
  display: flex !important;
}


/* -----------------------------------------------------------------------
   FIX 3 — NAV LINK COLORS
   Problem: Old CSS has `.menu>li a { color: black!important; }` and
   `.menu>li a:hover { background-color: #044ba1!important; color:white!important; }`
   WordPress nav menus output with class "menu", so these rules turn new
   purple-on-white nav links black and add blue hover backgrounds.
   ----------------------------------------------------------------------- */

/* Desktop main nav links — white on purple */
.main-bar__menu > li > a,
.main-bar__menu > li > a span {
  color: rgba(255, 255, 255, 0.90) !important;
  background-color: transparent !important;
}
.main-bar__menu > li > a:hover,
.main-bar__menu > li > a:hover span,
.main-bar__menu > li.current-menu-item > a,
.main-bar__menu > li.current_page_item > a {
  color: var(--brand-accent) !important;
  background-color: transparent !important;
}

/* Dropdown sub-menu links */
.main-bar__menu li ul li a,
.main-bar__menu li ul li a span {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
}
.main-bar__menu li ul li a:hover {
  background-color: var(--brand-navy) !important;
  color: var(--brand-accent) !important;
}

/* Utility bar top-nav links */
.utility-bar__menu li a,
.utility-bar__menu li a span {
  color: rgba(255, 255, 255, 0.75) !important;
  background-color: transparent !important;
}
.utility-bar__menu li a:hover {
  color: var(--brand-accent) !important;
  background-color: transparent !important;
}

/* Mobile offcanvas menu links */
.shift-item > a {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
}
.shift-item > a:hover {
  color: var(--brand-accent) !important;
  background-color: transparent !important;
  border-left: none !important;
}
.shift-item .sub-item {
  color: rgba(255, 255, 255, 0.72) !important;
  background-color: transparent !important;
}


/* -----------------------------------------------------------------------
   FIX 4 — HEADER BACKGROUND & POSITION
   Problem: Old CSS has `header#masthead { background-color: #ffffff !important;
   position: fixed; }` — the ID selector (specificity 1,0,1) beats the new
   class selector `.site-header` (specificity 0,1,0).
   "position: fixed" also conflicts with the new sticky header behaviour,
   and a fixed header does not push page content down unless padding-top
   is manually set on <body>.
   ----------------------------------------------------------------------- */

/* Force sticky positioning regardless of id="masthead" */
header#masthead,
header.site-header,
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Remove the white background forced on the header container;
   child elements (.utility-bar, .main-bar, .mobile-nav) have their own backgrounds */
header#masthead {
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure header sub-sections keep the correct brand colours */
.utility-bar {
  background: var(--brand-navy-deep) !important;
}

.main-bar {
  background: var(--brand-primary) !important;
}

.mobile-nav {
  background: var(--brand-primary) !important;
}


/* -----------------------------------------------------------------------
   FIX 5 — SITE/WRAPPER OVERFLOW
   Problem: Old CSS sets `.site { overflow: hidden; }` on the outer wrapper.
   A parent with overflow:hidden disables position:sticky on any child,
   so the header stops sticking and the desktop nav can't show.
   ----------------------------------------------------------------------- */
.site,
#site-wrap {
  overflow: visible !important;
}


/* -----------------------------------------------------------------------
   FIX 6 — LIST MARGIN
   Problem: Old CSS has `ul { margin-left: 0em!important; }` which resets
   all unordered lists. This can shift nav list items if there is any
   other margin being applied.
   ----------------------------------------------------------------------- */
.main-bar__menu,
.main-bar__menu ul,
.utility-bar__menu,
.utility-bar__menu ul,
.shift-menu,
.footer-links,
.membership-card__perks,
.financing-section__content ul {
  margin-left: 0 !important;
  list-style: none !important;
  padding-left: 0 !important;
}


/* -----------------------------------------------------------------------
   FIX 7 — MODAL
   Problem: Old CSS sets `.modal-content { background-color: #2c1466; }`
   (dark blue). The new design wants white.
   ----------------------------------------------------------------------- */
.modal-content {
  background: #fff !important;
  border-radius: 8px !important;
}


/* -----------------------------------------------------------------------
   FIX 8 — DESK-NAV / MOBILE-NAV SHOW/HIDE
   Ensure desktop nav always shows on ≥768px and mobile nav always shows
   on <768px, regardless of old CSS base rules.
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
  .desk-nav   { display: block !important; }
  .mobile-nav { display: none  !important; }
}
@media (max-width: 767px) {
  .desk-nav   { display: none  !important; }
  .mobile-nav { display: block !important; }
}


/* -----------------------------------------------------------------------
   FIX 9 — BODY PADDING
   If the old theme added top padding to body to compensate for a
   "position: fixed" header, remove it — sticky headers don't need it.
   ----------------------------------------------------------------------- */
body {
  padding-top: 0 !important;
  font-family: var(--font-body);
}


/* -----------------------------------------------------------------------
   FIX 10 — HERO SECTION
   Ensure hero min-height is visible and not clipped.
   The old `.site { overflow:hidden }` was causing the hero bg to clip.
   Also ensure the hero background image path is correct.
   NOTE: If hero-bg.webp is uploaded at a different path, update the URL
   in the rule below AND in the :root block around line 2133 of custom.css.
   ----------------------------------------------------------------------- */
.hero-static,
.hero-section .carousel-item {
  min-height: 560px !important;
  background-size: cover !important;
  background-position: center top !important;
}


/* -----------------------------------------------------------------------
   FIX 11 — SERVICE STRIP CHESS BAR
   Ensure the decorative chess-pattern bar at the top of the services
   section is visible (not hidden by overflow).
   ----------------------------------------------------------------------- */
.services-strip {
  overflow: visible !important;
}
.services-strip__chess-bar {
  display: block !important;
  width: 100% !important;
}


/* -----------------------------------------------------------------------
   FIX 12 — SECTION VISIBILITY
   Some sections use position:relative with z-index. If .site overflow
   was clipping them, this ensures they show.
   ----------------------------------------------------------------------- */
.why-us,
.emergency-band,
.usp-cards,
.reviews-section,
.addl-services,
.why-local,
.membership-section,
.financing-section,
.coupons-section,
.service-area,
.blog-section,
.closing-cta,
.badges-strip {
  position: relative;
}


/* -----------------------------------------------------------------------
   FIX 13 — FOOTER CTA BAND (the two-column call/schedule block)
   Old body .btn-primary/.btn-secondary styles can leak into footer CTA.
   ----------------------------------------------------------------------- */
.cta-band__call {
  display: flex !important;
  text-decoration: none !important;
}
.cta-band__schedule {
  display: flex !important;
}
.cta-band__label {
  color: #fff !important;
}
.cta-band__label--dark {
  color: var(--brand-navy-deep) !important;
}


/* -----------------------------------------------------------------------
   FIX 14 — MEMBERSHIP CARD RIBBON (ensure it's visible above dark bg)
   ----------------------------------------------------------------------- */
.membership-section__bg-chess,
.membership-section__bg-wash,
.membership-section__bg-glow {
  pointer-events: none;
}
.membership-section__head,
.membership-section__inspection,
.membership-section__grid,
.membership-section__foot {
  position: relative;
  z-index: 1;
}


/* -----------------------------------------------------------------------
   FIX 15 — SERVICE AREA MAP & BLOG CARDS
   Old CSS flex/grid resets may remove equal-height columns.
   ----------------------------------------------------------------------- */
.service-area__row {
  display: grid !important;
}
.blog-section__grid {
  display: grid !important;
}
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
}


/* -----------------------------------------------------------------------
   FIX 16 — CONTENT WRAPPER PADDING (66px white gap below header)
   The old theme added padding-top to #content to push content below the
   old position:fixed header. With sticky positioning, this creates a
   visible 66px gap between the header and the hero section.
   ----------------------------------------------------------------------- */
#content {
  padding-top: 0 !important;
}


/* -----------------------------------------------------------------------
   FIX 17 — HERO DUPLICATE BUTTONS
   The hero carousel slides have a .hero-subline div that outputs the ACF
   "content" field (which contains old-style .btn.btn-primary buttons).
   The PHP template also outputs a new .hero-cta-row below it, creating
   two sets of buttons. Hide the old .hero-subline buttons.
   ----------------------------------------------------------------------- */
.hero-subline {
  display: none !important;
}


/* -----------------------------------------------------------------------
   FIX 18 — HERO SECTION OVERFLOW
   .hero-section has overflow:hidden from the CSS which clips the
   Elfsight review badge widget before it can render.
   ----------------------------------------------------------------------- */
.hero-section {
  overflow: visible !important;
}
.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item {
  overflow: hidden;
}


/* -----------------------------------------------------------------------
   FIX 19 — HERO CAROUSEL TITLE FONT (.slider-header)
   PHP multi_slider layout outputs .slider-header for the hero headline.
   The original CSS only defines .hero-h1 with Oswald; .slider-header
   inherits body (Open Sans) instead.
   ----------------------------------------------------------------------- */
.slider-header {
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.45) !important;
  margin: 0 0 20px !important;
  max-width: 700px !important;
}


/* -----------------------------------------------------------------------
   FIX 20 — ADDL SERVICES H2 WRAPPER FONT
   h2.addl-services__h2 container inherits old body font rules.
   Force Oswald on the container so any ACF text without an inner span
   also renders with the display font.
   ----------------------------------------------------------------------- */
.addl-services__h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--brand-primary) !important;
}


/* -----------------------------------------------------------------------
   FIX 21 — UTILITY BAR TEXT COLOUR
   Old CSS cascades a dark body colour into utility bar child elements.
   Force the correct light colour on the badge/tagline text.
   ----------------------------------------------------------------------- */
.utility-bar__left,
.utility-bar__left * {
  color: rgba(255, 255, 255, 0.85) !important;

}


/* -----------------------------------------------------------------------
   FIX 22 — HERO TITLE ACCENT COLOUR — now handled via PHP inline style
   Keeping selector here as fallback for any CSS-only renders.
   ----------------------------------------------------------------------- */
.hero-h1__accent,
.hero-h1 span[style*="rgba(196"] {
  color: rgba(196, 160, 255, 0.90) !important;
}

/* -----------------------------------------------------------------------
   FIX 23 — LOGO SIZE (100px)
   ----------------------------------------------------------------------- */
.main-bar__logo {
  padding: 6px 0 !important;
}
.main-bar__logo img,
header .main-bar .main-bar__logo img,
header#masthead .main-bar__logo img {
  max-height: 150px !important;
  width: auto !important;
  display: block !important;
}

/* -----------------------------------------------------------------------
   FIX 24 — UTILITY BAR TAGLINES
   ----------------------------------------------------------------------- */
.utility-bar__divider {
  color: rgba(255, 255, 255, 0.30) !important;
  font-weight: 300 !important;
  padding: 0 4px !important;
}
.utility-bar__tagline {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-style: italic;
}

/* -----------------------------------------------------------------------
   FIX 25 — SERVICES STRIP HEADING UPPERCASE
   ----------------------------------------------------------------------- */
.services-strip__h2 {
  text-transform: uppercase !important;
}

/* -----------------------------------------------------------------------
   FIX 26 — HERO TITLE FONT SIZE (high-specificity + inline style in PHP)
   Belt-and-suspenders: PHP now writes inline style directly on the element
   which beats all CSS. This block covers any edge cases.
   ----------------------------------------------------------------------- */
.hero-section .hero-h1,
.hero-section .slider-header,
.hero-content .hero-h1,
.hero-content .slider-header,
.carousel-item .hero-h1,
.carousel-item .slider-header,
.hero-static .hero-h1,
.hero-static .slider-header {
  font-family: "Oswald", var(--font-display), sans-serif !important;
  font-size: clamp(3rem, 7vw, 5.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.0 !important;
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.50) !important;
  margin: 0 0 24px !important;
  max-width: 740px !important;
}

/* -----------------------------------------------------------------------
   FIX 27 — SERVICE TILE: CENTRED LAYOUT + HOVER-ONLY DESCRIPTION
   Design: icon circle + label centred, description hidden until hover.
   ----------------------------------------------------------------------- */

/* Centre icon and text inside each card */
.service-tile {
  align-items: center !important;
  text-align: center !important;
  min-height: 180px !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

.service-tile__ring {
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-tile__label {
  text-align: center !important;
  width: 100% !important;
}

/* Hide description and arrow by default */
.service-tile__desc,
.service-tile__arrow {
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.28s ease, max-height 0.35s ease, visibility 0s linear 0.28s !important;
}

/* Reveal on hover */
.service-tile:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.service-tile:hover .service-tile__desc,
.service-tile:hover .service-tile__arrow {
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 160px !important;
  transition: opacity 0.28s ease, max-height 0.35s ease, visibility 0s linear 0s !important;
}

/* SERVICE TILE — centre icon + label */
.service-tile {
  align-items: center !important;
  text-align: center !important;
}

.service-tile__ring {
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-tile__ring  svg{
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.04em;
}

.service-tile__ring  svg path{
  fill: var(--brand-accent);
}

.service-tile__label {
  text-align: center !important;
}

/* -----------------------------------------------------------------------
   FIX 28 — MAIN BAR HEIGHT (accommodate 100px logo)
   ----------------------------------------------------------------------- */
.main-bar {
  min-height: 90px !important;
}

/* =======================================================================
   END OF CRITICAL FIXES
   ======================================================================= */

/* -----------------------------------------------------------------------
   FIX 29 — USP CARDS: KEEP LIGHT THEME, FIX CENTRED ICON + TITLE
   Design: brand-paper bg, white cards with purple top-border, icon centred.
   ----------------------------------------------------------------------- */

.usp-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.usp-card__icon-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}

.usp-card__title,
.usp-card__desc {
  text-align: center !important;
}

/* -----------------------------------------------------------------------
   FIX 30 — USP GRID: FORCE 3 COLUMNS ON DESKTOP
   FIX 1 sets .hide-for-small-only { display:block !important } at >=768px,
   which clobbers display:grid. More-specific rule below wins.
   ----------------------------------------------------------------------- */

@media (min-width: 768px) {
  .usp-cards__row.hide-for-small-only {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}

/* -----------------------------------------------------------------------
   FIX 31 — REVIEWS: DARK OVERLAY + WHITE TEXT
   PHP inline style adds background-image + background-color to <section>.
   CSS adds the dark overlay pseudo-element and flips text to white.
   ----------------------------------------------------------------------- */

.reviews-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(20, 6, 46, 0.82) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.reviews-section__inner {
  position: relative !important;
  z-index: 1 !important;
}

.reviews-section__h2 {
  color: #fff !important;
  margin-bottom: 16px !important;
}

.reviews-section__h2 .accent-word {
  color: var(--brand-accent) !important;
}

.reviews-section__rating {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.reviews-section__score {
  font-size: 2rem !important;
  line-height: 1 !important;
  color: var(--brand-accent) !important;
}

.reviews-section__score-slash {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.reviews-section__count {
  color: rgba(255, 255, 255, 0.75) !important;
}

.reviews-section__stars {
  color: #f5c842 !important;
}

/* -----------------------------------------------------------------------
   FIX 32 — REVIEWS SECTION OVERFLOW (Elfsight lazy-load fix)
   .reviews-section has overflow:hidden in base CSS. Elfsight's lazy-load
   IntersectionObserver can't detect viewport entry inside overflow:hidden
   containers, so the widget never initialises. Mirror the same fix applied
   to .hero-section in FIX 18.
   ----------------------------------------------------------------------- */
.reviews-section {
  overflow: visible !important;
}

/* =============================================================
   FIX 35 — Service Area: heading fix + zip code checker
   ============================================================= */

/* Service area heading accent */
.service-area__h2 .accent-word {
  color: var(--brand-accent) !important;
}

/* Zip checker container */
.service-area__zip-check {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(199,181,242,0.25) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
}

/* Label */
.zip-check__label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--brand-accent) !important;
  margin: 0 0 6px !important;
}

.zip-check__label .icon-map-marker {
  margin-right: 5px !important;
}

/* Heading */
.zip-check__heading {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* Input + button row */
.zip-check__form {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.zip-check__input {
  flex: 1 !important;
  min-width: 120px !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  border: 2px solid rgba(199,181,242,0.35) !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.zip-check__input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

.zip-check__input:focus {
  border-color: var(--brand-accent) !important;
  background: rgba(255,255,255,0.15) !important;
}

.zip-check__btn {
  padding: 12px 20px !important;
  border-radius: 6px !important;
  border: none !important;
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}

.zip-check__btn:hover {
  background: var(--brand-navy) !important;
}

/* Result message */
.zip-check__result {
  margin-top: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  min-height: 24px !important;
}

.zip-result--yes {
  color: #6ee77f !important;
}

.zip-result--no {
  color: #f78080 !important;
}

.zip-result--warn {
  color: var(--brand-accent) !important;
}

.zip-result--yes .icon-check-circle,
.zip-result--no .icon-times-circle {
  margin-right: 5px !important;
}

/* =============================================================
   FIX 29 — USP: centred icon, light theme
   ============================================================= */
.usp-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.usp-card__icon-wrap { margin-left: auto !important; margin-right: auto !important; }
.usp-card__title, .usp-card__desc { text-align: center !important; }

/* FIX 30 — USP 3-col grid */
@media (min-width: 768px) {
  .usp-cards__row.hide-for-small-only {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}

/* FIX 31 — Reviews dark overlay + white text */
.reviews-section { position: relative !important; }
.reviews-section::before { content: "" !important; position: absolute !important; inset: 0 !important; background: rgba(20,6,46,0.82) !important; z-index: 0 !important; pointer-events: none !important; }
.reviews-section__inner { position: relative !important; z-index: 1 !important; }
.reviews-section__h2 { color: #fff !important; margin-bottom: 16px !important; }
.reviews-section__h2 .accent-word { color: var(--brand-accent) !important; }
.reviews-section__rating { flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px 14px !important; margin-top: 12px !important; margin-bottom: 0 !important; }
.reviews-section__score { font-size: 2rem !important; line-height: 1 !important; color: var(--brand-accent) !important; }
.reviews-section__score-slash { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 1.1rem !important; color: rgba(255,255,255,0.55) !important; }
.reviews-section__count { color: rgba(255,255,255,0.75) !important; }
.reviews-section__stars { color: #f5c842 !important; }

/* FIX 32 — Reviews overflow (Elfsight IntersectionObserver) */
.reviews-section { overflow: visible !important; }

/* FIX 33 — Financing list items inline bold */
.financing-section__content ul li { display: block !important; padding-left: 22px !important; position: relative !important; }
.financing-section__content ul li::before { position: absolute !important; left: 0 !important; top: 7px !important; }

/* FIX 34 — Coupons: darker cards, dollar sign, terms */
.coupons-section { background: #fff !important; }
.coupon-tile { background: var(--brand-navy) !important; }
.coupon-tile__dollar { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 2rem !important; line-height: 1 !important; color: #fff !important; align-self: flex-start !important; padding-top: 0.3em !important; }
.coupon-tile__amt-row { align-items: baseline !important; }
.coupon-tile__terms { font-family: var(--font-body) !important; font-size: 0.8rem !important; color: rgba(255,255,255,0.65) !important; margin: 6px 0 0 !important; line-height: 1.5 !important; }
.coupons-section__h2 { color: var(--brand-navy-deep) !important; }

/* =============================================================
   FIX 36 — Closing CTA + Badges strip spacing
   ============================================================= */

/* Tighter closing CTA to match mockup */
.closing-cta {
  padding: 28px 40px !important;
}

/* Badges strip: collapse to minimal if content not visible */
.badges-strip {
  padding: 0 !important;
  min-height: 0 !important;
  border-top: none !important;
}

.badges-strip__inner {
  padding: 0 !important;
  min-height: 0 !important;
}

/* Hide badges-strip entirely if inner is empty or only has broken images */
.badges-strip:not(:has(.badge-item img:not([src=""]))) {
  display: none !important;
}

/* Fallback: if has_rows returns true but no visible content, at least collapse padding */
.badge-item:empty {
  display: none !important;
}

/* =============================================================
   FIX 37 — Remove WordPress #content wrapper bottom padding
   (style.css applies padding-bottom: 3.75rem to #content)
   ============================================================= */
#content,
#content.site-content {
  padding-bottom: 0 !important;
}

/* =============================================================
   FIX 38 — Footer redesign: brand col, column order, copyright
   ============================================================= */

/* Brand col wider than others */
.footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
}

/* Brand description */
.footer-brand-desc {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 14px 0 16px !important;
}

/* Contact detail list in brand col */
.footer-brand-details {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-brand-details li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.75) !important;
}

.footer-brand-details li [class^="icon-"] {
  color: var(--brand-accent) !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

.footer-brand-details li a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.footer-brand-details li a:hover {
  color: var(--brand-accent) !important;
}

/* "Follow Us" label */
.footer-social-heading {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--brand-accent) !important;
  margin-bottom: 10px !important;
}

/* Financing note under We Accept */
.footer-financing-note {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.50) !important;
  margin: 12px 0 0 !important;
  line-height: 1.55 !important;
}

/* Location company name bold */
.footer-address strong {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Copyright: two-part with divider */
.footer-copyright {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-copyright__divider {
  color: rgba(255,255,255,0.20) !important;
}

/* Responsive: stack to 2-col then 1-col */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   FIX 39 — Blog section: lined eyebrow + accent heading
   ============================================================= */

/* Lined eyebrow variant — "—— FROM THE BLOG ——" */
.eyebrow--lined {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
}

.eyebrow--lined::before,
.eyebrow--lined::after {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--brand-primary) !important;
  flex-shrink: 0 !important;
}

/* Blog h2 accent word — purple to match other sections */
.blog-section__h2 .accent-word {
  color: var(--brand-primary) !important;
}

/* Ensure h2 size matches mockup */
.blog-section__h2 {
  font-size: 3rem !important;
  line-height: 1.05 !important;
}

/* =============================================================
   FIX 40 — Footer bg: override theme style.css specificity
   (body:not(.theme-preset-active) footer#colophon wins over .site-footer)
   ============================================================= */
footer#colophon,
footer#colophon.site-footer,
body:not(.theme-preset-active) footer#colophon {
  background: var(--brand-navy-deep) !important;
  background-color: var(--brand-navy-deep) !important;
  color: rgba(255,255,255,0.80) !important;
  border-top: 8px solid var(--brand-primary) !important;
}

footer#colophon a,
footer#colophon .footer-col__heading,
footer#colophon .footer-brand-details li {
  color: inherit !important;
}

/* =============================================================
   FIX 41 — Footer bg: max-specificity override (belt + suspenders)
   ============================================================= */
html body #page footer#colophon,
html body #page footer#colophon.site-footer,
html body:not(.theme-preset-active) #page footer#colophon {
  background: #14062e !important;
  background-color: #14062e !important;
  color: rgba(255,255,255,0.80) !important;
}

/* Also override the theme's colophon font-size reset */
#colophon,
#colophon * {
  box-sizing: border-box;
}

/* Ensure footer text colours aren't overridden by theme */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer a,
.site-footer li,
.site-footer address {
  color: rgba(255,255,255,0.75) !important;
}

.site-footer .footer-col__heading {
  color: var(--brand-accent) !important;
}

.site-footer a:hover {
  color: var(--brand-accent) !important;
}

.site-footer .footer-google-link,
.site-footer .footer-social-heading {
  color: var(--brand-accent) !important;
}

/* =============================================================
   FIX 42 — We Accept image + social icons in right col
   ============================================================= */
.footer-we-accept img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.footer-social-heading {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--brand-accent) !important;
  margin: 16px 0 10px !important;
}

/* =============================================================
   FIX 44 — Horizontal overflow + header white background
   1. header#masthead base CSS forces background:#fff — override it
   2. Use html overflow-x:hidden only (body:hidden breaks sticky)
   3. Remove clip approach (poor browser support) 
   ============================================================= */

/* Kill the white header background */
header#masthead,
header#masthead.site-header,
.site-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* html-level overflow-x kill — most reliable, doesn't break sticky */
html {
  overflow-x: hidden !important;
}

/* Ensure .site doesn't introduce horizontal scroll */
.site,
#page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Full-width desk-nav so no gap behind header */
.desk-nav {
  width: 100% !important;
}

/* Utility bar and main bar both full width */
.utility-bar,
.main-bar {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =============================================================
   FIX 45 — Responsive header: push mobile breakpoint to 992px
   ============================================================= */

@media (min-width: 992px) {
  .desk-nav   { display: block  !important; }
  .mobile-nav { display: none   !important; }
}
@media (max-width: 991px) {
  .desk-nav   { display: none   !important; }
  .mobile-nav { display: block  !important; }
  .main-bar__nav{
    display: none!important;
  }
  
}
.utility-bar, .utility-bar__left, .utility-bar__right,
.main-bar, .main-bar__logo, .main-bar__nav, .main-bar__actions { min-width: 0 !important; }
section, .section-wrap, .container, .container-fluid,
.hero-content, .hero-content--carousel, .cta-band, .cta-band__grid { max-width: 100% !important; box-sizing: border-box !important; }

@media (min-width: 992px) and (max-width: 1199px) {
  .main-bar__logo img {max-width: 180px !important;width: 110px !important;}
  .main-bar__menu > li > a {font-size: 0.71rem !important;padding: 12px 10px !important;letter-spacing: 0 !important;}
  .main-bar__schedule-btn { font-size: 0.72rem !important; padding: 10px 12px !important; white-space: nowrap !important; }
  .utility-bar__tagline { display: none !important; }
  .utility-bar__left { font-size: 0.68rem !important; }
.main-bar{
  padding: 0 .41em;
}

  .insideimage {
    padding: 8% 4% 2% 4%;
    margin-top: 16%;
}

}
@media (min-width: 1200px) and (max-width: 1400px) {
  .main-bar__logo img {max-width: 175px !important;}
  .main-bar__menu > li > a {font-size: 0.71rem !important;padding: 14px 14px !important;}
  .main-bar__schedule-btn { font-size: 0.8rem !important; padding: 11px 16px !important; }
  .main-bar{
    padding: 0em;
  }
}

.mobile-nav { background: var(--brand-primary) !important; width: 100% !important; box-sizing: border-box !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; }
.mobile-nav__bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; background: var(--brand-primary) !important; }
.mobile-nav__logo img {max-width: 170px !important;width: auto !important;height: auto !important;}
.mobile-nav__hamburger { color: #fff !important; background: transparent !important; border: none !important; font-size: 1.4rem !important; padding: 4px 8px !important; flex-shrink: 0 !important; }
.mobile-nav__phone-icon {color: #52269a !important;font-size: 1.3rem !important;flex-shrink: 0 !important;}
.mobile-nav__quick-nav { display: flex !important; background: var(--brand-navy) !important; overflow-x: auto !important; scrollbar-width: none !important; }
.mobile-nav__quick-nav::-webkit-scrollbar { display: none !important; }
.mobile-nav__quick-link { flex-shrink: 0 !important; padding: 8px 14px !important; font-family: var(--font-display) !important; font-size: 0.68rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: rgba(255,255,255,0.85) !important; border-right: 1px solid rgba(255,255,255,0.12) !important; white-space: nowrap !important; }
.mobile-nav__quick-link:hover { color: var(--brand-accent) !important; }

@media (max-width: 479px) {
  .mobile-nav__logo img { max-width: 95px !important; }
  .hero-content { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-usps { flex-direction: column !important; gap: 8px !important; }
  .hero-cta-row { flex-direction: column !important; gap: 10px !important; }
  .hero-cta-row a, .hero-cta-row .btn-primary-brand, .hero-cta-row .btn-outline-white { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 991px) { .hero-content {padding: 7em 4em 5em 4em!important;margin-top: 5%;} }
@media (max-width: 767px) { .cta-band__grid { grid-template-columns: 1fr !important; } }


/* =============================================================
   FIX 46 — Logo height + carousel overflow + flex hardening
   ============================================================= */

.main-bar__logo img,
header .main-bar .main-bar__logo img,
header#masthead .main-bar__logo img,
header#masthead .main-bar .main-bar__logo img {max-height: 155px !important;width: auto !important;display: block !important;}
.main-bar { min-height: 90px !important; max-height: none !important; }
#heroCarousel, .carousel, .carousel-inner { overflow: hidden !important; max-width: 100% !important; }
.hero-section { overflow: hidden !important; }
.desk-nav::before, .desk-nav::after { content: '' !important; display: table !important; width: 0 !important; height: 0 !important; clear: both !important; }
header#masthead::before, header#masthead::after { content: '' !important; display: block !important; width: 0 !important; height: 0 !important; }
.main-bar { flex-wrap: nowrap !important; }
.main-bar__logo {flex: 20% !important;flex-shrink: 0 !important;}
.main-bar__nav { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
.main-bar__menu {width: 100% !important;overflow: hidden !important;}
.main-bar__actions {flex: 40% !important;flex-shrink: 0 !important;}
#page, .site, header#masthead, .desk-nav, .utility-bar, .main-bar { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; }


/* =============================================================
   COUPON PAGE — Knight Plumbing brand cards
   ============================================================= */

.coup-page .col-lg-6, .coup-page .col-md-6 { margin: 0 0 28px 0 !important; padding: 10px !important; }
.coup-page .row[data-equalizer] { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }

.coupon.max-coupon {
  transform: none !important;
  background: #14062e !important;
  background-color: #14062e !important;
  outline: 2px dashed rgba(199,181,242,0.55) !important;
  outline-offset: -14px !important;
  border: none !important;
  border-radius: 4px !important;
  border-top: 4px solid #51269a !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 36px 32px 28px !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  color: #fff !important;
}
.coupon.max-coupon .price {
  font-family: 'Oswald', sans-serif !important;
  font-size: 3.6rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #c7b5f2 !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.coupon.max-coupon .price span { font-size: 0.6em !important; color: #c7b5f2 !important; position: relative !important; top: -0.3em !important; }
.coupon.max-coupon .price span:last-child { top: 0 !important; }
.coupon.max-coupon .offer { font-size: 1.1rem !important; font-weight: 600 !important; color: rgba(255,255,255,0.90) !important; text-transform: none !important; line-height: 1.3 !important; margin: 0 0 22px !important; flex: 1 !important; }
.coupon.max-coupon .print-block { width: 100% !important; margin-bottom: 0 !important; }
.coupon.max-coupon .print-block .btn,
.coupon.max-coupon .print-block .btn-primary,
.coupon.max-coupon .btn { display: block !important; width: 100% !important; background: #51269a !important; background-color: #51269a !important; color: #fff !important; border: none !important; border-radius: 3px !important; font-family: 'Oswald', sans-serif !important; font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 14px 20px !important; cursor: pointer !important; margin-bottom: 0 !important; }
.coupon.max-coupon .print-block .btn:hover,
.coupon.max-coupon .btn:hover { background: #c7b5f2 !important; background-color: #c7b5f2 !important; color: #14062e !important; }
.coupon.max-coupon > p { font-size: 0.72rem !important; color: rgba(255,255,255,0.45) !important; text-transform: none !important; letter-spacing: 0.01em !important; line-height: 1.5 !important; margin: 16px 0 0 !important; text-align: center !important; }
.coup-page h1 { font-family: 'Oswald', sans-serif !important; color: #2c1466 !important; font-size: 2.8rem !important; margin-bottom: 8px !important; }
.coup-page .text-highlight { color: rgba(0,0,0,0.55) !important; font-size: 1.05rem !important; margin-bottom: 2em !important; }
@media (max-width: 767px) {
  .coup-page .col-sm-12 { padding: 8px !important; }
  .coupon.max-coupon { padding: 28px 24px 22px !important; outline-offset: -10px !important; }
  .coupon.max-coupon .price { font-size: 2.8rem !important; }
}


/* =============================================================
   FIX 47 — Dropdown menus broken by overflow:hidden on nav
   
   FIX 46 added overflow:hidden to .main-bar__nav and .main-bar__menu
   to stop flex blowout. That also clips dropdown sub-menus so they
   never appear. Revert both to overflow:visible — min-width:0 alone
   is sufficient to prevent the flex blowout.
   ============================================================= */

.main-bar__nav {
  overflow: visible !important;
  background: #51259a;
  border-top: 1px solid #ffffff4d;
}

.main-bar__menu {
  overflow: visible !important;
}

/* Ensure dropdown sub-menu is above everything */
.main-bar__menu li ul,
.main-bar__menu .sub-menu {
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Also ensure the main-bar itself doesn't clip the dropdown */
.main-bar {
  overflow: visible !important;
}

/* But keep horizontal overflow contained on the page level */
.desk-nav {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.main-bar .btn-outline-white{
  margin: auto;
  color: white;
}

.main-bar .btn-outline-white:hover {
    background: #fff;
    color: var(--brand-primary) !important;
    border-color: #fff;
}


/* =============================================================
   FIX 48 — Map iframe: clip top to hide Google Maps "Craig Jacobs"
   
   The Google Maps embed shows a location card with the account
   name at the top. Clip it by:
   1. Giving .map-box a fixed height with overflow:hidden
   2. Pushing the iframe up ~55px so the card header is above
      the visible area
   3. Making the iframe taller to compensate
   ============================================================= */

.map-box {
  overflow: hidden !important;
  position: relative !important;
  height: 380px !important;
  border-radius: 4px !important;
}

.map-box iframe {
  display: block !important;
  width: 100% !important;
  height: calc(100% + 55px) !important;
  margin-top: -55px !important;
  border: none !important;
}

/* Responsive map height */
@media (max-width: 767px) {
  .map-box {
    height: 300px !important;
  }
}


/* =============================================================
   FIX 49 — Dropdown solid background + hover
   The sub-menu background was transparent. Apply solid fill
   to ul, li, AND anchor so no gaps show through.
   ============================================================= */

.main-bar__menu li > ul,
.main-bar__menu li > .sub-menu {
  background: #2c1466 !important;
  background-color: #2c1466 !important;
}

.main-bar__menu li > ul > li,
.main-bar__menu .sub-menu > li {
  background: #2c1466 !important;
}

.main-bar__menu li > ul > li > a,
.main-bar__menu .sub-menu > li > a {
  background: #2c1466 !important;
  color: rgba(255,255,255,0.90) !important;
  display: block !important;
  padding: 12px 20px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.main-bar__menu li > ul > li:last-child > a,
.main-bar__menu .sub-menu > li:last-child > a {
  border-bottom: none !important;
}

.main-bar__menu li > ul > li > a:hover,
.main-bar__menu .sub-menu > li > a:hover {
  background: #51269a !important;
  background-color: #51269a !important;
  color: #c7b5f2 !important;
}


/* =============================================================
   FIX 50 — Dropdown full fix: correct header class + full-width
             hover background

   The live header uses header-bc206551.php which outputs the nav
   as ul.main-bar__menu inside nav.main-bar__nav. All dropdown
   CSS targets this class.

   Three issues resolved:
   1. overflow clipping on header/desk-nav cuts off the dropdown
   2. dropdown hidden by default, shown on hover with solid bg
   3. sub-menu items/links have zero padding on ul/li so the
      hover colour fills edge-to-edge
   ============================================================= */

/* Stop any ancestor from clipping the dropdown */
header#masthead,
.desk-nav,
.main-bar__nav,
.rnavigation-full,
.main-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Anchor each top-level item for absolute dropdown positioning */
.main-bar__menu > li.menu-item-has-children,
.main-nav .menu-item-has-children {
  position: relative !important;
}

/* Hide sub-menu by default */
.main-bar__menu .menu-item-has-children .sub-menu,
.main-bar__menu .menu-item-has-children > .sub-menu,
.main-nav .menu-item-has-children .sub-menu,
.main-nav .menu-item-has-children > .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 999999 !important;
  min-width: 240px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: #2c1466 !important;
  background-color: #2c1466 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important;
  flex-direction: column !important;
}

/* Show on hover */
.main-bar__menu .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:hover > .sub-menu {
  display: flex !important;
}

/* Sub-menu list items: zero padding so anchor fills full width */
.main-bar__menu .sub-menu > li,
.main-nav .sub-menu > li {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #2c1466 !important;
  display: block !important;
  list-style: none !important;
}

.main-bar__menu .last-column.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    height: auto;
    top: 100%;
    right: 0%;
    left: auto !important;
    display: block;
    animation: fadeIn .2s;
    font-size: .88em;
    text-align: left;
    left: auto;
}


/* Heating Tab 2 columns Sub menu */

.main-bar__menu  .double-column.menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #e1e1e1;
  list-style: none!important;
  margin-left: 0.0rem;
  width: 29em;
  height: 0;
  display: none;
  text-align: left;
  z-index: 99;
} 




.main-bar__menu .double-column.menu-item-has-children:hover .sub-menu{
  opacity: 1;
  height: auto;
  top: 100%;
  left: 0%;
  display: block!important;
  animation: fadeIn .2s;
}

.main-bar__menu  .double-column.menu-item-has-children .sub-menu>li{
  width: 49%!important;
  float: left;
  padding: 0%;
  display: list-item!important;
} 

.main-bar__menu  .double-column.menu-item-has-children .sub-menu>li.full-sub{
  width: 100%;
  float: left;
  padding: 0%;
} 

.main-bar__menu  .double-column .sub-menu .full-sub a {
    padding: 0.3em 0.6em 0.7em 0.6em;
    border-right: 1px solid #00000014;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

.main-bar__menu  .double-column .sub-menu .full-sub a span{
   font-size: 1.8em;
   position: relative;
   top: 0.2em;
}

.last-cool{
  float: right!important;
}

.double-column .sub-menu a{
  padding: 0.9em 0.6em 0.9em 0.7em;
  border-right: 1px solid #00000014;
}


.main-bar__menu  .double-column-l.menu-item-has-children .sub-menu{
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  background: #006ee3;
  list-style: none;
  margin-left: 0.0rem;
  width: 410%;
  height: 0;
  display: none;
  text-align: left;
  z-index: 99;
} 

.main-bar__menu  .double-column-l.menu-item-has-children:hover .sub-menu{
  opacity: 1;
  height: auto;
  top: 100%;
  right: 0%;
  display: block;
  left: auto;
  animation: fadeIn .2s;
}

.main-bar__menu  .double-column-l.menu-item-has-children .sub-menu>li{
  width: 50%;
  float: left;
  padding: 0%;
} 


/* Sub-menu anchors: full-width block with padding for click area */
.main-bar__menu .sub-menu > li > a,
.main-bar__menu .sub-menu > li > a:link,
.main-bar__menu .sub-menu > li > a:visited,
.main-nav .sub-menu > li > a,
.main-nav .sub-menu > li > a:link,
.main-nav .sub-menu > li > a:visited {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 20px !important;
  background: #2c1466 !important;
  background-color: #2c1466 !important;
  color: rgba(255,255,255,0.90) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  text-decoration: none !important;
}

/* Remove border on last item */
.main-bar__menu .sub-menu > li:last-child > a,
.main-nav .sub-menu > li:last-child > a {
  border-bottom: none !important;
}

/* Hover state */
.main-bar__menu .sub-menu > li > a:hover,
.main-nav .sub-menu > li > a:hover {
  background: #51269a !important;
  background-color: #51269a !important;
  color: #c7b5f2 !important;
}


/* =============================================================
   FIX 51 — Service area city chips redesign
   Makes each city a card with 2×2 service link grid,
   2-column scrollable container, map column balanced.
   ============================================================= */

/* Balanced left/right split — map slightly smaller */
.service-area__row {
  grid-template-columns: 1.15fr 1fr !important;
  gap: 36px !important;
}

/* Map: slightly shorter to align with left column */
.service-area__map-frame {
  height: 460px !important;
}

/* ---- City chips container: 2-col scrollable grid ---- */
.service-area__cities {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  max-height: 370px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin-bottom: 20px !important;
  padding-right: 6px !important;
  flex-wrap: unset !important;
  /* Firefox scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: #51269a rgba(255,255,255,0.08) !important;
}

/* Chrome/Safari scrollbar */
.service-area__cities::-webkit-scrollbar { width: 4px !important; }
.service-area__cities::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 4px !important;
}
.service-area__cities::-webkit-scrollbar-thumb {
  background: #51269a !important;
  border-radius: 4px !important;
}

/* ---- Each city card ---- */
.city-chip {
  display: block !important;
  background: rgba(0,0,0,0.22) !important;
  border: none !important;
  border-left: 3px solid #51269a !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 12px 12px 10px !important;
  transition: background 0.2s ease !important;
  cursor: default !important;
}

.city-chip:hover {
  background: rgba(81,38,154,0.28) !important;
}

/* City name row */
.city-chip__name {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 7px !important;
}

.city-chip__icon {
  color: #c7b5f2 !important;
  font-size: 0.65rem !important;
  flex-shrink: 0 !important;
}

.city-chip__name strong {
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
}

/* Service links: 2×2 grid so they never squash into one cramped row */
.city-chip__services {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px 4px !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.city-chip__services a {
  display: block !important;
  color: rgba(199,181,242,0.75) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.5 !important;
  border-left: 1px solid rgba(199,181,242,0.20) !important;
  padding-left: 5px !important;
}

.city-chip__services a:hover {
  color: #fff !important;
  border-left-color: #c7b5f2 !important;
}

/* ---- Mobile ---- */
@media (max-width: 991px) {
  .service-area__row {
    grid-template-columns: 1fr !important;
  }
  .service-area__map-frame {
    height: 320px !important;
  }
}

@media (max-width: 575px) {
  .service-area__cities {
    grid-template-columns: 1fr !important;
    max-height: 280px !important;
  }
}

@media (max-width: 767px) {
    #mobile-usp1 .carousel-inner,
    #usp-group2-car .carousel-inner {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }
    #mobile-usp1 .carousel-item,
    #usp-group2-car .carousel-item {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        float: none !important;
        width: 100% !important;
        margin-bottom: 1rem;
    }
    #mobile-usp1 .carousel-control-prev,
    #mobile-usp1 .carousel-control-next,
    #usp-group2-car .carousel-control-prev,
    #usp-group2-car .carousel-control-next {
        display: none !important;
    }
    #mobile-usp1 .usp-blk,
    #usp-group2-car .usp-blk {
        height: auto !important;
        min-height: 160px;
        padding: 1.5em;
    }
}

header#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.admin-bar header#masthead {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header#masthead {
        top: 46px !important;
    }
}


@media (max-width: 767px) {
    .insideimage .slider-usp .usp-box {
        height: auto !important;
        min-height: 70px;
        padding-bottom: 0.8em;
    }
    .insideimage .slider-usp .usp-box p {
        position: relative !important;
        bottom: auto !important;
        margin-top: 0.3em;
    }
    .insideimage .slider-usp {
        margin-bottom: 1.5rem;
    }
}