:root {
    --purple: #8e278f;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Noto Sans', sans-serif;
    color: #000000;
    font-weight: 400;
}
h1,
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none !important;
    font-size: 16px;
}

a:hover {
    text-decoration: none !important;
}

p {
    font-size: 16px;
    line-height: 24px;
    font-family: 'Noto Sans', sans-serif;
    color: #000000;
    font-weight: 400;
}

.my-sidenav {
    display: none;
}

/*-----------Header Css Start-------------*/
header {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    padding: 10px 0px 12px;
    /* fixed from the outset, not switched over from absolute at 50px : while
       absolute the bar scrolled away with the hero, and the switch snapped it
       back to the top of the viewport - that snap is the flicker on the first
       scroll off the banner */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: transform 0.35s ease;
    will-change: transform;
}
/* app.js adds .is-hidden while the page is moving down. The transition is on
   transform only, so the browser runs it on the compositor and it stays smooth
   even while a pinned section is scrubbing alongside. */
header.is-hidden {
    transform: translateY(-100%);
}
header .row {
    align-items: center;
}
.logo-wrap {
    display: flex;
    align-items: center;
}
.logo {
    flex-shrink: 0;
}
/* the logo svg carries only a viewBox, so it collapses to 0 inside a flex item
   unless an explicit size is set here */
.logo img {
    width: auto;
    height: 50px;
}
.headertxt {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid var(--purple);
}
.headertxt p {
    font-size: 16px;
}
.headertxt p span {
    color: var(--purple);
}
.right-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.download-btn a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--purple);
    border: 1px solid var(--purple);
    padding: 7px 18px;
    color: #ffffff;
    font-size: 14px;
    border-radius: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.download-btn a:hover {
    background-color: #6d1e6f;
    border-color: #6d1e6f;
    color: #ffffff;
}
.download-btn .dl-arrow {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.menudownload {
    border: 1px solid var(--purple);
    padding: 7px 18px;
    border-radius: 10px;
}
.ham-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--purple);
    font-size: 14px;
}
.ham-icon .bars {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--purple);
    transition: background 0.3s ease;
}
.ham-icon .bars::before,
.ham-icon .bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--purple);
    transition: transform 0.3s ease, top 0.3s ease;
}
.ham-icon .bars::before { top: -6px; }
.ham-icon .bars::after  { top: 6px; }

/* open state: hamburger -> cross, for when the menu is built */
header.menu-open .ham-icon .bars { background: transparent; }
header.menu-open .ham-icon .bars::before { top: 0; transform: rotate(45deg); }
header.menu-open .ham-icon .bars::after  { top: 0; transform: rotate(-45deg); }
/*-----------Header Css End-------------*/


/*-----------Hero Banner Css Start-------------*/
.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: #1a1a1a;
}
/* svh, not dvh. dvh tracks the viewport live, so the height changes as the
   mobile browser chrome hides and shows - and the hero is pinned here now,
   which would make the pin-spacer jump mid-scroll. svh is the stable one. */
@media (max-width: 900px) {
    .hero { height: 100svh; }
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* the first frame the canvas draws is blank, so a plain plate sits behind it
   until app.js has uploaded both textures and added .hero-loaded */
.hero__fallback {
    position: absolute;
    inset: 0;
    background: url("../images/banner-img.webp") no-repeat center bottom / cover;
    transition: opacity 0.4s ease;
}
.hero-loaded .hero__fallback {
    opacity: 0;
}

/* the photograph is busy behind the headline, so the copy gets a darker ground
   to sit on. The wash is close to even now that the headline is centred - it
   used to lighten through the middle, which is exactly where the copy landed */
/* .hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.58) 100%);
    pointer-events: none;
} */

.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__headline {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(40px, 5.6vw, 62px);
    line-height: 1.14;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

/* each line is its own mask : the word inside slides up into view. The block
   padding widens the clip box so the plate on line 2 is not shaved off, and
   the matching negative margin keeps the lines set tight */
.hero__line {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0.12em 0;
    margin: -0.12em 0;
}
.hero__line .word {
    display: inline-block;
    transform: translateY(140%);
    will-change: transform;
}

/* the highlighted word sits on a purple plate */
.hero__line .hl {
    display: inline-block;
    background: var(--purple);
    color: #ffffff;
    padding: 0.02em 0.16em 0.1em;
    border-radius: 14px;
}

/* scroll hint */
.hero__scrolldown {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0;
}
.hero__scrolldown-line {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.32);
    position: relative;
    overflow: hidden;
}
.hero__scrolldown-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--purple);
    animation: heroScrolldown 2.2s ease-in-out infinite;
}
@keyframes heroScrolldown {
    0%   { top: -100%; }
    60%  { top: 100%; }
    100% { top: 100%; }
}

/* if the animation never runs the words would stay parked below their mask */
.hero--static .hero__line .word {
    transform: none;
}
/*-----------Hero Banner Css End-------------*/


/*-----------A Year of Transformative Progress Css Start-------------*/
/* not .progress : bootstrap already owns that class for its progress bars */
.tp-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
}
/* placeholder ground : the gradient shows through until the photograph is
   dropped in */
.tp-bg {
    position: absolute;
    inset: 0;
    background-color: #3f3f46;
    background-image: url("../images/home/a-year-of-transformative-progress-img.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* .tp-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(142, 39, 143, 0.35) 0%, rgba(20, 20, 24, 0.55) 100%);
} */

/* the frosted sheet. app.js opens the clip from the bottom edge upwards, so
   the glass appears to rise over the photograph */
.tp-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* a thin wash and a soft blur only, so the photograph stays clearly
       visible through the sheet while the copy keeps enough ground to read */
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    clip-path: inset(100% 0% 0% 0%);
    will-change: clip-path;
}
/* without backdrop-filter the sheet would be a flat tint over a sharp photo,
   so it leans opaque instead and the copy keeps its contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tp-glass {
        background: rgba(255, 255, 255, 0.93);
    }
}

.tp-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* the copy sits on its own soft plate, so it reads while the photograph
   stays clear around it rather than washed out under it */
.tp-content > .container {
    padding: 44px 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.tp-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    margin-bottom: 55px;
    opacity: 0;
    transform: translateY(26px);
}

.tp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px 34px;
}
.tp-stat {
    opacity: 0;
    transform: translateY(26px);
}
.tp-stat h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    line-height: 40px;
    color: var(--purple);
    margin-bottom: 10px;
    font-weight: 700;
}
.tp-stat p {
    font-size: 15px;
    line-height: 22px;
}
.tp-stat p strong {
    color: var(--purple);
}

/* if the scroll animation never runs, the sheet and the copy stay put */
.tp--static .tp-glass {
    clip-path: inset(0% 0% 0% 0%);
}
.tp--static .tp-heading,
.tp--static .tp-stat {
    opacity: 1;
    transform: none;
}
/*-----------A Year of Transformative Progress Css End-------------*/


/*-----------The Transformation has Begun Css Start-------------*/
.tb-sec {
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    background: #e8ebec;
    overflow: hidden;
}
/* the container is a flex item here, so it no longer takes its own width */
.tb-sec > .container {
    width: 100%;
}
/* copy left, photography right. This is a flex pair rather than a bootstrap
   row because .tb-media has to break out of the container to reach the page
   edge, and a percentage margin only resolves against the container width if
   the element is a direct child of a container-width box */
.tb-wrap {
    display: flex;
    align-items: center;
    gap: 60px;
}
.tb-intro {
    flex: 0 0 50%;
    max-width: 50%;
}
.tb-media {
    flex: 1 1 auto;
    min-width: 0;
    /* run past the container and stop on the right edge of the page */
    margin-right: calc(-50vw + 50%);
}

.tb-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    margin-bottom: 34px;
}

.tb-statement {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    line-height: 40px;
}
.tb-line {
    display: block;
}
.tb-line + .tb-line {
    margin-top: 6px;
}

/* Each line starts as purple words on nothing. The ::after carries the same
   copy in white on a purple plate, clipped to --fill, and app.js grows that
   from 0% to 100% on scroll : the plate sweeps across and the words under it
   turn white as it passes. A pseudo-element cannot be tweened directly, which
   is why the width rides on a custom property set on the parent. */
.tb-mark {
    --fill: 0%;
    position: relative;
    display: inline-block;
    padding: 0.06em 0.24em 0.14em;
    color: var(--purple);
    white-space: nowrap;
}
/* the middle line takes no plate and no sweep : purple words throughout */
.tb-plain {
    display: inline-block;
    padding: 0.06em 0.24em 0.14em;
    color: var(--purple);
}
.tb-mark::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fill);
    padding: 0.06em 0.24em 0.14em;
    background: var(--purple);
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    will-change: width;
}

/* ---- right side: the site photography ---- */
.tb-slide {
    position: relative;
}
.tb-shot {
    height: 450px;
    border-radius: 4px;
    background-color: #d9d7de;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* the caption chip sits on the foot of the shot, the way the printed page
   tucks it under the bottom-left corner */
.tb-cap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #000000;
    font-size: 14px;
    padding: 6px 16px 6px 12px;
}
.tb-cap::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--purple);
}

/* stagePadding is symmetric in owl : it pads both ends of the stage and a
   sliver of the previous slide shows on the left. Owl writes that padding
   inline on .owl-stage, so zeroing the left side here drops the whole stage
   flush against the left edge and leaves the peek on the right only */
.tb-slider .owl-stage {
    padding-left: 0px !important;
}

.tb-slider .owl-dots {
    margin-top: 22px;
    text-align: center;
}
.tb-slider .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0px 5px;
    background: #c9c6d0;
    border-radius: 50%;
    display: block;
}
.tb-slider .owl-dots .owl-dot.active span,
.tb-slider .owl-dots .owl-dot:hover span {
    background: var(--purple);
}

/* if the scroll animation never runs, the plates are simply filled */
.tb--static .tb-mark {
    --fill: 100%;
}
/*-----------The Transformation has Begun Css End-------------*/




/*-----------Message from the Chairman Css Start-------------*/
/* laid out the way the metro report sets its Chairman's Message : a full-bleed
   ground, the portrait running wide on the left, the copy in the narrow column
   on the right, and a tinted panel offset behind the pair */
.cm-sec {
    padding: 50px 0px;
    /* height: 100vh; */
    /* min-height: 620px; */
    background-color: #ffffff;
    background-image: url("../images/chairman-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.row.cm-bg {
    position: relative;
}
.cm-bg::after {
    position: absolute;
    background-color:#eae2f050;
    content: "";
    max-width: 1015px;
    width: 100%;
    height: 400px;
    top: 140px;
    right: 0;
}
.cm-img {
    position: relative;
    z-index: 2;
}
/* Placeholder ground until the portrait is dropped in. metro sets its portrait
   as an img-fluid, so it scales with the column at its own aspect rather than
   standing at a fixed height : the ratio here does the same for the plate. */
.cm-shot {
    aspect-ratio: 632 / 445;
    background-color: #dcdae0;
    background-image: url("../images/home/chairman-img.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.cm-content {
    position: relative;
    z-index: 3;
}
.cm-eyebrow {
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #4d4d4f;
    padding-top: 60px;
    font-weight: 700;
}
.cm-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    padding-top: 14px;
    padding-bottom: 30px;
}
/* the mark is an svg file now : its viewBox is 20.37 x 8.86, a far wider
   shape than the inline one it replaces, so the height follows the width
   rather than being set */
.cm-quote img {
    display: block;
    width: 38px;
    height: auto;
}
/* the closing mark is the same shape turned over */
.cm-quote--close img {
    transform: rotate(180deg);
}
.cm-quote--close {
    margin-bottom: 28px;
}

/* metro's Read More pill : outlined, with the arrow riding in a filled disc on
   the right end, and the fill and the disc swapping over on hover */
.cm-btn a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--purple);
    border-radius: 100px;
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
    line-height: 22px;
    padding: 5px 5px 5px 22px;
    transition: all .3s ease-in-out;
}
.cm-btn a:hover {
    background-color: var(--purple);
    color: #ffffff;
}
.cm-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--purple);
    transition: background .3s ease-in-out;
}
.cm-arrow svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s ease-in-out;
}
.cm-btn a:hover .cm-arrow {
    background: #ffffff;
}
.cm-btn a:hover .cm-arrow svg {
    stroke: var(--purple);
}

/* the pull quote is set in the brand purple and bold, as the spread has it */
.cm-content p {
    color: var(--purple);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    /* max-width: 460px; */
    padding-top: 10px;
    padding-bottom:10px;
}
/*-----------Message from the Chairman Css End-------------*/

/*-----------Message from Director Css Start-------------*/
/* the same build as the chairman's message, reversed : the copy takes the left
   column and the portrait the right, so the offset panel mirrors with them */
.cm-sec--rev {
    background-image: url("../images/director-bg.jpg");
}
.cm-sec--rev .cm-bg::after {
    right: auto;
    left: 0;
}
.cm-shot--dir {
    background-image: url("../images/home/director-img.webp");
}
#director-message
{
    background-color:#fafafa;
    /* margin-top: 50px; */
}
.cm-sec--rev .cm-content
{
    padding-left: 40px;
}
/*-----------Message from Director Css End-------------*/


/*-----------From the Desk of the CEO Css Start-------------*/
/* the chairman's build unchanged : only the two placeholder plates differ */
.cm-sec--ceo {
    background-image: url("../images/ceo-bg.jpg");
}
.cm-shot--ceo {
    background-image: url("../images/home/ceo-img.webp");
}
/*-----------From the Desk of the CEO Css End-------------*/


/*-----------Board of Directors / Management Committee Css Start-------------*/
.bd-sec {
    position: relative;
    padding: 50px 0px;
    overflow: hidden;
}
/* a dark band runs across the top of the section and the cards ride out of the
   bottom of it, so the portraits sit on dark and the names on white */
.bd-sec::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 370px;
    background-color:#8e278f;
    z-index: 0;
}
.bd-sec > .container {
    position: relative;
    z-index: 1;
}

/* the phone dropdown control : see responsive.css */
.bd-select {
    display: none;
}

/* the two labels are pill buttons sitting on the purple band, centred. The
   selected one inverts to a white pill : an underline in the brand purple
   would be invisible now that the band itself carries that colour */
.bd-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    border: none;
    padding: 0px;
    margin: 0px 0px 45px;
    list-style: none;
}
.bd-tab {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 100px;
    padding: 11px 34px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.bd-tab:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
}
.bd-tab.active {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--purple);
}

/* the slider starts on the container's left edge and runs off the right one */
.bd-media {
    margin-right: calc(-50vw + 50%);
}

/* The card is a white plate, so it reads against the band it overlaps. Fixed
   height, not auto : the names and roles run to different line counts - one
   line for "Director", three for the nominee directors' dates - and the plates
   would otherwise finish at ragged heights across the row. */
.bd-card {
    min-height: 326px;
    background: #ffffff;
    border: 1px solid #e3e0e6;
    border-radius: 8px;
    overflow: hidden;
}
/* The whole square portrait at a fixed height, so the section fits one screen.
   The card is wider than the portrait : the ground matches the grey the
   portraits are shot on, so the side bands read as one backdrop. */
.bd-shot {
    height: 345px;
    background-color: #eeefef;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
.bd-text {
    padding: 18px 17px 22px;
}
.bd-text h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}
.bd-text p {
    font-size: 15px;
    line-height: 22px;
    color: #000;
}

/* the company secretary sits on a tinted bar under the board, as on the page */
.bd-note {
    display: inline-block;
    background: #f4eef7;
    border-radius: 8px;
    padding: 16px 26px;
    margin-top: 20px;
    font-size: 15px;
    line-height: 22px;
    color: #4d4d4f;
}
.bd-note strong {
    color: #000000;
}

/* owl pads both ends of the stage : zero the left so the first card sits on
   the container edge and the peek falls on the right */
.bd-slider .owl-stage {
    padding-left: 0px !important;
}
.bd-slider.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 20px;
    text-align: left;
}
/* round dots, the same as the other sliders on the page */
.bd-slider.owl-theme .owl-dots .owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0px 5px;
    border-radius: 50%;
    background: #d9d5dd;
}
.bd-slider.owl-theme .owl-dots .owl-dot.active span,
.bd-slider.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--purple);
}
/*-----------Board of Directors / Management Committee Css End-------------*/


/*-----------Socio-Economic Impact on Mumbai Css Start-------------*/
.se-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #ffffff;
}
.se-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* both photographs are cover plates. The first opens from the oval below out
   to the full frame; app.js drives the width, height and corner together */
.se-img {
    position: absolute;
    background-color: #d9d7de;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.se-img1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 410px;
    border-radius: 20%;
    background-image: url("../images/home/socio-economic-impact-on-mumbai-banner.webp");
    z-index: 1;
}
/* the second rides up from below the fold, so it starts fully out of frame */
.se-img2 {
    inset: 0;
    transform: translateY(100%);
    background-image: url("../images/home/when-dharavi-speaks-mumbai-listens-img.webp");
    z-index: 2;
}

.se-title {
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 0px 24px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: #ffffff;
    opacity: 0;
}

/* the frosted sheet that settles over the second photograph */
.se-glass {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(244, 238, 247, 0.82);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    opacity: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .se-glass {
        background: rgba(244, 238, 247, 0.96);
    }
}

.se-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    opacity: 0;
}
.se-content > .container {
    width: 100%;
}
.se-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    margin-bottom: 18px;
    text-align: center;
}
.se-intro {
    max-width: 720px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    margin: 0px auto 45px;
}

/* the cards sit in two banded rows, divided by rules, as on the printed page */
.se-grid {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    padding: 10px 0px;
}
.se-row {
    display: grid;
}
.se-row--3 {
    grid-template-columns: repeat(3, 1fr);
}
.se-row--2 {
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #d8cfdd;
}
.se-card {
    padding: 26px 28px;
    text-align: center;
}
.se-card + .se-card {
    border-left: 1px solid #d8cfdd;
}
.se-card h4 {
    font-size: 20px;
    line-height: 28px;
    color: var(--purple);
    margin: 2px 0px 4px;
    font-weight: 700;
}
.se-card p {
    font-size: 16px;
    line-height: 22px;
}

/* if the sequence never runs, the finished frame is what shows */
.se--static .se-img1 {
    width: 100%;
    height: 100%;
    border-radius: 0px;
}
.se--static .se-img2 {
    transform: none;
}
.se--static .se-title {
    opacity: 0;
}
.se--static .se-glass,
.se--static .se-content {
    opacity: 1;
}
/*-----------Socio-Economic Impact on Mumbai Css End-------------*/




/*-----------What Dharavi is Saying Css Start-------------*/
/* No overflow: hidden here. An ancestor with it becomes the scroll container
   for position: sticky, and since that box never scrolls the stage below would
   never stick. overflow-x: clip contains any bleed without that side effect. */
.wd-sec {
    padding: 50px 0px;
    background: #ffffff;
    overflow-x: clip;
}

/* ---- the opening lockup, centred ---- */
.wd-intro {
    text-align: center;
    margin-bottom: 20px;
}
.wd-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    margin-bottom: 16px;
}
.wd-sub {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 40px;
}
.wd-lockup {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 1.24;
    text-transform: uppercase;
}
.wd-line {
    display: block;
}
/* the plates are padded inline-blocks taller than the line-height, so without
   this the one on the second line runs straight into the one above it */
.wd-line + .wd-line {
    margin-top: 0.16em;
}
/* the two closing words sit on purple plates, as on the printed page */
.wd-lockup .hl {
    display: inline-block;
    background: var(--purple);
    color: #ffffff;
    padding: 0.02em 0.16em 0.1em;
    border-radius: 12px;
}

/* ---- the three films ----
   Built the way the canopy block is: a twelve column grid running the width of
   the page, caption left, still in the middle, write-up right. The still is one
   sticky layer that holds the middle column while the copy scrolls past it, and
   each film wipes in over the one before. */
.wd-cards {
    position: relative;
}
/* A sticky box travels (container height - its own height): 100vh tall in a
   300vh block gives 200vh, which is deliberate. The first two cards' copy
   passes right over the still, and the third comes to rest level with the
   middle of it - from there the two travel out together, so the last card's
   copy never rides up above the picture. */
/* Sticky is constrained by the MARGIN box, not the border box. A
   margin-bottom of -100vh here collapsed that margin box to zero height, which
   handed the stage the block's entire run - it stayed put straight through the
   third card and on over the closing line. So the stage keeps its full box and
   the first card is pulled up over it instead: the margin box is a real 100vh
   in a 300vh block, giving exactly 200vh of travel. */
.wd-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}
.wd-stage + .wd-card {
    margin-top: -100vh;
}
.wd-stage-inner,
.wd-card {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0px 30px;
    align-items: center;
    max-width: 1720px;
    margin: 0px auto;
    padding: 0px 60px;
}
.wd-stage-inner {
    height: 100%;
}
.wd-card {
    position: relative;
    z-index: 2;
    height: 100vh;
    min-height: 640px;
}

.wd-shots {
    grid-column: 5 / span 4;
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 520px;
    max-height: 76vh;
    margin: 0px auto;
    width: 100%;
}
/* placeholder ground until the stills are dropped in */
.wd-shot {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    overflow: hidden;
    background-color: #d9d7de;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* The first is simply there; the other two are parked below the frame on the
   diagonal app.js sweeps upward - this is that sweep at its starting point, so
   nothing flashes before the script takes over. */
.wd-shot + .wd-shot {
    clip-path: polygon(0% 125%, 100% 110%, 100% 100%, 0% 100%);
}

/* the desktop stage carries the stills, so the inline plate is for small
   screens only - see responsive.css */
.wd-media-inline {
    display: none;
}

.wd-left {
    grid-column: 1 / span 4;
    /* text-align: right; */
}
/* starts at 9, not canopy's 10 : leaving column 9 empty opened too wide a
   channel between the still and the write-up */
.wd-right {
    grid-column: 9 / span 4;
}

/* the line that runs across the still on the page is set beside it here */
.wd-overlay {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
}
.wd-tag {
    font-size: 14px;
    line-height: 22px;
    color: #4d4d4f;
}

.wd-right h3 {
    font-size: 22px;
    line-height: 30px;
    color: var(--purple);
    margin-bottom: 10px;
    font-weight: 700;
}
.wd-theme {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
}
.wd-body {
    font-size: 15px;
    line-height: 24px;
}
.wd-scan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
/* the QR code for the film, painted onto its own square */
.wd-qr {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border: 1px solid #e3e0e6;
}
.wd-scan p {
    font-size: 13px;
    line-height: 19px;
    color: #4d4d4f;
}

.wd-close {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 50px;
    margin-top:0px;
}
.wd-close span {
    color: var(--purple);
}
/*-----------What Dharavi is Saying Css End-------------*/


/*-----------Dharavi Social Mission Css Start-------------*/
/* a full-bleed half-and-half : the copy sits on a tinted panel, the portrait
   on a purple one, each running to its own edge of the page */
.ds-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.ds-copy {
    display: flex;
    align-items: center;
    background: #f4eef7;
    padding: 90px 50px;
}
/* centred in its half, so the copy lands about where the container edge does */
.ds-copy-inner {
    max-width: 520px;
    margin: 0px auto;
    width: 100%;
}
.ds-eyebrow {
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #4d4d4f;
    margin-bottom: 14px;
    font-weight: 700;
}
.ds-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--purple);
    margin-bottom: 22px;
}
.ds-copy-inner p {
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 34px;
}

/* a solid pill, the arrow riding in its own disc at the right end */
.ds-btn a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--purple);
    border: 1px solid var(--purple);
    border-radius: 100px;
    color: #ffffff;
    font-size: 15px;
    line-height: 22px;
    padding: 8px 8px 8px 26px;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.ds-btn a:hover {
    background: #6d1e6f;
    border-color: #6d1e6f;
    color: #ffffff;
}
.ds-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
}
.ds-arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--purple);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-media {
    position: relative;
    background: var(--purple);
    min-height: 420px;
}
/* placeholder ground until the photograph is dropped in */
.ds-shot {
    position: absolute;
    inset: 0;
    background-image: url("../images/home/dharvi-social-mission-img.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
/*-----------Dharavi Social Mission Css End-------------*/


/*-----------Best-in-Class Sustainability Focus Css Start-------------*/
.su-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
/* placeholder ground until the photograph is dropped in */
.su-bg {
    position: absolute;
    inset: 0;
    background-color: #3f3f46;
    background-image: url("../images/home/best-in-class-sustainability-focus-img.webp");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}
/* the copy sits straight on the photograph, so it needs a ground to read on */
.su-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}
.su-content {
    position: relative;
    z-index: 2;
    height:100vh;
    display: flex;
    align-items:flex-start;
    text-align: center;
    padding-top: 120px;
}
.su-content > .container {
    width: 100%;
}
.su-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: #ffffff;
    margin-bottom: 22px;
}
.su-content p {
    max-width: 760px;
    margin: 0px auto;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}
/*-----------Best-in-Class Sustainability Focus Css End-------------*/


/*-----------ESG Css Start-------------*/
.esg-sec {
    padding: 60px 0px 60px;
    background: #ffffff;
}

/* Each pillar carries its own colour, set once here and read from --esg by
   both the tab and the panel it opens. */
.esg-tab--env, .esg-panel--env { --esg: #5cba47; }
.esg-tab--soc, .esg-panel--soc { --esg: #cc8b2a; }
.esg-tab--gov, .esg-panel--gov { --esg: #ee4f38; }

/* the tabs form a strip sitting directly on the panel : the selected one fills
   with its pillar colour and reads as the top edge of the panel below it */
.esg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    border: none;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.esg-tab {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    line-height: 26px;
    color: #1c1c1e;
    background: transparent;
    border: none;
    border-radius: 0px;
    padding: 15px 30px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.esg-tab:hover {
    color: var(--esg);
}
.esg-tab.active {
    background: var(--esg);
    color: #ffffff;
}
/* the panel wears the same colour as the tab that opened it, and squares off
   at the top so the two read as one block */
.esg-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 45px;
    background: var(--esg);
    border-radius:0px;
    padding: 50px;
}
.esg-copy h3 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: #ffffff;
    margin-bottom: 16px;
}
/* the panel is purple, so the copy on it is set white */
.esg-copy .esg-intro {
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 34px;
}

/* two by two : four across would leave the longer labels unreadably narrow in
   half a panel, which is the width this column has */
.esg-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 26px;
}
.esg-stat {
    text-align: center;
    position: relative;
}
/* the divider between the columns, as the printed strip has it */
.esg-stat:nth-child(even)::before {
    content: "";
    position: absolute;
    left: -13px;
    /* centred on the item rather than running the full cell : the cells are
       uneven once a longer value wraps, and a full-height rule made the line
       sit off-centre against the icon beside it */
    top: 50%;
    transform: translateY(-50%);
    height: 78%;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}
/* the ring is the ground; each icon comes in as a background-image on the
   element, so a pillar without artwork yet still shows the ring */
.esg-icon {
    display: block;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center center;
    /* auto side margins so the ring centres over the value below it */
    margin: 0px auto 14px;
}
/* one size and weight for the value under every icon, across all three tabs :
   bootstrap's own h4 rule would otherwise leave these at weight 500 */
.esg-stat h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
}

/* placeholder ground until the photographs are dropped in */
.esg-shot {
    /* a set height, not 100% of the row : the copy column runs to a different
       length in each tab, so a stretched still came out a different size on
       every one of them */
    height: 460px;
    border-radius: 16px;
    background-color: #d9d7de;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/*-----------ESG Css End-------------*/


/*-----------Winning Accolades Css Start-------------*/
.wa-sec {
    padding: 60px 0px 60px;
    background: linear-gradient(to top, #b78bbe 0%, #6f5375 100%);
    overflow: hidden;
}
.wa-head {
    text-align: center;
    max-width: 800px;
    margin: 0px auto 50px;
}
.wa-heading {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    /* the ground is deep purple at the top of the section now */
    color: #ffffff;
    margin-bottom: 16px;
}
.wa-head p {
    color: #ffffff;
    font-size: 18px;
    line-height: 28px;
}

.wa-card {
    /* a flex column so the gaps between the shot, the name, the chip and the
       category are real box gaps : the chip is an inline-block, and its line
       box was adding leading that made the middle of the card sit unevenly */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e3e0e6;
    border-radius: 10px;
    padding: 22px 22px 26px;
    height: 100%;
}
/* placeholder ground until the trophy shots are dropped in */
.wa-shot {
    flex-shrink: 0;
    width: 100%;
    height: 220px;
    border-radius: 6px;
    background-color: #efeef1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.wa-card h4 {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--purple);
}
/* the medal chip, the way the page badges each award */
.wa-medal {
    display: inline-block;
    border-radius: 100px;
    padding: 3px 18px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    color: #4a3608;
}
.wa-medal--gold {
    background: linear-gradient(90deg, #e8c766 0%, #f3e0a1 50%, #d8ad3c 100%);
}
.wa-medal--silver {
    background: linear-gradient(90deg, #c3c6cb 0%, #eceef0 50%, #adb1b7 100%);
    color: #35383d;
}
.wa-medal--bronze {
    background: linear-gradient(90deg, #c88a4d 0%, #e3b183 50%, #ac6f34 100%);
    color: #3d2510;
}
.wa-card p {
    font-size: 15px;
    line-height: 23px;
}

/* the recognitions from the foot of the spread : report cover, the two LACP
   marks, then the copy - the arrangement the printed page uses */
.wa-recog {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 900px;
    margin: 50px auto 0px;
    background: #ffffff;
    border: 1px solid #e3e0e6;
    border-radius: 10px;
    padding: 28px 30px;
}
.wa-recog h5 {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
}
.wa-recog p + p {
    margin-top: 6px;
}

/* flex on the stage is what levels the cards to a common height. owl writes an
   explicit width onto every .owl-item inline, though, and a flex item defaults
   to flex-shrink: 1 - so the cards were shrinking off that width according to
   how much copy each held. flex: 0 0 auto makes them honour it again. */
.wa-slider .owl-stage {
    display: flex;
}
.wa-slider .owl-item {
    display: flex;
    flex: 0 0 auto;
}
.wa-slider .owl-item .wa-card {
    width: 100%;
}
.wa-slider .owl-dots {
    margin-top: 34px;
    text-align: center;
}
.wa-slider .owl-dots .owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0px 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
}
.wa-slider .owl-dots .owl-dot.active span,
.wa-slider .owl-dots .owl-dot:hover span {
    background: #ffffff;
}
/*-----------Winning Accolades Css End-------------*/

/* placeholder ground until the report cover is dropped in */
.wa-cover {
    flex-shrink: 0;
    width: 145px;
    aspect-ratio: 145 / 178;
    border-radius: 4px;
    background-color: #efeef1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.wa-lacp-set {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* placeholder ground for the two LACP marks */
.wa-lacp {
    display: block;
    width: 78px;
    height: 60px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.wa-recog-text {
    text-align: left;
}


/*-----------Slider Controls Css Start-------------*/
/* One row under every slider on the page: dots ranged left, arrows right.
   Owl renders .owl-nav and .owl-dots as siblings of the stage, so the carousel
   itself becomes the flex row - scoped to .owl-loaded, because owl keeps the
   carousel display:none until it has initialised. */
.tb-slider.owl-loaded,
.bd-slider.owl-loaded,
.wa-slider.owl-loaded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.tb-slider .owl-stage-outer,
.bd-slider .owl-stage-outer,
.wa-slider .owl-stage-outer {
    flex: 0 0 100%;
    max-width: 100%;
}
/* flex rather than the inline default : owl's dots are inline-blocks sitting on
   a 24px baseline, so each dot rode low in its own line box and read as sitting
   below the arrows even though the two boxes were centred against each other */
.tb-slider .owl-dots,
.bd-slider .owl-dots,
.wa-slider .owl-dots {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 30px;
}
.tb-slider .owl-nav,
.bd-slider .owl-nav,
.wa-slider .owl-nav {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

/* the arrows themselves : the chevron is drawn in, so no icon file is needed */
.tb-slider.owl-theme .owl-nav [class*="owl-"],
.bd-slider.owl-theme .owl-nav [class*="owl-"],
.wa-slider.owl-theme .owl-nav [class*="owl-"] {
    /* owl-theme sets its own margin, padding and grey fill on these */
    margin: 0px;
    padding: 0px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--purple);
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e278f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    transition: background-color 0.3s ease;
}
.tb-slider.owl-theme .owl-nav [class*="owl-"].owl-prev,
.bd-slider.owl-theme .owl-nav [class*="owl-"].owl-prev,
.wa-slider.owl-theme .owl-nav [class*="owl-"].owl-prev {
    transform: rotate(180deg);
}
.tb-slider.owl-theme .owl-nav [class*="owl-"]:hover,
.bd-slider.owl-theme .owl-nav [class*="owl-"]:hover,
.wa-slider.owl-theme .owl-nav [class*="owl-"]:hover {
    background-color: var(--purple);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* owl marks an end arrow disabled when the slider does not loop */
.tb-slider.owl-theme .owl-nav [class*="owl-"].disabled,
.bd-slider.owl-theme .owl-nav [class*="owl-"].disabled,
.wa-slider.owl-theme .owl-nav [class*="owl-"].disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* the accolades slider sits on the purple gradient, so its arrows go white */
.wa-slider.owl-theme .owl-nav [class*="owl-"] {
    border-color: rgba(255, 255, 255, 0.7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.wa-slider.owl-theme .owl-nav [class*="owl-"]:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/*-----------Slider Controls Css End-------------*/

/* The transformation and board sliders run off the right edge of the page, so
   their arrows sat outside the viewport. Pull the nav back in by the bleed -
   half the difference between the viewport and the bootstrap container - so the
   arrows finish on the container edge like the rest of the page. The value is
   stepped per breakpoint below, since the container width changes with it. */
.tb-slider.owl-theme .owl-nav,
.bd-slider.owl-theme .owl-nav {
    margin-right: max(12px, calc(50vw - 648px));
}


/*-----------Towards New Horizons Css Start-------------*/
.th-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
}
/* placeholder ground until the photograph is dropped in */
.th-bg {
    position: absolute;
    inset: 0;
    background-color: #3f3f46;
    background-image: url("../images/home/what-tomorrow-holds-img.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.th-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

/* beat 1 : the section title, alone on the photograph */
.th-title {
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 0px 24px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color: #ffffff;
}

/* beats 2 and 3 */
.th-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    text-align: center;
}
.th-content > .container {
    width: 100%;
}
.th-head {
    margin-bottom: 40px;
    opacity: 0;
}
.th-head h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 46px;
    color:#ffffff;
    margin-bottom: 12px;
}
.th-head p {
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
}

/* the promise boxes : frosted plates that read against the photograph */
.th-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 30px;
    max-width: 940px;
    margin: 0px auto;
}
.th-pill {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 16px 26px;
    border-radius: 100px;
    background: rgba(244, 238, 247, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    opacity: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .th-pill {
        background: rgba(244, 238, 247, 0.94);
    }
}
/* the pill icon, painted onto its own square */
.th-icon {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.th-pill h4 {
    font-size: 19px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
}


/* if the sequence never runs, the finished frame is what shows */
.th--static .th-title {
    display: none;
}
.th--static .th-head,
.th--static .th-pill {
    opacity: 1;
}
/*-----------Towards New Horizons Css End-------------*/


/*-----------Download Centre Css Start-------------*/
.dl-sec {
    background: #ffffff;
    padding: 40px 0px 40px;
}
/* placeholder ground until the report cover is dropped in */
.dl-cover-plate {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 300 / 424;
    border-radius: 4px;
    background-color: #efeef1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.dl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.dl-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    background: #ffffff;
    border: 1px solid rgba(77, 77, 79, 0.20);
    border-radius: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.dl-card h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--purple);
}
.dl-icon {
    flex: 0 0 40px;
}
/* the ring and arrow are drawn in, so no icon file is needed */
.dl-icon svg {
    display: block;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}
.dl-card:hover {
    border-color: var(--purple);
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}
.dl-card:hover .dl-icon svg {
    transform: translateY(3px);
}
/*-----------Download Centre Css End-------------*/


/*-----------Footer Css Start-------------*/
.copyRightBg {
    background-color: #3e4157;
    padding: 18px 0px;
}
.copyrightTxt p {
    font-size: 14px;
    line-height: 19px;
    color: #ffffff;
}
.footSocial ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}
.footSocial ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.footSocial ul li a:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.rdxDev p {
    text-align: right;
    font-size: 14px;
    line-height: 19px;
    color: #ffffff;
}
.rdxDev p a {
    color: #ffffff;
    font-size: 14px;
    line-height: 19px;
    transition: color 0.3s ease;
}
.rdxDev p a:hover {
    color: #c9a6cb;
}
/*-----------Footer Css End-------------*/


/*-----------Full-screen Menu Css Start-------------*/
.nb-menu {
    position: fixed;
    inset: 0;
    /* below the header, so the Close button stays clickable while it is open */
    z-index: 998;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(90deg, var(--purple) 0%, #4b2a63 75%);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    /* reserves the fixed header's strip */
    padding-top: 75px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-24px);
    transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.nb-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
/* margin auto rather than align-items: center - with overflow-y auto the
   latter puts the overflowing top out of reach */
.nb-menu > .container {
    width: 100%;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}
.nb-menu .row {
    align-items: center;
}
/* the menu jumps to sections on this page, and the header is fixed over the
   top of them : this keeps an anchored section clear of the bar */
section[id] {
    scroll-margin-top: 80px;
}

/* holds the page behind still while the menu is open */
body.menu-open {
    overflow: hidden;
}

.nb-menu-nav {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px 30px;
}
.nb-menu-nav .nav {
    display: block;
}
.nb-menu-nav .nav-item {
    margin-bottom: 14px;
}
.nb-menu-nav .nav-item:last-child {
    margin-bottom: 0px;
}
/* no rule under the last one : it would sit right on the box padding */
.nb-menu-nav .nav-item:last-child .nav-link {
    padding-bottom: 0px;
    border-bottom: none;
}
.nb-menu-nav .nav-link {
    width: 100%;
    text-align: left;
    padding: 0px 0px 14px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0px;
    background: transparent;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    transition: border-color 0.3s ease;
}
.nb-menu-nav .nav-link:hover,
.nb-menu-nav .nav-link.active {
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: #ffffff;
}

.nb-menu-content {
    padding-left: 30px;
}
.nb-submenu {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.nb-submenu li {
    padding-bottom: 18px;
}
.nb-submenu a {
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    transition: opacity 0.25s ease;
}
.nb-submenu a:hover {
    color: #ffffff;
    opacity: 0.7;
}
/* the page you are on : marked rather than made to look clickable */
.nb-submenu a.is-current {
    font-weight: 700;
    position: relative;
    padding-left: 16px;
}
.nb-submenu a.is-current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
/* the pdf rows carry a download arrow pushed to the right edge */
.nb-submenu .d-pdf a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nb-submenu .d-pdf svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #ffffff;
}
/* Shared inner-page typography and banner */
.inner-page main {
    padding-top: 72px;
}
.inner-page main h2,
.inner-page main h3,
.inner-page main h4,
.inner-page main h5,
.inner-page main h6 {
    font-size: 20px;
    line-height: 1.4;
}
.inner-page main p {
    font-size: 16px;
    line-height: 1.5;
}
.page-banner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    padding: 32px 0;
    text-align: left;
    color: #ffffff;
    /* background-color: var(--purple); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}
.page-banner > .container {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.page-banner__content-row {
    align-items: center;
}
.page-banner .page-breadcrumb {
    justify-content: flex-start;
    margin-bottom: 0;
}
/* the photograph is a night render and already dark, so the wash is only deep
   enough to hold the breadcrumb and headline off the lit ring behind them */
.page-banner--socio {
    background-image: url("../images/socio/socio-economic-impact-on-mumbai-banner.webp");
}
.page-banner--social {
    background-image: url("../images/dharavi-social/dharavi-social-mission-banner-img.webp");
}
.page-banner--sustainability {
    /* the sunrise skyline sits low in the frame, so the plate is anchored to
       the bottom and the wash is heaviest where the breadcrumb and headline
       cross the bright sky */
    background-image: url("../images/best-in-class/best-in-class-sustainability-focus-img.webp");
    background-position: center bottom;
}
.page-banner__eyebrow {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 14px;
}
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 38px;
    font-size: 14px;
    line-height: 1.5;
}
.page-breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
}
.page-breadcrumb a {
    color: inherit;
    font-size: inherit;
}
.page-breadcrumb a:hover {
    text-decoration: underline !important;
}
.socio-intro {
    /* padding: 20px 0 0; */
}
.socio-intro__row + .socio-intro__row,
.socio-intro__media + .socio-intro__row {
    margin-top: 22px;
}
.socio-intro__row h2 {
    margin-bottom: 12px;
    font-weight: 700;
}
.socio-intro__row p + .socio-intro__list {
    margin-top: 14px;
}
.socio-intro__callout p {
    position: relative;
    padding-left: 30px;
    color: var(--purple);
    font-weight: 700;
}
.socio-intro__callout p::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f1edf2, var(--purple));
}
.socio-intro__list {
    margin-bottom: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
}
.socio-intro__list li {
    position: relative;
    padding-left: 22px;
}
.socio-intro__list li + li {
    margin-top: 10px;
}
.socio-intro__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--purple);
}
.socio-intro__media {
    margin-top: 32px;
}
.socio-intro__media figure {
    margin-bottom: 0;
}
.socio-intro__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 580;
    object-fit: cover;
}
.dharavi-voices {
    margin-top: 48px;
    padding: 40px 0;
    background: #e3d7e9;
}
.dharavi-voices h2,
.dharavi-voices h3,
.dharavi-speaking h2 {
    color: var(--purple);
    font-weight: 700;
}
.dharavi-voices h2,
.dharavi-speaking h2 {
    margin-bottom: 16px;
}
.dharavi-voices__lead {
    font-weight: 600;
}
.dharavi-voices__messages {
    margin-top: 36px;
}
.dharavi-voices__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 8px;
    border-radius: 18px;
    background: #efe9f4;
}
.dharavi-voices__message {
    grid-column: span 2;
    text-align: center;
    padding: 24px 20px;
}
.dharavi-voices__message:nth-child(2),
.dharavi-voices__message:nth-child(3),
.dharavi-voices__message:nth-child(5) {
    border-left: 1px solid #b56abd;
}
.dharavi-voices__message:nth-child(n+4) {
    grid-column: span 3;
    border-top: 1px solid #b56abd;
}
.dharavi-voices__message h3 {
    margin: 4px 0;
}
.dharavi-voices__message p {
    font-weight: 500;
}
.dharavi-voices__copy {
    margin-top: 24px;
}
.dharavi-voices__copy p + p {
    margin-top: 10px;
}
.dharavi-voices__media {
    margin-top: 32px;
}
.dharavi-voices__media figure {
    margin-bottom: 0;
}
.dharavi-speaking {
    padding-top: 36px;
}
.dharavi-campaign {
    margin-top: 32px;
    margin-bottom: 24px;
}
.inner-page main .dharavi-campaign__slogan {
    color: #222222;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.8;
}
.dharavi-campaign__slogan span {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    color: #ffffff;
    background: var(--purple);
    line-height: 1.5;
}
.dharavi-story-row + .dharavi-story-row {
    margin-top: 28px;
}
.dharavi-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    background: #e9eced;
}
.dharavi-story__media {
    position: relative;
    margin: 0;
    min-width: 0;
    background: #e3d7e9;
}
.dharavi-story__media > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}
.dharavi-story__media figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 16px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
    text-align: center;
}
.dharavi-story__media figcaption p {
    color: #ffffff;
}
.dharavi-story__media figcaption p:first-child {
    font-weight: 700;
    margin-bottom: 10px;
}
.dharavi-story__content {
    padding: 32px;
    align-self: center;
}
.dharavi-story__content h3 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 12px;
}
.dharavi-story__theme {
    margin-bottom: 10px;
}
.dharavi-story__qr {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}
.dharavi-story__qr img {
    flex-shrink: 0;
    object-fit: contain;
}
.amplified-tagline {
    margin-top: 40px;
}
.inner-page main .amplified-tagline h2 {
    color: #222222;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.6;
    margin-bottom: 0;
    font-size: 20px;
}
.amplified-tagline span {
    color: var(--purple);
}
.amplified-heading {
    margin-top: 32px;
    margin-bottom: 24px;
}
.amplified-heading h2 {
    margin-bottom: 0;
}
.amplified-story-row + .amplified-story-row {
    margin-top: 64px;
}
.amplified-story {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: 32px;
}
.amplified-story__media {
    margin: 0;
}
.amplified-story__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
}
.amplified-story__content h3 {
    color: var(--purple);
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--purple);
}
.amplified-story__content > p,
.amplified-story__content .dharavi-story__qr {
    margin-left: 24px;
}
.amplified-story__content .dharavi-story__qr {
    margin-top: 18px;
    align-items: flex-end;
}
.amplified-closing {
    margin-top: 48px;
}
.amplified-closing__panel {
    padding: 40px 48px;
    background: #eae1f0;
    border-radius: 28px 0 0 0;
}
.amplified-closing__panel p {
    color: var(--purple);
    font-weight: 700;
}
.social-community {
    padding: 0px 0 30px;
}
/* heading and intro centred over the run of cards */
.social-community__head {
    text-align: center;
}
.inner-page main .social-community__head > p {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.social-community h2,
.social-programme h2,
.social-programme h3 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 10px;
}
.social-community__intro {
    margin-top: 12px;
}

/* the four aspirations read as white cards across one line, each under a
   purple rule. Equal rows keep them all one depth whichever copy runs
   longer */
.social-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 20px;
}
.social-benefit {
    position: relative;
    padding: 26px 22px 24px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 10, 25, 0.06);
    overflow: hidden;
}
/* the rule across the head of each card */
.social-benefit::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background-color: var(--purple);
}
.inner-page main .social-benefit h3 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}
.inner-page main .social-benefit p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5b5560;
}
.social-community__closing {
    padding-top: 28px;
}
.social-callout {
    position: relative;
    padding-left: 34px;
}
.social-callout::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f2eef5, var(--purple));
}
.inner-page main .social-callout p,
.inner-page main .socio-intro__callout p,
.inner-page main .amplified-closing__panel p {
    font-size: 20px;
    line-height: 1.4;
    color: var(--purple);
    font-weight: 700;
}
.social-women {
    padding: 0px 0 30px;
}
/* the rule runs along the top, down the left and back along the foot : the
   right edge stays open, so the card reads into the photograph beside it */
.social-programme {
    padding: 28px;
    border: 7px solid transparent;
    border-right: 0;
    border-radius: 30px 0 0 30px;
    background: linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(160deg, #b884bd 0%, #f0e4f1 60%, #ffffff 100%) border-box;
}
/* nothing sits beside the full-width card, so it closes on all four sides */
.social-programme--full {
    border-right: 7px solid transparent;
    border-radius: 30px;
}
.social-programme p + p {
    margin-top: 10px;
}
.social-programme__impact {
    font-weight: 700;
}
.social-programme strong {
    font-size: 20px;
    color: var(--purple);
    font-weight: 800;
}
.social-photo {
    border: 8px solid #6c7072;
    border-radius: 32px;
    overflow: hidden;
    margin: 0;
}
.social-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
.social-aspiration {
    padding: 0 0 30px;
}
.social-aspiration h2,
.social-learning h4 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 10px;
}
.social-aspiration h3 {
    font-weight: 700;
    margin-bottom: 10px;
}
.social-aspiration p + p {
    margin-top: 12px;
}
.social-aspiration__youth {
    margin-top: 30px;
}
.social-aspiration__stats-title {
    margin-top: 28px;
}
.social-livelihood-stats {
    margin-top: 0;
}
.inner-page main .social-livelihood-stats__number {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--purple);
}
.social-resource-row {
    margin-top: 56px;
}
.social-resource {
    position: relative;
    border: 2px solid var(--purple);
    border-radius: 36px;
    background: #fcfdfd;
}
.inner-page main .social-resource__ribbon {
    position: relative;
    margin: -24px 7% 0;
    padding: 18px 24px;
    background: #b88cbe;
    color: #ffffff;
    text-align: center;
    border-radius: 0 0 12px 12px;
}
.social-resource__ribbon::before,
.social-resource__ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--purple);
}
.social-resource__ribbon::before {
    left: -22px;
    border-radius: 22px 0 0 0;
}
.social-resource__ribbon::after {
    right: -22px;
    border-radius: 0 22px 0 0;
}
.social-resource__body {
    padding: 28px;
}
.social-resource__intro {
    font-weight: 700;
    margin-bottom: 28px;
}
.social-resource__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 28px;
    margin-top: 20px;
}
/* the list column runs the full height of the row so the mark can settle at
   its foot, level with the bottom of the photograph */
.social-resource__list-col {
    display: flex;
    flex-direction: column;
}
.social-resource__grid ul {
    padding-left: 0;
    margin-bottom: 0;
}
.social-resource__icon {
    width: 150px;
    max-width: 60%;
    height: auto;
    margin-top: auto;
    padding-top: 28px;
}
.social-resource__grid figure {
    margin: 0;
}
.social-resource__grid figure img {
    width: 100%;
    height: auto;
}
.social-resource__footer {
    padding: 24px 20px;
    border-radius: 0 0 34px 34px;
    background: #e5e6e8;
    text-align: center;
}
.social-resource__footer p {
    color: var(--purple);
    font-weight: 600;
}
.social-aspiration__children {
    margin-top: 24px;
}
.social-learning h4 {
    margin-top: 24px;
}
.social-learning ul {
    display: flex;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.social-learning li {
    flex: 1;
    padding: 6px;
    background: #decee5;
    text-align: center;
    font-size: 16px;
}
.social-trust {
    padding: 0px 0 30px;
}
.social-trust h2 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 12px;
}
.social-trust h3 {
    font-weight: 700;
    margin-bottom: 14px;
}
.social-trust > .container > .row:first-child p + p {
    margin-top: 12px;
}
.social-trust__initiatives {
    margin-top: 12px;
}
.social-trust__initiative {
    height: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--purple);
}
.inner-page main .social-trust__number {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--purple);
}
.social-trust__description {
    margin-top: 18px;
}
.social-trust__impact {
    margin-top: 24px;
}
.social-trust__impact-copy {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px;
    background: #ffffff;
    /* white on a white page needs an edge, or the panel beside the
       photograph reads as nothing at all */
    border: 1px solid #e6dfe8;
    border-radius: 30px 0 0 0;
}
.inner-page main .social-trust__impact-copy p {
    color: #222222;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}
.social-trust__impact-copy p + p {
    margin-top: 16px;
}
.social-trust__photo {
    height: 100%;
    margin: 0;
}
.social-trust__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.social-sports {
    padding-top: 12px;
}
.social-sports h2 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 12px;
}
.social-sports__football,
.social-sports__cricket {
    background: #e3d7e9;
}
.social-sports__football {
    padding-top: 32px;
}
.social-sports__intro {
    font-weight: 600;
}
.inner-page main .social-sports__statement {
    position: relative;
    padding-left: 28px;
    color: var(--purple);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}
.social-sports__statement::before {
    content: "";
    position: absolute;
    inset: 3px auto 3px 0;
    width: 6px;
    border-radius: 6px;
    background: currentColor;
}
.social-sports__football .social-sports__statement {
    margin-top: 32px;
}
.social-sports__stadium {
    margin: 24px 0 0;
}
.social-sports__stadium img {
    width: 100%;
    height: auto;
    display: block;
}
.social-sports__cricket {
    padding: 20px 0 40px;
}
.social-sports__cricket-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
}
/* copy and its photograph, stacked : the statement no longer has to fill a row
   sized by the tall shot in the next column */
.social-sports__cricket-col {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.social-sports__cricket-grid img,
.social-sports__chess-grid img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.social-sports__girls,
.social-sports__group {
    border: 7px solid #eeeaf0;
    /* aspect-ratio: 16 / 9; */
}
.social-sports__cricket-grid .social-sports__statement {
    padding-top: 12px;
    margin-bottom: 24px;
}
.social-sports__players {
    grid-column: 2;
    grid-row: 2;
    margin-top: -48px;
    position: relative;
    object-fit: contain !important;
}
.social-sports__chess {
    padding: 40px 0;
    background: var(--purple);
}
.social-sports__chess-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 24px;
    align-items: start;
}
.social-sports__chess-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
}
.inner-page main .social-sports__chess .social-sports__statement {
    color: #ffffff;
}
.social-sports__chess-main {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: 16 / 9;
}
.social-sports__chess-awards {
    grid-column: 2;
    grid-row: 1;
}
.social-sports__chess-play {
    grid-column: 2;
    grid-row: 2;
}
.social-sports__chess-awards,
.social-sports__chess-play {
    border: 7px solid #eeeaf0;
    aspect-ratio: 16 / 9;
}
.sustainability-intro {
    padding: 0 0 30px;
}
/* the space between these sits under each line rather than above the next,
   so the run starts flush with the heading above it */
.sustainability-intro p {
    margin-top: 0;
    padding-bottom: 10px;
    font-weight: 500;
}
.sustainability-intro p:last-child {
    padding-bottom: 0;
}
.sustainability-intro__media {
    margin-top: 32px;
}
.sustainability-intro__media figure {
    margin: 0;
}
.sustainability-intro__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 580;
    object-fit: cover;
}
.impact-summary {
    padding: 48px 0;
    background-color: #26332c;
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)), url("../images/best-in-class/impact-assessment-summary-img.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.impact-summary h2,
.impact-summary h3,
.impact-summary p {
    color: #ffffff;
}
.inner-page main .impact-summary h2,
.inner-page main .impact-summary__closing {
    font-size: 28px;
    line-height: 1.4;
}
.impact-summary h2 {
    font-weight: 700;
    margin-bottom: 24px;
}
.impact-summary p + p {
    margin-top: 16px;
}
.impact-summary__closing {
    margin-top: 30px;
    font-weight: 700;
}
/* ESG chapters : the copy opens each chapter and its photograph follows,
   rather than the copy sitting over the photograph as it used to */
.environment-feature,
.social-feature,
.governance-feature {
    padding: 20px 0 20px;
}
.esg-feature__intro {
    margin-bottom: 28px;
}
.inner-page main .esg-feature__chapter {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 14px;
}
.esg-feature__chapter--environment { color: #61bb46; }
.esg-feature__chapter--social      { color: #cd8c2a; }
.esg-feature__chapter--governance  { color: #f04f38; }
.esg-feature__intro h3 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 12px;
}
.esg-feature__lead {
    font-weight: 700;
    margin-bottom: 12px;
}
.esg-feature__photo {
    margin: 0;
}
.esg-feature__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 580;
    object-fit: cover;
}
.environment-highlights {
    padding: 0px 0 30px;
}
.environment-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 28px 8px;
    background: #333333;
}
.environment-highlights__item {
    text-align: center;
    padding: 8px 20px;
    color: #61bb45;
}
.environment-highlights__item + .environment-highlights__item {
    border-left: 1px solid #c4c9c3;
}
.environment-icon {
    width: 100px;
    height: auto;
}
.environment-highlights__item .environment-icon {
    margin-bottom: 16px;
}
.environment-highlights__item h3 {
    font-weight: 700;
    margin-bottom: 12px;
}
.environment-highlights__item p {
    color: #ffffff;
}
.environment-pillars {
    padding: 0px 0 30px;
}
.environment-pillars h2 {
    color: var(--purple);
    font-weight: 700;
    margin-bottom: 36px;
}
.environment-pillar {
    --pillar-color: #61bb46;
}
.environment-pillar + .environment-pillar {
    margin-top: 56px;
}
.environment-pillar__icon {
    width: 140px;
    max-width: 100%;
}
.environment-pillar__icon .environment-icon {
    width: 100%;
}
.environment-pillar--water {
    --pillar-color: #00add8;
}
.environment-pillar h3 {
    color: var(--pillar-color);
    font-weight: 700;
    margin-bottom: 20px;
}
.environment-pillar__details {
    display: flex;
}
.environment-pillar__details > div {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
}
.environment-pillar__details > div:first-child {
    padding-left: 0;
}
.environment-pillar__details > div + div {
    border-left: 1px solid #7ec665;
}
.environment-pillar h4 {
    font-weight: 700;
    margin-bottom: 8px;
}

.social-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 28px 8px;
    background: #333333;
}
.social-highlights__item {
    text-align: center;
    padding: 8px 20px;
    color: #e0a63c;
}
.social-highlights__item + .social-highlights__item {
    border-left: 1px solid #e8e2d6;
}
.social-icon {
    width: 100px;
    height: auto;
}
.social-highlights__item .social-icon {
    margin-bottom: 16px;
}
.social-highlights__item h3 {
    font-weight: 700;
    margin-bottom: 12px;
}
.social-highlights__item p {
    color: #ffffff;
}
.social-pillars {
    padding: 44px 0;
}
.social-pillar {
    --pillar-color: #cd8c2a;
}
.social-pillar + .social-pillar {
    margin-top: 56px;
}
.social-pillar__icon {
    width: 140px;
    max-width: 100%;
}
.social-pillar__icon .social-icon {
    width: 100%;
}
.social-pillar h3 {
    color: var(--pillar-color);
    font-weight: 700;
    margin-bottom: 20px;
}
.social-pillar__lead {
    margin-bottom: 18px;
}
.social-pillar__details {
    display: flex;
}
.social-pillar__details > div {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
}
.social-pillar__details > div:first-child {
    padding-left: 0;
}
.social-pillar__details > div + div {
    border-left: 1px solid #d9b471;
}
.social-pillar h4 {
    font-weight: 700;
    margin-bottom: 8px;
}
.social-pillar h4 + p + h4 {
    margin-top: 18px;
}
.governance-highlights {
    padding: 0 0 35px;
}
.governance-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    padding: 28px 8px;
    background-color: #333333;
}
.governance-highlights__item {
    text-align: center;
    padding: 8px 20px;
    color: #f4553d;
}
.governance-highlights__item + .governance-highlights__item {
    border-left: 1px solid #f0a08c;
}
.governance-icon {
    width: 100px;
    height: auto;
}
.governance-highlights__item .governance-icon {
    margin-bottom: 16px;
}
.inner-page main .governance-highlights__item h3 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}
.governance-pillars {
    padding: 0 0 30px;
}
.inner-page main .governance-pillars > .container > .row:first-child h2 {
    font-size: 32px;
    color: #f4553d;
    font-weight: 700;
    margin-bottom: 44px;
}
.governance-pillar + .governance-pillar {
    margin-top: 56px;
}
.governance-pillar__icon {
    width: 140px;
    max-width: 100%;
}
.governance-pillar__icon .governance-icon {
    width: 100%;
}
.governance-pillar h3 {
    color: #f04f38;
    font-weight: 700;
    margin-bottom: 20px;
}
.governance-pillar__details {
    display: flex;
}
.governance-pillar__details > div {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
}
.governance-pillar__details > div:first-child {
    padding-left: 0;
}
.governance-pillar__details > div + div {
    border-left: 1px solid #f0a08c;
}
.governance-pillar__statement p {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}
.governance-pillar h4 {
    font-weight: 700;
    margin-bottom: 10px;
}
.governance-pillar__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.governance-pillar__list li {
    position: relative;
    padding-left: 18px;
}
.governance-pillar__list li + li {
    margin-top: 12px;
}
.governance-pillar__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple);
}
/* Portrait grid, four across : shared by Board of Directors and the
   Management Committee */
/* the banner here is only the breadcrumb and the heading : no photograph, no
   colour plate and no full-height stage */
.page-banner--plain {
    height: auto;
    display: block;
    padding: 26px 0 0;
    background: none;
    background-color: transparent;
    color: #000000;
}
.page-banner--plain > .container {
    height: auto;
    display: block;
}
.page-banner--plain .page-breadcrumb {
    margin-bottom: 22px;
}
.page-banner--plain .page-banner__heading {
    color: #000000;
}
.board-directors {
    padding: 30px 0;
}
/* each director sits in a raised white card, the portrait bleeding to its top
   edge and the caption set on the card below */
/* the Company Secretary sits on a soft plate under the portrait grid */
.board-secretary {
    display: inline-block;
    margin-top: 34px;
    padding: 20px 30px;
    border-radius: 14px;
    background: #ecebf2;
}
.board-secretary strong {
    font-weight: 700;
}
.board-director {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.board-director:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-4px);
}
.board-director__photo {
    display: block;
    width: 100%;
    height: auto;
    /* the supplied portraits are square, so the frame follows them and nothing
       is cropped away */
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
    background: #ececec;
}
.board-director__caption {
    flex: 1;
    padding: 18px 12px 22px;
}
.inner-page main .board-director__caption h3 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 4px;
}
.board-director__caption p {
    color: #3f3f45;
}

.page-navigation {
    padding: 30px 0;
    background: #ffffff;
}
.page-navigation__link {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    min-height: auto;
    padding: 10px 10px;
    border: 1px solid #e1e1e6;
    color: #000000;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    background-color: #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.page-navigation__link--next {
    justify-content: flex-end;
    text-align: right;
}
.page-navigation__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    height: 35px;
    border: 1px solid #e1e1e6;
    border-radius: 50%;
}
.page-navigation__arrow svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nb-menu-aside {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}
/* placeholder ground until the report cover is dropped in */
.nb-cover-plate {
    display: block;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 300 / 424;
    margin: 0px auto;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.18);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.nb-menu-download {
    padding: 18px 0px 16px;
}
.nb-menu-download a {
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}
.nb-menu-download a span {
    display: block;
}
.nb-menu-social {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.nb-menu-social a {
    color: #ffffff;
    font-size: 17px;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.nb-menu-social a:hover {
    opacity: 1;
    transform: translateY(-2px);
}
/*-----------Full-screen Menu Css End-------------*/
.page-navigation__link:hover,
.page-navigation__link:focus-visible {
    border-color: var(--purple);
    background-color: var(--purple);
    color: #ffffff;
}
.page-navigation__link:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
}
.page-banner__heading {
    font-family: 'Noto Sans', sans-serif;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

/*-----------Shared inner-page section rhythm Css Start-------------*/
/* every inner page (index.php aside) parts from its banner by 40px and closes
   the banner flush at the foot */
.inner-page main .section--banner-gap {
    margin-bottom: 40px;
    padding-bottom: 0;
}
/* the section that picks up straight after the banner carries the gap below it
   only : the banner has already spaced the top */
.inner-page main .section--after-banner {
    padding: 0 0 40px;
}
/* the closing content section of a page runs flush into the prev / next bar */
.inner-page main .section--last {
    padding-bottom: 0;
}
/*-----------Shared inner-page section rhythm Css End-------------*/

/*-----------Flat banner (breadcrumb, copy left, portrait right) Css Start-------------*/
/* no colour plate and no full-height stage here : the banner sits on the page
   ground and sets its type in the brand ink */
.page-banner--flat {
    height: auto;
    min-height: 0;
    display: block;
    padding: 26px 0 0;
    background: none;
    background-color: transparent;
    color: #000000;
}
.page-banner--flat > .container {
    height: auto;
    display: block;
}
.page-banner--flat .page-breadcrumb {
    color: #000000;
    margin-bottom: 22px;
}
.page-banner--flat .page-breadcrumb a {
    color: #000000;
}
.page-banner--flat .page-banner__eyebrow {
    color: #4d4d4f;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
}
.page-banner--flat .page-banner__heading {
    color: var(--purple);
}
.page-banner__content-row--split {
    align-items: center;
    row-gap: 30px;
}
.page-banner__portrait {
    display: block;
    width: 100%;
    height: auto;
}
/*-----------Flat banner Css End-------------*/

/*-----------Leader message pages (Chairman / Director) Css Start-------------*/
/* the spread sets its pull quotes on a soft lilac plate, opened and closed by
   the twin comma marks */
.leader-quote {
    margin-top: 28px;
    padding: 26px 28px;
    background-color: rgba(142, 39, 143, 0.06);
}
.leader-quote__mark {
    display: block;
    width: 26px;
    height: auto;
}
.leader-quote__mark--close {
    transform: rotate(180deg);
    margin-left: 0;
}
.inner-page main .leader-quote p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--purple);
    padding: 14px 0;
}
/* the letter itself : a plain 16px run, the salutation a shade heavier */
.leader-letter__salutation {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 14px;
}
.inner-page main .leader-letter p + p {
    margin-top: 14px;
}
.leader-letter .leader-quote {
    margin: 30px 0;
}
.inner-page main .leader-letter .leader-quote p + p {
    margin-top: 0;
}
.leader-sign {
    margin-top: 26px;
}
.inner-page main .leader-sign h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
}
.leader-sign__role {
    font-size: 16px;
    line-height: 24px;
}
.leader-sign__role strong {
    font-weight: 700;
}
.inner-page main .leader-sign__role + .leader-sign__role {
    margin-top: 12px;
}
/*-----------Leader message pages Css End-------------*/

/*-----------Leader letter extras (sub-heads, table, figure) Css Start-------------*/
/* the CEO letter runs under purple sub-heads, the way the spread sets them */
.inner-page main .leader-letter h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
    margin-top: 30px;
    margin-bottom: 12px;
}
.leader-letter__figure {
    margin: 30px 0;
}
.leader-letter__figure img {
    display: block;
    width: 100%;
    height: auto;
}
/* the tenements table : purple head band, hairline rules, and its own scroll
   on narrow screens so the page body never runs sideways */
/* No scroll box : the table fits its column at every width (responsive.css
   tightens it on a phone), so there is no scrollbar and nothing clips the
   borders. */
.leader-table {
    margin: 30px 0;
}
.leader-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 24px;
}
.leader-table th,
.leader-table td {
    padding: 14px 18px;
    border: 1px solid #e1e1e6;
    vertical-align: top;
    text-align: left;
}
.leader-table thead th {
    background-color: var(--purple);
    border-color: var(--purple);
    color: #ffffff;
    font-weight: 700;
}
.leader-table th.leader-table__num,
.leader-table td.leader-table__num {
    text-align: right;
}
.leader-table tbody tr:last-child th,
.leader-table tbody tr:last-child td {
    font-weight: 700;
}
/*-----------Leader letter extras Css End-------------*/

/*-----------Winning Accolades Css Start-------------*/
/* the intro sits straight under the page heading, set a size up from the
   body copy the way the spread carries it */
.inner-page main .accolades-intro {
    margin-top: 16px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #000000;
}
/* the awards ride on the soft lilac ground the spread uses */
.accolades {
    padding: 30px 0 0;
}
.accolade {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    margin-bottom: 20px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}

/* the trophy shot stands above the caption */
.accolade__trophy {
    margin: 0 0 20px;
    text-align: center;
}
.accolade__trophy img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 240px;
    margin: 0 auto;
    object-fit: contain;
}
/* .accolade__body {
    margin-top: auto;
} */
.inner-page main .accolade__award {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 12px;
}
/* the metal reads as a pill, the way the spread badges each award */
.accolade__medal {
    display: inline-block;
    min-width: 96px;
    padding: 4px 18px;
    border-radius: 100px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    text-align: center;
}
.accolade__medal--gold {
    background-image: linear-gradient(180deg, #f7dd8f, #c99a2c);
    color: #3d2c00;
}
.accolade__medal--silver {
    background-image: linear-gradient(180deg, #ededf0, #a9adb4);
    color: #2f3236;
}
.accolade__medal--bronze {
    background-image: linear-gradient(180deg, #e3a871, #b0692a);
    color: #ffffff;
}
.inner-page main .accolade__citation {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
}
/* the LACP recognition panel : cover, badges and the highlight lines */
.accolade-highlight {
    padding: 40px 0 0;
}
.accolade-highlight__cover {
    margin: 0;
}
.accolade-highlight__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.accolade-highlight__badges {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.accolade-highlight__badge img {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
}
.inner-page main .accolade-highlight__content h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 12px;
}
.inner-page main .accolade-highlight__content p + p {
    margin-top: 14px;
}
/*-----------Winning Accolades Css End-------------*/

/*-----------Towards New Horizons Css Start-------------*/
/* What Tomorrow Holds : the lead line sits above the body copy, and the eight
   promises run as tinted plates below */
.horizons-promise {
    padding: 30px 0 0;
}
.horizons-promise__head {
    margin-bottom: 30px;
}
.inner-page main .horizons-promise__head h2 {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
}
.inner-page main .horizons-promise__lead {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin-bottom: 14px;
}
.horizons-pill {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 22px;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(142, 39, 143, 0.10);
}
.horizons-pill__icon {
    margin: 0 0 18px;
}
.horizons-pill__icon img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.inner-page main .horizons-pill h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
}
/* shared list styling for the home, township and building features */
.inner-page main .horizons-list__title {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: var(--purple);
    margin: 30px 0 16px;
}
.horizons-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.horizons-list li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 24px;
}
.horizons-list li + li {
    margin-top: 12px;
}
.horizons-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--purple);
}
/* A Rejuvenated Dharavi */
.horizons-homes {
    padding: 40px 0 0;
}
/* the lockup runs as the spread sets it : "A Rejuvenated" in ink over DHARAVI
   reversed out of a purple pill, then a hairline rule and the tagline */
.horizons-homes__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34px;
    margin-bottom: 30px;
}
.inner-page main .horizons-homes__title {
    margin: 0;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    color: #231f20;
}
.horizons-homes__badge {
    display: block;
    width: max-content;
    margin-top: 6px;
    padding: 0 18px 4px;
    border-radius: 12px;
    background-color: var(--purple);
    color: #ffffff;
    text-transform: uppercase;
}
.inner-page main .horizons-homes__tagline {
    padding-left: 34px;
    border-left: 1px solid #d7c3d9;
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
    color: var(--purple);
}
.horizons-homes__media,
.horizons-township__media,
.horizons-preserve__media,
.horizons-verse__media {
    margin: 0;
}
.horizons-homes__media img,
.horizons-township__media img,
.horizons-preserve__media img,
.horizons-verse__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.horizons-township {
    padding: 40px 0 0;
}
/* Build to Preserve : the spread runs this whole passage on black, the copy
   panel on the left and the photographs collaged around it */
.horizons-preserve {
    padding: 30px 0;
    background-color: #0d0d0f;
}
.horizons-preserve__content {
    height: 100%;
}
/* the display lockup, SPIRIT picked out in the brand purple */
.inner-page main .horizons-preserve__spirit {
    font-size: 58px;
    line-height: 68px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.inner-page main .horizons-preserve__spirit span {
    color: var(--purple);
}
.horizons-preserve__rule {
    display: block;
    width: 46px;
    height: 3px;
    margin-bottom: 22px;
    background-color: #ffffff;
}
.inner-page main .horizons-preserve__content p {
    color: #e8e6ea;
}
.inner-page main .horizons-preserve__content p + p {
    margin-top: 14px;
}
.inner-page main .horizons-preserve__lead {
    margin-top: 18px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #ffffff;
}
.inner-page main .horizons-preserve__content h2 {
    margin-top: 0;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}
.inner-page main .horizons-preserve__sub {
    margin-top: 6px;
    font-size: 16px;
    line-height: 24px;
    color: #b9b5bd;
}
/* the collages : fixed row heights so every slot has a size you can supply to */
.horizons-collage {
    display: grid;
    gap: 16px;
    grid-auto-rows: 180px;
    /* smaller cells backfill any gap the large and tall slots leave */
    grid-auto-flow: dense;
}
.horizons-collage--aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.horizons-collage--strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}
.horizons-collage__cell {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
}
/* the photograph that carries the Build to Preserve caption under it */
.horizons-preserve__figure {
    margin: 34px 0 18px;
    aspect-ratio: 620 / 360;
}
.horizons-collage__cell img {
    position: relative;
}
.horizons-collage__cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.horizons-collage__cell--wide {
    grid-column: span 2;
}
.horizons-collage__cell--tall {
    grid-row: span 2;
}
.horizons-collage__cell--large {
    grid-column: span 2;
    grid-row: span 2;
}
/* the couplet, set on the lilac plate the spread uses for its verse */
.horizons-verse {
    padding: 40px 0 0;
}
.horizons-verse__quote {
    margin: 0;
    padding: 30px 28px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}
.inner-page main .horizons-verse__hindi {
    font-size: 26px;
    line-height: 40px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 18px;
}
.inner-page main .horizons-verse__english {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}
.horizons-verse__credit {
    margin-top: 18px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.horizons-verse__credit span {
    display: inline-block;
    margin-top: 4px;
    font-weight: 400;
    color: #4d4d4f;
}
/* A Story of Dreams Taking Shape */
.horizons-story {
    padding: 40px 0 0;
}
/* the lockup runs across the page : "Dharavi" set large in purple, a hairline,
   then the title in two lines beside it */
.horizons-story__head {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 0px;
}
.inner-page main .horizons-story__word {
    flex: 0 0 auto;
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    color: var(--purple);
}
.inner-page main .horizons-story__head h2 {
    padding-left: 24px;
    border-left: 1px solid #c9c5cd;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}
/* each card now leads with its photograph across the full head of the card,
   and sets its line under it */
.horizons-stat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    margin-bottom: 20px;
}

/* the slot the artwork drops into : 832 x 624, so it sits 4:3 */
.horizons-stat__shot {
    flex: none;
    aspect-ratio: 832 / 624;
    border-radius: 0;
}
.inner-page main .horizons-stat p {
    margin: 0;
    padding: 0px 10px;
    font-size: 16px;
    line-height: 24px;
}
.inner-page main .horizons-stat strong {
    font-weight: 700;
    color: var(--purple);
}
/* the closing band the spread runs across the foot of the spread */
.inner-page main .horizons-story__band {
    /* margin-top: 20px; */
    /* background-color: var(--purple); */
    color: var(--purple);
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
    padding-bottom: 20px;
}
/* the closing scan panel */
/*-----------Towards New Horizons Css End-------------*/

/*-----------Towards New Horizons banner & media Css Start-------------*/
/* the banner stands on its photograph, the way the Socio-Economic spread does :
   a full-height stage, the picture under a dark wash so the type stays legible.
   Written self-contained so it does not depend on a shared .page-banner base. */
.page-banner--horizons {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    padding: 32px 0;
    text-align: left;
    color: #ffffff;
    background-color: transparent;
    background-image: url("../images/towards-new-horizons/towards-new-horizons-banner.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-banner--horizons > .container {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.page-banner--horizons .page-banner__content-row {
    align-items: center;
}
.page-banner--horizons .page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
}
.page-banner--horizons .page-breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
}
.page-banner--horizons .page-breadcrumb a {
    color: inherit;
    font-size: inherit;
}
.page-banner--horizons .page-breadcrumb a:hover {
    text-decoration: underline !important;
}
.page-banner--horizons .page-banner__heading {
    font-family: 'Noto Sans', sans-serif;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}
/* the wide plate under the What Tomorrow Holds copy */
.horizons-promise__media {
    margin: 0 0 30px;
}
.horizons-promise__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
/* each home feature is a photograph over its caption */
/* each column pairs Dharavi as it stands with the home that replaces it, the
   chevron between them reading top to bottom */
.horizons-home {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
}
/* a fixed frame keeps every shot in the grid the same height */
.horizons-home__shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 748 / 480;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}
/* the chevron is drawn rather than loaded : lilac at the shoulders running to
   the brand purple at the point */
.horizons-home__arrow {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 44px;
    margin: 16px auto;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.18), var(--purple));
    clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 42%, 50% 100%, 0 42%);
}
/*-----------Towards New Horizons banner & media Css End-------------*/

/*-----------Homes list in columns Css Start-------------*/
/* the nine points read across the page rather than down it */
.horizons-list--cols {
    columns: 3;
    column-gap: 40px;
}
.horizons-list--cols li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.horizons-list--cols li + li {
    margin-top: 12px;
}
/*-----------Homes list in columns Css End-------------*/

/*-----------Township rows Css Start-------------*/
/* each row sets its list against the artwork on the soft lilac ground the
   spread uses */
.horizons-township__row {
    padding: 25px 0;
    background: transparent;
}

.inner-page main .horizons-township__row .horizons-list__title {
    margin-top: 0;
}
/* the artwork carries its own white ground, so it needs no plate behind it */
.horizons-township__row .horizons-township__media img {
    border-radius: 0;
    background: transparent;
}
/* these two lists carry a slightly larger bullet, round like the rest */
.horizons-list--square li::before {
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/*-----------Township rows Css End-------------*/

/*-----------Township lists in two columns Css Start-------------*/
/* the township and building points read in two columns beside the artwork */
.horizons-list--two {
    columns: 2;
    column-gap: 30px;
}
.horizons-list--two li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.horizons-list--two li + li {
    margin-top: 12px;
}
/*-----------Township lists in two columns Css End-------------*/

/*-----------Winning Accolades banner heading Css Start-------------*/
/* the heading reads in the brand purple, as it does on the leader pages */
.page-banner--accolades .page-banner__heading {
    color: var(--purple);
}
/*-----------Winning Accolades banner heading Css End-------------*/

/*-----------Inner page section rhythm Css Start-------------*/
/* One rhythm for the five build-out pages, written on the section classes
   themselves so the value reads where it is used. Every content section
   closes with 30px and carries no top padding : the banner, or the section
   above, has already set that edge. Kept on .inner-page main so it outranks
   the older per-section overrides further down responsive.css. */
.inner-page main .section--banner-gap {
    margin-bottom: 30px;
    padding-bottom: 0;
}
.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 30px;
}
/* the dark passage runs full bleed, so it keeps a top edge of its own or the
   reversed copy would sit against the fold */
.inner-page main .horizons-preserve {
    margin: 0 0 30px;
    padding: 30px 0;
}
/* the closing section of a page runs flush into the prev / next bar */
.inner-page main .section--last {
    padding-bottom: 0;
}
.inner-page main .page-navigation {
    padding: 40px 0 0;
}
/* g-4 is off the markup, and Bootstrap leaves --bs-gutter-y at 0 without it,
   so wrapped and stacked columns would touch. The gutter is set here. */
.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: 15px;
}
/*-----------Inner page section rhythm Css End-------------*/

/*-----------Equal height cards Css Start-------------*/
/* every card fills its column, so a row of them squares off at one depth, with
   a floor underneath so a one-line caption still reads as a card */
.accolade,
.horizons-stat {
    height: 100%;
    min-height: 260px;
}
/* the row gutter spaces these now, so the card carries no margin of its own */
.accolade {
    margin-bottom: 0;
}
/* the shot is a fixed depth, so the caption sits centred in what is left.
   Auto margins do it without making the paragraph a flex container, which
   would break <strong> out onto a line of its own. */
.inner-page main .horizons-stat p {
    margin: auto 0;
}
/*-----------Equal height cards Css End-------------*/

/*-----------Equal depth card rows Css Start-------------*/
/* Bootstrap columns only stretch within their own wrapped line, so cards on a
   second or third line came out shallower than the first (the awards ran
   466 / 442 / 416px). A grid with 1fr tracks holds every card in the row to
   one depth. The col-* classes stay on the markup for readability; their
   widths are reset so the grid, not the column, sets the track. */
.inner-page main .row.row--cards {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 15px;
    /* the grid gap spaces these now : the Bootstrap gutter would double it,
       and the row negative margins would push the cards past the container */
    --bs-gutter-y: 0;
    margin-left: 0;
    margin-right: 0;
}
.inner-page main .row.row--cards > [class*="col-"] {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* the track counts mirror the col-* the markup carries */
.inner-page main .row.row--cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inner-page main .row.row--cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/*-----------Equal depth card rows Css End-------------*/

/*-----------Dharavi Badal Rahi Hai panel Css Start-------------*/
/* The aerial photograph carries no type, so the lockup, the QR and its line
   are set over it : headline at the top, the scan block at the foot. */
.horizons-scan__panel {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1296 / 580;
}
.horizons-scan__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* the photograph is busy, so a wash off the left edge holds the type legible */
.horizons-scan__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 78%);
}
.inner-page main .horizons-scan__title {
    margin: 0;
    color: #ffffff;
    font-size: 54px;
    line-height: 64px;
    font-weight: 700;
    text-transform: uppercase;
}
/* the middle word reverses out of a purple block, as the spread sets it */
.horizons-scan__mark {
    display: inline-block;
    padding: 0 16px 4px;
    background-color: var(--purple);
}
/* the code and its line read across, the line to the right of the code */
.horizons-scan__cta {
    display: flex;
    align-items: center;
    gap: 20px;
}
.horizons-scan__qr {
    display: block;
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    padding: 6px;
    background-color: #ffffff;
    border-radius: 4px;
}
.inner-page main .horizons-scan__lead {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
}
/*-----------Dharavi Badal Rahi Hai panel Css End-------------*/

/*-----------Accolade caption alignment Css Start-------------*/
/* every title reserves two lines, so a one-line award still drops its medal
   and citation to the same height as the wrapped titles beside it */
.accolade__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.inner-page main .accolade__award {
    min-height: 52px;
    margin-bottom: 12px;
}
.accolade__medal {
    align-self: flex-start;
}
.inner-page main .accolade__citation {
    margin-bottom: 0;
}
/*-----------Accolade caption alignment Css End-------------*/
.sb-headinmisson{
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
}
/*-----------Accolade medal sheen Css Start-------------*/
/* the pill is the metal itself : dark at both ends, catching the light in the
   middle, on a squared-off tab rather than a capsule */
.accolade__medal {
    min-width: 110px;
    padding: 5px 20px;
    border-radius: 8px;
}
.accolade__medal--gold {
    background-image: linear-gradient(90deg, #c8962a 0%, #e9c65a 22%, #fbeaa8 50%, #e9c65a 78%, #c8962a 100%);
    color: #2b1e00;
}
.accolade__medal--silver {
    background-image: linear-gradient(90deg, #8e9096 0%, #c9cbd0 22%, #f4f4f6 50%, #c9cbd0 78%, #8e9096 100%);
    color: #26282c;
}
.accolade__medal--bronze {
    background-image: linear-gradient(90deg, #ad6528 0%, #d19458 22%, #f1cfa0 50%, #d19458 78%, #ad6528 100%);
    color: #2b1400;
}
/*-----------Accolade medal sheen Css End-------------*/

/*-----------Year of progress counter Css Start-------------*/
/* the digits roll up from zero, so they sit on equal-width figures and the
   line does not jitter as the value climbs */
.tp-num {
    font-variant-numeric: tabular-nums;
}
/*-----------Year of progress counter Css End-------------*/

/*-----------CEO desk spreads Css Start-------------*/
/* the spreads that follow the CEO letter (report pages 14-25). The shared
   pieces first : the section title, a lead paragraph, a sub-head, the bullet
   list, and the placeholder every photograph sits in until the artwork lands */
.inner-page main .ceo-title {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 16px;
}
.inner-page main .ceo-lead {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 24px;
}
.inner-page main .ceo-subtitle {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
    margin: 0 0 12px;
}
.ceo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ceo-list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 24px;
}
.ceo-list li + li {
    margin-top: 8px;
}
.ceo-list li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--purple);
}
/* every photograph fills its column and keeps its own ratio; the ones that
   stand alone take the 12px corner the cards use */
.ceo-figure {
    margin: 0;
}
.ceo-figure img,
.ceo-future__grid img,
.ceo-reimagined__card img,
.ceo-principle img,
.ceo-compare__photo,
.ceo-didi__poster {
    display: block;
    width: 100%;
    height: auto;
}
.ceo-figure img,
.ceo-future__grid img,
.ceo-reimagined__card img,
.ceo-compare__photo,
.ceo-didi__poster {
    border-radius: 12px;
}
/* the seventeen goals tile four across in the photograph's column */
.ceo-sdg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.ceo-sdg img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* A Year of Transformative Progress : the lead beside a 2 x 4 wall of figures */
/* each spread carries its space underneath, the last one none at all so it
   runs flush into the prev / next bar */
.ceo-progress {
    padding: 0 0 40px;
}
.inner-page main .ceo-progress__lead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: #000000;
}
.ceo-progress__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 30px;
}
.ceo-progress__stat {
    padding: 18px 20px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}
.inner-page main .ceo-progress__stat h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 6px;
}
.inner-page main .ceo-progress__stat p {
    font-size: 15px;
    line-height: 22px;
    margin: 0;
}
.inner-page main .ceo-progress__stat strong {
    color: var(--purple);
}
.ceo-progress .ceo-figure--wide {
    margin-top: 30px;
}

/* The Transformation has Begun : four shots two by two beside the statement,
   the other four in a row of four across the full width underneath */
.ceo-transformation {
    padding: 0 0 40px;
}
.inner-page main .ceo-transformation__statement {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: var(--purple);
    margin: 0;
}
/* each line shrinks to its own words; the plated ones reverse out of purple.
   The plain line keeps the same side padding so its words line up with the
   words inside the plates above and below it */
.ceo-transformation__line {
    display: table;
    padding: 2px 10px;
    border-radius: 4px;
}
.ceo-transformation__line + .ceo-transformation__line {
    margin-top: 6px;
}
.ceo-transformation__line--plate {
    background-color: var(--purple);
    color: #ffffff;
}

/* The Future is Taking Shape : four renderings, two by two */
.ceo-future {
    padding: 0 0 40px;
}
.ceo-future__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Dharavi Reimagined : four blocks two abreast, each a square photograph
   beside its head and bullets */
.ceo-reimagined {
    padding: 0 0 40px;
}
.ceo-reimagined__card {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    /* the two cards in a line share one depth, so the picture and its copy
       sit centred in that depth rather than leaving a void under the shorter
       one */
    align-items: center;
    align-content: center;
    height: 100%;
    padding: 24px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}
.inner-page main .ceo-reimagined__card h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
    margin: 0 0 12px;
}

/* A city within a city : the wheel is drawn in white on the dark paper the
   spread uses, so the whole band takes that ground and reverses its copy */
.ceo-city {
    padding: 40px 0;
    margin-bottom: 40px;
    color: #ffffff;
    background-color: #1c1e2a;
    background-image: url("../images/ceo-a-year-Transformative/Dharavi-Reimagined/bg-img.webp");
    background-position: center;
    background-size: cover;
}
.inner-page main .ceo-city .ceo-title {
    color: #ffffff;
}
.ceo-city__wheel {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
}
/* the two notes, each led by its line icon */
.ceo-city__notes {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.ceo-city__notes li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.ceo-city__notes li + li {
    margin-top: 16px;
}
.ceo-city__notes img {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
}
.inner-page main .ceo-city__notes p {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
}
.ceo-city__pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.ceo-city__pillars li {
    padding: 10px 14px;
    border-left: 3px solid #c56ec7;
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}
.inner-page main .ceo-city__axes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
.ceo-city__axes span {
    padding: 4px 14px;
    border-radius: 100px;
    background-color: var(--purple);
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* the six principles : a shot over a head, its headline figure and bullets */
.ceo-principles {
    padding: 0 0 40px;
}
.ceo-principle {
    height: 100%;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}
.ceo-principle img {
    border-radius: 12px 12px 0 0;
}
.ceo-principle__body {
    padding: 20px 22px 24px;
}
.inner-page main .ceo-principle h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 8px;
}
.inner-page main .ceo-principle__stat {
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Transforming the Life of Every Dharavikar : statements, stories, slogan */
.ceo-life {
    padding: 0 0 40px;
}
.inner-page main .ceo-life__statement {
    /* no plate : each one opens with a short rule that fades out to the
       right, as the spread has it */
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.ceo-life__statement::before {
    content: "";
    display: block;
    width: 120px;
    height: 5px;
    margin-bottom: 12px;
    border-radius: 100px;
    background-image: linear-gradient(90deg, var(--purple), rgba(142, 39, 143, 0));
}
.inner-page main .ceo-life .ceo-subtitle {
    /* the row above pulls up by its 20px gutter, so this lands at 30px clear */
    margin-top: 20px;
}
/* the stories and the slogan ride on one photograph : the three panels along
   the top edge, the slogan in the bottom-left corner. The plate is held to
   the width of its row */
.ceo-life__panel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #141416;
}
/* a 12:7 frame anchored to the foot of the file : the crop comes off the
   top, nobody loses their chin, and the faces sit mid-frame with the slogan
   below them rather than across them */
.ceo-life__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: cover;
    object-position: center bottom;
}
.ceo-life__stories {
    position: absolute;
    /* the brackets sit down off the top edge, clear of the panel's corner */
    top: clamp(26px, 4vw, 48px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0 28px;
}
/* each story is tied to its person by a single leader line down its left :
   no rule across the top, the way the spread draws it. The line starts level
   with the first word, runs on down past the copy and curves at its foot,
   turning in toward the face it belongs to */
.ceo-story {
    position: relative;
    padding: 0 18px 0 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
}
.ceo-story::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -1px;
    width: 32px;
    height: clamp(40px, 5vw, 110px);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom-left-radius: 22px;
}
.inner-page main .ceo-story p {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}
.inner-page main .ceo-story p + p {
    margin-top: 14px;
}
.inner-page main .ceo-story strong {
    display: block;
    /* the amber the spread picks the closing line out in */
    color: #eea13a;
}
.inner-page main .ceo-life__slogan {
    position: absolute;
    left: 28px;
    bottom: 28px;
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}
.ceo-life__slogan-line {
    display: table;
    padding: 0 6px;
}
.ceo-life__slogan-line--plate {
    background-color: #1fb3b9;
}
.ceo-life__slogan-line + .ceo-life__slogan-line {
    margin-top: 4px;
}

/* Today vs. Tomorrow : the paired rows and the closing note beside them */
.ceo-compare {
    padding: 0 0 40px;
}
/* the six pairs run as plain copy, two to a line on a grid so each pair sits
   level with its neighbour : the Today line in black, its Tomorrow line in
   bold purple under it, a hairline under each row. The head row is not
   shown, though it is still the table's first child */
.ceo-compare__table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}
.ceo-compare__head {
    display: none;
}
.ceo-compare__row {
    padding: 16px 0;
    border-bottom: 1px solid #e6dfe8;
}
/* the first line of pairs starts flush, the last closes without a rule */
.ceo-compare__head + .ceo-compare__row,
.ceo-compare__head + .ceo-compare__row + .ceo-compare__row {
    padding-top: 0;
}
.ceo-compare__row:nth-last-of-type(-n+2) {
    padding-bottom: 0;
    border-bottom: 0;
}
.inner-page main .ceo-compare__row p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}
.inner-page main .ceo-compare__tomorrow {
    margin-top: 6px;
    font-weight: 700;
    color: var(--purple);
}
/* the closing note carries a bar down its left edge that fades out part way,
   as the spread sets it */
.inner-page main .ceo-compare__closing {
    position: relative;
    margin-top: 16px;
    padding-left: 30px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
}
.ceo-compare__closing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 60%;
    border-radius: 10px;
    background-image: linear-gradient(180deg, var(--purple), rgba(142, 39, 143, 0));
}

/* Experiencing the Future : the Experience Centre */
.ceo-experience {
    padding: 0 0 40px;
}
.ceo-experience .ceo-figure--wide {
    margin-bottom: 24px;
}
.ceo-experience__pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ceo-experience__pillar {
    padding: 20px 22px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border-radius: 12px;
}
.inner-page main .ceo-experience__pillar h4 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 8px;
}
.inner-page main .ceo-experience__pillar p {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
}
/* the closing note runs as plain copy under the pillars, no plate */
.ceo-experience__note {
    margin-top: 30px;
}
.inner-page main .ceo-experience__note p {
    margin: 0;
}

/* Showing the Way, with Dharavi Didi */
.ceo-didi {
    padding: 0 0 40px;
}
.ceo-didi.section--last {
    padding-bottom: 0;
}
/* the tagline in large purple display type, its line under it a size up
   from the body copy, both plain : no plate, no comma marks */
.inner-page main .ceo-didi__tagline {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--purple);
}
.inner-page main .ceo-didi__quote-text {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--purple);
}
.ceo-didi .row + .row {
    margin-top: 10px;
}
/* this one lead runs semi-bold */
.inner-page main .ceo-didi .ceo-lead {
    font-weight: 600;
}
/* the lead-in to the list sits at the list's own size and colour */
.inner-page main .ceo-didi .ceo-subtitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: inherit;
    margin-bottom: 10px;
}
/* a lilac card with a deeper purple plate slipped behind it, offset up and
   to the right, the way the spread sets the panel. The top margin leaves
   room for that plate to show above the card */
.ceo-didi__lifeline {
    position: relative;
    isolation: isolate;
    padding: 28px 30px;
    margin: 20px 0px 0;
    color: #222222;
}
/* both plates are pseudo-elements, because a negative z-index still paints
   over the element's own background : the lilac card at -1, the deeper
   purple plate at -2 behind it */
.ceo-didi__lifeline::before,
.ceo-didi__lifeline::after {
    content: "";
    position: absolute;
    border-radius: 18px;
}
.ceo-didi__lifeline::after {
    inset: 0;
    z-index: -1;
    background-color: #dcbfe2;
}
.ceo-didi__lifeline::before {
    top: -12px;
    right: -12px;
    bottom: 12px;
    left: 12px;
    z-index: -2;
    background-color: #a75dad;
}
.inner-page main .ceo-didi__lifeline-title {
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 12px;
}
.inner-page main .ceo-didi__lifeline p {
    margin: 0;
    color: #222222;
}
/* the g-4 gutter these rows would otherwise miss */
.inner-page main .ceo-progress .row,
.inner-page main .ceo-transformation .row,
.inner-page main .ceo-reimagined .row,
.inner-page main .ceo-city .row,
.inner-page main .ceo-life .row,
.inner-page main .ceo-compare .row,
.inner-page main .ceo-experience .row,
.inner-page main .ceo-didi .row {
    --bs-gutter-y: 10px;
}
/* the card row is a grid with its own gap, so it keeps no gutter at all or
   every cell would carry a 20px top margin on top of that gap */
.inner-page main .ceo-life .row--cards {
    --bs-gutter-y: 0;
}
/* the statements two to a line, each pair sharing the taller depth */
.inner-page main .row.row--cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
/*-----------CEO desk spreads Css End-------------*/

/*-----------Board slider equal cards Css Start-------------*/
/* every card in the run holds the depth of the tallest, so a two-line role
   does not leave its neighbours shorter; the stage is a flex row for that */
.bd-slider .owl-stage {
    display: flex;
}
.bd-slider .owl-item {
    display: flex;
}
/* the management cards sit in an extra .item wrapper : it has to fill the
   slide too, or it shrinks to its content and the card with it */
.bd-slider .owl-item > .item {
    display: flex;
    width: 100%;
}
.bd-slider .owl-item .bd-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.bd-slider .bd-text {
    flex: 1 1 auto;
    min-height: 115px;
}
/*-----------Board slider equal cards Css End-------------*/

/*-----------Leader messages pinned stage Css Start-------------*/
/* app.js adds .cm-stack--pinned on a desktop once GSAP is ready : the three
   messages then sit on top of one another in a full-height stage, and the
   timeline hands over from one to the next. Without the class, and below
   1200px, they stay three plain sections one under another. */
@media (min-width: 1200px) {
    .cm-stack--pinned {
        position: relative;
        height: 100vh;
        min-height: 680px;
        overflow: hidden;
    }
    .cm-stack--pinned .cm-sec {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: 0;
    }
    .cm-stack--pinned .cm-sec > .container {
        width: 100%;
    }
    /* the second and third wait out of sight until the timeline calls them */
    .cm-stack--pinned .cm-sec + .cm-sec {
        opacity: 0;
        visibility: hidden;
    }
}
/*-----------Leader messages pinned stage Css End-------------*/
.bestbtnhome{
    margin-top: 20px;
}
.ceofidmargin10{
    margin: 10px 0px;
}

/*-----------Full-height photo banners under the fixed header Css Start-------------*/
/* the page keeps a 72px top offset for the fixed header, so a 100vh banner ran
   that far past the fold : the four photo banners are sized to the viewport
   less that offset, so the whole banner sits in one screen. The svh line
   covers phone browsers whose toolbars shrink the visible viewport */
.page-banner--socio,
.page-banner--social,
.page-banner--sustainability,
.page-banner--horizons {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
}
/*-----------Full-height photo banners under the fixed header Css End-------------*/

/*-----------Social Mission gutter rows Css Start-------------*/
/* these rows carried their own margin-top, which threw away Bootstrap's
   negative row margin that cancels the columns' g-4 / g-5 top gutter : the
   whole gutter then piled up above every row. The negative margin is put
   back and the intended spacing moves to padding, which the gutter maths
   leaves alone */
.social-livelihood-stats,
.social-aspiration__children,
.social-trust__initiatives,
.social-trust__impact {
    margin-top: calc(-1 * var(--bs-gutter-y));
}
.social-aspiration__children,
.social-trust__impact {
    padding-top: 24px;
}
/* the cards now start on a plate of their own, so they need the drop off
   "These efforts are fostering:" the old ruled box got from its cell padding */
.social-community__benefits {
    padding-top: 16px;
}
.social-trust__initiatives {
    padding-top: 12px;
}
/*-----------Social Mission gutter rows Css End-------------*/

/*-----------Social Mission women programme rows Css Start-------------*/
/* copy on the left, its photograph on the right, each row carrying its own
   space off the one above */
.social-women__row + .social-women__row {
    padding-top: 36px;
}
/*-----------Social Mission women programme rows Css End-------------*/

/*-----------Social Mission cricket grid layout Css Start-------------*/
/* the statement and the group photograph run the full width on top, and the
   girls and players shots sit side by side beneath them, half and half. The
   players shot sits statically, no negative pull up */
.social-sports__cricket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.social-sports__cricket-col {
    grid-column: 1 / -1;
    grid-row: 1;
}
/* the players shot is square and the girls shot 16:9, so the girls shot
   fills the row height (cover crops its edges) and both read at one depth */
.social-sports__girls {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    aspect-ratio: auto;
}
.social-sports__players {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    position: static;
}
/*-----------Social Mission cricket grid layout Css End-------------*/

/*-----------Social Mission stacked g-5 rows Css Start-------------*/
/* this row stacks two full-width columns, so the 48px g-5 vertical gutter
   only opened a deep gap between the copy and its callout : a modest gap
   between the stacked blocks instead */
.social-aspiration__children {
    --bs-gutter-y: 24px;
}
/*-----------Social Mission stacked g-5 rows Css End-------------*/

/*-----------Sustainability banner text wash Css Start-------------*/
/* the sunrise sky is bright where the breadcrumb and headline sit, so a soft
   dark wash lies over the photograph : heaviest at the top left under the
   copy, thinning towards the skyline so the picture still reads. Applies at
   every width since the copy sits in the same corner throughout */
.page-banner--sustainability::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.08) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 70%);
}
.page-banner--sustainability > .container {
    position: relative;
    z-index: 1;
}
/*-----------Sustainability banner text wash Css End-------------*/

/*-----------Board and committee tab Read More Css Start-------------*/
/* the button takes the place the company secretary note held under the
   board slider, and mirrors it under the management committee slider */
.bd-btn {
    margin-top: 20px;
}
/*-----------Board and committee tab Read More Css End-------------*/

/*-----------Socio-Economic split : title foot and the Dharavi Speaks stage Css Start-------------*/
/* the section now ends on the first photograph alone : the title and its
   Read More sit in a band across the foot, over a soft dark wash so the
   white type reads on the photograph */
.se-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 90px 24px 64px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0;
}
.se-foot .se-title {
    position: static;
    top: auto;
    width: auto;
    padding: 0;
    margin-bottom: 24px;
    opacity: 1;
}
.se--static .se-foot {
    opacity: 1;
}

/* When Dharavi Speaks, Mumbai Listens : the second photograph holds the
   frame, the frosted sheet settles over it and the copy arrives on top */
.sv-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #ffffff;
}
.sv-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sv-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #d9d7de;
    background-image: url("../images/home/when-dharavi-speaks-mumbai-listens-img.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.sv-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(244, 238, 247, 0.82);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    opacity: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sv-glass {
        background: rgba(244, 238, 247, 0.96);
    }
}
.sv-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    opacity: 0;
}
.sv-content > .container {
    width: 100%;
}
.sv-content .se-intro {
    margin-bottom: 32px;
}
.sv-btn {
    text-align: center;
    margin-top: 28px;
}
.sv--static .sv-glass,
.sv--static .sv-content {
    opacity: 1;
}
/*-----------Socio-Economic split : title foot and the Dharavi Speaks stage Css End-------------*/
.su-content{
    padding-top: 40px;
}

/*-----------What Dharavi is Saying close line and Read More Css Start-------------*/
/* each card is a full screen with its copy centred, so the last leaves a
   run of empty ground before the closing line : the line is pulled up into
   it, and the Read More sits centred beneath */
.wd-close {
    margin-top: -70px;
}
.wd-btn {
    text-align: center;
    margin-top: 24px;
}
/*-----------What Dharavi is Saying close line and Read More Css End-------------*/

/*-----------ESG tab Read More Css Start-------------*/
/* the panels are colour grounds with white copy, so the pill inverts here :
   a white plate with the panel colour for the type and the arrow disc, and
   the arrow itself in white. --esg is the panel colour each tab sets */
.esg-btn {
    margin-top: 34px;
}
.esg-btn a {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--esg);
}
.esg-btn a:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}
.esg-btn .ds-arrow {
    background: var(--esg);
    transition: background-color .3s ease-in-out;
}
.esg-btn a:hover .ds-arrow {
    background: #ffffff;
}
.esg-btn .ds-arrow svg {
    stroke: #ffffff;
    transition: stroke .3s ease-in-out;
}
.esg-btn a:hover .ds-arrow svg {
    stroke: var(--esg);
}
/*-----------ESG tab Read More Css End-------------*/

/*-----------Hero banner photograph scroll Css Start-------------*/
/* the banner photograph is 1920 x 2160, taller than a landscape screen. The
   section stays one screen with the headline held in place, and the
   photograph is a taller plate behind it, sized to its own proportion, that
   app.js slides upward while the section pins. It starts a little way up so
   the boy sits whole in the first screen. On a narrow screen the plate is
   shorter than the screen, so it holds at least the frame and cover crops */
.hero {
    height: 100svh;
    min-height: 560px;
    aspect-ratio: auto;
}
.hero__fallback {
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    aspect-ratio: 1920 / 2160;
    background-position: center top;
    will-change: transform;
}
.hero__content {
    height: 100%;
    min-height: 0;
}
/*-----------Hero banner photograph scroll Css End-------------*/

/*-----------Dharavi Speaks stage reversed Css Start-------------*/
/* the copy on its frosted sheet is the opening frame now, and the
   photograph rides up from below the fold over it on scroll : so the sheet
   and the copy start visible, and the still starts out of frame on top */
.sv-glass,
.sv-content {
    opacity: 1;
}
.sv-img {
    z-index: 6;
    transform: translateY(100%);
}
.sv--static .sv-img {
    transform: none;
}
/*-----------Dharavi Speaks stage reversed Css End-------------*/

/*-----------Socio-Economic opening plate as a balloon Css Start-------------*/
/* the opening plate is a balloon : wide and round across the crown, the
   sides bellying out, then pinching in to a soft point at the foot. A corner
   radius cannot draw that, so app.js cuts the plate with a clip-path polygon
   and tweens the same points out to the full rectangle as the plate opens.
   Landscape proportions, so the ring of light in the photograph sits whole
   inside the crown */
.se-img1 {
    width: 560px;
    height: 400px;
    border-radius: 0;
}
.se--static .se-img1 {
    clip-path: none;
}
/*-----------Socio-Economic opening plate as a balloon Css End-------------*/


/*-----------Towards New Horizons Read More Css Start-------------*/
/* the button sits under the promise boxes and arrives with them */
.th-btn {
    text-align: center;
    margin-top: 30px;
    opacity: 0;
}
.th--static .th-btn {
    opacity: 1;
}
/*-----------Towards New Horizons Read More Css End-------------*/
/*-----------Towards New Horizons banner opening layer Css Start-------------*/
/* the banner photograph lies over the What Tomorrow Holds photograph for the
   opening beat, under the same scrim, and app.js fades it out as the lockup
   arrives so the photograph beneath takes over with the copy */
.th-bg--banner {
    background-image: url("../images/towards-new-horizons-banner.webp");
}
.th--static .th-bg--banner {
    display: none;
}
/*-----------Towards New Horizons banner opening layer Css End-------------*/

/*-----------Towards New Horizons title size Css Start-------------*/
.th-title {
    font-size: 50px;
    line-height: 60px;
}
/*-----------Towards New Horizons title size Css End-------------*/

/*-----------Dharavi story watch link Css Start-------------*/
/* the three "What Dharavi is saying" films link out to Instagram in place of
   the QR codes, the same line the home page carries */
.dharavi-story__link {
    margin-top: 28px;
    margin-bottom: 0;
}
.dharavi-story__link a {
    color: var(--purple);
    font-weight: 700;
    text-decoration: underline;
}
/*-----------Dharavi story watch link Css End-------------*/

/*-----------Dharavi Social Mission photo sizes Css Start-------------*/
/* the resource centre photo is 748px wide : it is kept near that size, set
   to the right of its column, instead of stretched across the wider track */
.social-resource__grid figure {
    max-width: 520px;
    justify-self: end;
    align-self: start;
}
@media (max-width: 767px) {
    .social-resource__grid figure { justify-self: center; }
}
/*-----------Dharavi Social Mission photo sizes Css End-------------*/

/*-----------Social learning tabs size Css Start-------------*/
/* the chess, sports and role-model tabs keep to a set width rather than
   stretching across the column, so each reads as a short label */
.social-learning li {
    flex: 0 1 200px;
}
/*-----------Social learning tabs size Css End-------------*/

/*-----------Horizons watch link Css Start-------------*/
/* the closing panel links out to the YouTube channel in place of its QR
   code : the word reverses out of a purple block, like "Badal" above it */
.inner-page main .horizons-scan__lead a {
    display: inline-block;
    padding: 0 8px;
    background-color: var(--purple);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.inner-page main .horizons-scan__lead a:hover {
    background-color: #6b1d6c;
    color: #ffffff;
}
/*-----------Horizons watch link Css End-------------*/

/*-----------Social Mission section headings Css Start-------------*/
/* the four section headings on the Dharavi Social Mission page */
#community-title,
#aspiration-title,
#social-trust-title,
#social-sports-title {
    font-size: 24px;
    line-height: 1.3;
}
/*-----------Social Mission section headings Css End-------------*/

/*-----------CEO transformation locality plates Css Start-------------*/
/* each locality is one plate : its shots butt together behind a single
   rounded mask, and the one label rides on the whole group instead of on
   every picture, so Mahim, Matunga and Kurla each read once */
.ceo-locality {
    position: relative;
    margin: 0;
}
/* the shots keep their own shape : every cell is sized from the file's own
   ratio, so nothing is cropped and no corner of a site is lost */
.ceo-locality__grid {
    display: flex;
    align-items: stretch;
    /* a hairline of the page showing through is the only seam between the
       shots : anything wider and the plate falls back into separate cards */
    gap: 3px;
    overflow: hidden;
    border-radius: 12px;
}
.ceo-locality__grid img {
    display: block;
    width: 100%;
    height: auto;
}
/* Mahim : two shots of the same 840x620, so an even split fits them both.
   They sit under one mask with a white seam between, the label riding on the
   pair the way it does on the other localities */
.ceo-locality--pair .ceo-locality__grid {
    gap: 8px;
}
.ceo-locality--pair .ceo-locality__grid > img {
    flex: 1 1 0;
    min-width: 0;
}
/* Matunga and Kurla : three shots across the full width, equal 4:3 cells.
   Sizing each cell from its own file instead left the rows at wildly
   different depths, Matunga near 400px against Kurla's 150 : one shape for
   both holds the two plates level. A file cut to 800x600 fills its cell
   exactly; anything else is covered to fit, so the Matunga portraits lose
   their top and foot until 800x600 versions replace them */
.ceo-locality--trio .ceo-locality__grid > img {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.ceo-locality > figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 12px;
    border-radius: 100px;
    background-color: #ffffff;
    color: var(--purple);
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
}
/* the two lower localities run one under the other, each across the full
   width, so all three of its shots are read at size */
.ceo-locality-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}
/*-----------CEO transformation locality plates Css End-------------*/

/*-----------Social Mission livelihood stats plate Css Start-------------*/
/* the four figures sit on one plate, the same soft purple the aspiration
   cards carry, with a rule between each rather than a gutter : four columns
   of one statement, not four loose blocks */
.social-livelihood-stats {
    padding-top: 16px;
}
.social-livelihood-plate {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 26px 6px;
    background-image: linear-gradient(180deg, rgba(142, 39, 143, 0.04), rgba(142, 39, 143, 0.10));
    border: 1px solid rgba(142, 39, 143, 0.12);
    border-radius: 12px;
}
.social-livelihood-stat {
    padding: 2px 24px;
}
.social-livelihood-stat + .social-livelihood-stat {
    border-left: 1px solid rgba(142, 39, 143, 0.22);
}
.inner-page main .social-livelihood-stat p + p {
    margin-top: 4px;
}
/*-----------Social Mission livelihood stats plate Css End-------------*/

/*-----------Image slots awaiting artwork Css Start-------------*/
/* a slot stands where a photograph will go and names the size it wants, so
   the picture can be cut to fit and dropped straight in */
.img-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    background-color: #f4f1f5;
    background-image: repeating-linear-gradient(135deg, rgba(142, 39, 143, 0.06) 0 10px, transparent 10px 20px);
    border: 1px dashed rgba(142, 39, 143, 0.45);
    color: var(--purple);
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
}
/*-----------Image slots awaiting artwork Css End-------------*/