body.page-id-1475 .elementor-widget-theme-post-content .e-con.e-parent > .e-con-inner {max-width:none;}

#mcd-items-load-more-btn {    text-align: center;    color: #2e9e46;    cursor: pointer;    margin-top: 22px;}

.mcd-project-body iframe {width:auto !important;}

.mcd-feature-header-wrapper {
    position: relative;
    width: 100%;
}

.mcd-feature-image-container {
    position: fixed;
    top: 100px; 
    left: 0;
    width: 100%;
    z-index: -1; 
    overflow: hidden;
}
.mcd-feature-header-wrapper .mcd-feature-image-container video {width: 100%;}

/* Renamed from .mcd-parallax-img to apply to both img and video */
.mcd-parallax-media {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform; 
}

/* Hide mobile video by default on larger screens */
.mcd-video-mobile {
    display: none;
}

/* Switch visibility on screens 768px and below (adjust breakpoint as needed) */
@media (max-width: 768px) {
    .mcd-video-mobile {
        display: block;
    }
    .mcd-hide-on-mobile {
        display: none;
    }
}

.mcd-feature-spacer {
    display: block;
    width: 100%;
    padding-top: 26.6%;
}

@media (max-width: 1920px) {.mcd-feature-spacer {padding-top: 28%;}}
@media (max-width: 1400px) {.mcd-feature-spacer {padding-top: 30%;}}
@media (max-width: 768px) {.mcd-feature-spacer {height: 31vw !important;padding:0;}}
}
/* Home size: ~20% taller than Normal at each breakpoint */
.mcd-feature-header--home .mcd-feature-spacer {padding-top: 32%;}
@media (max-width: 1920px) {.mcd-feature-header--home .mcd-feature-spacer {padding-top: 33.6%;}}
@media (max-width: 1400px) {.mcd-feature-header--home .mcd-feature-spacer {padding-top: 36%;}}
@media (max-width: 768px)  {.mcd-feature-header--home .mcd-feature-spacer {height: 37vw !important;padding:0;}}

/* Shared boxed-width inner for overlaid elements */
.mcd-feature-boxed-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

/* Button overlay — mirrors the project button pattern */
.mcd-feature-overlay-button-anchor {
    position: relative;
}
.mcd-feature-overlay-button-anchor a {
    position: absolute;
    top: -170px;
    display: inline-block;
    background-color: #2e9e46;
    color: #fff !important;
    padding: 10px 22px;
    border: 2px solid #fff;
    text-decoration: none;
}
.mcd-feature-overlay-button-anchor a:hover {background-color:#67bb44 }

/* Text overlay — vertically centred over the feature image area */
.mcd-feature-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.mcd-feature-overlay-text {
    display: block;
    font-size: 2.8em;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    z-index: 10;
    text-shadow: 0px 0px 4px #555;
}

.mcd-subfeature-wrapper {background-color: white;z-index:0;}

#macdow_feature_button {
    position: relative;
}
#macdow_feature_button a {
    position: absolute;
    top: -170px;
    left: 0px;
    display: inline-block;
    background-color: #2e9e46;
    color: #fff;
    padding: 10px 22px;
    border: 2px solid #fff;
    text-decoration: none;
}

/*
.mcd-project-content-wrapper {
    width: 100%;
    padding: 40px 20px;
    margin:auto;max-width:1200px;
}
*/

.mcd-project-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mcd-project-subtitle {
    font-size: 1.8rem;
    font-weight: 500 !important;
    margin-bottom: 1.5rem;
}

h1 + h2.mcd-project-subtitle {margin-top:-15px;}

/* News single page: category surtitle */
.mcd-article-surtitle {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.mcd-article-surtitle a {
    color: #555;
    text-decoration: none;
}
.mcd-article-surtitle a:hover {
    color: #000;
}

/* News single page: news category surtitle — styles to be added as needed */
.mcd-news-category-surtitle {
    margin-bottom: -25px;
}

/* News single page: publish date */
.mcd-published {
    font-weight: 700;
    color: #777;
    margin: -20px 0 0;
}

/* Two-column layout */
.mcd-project-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.mcd-project-details {
    padding-bottom: 55px;
    position: relative;
}

.mcd-project-details p {
    margin: 0 0 12px 0;
}

.mcd-project-icons {
    position: absolute;
    bottom: 0;
}

.mcd-fast-facts-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.mcd-fast-facts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Thicker top border as seen in screenshot */
    border-top: 2px solid #000; 
}

.mcd-fast-facts-list li {
    padding: 10px 0;
    /* Thin separators between facts */
    border-bottom: 1px solid #000; 
}

/* Base spacing for the imported rich text */
.mcd-project-body p {
    line-height: 1.43;
}

.mcd-project-body ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.mcd-project-body li {
    /*margin-bottom: 0.5rem;*/
}

/* Responsive: stack the grid columns on mobile and tablets */
@media (max-width: 768px) {
    .mcd-project-meta-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/*-------------------- gallery -------------------------- */

.mcd-gallery-wrapper {
    width: 100%;
    margin: 40px 0;
}

.mcd-gallery-grid {
    display: grid;
    /* Default to 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* Adjust spacing between thumbnails */
}

.mcd-gallery-item {
    overflow: hidden;
    /* Optional: add a slight border radius if it fits the design */
    border-radius: 4px; 
}

.mcd-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Optional hover effect to indicate clickability */
.mcd-gallery-item a:hover img {
    transform: scale(1.05);
}

/* Tablet: snap to 2 columns */
@media (max-width: 992px) {
    .mcd-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: snap to 1 column */
@media (max-width: 576px) {
    .mcd-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------- items grid ------------------------- */
.elementor-widget-shortcode .mcd-items-wrapper {
    width: 100%;
    margin: 20px 0 50px;
}

.mcd-items-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.mcd-items-grid {
    display: grid;
    gap: 30px;
}

/* Dynamic Column Support */
.mcd-items-grid.mcd-items-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mcd-items-grid.mcd-items-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Card Styling */
.mcd-items-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Image Wrapper forces uniform dimensions */
.mcd-items-image-wrap {
    width: 100%;
    aspect-ratio: 60 / 67; /* Default portrait aspect */
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    position: relative;
}

/* Landscape Aspect Override */
.mcd-items-grid-l .mcd-items-image-wrap {
    aspect-ratio: 60 / 34; 
}

.mcd-items-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s;
}

.mcd-items-image-wrap:not(:has(.img-cover)):hover img {
    filter: brightness(0.6);
}

/* Solution hover overlay */
.mcd-items-image-wrap .img-cover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s;
}
.mcd-items-image-wrap:hover .img-cover {
    opacity: 0.4;
}
.mcd-items-image-wrap:hover .img-cover[value^="solution_"] {
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-size: 40% auto;
}
.mcd-items-image-wrap:hover .img-cover[value="solution_1"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Building-Solution-WHITE.svg);
}
.mcd-items-image-wrap:hover .img-cover[value="solution_2"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Resource-Solution-WHITE.svg);
}
.mcd-items-image-wrap:hover .img-cover[value="solution_3"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/PortsCoastal-Solution-WHITE.svg);
}
.mcd-items-image-wrap:hover .img-cover[value="solution_5"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Energy-Solution-WHITE.svg);
}
.mcd-items-image-wrap:hover .img-cover[value="solution_6"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Transport-Solution-WHITE.svg);
}
.mcd-items-image-wrap:hover .img-cover[value="solution_7"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Water-Solution-WHITE.svg);
}

/* Region hover icons (news tiles) */
.mcd-items-image-wrap:hover .img-cover[data-region] {
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: 50% 50%;
}
.mcd-items-image-wrap:hover .img-cover[data-region="australia"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/AU-Geo-icon-white.png);
}
.mcd-items-image-wrap:hover .img-cover[data-region="new-zealand-pacific-islands"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/NZP-Geo-icon-white.png);
}
.mcd-items-image-wrap:hover .img-cover[data-region="south-east-asia"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/SEA-Geo-icon-white.png);
}
.mcd-items-image-wrap:hover .img-cover[data-region="all-regions"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Group-Geo-icon-white.png);
}

/* News archive card layout */
.mcd-news-card {
    display: flex;
    flex-direction: column;
}
.mcd-news-card-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.mcd-news-card-link:hover .mcd-items-image-wrap img {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* Category + date footer */
.mcd-tile-category-date {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #ccc;
    padding-bottom: 14px;
    margin-top: 12px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
}
.mcd-tile-category-date a {
    text-decoration: none;
    color: inherit;
}
.mcd-tile-category-date a:hover {
    text-decoration: underline;
}
.mcd-tile-date {
    color: #777;
}

/* Typography */
.mcd-items-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mcd-items-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #000;
    transition: color 0.3s;
}

.mcd-items-card:hover .mcd-items-title,
.mcd-news-card-link:hover .mcd-items-title {
    color: #CDDB2F;
}

.mcd-items-subheading {
    font-size: 0.95rem;
    margin: 0;
    color: #333;
}

/* Load More Button Foundation */
.mcd-items-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .mcd-items-grid.mcd-items-cols-3,
    .mcd-items-grid.mcd-items-cols-2 {
        /* Force both 3-col and 2-col layouts to 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 576px) {
    .mcd-items-grid.mcd-items-cols-3,
    .mcd-items-grid.mcd-items-cols-2 {
        /* Stack vertically on mobile */
        grid-template-columns: 1fr; 
    }
}
/* ----------------------- contacts ------------------------*/

.mcd-contacts-wrapper {
    width: 100%;
    margin: 60px 0;
}

.mcd-contacts-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #000;
}

/* Flex layout or Grid can be used here. Grid makes aligning tiles easier. */
.mcd-contacts-grid {
    display: grid;
    /* This creates responsive columns automatically based on screen size */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
}

.mcd-contact-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Portrait Image Styles */
.mcd-contact-img-wrapper {
    margin-bottom: 20px;
    width: 100%;
}

.mcd-contacts-wrapper .mcd-contact-img-wrapper img {
    border-radius: 50%;
    border: 6px solid #515151;
    object-fit: cover;
    display: block;
    width: 180px;
    height: 180px;
    /* Replaces margin-left: 16% to guarantee perfect centering */
    margin: 0 auto; 
    background-color: #396a9f;
}

/* Typography */
.mcd-contact-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.mcd-contact-position {
    font-size: 1rem;
    color: #396a9f; /* Matches the blue in your screenshot */
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* Separator Line */
.mcd-contacts-wrapper .mcd-contact-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #396a9f;
    margin: 0 0 20px 0;
}

/* Icons */
.mcd-contact-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Ensures the global img rules don't mess up the SVGs */
.mcd-contact-icons img {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: transform 0.2s ease;
}

.mcd-contact-icons a:hover img {
    transform: translateY(-3px);
}


/* ===================== Search & Region Filter ===================== */

/* --- Shared button resets --- */

#mcd-search-toggle,
#mcd-region-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.search-open #mcd-search-toggle {margin-right:15px}

#mcd-search-toggle img {
    width: 15px;
    height: 15px;
    display: block;
}

#mcd-region-toggle img {
    width: 25px;
    height: 25px;
    display: block;
}

/* --- Shared input styles --- */

#mcd-search-form-wrap input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: none;
    border-radius: 0;
    font-size: 14px;
}

#mcd-search-form-wrap .search-submit {
    display: none;
}

/* --- Shared region dropdown styles --- */

#mcd-region-dropdown-title {
    margin: 0 0 10px;
    color: #2e9f5b;
    font-weight: 600;
}

#mcd-region-dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mcd-region-dropdown li {
    color: #fff;
    cursor: pointer;
    padding: 4px 0 4px 22px;
    position: relative;
    font-weight: 600;
}

#mcd-region-dropdown li::before {
    content: '';
    position: absolute;
    left: 0;
}

#mcd-region-dropdown li:hover,
#mcd-region-dropdown li.current-region {
    color: #2e9f5b;
}

#mcd-region-dropdown li.current-region::before {
    content: '✓';
}

/* ====================== between the edge of the container and the table view ====================  */

@media (min-width: 1021px) and (max-width: 1215px) {
    #mcd-nav-tools {right:30px}   
}


/* ===================== Search & Region Filter — Desktop (min-width: 1021px) ===================== */

@media (min-width: 1021px) {

    #mcd-nav-tools {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: end;
        position: absolute;
        top: 25px;
        width: 857px;
    }

    /* flex row: icon on left, input expands rightward; justify-content:end on parent
       keeps the icon right-aligned when closed and moves it left as the input opens */
    #mcd-search-tool {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* Starts collapsed; expands in-flow to the right of the icon */
    #mcd-search-form-wrap {
        display: block;
        position: static;
        background: none;
        padding: 0;
        width: 700px;
        max-width: 0;
        overflow: hidden;
        transition: max-width 0.35s ease;
    }

    #mcd-search-form-wrap .search-form,
    #mcd-search-form-wrap label {
        display: block;
        width: 100%;
    }

    #mcd-search-form-wrap input[type="search"] {
        background: rgba(255, 255, 255, 0.9);
    }

    #mcd-nav-tools.search-open #mcd-search-form-wrap {
        max-width: 700px;
    }

    #mcd-region-selector {
        position: relative;
        border-left: 2px solid #fff;
        padding-left: 12px;
        margin-left: 5px;
    }

    /* Region dropdown: hidden until toggled */
    #mcd-region-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 210px;
        background: #000;
        color: #fff;
        padding: 20px;
        z-index: 100;
    }

    #mcd-region-selector.open #mcd-region-dropdown {
        display: block;
    }

}

/* ===================== Search & Region Filter — Mobile (max-width: 1020px) ===================== */

@media (max-width: 1020px) {

    /* Nav tools flows below the menu items, black background panel */
    #mcd-nav-tools {
        display: block;
        background: #000;
        padding: 20px;
    }

    /* Toggle buttons not needed — content is always visible */
    #mcd-search-toggle,
    #mcd-region-toggle {
        display: none;
    }

    /* Search input always visible */
    #mcd-search-form-wrap {
        display: block;
        margin-bottom: 20px;
    }

    #mcd-search-form-wrap .search-form,
    #mcd-search-form-wrap label {
        display: block;
        width: 100%;
    }

    /* Region list always expanded, no absolute positioning */
    #mcd-region-selector {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    #mcd-region-dropdown {
        display: block;
        position: static;
        background: none;
        padding: 0;
        width: auto;
        color: #fff;
    }

}

/* ===================== Taxonomy Tiles (hierarchy mode) ===================== */

.mcd-taxonomy-tiles {
    display: grid;
    gap: 16px;
    width: 100%;
    margin: 40px 0;
}

.mcd-taxonomy-tiles-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcd-taxonomy-tiles-cols-3 { grid-template-columns: repeat(3, 1fr); }

.mcd-taxonomy-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

.mcd-taxonomy-tile-inner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 600 / 580;
}

.mcd-taxonomy-tile-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner img {
    transform: scale(1.04);
}

/* Taxonomy tile hover overlay (img-cover) */
.mcd-taxonomy-tile-inner .img-cover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 1;
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover {
    opacity: 0.4;
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value^="solution_"] {
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-size: 40% auto;
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_1"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Building-Solution-WHITE.svg);
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_2"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Resource-Solution-WHITE.svg);
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_3"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/PortsCoastal-Solution-WHITE.svg);
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_5"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Energy-Solution-WHITE.svg);
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_6"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Transport-Solution-WHITE.svg);
}
.mcd-taxonomy-tile:hover .mcd-taxonomy-tile-inner .img-cover[value="solution_7"] {
    background-image: url(/wp-content/plugins/mccentral/assets/images/Water-Solution-WHITE.svg);
}

.mcd-taxonomy-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 0 30px 30px;
    z-index: 2;
}

.mcd-taxonomy-tile-title {
    color: #fff;
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .mcd-taxonomy-tiles-cols-2,
    .mcd-taxonomy-tiles-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ===================== Pinned / Headline News ===================== */

.mcd-pinned-news-heading { margin: 20px 0 10px; }
#featured_article_wrapper { display: flex; justify-content: space-between; padding-bottom: 20px; margin: 20px 0; border-bottom: 1px solid #777; }
#featured_article_wrapper div.feature-news-left-box { width: calc(50% - 15px); background-size: cover; background-position: center; min-height: 280px; }
#featured_article_wrapper div.feature-news-left-box a { min-height: 200px; display: block; }
#featured_article_wrapper div.feature-news-right-box { width: calc(50% - 15px); position: relative; padding-top:15px;}
#featured_article_wrapper div.feature-news-right-box div { color: #777; font-size: 0.8em; font-weight: 600; text-transform: uppercase; }
#featured_article_wrapper div.feature-news-right-box h3 { margin: 5px 0 10px; line-height: 110%; font-size: 1.5em; font-weight: 700;}
.feature-news-right-box h3 a { color: #000; }
.feature-news-right-box h3 a:hover { color: #cbdb2f; }
#featured_article_wrapper div.feature-news-right-box p { font-size: 0.9em; line-height: 130%; }
a.mcd-pinned-category { position: absolute; bottom: 15px; left: 0; font-size: 0.7em; font-weight: 600; text-transform: uppercase; }

#news_page_middle_header {display: flex;justify-content: space-between;}
#news_page_middle_header > div + div {text-align: right;color:green}

/* ===================== Pinned / Project Spotlight ===================== */

.project-spotlight-surtext { text-transform: uppercase; color: #111; font-weight: 700; position: relative; display: inline-block; bottom: -20px; top: auto !important; font-size: 1rem}
#project-spotlight-wrapper { display: flex; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #777; }
.project-spotlight-left { width: calc(45% - 20px); padding-top: 35px; min-height: 370px; position: relative;padding-bottom: 50px}
.project-spotlight-right { background-size: cover; width: calc(55% - 20px); }
#project-spotlight-title { font-size: 2.4rem; font-weight: 700; color: #2E9E46; line-height: 120%; margin: 15px 0; }
#project-spotlight-title a { color: inherit; text-decoration: none; }
#project-spotlight-title a:hover { color: #CBDB2F; }
.project-spotlight-nav {position:absolute;bottom:0;}
.project-spotlight-nav > div { display: inline-block; margin: 10px 10px 10px 0; color: #2E9E46; border: 1px solid #2E9E46; border-radius: 100px; width: 32px; height: 32px; text-align: center; padding-top: 2px; cursor: pointer; }
.project-spotlight-nav > div:hover { color: #CBDB2F; border-color: #CBDB2F; }
#project-spotlight-solution { display: flex; }
#project-spotlight-solution-icon { width: 60px; min-width: 60px; height: 60px; margin-right: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
#project-spotlight-solution div + div { display: flex; flex-direction: column; justify-content: center; }
#project-spotlight-solution-title { display: inline-block; margin-left: 5px; position: relative; font-size: 1.4em; font-weight: 700; color: #10461c; line-height: 120%; }
#project-spotlight-tagline { color: #10461c; line-height: 110%; font-size: 1.8rem; font-weight: 700; margin: 10px 0 15px; }

@media (max-width: 767px) {
    #featured_article_wrapper { display: block; }
    #featured_article_wrapper div.feature-news-left-box { width: 100%; margin-bottom: 10px; }
    #featured_article_wrapper div.feature-news-right-box { width: 100%; }

    .project-spotlight-surtext { bottom: -5px !important; }
    #project-spotlight-wrapper { flex-direction: column-reverse; margin-top: 7px !important; }
    #project-spotlight-wrapper > div { width: 100%; margin: 10px 0 0; padding-top: 0; }
    #project-spotlight-wrapper .project-spotlight-left { min-height: auto; }
    #project-spotlight-wrapper .project-spotlight-right { aspect-ratio: 9/5; min-height: 0; }
    #project-spotlight-solution-title { font-size: 1.2em; }
    #project-spotlight-title { font-size: 1.8em; }
    #project-spotlight-tagline { font-size: 1.5em; }
}

/* ============================================================
   Chronicle Slider Widget
   ============================================================ */

/* Arrow buttons: suppress Swiper's default icon font, use our span instead */
.mcd-chronicle-slider .swiper-button-prev::after,
.mcd-chronicle-slider .swiper-button-next::after {
    display: none;
}

.mcd-chronicle-slider .swiper-button-prev,
.mcd-chronicle-slider .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.mcd-chronicle-slider .swiper-button-prev span,
.mcd-chronicle-slider .swiper-button-next span {
    color: var(--mcd-arrow-color, #ffffff);
    font-size: var(--mcd-arrow-size, 28px);
    font-weight: var(--mcd-arrow-weight, 400);
    line-height: 1;
    display: block;
}

.mcd-chronicle-slider .swiper-slide {
    height: auto;
}

.mcd-chronicle-slider .mcd-items-card,
.mcd-chronicle-slider .mcd-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mcd-chronicle-slider .mcd-items-image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.mcd-chronicle-slider .mcd-items-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mcd-chronicle-slider .mcd-items-content {
    padding: 12px 0 8px;
}

.mcd-chronicle-slider .mcd-items-title {
    margin: 0 0 4px;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
}

.mcd-chronicle-slider .mcd-items-subheading {
    margin: 0;
    font-size: 0.875em;
}

.mcd-chronicle-slider .mcd-tile-category-date {
    padding: 8px 0 0;
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}