@media (max-width: 991px) {
    .inner-page main { padding-top: 64px; }
    .social-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .social-highlights__item:nth-child(odd) { border-left: 0; }
    .governance-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .governance-highlights__item:nth-child(odd) { border-left: 0; }
    .governance-pillar__statement p { font-size: 18px; }
}
@media (max-width: 767px) {
    .inner-page main .esg-feature__chapter { font-size: 28px; }
    .board-directors { padding: 22px 0 20px; }
    .board-director__caption { padding: 14px 14px 18px; }
    .board-secretary { display: block; margin-top: 24px; padding: 16px 20px; }
    .page-banner--plain { padding-top: 18px; }
    .governance-highlights__grid { grid-template-columns: 1fr; row-gap: 0; }
    .governance-highlights__item + .governance-highlights__item { border-left: 0; border-top: 1px solid #f0a08c; padding-top: 24px; margin-top: 20px; }
    .inner-page main .governance-pillars > .container > .row:first-child h2 { font-size: 26px; margin-bottom: 30px; }
    .governance-pillar__icon { width: 110px; margin-bottom: 20px; }
    .governance-pillar__details { display: block; }
    .governance-pillar__details > div { padding: 0; }
    .governance-pillar__details > div + div { border-left: 0; border-top: 1px solid #f0a08c; padding-top: 18px; margin-top: 18px; }
    .social-highlights__grid { grid-template-columns: 1fr; row-gap: 0; }
    .social-highlights__item + .social-highlights__item { border-left: 0; border-top: 1px solid #e8e2d6; padding-top: 24px; margin-top: 20px; }
    .social-pillar__icon { width: 110px; margin-bottom: 20px; }
    .social-pillar__details { display: block; }
    .social-pillar__details > div { padding: 0; }
    .social-pillar__details > div + div { border-left: 0; border-top: 1px solid #d9b471; padding-top: 18px; margin-top: 18px; }
    .environment-highlights__grid { grid-template-columns: 1fr; }
    .environment-highlights__item + .environment-highlights__item { border-left: 0; border-top: 1px solid #c4c9c3; padding-top: 24px; margin-top: 20px; }
    .environment-pillar__icon { width: 110px; margin-bottom: 20px; }
    .environment-pillar__details { display: block; }
    .environment-pillar__details > div { padding: 0; }
    .environment-pillar__details > div + div { border-left: 0; border-top: 1px solid #7ec665; padding-top: 18px; margin-top: 18px; }
    .social-sports__cricket-grid,
    .social-sports__chess-grid { display: flex; flex-direction: column; }
    .social-sports__players { margin-top: 0; }
    .social-sports__cricket,
    .social-sports__chess { padding: 30px 0; }
    .social-trust__impact-copy { padding: 28px 24px; }
    .social-resource__grid { grid-template-columns: 1fr; }
    .social-resource__icon { width: 110px; padding-top: 18px; }
    .social-resource__body { padding: 24px 18px; }
    .social-learning ul { flex-wrap: wrap; }
    .social-learning li { flex-basis: 90px; }
    .social-community { padding: 0 0 30px; }
    .social-benefit { padding: 22px 18px 20px; }
    .social-programme { padding: 22px; }
    .social-photo { border-width: 6px; border-radius: 24px; }
    .amplified-story { grid-template-columns: 1fr; gap: 22px; }
    .amplified-story-row + .amplified-story-row { margin-top: 36px; }
    .amplified-story__content > p,
    .amplified-story__content .dharavi-story__qr { margin-left: 0; }
    .amplified-closing__panel { padding: 28px 24px; }
    .dharavi-story { grid-template-columns: 1fr; }
    .dharavi-story__media > img { height: auto; min-height: 0; }
    .dharavi-story__content { padding: 24px 20px; }
    .dharavi-voices { margin-top: 32px; padding: 30px 0; }
    .dharavi-voices__grid { grid-template-columns: 1fr; }
    .dharavi-voices__grid .dharavi-voices__message { grid-column: auto; border: 0; }
    .dharavi-voices__grid .dharavi-voices__message + .dharavi-voices__message { border-top: 1px solid #b56abd; }
    .inner-page main { padding-top: 60px; }
    .page-banner { padding: 20px 0 10px; margin-bottom: 0; }
    .page-breadcrumb { margin-bottom: 28px; }
}
@media(max-width:1200px){
    .esg-panel { padding: 40px; gap: 34px; }
    .wd-lockup { font-size: 52px; }
    .wd-stage-inner, .wd-card { padding: 0px 40px; }
    .se-card { padding: 22px 20px; }
    .tb-statement { font-size: 27px; line-height: 40px; }
    .tb-shot { height: 400px; }
    .tp-grid { gap: 38px 26px; }
    .tp-stat h3 { font-size: 30px; line-height: 36px; }
}
@media(max-width:991px){
    /* the two remaining panels stack : the categories, then their links */
    .nb-menu { padding-top: 70px; }
    .nb-menu-content { padding-left: 0px; margin: 24px 0px; }
    .nb-menu-nav .nav-link { font-size: 18px; line-height: 26px; }
    /* the cover, its download link and the social row are dropped here :
       the menu is a list of links on a phone, nothing more */
    .nb-menu-aside { display: none; }
    .dl-cover-plate { margin: 0px auto 35px; }
    .dl-card { padding: 20px 22px; }
    .dl-card h3 { font-size: 16px; line-height: 22px; }
    .th-title { top: 110px; }
    .th-grid { gap: 14px 20px; }
    .th-pill { padding: 14px 20px; gap: 14px; }
    .th-pill h4 { font-size: 17px; line-height: 24px; }
    .wa-sec { padding: 70px 0px 80px; }
    .wa-head { margin-bottom: 40px; }
    .wa-shot { height: 190px; }
    .esg-sec { padding: 70px 0px 80px; }
    /* the still moves under the copy once the panel is one column */
    .esg-panel { grid-template-columns: 1fr; padding: 34px; }
    .esg-shot { height: 340px; }
    .esg-tab { padding: 13px 22px; font-size: 17px; }
    .su-content p { font-size: 17px; line-height: 28px; }
    /* the split stacks : copy first, then the portrait panel */
    /* photograph first, copy under it - the reverse of the desktop split */
    .ds-split { grid-template-columns: 1fr; min-height: 0px; }
    .ds-media { order: 1; }
    .ds-copy { order: 2; }
    .ds-copy { padding: 60px 30px; }
    .ds-copy-inner { max-width: 100%; }
    .ds-media { min-height: 460px; }
    .wd-lockup { font-size: 42px; }
    /* a 3-of-12 column of body copy is unreadable at this width, so the
       grid collapses and each card carries its own still inline */
    .wd-stage { display: none; }
    /* the stage is gone here, so nothing to pull the first card up over */
    .wd-stage + .wd-card { margin-top: 0px; }
    .wd-card { display: block; height: auto; min-height: 0px; padding: 0px 24px 20px; }
    .wd-left { text-align: left; }
    .wd-media-inline { display: block; margin: 24px 0px; }
    /* 4:5, the same as the desktop stage. These are portrait photographs;
       a 16:10 plate cropped their top and bottom away under cover, which
       took the subject out of the third one entirely. */
    .wd-shot-inline {
        aspect-ratio: 4 / 5;
        border-radius: 20px;
        background-color: #d9d7de;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .wd-close { font-size: 30px; line-height: 42px; }
    /* three columns are too narrow here : the still takes the width and
       the two blocks of copy sit under it, side by side */
    .se-img1 { width: 380px; height: 270px; }
    .se-title { top: 120px; }
    .se-intro { font-size: 17px; line-height: 26px; margin-bottom: 32px; }
    .se-card { padding: 20px 16px; }
    .se-card h4 { font-size: 18px; line-height: 26px; }
    .bd-sec { padding: 50px 0px; }
    .bd-tabs { gap: 14px; margin-bottom: 35px; }
    .bd-sec::before { height: 330px; }
    /* metro drops the offset panel and lets the section find its own
       height once the columns stack */
    .cm-sec { height: auto; min-height: 0px; padding: 70px 0px; }
    .cm-bg::after { display: none; }
    .cm-eyebrow { padding-top: 35px; }
    .cm-content p { max-width: 100%; }
    /* the quote stacks above the portrait, so the section takes its
       own height again rather than a fixed screen */
    /* the copy stacks above the slider here, and the slider keeps its
       run to the right edge of the page */
    /* block, not flex : the base rule sets align-items: center, and in a
       flex column that shrinks each child to its content width instead of
       stretching - which collapsed the slider and left it measuring zero */
    .tb-wrap { display: block; }
    .tb-intro { max-width: 100%; }
    /* stacked copy plus a 400px slide will not fit one screen : the section
       takes its own height again here */
    .tb-sec { height: auto; min-height: 0px; display: block; padding: 70px 0px; }
    .tb-intro { margin-bottom: 40px; }
    .tb-statement { font-size: 26px; line-height: 38px; }
    /* four columns leave the longer labels too narrow to read here */
    .tp-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 40px; }
    .tp-heading { margin-bottom: 40px; }
    .hero__scrolldown { right: 24px; bottom: 28px; }

    /* the Download PDF button drops out of the header on mobile */
    .download-btn {
        display: none;
    }
    /* keep the menu button */
    .ham-icon {
        display: inline-flex;
    }
    .menudownload {
        display: flex;
    }
    .logo img {
        height: 42px;
    }
    .headertxt {
        margin-left: 15px;
        padding-left: 15px;
    }

    .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;
    }

}

@media (max-width: 767px) {
    .nb-menu-nav { padding: 20px 22px; }
    .nb-submenu a { font-size: 15px; line-height: 21px; }
    .dl-grid { grid-template-columns: 1fr; gap: 16px; }
    /* the three footer blocks stack and centre */
    .copyrightTxt p, .rdxDev p { text-align: center; }
    .footSocial ul { margin: 14px 0px; }
    /* nothing pins here : the section takes its own height */
    /* no sequence here : the photograph sits at the top and the copy runs
       underneath it, rather than the two being layered */
    .th-sec { height: auto; min-height: 0px; }
    .th-bg { position: static; height: 240px; }
    .th-scrim { display: none; }
    .th-title { display: none; }
    .th-content { position: static; display: block; background: #f4eef7; padding: 42px 0px 50px; }
    /* the copy sits on the lavender ground here, not over the photograph,
       so the white it uses on desktop would not read */
    .th-head h2 { color: var(--purple); }
    .th-head p { color: #000000; }
    .th-grid { grid-template-columns: 1fr; }
    .th-pill h4 { font-size: 16px; line-height: 23px; }
    .th-icon { width: 38px; height: 38px; }
    .wa-sec { padding: 55px 0px 60px; }
    .wa-head p { font-size: 16px; line-height: 26px; }
    .wa-shot { height: 170px; }
    /* the cover, the marks and the copy stack once the row is too narrow */
    .wa-recog { display: block; text-align: center; padding: 22px 20px; margin-top: 38px; }
    .wa-cover { margin: 0px auto 20px; }
    .wa-lacp-set { flex-direction: row; justify-content: center; margin-bottom: 20px; }
    .wa-recog-text { text-align: center; }
    .esg-sec { padding: 55px 0px 60px; }
    .esg-tab { font-size: 16px; line-height: 24px; padding: 12px 18px; }
    .esg-panel { padding: 26px 22px; border-radius:0px; }
    .esg-copy .esg-intro { font-size: 16px; line-height: 26px; margin-bottom: 28px; }
    /* two per row rather than one : a single column left the panel a very
       long scroll for four short values */
    .esg-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
    .esg-stat h4 { font-size: 18px; line-height: 26px; }
    .esg-icon { width: 70px; height: 70px; background-size:contain; margin-bottom: 12px; }
    /* the divider comes back with the second column */
    .esg-stat:nth-child(even)::before { left: -9px; }
    .esg-shot { height: 260px; }
    .su-sec { min-height: 480px; }
    .su-content p { font-size: 16px; line-height: 26px; }
    .ds-copy { padding: 50px 22px; }
    .ds-copy-inner p { font-size: 16px; line-height: 26px; margin-bottom: 28px; }
    .ds-media { min-height: 360px; }
    .wd-sec { padding: 30px 0px 30px; }
    .wd-sub { font-size: 16px; line-height: 26px; margin-bottom: 30px; }
    .wd-lockup { font-size: 32px; }
    .wd-lockup .hl { border-radius: 8px; }
    .wd-overlay { font-size: 18px; line-height: 27px; }
    .wd-close { font-size: 24px; line-height: 36px; }
    /* nothing pins here : the section takes its own height and the
       rows stack one card wide */
    .se-sec, .sv-sec { height: auto; min-height: 0px; }
    /* plain stacked blocks : the still on top, the title band or the copy
       under it on the lilac ground */
    .se-stage, .sv-stage { display: flex; flex-direction: column; height: auto; overflow: visible; background: #f4eef7; }
    .se-img,
    .se--static .se-img1,
    .sv-img {
        display: block; position: static; width: 100%; height: 210px;
        border-radius: 0px; transform: none;
    }
    .se-img1, .sv-img { order: 1; }
    .se-foot, .sv-content { order: 2; }
    /* the frosted sheet is absolutely positioned over the whole stage, and
       the static class turns it fully opaque - left in, it blurs the lot */
    .sv-glass { display: none; }
    .se-foot, .se--static .se-foot {
        position: static; opacity: 1; background: none;
        padding: 36px 24px 45px;
    }
    .se-foot .se-title { color: var(--purple); }
    .sv-content { position: static; opacity: 1; background: transparent; padding: 36px 0px 55px; }
    .se-row--3, .se-row--2 { grid-template-columns: 1fr; }
    .se-card + .se-card { border-left: 0px; border-top: 1px solid #d8cfdd; }
    .bd-sec { padding: 50px 0px; }
    /* two 36px headings will not sit side by side on a phone */
    .bd-tabs { gap: 12px; justify-content: center; }
    .bd-tab { font-size: 17px; line-height: 24px; padding: 9px 24px; }
    /* narrower cards here, so the longer roles take an extra line */
    .bd-card { min-height: 360px; }
    .bd-sec::before { height: 260px; }
    .bd-note { margin-top: 30px; padding: 14px 20px; }
    .cm-sec { padding: 40px 0px; }
    .cm-eyebrow { padding-top: 28px; }
    .cm-heading { padding-bottom: 22px; }
    .cm-content p { font-size: 18px; }
    .cm-quote--close { margin-bottom: 22px; }
    .tb-sec { padding: 55px 0px; }
    .tb-heading { margin-bottom: 26px; }
    /* the plate copy is set nowrap so the sweep stays on one line :
       the type has to come down far enough to fit the narrow screen */
    .tb-statement { font-size: 28px; line-height: 34px; }
    .tb-shot { height: 340px; }
    /* nothing pins here : the section is its own height and scrolls */
    /* the frosted sheet is a layering effect : with the photograph on top
       and the figures below it there is nothing left to frost */
    .tp-sec { height: auto; min-height: 0px; padding: 0px; }
    .tp-bg { position: static; height: 240px; }
    .tp-bg::after { display: none; }
    .tp-glass { display: none; }
    .tp-content { position: static; height: auto; display: block; background: #f4eef7; padding: 45px 0px 50px; }
    /* the section carries its own lilac ground here, so no plate */
    .tp-content > .container { padding: 0 12px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .tp-grid { gap: 30px 26px; }
    .tp-stat h3 { font-size: 26px; line-height: 32px; }
    .tp-stat p { font-size: 14px; line-height: 21px; }
    /* the hero runs its pinned dissolve here too, same as desktop */
    .hero { min-height: 520px; }
    .hero__headline { line-height: 1.16; }
    .hero__line .hl { border-radius: 10px; }
    .hero__scrolldown { display: none; }

    .headertxt {
        display: none;
    }
    .logo img {
        height: 38px;
    }
    .menudownload {
        padding: 6px 14px;
    }


}
@media (max-width: 420px){
    .esg-tab { font-size: 16px; line-height: 22px; padding: 11px 14px; }
    .wd-lockup { font-size: 26px; }
    .bd-tab { font-size: 15px; line-height: 22px; padding: 8px 18px; }
    .tb-statement { font-size: 24px; line-height: 30px; }
    .tb-shot { height: 280px; }
    .tp-grid { grid-template-columns: 1fr; gap: 26px; }
    .hero__line .hl { border-radius: 8px; }


}


/* the bleeding sliders' arrows track the bootstrap container width, so the
   pull is restated at each of its steps */
@media (max-width: 1399px) {
    .tb-slider.owl-theme .owl-nav,
    .bd-slider.owl-theme .owl-nav { margin-right: max(12px, calc(50vw - 558px)); }
}
@media (max-width: 1199px) {
    .tb-slider.owl-theme .owl-nav,
    .bd-slider.owl-theme .owl-nav { margin-right: max(12px, calc(50vw - 468px)); }
}
@media (max-width: 991px) {
    .tb-slider.owl-theme .owl-nav,
    .bd-slider.owl-theme .owl-nav { margin-right: max(12px, calc(50vw - 348px)); }
}
@media (max-width: 767px) {
    .tb-slider.owl-theme .owl-nav,
    .bd-slider.owl-theme .owl-nav { margin-right: max(12px, calc(50vw - 258px)); }
    .hero__content {
    justify-content: flex-start;
    padding-top: 70px;
}
}

/* One size for every section heading on a phone. These are all set at 36/46 on
   the desktop, which is too heavy once the measure narrows. The hero headline
   and the two display lockups are left out: they are display type sized on
   their own scale, not section headings. */
@media (max-width: 767px) {
    .tp-heading,
    .tb-heading,
    .cm-heading,
    .se-title,
    .se-heading,
    .wd-heading,
    .ds-heading,
    .su-heading,
    .wa-heading,
    .esg-copy h3,
    .th-head h2 {
        font-size: 28px;
        line-height: 34px;
    }
    #director-message
    {
        margin-top: 0px;
    }
    .cm-sec--rev .cm-content {
    padding-left: 0px;
}
.impact-summary{
    margin-bottom: 30px;
}
.horizons-home{
    margin-bottom: 20px;
}
}

/* The director's message runs copy-left / portrait-right, so its copy column
   comes first in the markup and stacking put the text above the photograph.
   The chairman and CEO sections already lead with their portrait. 1199 rather
   than 1200: the columns are col-xl-*, so they stack below bootstrap's xl. */
@media (max-width: 1199px) {
    .cm-sec--rev .cm-bg > .col-xl-7 { order: 1; }
    .cm-sec--rev .cm-bg > .col-xl-5 { order: 2; }
    .cm-sec--rev .cm-img { margin-bottom: 30px; }
    .cm-sec--rev .cm-eyebrow { padding-top: 0px; }
}


/* Board / Management Committee as a select on a phone: two stacked pills ate
   most of the purple band. The control carries the current choice and the
   options open in a panel beneath it, the way a select behaves - the list
   itself is positioned out of flow so it cannot push the cards down. */
@media (max-width: 767px) {
    .bd-tabwrap {
        position: relative;
        max-width: 330px;
        margin: 0px auto 35px;
    }
    .bd-select {
        display: block;
        position: relative;
        width: 100%;
        text-align: left;
        background: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 12px 44px 12px 18px;
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        line-height: 24px;
        color: var(--purple);
        cursor: pointer;
    }
    .bd-select::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--purple);
        border-bottom: 2px solid var(--purple);
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.3s ease;
    }
    .bd-tabwrap.is-open .bd-select::after {
        transform: translateY(-25%) rotate(-135deg);
    }
    /* the options panel, out of flow so it overlays the cards below */
    .bd-tabs {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 5;
        margin: 0px;
        padding: 5px 0px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.22);
    }
    .bd-tabwrap.is-open .bd-tabs {
        display: block;
    }
    .bd-tab {
        width: 100%;
        text-align: left;
        border: none;
        border-radius: 0px;
        background: transparent;
        color: #1c1c1e;
        padding: 11px 18px;
        font-size: 16px;
        line-height: 23px;
    }
    .bd-tab:hover,
    .bd-tab.active {
        background: rgba(142, 39, 143, 0.08);
        color: var(--purple);
    }
}

/* Menu accordion. custom.js moves each pane in under its own heading and adds
   .is-accordion; these rules dress the result as one list rather than the
   three-column layout the desktop menu uses. */
@media (max-width: 991px) {
    .nb-menu.is-accordion .nb-menu-content {
        display: none;
        margin: 0px;
    }
    .nb-menu.is-accordion .nb-menu-nav .nav-item {
        margin-bottom: 0px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    }
    .nb-menu.is-accordion .nb-menu-nav .nav-item:last-child {
        border-bottom: none;
    }
    /* the heading is the control, so the rule under it moves to the item */
    .nb-menu.is-accordion .nb-menu-nav .nav-link,
    .nb-menu.is-accordion .nb-menu-nav .nav-item:last-child .nav-link {
        position: relative;
        padding: 16px 36px 16px 0px;
        border-bottom: none;
    }
    /* + while closed, minus while open */
    .nb-menu.is-accordion .nb-menu-nav .nav-link::after {
        content: "+";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'Noto Sans', sans-serif;
        font-size: 24px;
        line-height: 1;
        color: #ffffff;
    }
    .nb-menu.is-accordion .nb-menu-nav .nav-item.open .nav-link::after {
        content: "\2212";
    }
    .nb-menu.is-accordion .nb-menu-nav .tab-pane {
        padding: 2px 0px 14px;
    }
    .nb-menu.is-accordion .nb-submenu li {
        padding-bottom: 13px;
    }
    .nb-menu.is-accordion .nb-submenu li:last-child {
        padding-bottom: 0px;
    }
}

/*-----------Winning Accolades Responsive Css Start-------------*/
@media (max-width: 1200px) {
    .accolade { padding: 22px 20px; }
    .accolade__trophy img { height: 210px; }
}
@media (max-width: 991px) {
    .inner-page main .accolades-intro { font-size: 18px; line-height: 28px; }
    .accolades { padding: 26px 0 0; }
    .accolade-highlight { padding: 30px 0 0; }
    /* the cover and the badges sit side by side above the copy here */
    .accolade-highlight__badges { flex-direction: row; flex-wrap: wrap; gap: 14px; }
    .accolade-highlight__badge { flex: 1 1 140px; }
}
@media (max-width: 767px) {
    .inner-page main .accolades-intro { font-size: 17px; line-height: 26px; margin-top: 12px; }
    .accolade { padding: 20px 18px; }
    .accolade__trophy { margin-bottom: 16px; }
    .accolade__trophy img { height: 190px; }
    .inner-page main .accolade__award { font-size: 17px; line-height: 25px; }
    .accolade-highlight__badges { flex-direction: row; }
}

@media (max-width: 420px) {
    .accolade { padding: 18px 16px; }
    .accolade__trophy img { height: 170px; }
    .accolade__medal { min-width: 84px; padding: 4px 14px; }
}
/*-----------Winning Accolades Responsive Css End-------------*/

/*-----------Towards New Horizons Responsive Css Start-------------*/
@media (max-width: 1200px) {
    .horizons-pill { padding: 24px 18px; }
    .inner-page main .horizons-story__word { font-size: 40px; line-height: 50px; }
}
@media (max-width: 991px) {
    /* the section rhythm is set on .inner-page main further down; only the
       two section heads take a margin here */
    .horizons-promise__head,
    .horizons-story__head { margin-bottom: 24px; }
    .inner-page main .horizons-promise__head h2 { font-size: 24px; line-height: 34px; }
    .inner-page main .horizons-homes__intro h2,
    .inner-page main .horizons-preserve__content h2 { font-size: 27px; line-height: 37px; }
    .inner-page main .horizons-homes__tagline { font-size: 21px; line-height: 31px; }
    .inner-page main .horizons-promise__lead,
    .inner-page main .horizons-preserve__sub,
    .inner-page main .horizons-verse__english { font-size: 18px; line-height: 28px; }
    .inner-page main .horizons-verse__hindi { font-size: 23px; line-height: 36px; }
    .inner-page main .horizons-list__title { font-size: 20px; line-height: 30px; margin-top: 10px; }
    .inner-page main .horizons-story__band { font-size: 20px; line-height: 30px; }
    .inner-page main .horizons-preserve__spirit { font-size: 21px; line-height: 31px; }
}
@media (max-width: 767px) {
    .horizons-pill { padding: 22px 16px; border-radius: 8px; }
    .horizons-stat { border-radius: 8px; }
    .horizons-pill__icon { margin-bottom: 14px; }
    .horizons-pill__icon img { width: 68px; height: 68px; }
    .inner-page main .horizons-pill h3 { font-size: 17px; line-height: 25px; }
    .horizons-homes__media img,
    .horizons-township__media img,
    .horizons-preserve__media img,
    .horizons-verse__media img { border-radius: 8px; }
    .inner-page main .horizons-homes__intro h2,
    .inner-page main .horizons-preserve__content h2 { font-size: 23px; line-height: 33px; }
    .inner-page main .horizons-homes__tagline { font-size: 19px; line-height: 29px; }
    .inner-page main .horizons-story__word { font-size: 34px; line-height: 44px; }
    .inner-page main .horizons-verse__hindi { font-size: 20px; line-height: 32px; }
    .horizons-verse__quote { padding: 24px 20px; border-radius: 8px; }
    .inner-page main .horizons-story__band { padding: 18px 18px; font-size: 18px; line-height: 28px; border-radius: 8px; }
}
@media (max-width: 420px) {
    .horizons-pill { padding: 20px 14px; }
    .horizons-pill__icon img { width: 60px; height: 60px; }
    .inner-page main .horizons-pill h3 { font-size: 16px; line-height: 24px; }
    .inner-page main .horizons-story__word { font-size: 30px; line-height: 40px; }
    .inner-page main .horizons-story__band { font-size: 17px; line-height: 26px; }
}
/*-----------Towards New Horizons Responsive Css End-------------*/

/*-----------Towards New Horizons banner & media Responsive Css Start-------------*/
@media (max-width: 991px) {
    .horizons-promise__media { margin-bottom: 24px; }
}
@media (max-width: 767px) {
    .page-banner--horizons > .container { display: block; }
    .page-banner--horizons .page-breadcrumb { margin-bottom: 28px; }
    .page-banner--horizons .page-banner__heading { font-size: 28px; }
    .horizons-promise__media img { border-radius: 8px; }
    .page-banner__content-row{
            align-items: self-start;
        padding-top: 60px;
    }
    .page-banner__heading{
        font-size: 28px;
    }
}
/*-----------Towards New Horizons banner & media Responsive Css End-------------*/

/*-----------A Rejuvenated Dharavi lockup Responsive Css Start-------------*/
@media (max-width: 991px) {
    .horizons-homes__intro { gap: 24px; }
    .inner-page main .horizons-homes__title { font-size: 34px; line-height: 44px; }
    .inner-page main .horizons-homes__tagline { padding-left: 24px; font-size: 18px; line-height: 28px; }
}
/* the rule turns to a divider above the tagline once the lockup stacks */
@media (max-width: 575px) {
    .horizons-homes__intro { display: block; margin-bottom: 24px; }
    .inner-page main .horizons-homes__title { font-size: 28px; line-height: 38px; }
    .horizons-homes__badge { padding: 0 14px 3px; border-radius: 10px; }
    .inner-page main .horizons-homes__tagline {
        margin-top: 18px;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid #d7c3d9;
    }
}
/*-----------A Rejuvenated Dharavi lockup Responsive Css End-------------*/

/*-----------Homes gallery & list Responsive Css Start-------------*/
@media (max-width: 991px) {
    .horizons-list--cols { columns: 2; column-gap: 30px; }
    .horizons-home__arrow { width: 48px; height: 38px; margin: 12px auto; }
}
@media (max-width: 575px) {
    .horizons-list--cols { columns: 1; }
}
/*-----------Homes gallery & list Responsive Css End-------------*/

/*-----------Township rows Responsive Css Start-------------*/
@media (max-width: 767px) {
    .horizons-township__row { padding: 22px 0 0; }
    .horizons-township__row + .horizons-township__row { margin-top: 0px; }
}
/*-----------Township rows Responsive Css End-------------*/

/*-----------Build to Preserve Responsive Css Start-------------*/
@media (max-width: 1200px) {
    .inner-page main .horizons-preserve__spirit { font-size: 48px; line-height: 58px; }
    .horizons-collage { grid-auto-rows: 150px; }
}
@media (max-width: 991px) {
    .horizons-preserve { margin-top: 30px; padding: 40px 0; }
    .inner-page main .horizons-preserve__spirit { font-size: 40px; line-height: 50px; }
    .inner-page main .horizons-preserve__content h2 { margin-top: 26px; font-size: 21px; line-height: 31px; }
    .inner-page main .horizons-preserve__lead { font-size: 18px; line-height: 28px; }
    .horizons-collage { gap: 12px; grid-auto-rows: 140px; }
    .horizons-collage--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
}
@media (max-width: 767px) {
    .inner-page main .horizons-preserve__spirit { font-size: 32px; line-height: 42px; }
    .horizons-collage { grid-auto-rows: 120px; }
    .horizons-collage--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* two columns wide, but it keeps its depth so the crop is not a letterbox */
    .horizons-collage__cell--large { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 420px) {
    .horizons-collage { grid-auto-rows: 108px; }
}
/*-----------Build to Preserve Responsive Css End-------------*/

/*-----------Township lists in two columns Responsive Css Start-------------*/
@media (max-width: 575px) {
    .horizons-list--two { columns: 1; }
}
/*-----------Township lists in two columns Responsive Css End-------------*/

/*-----------A Story stat cards Responsive Css Start-------------*/
@media (max-width: 991px) {
    .inner-page main .horizons-stat p { padding: 18px 18px 22px; }
}
@media (max-width: 767px) {
    .inner-page main .horizons-stat p { padding: 16px 16px 20px; }
}
@media (max-width: 420px) {
    .inner-page main .horizons-stat p { padding: 14px 14px 18px; font-size: 15px; line-height: 23px; }
}
/*-----------A Story stat cards Responsive Css End-------------*/

/*-----------Previous & Next Navigation Responsive Css Start-------------*/
@media (max-width: 991px) {
    .page-navigation__link { gap: 16px; font-size: 15px; }
}
@media (max-width: 767px) {
    .page-navigation__link { gap: 14px; padding: 10px 12px; }
    .page-navigation__arrow { flex: 0 0 32px; height: 32px; }
    .page-navigation__arrow svg { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
    .page-navigation__link { gap: 12px; font-size: 14px; }
    .page-navigation__arrow { flex: 0 0 30px; height: 30px; }
    .page-navigation__arrow svg { width: 20px; height: 20px; }
}
/*-----------Previous & Next Navigation Responsive Css End-------------*/

/*-----------A Story lockup Responsive Css Start-------------*/
@media (max-width: 991px) {
    .horizons-story__head { gap: 20px; }
    .inner-page main .horizons-story__head h2 { padding-left: 20px; font-size: 17px; line-height: 27px; }
}
@media (max-width: 767px) {
    .horizons-story__head { gap: 16px; }
    .inner-page main .horizons-story__head h2 { padding-left: 16px; font-size: 16px; line-height: 26px; }
}
/* below this the two halves stack, and the hairline lies across instead */
@media (max-width: 575px) {
    .horizons-story__head { display: block; }
    .inner-page main .horizons-story__head h2 {
        margin-top: 14px;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid #c9c5cd;
    }
}
/*-----------A Story lockup Responsive Css End-------------*/

/*-----------Inner page section rhythm Responsive Css Start-------------*/
@media (max-width: 767px) {
    .inner-page main .section--banner-gap { margin-bottom: 20px; }
    .inner-page main .section--after-banner,
    .inner-page main .accolades,
    .inner-page main .accolade-highlight,
    .inner-page main .horizons-promise,
    .inner-page main .horizons-homes,
    .inner-page main .horizons-township,
    .inner-page main .horizons-verse,
    .inner-page main .horizons-story,
    .inner-page main .horizons-scan { padding: 0 0 20px; }
    .inner-page main .horizons-preserve { margin: 0 0 20px; padding: 20px 0; }
    .inner-page main .section--last { padding-bottom: 0; }
    .inner-page main .accolades .row,
    .inner-page main .accolade-highlight .row,
    .inner-page main .leader-message .row,
    .inner-page main .horizons-promise .row,
    .inner-page main .horizons-homes .row,
    .inner-page main .horizons-township .row,
    .inner-page main .horizons-preserve .row,
    .inner-page main .horizons-verse .row,
    .inner-page main .horizons-story .row,
    .inner-page main .horizons-scan .row,
    .inner-page main .page-navigation .row { --bs-gutter-y: 5px; }
    .inner-page main .page-navigation{
        padding: 20px 0 0;
    }
    .amplified-heading{
        margin-top: 10px;
    }
    .environment-pillars{
        padding: 0px 0 30px;
    }
    .environment-highlights{
        padding: 0 0 30px;
    }
    .environment-feature, .social-feature, .governance-feature{
        padding: 0 0 30px;
    }
    .social-pillar + .social-pillar,.governance-pillar + .governance-pillar,.environment-pillar + .environment-pillar{
        margin-top: 30px;
    }
    .governance-highlights,.governance-pillars{
        padding: 0 0 30px;
    }
    .page-banner--horizons{
        margin-bottom: 30px;
    }
    .horizons-stat{
        margin-bottom: 0;
    }
    .social-women,.social-aspiration,.social-trust{
        padding: 0 0 30px;
    }
    .page-banner--socio {
    background-image: url(../images/mbl/socio-economic-impact-on-mumbai-banner-mob.webp);
}
.page-banner--social {
    background-image: url(../images/mbl/dharavi-social-mission-banner-img-mob.webp);
}
.page-banner--sustainability {
    background-image: url(../images/mbl/best-in-class-sustainability-focus-img-mob.webp);
}
.page-banner--horizons {
    background-image: url(../images/mbl/towards-new-horizons-banner-mob.webp);
}
.su-bg{
    background-image: url(../images/mbl/best-in-class-sustainability-focus-img-mob.webp);
}
    /* one column, so the shot alone sets the depth */
    .accolade,
    .horizons-stat { min-height: 0; height: auto; }
}
/*-----------Inner page section rhythm Responsive Css End-------------*/

/*-----------Equal depth card rows Responsive Css Start-------------*/
/* row--cards-3 mirrors col-lg-4 col-md-6, row--cards-4 col-lg-3 col-sm-6 */
@media (max-width: 991px) {
    .inner-page main .row.row--cards-3,
    .inner-page main .row.row--cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .inner-page main .row.row--cards-2,
    .inner-page main .row.row--cards-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .inner-page main .row.row--cards-4 { grid-template-columns: minmax(0, 1fr); }
}
/*-----------Equal depth card rows Responsive Css End-------------*/

/*-----------Dharavi Badal Rahi Hai panel Responsive Css Start-------------*/
@media (max-width: 1200px) {
    .inner-page main .horizons-scan__title { font-size: 44px; line-height: 54px; }
    .horizons-scan__overlay { padding: 32px; }
}
@media (max-width: 991px) {
    .inner-page main .horizons-scan__title { font-size: 34px; line-height: 44px; }
    .horizons-scan__overlay { padding: 26px; }
    .horizons-scan__qr { width: 96px; height: 96px; }
    .inner-page main .horizons-scan__lead { font-size: 16px; line-height: 25px; }
}
/* the frame is too shallow to hold the lockup once it narrows, so the panel
   sets its own depth and the photograph crops to fill it */
@media (max-width: 767px) {
    .horizons-scan__panel { aspect-ratio: auto; min-height: 420px; }
    .inner-page main .horizons-scan__title { font-size: 30px; line-height: 40px; }
    .horizons-scan__overlay {
        padding: 22px;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.72));
    }
}
@media (max-width: 420px) {
    .horizons-scan__panel { min-height: 380px; }
    .inner-page main .horizons-scan__title { font-size: 26px; line-height: 36px; }
    .horizons-scan__mark { padding: 0 12px 3px; }
    .horizons-scan__cta { gap: 14px; }
    .horizons-scan__qr { width: 84px; height: 84px; }
    .inner-page main .horizons-scan__lead { font-size: 15px; line-height: 23px; }
}
/*-----------Dharavi Badal Rahi Hai panel Responsive Css End-------------*/

/*-----------Social Mission g-5 rows Responsive Css Start-------------*/
/* g-5 is a 48px gutter on both axes. Once the columns stack on a phone that
   opens a deep gap between them, so the rows drop back to the ordinary side
   gutter and a modest space between the stacked blocks */
@media (max-width: 767px) {
    .social-aspiration__children {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 16px;
    }
    .social-aspiration__children { padding-top: 16px; }
    .social-women__row + .social-women__row { padding-top: 24px; }
}
/*-----------Social Mission g-5 rows Responsive Css End-------------*/

/*-----------CEO desk spreads Responsive Css Start-------------*/
@media (max-width: 1200px) {
    /* a deeper frame here, and the slogan runs as two lines rather than
       four, so it lands under the faces rather than across them */
    .ceo-life__photo { aspect-ratio: 4 / 3; }
    .inner-page main .ceo-life__slogan { max-width: 62%; }
    .ceo-life__slogan-line { display: inline-block; margin: 0 6px 4px 0; }
    .ceo-life__slogan-line + .ceo-life__slogan-line { margin-top: 0; }
}
@media (max-width: 991px) {
    .inner-page main .ceo-title { font-size: 24px; line-height: 34px; }
    .ceo-progress__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .inner-page main .ceo-progress__stat h3 { font-size: 26px; line-height: 32px; }
    .inner-page main .ceo-transformation__statement { font-size: 21px; line-height: 30px; }
    .ceo-experience__pillars { grid-template-columns: 1fr; }
    .ceo-life__stories { gap: 12px; padding: 0 18px; }
    .ceo-story { padding: 0 14px; }
    .inner-page main .ceo-story p { font-size: 14px; line-height: 21px; }
    .inner-page main .ceo-life__slogan { left: 18px; bottom: 18px; }
}
@media (max-width: 767px) {
    .ceo-progress, .ceo-transformation, .ceo-future, .ceo-reimagined,
    .ceo-principles, .ceo-life, .ceo-compare, .ceo-experience, .ceo-didi { padding: 0 0 30px; }
    /* one pair to a line : only the very first starts flush and only the
       very last closes without a rule */
    .ceo-compare__table { grid-template-columns: minmax(0, 1fr); }
    .ceo-compare__row { padding: 14px 0; }
    .ceo-compare__head + .ceo-compare__row { padding-top: 0; }
    .ceo-compare__head + .ceo-compare__row + .ceo-compare__row { padding-top: 14px; }
    .ceo-compare__row:nth-last-of-type(2) { padding-bottom: 14px; border-bottom: 1px solid #e6dfe8; }
    .ceo-compare__row:last-of-type { padding-bottom: 0; border-bottom: 0; }
    .ceo-didi.section--last { padding-bottom: 0; }
    .inner-page main .ceo-title { font-size: 22px; line-height: 32px; }
    .ceo-future__grid { grid-template-columns: 1fr; gap: 14px; }
    .ceo-city__pillars { grid-template-columns: 1fr; }
    /* one column here : rows size to their own copy and the 20px margin is
       the only space between the plates */
    .inner-page main .ceo-life .row--cards-2 { gap: 20px; }
    .inner-page main .ceo-life .ceo-subtitle { margin-top: 10px; }
    .inner-page main .ceo-life__slogan { position: static; max-width: none; padding: 20px 18px 24px; }
    /* below the photo there is room again for the four-line stack */
    .ceo-life__slogan-line { display: table; margin: 0; }
    .ceo-life__slogan-line + .ceo-life__slogan-line { margin-top: 4px; }
    /* the stories cannot all sit on the picture at this width : they stack
       above it inside the same dark plate, the slogan below */
    .ceo-life__panel { display: flex; flex-direction: column; }
    .ceo-life__stories { position: static; order: 1; grid-template-columns: 1fr; gap: 12px; padding: 18px 18px 0; }
    /* stacked above the photo there is nothing to lead to : plain boxes */
    .ceo-story { padding: 18px 16px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 14px; }
    .ceo-story::after { display: none; }
    .ceo-life__photo { order: 2; margin-top: 18px; }
    .ceo-city { padding: 30px 0; margin-bottom: 30px; }
    .ceo-city__wheel { margin-top: 10px; }
    .inner-page main .ceo-life__slogan { order: 3; }
    .ceo-didi__lifeline { padding: 20px; }
    .inner-page main .ceo-didi__tagline { font-size: 30px; line-height: 38px; }
    .inner-page main .ceo-didi__lifeline-title { font-size: 20px; line-height: 28px; }
}
@media (max-width: 575px) {
    /* the photograph sits over the copy once the block is this narrow */
    .ceo-reimagined__card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
    .ceo-reimagined__card img,
    .ceo-reimagined__card .ceo-sdg { max-width: 220px; }
}
@media (max-width: 480px) {
    .ceo-progress__grid { grid-template-columns: 1fr; }
}
/*-----------CEO desk spreads Responsive Css End-------------*/

/*-----------Full-height banners under the fixed header Responsive Css Start-------------*/
/* the page keeps a top offset for the fixed header, so a 100vh banner ran
   that far past the fold : it is sized to the viewport less that offset, so
   the whole banner sits in one screen */
@media (max-width: 991px) {
    .page-banner--socio,
    .page-banner--social,
    .page-banner--sustainability,
    .page-banner--horizons {
        height: calc(100vh - 64px);
        height: calc(100svh - 64px);
    }
}
@media (max-width: 767px) {
    .page-banner--socio,
    .page-banner--social,
    .page-banner--sustainability,
    .page-banner--horizons {
        height: calc(100vh - 60px);
        height: calc(100svh - 60px);
        margin-bottom: 30px;
    }
}
/*-----------Full-height banners under the fixed header Responsive Css End-------------*/

/*-----------Board director date notes Responsive Css Start-------------*/
/* the appointed / ceased date note wraps onto its own line under the role on
   phones, so the role title reads cleanly and the note sits beneath it */
@media (max-width: 767px) {
    .board-director__note {
        display: block;
        margin-top: 4px;
    }
}
/*-----------Board director date notes Responsive Css End-------------*/

/*-----------Banner content row phone padding Responsive Css Start-------------*/
/* on phones the banner content row keeps its 60px top padding only on the four
   full-height photo banners (socio, social, sustainability, horizons); every
   other page banner sits flush under its breadcrumb */
@media (max-width: 767px) {
    .page-banner:not(.page-banner--socio):not(.page-banner--social):not(.page-banner--sustainability):not(.page-banner--horizons) .page-banner__content-row {
        padding-top: 0;
    }
}
/*-----------Banner content row phone padding Responsive Css End-------------*/

/*-----------CEO planning principle cards phone height Responsive Css Start-------------*/
/* one card to a line on phones, so the equal-depth rows only pad the shorter
   cards with empty space : each card takes its own height and the 15px grid
   gap alone spaces them evenly */
@media (max-width: 767px) {
    .inner-page main .ceo-principles .row.row--cards {
        grid-auto-rows: auto;
    }
    .ceo-principle {
        height: auto;
    }
}
/*-----------CEO planning principle cards phone height Responsive Css End-------------*/

/*-----------Year of Progress photo order on phones Responsive Css Start-------------*/
/* the photograph and the figures stack as plain blocks here : the section is
   a column so the photograph can move after the figures */
@media (max-width: 767px) {
    .tp-sec { display: flex; flex-direction: column; }
    .tp-content { order: 1; }
    .tp-bg { order: 2; }
}
/*-----------Year of Progress photo order on phones Responsive Css End-------------*/

/*-----------Socio-Economic phone order Responsive Css Start-------------*/
/* on phones each stage reads still first, then its copy : the Socio-Economic
   band is the title and its Read More, the Dharavi Speaks stage the heading,
   intro, cards and Read More */
@media (max-width: 767px) {
    .se-img1, .sv-img { order: 1; }
    .se-foot, .sv-content { order: 2; }
    .sv-btn { margin-top: 24px; }
}
/*-----------Socio-Economic phone order Responsive Css End-------------*/

/*-----------What Dharavi is Saying close line on tablets and phones Responsive Css Start-------------*/
/* the cards take their own height here, so there is no empty ground to pull
   the closing line up into */
@media (max-width: 991px) {
    .wd-close { margin-top: 30px; }
}
/*-----------What Dharavi is Saying close line on tablets and phones Responsive Css End-------------*/

/*-----------Hero headline centred on phones Responsive Css Start-------------*/
/* the boy sits in the upper part of the portrait photograph, so a headline
   pushed to the top landed across his face : it is centred in the frame
   instead, where it falls on the water between him and his reflection */
@media (max-width: 767px) {
    .hero__content {
        justify-content: center;
        padding-top: 0;
    }
}
/*-----------Hero headline centred on phones Responsive Css End-------------*/

/*-----------Towards New Horizons banner layer on phones Responsive Css Start-------------*/
/* one photograph strip on a phone : the banner layer is dropped */
@media (max-width: 767px) {
    .th-bg--banner { display: none; }
}
/*-----------Towards New Horizons banner layer on phones Responsive Css End-------------*/

/*-----------Towards New Horizons phone stack Responsive Css Start-------------*/
/* nothing pins here : the section is a column that reads banner photograph,
   section title, the What Tomorrow Holds photograph, then its copy with the
   promise boxes and Read More. Both stills are plain
   strips and the title sits on the lilac ground in purple */
@media (max-width: 767px) {
    .th-sec { display: flex; flex-direction: column; background: #f4eef7; }
    .th-bg,
    .th-bg--banner,
    .th--static .th-bg--banner { display: block; position: static; width: 100%; height: 210px; opacity: 1; }
    .th-bg--banner { order: 1; }
    .th-title, .th--static .th-title {
        display: block; position: static; order: 2; opacity: 1; transform: none;
        padding: 36px 24px 28px; font-size: 28px; line-height: 36px; color: var(--purple);
    }
    .th-content { order: 4; padding: 36px 0px 45px; }
    /* the banner strip shares the .th-bg class, so the second still is picked
       out with :not(), or this rule would send the banner to the foot too */
    .th-bg:not(.th-bg--banner) { order: 3; }
    .th-btn { margin-top: 24px; }
}
/*-----------Towards New Horizons phone stack Responsive Css End-------------*/

/*-----------Leader table phone fit Css Start-------------*/
/* the table has no scroll box : on a phone the type and cell padding come
   down so the four columns share the screen width and the words wrap */
@media (max-width: 767px) {
    .leader-table table { font-size: 13px; line-height: 19px; }
    .leader-table th,
    .leader-table td { padding: 10px 8px; }
}
@media (max-width: 420px) {
    .leader-table table { font-size: 12px; line-height: 17px; }
    .leader-table th,
    .leader-table td { padding: 8px 6px; }
}
/*-----------Leader table phone fit Css End-------------*/

/*-----------Social learning tabs phone Css Start-------------*/
/* on a phone the tabs wrap and share the row again, rather than holding
   the desktop's set width */
@media (max-width: 767px) {
    .social-learning li { flex: 1 1 90px; }
}
/*-----------Social learning tabs phone Css End-------------*/

/*-----------Social Mission section headings Responsive Css Start-------------*/
@media (max-width: 767px) {
    #community-title,
    #aspiration-title,
    #social-trust-title,
    #social-sports-title { font-size: 20px; }
}
/*-----------Social Mission section headings Responsive Css End-------------*/

/*-----------CEO transformation locality plates Responsive Css Start-------------*/
/* the plates are sized from the pictures themselves, so they scale on their
   own down to here : only the seams and the spacing between them tighten */
@media (max-width: 991px) {
    .ceo-locality-row { gap: 14px; }
}
@media (max-width: 767px) {
    .ceo-locality-row { gap: 12px; margin-top: 12px; }
    .ceo-locality__grid { gap: 2px; }
    .ceo-locality > figcaption { left: 8px; bottom: 8px; padding: 2px 10px; font-size: 12px; }
}
/*-----------CEO transformation locality plates Responsive Css End-------------*/

/*-----------Social Mission women card open edge Responsive Css Start-------------*/
/* the columns are col-lg-6, so they stack from here down : with no
   photograph to its right the card has nothing to read into, and it closes */
@media (max-width: 991px) {
    .social-programme {
        border-right: 7px solid transparent;
        border-radius: 30px;
    }
}
/*-----------Social Mission women card open edge Responsive Css End-------------*/

/*-----------Social Mission livelihood stats plate Responsive Css Start-------------*/
/* two to a line, then one : the rule follows the wrap, so it always falls
   between neighbours and never along an outside edge */
@media (max-width: 991px) {
    .social-livelihood-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 6px; }
    .social-livelihood-stat + .social-livelihood-stat { border-left: 0; }
    .social-livelihood-stat:nth-child(even) { border-left: 1px solid rgba(142, 39, 143, 0.22); }
    .social-livelihood-stat:nth-child(n+3) { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(142, 39, 143, 0.22); }
}
@media (max-width: 575px) {
    .social-livelihood-plate { grid-template-columns: minmax(0, 1fr); padding: 18px 6px; }
    .social-livelihood-stat:nth-child(even) { border-left: 0; }
    .social-livelihood-stat:nth-child(n+2) { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(142, 39, 143, 0.22); }
}
/*-----------Social Mission livelihood stats plate Responsive Css End-------------*/

/*-----------Social Mission community cards Responsive Css Start-------------*/
/* four across, then two, then one : the cards keep their own plate at every
   width, only the run gets shorter */
@media (max-width: 1199px) {
    .social-benefits { gap: 16px; }
}
@media (max-width: 991px) {
    .social-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .social-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .social-community__closing { padding-top: 20px; }
}
/*-----------Social Mission community cards Responsive Css End-------------*/