@import url("https://use.typekit.net/hct2vbz.css");
@font-face {
  font-family: "big-caslon";
  src: url("/assets/fonts/big-caslon.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.handwritten, .page-story .year, .text-full-image .year, .blog-date, .story-date {
  font-family: adobe-handwriting-ernie, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sans, .mailing-list-form #mc-embedded-subscribe, .mailing-list-form #mce-success-response, .mailing-list-form #mc_embed_signup div.mce_inline_error, .mailing-list-form h2, #home .home-content p, #home .home-content .home-intro, .page-about-us .contact-details, .page-about-us .helpers ul li, .page-about-us .team-suffix ul li, .page-about-us p, .page-about-us h3, .page-about-us .intro-text .intro-para, .page-about-us .intro-text-grid h4, .page-story p, .page-impacts-archive p, .page-impacts-single .references, .page-impacts-single .download-wrapper a, .page-impacts-single article p, .page-impacts-single article .intro, .page-impacts-single article .image-caption, .page-impacts-archive article a, .page-reflections-single .references, .page-reflections-single .download-wrapper a, .page-reflections-single article li, .page-reflections-single article p, .page-reflections-archive article a, .page .excerpt, .page-about-us .excerpt, .page-story .excerpt, .page-impacts-single .excerpt, .page-impacts-archive .excerpt, .page-reflections-single .excerpt, .page-reflections-archive .excerpt, .page .excerpt-large, .page-about-us .excerpt-large, .page-story .excerpt-large, .page-impacts-single .excerpt-large, .page-impacts-archive .excerpt-large, .page-reflections-single .excerpt-large, .page-reflections-archive .excerpt-large, .story-4-para h3, .story-3-para .text-1 h3, .text-full-image p, .pagination li, .scroller, .radio .time, blockquote .caption, .english, .copy-medium, .copy-large, .blog-excerpt, .home-intro {
  font-family: maple-web, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.serif, .mailing-list-form #mce-EMAIL, #mailing-list-open, #home .home-content .block-1 #begin, #home .home-content .home-intro-heading, .page-about-us .initiative-wrap .tereo h3, .page-about-us h2, .page-about-us .intro-text h1, .page-story h2, .page-impacts-archive h1, .page-impacts-single article h1, .page-reflections-single article h1, .page-reflections-archive article h2, .page .page-title, .page-about-us .page-title, .page-story .page-title, .page-impacts-single .page-title, .page-impacts-archive .page-title, .page-reflections-single .page-title, .page-reflections-archive .page-title, .text-full-image h2, body.show-offcanvas #offcanvas li a, #accordion > li > label .label-english, #accordion > li > label .label-maori, blockquote, .blog-title, .story-heading {
  font-family: "big-caslon", serif;
  font-weight: 400;
  font-style: normal;
}

.vh-10 {
  height: 10vh;
}

.minvh-10 {
  min-height: 10vh;
}

.vh-20 {
  height: 20vh;
}

.minvh-20 {
  min-height: 20vh;
}

.vh-30 {
  height: 30vh;
}

.minvh-30 {
  min-height: 30vh;
}

.vh-40 {
  height: 40vh;
}

.minvh-40 {
  min-height: 40vh;
}

.vh-50 {
  height: 50vh;
}

.minvh-50 {
  min-height: 50vh;
}

.vh-60 {
  height: 60vh;
}

.minvh-60 {
  min-height: 60vh;
}

.vh-70 {
  height: 70vh;
}

.minvh-70 {
  min-height: 70vh;
}

.vh-80 {
  height: 80vh;
}

.minvh-80 {
  min-height: 80vh;
}

.vh-90 {
  height: 90vh;
}

.minvh-90 {
  min-height: 90vh;
}

.vh-100 {
  height: 100vh;
}

.minvh-100, .story-text-image-vert, .story-text-video, .story-text-audio, .story-text-image, .story-4-para, .story-3-para, .story-2-para, .story-1-para, .text-full-image {
  min-height: 100vh;
}

.vh-auto {
  height: auto;
}

.minvh-auto {
  min-height: auto;
}

@media (max-width: 820px) {
  .minvh-100, .story-text-image-vert, .story-text-video, .story-text-audio, .story-text-image, .story-4-para, .story-3-para, .story-2-para, .story-1-para, .text-full-image {
    min-height: auto;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
*:focus {
  outline: none;
  color: inherit;
}

html {
  overflow-x: hidden;
}
html.prevent-scroll {
  overflow-y: hidden;
}
html.prevent-scroll body {
  overflow-y: hidden;
}

.bgc-black, #home .home-background {
  background-color: #000000;
}

.c-black, .page-about-us section.initiatives, .page-about-us section, .page-about-us, .page-impacts-single, .page-reflections-single {
  color: #000000;
}

.bgc-white {
  background-color: #ffffff;
}

.c-white, #home .home-content .home-intro, #home .home-content, .page-story, .page-reflections-archive, .page .page-title.story, .page-about-us .page-title.story, .page-story .page-title.story, .page-impacts-single .page-title.story, .page-impacts-archive .page-title.story, .page-reflections-single .page-title.story, .page-reflections-archive .page-title.story, .page .page-title.reflections, .page-about-us .page-title.reflections, .page-story .page-title.reflections, .page-impacts-single .page-title.reflections, .page-impacts-archive .page-title.reflections, .page-reflections-single .page-title.reflections, .page-reflections-archive .page-title.reflections, .story-text-image-vert, .story-text-video, .story-text-audio, .story-text-image, .story-4-para, .story-3-para, .story-2-para, .story-1-para, .pagination, body.show-offcanvas #offcanvas li a, #accordion > li > label .label-english, #accordion > li > label .label-maori, .story-heading, .story-date, .home-intro {
  color: #ffffff;
}

.bgc-green-lightest, .page-about-us section.initiatives, .page-about-us section, .page-about-us, .page-impacts-single, .page-reflections-single, body.show-offcanvas #offcanvas li.about-us, #accordion > .about-us > label, #accordion > .about-us > label > .label-wrapper,
#accordion > .about-us .accslide, #accordion > .about-us {
  background-color: #D6E5E3;
}

.c-green-lightest {
  color: #D6E5E3;
}

.bgc-green-light, .page-impacts-archive, body.show-offcanvas #offcanvas li.impacts, #accordion > .impacts > label, #accordion > .impacts > label > .label-wrapper,
#accordion > .impacts .accslide, #accordion > .impacts {
  background-color: #99C0B9;
}

.c-green-light {
  color: #99C0B9;
}

.bgc-green-dark, .page-reflections-archive, body.show-offcanvas #offcanvas li.reflections, #accordion > .reflections label, #accordion > .reflections > label > .label-wrapper,
#accordion > .reflections .accslide, #accordion > .reflections {
  background-color: #5A988C;
}

.c-green-dark {
  color: #5A988C;
}

.bgc-green-darkest, .page-story, .story-text-video, body.show-offcanvas #offcanvas li.story, #accordion > .story label, #accordion > .story > label > .label-wrapper,
#accordion > .story .accslide, #accordion > .story {
  background-color: #3A675F;
}

.c-green-darkest, .page .page-title.impacts, .page-about-us .page-title.impacts, .page-story .page-title.impacts, .page-impacts-single .page-title.impacts, .page-impacts-archive .page-title.impacts, .page-reflections-single .page-title.impacts, .page-reflections-archive .page-title.impacts, .page .page-title.about-us, .page-about-us .page-title.about-us, .page-story .page-title.about-us, .page-impacts-single .page-title.about-us, .page-impacts-archive .page-title.about-us, .page-reflections-single .page-title.about-us, .page-reflections-archive .page-title.about-us, body.show-offcanvas #offcanvas li.about-us a, #accordion > .about-us > label .label-english, #accordion > .about-us > label .label-maori {
  color: #3A675F;
}

.bgc-green-overlay, #home .green-wash {
  background-color: #5B998D;
}

.c-green-overlay {
  color: #5B998D;
}

.bgc-gold, body.show-offcanvas #offcanvas li.home, #accordion > .home label, #accordion > .home > label > .label-wrapper {
  background-color: #C7A461;
}

.c-gold {
  color: #C7A461;
}

.home-intro {
  font-size: clamp(22px, 1.6vw, 1.6vw);
}

.story-date {
  font-size: clamp(40px, 4.4vw, 4.4vw);
}

.story-heading {
  font-size: clamp(30px, 2.8vw, 2.8vw);
}

.blog-title {
  font-size: clamp(24px, 1.8vw, 1.8vw);
}

.blog-date {
  font-size: 23px;
}

.blog-excerpt {
  font-size: clamp(18px, 1.04vw, 1.04vw);
}

.copy-large {
  font-size: clamp(20px, 1.5vw, 24px);
}

.copy-medium {
  font-size: clamp(18px, 1.25vw, 1.25vw);
}

.english {
  font-size: clamp(22px, 1.6vw, 1.6vw);
  margin-block-end: 1em;
  display: block;
}

blockquote {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  margin-block: 1em;
}
blockquote .caption {
  display: block;
  font-size: clamp(18px, 1.04vw, 1.04vw);
  text-align: end;
  letter-spacing: normal;
  margin-block: 0.8em;
}

.lh-150 {
  line-height: 150%;
}

.lh-140, .page-reflections-single article li, p {
  line-height: 140%;
}

.lh-130, .page-impacts-single .download-wrapper a, .page-reflections-single .download-wrapper a, .page .excerpt, .page-about-us .excerpt, .page-story .excerpt, .page-impacts-single .excerpt, .page-impacts-archive .excerpt, .page-reflections-single .excerpt, .page-reflections-archive .excerpt {
  line-height: 130%;
}

.lh-120, .page .excerpt-large, .page-about-us .excerpt-large, .page-story .excerpt-large, .page-impacts-single .excerpt-large, .page-impacts-archive .excerpt-large, .page-reflections-single .excerpt-large, .page-reflections-archive .excerpt-large {
  line-height: 120%;
}

.lh-100 {
  line-height: 100%;
}

.lh-90 {
  line-height: 90%;
}

.lh-80 {
  line-height: 80%;
}

.lh-70 {
  line-height: 70%;
}

.mbe, .mailing-list-form #mce-EMAIL, #home .home-content .home-intro-heading, .page-about-us .initiative-wrap img, .page-about-us p, .page-about-us h3, .page-about-us h2, .page-about-us .intro-text .intro-para, .page-about-us .intro-text h1, .page-story h2, .page-impacts-archive p, .page-impacts-archive h1, .page-impacts-single article p, .page-impacts-single article .intro, .page-impacts-single article h1, .page-impacts-archive article h2, .page-reflections-single article li, .page-reflections-single article p, .page-reflections-single article h1, .page-reflections-archive article h2, .page .excerpt-large, .page-about-us .excerpt-large, .page-story .excerpt-large, .page-impacts-single .excerpt-large, .page-impacts-archive .excerpt-large, .page-reflections-single .excerpt-large, .page-reflections-archive .excerpt-large, .story-text-audio .text p, .story-text-image .text p, .story-4-para h3, .story-3-para .text-2 p, .story-3-para .text-1 h3, .text-full-image h2 {
  margin-block-end: 0.6em;
}

.light-rule, .story-text-video .text h2, .story-4-para .year-header, .story-3-para h2, .story-2-para .text-2 h2, .story-1-para .text-2 h2 {
  border-bottom: 2px solid #99C0B9;
}

.z--1 {
  z-index: -1;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}

.hidden {
  display: none;
}

.slide-leave {
  top: 0;
  opacity: 0;
}

.slide-leave-active {
  opacity: 0;
  transition: top 1s cubic-bezier(0.83, 0, 0.17, 1);
}

.slide-leave-to {
  position: relative;
  top: -100vh;
}

.slide-enter {
  top: 100vh;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.slide-enter-active {
  transition: top 1s cubic-bezier(0.83, 0, 0.17, 1);
  opacity: 0;
  z-index: 20;
  position: absolute;
}

.slide-enter-to {
  opacity: 1;
  top: 0;
}

.slide-reverse-leave {
  top: 0;
  position: absolute;
  z-index: 20;
}

.slide-reverse-leave-active {
  opacity: 1;
  transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
}

.slide-reverse-leave-to {
  top: 100vh;
  position: absolute;
  z-index: 20;
}

.slide-reverse-enter {
  top: 100vh;
}

.slide-reverse-enter-active {
  transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
}

.slide-reverse-enter-to {
  top: 0;
}

.slide-horiz-leave-active .scroll-container,
.slide-horiz-enter-active .scroll-container,
.slide-leave-active .scroll-container,
.slide-enter-active .scroll-container,
.slide-horiz-reverse-enter-active .scroll-container {
  overflow-y: hidden;
}

#accordion {
  list-style: none;
  display: flex;
}
#accordion > li {
  display: flex;
}
#accordion > li .accslide {
  width: 0;
}
#accordion > li .nav-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#accordion > li > label {
  height: 100%;
  float: left;
  width: 3.225vw;
  transition: width 700ms ease;
  cursor: pointer;
}
@media screen and (max-width: 820px) {
  #accordion > li > label {
    display: none;
  }
}
#accordion > li > label .label-wrapper {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
#accordion > li > label .label-english, #accordion > li > label .label-maori {
  position: fixed;
  writing-mode: tb;
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
#accordion > li.active {
  z-index: 20;
}
#accordion > li.active.story, #accordion > li.active.about-us, #accordion > li.active.reflections, #accordion > li.active.impacts {
  min-height: 100vh;
}
@media screen and (max-width: 820px) {
  #accordion > li.active.story, #accordion > li.active.about-us, #accordion > li.active.reflections, #accordion > li.active.impacts {
    position: absolute;
    top: 0;
    left: 0;
  }
}
#accordion > li.active.home {
  z-index: 10;
  height: 100vh;
}
@media screen and (max-width: 820px) {
  #accordion > li.active.home {
    position: absolute;
    top: 0;
    left: 0;
  }
}
#accordion > li.active.home .accslide {
  pointer-events: none;
}
#accordion > li.active .accslide {
  width: 83vw;
}
@media screen and (max-width: 820px) {
  #accordion > li.active .accslide {
    width: 100vw;
  }
}
#accordion > li.active > label {
  z-index: 10;
  transition: width 700ms ease;
  font-size: clamp(21px, 1.3vw, 1.3vw);
  width: 4.2vw;
}
#accordion > li.active > label div {
  opacity: 1;
}
#accordion > li.active .label-english {
  opacity: 0;
}
#accordion > li:not(.active):hover.home {
  z-index: 10 !important;
}
#accordion > li:not(.active) .nav-label:hover {
  overflow: visible;
}
#accordion > li:not(.active) .nav-label:hover .label-wrapper {
  opacity: 1;
  width: 3.9vw;
  font-size: clamp(21px, 1.3vw, 1.3vw);
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-half {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes fade-out {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#accordion > li:not(.active) .nav-label .label-maori.preload, #accordion > li:not(.active) .nav-label .label-english.preload {
  animation-duration: 0s !important;
}
#accordion > li:not(.active) .nav-label .label-maori {
  opacity: 0;
  animation-name: fade-out;
  animation-duration: 0.75s;
}
#accordion > li:not(.active) .nav-label .label-english {
  opacity: 0.5;
  animation-name: fade-in-half;
  animation-duration: 0.75s;
}
#accordion > li:not(.active) .nav-label:hover .label-english {
  animation-name: fade-out;
  animation-duration: 0.75s;
  opacity: 0;
}
#accordion > li:not(.active) .nav-label:hover .label-maori {
  animation-name: fade-in;
  animation-duration: 0.75s;
  opacity: 1;
}
#accordion > .home label, #accordion > .home > label > .label-wrapper {
  opacity: 1;
  z-index: 10;
}
#accordion > .home label .label-english, #accordion > .home > label > .label-wrapper .label-english {
  opacity: 0.6;
}
#accordion > .home.active > label > .label-wrapper .label-english {
  opacity: 0;
}
#accordion > .home.active .home-logo {
  width: 4.025vw;
}
#accordion > .home.active .home-logo img {
  width: 75%;
}
#accordion > .home.active:hover {
  z-index: 11 !important;
}
#accordion > .home.active:hover .home-logo {
  margin-left: 0;
}
#accordion > .home:hover {
  z-index: 11 !important;
}
#accordion > .home .home-logo {
  transition: all 0.35s linear;
  position: fixed;
  bottom: 2rem;
  width: 3.1vw;
  display: flex;
  justify-content: center;
}
#accordion > .home .home-logo img {
  transition: all 0.35s linear;
  width: 65%;
}
@media screen and (min-width: 820px) {
  #accordion > .story {
    z-index: 21;
  }
}
@media screen and (min-width: 820px) {
  #accordion > .reflections {
    z-index: 22;
  }
}
@media screen and (min-width: 820px) {
  #accordion > .impacts {
    z-index: 23;
  }
}
@media screen and (min-width: 820px) {
  #accordion > .about-us {
    z-index: 24;
  }
}
#accordion .accslide {
  width: 0;
  transition: width 700ms ease;
}

body.home #accordion .story, body.home #accordion .reflections, body.home #accordion .impacts, body.home #accordion .about-us {
  background: none;
}
body.home #accordion #home-wrapper .nav-label {
  transform: translateX(-100%);
}
body.home #accordion #story-wrapper .nav-label {
  transform: translateX(400%);
}
body.home #accordion #reflections-wrapper .nav-label {
  transform: translateX(300%);
}
body.home #accordion #impacts-wrapper .nav-label {
  transform: translateX(200%);
}
body.home #accordion #about-us-wrapper .nav-label {
  transform: translateX(100%);
}

@media screen and (min-width: 820px) {
  body.home.hovered-story #story-wrapper .label-wrapper, body.returned-home.hovered-story #story-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.home.hovered-reflections #story-wrapper .label-wrapper,
  body.home.hovered-reflections #reflections-wrapper .label-wrapper, body.returned-home.hovered-reflections #story-wrapper .label-wrapper,
  body.returned-home.hovered-reflections #reflections-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.home.hovered-impacts #story-wrapper .label-wrapper,
  body.home.hovered-impacts #reflections-wrapper .label-wrapper,
  body.home.hovered-impacts #impacts-wrapper .label-wrapper, body.returned-home.hovered-impacts #story-wrapper .label-wrapper,
  body.returned-home.hovered-impacts #reflections-wrapper .label-wrapper,
  body.returned-home.hovered-impacts #impacts-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.home.hovered-about-us #story-wrapper .label-wrapper,
  body.home.hovered-about-us #reflections-wrapper .label-wrapper,
  body.home.hovered-about-us #impacts-wrapper .label-wrapper,
  body.home.hovered-about-us #about-us-wrapper .label-wrapper, body.returned-home.hovered-about-us #story-wrapper .label-wrapper,
  body.returned-home.hovered-about-us #reflections-wrapper .label-wrapper,
  body.returned-home.hovered-about-us #impacts-wrapper .label-wrapper,
  body.returned-home.hovered-about-us #about-us-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.story.hovered-home #accordion #home-wrapper .nav-label:hover .label-wrapper, body.reflections.hovered-home #accordion #home-wrapper .nav-label:hover .label-wrapper, body.impacts.hovered-home #accordion #home-wrapper .nav-label:hover .label-wrapper, body.about-us.hovered-home #accordion #home-wrapper .nav-label:hover .label-wrapper {
    width: 3.1vw;
  }
  body.story #story-wrapper .label-wrapper {
    margin-left: 0;
  }
  body.story.hovered-reflections #reflections-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.story.hovered-impacts #reflections-wrapper .label-wrapper,
  body.story.hovered-impacts #impacts-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.story.hovered-about-us #reflections-wrapper .label-wrapper,
  body.story.hovered-about-us #impacts-wrapper .label-wrapper,
  body.story.hovered-about-us #about-us-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.reflections.hovered-story #story-wrapper .label-wrapper {
    margin-left: 0vw;
  }
  body.reflections.hovered-story #reflections-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.reflections.hovered-impacts #impacts-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.reflections.hovered-about-us #impacts-wrapper .label-wrapper,
  body.reflections.hovered-about-us #about-us-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.impacts.hovered-home #story-wrapper {
    z-index: 30 !important;
  }
  body.impacts.hovered-story #story-wrapper {
    z-index: 30 !important;
  }
  body.impacts.hovered-story #story-wrapper .label-wrapper {
    margin-left: 0vw;
  }
  body.impacts.hovered-story #reflections-wrapper .label-wrapper, body.impacts.hovered-story #impacts-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.impacts.hovered-reflections #story-wrapper {
    z-index: 30 !important;
  }
  body.impacts.hovered-reflections #impacts-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.impacts.hovered-about-us #about-us-wrapper .label-wrapper {
    margin-left: -0.8vw;
  }
  body.about-us.hovered-home #story-wrapper {
    z-index: 30 !important;
  }
  body.about-us.hovered-home #reflections-wrapper {
    z-index: 29 !important;
  }
  body.about-us.hovered-home #impacts-wrapper {
    z-index: 28 !important;
  }
  body.about-us.hovered-story #story-wrapper {
    z-index: 33 !important;
  }
  body.about-us.hovered-story #story-wrapper .label-wrapper {
    margin-left: 0vw;
  }
  body.about-us.hovered-story #reflections-wrapper {
    z-index: 32 !important;
  }
  body.about-us.hovered-story #reflections-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.about-us.hovered-story #impacts-wrapper {
    z-index: 31 !important;
  }
  body.about-us.hovered-story #impacts-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.about-us.hovered-story #about-us-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.about-us.hovered-reflections #story-wrapper {
    z-index: 31 !important;
  }
  body.about-us.hovered-reflections #reflections-wrapper {
    z-index: 30 !important;
  }
  body.about-us.hovered-reflections #impacts-wrapper .label-wrapper, body.about-us.hovered-reflections #about-us-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
  body.about-us.hovered-impacts #story-wrapper, body.about-us.hovered-impacts #reflections-wrapper {
    z-index: 30 !important;
  }
  body.about-us.hovered-impacts #about-us-wrapper .label-wrapper {
    margin-left: 0.8vw;
  }
}
.sliding-in {
  z-index: 50 !important;
}

/*
body.story.hovered-about-us #impacts-wrapper .label-wrapper,
body.story.hovered-about-us #about-us-wrapper .label-wrapper, 

body.reflections.hovered-about-us #impacts-wrapper .label-wrapper,
body.reflections.hovered-about-us #about-us-wrapper .label-wrapper, 

body.impacts.hovered-about-us #impacts-wrapper .label-wrapper,
body.impacts.hovered-about-us #about-us-wrapper .label-wrapper, 

body.about-us.hovered-about-us #impacts-wrapper .label-wrapper,
body.about-us.hovered-about-us #about-us-wrapper .label-wrapper {
    margin-left: -0.8vw;
}
*/
#burger {
  display: none;
  height: 0.75rem;
  width: 2rem;
  margin-top: 0.25em;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 50;
}
@media screen and (max-width: 820px) {
  #burger {
    display: inline-block;
    position: fixed;
    top: 4.5vw;
    right: 3.95vw;
  }
}
@media screen and (max-width: 560px) {
  #burger {
    display: inline-block;
    position: fixed;
    top: 7.9vw;
    right: 7.9vw;
  }
}

.impacts #burger, .about-us #burger {
  border-top: 2px solid #3A675F;
  border-bottom: 2px solid #3A675F;
}

.reflections #burger {
  border-top: 2px solid #D6E5E3;
  border-bottom: 2px solid #D6E5E3;
}

#offcanvas {
  display: none;
  opacity: 0;
  transition: opacity 700ms ease;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9999;
}

body.show-offcanvas #burger {
  display: none;
}
@media screen and (max-width: 820px) {
  body.show-offcanvas #offcanvas {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
body.show-offcanvas #offcanvas ul, body.show-offcanvas #offcanvas li {
  width: 100%;
}
body.show-offcanvas #offcanvas li {
  display: block;
  transition: 700ms ease;
}
body.show-offcanvas #offcanvas li a {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  opacity: 0.6;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 3.4vw 5.3vw;
}
body.show-offcanvas #offcanvas li.home {
  transform: translateY(-100%);
}
body.show-offcanvas #offcanvas li.story {
  transform: translateY(-200%);
}
body.show-offcanvas #offcanvas li.reflections {
  transform: translateY(-300%);
}
body.show-offcanvas #offcanvas li.impacts {
  transform: translateY(-400%);
}
body.show-offcanvas #offcanvas li.about-us {
  transform: translateY(-500%);
}
body.show-offcanvas #offcanvas .logos, body.show-offcanvas #offcanvas .close {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 700ms ease;
  opacity: 0;
}
body.show-offcanvas #offcanvas .logos img {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 250px;
}
@media screen and (max-width: 560px) {
  body.show-offcanvas #offcanvas .logos img {
    width: 200px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
body.show-offcanvas #offcanvas .close {
  padding: 10vw;
}
@media screen and (max-width: 560px) {
  body.show-offcanvas #offcanvas .close {
    padding: 20vw;
  }
}

@media screen and (max-width: 820px) {
  body.fade-offcanvas #offcanvas {
    transition: opacity 700ms ease;
    opacity: 1;
  }
  body.fade-offcanvas #offcanvas li.home, body.fade-offcanvas #offcanvas li.story, body.fade-offcanvas #offcanvas li.reflections, body.fade-offcanvas #offcanvas li.impacts, body.fade-offcanvas #offcanvas li.about-us {
    transition-delay: 300ms;
    transform: translateY(0%);
  }
  body.fade-offcanvas #offcanvas .logos, body.fade-offcanvas #offcanvas .close {
    transition: 700ms ease;
    transition-delay: 700ms;
    opacity: 1;
  }
}

@media screen and (max-width: 820px) {
  body.hide-burger #burger {
    display: none !important;
  }
}

.circle {
  position: absolute;
  top: -30%;
  left: -30%;
  right: -30%;
  bottom: -30%;
  z-index: 1;
  pointer-events: none;
}
.circle img {
  width: 100%;
  height: 100%;
}
@media (max-width: 820px) {
  .circle {
    top: -30%;
    left: -15%;
    right: -15%;
    bottom: -30%;
  }
}
@media (max-width: 560px) {
  .circle {
    display: none;
  }
}

.year-circle {
  position: absolute;
  top: -30%;
  left: -30%;
  right: -30%;
  bottom: -30%;
  z-index: 1;
}
.year-circle img {
  width: 100%;
  height: 100%;
}
@media (min-width: 820px) {
  .year-circle {
    display: none;
  }
}
.lazy-swoosh {
  display: none;
}

.circle-wrap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

.radio .toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}
.radio .toggle:focus, .radio .toggle:hover {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.radio, .voice-note {
  margin-block-start: 2rem;
  margin-block-end: 0;
}

.voice-note {
  font-size: clamp(1rem, 1.19vw, 1.19vw) !important;
}

.radio {
  align-items: center;
  display: flex;
  width: 100%;
  justify-content: center;
}
.radio.active {
  width: 265px;
}
.radio audio {
  background-color: transparent;
}
.radio audio::-webkit-media-controls-panel {
  background-color: transparent;
}
.radio audio.inactive {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.radio .toggle {
  background-image: url("/assets/play-arrow.svg");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: 55% center;
  height: 4vmax;
  width: 4vmax;
  aspect-ratio: 1/1;
  border: 2px solid #C7A461;
  border-radius: 50%;
}
.radio .toggle.playing {
  background-image: url("/assets/pause-icon.svg");
  background-position: center;
  background-size: 30%;
}
.radio .time {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  color: #ffffff;
  margin: 0 10px;
}
.radio input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1.7vmax;
  margin: 0;
  width: 70%;
  background: transparent;
  transition: all 0.3s ease-in;
  margin-inline-start: 2vmax;
  margin-inline-end: 1vmax;
  position: relative;
}
.radio input[type=range][disabled] {
  cursor: default;
}
.radio input[type=range].hidden {
  opacity: 0;
}
.radio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.radio input[type=range]:focus {
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin-block: auto;
  height: 0.5666666667vmax;
  width: 0;
  border: #C7A461 1px solid;
}
.radio input[type=range]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin-block: auto;
  height: 0.5666666667vmax;
  width: 0;
  border: #C7A461 1px solid;
}
.radio input[type=range]::-webkit-slider-thumb {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
          appearance: none;
  background-color: #C7A461;
  cursor: pointer;
  display: block;
  height: 1.7vmax;
  -webkit-transform: translateY(-0.85vmax);
  -moz-transform: translateY(0);
  width: 8px;
}
.radio input[type=range]::-moz-range-thumb {
  -webkit-tap-highlight-color: transparent;
  -moz-appearance: none;
       appearance: none;
  background-color: #C7A461;
  cursor: pointer;
  display: block;
  height: 1.7vmax;
  -webkit-transform: translateY(-0.85vmax);
  -moz-transform: translateY(0);
  width: 8px;
}
.radio input[type=range]::-ms-thumb {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background-color: #C7A461;
  cursor: pointer;
  display: block;
  height: 1.7vmax;
  -webkit-transform: translateY(-0.85vmax);
  -moz-transform: translateY(0);
  width: 8px;
}
.radio input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(199, 164, 97, 0.8);
  box-shadow: none;
  height: 2px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]:focus::-webkit-slider-runnable-track {
  -webkit-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(199, 164, 97, 0.8);
  box-shadow: none;
  height: 2px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]::-moz-range-track {
  -moz-appearance: none;
       appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(199, 164, 97, 0.8);
  box-shadow: none;
  height: 2px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]::-ms-track {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(199, 164, 97, 0.8);
  box-shadow: none;
  height: 2px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]::-ms-fill-lower {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #c7a461;
  box-shadow: none;
  height: 1px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]:focus::-ms-fill-lower {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #c7a461;
  box-shadow: none;
  height: 1px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]::-ms-fill-upper {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #c7a461;
  box-shadow: none;
  height: 1px;
  border: none;
  box-shadow: none;
  outline: 0;
}
.radio input[type=range]:focus::-ms-fill-upper {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #c7a461;
  box-shadow: none;
  height: 1px;
  border: none;
  box-shadow: none;
  outline: 0;
}

.scroller {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  top: 10px;
}
.scroller > div {
  position: fixed;
  right: 12vw;
  z-index: 9999;
}
@media screen and (max-width: 820px) {
  .scroller > div {
    height: 10vh;
    /* Fallback for backdrop-filter not supported browsers, ex firefox */
    background-color: rgba(80, 124, 116, 0.9);
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
  }
  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .scroller > div {
      background-color: rgba(80, 124, 116, 0.5);
      -webkit-backdrop-filter: blur(2em);
      backdrop-filter: blur(2em);
    }
  }
  .scroller > div #year-container {
    display: flex;
    align-items: center;
    flex: 4;
    overflow-x: scroll;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scroller > div #year-container::-webkit-scrollbar {
    display: none;
  }
  .scroller > div #year-container .scroll-year {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scroller > div #year-container .scroll-year .year-tick {
    writing-mode: tb;
    margin-left: 0;
  }
  .scroller > div #year-container .scroll-year .year-label {
    padding-bottom: 5px;
  }
  .scroller > div #scroller-up, .scroller > div #scroller-down {
    display: none !important;
  }
  .scroller > div #scroller-left, .scroller > div #scroller-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0.5;
  }
}
@media screen and (min-width: 821px) {
  .scroller > div #scroller-right, .scroller > div #scroller-left {
    display: none !important;
  }
}
.scroller .scroll-year {
  clear: both;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0.5;
}
.scroller .scroll-year.no-match .year-label {
  visibility: hidden;
}
.scroller .scroll-year.no-match .year-tick {
  opacity: 1;
  cursor: initial;
}
.scroller .scroll-year:not(.no-match).active, .scroller .scroll-year:not(.no-match):hover {
  transition: all 0.25s ease-in-out;
  opacity: 1;
  cursor: pointer;
}
.scroller .scroll-year .year-tick {
  margin-left: 10px;
  float: right;
  color: goldenrod;
  font-weight: bold;
}
.scroller .scroll-year .year-label {
  display: inline-block;
  transform: scale(0.75);
  font-size: clamp(18px, 1.04vw, 1.04vw);
  transition: all 0.25s ease-in-out;
}
.scroller .scroll-year.active .year-label {
  transform: scale(1);
}
@media screen and (min-width: 821px) {
  .scroller .scroll-year.first-year {
    padding-top: 40px;
  }
}
.scroller .scroll-year .minor-year {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .scroller .scroll-year .minor-year:hover {
    transition: all 0.25s ease-in-out;
    opacity: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  .scroller .scroll-year:hover .minor-year {
    opacity: 1;
  }
}
.scroller .scroll-year:active .minor-year, .scroller .scroll-year.active .minor-year {
  opacity: 1;
}
.scroller #year-container {
  max-height: 85vh;
  overflow: hidden;
}
.scroller #scroller-up, .scroller #scroller-down, .scroller #scroller-left, .scroller #scroller-right {
  text-align: center;
  color: goldenrod;
  opacity: 0.5;
  cursor: pointer;
  font-size: xx-large;
}
.scroller #scroller-up:hover, .scroller #scroller-down:hover, .scroller #scroller-left:hover, .scroller #scroller-right:hover {
  transition: all 0.25s ease-in-out;
  opacity: 1;
}

.pagination {
  list-style: none;
  position: fixed;
  bottom: 2rem;
  left: 7.9vw;
  z-index: 100;
  transition: opacity 100ms;
  /*
  &.mobile-only{
      display: none;
      @media ( max-width: $phone){
          display: inline-block;
      }
  }
  &.mobile-hide{
      @media ( max-width: $phone){
          display: none;
      }
  }
  */
}
@media (max-width: 820px) {
  .pagination {
    position: fixed;
    bottom: 4.5vw;
    left: 3.95vw;
  }
}
@media (max-width: 560px) {
  .pagination {
    display: flex;
    position: absolute;
    bottom: auto;
    top: 7.9vw;
    left: 50%;
    right: 50%;
    justify-content: center;
  }
}
.pagination li {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  position: relative;
  padding: 0.25rem;
}
.pagination li a {
  color: unset;
  text-decoration: none;
}

.slide-enter-active .pagination,
.slide-leave-active .pagination {
  transition: opacity 100ms;
  opacity: 0;
}

.lottie-outer {
  position: absolute;
  left: -30%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.lottie-outer-wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 820px) {
  .lottie-outer-wrapper {
    height: auto;
    position: relative;
  }
}

.lottie-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 820px) {
  .lottie-wrapper {
    height: 50vh;
  }
}

.lottie {
  width: auto;
  -o-object-fit: fill;
     object-fit: fill;
  height: 100%;
}
.lottie * {
  fill: transparent;
}

#floatilla {
  width: 50%;
}
@media (max-width: 820px) {
  #floatilla {
    width: 90%;
  }
}
@media (max-width: 560px) {
  #floatilla {
    width: 90%;
  }
}

#jrMckenzie, #Jacinda {
  position: absolute;
  left: -35%;
  width: 100%;
}
@media (max-width: 820px) {
  #jrMckenzie, #Jacinda {
    width: 100%;
    left: -15%;
  }
}

#Donation {
  width: 55%;
  position: absolute;
  right: 0;
  bottom: -20%;
}
@media (max-width: 820px) {
  #Donation {
    width: auto;
    bottom: 0;
    position: relative;
  }
}

#Handshake {
  width: 70%;
  left: -8%;
  position: absolute;
}
@media (max-width: 820px) {
  #Handshake {
    width: 100%;
    left: 0;
  }
}

#Laptop {
  width: 60%;
  left: -10%;
  position: absolute;
}
@media (max-width: 820px) {
  #Laptop {
    width: 100%;
    left: 0;
  }
}

.underline-container {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  display: table;
  pointer-events: all;
}
.underline-container .lottie-underline {
  position: absolute;
  display: table-caption;
  caption-side: bottom;
  top: 100%;
  visibility: hidden;
}
.underline-container .lottie-underline.t-50 {
  top: 50%;
}

.text-full-image {
  position: relative;
}
@media (max-width: 560px) {
  .text-full-image {
    padding-block: 0 !important;
  }
}
.text-full-image_image img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
}
@media (max-width: 560px) {
  .text-full-image_image img {
    height: 50vh;
  }
}
.text-full-image_content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-inline: 7.9vw;
  margin-block: 7.9vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block: 5.3vw;
  gap: 5.3vw;
}
@media (max-width: 820px) {
  .text-full-image_content {
    padding: 12.5vw;
    display: flex;
  }
}
@media (max-width: 560px) {
  .text-full-image_content {
    position: relative;
    display: flex;
    padding: 7.9vw;
  }
}
.text-full-image .text {
  position: relative;
}
.text-full-image .year {
  font-size: clamp(40px, 4.4vw, 4.4vw);
}
@media (max-width: 560px) {
  .text-full-image .year {
    margin-left: 0;
  }
}
.text-full-image h2 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
}
.text-full-image p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
  margin-block-end: 0.8em;
}
@media (max-width: 820px) {
  .text-full-image p {
    font-size: clamp(20px, 1.5vw, 24px);
  }
}

.story-1-para {
  display: grid;
  grid-template-columns: 3.5fr 1fr;
  gap: 5.3vw;
  padding-inline-start: 7.9vw;
  padding-inline-end: 15.8vw;
  padding-block: 5.3vw;
  align-items: center;
  position: relative;
}
@media (max-width: 820px) {
  .story-1-para {
    display: flex;
    flex-direction: column;
    gap: 10.6vw;
    padding: 12.5vw;
  }
}
@media (max-width: 560px) {
  .story-1-para {
    padding: 7.9vw;
  }
}
.story-1-para .text-1 {
  position: relative;
}
.story-1-para .text-1 p {
  font-size: clamp(20px, 1.5vw, 24px);
}
.story-1-para .text-2 {
  position: relative;
  align-self: center;
}
.story-1-para .text-2 h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-1-para .text-2 p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}
.story-1-para .voice-note-wrap {
  width: 70%;
}
@media (max-width: 560px) {
  .story-1-para .voice-note-wrap {
    width: 100%;
  }
}

.story-2-para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.3vw;
  padding-inline-start: 7.9vw;
  padding-inline-end: 15.8vw;
  padding-block: 5.3vw;
}
@media (max-width: 820px) {
  .story-2-para {
    display: flex;
    flex-direction: column;
    gap: 10.6vw;
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
  }
}
@media (max-width: 560px) {
  .story-2-para {
    padding: 7.9vw;
  }
}
.story-2-para .text-wrap {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.3vw;
}
@media (max-width: 820px) {
  .story-2-para .text-wrap {
    grid-template-columns: 1fr;
  }
}
.story-2-para .text-1 {
  position: relative;
}
.story-2-para .text-1 p {
  font-size: clamp(20px, 1.5vw, 24px);
}
.story-2-para .text-2 {
  position: relative;
  align-self: center;
}
.story-2-para .text-2 h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-2-para .text-2 p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}

.align-blocks {
  grid-template-rows: max-content;
}

.story-3-para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
  -moz-column-gap: 5.3vw;
       column-gap: 5.3vw;
  row-gap: 0;
  padding-inline-start: 12.5vw;
  padding-inline-end: 25vw;
  margin-block: 5.3vw;
  align-content: center;
}
@media (max-width: 560px) {
  .story-3-para {
    display: flex;
    flex-direction: column;
    gap: 10.6vw;
  }
}
.story-3-para .year {
  margin-left: -2rem;
  grid-column: 1/-1;
}
@media (max-width: 560px) {
  .story-3-para .year {
    margin-left: 0;
  }
}
.story-3-para h2 {
  width: -moz-fit-content;
  width: fit-content;
  grid-column: 1/-1;
}
.story-3-para .text-1 p {
  font-size: clamp(20px, 1.5vw, 24px);
}
.story-3-para .text-1 h3 {
  font-size: clamp(22px, 1.6vw, 1.6vw);
}
.story-3-para .text-2 p {
  font-size: clamp(18px, 1.25vw, 1.25vw);
}

.story-4-para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
  gap: 5.3vw;
  padding-inline-start: 7.9vw;
  padding-inline-end: 15.8vw;
  align-content: center;
  margin-block: 5.3vw;
}
@media (max-width: 820px) {
  .story-4-para {
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
    gap: 10.6vw;
  }
}
@media (max-width: 560px) {
  .story-4-para {
    padding-inline-end: 12.5vw;
  }
}
.story-4-para .year-header {
  grid-column: 1/-1;
  height: 70%;
}
.story-4-para .year-header .year {
  margin-left: 2rem;
  max-height: 4vw;
}
.story-4-para h3 {
  font-size: clamp(22px, 1.6vw, 1.6vw);
}
.story-4-para .text {
  position: relative;
}
.story-4-para .text p {
  font-size: clamp(18px, 1.25vw, 1.25vw);
}

.story-text-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) {
  .story-text-image {
    display: flex;
    flex-direction: column;
    gap: 10.6vw;
    padding-top: 7.9vw;
  }
}
@media (max-width: 560px) {
  .story-text-image {
    padding-block-end: 0 !important;
  }
}
.story-text-image .text {
  padding-inline: 7.9vw;
  align-self: center;
}
@media (max-width: 820px) {
  .story-text-image .text {
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
  }
}
@media (max-width: 560px) {
  .story-text-image .text {
    padding: 7.9vw;
  }
}
.story-text-image .text .heading {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-image .text h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-image .text p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}
.story-text-image .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 560px) {
  .story-text-image .image {
    height: 80vh;
  }
}

.story-text-audio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  gap: 5.3vw;
}
@media (max-width: 820px) {
  .story-text-audio {
    display: flex;
    flex-direction: column;
    gap: 10.6vw;
    padding-block: 7.9vw;
  }
}
@media (max-width: 560px) {
  .story-text-audio {
    gap: 0;
  }
}
.story-text-audio .text {
  grid-column: 2/-1;
  padding-inline-end: 15.8vw;
  align-self: center;
  position: absolute;
}
@media (max-width: 820px) {
  .story-text-audio .text {
    position: relative;
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
  }
}
@media (max-width: 560px) {
  .story-text-audio .text {
    padding: 7.9vw;
  }
}
.story-text-audio .text .heading {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-audio .text h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-audio .text p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}
.story-text-audio .image {
  grid-column: 1/-1;
}
.story-text-audio .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.story-text-video {
  display: flex;
  flex-direction: column;
  margin-block: 5.3vw;
  gap: 5.3vw;
}
@media (max-width: 820px) {
  .story-text-video {
    min-height: auto;
    gap: 10.6vw;
  }
}
.story-text-video video {
  width: 77%;
}
@media (max-width: 820px) {
  .story-text-video video {
    width: 100%;
    padding-inline: 12.5vw;
  }
}
.story-text-video .text {
  padding-inline: 11.85vw;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 820px) {
  .story-text-video .text {
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
  }
}
@media (max-width: 560px) {
  .story-text-video .text {
    padding-inline-end: 12.5vw;
  }
}
.story-text-video .text h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-video .text p {
  font-size: clamp(18px, 1.25vw, 1.25vw);
  max-width: 30ch;
}

.story-text-image-vert {
  display: flex;
  flex-direction: column;
  padding-block-start: 5.3vw;
  gap: 5.3vw;
}
@media (max-width: 820px) {
  .story-text-image-vert {
    min-height: auto;
    gap: 10.6vw;
    padding-top: 10.6vw;
  }
}
.story-text-image-vert img {
  width: 77%;
  padding-inline-start: 7.9vw;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: none;
}
@media (max-width: 820px) {
  .story-text-image-vert img {
    padding-inline: 12.5vw;
    width: 100%;
  }
}
@media (max-width: 560px) {
  .story-text-image-vert img {
    padding-inline: 7.9vw;
  }
}
.story-text-image-vert .text {
  padding-inline: 7.9vw;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 820px) {
  .story-text-image-vert .text {
    padding-inline-start: 12.5vw;
    padding-inline-end: 25vw;
  }
}
@media (max-width: 560px) {
  .story-text-image-vert .text {
    padding-inline: 7.9vw;
  }
}
.story-text-image-vert .text-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 820px) {
  .story-text-image-vert .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.story-text-image-vert .text h2 {
  width: -moz-fit-content;
  width: fit-content;
}
.story-text-image-vert .text p {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}

.page, .page-about-us, .page-story, .page-impacts-single, .page-impacts-archive, .page-reflections-single, .page-reflections-archive {
  width: 83vw;
  min-height: 100vh;
}
@media screen and (max-width: 820px) {
  .page, .page-about-us, .page-story, .page-impacts-single, .page-impacts-archive, .page-reflections-single, .page-reflections-archive {
    width: 100vw;
  }
}
.page .excerpt-large, .page-about-us .excerpt-large, .page-story .excerpt-large, .page-impacts-single .excerpt-large, .page-impacts-archive .excerpt-large, .page-reflections-single .excerpt-large, .page-reflections-archive .excerpt-large {
  font-size: clamp(22px, 1.6vw, 1.6vw);
}
.page .excerpt, .page-about-us .excerpt, .page-story .excerpt, .page-impacts-single .excerpt, .page-impacts-archive .excerpt, .page-reflections-single .excerpt, .page-reflections-archive .excerpt {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  margin-block-end: 1rem;
}
.page .page-title, .page-about-us .page-title, .page-story .page-title, .page-impacts-single .page-title, .page-impacts-archive .page-title, .page-reflections-single .page-title, .page-reflections-archive .page-title {
  z-index: 100;
  display: none;
}
@media (max-width: 820px) {
  .page .page-title, .page-about-us .page-title, .page-story .page-title, .page-impacts-single .page-title, .page-impacts-archive .page-title, .page-reflections-single .page-title, .page-reflections-archive .page-title {
    position: fixed;
    display: block;
    font-size: clamp(24px, 1.8vw, 1.8vw);
    writing-mode: tb;
    top: 4.5vw;
    left: 3.95vw;
  }
}
@media (max-width: 560px) {
  .page .page-title, .page-about-us .page-title, .page-story .page-title, .page-impacts-single .page-title, .page-impacts-archive .page-title, .page-reflections-single .page-title, .page-reflections-archive .page-title {
    position: absolute;
    display: block;
    font-size: 1rem;
    writing-mode: lr;
    top: 7.9vw;
    left: 7.9vw;
  }
}

.page-reflections-archive {
  flex-grow: 1;
  padding: 5.3vw 7.9vw;
  display: grid;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 5.3vw;
  position: relative;
}
@media (max-width: 820px) {
  .page-reflections-archive {
    padding: 11.85vw;
    gap: 11.85vw;
  }
}
@media (max-width: 560px) {
  .page-reflections-archive {
    padding: 7.9vw;
    padding-top: 23.7vw;
  }
}
.page-reflections-archive article {
  cursor: pointer;
  position: relative;
}
.page-reflections-archive article .article-image-wrap {
  position: relative;
}
.page-reflections-archive article .article-image-wrap:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4/3;
  background: #5A988C;
  mix-blend-mode: multiply;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.page-reflections-archive article img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}
.page-reflections-archive article img:before {
  background: red;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
.page-reflections-archive article h2 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  font-weight: 400;
}
.page-reflections-archive article a {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  text-decoration: none;
  color: inherit;
}
.page-reflections-archive article a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-reflections-archive article:hover .article-image-wrap:before {
  opacity: 0;
}
.page-reflections-archive article:hover img {
  filter: none;
  mix-blend-mode: initial;
}
.page-reflections-archive article:nth-of-type(odd) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 5.3vw;
}
.page-reflections-archive article:nth-of-type(odd) > .article-text-wrap {
  padding-left: 4vw;
}
@media (max-width: 820px) {
  .page-reflections-archive article:nth-of-type(odd) > .article-text-wrap {
    padding: 0;
  }
}
@media (max-width: 820px) {
  .page-reflections-archive article:nth-of-type(odd) {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}
.page-reflections-archive article:nth-of-type(odd) .article-image-wrap {
  order: -1;
}
.page-reflections-archive article:nth-of-type(even) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 5.3vw;
}
.page-reflections-archive article:nth-of-type(even) > .article-text-wrap {
  padding-right: 4vw;
}
@media (max-width: 820px) {
  .page-reflections-archive article:nth-of-type(even) > .article-text-wrap {
    padding: 0;
  }
}
@media (max-width: 820px) {
  .page-reflections-archive article:nth-of-type(even) {
    display: flex;
    flex-direction: column;
    gap: 5.3vw;
  }
}
.page-reflections-archive article:nth-of-type(even) .article-image-wrap {
  order: 2;
}
@media (max-width: 820px) {
  .page-reflections-archive article:nth-of-type(even) .article-image-wrap {
    order: -1;
  }
}

.page-reflections-single {
  flex-grow: 1;
  padding: 5.3vw 7.9vw;
  position: relative;
}
@media (max-width: 820px) {
  .page-reflections-single {
    padding: 7.9vw;
  }
}
.page-reflections-single .close {
  position: absolute;
  top: 4.11vw;
  right: 4.11vw;
  transition: 0.3s ease-in-out all;
}
.page-reflections-single .close:hover {
  scale: 1.2;
}
@media (max-width: 820px) {
  .page-reflections-single .close {
    scale: 0.7;
  }
}
.page-reflections-single article .blog-date {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}
.page-reflections-single article h1, .page-reflections-single article p, .page-reflections-single article h2, .page-reflections-single article ul, .page-reflections-single article ol {
  width: 65%;
}
@media (max-width: 820px) {
  .page-reflections-single article h1, .page-reflections-single article p, .page-reflections-single article h2, .page-reflections-single article ul, .page-reflections-single article ol {
    width: 80%;
  }
}
@media (max-width: 560px) {
  .page-reflections-single article h1, .page-reflections-single article p, .page-reflections-single article h2, .page-reflections-single article ul, .page-reflections-single article ol {
    width: 100%;
  }
}
.page-reflections-single article h1 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
}
.page-reflections-single article img {
  width: 100%;
  height: auto;
  font-size: clamp(18px, 1.04vw, 1.04vw);
  margin-block: 2em;
}
.page-reflections-single article p {
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-reflections-single article ol {
  list-style-position: inside;
  margin-left: 1rem;
  text-indent: -1rem;
}
.page-reflections-single article li {
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-reflections-single .download-wrapper {
  margin-block-start: 4.11vw;
}
.page-reflections-single .download-wrapper a {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-block: 2rem;
  max-width: 30ch;
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-reflections-single .download-wrapper a img {
  width: auto;
  height: auto;
  margin: 0;
}
.page-reflections-single .references {
  width: 100%;
  border-top: 2px solid #5A988C;
  margin-block: 4.11vw;
  padding-block: 1rem;
  list-style: none;
}

.page-impacts-archive {
  flex-grow: 1;
  padding: 5.3vw 7.9vw;
  display: grid;
  gap: 2rem;
  position: relative;
}
@media (max-width: 820px) {
  .page-impacts-archive {
    padding: 11.85vw 11.85vw;
    gap: 5.3vw;
  }
}
@media (max-width: 560px) {
  .page-impacts-archive {
    padding: 7.9vw;
    padding-top: 23.7vw;
  }
}
.page-impacts-archive article .blog-date {
  font-size: clamp(22px, 1.6vw, 1.6vw);
  margin-block: 0.5em;
}
.page-impacts-archive article img {
  width: 100%;
  height: 35vh;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
.page-impacts-archive article h2 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  font-weight: 400;
  border-bottom: 2px solid #D6E5E3;
  width: -moz-fit-content;
  width: fit-content;
}
.page-impacts-archive article a {
  font-size: clamp(20px, 1.5vw, 24px);
  text-decoration: none;
  color: inherit;
  margin-block: 2em;
  display: block;
}

.page-impacts-single {
  flex-grow: 1;
  padding: 5.3vw 7.9vw;
  position: relative;
}
.page-impacts-single .close {
  position: absolute;
  top: 4.11vw;
  right: 4.11vw;
}
.page-impacts-single article .blog-date {
  font-size: clamp(1rem, 1.19vw, 1.19vw);
}
.page-impacts-single article h1 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.page-impacts-single article h1:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-image: url("/assets/underline.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-impacts-single article .imagex2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.11vw;
}
.page-impacts-single article img {
  width: 100%;
  height: auto;
  font-size: clamp(18px, 1.04vw, 1.04vw);
  margin-block: 2em;
}
.page-impacts-single article .image-caption {
  font-size: 1rem;
  margin-block-end: clamp(30px, 2.8vw, 2.8vw);
}
.page-impacts-single article .intro {
  font-size: clamp(20px, 1.5vw, 24px);
}
.page-impacts-single article p {
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-impacts-single .download-wrapper {
  margin-block-start: 4.11vw;
}
.page-impacts-single .download-wrapper a {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-block: 2rem;
  max-width: 30ch;
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-impacts-single .download-wrapper a img {
  width: auto;
  height: auto;
  margin: 0;
}
.page-impacts-single .references {
  width: 100%;
  border-top: 2px solid #5A988C;
  margin-block: 4.11vw;
  padding-block: 1rem;
  list-style: none;
}

.page-impacts-archive {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 820px) {
  .page-impacts-archive {
    padding: 7.9vw;
    padding-top: 22vw;
    margin: 0;
    justify-content: start;
  }
}
.page-impacts-archive .impacts-wrapper {
  width: 65%;
}
@media (max-width: 820px) {
  .page-impacts-archive .impacts-wrapper {
    width: 100%;
  }
}
.page-impacts-archive h1 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  border-bottom: 2px solid #D6E5E3;
  padding-bottom: 0.8em;
}
.page-impacts-archive p {
  font-size: clamp(18px, 1.25vw, 1.25vw);
}
.page-impacts-archive p:nth-of-type(1) {
  font-size: clamp(20px, 1.5vw, 24px);
}

.page-story {
  flex-grow: 1;
  display: grid;
  min-height: 300vh;
}
.page-story section {
  width: 100%;
}
@media (max-width: 560px) {
  .page-story section {
    width: 100vw;
    padding-block: 15.8vw;
  }
}
.page-story a {
  color: white;
  font-size: inherit;
  text-decoration: underline;
}
.page-story .gradient {
  position: absolute;
  top: 0;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  background: linear-gradient(220deg, rgb(209, 209, 209) 30%, rgb(0, 0, 0) 100%);
}
@media (max-width: 560px) {
  .page-story .gradient {
    display: none;
  }
}
.page-story .year {
  font-size: clamp(40px, 4.4vw, 4.4vw);
  margin-bottom: 1em;
  line-height: 140%;
  height: 4.4vmax;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 820px) {
  .page-story .year {
    font-size: clamp(86px, 4.4vw, 4.4vw);
    height: clamp(86px, 4.4vw, 4.4vw);
  }
}
@media (max-width: 560px) {
  .page-story .year {
    font-size: clamp(40px, 4.4vw, 4.4vw);
    --swoosh-src: url(/assets/PMP_Stroke_Small_Mobile_001.gif);
    --swoosh-display: none;
  }
  .page-story .year:after {
    display: block;
    display: var(--swoosh-display);
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    content: "";
    background-image: url(/assets/PMP_Stroke_Small_Mobile_001.gif);
    background-image: var(--swoosh-src);
    background-size: contain;
    width: calc(100% + 40px);
    height: calc(100% + 20px);
    background-repeat: no-repeat;
    background-position: center;
  }
}
.page-story h2 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
}
@media (max-width: 820px) {
  .page-story .timeline-buffer {
    height: 10vh;
  }
}

.page-about-us {
  flex-grow: 1;
  display: grid;
  gap: 7.9vw;
  padding-inline: 7.9vw;
  padding-block: 5.3vw;
}
@media (max-width: 820px) {
  .page-about-us {
    padding: 11.85vw;
  }
}
@media (max-width: 560px) {
  .page-about-us {
    padding: 7.9vw;
    padding-top: 23.7vw;
    gap: 23.7vw;
  }
}
.page-about-us img {
  width: 100%;
}
@media (max-width: 820px) {
  .page-about-us section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 820px) {
  .page-about-us .circle {
    display: none;
  }
}
.page-about-us .intro-text {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.page-about-us .intro-text h1 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.page-about-us .intro-text h1:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-image: url("/assets/underline.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-about-us .intro-text .english {
  color: #3A675F;
}
.page-about-us .intro-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7.9vw;
  margin-block-start: 7.9vw;
}
@media (max-width: 820px) {
  .page-about-us .intro-text-grid {
    display: flex;
    flex-direction: column;
  }
}
.page-about-us .intro-text-grid h4 {
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 140%;
}
.page-about-us .intro-text .intro-para {
  font-size: clamp(22px, 1.6vw, 1.6vw);
  max-width: 30ch;
}
@media (max-width: 820px) {
  .page-about-us .intro-text .intro-para {
    max-width: 100%;
  }
}
.page-about-us h2 {
  font-size: clamp(30px, 2.8vw, 2.8vw);
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.page-about-us h2:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-image: url("/assets/underline.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-about-us h3 {
  font-size: clamp(22px, 1.6vw, 1.6vw);
}
.page-about-us p {
  font-size: clamp(18px, 1.04vw, 1.04vw);
}
.page-about-us section.initiatives {
  display: flex;
  flex-direction: column;
  gap: 7.9vw;
  margin-inline-end: -7.9vw;
  padding-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 5.3vw;
  align-content: center;
}
@media (max-width: 820px) {
  .page-about-us section.initiatives {
    grid-template-columns: 1fr;
    padding: 0;
    margin-inline-end: 0;
  }
}
@media (max-width: 560px) {
  .page-about-us section.initiatives {
    grid-template-columns: 1fr;
  }
}
.page-about-us section.initiatives .initiatives-title {
  grid-column: 1/-1;
}
.page-about-us .initiative-wrap {
  display: grid;
  grid-template-columns: 40% auto;
  grid-template-rows: auto clamp(40px, 3vw, 3vw) auto;
  grid-template-areas: "a b" "c e" "d e";
  gap: 7.9vw;
  row-gap: 0px;
  align-items: start;
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap {
    grid-template-columns: 50% auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "a b" "c c" "d d";
    row-gap: 4.11vw;
  }
}
.page-about-us .initiative-wrap .logo {
  grid-area: a;
  margin-block-end: 4.11vw;
}
.page-about-us .initiative-wrap .logo img {
  height: auto;
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap .logo {
    grid-area: b;
    justify-self: flex-end;
    margin-block-end: 0;
  }
}
.page-about-us .initiative-wrap a {
  color: black;
}
.page-about-us .initiative-wrap .tereo {
  grid-area: b;
  margin-block-end: 4.11vw;
  align-self: flex-end;
}
.page-about-us .initiative-wrap .tereo h3 {
  font-size: clamp(24px, 1.8vw, 1.8vw);
  margin-bottom: 0;
  max-width: 20ch;
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap .tereo {
    display: none;
  }
}
.page-about-us .initiative-wrap h3 {
  grid-area: c;
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap h3 {
    grid-area: a;
    align-self: flex-end;
    margin-bottom: 0;
  }
}
.page-about-us .initiative-wrap p {
  grid-area: d;
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap p {
    grid-area: c;
  }
}
.page-about-us .initiative-wrap img {
  width: 65%;
  height: auto;
  font-size: clamp(30px, 2.8vw, 2.8vw);
}
@media (max-width: 820px) {
  .page-about-us .initiative-wrap img {
    max-width: 170px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
  }
}
@media (max-width: 560px) {
  .page-about-us .initiative-wrap img {
    max-width: 120px !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
  }
}
.page-about-us video {
  width: 100%;
}
.page-about-us iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  grid-area: e;
  align-self: flex-start;
}
@media (max-width: 820px) {
  .page-about-us iframe {
    grid-area: d;
  }
}
.page-about-us .people {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  row-gap: 4.11vw;
}
@media (max-width: 820px) {
  .page-about-us .people {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .page-about-us .people {
    gap: 23.7vw;
  }
}
.page-about-us .people .english {
  color: #3A675F;
}
.page-about-us .people-header {
  grid-column: 7/-1;
}
.page-about-us .people-list {
  grid-column: 1/-1;
  display: grid;
  row-gap: 7.9vw;
}
.page-about-us .people-list-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 820px) {
  .page-about-us .people-list-item {
    display: flex;
    flex-direction: column;
    height: auto;
  }
}
.page-about-us .people-list-item img {
  grid-column: 2/6;
  width: 100%;
  aspect-ratio: 3/4;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 560px) {
  .page-about-us .people-list-item img {
    height: 50vh;
  }
}
.page-about-us .people-list-item .text {
  grid-column: 7/12;
}
.page-about-us .people-list-item:nth-of-type(even) img {
  grid-column: 8/12;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  grid-row: 1;
}
.page-about-us .people-list-item:nth-of-type(even) .text {
  grid-column: 2/7;
  grid-row: 1;
}
.page-about-us .team-header {
  grid-column: 2/6;
}
.page-about-us .helpers, .page-about-us .team-suffix {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: 1/-1;
  margin-block-end: 7.9vw;
}
@media (max-width: 820px) {
  .page-about-us .helpers, .page-about-us .team-suffix {
    display: flex;
    flex-direction: column;
  }
}
.page-about-us .helpers .heading, .page-about-us .team-suffix .heading {
  grid-column: 2/8;
  border-bottom: 1px solid black;
  margin-block-end: 1.5em;
}
.page-about-us .helpers ul, .page-about-us .team-suffix ul {
  -moz-column-count: 2;
       column-count: 2;
  grid-column: 2/8;
  list-style: none;
}
.page-about-us .helpers ul li, .page-about-us .team-suffix ul li {
  font-size: clamp(18px, 1.04vw, 1.04vw);
  line-height: 140%;
}
.page-about-us .helpers .facilitators, .page-about-us .team-suffix .facilitators {
  grid-column: 2/6;
}
.page-about-us .helpers .previous-members, .page-about-us .team-suffix .previous-members {
  grid-column: 6/12;
}
.page-about-us .helpers h3, .page-about-us .team-suffix h3 {
  border-bottom: 1px solid black;
  width: -moz-fit-content;
  width: fit-content;
  margin-block-end: 1.5em;
}
.page-about-us .contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: 1/-1;
  margin-block-end: 7.9vw;
}
@media (max-width: 820px) {
  .page-about-us .contact {
    display: flex;
    flex-direction: column;
  }
}
.page-about-us .contact-header {
  grid-column: 2/6;
}
.page-about-us .contact-details {
  grid-column: 8/11;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(1rem, 1.19vw, 1.19vw);
  line-height: 140%;
}
.page-about-us .contact-details a {
  color: inherit;
}

#home-wrapper:not(.active) .home-content {
  display: none;
}

#home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  z-index: 0;
}
#home .home-image-wrap {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}
#home .home-background {
  width: 100vw;
  height: 100vh;
}
#home .home-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url("/assets/home-image.png");
  background-size: cover;
}
#home .color-wash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}
#home .black-wash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  mix-blend-mode: multiply;
  z-index: 1;
  background-color: hsla(0, 0%, 0%, 0.4);
}
#home .green-wash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  mix-blend-mode: color;
  z-index: 2;
}
#home .home-content {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}
#home .home-content .home-intro-heading {
  font-size: clamp(30px, 2.4vw, 2.4vw);
}
@media (max-width: 820px) {
  #home .home-content .home-intro-heading {
    max-width: 100%;
  }
}
#home .home-content .home-intro {
  font-size: clamp(22px, 1.6vw, 1.6vw);
  max-width: 45ch;
}
#home .home-content p {
  font-size: clamp(18px, 1.25vw, 1.25vw);
  max-width: 45ch;
}
@media (max-width: 820px) {
  #home .home-content p {
    max-width: 100%;
  }
}
#home .home-content .block-1 {
  pointer-events: none;
  padding-inline: 11.8vw;
  padding-block: 7.9vw;
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 100vh;
  grid-template-areas: "a b" "c d";
}
@media (max-width: 820px) {
  #home .home-content .block-1 {
    padding: 7.9vw;
    padding-top: 22vw;
    margin: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
  }
}
#home .home-content .block-1 .intro-block {
  grid-area: a;
}
#home .home-content .block-1 #begin {
  grid-area: c;
  align-self: end;
  font-size: clamp(32px, 3.1vw, 3.1vw);
  width: -moz-fit-content;
  width: fit-content;
  pointer-events: all !important;
  cursor: pointer;
}
#home .home-content .block-1 .col-2 {
  grid-area: b;
  line-height: 200%;
}
#home .home-content .block-2 {
  margin-inline: 11.8vw;
  margin-block: 7.9vw;
}
@media (max-width: 820px) {
  #home .home-content .block-2 {
    padding: 7.9vw;
    padding-top: 22vw;
    margin: 0;
  }
}
#home .home-content .block-2 .home-intro-heading {
  max-width: 30ch;
}
#home .home-content .block-2 a {
  position: relative;
  display: block;
  font-size: clamp(32px, 3.1vw, 3.1vw);
  color: inherit;
  text-decoration: none;
  margin-block-start: 2rem;
  width: -moz-fit-content;
  width: fit-content;
}
#home .home-content .logo-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.11vw;
  align-self: end;
  align-items: center;
  grid-area: d;
}
@media (max-width: 820px) {
  #home .home-content .logo-block {
    display: none;
  }
}
#home .home-content .logo-block img {
  max-width: 100%;
  height: auto;
}
#home .home-link-wrapper {
  display: flex;
  width: 90%;
  justify-content: space-between;
  align-items: baseline;
}
@media (max-width: 560px) {
  #home .home-link-wrapper {
    flex-wrap: wrap;
    gap: 2em;
  }
}

#mailing-list-open {
  font-size: clamp(24px, 1.8vw, 1.8vw);
  pointer-events: all;
  cursor: pointer;
}

#mailing-list-close {
  position: absolute;
  top: 3.95vw;
  right: 15.7vw;
  cursor: pointer;
  transition: 0.3s ease-in-out all;
}
#mailing-list-close:hover {
  scale: 1.2;
}
@media (max-width: 820px) {
  #mailing-list-close {
    top: 4.5vw;
    right: 3.95vw;
    scale: 0.7;
  }
}
@media (max-width: 560px) {
  #mailing-list-close {
    top: 7.9vw;
    right: 7.9vw;
  }
}

.mailing-list-wrapper {
  display: flex;
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.8);
  z-index: 55;
  padding-inline: 11.8vw;
  padding-block: 23.7vw;
  color: white;
  transform: translateY(-100%);
}
@media (max-width: 820px) {
  .mailing-list-wrapper {
    align-items: center;
  }
}
.mailing-list-form {
  width: 60%;
}
@media (max-width: 820px) {
  .mailing-list-form {
    width: 100%;
  }
}
.mailing-list-form h2 {
  font-size: clamp(22px, 1.6vw, 1.6vw);
  margin-block-end: 2em;
}
.mailing-list-form #mc_embed_signup div.mce_inline_error {
  background-color: transparent;
  padding: 0;
  padding-block-start: 1em;
}
.mailing-list-form #mce-success-response {
  background-color: transparent;
  padding: 0;
  padding-block-start: 1em;
}
.mailing-list-form .input-wrapper {
  width: 100%;
  display: flex;
  border-bottom: 1px solid white;
  justify-content: space-between;
}
@media (max-width: 560px) {
  .mailing-list-form .input-wrapper {
    display: contents;
  }
}
.mailing-list-form #mce-EMAIL {
  font-size: clamp(30px, 2.4vw, 2.4vw);
  color: white;
  background: transparent;
  border: none;
  flex-grow: 1;
}
@media (max-width: 560px) {
  .mailing-list-form #mce-EMAIL {
    border-bottom: 1px solid white;
  }
}
.mailing-list-form #mce-EMAIL::-moz-placeholder {
  color: white;
}
.mailing-list-form #mce-EMAIL::placeholder {
  color: white;
}
.mailing-list-form #mc-embedded-subscribe {
  font-size: clamp(21px, 1.3vw, 1.3vw);
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
}

body.home #home .home-image {
  opacity: 0;
}
body.home #home .logo-block {
  opacity: 0;
}
body.home #home .black-wash,
body.home #home .green-wash {
  opacity: 0;
}
body.home #home .block-1 .intro-block {
  transform: translateY(100vh);
  opacity: 0;
}
body.home #home .block-1 .col-2 {
  transform: translateY(100vh);
  opacity: 0;
}
body.home #home .block-1 #begin {
  transform: translateY(100vh);
  opacity: 0;
}
body.home #home .block-1 .logo-block {
  transform: translateY(100vh);
  opacity: 0;
}
body.home #home .block-2 {
  transform: translateY(100vh);
  opacity: 0;
}/*# sourceMappingURL=styles.css.map */