@media (max-width: 1200px) {
}
@media (min-width: 1400px) 
{
    .chairman-img
    {
        width: 40%;
        left: 54px;
    }
}
/* No scroll animation below 1025px — image on top, text box below */
@media(max-width:1025px){
    .hm-glance {
        height: auto;
        display: block;
        background-image: none;
        padding-bottom: 40px;
    }
    .glance-blur {
        display: none;
    }
    .glance-mbl-img {
        display: block;
        margin-bottom: 30px;
    }
    .glance-wrap {
        opacity: 1;
    }

}

/* Capitals: stacked on tablet (768–1025). Below 768 it becomes a Swiper slider. */
@media (min-width: 768px) and (max-width: 1025px){
    .hm-capitals {
        height: auto;
        display: block;
    }
    .cap-head,
    .cap-foot,
    .cap-bgnum {
        display: none;
    }
    .cap-viewport {
        overflow: visible;
    }
    .cap-track {
        flex-direction: column;
        width: 100% !important;
        height: auto;
        transform: none !important;
    }
    .cap-panel {
        flex: none;
        width: 100%;
        height: auto;
        margin-bottom: 26px;
    }
    .cap-card {
        flex-direction: column;
        min-height: 0;
    }
    .cap-left,
    .cap-right {
        width: 100%;
    }
    .cap-right {
        order: -1;
    }
    .cap-img {
        min-height: 220px;
    }
}

/* Capitals: SLIDER on mobile (<=767) */
@media (max-width: 767px){
    .hm-capitals {
        height: auto;
        display: block;
    }
    .cap-head,
    .cap-foot,
    .cap-bgnum {
        display: none;
    }
    .cap-viewport {
        overflow: hidden;
    }
    .cap-track {
        width: auto;
        height: auto;
    }
    .cap-panel {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
    }
    .cap-nav {
        display: flex;
    }
    .cap-card {
        flex-direction: column;
        height: auto;
    }
    .cap-left,
    .cap-right {
        width: 100%;
    }
    .cap-right {
        order: -1;
    }
    .cap-img {
        min-height: 220px;
    }
    .cap-left {
        padding: 30px 22px;
    }
    .glance-capital-slider-content
    {
        padding: 10px 0px;
    }
}
@media(max-width:991px){
    /* Our Values: hide tabs + image, stack all values like the mobile reference */
    .our-values .ov-inner {
        display: flex;
        flex-direction: column-reverse;
    }
    .ov-left{
        display: none;
    }
    .ov-image
    {
width: 100%;
margin-left: 0px;
    }

    .ov-right {
        width: 100%;
        padding: 30px 0px 10px 0px;
    }
    .ov-panel {
        display: block;
        margin-bottom: 26px;
    }
    .ov-desc {
        max-width: 100%;
    }

    /* Chairman: stack image above the box */
    .chairman-wrap {
        display: block;
        min-height: 0;
    }
    .chairman-img {
        position: static;
        width: 80%;
        margin: 0 auto -1px;
    }
    .chairman-box {
        width: 100%;
        padding: 45px 28px;
    }
    .marquee-track span {
        font-size: 40px;
  }
}
@media (max-width: 991px) {
    .glance-banner {
        min-height: 100vh;
    }

    .glance-banner .container {
        padding-top: 100px;
    }

    body.plain-top .vcm-head,
    body.plain-top .atr-head {
        padding-top: 92px;
    }

    .glance-banner-inner {
        min-height: 0;
    }

    .glance-banner h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .glance-intro-box {
        padding: 0 20px;
    }

    .glance-capacity-heading h2 {
        font-size: 34px;
        line-height: 40px;
    }

    .glance-locked-title {
        font-size: 34px;
        line-height: 40px;
    }

    .glance-locked-overlay-row {
        bottom: 28px;
        width: calc(100% - 32px);
        gap: 14px;
    }

    .glance-locked-overlay-card {
        padding: 22px 18px 18px;
    }

    .oc-intro-box,
    .oc-stats-row,
    .oc-fragile-box,
    .oc-resilience-row,
    .oc-infra-box,
    .oc-quote-box,
    .oc-iconquote-row {
        padding-left: 20px;
        padding-right: 20px;
    }

    .oc-quote-text {
        font-size: 24px;
        line-height: 32px;
    }

    .oc-iconquote-media {
        margin-bottom: 24px;
    }

    .oc-iconquote-icon {
        max-width: 180px;
    }

    .oc-iconquote-quote.oc-quote-box {
        padding-left: 0;
        padding-right: 0;
    }

    .oc-stat {
        padding: 0 16px 0 0;
        margin-bottom: 24px;
    }

    .oc-stats-row > .col-6:nth-last-child(-n + 2) .oc-stat {
        margin-bottom: 0;
    }

    .oc-resilience-text {
        padding-right: 0;
        margin-bottom: 24px;
    }

    .oc-resilience-figure {
        height: auto;
    }

    .oc-resilience-img {
        height: 420px;
        flex: 0 0 auto;
    }

    .obm-message-box,
    .obm-intro-text,
    .obm-pillar,
    .obm-roadmap-title,
    .obm-roadmap-stats,
    .obm-roadmap-body,
    .obm-strategies-title,
    .obm-strategies-grid {
        margin-left: 0;
        margin-right: 0;
    }

    .obm-message,
    .obm-intro,
    .obm-roadmap,
    .obm-strategies,
    .obm-capitalise,
    .obm-approach {
        padding-left: 20px;
        padding-right: 20px;
    }

    .obm-message-box {
        padding: 28px 26px;
    }

    .obm-intro-text {
        padding-right: 0;
        margin-bottom: 28px;
    }

    .obm-pillar {
        height: auto;
    }

    .obm-pillar::before {
        height: 0;
    }

    .obm-pillar.is-inview::before {
        height: 100%;
    }

    .vcm-head {
        padding: 15px 20px 18px;
    }

    .vcm-title {
        font-size: 34px;
        line-height: 40px;
    }

    .vcm-tabs-wrap {
        top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .vcm-tabs {
        gap: 22px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vcm-tabs::-webkit-scrollbar {
        display: none;
    }

    .vcm-tab {
        white-space: nowrap;
        font-size: 18px;
        line-height: 24px;
        padding: 14px 0;
    }

    .vcm-panel {
        padding-left: 20px;
        padding-right: 20px;
        scroll-margin-top: 72px;
    }

    .vcm-card-title {
        font-size: 22px;
        line-height: 26px;
    }

    .vcm-section-title {
        font-size: 26px;
        line-height: 30px;
    }

    .vcm-act-card {
        gap: 18px;
    }

    .vcm-act-icon {
        width: 58px;
    }

    .vcm-act-title {
        font-size: 22px;
        line-height: 26px;
    }

    /* Revenue box: stack Renewables above Thermal on tablet/mobile */
    .vcm-revenue {
        flex-direction: column;
    }

    .vcm-revenue-col {
        padding: 32px 24px;
    }

    .vcm-revenue-col + .vcm-revenue-col {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .vcm-revenue-value {
        font-size: 40px;
    }

    .glance-purpose-wrap {
        padding: 24px 22px 28px;
    }

    .glance-locked-overlay-card h4 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-side .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-label {
        font-size: 16px;
        line-height: 20px;
    }

    .glance-locked-overlay-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .glance-pathway-box h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-pathway-box p,
    .glance-pathway-sub {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-pathway-cagr {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-capacity-future-title {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capacity-future-card-title {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capacity-future-card {
        padding: 20px 18px 18px;
    }

    .glance-capacity-future-value {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-capacity-future-metric {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-framework-box h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-framework-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-target-box h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-netzero-box {
        padding: 18px 16px 20px;
    }

    .glance-target-box h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-target-value,
    .glance-target-percent {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-transition-title {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-transition-head h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-transition-value {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-transition-box {
        padding: 18px 16px 20px;
    }

    .glance-transition-stat-label,
    .glance-transition-stat-link,
    .glance-transition-copy li,
    .glance-transition-more,
    .glance-transition-legend {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-milestones-side h3,
    .glance-milestones-card h4,
    .glance-milestones-center h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-milestones-side p,
    .glance-milestones-card p,
    .glance-milestones-center p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-milestones-center {
        min-height: 280px;
        max-width: 100%;
    }

    .glance-inorganic-box h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-inorganic-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-map-title {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-map-placeholder-box {
        min-height: 420px;
        font-size: 20px;
        line-height: 26px;
    }

    .glance-map-item strong,
    .glance-map-legend-item {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-map-item em,
    .glance-map-note p {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-thermal-portfolio-box h3 {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-thermal-portfolio-value {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-thermal-subline {
        font-size: 16px;
        line-height: 22px;
    }

    .glance-renewable-portfolio-box h3 {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-renewable-portfolio-value {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-renewable-subline,
    .glance-renewable-meta span,
    .glance-renewable-meta strong,
    .glance-renewable-meta p,
    .glance-renewable-portfolio-label,
    .glance-renewable-summary-caption {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-thermal-portfolio-label {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capital-slider-tabs .nav-link {
        font-size: 16px;
        line-height: 20px;
        padding: 14px 14px 12px 14px;
    }

    .glance-capital-slide {
        gap: 18px;
    }

    .glance-capital-slide-text h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-capital-metric-value {
        font-size: 26px;
        line-height: 30px;
    }

    .glance-capital-human-kpis,
    .glance-capital-social-kpis {
        gap: 16px 18px;
    }

    .glance-capital-human-value,
    .glance-capital-natural-value,
    .glance-capital-social-value {
        font-size: 26px;
        line-height: 30px;
    }

    .glance-capital-human-label,
    .glance-capital-natural-label,
    .glance-capital-social-label {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-capital-slider-nav {
        left: -10px;
        right: -10px;
    }

    .glance-capital-slider-arrow {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    .glance-capacity-heading p {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capacity-side-card {
        min-height: 160px;
    }

    .glance-capacity-main-box {
        padding-left: 0;
    }

    .glance-capacity-main-value {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-capacity-side-value {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-capacity-metric,
    .glance-capacity-metric strong,
    .glance-capacity-product p,
    .glance-capacity-product strong {
        font-size: 18px;
        line-height: 26px;
    }

    .glance-values-box h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-values-item p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-portfolio-num {
        font-size: 30px;
        line-height: 36px;
    }

    .glance-growth-title {
        font-size: 18px;
        line-height: 24px;
    }

    .growth-chart {
        padding-left: 16px;
    }

    .growth-summary {
        padding: 22px 16px;
        min-height: 160px;
    }

    .growth-carousel-box {
        padding: 18px 14px 12px;
    }

    .growth-carousel .owl-nav {
        top: -56px;
    }

    .growth-summary h4 {
        font-size: 16px;
        line-height: 20px;
    }

    .growth-value {
        font-size: 24px;
        line-height: 28px;
    }

    .growth-bars {
        min-height: 140px;
    }

    .glance-capacity-table thead th {
        font-size: 16px;
        line-height: 20px;
    }

    .glance-capacity-table tbody th {
        font-size: 16px;
        line-height: 20px;
        width: 170px;
    }

    .glance-capacity-table tbody td {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-capacity-row + .glance-capacity-row {
        margin-top: 22px;
    }

    .glance-prevnext-link {
        font-size: 16px;
        line-height: 20px;
    }

    .menu, .nav-icon3 {
        display: none;
    }
    .my-sidenav {
        width: 0px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        z-index: 999999999;
        height: 100vh;
        max-width: 0px;
        width: 100%;
        background-color: #003974;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }

    .my-sidenav > ul {
        padding: 0px 20px 0px;
    }

    .my-sidenav > ul > li > ul {
        margin-top: 0px;
        display: none;
    }

    .my-sidenav ul.submenu li ul.submenu {
        display: none;
        position: static;
        width: 100%;
    }

    .my-sidenav ul {
        list-style-type: none;
        padding-left: 15px;
    }

    .my-sidenav ul li {
        border-bottom: 1px solid #ffffff;
        padding: 15px 0px;
    }

    .my-sidenav > ul > li > ul > li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 0px;
    }

    .my-sidenav > ul > li > ul > li:last-child,
    .my-sidenav ul.submenu li ul.submenu li:last-child {
        border-bottom: 0px;
    }

    .my-sidenav ul.submenu li ul.submenu li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 10px;
    }

    .my-sidenav ul.submenu li ul.submenu li a {
        color: #ffffff;
        font-size: 16px;
    }

    .cross-btn1 {
        text-align: right;
        padding: 16px 14px 0px 0px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
    }

    .my-sidenav .submenu-indicator-minus .submenu-indicator {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .my-sidenav .submenu-indicator {
        font-size: 30px;
        position: absolute;
        line-height: 25px;
        right: 15px;
    }

    .my-sidenav > ul > li > a {
        color: #ffffff;
        font-size: 18px;
        display: block;
    }

    .my-sidenav > ul > li > ul > li > a {
        color: #ffffff;
        font-size: 14px;
    }

    .my-sidenav > ul > li > ul > li > a img {
        padding-right: 0;
        float: right;
        padding-left: 50px;
    }
    .glance-wrap p, .glance-wrap h6
    {
color: #000;
    }
}

@media(max-width:991px){
    #header {
        top: 16px;
        padding:0px;
    }
    #header .header-inner {
        padding: 12px 18px;
    }
    .header-left,
    .header-right {
        gap: 16px;
    }
    .header-left .logo img {
        width: 100px;
    }
    .report-title p {
        font-size: 13px;
        line-height: 16px;
    }
    .hdr-divider {
        height: 32px;
    }
    .gallery-thumbs {
        bottom: 5rem;
    }
}

@media (max-width: 767px) {
    .gallery-thumbs .swiper-slide {
        width: 4.5rem;
        height: 4.5rem;
    }
    /* Footer: stack columns */
    .footer-cols,
    .footer-downloads {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .site-footer.is-open .footer-links {
        max-height: 500px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .glance-wrap
    {
        padding: 0px 0px;
    }
    .glance-wrap h2
    {
font-size: 32px;
line-height: 38px;
    }
    .gallery .content h1
    {
        font-size: 32px;
        line-height: 38px;
    }
    .glance-wrap h5, .glance-wrap h6 {
    font-size: 22px;
    line-height: 26px;
}
.hm-glance
{
    display: flex;
    flex-direction: column-reverse;
    padding-top:40px;
    padding-bottom: 0px;
}
.glance-mbl-img
{
    padding-top: 40px;
}
.ov-right
{
    padding-top: 30px;
}
.hm-chairman {
    padding: 75px 0 0px;
    margin-bottom: 40px;
}
.chairman-box h3 span 
{
    display: inline;
}
.hm-capitals
{
    padding: 30px 0px;
}
.cap-card
{
    height: auto;
    min-height: 756px;
}
.cap-left
{
    padding: 30px 15px;
}
}
@media (max-width: 575px){
    .report-title,
    .report-download {
        display: none;
    }
    .header-left .hdr-divider {
        display: none;
    }
    .gallery .read-more {
        padding: 10px 24px;
        font-size: 13px;
    }
    /* Stats box: single column on small screens */
    .stat-grid {
        grid-template-columns: 1fr;
    }
    .stat-item,
    .stat-item:nth-child(odd) {
        border-right: none;
        border-bottom: 1px solid #e6e6e6;
        padding-left: 0;
    }
    .stat-item:last-child {
        border-bottom: none;
    }
    .stat-box {
        padding: 25px 22px;
    }
}
/* Key Themes: stack — preview on top, list below */
@media (max-width: 991px){
    .themes-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .themes-right {
        position: static;
        order: -1;
    }
    .themes-preview {
        aspect-ratio: 16 / 10;
        max-height: 340px;
    }
    .theme-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px 0;
        justify-items: start;
    }
    .t-title h3 {
        font-size: 20px;
    }
}

/* Key Themes: stacked cards on mobile — image above each heading, no hover */
@media (max-width: 767px){
    .themes-right {
        display: none;
    }
    .theme-row {
        display: block;
        padding: 24px 0;
        border-bottom: 1px solid #d20911;
    }
    .theme-row::before {
        display: none;
    }
    .theme-row.is-active,
    .theme-row:hover {
        padding-left: 0;
    }
    .t-row-img {
        display: block;
        width: 100%;
        height: 200px;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .theme-row .t-title h3,
    .theme-row.is-active .t-title h3 {
        color: #d20911;
        font-size: 20px;
        line-height: 1.2;
    }
    .theme-btn {
        margin-top: 16px;
    }
}

@media (max-width: 420px){
    .glance-banner {
        min-height: 100vh;
    }

    .glance-banner-inner {
        min-height: 0;
    }

    .glance-banner h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-intro-box {
        padding: 0 0px;
    }

    .glance-capacity-heading h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-locked-title {
        font-size: 28px;
        line-height: 34px;
    }

    .glance-locked-overlay-row {
        bottom: 18px;
        width: calc(100% - 32px);
        gap: 10px;
    }

    .glance-locked-overlay-card {
        padding: 18px 16px 16px;
    .oc-intro-box,
    .oc-stats-row,
    .oc-fragile-box,
    .oc-resilience-row,
    .oc-infra-box,
    .oc-quote-box,
    .oc-iconquote-row {
        padding-left: 12px;
        padding-right: 12px;
    }

    .oc-iconquote-icon {
        max-width: 150px;
    }

    .oc-quote-box {
        gap: 16px;
    }

    .oc-quote-icon {
        width: 44px;
    }

    .oc-quote-text {
        font-size: 20px;
        line-height: 28px;
    }

    .oc-stat-value {
        font-size: 30px;
        line-height: 34px;
    }

    .oc-resilience-img {
        height: 320px;
    }

    .obm-message,
    .obm-intro,
    .obm-roadmap,
    .obm-strategies,
    .obm-capitalise,
    .obm-approach {
        padding-left: 12px;
        padding-right: 12px;
    }

    .obm-message-box {
        padding: 24px 20px;
    }

    .obm-approach-card {
        padding: 20px 18px;
    }

    .vcm-head {
        padding: 15px 12px 16px;
    }

    .vcm-tabs-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .vcm-tabs {
        gap: 16px;
    }

    .vcm-tab {
        font-size: 15px;
        line-height: 20px;
        padding: 12px 0;
    }

    .vcm-panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vcm-card {
        padding: 22px 20px;
    }

    .vcm-stepbox {
        padding: 44px 20px 22px;
    }

    .obm-pillar-text {
        font-size: 20px;
        line-height: 28px;
    }

    .obm-roadmap-value {
        font-size: 34px;
        line-height: 38px;
    }

    .obm-roadmap-label {
        font-size: 20px;
        line-height: 26px;
    }

    .obm-roadmap-stats .col-12:last-child .obm-roadmap-stat {
        margin-top: 14px;
    }

    .glance-purpose-grid > .col-12:last-child {
        margin-top: 16px;
    }

    .glance-locked-overlay-card h4 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-side .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-label {
        font-size: 15px;
        line-height: 19px;
    }

    .glance-locked-overlay-subtitle {
        font-size: 15px;
        line-height: 19px;
    }

    .glance-pathway-box h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-pathway-box p,
    .glance-pathway-sub {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-pathway-cagr {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-capacity-future-title {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-capacity-future-grid {
        gap: 18px 18px;
    }

    .glance-capacity-future-card-title {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-capacity-future-card {
        padding: 18px 16px 16px;
    }

    .glance-capacity-future-value {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-capacity-future-subtext,
    .glance-capacity-future-label,
    .glance-capacity-future-copy,
    .glance-capacity-future-metric {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-framework-box {
        padding: 6px 14px 16px 16px;
    }

    .glance-framework-box h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-framework-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-target-box {
        padding: 20px 18px 22px;
    }

    .glance-target-box h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-target-box h4 {
        font-size: 17px;
        line-height: 22px;
    }

    .glance-target-box p,
    .glance-target-text,
    .glance-target-label {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-target-value,
    .glance-target-percent {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-netzero-box {
        padding: 16px 14px 18px;
    }

    .glance-transition-title {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-transition-card,
    .glance-transition-copy {
        padding: 0;
    }

    .glance-transition-head h4 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-transition-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .glance-transition-donut {
        width: 190px;
        height: 190px;
    }

    .glance-transition-chart-wrap {
        gap: 16px;
    }

    .glance-transition-perc {
        font-size: 16px;
        line-height: 20px;
    }

    .glance-transition-copy li,
    .glance-transition-more,
    .glance-transition-legend {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-milestones {
        padding: 0 0 40px;
    }

    .glance-milestones-center {
        min-height: 240px;
        padding: 22px 18px;
    }

    .glance-milestones-side,
    .glance-milestones-card {
        text-align: left;
    }

    .glance-milestones-side h3,
    .glance-milestones-card h4,
    .glance-milestones-center h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-milestones-side p,
    .glance-milestones-card p,
    .glance-milestones-center p {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-inorganic-box h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-inorganic-box p {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-map-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 14px;
    }

    .glance-map-placeholder {
        margin-bottom: 18px;
    }

    .glance-map-placeholder-box {
        min-height: 280px;
        font-size: 18px;
        line-height: 24px;
    }

    .glance-map-item span {
        width: 28px;
        height: 26px;
        font-size: 16px;
        margin-right: 10px;
    }

    .glance-map-item strong {
        font-size: 16px;
        line-height: 22px;
    }

    .glance-map-item em {
        font-size: 14px;
        line-height: 21px;
    }

    .glance-map-legend-item {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-map-note p {
        font-size: 14px;
        line-height: 21px;
    }

    .glance-thermal-portfolio-box {
        padding: 20px 16px 18px;
    }

    .glance-thermal-portfolio-box h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-thermal-portfolio-value {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-thermal-subline {
        font-size: 15px;
        line-height: 21px;
        margin-top: -10px;
        margin-bottom: 14px;
    }

    .glance-thermal-portfolio-label {
        font-size: 16px;
        line-height: 22px;
    }

    .glance-renewable-portfolio-box {
        padding: 20px 16px 18px;
    }

    .glance-renewable-portfolio-summary {
        padding: 16px 16px 14px;
    }

    .glance-renewable-portfolio-box h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-renewable-portfolio-value {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-renewable-summary-caption {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-renewable-subline {
        font-size: 15px;
        line-height: 21px;
        margin-bottom: 14px;
    }

    .glance-renewable-image-placeholder {
        min-height: 240px;
        font-size: 16px;
        line-height: 22px;
    }

    .glance-renewable-meta span,
    .glance-renewable-meta strong,
    .glance-renewable-meta p {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-capital-slider-tabs {
        padding-left: 12px;
        padding-right: 12px;
        gap: 4px 10px;
    }

    .glance-capital-slider-content {
        padding: 22px 12px 16px;
    }

    .glance-capital-slide {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .glance-capital-slide-text {
        padding-left: 0;
        padding-right: 0;
    }

    .glance-capital-slide-reverse .glance-capital-slide-text {
        padding-right: 0;
        order: 1;
    }

    .glance-capital-slide-reverse .glance-capital-slide-media {
        order: 2;
    }

    .glance-capital-slide-media {
        order: 2;
    }

    .glance-capital-slider-nav {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        justify-content: center;
        gap: 14px;
        margin-top: 16px;
        padding: 0;
        pointer-events: auto;
    }

    .glance-capital-slider-arrow {
        width: 42px;
        height: 42px;
        font-size: 20px;
        pointer-events: auto;
    }

    .glance-capital-slider-arrow-left,
    .glance-capital-slider-arrow-right {
        margin: 0;
    }

    .glance-capital-slide-text h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capital-slide-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-capital-slide-kpi h4 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-capital-metric {
        padding-right: 12px;
    }

    .glance-capital-metric-right {
        padding-left: 12px;
    }

    .glance-capital-manufactured-kpis {
        gap: 16px 20px;
    }

    .glance-capital-manufactured-value {
        font-size: 26px;
        line-height: 30px;
    }

    .glance-capital-metric-value {
        font-size: 24px;
        line-height: 28px;
    }

    .glance-capital-btn {
        font-size: 16px;
        line-height: 20px;
        padding: 14px 22px;
    }

    .glance-capital-human-kpis,
    .glance-capital-social-kpis {
        grid-template-columns: 1fr;
    }

    .glance-capital-manufactured-kpis {
        grid-template-columns: 1fr;
    }

    .glance-transition-box {
        padding: 16px 14px 18px;
    }

    .glance-capacity-heading p {
        font-size: 17px;
        line-height: 23px;
    }

    .glance-capacity-row + .glance-capacity-row {
        margin-top: 18px;
    }

    .glance-capacity-main-box {
        padding-left: 0;
    }

    .glance-capacity-side-card {
        min-height: auto;
    }

    .glance-capacity-side-card h3,
    .glance-capacity-metric,
    .glance-capacity-metric strong,
    .glance-capacity-product p,
    .glance-capacity-product strong {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-capacity-side-value,
    .glance-capacity-main-value {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-capacity-products-grid {
        margin-top: 0;
    }

    .glance-capacity-product p {
        margin-bottom: 6px;
    }

    .glance-values-box h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .glance-values-item h4 {
        font-size: 17px;
        line-height: 21px;
    }

    .glance-values-item p,
    .glance-portfolio-label {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-portfolio-head h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-portfolio-num {
        font-size: 26px;
        line-height: 32px;
    }

    .growth-card .row {
        --bs-gutter-x: 0;
    }

    .growth-summary {
        min-height: 150px;
    }

    .growth-chart {
        padding-left: 12px;
    }

    .growth-carousel-box {
        padding: 16px 12px 10px;
    }

    .growth-carousel .owl-nav {
        top: -50px;
    }

    .glance-prevnext .col-xl-6 + .col-xl-6 {
        margin-top: 16px;
    }

    .glance-prevnext-link {
        min-height: 64px;
    }
}
}
@media (max-width: 420px) {
    .glance-banner h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .oc-intro-box p,
    .oc-fragile-box p,
    .oc-resilience-text p,
    .oc-infra-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .obm-message-box p,
    .obm-intro-text p,
    .obm-roadmap-body p,
    .obm-strategy-text,
    .obm-capitalise-text {
        font-size: 16px;
        line-height: 24px;
    }

    .obm-capitalise-title,
    .obm-approach-title {
        font-size: 18px;
        line-height: 22px;
    }

    .obm-approach-icon {
        width: 42px;
    }

    .vcm-title {
        font-size: 24px;
        line-height: 30px;
    }

    .vcm-tab {
        font-size: 16px;
        line-height: 22px;
    }

    .vcm-card-title {
        font-size: 20px;
        line-height: 24px;
    }

    .vcm-section-title {
        font-size: 22px;
        line-height: 26px;
    }

    .vcm-card-icon {
        width: 48px;
    }

    .vcm-revenue-value {
        font-size: 34px;
    }

    .vcm-stepbox-text,
    .vcm-card-list li,
    .vcm-card-subtitle {
        font-size: 15px;
        line-height: 21px;
    }

    .obm-pillar-text {
        font-size: 18px;
        line-height: 25px;
    }

    .obm-roadmap-value {
        font-size: 28px;
        line-height: 32px;
    }

    .obm-roadmap-label {
        font-size: 18px;
        line-height: 24px;
    }

    .obm-roadmap-title,
    .obm-strategies-title {
        font-size: 18px;
        line-height: 22px;
    }

    .oc-stat-value {
        font-size: 26px;
        line-height: 30px;
    }

    .oc-stat-label {
        font-size: 15px;
        line-height: 20px;
    }

    .oc-fragile-box h3,
    .oc-resilience-text h3,
    .oc-infra-box h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .oc-quote-icon {
        width: 38px;
    }

    .oc-quote-text {
        font-size: 18px;
        line-height: 25px;
    }

    .oc-resilience-img {
        height: 260px;
    }

    .glance-intro-box h2 {
        font-size: 16px;
        line-height: 20px;
    }

    .glance-intro-box h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-vision-box h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-purpose-box h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-purpose-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-values-icon {
        width: 86px;
    }

    .glance-values-box h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-values-item p {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-portfolio-num {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capacity-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-vision-box p {
        font-size: 16px;
        line-height: 24px;
    }

    .glance-strengths-box h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-strengths-box p,
    .glance-strengths-list li {
        font-size: 16px;
        line-height: 24px;
    }

    .growth-summary h4 {
        font-size: 15px;
        line-height: 19px;
    }

    .growth-value {
        font-size: 22px;
        line-height: 26px;
    }

    .growth-cagr {
        font-size: 14px;
        line-height: 18px;
    }

    .growth-chart-cagr {
        font-size: 14px;
        line-height: 18px;
    }

    .growth-bar-value,
    .growth-bar-year {
        font-size: 12px;
        line-height: 16px;
    }

    .growth-carousel .owl-nav button.owl-prev,
    .growth-carousel .owl-nav button.owl-next {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .glance-capacity-table-wrap h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capacity-heading {
        margin-bottom: 14px;
    }

    .glance-prevnext-link {
        font-size: 15px;
        line-height: 19px;
    }

    .glance-prevnext-icon {
        width: 48px;
        min-width: 48px;
        flex-basis: 48px;
        font-size: 18px;
    }

    .glance-prevnext-text {
        padding: 12px 16px;
        min-height: 48px;
    }

    .glance-capacity-table thead th {
        font-size: 15px;
        line-height: 19px;
    }

    .glance-capacity-table tbody th {
        font-size: 15px;
        line-height: 19px;
        width: 150px;
    }

    .glance-capacity-table tbody td {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capacity-heading h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-locked-title {
        font-size: 24px;
        line-height: 30px;
    }

    .glance-locked-overlay-row {
        bottom: 14px;
        width: calc(100% - 16px);
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .glance-locked-overlay-side {
        width: 42%;
        order: 2;
    }

    .glance-locked-overlay-card {
        width: 100%;
        order: 1;
        padding: 16px 14px 14px;
    }

    .glance-locked-overlay-card h4 {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-side .glance-locked-overlay-value {
        font-size: 20px;
        line-height: 24px;
    }

    .glance-locked-overlay-label {
        font-size: 14px;
        line-height: 18px;
    }

    .glance-locked-overlay-subtitle {
        font-size: 14px;
        line-height: 18px;
    }

    .glance-pathway-box h3 {
        font-size: 17px;
        line-height: 21px;
    }

    .glance-pathway-box p,
    .glance-pathway-sub {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-pathway-cagr {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capacity-future-title {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capacity-future-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .glance-capacity-future-value {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-capacity-future-card-title {
        font-size: 17px;
        line-height: 21px;
    }

    .glance-capacity-future-card {
        padding: 16px 14px 14px;
    }

    .glance-framework-box h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-framework-box p {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-target-box {
        padding: 18px 16px 20px;
    }

    .glance-target-box h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-netzero-box {
        padding: 14px 12px 16px;
    }

    .glance-target-box h4 {
        font-size: 16px;
        line-height: 22px;
    }

    .glance-target-box p,
    .glance-target-text,
    .glance-target-label {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-target-value,
    .glance-target-percent {
        font-size: 22px;
        line-height: 28px;
    }

    .glance-transition-title {
        font-size: 18px;
        line-height: 24px;
    }

    .glance-capital-slider-tabs .nav-link {
        font-size: 16px;
        line-height: 19px;
        padding: 16px 14px 12px;
    }

    .glance-capital-slide {
        grid-template-columns: 1fr;
    }

    .glance-capital-slide-reverse .glance-capital-slide-text,
    .glance-capital-slide-reverse .glance-capital-slide-media {
        order: initial;
        padding-right: 0;
    }

    .glance-capital-slide-text h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .glance-capital-slide-text p {
        font-size: 15px;
        line-height: 23px;
    }

    .glance-capital-metric-value {
        font-size: 22px;
        line-height: 26px;
    }

    .glance-capital-metric-value span {
        font-size: 22px;
    }

    .glance-capital-metric-value small,
    .glance-capital-metric-label {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-capital-manufactured-kpis {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .glance-capital-manufactured-value {
        font-size: 22px;
        line-height: 26px;
    }

    .glance-capital-manufactured-label,
    .glance-capital-manufactured-sub {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-capital-human-value,
    .glance-capital-natural-value,
    .glance-capital-social-value {
        font-size: 22px;
        line-height: 26px;
    }

    .glance-capital-human-label,
    .glance-capital-natural-label,
    .glance-capital-social-label {
        font-size: 15px;
        line-height: 22px;
    }

    .glance-capital-slide-kpi {
        padding: 16px 14px 18px;
    }

    .glance-capital-btn {
        font-size: 15px;
        line-height: 19px;
        padding: 12px 18px;
    }

    .glance-transition-card,
    .glance-transition-copy {
        padding: 0;
    }

    .glance-transition-head h4 {
        font-size: 17px;
        line-height: 21px;
    }

    .glance-transition-donut {
        width: 170px;
        height: 170px;
    }

    .glance-transition-copy li {
        font-size: 15px;
        line-height: 21px;
    }

    .glance-transition-legend {
        gap: 18px;
    }

    .glance-capacity-heading p {
        font-size: 16px;
        line-height: 22px;
    }

    .glance-capacity-side-card {
        padding: 22px 18px;
    }

    .glance-capacity-side-card h3,
    .glance-capacity-side-card p,
    .glance-capacity-metric,
    .glance-capacity-metric strong,
    .glance-capacity-product p,
    .glance-capacity-product strong {
        font-size: 18px;
        line-height: 22px;
    }

    .glance-capacity-side-value,
    .glance-capacity-main-value {
        font-size: 22px;
        line-height: 28px;
    }
}

@media (max-width: 380px) {
    .glance-breadcrumb,
    .glance-breadcrumb .breadcrumb-item,
    .glance-breadcrumb .breadcrumb-item a {
        font-size: 12px;
        line-height: 18px;
    }
}

/* Nav panel — ACCORDION on mobile (submenu opens below each heading) */
@media (max-width: 767px){
    .glance-capital-metric
    {
        margin-bottom: 10px;
    }
    .glance-roadmap-text {
    margin-top: 0px;
}
    .glance-purpose-grid > .col-12:last-child .glance-purpose-box-bottom {
    padding-left: 0px;
}
    .nav-panel__sub-grid li a, .nav-panel__sub-list li a
    {
        padding-bottom: 20px;
        color: #ffffff;
    }
    .nav-panel {
        width: 100%;
        flex-direction: column;
        overflow-y: auto;
        background: #0a1640;
        box-shadow: none;
    }
    .nav-panel__left {
        width: 100%;
        flex: 1 0 auto;
        padding: 16px 0 30px;
    }
    .nav-panel__brand {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 20px;
        margin-bottom: 14px;
        border-bottom: none;
    }
    .nav-panel__right {
        display: none;
    }
    .nav-panel__close {
        top: 19px;
        right: 16px;
    }
    .nav-panel__item {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    .nav-panel__item.is-open {
        color: #ffffff;
    }
    .nav-panel__item i {
        transition: transform 0.3s ease;
    }
    .nav-panel__item.is-open i {
        transform: rotate(90deg);
        opacity: 1;
    }
    /* Submenu moved below its heading — collapsible */
    .nav-panel__nav .nav-panel__submenu {
        display: block;
        max-height: 0;
        overflow: hidden;
        padding: 0 28px;
        transition: max-height 0.35s ease;
    }
    .nav-panel__nav .nav-panel__submenu.acc-open {
        max-height: 640px;
        padding: 8px 28px 16px;

    }
    .nav-panel__sub-label {
        display: none;
    }
    .nav-panel__sub-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 10px;
    }
}
/* Home banner collage */
@media (max-width: 991px) {
    .home-banner {
        padding-top: 100px;
    }
    .hc-content h1 {
        font-size: 34px;
        margin-bottom: 20px;
    }
}
@media (max-width: 767px) {
    .vcm-breadcrumb .breadcrumb-item, .vcm-breadcrumb .breadcrumb-item a
    {
        font-size: 12px;
    }
    .vcm-head
    {
        padding: 15px 0px 18px;
    }
    .vcm-revenue
    {
        margin: 10px 0 0px;
    }

    .cmd-hero-img
    {
        max-width: 100%;
    }

    .glance-btn a
    {
        border: 1px solid #213A8F;
    color: #213A8F!important;
    }
    /* text on top (full width), images as a collage below */
    .home-col {
        display: contents;
    }
    .home-collage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        align-items: start;
    }
    .hc-content {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-bottom: 15px;
    }
    .hc-m5 {
        grid-column: 1 / -1;
    }
    .hc-content h1 {
        font-size: 30px;
        line-height: 1.12;
        margin-bottom: 18px;
    }
    .home-banner-btn {
        font-size: 13px;
        letter-spacing: 1px;
        padding: 9px 24px;
    }
/* Innovative solutions / transition cards: stack (text top, chart bottom) on mobile */
@media (max-width: 767px){
    .glance-transition-card {
        display: block;
    }
}

/* Capital-wise: hide tabs on mobile, move prev/next arrows to bottom of card */
@media (max-width: 767px){
    .glance-capital-slider-tabs {
        display: none;
    }
    .glance-capital-slider-nav {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        justify-content: center;
        gap: 18px;
        margin-top: 24px;
        pointer-events: auto;
    }
    .glance-capital-slider-arrow-left,
    .glance-capital-slider-arrow-right {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Capital-wise (mobile <=767): image on TOP, text BELOW for every capital */
@media (max-width: 767px){
    .glance-capital-slide {
        grid-template-columns: 1fr;
    }
    .glance-capital-slide-media,
    .glance-capital-slide-reverse .glance-capital-slide-media {
        order: 1;
    }
    .glance-capital-slide-text,
    .glance-capital-slide-reverse .glance-capital-slide-text {
        order: 2;
        padding-left: 0;
        padding-right: 0;
    }
    .glance-capital-slide-kpi .col-md-6:last-child .glance-capital-metric, .glance-capital-metric-right
    {
        padding-left: 0px;
    }
    .glance-prevnext .col-xl-6
    {
        margin-bottom: 10px;
    }
    .oc-intro-box, .oc-stats-row, .oc-fragile-box, .oc-resilience-row, .oc-infra-box, .oc-quote-box, .oc-iconquote-row
    {
        padding-left: 0px;
        padding-right: 0px;
    }
.obm-message, .obm-intro, .obm-roadmap, .obm-strategies, .obm-capitalise, .obm-approach
{
    padding-left: 0px;
    padding-right: 0px;
}
.vcm-panel
{
    padding-bottom: 0px;
}
.vcm-nz-readmore
{
    margin-bottom: 30px;
}
.cnv-row
{
    margin-bottom: 0px !important;
}
.oc-quote-box {
    align-items: flex-start;
    gap: 10px;
}
.cm-block
{
    gap:10px !important;
}
.vcm-panel
{
    padding-left: 0px;
    padding-right: 0px;
}
}

/* ---- Value Creation steps: mobile sequence 1..9 + down arrows ---- */
@media (max-width: 767px) {
    /* Restore natural 1..9 order (boxes 4 & 6 are swapped in the DOM for desktop) */
    .vcm-steps-grid > [class*="col-"]:nth-child(1) { order: 1; }
    .vcm-steps-grid > [class*="col-"]:nth-child(2) { order: 2; }
    .vcm-steps-grid > [class*="col-"]:nth-child(3) { order: 3; }
    .vcm-steps-grid > [class*="col-"]:nth-child(4) { order: 6; }
    .vcm-steps-grid > [class*="col-"]:nth-child(5) { order: 5; }
    .vcm-steps-grid > [class*="col-"]:nth-child(6) { order: 4; }
    .vcm-steps-grid > [class*="col-"]:nth-child(7) { order: 7; }
    .vcm-steps-grid > [class*="col-"]:nth-child(8) { order: 8; }
    .vcm-steps-grid > [class*="col-"]:nth-child(9) { order: 9; }

    /* Hide the desktop side/down connector arrows on mobile */
    .vcm-step-arrow,
    .vcm-step-arrow-down { display: none !important; }

    /* Down arrow between every stacked box (single column) */
    .vcm-stepbox::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -21px;
        width: 18px;
        height: 18px;
        transform: translateX(-50%) rotate(90deg);
        background: url("../images/vcm-arrow.svg") no-repeat center / contain;
        z-index: 2;
    }
    /* No arrow after the last box (9) */
    .vcm-steps-grid > [class*="col-"]:last-child .vcm-stepbox::after {
        display: none;
    }
}