@media(max-width:1200px){
    .hero-title-top {
        font-size: 29px;
        padding-bottom: 14px;
    }
    .hero-title-main {
        font-size: 72px;
    }
    .hero-content .hero-sub:first-of-type {
        padding-top: 32px;
    }
    .ceo-quote {
        font-size: 26px;
        line-height: 38px;
    }
    .bsr-panel {
        padding: 40px 48px 150px 48px;
    }
    .bsr-title {
        font-size: 30px;
        line-height: 38px;
    }
    .so__stack {
        max-width: 560px;
    }
    .fy-mainhead {
        font-size: 54px;
        line-height: 62px;
    }
    .fyTabs .nav-link {
        font-size: 15px;
        padding: 14px 10px;
    }
    .fy-tabbody {
        padding: 45px 40px;
    }
    .fy-stat h4 {
        font-size: 30px;
        line-height: 38px;
    }

	/*-----Key Performance Indicators-----*/
	.kpi-tabs {
		width: 260px;
	}

	.kpi-item {
		gap: 30px;
		height: 460px;
	}
}
@media(max-width:991px){
    .ft-copy,
    .ft-credit {
        text-align: center;
    }
    .fin-grouphead {
        font-size: 24px;
        line-height: 32px;
    }
    .hero-title-top {
        font-size: 24px;
        padding-bottom: 12px;
    }
    .hero-title-main {
        font-size: 57px;
    }
    .hero-content .hero-sub:first-of-type {
        padding-top: 26px;
    }
    .menu, .nav-icon3 {
        display: none;
    }   
    .my-sidenav {
        width: 0px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        z-index: 999999999;
        height: 100vh;
        max-width: 0px;
        width: 100%;
        background-color:#003974;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .my-sidenav>ul {
        padding: 0px 20px 0px;
    }
    .my-sidenav>ul>li>ul {
        margin-top: 0px;
        display: none;
    }
    .my-sidenav ul.submenu li ul.submenu {
        display: none;
        position: static;
        width: 100%;
    }
    .my-sidenav ul {
        list-style-type: none;
        padding-left: 15px;
    }
    .my-sidenav ul li
    {
        border-bottom: 1px solid #ffffff;
        padding: 15px 0px;
    }
    .my-sidenav > ul > li > ul >li
    {
        border-bottom: 1px solid #ffffff;
        padding: 10px 0px;
    }
    .my-sidenav > ul > li > ul >li:last-child, .my-sidenav ul.submenu li ul.submenu li:last-child
    {
        border-bottom: 0px;
    }
    .my-sidenav ul.submenu li ul.submenu li {
        border-bottom: 1px solid #ffffff;
        padding: 10px 10px;
    }
    .my-sidenav ul.submenu li ul.submenu li a {
        color: #ffffff;
        font-size: 16px;
    }

    .cross-btn1 {
        text-align: right;
        padding: 16px 14px 0px 0px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
    }
    .my-sidenav .submenu-indicator-minus .submenu-indicator {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .my-sidenav .submenu-indicator {
        font-size: 30px;
        position: absolute;
        line-height: 25px;
        right: 15px;
    }
    .my-sidenav>ul>li>a {
        color: #ffffff;
        font-size:18px;
        display:block;
    }
    .my-sidenav>ul>li>ul>li>a {
        color: #ffffff;
        font-size: 14px;
    }
    .my-sidenav>ul>li>ul>li>a img {
        padding-right: 0;
        float: right;
        padding-left: 50px;
    }


    #header {
        padding: 16px 0px;
    }
    #header.sticky {
        padding: 10px 0px;
    }
    #header .logo img {
        height: 44px;
    }
    #header.sticky .logo img {
        height: 38px;
    }
    .fy-highlights {
        padding: 70px 0px;
    }
    .fy-mainhead {
        font-size: 42px;
        line-height: 50px;
    }
    .fyTabs {
        display: none;
    }
    .l-tab-mbl {
        display: block;
        width: 100%;
        margin-top: 35px;
        padding: 14px 18px;
        color: #ffffff;
        background-color: #7751A1;
        border: none;
        border-radius: 0px;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6L8 11L13 6' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 14px 14px;
        padding-right: 46px;
    }
    .fy-tabcontent .tab-pane,
    #fy-tab-a,
    #fy-tab-e {
        border-radius: 0px;
    }
    .fy-tabcontent {
        margin-top: 12px;
    }
    .fy-tabbody {
        padding: 35px 30px;
        min-height: auto;
    }
    .fy-tabhead {
        font-size: 22px;
        line-height: 30px;
        padding-bottom: 26px;
    }
    .about-subhead {
        font-size: 26px;
        line-height: 34px;
        padding-top: 20px;
    }
    .so__scrim {
        background: linear-gradient(90deg, rgba(15, 15, 16, 0.82) 0%, rgba(15, 15, 16, 0.58) 55%, rgba(15, 15, 16, 0.28) 100%);
    }
    .so__stack {
        max-width: 100%;
    }
    .so__title {
        font-size: 34px;
        line-height: 42px;
    }
    .so__progress {
        gap: 10px;
    }
    .esg-media img {
       object-position: right;
    }
    .esg-content {
        align-items: flex-start;
        padding-top: 100px;
    }
    .esg-text {
        padding-top: 20px;
    }
    .esg3-pin {
        padding: 0px 30px;
    }
    .esg3-headline {
        --overlap: 50px;
    }
    .esg3-media {
        max-width: 620px;
    }
    .bod-mainhead {
        padding-bottom: 34px;
    }
    .bod-card {
        margin-bottom: 32px;
    }
    .ft-featured {
        flex-wrap: wrap;
        gap: 22px;
    }
    .ft-featured-btn {
        width: 100%;
        justify-content: center;
    }
    .bsr {
        height: auto;
        padding: 14px;
    }
    .bsr-viewport {
        height: auto;
        display: grid;
        align-items: start;
        overflow: hidden;
    }
    .bsr-slide {
        position: relative;
        grid-area: 1 / 1;
        flex-direction: column;
        gap: 14px;
    }
    /* image on top, copy underneath */
    .bsr-media {
        order: 1;
    }
    .bsr-panel {
        order: 2;
    }
    .bsr-panel {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 30px 26px 88px 26px;
        overflow: visible;
    }
    .bsr-media {
        flex: 0 0 auto;
        height: 240px;
        min-height: 0;
    }
    .bsr-title {
        font-size: 28px;
        line-height: 36px;
    }
    /* the panel is the last block in the stack, so its foot is the foot of
       the slide - the counter sits inside the white box there, as on desktop */
    .bsr-counter {
        position: absolute;
        left: 40px;
        bottom: 42px;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 0px;
        transform: none;
        -webkit-transform: none;
    }
    /* the wide financial tables scroll inside their wrapper below desktop */
    .five-table,
    .ratio-table {
        min-width: 900px;
    }
    .ceo-message {
        padding: 55px 0px 0px 0px;
    }
    .ceo-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* heading, then the copy, with the portrait last */
    .ceo-mainhead {
        order: 1;
    }
    .ceo-info {
        order: 2;
    }
    .ceo-portrait {
        order: 3;
    }
    .ceo-mainhead {
        position: static;
        margin-top: 0px;
        white-space: normal;
        font-size: 34px;
        line-height: 42px;
    }
    .ceo-zshape {
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        height: 60vh;
        min-height: 320px;
        opacity: 0.35;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .ceo-portrait {
        position: relative;
        right: auto;
        bottom: auto;
        height: 60vh;
        min-height: 320px;
        margin-top: 34px;
    }
    .ceo-portrait img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
        margin: 0px auto;
    }
    .ceo-info {
        position: static;
        width: 100%;
        padding-top: 22px;
        transform: none;
        -webkit-transform: none;
    }
    .ceo-quote {
        font-size: 24px;
        line-height: 34px;
    }
    .about-z {
        height: auto;
        padding-bottom: 55px;
    }
    .about-media {
        position: relative;
        height: 46vh;
        min-height: 300px;
    }
    .about-overlay {
        display: none;
    }
    .about-content {
        position: static;
        display: block;
        height: auto;
        padding-top: 35px;
    }
    .about-mainhead {
        font-size: 28px;
        line-height: 36px;
    }
    .so__nav,
    .esg3-nav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 26px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
    }
    .so__progress {
        top: auto;
        bottom: 86px;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        transform: none;
        -webkit-transform: none;
    }
    .so__dot {
        cursor: pointer;
    }
    /* the arrows are 42px tall sitting at bottom:26, so their top edge is 68px;
       the dots clear that with room to spare rather than crowding it */
    .esg3-pager {
        top: auto;
        bottom: 92px;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        transform: none;
        -webkit-transform: none;
    }
    .esg3-pin {
        height: auto;
        padding-top: 40px;
        padding-bottom: 130px;
    }
    .esg3-stage {
        height: auto;
        max-height: none;
        min-height: 0;
        display: grid;
        align-items: start;
    }
    .esg3-slide {
        position: relative;
        grid-area: 1 / 1;
    }
    .esg3-subs {
        align-items: start;
    }
    .so__content {
        padding-bottom: 120px;
    }
    /* Wide financial tables scroll sideways inside their own box, height auto.
       `contain` stops their intrinsic width from widening the layout viewport,
       which was pushing a horizontal scrollbar onto the whole page. */
    .bex-scroll {
        contain: inline-size layout;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*-----`contain: layout` would make this box the containing block its
      sticky header resolves against, so the financial tables keep only the
      inline-size containment. `overscroll-behavior` stops a swipe that runs
      past the last column from rubber-banding the box and handing the
      leftover motion to the page - that chaining is what read as a bounce.-----*/
    .fin-scroll {
        contain: inline-size;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    /*-----Inside a popup the scrollport is .modal-body. A second, shorter
      scrollport here would clip the floating header out of the picture and
      leave its stuck cells painting an empty band over the rows, so the box
      only ever scrolls sideways and the block travels with the modal body.-----*/
    .fin-modal .fin-scroll {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /*-----The floating .fin-colhead carries the header on narrow screens, so
      the table's own header row travels with its rows rather than sticking -
      a stuck cell inside a sideways-scrolling box shows its background but
      leaves its text behind, which is the grey band this replaces.-----*/
    .fin-modal .fin-table thead th,
    .fin-modal .fin-table thead tr + tr th {
        position: static;
        top: auto;
    }

    /*-----Sticky resolves against the scrollport's padding box, so the popup's
      own 18px of breathing room would park the bar that far below the modal
      header and let a row show through the gap. Pulling it back up by the same
      amount seats it flush under the title.-----*/
    .fin-modal .fin-colhead {
        top: -18px;
    }

    /*-----Mobile tables: the label column stays put while the figures scroll.
      A collapsed table hands its borders to the table itself, so a stuck cell
      paints unreliably over the rows sliding behind it - separated borders and
      an opaque background keep the frozen column legible.-----*/
    .fin-tablewrap {
        position: relative;
        margin-top: 18px;
    }

    /*-----The unit line carries the swipe cue on the left and the (Rs Million)
      note on the right. `space-between` alone would centre a lone child, so
      the note takes `margin-left: auto` and holds the right edge whether or
      not the cue is beside it.-----*/
    .fin-unit {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0px 6px 0px;
    }

    .fin-unit-val {
        margin-left: auto;
    }

    /*-----the cue-only rows are collapsed on wide screens, where the cue has
      nothing to say; here they carry it-----*/
    .fin-unit-cue {
        display: flex;
    }

    /*-----Swipe cue: a plain label sharing the unit row, sitting opposite
      the (Rs Million) note. It states a fact about the table rather than
      demanding attention, so it is static - no pill, no animation - and it
      stays put for as long as the table is scrollable.-----*/
    .fin-swipe {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #55555C;
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        text-align: left;
    }

    .fin-swipe img {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        opacity: 0.75;
    }

    /*-----tables that already fit need no cue-----*/
    .fin-unit.is-fit .fin-swipe {
        display: none;
    }

    /*-----Floating column header: a copy of the table's own header row that
      parks at the top of the scrollport once the real one has scrolled away.
      It lives outside .fin-scroll so the page - not the sideways scroll box -
      is what it sticks to; its figure half is transform-synced to the
      scroller instead, which keeps the labels over their columns.-----*/
    .fin-colhead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        height: 0;
        overflow: hidden;
        background-color: #ffffff;
        border-bottom: 0 solid rgba(15, 15, 16, 0.55);
        box-shadow: 0px 6px 12px -10px rgba(15, 15, 16, 0.5);
        opacity: 0;
        pointer-events: none;
    }

    /*-----no slide and no fade: the bar takes over from the header row at the
      moment that row leaves, and anything animated there reads as the table
      bouncing against the scroll-----*/
    /*-----`height: 0` does not collapse a border, so the hidden bar was still
      laying a 1px white line across the top of the real header row - which is
      what faded "Year Ending March 31" behind it. The border belongs to the
      shown state only.-----*/
    .fin-colhead.show {
        height: auto;
        border-bottom-width: 1px;
        opacity: 1;
    }

    /*-----The label half sits above the figures rather than beside them: a
      z-index alone does nothing on a static box, so it is positioned. That
      lets the Note title pass underneath and disappear exactly the way the
      note figures do under the frozen label column below.-----*/
    .fin-colhead-fixed {
        position: relative;
        flex: none;
        width: 152px;
        padding: 6px 8px;
        background-color: #ffffff;
        color: #0F0F10;
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
        text-align: left;
        z-index: 2;
        box-shadow: 5px 0 6px -4px rgba(15, 15, 16, 0.18);
    }

    /*-----at rest the labels sit flush against the figures, so the seam that
      marks a scrolled-away column has nothing to mark yet-----*/
    .fin-tablewrap.at-start .fin-colhead-fixed {
        box-shadow: none;
    }

    /*-----The track underlaps the label half rather than starting after it, so
      a column sliding left travels behind the label and is hidden by it -
      the same way the note figures vanish under the frozen first column in
      the table below. Its own left padding puts the first figure back in the
      right place; the negative margin is what buys the overlap.-----*/
    .fin-colhead-track {
        position: relative;
        z-index: 1;
        flex: 1;
        margin-left: -152px;
        padding-left: 152px;
        overflow: hidden;
    }

    .fin-colhead-track .fin-colhead-inner {
        display: flex;
        will-change: transform;
    }

    .fin-colhead-track span {
        flex: none;
        padding: 6px 8px;
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
        text-align: right;
    }

    .fin-colhead-track .fin-ch-note {
        width: 54px;
        color: #55555C;
        text-align: center;
    }

    .fin-colhead-track .fin-ch-num {
        width: 86px;
        color: #0F0F10;
    }

    .fin-colhead-track .fin-ch-num.fin-ch-cur {
        color: #7751A1;
        background-color: rgba(119, 81, 161, 0.07);
    }

    .fin-tablewrap.is-fit .fin-colhead {
        display: none;
    }

    /*-----The only depth cue is the seam beside the frozen label column, drawn
      by the cells themselves. No trailing fade: an overlay at the right edge
      dimmed the figures the reader had just swiped to.-----*/

    .fin-table {
        border-collapse: separate;
        border-spacing: 0px;
        min-width: 100%;
        width: -webkit-max-content;
        width: max-content;
        table-layout: fixed;
    }

    .fin-table thead th,
    .fin-table tbody th,
    .fin-table tbody td {
        font-size: 13px;
        line-height: 20px;
        padding: 6px 8px;
    }

    /*-----collapsed borders no longer apply, so rows draw their own hairline-----*/
    .fin-table thead th {
        border-top: 1px solid rgba(15, 15, 16, 0.55);
        border-bottom: 1px solid rgba(15, 15, 16, 0.55);
    }

    .fin-table tbody th,
    .fin-table tbody td {
        border-bottom: 1px solid rgba(15, 15, 16, 0.12);
    }

    /*-----The label column is frozen down the whole table, header included.
      Leaving the header's own first cell to scroll let "Particulars" slide
      out and clip to "lars" while the labels beneath it stayed put; freezing
      it keeps the column whole, and the Note heading passes behind it exactly
      as the note figures do.-----*/
    .fin-table tbody th:first-child,
    .fin-table tbody tr > td:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 3;
        background-color: #ffffff;
    }

    .fin-table thead tr:first-child th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 4;
        background-color: #ffffff;
        background-clip: padding-box;
        box-shadow: 5px 0 6px -4px rgba(15, 15, 16, 0.18);
    }

    /*-----at rest the header label sits flush against the figures, so the
      seam has nothing to mark yet-----*/
    .fin-tablewrap.at-start .fin-table thead tr:first-child th:first-child {
        box-shadow: none;
    }

    .fin-table thead tr:first-child th:first-child,
    .fin-table tbody th:first-child,
    .fin-table tbody tr > td:first-child {
        width: 152px;
        min-width: 152px;
        max-width: 152px;
        white-space: normal;
        word-break: break-word;
    }

    /*-----shaded rows carry their tint into the frozen column-----*/
    .fin-table .fin-row-head th:first-child {
        background-color: #f4f4f5;
    }

    /*-----fixed layout takes its widths from the first row, so the figure
      columns state theirs rather than inheriting the desktop values-----*/
    .fin-table .fin-note {
        width: 54px;
    }

    .fin-table .fin-num {
        width: 86px;
    }

    /*-----A seam marks where the frozen column ends, but only once something
      has actually slid underneath it: at rest the labels sit flush against
      the figures and a line there would be marking nothing. A box-shadow on
      the cell does this without the pseudo-element that used to draw a
      standing gradient down the unscrolled table.-----*/
    .fin-table tbody th:first-child,
    .fin-table tbody tr > td:first-child {
        box-shadow: 5px 0 6px -4px rgba(15, 15, 16, 0.18);
    }

    .fin-tablewrap.at-start .fin-table tbody th:first-child,
    .fin-tablewrap.at-start .fin-table tbody tr > td:first-child {
        box-shadow: none;
    }

    .fin-tablewrap.is-fit .fin-table tbody th:first-child,
    .fin-tablewrap.is-fit .fin-table tbody tr > td:first-child {
        box-shadow: none;
    }

    /*-----The five-year and ratio tables size their columns from a colgroup of
      percentages, which on a phone hands the label column most of the width
      and leaves room for a single year. Fixed layout with stated pixel widths
      overrides the colgroup, so ten year columns stay an even swipe apart.-----*/
    .five-table {
        table-layout: fixed;
    }

    /*-----These tables head their columns over two rows, so the second row
      opens on a year, not a label - width belongs to the spanning cell and to
      the body labels, never to `thead th:first-child`, which would hand a year
      column the label's width and push the rest of the years off the table.-----*/
    .five-table thead th[rowspan],
    .five-table tbody th:first-child {
        width: 152px;
        min-width: 152px;
        max-width: 152px;
    }

    /*-----the spanning label is bottom-aligned on desktop, which drops it onto
      the purple current-year rule once the rows tighten up-----*/
    .five-table thead th[rowspan] {
        vertical-align: middle;
    }

    /*-----The body labels are frozen and opaque, so a year sliding left
      disappears behind them. The header's own label cell was not, which left
      "Consolidated" and the year row travelling across the top of that column
      while the figures beneath them vanished under it. Freezing it too means
      the whole left edge hides its columns alike.-----*/
    .five-table thead tr:first-child th[rowspan]:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 4;
        background-color: #ffffff;
        white-space: normal;
        word-break: break-word;
        vertical-align: top;
    }

    /*-----under fixed layout the colgroup is what sets the widths, so the
      desktop percentages are restated in pixels rather than fought cell-side-----*/
    .five-col-name,
    .ratio-col-name {
        width: 152px;
    }

    .five-col-num,
    .ratio-col-num {
        width: 68px;
    }

    /*-----the ratio table carries a unit column between label and figures-----*/
    .ratio-col-unit {
        width: 52px;
    }

    /*-----Full-width group headings (ASSETS, Financial assets) span every
      column, so freezing the cell is not enough - the cell stays put but its
      text still begins at the table's true left edge, which has scrolled out
      of view, clipping "ASSETS" down to "TS". Pinning the cell AND sticking
      its text inside it keeps the heading beside the rows it introduces.-----*/
    .fin-table tbody tr > th[colspan]:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 3;
        width: auto;
        min-width: 0;
        max-width: none;
        white-space: normal;
        padding-left: 0px;
        padding-right: 0px;
    }

    /*-----The heading travels with the rows it introduces, so it is measured
      against the visible box rather than the table's full width: capping it
      there lets a long heading wrap instead of running off the side, and the
      8px inset keeps its first character clear of the frozen column's
      shadow.-----*/
    .fin-table tbody tr > th[colspan]:first-child > .fin-rowlabel {
        position: -webkit-sticky;
        position: sticky;
        left: 8px;
        display: inline-block;
        max-width: var(--fin-view, 100%);
        padding-right: 8px;
    }

    /*-----a heading that spans every column has no seam to mark-----*/
    .fin-table tbody tr > th[colspan]:first-child {
        box-shadow: none;
    }

	/*-----Key Performance Indicators-----*/
	.kpi-mainhead {
		padding-bottom: 30px;
	}

	.kpi-body {
		display: block;
	}

	.kpi-tabs {
		display: none;
	}

	.kpi-tab-select {
		display: block;
		width: 100%;
		padding: 14px 44px 14px 20px;
		margin-bottom: 24px;
		border: 1px solid rgba(119, 81, 161, 0.35);
		border-radius: 100px;
		background-color: #ffffff;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%278%27 viewBox=%270 0 14 8%27 fill=%27none%27%3E%3Cpath d=%27M1 1L7 7L13 1%27 stroke=%27%237751A1%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 20px center;
		color: #7751A1;
		font-size: 16px;
		line-height: 24px;
		font-weight: 700;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.kpi-item {
		gap: 24px;
		padding: 24px;
		height: 400px;
	}

	.kpi-graph {
		height: 280px;
	}

    /*-----Board expertise: the same treatment as the financial tables. The
      director names stay put while the five skill columns scroll past, a
      mirrored header parks at the top of the page once the real one leaves,
      and the seam beside the names only appears once something has slid
      under it.-----*/
    .bex-tablewrap {
        position: relative;
    }

    /*-----The swipe cue shares the heading's line rather than taking one of
      its own, sitting opposite "Board expertise". The heading keeps its
      inline-block underline, so the rule stays tight to the words instead of
      stretching across the row; `baseline` sets the two on the same line of
      text despite their different sizes.-----*/
    .bex-headrow {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .bex-headrow .fin-swipe {
        flex: none;
    }

    .bex-table {
        border-collapse: separate;
        border-spacing: 0px;
        min-width: 100%;
        width: -webkit-max-content;
        width: max-content;
        table-layout: fixed;
    }

    .bex-table thead th,
    .bex-table tbody th,
    .bex-table tbody td {
        font-size: 13px;
        line-height: 20px;
    }

    .bex-table tbody th {
        font-size: 14px;
        line-height: 21px;
    }

    /*-----collapsed borders no longer apply, so the header draws its own-----*/
    .bex-table thead th {
        padding: 0px 10px 10px 10px;
        border-top: 3px solid #0F0F10;
        border-bottom: 1px solid rgba(15, 15, 16, 0.18);
    }

    .bex-table tbody th,
    .bex-table tbody td {
        border-bottom: 1px solid rgba(15, 15, 16, 0.18);
    }

    .bex-table tbody td {
        padding: 12px 10px;
    }

    /*-----the name column is frozen; the header's first cell matches its
      width so the two stay in step-----*/
    .bex-table tbody th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 3;
        padding: 12px 10px 12px 0px;
        background-color: #f7f4f3;
        box-shadow: 5px 0 6px -4px rgba(15, 15, 16, 0.18);
    }

    .bex-tablewrap.at-start .bex-table tbody th:first-child {
        box-shadow: none;
    }

    .bex-tablewrap.is-fit .bex-table tbody th:first-child {
        box-shadow: none;
    }

    .bex-table thead th:first-child,
    .bex-table tbody th:first-child {
        width: 132px;
        min-width: 132px;
        max-width: 132px;
        white-space: normal;
        word-break: break-word;
    }

    /*-----The first skill column carries by far the longest heading, so it
      takes the width it needs to break into a few sensible lines rather than
      a narrow stack of single words. The other four are short enough to
      share a smaller measure.-----*/
    .bex-table thead th:nth-child(2),
    .bex-table tbody td:nth-child(2) {
        width: 230px;
    }

    .bex-table thead th:nth-child(n+3),
    .bex-table tbody td:nth-child(n+3) {
        width: 124px;
    }

    /*-----The label cell is frozen so the heading row starts where the names
      do, rather than sliding out from under them.-----*/
    .bex-table thead th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 4;
        background-color: #f7f4f3;
    }

    /*-----A heading travels with the column it names, or the words stop
      matching the ticks underneath. It sits at the bottom of the row so the
      shorter headings line up with the longest one's last line.-----*/
    .bex-table thead th:not(:first-child) {
        vertical-align: bottom;
    }

    /*-----the mirrored header borrows the financial tables' bar, restyled for
      this table's centred, lighter column headings-----*/
    .bex-tablewrap .fin-colhead {
        background-color: #f7f4f3;
        border-bottom: 1px solid rgba(15, 15, 16, 0.18);
        border-top: 3px solid #0F0F10;
    }

    .bex-tablewrap .fin-colhead-fixed {
        width: 132px;
        padding: 8px 10px 8px 0px;
        background-color: #f7f4f3;
        box-shadow: 5px 0 6px -4px rgba(15, 15, 16, 0.18);
    }

    .bex-tablewrap.at-start .fin-colhead-fixed {
        box-shadow: none;
    }

    .bex-tablewrap .fin-colhead-track {
        margin-left: -132px;
        padding-left: 132px;
    }

    /*-----these headings are long, so the bar states them in one clipped line
      rather than growing to three - the full wording is in the table-----*/
    .bex-tablewrap .fin-colhead-track span {
        width: 132px;
        padding: 8px 10px;
        color: #55555C;
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 767px) {
    .fin-grouphead {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 16px;
    }
    .hero-overlay {
        width: 100%;
        background-image:initial;
    }
    .hero-title-top {
        font-size: 19px;
        padding-bottom: 9px;
    }
    .hero-title-main {
        font-size: 44px;
    }
    .hero-sub {
        font-size: 11px;
        line-height: 20px;
        letter-spacing: 0.12em;
    }
    .hero-content .hero-sub:first-of-type {
        padding-top: 10px;
    }
    .ceo-mainhead {
        font-size: 28px;
        line-height: 36px;
    }
    .ceo-sign h4 
    {
        font-size: 28px;
        line-height: 36px;
    }
    .ceo-quote {
        font-size: 21px;
        line-height: 31px;
    }
    .ceo-sign {
        margin-top: 26px;
    }
    .ceo-cta {
        margin-top: 24px;
    }
    .bsr-media {
        height: 240px;
    }
    .bsr-panel {
        padding: 24px 20px 84px 20px;
    }
    .bsr-counter {
        left: 34px;
    }
    .bsr-title {
        font-size: 24px;
        line-height: 32px;
    }
    .bsr-title span {
        font-size: 17px;
        line-height: 24px;
    }
    .bsr-logo img {
        height: 30px;
    }
    .bsr-logo-z5 img {
        height: 48px;
    }
    .bsr-logos {
        gap: 16px;
        padding-top: 20px;
    }
    .ft {
        padding-top: 55px;
    }
    .ft-mainhead {
        font-size: 34px;
        line-height: 40px;
        padding-bottom: 28px;
    }
    .ft-featured {
        padding: 20px;
    }
    .ft-featured-title {
        font-size: 24px;
        line-height: 32px;
    }
    .ft-tile {
        min-height: 0px;
    }
    .ft-bar {
        margin-top: 40px;
    }
    .ft-copy,
    .ft-credit {
        text-align: center;
    }
    .ft-social {
        padding: 16px 0px;
    }
    .fin-mainhead {
        font-size: 34px;
        line-height: 40px;
        padding-bottom: 28px;
    }
    .fin-title {
        font-size: 18px;
        line-height: 26px;
    }
    .fin-block + .fin-block {
        padding-top: 40px;
    }
    .fin-modal .modal-header,
    .fin-modal .modal-body {
        padding: 18px;
    }
    .fin-modal-title {
        font-size: 19px;
        line-height: 26px;
    }
    .fin-sign {
        gap: 22px 30px;
    }
    .bex-head {
        font-size: 19px;
        line-height: 26px;
        margin-bottom: 0px;
    }
    .bod-mainhead {
        font-size: 34px;
        line-height: 40px;
        padding-bottom: 28px;
    }
    .bod-name {
        font-size: 16px;
        line-height: 22px;
    }
    .bod-role {
        font-size: 14px;
        line-height: 21px;
    }
    .bod-legend {
        gap: 12px 22px;
    }
    /* shorthand here would drop the padding-bottom that reserves room for the
       pager and arrows, so only the side padding is set */
    .esg3-pin {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 120px;
    }
    /* the slides are absolutely positioned inside the stage, so it needs a real
       height. 86vh ignored the pin's padding and ran the CTA under the dots and
       arrows; subtracting the reserved strip keeps the slide clear of them. */
    .esg3-stage {
        min-height: 0;
    }
    /* mobile only: the headline sits fully above the image instead of half
       overlapping it, so the stack reads title, image, copy, button and fits
       one screen. Desktop keeps the overlapping treatment. */
    .esg3-headline {
        margin: 0px 0px 12px;
    }
    .esg3-subhead {
        position: relative;
        top: auto;
        width: 100%;
        padding-bottom: 8px;
        font-size: 13px;
        line-height: 18px;
    }
    /* nothing sits over the image here, so the scrim would only darken it */
    .esg3-media::after {
        display: none;
    }
    .esg3-media {
        /* auto height keeps the frame proportional; the vh cap stops a tall
           image from pushing the copy and button off the screen */
        height: 34vh;
        max-height: 300px;
        min-height: 170px;
        margin-bottom: 14px;
    }
    .esg3-desc {
        font-size: 16px;
        line-height: 24px;
    }
    .esg3-cta {
        margin-top: 12px;
    }
    .esg3-pager li {
        width: 6px;
        height: 6px;
    }
    .esg-mainhead {
        font-size: 34px;
        line-height: 40px;
    }
    .esg-text {
        padding-top: 16px;
    }
    /* the two title words sit side by side and never wrap on desktop, which
       crops long pairs like "Stakeholder Engagement" on a phone; here they are
       allowed to stack instead */
    .so__title {
        font-size: 28px;
        line-height: 36px;
        white-space: normal;
    }
    .so__title .so__mask {
        display: block;
    }
    .so__title .so__mask + .so__mask {
        margin-left: 0px;
    }
    .so__sub {
        font-size: 13px;
        line-height: 21px;
        padding-top: 14px;
    }
    .so__text {
        padding-top: 14px;
    }
    .so__dot {
        width: 6px;
        height: 6px;
    }
    .about-subhead {
        font-size: 22px;
        line-height: 30px;
        padding-top: 16px;
    }
    .about-text {
        padding-top: 16px;
    }
    .about-cta {
        margin-top: 24px;
    }
    .fy-highlights {
        padding: 55px 0px;
    }
    .fy-mainhead {
        font-size: 34px;
        line-height: 42px;
    }
    .fy-intro {
        padding-top: 16px;
    }
    .fy-tabbody {
        padding: 30px 22px;
    }
    .fy-card,
    .fy-stat {
        margin-bottom: 26px;
    }
    .fy-stat h4 {
        font-size: 28px;
        line-height: 36px;
    }
    .fy-stat h4 .unit {
        font-size: 18px;
    }
    .scroll-down {
        bottom: 25px;
        gap: 8px;
        font-size: 13px;
    }
    .scroll-down .scroll-arrow svg {
        width: 14px;
        height: 14px;
    }
    #header {
        padding: 14px 0px;
    }
    #header .logo img {
        height: 38px;
    }
    #header.sticky .logo img {
        height: 34px;
    }


	/*-----Key Performance Indicators-----*/
	.kpi {
		padding: 40px 0px;
	}

	.kpi-item {
		display: block;
		height: auto;
		padding: 20px;
	}

	.kpi-graph {
		max-width: 100%;
		height: 260px;
		margin-bottom: 20px;
	}

	.kpi-slider .owl-nav {
		justify-content: center;
		margin-top: 20px;
	}

	.kpi-count {
		justify-content: center;
		margin-top: 16px;
	}


	/*-----Hero Banner-----*/
	.hero-video .hero-video-desk {
		display: none;
	}

	.hero-video .hero-video-mbl {
		display: block;
	}
    .hero-content
    {
        top:25%;
    }
}
@media (max-width: 420px){
    .hero-title-top {
        font-size: 16px;
    }
    .hero-title-main {
        font-size: 35px;
    }
    .hero-sub {
        font-size: 10px;
        line-height: 18px;
    }
    .ceo-mainhead {
        font-size: 28px;
        line-height: 36px;
    }
    .ceo-quote {
        font-size: 20px;
        line-height: 28px;
    }
    .bsr-media {
        height: 240px;
    }
    .bsr-title {
        font-size: 21px;
        line-height: 29px;
    }
    .bsr-eyebrow {
        font-size: 12px;
    }
    .ft-mainhead {
        font-size: 28px;
        line-height: 34px;
    }
    .ft-tile {
        padding: 20px 18px;
    }
    .fin-mainhead {
        font-size: 28px;
        line-height: 34px;
    }
    .bex-head {
        font-size: 17px;
        line-height: 24px;
    }
    .bod-mainhead {
        font-size: 28px;
        line-height: 34px;
    }
    .esg-mainhead {
        font-size: 28px;
        line-height: 34px;
    }
    .so__title, .kpi-mainhead {
         font-size: 28px;
        line-height: 36px;
    }

    .about-subhead {
        font-size: 22px;
        line-height: 28px;
    }
    .fy-mainhead {
        font-size: 28px;
        line-height: 36px;
    }
    .fy-tabbody {
        padding: 26px 18px;
    }
    .fy-stat h4 {
        font-size: 26px;
        line-height: 34px;
    }
    #header .logo img {
        height: 34px;
    }
    #header.sticky .logo img {
        height: 32px;
    }

}
@media (max-width: 380px){

}

/* ============================================================
   SHORT-VIEWPORT FIXES
   The full-height sections below are pinned to 100vh with
   overflow:hidden, so their contents are governed by viewport
   HEIGHT, not width. A 1920x1080 screen at 150% scaling reports
   roughly 1280x720 - wide enough to miss every max-width rule
   above, but far too short for copy laid out for a ~900px stage.
   These queries key off height so the same fixes apply on any
   short desktop window.
   ============================================================ */

@media (min-width: 768px) and (max-height: 900px) {
    /*-----Chairman / CEO-----*/

    /*-----About Z / ESG intro-----*/
    .about-mainhead,
    .about-subhead {
        padding-top: 18px;
    }
    .about-text,
    .esg-text {
        padding-top: 16px;
    }
    .about-cta {
        margin-top: 22px;
    }

    /*-----Strategic Overview-----*/
    .so__sub {
        padding-top: 12px;
    }
    .so__text {
        padding-top: 12px;
    }
    .so__ctawrap {
        padding-top: 18px;
    }

    /*-----Business Segment Review-----*/
    .bsr-panel {
        padding: 26px 52px 102px 52px;
    }
    .bsr-counter {
        bottom: 34px;
    }
    .bsr-title {
        margin-bottom: 12px;
    }
    .bsr-eyebrow {
        padding-bottom: 10px;
    }
    .bsr-brands,
    .bsr-cta + .bsr-brands {
        gap: 18px 34px;
        margin-top: 22px;
        padding-top: 20px;
    }
    .bsr-brand-text {
        padding-top: 4px;
    }
    .bsr-logo img {
        height: 29px;
    }
    .bsr-logo-z5 img {
        height: 48px;
    }
    .bsr-brand .bsr-logo {
        height: 31px;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    .bsr-cta {
        margin-top: 18px;
    }
    .bsr-cta-link {
        margin-top: 12px;
    }

    /*-----ESG pillars: Environmental / Social / Governance-----*/
}

@media (min-width: 768px) and (max-height: 760px) {
    /*-----Chairman / CEO-----*/

    /*-----About Z / ESG intro-----*/
    .about-mainhead,
    .about-subhead {
        padding-top: 14px;
    }
    .about-text,
    .esg-text {
        padding-top: 12px;
    }
    .about-cta {
        margin-top: 16px;
    }

    /*-----Strategic Overview-----*/

    /*-----Business Segment Review-----*/
    .bsr-panel {
        padding: 24px 40px 104px 40px;
    }
    .bsr-counter {
        bottom: 28px;
    }
    .bsr-brands,
    .bsr-cta + .bsr-brands {
        gap: 14px 28px;
        margin-top: 16px;
        padding-top: 15px;
    }
    .bsr-brand-text {
        padding-top: 3px;
    }
    .bsr-logo img {
        height: 25px;
    }
    .bsr-logo-z5 img {
        height: 40px;
    }
    .bsr-brand .bsr-logo {
        height: 27px;
        margin-top: 3px;
        margin-bottom: 6px;
    }
    .bsr-cta {
        margin-top: 14px;
        padding: 6px 14px;
    }
    .bsr-cta-link {
        margin-top: 10px;
        padding: 0px;
    }

    /*-----ESG pillars-----*/
}

@media (min-width: 768px) and (max-height: 640px) {
    .bsr-panel {
        padding: 20px 30px 98px 30px;
    }
    .bsr-counter {
        bottom: 45px;
    }
}

/* The three (min-width: 768px) and (max-height: ...) blocks above are written
   for the desktop layout, where the counter is absolutely positioned inside
   the white panel and the copy is beside the image. Between 768px and 991px
   the section is stacked, so the panel needs its own foot padding and the
   counter its own offset. Re-assert both here, after those blocks, so a short
   tablet window behaves like every other mobile size. */
@media (min-width: 768px) and (max-width: 991px) {
    .bsr-panel {
        padding: 30px 26px 88px 26px;
    }
    .bsr-counter {
        bottom: 42px;
    }
}