/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --vbn-navy: #0E2A47;
    --vbn-green: #0FA37F;
    --vbn-white: #FFFFFF;
    --vbn-black: #111111;
    --vbn-font-title: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vbn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vbn-brand-title {
    font-family: var(--vbn-font-title) !important;
    font-weight: 700;
}

.vbn-brand-subtitle {
    font-family: var(--vbn-font-body) !important;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/*Header logo width set*/
#Top_bar #logo img {
    vertical-align: middle;
    max-height: 100%;
    width: 200px;
}

/*Thems buttons color*/
.button-round input[type="submit"],
a.button.button_size_2.button_theme {
    background-color: #0E2A47;
}

.col-cta {
    background-color: #939598;
    padding: 30px 0px !important;
    margin: 0 !important;
    text-align: center;
}

.col-cta .section_wrapper .mcb-wrap.two-third {
    width: 100%;
    height: auto !important;
}

.col-cta .section_wrapper .mcb-wrap.one-third {
    width: 100%;
    height: auto !important;
}

.col-cta .section_wrapper .mcb-wrap.two-third .one.column {
    width: 100%;
    margin: 0;
    padding: 0;
    float: unset;
}

.col-cta .section_wrapper .mcb-wrap.one-third .mcb-wrap-inner .one.column_column {
    margin: 0;
    padding: 0;
    text-align: center;
    float: unset;
}

.col-cta .section_wrapper .mcb-wrap.two-third .one.column h4 {
    color: #ffffff;
    letter-spacing: 0px;
    margin-bottom: 20px;
}

.col-cta .section_wrapper .mcb-wrap.one-third .mcb-wrap-inner .one.column_column a.button {
    display: block;
    max-width: 200px;
    margin: 0 auto;
}

/* Memu items uppercase*/
#Top_bar .menu>li {
    text-transform: capitalize;
}

/* Memu items buy now btn hide*/
.extras {
    display: none;
}

body:not(.template-slider) #Header_wrapper {
    background-position: bottom right;
}

#Subheader {
    padding: 120px 0;
}


/* 17-11-2021 */

h2 {
    line-height: 55px !important;
}

.co_operation-center p {
    margin-bottom: 0;
}

.hero-heading h1 {
    padding-left: 200px;
    color: #ffffff;
}

.coi_top-banner {
    position: relative;
}

.coi_top-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.5;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.coi_top-banner h1 {
    text-align: center;
    margin: auto;
    padding: 8px 30px;
    line-height: 1.3;
}

/* for tablet*/

/* 23-11-2021 Css */
#Content+.cb__contactform {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    transform: translate(-50%, -50%);
    overflow: auto;
}

#Content+.cb__contactform .cb__contactform_wrap {
    background-color: #ffffff;
    max-width: 600px;
    margin: 50px auto;
    display: block;
    padding: 15px;
    position: relative;
}

#Content+.cb__contactform .cb__contactform_wrap .cb__cf_popup_close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9;
}

#Content+.cb__contactform form#contact-details br {
    display: none;
}

#Content+.cb__contactform form#contact-details br {
    display: none;
}

#Content+.cb__contactform .cb__contactform_wrap label {
    color: #222222;
    font-size: 16px;
}

#Content+.cb__contactform .cb__contactform_wrap input:not([type="submit"]) {
    display: block;
    width: 100%;
    margin: 0px 0px 10px;
    background-color: #ffffff !important;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}

#Content+.cb__contactform .cb__contactform_wrap input[type="submit"] {
    display: block;
    margin: 20px 0 30px;
    line-height: 1.2;
    padding: 12px;
    min-width: 90px;
    font-size: 18px;
}

#Content+.cb__contactform .cb__contactform_wrap table {
    box-sizing: border-box;
    margin: 0;
}

#Content+.cb__contactform .cb__contactform_wrap table tr td {
    box-shadow: none;
    background-color: #ffffff;
    text-align: left;
    padding: 10px 15px;
    line-height: 1.2;
    width: 50%;
}

#Content+.cb__contactform .cb__contactform_wrap table tr td select {
    margin: 0;
    display: block;
    width: 100%;
    margin: 0px 0px 10px;
    background-color: #ffffff !important;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}

#Content+.cb__contactform .cb__contactform_wrap table tr td input,
#Content+.cb__contactform .cb__contactform_wrap table tr td select {
    margin: 0px !important;
    min-width: 50%;
}

/*29-11-2021*/
header#Header .container {
    max-width: 100%;
}

#Top_bar #logo img {
    width: 230px !important;
}

/*30-11-2021 Css*/

.co_icon-box .mcb-section-inner .mcb-wrap-inner {
    display: flex;
    flex-wrap: wrap;
}

.co_icon-box .mcb-section-inner .mcb-wrap-inner .column.column_icon_box .image_wrapper img {
    height: 300px !important;
    object-fit: cover;
}

/* Side-slide is disabled — these are safety fallbacks */
body.side-slide-is-open {
    overflow: auto !important;
    height: auto !important;
    position: static !important;
}

.coi_top-banner {
    position: relative;
    background-size: cover;
}

.section.mcb-section.mcb-section-luvkpmlsz {
    padding-top: 20px;
}

.section.mcb-section .mcb-section-inner .wrap.mcb-wrap.move-up .column_column .image_frame.image_item img {
    height: 50px !important;
    width: auto !important;
}

form .wpcf7-response-output {
    color: #fff;
    border: 1px solid #ed3b2e !important;
}

body:not(.cf7p-message) .wpcf7-not-valid-tip:before {
    right: unset;
    left: -5px;
}

body:not(.cf7p-message) .wpcf7-not-valid-tip {
    left: unset !important;
    right: 0;
}

#Content {
    width: 100%;
    padding-top: 0;
}

.mobile-header-mini #Top_bar #logo {
    margin: 0px 0px 10px;
    padding: 0px;
}

#Top_bar .menu>li>a {
    padding: 0px;
}

input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    background-color: rgb(255 255 255) !important;
}

#Top_bar.is-sticky #logo img.logo-sticky {
    object-fit: contain;
}

@media only screen and (max-width: 959px) {
    header#Header #Top_bar .column.one .top_bar_left {
        width: 100%;
    }

    .blog-teaser li .desc-wrapper .desc .post-title h4,
    .blog-teaser li .desc-wrapper .desc .post-title h3 {
        line-height: 1.2;
    }

    .blog-teaser li .desc-wrapper .desc .post-title a {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .co_icon-box .mcb-section-inner .mcb-wrap-inner .column.column_icon_box .image_wrapper img {
        height: auto !important;
        object-fit: unset;
    }

    footer#Footer .widgets_wrapper .column.one-third {
        /* the parent theme floats these at a fixed 33.3% and never tells them
           to stack below this width — centring the text alone still left two
           narrow columns side by side, each too tight for an address line or
           a heading like "Operations Centers" to fit, so it ran off the edge
           of the screen instead of wrapping */
        float: none;
        width: 100%;
        /* the parent theme's own column rule adds 15px of right padding with
           no box-sizing, so even at 100% this would still run 15px past the
           edge without this */
        box-sizing: border-box;
        text-align: center;
    }

    footer#Footer .widgets_wrapper .column.one-third .textwidget,
    footer#Footer .widgets_wrapper .column.one-third h4 {
        overflow-wrap: break-word;
    }

    footer#Footer .widgets_wrapper .column.one-third ul.wp-block-social-links {
        margin: 0 auto;
        float: unset;
    }

    footer#Footer .widgets_wrapper .column.one-third .footer-link {
        float: unset !important;
    }

    footer#Footer .widgets_wrapper .column.one-third .wp-block-image figure {
        margin: 0 auto;
    }

    #Footer .widgets_wrapper {
        padding: 30px 0 30px;
    }

    .section_wrapper,
    .container,
    .four.columns .widget-area {
        max-width: calc(100%) !important;
    }

    .testimonials_slider .testimonials_slider_ul li {
        padding: 10px;
    }

}

@media only screen and (max-width: 770px) {

    h2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

}


/* for mobile*/
@media only screen and (max-width: 480px) {

    h2 {
        font-size: 24px !important;
        line-height: 40px !important;
    }

    figure.aligncenter.size-full.is-resized {
        margin: 0;
    }

    .footer-link {
        float: left !important;
    }

    #Footer .widgets_wrapper {
        padding: 20px 0;
    }

    .co_logo-slider .slider_navigation {
        text-align: center;
        width: 100%;
    }

    .co_partner-page-logo img {
        margin-bottom: 20px;
    }

    .co_our-team .desc {
        padding-right: 15px;
    }

    .hero-heading h1 {
        text-align: center;
        padding: 0;
    }

    .blog-teaser li .desc-wrapper .desc .post-title h4,
    .blog-teaser li .desc-wrapper .desc .post-title h3 {
        line-height: 1;
    }

    .blog-teaser li .desc-wrapper .desc .post-title a {
        font-size: 14px;
    }

    .blog-teaser li .desc-wrapper .desc {
        padding: 70px 10px 15px;
    }

    .blog-teaser li .desc-wrapper .desc .post-title h4 a {
        line-height: 1.4;
    }
}

.co_sub-newsletter {
    display: flex;
    justify-content: center;
    background: #0E2A47;
    padding: 50px 100px;
    align-items: center;
}

.co_sub-newsletter .co__second-col input {
    width: 97%;
}

.co_sub-newsletter .newsletter-form input {
    padding: 15px 15px;
}

.co_sub-newsletter .co_col {
    flex: 0 0 40%;
}

.co_sub-newsletter .co__first-col input {
    flex: 0 0 calc(50% - 20px);
}

.co_sub-newsletter .co__first-col input:last-child {
    margin-right: 0;
}

.co_sub-newsletter .co_col h3 {
    color: #fff;
}

.co_sub-newsletter .co_col p {
    color: #b3b3b3;
    font-size: 18px;
    margin-bottom: 15px;
}

.co_sub-newsletter input[type="submit"]:focus {
    color: #111111;
}

.co_sub-newsletter input[type="submit"] {
    border: 1px solid #fff;
    padding: 20px 50px 15px;
    background-color: transparent;
    margin-top: 20px;
}

#Footer .widgets_wrapper {
    padding: 50px 0 0;
}

.co_empower-section .co_empower-col-one {
    text-align: center;
}

.co_empower-section .co_empower-col-one .column_attr {
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}

.co_empower-section .co_empower-col-third .column_attr {
    display: inline-block;
    float: right;
}

/*Contact form design*/
.co_contact-form {
    display: flex;
    flex-wrap: wrap;
}

.co_contact-form .co_cf-input {
    padding: 7px;
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
}

/*.co_contact-form .co_cf-input:nth-child(1), .co_contact-form .co_cf-input:nth-child(2) {*/
/*    flex: 0 0 50%;*/
/*    max-width: 50%;*/
/*}*/
.co_contact-form .co_cf-input .wpcf7-form-control-wrap {
    margin: 0;
    display: block;
}

.co_contact-form .co_cf-input input,
.co_contact-form .co_cf-input textarea {
    background-color: #ffffff !important;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 15px;
}

.co_contact-form .co_cf-input+p {
    margin-top: 20px;
    text-align: left;
}

.co_contact-form .co_cf-input+p input.wpcf7-submit {
    padding: 15px;
    min-width: 150px;
}

.co_contact-form .co_cf-input+p input.wpcf7-submit:hover {
    opacity: 0.9;
}

.co_empower-section .column_column ul.list_check li::before {
    left: 0;
}

.co_empower-section .column_column ul.list_check li {
    padding-left: 30px;
}

.co_empower-section .column_column ul.list_check li::after {
    opacity: 0;
}

.co_contact-form .co_cf-input:nth-last-child(2) {
    flex: 0 0 100%;
    max-width: 100%;
}

/*Reqest demo popup design*/

.co_req-demo-form {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    transform: translate(-50%, -50%);
    overflow: auto;
}

.co_req-demo-form .co_req-demo-wrap {
    background-color: #ffffff;
    max-width: 600px;
    margin: 50px auto;
    display: block;
    padding: 15px 15px 15px;
    position: relative;
}

.co_req-demo-form .co_req-demo-wrap .co_req-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9;
}

.co_req-demo-form .co_req-demo-wrap br {
    display: none;
}

.co_req-demo-form .co_req-demo-wrap label {
    color: #222222;
    font-size: 16px;
}

.co_req-demo-form .co_req-demo-wrap input:not([type="submit"]) {
    display: block;
    width: 100%;
    margin: 0px 0px 10px;
    background-color: #ffffff !important;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}

.co_req-demo-form .co_req-demo-wrap input[type="submit"] {
    display: block;
    margin: 20px 0 30px;
    line-height: 1.2;
    padding: 12px;
    min-width: 90px;
    font-size: 18px;
}

.co_req-demo-form .co_req-demo-wrap .co_contact-form .co_cf-input+p {
    margin: 0;
}

/*slider banner Css*/
.mfn-main-slider.mfn-layer-slider .ls-slide-backgrounds::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 10;
    opacity: 0.6;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out {
    width: 100% !important;
    justify-content: center;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: unset;
    text-align: center !important;
    word-break: break-word;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer {
    width: 100% !important;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap h2 {
    color: #ffffff;
    white-space: normal;
    line-height: 1.3 !important;
    padding: 0 15px;
    max-width: 950px;
    margin: 0 auto;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap h2 span {
    color: #0FA37F;
    display: block;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li {
    flex: 0;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li input {
    font-size: 22px;
    padding: 10px 25px;
    height: auto;
    line-height: 1.2;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li {
    flex: 0;
    height: auto;
    display: flex;
    margin: 0 12px;
    align-items: center;
}

.mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li a.request-demo {
    color: #ffffff;
    background-color: #0E2A47;
    font-weight: 400;
    font-size: 22px !important;
    font-family: "donaregular", Helvetica, Arial, sans-serif;
    line-height: 1.2;
    padding: 10px 20px;
    border-radius: 50px;
}

body.page-id-488 .pum.pum-theme-lightbox .pum-container.popmake {
    border: none !important;
}

body.page-id-488 .pum.pum-theme-lightbox .pum-container.popmake * {
    outline: none;
    border: none;
    box-shadow: none;
}

#Content+.cb__contactform .cb__contactform_wrap h3,
.co_req-demo-form .co_req-demo-wrap .co_req-demo h3 {
    font-size: 20px;
    margin: 0 0 20px;
    line-height: 1.2;
    padding-bottom: 15px;
    border-bottom: 1px solid #dddddd;
    display: block;
}

.co_optimize-logo img {
    width: 500px !important;
}

body #Content+.cb__contactform .cb__contactform_wrap .cal-result h3 {
    font-size: 18px;
    line-height: 1.2;
    margin: 18px 0 8px;
    border: none;
    padding: 0 0 8px;
}

body #Content+.cb__contactform .cb__contactform_wrap .cal-result p {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 10px;
}

/* 14-12-2021 Css */
.co_demand-mng .mcb-wrap-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.co_parterns-logo .mcb-wrap-inner .column.column_image .image_wrapper img {
    min-height: 50px !important;
    width: auto;
    max-width: 100% !important;
}

.fancy_heading .title {
    font-size: 34px;
    line-height: 1.2 !important;
}

.co_btm-service ul li i {
    font-size: 0px;
    position: absolute;
    top: 7px;
    left: -30px;
    width: 12px;
    height: 12px;
    background-color: #0FA37F;
    border-radius: 50px;
}

.co_btm-service ul li {
    position: relative;
}

body .col-custom-menu-wrap {
    display: none;
}

body.mobile-header-mini #Top_bar #logo {
    margin: 0px 0px 0px;
}

ul#menu-main-menu li a span {
    text-transform: none;
}

/*15-12-2021 Css*/
.co_sub-newsletter .co_col {
    text-align: center;
}

.co_sub-newsletter .co_col h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 12px;
    font-size: 28px;
}

.co_sub-newsletter .co_col p {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

.co_sub-newsletter .co_col ul.social {
    display: block;
    margin-top: 30px;
}

.co_sub-newsletter .co_col ul.social li {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin: 0 2px;
}

.co_sub-newsletter .co_col ul.social li a {
    background-color: #ffffff;
    padding: 0;
    font-size: 18px;
    color: #0e244a;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co_sub-newsletter .co_col ul.social li a:hover {
    background-color: #0E2A47;
    color: #ffffff;
    transition: all 0.1s ease-in-out;
}

.co_sub-newsletter .co_col:nth-child(1) {
    border-right: 3px solid #0E2A47;
}

.co_buildings_sec {
    background-color: #fbfbfb;
    padding-top: 40px;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box {
    padding: 0 15px 10px;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box>a {
    position: relative;
    display: block;
    border: 8px solid #0E2A47;
    border-radius: 7px;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box>a .image_wrapper img {
    width: 100%;
    height: 200px !important;
    display: block;
    object-fit: cover;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box>a .desc_wrapper {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box>a .desc_wrapper h4.title {
    padding: 8px 20px;
    margin: 0;
    line-height: 1.2;
    background-color: #0E2A47;
    color: #ffffff;
    display: inline-block;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 300 !important;
    letter-spacing: 1px;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box .icon_box>a .image_wrapper {
    margin: 0;
}

.co_buildings_sec .mcb-wrap-inner .column.column_icon_box {
    float: unset;
    display: inline-block;
}

.co_buildings_sec .mcb-wrap-inner {
    text-align: center;
}

/*16-12-2021 Css*/
.co_empower-section {
    /*     padding: 50px 0; */
}

.co_empower-section .section_wrapper .column_image .image_wrapper img {
    width: auto !important;
    /*max-width: 350px !important;*/
}

.co_empower-section .section_wrapper .column.column_column {
    text-align: center;
    margin-bottom: 20px;
}

.co_empower-section .section_wrapper .column.column_column .column_attr {
    text-align: center;
    font-size: 18px;
    color: #000000;
    width: 100%;
    display: block;
}

.co_empower-section .section_wrapper .column.column_column .column_attr h3 {
    color: #ffffff;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.co_empower-section .section_wrapper .column.column_column .column_attr h3 a {
    color: #ffffff;
    background-color: #333333;
    display: block;
    width: 100%;
    font-size: 20px;
    padding: 10px;
}

.co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check {
    margin: 0;
}

.co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check li {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    padding: 10px;
    color: #000000;
    background-color: #e8e8e8;
}

.co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check li:nth-child(even) {
    background-color: #d7d7d7;
}

.co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check li::before,
.co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check li::after {
    display: none;
}

.co_news-sec-img .co_new-sec-content {
    position: relative;
    top: 50px;
}

.co_footer-address p {
    line-height: 1;
}

.co_location_infobox .co_location_left p {
    line-height: 1;
}

.co_location_infobox .co_location_left hr {
    margin: 0 !important;
}

footer#Footer {
    background-color: #0E2A47;
    color: #ffffff;
}

footer#Footer h4 {
    color: #ffffff;
}

footer#Footer a {
    color: #ffffff;
}

#Footer .footer_copy .social li a,
#Footer .footer_copy .social-menu a {
    color: #ffffff;
}

footer#Footer .column>aside.widget.widget_media_image>figure>img {
    background-color: #ffffff;
    padding: 18.37px;
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
}

footer#Footer::before {
    content: "";
    position: absolute;
    left: -100px;
    background-image: url(/wp-content/uploads/vbn-logos/vbn-icon-reverse-white-1080.svg);
    z-index: 0;
    background-size: contain;
    background-position: center;
    width: 390px;
    height: 390px;
    visibility: visible;
    bottom: -130px;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

footer#Footer .footercentImgSec {
    padding: 40px 0;
}

footer#Footer .footercentImgSec .footercenterImg {
    text-align: center;
}

footer#Footer .footercentImgSec .footercenterImg img {
    width: 100%;
    max-width: 550px;
    height: auto;
}

.co_whycoi_blog .section_wrapper .column_icon_box.icon {
    margin-bottom: 0px;
}

.co_whycoi_blog .section_wrapper .column_icon_box .icon_box .image_wrapper img {
    height: 80px !important;
    width: auto;
}

.co_whycoi_blog .section_wrapper .column_icon_box.icon .icon_box {
    position: relative;
    padding: 0;
    min-height: auto;
    display: flex;
    align-items: center;
}

.co_whycoi_blog .section_wrapper .column_icon_box.icon .icon_box .image_wrapper {
    position: relative;
    top: 0;
    width: auto;
    height: auto;
    padding-right: 20px;
    flex: 0 0 80px;
    max-width: 80px;
}

.co_whycoi_blog .section_wrapper .column_icon_box.icon .icon_box .desc_wrapper {
    flex: auto;
}

.co_cal-form {
    background-color: #ffffff;
    padding: 40px 15px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details {
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 0px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3 {
    color: #0FA37F;
    margin: 0 0 50px;
    font-size: 46px;
    line-height: 1.2;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top .co_form_field {
    flex: 0 0 50%;
    max-width: calc(50% - 20px);
    margin: 0 10px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top .co_forn_submitbtn {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-top: 30px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top .co_form_field label {
    color: #999999;
    font-size: 18px;
    line-height: 1.2;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top .co_form_field input {
    width: 100%;
    padding: 12px;
    line-height: 1.2;
    border: 1px solid #e7e7e7;
    background-color: #ffffff;
    border-radius: 4px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details .co_form_top .co_forn_submitbtn input#formsubmit {
    margin: 0;
    border-radius: 4px;
    padding: 12px;
    font-size: 22px;
    min-width: 150px;
    letter-spacing: 0.5px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form {
    padding: 15px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td {
    box-shadow: none;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td:nth-child(1) {
    width: 45%;
    text-align: right;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td:nth-child(2) {
    width: 35%;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td:nth-child(3) {
    width: 15%;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td input,
.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td select {
    margin: 0;
    width: 100%;
    padding: 10px;
    border: 1px solid #e7e7e7;
    background-color: #ffffff;
    border-radius: 4px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td select {
    padding-right: 30px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td a {
    background: #ffffff;
    padding: 10px;
    font-size: 18px;
    background-color: #0E2A47;
    color: #ffffff;
    display: inline-block;
    padding: 6px 30px;
    border-radius: 3px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td input#calculate {
    background-color: #0E2A47;
    font-size: 20px;
    display: block;
    max-width: 220px;
    margin: 30px auto;
    border: none;
    padding: 17px 10px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in input#send-mail,
.co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in>a {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    border: 1px solid #dddddd;
    border-radius: 50px;
    margin: 0 10px 10px;
    background-color: #0FA37F;
    color: #ffffff !important;
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
}

.co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h3 {
    font-size: 34px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap .cal-result p {
    font-size: 30px;
    margin: 0 0 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #555555;
}

.co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h2 {
    font-size: 20px;
    margin: 0 0 4px;
    color: #0FA37F;
    font-weight: 400;
    font-family: donaregular, Helvetica, Arial, sans-serif;
    line-height: 1.2 !important;
    border-top: 1px solid #dddddd;
    padding-top: 15px;
}

.co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h2:nth-child(4) {
    border-top: none;
}

.work_icon .image_frame.image_item .image_wrapper {
    text-align: center;
}

.work_icon .image_frame.image_item .image_wrapper img {
    height: 65px !important;
    width: auto !important;
}

.co_kwforgood_sec .column.one.column_column {
    margin: 0;
}

.co_kwforgood_sec .column.column_icon_box .icon_box {
    min-height: auto;
    padding: 0;
    padding-left: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.co_kwforgood_sec .column.column_icon_box .icon_box .image_wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.co_kwforgood_sec .column.column_icon_box .icon_box .desc_wrapper {
    color: #ffffff;
}

.co_kwforgood_sec .column.column_icon_box .icon_box .desc_wrapper h6.title {
    margin: 0 0 10px;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
}

.co_kwforgood_sec .column.column_icon_box .icon_box .desc_wrapper .desc {
    text-align: left;
}

/*17-12-2021 Css*/
.news_article .column_feature_box.article .feature_box {
    border: 1px solid #555555;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    background-color: #ffffff;
}

.news_article .column_feature_box.article .feature_box .feature_box_wrapper {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff !important;
    padding: 15px;
}

.feature_box .feature_box_wrapper .photo_wrapper {
    width: 40%;
}

.news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper {
    width: 60%;
    padding-left: 15px;
}

.news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper h4 {
    font-size: 16px;
    line-height: 1.2;
}

.news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper .desc {
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.feature_box .feature_box_wrapper .photo_wrapper img {
    width: 100%;
}

.coi_top-banner h1.co_aboutebanner_title svg {
    padding: 15px;
}

.coi_top-banner h1.co_aboutebanner_title {
    background-color: #ffffff;
    width: calc(100% - 50px);
    max-width: 800px;
    padding: 0;
    line-height: 1;
}

.coi_top-banner h1.co_aboutebanner_title svg path {
    fill: #0E2A47;
}

.co_footer-address.co_footer-address_cen {
    display: block;
    text-align: left;
    max-width: 250px;
    margin-left: auto;
}

footer#Footer .column.one-third aside.widget.widget_block .wp-block-column {
    text-align: center;
}

/*18-12-2021 Css*/

.co_form_top #Required-contact-details {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 10px;
}

.co_howitwork_blog .section_wrapper .wrap.mcb-wrap>.mcb-wrap-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.section .column_attr .co_how-cal-btn a {
    background-color: #0FA37F;
    color: #ffffff;
    font-size: 16px;
    padding: 14px 40px;
    display: inline-block;
    border-radius: 50px;
    text-transform: capitalize;
    line-height: 1.2;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
    border: none;
}

.banner_button {
    padding: 10px 38px !important;
}

.co_cst-slider {
    height: auto;
    margin: 0 0 90px;
    position: relative;
    background-image: url(https://wppremiumplugins.com/COI_Energy_Identity/wp-content/uploads/2021/12/col-backsliders.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0px;
}

.co_cst-slider .section_wrapper .content_slider_ul {
    border: none;
}

.co_cst-slider .section_wrapper .content_slider_ul .slick-slide li img {
    height: 350px !important;
    width: auto;
}

.mc4wp-response .mc4wp-alert.mc4wp-error p {
    color: red;
    text-align: left;
}

.co_sub-newsletter .mc4wp-response .mc4wp-alert.mc4wp-error p {
    margin: 20px 0 0;
}

.co_about_corevalues .column .column_attr ul {
    margin-left: 0;
}

.co_about_corevalues .column .column_attr ul li i {
    font-size: 22px;
}

.co_about_corevalues .column .column_attr ul li i::before {
    margin: 0;
    text-align: left;
    width: 15px;
}

.co_partner-page-logo .column .image_frame.image_item img {
    height: 60px !important;
    width: auto;
    max-height: 100%;
}

.pum-theme-664 .pum-container,
.pum-theme-lightbox .pum-container {
    border: none;
    box-shadow: 0px 0px 30px -30px rgb(2 2 2);
}

.co_cal-form .cb__contactform h3 .co__info-text {
    position: relative;
    font-size: 32px;
}

.co_cal-form .cb__contactform h3 .co__info-text i.fa {
    cursor: pointer;
}

.co_cal-form .cb__contactform h3 .co__info-text p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    font-family: "donaregular", Helvetica, Arial, sans-serif;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #ffffff;
    padding: 7px;
    line-height: 1.2;
    min-width: 440px;
    border-radius: 4px;
    border: 1px solid #dddddd;
    box-shadow: 0px 0px 7px 0px #d7d7d7;
    color: #999999;
    display: none;
    z-index: 99;
    text-align: left;
}

.co_cal-form .cb__contactform h3 .co__info-text p::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: -6px;
    left: 50%;
    background-color: #ffffff;
    transform: translate(-50%, 0%) rotate(45deg);
    z-index: -1;
    border: 1px solid #ddd;
    border-bottom-color: #ffffff;
    border-right-color: #fff;
}

.co_cal-form .cb__contactform h3 .co__info-text:hover p {
    display: block;
}

.healthcare_emergency .column_attr h4 {
    position: relative;
    padding-left: 20px;
}

.healthcare_emergency .column_attr h4 span {
    position: absolute;
    top: 0;
    left: 0;
}

.healthcare_emergency .column_attr h4 span i::before {
    margin: 0;
    padding: 0;
    width: 12px;
}

.co_cal-form .cb__contactform h3 .co__info-text p span i::before {
    width: 10px;
    height: 10px;
    background-color: #0FA37F;
    border-radius: 50px;
}

.co_optimizemrkt_sec .wrap.mcb-wrap {
    padding: 0px !important;
}

.section.co_energy-effi .wrap.mcb-wrap .column h3 {
    font-size: 22px;
    line-height: 1.4;
}

.section.co_energy-effi .wrap.mcb-wrap .column h4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    position: relative;
    padding-left: 30px;
}

.section.co_energy-effi .wrap.mcb-wrap .column h4>strong {
    margin-left: -30px;
}

.section.co_energy-effi .wrap.mcb-wrap .column h4>span:nth-child(1) {
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
}

/*==================================================================================================================*/
/*Media Query Css*/
/*==================================================================================================================*/
@media (min-width: 1420px) {
    .co_sub-newsletter .co_col:nth-child(2) {
        padding-left: 50px;
    }
}

@media (max-width: 1420px) {
    .co_sub-newsletter {
        padding: 40px 80px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .co_sub-newsletter .co_col {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 1239px) {
    .co_footer-address.co_footer-address_cen {
        max-width: 230px;
    }
}

@media (max-width: 1200px) {
    .co_sub-newsletter .co__first-col input {
        flex: 0 0 100%;
    }

    .co_sub-newsletter .co__second-col input {
        width: 100%;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3>span {
        position: relative;
        display: block;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3>span span.co__info-text {
        position: static;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3>span span.co__info-text p {
        width: 100%;
        min-width: 360px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3>span span.co__info-text:hover i.fa::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        top: calc(100% - -3px);
        left: 50%;
        background-color: #ffffff;
        transform: translate(-50%, 0%) rotate(45deg);
        border: 6px solid #c8c8c8;
        border-bottom-color: transparent;
        border-right-color: transparent;
        z-index: 99;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3>span span.co__info-text i.fa {
        position: relative;
    }

    .co_cal-form .cb__contactform h3 .co__info-text p::before {
        opacity: 0;
    }

}

@media (max-width: 959px) {

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in input#send-mail,
    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in>a {
        flex: 0 0 calc(25% - 6px);
        max-width: calc(25% - 6px);
        margin: 0 3px 10px;
        font-size: 16px;
        line-height: 1.2;
        padding: 12px 5px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#contact-details h3 {
        font-size: 36px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap .cal-result p {
        font-size: 24px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h2 {
        font-size: 18px;
    }

    .feature_box .feature_box_wrapper .photo_wrapper {
        width: 100%;
    }

    .feature_box .feature_box_wrapper .photo_wrapper img {
        width: auto;
        height: 160px !important;
    }

    .news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }

    .co_empower-section .section_wrapper .column.column_column .column_attr ul.list_check li {
        font-size: 18px;
    }

    .work_icon .image_frame.image_item .image_wrapper img {
        max-width: 100% !important;
    }

    .team .desc_wrapper h4+.subtitle {
        min-height: 42px;
        line-height: 1.4;
    }

    /*24-12-2021 Css*/

    .co_footer-address.co_footer-address_cen {
        max-width: 195px;
    }
}

@media (min-width: 767px) {
    .section.co_energy-effi .section_wrapper.mcb-section-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .co_sub-newsletter .co_col {
        flex: 0 0 100%;
        margin-top: 20px
    }

    .co_sub-newsletter {
        padding: 40px;
    }

    .mobile-header-mini #Top_bar #logo {
        margin: 10px auto;
        padding: 0px;
        text-align: left;
        padding-left: 16px !important;
    }

    .mobile-header-mini #Top_bar a.responsive-menu-toggle {
        top: 27px !important;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out {
        top: 35% !important;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li a.request-demo {
        font-size: 16px !important;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li input {
        font-size: 16px;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap h2 {
        font-size: 24px !important;
    }

    .co_sub-newsletter .co_col:nth-child(1) {
        border-right: none;
        margin: 0 0 30px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in input#send-mail,
    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in>a {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr.co_btn_section .co_btn_section_in {
        padding: 10px 0;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td {
        box-shadow: none;
        padding: 12px 12px;
        display: block;
        width: 100% !important;
        text-align: left !important;
        border-bottom: none;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h3 {
        font-size: 24px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap .cal-result p {
        font-size: 22px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap .cal-result h2 {
        font-size: 18px !important;
    }

    .co_cal-form {
        padding: 25px 0px;
    }

    .section_wrapper,
    .container,
    .four.columns .widget-area {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form {
        padding: 0px;
    }

    .co_cal-form .cb__contactform .cb__contactform_wrap form#quote-form table tr td input#calculate {
        margin: 10px auto;
        padding: 10px 10px;
    }

    .co_whycoi_blog .section_wrapper .wrap.co-icon-box {
        padding: 0 !important;
    }

    .feature_box .feature_box_wrapper .photo_wrapper {
        width: 40%;
    }

    .feature_box .feature_box_wrapper .photo_wrapper img {
        width: 100%;
        height: auto !important;
    }

    .news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper {
        width: 60%;
        padding-left: 15px;
        margin-top: 0px;
    }

    .co_news-sec-img.bg-cover {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .coi_top-banner {
        padding-top: 20vw !important;
        padding-bottom: 20vw !important;
    }

    .section.mcb-section.equal-height.news_article {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .section.mcb-section .section_wrapper .column .column_attr {
        padding-left: 0 !important;
    }

    footer#Footer .widgets_wrapper .column.one-third .footer-link>p {
        display: flex;
        flex-wrap: wrap;
        max-width: 400px;
        margin: 0 auto;
    }

    footer#Footer .widgets_wrapper .column.one-third .footer-link>p br {
        display: none;
    }

    footer#Footer .widgets_wrapper .column.one-third .footer-link>p a {
        flex: 0 0 50%;
        max-width: 50%;
        font-size: 20px;
        line-height: 1.8;
        text-align: left;
    }

    .section.mcb-section.mcb-section-66w97b4ej {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .co_footer-address.co_footer-address_cen {
        text-align: center;
    }

    .coi_top-banner .column.mcb-column .column_attr h1 {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 22px;
    }

    .work_icon .image_frame.image_item .image_wrapper {
        text-align: left;
        max-width: 260px;
        margin: 0 auto;
    }

    .co_industrial_blog .column.column_button,
    .co_industrial_blog .column.column_button .button_align,
    .co_industrial_blog .column .co_how-cal-btn {
        text-align: center;
    }

    .co_industrial_blog .column .co_how-cal-btn a {
        padding: 11px 21px;
    }

    .co_footer-address.co_footer-address_cen {
        text-align: center;
        margin: 0 auto;
    }

    .column_attr.align_justify {
        text-align: left;
    }

    .co_kwforgood_sec .section_wrapper .mcb-wrap .column.column_image {
        margin: 40px auto 0px;
        text-align: center;
    }

    .co_kwforgood_sec .section_wrapper .mcb-wrap .column.column_image .image_frame.image_item .image_wrapper {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .co_kwforgood_sec .section_wrapper .mcb-wrap .column.column_image .image_frame.image_item {
        width: 100%;
    }

    .co_marketplace_imgbox .section_wrapper .mcb-wrap-inner {
        display: flex;
        flex-wrap: wrap;
    }

    .co_marketplace_imgbox .section_wrapper .column.column_icon_box .icon_box {
        border: 1px solid #dddddd;
        height: 100%;
        padding: 0;
    }

    .co_marketplace_imgbox .section_wrapper .column.column_icon_box .icon_box .image_wrapper img {
        width: 100%;
        display: block;
    }

    .co_marketplace_imgbox .section_wrapper .column.column_icon_box .icon_box .desc_wrapper {
        padding: 0 15px 10px;
        line-height: 1.3;
    }

    footer#Footer .column>aside.widget.widget_media_image>figure>img {
        max-width: 300px;
    }

    footer#Footer::before {
        left: -90px;
        width: 350px;
        height: 350px;
        bottom: -170px;
    }

    .co_optimizemrkt_sec .wrap.mcb-wrap .column .column_attr {
        text-align: center;
    }
}

@media (max-width: 767px) {
    #Footer .widgets_wrapper .column.one-fourth {
        align-self: flex-start;
        width: fit-content !important;
    }

    .co_contact-form .co_cf-input {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .co_empower-section .co_empower-col-one {
        text-align: center;
    }

    .co_empower-section .co_empower-col-third .column_attr {
        float: left;
    }

    .co_empower-section .co_empower-col-one .column_attr {
        display: block;
    }
}

@media (max-width: 575px) {
    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap h2 {
        font-size: 5vw !important;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul {
        margin-top: 20px;
    }

    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li a.request-demo,
    .mfn-main-slider.mfn-layer-slider .ls-wrapper.ls-in-out h1.ls-layer .co_slider-wrap ul li input {
        font-size: 3.6vw !important;
    }

    .feature_box .feature_box_wrapper .photo_wrapper {
        width: 100%;
    }

    .feature_box .feature_box_wrapper .photo_wrapper img {
        width: auto;
        height: 160px !important;
    }

    .news_article .column_feature_box.article .feature_box .feature_box_wrapper .desc_wrapper {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }

    footer#Footer .widgets_wrapper .column.one-third .footer-link>p a {
        flex: 0 0 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.8;
        text-align: center;
    }
}

ul.contact-us-address li {
    margin-bottom: unset;
}


/* ============================================================
   HOMEPAGE REFINEMENT — Professional Typography & Brand Colors
   Reference: catalystcommunicationsgroup.com
   Brand: #0E2A47, #0FA37F, #0FA37F, #0E2A47, #FFFFFF
   ============================================================ */

/* --- Global Typography Override --- */
body,
body p,
body .column_attr,
body .desc_wrapper .desc,
body .section_wrapper {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    color: #333333;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* Homepage: use Lato Bold for EVERY element universally */
body.page-id-2,
body.page-id-2 *,
body.home,
body.home * {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
}

/* Adjust label sizes for Cormorant Garamond (renders smaller than Lato) */
.coi-marketplace-label,
.coi-offerings__label,
.coi-nyse__label,
.coi-kwforgood__label,
.coi-ourteam__label {
    font-size: 14px !important;
    font-weight: 700;
}

/* Adjust button/CTA sizes */
.coi-marketplace-cta,
.coi-kwforgood__cta,
.coi-ourteam__cta {
    font-size: 15px !important;
    font-weight: 700;
}

/* Adjust offerings card titles and descriptions */
.coi-offerings__title {
    font-size: 20px !important;
    font-weight: 600;
}

.coi-offerings__desc {
    font-size: 17px !important;
    font-weight: 400;
}

/* Adjust NYSE body text */
.coi-nyse__text {
    font-size: 18px !important;
    font-weight: 400;
}

/* Adjust KW for Good body text */
.coi-kwforgood__text p {
    font-size: 20px !important;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.fancy_heading .title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
    color: #0E2A47;
    font-weight: 400;
}

h1 {
    font-size: 48px;
    font-weight: 400;
}

h2 {
    font-size: 40px;
    line-height: 1.3 !important;
    font-weight: 400;
}

h3 {
    font-size: 28px;
    font-weight: 500;
}

h4 {
    font-size: 22px;
    font-weight: 500;
}

h5 {
    font-size: 18px;
    font-weight: 600;
}

h6 {
    font-size: 16px;
    font-weight: 600;
}

/* --- Header Layout: Logo + Nav on same line --- */
#Top_bar .top_bar_left {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

#Top_bar #logo {
    flex-shrink: 0;
    margin-right: auto !important;
}

#Top_bar .menu_wrapper {
    flex: 1;
    display: flex !important;
    justify-content: flex-end !important;
}

/* --- Navigation / Menu --- */
#Top_bar .menu>li {
    margin: 0 !important;
}

#Top_bar .menu>li>a {
    padding: 0 1px !important;
}

#Top_bar .menu>li>a span {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #0E2A47;
    white-space: nowrap;
}

#Top_bar .menu>li>a:hover span,
#Top_bar .menu>li.current-menu-item>a span {
    color: #0E2A47;
}

/* Preserve exact casing for "kW for Good" menu item */
#Top_bar .menu>li>a[href*="kw-for-good"] span {
    text-transform: none;
}

/* --- Brand Color Updates --- */

/* Primary buttons */
a.button.button_theme,
a.button.button_size_2.button_theme,
.button-round input[type="submit"],
input[type="submit"].wpcf7-submit {
    background-color: #0E2A47 !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 0px;
    padding: 15px 30px;
    transition: all 0.25s ease;
}

a.button.button_theme:hover,
a.button.button_size_2.button_theme:hover,
.button-round input[type="submit"]:hover,
input[type="submit"].wpcf7-submit:hover {
    background-color: #0FA37F !important;
}

/* Green accent buttons */
.section .column_attr .co_how-cal-btn a {
    background-color: #0FA37F;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14px;
}

.section .column_attr .co_how-cal-btn a:hover {
    background-color: #0c8265;
}

/* Slider CTA button */
.mfn-main-slider .co_slider-wrap ul li a.request-demo {
    background-color: #0E2A47 !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 16px !important;
    border-radius: 0px !important;
    transition: all 0.25s ease;
}

.mfn-main-slider .co_slider-wrap ul li a.request-demo:hover {
    background-color: #0FA37F !important;
}

/* Slider heading */
.mfn-main-slider .co_slider-wrap h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.mfn-main-slider .co_slider-wrap h2 span {
    color: #0FA37F !important;
}

/* --- Homepage Section: "Why COI?" --- */
body.page-id-2 .mcb-section[style*="background-color: rgb(16, 28, 55)"] h2 span,
body.page-id-2 .mcb-section[style*="#0E2A47"] h2 span {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
}

/* --- Homepage "Why COI" icon boxes --- */
.co_whycoi_blog .section_wrapper .column_icon_box .icon_box .desc_wrapper h4.title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    font-size: 18px;
    color: #0E2A47;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.co_whycoi_blog .section_wrapper .column_icon_box .icon_box .desc_wrapper .desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
}

/* Alternating section backgrounds for clean look */
.co_whycoi_blog.section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* --- kW for Good section --- */
.co_kwforgood_sec h2,
.co_kwforgood_sec h3 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
}

.co_kwforgood_sec .desc_wrapper h6.title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.co_kwforgood_sec .desc_wrapper .desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    line-height: 1.7;
}

/* --- Footer refinement --- */
footer#Footer {
    background-color: #0E2A47;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

footer#Footer h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 14px;
}

footer#Footer p,
footer#Footer a,
footer#Footer .desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

/* Newsletter section — two-column layout */
.co_sub-newsletter {
    background: #0E2A47 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 40px !important;
    gap: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.co_sub-newsletter .co_col {
    flex: 1 !important;
    width: auto;
    max-width: none;
    text-align: center;
}

.co_sub-newsletter .co_col:nth-child(1) {
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0;
    flex: 0 0 35% !important;
    padding-right: 60px;
}

.co_sub-newsletter .co_col h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    font-size: 30px !important;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 8px;
    color: #ffffff;
}

.co_sub-newsletter .co_col p {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

/* keep the whole newsletter block on the homepage typeface */
.co_sub-newsletter,
.co_sub-newsletter h3,
.co_sub-newsletter p,
.co_sub-newsletter label,
.co_sub-newsletter input,
.co_sub-newsletter textarea,
.co_sub-newsletter button,
.co_sub-newsletter input[type="submit"],
.co_sub-newsletter .wpcf7 input,
.co_sub-newsletter .wpcf7 ::placeholder {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

.co_sub-newsletter .co_col ul.social {
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

.co_sub-newsletter .co_col ul.social li a {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.co_sub-newsletter .co_col ul.social li a:hover {
    background-color: #0FA37F;
    color: #0E2A47;
}

.co_sub-newsletter .co__first-col {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.co_sub-newsletter .co__first-col input {
    flex: 0 0 calc(50% - 6px) !important;
    border-radius: 4px;
}

.co_sub-newsletter .co__second-col input {
    width: 100% !important;
    border-radius: 4px;
}

.co_sub-newsletter .newsletter-form input,
.co_sub-newsletter .co__first-col input,
.co_sub-newsletter .co__second-col input {
    padding: 16px 20px !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.co_sub-newsletter .newsletter-form input::placeholder,
.co_sub-newsletter .co__first-col input::placeholder,
.co_sub-newsletter .co__second-col input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.co_sub-newsletter .newsletter-form input:focus,
.co_sub-newsletter .co__first-col input:focus,
.co_sub-newsletter .co__second-col input:focus {
    border-color: #0FA37F !important;
    background: rgba(255, 255, 255, 0.12) !important;
    outline: none;
}

.co_sub-newsletter input[type="submit"] {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 13px !important;
    border-radius: 4px !important;
    padding: 16px 60px !important;
    border: 2px solid #0FA37F !important;
    background-color: #0FA37F !important;
    color: #0E2A47 !important;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 10px !important;
}

.co_sub-newsletter input[type="submit"]:hover {
    background-color: transparent !important;
    border-color: #0FA37F !important;
    color: #0FA37F !important;
}

/* --- Homepage Video Section Cleanup --- */
body.page-id-2 .mcb-section:first-child h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    color: #0E2A47;
    letter-spacing: 0.01em;
    font-size: 18px;
}

/* --- Smooth link transitions --- */
a {
    transition: color 0.2s ease;
}

a:hover {
    color: #0FA37F;
}

/* --- Responsive Typography Adjustments --- */
@media only screen and (max-width: 770px) {
    h1 {
        font-size: 34px !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 22px !important;
    }
}

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }
}

/* ============================================================
   VIDEO HERO SECTION (Shubin Law Group style — full viewport)
   ============================================================ */

/* Keep default nav — no transparent override */
body.page-id-2 #Header_wrapper {
    background: none !important;
    background-image: none !important;
}

/* Full-screen hero — 100vh like Shubin */
.coi-video-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0a0a0a;
}

/* Two stacked videos for seamless crossfade */
.coi-video-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.coi-video-hero__video--active {
    opacity: 1;
    z-index: 2;
}

/* Subtle overlay — keeps video vivid, text readable */
.coi-video-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3;
    pointer-events: none;
}

/* Centered headline — single statement, no buttons */
.coi-video-hero__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.coi-video-hero__content--visible {
    opacity: 1;
}

.coi-video-hero__content .coi-highlight {
    color: #0FA37F !important;
}

.coi-video-hero__content .coi-highlight-1 {
    background-color: #0FA37F;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.coi-video-hero__content h1 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 50px !important;
    font-weight: 300 !important;
    color: #ffffff;
    line-height: 1.35 !important;
    margin: 0;
    letter-spacing: 0.01em;
    max-width: 100%;
}

.coi-video-hero__content h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    margin: 20px 0 0 0;
    max-width: 100%;
}

/* Scroll-down indicator — animated bouncing chevron */
.coi-video-hero__scroll {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    cursor: pointer;
}

.coi-video-hero__scroll span {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    animation: coi-scroll-bounce 2s infinite;
}

@keyframes coi-scroll-bounce {
    0% {
        opacity: 0.4;
        transform: rotate(45deg) translateY(0);
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) translateY(10px);
    }

    100% {
        opacity: 0.4;
        transform: rotate(45deg) translateY(0);
    }
}

/* Thin bottom line separator */
.coi-video-hero__line {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 5;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-video-hero__content h1 {
        font-size: 40px !important;
    }

    .coi-video-hero__content {
        padding: 0 6%;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-video-hero__content h1 {
        font-size: 28px !important;
    }

    .coi-video-hero__content {
        padding: 0 20px;
    }

    .coi-video-hero__scroll {
        bottom: 30px;
    }

    .coi-video-hero__scroll span {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
   END HOMEPAGE REFINEMENT
   ============================================================ */


/* ============================================================
   FOOTER - Operations Centers
   ============================================================ */

.co-operations-centers {
    margin-top: 25px;
}

/* Footer - Headquarters & Operations Centers */
.co_footer-section-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.co_footer-address p {
    margin-bottom: 14px !important;
    line-height: 1.6 !important;
}

.co_footer-address p strong {
    color: #ffffff;
    font-size: 15px;
}


/* ============================================================
   MARKETPLACE INTRO SECTION (below hero)
   ============================================================ */

/* Scroll-triggered animations (SPP Real Estate style) */
.coi-animate {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.coi-animate--slide-up {
    transform: translateY(50px);
}

.coi-animate--slide-right {
    transform: translateX(-50px);
}

.coi-animate--slide-left {
    transform: translateX(50px);
}

.coi-animate--visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* SPP Real Estate style — clean white, split layout (Upgraded to Modern Dark Glassmorphism) */
.coi-marketplace-intro {
    background: #ffffff;
    /* Dark Corporate Blue */
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.coi-marketplace-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 52px;
    position: relative;
    z-index: 2;
}

/* Stacked: label + wording, then images, then CTA */
.coi-marketplace-text {
    flex: none;
    width: 100%;
    max-width: 1000px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coi-marketplace-label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    /* Vibrant Green */
    margin-bottom: 24px;
    background: rgba(15, 163, 127, 0.1);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(15, 163, 127, 0.2);
}

.coi-marketplace-text h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 30px !important;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.35 !important;
    margin-bottom: 40px;
    text-wrap: pretty;
}

.coi-marketplace-text h2 sup {
    line-height: 0;
}

.coi-gradient-text {
    background: linear-gradient(135deg, #0E2A47 0%, #0E2A47 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.coi-marketplace-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 42px;
    background: linear-gradient(135deg, #0E2A47 0%, #1a2c5b 100%);
    color: #ffffff !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(14, 42, 71, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.coi-marketplace-cta:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #2a4794 0%, #0E2A47 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px 2px rgba(14, 42, 71, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.coi-cta-icon {
    transition: transform 0.3s ease;
}

.coi-marketplace-cta:hover .coi-cta-icon {
    transform: translateX(5px);
}

/* Right: image collage */
.coi-marketplace-collage {
    flex: none;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    height: 360px;
    min-width: 0;
    position: relative;
}

/* Background Glow for Collage */
.coi-marketplace-collage::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(15, 163, 127, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.coi-marketplace-collage__img {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.coi-marketplace-collage__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.coi-marketplace-collage__img:hover img {
    transform: scale(1.08);
}

/* Glassmorphism Hover Overlay */
.coi-marketplace-collage__img--has-overlay {
    cursor: pointer;
}

.coi-collage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(14, 42, 71, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    opacity: 0;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.coi-marketplace-collage__img--has-overlay:hover .coi-collage-overlay {
    opacity: 1;
}

.coi-marketplace-collage__img--tall {
    flex: none;
    height: 100%;
    min-height: 0;
}

/* let the stacked pair sit as siblings so all three are equal columns */
.coi-marketplace-collage__stack {
    display: contents;
}

.coi-marketplace-collage__stack .coi-marketplace-collage__img {
    flex: none;
    height: 100%;
    min-height: 0;
}

/* keep the three photos cleanly aligned (no independent bobbing) */
.coi-marketplace-collage .coi-floating {
    animation: none !important;
}

/* extra breathing room above the CTA */
.coi-marketplace-inner > .coi-marketplace-cta {
    margin-top: 30px;
}

/* ============================================================
   HOMEPAGE — HOW IT WORKS SUMMARY
   ============================================================ */
.coi-hiwsum {
    background: #0E2A47;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.coi-hiwsum__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.coi-hiwsum__head {
    width: 100%;
    text-align: left;
    margin-bottom: 26px;
}

/* animation hidden for now — remove this rule (and restore the grid columns below) to bring it back */
.coi-hiwsum__anim {
    display: none;
}

.coi-hiwsum__header {
    width: 100%;
    text-align: center;
}

.coi-hiwsum__header .coi-hiwsum__label {
    margin-bottom: 24px;
}

.coi-hiwsum__header .coi-hiwsum__desc {
    max-width: 820px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.6;
    color: #dfe5f0 !important;
    text-wrap: pretty;
}

@media only screen and (max-width: 768px) {
    .coi-hiwsum__header .coi-hiwsum__desc {
        font-size: 17px;
    }
}

.coi-hiwsum__top {
    width: 100%;
    display: grid;
    /* copy on the left, the scene on the right; both stack again under 1024 */
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.coi-hiwsum__text {
    align-items: flex-start;
    text-align: left;
}

.coi-hiwsum__anim {
    width: 100%;
    height: 100%;
    min-height: 460px;
    border-radius: 10px;
    overflow: hidden;
    background: #0E2A47;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.coi-hiwsum__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coi-hiwsum__canvas {
    position: absolute;
    inset: 0;
}

.coi-hiwsum__canvas canvas {
    display: block;
}

/* ---- Animated VBN network graphic ---- */
.coi-vbn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}


.coi-vbn__halo {
    animation: coiVbnHalo 5s ease-in-out infinite;
}

@keyframes coiVbnHalo {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* static connector lines */
.coi-vbn__links path {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
}

/* animated energy travelling along the same paths */
.coi-vbn__flows path {
    fill: none;
    stroke: #0FA37F;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 16 150;
    filter: drop-shadow(0 0 5px rgba(15, 163, 127, .95));
    animation: coiVbnFlow 3.6s linear infinite;
}

.coi-vbn__flows path:nth-child(2) { animation-delay: -.5s; }
.coi-vbn__flows path:nth-child(3) { animation-delay: -1s; }
.coi-vbn__flows path:nth-child(4) { animation-delay: -1.5s; }
.coi-vbn__flows path:nth-child(5) { animation-delay: -2s; }
.coi-vbn__flows path:nth-child(6) { animation-delay: -2.5s; }
.coi-vbn__flows path:nth-child(7)  { animation-delay: -.8s; }
.coi-vbn__flows path:nth-child(8)  { animation-delay: -1.8s; }
.coi-vbn__flows path:nth-child(9)  { animation-delay: -2.8s; }
.coi-vbn__flows path:nth-child(10) { animation-delay: -1.3s; }

@keyframes coiVbnFlow {
    from { stroke-dashoffset: 166; }
    to   { stroke-dashoffset: 0; }
}

/* buildings */
.coi-vbn__node .body {
    fill: url(#coiVbnBld);
    stroke: #5b8ede;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.coi-vbn__node .stack {
    fill: #33538f;
    stroke: #5b8ede;
    stroke-width: 1.2;
}

.coi-vbn__node .lit {
    fill: #0FA37F;
    animation: coiVbnLit 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes coiVbnLit {
    0%, 100% { opacity: .28; }
    50%      { opacity: 1; }
}

/* battery packs charging beside each building */
.coi-vbn__batt .cell {
    fill: none;
    stroke: #0FA37F;
    stroke-width: 1.6;
}

.coi-vbn__batt .chg {
    fill: #0FA37F;
    transform-box: fill-box;
    transform-origin: bottom;
    animation: coiVbnCharge 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes coiVbnCharge {
    0%, 100% { transform: scaleY(.25); opacity: .55; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* pylon */
.coi-vbn__node--tower .tw {
    fill: none;
    stroke: #7fa4e6;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.coi-vbn__node--tower .knob {
    fill: #0FA37F;
    animation: coiVbnLit 2.4s ease-in-out infinite;
}

/* solar array */
.coi-vbn__node .panel {
    fill: #24406f;
    stroke: #5b8ede;
    stroke-width: 1.6;
}

.coi-vbn__node .grid {
    fill: none;
    stroke: #5b8ede;
    stroke-width: 1;
    opacity: .8;
}

/* centre hub */
.coi-vbn__box {
    fill: #0FA37F;
    stroke: #b6f072;
    stroke-width: 2;
}

.coi-vbn__core-blur {
    fill: #0FA37F;
    opacity: .7;
    animation: coiVbnCore 2.6s ease-in-out infinite;
}

@keyframes coiVbnCore {
    0%, 100% { opacity: .35; }
    50%      { opacity: .95; }
}

.coi-vbn__bolt {
    fill: #0d1a30;
}

.coi-vbn__ring {
    fill: none;
    stroke: #0FA37F;
    stroke-width: 1.6;
    transform-origin: 310px 272px;
    animation: coiVbnRing 3.4s ease-out infinite;
}

.coi-vbn__ring--2 { animation-delay: 1.7s; }

@keyframes coiVbnRing {
    0%   { transform: scale(.7); opacity: .9; }
    100% { transform: scale(2.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .coi-vbn__flows path,
    .coi-vbn__ring,
    .coi-vbn__core-blur,
    .coi-vbn__halo,
    .coi-vbn__node .lit { animation: none; }
}

/* Grid evolution: the three stages crossfade — Original Grid -> VPP -> VBN */
.coi-hiwsum__stage {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    animation: coiStageCycle 13.5s ease-in-out infinite;
}

.coi-hiwsum__base,
.coi-hiwsum__ovl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* energy-flow overlay slides up into place on each stage */
.coi-hiwsum__ovl {
    opacity: 0;
    animation: coiOvlIn 13.5s ease-in-out infinite;
}

.coi-hiwsum__stage:nth-of-type(1) .coi-hiwsum__ovl { animation-delay: 0.7s; }
.coi-hiwsum__stage:nth-of-type(2) .coi-hiwsum__ovl { animation-delay: 5.2s; }
.coi-hiwsum__stage:nth-of-type(3) .coi-hiwsum__ovl { animation-delay: 9.7s; }

@keyframes coiOvlIn {
    0%   { opacity: 0; transform: translateY(38px); }
    9%   { opacity: 1; transform: translateY(0); }
    26%  { opacity: 1; transform: translateY(0); }
    31%  { opacity: 0; transform: translateY(-18px); }
    100% { opacity: 0; transform: translateY(38px); }
}

/* soft green glow pulse behind the diagram */
.coi-hiwsum__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 163, 127, 0.22) 0%, transparent 70%);
    pointer-events: none;
    animation: coiGlowPulse 4.5s ease-in-out infinite;
}

@keyframes coiGlowPulse {
    0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92); }
    50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
}

.coi-hiwsum__stage:nth-of-type(1) { animation-delay: 0s; }
.coi-hiwsum__stage:nth-of-type(2) { animation-delay: 4.5s; }
.coi-hiwsum__stage:nth-of-type(3) { animation-delay: 9s; }

@keyframes coiStageCycle {
    0%   { opacity: 0; transform: scale(1.015); }
    5%   { opacity: 1; transform: scale(1); }
    30%  { opacity: 1; transform: scale(1); }
    36%  { opacity: 0; transform: scale(1.015); }
    100% { opacity: 0; transform: scale(1.015); }
}

/* stage caption, timed to the images */
.coi-hiwsum__stagename {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    pointer-events: none;
}

.coi-hiwsum__stagename i {
    position: absolute;
    left: 0;
    right: 0;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0FA37F;
    opacity: 0;
    animation: coiStageCycle 13.5s ease-in-out infinite;
}

.coi-hiwsum__stagename i:nth-child(1) { animation-delay: 0s; }
.coi-hiwsum__stagename i:nth-child(2) { animation-delay: 4.5s; }
.coi-hiwsum__stagename i:nth-child(3) { animation-delay: 9s; }

@media (prefers-reduced-motion: reduce) {
    .coi-hiwsum__stage,
    .coi-hiwsum__ovl,
    .coi-hiwsum__glow,
    .coi-hiwsum__stagename i { animation: none; }
    .coi-hiwsum__stage:nth-of-type(3) { opacity: 1; }
    .coi-hiwsum__stage:nth-of-type(3) .coi-hiwsum__ovl { opacity: 1; }
    .coi-hiwsum__stagename i:nth-child(3) { opacity: 1; }
}

.coi-hiwsum__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    background: rgba(15, 163, 127, 0.1);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(15, 163, 127, 0.2);
    margin-bottom: 16px;
}

.coi-hiwsum__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px !important;
    font-weight: 300;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
    max-width: 40ch;
}

.coi-hiwsum__title span {
    color: #0FA37F;
    font-weight: 400;
    margin: 0 4px;
}

/* How It Works page — Optimize highlight line */
.coi-hiw-optimize__highlight {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-style: italic;
    color: #0FA37F;
    margin-top: 18px;
    text-align: center;
}

.coi-hiwsum__body {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #c3cee6;
    margin: 0;
}

.coi-hiwsum__cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}

/* the section carries one offering now, so the row collapses to it rather
   than leaving the card a third of the width with a gap either side */
/* the scene sits between the headline and the card, held to a width that
   keeps it in proportion with the card underneath it */
.coi-hiwsum__caption {
    text-align: left;
    margin: 0 0 30px;
    max-width: 520px;
}

.coi-hiwsum__caption h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.25;
}

.coi-hiwsum__caption p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #0FA37F;
    margin: 0;
}

.coi-hiwsum__desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 400 !important;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #aab4cc !important;
    margin: 0;
}

.coi-hiwsum__pillars {
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.coi-hiwsum__pillars-title {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 24px !important;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 28px;
}

.coi-hiwsum__pillar {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.coi-hiwsum__pillar:last-child {
    margin-bottom: 0;
}

.coi-hiwsum__pillar-icon {
    flex: none;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(15, 163, 127, 0.14);
    border: 1px solid rgba(15, 163, 127, 0.25);
    color: #0FA37F;
}

.coi-hiwsum__pillar-icon svg {
    width: 26px;
    height: 26px;
}

.coi-hiwsum__pillar-text h5 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 6px;
}

.coi-hiwsum__pillar-text p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.6;
    color: #b4bed2;
    margin: 0;
}

@media only screen and (max-width: 1024px) {
    .coi-hiwsum__pillars {
        margin-left: auto;
        margin-right: auto;
    }

    .coi-hiwsum__pillar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .coi-hiwsum__pillars-title {
        font-size: 21px !important;
    }

    .coi-hiwsum__pillar-text h5 {
        font-size: 17px !important;
    }

    .coi-hiwsum__pillar-text p {
        font-size: 15px !important;
    }
}

.coi-hiwsum__scene {
    width: 100%;
    margin: 0;
}

.coi-hiwsum__card {
    background: #0E2A47;
    border: none;
    border-radius: 10px;
    padding: 44px 30px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coi-hiwsum__card-img {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.coi-hiwsum__card-img img {
    max-height: 130px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.coi-hiwsum__card h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 18px;
    line-height: 1.25;
}

.coi-hiwsum__card p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #0FA37F;
    margin: 0;
    max-width: 280px;
}

.coi-hiwsum__cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 30px;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: transparent;
    color: #ffffff !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.coi-hiwsum__cta svg {
    transition: transform 0.35s ease;
}

.coi-hiwsum__cta:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0E2A47 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.coi-hiwsum__cta:hover svg {
    transform: translateX(4px);
}

@media only screen and (max-width: 1024px) {
    .coi-hiwsum__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coi-hiwsum__anim {
        height: 340px;
    }

    .coi-hiwsum__text {
        text-align: center;
        align-items: center;
    }

    .coi-hiwsum__head {
        text-align: center;
    }

    .coi-hiwsum__title {
        margin: 0 auto;
    }

    .coi-hiwsum__cta {
        align-self: center;
    }

    .coi-hiwsum__caption {
        text-align: center;
        margin: 0 auto 30px;
    }

    .coi-hiwsum__scene {
        max-width: 560px;
        margin: 0 auto;
    }

    .coi-hiwsum__title {
        font-size: 24px !important;
    }
}

@media only screen and (max-width: 768px) {
    .coi-hiwsum {
        padding: 70px 0;
    }

    .coi-hiwsum__inner {
        padding: 0 20px;
        gap: 40px;
    }

    .coi-hiwsum__cards {
        grid-template-columns: 1fr;
    }

    .coi-hiwsum__title {
        font-size: 28px;
    }
}

/* Floating Animations */
@keyframes coiFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.coi-floating {
    animation: coiFloat 6s ease-in-out infinite;
}

.coi-floating--delay-1 {
    animation-delay: 1.5s;
}

.coi-floating--delay-2 {
    animation-delay: 3s;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-animate {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
        visibility: visible !important;
    }

    .coi-marketplace-intro {
        padding: 90px 0;
    }

    .coi-marketplace-inner {
        flex-direction: column;
        gap: 60px;
    }

    .coi-marketplace-text {
        text-align: center;
    }

    .coi-marketplace-text h2 {
        font-size: 24px !important;
    }

    .coi-gradient-text {
        background: transparent !important;
        -webkit-background-clip: border-box !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
    }

    .coi-marketplace-intro .coi-gradient-text {
        -webkit-text-fill-color: #0E2A47 !important;
        color: #0E2A47 !important;
    }

    .coi-marketplace-collage {
        height: 260px;
        gap: 16px;
    }

    .coi-marketplace-collage__img--tall {
        height: 100%;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {

    .coi-marketplace-intro {
        padding: 70px 0;
    }

    .coi-marketplace-inner {
        padding: 0 20px;
        gap: 50px;
    }

    .coi-marketplace-text h2 {
        font-size: 20px !important;
    }

    .coi-marketplace-collage {
        flex-direction: column;
        gap: 16px;
    }

    .coi-marketplace-collage {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        height: auto;
        gap: 16px;
    }

    .coi-marketplace-collage__img--tall,
    .coi-marketplace-collage__stack .coi-marketplace-collage__img {
        height: 100%;
    }

    .coi-floating {
        animation: none;
    }
}



/* ============================================================
   THE PROBLEM SECTION
   ============================================================ */
.coi-problem-section {
    background: #ffffff;
    /* Dark Corporate Blue */
    padding: 100px 0 120px 0;
    position: relative;
    overflow: hidden;
}

.coi-problem-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.coi-problem-text {
    flex: 1;
    min-width: 0;
    max-width: 800px;
    margin: 0 auto;
}

.coi-problem-heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 300;
    color: #0E2A47;
    line-height: 1.35 !important;
    margin-bottom: 24px;
}

.coi-problem-sub {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.coi-problem-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}

.coi-problem-card {
    flex: 1;
    text-align: center;
    background: #f8f9fc;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.coi-problem-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.coi-problem-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
    margin: 0 auto 20px auto;
}

.coi-problem-card h3 {
    font-size: 24px !important;
    font-weight: 700;
    color: #0E2A47;
    margin-bottom: 10px;
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}

.coi-problem-card p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   SEPARATOR BANNER
   ============================================================ */
.coi-separator-banner {
    background: #0E2A47;
    position: relative;
    padding: 60px 20px 100px 20px;
    text-align: center;
    overflow: hidden;
}



.coi-separator-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.coi-separator-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.3 !important;
    margin-bottom: 40px;
}

.coi-separator-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    color: #ffffff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.coi-pulse-dot {
    width: 10px;
    height: 10px;
    background-color: #0FA37F;
    border-radius: 50%;
    box-shadow: 0 0 10px #0FA37F, 0 0 20px #0FA37F;
    animation: coiPulse 2s infinite;
}

@keyframes coiPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(15, 163, 127, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(15, 163, 127, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(15, 163, 127, 0);
    }
}

/* ============================================================
   THE SOLUTION SECTION
   ============================================================ */
.coi-solution-section {
    background: #0E2A47;
    padding: 60px 20px 80px 20px;
    position: relative;
    overflow: hidden;
}

.coi-solution-slider-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* Hide slides outside the track */
}

.coi-solution-slider-track {
    position: relative;
    width: 100%;
    min-height: 440px;
}

.coi-solution-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.coi-solution-slide.is-active {
    position: relative;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.coi-solution-glass-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 40px 20px;
    box-shadow: none;
    position: relative;
    overflow: visible;
    width: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coi-solution-glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(15, 163, 127, 0.05) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* Slide Content Wrappers */
.coi-slide-content-center {
    align-items: center;
    text-align: center;
}

.coi-slide-content-split {
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.coi-slide-content-tabbed {
    align-items: center;
    padding: 40px;
}

/* Slide 1 - Hero Tagline */
.coi-solution-tagline {
    font-size: 46px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 300;
    line-height: 1.3 !important;
    background: linear-gradient(135deg, #ffffff 0%, #a0b2d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
}

/* Slide 2 - Split Layout */
.coi-slide-split-left {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.coi-slide-split-right {
    flex: 1;
    position: relative;
    z-index: 1;
}

.coi-slide-image-placeholder {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Energy Orb — animated graphic for slide 2 */
.coi-energy-orb {
    background: radial-gradient(circle at center, rgba(15, 163, 127,0.12) 0%, rgba(14, 42, 71,0.35) 70%);
}
.coi-orb-core {
    position: absolute; inset: 0; margin: auto;
    width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle, #b6f072 0%, #5f9a29 100%);
    box-shadow: 0 0 40px rgba(15, 163, 127,0.85), 0 0 90px rgba(15, 163, 127,0.4);
    animation: coiOrbBreathe 3s ease-in-out infinite;
}
@keyframes coiOrbBreathe { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.18); } }

.coi-orb-ring {
    position: absolute; inset: 0; margin: auto;
    border-radius: 50%; border: 1px solid rgba(15, 163, 127,0.3);
}
.coi-orb-ring i {
    position: absolute; top: -6px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #0FA37F; box-shadow: 0 0 16px rgba(15, 163, 127,0.95);
}
.coi-orb-ring--1 { width: 44%; height: 44%; animation: coiOrbSpin 7s linear infinite; }
.coi-orb-ring--2 { width: 66%; height: 66%; border-color: rgba(15, 163, 127,0.2); animation: coiOrbSpin 11s linear infinite reverse; }
.coi-orb-ring--3 { width: 90%; height: 90%; border-color: rgba(63,110,196,0.3); animation: coiOrbSpin 18s linear infinite; }
@keyframes coiOrbSpin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.coi-orb-pulse {
    position: absolute; inset: 0; margin: auto;
    width: 96px; height: 96px; border-radius: 50%;
    border: 1px solid rgba(15, 163, 127,0.5);
    animation: coiOrbPulse 3.4s ease-out infinite;
}
.coi-orb-pulse--2 { animation-delay: 1.7s; }
@keyframes coiOrbPulse { 0%{ transform: scale(0.5); opacity: 0.8; } 100%{ transform: scale(3.2); opacity: 0; } }

/* Flashy hero headline — staggered word reveal + glow */
.coi-flashy-hero .coi-flashy-word{ display:inline-block; opacity:0; animation: coiWordIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.coi-flashy-hero .coi-flashy-word:nth-child(1){ animation-delay:0.2s; }
.coi-flashy-hero .coi-flashy-word:nth-child(2){ animation-delay:0.45s; }
.coi-flashy-hero .coi-flashy-word:nth-child(3){ animation-delay:0.7s; }
@keyframes coiWordIn{ 0%{ opacity:0; transform:translateY(28px) scale(0.9); filter:blur(6px); } 55%{ text-shadow:0 0 26px rgba(15, 163, 127,0.9); } 100%{ opacity:1; transform:none; filter:blur(0); text-shadow:0 0 0 rgba(15, 163, 127,0); } }
.coi-flashy-hero .coi-flashy-word.coi-highlight{ animation: coiWordIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s both, coiHiGlow 2.8s ease-in-out 1.7s infinite; }
@keyframes coiHiGlow{ 0%,100%{ text-shadow:0 0 6px rgba(15, 163, 127,0.35); } 50%{ text-shadow:0 0 26px rgba(15, 163, 127,0.9); } }

/* Cycling hero headline (rotating phrases, like the live site) */
.coi-cycle-hero{ position:relative; display:block; width:100%; min-height:1.75em; text-align:center; }
/* each phrase shrinks to fit its text so the band hugs the words */
/* matches the live site: rises 50px + fades in over 800ms; exits as a pure fade */
.coi-cycle-item{ position:absolute; left:50%; top:0; opacity:0; transform:translateX(-50%) translateY(50px); transition:opacity 700ms ease, transform 0ms linear 700ms; pointer-events:none; white-space:nowrap; }
.coi-cycle-item.is-active{ opacity:1; transform:translateX(-50%) translateY(0); transition:opacity 800ms ease, transform 800ms cubic-bezier(0.22,0.61,0.36,1); pointer-events:auto; }
/* h1 itself stays boxless; type styling only */
.coi-video-hero__content h1.coi-cycle-hero{ background:none !important; background-color:transparent !important; box-shadow:none !important; padding:0 !important; border:none !important; font-family:'Lato','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif !important; font-size:clamp(40px,5vw,74px) !important; font-weight:800 !important; letter-spacing:-0.015em !important; line-height:1.15 !important; text-shadow:none; }
/* neutral brand-navy band — flat, sits cleanly over any of the hero videos */
.coi-video-hero__content .coi-cycle-item{ background:rgba(14, 42, 71,0.62) !important; background-color:rgba(14, 42, 71,0.62) !important; box-shadow:none !important; padding:0.15em 0.7em !important; border:none !important; border-radius:4px; text-shadow:none; }

.coi-slide-text-main {
    font-size: 24px;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 20px;
}
.coi-slide-text-main strong {
    color: #0FA37F;
}
.coi-slide-text-sub {
    font-size: 18px;
    line-height: 1.6;
    color: #a0b2d8;
    margin-bottom: 30px;
}
.coi-slide-text-highlight {
    font-size: 20px;
    font-weight: 700;
    color: #0FA37F;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}

/* Slide 3 - Tabs */
.coi-slide-tabs-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.coi-slide-tab-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a0b2d8;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lato', sans-serif;
}

.coi-slide-tab-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

.coi-slide-tab-btn.active {
    background: #0FA37F;
    border-color: #0FA37F;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(15, 163, 127, 0.3);
}

.coi-slide-tabs-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    min-height: 180px;
    text-align: center;
}

.coi-slide-tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.coi-slide-tab-pane.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.coi-slide-tab-pane h3 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

.coi-slide-tab-pane p {
    color: #e2e8f0;
    font-size: 18px;
    line-height: 1.7;
}

.coi-tab-split {
    display: flex;
    gap: 46px;
    align-items: center;
    text-align: left;
}

/* the image area: a uniform 4:3 frame so every tab is the same size (no height jump) */
.coi-tab-split-left {
    flex: 0 0 46%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.coi-tab-split-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: coiKenBurns 16s ease-in-out infinite alternate; /* slow continuous drift */
}
@keyframes coiKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }

.coi-tab-split-right {
    flex: 1;
}

/* staggered reveal each time a tab becomes active: image zooms in, then text slides in */
.coi-slide-tab-pane.active .coi-tab-split-left { animation: coiTabImgReveal 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.coi-slide-tab-pane.active .coi-tab-split-right h3 { animation: coiTabTextIn 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.18s; }
.coi-slide-tab-pane.active .coi-tab-split-right p  { animation: coiTabTextIn 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.32s; }
@keyframes coiTabImgReveal { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes coiTabTextIn  { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px){
    .coi-tab-split { flex-direction: column; gap: 24px; text-align: center; }
    .coi-tab-split-left { flex: none; width: 100%; }
}

/* Slider Nav Dots */
.coi-solution-slider-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 10px; /* Prevent cutoff */
}

.coi-slider-nav-dot {
    width: 60px;
    height: 6px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.2) !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    position: relative;
}

/* Expand the clickable hit area */
.coi-slider-nav-dot::after {
    content: '';
    position: absolute;
    top: -15px;
    bottom: -15px;
    left: -10px;
    right: -10px;
}

.coi-slider-nav-dot:hover {
    background-color: rgba(255,255,255,0.4) !important;
}

.coi-slider-nav-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 4px;
    background: #0FA37F;
}

.coi-slider-nav-dot.active .coi-slider-nav-progress {
    width: 100%;
    /* Transition set dynamically via JS */
}

.coi-slider-nav-dot.paused .coi-slider-nav-progress,
.coi-slider-nav-dot.completed .coi-slider-nav-progress {
    width: 100%;
    transition: none;
}

/* Tablet & Mobile Responsiveness for new sections */
@media only screen and (max-width: 959px) {
    .coi-problem-inner {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .coi-problem-cards {
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .coi-problem-card {
        margin-top: 0 !important;
    }

    .coi-problem-card-icon {
        margin: 0 auto 20px;
    }

    .coi-separator-title {
        font-size: 24px !important;
    }

    .coi-slide-content-split {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .coi-solution-glass-card {
        padding: 40px 30px;
        min-height: auto;
    }

    .coi-solution-tagline {
        font-size: 36px !important;
    }
    
    .coi-slide-tabs-nav {
        flex-wrap: wrap;
    }
    .coi-tab-split {
        flex-direction: column;
        gap: 20px;
    }
    .coi-tab-split-left {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {

    .coi-problem-section,
    .coi-separator-banner,
    .coi-solution-section {
        padding: 70px 0;
    }

    .coi-problem-inner {
        padding: 0 20px;
    }

    .coi-problem-heading {
        font-size: 20px !important;
    }

    .coi-separator-title {
        font-size: 20px !important;
    }

    .coi-separator-badge {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    .coi-solution-glass-card {
        padding: 40px 20px;
        border-radius: 0;
    }
    
    .coi-solution-tagline {
        font-size: 28px !important;
    }
    
    .coi-slide-text-main {
        font-size: 20px;
    }
    
    .coi-slide-tab-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .coi-slide-tab-pane h3 {
        font-size: 26px;
    }
}


/* ============================================================
   CORE OFFERINGS SECTION (Catalyst Communications style)
   ============================================================ */

.coi-offerings {
    background: #0E2A47;
    padding: 40px 0;
}

.coi-offerings__header {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    padding: 0 40px;
}

.coi-offerings__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    margin-bottom: 20px;
}

.coi-offerings__header h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 30px !important;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.35 !important;
    margin: 0;
}

.coi-offerings__intro {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 30px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.coi-offerings__intro strong {
    color: #ffffff;
}

.coi-offerings__grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.coi-offerings__card {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coi-offerings__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.coi-offerings__card:hover .coi-offerings__bg {
    transform: translateY(0);
}

.coi-offerings__content {
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.coi-offerings__card:hover .coi-offerings__content {
    transform: translateY(-150%);
    opacity: 0;
}

.coi-offerings__card:hover {
    border-color: rgba(15, 163, 127, 0.3);
    transform: translateY(-5px);
}

.coi-offerings__rule {
    width: 100%;
    height: 3px;
    background: #0FA37F;
    margin-bottom: 30px;
}

.coi-offerings__title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0FA37F;
    margin: 0 0 20px;
    line-height: 1.4 !important;
}

.coi-offerings__desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    color: #a0b2d8;
    line-height: 1.75;
    margin: 0;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-offerings {
        padding: 70px 0;
    }

    .coi-offerings__header h2 {
        font-size: 24px !important;
    }

    .coi-offerings__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* Mobile */
@media only screen and (max-width: 680px) {
    .coi-offerings {
        padding: 50px 0;
    }

    .coi-offerings__header {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .coi-offerings__header h2 {
        font-size: 20px !important;
    }

    .coi-offerings__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }
}


/* ============================================================
   MUFFIN BUILDER VIDEO CARDS (COI Overview + Case Study)
   ============================================================ */

.mcb-section-txh22rx95 {
    display: none !important;
}

.mcb-section-txh22rx95 .section_wrapper {
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 40px;
}

/* The card is written into the page content as a narrow column, video over
   copy. These go through #Content so they beat that inline block, and lay it
   out as copy on the left with the video on the right. row-reverse does the
   swap, since the video comes first in the markup and cannot be reordered
   from here. */
#Content .coi-video-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 44px;
    width: 100%;
    max-width: 1120px;
    overflow: visible;
}

#Content .coi-video-card video {
    flex: 0 0 54%;
    width: 54%;
    max-height: none;
    border-radius: 14px;
}

#Content .coi-video-card__body {
    flex: 1 1 auto;
    padding: 0;
    /* set left against the video, the same way the VBN section above it reads */
    text-align: left;
    max-width: 460px;
    margin: 0;
}

#Content .coi-video-card__title {
    /* the builder section pins every heading inside it to 18px !important, and
       the site-wide rule pins weight to 600, so both have to be answered in
       kind. The ID here still out-ranks those selectors.

       This is meant to match the kW for Good heading, which itself asks for
       Cormorant Garamond — but that request loses to the site-wide rule that
       forces Lato on everything under #Content, since that rule is written
       against an ID selector and beats a plain class even with !important.
       So kW for Good actually renders in Lato regardless of what its own
       CSS says, and matching it for real means matching Lato, not the serif
       its stylesheet asks for and never gets. */
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

#Content .coi-video-card__desc {
    font-size: 18px;
    line-height: 1.7;
}

/* back to one column, video above the copy, on narrow screens */
@media only screen and (max-width: 900px) {
    #Content .coi-video-card {
        flex-direction: column;
        gap: 22px;
        max-width: 560px;
    }

    #Content .coi-video-card video {
        flex: 0 0 auto;
        width: 100%;
    }

    #Content .coi-video-card__body {
        text-align: center;
        max-width: none;
    }
}

/* The two video cards live inside .coi-video-cards — force side by side */
.coi-video-cards {
    display: flex !important;
    gap: 30px;
    justify-content: center;
}

.coi-video-cards>* {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    background-color: transparent !important;
}

.coi-video-cards .column_attr,
.coi-video-cards .mcb-wrap-inner,
.coi-video-cards .mcb-item-inner {
    background-color: transparent !important;
}

/* Constrain video thumbnail / image height */
.coi-video-cards img,
.coi-video-cards video,
.coi-video-cards iframe {
    max-height: 280px;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Card titles */
.mcb-section-txh22rx95 h1,
.mcb-section-txh22rx95 h2,
.mcb-section-txh22rx95 h3,
.mcb-section-txh22rx95 h4,
.mcb-section-txh22rx95 h5,
.mcb-section-txh22rx95 h6 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700;
    color: #ffffff !important;
    margin: 16px 0 8px;
}

/* Card descriptions */
.mcb-section-txh22rx95 p,
.mcb-section-txh22rx95 span,
.mcb-section-txh22rx95 div.column_attr {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6;
}

@media only screen and (max-width: 767px) {
    .coi-video-cards {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .coi-video-cards>* {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
        margin-bottom: 30px;
    }

    div.mcb-section-txh22rx95,
    div.mcb-section-txh22rx95.hide-mobile,
    div.mcb-section-txh22rx95.hide-tablet {
        padding: 50px 0 20px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    div.mcb-section-txh22rx95 .section_wrapper {
        padding: 0 20px;
        display: block !important;
    }
}

/* Video Modal */
.coi-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.coi-video-modal.active {
    opacity: 1;
    visibility: visible;
}

.coi-video-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.coi-video-modal-content {
    position: relative;
    width: 95%;
    max-width: 1400px;
    z-index: 1;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.coi-video-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.coi-video-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.coi-video-modal-body {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000;
}

.coi-video-modal-body video,
.coi-video-modal-body iframe {
    width: 100%;
    max-height: 90vh;
    outline: none;
    display: block;
}

/* Play overlay for inline video thumbnails */
.coi-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.mcb-item-video-wrapper:hover .coi-video-play-overlay,
.coi-video-cards>*:hover .coi-video-play-overlay {
    background: rgba(15, 163, 127, 0.95);
    color: #fff;
    border-color: #0FA37F;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   NYSE FLOOR TALK SECTION (split layout: video left, text right)
   ============================================================ */

.coi-nyse {
    padding: 100px 0 60px;
    background: #0E2A47;
}

/* when it sits inside the News & Media block, blend with the light background */
.coi-nyse--in-news {
    background: transparent;
    padding: 10px 0 60px;
}

/* faint divider between the Floor Talk video and the news cards */
.coi-nyse--in-news::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 60px;
    background: rgba(14, 42, 71, 0.12);
}

.coi-nyse--in-news .coi-nyse__inner {
    padding: 0;
}

.coi-nyse--in-news .coi-nyse__content h2 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0E2A47;
}

.coi-nyse--in-news .coi-nyse__text {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    color: #4a5568;
}

.coi-nyse__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.coi-nyse__video {
    flex: 1;
    min-width: 0;
}

.coi-nyse__video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.coi-nyse__video-wrap iframe,
.coi-nyse__video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coi-nyse__content {
    flex: 1;
    min-width: 0;
}

.coi-nyse__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    margin-bottom: 24px;
}

.coi-nyse__content h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 24px 0;
    color: #ffffff;
}

.coi-nyse__text {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 17px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-nyse {
        padding: 70px 0;
    }

    .coi-nyse__inner {
        gap: 40px;
    }

    .coi-nyse__content h2 {
        font-size: 28px !important;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {
    .coi-nyse {
        padding: 50px 0;
    }

    .coi-nyse__inner {
        flex-direction: column;
        padding: 0 20px;
        gap: 30px;
    }

    .coi-nyse__video,
    .coi-nyse__content {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .coi-nyse__content h2 {
        font-size: 24px !important;
    }
}


/* ============================================================
   kW FOR GOOD SECTION (polished, SPP Real Estate split layout)
   ============================================================ */

.coi-kwforgood {
    background: #f7f9fc;
    padding: 120px 0;
    overflow: hidden;
    position: relative;
}

.coi-kwforgood__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Left: text side */
.coi-kwforgood__text {
    flex: 0 0 45%;
    max-width: 45%;
}

.coi-kwforgood__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    margin-bottom: 20px;
}

.coi-kwforgood__text h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 30px !important;
    font-weight: 600;
    color: #0E2A47;
    line-height: 1.15 !important;
    margin: 0 0 28px;
}

.coi-kwforgood__text h2 span {
    color: #0FA37F;
    font-style: normal;
}

.coi-kwforgood__text p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555;
    line-height: 1.8;
    margin: 0 0 28px;
}

.coi-kwforgood__impact {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 40px;
    padding: 16px 24px;
    background: #f8f9fc;
    border-radius: 8px;
    border-left: 4px solid #0FA37F;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coi-kwforgood__impact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 42, 71, 0.08);
}

.coi-kwforgood__impact-icon {
    width: 44px;
    height: 44px;
    color: #0E2A47;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 42, 71, 0.08);
    border-radius: 50%;
}

.coi-kwforgood__impact-icon svg {
    width: 22px;
    height: 22px;
}

.coi-kwforgood__impact-content {
    display: flex;
    flex-direction: column;
}

.coi-kwforgood__impact-value {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0E2A47;
    line-height: 1.2;
}

.coi-kwforgood__impact-label {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #0FA37F;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


.coi-kwforgood__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: none;
    color: #0E2A47 !important;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none !important;
    border: 2px solid #0E2A47;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.coi-kwforgood__cta svg {
    transition: transform 0.3s ease;
}

.coi-kwforgood__cta:hover {
    background: #0E2A47;
    border-color: #0E2A47;
    color: #ffffff !important;
}

.coi-kwforgood__cta:hover svg {
    transform: translateX(4px);
}

/* Right: image side */
.coi-kwforgood__image {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    position: relative;
}

.coi-kwforgood__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s ease;
}

.coi-kwforgood__image:hover img {
    transform: scale(1.02);
}

/* Glass Badge */
.coi-kwforgood__glass-badge {
    position: absolute;
    /* sits inside the picture rather than hanging off the corner, and stays
       put — drifting about drew the eye away from the copy beside it. Kept to
       the right so it clears the kW for Good sign on the left of the photo. */
    bottom: 20px;
    right: 20px;
    left: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.coi-kwforgood__glass-icon {
    width: 36px;
    height: 36px;
    background: #0FA37F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 163, 127, 0.3);
}

.coi-kwforgood__glass-icon svg {
    width: 18px;
    height: 18px;
}

/* the badge carries the impact figure now, so it stacks the number over its
   label in the type the standalone block used */
.coi-kwforgood__glass-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coi-kwforgood__glass-value {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0E2A47;
    line-height: 1.2;
}

.coi-kwforgood__glass-label {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #0FA37F;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
}



/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-kwforgood {
        padding: 80px 0;
    }

    .coi-kwforgood__inner {
        flex-direction: column;
        gap: 40px;
    }

    .coi-kwforgood__text {
        flex: auto;
        max-width: 100%;
        text-align: center;
    }

    .coi-kwforgood__text h2 {
        font-size: 24px !important;
    }

    .coi-kwforgood__impact {
        justify-content: center;
        text-align: left;
    }

    .coi-kwforgood__glass-badge {
        bottom: 20px;
        right: 20px;
        left: auto;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-kwforgood {
        padding: 50px 0;
    }

    .coi-kwforgood__inner {
        padding: 0 20px;
        gap: 30px;
    }

    .coi-kwforgood__text h2 {
        font-size: 20px !important;
    }

    .coi-kwforgood__text p {
        font-size: 16px;
    }
}

/* ======================================================
   CORE VALUES SECTION
   ====================================================== */

.coi-corevalues {
    /* The page alternates navy and white down its length: How It Works, the
       problem, About Us, kW for Good. This carries the navy so the rhythm holds
       and the section is bounded by white above and below. */
    background: #0E2A47;
    padding: 96px 0 104px;
}

.coi-corevalues__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    /* the side padding has to come out of the 100%, not get added to it,
       or the section ends up wider than the screen and the cards are cut */
    box-sizing: border-box;
}

.coi-corevalues__header {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    z-index: 20;
}

.coi-corevalues__label {
    display: none;
}

.coi-corevalues__header h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.coi-corevalues__tagline {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.coi-corevalues__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.coi-corevalues__item {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 28px 26px;
    gap: 18px;
    flex: 0 1 calc(33.333% - 16px);
    min-width: 280px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.coi-corevalues__item:hover {
    background: rgba(15, 163, 127, 0.09);
    border-color: #0FA37F;
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

/* a filled, coloured badge in place of the bare stroke icon, alternating
   between the two brand accents so the row reads with some rhythm rather
   than seven identical green outlines. Each pulses gently and out of step
   with its neighbours, so the section shows a little life at rest, not just
   on hover. */
@keyframes coiCoreValuePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.coi-corevalues__item-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(15, 163, 127, 0.14);
    color: #0FA37F;
    transition: transform 0.3s ease, background 0.3s ease;
    animation: coiCoreValuePulse 3.6s ease-in-out infinite;
}

.coi-corevalues__item-icon svg {
    width: 22px;
    height: 22px;
}

/* stop each icon's pulse landing on the same beat */
.coi-corevalues__item:nth-child(2)  .coi-corevalues__item-icon { animation-delay: 0.5s; }
.coi-corevalues__item:nth-child(3)  .coi-corevalues__item-icon { animation-delay: 1s; }
.coi-corevalues__item:nth-child(4)  .coi-corevalues__item-icon { animation-delay: 1.5s; }
.coi-corevalues__item:nth-child(5)  .coi-corevalues__item-icon { animation-delay: 2s; }
.coi-corevalues__item:nth-child(6)  .coi-corevalues__item-icon { animation-delay: 2.5s; }
.coi-corevalues__item:nth-child(7)  .coi-corevalues__item-icon { animation-delay: 3s; }

.coi-corevalues__item:hover .coi-corevalues__item-icon {
    animation-play-state: paused;
    transform: scale(1.12) rotate(-6deg);
    background: rgba(15, 163, 127, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .coi-corevalues__item-icon { animation: none; }
}

.coi-corevalues__item-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coi-corevalues__item-label {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.coi-corevalues__item-desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-corevalues__inner {
        padding: 0 20px;
    }

    .coi-corevalues__header h2 {
        font-size: 24px !important;
    }

    .coi-corevalues__item {
        flex: 1 1 calc(50% - 24px);
    }
}

/* Mobile */
@media only screen and (max-width: 768px) {
    .coi-corevalues {
        padding: 60px 0;
    }

    .coi-corevalues__header {
        text-align: center;
        width: 100%;
        margin-bottom: 32px;
    }

    .coi-corevalues__header h2 {
        font-size: 20px !important;
    }

    .coi-corevalues__tagline {
        font-size: 16px;
    }

    .coi-corevalues__list {
        flex-direction: column;
    }

    .coi-corevalues__item {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}


/* ======================================================
   OUR TEAM SECTION — Stats Left + Text Right
   ====================================================== */

.coi-ourteam {
    background: #0E2A47;
    padding: 100px 0 20px;
}

.coi-ourteam__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 80px;
}

.coi-ourteam__images {
    flex: 0 0 50% !important;
    max-width: 50%;
    width: 50%;
    display: flex;
    gap: 16px;
    box-sizing: border-box;
}

.coi-ourteam__img {
    background-color: #0a1128;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.coi-ourteam__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.coi-ourteam__img:hover img {
    transform: scale(1.05);
}

.coi-ourteam__img::after {
    content: attr(data-label);
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    opacity: 0.4;
}

.coi-ourteam__img--tall {
    flex: 0 0 55%;
    min-height: 420px;
}

.coi-ourteam__img-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coi-ourteam__img-stack .coi-ourteam__img {
    flex: 1;
}

.coi-ourteam__content {
    flex: 1;
    min-width: 0;
}

.coi-ourteam__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    margin-bottom: 24px;
}

.coi-ourteam__text {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 40px;
}

.coi-ourteam__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: transparent;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none !important;
    align-self: flex-start;
}

.coi-ourteam__cta svg {
    transition: transform 0.35s ease;
}

.coi-ourteam__cta:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0E2A47 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.coi-ourteam__cta:hover svg {
    transform: translateX(4px);
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-ourteam__inner {
        flex-direction: column;
    }

    .coi-ourteam__inner {
        flex-direction: column;
        gap: 40px;
    }

    .coi-ourteam__images {
        flex: auto !important;
        max-width: 100%;
        width: 100%;
        min-height: 300px;
    }

    .coi-ourteam__img--tall {
        min-height: 300px;
    }

    .coi-ourteam__text {
        font-size: 24px;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-ourteam {
        padding: 50px 0;
    }

    .coi-ourteam__inner {
        padding: 0 20px;
    }

    .coi-ourteam__images {
        min-height: 250px;
    }

    .coi-ourteam__img--tall {
        min-height: 250px;
    }

    .coi-ourteam__text {
        font-size: 20px;
    }

    .coi-ourteam__cta {
        padding: 16px 34px;
        font-size: 13px !important;
    }
}

/* ======================================================
   NEWS & MEDIA SECTION
   ====================================================== */

.coi-newsmedia {
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%) !important;
    padding: 130px 0;
    overflow: hidden;
    position: relative;
}

.coi-newsmedia__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coi-newsmedia__label {
    display: inline-block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    background: rgba(15, 163, 127, 0.1);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(15, 163, 127, 0.2);
    margin-bottom: 24px;
}

.coi-newsmedia__subheading {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #0E2A47;
    line-height: 1.3;
    margin: 24px 0 0;
    letter-spacing: -0.01em;
}

.coi-newsmedia__text {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #555;
    line-height: 1.85;
    margin: 20px 0 40px;
}

.coi-newsmedia__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 50px;
    background: transparent;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0E2A47 !important;
    border: 2px solid #0E2A47;
    border-radius: 4px;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none !important;
}

.coi-newsmedia__cta svg {
    transition: transform 0.35s ease;
}

.coi-newsmedia__cta:hover {
    background: #0E2A47;
    border-color: #0E2A47;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 42, 71, 0.25);
}

.coi-newsmedia__cta:hover svg {
    transform: translateX(4px);
}

/* Content — top section */
.coi-newsmedia__content {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
}

.coi-newsmedia__cta-wrap {
    text-align: center;
    margin-top: 50px;
}

/* Article cards below reuse the News & Media press-card component
   (.column_feature_box etc, styled further down under that section) --
   .coi-newsmedia__articles is just the mcb-wrap-inner that triggers it. */

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-newsmedia {
        padding: 100px 0;
    }

    .coi-newsmedia__subheading {
        font-size: 30px;
    }

    .coi-newsmedia__text {
        font-size: 18px;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-newsmedia {
        padding: 70px 0;
    }

    .coi-newsmedia__inner {
        padding: 0 24px;
    }

    .coi-newsmedia__content {
        margin-bottom: 40px;
    }

    .coi-newsmedia__subheading {
        font-size: 24px;
    }

    .coi-newsmedia__text {
        font-size: 17px;
        line-height: 1.75;
    }

    .coi-newsmedia__cta {
        padding: 16px 34px;
        font-size: 13px;
    }
}

/* ======================================================
   FOOTER — Text & Layout Styling
   ====================================================== */

#Footer {
    position: relative;
    overflow: hidden;
}

#Footer .widgets_wrapper .container {
    display: flex !important;
    gap: 40px;
}

#Footer .widgets_wrapper .container .column.one-third {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#Footer .widgets_wrapper .container .column.one-third:nth-child(1),
#Footer .widgets_wrapper .container .column.one-third:nth-child(2) {
    flex: 1;
}

#Footer .widgets_wrapper .container .column.one-third:nth-child(3) {
    flex: 0 0 200px;
}

@media only screen and (max-width: 767px) {
    /* the rules above put the three footer columns in an unconditional flex
       row with no wrap, at every width — the .column.one-third float/width
       fix further up this file only affects float layout, which a flex
       container ignores, so it never actually stacked them on phones */
    #Footer .widgets_wrapper .container {
        flex-direction: column !important;
        gap: 24px;
    }

    #Footer .widgets_wrapper .container .column.one-third,
    #Footer .widgets_wrapper .container .column.one-third:nth-child(1),
    #Footer .widgets_wrapper .container .column.one-third:nth-child(2),
    #Footer .widgets_wrapper .container .column.one-third:nth-child(3) {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

#Footer .widgets_wrapper h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 24px !important;
}

#Footer .widgets_wrapper .textwidget p {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7 !important;
    margin: 0 0 2px !important;
}

#Footer .widgets_wrapper .textwidget p+p:has(strong:first-child) {
    margin-top: 20px !important;
}

#Footer .widgets_wrapper .textwidget strong {
    color: #ffffff !important;
    font-weight: 700;
}

#Footer .widgets_wrapper .widget_nav_menu nav,
#Footer .widgets_wrapper .widget_nav_menu .menu,
#Footer .widgets_wrapper .widget_nav_menu .menu li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

#Footer .widgets_wrapper .widget_nav_menu .menu li {
    margin: 0 0 6px !important;
    border-top: none !important;
    border-bottom: none !important;
}

#Footer .widgets_wrapper .widget_nav_menu .menu li::before,
#Footer .widgets_wrapper .widget_nav_menu .menu li::after {
    display: none !important;
    content: none !important;
}

#Footer .widgets_wrapper .widget_nav_menu .menu li a {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    line-height: 1.7;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    display: block;
}

#Footer .widgets_wrapper .widget_nav_menu .menu li a:hover {
    color: #ffffff !important;
    background: none !important;
}

/* Tagline */
.coi-footer-tagline {
    padding: 40px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.coi-footer-tagline p {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #ffffff;
    margin: 0;
}

/* Bottom bar */
.coi-footer-bottom {
    background-color: #0E2A47;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 30px 0;
    position: relative;
    z-index: 1;
}

.coi-footer-bottom .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.coi-footer-copy {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.coi-footer-copy a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.coi-footer-copy a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.coi-footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.coi-footer-socials a {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.coi-footer-socials a:hover {
    color: #ffffff !important;
}

.coi-footer-socials svg {
    fill: currentColor;
}

/* Hide old footer elements */
#Footer .footer-centered-logo,
#Footer .footercentImgSec {
    display: none !important;
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-footer-tagline p {
        font-size: 13px;
        letter-spacing: 0.2em;
    }
}

/* ═══════════════════════════════════════════
   HOW IT WORKS — Hero Section
   ═══════════════════════════════════════════ */

/* Hide default Betheme subheader and old builder content on How It Works page */
body.coi-page-how-it-works #Subheader,
body.coi-page-how-it-works #Content .sections_group {
    display: none !important;
}

/* Optimize Marketplace logo section */
.coi-hiw-optimize {
    background: #ffffff;
    padding: 80px 100px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.coi-hiw-optimize__img {
    max-width: 380px;
    width: 100%;
    height: auto;
}

.coi-hiw-optimize__text {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.9;
    color: #444444;
    max-width: 800px;
    margin: 40px auto 0;
    text-align: center;
}

@media only screen and (max-width: 959px) {
    .coi-hiw-optimize {
        padding: 60px 30px;
    }

    .coi-hiw-optimize__img {
        max-width: 300px;
    }
}

@media only screen and (max-width: 480px) {
    .coi-hiw-optimize {
        padding: 48px 24px;
    }

    .coi-hiw-optimize__img {
        max-width: 220px;
    }
}

/* 3 Image Grid */
.coi-hiw-image-grid {
    background: #ffffff;
    padding: 0 100px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

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

.coi-hiw-image-grid__item {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
}

/* same reveal as the homepage collage: the label fades in over a blurred
   navy wash when the pointer is on the image */
.coi-hiw-image-grid__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(14, 42, 71, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.coi-hiw-image-grid__item:hover .coi-hiw-image-grid__label,
.coi-hiw-image-grid__item:focus-within .coi-hiw-image-grid__label {
    opacity: 1;
}

/* No hover on touch, so the labels stay visible. They sit over whatever the
   photo happens to be — the P2P image is bright along the bottom — so the
   wash runs deeper and darker than a light scrim to keep the text legible. */
@media (hover: none) {
    .coi-hiw-image-grid__label {
        opacity: 1;
        background: linear-gradient(to top,
            rgba(14, 42, 71, 0.92) 0%,
            rgba(14, 42, 71, 0.72) 34%,
            rgba(14, 42, 71, 0) 78%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: flex-end;
        justify-content: center;
        font-size: 15px;
        letter-spacing: 0.1em;
        padding: 18px 16px 20px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }

    /* script confirmed this is a touch device, so the label hides again and a
       tap performs the reveal — the same animation the pointer gets on hover */
    .coi-hiw-image-grid.is-tap-reveal .coi-hiw-image-grid__label {
        opacity: 0;
        background: rgba(14, 42, 71, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        align-items: center;
        padding: 24px;
        text-shadow: none;
    }

    .coi-hiw-image-grid.is-tap-reveal .coi-hiw-image-grid__item.is-revealed .coi-hiw-image-grid__label {
        opacity: 1;
    }

    .coi-hiw-image-grid.is-tap-reveal .coi-hiw-image-grid__item {
        cursor: pointer;
    }
}

@media (hover: none) and (max-width: 480px) {
    .coi-hiw-image-grid__label {
        font-size: 14px;
        letter-spacing: 0.08em;
        padding: 16px 12px 18px;
    }
}

.coi-hiw-image-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

@media only screen and (max-width: 959px) {
    .coi-hiw-image-grid {
        padding: 0 30px 60px;
    }

    .coi-hiw-image-grid__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* two columns leave a third image alone in the left cell, so centre it
   across the row instead of letting it hang off to one side */
@media only screen and (min-width: 481px) and (max-width: 959px) {
    .coi-hiw-image-grid__item:nth-child(3):last-child {
        grid-column: 1 / -1;
        width: calc(50% - 12px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 480px) {
    .coi-hiw-image-grid {
        padding: 0 24px 48px;
    }

    .coi-hiw-image-grid__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Fix for sticky scroll in Betheme */
html,
body,
#Wrapper,
#Content {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Transforming The Electric Grid — Evolution Section */
.coi-hiw-evolution {
    background: #f5f5f5;
    padding: 0;
    height: 400vh;
}

.coi-hiw-evolution__sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

body.admin-bar .coi-hiw-evolution__sticky-container {
    top: 32px;
    height: calc(100vh - 32px);
}

.coi-hiw-evolution__inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

.coi-hiw-evolution__header {
    max-width: 900px;
    margin: 0 auto 10px;
    text-align: center;
}

.coi-hiw-evolution__accent-line {
    width: 50px;
    height: 3px;
    background: #0FA37F;
    margin: 0 auto 24px;
    border-radius: 2px;
}

/* Dots Navigation */
.coi-hiw-evolution__dots {
    position: absolute;
    left: -30px;
    top: calc(50% + 30px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.coi-hiw-evolution__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.coi-evo-dot--active {
    background-color: #0E2A47;
    transform: scale(1.3);
}

.coi-hiw-evolution__title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    color: #0E2A47;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Cards Wrapper */
.coi-hiw-evolution__cards-wrapper {
    display: grid;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Card */
.coi-hiw-evolution__card {
    grid-area: 1 / 1;

    display: grid;
    grid-template-columns: 1.3fr 1fr;
    column-gap: 60px;
    row-gap: 20px;
    align-items: center;

    opacity: 1;
    visibility: hidden;
    transition: visibility 1.5s step-end;
    background: transparent;
    z-index: 1;
}

.coi-evo-card--active,
.coi-evo-card--visited {
    visibility: visible;
    transition: visibility 0s;
}

.coi-hiw-evolution__card-top,
.coi-hiw-evolution__card-body {
    opacity: 0;
    transition: opacity 0s;
}

.coi-evo-card--active .coi-hiw-evolution__card-top,
.coi-evo-card--active .coi-hiw-evolution__card-body {
    opacity: 1;
    transition: opacity 1.5s ease;
}

/* Card top — era label */
.coi-hiw-evolution__card-top {
    grid-column: 1 / -1;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 20px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.coi-hiw-evolution__card-era sup {
    line-height: 0;
}

.coi-hiw-evolution__card-era {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(12px, 1.5vw, 15px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0FA37F;
    margin: 0;
    line-height: 1.4;
}

.coi-hiw-evolution__card-era-sub {
    display: block;
    font-size: clamp(10px, 1.2vw, 12px);
    font-weight: 600;
    letter-spacing: 0.14em;
    margin-top: 4px;
    opacity: 0.7;
}

/* Card image */
.coi-hiw-evolution__card-image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.coi-evo-card--active .coi-hiw-evolution__card-image,
.coi-evo-card--visited .coi-hiw-evolution__card-image {
    opacity: 1;
    transition: opacity 1.5s ease 0s;
}

.coi-hiw-evolution__card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Composite Card Images (Animated overlay) */
.coi-composite-image .coi-base-img {
    position: relative;
    z-index: 1;
}

.coi-composite-image .coi-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.5s ease !important;
}

.coi-hiw-evolution--scrolling-down .coi-composite-image .coi-overlay-img {
    transform: translateY(-300px);
}

.coi-hiw-evolution--scrolling-up .coi-composite-image .coi-overlay-img {
    transform: translateY(300px);
}

.coi-evo-card--active .coi-composite-image .coi-overlay-img,
.coi-evo-card--visited .coi-composite-image .coi-overlay-img {
    transform: translateY(0);
    opacity: 1;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, opacity 1.5s ease 0.3s !important;
}

/* Card body */
.coi-hiw-evolution__card-body {
    transform: translateX(40px);
    transition: transform 0s, opacity 0s;
}

.coi-evo-card--active .coi-hiw-evolution__card-body {
    transform: translateX(0);
    opacity: 1;
    transition: transform 1.5s ease 0.2s, opacity 1.5s ease 0.2s;
}

.coi-hiw-evolution__card-subtitle {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0E2A47;
    margin: 0 0 20px 0;
    line-height: 1.55;
}

.coi-hiw-evolution__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coi-hiw-evolution__card-list li {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(15px, 1.9vw, 19px);
    font-weight: 400;
    color: rgba(14, 42, 71, 0.65);
    line-height: 1.75;
    padding: 6px 0 6px 20px;
    position: relative;
}

.coi-hiw-evolution__card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 163, 127, 0.5);
}

.coi-hiw-evolution__card-list li strong {
    color: inherit;
    font-weight: 700;
}

/* Tablet — Revert to stacked scrolling */
@media only screen and (max-width: 959px) {
    .coi-hiw-evolution {
        padding: 70px 0;
        height: auto;
    }

    .coi-hiw-evolution__sticky-container {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
    }

    .coi-hiw-evolution__title {
        font-size: clamp(24px, 6vw, 34px);
        word-wrap: break-word;
        padding: 0 10px;
    }

    .coi-hiw-evolution__dots {
        display: none;
    }

    .coi-hiw-evolution__cards-wrapper {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 60px;
        max-width: 500px;
        margin: 0 auto;
    }

    .coi-hiw-evolution__card {
        position: relative;
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
    }

    .coi-hiw-evolution__card-image {
        padding: 12px;
        transform: none !important;
        opacity: 1 !important;
        margin-bottom: 28px;
    }

    .coi-hiw-evolution__card-body {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-hiw-evolution {
        padding: 50px 0;
    }

    .coi-hiw-evolution__inner {
        padding: 0 20px;
    }

    .coi-hiw-evolution__title {
        font-size: 26px;
    }

    .coi-hiw-evolution__header {
        margin-bottom: 40px;
    }

    .coi-hiw-evolution__card-era {
        font-size: 10px;
    }

    .coi-hiw-evolution__card-subtitle {
        font-size: 13px;
    }

    .coi-hiw-evolution__card-list li {
        font-size: 13px;
    }

    .coi-hiw-evolution__arrow {
        padding: 12px 0 20px;
    }
}

/* How Does It Work Section */
.coi-hiw-howdoes {
    background: #ffffff;
    padding: 100px 0;
}

.coi-hiw-howdoes__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.coi-hiw-howdoes__content {
    text-align: center;
}

.coi-hiw-howdoes__image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.coi-hiw-howdoes__accent-line {
    width: 50px;
    height: 3px;
    background: #0FA37F;
    margin-bottom: 24px;
}

.coi-hiw-howdoes__title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 42px;
    font-weight: 400;
    color: #0E2A47;
    margin: 0 0 24px 0;
    line-height: 1.35;
    text-align: center;
}

.coi-hiw-howdoes__text {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    line-height: 1.85;
    margin: 0;
    text-align: center;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-hiw-howdoes {
        padding: 70px 0;
    }

    .coi-hiw-howdoes__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coi-hiw-howdoes__title {
        font-size: 34px;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-hiw-howdoes {
        padding: 50px 0;
    }

    .coi-hiw-howdoes__inner {
        padding: 0 20px;
        gap: 30px;
    }

    .coi-hiw-howdoes__title {
        font-size: 26px;
    }
}

/* Three Offerings — scroll animations */
.coi-offer-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.coi-offer-animate--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Three Offerings Section */
.coi-hiw-offerings {
    background: #f5f5f5;
    padding: 100px 0;
}

.coi-hiw-offerings__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.coi-hiw-offerings__header {
    text-align: center;
    margin-bottom: 70px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.coi-hiw-offerings__accent-line {
    width: 50px;
    height: 3px;
    background: #0FA37F;
    margin: 0 auto 24px;
}

.coi-hiw-offerings__heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 42px;
    font-weight: 400;
    color: #0E2A47;
    margin: 0;
    line-height: 1.35;
}

/* Use Case Selector */
.coi-hiw-usecase-selector {
    display: flex;
    justify-content: center;
    margin: 30px auto 0;
    flex-wrap: wrap;
    gap: 16px;
}

.coi-hiw-usecase-btn {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 600;
    color: #666666;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.coi-hiw-usecase-btn:hover {
    color: #0E2A47;
    border-color: #0E2A47;
}

.coi-hiw-usecase-btn.coi-active {
    background: #0E2A47;
    color: #ffffff;
    border-color: #0E2A47;
    box-shadow: 0 4px 12px rgba(14, 42, 71, 0.2);
}

.coi-hiw-usecase-img {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.coi-hiw-usecase-img.coi-active {
    display: flex;
}

.coi-hiw-usecase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.coi-hiw-usecase-card {
    display: none;
}

@keyframes coiFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes coiFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Offering Blocks Layout */
.coi-hiw-offerings__block {
    margin-bottom: 100px;
    padding-bottom: 100px;
    border-bottom: 1px solid #e8e8e8;
}

.coi-hiw-offerings__block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.coi-hiw-offerings__block-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Alternating Layout Order */
.coi-layout-image-right .coi-hiw-offerings__block-image {
    order: 2;
}

.coi-layout-image-right .coi-hiw-offerings__block-content {
    order: 1;
}

.coi-hiw-offerings__block-header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.coi-hiw-offerings__block-number {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0FA37F;
    letter-spacing: 0.05em;
    line-height: 1;
}

.coi-hiw-offerings__block-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 34px;
    font-weight: 500;
    color: #0E2A47;
    margin: 0;
    line-height: 1.3;
}

.coi-hiw-offerings__desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 17px;
    font-weight: 400;
    color: #666666;
    line-height: 1.7;
    margin: 0 0 40px 0;
    text-align: left;
}

/* Offering Block Image Placeholder */
.coi-hiw-offerings__block-image {
    background: #f0f0f0;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.coi-hiw-offerings__block-image span {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #aaaaaa;
}

/* Cards Wrapper */
.coi-hiw-offerings__cards {
    display: block;
}

.coi-hiw-offerings__card {
    text-align: left;
}

.coi-hiw-offerings__card-rule {
    width: 100%;
    height: 3px;
    background: #0E2A47;
    margin-bottom: 24px;
}

.coi-hiw-offerings__card-label {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0E2A47;
    margin: 0 0 24px 0;
    line-height: 1.4;
}

.coi-hiw-offerings__card-block {
    margin-bottom: 20px;
}

.coi-hiw-offerings__card-subtitle {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0FA37F;
    margin: 0 0 10px 0;
}

.coi-hiw-offerings__card-block p {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    color: #444444;
    line-height: 1.7;
    margin: 0;
}

.coi-hiw-offerings__card-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coi-hiw-offerings__card-block ul li {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    color: #444444;
    line-height: 1.7;
    padding: 4px 0 4px 18px;
    position: relative;
}

.coi-hiw-offerings__card-block ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0FA37F;
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-hiw-offerings {
        padding: 70px 0;
    }

    .coi-hiw-offerings__heading {
        font-size: 34px;
    }

    .coi-hiw-offerings__block {
        margin-bottom: 60px;
        padding-bottom: 60px;
    }

    .coi-hiw-offerings__block-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Reset alternating layout on tablet to stack nicely */
    .coi-layout-image-right .coi-hiw-offerings__block-image {
        order: 1;
        /* Reset to be on top */
    }

    .coi-layout-image-right .coi-hiw-offerings__block-content {
        order: 2;
        /* Reset to be below image */
    }

    .coi-hiw-offerings__block-header {
        justify-content: center;
        text-align: center;
    }

    .coi-hiw-offerings__desc {
        text-align: center;
    }

    .coi-hiw-offerings__block-title {
        font-size: 26px;
    }

    .coi-hiw-offerings__block-number {
        font-size: 38px;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-hiw-offerings {
        padding: 50px 0;
    }

    .coi-hiw-offerings__inner {
        padding: 0 20px;
    }

    .coi-hiw-offerings__heading {
        font-size: 26px;
    }

    .coi-hiw-offerings__block-title {
        font-size: 22px;
    }

    .coi-hiw-offerings__block-number {
        font-size: 32px;
    }

    .coi-hiw-offerings__block {
        margin-bottom: 40px;
        padding-bottom: 40px;
    }
}

.coi-hiw-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Gradient placeholder until real image is added */
    background-color: #0E2A47;
    background-image: linear-gradient(135deg, #0E2A47 0%, #0E2A47 50%, #0FA37F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.coi-hiw-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 17, 34, 0.55) 0%, rgba(10, 17, 34, 0.30) 45%, rgba(10, 17, 34, 0.72) 100%);
    z-index: 1;
}

.coi-hiw-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 4vw;
    width: 100%;
    margin: 0 auto;
    /* the padding has to come out of the 100%, not add to it, or this runs
       past the edge of the screen on a phone — same bug that cut Core
       Values off before */
    box-sizing: border-box;
}

/* Two lines, broken in the markup after "Cost Center". Splitting it in half
   means each line is far shorter, so the type can be much larger than it
   could be on one line. nowrap keeps each line intact. */
.coi-hiw-hero__title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(24px, 5vw, 86px);
    font-weight: 800;
    line-height: 1.12;
    color: #ffffff;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.6);
}

.coi-hiw-hero__title .coi-highlight {
    color: #0FA37F;
}

.coi-hiw-hero__subtitle {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

/* Tablet */
@media only screen and (max-width: 959px) {
    .coi-hiw-hero {
        height: 70vh;
        min-height: 400px;
    }

    .coi-hiw-hero__content {
        padding: 0 3vw;
    }
}

/* Mobile */
@media only screen and (max-width: 480px) {
    .coi-hiw-hero {
        height: 60vh;
        min-height: 350px;
    }

    .coi-hiw-hero__content {
        padding: 0 16px;
    }

    .coi-hiw-hero__title {
        margin-bottom: 16px;
    }
}

/* --- Our Team Profiles Clean Design Override --- */
.team.team_vertical {
    background: transparent !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 50px !important;
}

.team.team_vertical .image_frame {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.team.team_vertical .image_frame .image_wrapper,
.team.team_vertical .image_frame img {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
}

.team.team_vertical .desc_wrapper {
    padding: 0 !important;
    background: transparent !important;
}

.team.team_vertical .desc_wrapper h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #0E2A47 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.team.team_vertical .desc_wrapper p.subtitle {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

.team.team_vertical .desc_wrapper hr.hr_color {
    display: none !important;
}

.team.team_vertical .desc_wrapper .links {
    text-align: left !important;
    margin-top: 12px !important;
}

/* Custom Our Team Page Redesign */
#custom-our-team-page {
    font-family: inherit;
    color: #0E2A47;
    /* Dark Blue */
}

/* Hero Section */
.team-hero {
    position: relative;
    height: 500px;
}

@media (min-width: 768px) {
    .team-hero {
        height: 600px;
    }
}

.team-hero-bg {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.team-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 95%;
}

.team-hero-overlay-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 93.5%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
}

.team-hero-overlay-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 64%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.team-hero-content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 180px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    color: #FFFFFF;
    z-index: 5;
}

.team-hero-label {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0FA37F;
    /* Yellow-Green */
}

.team-hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin: 0;
    color: #FFFFFF;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .team-hero-title {
        font-size: 2.5rem;
    }
}

/* Intro Section */
.team-intro {
    position: relative;
    background-color: #FFFFFF;
    padding-top: 4rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .team-intro {
        margin-top: -100px;
        padding-top: 6rem;
    }
}

.team-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .team-intro-inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.team-intro-images {
    width: 100%;
    display: flex;
    align-items: center;
}

.intro-img-main {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.intro-img-main img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.team-intro-text h3 {
    font-size: 2rem;
    line-height: 1.4;
    color: #0E2A47;
    /* Dark Cornflower Blue */
    font-weight: 500;
}

@media (max-width: 768px) {
    .team-intro-text h3 {
        font-size: 1.5rem;
    }
}

/* Grid Sections */
.team-grid-section {
    padding: 4rem 1.5rem;
}

.team-grid-section.bg-light {
    background-color: #f8f9fa;
    /* slightly off white */
}

.team-grid-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    color: #0E2A47;
    /* Dark Cornflower Blue */
    margin-bottom: 3rem;
    display: inline-block;
    padding-bottom: 0.5rem;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 2rem;
}

@media (min-width: 576px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Team Member Cards */
.team-member-item {
    display: flex;
    flex-direction: column;
}

.team-member-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* No bio to open, so nothing to click. */
.team-member-card--no-bio {
    cursor: default;
}

.team-member-card:hover {
    transform: translateY(-5px);
}

.card-image-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    /* 4:5, matching the reshot team photos so they are not cropped */
    padding-bottom: 125%;
}

.card-image-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.team-member-card:hover .card-image-wrap img {
    filter: grayscale(0%);
    /* Reveal color on hover for a nice effect */
}

.card-overlay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    /* Clear without any tint */
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.team-member-card:hover .card-overlay {
    transform: translateY(0);
}

.card-read-more {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    /* Added shadow so white text is legible without the tint */
}

.card-read-more::after {
    content: "→";
    margin-left: 0.5rem;
    color: #0FA37F;
    /* Yellow-Green */
}

.team-member-card:hover .card-read-more {
    opacity: 1;
    transform: translateY(0);
}

.card-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    color: #0E2A47;
    /* Dark Blue */
    margin-bottom: 0.25rem;
}

.card-role {
    display: block;
    font-size: 0.875rem;
    color: #666;
}

/* Popup */
.team-member-popup {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-member-popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(14, 42, 71, 0.95);
    /* Dark Cornflower Blue */
}

.popup-content-wrap {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 5vh auto;
    background-color: #FFFFFF;
    height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .popup-content-wrap {
        flex-direction: row;
        height: auto;
        min-height: 60vh;
        max-height: 90vh;
        margin: 10vh auto;
    }
}

.popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    color: #0E2A47;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 10;
}

.popup-close:hover {
    background: transparent !important;
    opacity: 0.7;
}

.popup-close svg line {
    stroke: #0E2A47;
}

.popup-close-text {
    margin-right: 0.5rem;
}

.popup-image {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .popup-image {
        width: 40%;
    }
}

.popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-info {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .popup-info {
        padding: 3rem;
    }
}

.popup-header {
    margin-bottom: 2rem;
}

.popup-header h3 {
    font-size: 2rem;
    color: #0E2A47;
    /* Dark Blue */
    margin: 0 0 0.5rem 0;
}

.popup-role {
    font-size: 1rem;
    color: #0E2A47;
    /* Dark Cornflower Blue */
    font-weight: 500;
}

.popup-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

.popup-bio p {
    margin-bottom: 1rem;
}

/* --- Energy Management Page --- */
#coi-energy-management {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: #444;
}

/* Hero */
.em-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.em-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.em-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.em-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(14, 42, 71, 0.9) 0%, rgba(14, 42, 71, 0.7) 100%);
    z-index: 2;
}

.em-hero-content {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    width: 100%;
    padding: 0 40px;
    /* the padding has to come out of the 100%, not add to it, or this runs
       past the edge of the screen on a phone — same bug that cut Core
       Values off before */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.em-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(40px, 5vw, 60px);
    color: #fff;
    margin: 0 0 18px;
    font-weight: 600;
}

.em-hero-subtitle {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.em-overview-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.em-overview-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

.em-overview-content p:last-child {
    margin-bottom: 0;
}

/* Sections General */
.em-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
}

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

.em-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(32px, 4vw, 46px);
    color: #0E2A47;
    margin: 0;
    font-weight: 600;
}

.em-section-subtitle {
    font-size: clamp(16px, 1.6vw, 19px);
    color: #5A6B85;
    margin: 14px 0 0;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* coi_universal_font() forces weight:600 site-wide via an ID selector
   (#Content *), which beats a plain class no matter how specific —
   needs an ID of its own to win. See the UNBOLDING note further down
   this file for the same pattern used elsewhere. */
#Content .em-section-subtitle {
    font-weight: 500 !important;
}

/* the shared .em-section-header's 60px bottom margin was sized for a
   single title line; with a subtitle underneath it left a big gap
   before the paragraph below */
.em-overview .em-section-header {
    margin-bottom: 30px;
}

/* Eliza wanted just this one subtitle green -- scoped to .em-overview so
   it doesn't touch .em-section-subtitle anywhere else this gets reused. */
.em-overview .em-section-subtitle {
    color: #0FA37F;
}

.bg-light {
    background-color: #f9fafc;
}

/* What This Unlocks — dark, matching the navy bands elsewhere on the site,
   rather than the plain light background it had. .bg-light also styles the
   Industries section below, so these override on the more specific
   .em-unlocks.bg-light rather than touching that shared class. */
.em-unlocks.bg-light {
    background-color: #0E2A47;
}

.em-unlocks .em-section-title {
    color: #ffffff;
}

.em-unlocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.em-unlock-card {
    background: rgba(255, 255, 255, 0.06);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border-top: 4px solid #0FA37F;
}

.em-unlock-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* 5 cards fit 4-per-row at typical desktop widths, leaving this one alone
   on its own row flush left — centre it instead. Targets exactly 5 cards
   specifically, so it stops applying (and needs a look) if a 6th is added. */
.em-unlock-card:last-child:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 310px;
    margin: 0 auto;
}

.em-unlock-icon {
    width: 60px;
    height: 60px;
    background: rgba(15, 163, 127, 0.16);
    color: #0FA37F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.em-unlock-icon svg {
    width: 30px;
    height: 30px;
}

.em-unlock-card h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: 700;
}

.em-unlock-card p {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* Beyond Optimization */
.em-beyond-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.em-beyond-item {
    background: #fff;
    border-left: 5px solid #0E2A47;
    padding: 30px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.em-beyond-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-left-color: #0FA37F;
}

/* the same badge-and-pulse treatment given to Core Values, carried over to
   this list so it reads as more than a stack of bordered text blocks */
.em-beyond-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 42, 71, 0.09);
    color: #0E2A47;
    animation: coiCoreValuePulse 3.6s ease-in-out infinite;
    transition: transform 0.3s ease, background 0.3s ease;
}

.em-beyond-icon svg {
    width: 24px;
    height: 24px;
}

.em-beyond-item:nth-child(3n+2) .em-beyond-icon {
    background: rgba(15, 163, 127, 0.14);
    color: #6fae2c;
}

.em-beyond-item:nth-child(2) .em-beyond-icon { animation-delay: 0.6s; }
.em-beyond-item:nth-child(3) .em-beyond-icon { animation-delay: 1.2s; }

.em-beyond-item:hover .em-beyond-icon {
    animation-play-state: paused;
    transform: scale(1.12) rotate(-6deg);
    background: rgba(14, 42, 71, 0.16);
}

.em-beyond-item:nth-child(3n+2):hover .em-beyond-icon {
    background: rgba(15, 163, 127, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .em-beyond-icon { animation: none; }
}

.em-beyond-content h3 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #0E2A47;
    margin-bottom: 10px;
    font-weight: 700;
}

.em-beyond-content p {
    font-size: 17px;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

/* Industry We Serve */
.em-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.em-industry-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.em-industry-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.em-industry-card:hover img {
    transform: scale(1.05);
}

.em-industry-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0E2A47;
    color: #fff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 30px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* the seventh category runs the full row on its own rather than sitting
   alone beside two empty slots */
.em-industry-wide {
    margin-top: 30px;
}

.em-industry-card--wide {
    aspect-ratio: auto;
    height: 340px;
}

/* a dark wash under the label makes it readable over a lighter photo,
   which the wide banner is more likely to be than the square crops */
.em-industry-card--wide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(14, 42, 71, 0.55) 100%);
    z-index: 1;
}

.em-industry-card--wide .em-industry-label,
.em-industry-card--wide .em-industry-cta {
    z-index: 2;
}

/* the category name stays put; a second pill offering the actual next step
   rises in beside it once a visitor is looking at the card */
.em-industry-cta {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 12px);
    background: #0FA37F;
    color: #0E2A47;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 30px;
    white-space: nowrap;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.em-industry-card:hover .em-industry-label {
    transform: translate(-50%, -46px);
}

.em-industry-card:hover .em-industry-cta {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

@media (hover: none) {
    /* nothing to hover on a touch screen, so both pills sit stacked and
       visible rather than one being permanently unreachable */
    .em-industry-label { transform: translate(-50%, -46px); }
    .em-industry-cta { opacity: 1; pointer-events: auto; }
}

/* Responsive */
@media (max-width: 991px) {
    .em-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .em-overview-content {
        padding: 0 15px;
    }

    .em-industry-grid {
        grid-template-columns: 1fr;
    }

    .em-container {
        padding: 60px 20px;
    }
}

/* ======================================================
   KW FOR GOOD PAGE STYLES
   ====================================================== */

.coi-page-kw-for-good {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: #555;
    background: #fff;
}

.kwfg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
}

.kwfg-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(36px, 4vw, 48px);
    color: #0E2A47;
    margin: 0 0 20px;
    font-weight: 600;
}

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

/* Hero Section */
.kwfg-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kwfg-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kwfg-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kwfg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(14, 42, 71, 0.85) 0%, rgba(14, 42, 71, 0.6) 100%);
    z-index: 1;
}

.kwfg-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 40px;
}

.kwfg-hero-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #0FA37F;
    margin-bottom: 24px;
}

.kwfg-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(48px, 6vw, 72px);
    color: #fff;
    margin: 0 0 24px;
    font-weight: 600;
    line-height: 1.1;
}

.kwfg-hero-title span {
    color: #0FA37F;
}

.kwfg-hero-subtitle {
    font-size: 20px;
    color: #f0f0f0;
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

.kwfg-hero-impact-badge {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: floatBadge 4s ease-in-out infinite;
}

.kwfg-badge-icon {
    width: 40px;
    height: 40px;
    background: #0FA37F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.kwfg-badge-icon svg {
    width: 20px;
    height: 20px;
}

.kwfg-badge-text strong {
    display: block;
    font-size: 22px;
    color: #0E2A47;
    line-height: 1.2;
}

.kwfg-badge-text span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0FA37F;
    font-weight: 700;
}

/* Background & Mission */
/* The Energy Burden and Our Mission read as two stacked sections rather than
   a side-by-side pair, so each gets the reader's full attention in turn. */
.kwfg-burden {
    text-align: center;
}

.kwfg-burden-inner {
    max-width: 900px;
    padding-bottom: 36px;
}

.kwfg-burden-inner .kwfg-mission-content {
    text-align: left;
}

.kwfg-burden-inner .kwfg-mission-content p:last-child {
    margin-bottom: 0;
}

.kwfg-mission-inner {
    max-width: 780px;
    padding-top: 0;
}

.kwfg-mission-content p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.kwfg-highlight-card {
    background: #f8f9fc;
    padding: 50px 40px;
    border-radius: 16px;
    border-top: 6px solid #0E2A47;
    box-shadow: 0 20px 50px rgba(14, 42, 71, 0.05);
}

.kwfg-highlight-icon {
    width: 64px;
    height: 64px;
    color: #0E2A47;
    background: rgba(14, 42, 71, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.kwfg-highlight-icon svg {
    width: 32px;
    height: 32px;
}

.kwfg-highlight-card h3 {
    font-size: 28px;
    color: #0E2A47;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

.kwfg-highlight-card p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

/* Partners */
.kwfg-partners {
    text-align: center;
}

.kwfg-partners-content {
    max-width: 800px;
    margin: 0 auto;
}

.kwfg-partners-content h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    color: #0E2A47;
    margin-bottom: 24px;
    font-weight: 600;
}

.kwfg-partners-content p {
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
}

/* How Gifting Works */
.kwfg-gifting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.kwfg-gifting-card {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.kwfg-gifting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(14, 42, 71, 0.1);
}

.kwfg-gifting-icon {
    width: 80px;
    height: 80px;
    background: #f4f6f9;
    color: #0FA37F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.kwfg-gifting-icon svg {
    width: 40px;
    height: 40px;
}

.kwfg-gifting-card h3 {
    font-size: 22px;
    color: #0E2A47;
    margin-bottom: 16px;
    font-weight: 700;
}

.kwfg-gifting-card p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Benefits */
.kwfg-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.kwfg-benefit-item {
    display: flex;
    gap: 24px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.kwfg-benefit-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #0FA37F;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.kwfg-benefit-check svg {
    width: 18px;
    height: 18px;
}

.kwfg-benefit-content h3 {
    font-size: 22px;
    color: #0E2A47;
    margin-bottom: 12px;
    font-weight: 700;
}

.kwfg-benefit-content p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* CTA */
.kwfg-cta {
    background: #0E2A47;
    padding: 100px 40px;
    text-align: center;
}

.kwfg-cta-content h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(36px, 4vw, 56px);
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.kwfg-cta-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

.kwfg-cta-button {
    display: inline-block;
    padding: 16px 40px;
    background: #0FA37F;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.kwfg-cta-button:hover {
    background: #75ad36;
}

.kwfg-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.kwfg-paypal-container {
    margin-top: 20px;
}

.kwfg-cta-actions .kwfg-paypal-container {
    margin-top: 0;
}

.kwfg-paypal-container form {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 991px) {
    .kwfg-benefits-grid {
        grid-template-columns: 1fr;
    }

    .kwfg-hero-impact-badge {
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
    }
}

@media (max-width: 768px) {
    .kwfg-container {
        padding: 60px 20px;
    }

    .kwfg-hero {
        min-height: 400px;
    }

    .kwfg-hero-title {
        font-size: 40px;
    }

    .kwfg-highlight-card {
        padding: 30px 20px;
    }

    .kwfg-benefit-item {
        flex-direction: column;
        gap: 16px;
    }
}

/* Disable E2X Popup */
#pum-3570 {
    display: none !important;
}

/* Ensure Popup Maker doesn't lock page scroll when the hidden popup triggers */
html.pum-open, 
html.pum-open.pum-open-overlay, 
html.pum-open.pum-open-scrollable,
body.pum-open,
body.pum-open.pum-open-overlay {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Prevent horizontal scrolling from exposing off-canvas side menu */
html, body, #Wrapper {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Completely hide the Betheme side-slide off-canvas panel (replaced by dropdown menu) */
#Side_slide,
#body_overlay {
    display: none !important;
}

/* ============================================================
   MOBILE DROPDOWN MENU (replaces side-slide)
   ============================================================ */
@media only screen and (max-width: 959px) {
    /* Dropdown container — initially hidden, toggled by JS slideToggle */
    #Top_bar #menu {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #0E2A47 !important;
        z-index: 9999;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        border-top: 3px solid #0FA37F;
    }

    /* Menu items */
    #Top_bar #menu ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #Top_bar #menu ul li a,
    #Top_bar #menu ul li a span {
        color: #ffffff !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        display: block;
        line-height: 1.4 !important;
        background: none !important;
        transition: background 0.2s ease;
    }

    #Top_bar #menu ul li a:hover,
    #Top_bar #menu ul li.current-menu-item > a,
    #Top_bar #menu ul li a:hover span,
    #Top_bar #menu ul li.current-menu-item > a span {
        background: rgba(15, 163, 127, 0.1) !important;
        color: #0FA37F !important;
    }

    /* Submenu styling */
    #Top_bar #menu ul li ul {
        position: static !important;
        width: 100% !important;
        display: none;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #Top_bar #menu ul li.hover > ul {
        display: block;
    }

    #Top_bar #menu ul li ul li a,
    #Top_bar #menu ul li ul li a span {
        padding-left: 40px !important;
        font-size: 14px !important;
    }

    /* Submenu toggle button */
    #Top_bar #menu ul li.submenu .menu-toggle {
        color: rgba(255, 255, 255, 0.5) !important;
    }
}

/* Fix for blank screen when video enters fullscreen */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
    object-fit: contain !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    z-index: 2147483647 !important;
}

/* ============================================================
   HOMEPAGE — UNIFORM TYPEFACE
   One rule so every heading, paragraph and form control on the
   home page uses the same family. Icon fonts (<i class="icon-...">)
   are deliberately not targeted so the social icons keep working.
   ============================================================ */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home p,
body.home li,
body.home label,
body.home blockquote,
body.home input,
body.home textarea,
body.home select,
body.home button,
body.home .title,
body.home .fancy_heading .title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
}


/* ============================================================
   HOMEPAGE — MOBILE / TABLET FIXES
   The cycling hero and the How It Works benefits line are set to
   one line on desktop; on small screens they must wrap instead of
   pushing the page sideways.
   ============================================================ */
@media only screen and (max-width: 1024px) {
    .coi-hiwsum__cards {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .coi-hiwsum__card {
        padding: 34px 24px 38px;
    }

    .coi-hiwsum__title {
        white-space: normal !important;
        font-size: clamp(20px, 3.4vw, 30px) !important;
        line-height: 1.35;
    }
}

@media only screen and (max-width: 767px) {
    body.home {
        overflow-x: hidden;
    }

    /* hero: allow the phrases to wrap, keep the rise-and-fade */
    .coi-video-hero__content h1.coi-cycle-hero {
        font-size: 5.5vw !important;
        min-height: 1.9em;
    }

    .coi-cycle-item {
        left: 0;
        right: 0;
        white-space: nowrap;
        transform: translateY(40px);
        padding: 0.18em 0.4em !important;
    }

    .coi-cycle-item.is-active {
        transform: translateY(0);
    }

    .coi-video-hero__content h3 {
        font-size: 17px !important;
    }

    /* How It Works summary */
    .coi-hiwsum {
        padding: 60px 0;
    }

    .coi-hiwsum__inner {
        padding: 0 18px;
        gap: 32px;
    }

    .coi-hiwsum__title {
        font-size: 22px !important;
        line-height: 1.4;
    }

    .coi-hiwsum__cards {
        margin-top: 32px;
        border-radius: 10px;
    }

    .coi-hiwsum__card-img {
        height: 100px;
        margin-bottom: 18px;
    }

    .coi-hiwsum__card-img img {
        max-height: 100px;
    }

    .coi-hiwsum__card h3 {
        font-size: 19px;
    }

    .coi-hiwsum__card p {
        font-size: 15px;
        max-width: 100%;
    }

    .coi-hiwsum__cta {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}


/* ---- How It Works hero: wrap on small screens ---- */
@media only screen and (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .coi-hiw-hero__content {
        padding: 0 6px;
    }

    /* Two lines here as well, so each can be far bigger than the single
       line allowed. Still sized to the viewport so neither line breaks. */
    .coi-hiw-hero__title {
        white-space: nowrap !important;
        font-size: 5.5vw !important;
        line-height: 1.18;
        margin-bottom: 14px;
    }

    .coi-hiw-hero__subtitle {
        font-size: 2.5vw !important;
        line-height: 1.5;
    }
}


/* ---- SaLisa video block inside News & Media: mobile sizing ---- */
@media only screen and (max-width: 767px) {
    .coi-nyse--in-news {
        padding: 0 0 40px;
    }

    .coi-nyse--in-news .coi-nyse__inner {
        flex-direction: column;
        gap: 24px;
        padding: 0;
    }

    .coi-nyse--in-news .coi-nyse__content h2 {
        font-size: 24px !important;
        line-height: 1.35;
        margin-bottom: 16px;
    }

    .coi-nyse--in-news .coi-nyse__text {
        font-size: 16px !important;
        line-height: 1.7;
    }

    .coi-nyse--in-news .coi-nyse__label {
        margin-bottom: 14px;
    }
}

/* ============================================================
   CONTACT US — intro copy
   The two paragraphs above the form sit in zero-margin builder
   columns, so the lines and blocks run together. Open them up.
   ============================================================ */
.page-id-12 .column_attr h5 {
    line-height: 1.9 !important;
    margin: 0 0 22px;
}

@media only screen and (max-width: 767px) {
    .page-id-12 .column_attr h5 {
        line-height: 1.8 !important;
        margin-bottom: 18px;
    }
}

/* ============================================================
   NEWS & MEDIA — press cards
   The builder lays these out as floated half-columns, so every
   card is only as tall as its own copy and the grid runs ragged.
   Lay the row out with flex so cards on a line match height, give
   each logo the same tile so images stop driving the height, and
   pin the date to the bottom so the dates line up across a row.
   ============================================================ */
.page-id-139 .mcb-wrap-inner:has(> .column_feature_box),
#coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 26px;
}

/* homepage only shows 3 cards, so a lone one on the last row should sit
   centred rather than hugging the left edge like a full row would */
#coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) {
    justify-content: center;
}

.page-id-139 .mcb-wrap-inner:has(> .column_feature_box) > .column,
#coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) > .column {
    margin: 0 !important;
}

.page-id-139 .mcb-wrap-inner:has(> .column_feature_box) > .column.one-second,
#coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) > .column.one-second {
    width: calc(50% - 13px) !important;
}

.page-id-139 .mcb-wrap-inner:has(> .column_feature_box) > .column.one,
#coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) > .column.one {
    width: 100% !important;
}

.page-id-139 .column_feature_box .feature_box,
.page-id-139 .column_feature_box .feature_box_wrapper,
#coi-newsmedia .column_feature_box .feature_box,
#coi-newsmedia .column_feature_box .feature_box_wrapper {
    height: 100%;
}

.page-id-139 .column_feature_box .feature_box_wrapper,
#coi-newsmedia .column_feature_box .feature_box_wrapper {
    /* height:100% + padding needs border-box, otherwise the padding adds
       on top of that 100% instead of being counted inside it -- without
       this the card was overflowing its own row by ~40px and visually
       merging into the row below it, with no gap between them. */
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e6eaf2;
    border-radius: 10px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.page-id-139 .column_feature_box .feature_box_wrapper:hover,
#coi-newsmedia .column_feature_box .feature_box_wrapper:hover {
    box-shadow: 0 10px 28px rgba(14, 42, 71, 0.10);
    transform: translateY(-2px);
}

.page-id-139 .column_feature_box .photo_wrapper,
#coi-newsmedia .column_feature_box .photo_wrapper {
    flex: 0 0 38%;
    width: 38%;
    display: flex;
    align-items: center;
}

.page-id-139 .column_feature_box .photo_wrapper a,
#coi-newsmedia .column_feature_box .photo_wrapper a {
    display: block;
    width: 100%;
}

/* natural height (no crop, no letterboxing) -- a fixed height forces one
   or the other whenever an image's own aspect ratio doesn't match it
   exactly, which is most of them here. Card heights go back to varying
   by row since the image drives it again, but the whole image always
   shows intact. */
.page-id-139 .column_feature_box .photo_wrapper img,
#coi-newsmedia .column_feature_box .photo_wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.page-id-139 .column_feature_box .desc_wrapper,
#coi-newsmedia .column_feature_box .desc_wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0;
    /* the date is lifted out of the flow below, so leave room for it */
    position: relative;
    padding-bottom: 26px;
}

.page-id-139 .column_feature_box .desc_wrapper > h4,
#coi-newsmedia .column_feature_box .desc_wrapper > h4 {
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 10px;
}

.page-id-139 .column_feature_box .desc,
#coi-newsmedia .column_feature_box .desc {
    flex: 0 1 auto;
    font-size: 14.5px;
    line-height: 1.55;
}

/* the date is the last node inside .desc — anchor it to the card's bottom
   edge so the dates line up across a row while the copy stays centred */
.page-id-139 .column_feature_box .desc h4,
#coi-newsmedia .column_feature_box .desc h4 {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .page-id-139 .mcb-wrap-inner:has(> .column_feature_box),
    #coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) {
        gap: 18px;
    }

    .page-id-139 .mcb-wrap-inner:has(> .column_feature_box) > .column.one-second,
    #coi-newsmedia .mcb-wrap-inner:has(> .column_feature_box) > .column.one-second {
        width: 100% !important;
    }

    .page-id-139 .column_feature_box .feature_box_wrapper,
    #coi-newsmedia .column_feature_box .feature_box_wrapper {
        padding: 16px;
        gap: 14px;
    }
}

/* ============================================================
   REQUEST A SPEAKER
   Overview copy sits in zero-margin builder columns, so the
   lines and the two paragraphs ran together. The speaker picker
   inherits Betheme's fixed 230px select width, which clipped the
   longest name — let it size to its own content instead.
   ============================================================ */
/* The overview reads as a centred statement rather than a column of body
   copy pinned to one side. Betheme caps section wrappers at 1060px, which
   forced the lines to break early — widen this one section so the sentences
   can run. */
/* desktop only — below this Betheme caps the wrapper at 480px on purpose,
   and overriding that is what pushed the copy off the side of the screen */
@media only screen and (min-width: 992px) {
    .page-id-11884 .mcb-section-66w97b4ej .section_wrapper {
        max-width: 1500px !important;
        width: 94%;
        margin: 0 auto;
    }
}

/* heading centres so the section reads as one piece */
.page-id-11884 .mcb-item-x6gntbw2u .column_attr {
    text-align: center;
}

/* the rule sitting under the heading — the div straight after the h2 */
.page-id-11884 .mcb-item-x6gntbw2u .column_attr h2 + div {
    display: none;
}

.page-id-11884 .column_attr h5 {
    /* this theme has no global border-box, so without this the side padding
       is added on top of width:100% and the text runs off the screen */
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 44px;
    padding: 0 24px;
    text-align: center;
    font-size: clamp(18px, 1.3vw, 21px);
    line-height: 2.55;
    color: #444444;
    /* deliberately NOT text-wrap: balance — balancing evens the ragged edge by
       shortening every line, which is what made this stack up so densely */
    text-wrap: normal;
}

.page-id-11884 #speakerSelect {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    padding-right: 24px !important;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 991px) {
    .page-id-11884 .column_attr h5 {
        padding: 0 18px;
        line-height: 2.25;
        margin-bottom: 38px;
    }
}

@media only screen and (max-width: 480px) {
    .page-id-11884 .column_attr h5 {
        font-size: 17px;
        line-height: 2.05;
        margin-bottom: 30px;
        padding: 0 12px;
    }
}

@media only screen and (max-width: 767px) {
    .page-id-11884 #speakerSelect {
        font-size: 15px !important;
        padding-left: 14px !important;
        padding-right: 18px !important;
    }
}

/* ============================================================
   PARTNERS — body copy
   Betheme sizes this from the base body rule, which steps down
   to 13px on smaller screens, so the copy read much smaller than
   the rest of the site. Match the homepage paragraph treatment.
   ============================================================ */
.page-id-600 .column_attr,
.page-id-600 .column_attr p,
.page-id-600 .column_attr b,
.page-id-600 .column_attr span,
.page-id-163 .column_attr,
.page-id-163 .column_attr p,
.page-id-163 .column_attr li,
.page-id-163 .column_attr b,
.page-id-163 .column_attr span {
    font-size: 18px;
    line-height: 1.85;
    color: #555555;
}

/* Careers job links keep their blue, with room to breathe between them */
.page-id-163 .column_attr li {
    margin-bottom: 10px;
}

/* the "Send us a message!" link keeps its green */
.page-id-600 .column_attr a span {
    color: #0FA37F;
}

.page-id-600 .column_attr p {
    margin-bottom: 18px;
}

@media only screen and (max-width: 480px) {
    .page-id-600 .column_attr,
    .page-id-600 .column_attr p,
    .page-id-600 .column_attr b,
    .page-id-600 .column_attr span,
    .page-id-163 .column_attr,
    .page-id-163 .column_attr p,
    .page-id-163 .column_attr li,
    .page-id-163 .column_attr b,
    .page-id-163 .column_attr span {
        font-size: 17px;
        line-height: 1.75;
    }
}

/* ============================================================
   PAGE HERO IMAGES
   These banner backgrounds are set inline on the builder section
   and point at production URLs, so they can only be overridden
   from here. The paths are relative to this stylesheet, which
   keeps them working on local and live without another upload.
   ============================================================ */
.page-id-12 .coi_top-banner,
.page-id-139 .coi_top-banner {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.page-id-12 .coi_top-banner {
    background-image: url(assets/img/contact-hero.jpg) !important;
}

.page-id-139 .coi_top-banner {
    background-image: url(assets/img/news-media-hero.jpg) !important;
}

/* ============================================================
   MOBILE FIXES for the recent work
   ============================================================ */

/* News & Media cards: below this the 38/62 split leaves the copy
   in a ~180px column, so stack the logo above the text instead. */
@media only screen and (max-width: 560px) {
    .page-id-139 .column_feature_box .feature_box_wrapper,
    #coi-newsmedia .column_feature_box .feature_box_wrapper {
        flex-direction: column;
        gap: 14px;
    }

    .page-id-139 .column_feature_box .photo_wrapper,
    #coi-newsmedia .column_feature_box .photo_wrapper {
        flex: 0 0 auto;
        width: 100%;
    }

    .page-id-139 .column_feature_box .photo_wrapper img,
    #coi-newsmedia .column_feature_box .photo_wrapper img {
        height: 150px;
        object-fit: contain;
        background: #f3f3f3;
    }

    .page-id-139 .column_feature_box .desc_wrapper,
    #coi-newsmedia .column_feature_box .desc_wrapper {
        justify-content: flex-start;
        padding-bottom: 28px;
    }

    .page-id-139 .column_feature_box .desc_wrapper > h4,
    #coi-newsmedia .column_feature_box .desc_wrapper > h4 {
        font-size: 17px;
    }
}

/* 561-959px: a legacy site-wide rule (.feature_box .feature_box_wrapper
   .photo_wrapper img) pins this image to height:160px across that whole
   range with no object-fit of its own, so it fell back to the default
   (fill) and stretched oddly against the narrow 38%-wide column it sits
   in at these widths. contain fixes the stretch while keeping the whole
   photo visible (no cropping), without touching that legacy rule, which
   other cards on the site still rely on. */
@media only screen and (min-width: 561px) and (max-width: 959px) {
    .page-id-139 .column_feature_box .photo_wrapper img,
    #coi-newsmedia .column_feature_box .photo_wrapper img {
        object-fit: contain;
        background: #f3f3f3;
    }
}

/* kW for Good: the two split sections each carry the container's
   60px mobile padding, which left a 120px gulf between them. */
@media only screen and (max-width: 768px) {
    .kwfg-burden-inner {
        padding-bottom: 22px;
    }

    .kwfg-mission-inner {
        padding-top: 0;
    }
}

/* ============================================================
   PAGE HEROES — tablet height
   Below 767px the banner already drops to 20vw padding, but
   between there and 991px it kept the inline 250px, giving a
   ~560px tall hero on a narrow screen. A landscape photo then
   crops to a sliver. Carry the same treatment up the range.
   ============================================================ */
/* `body` prefix raises specificity above the inline padding on the section so
   the height is deterministic rather than depending on rule order. */
@media only screen and (max-width: 991px) {
    body .coi_top-banner {
        padding-top: 18vw !important;
        padding-bottom: 18vw !important;
    }

    body .coi_top-banner .section_wrapper,
    body .coi_top-banner .mcb-wrap-inner {
        min-height: 0 !important;
    }
}

/* ============================================================
   UNBOLDING — must out-rank an ID selector
   coi_universal_font() sets weight 600 with `#Content *`, which
   carries an ID and therefore beats any class-based rule no
   matter how many classes it uses. Anything that needs normal
   weight has to include an ID in its own selector to win.
   ============================================================ */
body.page-id-11884 #Content .column_attr h5 {
    font-weight: 400 !important;
}

/* ============================================================
   REQUEST A SPEAKER — speaker picker
   The dropdown and photo now come from the COI Speakers plugin,
   so the styling that used to be inline on those elements lives
   here. Values match what was there before.
   ============================================================ */
.coi-speaker-picker {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 10px 0 30px;
}

/* Shrink-wraps exactly to the select's own rendered size (a native select's
   width follows its widest <option>, not just the one showing, so this
   can't be assumed to equal any fixed number) and gives the chevron a
   positioning box that's guaranteed to match the select's real edges --
   Chrome on Windows keeps some of its own native widget painting even with
   appearance:none on the select itself, which was shoving a background-image
   chevron up against the text instead of the box's actual right edge. */
.coi-speaker-select-wrap {
    position: relative;
    display: inline-flex;
}

/* appearance:none (plus -ms-expand:none for old Edge) still wasn't enough
   to fully suppress this browser's own native dropdown arrow, so instead
   of fighting it further, this just paints over the zone it draws in with
   a plain white patch matching the box's background -- then the chevron
   below draws on top of that. Guaranteed single, clean icon regardless of
   what the browser was doing under the hood. pointer-events:none on both
   so clicks still reach the real select underneath. */
.coi-speaker-select-wrap::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 38px;
    background: #ffffff;
    border-radius: 0 6px 6px 0;
    pointer-events: none;
}

.page-id-11884 #Content .coi-speaker-select {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 12px 44px 12px 20px;
    font-size: 16px;
    font-weight: 400 !important;
    color: #1a4896;
    background-color: #ffffff;
    border: 2px solid #1a4896;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Edge/old IE still draw their own arrow on a <select> even with
       appearance:none above -- this is the property that actually
       suppresses it there, which is what was doubling up with ours. */
    -ms-expand: none;
}

.coi-speaker-select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4896' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
    pointer-events: none;
}

img.coi-speaker-photo {
    display: block;
    width: 75%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 60px auto 0;
}

@media only screen and (max-width: 767px) {
    img.coi-speaker-photo {
        width: 100%;
        height: 260px;
        margin-top: 24px;
    }

    .page-id-11884 #Content .coi-speaker-select {
        font-size: 15px;
        padding: 11px 38px 11px 14px;
    }

    .coi-speaker-select-wrap::before {
        width: 32px;
    }

    .coi-speaker-select-wrap::after {
        right: 12px;
        width: 12px;
        height: 12px;
        background-size: 12px;
    }
}

/* ============================================================
   BEHIND-THE-METER BRIEFS — post listing
   Rebuilt from Betheme's default blog cards to the layout the
   team referenced: a lead brief across the top, then a four-up
   grid of image / date / title / read more. No excerpts — the
   sparseness is what makes it read cleanly.
   ============================================================ */
.coi-briefs {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

/* Flex rather than grid so a part-filled last row centres instead of
   leaving an orphan hard against the left edge. A full row of four fills
   the width exactly, so complete rows are unaffected. */
.coi-briefs__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px 30px;
    margin-top: 72px;
}

.coi-briefs__grid > .coi-brief {
    width: calc((100% - 90px) / 4);
}

/* --- card --- */
.coi-brief {
    display: flex;
    flex-direction: column;
}

.coi-brief__media {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 22px;
    background: #eef1f7;
    border-radius: 6px;
    /* 3:2 - the shape most of the brief images already are, so the
       common case is not cropped at all */
    padding-bottom: 66.67%;
}

/* #Content is required here: Betheme sets #Content img { height: auto } and
   an ID outranks any class selector, so without it the image keeps its own
   aspect ratio instead of filling the box. */
#Content .coi-brief__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease-out;
}

.coi-brief__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 42, 71, 0);
    transition: background 0.3s ease;
}

.coi-brief:hover .coi-brief__media img {
    transform: scale(1.05);
}

.coi-brief:hover .coi-brief__media::after {
    background: rgba(14, 42, 71, 0.3);
}

/* An image far from 3:2 gets a tile shaped to itself, set inline by home.php
   from the real dimensions. Nothing is cropped and nothing is letterboxed —
   the card is simply shorter or taller than its neighbours. */
.coi-brief__media--own-shape {
    background: transparent;
}

/* a brief with no featured image still holds its place in the row */
.coi-brief__media--empty {
    background: linear-gradient(135deg, #0E2A47 0%, #0E2A47 100%);
}

.coi-brief__body {
    display: flex;
    flex-direction: column;
}

.coi-brief__date {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #7f8db0;
    margin-bottom: 14px;
}

.coi-brief__title {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.4;
    color: #0E2A47;
    text-decoration: none;
    transition: color 0.25s ease;
}

.coi-brief__title:hover {
    color: #0E2A47;
}

.coi-brief__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0FA37F;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.coi-brief__more:hover {
    color: #6fae2c;
    gap: 14px;
}

/* --- the lead brief --- */
.coi-brief--featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.coi-brief--featured .coi-brief__media {
    margin-bottom: 0;
    padding-bottom: 62%;
}

.coi-brief--featured .coi-brief__date {
    font-size: 14px;
    margin-bottom: 18px;
}

.coi-brief--featured .coi-brief__title {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.25;
}

.coi-brief--featured .coi-brief__more {
    margin-top: 34px;
}

.coi-briefs__empty {
    text-align: center;
    padding: 60px 0;
    color: #555;
}

@media only screen and (max-width: 1100px) {
    .coi-briefs__grid {
        gap: 52px 26px;
        margin-top: 60px;
    }

    .coi-briefs__grid > .coi-brief {
        width: calc((100% - 52px) / 3);
    }
}

@media only screen and (max-width: 767px) {
    .coi-briefs__grid {
        gap: 44px 20px;
        margin-top: 48px;
    }

    .coi-briefs__grid > .coi-brief {
        width: calc((100% - 20px) / 2);
    }

    .coi-brief--featured {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .coi-brief--featured .coi-brief__media {
        padding-bottom: 70%;
    }

    .coi-brief__title {
        font-size: 17px;
    }
}

@media only screen and (max-width: 480px) {
    .coi-briefs__grid {
        gap: 40px;
    }

    .coi-briefs__grid > .coi-brief {
        width: 100%;
    }
}

/* ============================================================
   JOIN US TODAY — floating action button
   ============================================================ */

.coi-join-fab {
    /* a circle at rest, same treatment as the chat bubble it sits opposite;
       on hover it widens into a pill and reveals its label, rather than
       popping a separate tooltip above itself. border-radius is fixed at
       half the height, so the shape reads as a circle when width==height
       and as a pill once width grows past that — no separate rule needed
       for the two states. */
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    height: 50px;
    width: 50px;
    /* the label span's text has white-space:nowrap, which gives it a
       min-content floor equal to its full un-wrapped width -- flex items
       won't shrink past that on their own (the classic flexbox "min-width:
       auto" gotcha), so even with overflow:hidden here the row was
       quietly laying out wider than 50px at rest. min/max-width pins the
       box itself so nothing content-driven can stretch it either way. */
    min-width: 50px;
    max-width: 50px;
    padding: 0;
    background: #0FA37F;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    text-decoration: none !important;
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.coi-join-fab,
.coi-join-fab:hover,
.coi-join-fab:focus,
.coi-join-fab:visited,
.coi-join-fab * {
    /* belt-and-suspenders: text-decoration:none on the anchor alone didn't
       stop the label showing underlined for Sonya, so force it on every
       state and on the child spans directly too rather than relying on
       it propagating down from the anchor */
    text-decoration: none !important;
}

.coi-join-fab {
    box-sizing: border-box !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.coi-join-fab:hover,
.coi-join-fab:focus-visible {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    border-radius: 25px !important;
    background: #98d84a;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.coi-join-fab__icon {
    /* a fixed-width slot the same size as the resting circle, so the icon
       never shifts position as the button grows — only the label to its
       right appears */
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    color: #ffffff;
}

.coi-join-fab__icon svg {
    /* flex+align/justify-center was landing this a couple px off true
       center (partly the inline-svg baseline gap, partly this specific
       bolt path not being perfectly centered in its own viewBox) --
       absolute + translate(-50%,-50%) centers on the icon's real
       rendered box instead, which isn't subject to either of those. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.coi-join-fab__label {
    color: #ffffff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* the actual root cause: nowrap text gives a flex item a min-content
       floor equal to its full width, which it won't shrink below on its
       own -- this lets it actually go to zero at rest instead of quietly
       padding the button out past 50px. */
    min-width: 0;
    overflow: hidden;
}

.coi-join-fab:hover .coi-join-fab__label,
.coi-join-fab:focus-visible .coi-join-fab__label {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}

/* a phone screen is narrow enough that a left-corner button this size can
   sit under on-screen keyboards or thumb reach zones */
@media only screen and (max-width: 600px) {
    .coi-join-fab {
        left: 16px;
        bottom: 16px;
    }
}

/* ============================================================
   HOMEPAGE OVERVIEW VIDEO — wording left, video right
   ============================================================ */

.coi-ovsplit {
    padding: 80px 0;
    background: #ffffff;
}

.coi-ovsplit__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: center;
}

.coi-ovsplit__inner + .coi-ovsplit__inner {
    margin-top: 70px;
}

.coi-ovsplit__title {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: #0E2A47;
    margin: 0 0 18px;
}

.coi-ovsplit__desc {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
}

.coi-ovsplit__media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 12px 34px rgba(14, 42, 71, 0.16);
}

.coi-ovsplit__media video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000000;
}

/* the big play button sits over the still frame until the video starts;
   after that the browser's own controls take over */
#Content .coi-ovsplit__play,
.coi-ovsplit__play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(14, 42, 71, 0.2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
}

#Content .coi-ovsplit__play:hover,
.coi-ovsplit__play:hover {
    background: rgba(14, 42, 71, 0.35) !important;
}

.coi-ovsplit__play-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #0FA37F;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.coi-ovsplit__play:hover .coi-ovsplit__play-icon {
    transform: scale(1.08);
}

.coi-ovsplit__media.is-playing .coi-ovsplit__play {
    opacity: 0;
    pointer-events: none;
}

@media only screen and (max-width: 900px) {
    .coi-ovsplit {
        padding: 60px 0;
    }

    .coi-ovsplit__inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
        text-align: center;
    }

    .coi-ovsplit__title {
        font-size: 24px !important;
    }

    .coi-ovsplit__desc {
        font-size: 16px;
    }

    .coi-ovsplit__play-icon {
        width: 62px;
        height: 62px;
    }
}

/* ============================================================
   HOMEPAGE SECTION HEADINGS — one size per screen width
   30px desktop (set on each heading above), 26px tablet, 24px phone.
   Kept here, last in the file, so it wins over the older
   per-section breakpoints.
   ============================================================ */

@media only screen and (max-width: 959px) {
    .coi-marketplace-text h2,
    .coi-problem-heading,
    .coi-kwforgood__text h2,
    .coi-ovsplit__title,
    .coi-newsmedia__subheading,
    .coi-nyse__content h2,
    .coi-nyse--in-news .coi-nyse__content h2,
    .coi-corevalues__header h2,
    .coi-ourteam__text,
    .coi-separator-title,
    .coi-offerings__header h2 {
        font-size: 26px !important;
    }
}

@media only screen and (max-width: 480px) {
    .coi-marketplace-text h2,
    .coi-problem-heading,
    .coi-kwforgood__text h2,
    .coi-ovsplit__title,
    .coi-newsmedia__subheading,
    .coi-nyse__content h2,
    .coi-nyse--in-news .coi-nyse__content h2,
    .coi-corevalues__header h2,
    .coi-ourteam__text,
    .coi-separator-title,
    .coi-offerings__header h2 {
        font-size: 24px !important;
    }

    /* keep card titles and body copy below the section heading */
    .coi-problem-card h3 {
        font-size: 20px !important;
    }

    .coi-kwforgood__text p {
        font-size: 17px !important;
    }
}

/* VBN section: Learn More sits centered under both columns */
.coi-hiwsum__cta--below {
    align-self: center;
    margin-top: 0;
}

/* the "Drag to rotate" line makes the scene column taller than the card
   itself; matching that space under the pillars centers them on the card */
@media only screen and (min-width: 1025px) {
    .coi-hiwsum__text {
        padding-bottom: 32px;
    }
}

/* How It Works: the VBN offering shows the 3D scene, a little smaller,
   in place of its picture */
.coi-hiw-offerings__block-image--custom {
    background: transparent;
    aspect-ratio: auto;
}

.coi-hiw-offerings__scene {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* the picture box styles its placeholder text grey; let the scene's legend
   and drag hint keep their own look */
.coi-hiw-offerings__scene span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* the full menu stays visible down to 1024px (Betheme > Responsive > mobile
   menu breakpoint). Below 1240 the gaps between items shrink with the
   screen, so the menu always spreads across the space it has; the text
   keeps its full size down to 1100 and steps down a little below that. */
@media only screen and (min-width: 1100px) and (max-width: 1239px) {
    #Top_bar .menu > li > a span:not(.description) {
        padding-left: clamp(8px, calc((100vw - 960px) / 14), 20px) !important;
        padding-right: clamp(8px, calc((100vw - 960px) / 14), 20px) !important;
    }

    #Top_bar .menu > li.submenu > a span:not(.description) {
        padding-right: calc(clamp(8px, calc((100vw - 960px) / 14), 20px) + 10px) !important;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1099px) {
    #Top_bar .menu > li > a span:not(.description) {
        padding-left: clamp(5px, calc((100vw - 960px) / 14), 12px) !important;
        padding-right: clamp(5px, calc((100vw - 960px) / 14), 12px) !important;
    }

    #Top_bar .menu > li.submenu > a span:not(.description) {
        padding-right: calc(clamp(5px, calc((100vw - 960px) / 14), 12px) + 10px) !important;
    }

    #Top_bar .menu > li > a {
        font-size: 14px !important;
    }
}

/* on narrow screens the photo is short enough that a bottom badge covers
   the kW for Good sign, so it moves up into the sky */
@media only screen and (max-width: 767px) {
    .coi-kwforgood__glass-badge {
        top: 14px !important;
        bottom: auto !important;
        right: 14px !important;
        left: auto !important;
    }
}

/* kW for Good: Learn More sits under the text side by side, and under the
   picture once the columns stack */
.coi-kwforgood__cta--stacked {
    display: none !important;
}

@media only screen and (max-width: 959px) {
    .coi-kwforgood__text .coi-kwforgood__cta {
        display: none !important;
    }

    .coi-kwforgood__cta--stacked {
        display: inline-flex !important;
        align-self: center;
        margin-top: 0;
    }
}


/* ============================================================
   HOMEPAGE: Energy Capacity Crisis and VBN swapped places, so they
   swap colors too: Crisis goes dark navy, VBN goes white.
   ============================================================ */

/* Energy Capacity Crisis on navy */
.coi-problem-section {
    background: #0E2A47 !important;
}

.coi-problem-section .coi-problem-heading {
    color: #ffffff !important;
}

.coi-problem-section .coi-problem-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.coi-problem-section .coi-problem-card h3 {
    color: #ffffff !important;
}

.coi-problem-section .coi-problem-card p {
    color: #b4bed2 !important;
}

/* VBN on white */
.coi-hiwsum {
    background: #ffffff !important;
}

.coi-hiwsum__header .coi-hiwsum__desc {
    color: #4a5568 !important;
}

.coi-hiwsum__pillars-title,
.coi-hiwsum__pillar-text h5 {
    color: #0E2A47 !important;
}

.coi-hiwsum__pillar-text p {
    color: #555555 !important;
}

.coi-hiwsum__cta {
    color: #0E2A47 !important;
    border-color: #0E2A47 !important;
}

.coi-hiwsum__cta:hover {
    background: #0E2A47 !important;
    border-color: #0E2A47 !important;
    color: #ffffff !important;
}

/* the scene's pale card needs an edge against white */
.coi-hiwsum .coi-grid3d__stage {
    border: 1px solid rgba(14, 42, 71, 0.08);
    box-shadow: 0 10px 30px rgba(14, 42, 71, 0.08);
}

/* VBN section on white: each point sits on its own soft card so the three
   read as separate, scannable items */
.coi-hiwsum__pillars-title {
    margin-bottom: 20px !important;
}

.coi-hiwsum__pillar {
    background: #f7f9fc;
    border: 1px solid rgba(14, 42, 71, 0.06);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 14px;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.coi-hiwsum__pillar:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 163, 127, 0.45);
    box-shadow: 0 10px 24px rgba(14, 42, 71, 0.08);
}

.coi-hiwsum__pillar-icon {
    background: #ffffff !important;
    border: 1px solid rgba(15, 163, 127, 0.35) !important;
    box-shadow: 0 4px 12px rgba(15, 163, 127, 0.15);
}

.coi-hiwsum__pillar-text h5 {
    margin-bottom: 4px !important;
}

@media only screen and (max-width: 1024px) {
    .coi-hiwsum__pillar {
        padding: 22px 18px;
    }
}

/* VBN section heading under "The Breakthrough": same look as the Energy
   Capacity Crisis heading, a little closer to the paragraph below */
.coi-hiwsum__header .coi-hiwsum__heading {
    margin: 0 0 18px;
}

/* Partners page: intro text centred under its centred headings */
.page-id-600 #Content .column_attr {
    text-align: center;
}