/* ==========================================================================
   Climate Positive
   Values measured from the Figma PDF exports:
     desktop  1440 x 6549.59  (Climate Positive V2.pdf)
     mobile    402 x 8833.66  (Climate Positive.pdf)
   Grid: container 1140, row-fl gutter 30. Sections use the design-system
   --Padding-padding-vertical (80px 0 / 40px 0) and .h2_header_s, .font_s24px,
   .divider_row, .background_grey_s from local_style.css.
   ========================================================================== */

.cp-page,
.cr-page {
  font-family: "Segoe UI", sans-serif;
}

/* #main is tinted by the site stylesheet - each section paints its own ground */
.cp-page .section_main_s,
.cr-page .section_main_s {
  background-color: #fff;
}

.cp-page .row_gap30,
.cr-page .row_gap30 {
  row-gap: 30px;
}

.cp-page .row-fl > [class*="fl-col-"] > *:last-child,
.cr-page .row-fl > [class*="fl-col-"] > *:last-child {
  margin-bottom: 0;
}

.cp-page sup {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
}

/* ------------------------------- hero ----------------------------------- */

.ban-cp,
.ban-cr {
  position: relative;
  background: #677447;
  min-height: 300px;
  padding: 96px 0 95px;
  overflow: hidden;
}

.ban-cp .container,
.ban-cr .container {
  position: relative;
}

.crumbs-cp,
.crumbs-cr {
  font-size: 14px;
  line-height: 1.37;
  letter-spacing: -0.14px;
  color: #fff;
  margin-bottom: 48px;
}

.crumbs-cp a,
.crumbs-cp span,
.crumbs-cr a,
.crumbs-cr span {
  color: #fff;
  display: inline-block;
}

.crumbs-cp a:hover,
.crumbs-cr a:hover {
  text-decoration: underline !important;
}

.crumbs-cp a:after,
.crumbs-cr a:after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 8px;
  margin: 0 10px;
  vertical-align: middle;
  background: no-repeat center/contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M.94 0 0 .94 3.06 4 0 7.06.94 8 4.94 4z' fill='%23848484'/%3E%3C/svg%3E");
}

.ban-cp h1,
.ban-cr h1 {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.76px;
  color: #fff;
  margin: 0;
}

.cloud-cp {
  position: absolute;
  right: 144px;
  top: -2px;
  line-height: 0;
  pointer-events: none;
}

.cloud-svg-cp {
  display: block;
  width: 168px;
  height: 105px;
}

/* --------------------------- shared type -------------------------------- */

.cp-page .section_main_s.bg-blue-cp {
  background-color: #d7dde8;
}

.cp-page .section_main_s.background_grey_s,
.cr-page .section_main_s.background_grey_s {
  background-color: #f2f2f2;
}

.cp-page .h3-cp {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -0.24px;
  color: #001c66;
  margin: 0 0 20px;
}

.cp-page .mar_b20px {
  margin-bottom: 20px;
}

.cp-page .mar_t60px {
  margin-top: 60px;
}

.section_main_s .strong-cp {
  font-weight: 600;
  margin-bottom: 8px;
}

/* numbered + bulleted lists (16px body scale) */
.num-list-cp,
.bul-list-cp {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.num-list-cp {
  counter-reset: cp-num;
}

.section_main_s .num-list-cp li,
.section_main_s .bul-list-cp li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.section_main_s .num-list-cp li:last-child,
.section_main_s .bul-list-cp li:last-child {
  margin-bottom: 0;
}

.num-list-cp li:before {
  counter-increment: cp-num;
  content: counter(cp-num) ".";
  position: absolute;
  left: 4px;
  top: 0;
  color: #001c66;
}

.bul-list-cp li:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #001c66;
}

/* footnotes */
.notes-cp {
  counter-reset: cp-note 0;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.notes-cp[start="2"] {
  counter-reset: cp-note 1;
}

.diagram-cp + .notes-cp {
  margin-top: 24px;
}

.notes-cp li {
  position: relative;
  padding-left: 9px;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -0.12px;
  color: #0a142d;
  margin-bottom: 8px;
}

.notes-cp li:last-child {
  margin-bottom: 0;
}

.notes-cp li:before {
  counter-increment: cp-note;
  content: counter(cp-note);
  position: absolute;
  left: 0;
  top: 0;
  font-size: .75em;
}

/* ------------------------------ button ---------------------------------- */

a.btn-cp {
  display: inline-block;
  margin-top: 16px;
  padding: 15px 24px;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.16px;
  color: #0079ff;
  border: 1px solid #0079ff;
  border-radius: 100px;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

a.btn-cp:hover {
  background: #0079ff;
  color: #fff;
}

/* --------------------------- strategy diagram --------------------------- */

.diagram-cp {
  margin-top: 60px;
}

.bar-cp {
  background: #677447;
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 12px;
}

.bar-cp h3 {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -0.6px;
  color: #fff;
  margin: 0;
}

.panel-cp {
  height: 100%;
  background: #d7dde8;
  border: 1px solid #c7cfdc;
  border-radius: 8px;
  overflow: hidden;
}

.panel-head-cp {
  min-height: 48px;
  padding: 12px 20px;
  background: #001c66;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: -0.18px;
}

.panel-body-cp {
  padding: 12px 20px 20px;
}

.chips-cp {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -10px 20px;
}

.chip-col-cp {
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  padding: 0 10px;
  min-width: 0;
}

.arr-cp {
  display: block;
  text-align: center;
  line-height: 0;
  margin-bottom: 12px;
}

.arr-svg-cp {
  display: inline-block;
  vertical-align: top;
}

.chip-cp {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  background: #001c66;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1.37;
  letter-spacing: -0.16px;
  text-align: center;
}

.chip-ico-cp {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* ------------------------------- chart ---------------------------------- */

.chart-cp {
  background: #fefefe;
  padding: 26px 38px;
  margin-top: 40px;
  text-align: center;
}

.chart-cp img {
  display: block;
  width: 100%;
  max-width: 1063px;
  margin: 0 auto;
}

/* --------------------------- adaptation topics -------------------------- */

.cp-page .divider_row {
  margin: 48px 0 50px;
}

.topic-cp {
  margin-top: 0;
}

.topic-icon-cp {
  display: block;
  line-height: 0;
  margin-bottom: 20px;
}

.topic-ico-cp {
  display: block;
  width: 52px;
  height: 52px;
}

.cp-page .phases-title-cp {
  margin: 50px 0 28px;
}

.phases-cp {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.phase-cp {
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

.phase-head-cp {
  min-height: 48px;
  padding: 12px 20px;
  background: #677447;
  color: #fff;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: -0.18px;
}

.phase-body-cp {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 128px;
  padding: 20px;
  background: #fff;
}

.section_main_s .phase-body-cp p {
  margin: 0;
}

.phase-arr-cp {
  -ms-flex: 0 0 52px;
  flex: 0 0 52px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 0;
}

/* =========================== Nature Positive ============================= */
.sect-np {
  background-color: #fff;
}

.sect-np .head-np {
  margin-bottom: 40px;
}

.sect-np .head-np h2 {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.76px;
  color: #001c66;
  margin: 0 0 20px;
}

.sect-np .head-np p {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: #0a142d;
  margin: 0;
  padding: 0;
}

.list-np {
  margin-top: -30px;
}

.list-np .fl-col-md-6 {
  margin-top: 30px;
}

body .item-np {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  background: #d7dde8;
  border-radius: 12px;
  overflow: hidden;
}
body .item-np:hover .img img {
  transform: scale(1.05);
}
body .item-np:hover{
  background: #d7dde8;
}
body .item-np:hover .link-np svg{
  -webkit-transform: translateX(4px);
  -o-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}
.item-np .img {
  position: relative;
  height: 280px;
  overflow: hidden;
  font-size: 0;
}

.item-np .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: .4s ease;
}

.item-np .text-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 28px;
}

.tag-np {
  display: inline-block;
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 17px;
  letter-spacing: -0.16px;
  color: #fff;
  background: #677447;
  border-radius: 100px;
  padding: 9px 16px;
  margin-bottom: 16px;
}

.item-np h3 {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -0.48px;
  color: #001c66;
  margin: 0 0 32px;
}

.link-np {
  margin-top: auto;
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #001c66;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.link-np span,
.link-np svg {
  vertical-align: middle;
}
.link-np svg{
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
.link-np span {
  display: inline-block;
  padding-right: 18px;
}

/*.link-np:hover {
  color: #0079ff;
}*/
.link-np:hover svg{
  -webkit-transform: translateX(4px);
  -o-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}

/* ============================== responsive =============================== */

@media (min-width: 992px) {
  /* right column top-aligns with the h3, i.e. below the 52px icon + 20px gap */
  .topic-cp .fl-col-md-7 {
    padding-top: 72px;
  }
}

@media (max-width: 991px) {
  .chart-cp {
    padding: 20px;
  }

  .phases-cp {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .topic-cp .fl-col-md-5 {
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .cp-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* hero: cloud drops below the title */
  .ban-cp {
    min-height: 386px;
    padding: 40px 0 75px;
  }

  .crumbs-cp {
    margin-bottom: 40px;
  }

  .ban-cp h1 {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .cloud-cp {
    position: static;
    display: block;
    margin-top: 67px;
  }

  /* mobile type scale */
  .cp-page .h2_header_s {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .cp-page .h2_header_s.mar_b40px,
  .cp-page .h2_header_s.mar_b20px {
    margin-bottom: 20px;
  }

  .cp-page .font_s24px p,
  .cp-page .font_s24px li {
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: -0.18px;
  }

  .cp-page .h3-cp {
    font-size: 20px;
    letter-spacing: -0.4px;
    margin-bottom: 20px;
  }

  .cp-page .divider_row {
    margin: 40px 0;
  }

  .cp-page .mar_t60px,
  .cp-page .phases-title-cp {
    margin-top: 40px;
  }

  .notes-cp {
    margin-top: 40px;
  }

  a.btn-cp {
    padding: 15px 20px;
  }

  .diagram-cp {
    margin-top: 40px;
  }

  .bar-cp {
    padding: 10px 16px;
  }

  .bar-cp h3 {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .chips-cp {
    display: block;
    margin: 0 0 20px;
  }

  .chip-col-cp {
    padding: 0;
  }

  .chip-col-cp + .chip-col-cp {
    margin-top: 20px;
  }
  .chip-col-cp + .chip-col-cp .arr-cp{
    display: none;
  }
  .chart-cp {
    padding: 12px;
    overflow-x: auto;
  }

  .chart-cp img {
    min-width: 600px;
  }

  /* phases stack, arrows rotate */
  .phases-cp {
    display: block;
  }

  .phase-body-cp {
    min-height: 106px;
  }

  .phase-arr-cp {
    display: block;
    height: 52px;
    padding: 13px 0;
    text-align: center;
  }

  .parr-svg-cp {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  /* Nature Positive */
  .sect-np .head-np {
    margin-bottom: 40px;
  }

  .sect-np .head-np h2 {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .sect-np .head-np p {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.16px;
  }
}

/* ==========================================================================
   Circular Resources
   Values measured from the Figma PDF exports:
     desktop  1440 x 5193.18  (Circular Resources.pdf)
     mobile    402 x 6779.00  (Circular Resources (1).pdf)
   Shares the hero, grid and Nature Positive blocks above; only the pieces
   that differ from Climate Positive are declared here.
   ========================================================================== */

/* ------------------------------- hero ----------------------------------- */

.loop-cr {
  position: absolute;
  /* offset from the .container padding box (1170), not the 1140 grid */
  right: 165px;
  top: -30px;
  line-height: 0;
  pointer-events: none;
}

.loop-cr img {
  display: block;
  width: 158px;
  height: 170px;
}

/* --------------------------- shared type -------------------------------- */

.cr-page .h3-cr {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -0.24px;
  color: #001c66;
  margin: 0;
}

/* lead-in paragraph above the first topic row */
.cr-page .intro-cr {
  margin-bottom: 48px;
}

.section_main_s .intro-cr p:last-child {
  margin-bottom: 0;
}

.cr-page .divider_row {
  margin: 48px 0 50px;
}

/* ------------------------------- charts --------------------------------- */

.chart-cr {
  margin-top: 60px;
}

.chart-cr img {
  display: block;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.cr-page .chart-title-cr {
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: -0.18px;
  color: #001c66;
  margin: 50px 0 0;
}

.chart-title-cr + .chart-cr {
  margin-top: 32px;
}

/* ============================== responsive =============================== */

@media (max-width: 991px) {
  /* stacked topic rows: the heading carries the gap to its body copy */
  .cr-page .topic-cr > [class*="fl-col-"] > .h3-cr {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .cr-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* hero: the loop drops below the title */
  .ban-cr {
    min-height: 386px;
    padding: 40px 0;
  }

  .ban-cr h1 {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .loop-cr {
    position: static;
    display: block;
    margin-top: 40px;
  }

  /* mobile type scale */
  .cr-page .h2_header_s {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .cr-page .h2_header_s.mar_b40px {
    margin-bottom: 20px;
  }

  .cr-page .font_s24px p {
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: -0.18px;
  }

  .cr-page .h3-cr {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .cr-page .intro-cr {
    margin-bottom: 40px;
  }

  .cr-page .divider_row {
    margin: 40px 0;
  }

  .chart-cr {
    margin-top: 40px;
  }

  .cr-page .chart-title-cr {
    margin-top: 40px;
  }

  .chart-title-cr + .chart-cr {
    margin-top: 20px;
  }
}