/* =========================
   ROOT DESIGN TOKENS
   ========================= */
:root{
  /* Core palette */
  --clr-primary: #F2293A;        /* brand primary */
  --clr-primary-700: #373737;    /* dark gray (hover/heading) */
  --clr-accent: #5864ff;         /* accent/cta */
  --clr-link: #F2293A;           /* default link color */
  --clr-black: #000000;
  --clr-white: #ffffff;

  /* Neutrals */
  --clr-gray-900: #151414;
  --clr-gray-800: #3d3d3d;
  --clr-gray-700: #4d4d4d;
  --clr-gray-600: #6b6b6b;
  --clr-gray-500: #ababab;
  --clr-gray-400: #cdcdcd;
  --clr-gray-300: #dfdfdf;
  --clr-gray-200: #fafafa;

  /* Brand highlight(s) used in content */
  --clr-brand-red: #84241e;

  /* Effects */
  --shadow-hero: 0 1px 10px var(--clr-black);
  --shadow-img: 2px 4px 7px 0 var(--clr-black);
  --shadow-img-strong: 5px 6px 5px 0 var(--clr-gray-900);

  /* Radii */
  --radius-sm: 5px;
  --radius-md: 10px;

  /* Sizing */
  --container-max: 128rem;

  /* Sticky/contact bar bg */
  --sticky-bg: #cdcdcdb0;
}

/* =========================
   ORIGINAL STRUCTURE (unchanged selectors)
   ========================= */

h1, h2 { font-weight: 600 }

#hero .content h1 small, #hero .content p{
  color: var(--clr-white);
  -webkit-text-stroke: 1px var(--clr-black)
}

.group:after, .row:after { clear: both }

.btn.blue:hover, .servicBTN:hover, .contactColumn a.fa{
  background-color: var(--clr-primary-700);
  border: 1px solid var(--clr-primary-700);
  color: var(--clr-white);
}

.btn.blue, .servicBTN, a.btn{
  background-color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.btn.outline{
  background-color: var(--clr-white) !important;
  color: var(--clr-primary) !important;
  border: 1px solid var(--clr-primary);
}

.btn.outline:hover{
  background-color: var(--clr-white) !important;
  color: var(--clr-primary-700) !important;
  border: 1px solid var(--clr-primary-700);
}

.cBTN{
  background-color: var(--clr-accent) !important;
  background: none;
  height: unset;
  padding: 10px;
  max-width: 175px;
  border-radius: var(--radius-md);
  width: 100%;
  margin: 0px auto;
  border: 1px solid var(--clr-accent);
  box-shadow: none;
}

.cBTN:hover{
  background-color: var(--clr-primary-700) !important;
  border: 1px solid var(--clr-primary-700);
  background: none;
}

p#accredDesc1, p#accredDesc2{
  float: right;
  font-size: 1.4rem
}

*{ box-sizing: border-box }

select{
  -webkit-appearance: none !important;
  background-color: var(--clr-gray-200);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: 97% center;
  border: 1px solid #ccc;
  padding: .5rem;
  font-size: 1.875rem;
  border-radius: 0;
  height: 3.5125rem;
  max-width: 500px
}

input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea{
  -webkit-appearance: none;
  background-color: var(--clr-white);
  font-family: inherit;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  color: rgba(0, 0, 0, .75);
  display: block;
  font-size: 1.875rem;
  margin: 0 0 1rem;
  padding: .5rem;
  height: 3.5125rem;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: box-shadow .45s, border-color .45s ease-in-out
}

.bulletedList, .bulletedList li{
  color: var(--clr-black);
  list-style-type: disc !important
}

nav #navigation > li > ul > li:hover > a, nav #navigation > li > ul > li > ul > li:hover > a{
  color: var(--clr-primary-700)
}

h1{ font-size: 3.6rem }

h2{
  font-size: 3.2rem;
  color: var(--clr-primary-700)
}

h3{
  font-size: 2.5rem;
  color: var(--clr-accent);
  font-weight: 500
}

.contactColumn h3 a{
  color: var(--clr-primary);
  font-size: 1em;
  font-weight: 600
}

.contactColumn h3{
  color: var(--clr-black);
  font-size: 1em;
  font-weight: 600
}

.contactColumn a{ font-weight: 400 }

.contactColumn a.fa{
  font-weight: 900;
  padding: 30px;
  border-radius: 50%;
  color: var(--clr-white);
  min-width: 40px
}

a.fa.fa-map-marker.fa-2x{ width: 100px }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small{
  font-size: 60%;
  color: inherit;
  line-height: 0
}

nav #navigation > li > a{ font-size: 1.2rem }

#sliderContent{
  padding: 30px;
  border-radius: var(--radius-sm)
}
#sliderContent img{
  max-width: 300px;
  margin-bottom: 10px
}

#hero .content h1{
  text-align: center;
  font-size: 7.2rem;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--clr-black)
}
#hero .content h1 small{ -webkit-text-fill-color: var(--clr-white) }

#hero .content p{
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  max-width: 675px
}

#hero .content .engines li img{ max-height: 75px }

.headline:before{
  content: "";
  display: flex;
  width: calc(100% - 4rem);
  border-bottom: 3px solid var(--clr-primary-700);
  position: absolute;
  z-index: 0
}

.group:after, .group:before, .row:after{
  content: "";
  display: table
}

.headline{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2rem
}
.headline h2{
  padding: 0 3rem;
  z-index: 0;
  background-color: var(--clr-white)
}

.hCont{
  max-width: 1125px;
  margin: 0 auto;
  padding: 20px
}

.bulletedList, .contentColumn .bulletedList li{
  box-sizing: border-box;
  margin-bottom: 0;
  font-family: Poppins, Arial, Helvetica, sans-serif
}

.hCont p{ margin-bottom: 1.5em }

footer .upper-footer{
  background-color: var(--clr-white);
  border-top: 2px solid var(--clr-primary);
  border-bottom: 2px solid var(--clr-primary);
}
footer .upper-footer .content-area > li.callout{ margin: 0rem 0; }
footer .upper-footer .content-area > li.info a:hover, nav #navigation > li:hover{
  border-bottom: 2px solid var(--clr-primary)
}

.footerLogo{ max-width: 325px; }

.callout{ word-break: keep-all }

#quadImage, #quadImage .content{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#quadImage .content .col.half h1{
  width: 100%;
  font-size: 3.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-black);
  margin-bottom: 1rem
}
#quadImage .content .col.half h2{
  word-break: keep-all;
  font-size: 3.2rem;
  color: var(--clr-primary-700)
}

.bulletedList{
  margin-top: 0;
  font-size: 0.8em;
  background-color: transparent;
  margin-left: 1em
}

.prodTitle{
  font-size: 1.55em;
  color: var(--clr-brand-red);
  margin-bottom: 10px;
  -webkit-text-stroke: transparent !important;
  text-align: left !important
}

#gallery .content .gallery, .accred-item-left, .contactColumn, p#accredDesc1, p#accredDesc2, p#accredImg1, p#accredImg2, p.hours{
  text-align: center
}

#gallery .content .gallery li a.btn:after, #servicesTabs .content .service-tab-content .text .btn:after{
  content: '\f061';
  font-family: 'FontAwesome' !important;
  font-weight: 900;
  margin-left: 5px;
  display: inline-block;
}

.prod_imgconbox{ width: 100% !important; }

.prodContainer ul li{
  list-style-position: outside !important;
  margin-bottom: 5px !important;
  list-style-type: disc !important;
  margin-left: 8px
}

#_ctl1_ContentPane ul li{
  list-style-position: outside;
  margin-bottom: 5px
}

#panel2-1 > div > div.large-10.columns > div > div > ul > li{
  list-style-type: disc !important;
  list-style-position: outside;
  margin-bottom: 5px;
}

.prodContainer{
  margin: 0 auto;
  max-width: 1190px
}
.prodContainer div.row{ margin-top: 30px }

.prodColumn1{
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px
}
.prodColumn1 img{
  max-width: 250px;
  width: 100%
}
.prodColumn2{
  float: left;
  width: 75%;
  padding: 10px;
  height: 300px
}

.contentColumn{
  float: left;
  width: 50%;
  padding: 10px;
  max-height: 420px
}

#contentColumn1, #prodColumn1{
  float: left;
  width: 75%;
  padding: 10px;
  max-height: 100%
}

#contentColumn1 img, #contentColumn2 img, #prodColumn1 img, .contentColumn img{
  box-shadow: var(--shadow-img);
  border-radius: var(--radius-sm);
  width: 100%
}

#contentColumn2{
  float: right;
  width: 25%;
  padding: 10px;
  max-height: 100%
}

#prodRow{ margin: 25px 0 }

#prodColumn2 img{
  box-shadow: var(--shadow-img);
  border-radius: 0;
  width: 100%
}
#prodColumn2{
  float: left;
  width: 25%;
  padding: 10px;
  max-height: 100%
}

.contentColumn .bulletedList li{
  margin-top: 0;
  color: var(--clr-black) !important;
  text-shadow: none !important;
  font-weight: 600
}

.colContact{
  display: block;
  float: left;
  margin: 1% 0
}
.colContact:first-child{ margin-left: 0 }

.group{ zoom: 1 }

#_ctl1__ctl0_HtmlHolder, #pageContent, .span_2_of_2{ width: 100% }

.span_1_of_2{
  width: 625px;
  max-width: 100%
}

footer .copyright{
  color: var(--clr-white);
  margin-top: 4rem
}

footer .upper-footer .content-area > li.info li{ padding: 0 }

p.hours{ margin: 15px 35px }

.header{ max-width: var(--container-max); }

header{ box-shadow: var(--shadow-hero) }

.accreditation, .slide-form-top .input-wrapper{
  -webkit-box-shadow: rgb(0 0 0 / 11%) 0 3px 11px 0 !important
}

.header img{ max-width: 175px }

footer .upper-footer .content-area > li.contact .footer-phone{ font-size: 1.8rem }

footer .upper-footer .content-area > li.info h3{
  font-size: 3rem;
  font-weight: 700;
  margin-top: 0
}

p.footer-email{ font-size: .9em }

.productBox{
  border: 2px solid var(--clr-gray-500);
  background-color: var(--clr-white);
  width: 40%;
  padding: 20px;
  display: block;
  margin: 0 auto
}
.productBox tr td{
  margin: 0px auto;
  text-align: center;
}

#gallery .content .info h2:after{ background-color: var(--clr-primary) }

a{
  color: var(--clr-link);
  text-decoration: none;
  line-height: inherit;
  font-weight: 600
}
a:hover{ color: var(--clr-primary-700) }

.servicBTN{
  padding: 10px;
  border: 2px solid var(--clr-black);
  border-radius: var(--radius-md);
  color: var(--clr-white);
  font-size: .85em
}
.servicBTN:hover{
  padding: 10px;
  background-color: var(--clr-primary);
  border: 2px solid var(--clr-black);
  border-radius: var(--radius-md);
  color: var(--clr-primary-700)
}

#gallery .content .gallery li a:not(.btn){
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--clr-black);
  -webkit-text-fill-color: var(--clr-white);
  font-size: 3.2rem;
  paint-order: stroke fill !important;	
}

#gallery .content .gallery li a.btn{
  background-color: var(--clr-white) !important;
  border-color: var(--clr-black);
  color: var(--clr-black) !important
}
#gallery .content .gallery li a.btn:hover{
  background-color: var(--clr-primary-700) !important;
  border-color: var(--clr-primary-700);
  color: var(--clr-white) !important
}

#gallery .content .gallery li a{
  color: var(--clr-white);
  text-align: center
}
#gallery .content .gallery li{
  width: calc((100% - 2rem)/ 2);
  paint-order: stroke fill !important	
}
#gallery .content .gallery li a.btn{
  max-width: 100%;
  min-width: 215px
}

#hero{
  max-height: 900px;
  background-size: cover;
  background-position: center;
  padding: 5rem 2rem
}
#hero .content .engines{ margin-top: 10rem }
#hero .content .engines li{
  height: 8.7rem;
  flex: 1 1 0;
  padding: 1rem;
  border-left: none;
  border-right: none;
  -webkit-filter: drop-shadow(3px 3px 1px var(--clr-black))
}

.accredLogo{
  max-height: 55px;
  margin: 10px 5px
}

.accreditation{
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-top: 8px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  border: 1px solid var(--clr-gray-300) !important
}
.accreditation li{ margin: 15px 0 !important }
.accreditation li img{
  object-fit: contain;
  height: 100%;
  max-width: 175px;
  max-height: 125px;
}

p#accredImg1, p#accredImg2{ display: inline-block }

p#accredDesc1{
  max-width: 380px;
  padding-top: 15px
}
p#accredDesc2{
  max-width: 300px;
  padding-top: 10px
}
.accreditations-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Always 4 per row on desktop */
  gap: 1.25rem;
  font-size: 12px;
}

.accred-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
}

.accred-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.accred-logo {
  max-width: 180px;
  max-height: 175px;
  object-fit: contain;
}

/* Collab logos side-by-side */
.collab-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Mobile: stack into 2 per row, then 1 if needed */
@media (max-width: 900px) {
  .accreditations-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .accreditations-list {
    grid-template-columns: repeat(2, 1fr);
  }
.accred-logo {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}
}
.slide-form .input-wrapper .cBTN, footer .upper-footer .content-area > li.callout{
  background-color: var(--clr-primary);
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--clr-white)
}
.slide-form{ background-image: linear-gradient(90deg, var(--clr-primary) 0, var(--clr-primary-700) 100%); }

.slide-form-top{
  padding: 1.5rem 8rem;
  margin-top: -20rem
}
.slide-form-top strong{ color: var(--clr-white) }

.slide-form-top .input-wrapper{
  width: 100%;
  max-width: 120rem;
  background-color: var(--clr-primary);
  padding: 1.5rem 4rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px rgb(70 70 70) !important;
  border-radius: var(--radius-md)
}

.contactWrapper, iframe.contactMap{
  -webkit-box-shadow: rgb(0 0 0 / 11%) 0 3px 11px 0 !important;
  border: 1px solid var(--clr-gray-300) !important;
  margin: 0 auto
}
.contactWrapper{
  display: table;
  table-layout: fixed;
  width: 90%
}
.contactColumn{ display: table-cell; padding: 10px }
iframe.contactMap{
  max-width: 1560px;
  height: 400px;
  width: 100%;
  display: block
}

nav #navigation > li > ul{ border: 1px solid var(--clr-gray-700) }

nav #navigation > li > ul > li > a, nav #navigation > li > ul > li > ul > li > a{
  width: 100%;
  font-size: 1.2rem;
  line-height: 2;
  color: var(--clr-gray-700);
  padding: .15rem 3rem .15rem 1.25rem
}

.accred-container{ display: flex; flex-direction: row }
.accred-item-left{ padding: 10px }
.accred-item-right{
  padding: 10px;
  flex: 100%;
  text-align: left
}

.column4, .flex-opener-left{ text-align: center }

div#prods{
  width: 100%;
  margin: 0px auto;
  max-width: 1080px;
}

.about-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.about-container > div{
  width: 50%;
  margin: 0 auto;
  text-align: left;
  line-height: 75px;
  font-size: 30px;
  padding: 10px
}
.about-container iframe{
  width: 100%;
  margin: 0 auto
}

.reviews-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.reviews-container > div{
  width: 25%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px
}

div#_ctl1__ctl2_pnlComments{
  width: 650px;
  margin: 0 auto
}

.service-container{ display: flex; flex-wrap: wrap }
.service-container > div{
  width: 45%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  margin: 0 auto
}
.service-container a{ border-bottom: 2px solid orange }

.discount-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.discount-container > div{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 75px;
  font-size: 30px
}

.contact-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.contact-container > div{
  width: 50%;
  margin: 0 auto;
  text-align: left;
  line-height: 75px;
  font-size: 30px;
  padding: 10px
}
.contact-container iframe{
  width: 100%;
  margin: 0 auto
}

.gateGallery-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 600px;
  overflow-y: scroll;
}
.gateGallery-container img{
  max-width: 300px;
  max-height: 200px
}
.gateImg{
  color: var(--clr-gray-800);
  line-height: 25.6px;
  width: 320px;
  height: 522px;
  float: right;
  margin-left: 5px;
  margin-right: 100px
}

.projectGallery-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 600px;
  overflow-y: scroll;
}
.projectGallery-container img{
  max-width: 350px;
  max-height: 325px;
  border: 1px solid var(--clr-black)
}

.holder{
  width: 600px;
  height: 400px;
  position: relative;
  margin: 8rem auto;
}
.frame{ width: 100%; height: 100%; }

.bar{
  position: absolute;
  top: 100px;
  left: 500px;
  width: 100%;
  background-color: var(--clr-primary-700);
  padding: 20px;
  max-width: 400px;
}
.bar h1{ color: var(--clr-white); }

/* STICKY CONTACT BAR START */
.sticky-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--sticky-bg);
  padding: 10px 0;
  text-align: center;
  z-index: 1000;
  margin: 15px 0px;
}
/* Button Container */
.button-container{
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
  align-items: center;	
}
/* Contact Buttons */
.contact-btn{
  display: inline-block;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  color: var(--clr-primary);
  background: var(--clr-white);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s ease;
  width: 100%;
  max-width: 250px;
  text-align: center;
}
.contact-btn:hover{
  background: var(--clr-primary);
  color: var(--clr-white);
}
/* STICKY CONTACT BAR END */

/* ====== serviceLocations block (kept; now uses root tokens) ====== */
.serviceLocations{
  --serviceLocations-max: 1100px;
  --serviceLocations-text: var(--clr-black);
  --serviceLocations-accent: var(--clr-primary);
  --serviceLocations-gap: 2rem;

  box-sizing: border-box;
  max-width: var(--serviceLocations-max);
  margin: 0 auto;
  padding: 2.75rem 1rem;
  color: var(--serviceLocations-text);
}
.serviceLocations *{ box-sizing: inherit; }

.serviceLocations__title{
  margin: 0 0 .75rem;
  text-align: center;
  letter-spacing: .03em;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem);
}

.serviceLocations__underline{
  width: 90px;
  height: 4px;
  background: var(--serviceLocations-accent);
  border-radius: 999px;
  margin: 0 auto 2rem;
}

/* Single list that auto-splits into columns (4 → 2 → 1) */
.serviceLocations__list{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  column-gap: var(--serviceLocations-gap);
  column-fill: balance;
  column-count: 4;
}

.serviceLocations__list li{
  break-inside: avoid;
  padding: .25rem 0;
  line-height: 1.75;
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem);
}

/* Tablet */
@media (max-width: 1024px){
  .serviceLocations__list{ column-count: 2; }
}

/* Mobile */
@media (max-width: 600px){
  .serviceLocations__list{ column-count: 1; }
}
/* =========================
   PAY ACCEPT (safe for CMS)
   ========================= */
.pay-accept{
  --pay-gap: 12px;
  --pay-maxw: 800px;
  --pay-logo-h: 38px;
  --pay-logo-h-sm: 32px;
  --pay-logo-w: 72px;
  --pay-muted: var(--clr-gray-600);
  --pay-link: inherit;
  --pay-link-hover: inherit;

  text-align: center;
  margin: 1.5rem auto;
  max-width: var(--pay-maxw);
  padding: 0 1rem;
}

.pay-accept__label{ margin: 0 0 .5rem 0; }

.pay-accept__logos{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pay-gap);
}
.pay-accept__logo i {
  font-size: 3.5rem; /* ~40px */
  color: var(--clr-primary)
}
.pay-accept__logo{ display: inline-flex; align-items: center; justify-content: center; }

.icon{
  display:inline-block;
  width: var(--pay-logo-w);
  height: var(--pay-logo-h);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-visa{ background-image:url("/sites/images/visa.png"); }
.icon-mastercard{ background-image:url("/sites/images/MasterCard.png"); }
.icon-discover{ background-image:url("/sites/images/discover.ico"); }
.icon-amex{ background-image:url("/sites/images/American-Express-icon.png"); }
.icon-cash{ background-image:url("/sites/images/cash.jpg"); }
.icon-check{ background-image:url("/sites/images/Check_Icon_H38px.png"); }

.pay-accept__policy{
  margin: .75rem 0 0;
  font-size: .95rem;
  color: var(--pay-muted);
}
.pay-accept__policy a{
  color: var(--pay-link);
  text-decoration: underline;
}
.pay-accept__policy a:hover{
  color: var(--pay-link-hover);
  text-decoration-thickness: 2px;
}

/* Mobile: two-column grid, smaller gap & smaller icons */
@media (max-width: 600px){
  .pay-accept__logos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    justify-items: center;
  }
  .icon{
    height: var(--pay-logo-h-sm);
  }
}

/* Mobile: exact two columns with tighter spacing */
@media (max-width: 600px){
  .pay-accept__logos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;                 /* tighter gap on mobile */
    justify-items: center;
  }
  .pay-accept__logo{
    width: 100%;
  }
  .pay-accept__logo img{
    height: var(--pay-logo-h-sm);
  }
}

/* ====== Responsive chunks preserved as-is; tokenized where relevant ====== */

@media (max-width:600px){
  .accred-item-left, .accred-item-right{ text-align: center }
  .accred-container{ flex-direction: column }
  .accred-container p{ font-size: .7em }
  .accred-item-left{ padding: 10px; flex: 50% }
  .button-container{
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
}

.multiColumn, .multiColumn3{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  margin-bottom: 30px;
  font-size: .9em
}
.multiColumn2{
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
  margin-bottom: 30px;
  font-size: .9em
}

.column2{ float: left; width: 25%; padding: 10px }
.column3, .column4{ float: left; width: 50%; padding: 10px }

.column3 a img{
  margin: 10px;
  max-width: 420px;
  width: 100%;
  max-height: 195px;
  box-shadow: var(--shadow-img-strong)
}

@media screen and (max-width:475px){
  #hero .content h1, #hero .content p{
    text-align: center;
    word-break: keep-all
  }
  #hero .content h1{ text-transform: uppercase }
  #hero .content p{
    font-size: 1.8rem !important;
    font-weight: 600;
    color: var(--clr-white)
  }
  #hero{
    max-height: 800px;
    background-size: cover;
    background-position: center;
    padding: 2rem
  }
  .content h1 small{ -webkit-text-stroke: 1px var(--clr-black) }
  #gallery .content .gallery li{ padding: 1rem }
  #gallery .content .gallery li a.btn{
    max-width: 100%;
    margin: 1em auto;
    width: 100%;
    min-width: 100%
  }
  #gallery .content .gallery li a:not(.btn){
    text-transform: uppercase;
    -webkit-text-stroke: 1px var(--clr-black);
    -webkit-text-fill-color: var(--clr-white);
    font-size: 2rem;
    paint-order: stroke fill !important;  
  }
  .headline h2{
    padding: 0 3rem;
    z-index: 0;
    background-color: var(--clr-white);
    font-size: 2rem
  }
  .slide-form-top{ padding: 1.5rem 0; margin-top: -20rem }
  #_ctl1__ctl1_pnlForm{ width: 100% !important }
  #_ctl1__ctl1_DDRLs.productBox{ margin: 0; width: 100% }
  .header img{ max-width: 170px }
}

@media screen and (max-width:600px){
  .prodContainer div.row{ min-height: 675px }
  .prodColumn1{ width: 100%; margin-top: 125px }
  .prodColumn2{ width: 100%; margin-bottom: 125px }
  #contentColumn1, #prodColumn1, .contentColumn, .span_1_of_2, .span_2_of_2{ width: 100% }
  #contentColumn2, #prodColumn2{ width: 100%; float: left }
  .colContact{ margin: 1% 0 }
  .productBox{
    border: 2px solid var(--clr-gray-500);
    background-color: var(--clr-white);
    width: 100% !important;
    padding: 10px;
    display: block;
    margin: 0 auto
  }
  .accreditation{ padding-left: 0 !important; margin-left: 0 !important; margin-top: 8px }
  .column2, .column3, .column4{ float: unset; padding: 10px }
  .column2, .column3, .column4, div#prods{ width: 100%; margin: 0 auto }
  .accreditation li{ margin: 15px 0 !important }
  p#accredImg1, p#accredImg2{
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    width: 100%
  }
  p#accredDesc1, p#accredDesc2{ text-align: center; float: unset; width: 100% }
  ul.engines{ display: none !important }
  .column3 a img{
    margin: 0 auto !important;
    width: 100% !important;
    max-height: 195px !important
  }
  .column4{ text-align: center }
}

@media screen and (max-width:770px){
  .contactColumn, .productBox{ display: block }
  .productBox{
    border: 2px solid var(--clr-gray-500);
    background-color: var(--clr-white);
    width: 95%;
    padding: 10px;
    margin: 0 auto
  }
  div#_ctl1__ctl2_pnlForm{ width: 100% !important }
  #_ctl1__ctl1_pnlForm{ width: 78.5% }
}

.genie-container{
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
  min-height: 275px;
  max-width: 1075px;
  margin: 20px auto
}
.flex-opener{ padding: 10px }
.flex-opener-left p, .flex-opener-right p{ font-size: .8em }
.flex-opener-left{ padding: 10px; flex: 25% }
.flex-opener-left img{ max-height: 200px }
.flex-opener-right{
  padding: 10px;
  flex: 75%;
  text-align: left
}

@media screen and (max-width:775px){
  .about-container > div{ width: 100% }
  .gateGallery-container > div{
    width: 100% !important;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
  .projectGallery-container > div{
    width: 100% !important;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
  .contact-container > div{ width: 100% }
  .quad-image{ height: 65rem }
  .quad-image .column{ margin-bottom: 15px }
}

@media (max-width:800px){
  .flex-opener-left, .flex-opener-right{ flex: 100% }
  .flex-opener-left{ flex: 100%; text-align: center }
  .flex-opener-left img{ max-height: 275px }
  .flex-opener-right{
    padding: 25px;
    flex: 100%;
    text-align: left
  }
}

@media screen and (max-width:1050px){
  div#_ctl1__ctl2_pnlForm{ width: 75% !important }
  #_ctl1__ctl1_pnlForm{ width: 78.5% }

  #hero .content h1{
    text-align: center;
    font-size: 4.2rem;
    text-transform: uppercase
  }
  #hero .content p{
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--clr-white)
  }
  #hero .content .engines{ margin-top: 10rem }
  #hero{
    max-height: 900px;
    background-size: cover;
    background-position: center;
    padding: 5rem 2rem
  }
  .productBox{
    border: 2px solid var(--clr-gray-500);
    background-color: var(--clr-white);
    width: 95%;
    padding: 10px;
    display: block;
    margin: 0 auto
  }
  .content-area.copyright{
    padding: 3rem;
    margin: 0;
    text-align: center
  }
}

@media screen and (max-width: 1250px){
  .bar{
    /* position: relative; */
    left: 0px;
    width: 100%;
    padding: 20px;
    max-width: 100%;
    top: -95px;
  }
}

@media screen and (max-width:1355px){
  .gateGallery-container > div{
    width: 45%;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
  .projectGallery-container > div{
    width: 45%;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
}

@media screen and (min-width:1356px){
  .gateGallery-container > div{
    width: 22%;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
  .projectGallery-container > div{
    width: 25%;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px
  }
}

@media screen and (max-width:1400px){
  div#_ctl1__ctl2_pnlForm{ width: 50% }
  #_ctl1__ctl1_pnlForm{ width: 78.5% }
  #hero .content h1{ font-size: 5.5rem }
}

@media screen and (min-width:1400px){
  div#_ctl1__ctl2_pnlForm{ width: 35% }
  #_ctl1__ctl1_pnlForm{ width: 100% }
}

@media screen and (max-width: 1600px){
  nav #navigation > li > ul{
    max-height: 410px !important;
    overflow-y: scroll !important;
  }
  nav #navigation > li > ul::-webkit-scrollbar{
    width: 8px !important;
  }
  nav #navigation > li > ul::-webkit-scrollbar-track{
    box-shadow: inset 0 0 0px var(--clr-primary-700) !important;
    border-radius: 0px !important;
  }
  nav #navigation > li > ul::-webkit-scrollbar-thumb{
    background: var(--clr-primary) !important;
    border-radius: 0px !important;
    max-height: 50px !important;
  }
}