/*Module Count  */
.stats-percentage-wrapper .image-wrapper{
  margin-top:70px;
  margin-bottom:0
}
.stats-percentage-wrapper .image-wrapper img{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 92%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100px 100%, 0 calc(100% - 65px));
  min-height:350px;
  object-fit:cover
}
.stats-percentage-wrapper .counter-inner-wrapper {
  position: relative;
}

.stats-percentage-wrapper .slider-controls {
  display: none;
  position: absolute !important;
  bottom: 0;
  right: 0;
  align-items: center;
}
.stats-percentage-wrapper .slider-controls.is-active {
  display: flex;
}
.stats-percentage-wrapper .slider-controls .slick-arrow {
  font-family: 'icomoon' !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  height:40px;
  width:40px;
  min-width: auto;
  clip-path: unset;
  -webkit-clip-path: unset;
  padding: 0;
  font-size: 0px;
  left: 16px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  border:none
}
}

.stats-percentage-wrapper .slider-controls .slick-arrow {
  width: 40px;
  height: 40px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;
  padding: 0;
}
.stats-percentage-wrapper .slider-controls .slick-prev,.slider-controls .slick-next  {
  background: var(--primary-2);
}

.stats-percentage-wrapper .slider-controls .slick-arrow.slick-disabled {
  background: rgba(148, 48, 255, 0.30);
  cursor: default;
}
.stats-percentage-wrapper .slider-controls .slick-arrow.slick-disabled::after{
  color:var(--base-5)
}
.stats-percentage-wrapper .slider-controls .slick-prev.slick-arrow::after{
  transform:rotate(180deg)
}
.stats-percentage-wrapper .slider-controls .slick-arrow::after {
  content: "\e90a";
  position: absolute;
  display: block;
  transition: all 0.5s;
  color: var(--white-color);
  font-size: 10px;
}


.stats-percentage-wrapper .slide-counter {
  background: var(--base-5);
  color: var(--base-1);
  font-size: 14px;
  font-weight: 600;
  line-height:18px;
  padding: 10px 5px;
  white-space: nowrap;
  height:40px;
  min-width:45px;
  justify-content:center;
  display:flex;
  gap:2px;
} 
.stats-percentage-wrapper .slick-track{
  display:flex;
  flex:1
}
.stats-percentage-wrapper .slick-track>div{
  height:auto;
  flex:1
}

@media (max-width: 768px) {
  .stats-percentage-wrapper .counter-inner-wrapper>.row{
    margin-top:40px
  }
  .stats-percentage-wrapper .image-wrapper{
    margin-top:30px
  }
}
/*  Module Solutions and Services*/
.module-solutions-and-services .row{row-gap:50px}
.module-solutions-and-services .solutions-and-services-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height:100%
}
.module-solutions-and-services .solutions-and-services-section-title {
  align-self: flex-start;
  margin: 0;
  padding: 20px;
  background: var(--base-3);
  color:var(--base-1);
  text-transform:none;
  max-width:80%
}
.module-solutions-and-services .solutions-and-services-cards-wrapper {
  flex: 1;
  display: flex;
  gap: 32px;
  background: var(--base-3);
}

.module-solutions-and-services .solutions-and-services-cards-wrapper > .solutions-and-services-card {
  flex: 1 1 0;
}
.module-solutions-and-services .solutions-and-services-card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: var(--base-3);
}
.module-solutions-and-services .solutions-and-services-card ul{
list-style:inside
}
.module-solutions-and-services .solutions-and-services-card-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.module-solutions-and-services .solutions-and-services-card-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}
.module-solutions-and-services .solutions-and-services-card-title {
  margin: 0;
  line-height: 28px;
  text-transform: none;
  color: var(--base-1);
}
.module-solutions-and-services .solutions-and-services-card-text {
  margin: 0;
}
.module-solutions-and-services .solutions-and-services-card-stat {
  margin: 0;
  color:var(--base-1);
  margin-top:auto
}
.module-solutions-and-services .solutions-and-services-card-image {
  width: 100%;
}

.module-solutions-and-services .solutions-and-services-card-image img {
  margin-top: auto;
  width: 100%;
  height: 30.6rem;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 27px));
}
.solutions-and-services-card-content+.solutions-and-services-card-image{
  margin-top:auto;
  padding-top:48px
}
.solutions-and-services-card-logo+.solutions-and-services-card-content{
  margin-top:40px
}
.solutions-and-services-card-cta{
  display:inline-flex;
  width:max-content
}
.module-solutions-and-services .featured-large-text-title+div{
  margin-top:70px
}
.module-solutions-and-services .featured-large-main-content-wrapper p:last-child{
  margin-bottom:0
}
@media (max-width: 991.98px) {
  .module-solutions-and-services .solutions-and-services-card{
    padding:20px}
  .solutions-and-services-card-logo+.solutions-and-services-card-content{
    margin-top:30px
  }
  .solutions-and-services-card-content+.solutions-and-services-card-image{
    margin-top:auto;
    padding-top:30px
  }
  .solutions-and-services-card-content{
    gap:30px
  }
  .module-solutions-and-services .featured-large-text-title+div{
    margin-top:50px
  }
}
@media (max-width: 767.98px) {

  .module-solutions-and-services .solutions-and-services-cards-wrapper {
    flex-direction: column;
    gap: 0;
  }
}
/* Module Full Wisth Image with Content */
.mitf {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;        
  min-height: 40rem;
  background-color: rgb(43 42 78);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4rem),
    calc(100% - 4rem) 100%,
    0 100%
  );
}
.mitf__image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.mitf__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgb(43 42 78 / 1)    0%,
    rgb(43 42 78 / .72) 20%,
    rgb(43 42 78 / .38) 42%,
    rgb(43 42 78 / 0)   64%
  );
  pointer-events: none;
}
.mitf__content {
  position: relative;
  z-index: 3;
  padding:6.4rem;
  max-width:58.333333%;
}
.mitf .mitf__headline {
  text-wrap: balance;
}
.mitf__eyebrow+.mitf__headline, .mitf__section-title+.mitf__eyebrow{
  margin-top:2rem
}
.mitf__headline>*:last-child{
  margin-bottom:0
}
.mitf__headline p{
  font-size:2.2rem;
  line-height:3rem;
  font-weight:500
}
@media (max-width: 991.98px) {
  .mitf {
    justify-content: flex-start;
    min-height: 54.3rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 3.6rem),
      calc(100% - 3.6rem) 100%,
      0 100%
    );
  }
  .mitf__image {
    top: 37%;
    height: 63%;
    object-position: 100% 50%;
  }
  .mitf__gradient {
    background: linear-gradient(
      180deg,
      rgb(43 42 78 / 1)    0%,
      rgb(43 42 78 / 1)   38%,
      rgb(43 42 78 / .52) 47%,
      rgb(43 42 78 / .16) 52%,
      rgb(43 42 78 / 0)   56%
    );
  }
  .mitf__content {
    padding:2rem;
    max-width:100%
  }
}

/* Expandable content in Large Featured Cards Module */
.services-accordion {
  display: flex;
  flex-direction: column;
  width:100%;
  color: var(--navy);
}
.services-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.services-accordion-trigger:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -1px;
}
.services-accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.services-accordion-icon span {
  position: absolute;
  inset: 0;
  display: none;
  width: 40px;
  height: 40px;
  font-size: 16px;
  padding: 10px;
  border: 2px solid var(--primary-2);
  color: var(--base-1);
  font-weight: 700;
}

.services-accordion-trigger[aria-expanded="false"] .icon-plus,
.services-accordion-trigger[aria-expanded="true"] .icon-minus {
  display: flex;
  justify-content:center;
  align-items:center
}
.services-accordion-panel {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .35s ease, visibility .35s;
}

.services-accordion:has([aria-expanded="true"]) .services-accordion-panel {
  height: auto;
  visibility: visible;
}

.services-accordion-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-top: 15px;
  max-width:330px
}

.services-accordion-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.services-accordion-stat {
  color: var(--primary-2);
}

.services-accordion-text>*:last-child {
  margin-bottom:0;
}

.services-accordion-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.services-accordion-logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-accordion-logos>div{
  max-width: calc((100% - 80px) / 3);
}
.large-cards-holder .services-accordion+.featured-large-full-card-wrapper{
  margin-top:44px
}
@media (prefers-reduced-motion: reduce) {
  .services-accordion-panel {
    transition-duration: .01ms;
  }
}
@media (max-width: 991.98px) {
  .services-accordion {
    max-width: none;
  }

  .services-accordion-title {
    font-size: 18px;
    line-height: 26px;
  }

  .services-accordion-stat {
    font-size: 22px;
    line-height: 26px;
  }

  .services-accordion-content {
    gap: 30px;
  }
  .large-cards-holder .services-accordion+.featured-large-full-card-wrapper{
    margin-top:30px !important
  }
  .services-accordion-logos>div{
    max-width: calc((100% - 40px) / 2);
  }
}
/* CSS updated while content pop */
.module-featured-news .news-main-wrapper .news-inner-wrapper .news-item .image{
clip-path:polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 27px))
}

/* CSS Changes while client feedback */
.card-wrapper .variant-card .image-wrapper-variant{
width:100%
}
.brands-image-with-text-module.height-auto .image-box img{
height:auto;
max-height:228px
}
.image-text-signpost-main-wrapper .signpost-row{
max-width:unset;
margin:0 -15px
}

.header-top-box .right-nav-container{
	padding: 7px 0px 8px;
}
header.mega-header .header-search{margin-left:5px;}
@media (max-width: 991.98px) {
  .header-wrapper {
    position: relative;
  }
  .header-wrapper .header-search {
    position: absolute;
    top: 17px;   
    right: 63px; 
    z-index: 5;
  }
}
/*News Start*/
.main-news-fist-card .news-link-details .cta{
  color: var(--white-color) !important;
  border-color: var(--white) !important;
}

/* Large news card: push news-link-details (Sign Up) to the bottom */
.news-main-wrapper .news-items-wrapper > .large-news.news-item > .main-news-fist-card {
  display: flex;
  flex-direction: column;
}

.news-main-wrapper .news-items-wrapper > .large-news.news-item > .main-news-fist-card > .image {
  flex-shrink: 0;
}

.news-main-wrapper .news-items-wrapper > .large-news.news-item .news-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
} 

.news-main-wrapper .news-items-wrapper > .large-news.news-item .news-link-details {
  margin-top: auto;
}

/* This card has no arrow link, so drop the 54px bottom padding (bottom gap = 30px, same as the left) */
.news-main-wrapper .news-items-wrapper > .large-news.news-item > .main-news-fist-card:has(.news-link-details) {
  padding-bottom: 10px;
}
/*News End*/
/*======================== Global Override Start ======================== */

.subtitle-wrapper.navy-color, .subtitle-wrapper.navy-color > * {color: var(--navy);}
.subtitle-wrapper.purple-color, .subtitle-wrapper.purple-color > * {color: var(--purple);}
.subtitle-wrapper.secondary-blue-color, .subtitle-wrapper.secondary-blue-color > * {color: var(--secondary-blue);}
.subtitle-wrapper.tech-red-color, .subtitle-wrapper.tech-red-color > * {color: var(--tech-red);}
.subtitle-wrapper.energy-green-color, .subtitle-wrapper.energy-green-color > * {color: var(--energy-green);}
.subtitle-wrapper.heathcare-blue-color, .subtitle-wrapper.heathcare-blue-color > * {color: var(--heathcare-blue);}
.subtitle-wrapper.black-color, .subtitle-wrapper.black-color > * {color: var(--black-color);}



.customer-experience__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

/* ---------- Content column ---------- */
.customer-experience__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  flex: 0 1 48.2rem;
  max-width: 48.2rem;
}

.customer-experience__eyebrow {
  margin: 0;
  font-weight: 500;
  color: var(--purple);
  text-transform: inherit;
}

.customer-experience__quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.customer-experience__quote-mark {
  display: block;
  width: 3.06716rem;
  height: 2.5rem;
}

.customer-experience__quote-text {
  margin: 0;
  font-family: var(--font-heavy);
  color: var(--navy);
}

.customer-experience__text {
  /* 10px gap to quote in design (flex gap is 20px) */
  margin: 0 0;
  font-family: var(--font-regular);
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--navy);
}

.customer-experience__author,.customer-experience__designation{
font-weight:700
}

.customer-experience__designation{
color:var(--primary-2)
}
/* Outline CTA (matches Figma "Desk/Buttons/CTA") */
.customer-experience__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--navy);
  font-family: var(--font-bold);
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.customer-experience__cta:hover,
.customer-experience__cta:focus-visible {
  background-color: var(--navy);
  color: var(--white-color);
  font-weight: inherit;
  text-decoration: none;
}

/* ---------- Media column ---------- */
.customer-experience__media {
  flex: 0 1 64rem;
  max-width: 64rem;
  margin: 0;
}

.customer-experience__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 380;
  object-fit: cover;
}


/* ---------- Mobile / tablet (≤ 991.98px) ---------- */
@media (max-width: 991.98px) {
  .customer-experience__inner {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 4rem;
  }
  .customer-experience__quote-mark{
  	width: 2.4rem;
  height: 2rem;
  }

  .customer-experience__media {
    order: -1;
    flex: none;
    max-width: none;
  }

  .customer-experience__content {
    flex: none;
    max-width: none;
    gap: 2rem;
  }

  .customer-experience__cta {
    align-self: flex-start;
  }
}




.targets__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

/* ---------- Content column ---------- */
.targets__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Design: H4 36px / 34px */
.targets__heading,
.targets__title {
  margin: 0;
  font-family: var(--font-heavy);
  font-size: 3.6rem;
  line-height: 3.4rem;
  font-weight: 1000;
  color: var(--navy);
}

.targets__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.targets__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

/* Divider between targets (Figma "Line 2", 0.5px) */
.targets__item + .targets__item {
  padding-top: 4rem;
  border-top: 0.5px solid var(--navy);
}

/* Design: H5 26px / 28px */
.targets__eyebrow {
  margin: 0;
  font-family: var(--font-bold);
  font-size: 2.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: var(--purple);
}

.targets__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Design: Body M 16px / 20px */
.targets__text {
  font-family: var(--font-regular);
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--navy);
}

/* Rich Text output from Sitecore wraps content in <p> */
.targets__text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.targets__text p + p {
  margin-top: 1rem;
}

/* Outline CTA (matches Figma "Desk/Buttons/CTA") */
.targets__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--navy);
  font-family: var(--font-bold);
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.targets__cta:hover,
.targets__cta:focus-visible {
  background-color: var(--navy);
  color: var(--white-color);
  font-weight: inherit;
  text-decoration: none;
}

/* ---------- Media column (fills the content height) ---------- */
.targets__media {
  align-self: stretch;
  flex: 0 1 64rem;
  max-width: 64rem;
  margin: 0;
  position: relative;
  min-height: 38rem;
}

.targets__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
}

/* ---------- Tablet (992px – 1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .targets__heading,
  .targets__title {
    font-size: 3rem;
    line-height: 3rem;
  }
}

/* ---------- Mobile / tablet (≤ 991.98px) ---------- */
@media (max-width: 991.98px) {
  .targets__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }

  .targets__content,
  .targets__media {
    flex: none;
    max-width: none;
  }

  .targets__content,
  .targets__item {
    gap: 1.6rem;
  }

  .targets__list {
    gap: 2rem;
  }

  .targets__item + .targets__item {
    padding-top: 2rem;
  }

  .targets__media {
    order: -1;
  }

  .targets__media img {
    height: auto;
    aspect-ratio: 640 / 696;
    position: relative;
  }

  .targets__heading,
  .targets__title {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }

  .targets__eyebrow {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

.market-context__inner {
  padding: 4.8rem;
  background-color: #F8F4F4;
}

/* Design: 16px / 20px, 528px wide (.txt-16 is 16px / 22px) */
.market-context__intro,
.market-context__intro p {
  line-height: 2rem;
}

.market-context__intro {
  max-width: 52.8rem;
}

/* Rich Text output from Sitecore wraps content in <p> */
.market-context__intro p {
  margin: 0;
}

.market-context__intro p + p {
  margin-top: 1rem;
}

/* ---------- Accordion ---------- */
.market-context__item {
  border-top: 1px solid var(--navy);
}

.market-context__item:last-child {
  border-bottom: 1px solid var(--navy);
}

/* Reset the global h4 size; text size comes from .txt-22 on the button */
.market-context__item-heading {
  font: inherit;
}

/* Row is 80px tall in the design (20 + 40 + 20) */
.market-context__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 2rem 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.market-context__toggle:focus-visible {
  outline: 2px dashed var(--black-color);
  outline-offset: 2px;
}

/* Plus / minus lines drawn inside the global .cta-box */
.market-context__icon {
  position: relative;
  flex-shrink: 0;
}

.market-context__icon::before,
.market-context__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2px;
  background-color: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Vertical bar of the plus; rotates flat to make the minus */
.market-context__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.market-context__toggle[aria-expanded="true"] .market-context__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Same hover as .cta-box:hover, triggered from the whole row */
.market-context__toggle:hover .market-context__icon {
  background-color: var(--purple);
}

.market-context__toggle:hover .market-context__icon::before,
.market-context__toggle:hover .market-context__icon::after {
  background-color: var(--white-color);
}

/* ---------- Panel ---------- */
/* Design: 48px from button to first row (toggle already has 20px) */
.market-context__panel {
  padding: 2.8rem 0 4.8rem;
}
.ip3-edit .market-context__panel[hidden]{
	display: block !important;
}
.market-context__panel[hidden] {
  display: none;
}

.market-context__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
}

/* Design: 40px above the grey line, 32px below */
.market-context__row:not(:last-child) {
  padding-bottom: 4rem;
  border-bottom: 1px solid #D1D1D1;
}

.market-context__row + .market-context__row {
  margin-top: 3.2rem;
}

.market-context__info {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  flex:1;
}

.market-context__code {
  flex: 0 0 10rem;
  font-family: var(--font-bold);
  font-weight: 700;
}

/* Design: 16px / 20px, 200px wide (global p is 16px / 22px) */
.market-context__desc {
  max-width: 20rem;
  line-height: 2rem;
}

/* Logos: 70 x 22, two per line, 32px across / 24px down */
.market-context__logos {
  display: grid;
  grid-template-columns:repeat(2, 9.53rem);
  gap: 2.4rem 3.2rem;
  flex-shrink: 0;
}

/* A single logo sits in the right-hand slot */
.market-context__logos img:only-child {
  grid-column: 2;
}

.market-context__logos img {
  display: block;
  min-height: 2.2rem;
  object-fit: contain;
}

/* ---------- Mobile / tablet (≤ 991.98px) ---------- */
@media (max-width: 991.98px) {
  .market-context__inner {
    padding: 3.2rem 2rem;
  }
  .market-context__intro{
  	margin-top: 2.4rem;
  }
  .market-context__toggle{
  	padding: 1rem 0;
  }
  .market-context__panel{
  	padding: 2.2rem 0 4rem;
  }
}

@media (max-width: 767.98px) {
  .market-context__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .market-context__row:not(:last-child){
  padding-bottom: 3.2rem;
  }
  .market-context__info {
    gap: 1.6rem;
    width: 100%; 
    justify-content: space-between;
  }

  .market-context__code {
    flex-basis: 4rem;
  }
   .market-context__logos{
   
   }
  .market-context__logos img:only-child {
    grid-column: auto;
  }

}



/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

:root {
  /* Colour tokens (from the Figma styles) */
  --dcc-purple: #9430ff;          /* Primary/DCC Purple */
  --dcc-white: #ffffff;           /* Primary/DCC White */
  --dcc-dark-blue: #19193c;       /* Primary/DCC Dark Blue */
  --dcc-light-grey: #f2f2f2;      /* Light Grey */
  --dcc-navy: #0d2f6e;
  --dcc-midnight: #0d1246;
  --dcc-panel-light: #eaf0f6;
  --dcc-note-grey: #b9b9b9;
  --dcc-divider: #000000;

  --dcc-font: "Outfit", Arial, sans-serif;

  /* Layout */
  --dcc-page-max: 1440px;
  --dcc-page-gutter: 64px;
  --dcc-chamfer-x: 82px;
  --dcc-chamfer-y: 62.5px;
  --dcc-card-chamfer-x: 13.4px;
  --dcc-card-chamfer-y: 11.75px;
}


.dcc-infographic {
  max-width: var(--dcc-page-max);
  margin: 0 auto;
  padding: 96px var(--dcc-page-gutter) 72px;
  font-family: var(--dcc-font);
}

/* :where() keeps the reset at zero specificity so component classes win */
:where(.dcc-infographic) :where(h2, h3, h4, p, ul) {
  margin: 0;
  padding: 0;
}

:where(.dcc-infographic) ul {
  list-style: none;
}

:where(.dcc-infographic) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.dcc-infographic__intro {
  text-align: center;
  margin-bottom: 44px;
}

.dcc-infographic__title {
  max-width: 897px;
  margin: 0 auto;
  font-size: 48px;
  font-weight: 300;
  line-height: 50px;
  color: var(--dcc-dark-blue);
  text-transform: inherit;
}

.dcc-infographic__title strong {
  font-weight: 500;
}

.dcc-infographic__lead {
  max-width: 596px;
  margin: 36px auto 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--dcc-dark-blue);
}

@media (max-width: 767.98px) {
  .dcc-infographic .dcc-framework__intro{
    padding: 0 16px;
  }
}
/* --------------------------------------------------------------------------
   Panels — chamfered bottom-right corner with a soft drop shadow
   -------------------------------------------------------------------------- */

.dcc-panel {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(-2px 1px 10.3px rgba(0, 0, 0, 0.02));
}

.dcc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dcc-panel-bg, var(--dcc-panel-light));
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--dcc-chamfer-y)),
    calc(100% - var(--dcc-chamfer-x)) 100%,
    0 100%
  );
}

.dcc-heading {
  padding: 17px 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: var(--dcc-navy);
  margin-bottom:0;
}

/* Arrow circle that links one panel to the next */
.dcc-connector {
  position: relative;
  z-index: 1;
  height: 37px;
}

.dcc-connector__link {
  position: absolute;
  top: -33px;
  left: 50%;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.dcc-connector__link img {
  width: 100%;
  height: 100%;
}

.dcc-connector__link:hover {
  box-shadow: 0 6px 18px rgba(25, 25, 60, 0.15);
  transform: translateX(-50%) translateY(4px);
}

.dcc-connector__link:focus-visible {
  outline: 3px solid var(--dcc-purple);
  outline-offset: 4px;
}

.dcc-connector--tight {
  height: 24px;
}

.dcc-connector--tight .dcc-connector__link {
  top: -26px;
}

/* Targets of the arrow links */
.dcc-framework,
.dcc-value {
  scroll-margin-top: var(--dcc-scroll-offset, 0px);
}

/* --------------------------------------------------------------------------
   Resources and capabilities
   -------------------------------------------------------------------------- */

.dcc-resources {
  padding: 0 71px 70px 43px;
}

.dcc-resources__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 33px;
}

.dcc-resources__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  text-align: center;
  color: var(--dcc-navy);
}

.dcc-resources__item + .dcc-resources__item::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  height: 80%;
  bottom:0;
  margin:auto;
  border-left: 0.5px solid var(--dcc-divider);
}

.dcc-resources__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 67px;
}

.dcc-resources__img--rotated {
  transform: rotate(30deg);
}

.dcc-resources__title {
  margin-top: 18px;
  margin-bottom:0px;
  font-size: 25px;
  font-weight: 500;
  line-height: 25px;
 text-transform: inherit;
}

.dcc-resources__text {
  margin-top: 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Products and services + sustainability framework
   -------------------------------------------------------------------------- */

.dcc-framework {
  --dcc-panel-bg: var(--dcc-purple);
  display: grid;
  grid-template-columns: 513px minmax(0, 1fr);
  min-height: 500px;
  color: var(--dcc-white);
}

/* Left: products and services */
.dcc-framework__products {
  padding: 50px 42px 42px 41px;
  background: var(--dcc-midnight);
}

.dcc-framework__logo {
  width: 300px;
}

.dcc-framework__products-title {
  max-width: 232px;
  margin: 54px 0 0 0px;
  font-size: 30px;
  font-weight: 600;
  line-height: 32px;
  color: var(--dcc-purple);
  text-transform: inherit;
}

.dcc-framework__cards {
  display: grid;
  gap: 20px;
  margin: 51px 0 0 0px; 
}

.dcc-card {
  display: flex;
  max-width: 429px;
  min-height: 94px;
  background: var(--dcc-purple);
  clip-path:polygon( 0 0, calc(100% - var(--dcc-card-chamfer-x)) 0, 100% var(--dcc-card-chamfer-y), 100% 100%, var(--dcc-card-chamfer-x) 100%, 0 calc(100% - var(--dcc-card-chamfer-y)));
}

.dcc-card__icon {
  flex: 0 0 96.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dcc-white);
}
.dcc-card__icon.solutions-icon img{
	width: 30px; 
}
.dcc-card__icon.mobility-icon img{
   	width: 41px;
}
.dcc-card__body {
  padding: 17px 20px 10px 33.5px; 
}

.dcc-card__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 23px;
  text-transform: uppercase;
  color: var(--dcc-light-grey);
}

.dcc-card__text {
  max-width: 244px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  margin-bottom:0;
}

.dcc-card__text--small {
  font-size: 11px;
  line-height: 13px;
}

/* Right: sustainability framework */
.dcc-framework__sustainability {
  padding: 59px 23px 11px 43px;
}

.dcc-framework__title {
  font-size: 30px;
  font-weight: 600;
  line-height: 23px;
  text-transform: inherit;
}

.dcc-framework__lead {
  max-width: 314px;
  margin-top: 11px;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
}

.dcc-wheel {
  position: relative;
  width: 733px;
  max-width: 100%;
  height: 375px;
  margin-top: -23px;
}

.dcc-wheel__graphic {
  position: absolute;
  top: 0;
  left: 130px;
  display: block;
  width: 442.923px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.dcc-wheel__topic {
  position: absolute;
}

.dcc-wheel__topic-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  text-transform: inherit;
}

.dcc-wheel__topic-text {
  margin-top: 13px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}

.dcc-wheel__topic--climate {
  top: 77px;
  left: 0;
  width: 130px;
}

.dcc-wheel__topic--climate .dcc-wheel__topic-title {
  max-width: 123px;
}

.dcc-wheel__topic--people {
  top: 211px;
  left: 0;
  width: 145px;
}

.dcc-wheel__topic--people .dcc-wheel__topic-title {
  max-width: 85px;
}

.dcc-wheel__topic--safety {
  top: 77px;
  left: 591px;
  width: 138px;
}

.dcc-wheel__topic--safety .dcc-wheel__topic-title {
  max-width: 122px;
}

.dcc-wheel__topic--conduct {
  top: 211px;
  left: 590px;
  width: 143px;
}

.dcc-wheel__topic--conduct .dcc-wheel__topic-text {
  max-width: 118px;
}

/* --------------------------------------------------------------------------
   Value created this year
   -------------------------------------------------------------------------- */

.dcc-value {
  padding: 52px 73px 48px 81px;
}

.dcc-value__grid {
  display: grid;
  grid-template-columns: 299px minmax(0, 1fr);
  column-gap: 54px;
  row-gap: 19px;
  margin-top: 5px;
}
.dcc-value__group.left-card .dcc-stat{
padding-right:0;
}
.dcc-value__group.left-card .dcc-stat::before{
  display:none;
}
.dcc-value__label {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dcc-purple);
}

.dcc-value__stats {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dcc-stat {
  position: relative;
  flex: 0 0 233px;
  text-align: center;
}

 .dcc-stat {
  flex-basis: 268px;
  padding-right: 46px; 
}

 .dcc-stat::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 16px;
  height: 100%;
  border-left: 1px solid var(--dcc-navy);
}

.dcc-stat--wide {
  flex-basis: 299px;
}

.dcc-stat--large {
  flex-basis: 336px;
}

.dcc-stat__value {
  font-size: 100px;
  font-weight: 700;
  line-height: 113px;
  white-space: nowrap;
  color: var(--dcc-navy);
}

.dcc-stat--underlined .dcc-stat__value::after {
  content: "";
  display: block;
  width: 205px;
  max-width: 100%;
  margin: 13px auto 0;
  border-top: 1px solid var(--dcc-navy);
}

.dcc-stat__caption {
  max-width: 219px;
  margin: 9px auto 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--dcc-dark-blue);
}

.dcc-stat--wide .dcc-stat__caption {
  max-width: 299px;
  margin-top: 21px;
}

.dcc-stat--large .dcc-stat__caption {
  max-width: 290px;
}

.dcc-stat__note {
  color: var(--dcc-note-grey);
}
.dcc-value__grid .dcc-value__stats .dcc-stat .dcc-stat__caption,.dcc-infographic .dcc-panel .dcc-stat__value::after{
	margin-top:auto;
}

/* --------------------------------------------------------------------------
   Fade-in on scroll (enabled by script.js; content stays visible without JS)
   -------------------------------------------------------------------------- */

.dcc-js [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.dcc-js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Resources and capabilities: items reveal one after another, left to right.
   Within each item the icon, title and description fade in in sequence. */
.dcc-resources__item {
  --dcc-item-delay: calc(0.3s + var(--dcc-item-index, 0) * 0.6s);
}

.dcc-resources__item:nth-child(2) { --dcc-item-index: 1; }
.dcc-resources__item:nth-child(3) { --dcc-item-index: 2; }
.dcc-resources__item:nth-child(4) { --dcc-item-index: 3; }
.dcc-resources__item:nth-child(5) { --dcc-item-index: 4; }

.dcc-js .dcc-resources__icon,
.dcc-js .dcc-resources__title,
.dcc-js .dcc-resources__text,
.dcc-js .dcc-resources__item + .dcc-resources__item::before {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.dcc-js .is-revealed :is(.dcc-resources__icon, .dcc-resources__title, .dcc-resources__text),
.dcc-js .is-revealed .dcc-resources__item + .dcc-resources__item::before,
.dcc-js .dcc-resources__item + .dcc-resources__item.is-revealed::before {
  opacity: 1;
  transform: none;
}

.dcc-js .dcc-resources__icon,
.dcc-js .dcc-resources__item + .dcc-resources__item::before {
  transition-delay: var(--dcc-item-delay);
}

.dcc-js .dcc-resources__title {
  transition-delay: calc(var(--dcc-item-delay) + 0.2s);
}

.dcc-js .dcc-resources__text {
  transition-delay: calc(var(--dcc-item-delay) + 0.4s);
}

/* Products and services + sustainability framework.
   Dark column first (logo, title, then each card's tile, title and text),
   then the purple column (title, lead, wheel growing from the centre, then
   each topic badge with its title and text, left column before right). */
.dcc-framework__logo            { --dcc-delay: 0.3s; }
.dcc-framework__products-title  { --dcc-delay: 0.5s; }
.dcc-card:nth-child(1)          { --dcc-delay: 0.8s; }
.dcc-card:nth-child(2)          { --dcc-delay: 1.4s; }
.dcc-framework__title           { --dcc-delay: 2s; }
.dcc-framework__lead            { --dcc-delay: 2.2s; }
.dcc-wheel__ring--core,
.dcc-wheel__logo                { --dcc-delay: 2.5s; }
.dcc-wheel__ring--middle        { --dcc-delay: 2.7s; }
.dcc-wheel__ring--outer         { --dcc-delay: 2.9s; }
.dcc-wheel__badge--climate,
.dcc-wheel__topic--climate      { --dcc-delay: 3.3s; }
.dcc-wheel__badge--people,
.dcc-wheel__topic--people       { --dcc-delay: 3.8s; }
.dcc-wheel__badge--safety,
.dcc-wheel__topic--safety       { --dcc-delay: 4.3s; }
.dcc-wheel__badge--conduct,
.dcc-wheel__topic--conduct      { --dcc-delay: 4.8s; }

.dcc-js .dcc-framework__logo,
.dcc-js .dcc-framework__products-title,
.dcc-js .dcc-framework__title,
.dcc-js .dcc-framework__lead,
.dcc-js .dcc-card,
.dcc-js .dcc-card__title,
.dcc-js .dcc-card__text,
.dcc-js .dcc-wheel__topic-title,
.dcc-js .dcc-wheel__topic-text {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--dcc-delay);
}

.dcc-js .dcc-card__title {
  transition-delay: calc(var(--dcc-delay) + 0.2s);
}

.dcc-js .dcc-card__text {
  transition-delay: calc(var(--dcc-delay) + 0.4s);
}

/* Wheel pieces scale up from their own centre */
.dcc-wheel__ring,
.dcc-wheel__logo,
.dcc-wheel__badge,
.dcc-wheel__wave {
  transform-box: fill-box;
  transform-origin: center;
}

.dcc-js .dcc-wheel__ring,
.dcc-js .dcc-wheel__logo,
.dcc-js .dcc-wheel__badge,
.dcc-js .dcc-wheel__topic-badge {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--dcc-delay);
}

.dcc-js .dcc-wheel__topic-title {
  transition-delay: calc(var(--dcc-delay) + 0.2s);
}

.dcc-js .dcc-wheel__topic-text {
  transition-delay: calc(var(--dcc-delay) + 0.4s);
}

.dcc-js .is-revealed :is(
  .dcc-framework__logo,
  .dcc-framework__products-title,
  .dcc-framework__title,
  .dcc-framework__lead,
  .dcc-card,
  .dcc-card__title,
  .dcc-card__text,
  .dcc-wheel__ring,
  .dcc-wheel__logo,
  .dcc-wheel__badge,
  .dcc-wheel__topic-badge,
  .dcc-wheel__topic-title,
  .dcc-wheel__topic-text
) {
  opacity: 1;
  transform: none;
}

/* Waves ripple out from the DCC Energy core once the wheel is in place */
.dcc-wheel__wave {
  opacity: 0;
}

.dcc-js .is-revealed .dcc-wheel__wave {
  animation: dcc-wave 3.6s ease-out infinite;
  animation-delay: 3.2s;
}

.dcc-js .is-revealed .dcc-wheel__wave--2 {
  animation-delay: 4.4s;
}

.dcc-js .is-revealed .dcc-wheel__wave--3 {
  animation-delay: 5.6s;
}

@keyframes dcc-wave {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcc-js .dcc-framework :is(
    .dcc-framework__logo,
    .dcc-framework__products-title,
    .dcc-framework__title,
    .dcc-framework__lead,
    .dcc-card,
    .dcc-card__title,
    .dcc-card__text,
    .dcc-wheel__ring,
    .dcc-wheel__logo,
    .dcc-wheel__badge,
    .dcc-wheel__topic-badge,
    .dcc-wheel__topic-title,
    .dcc-wheel__topic-text
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dcc-js .is-revealed .dcc-wheel__wave {
    animation: none;
  }
}

/* Value created this year.
   Groups in reading order; within each, the label, then each stat left to
   right: number fades in and counts up (script.js), underline draws in,
   caption follows. A divider appears with the stat to its right. */
.dcc-value__group--customers    { --dcc-group-delay: 0.3s; }
.dcc-value__group--environment  { --dcc-group-delay: 1s; }
.dcc-value__group--governments  { --dcc-group-delay: 2.7s; }
.dcc-value__group--people       { --dcc-group-delay: 3.4s; }

.dcc-value__label {
  --dcc-delay: var(--dcc-group-delay);
}

.dcc-stat {
  --dcc-delay: calc(var(--dcc-group-delay) + 0.2s + var(--dcc-stat-index, 0) * 0.5s);
}

.dcc-stat:nth-child(2) { --dcc-stat-index: 1; }
.dcc-stat:nth-child(3) { --dcc-stat-index: 2; }

.dcc-js .dcc-value__label,
.dcc-js .dcc-stat__value,
.dcc-js .dcc-stat__caption,
.dcc-js .dcc-stat + .dcc-stat::before {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--dcc-delay);
}

.dcc-js .dcc-stat__caption {
  transition-delay: calc(var(--dcc-delay) + 0.3s);
}

.dcc-js .dcc-stat__value::after {
  transform: scaleX(0);
  transition: transform 0.6s ease-out;
  transition-delay: calc(var(--dcc-delay) + 0.4s);
}

.dcc-js .is-revealed :is(.dcc-value__label, .dcc-stat__value, .dcc-stat__caption),
.dcc-js .dcc-value__label.is-revealed,
.dcc-js .is-revealed .dcc-stat + .dcc-stat::before,
.dcc-js .is-revealed .dcc-stat__value::after {
  opacity: 1;
  transform: none;
}

.dcc-stat__value {
  font-variant-numeric: tabular-nums;
}

.dcc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dcc-js .dcc-value :is(.dcc-value__label, .dcc-stat__value, .dcc-stat__caption),
  .dcc-js .dcc-value .dcc-stat__value::after {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dcc-js .dcc-value .dcc-stat + .dcc-stat::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcc-connector__link {
    transition: none;
  }

  .dcc-js [data-animate],
  .dcc-js .dcc-resources__icon,
  .dcc-js .dcc-resources__title,
  .dcc-js .dcc-resources__text,
  .dcc-js .dcc-resources__item + .dcc-resources__item::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .dcc-framework {
    grid-template-columns: minmax(0, 1fr);
  }

  .dcc-framework__products {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 429px);
    column-gap: 40px;
    align-items: start;
  }

  .dcc-framework__cards {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
  }

  .dcc-framework__sustainability {
    padding: 48px 43px 80px;
  }

  .dcc-wheel {
    margin: 24px auto 0;
  }

  .dcc-value__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dcc-value__stats .dcc-stat {
    flex: 1 1 0;
    min-width: 0;
  }

  .dcc-value__stats .dcc-stat--wide {
    flex: 0 1 299px;
  }
}

@media (max-width: 1023px) {
  :root {
    --dcc-page-gutter: 32px;
  }

  .dcc-infographic {
    padding-top: 64px;
  }

  .dcc-infographic__title {
    font-size: 40px;
    line-height: 44px;
  }

  .dcc-resources {
    padding: 0 32px 80px;
  }

  .dcc-resources__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 40px;
  }

  .dcc-resources__item + .dcc-resources__item::before {
    display: none;
  }

  .dcc-value {
    padding: 52px 32px 80px;
  }

  .dcc-stat__value {
    font-size: 80px;
    line-height: 92px;
  }

  .dcc-stat + .dcc-stat::before {
    top: 28px;
  }
}

/* Mobile-only pieces: the topic badges (desktop draws them in the wheel)
   and the small copy variants from the mobile design */
/* Mobile-only copy variants from the mobile design */

.dcc-show-mobile {
  display: none;
}
 
/* Topic images: stacked above each topic on mobile (859px block),
   placed over the wheel on desktop/tablet (below) */
.dcc-wheel__topic-badge {
  display: block;
}
 
/* Desktop/tablet: the wheel scales with its column instead of being a
   fixed 733px. Everything inside is sized in cqw (1cqw = 1% of the wheel's
   width), worked out from the 733 x 375 Figma layout, so the topics and
   images keep their places at any width. */
@media (min-width: 860px) {
  .dcc-wheel {
    container-type: inline-size;
    width: 100%;
    max-width: 733px;
    height: auto;
    aspect-ratio: 733 / 375;
  }
 
  .dcc-wheel__graphic {
    left: 17.735cqw;            /* 130px */
    width: 60.426cqw;           /* 442.923px */
    max-width: none;
    height: auto;
  }
 
  /* The authored images replace the SVG badges */
  .dcc-wheel__badge {
    display: none;
  }
 
  .dcc-wheel__topic-title {
    font-size: clamp(15px, 2.729cqw, 20px);
    line-height: 1;
  }
 
  .dcc-wheel__topic-text {
    margin-top: 1.774cqw;       /* 13px */
    font-size: clamp(10px, 1.637cqw, 12px);
    line-height: 1.1667;
  }
 
  .dcc-wheel__topic--climate {
    top: 10.505cqw;             /* 77px */
    left: 0;
    width: 17.735cqw;           /* 130px */
  }
 
  .dcc-wheel__topic--people {
    top: 28.786cqw;             /* 211px */
    left: 0;
    width: 19.782cqw;           /* 145px */
  }
 
  .dcc-wheel__topic--safety {
    top: 10.505cqw;             /* 77px */
    left: 80.628cqw;            /* 591px */
    width: 18.827cqw;           /* 138px */
  }
 
  .dcc-wheel__topic--conduct {
    top: 28.786cqw;             /* 211px */
    left: 80.491cqw;            /* 590px */
    width: 19.509cqw;           /* 143px */
  }
 
  .dcc-wheel__topic-badge {
    position: absolute;
    width: 15.542cqw;           /* 113.923px */
    height: 15.542cqw;
    max-width: none;
  }
 
  .dcc-wheel__topic--climate .dcc-wheel__topic-badge {
    top: -2.592cqw;             /* -19px */
    left: 17.735cqw;            /* 130px */
  }
 
  .dcc-wheel__topic--people .dcc-wheel__topic-badge {
    top: -1.91cqw;              /* -14px */
    left: 17.735cqw;
  }
 
  .dcc-wheel__topic--safety .dcc-wheel__topic-badge {
    top: -2.592cqw;
    left: -18.008cqw;           /* -132px */
  }
 
  .dcc-wheel__topic--conduct .dcc-wheel__topic-badge {
    top: -1.91cqw;
    left: -17.872cqw;           /* -131px */
  }
}
 
/* The wheel's side labels need 733px; below that the topics stack under the
   wheel, each with its own badge (Figma mobile layout) */
@media (max-width: 859px) {
  .dcc-framework__products {
    grid-template-columns: minmax(0, 1fr);
  }

  .dcc-framework__cards {
    grid-row: auto;
    grid-column: auto;
    margin-top: 40px;
  }

  .dcc-wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .dcc-wheel__graphic {
    position: static;
    max-width: none;
  }

  .dcc-wheel__badge {
    display: none;
  }

  .dcc-wheel__topics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 6px;
  }

  .dcc-wheel__topic,
  .dcc-wheel__topic--climate,
  .dcc-wheel__topic--people,
  .dcc-wheel__topic--safety,
  .dcc-wheel__topic--conduct {
    position: static;
    width: 220px;
    max-width: 100%;
    text-align: center;
  }

  .dcc-wheel__topic-badge {
    display: block;
    width: 113.923px;
    height: 113.923px;
    margin: 0 auto 30px;
  }

  .dcc-wheel__topic .dcc-wheel__topic-title,
  .dcc-wheel__topic .dcc-wheel__topic-text {
    max-width: none;
  }

  .dcc-wheel__topic-title {
    font-size: 26px;
    line-height: 26px;
  }

  .dcc-wheel__topic-text {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}

/* Stats stack, every stat underlined (Figma mobile) */
@media (max-width: 767px) {
  .dcc-value__stats {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .dcc-stat{
  	padding-right: 0px;
  }
  .dcc-stat::before{
   display:none;
  }
  .dcc-value__label{
   text-align:center;
  }

  .dcc-value__stats .dcc-stat,
  .dcc-value__stats .dcc-stat--wide,
  .dcc-stat + .dcc-stat {
    flex: none;
    min-height: 185px;
    padding-left: 0;
  }

  .dcc-stat + .dcc-stat::before {
    display: none;
  }

  .dcc-stat__value {
    font-size: 80px;
    line-height: 76px;
  }

  .dcc-stat__value::after,
  .dcc-stat--underlined .dcc-stat__value::after {
    content: "";
    display: block;
    width: 205px;
    max-width: 100%;
    margin: 22px auto 0;
    border-top: 1px solid var(--dcc-navy);
  }

  .dcc-stat__caption,
  .dcc-stat--wide .dcc-stat__caption,
  .dcc-stat--large .dcc-stat__caption {
    max-width: 299px;
    margin-top: 21px;
    line-height: 22px;
  }

  .dcc-stat__note {
    color: #d1d1d1;
  }

  /* Each item reveals on its own as it scrolls in (script.js), so only the
     stagger within an item is kept */
  .dcc-resources__item {
    --dcc-item-delay: 0.1s;
  }

  .dcc-framework__logo            { --dcc-delay: 0.1s; }
  .dcc-framework__products-title  { --dcc-delay: 0.3s; }
  .dcc-card:nth-child(1)          { --dcc-delay: 0.5s; }
  .dcc-card:nth-child(2)          { --dcc-delay: 0.9s; }
  .dcc-framework__title           { --dcc-delay: 0.1s; }
  .dcc-framework__lead            { --dcc-delay: 0.3s; }
  .dcc-wheel__ring--core,
  .dcc-wheel__logo                { --dcc-delay: 0.1s; }
  .dcc-wheel__ring--middle        { --dcc-delay: 0.3s; }
  .dcc-wheel__ring--outer         { --dcc-delay: 0.5s; }
  .dcc-wheel__topic--climate,
  .dcc-wheel__topic--people,
  .dcc-wheel__topic--safety,
  .dcc-wheel__topic--conduct      { --dcc-delay: 0.1s; }

  .dcc-js .is-revealed .dcc-wheel__wave    { animation-delay: 0.8s; }
  .dcc-js .is-revealed .dcc-wheel__wave--2 { animation-delay: 2s; }
  .dcc-js .is-revealed .dcc-wheel__wave--3 { animation-delay: 3.2s; }

  .dcc-value__group--customers,
  .dcc-value__group--environment,
  .dcc-value__group--governments,
  .dcc-value__group--people {
    --dcc-group-delay: 0s;
  }

  .dcc-value__label {
    --dcc-delay: 0.1s;
  }

  .dcc-stat:nth-child(2),
  .dcc-stat:nth-child(3) {
    --dcc-stat-index: 0;
  }
}

/* --------------------------------------------------------------------------
   Mobile — Figma "DCC Energy Infographic (Mobile)" (node 7901:2179), 390px
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  :root {
    --dcc-page-gutter: 20px;
    --dcc-chamfer-x: 76.5px;
    --dcc-chamfer-y: 44.5px;
    --dcc-card-chamfer-x: 13.25px;
    --dcc-card-chamfer-y: 17.75px;
  }

  .dcc-show-mobile {
    display: inline;
  }

  .dcc-hide-mobile {
    display: none;
  }

  .dcc-infographic {
    padding-top: 61px;
    padding-bottom: 61px;
  }

  /* Intro */
  .dcc-infographic__intro {
    margin-bottom: 24px;
  }

  .dcc-infographic__title {
    max-width: 279px;
    font-size: 22px;
    line-height: 20px;
  }

  .dcc-infographic__lead {
    max-width: 281px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 18px;
  }

  /* Panels: the cut corner moves to the bottom-left */
  .dcc-panel::before {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--dcc-chamfer-x) 100%,
      0 calc(100% - var(--dcc-chamfer-y))
    );
  }

  .dcc-heading {
    max-width: 348px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 40px;
    letter-spacing: 3px;
  }

  /* Arrows */
  .dcc-connector {
    height: 19px;
  }

  .dcc-connector__link {
    top: -32.5px;
    width: 102px;
    height: 102px;
  }

  .dcc-connector--tight {
    height: 18px;
  }

  .dcc-connector--tight .dcc-connector__link {
    top: -51px;
  }

  /* Resources and capabilities: one column with dividers between items */
  .dcc-resources {
    padding: 45px 0 97px;
  }

  .dcc-resources__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-top: 66px;
  }

  .dcc-resources__item + .dcc-resources__item {
    margin-top: 42px;
    padding-top: 42px;
  }

  .dcc-resources__item + .dcc-resources__item::before {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 269px;
    height: 0;
    margin: 0 auto;
    border-left: 0;
    border-top: 0.5px solid var(--dcc-divider);
  }

  .dcc-resources__title {
    margin-top: 0;
    font-size: 26px;
    line-height: 30px;
  }

  .dcc-resources__text {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }

  /* Products and services */
  .dcc-framework__products {
    padding: 101px 23.5px 37px;
    background: var(--dcc-dark-blue);
    text-align: center;
  }

  .dcc-framework__logo {
    width: 262px;
    margin: 0 auto;
  }

  .dcc-framework__products-title {
    max-width: none;
    margin: 45px 0 0;
    font-size: 26px;
    line-height: 26px;
  }

  .dcc-framework__cards {
    gap: 15px;
    margin: 41px 0 0;
  }

  .dcc-card {
    width: 100%;
    max-width: 303px;
    min-height: 81px;
    margin: 0 auto;
    text-align: left;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--dcc-card-chamfer-x) 100%,
      0 calc(100% - var(--dcc-card-chamfer-y))
    );
  }

  .dcc-card__icon {
    flex-basis: 77.5px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--dcc-card-chamfer-x) 100%,
      0 calc(100% - var(--dcc-card-chamfer-y))
    );
  }

  .dcc-card__icon img[src*="solutions"] {
    width: 23px;
  }

  .dcc-card__icon img[src*="mobility"] {
    width: 29px;
  }

  .dcc-card__body {
    padding: 14px 12px 10px 19.5px;
  }

  .dcc-card__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 20px;
    color: var(--dcc-white);
  }

  .dcc-card__text,
  .dcc-card__text--small {
    max-width: 185px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
  }

  /* Sustainability framework */
  .dcc-framework__sustainability {
    padding: 40px 0 104.5px;
    text-align: center;
  }

  .dcc-framework__title {
    font-size: 26px;
    line-height: 26px;
  }

  .dcc-framework__lead {
    max-width: none;
    margin-top: 17px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }

  /* The wheel SVG also holds the (hidden) desktop badges either side, so it
     is sized for its rings to come out 323px across, and the empty sides
     are clipped */
  .dcc-wheel {
    margin-top: 16px;
    overflow: hidden;
  }

  .dcc-wheel__graphic {
    width: calc(min(323px, 100%) * 1.1812);
  }

  /* Value created this year */
  .dcc-value {
    padding: 69px 0 76px;
  }

  .dcc-value__grid {
    row-gap: 40px;
    margin-top: 56px;
  }

  .dcc-value__label {
    margin-bottom: 20px;
    padding: 9px 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 3px;
    text-align: center;
    white-space: normal;
  }
}

/* image straching bottom images */
.new-slick-module .image-wrapper img{
	object-fit: cover;
}

/* full width image with content module add button variation */
.btn-white .cta-primary{
 color: var(--white-color) !important; border: 2px solid var(--purple) !important;
}