body {
  background: #000;
  position: relative;
}
body:before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/pattern-black.png");
  background-repeat: repeat-x;
  width: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  opacity: 0.85;
  height: 47.2rem;
  transform: rotate(180deg);
  background-position: 50% 62%;
}

header, main {
  position: relative;
}

main {
  z-index: 0;
  padding-block-end: 8rem;
}

header {
  z-index: 1;
}
header .header--logo a {
  display: inline-block;
}

.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}

.offset-left {
  padding-inline-start: 6rem; /* to match the elements that use the .red-left-border offset */
}

h1.red-left-border, h2.red-left-border {
  color: #fff;
  position: relative;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  margin-block: 0;
  padding-inline-start: 6rem;
  display: flex;
  align-items: flex-end;
}
h1.red-left-border span, h2.red-left-border span {
  max-width: 35rem;
}
h1.red-left-border:before, h1.red-left-border:after, h2.red-left-border:before, h2.red-left-border:after {
  content: "";
  display: block;
}
h1.red-left-border:after, h2.red-left-border:after {
  height: 10rem;
  width: 0;
}
h1.red-left-border:before, h2.red-left-border:before {
  position: absolute;
  top: 0;
  left: 1.2rem;
  width: 1.8rem;
  height: var(--red-left-border-height, 10rem);
  background: #C72127;
}
@media screen and (min-width: 768px) {
  h1.red-left-border:before, h2.red-left-border:before {
    left: 0;
    width: 3rem;
  }
}

a, button {
  outline: transparent solid 2px;
  outline-offset: 1rem;
  transition: 0.2s;
}
a:focus-visible, button:focus-visible {
  outline-color: #fff;
  outline-offset: 0.2rem;
}

[prefers-reduced-motion] {
  transition: none !important;
}

.content > :last-child {
  margin-block-end: 0;
}

.intro__image {
  margin-block: 3rem;
}

video {
  width: 100%;
  height: auto;
}

@property --accordion-gradient-stop-1-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --accordion-gradient-stop-1-bottom {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --accordion-gradient-stop-2-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --accordion-gradient-stop-2-bottom {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --accordion-gradient-stop-3-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}
@property --accordion-gradient-stop-3-bottom {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}
.infographic__accordions {
  position: relative;
  margin-block-start: 8rem;
  --accordion-gradient-stop-1-top: 0%;
  --accordion-gradient-stop-1-bottom: 0%;
  --accordion-gradient-stop-2-top: 50%;
  --accordion-gradient-stop-2-bottom: 50%;
  --accordion-gradient-stop-3-top: 100%;
  --accordion-gradient-stop-3-bottom: 100%;
}
.infographic__accordions::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.2rem;
  display: block;
  width: 1.8rem;
  background: linear-gradient(to bottom, #871a3c 0%, #871a3c var(--accordion-gradient-stop-1-top), #841932 var(--accordion-gradient-stop-1-bottom), #c32127 var(--accordion-gradient-stop-2-top), #c52429 var(--accordion-gradient-stop-2-bottom), #e95053 var(--accordion-gradient-stop-3-top), #e95053 var(--accordion-gradient-stop-3-bottom), #e64549 100%);
}
@media screen and (min-width: 768px) {
  .infographic__accordions::before {
    left: 0;
    width: 3rem;
  }
}
.infographic__accordions__gradient-debug {
  position: absolute;
  left: calc(1.2rem - 30px);
  z-index: 2;
  width: 30px;
  height: 2px;
  background: #00ff00;
  pointer-events: none;
  transform: translateY(-1px);
  top: var(--accordion-gradient-debug-stop, var(--accordion-gradient-stop-1-bottom));
}
@media screen and (min-width: 768px) {
  .infographic__accordions__gradient-debug {
    left: -30px;
  }
}
.infographic__accordions__gradient-debug--bottom {
  background: #ffff00;
  z-index: 1;
}
.infographic__accordions button {
  width: 100%;
  border: none;
  background: none;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-block: 1rem;
  padding-inline: 0;
  margin: 0;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .infographic__accordions button {
    gap: 4rem;
    align-items: flex-end;
    flex-direction: row;
  }
}
.infographic__accordions button .title {
  margin: 0;
  color: #fff;
  text-align: left;
}
.infographic__accordions button h2.title {
  font-size: 2rem;
  max-width: 20rem;
  margin-block: 1rem 1.6rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .infographic__accordions button h2.title {
    margin-block: 0;
    max-width: revert;
    line-height: 1.2;
  }
}
.infographic__accordions button h3.title {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .infographic__accordions button h2.title {
    font-size: 3.6rem;
  }
  .infographic__accordions button h3.title {
    font-size: 2.4rem;
  }
}
.infographic__accordions button div:has(img.icon) {
  display: flex;
  justify-content: center;
  width: 13rem;
}
.infographic__accordions button img.icon {
  max-width: 13rem;
}
@media screen and (min-width: 992px) {
  .infographic__accordions button div:has(img.icon) {
    width: 18rem;
  }
  .infographic__accordions button img.icon {
    max-width: 18rem;
  }
}
.infographic__accordions button .toggle {
  margin-inline-start: auto;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .infographic__accordions button .toggle {
    font-size: 1.4rem;
    gap: 2rem;
  }
}
.infographic__accordions button .toggle svg {
  width: 1.6rem;
  height: 1.1rem;
}
@media screen and (min-width: 768px) {
  .infographic__accordions button .toggle svg {
    height: revert;
    width: revert;
  }
}
.infographic__accordions button .toggle > span {
  width: 9rem;
  text-align: left;
}
.infographic__accordions button .toggle .open {
  display: none;
}
.infographic__accordions button .toggle svg {
  transition: transform 0.3s ease-in-out;
}
.infographic__accordions button.open .toggle svg {
  transform: rotate(180deg);
}
.infographic__accordions button.open .closed {
  display: none;
}
.infographic__accordions button.open .open {
  display: block;
}
.infographic__accordions button:focus {
  outline: none;
}
.infographic__accordions button:focus-visible {
  outline: 2px solid #fff !important;
}
.infographic__accordions__accordion {
  border-bottom: 10px solid #871A3C;
}
.infographic__accordions__accordion:not(.pos-1) {
  margin-block-start: 2rem;
}
.infographic__accordions__accordion.pos-2 {
  border-bottom-color: #C72127;
}
.infographic__accordions__accordion.pos-3 {
  border-bottom-color: #E95053;
}
.infographic__accordions__accordion__content {
  display: none;
  padding-block: 2rem;
}
.infographic__accordions h2.title--white {
  color: #fff;
  margin-block-start: 2rem;
  font-size: 2.4rem;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.icon-wrapper__icon {
  max-width: 20rem;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .icon-wrapper {
    flex-direction: row;
  }
}

.infographic__accordions__accordion__children button {
  border-top: 3px solid #871A3C;
  margin-block-end: 30px;
}

.pos-2 svg path {
  stroke: #C72127;
}
.pos-2 .infographic__accordions__accordion__children button {
  border-top-color: #C72127;
}

.pos-3 svg path {
  stroke: #E95053;
}
.pos-3 .infographic__accordions__accordion__children button {
  border-top-color: #E95053;
}

.key-activities {
  margin-block-start: 10rem;
}
.key-activities__intro {
  margin-block-end: 4rem;
}
.key-activities__intro > :last-child {
  margin-block-end: 0;
}
.key-activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 3.5rem repeat(3, minmax(4.8rem, auto));
  row-gap: 1rem;
  margin-block: 6rem 8rem;
  min-width: 92rem;
  overflow: visible;
  position: relative;
}
.key-activities__grid:before {
  content: "";
  background: linear-gradient(90deg, #871A3C 0%, #C72127 50%, #E95053 100%);
  display: block;
  grid-column: 1/-1;
  grid-row: 2;
  height: 3rem;
  pointer-events: none;
  z-index: 0;
}
.key-activities__grid:has(.key-activities__grid__activity:hover) .key-activities__grid__activity:not(:hover):not(:focus-visible), .key-activities__grid:has(.key-activities__grid__activity:focus-visible) .key-activities__grid__activity:not(:hover):not(:focus-visible) {
  opacity: 0.5;
}
.key-activities__grid__phase, .key-activities__grid__activity {
  position: relative;
  z-index: 1;
}
.key-activities__grid__phase {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  font-weight: 800;
  grid-row: 1;
  justify-content: flex-end;
  line-height: 1.2;
  min-height: 17rem;
  text-align: center;
  white-space: nowrap;
}
.key-activities__grid__phase--1 {
  grid-column: 1;
}
.key-activities__grid__phase--2 {
  grid-column: 2;
}
.key-activities__grid__phase--3 {
  grid-column: 3;
}
.key-activities__grid__phase__icon {
  display: block;
  margin-block-end: 1rem;
  max-height: 10rem;
  max-width: 12rem;
  width: auto;
}
.key-activities__grid__activity {
  align-items: center;
  background: #E8E8E8;
  display: flex;
  font-weight: 700;
  justify-content: center;
  line-height: 1.25;
  padding: 1rem 2.4rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.key-activities__grid__activity:focus-visible, .key-activities__grid__activity:hover {
  background: #fff;
  color: #000;
  text-decoration: none;
}
.key-activities__grid__activity--1 {
  grid-column: 1/-1;
  grid-row: 3;
  margin-inline: 14% 24%;
}
.key-activities__grid__activity--2 {
  grid-row: 4;
  margin-inline: 25% 5%;
  grid-column: 1/-1;
}
.key-activities__grid__activity--3 {
  grid-column: 2/-1;
  grid-row: 5;
  margin-inline: 10% 36%;
}

.infographic__accordions--key-activities:before {
  display: none;
}
.infographic__accordions--key-activities .infographic__accordions__accordion {
  border-bottom: none;
}
.infographic__accordions--key-activities button {
  border-bottom: 10px solid #fff;
  padding-block: 3rem;
  margin-block-end: 2rem;
}
.infographic__accordions--key-activities button h2.title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-block: 1rem 0;
}
.infographic__accordions--key-activities button:focus {
  outline: none;
}
.infographic__accordions--key-activities .toggle svg path {
  stroke: #fff !important;
}

@media (max-width: 991px) {
  .key-activities__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 3rem repeat(3, minmax(5rem, auto));
    margin: 4rem 0 6rem -5.2rem;
    min-width: 0;
    row-gap: 1rem;
    width: calc(100% + 5.2rem);
  }
  .key-activities__grid:before {
    height: 3rem;
  }
  .key-activities__grid__phase {
    font-size: 1rem;
    line-height: 1.15;
    min-height: 7.5rem;
  }
  .key-activities__grid__phase__icon {
    margin-block-end: 0.8rem;
    max-height: 4.5rem;
    max-width: 6rem;
  }
  .key-activities__grid__activity {
    align-items: center;
    font-size: 1.4rem;
    padding: 1rem;
  }
}
@media (max-width: 374px) {
  .key-activities__grid__phase__title {
    font-size: 0.85rem;
  }
  .key-activities__grid__activity {
    font-size: 1rem;
  }
}
body.InfographicPage main .key-activities__grid__activity {
  color: #000;
}
body.InfographicPage main .key-activities__grid__activity:focus-visible, body.InfographicPage main .key-activities__grid__activity:hover {
  color: #000;
}

.useful-resources-wrapper {
  margin-block: 8rem 0;
}

.useful-resources {
  padding-block-start: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.useful-resources.border-top {
  border-top: 1px solid #E8E8E8;
  padding-block-start: 2rem;
  margin-block: 2em;
}
.pos-1 .useful-resources.border-top {
  border-top-color: #871A3C;
}
.pos-2 .useful-resources.border-top {
  border-top-color: #C72127;
}
.pos-3 .useful-resources.border-top {
  border-top-color: #E95053;
}
.useful-resources h2 {
  margin-block-end: 3rem;
}
.useful-resources .offset-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.useful-resources__resource {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  min-height: 3.5rem;
}
.useful-resources__resource p, .useful-resources__resource a {
  font-weight: 400;
  font-size: 1.6rem;
}
.useful-resources__resource__icon {
  width: 3rem;
  flex-grow: 0;
  text-align: center;
}
.useful-resources__resource__text :last-child {
  margin-block-end: 0;
}
.useful-resources__resource.no-icon {
  margin-inline-start: 5rem; /* resource gap + icon width */
}

body.InfographicPage {
  color: #fff;
  max-width: 100%;
}
body.InfographicPage .skip-link {
  position: absolute;
  z-index: 11;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #000;
  padding: 1rem;
  border-radius: 1rem;
  text-decoration: none;
}
body.InfographicPage main a:not(.key-activities__grid__activity), body.InfographicPage .breadcrumbs a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  transition: 0.3s;
}
body.InfographicPage main a:not(.key-activities__grid__activity):hover, body.InfographicPage main a:not(.key-activities__grid__activity):focus, body.InfographicPage .breadcrumbs a:hover, body.InfographicPage .breadcrumbs a:focus {
  border-bottom-color: #C72127;
}
body.InfographicPage .footer {
  background: transparent url("../images/pattern-black.png") repeat-x 50% -2px;
  padding-block-start: 10rem;
  box-shadow: none;
}
@media screen and (max-width: 991px) {
  body.InfographicPage .header--menu-toggle {
    color: #fff;
  }
  body.InfographicPage .header--menu-toggle:before {
    filter: brightness(1000%);
  }
}
/*# sourceMappingURL=style.css.map */