/* =========================================================
   FINAL WHITESPACE NORMALIZER
   Single source of truth – no layout rewrite
   ========================================================= */


/* -------------------------
   GLOBAL SAFETY
-------------------------- */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-top: 0;
    padding: 0;
    margin-top: 0 !important;
}

.commercial-solar-panel,
.commercial-solar-panel * {
    box-sizing: border-box;
}

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


/* -------------------------
   KILL HORIZONTAL LEAKS
-------------------------- */


/* removes margin-based overflow (root cause) */

.commercial-solar-panel section {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 100px;
    padding-right: 100px;
}


/* specifically fixes tpl-steps4 bug */

.commercial-solar-panel .tpl-steps4 {
    margin: 0 auto !important;
    padding-left: clamp(16px, 3vw, 30px) !important;
    padding-right: clamp(16px, 3vw, 30px) !important;
}


/* -------------------------
   FULL-BLEED (SAFE)
-------------------------- */

.commercial-solar-panel .tpl-banner,
.tpl-banner.tpl-banner--ind-ban,
.tpl-imageonly {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* keep readable inner padding */

.tpl-banner__content,
.tpl-imageonly__inner {
    padding-inline: clamp(16px, 4vw, 40px);
    padding-top: 100px;
}


/* -------------------------
   CONSISTENT SECTION PADDING
-------------------------- */


/* Desktop */

.commercial-solar-panel section {}


/* Tablet */

@media (max-width: 1199px) {
    .commercial-solar-panel section {
        padding-inline: 24px !important;
        padding-top: 0;
    }
}


/* Small Tablet */

@media (max-width: 991px) {
    .commercial-solar-panel section {
        padding-inline: 20px !important;
        padding-top: 0;
    }
}


/* Mobile */

@media (max-width: 767px) {
    .commercial-solar-panel section {
        padding-inline: 18px !important;
        padding-top: 0;
    }
}


/* Small Mobile */

@media (max-width: 575px) {
    .commercial-solar-panel section {
        padding-inline: 16px !important;
        padding-top: 0;
    }
}


/* -------------------------
   GAP NORMALIZATION
-------------------------- */

.commercial-solar-panel [class*="__inner"] {
    gap: clamp(16px, 3vw, 50px);
}


/* -------------------------
   768–779px DEAD ZONE FIX
-------------------------- */

@media (min-width: 768px) and (max-width: 779px) {
    html,
    body {
        overflow-x: hidden !important;
    }
    .commercial-solar-panel section {
        padding-inline: 20px !important;
        padding-top: 0;
    }
    /* Bootstrap / theme gutter killers */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* -------------------------
   EXTRA SMALL SAFETY (≤320)
-------------------------- */

@media (max-width: 320px) {
    .commercial-solar-panel section {
        padding-inline: 16px !important;
        padding-top: 0;
    }
    .commercial-solar-panel * {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* =========================================================
   COMMERCIAL SOLAR – HERO BANNER (FULL-BLEED, FLUID, 320+)
   ========================================================= */


/* ---- Break out of any theme container ---- */

.commercial-solar-panel {
    width: 100%;
    max-width: none;
}

.commercial-solar-panel .tpl-banner {
    position: relative;
    width: 100vw;
    min-height: clamp(520px, 70vh, 700px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
    /* Fluid spacing */
    padding: clamp(50px, 8vh, 120px) clamp(20px, 4vw, 40px);
    text-align: center;
}


/* ---- Background ---- */

.commercial-solar-panel .tpl-banner__bg,
.commercial-solar-panel .tpl-banner__overlay {
    position: absolute;
    inset: 0;
}

.commercial-solar-panel .tpl-banner__bg {
    background-image: var(--tpl-banner-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: contrast(1.05);
    z-index: 1;
}

.commercial-solar-panel .tpl-banner__overlay {
    background: rgba(0, 0, 0, 0.65);
    z-index: 2;
}


/* ---- Content Wrapper ---- */

.commercial-solar-panel .tpl-banner__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 30px;
}


/* ---- Title ---- */

.commercial-solar-panel .tpl-banner__title {
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.25;
    max-width: 1600px;
    margin-bottom: 30px;
    margin-top: 0;
}


/* ---- Body / Subtitle Text ---- */

.commercial-solar-panel .tpl-banner__text {
    font-family: "Comfortaa", sans-serif;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 27px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 1600px;
}


/* Paragraph spacing (supports wpautop or <br><br>) */

.commercial-solar-panel .tpl-banner__text p {
    margin: 0 0 clamp(14px, 2vw, 18px);
}

.commercial-solar-panel .tpl-banner__text br+br {
    display: block;
    margin-top: clamp(14px, 2vw, 18px);
    content: "";
}


/* ---- Inline Links (NO layout break) ---- */

.commercial-solar-panel .tpl-banner__text a {
    display: inline;
    white-space: normal;
    vertical-align: baseline;
    color: var(--yellow, #FFCC01);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.commercial-solar-panel .tpl-banner__text a:hover {
    color: #ffd84d;
}


/* ---- Highlights ---- */

.commercial-solar-panel .tpl-banner__text strong,
.commercial-solar-panel .tpl-banner__text .highlight {
    color: var(--yellow, #FFCC01);
    font-weight: 600;
}


/* ---- Smallest devices safety (≤320px) ---- */

@media (max-width: 320px) {
    .commercial-solar-panel .tpl-banner__text {
        line-height: 1.6;
    }
}


/* =========================
   SECTION 2: Image Left + Text Right (FIXED)
   (newsection-1.php)
   ========================= */

.commercial-solar-panel .tpl-imgleft {
    background: #fff;
    padding: 100px;
}


/* ✅ Make it a real 2-column layout */

.commercial-solar-panel .tpl-imgleft__inner {
    display: flex;
    flex-direction: row;
    /* image LEFT, text RIGHT */
    align-items: center;
    gap: 50px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    /* center the container */
    box-sizing: border-box;
}

.commercial-solar-panel .tpl-imgleft__img {
    height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    /* ✅ remove offsets that break alignment */
    margin: 0;
    width: 1627px;
}

.commercial-solar-panel .tpl-imgleft__title {
    color: #333;
    font-family: "Comfortaa", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0 0 30px;
}

.commercial-solar-panel .tpl-imgleft__p {
    margin: 0 0 14px 0;
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    width: 100%;
    font-weight: 700;
}


/* ✅ Responsive */


/* Tablet */

@media (min-width: 768px) and (max-width: 1199px) {
    .commercial-solar-panel .tpl-imgleft__inner {
        flex-direction: column;
        gap: 40px;
    }
}


/* Mobile */

@media (max-width: 768px) {
    .commercial-solar-panel .tpl-imgleft__inner {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 900px) {
    .commercial-solar-panel .tpl-imgleft__inner {
        flex-direction: column;
        gap: 40px;
        align-items: stretch;
    }
    .commercial-solar-panel .tpl-imgleft__media {
        flex: 0 0 auto;
        width: 100%;
    }
    .commercial-solar-panel .tpl-imgleft__img {
        max-width: 800px;
        width: 100%;
    }
    .commercial-solar-panel .tpl-imgleft__copy {
        padding-top: 0;
    }
    .commercial-solar-panel .tpl-imgleft__p {
        max-width: none;
    }
}


/* =========================================================
   SECTION: tpl-steps4 (4-column alternating blocks)
   ========================================================= */

.commercial-solar-panel .tpl-steps4 {
    width: 100%;
    background: #fff;
    margin: 0 100px 100px;
    /* desktop default */
    box-sizing: border-box;
    padding-right: 189px;
}

.commercial-solar-panel .tpl-steps4__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.commercial-solar-panel .tpl-steps4__head {
    text-align: center;
    margin-bottom: 30px;
}

.commercial-solar-panel .tpl-steps4__title {
    margin: 0 0 30px;
    font-family: "Nunito", sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #333;
}

.commercial-solar-panel .tpl-steps4__sub {
    margin: 0 auto;
    max-width: 1600px;
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 30px;
}


/* Grid */

.commercial-solar-panel .tpl-steps4__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    /* blocks touch like screenshot */
}


/* Card */

.commercial-solar-panel .tpl-steps4__card {
    min-height: 260px;
    padding: 50px 30px 50px;
    box-sizing: border-box;
}

.commercial-solar-panel .tpl-steps4__cardTitle {
    margin: 0;
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;
}


/* Optional paragraph text */

.commercial-solar-panel .tpl-steps4__cardText {
    margin-top: 10px;
    font-family: "Comfortaa", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}


/* Bullets */

.commercial-solar-panel .tpl-steps4__list {
    margin: 10px 0 0;
    padding-left: 20px;
    font-family: "Comfortaa", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

.commercial-solar-panel .tpl-steps4__list li {
    margin: 6px 0;
    font-size: 16px;
}


/* Variants */

.commercial-solar-panel .tpl-steps4__card--blue {
    background: #004C81;
    color: #ffffff;
}

.commercial-solar-panel .tpl-steps4__card--yellow {
    background: #FFCC01;
    color: #333;
}


/* =========================================================
   RESPONSIVE
   Tablet 1199-768: 70px TB, 30px sides
   Mobile 767-320: 50px TB, 20px sides
   ========================================================= */

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-steps4 {
        padding: 40px 30px;
    }
    .commercial-solar-panel .tpl-steps4__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .commercial-solar-panel .tpl-steps4__card {
        min-height: 240px;
        padding: 40px 30px 40px;
    }
}

@media (max-width: 767px) and (max-width: 680px) {
    .commercial-solar-panel .tpl-steps4 {
        padding: 30px 20px;
    }
    .commercial-solar-panel .tpl-steps4__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .commercial-solar-panel .tpl-steps4__card {
        min-height: auto;
        padding: 30px 30px 30px;
    }
    .commercial-solar-panel .tpl-steps4__title {
        font-size: 28px;
    }
}


/* =========================================================
   NEWSECTION-3.PHP — Types of Commercial Solar Panel Systems
   Strict screenshot layout: Blue section bg + connected 2x2
   ========================================================= */

.commercial-solar-panel .tpl-types2x2 {
    width: 100%;
    background: #003D68;
    /* section background */
    padding: 88px 30px 90px;
    box-sizing: border-box;
}

.commercial-solar-panel .tpl-types2x2__inner {
    max-width: 1450px;
    margin: 0 auto;
}

.commercial-solar-panel .tpl-types2x2__head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 54px;
}

.commercial-solar-panel .tpl-types2x2__title {
    margin: 0 0 16px;
    color: #fff;
    font-family: "Nunito", sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}

.commercial-solar-panel .tpl-types2x2__sub {
    margin: 0 auto;
    color: rgba(255, 255, 255, .85);
    font-family: "Comfortaa", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
}


/* 2x2 connected grid (NO gaps) */

.commercial-solar-panel .tpl-types2x2__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    /* connected panels */
}


/* Card base */

.commercial-solar-panel .tpl-types2x2__card {
    padding: 44px 44px 42px;
    min-height: 330px;
    box-sizing: border-box;
}


/* Icon */

.commercial-solar-panel .tpl-types2x2__iconWrap {
    margin: 0 0 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.commercial-solar-panel .tpl-types2x2__icon {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    padding-bottom: 30px;
}

.commercial-solar-panel .tpl-types2x2__iconFallback {
    width: 26px;
    height: 26px;
    display: inline-flex;
}


/* Title */

.commercial-solar-panel .tpl-types2x2__cardTitle {
    margin: 0 0 16px;
    font-family: "Nunito", sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
}


/* Body */

.commercial-solar-panel .tpl-types2x2__text p {
    margin: 0 0 16px;
    font-family: "Comfortaa", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
}


/* Blue panel */

.commercial-solar-panel .tpl-types2x2__card--blue {
    background: #004C81;
    color: rgba(255, 255, 255, .92);
}

.commercial-solar-panel .tpl-types2x2__card--blue .tpl-types2x2__cardTitle {
    color: #FFCC01;
    /* yellow title */
}

.commercial-solar-panel .tpl-types2x2__card--blue .tpl-types2x2__iconFallback,
.commercial-solar-panel .tpl-types2x2__card--blue .tpl-types2x2__icon {
    color: #FFCC01;
}


/* Yellow panel */

.commercial-solar-panel .tpl-types2x2__card--yellow {
    background: #FFCC01;
    color: rgba(0, 0, 0, .82);
}

.commercial-solar-panel .tpl-types2x2__card--yellow .tpl-types2x2__cardTitle {
    color: #1A1A1A;
}

.commercial-solar-panel .tpl-types2x2__card--yellow .tpl-types2x2__iconFallback,
.commercial-solar-panel .tpl-types2x2__card--yellow .tpl-types2x2__icon {
    color: #1A1A1A;
}


/* Responsive */

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-types2x2 {
        padding: 70px 30px 80px;
    }
    .commercial-solar-panel .tpl-types2x2__title {
        font-size: 36px;
    }
    .commercial-solar-panel .tpl-types2x2__card {
        padding: 38px 34px 36px;
        min-height: 300px;
    }
}

@media (max-width: 767px) {
    .commercial-solar-panel .tpl-types2x2 {
        padding: 50px 20px 60px;
    }
    .commercial-solar-panel .tpl-types2x2__grid {
        grid-template-columns: 1fr;
        /* stack */
    }
    .commercial-solar-panel .tpl-types2x2__title {
        font-size: 28px;
    }
    .commercial-solar-panel .tpl-types2x2__cardTitle {
        font-size: 20px;
    }
}


/* =========================================================
   NEWSECTION-3 (Types) — STRICT screenshot layout
   Uses existing tpl-stepsgrid classes + modifier
   ========================================================= */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types {
    background: #003D68;
    padding: 100px;
    box-sizing: border-box;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__inner {
    max-width: 1500px;
    margin: 0 auto;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 60px;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__title {
    margin: 0 0 30px;
    color: #fff;
    font-family: "Nunito", sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__sub {
    margin: 0 auto;
    color: rgba(255, 255, 255, .85);
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    max-width: 980px;
}


/* 2x2 connected grid (no gaps) */

.commercial-solar-panel .tpl-stepsgrid__grid.tpl-stepsgrid__grid--types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
}


/* card base */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card {
    border-radius: 0;
    border: none;
    min-height: 330px;
    padding: 50px 44px 30px;
    box-sizing: border-box;
}


/* icon */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__iconWrap {
    width: 28px;
    height: 28px;
    margin: 0 0 14px;
    display: flex;
    align-items: flex-start;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__iconFallback {
    width: 26px;
    height: 26px;
    display: block;
    background: rgba(255, 255, 255, .25);
    border-radius: 3px;
}


/* titles + text */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__cardTitle {
    margin: 0 0 30px;
    font-family: "Nunito", sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    padding-top: 30px;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__cardText p {
    margin: 0 0 16px;
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    padding-bottom: 16px;
}


/* BLUE card */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card--blue {
    background: #004C81;
    color: rgba(255, 255, 255, .92);
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardTitle {
    color: #FFCC01;
}


/* YELLOW card */

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card--yellow {
    background: #FFCC01;
    color: #333;
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card--yellow .tpl-stepsgrid__cardTitle {
    color: #333;
}


/* RESPONSIVE (your rule) */

@media (max-width:1199px) {
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types {
        padding: 70px 30px 80px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__title {
        font-size: 36px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card {
        padding: 38px 34px 36px;
        min-height: 300px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__head {
        margin-bottom: 45px;
    }
}

@media (max-width:767px) {
    .commercial-solar-panel .tpl-stepsgrid__grid.tpl-stepsgrid__grid--types {
        grid-template-columns: 1fr;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types {
        padding: 50px 20px 60px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__title {
        font-size: 28px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__cardTitle {
        font-size: 20px;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__head {
        margin-bottom: 30px;
        padding-top: 50px;
    }
}


/* =========================================================
   tpl-imgleft use2 variant
   Wider container + image right
   ========================================================= */

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 {
    background: #ffffff;
    padding: 100px;
    gap: 50px
}


/* widen ONLY use2 inner */

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__inner {
    display: flex !important;
    /* CRITICAL: ensure flex */
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 50px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    /* CRITICAL: center the max-width */
}


/* media sizing */

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__media {
    flex: 0 0 50%;
}

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__img {
    height: auto;
    display: block;
    margin: 0;
}


/* text block */

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__copy {
    margin: 0;
    padding: 0;
}


/* typography (keep only tpl-imgleft selectors; remove newsection-1 ones) */

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__title {
    color: #333;
    font-family: "Comfortaa", sans-serif;
    font-size: 40px;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: normal !important;
}

.commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__p {
    margin: 0 0 14px 0 !important;
    font-family: "Comfortaa", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #333 !important;
    font-weight: 700 !important;
}


/* Responsive */


/* tablet */

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__inner {
        flex-direction: column !important;
        gap: 40px;
    }
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__copy {
        padding-top: 0;
        width: 100%;
        max-width: 1400px;
    }
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 {
        padding: 45px;
    }
}


/* mobile */

@media (max-width: 575px) {
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__inner {
        flex-direction: column !important;
        gap: 30px;
    }
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 {
        padding: 30px;
    }
}


/* ===============================
   tpl-stepsgrid -- use2sec3
   3-card row: Blue / Yellow / Blue
   Scoped CSS (won't affect other variants)
   =============================== */

.tpl-stepsgrid--use2sec3 {
    padding-bottom: 100px;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}


/* Header */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__head {
    margin-bottom: 20px;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__title {
    font-size: clamp(22px, 2.4vw, 34px);
    margin: 0 0 8px;
    line-height: 1.2;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__sub {
    margin: 0;
    max-width: 70ch;
    line-height: 1.65;
}


/* Grid: exactly 3 columns on desktop */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__grid--use2sec3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}


/* Card base */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card {
    padding: 50px 30px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* Color variants */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--blue {
    background-color: #003D68
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--yellow {
    background-color: #FFCC01;
}


/* Icon */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__iconWrap {
    width: 46px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__iconFallback {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
}


/* Typography */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardTitle {
    font-size: 30px;
    margin: 0 0 30px;
    line-height: 1.25;
}


/* Paragraphs – double spaced */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardText p {
    font-size: 16px;
    line-height: 2;
    /* 🔹 double spacing */
    margin: 0 0 12px;
    /* space between paragraphs */
    padding-bottom: 16px;
}


/* Lists inherit spacing */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardText ul,
.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardText ol {
    margin: 12px 0 0;
    padding-left: 18px;
}

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardText li {
    line-height: 1.9;
    margin: 8px 0;
}


/* Responsive: stack on smaller screens */

@media (max-width: 900px) {
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__grid--use2sec3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card {
        padding: 30px 30px;
    }
}


/* Title on BLUE cards → Yellow */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardTitle {
    color: #FFCC01;
    /* same yellow as card */
}


/* Paragraph text on BLUE cards → White */

.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardText,
.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardText p,
.tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardText li {
    color: #ffffff;
}


/* ==============================
   tpl-imgleft -- use3sec1
   Variant-only styling (no overlay)
   ============================== */

.tpl-imgleft--use3sec1 {
    background: #003D68 !important;
    padding: 70px 24px;
}


/* 2-column layout */

.tpl-imgleft--use3sec1 .tpl-imgleft__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

.tpl-imgleft--use3sec1 .tpl-imgleft__img {
    height: 534px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    margin: 0;
}

.tpl-imgleft--use3sec1 .tpl-imgleft__copy {}

.tpl-imgleft--use3sec1 .tpl-imgleft__title {
    color: #ffffff;
    font-family: "Comfortaa", sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: normal;
    margin: 0 0 30px;
}

.tpl-imgleft--use3sec1 .tpl-imgleft__p {
    margin: 0 0 14px 0;
    font-family: "Comfortaa", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
    width: 100%;
    max-width: 1090px;
    font-weight: 400;
    height: 100%;
    max-height: 378px;
}


/* Responsive */

@media (max-width: 1199px) {
    .tpl-imgleft--use3sec1 .tpl-imgleft__inner {
        flex-direction: column;
        align-items: center;
        /* optional */
        gap: 40px;
        /* optional spacing adjustment */
    }
}

@media (max-width: 991px) {
    .tpl-imgleft--use3sec1 .tpl-imgleft__inner {
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }
    .tpl-imgleft--use3sec1 .tpl-imgleft__media {
        flex: 0 0 auto;
        gap: 30px !important;
        width: 100%;
    }
    .tpl-imgleft--use3sec1 .tpl-imgleft__img {
        height: 516px;
        max-width: 100%;
    }
    .tpl-imgleft--use3sec1 .tpl-imgleft__copy {
        padding-top: 0;
    }
    .tpl-imgleft--use3sec1 .tpl-imgleft__p {
        max-width: none;
    }
}


/* =====================================
   image-only-sec – CTA banner
   Full-bleed + yellow overlay
   ===================================== */

.tpl-imageonly {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 48px 0;
    overflow: hidden;
}


/* Content wrapper */

.tpl-imageonly__inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}


/* Text block */

.tpl-imageonly__content {
    max-width: 1404px;
}


/* Title */

.tpl-imageonly__title {
    margin: 0 0 30px;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    color: #000;
}


/* Paragraph */

.tpl-imageonly__text p {
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}


/* Inline link */

.tpl-imageonly__text a {
    color: #0b66c3;
    text-decoration: underline;
}


/* Responsive */

@media (max-width: 900px) {
    .tpl-imageonly {
        padding: 32px 0;
    }
    .tpl-imageonly__inner {
        padding: 0 18px;
    }
}


/* ================================
   FAQ – tpl-faq (rt-faq adapted)
   details/summary safe version
================================ */


/* Section */

.tpl-faq {
    background: #ffffff;
    padding: 100px 1.5rem;
}

.tpl-faq__inner {
    max-width: 1300px;
    margin: 0 auto;
}


/* Title & intro */

.tpl-faq__title {
    margin: 0 0 30px;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    color: #333;
}

.tpl-faq__intro {
    margin: 0 0 30px;
    font-family: Comfortaa, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: #000;
    text-align: justify;
}


/* List */

.tpl-faq__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* Item */

.tpl-faq__item {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 0;
}


/* Summary / Question */

.tpl-faq__summary {
    width: 100%;
    background: #0a4a78;
    color: #ffffff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-family: Comfortaa, sans-serif;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
}

.tpl-faq__summary::-webkit-details-marker {
    display: none;
}

.tpl-faq__summary::marker {
    content: "";
}

.tpl-faq__summary:focus-visible {
    outline: 2px solid rgba(242, 195, 24, 0.9);
    outline-offset: 2px;
}


/* Chevron (matches rt-faq logic) */

.tpl-faq__chev {
    width: 10px;
    height: 10px;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(45deg);
    /* closed = down */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.tpl-faq__item[open] .tpl-faq__chev {
    transform: rotate(-135deg);
    /* open = up */
}


/* =========================================================
FAQ – Height Animation (rt-faq behavior) Safe for details/summary=========================================================*/

.tpl-faq__answer {
    background: #ffffff;
    height: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.35s ease, padding 0.35s ease;
}


/* Inner spacing container */

.tpl-faq__answer-inner {
    padding: 30px 0;
}


/* Paragraph spacing */

.tpl-faq__answer p {
    margin: 0;
}

.tpl-faq__answer p+p {
    margin-top: 16px;
}


/* When open */

.tpl-faq__item.is-opening .tpl-faq__answer,
.tpl-faq__item.is-open .tpl-faq__answer {
    padding: 0 15px;
}


/* =========================================================
   BANNER — ind-ban
   ========================================================= */

.tpl-banner.tpl-banner--ind-ban {
    position: relative;
    width: 100vw;
    min-height: clamp(520px, 70vh, 700px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(50px, 8vh, 120px) clamp(20px, 4vw, 40px);
    text-align: center;
    color: #fff;
}

.tpl-banner--ind-ban>.tpl-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--tpl-banner-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tpl-banner--ind-ban>.tpl-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.65);
}

.tpl-banner--ind-ban>.tpl-banner__content {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
}

.tpl-banner--ind-ban .tpl-banner__title {
    color: #fff;
}

.tpl-banner--ind-ban .tpl-banner__text {
    color: rgba(255, 255, 255, 0.9);
}

.tpl-banner--ind-ban .tpl-banner__text a {
    color: #FFCC01;
}


/* =========================================================
   IMAGE LEFT — ind-sec1
   ========================================================= */

.tpl-imgleft.tpl-imgleft--ind-sec1 {
    background: #fff;
    padding: 70px 24px;
}

.tpl-imgleft--ind-sec1>.tpl-imgleft__inner {
    display: flex;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.tpl-imgleft--ind-sec1 .tpl-imgleft__media {
    flex: 1;
}

.tpl-imgleft--ind-sec1 .tpl-imgleft__copy {
    flex: 1;
}

.tpl-imgleft--ind-sec1 .tpl-imgleft__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}


/* =========================================================
   IMAGE LEFT (DARK) — ind-sec2
   ========================================================= */

.tpl-imgleft.tpl-imgleft--ind-sec2 {
    background: #003D68;
    padding: 70px 24px;
}

.tpl-imgleft--ind-sec2>.tpl-imgleft__inner {
    display: flex;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.tpl-imgleft--ind-sec2 .tpl-imgleft__media {
    flex: 1;
}

.tpl-imgleft--ind-sec2 .tpl-imgleft__copy {
    flex: 1;
}

.tpl-imgleft--ind-sec2 .tpl-imgleft__title {
    color: #fff;
}

.tpl-imgleft--ind-sec2 .tpl-imgleft__p {
    color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   STEPS GRID — ind1sec3
   ========================================================= */

.tpl-stepsgrid.tpl-stepsgrid--ind1sec3 {
    background: #003D68;
    padding: 88px 30px;
}

.tpl-stepsgrid--ind1sec3>.tpl-stepsgrid__inner {
    max-width: 1450px;
    margin: 0 auto;
}

.tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__card {
    padding: 44px;
    border-radius: 0;
    box-shadow: none;
}

.tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__card--blue {
    background: #004C81;
    color: #fff;
}

.tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__card--blue .tpl-stepsgrid__cardTitle {
    color: #FFCC01;
}

.tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__card--yellow {
    background: #FFCC01;
    color: #111;
}

.commercial-solar-panel .tpl-stepsgrid__inner {
    max-width: 1500px;
    margin-inline: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .tpl-imgleft--ind-sec1>.tpl-imgleft__inner,
    .tpl-imgleft--ind-sec2>.tpl-imgleft__inner {
        flex-direction: column;
        gap: 24px;
    }
    .tpl-imgleft--ind-sec1 .tpl-imgleft__img,
    .tpl-imgleft--ind-sec2 .tpl-imgleft__img {
        height: 260px;
    }
    .tpl-stepsgrid--ind1sec3 .tpl-stepsgrid__grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   EXTRA SMALL SAFETY — <= 320px
   Keeps your existing design intact, just prevents breakage.
   Paste at END of stylesheet.
   ========================================================= */

@media (max-width: 320px) {
    /* --- Global overflow protection --- */
    html,
    body {
        overflow-x: hidden;
    }
    .commercial-solar-panel,
    .commercial-solar-panel * {
        box-sizing: border-box;
    }
    /* Prevent long links/words from forcing horizontal scroll */
    .commercial-solar-panel .tpl-banner__title,
    .commercial-solar-panel .tpl-banner__text,
    .commercial-solar-panel .tpl-imgleft__title,
    .commercial-solar-panel .tpl-imgleft__p,
    .commercial-solar-panel .tpl-steps4__title,
    .commercial-solar-panel .tpl-steps4__sub,
    .commercial-solar-panel .tpl-steps4__cardTitle,
    .commercial-solar-panel .tpl-steps4__cardText,
    .commercial-solar-panel .tpl-types2x2__title,
    .commercial-solar-panel .tpl-types2x2__sub,
    .commercial-solar-panel .tpl-types2x2__cardTitle,
    .commercial-solar-panel .tpl-types2x2__text,
    .tpl-imageonly__title,
    .tpl-imageonly__text,
    .tpl-faq__q,
    .tpl-faq__answer {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* --- HERO / FULL-BLEED BANNER --- */
    .commercial-solar-panel .tpl-banner,
    .tpl-banner.tpl-banner--ind-ban {
        /* Reduce padding so content fits 320px cleanly */
        padding: 36px 16px !important;
        min-height: 520px;
        /* keep your intended minimum feel */
    }
    .commercial-solar-panel .tpl-banner__title,
    .tpl-banner--ind-ban .tpl-banner__title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }
    .commercial-solar-panel .tpl-banner__text,
    .tpl-banner--ind-ban .tpl-banner__text {
        font-size: 13px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }
    /* --- IMAGE LEFT SECTIONS (all variants) --- */
    .commercial-solar-panel .tpl-imgleft,
    .tpl-imgleft.tpl-imgleft--ind-sec1,
    .tpl-imgleft.tpl-imgleft--ind-sec2,
    .tpl-imgleft--use3sec1 {
        padding: 44px 16px !important;
    }
    .commercial-solar-panel .tpl-imgleft__inner,
    .tpl-imgleft--ind-sec1>.tpl-imgleft__inner,
    .tpl-imgleft--ind-sec2>.tpl-imgleft__inner,
    .tpl-imgleft--use3sec1 .tpl-imgleft__inner {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: stretch !important;
    }
    .commercial-solar-panel .tpl-imgleft__media,
    .commercial-solar-panel .tpl-imgleft__copy {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .commercial-solar-panel .tpl-imgleft__img,
    .tpl-imgleft--ind-sec1 .tpl-imgleft__img,
    .tpl-imgleft--ind-sec2 .tpl-imgleft__img,
    .tpl-imgleft--use3sec1 .tpl-imgleft__img {
        height: 220px !important;
        /* avoid huge 500px on 320px */
        max-width: 100% !important;
    }
    .commercial-solar-panel .tpl-imgleft__title,
    .tpl-imgleft--use3sec1 .tpl-imgleft__title {
        font-size: 24px !important;
        margin-bottom: 14px !important;
    }
    .commercial-solar-panel .tpl-imgleft__p,
    .tpl-imgleft--use3sec1 .tpl-imgleft__p {
        font-size: 14px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
    }
    /* Fix big padding-top offsets on tiny screens */
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__copy {
        padding-top: 0 !important;
    }
    .tpl-imgleft--use3sec1 .tpl-imgleft__copy {
        padding-top: 0 !important;
    }
    /* --- STEPS4 (4-col -> 1-col already, just tighten spacing) --- */
    .commercial-solar-panel .tpl-steps4 {
        padding: 44px 16px 70px !important;
    }
    .commercial-solar-panel .tpl-steps4__title {
        font-size: 24px !important;
    }
    .commercial-solar-panel .tpl-steps4__sub {
        font-size: 13px !important;
    }
    .commercial-solar-panel .tpl-steps4__card {
        padding: 22px 18px !important;
    }
    .commercial-solar-panel .tpl-steps4__cardTitle {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    /* --- TYPES 2x2 / TYPES GRID (force single column, tighten padding) --- */
    .commercial-solar-panel .tpl-types2x2 {
        padding: 50px 16px 60px !important;
    }
    .commercial-solar-panel .tpl-types2x2__title {
        font-size: 24px !important;
    }
    .commercial-solar-panel .tpl-types2x2__sub {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    .commercial-solar-panel .tpl-types2x2__grid {
        grid-template-columns: 1fr !important;
    }
    .commercial-solar-panel .tpl-types2x2__card {
        padding: 22px 18px 20px !important;
        min-height: auto !important;
    }
    .commercial-solar-panel .tpl-types2x2__cardTitle {
        font-size: 18px !important;
    }
    /* This is your alternative "stepsgrid--types" block: keep it safe too */
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types {
        padding: 50px 16px 60px !important;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__title {
        font-size: 24px !important;
    }
    .commercial-solar-panel .tpl-stepsgrid__grid.tpl-stepsgrid__grid--types {
        grid-template-columns: 1fr !important;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card {
        padding: 22px 18px 20px !important;
        min-height: auto !important;
    }
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__cardTitle {
        font-size: 18px !important;
        padding-top: 14px !important;
    }
    /* --- use2sec3 (3-card row) --- */
    .tpl-stepsgrid--use2sec3 {
        padding-bottom: 70px !important;
    }
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__grid--use2sec3 {
        grid-template-columns: 1fr !important;
    }
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__card {
        padding: 18px !important;
    }
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardTitle {
        font-size: 20px !important;
    }
    .tpl-stepsgrid--use2sec3 .tpl-stepsgrid__cardText p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        /* keep readable on 320 */
    }
    /* --- IMAGE ONLY CTA --- */
    .tpl-imageonly {
        padding: 28px 0 !important;
    }
    .tpl-imageonly__inner {
        padding: 0 16px !important;
    }
    .tpl-imageonly__title {
        font-size: 20px !important;
    }
    .tpl-imageonly__text p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }
    /* --- FAQ --- */
    .tpl-faq {
        padding: 44px 0 !important;
    }
    .tpl-faq__inner {
        padding: 0 16px !important;
    }
    .tpl-faq__title {
        font-size: 26px !important;
    }
    .tpl-faq__summary {
        padding: 14px 14px !important;
    }
    .tpl-faq__q {
        font-size: 13px !important;
    }
    .tpl-faq__answer {
        padding: 14px 14px 18px !important;
        font-size: 13px !important;
        line-height: 1.75 !important;
    }
}


/* =========================================================
   STANDARD SECTION SPACING (TOP + BOTTOM)
   Desktop: 100px | Tablet: 70px | Mobile: 50px
   Paste at END of stylesheet
   ========================================================= */


/* IMPORTANT:
   Full-bleed hero banners usually sit flush at top.
   If you DO want spacing for them too, remove these two lines. */

.commercial-solar-panel .tpl-banner,
.tpl-banner.tpl-banner--ind-ban {
    margin-top: 0;
    margin-bottom: 0;
}


/* Tablet */

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types,
    .tpl-stepsgrid--use2sec3,
    .tpl-imgleft--use3sec1,
    .tpl-imageonly,
    .tpl-faq,
    .tpl-imgleft.tpl-imgleft--ind-sec1,
    .tpl-imgleft.tpl-imgleft--ind-sec2,
    .tpl-stepsgrid.tpl-stepsgrid--ind1sec3 {
        margin-top: 0px;
        padding: 70px 30px 70px;
        gap: 16px
    }
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card {
    padding: 40px 30px;
}


/* Mobile */

@media (max-width: 767px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types,
    .tpl-imgleft--use3sec1,
    .tpl-imageonly,
    .tpl-faq,
    .tpl-imgleft.tpl-imgleft--ind-sec1,
    .tpl-imgleft.tpl-imgleft--ind-sec2,
    .tpl-stepsgrid.tpl-stepsgrid--ind1sec3 {
        margin-top: 0px;
        padding: 50px 20px 50px;
    }
}

@media (min-width: 768px) and (max-width: 779px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types,
    .tpl-stepsgrid--use2sec3,
    .tpl-imgleft--use3sec1,
    .tpl-imageonly,
    .tpl-faq,
    .tpl-imgleft.tpl-imgleft--ind-sec1,
    .tpl-imgleft.tpl-imgleft--ind-sec2,
    .tpl-stepsgrid.tpl-stepsgrid--ind1sec3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 50px 20px 50px !important;
    }
}

.commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .tpl-stepsgrid__card {
    padding: 30px 30px;
}


/* Tablet (<=1199px) */

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-stepsgrid__grid {
        gap: 16px !important;
    }
}


/* Mobile (<=767px) */

@media (max-width: 991px) {
    .commercial-solar-panel .tpl-stepsgrid__grid {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }
}


/* =========================================================
   FIX EXTRA WHITESPACE @ 768–779px
   (row gutters + first/last child margins + overflow safety)
   Paste at END of stylesheet
   ========================================================= */

@media (min-width: 768px) and (max-width: 779px) {
    /* 1) Kill horizontal overflow (common "white space" cause) */
    html,
    body {
        overflow-x: hidden !important;
    }
    /* 2) Bootstrap row gutters can create side whitespace in full-bleed */
    .commercial-solar-panel .row,
    .tpl-imageonly .row,
    .tpl-faq .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Optional: if your theme adds extra container padding, tighten it */
    .commercial-solar-panel .container,
    .tpl-imageonly .tpl-imageonly__inner,
    .tpl-faq .tpl-faq__inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* 3) Remove top/bottom margin collapse inside sections */
    .commercial-solar-panel .tpl-imgleft> :first-child,
    .commercial-solar-panel .tpl-steps4> :first-child,
    .commercial-solar-panel .tpl-types2x2> :first-child,
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types> :first-child,
    .tpl-stepsgrid--use2sec3> :first-child,
    .tpl-imgleft--use3sec1> :first-child,
    .tpl-imageonly> :first-child,
    .tpl-faq> :first-child,
    .tpl-imgleft.tpl-imgleft--ind-sec1> :first-child,
    .tpl-imgleft.tpl-imgleft--ind-sec2> :first-child,
    .tpl-stepsgrid.tpl-stepsgrid--ind1sec3> :first-child {
        margin-top: 0 !important;
    }
    .commercial-solar-panel .tpl-imgleft> :last-child,
    .commercial-solar-panel .tpl-steps4> :last-child,
    .commercial-solar-panel .tpl-types2x2> :last-child,
    .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types> :last-child,
    .tpl-stepsgrid--use2sec3> :last-child,
    .tpl-imgleft--use3sec1> :last-child,
    .tpl-imageonly> :last-child,
    .tpl-faq> :last-child,
    .tpl-imgleft.tpl-imgleft--ind-sec1> :last-child,
    .tpl-imgleft.tpl-imgleft--ind-sec2> :last-child,
    .tpl-stepsgrid.tpl-stepsgrid--ind1sec3> :last-child {
        margin-bottom: 0 !important;
    }
    /* 4) Make sure media never pushes layout wider */
    img,
    video {
        max-width: 100% !important;
        height: auto;
    }
}


/* ================================
   ROOFTOP SOLAR - MAXIMIZE SAVINGS
================================ */

.rt-maximize {
    background-image: url("<?php echo get_template_directory_uri(); ?>/assets/images/imageonly.png");
    background-size: cover;
    background-position: center;
    position: relative;
    /* fallback yellow */
    padding: 100px;
}


/* Heading */

.rt-maximize h2 {
    color: #000;
    font-family: Comfortaa;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 30px;
}


/* Text */

.rt-maximize p {
    color: #000;
    font-family: Comfortaa;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.rt-maximize p:last-child {
    margin-bottom: 0;
    color: #000;
}

.maximize-link {
    color: var(--LINK, #337AB7);
    font-family: Comfortaa;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.maximize-link:hover {
    color: rgb(232, 255, 30);
    /* BLUE on hover */
}


/* Responsive */

@media (max-width: 900px) {
    .rt-maximize {
        padding: 4.5rem 1.5rem;
    }
    .rt-maximize__overlay {
        padding: 3rem 1.5rem;
    }
}


/* =========================================================
   GLOBAL SECTION SPACING AUTHORITY
   (Single source of truth – overrides everything safely)
   ========================================================= */


/* Applies to ANY section inside commercial-solar-panel */

.commercial-solar-panel .tpl-imgleft,
.commercial-solar-panel .tpl-steps4,
.commercial-solar-panel .tpl-types2x2,
.commercial-solar-panel .tpl-imageonly,
.commercial-solar-panel .tpl-faq {
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}


/* -------------------------
   1199 – 922
   70px 30px
-------------------------- */

@media (max-width: 1199px) and (min-width: 922px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-imageonly,
    .commercial-solar-panel .tpl-faq {
        padding: 70px 30px !important;
    }
}


/* -------------------------
   991 – 768
   70px 30px
-------------------------- */

@media (max-width: 991px) and (min-width: 768px) {
    .commercial-solar-panel>section,
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-imageonly,
    .commercial-solar-panel .tpl-faq {
        padding: 70px 30px !important;
    }
}


/* -------------------------
   767 – 576
   50px 20px
-------------------------- */

@media (max-width: 767px) and (min-width: 576px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-imageonly,
    .commercial-solar-panel .tpl-faq {
        padding: 50px 20px !important;
    }
    .commercial-solar-panel>section {
        padding: 0px 20px 50px !important;
    }
}


/* -------------------------
   ≤ 575
   50px 20px
-------------------------- */

@media (max-width: 575px) {
    .commercial-solar-panel .tpl-imgleft,
    .commercial-solar-panel .tpl-steps4,
    .commercial-solar-panel .tpl-types2x2,
    .commercial-solar-panel .tpl-imageonly,
    .commercial-solar-panel .tpl-faq {
        padding: 50px 20px !important;
    }
    .commercial-solar-panel>section {
        padding: 0px 20px 50px !important;
    }
}


/* -------------------------
   HARD STOP: no horizontal scroll
-------------------------- */

html,
body {
    overflow-x: hidden !important;
}

@media (max-width: 1199px) and (min-width: 922px) {
    .commercial-solar-panel .tpl-imgleft__p {
        width: 100% !important;
        max-width: 1349px;
    }
    .commercial-solar-panel .tpl-steps4 {
        padding: 0 30px 0px !important;
    }
    .rt-maximize h2 {
        width: 100%;
        max-width: 1045px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .commercial-solar-panel .tpl-imgleft__p {
        width: 100% !important;
        max-width: 1349px;
    }
    .commercial-solar-panel .tpl-steps4 {
        padding: 0 30px 0px !important;
    }
    .rt-maximize h2 {
        width: 100%;
        max-width: 1045px;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rt-maximize h2 {
        width: 100%;
        max-width: 931px;
    }
    .commercial-solar-panel .tpl-steps4 {
        padding: 0px 20px 0px !important;
    }
}

@media (max-width: 575px) {
    .rt-maximize h2 {
        width: 100%;
        max-width: 931px;
    }
    .commercial-solar-panel .tpl-steps4 {
        padding: 0px 20px 0px !important;
    }
}

.tpl-imgleft__p+.tpl-imgleft__p {
    margin-top: 16px !important;
}

.tpl-faq__summary h3,
.tpl-faq__question {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* =====================================================
   FAQ – HARD RESET FOR QUESTION TEXT
   (beats all global & heading rules)
===================================================== */

.tpl-faq__summary>h3.tpl-faq__question {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    font-family: Comfortaa, sans-serif !important;
    color: #ffffff !important;
    display: block !important;
}

@media (max-width: 1390px) {
    .commercial-solar-panel .tpl-imgleft__copy {
        width: auto;
    }
}

.rt-maximize__wrap {
    max-width: 1500px;
    margin: 0 auto;
}

@media (max-width: 1920px) {
    .commercial-solar-panel .tpl-imgleft__copy {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-stepsgrid__grid.tpl-stepsgrid__grid--types {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__title {
        font-size: 35 !important;
    }
    .commercial-solar-panel .tpl-banner__title {
        font-size: 45px !important;
    }
}

@media (max-width: 767px) {
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 .tpl-imgleft__title {
        font-size: 30 !important;
    }
    .commercial-solar-panel .tpl-banner__title {
        font-size: 40px !important;
    }
}

@media (max-width: 1199px) {
    .commercial-solar-panel .tpl-imgleft .commercial-solar-panel .tpl-stepsgrid.tpl-stepsgrid--types .commercial-solar-panel .tpl-faq .commercial-solar-panel .tpl-imgleft .commercial-solar-panel section .commercial-solar-panel section .commercial-solar-panel .tpl-steps4 {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 70px;
    }
    .commercial-solar-panel .tpl-imgleft.tpl-imgleft--use2 {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 70px;
        padding-bottom: 0;
    }
    .commercial-solar-panel .tpl-steps4__inner {
        padding-bottom: 70px;
    }
    .rt-maximize {
        padding: 70px 30px 70px !important;
    }
}