/* spacing helpers */
.mb-32 { margin-bottom: 32px; }
.mb-64 { margin-bottom: 64px; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.5s; }
p {
    font-weight: 500;
}



/* HERO */
.hero-section--commercial {
    min-height: auto;
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.hero-section--commercial .hero-inner {
    padding: 0;
}
.hero-content {
  max-width: 768px;
}
.rating-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 14px;
}

.section--about {
  background: var(--card);
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header.center {
  text-align: center;
}
.trust-grid svg.icon {
    display: inline-block;
    vertical-align: middle;
    color: #06bca6;
    margin: 0 0 4px;
}

/* CONTENT */
.content-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--foreground);
  line-height: 1.7;
}

/* ORDER */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* APPROACH */
.section--approach p {
  margin-bottom: 32px;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* USP */
.section--usp {
  position: relative;
  overflow: hidden;
}

.section--usp .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--usp .overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.6);
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 24px;
}

/* CARDS */
.usp-grid > div {
  background: rgba(245,247,250,0.9);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

/* BUTTON */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section--approach-commercial {
  background: #F8F9FA;
}

.approach-desc {
  color: var(--foreground);
  line-height: 1.7;
  margin-bottom: 32px;
}
.btn-approach svg {
    height: 1rem;
    width: 1rem;
}
.btn-approach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.approach-item {
  text-align: center;
}
.approach-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ef4444;
}
.approach-icon {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 2rem;
}

.approach-title {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 4px;
}

.approach-text {
  font-size: 13px;
  color: var(--muted-foreground);
}
.svc-card-title {
    font-size: 1rem;
}
.svc-card-desc {
    margin: 7px 0 0;
}

.section--usp-commercial {
  position: relative;
  overflow: hidden;
}

.usp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.usp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.6);
}

.usp-inner {
  position: relative;
  z-index: 10;
}

.section-header.center {
  text-align: center;
  margin-bottom: 56px;
}

.section-header.white h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.75rem,4vw,2.5rem);
  color: #fff;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 24px;
}

.usp-card {
  background: rgba(245,247,250,0.9);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.usp-icon {
  font-size: 2.5rem;
  margin-bottom: 0;
}

.usp-title {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    font-size: .875rem;
    line-height: 1.25rem;
}
.usp-text {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.6;
    font-weight: 500;
}
.usp-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #0283d9;
}
.srvBack {
    font-size: .875rem;
    line-height: 1.25rem;
    color: #FFF;
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-family: Montserrat, sans-serif;
    margin: 0 0 20px;
}
.hero-section--commercial .hero-desc {
    color: #f9fafbcc;
}

.servGlImgWrp {
    margin: 0 0 90px;
}
.servGlImg img {
    transition: 0.6s;    
}
.servGlImg {overflow: hidden;border-radius: 10px;}
.servGlImg:hover img {
    transform: scale(1.2);
    transition: 0.6s;
}
.midContent {
    max-width: 900px;
    margin: 0px auto 0;
}
.midContent p {
    color: #1a1a1a;
}
section.twoColWrp {
    padding-top: 0;
}
.mt-80 {margin-top: 80px;}
.mt-40 {margin-top: 40px;}
.midContent h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    margin: 40px 0 20px;
}
.text-center {text-align: center;}
section.pt-0 {
    padding-top: 0;
}

@media screen and (min-width:768px) and (max-width:1023px) {
section.section.section--about-commercial .about-content.order-2 {
    order: 1;
}
section.section.section--about-commercial .img-wrap.order-1 {
    order: 2;
}
}

@media screen and (max-width:767px) {
.servGlImgWrp {
    margin: 0 0 40px;
}
section.servgwpp {
    padding-bottom: 20px;
}
.mt-80 {
    margin-top: 30px;
}
.hero-title {
    line-height: 1.25;
}
.hero-content {
    max-width: 100%;
    padding-right: 5px;
    padding-left: 5px;
}
.hero-section--commercial {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.approach-grid {
    grid-template-columns: repeat(1, 1fr);
    max-width: 260px;
    margin: 0 auto;
}  
section.section.section--approach-commercial {
    padding-top: 0;
}
section.section.section--services-commercial {
    padding-top: 0;
}
.two-col {
    gap: 26px;
}
.trust-item .val {
    font-size: 11px;
}
.trust-item .sub {
    font-size: 10px;
}
.trust-item {
    padding: 12px 8px;
}
section.section.section--usp-commercial {
    margin-bottom: 40px;
}
.section-header {
    margin-bottom: 36px;
}
.prefooter p {
    margin: 0;
}
}