body.cdar {
  padding-top: 72px;
}

.intro-video {
  width: 100%;
  height: auto;
}

.row.footnote {
  font-size: 0.75em;
  text-align: center;
  justify-content: center;
  line-height: 1.3em;
}

.download-books {}

.download-books .book {}

.download-books .book .top {
  background-color: var(--color-dark-navy);
  padding: var(--gap24);
  color: var(--color-white);
  text-align: right;
  position: relative;
  font-size: 1.15em;
  line-height: 1.4em;
  font-weight: bold;
}

.download-books .book .top .cover {
  position: absolute;
  left: var(--gap24);
  bottom: 0;
  height: 100%;
  transform: scale(1.5);
  transform-origin: center left;
}

.download-books .book .top .cover img {
  display: block;
  height: 100%;
  width: auto;
}

.download-books .book .bottom {
  background-color: var(--color-light-gray);
  padding: var(--gap24);
}

.download-books .book.ir .top {
  border-bottom: 5px solid #5DC5ED;
}

.download-books .book.fr .top {
  border-bottom: 5px solid #5D5DA5;
}

.download-books .book.sr .top {
  border-bottom: 5px solid #76B835;
}

.download-books .book.ir .top:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  background: transparent url(../img/icon/icon-book-ir-badge.png) center center/contain no-repeat;
  transform: translateY(60%);
}

.download-books .book.fr .top:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  background: transparent url(../img/icon/icon-book-fr-badge.png) center center/contain no-repeat;
  transform: translateY(60%);
}

.download-books .book.sr .top:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  background: transparent url(../img/icon/icon-book-sr-badge.png) center center/contain no-repeat;
  transform: translateY(60%);
}

.row.sustainability {
  background-color: var(--color-dark-navy);
  padding-top: var(--gap72);
  padding-bottom: var(--gap72);
}

.sustain-quote {
  background-color: var(--color-dark-navy);
  color: var(--color-white);
  padding: var(--gap24);
}

.sustain-phases {
  align-items: start;
}

.sustain-phases .phase {}

.sustain-phases .phase .top {
  display: flex;
  gap: var(--gap12);
  width: 100%;
  min-height: 31px;
  padding-right: var(--gap24);
  position: relative;
}

.sustain-phases .phase .bottom {
  width: 100%;
}

.sustain-phases .phase .top .phase-badge {
  font-size: 1.1rem;
  line-height: 1em;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  color: var(--color-white);
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
  flex-shrink: 0;
  flex-grow: 0;
}

.sustain-phases .phase .top .timeline {
  flex-basis: 100%;
  font-size: 1.2rem;
  line-height: 1em;
  border-bottom: 4px solid #283583;
  text-align: right;
  position: relative;
  padding-right: var(--gap12);
}

.sustain-phases .phase .top:after {
  display: block;
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--gap24);
  height: var(--gap24);
  background: transparent url(../img/icon/icon-line-arrow-blue.svg) center bottom/contain no-repeat;
}

.sustain-phases .phase2 .top:after,
.sustain-phases .phase3 .top:after {
  background-image: url(../img/icon/icon-line-arrow-green.svg);
}

.sustain-phases .phase .top .timeline span {
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-phases .phase2 .top .phase-badge {
  background: linear-gradient(90deg, #7AB544 0%, #1D9C46 100%);
}

.sustain-phases .phase2 .top .timeline {
  border-bottom: 4px solid #1D9C46;
}

.sustain-phases .phase2 .top .timeline span {
  background: linear-gradient(90deg, #7AB544 0%, #1D9C46 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-phases .phase3 .top .timeline {
  border-bottom: 4px solid #1D9C46;
}

.sustain-phases .phase3 .top .timeline span {
  background: linear-gradient(90deg, #7AB544 0%, #1D9C46 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-phases .phase .section-subtitle {
  font-size: 1.4rem;
  line-height: 1.3em;
  font-weight: bold;
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-phases .phase2 .section-subtitle {
  font-size: 1.4rem;
  line-height: 1.3em;
  font-weight: bold;
  background: linear-gradient(90deg, #7AB544 0%, #1D9C46 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-phases .phase p {
  text-align: justify;
}

.sustain-phases .phase3 ul {
  font-size: 13px;
  line-height: 1.6em;
}

.sustain-phases .phase3 .bottom {
  background-color: var(--color-dark-navy);
  color: var(--color-white);
  padding: var(--gap24);
}

.sustain-phases .phase3 .bottom ul {
  list-style: disc;
  margin-left: 1.5em;
}

.row.financial {
  padding-top: var(--gap72);
  padding-bottom: var(--gap72);
}

.row.financial .section-title {
  text-align: center;
}

.financial-charts {
  width: 100%;
}

.financial-charts .chart-box {
  background-color: var(--color-light-gray);
}

.profile-text {
  background-color: var(--color-light-gray);
  padding: var(--gap);
  padding-bottom: var(--gap48);
  border-top-left-radius: var(--gap18);
  border-top-right-radius: var(--gap18);
  color: var(--color-text-blue);
}

/* GCEO */
.row.gceo {
  padding-top: var(--gap72);
  padding-left: var(--gap72);
  position: relative;
  padding-bottom: 0;
  padding-right: var(--gap);
}

.row.gceo:after {
  content: ' ';
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
}

.gceo .vip-stats {
  padding: var(--gap18);
  border-radius: var(--gap18);
  background-color: #3977a5;
  border-right: 0;
  border-bottom: 0;
  color: var(--color-white);
  font-size: 0.9rem;
  float: right;
  margin-left: var(--gap18);
  margin-bottom: var(--gap18);
  width: 40%;
}
.gceo .vip-stats .stat-title {
  line-height: 1.1em;
}
.gceo .vip-stats .stat-number {
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.1em;
}

.gceo .vip-stats .icon {
  float: right;
  margin-left: 10px;
  width: 20%;
}

.gceo .vip-stats .icon img {
  display: block;
  width: 100%;
  height: auto;
}

.gceo .profile-text {
  align-self: end;
}

.gceo .col.left {
  padding-bottom: var(--gap48);
}

.gceo .hero-gceo {
  transform: scale(1.3);
  transform-origin: center bottom;
  display: block;
}

.gceo .col.picture {
  align-self: end;
  z-index: 3;
}

/* Chairman */
.row.chairman {
  padding-top: var(--gap72);
  padding-left: var(--gap72);
  position: relative;
  padding-bottom: 0;
  padding-right: var(--gap);
}

.row.chairman:after {
  content: ' ';
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
}

.chairman .vip-stats {
  padding: var(--gap18);
  border-top-left-radius: var(--gap18);
  border: 6px solid var(--color-blue);
  border-right: 0;
  border-bottom: 0;
  color: var(--color-text-black);
  font-size: 0.9rem;
  float: right;
  margin-left: var(--gap18);
  margin-bottom: var(--gap18);
}

.chairman .vip-stats .stat-number {
  font-size: 2.4rem;
  font-weight: var(--font-weight-black);
  line-height: 1.1em;
}

.chairman .vip-stats .icon {
  float: right;
  width: 20%;
}

.chairman .vip-stats .icon img {
  display: block;
  width: 100%;
  height: auto;
}

.chairman .profile-text {
  align-self: end;
}

.chairman .col.left {
  padding-bottom: var(--gap48);
}

.chairman .hero-chairman {
  transform: scale(1.3);
  transform-origin: center bottom;
  display: block;
}

.chairman .col.picture {
  align-self: end;
  z-index: 3;
}

.chairman-stats {
  display: flex;
  align-items: stretch;
  gap: var(--gap18);
}

.chairman-stats .chairman-stat {
  color: var(--color-text-black);
  text-align: center;
  flex-basis: 50%;
  color: var(--color-white);
  display: flex;
}

.chairman-stats .chairman-stat .box-outer {
  border-radius: var(--gap18);
  padding: var(--gap18) var(--gap10);
  background-color: #3977a5;
  display: flex;
  width: 100%;
}

.chairman-stats .chairman-stat .box-outer .box-inner {
  border-radius: var(--gap10);
  padding: var(--gap10);
  width: 100%;
}

.chairman-stats .chairman-stat .icon {
  margin-bottom: 6px;
}

.chairman-stats .chairman-stat .icon-stat {
  font-size: 0.8rem;
  line-height: 1.3em;
}

.chairman-stats .chairman-stat .icon img {
  display: block;
  max-width: 56px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.chairman-stats .chairman-stat .stat-number {
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2em;
}

.row.highlights {
  background-color: var(--color-dark-navy);
  padding: var(--gap72) var(--gap);
}

.row.highlights .section-title {
  background: linear-gradient(270deg, #005FAA 0%, #82CEE6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.highlight-boxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap24);
}

.highlight-boxes .highlight-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap24);
}

.highlight-stats-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap24);
}

.highlight-stats {
  display: flex;
}

.highlight-stats .highlight-stat {
  text-align: right;
  padding: var(--gap24);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  flex-basis: 100%;
  position: relative;
}

.highlight-stats>.highlight-stat:last-of-type {
  border-right: 0;
}

.highlight-stats .highlight-stat:after {
  content: ' ';
  position: absolute;
  left: var(--gap24);
  bottom: 0;
  width: calc(100% - var(--gap24)*2);
  height: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.highlight-stats .highlight-stat .icon-stat {}

.highlight-boxes .highlight-box .icon-stat .stat-title {
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1.2em;
  color: var(--color-white);
}

.highlight-boxes .highlight-box .icon-stat .stat-number {
  color: var(--color-bright-blue);
  font-size: 2.4rem;
  line-height: 1.1em;
  font-weight: var(--font-weight-bold);
}

.highlight-boxes .highlight-box .icon-stat .stat-unit {
  color: var(--color-bright-blue);
  font-size: 1.4rem;
  line-height: 1.1em;
}

.highlight-boxes .highlight-box .icon-stat .note {
  font-size: 0.9rem;
  line-height: 1.3em;
  color: var(--color-white);
  margin-top: 0.3em;
}

.highlight-stat-group {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}

.highlight-stat-group .highlight-stat-group-stats {
  display: flex;
}

.highlight-stats>.highlight-stat-group:last-of-type .highlight-stat-group-stats>.highlight-stat:last-child {
  border-right: 0;
}

.highlight-stat-group-stats .highlight-stat:after {
  display: none;
}

.highlight-stat-group .highlight-stat-group-title {
  position: relative;
  padding-bottom: var(--gap10);
}

.highlight-stat-group .highlight-stat-group-title:after {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--gap24));
  height: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.highlight-stats .highlight-stat .icon {
  margin-bottom: var(--gap10);
}

.highlight-stats .highlight-stat img {
  display: block;
  width: auto;
  height: var(--gap48);
  margin-left: auto;
}

.row.highlights .footnote {
  color: var(--color-white);
  font-style: italic;
  font-size: 0.7rem;
  line-height: 1.3em;
}

.row.intro {
  background-color: #E5F3FD;
  background-image: url(../img/bg/bg-intro.jpg);
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: var(--gap72) var(--gap);
}

.row.intro .subtitle {
  color: var(--color-blue);
}

.row.intro .text {
  font-size: 0.9rem;
  line-height: 1.6em;
}

.agm-event {
  display: flex;
  gap: var(--gap24);
  align-items: start;
  background-color: var(--color-white);
  padding: var(--gap24);
}

.event-badge {
  background: linear-gradient(90deg, #23A4DE 0%, #283583 100%);
  padding: var(--gap18) var(--gap12);
  flex-basis: fit-content;
  flex-shrink: 0;
  flex-grow: 0;
}

.event-badge .stat-number {
  font-size: 3rem;
  line-height: 1em;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.event-badge .stat-number sup {
  font-size: 1rem;
  line-height: 1em;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: var(--gap10);
}

.event-details .heading {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3em;
}

.event-details .location,
.event-details .date-time {
  font-size: 0.85rem;
  line-height: 1.6em;
}

.event-details .location {
  display: flex;
  align-items: start;
  gap: var(--gap12);
}

.event-details .location:before {
  content: ' ';
  display: block;
  flex-basis: var(--gap24);
  width: var(--gap24);
  height: var(--gap24);
  flex-shrink: 0;
  flex-grow: 0;
  background: transparent url(../img/icon/icon-event-location.svg) center center/contain no-repeat;
}

.event-details .date-time {
  display: flex;
  gap: var(--gap24);
}

.event-details .date {
  display: flex;
  align-items: start;
  gap: var(--gap10);
}

.event-details .date:before {
  content: ' ';
  display: block;
  flex-basis: var(--gap24);
  width: var(--gap24);
  height: var(--gap24);
  flex-shrink: 0;
  flex-grow: 0;
  background: transparent url(../img/icon/icon-event-date.svg) center center/contain no-repeat;
}

.event-details .time {
  display: flex;
  align-items: start;
  gap: var(--gap10);
}

.event-details .time:before {
  content: ' ';
  display: block;
  flex-basis: var(--gap24);
  width: var(--gap24);
  height: var(--gap24);
  flex-shrink: 0;
  flex-grow: 0;
  background: transparent url(../img/icon/icon-event-time.svg) center center/contain no-repeat;
}

.sustain-rows {
  width: 100%;
  background-color: var(--color-white);
  padding: var(--gap24);
}

.small-note {
  padding-bottom: 1em;
}

.page-note {
  font-size: 11px;
  line-height: 1.4em;
  display: inline-flex;
  align-items: start;
  gap: 1em;
  text-align: left;
  font-style: italic;
}

.page-note:before {
  content: ' ';
  flex-basis: 1.5em;
  flex-shrink: 0;
  flex-grow: 0;
  width: 1.5em;
  height: 2em;
  background: transparent url(../img/icon/icon-page-orange.svg) center center/contain no-repeat;
}

.page-note.white:before {
  background-image: url(../img/icon/icon-page-white.svg);
}

.sustain-row.top .col {
  align-self: stretch;
  width: 40%;
  flex-basis: 40%;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sustain-row.top .col .col-note {
  font-size: 0.9em;
  line-height: 1.4em;
}
.sustain-row.top .col.right .col-note {
  font-size: 0.85em;
  line-height: 1.4em;
}

.sustain-row.top .col .col-title {
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1em;
  padding-bottom: 1em;
}

.sustain-row.top .left {
  background: transparent url(../img/bg/bg-sustain-green.png) center center/contain no-repeat;
  padding: var(--gap);
  padding-right: var(--gap72);
}

.sustain-row.top .center {
  margin-left: calc(var(--gap72) * -1);
  margin-right: calc(var(--gap72) * -1);
  position: relative;
  z-index: 3;
}

.sustain-row.top .right {
  background: transparent url(../img/bg/bg-sustain-blue.png) center center/contain no-repeat;
  padding: var(--gap);
  padding-left: var(--gap72);
}

.sustain-row.top .col ul {
  text-align: left;
  list-style: disc;
  padding-left: 1em;
  list-style-image: url(../img/icon/icon-bullet.svg);
}

.sustain-row.arrow {
  padding-bottom: var(--gap);
}

.sustain-row.arrow img {
  display: block;
  margin: 0 auto;
  height: var(--gap72);
}

.sustain-icons {
  gap: var(--gap12);
  align-items: stretch;
}

.sustain-icons > .col {
  background-color: var(--color-bright-blue);
  border-radius: var(--gap24);
  padding: var(--gap24);
  color: var(--color-white);
}

.sustain-icons > .col .icon img {
  height: var(--gap);
  width: auto;
}

.sustain-icons > .col .subtitle {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.3em;
}

.sustain-icons > .col .desc {
  padding-top: 0.5em;
  font-size: 0.9em;
  line-height: 1.4em;
}

.sustain-row.focus-area-divider {
  color: var(--color-orange);
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
  position: relative;
  padding: var(--gap12) 0;
}
.sustain-row.focus-area-divider.mobile-only {
  font-size: 1rem;
  padding: 0;
}

.sustain-row.focus-area-divider:before {
  position: absolute;
  content: ' ';
  display: block;
  width: 100%;
  height: 1px;
  top: 50%;
  background-color: var(--color-orange);
}

.sustain-row.focus-area-divider span {
  display: inline-block;
  background-color: var(--color-white);
  padding: 0 1em;
  position: relative;
}

.sustain-desc {
  gap: 0;
  background-color: var(--color-baby-blue);
  align-items: stretch;
  margin-bottom: var(--gap18);
}

.sustain-desc .col {
  padding: var(--gap18);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.sustain-desc>.col:not(:last-of-type) {
  border-right: 1px solid var(--color-blue);
}

.sustain-desc .col .subtitle {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4em;
  color: var(--color-blue);
}

.sustain-desc .col .desc {
  font-size: 0.9em;
  line-height: 1.4em;
}

.sustain-icons2 {
  background-color: var(--color-light-gray);
  align-items: start;
}

.sustain-icons2 .col {
  padding: var(--gap18);
}

.sustain-icons2 .col .icon img {
  height: var(--gap);
  width: auto;
}

.sustain-icons2 .col .subtitle {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.4em;
  background: linear-gradient(90deg, #f28900 0%, #e94d0e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sustain-icons2 .col .desc {
  padding-top: 0.5em;
  font-size: 0.9em;
  line-height: 1.4em;
}

.enablers-divider {
  color: var(--color-white);
  font-weight: bold;
  text-align: center;
  padding: 0.5em;
  background: linear-gradient(90deg, #76b834 0%, #009d3e 100%);
}

.sustain-rows .footnote {
  font-size: 0.75em;
  line-height: 1.3em;
  padding-top: var(--gap24);
  font-style: italic;
}

.sustain-row.top .page-note {
  padding-top: 1em;
}
.sustain-row.top .col.right .col-note {
  padding-left: 1em;
  padding-right: 1em;
}