@import url(fonts.css);
:root {
  --cols: 12;
  --cols-max: calc(var(--cols) + 1);
  --gutter: 2.31481481vw;
  --margin: 3.125vw;
  --padding: var(--margin);
  --darkgreen: #78786E;
  --darkbrown: #5C5754;
  --darkbrowntwo: #5C5754;
  --darkgrey: #575757;
  --sand: #FFE399;
  --lightred: #FF6B78;
  --green: #59FCA1;
  --blue: #00B2FF;
  --grey: #E0E0E0;
  --darktint: #302A38;
  --darksand: #79796E;
  --black: #000000;
  --white: #ffffff;
  --basepx: 18;
  --base: 1.042vw;
  --lh: calc(1rem * (80 / var(--basepx)));
  --bh: calc(1rem * (60 / var(--basepx)));
  --mh: calc(1rem * (48 / var(--basepx)));
  --sh: calc(1rem * (32 / var(--basepx)));
  --xsh: calc(1rem * (24 / var(--basepx)));
  --xxsh: calc(1rem * (20 / var(--basepx)));
  --tablet-breakpoint: 1024px;
  --mobile-breakpoint: 809px; }
  @media screen and (max-width: 1024px) {
    :root {
      --base: 2.8vw;
      --gutter: 20px;
      --cols: 6; } }
  @media screen and (max-width: 809px) {
    :root {
      --cols: 6; } }
  @media screen and (min-width: 1921px) {
    :root {
      --base: 0.8vw; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility !important; }

html, body {
  position: relative;
  background: black;
  color: white;
  overflow-x: hidden; }

html {
  font-size: var(--base); }

body {
  overflow-x: hidden;
  font-family: 'Founders Grotesk', Helvetica, Arial, sans-serif;
  font-size: 1.4rem; }

body.no-scroll {
  overflow-y: hidden; }

::selection {
  background: var(--accent, white);
  color: var(--color); }

.no-pointer {
  pointer-events: none; }

h1 {
  font-size: var(--lh);
  line-height: 0.9em;
  font-weight: 500;
  margin-bottom: 4rem; }

h2 {
  font-size: var(--bh);
  font-weight: 500;
  line-height: 0.9em; }
  h2 sub {
    line-height: 0.4em; }

.text-content h2,
.text-block-content h2 {
  line-height: 0.9em;
  margin-bottom: 2rem; }

h3 {
  font-size: var(--mh);
  font-weight: 500;
  line-height: 0.9em; }

h4 {
  font-size: var(--sh);
  font-weight: 500; }

h5 {
  font-size: var(--xsh);
  font-weight: 500;
  letter-spacing: 0.02em; }

h6 {
  font-size: var(--xxsh);
  font-weight: 500;
  letter-spacing: 0.02em; }

p + p {
  margin-top: 1em; }

p {
  line-height: 1.2em; }

a {
  color: inherit;
  text-decoration: none; }

button,
.button {
  border: 1px solid;
  width: max-content;
  padding: 1rem 2rem 1.2rem;
  border-radius: 4rem;
  line-height: 1em;
  cursor: pointer; }

a.big-button {
  display: block;
  border: 1px solid;
  width: max-content;
  padding: 1rem 2rem 1.2rem;
  border-radius: 4rem;
  line-height: 1em;
  cursor: pointer;
  margin-top: 2rem;
  color: var(--accent);
  text-decoration: none !important; }
  a.big-button:hover {
    background: var(--accent);
    color: var(--bg) !important;
    border-color: var(--accent); }

.text-content p + ul,
.text-block-content p + ul,
.bio p + ul {
  margin-top: 1em; }

.text-content ul li,
.text-block-content ul li,
.bio ul li {
  margin-left: 2rem;
  line-height: 1.2em;
  margin-top: 0.5em; }
  .text-content ul li:first-child,
  .text-block-content ul li:first-child,
  .bio ul li:first-child {
    margin-top: 0; }

.text-content ul + p,
.text-block-content ul + p,
.bio ul + p {
  margin-top: 1em; }

.image {
  position: relative; }
  .image[data-ratio='square'] {
    aspect-ratio: 1 / 1; }
    @supports not (aspect-ratio: auto) {
      .image[data-ratio='square'] {
        padding-top: 100%;
        height: 0;
        position: relative;
        overflow: hidden; } }
  .image[data-ratio='landscape'] {
    aspect-ratio: 3 / 2; }
    @supports not (aspect-ratio: auto) {
      .image[data-ratio='landscape'] {
        padding-top: 66.66666667%;
        height: 0;
        position: relative;
        overflow: hidden; } }

.image img {
  position: absolute;
  top: 0;
  transition: 0.3s;
  width: 100%; }

.image[data-ratio='x'][data-padding='ignore-padding'] img {
  position: relative;
  object-fit: cover;
  height: 100%;
  object-position: var(--focalX) var(--focalY); }

.image.lazy {
  background: black; }

.image.lazy img {
  opacity: 0;
  transition: 0.4s; }

.image.lazy.loaded img {
  opacity: 1; }

.image.has-png {
  background: none; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter); }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fade-out {
  animation: fadeOut 0.5s forwards; }

.fade-in {
  animation: fadeIn 0.5s forwards; }

@media screen and (min-width: 1024px) {
  .mobile-only {
    display: none; } }

.illustration svg {
  width: 100%;
  height: 100%; }

.content-section {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: var(--padding);
  transform: translateY(-1rem); }
  .content-section::after {
    content: '';
    display: block;
    background: var(--color);
    width: 100%;
    height: 1rem;
    position: absolute;
    bottom: -1rem;
    left: 0; }

section.standard-section {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem; }

.subpage-header + section.standard-section {
  margin-top: 2rem; }

.text-content,
.illustration,
.hero-about {
  opacity: 0;
  transition: opacity 0.6s, transform 0.6s;
  transition-delay: 0.1s;
  transform: translateY(2rem); }
  .text-content.visible,
  .illustration.visible,
  .hero-about.visible {
    opacity: 1;
    transform: translateY(0rem); }

form .field-group + .field-group {
  margin-top: 0.6rem; }

form h5 {
  font-weight: normal;
  font-size: 1rem;
  margin-bottom: 0.2em; }

form input[type="text"],
form input[type="email"],
form textarea {
  background: white;
  border: none;
  font-family: inherit;
  font-size: inherit;
  border-radius: 0.2em;
  padding: 0.1em 0.5em 0.2em; }
  form input[type="text"]::selection,
  form input[type="email"]::selection,
  form textarea::selection {
    background: black;
    color: white; }

form input[type="submit"] {
  margin-top: 1rem;
  background: none;
  border: 1px solid white;
  color: white;
  font-family: inherit;
  font-size: 1.2rem;
  border-radius: 0.2em;
  padding: 0.1em 2.5em 0.2em; }
  form input[type="submit"]:hover {
    cursor: pointer;
    background: white;
    color: black; }

form .field-description {
  font-size: 1rem;
  margin-top: 0em;
  margin-bottom: 0.5rem;
  width: 66%;
  line-height: 1.1em; }

form .errors {
  font-size: 1rem;
  list-style-type: none;
  color: var(--lightred); }

.form-success {
  color: var(--green);
  font-size: 2rem;
  margin-bottom: 4rem; }

.form-module-success {
  margin-top: 1rem;
  color: var(--green);
  font-size: 1.2rem; }

.about-intro {
  --color: var(--darktint); }
  @media screen and (max-width: 1024px) {
    .about-intro p {
      font-size: 2rem; } }
  .about-intro > * {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .about-intro > * {
        grid-column: 1 / span 6; } }
  .about-intro .linkedin-link {
    margin-top: 2rem;
    width: 3rem; }

@media screen and (min-width: 1024px) {
  [data-scene="about"] .content-section:nth-child(even) .text-content {
    grid-row: 1;
    grid-column: 2 / span 6; }
  [data-scene="about"] .content-section:nth-child(even) .illustration {
    grid-row: 1;
    grid-column: 8 / span 5;
    transform: translateY(1.5rem);
    margin: 4rem; } }

.default-events {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  padding: 0 var(--padding); }
  .default-events .events-description {
    grid-column: 1/var(--cols-max);
    margin-bottom: 4rem; }
    .default-events .events-description p {
      width: 66%; }
      @media screen and (max-width: 809px) {
        .default-events .events-description p {
          width: 100%; } }

.event-teaser {
  position: relative;
  background: var(--lightred);
  grid-column: span 4;
  height: 24rem;
  padding: 1.5rem 2rem;
  border-radius: 2rem;
  transition: transform 0.1s; }
  .event-teaser:hover {
    transform: scale(1.01); }
  .event-teaser .event-date {
    color: black;
    font-weight: 500;
    margin-bottom: 0.5rem; }
  .event-teaser h2 {
    line-height: 0.8em; }
    .event-teaser h2 a::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2; }
  .event-teaser .event-location {
    margin-top: 1rem;
    font-size: 1.2rem; }
    @media screen and (max-width: 809px) {
      .event-teaser .event-location {
        font-size: 1.5rem; } }
    .event-teaser .event-location svg {
      position: relative;
      width: 1.1rem;
      top: 0.25rem; }
      @media screen and (max-width: 809px) {
        .event-teaser .event-location svg {
          top: 0.6rem; } }
      .event-teaser .event-location svg path, .event-teaser .event-location svg circle {
        stroke: white; }
  .event-teaser .event-description {
    margin-top: 1rem;
    font-size: 1.2rem; }
    @media screen and (max-width: 809px) {
      .event-teaser .event-description {
        font-size: 1.5rem; } }
  @media screen and (max-width: 1024px) {
    .event-teaser {
      grid-column: span 6;
      margin-bottom: 2rem; } }

.innoccus-events {
  margin-top: 10rem;
  padding: 6rem var(--padding);
  background: #635C59; }
  .innoccus-events .events-description {
    margin-top: 2rem; }
    .innoccus-events .events-description p {
      width: 66%; }
      @media screen and (max-width: 809px) {
        .innoccus-events .events-description p {
          width: 100%; } }
  .innoccus-events .event-list {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter); }
    .innoccus-events .event-list .event-teaser {
      background: var(--darktint);
      height: 15rem; }
      .innoccus-events .event-list .event-teaser .event-date {
        color: white; }
      .innoccus-events .event-list .event-teaser h2 {
        font-size: var(--mh); }

.arrow-link {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  display: flex;
  align-items: center;
  line-height: 1em;
  height: 1em; }
  @media screen and (max-width: 1024px) {
    .arrow-link {
      white-space: nowrap; } }
  .arrow-link svg {
    margin-left: 1rem;
    margin-top: 0.3rem;
    height: 100%;
    width: auto; }

main[data-scene="events"] .event-intro {
  padding-top: 20rem;
  padding-bottom: 5rem; }

main[data-scene="events"] .project-header + .event-intro {
  padding-top: 4rem; }

main[data-scene="events"] .event-intro .section-tag {
  background: var(--lightred); }

main[data-scene="events"] .event-intro h1 {
  margin-bottom: 0.5rem; }

main[data-scene="events"] .event-intro .event-data {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  display: flex; }
  main[data-scene="events"] .event-intro .event-data .event-date {
    margin-right: 1rem; }
    main[data-scene="events"] .event-intro .event-data .event-date svg {
      margin-right: 0.3rem; }
      @media screen and (max-width: 809px) {
        main[data-scene="events"] .event-intro .event-data .event-date svg {
          top: 0.6rem; } }
  main[data-scene="events"] .event-intro .event-data svg {
    position: relative;
    width: 1.1rem;
    top: 0.25rem; }
    @media screen and (max-width: 809px) {
      main[data-scene="events"] .event-intro .event-data svg {
        top: 0.6rem; } }
    main[data-scene="events"] .event-intro .event-data svg path, main[data-scene="events"] .event-intro .event-data svg circle, main[data-scene="events"] .event-intro .event-data svg rect, main[data-scene="events"] .event-intro .event-data svg line {
      stroke: white; }

main[data-scene="events"] .event-intro .event-link {
  margin-top: 2rem;
  position: relative;
  font-size: 1.2rem;
  width: max-content; }
  @media screen and (max-width: 1024px) {
    main[data-scene="events"] .event-intro .event-link {
      font-size: 1.5rem; } }
  main[data-scene="events"] .event-intro .event-link svg {
    position: relative;
    margin-left: 0.3rem;
    width: 1.5rem;
    top: 0.3rem; }
    @media screen and (max-width: 1024px) {
      main[data-scene="events"] .event-intro .event-link svg {
        top: 0.7rem; } }
  main[data-scene="events"] .event-intro .event-link a::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; }

main[data-scene="events"] .event-intro .event-description {
  margin-top: 2rem; }

main[data-scene="events"] .event-intro .project-sidebar {
  align-self: flex-start;
  background: none;
  border: 1px solid white;
  color: white;
  border-radius: 1.5rem;
  padding-bottom: 2.5rem; }
  main[data-scene="events"] .event-intro .project-sidebar .form-container {
    margin-top: 1rem; }
    main[data-scene="events"] .event-intro .project-sidebar .form-container input[type="submit"] {
      font-size: 1rem; }

footer {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  column-gap: var(--gutter);
  height: 45vh;
  padding: var(--padding);
  font-size: 1.2rem; }
  @media screen and (max-width: 1024px) {
    footer {
      display: flex;
      flex-direction: column;
      height: auto;
      font-size: 2rem; } }
  footer .footer-logo {
    grid-column: 1 / 7;
    height: 6.5rem; }
    @media screen and (max-width: 1024px) {
      footer .footer-logo {
        height: auto;
        width: 100%;
        order: 3;
        margin-top: 2rem; } }
    footer .footer-logo svg {
      width: 100%;
      height: 100%; }
  footer .contact {
    grid-column: 8 / 20; }
    footer .contact h4 {
      font-weight: 500;
      margin-bottom: 0.5rem; }
      @media screen and (max-width: 1024px) {
        footer .contact h4 {
          font-size: 0.8em;
          margin-bottom: 2rem; } }
    footer .contact > div {
      display: flex;
      column-gap: 3rem; }
      @media screen and (max-width: 1024px) {
        footer .contact > div {
          flex-direction: column; } }
    footer .contact p {
      margin-top: 0;
      margin-bottom: 2rem; }
      footer .contact p strong {
        font-weight: 500; }
      footer .contact p em {
        font-style: normal;
        opacity: 0.7; }
  footer .footer-funds {
    grid-column: 21 / 25;
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    footer .footer-funds figure {
      width: 100%; }
      footer .footer-funds figure img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    @media screen and (max-width: 1024px) {
      footer .footer-funds {
        order: 2;
        margin: 2rem 0; }
        footer .footer-funds figure {
          width: 50%; } }

header {
  position: absolute;
  width: 100%;
  z-index: 10;
  padding: var(--gutter);
  padding-left: var(--padding);
  padding-right: var(--padding);
  height: 15vw;
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 1024px) {
    header {
      height: 8rem;
      padding-top: var(--margin);
      padding-bottom: var(--margin); } }
  header .header-logo {
    position: relative;
    z-index: 10; }
    header .header-logo svg {
      height: 100%;
      width: 32rem; }
      @media screen and (max-width: 1024px) {
        header .header-logo svg {
          width: 20rem;
          height: auto; } }
      @media screen and (min-width: 1921px) {
        header .header-logo svg {
          width: 30rem;
          height: auto; } }
  header nav ul {
    list-style-type: none;
    display: flex;
    gap: 2rem; }
    header nav ul li {
      position: relative;
      padding-bottom: 0.1rem; }
      @media screen and (min-width: 1024px) {
        header nav ul li::after {
          content: '';
          position: absolute;
          width: 100%;
          border-bottom: 2px solid white;
          left: 0;
          bottom: -0.1rem;
          transition: 0.3s; }
        header nav ul li:not(.active)::after {
          width: 0; }
        header nav ul li:not(.active):hover::after {
          width: 100%; } }

.hamburger {
  position: absolute;
  top: 2rem;
  right: var(--margin);
  width: 5rem;
  height: 4rem;
  cusor: pointer;
  z-index: 20; }
  .hamburger svg {
    object-fit: contain;
    width: 100%;
    height: 100%; }
  .hamburger:not(.active) .close {
    display: none; }
  .hamburger.active .open {
    display: none; }
  @media screen and (min-width: 1024px) {
    .hamburger {
      display: none; } }

@media screen and (max-width: 1024px) {
  nav.main-navigation {
    position: fixed;
    background: black;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8rem var(--margin) 4rem;
    transition: transform 0.3s; }
    nav.main-navigation:not(.active) {
      transform: translateY(-100%); }
    nav.main-navigation ul {
      display: block;
      text-align: right;
      font-size: 3rem; } }

main[data-scene="home"] h2 {
  max-width: 80%;
  margin-bottom: 1rem; }

.hero {
  position: relative;
  padding: var(--padding);
  min-height: 100vh;
  align-items: center;
  --color: var(--darkbrown);
  --accent: var(--sand);
  padding-top: 8rem; }
  @media screen and (max-width: 1024px) {
    .hero {
      min-height: 0;
      height: auto;
      min-height: 90vh;
      padding-top: 15rem;
      align-items: flex-start;
      display: flex;
      flex-direction: column-reverse; } }
  .hero > div {
    z-index: 1; }
  .hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden; }
    .hero .hero-bg figure {
      height: 100%; }
  .hero .hero-about {
    grid-column: 2 / 7; }
    @media screen and (max-width: 1024px) {
      .hero .hero-about {
        width: 80%;
        margin-bottom: 10vh;
        font-size: 1rem; } }
    @media screen and (max-width: 809px) {
      .hero .hero-about {
        font-size: 1.8rem;
        width: 100%;
        margin-bottom: 5vh; } }
  .hero .hero-illu {
    grid-column: 8 / span 5;
    margin: 4rem; }
    @media screen and (max-width: 1024px) {
      .hero .hero-illu {
        display: none;
        position: absolute;
        width: 70%;
        align-self: flex-end;
        top: 4rem;
        right: -20%;
        width: 50%; } }

.section-tag {
  background: var(--accent);
  color: var(--color);
  width: max-content;
  padding: 0.2em 1em 0.3em;
  border-radius: 1em;
  border-bottom-left-radius: 0;
  margin-bottom: 1rem; }

.text-content {
  margin: 4rem 0; }
  @media screen and (max-width: 809px) {
    .text-content p,
    .text-content li {
      font-size: 2rem !important; } }

.vision {
  --color: var(--darkgreen);
  --accent: var(--green);
  background: var(--color);
  align-items: center; }
  .vision .text-content {
    grid-column: span 6; }
  .vision .illustration {
    grid-column: span 5;
    transform: translateY(1.5rem);
    margin: 4rem; }
  @media screen and (max-width: 1024px) {
    .vision {
      align-items: flex-start; }
      .vision .text-content {
        grid-column: span 6;
        margin-top: -2rem; }
      .vision .illustration {
        grid-column: 2 / 6;
        transform: none;
        margin: 2rem; } }

.about-ccus {
  --color: var(--darkbrown);
  --accent: var(--lightred);
  background: var(--color);
  align-items: center; }
  .about-ccus .text-content {
    grid-column: 2 / 8;
    transform: translateY(-1.5rem); }
  .about-ccus .illustration {
    grid-column: 8/var(--cols-max); }
  @media screen and (max-width: 1024px) {
    .about-ccus {
      align-items: flex-start; }
      .about-ccus .text-content {
        grid-column: span 6;
        margin-top: -2rem;
        order: 2;
        transform: none; }
      .about-ccus .illustration {
        order: 1;
        grid-column: 2 / 6; } }

.breaker-image {
  position: relative;
  height: 60vh;
  transform: translateY(-1rem); }
  @media screen and (max-width: 1024px) {
    .breaker-image {
      height: 50vh; } }
  .breaker-image figure {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
    height: calc(100% + 1rem); }

.partners {
  --color: var(--grey);
  --accent: var(--blue);
  background: var(--color);
  color: var(--darkgrey);
  align-items: center; }
  .partners .text-content {
    grid-column: 2 / span 6; }
  .partners .illustration {
    grid-column: span 6; }
  @media screen and (max-width: 1024px) {
    .partners {
      display: flex;
      flex-direction: column; } }
  .partners .separator-illu {
    position: absolute;
    top: -22%;
    right: 5vw;
    width: 40vw; }
  .partners .areas {
    grid-column: 2 / 12;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(5% / 3);
    row-gap: 2rem;
    padding-bottom: 4rem;
    margin-top: -2rem; }
    @media screen and (max-width: 1024px) {
      .partners .areas {
        gap: 0; } }
  .partners .area {
    position: relative;
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    transition: transform 0.1s; }
    @media screen and (max-width: 1024px) {
      .partners .area {
        flex: 0 0 50%; } }
    .partners .area:hover {
      transform: scale(1.02); }
    .partners .area h2 {
      order: 2;
      text-align: center;
      margin: auto;
      margin-top: -1rem;
      font-size: 2rem; }
      @media screen and (max-width: 1024px) {
        .partners .area h2 {
          font-size: 1.7rem; } }
      .partners .area h2 sub {
        line-height: 0.2em;
        font-size: 0.6em; }
    .partners .area a::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2; }
    .partners .area .illustration {
      order: 1;
      width: 100%;
      padding: 15%; }
      .partners .area .illustration svg {
        width: 100%;
        heigth: 100%; }

.partner-logos {
  --color: var(--darkgreen);
  --accent: var(--blue);
  background: var(--color);
  padding-bottom: 4rem;
  padding-top: 2rem;
  grid-column: 1/var(--cols-max); }
  @media screen and (max-width: 1024px) {
    .partner-logos {
      padding-top: 1rem;
      padding-bottom: 2rem; } }
  .partner-logos h2 {
    margin-left: 10%; }
  .partner-logos ul {
    width: 80%;
    margin: auto;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--gutter);
    flex-wrap: wrap; }
    @media screen and (max-width: 1024px) {
      .partner-logos ul {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--gutter); } }
    .partner-logos ul li {
      position: relative;
      height: 0;
      padding-top: 100%;
      margin: 0; }
      .partner-logos ul li img {
        position: absolute;
        top: 0;
        left: 0;
        padding: 1rem;
        object-fit: contain;
        width: 100%;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .partner-logos ul li img {
            padding: 0.5rem; } }

.text-content a {
  display: block;
  border: 1px solid;
  width: max-content;
  padding: 1rem 2rem 1.2rem;
  border-radius: 4rem;
  line-height: 1em;
  cursor: pointer;
  margin-top: 2rem;
  color: var(--accent); }
  .text-content a:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent); }

.roadmap-block {
  --color: var(--darktint);
  --bg: var(--color);
  --accent: var(--lightred);
  background: var(--color);
  align-items: center; }
  .roadmap-block .text-content {
    grid-column: 6/var(--cols-max);
    transform: translateY(-1.5rem); }
  .roadmap-block .illustration {
    grid-column: 1 / 6;
    grid-row: 1; }
  @media screen and (max-width: 1024px) {
    .roadmap-block {
      align-items: flex-start; }
      .roadmap-block .text-content {
        grid-column: span 6;
        margin-top: -2rem;
        order: 2;
        transform: none; }
      .roadmap-block .illustration {
        order: 1;
        grid-column: 2 / 6; } }

.news-teasers,
.events-teasers {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  padding-bottom: 7rem; }
  .news-teasers .content,
  .events-teasers .content {
    margin-top: 4rem;
    grid-column: 2 / span 10; }
    @media screen and (max-width: 1024px) {
      .news-teasers .content,
      .events-teasers .content {
        grid-column: 1/span var(--cols); } }
  .news-teasers .button.more,
  .events-teasers .button.more {
    display: block;
    margin-top: 4rem;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
    width: max-content;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 1024px) {
      .news-teasers .button.more,
      .events-teasers .button.more {
        font-size: 2rem; } }
    .news-teasers .button.more:hover,
    .events-teasers .button.more:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: black; }

.news-teasers {
  --color: black;
  --accent: var(--sand); }
  .news-teasers ul {
    margin-top: 2rem;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 4rem; }
    .news-teasers ul li {
      position: relative;
      width: 80%; }
      @media screen and (max-width: 1024px) {
        .news-teasers ul li {
          width: 100%; } }
      .news-teasers ul li:hover {
        color: var(--sand); }
      .news-teasers ul li .date {
        line-height: 1em; }
      .news-teasers ul li h4 {
        font-size: var(--bh);
        line-height: 1em; }
      .news-teasers ul li .button {
        display: block;
        margin-top: 1.5rem;
        font-size: 1rem;
        line-height: 1em;
        padding: 0.9em 2.3em 1.1em; }
        @media screen and (max-width: 1024px) {
          .news-teasers ul li .button {
            font-size: 1.5rem; } }
        .news-teasers ul li .button:hover {
          background: var(--sand);
          border-color: var(--sand);
          color: black; }
        .news-teasers ul li .button::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2; }

.news-teasers + .events-teasers {
  padding-top: 0; }
  .news-teasers + .events-teasers .content {
    margin-top: 0; }

.events-teasers {
  --color: black;
  --accent: var(--lightred); }
  .events-teasers ul {
    list-style-type: none;
    display: flex;
    gap: var(--margin); }
    @media screen and (max-width: 1024px) {
      .events-teasers ul {
        flex-direction: column;
        gap: 0rem; } }
    .events-teasers ul li {
      background: none;
      border: 1px solid white;
      flex: 1; }
      .events-teasers ul li .event-date {
        color: white; }
  @media screen and (max-width: 1024px) {
    .events-teasers .more {
      margin-top: 0 !important; } }

section.module:last-child {
  padding-bottom: 8rem; }

.text-block-content h1 {
  margin-bottom: 1rem; }

.text-block-content p + h2,
.text-block-content p + h3,
.text-block-content p + h4,
.text-block-content p + h5,
.text-block-content p + h6 {
  margin-top: 3rem;
  margin-bottom: 1rem; }

.text-block-content h3 + p, .text-block-content h4 + p, .text-block-content h5 + p {
  margin-top: 1rem; }

.text-block-content p a {
  text-decoration: underline; }

.text-block-content h1, .text-block-content h2, .text-block-content h3, .text-block-content h4, .text-block-content h5 {
  color: var(--accent, var(--accentColor)); }

.text-block-content p sup {
  line-height: 0.8em; }

.text-block-content table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 75%;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 0.8em; }
  @media screen and (max-width: 1024px) {
    .text-block-content table {
      width: 100%; } }
  .text-block-content table tr {
    border: 1px solid #ccc; }
    .text-block-content table tr:first-child {
      color: var(--accent); }
      .text-block-content table tr:first-child strong {
        font-weight: 500 !important; }
      .text-block-content table tr:first-child td {
        padding-bottom: 0.7rem; }
    .text-block-content table tr td {
      border: 1px solid #ccc;
      padding: 0.5rem 1rem 1.5rem 1rem; }
      .text-block-content table tr td:nth-child(1) {
        width: 40%; }
      .text-block-content table tr td:nth-child(2) {
        width: 60%; }
      .text-block-content table tr td strong {
        font-weight: 500; }

.text-block-content h5 + table, .text-block-content h6 + table {
  margin-top: 0; }

.module.text-block-section {
  --color: var(--darkgreen);
  --accent: var(--green);
  background: var(--color);
  padding: var(--margin);
  padding-bottom: 8rem;
  align-items: center; }
  .module.text-block-section .text-block-content {
    margin-top: 4rem;
    grid-column: span 6; }
    @media screen and (min-width: 1024px) {
      .module.text-block-section .text-block-content {
        align-self: flex-start;
        padding-top: 1.5rem; } }
    .module.text-block-section .text-block-content a {
      text-decoration: underline; }
    .module.text-block-section .text-block-content h4 {
      color: var(--accent);
      margin-top: 1.5em;
      font-weight: 500;
      line-height: 1.1em;
      margin-bottom: 0.5em; }
      .module.text-block-section .text-block-content h4 strong {
        font-weight: 400; }
  .module.text-block-section .illustration {
    grid-column: span 5;
    transform: translateY(1.5rem);
    margin: 4rem;
    align-self: flex-start; }
    .module.text-block-section .illustration img {
      object-fit: contain;
      height: 100%;
      width: 100%; }
  @media screen and (max-width: 1024px) {
    .module.text-block-section {
      align-items: flex-start; }
      .module.text-block-section .text-block-content {
        grid-column: span 6;
        margin-top: 2rem; }
      .module.text-block-section .illustration + .text-block-content {
        margin-top: -2rem; }
      .module.text-block-section .illustration {
        grid-column: 2 / 6;
        transform: none;
        margin: 2rem; } }
  .module.text-block-section:nth-child(even) {
    --color: var(--darkbrown); }
    @media screen and (min-width: 1024px) {
      .module.text-block-section:nth-child(even) .text-block-content {
        grid-row: 1;
        grid-column: 2 / span 6;
        grid-column: 2 / span 10; }
        .module.text-block-section:nth-child(even) .text-block-content p, .module.text-block-section:nth-child(even) .text-block-content ul {
          width: 58%; }
        .module.text-block-section:nth-child(even) .text-block-content table p {
          width: auto; }
      .module.text-block-section:nth-child(even) .illustration {
        grid-row: 1;
        grid-column: 8 / span 5;
        transform: translateY(1.5rem);
        margin: 4rem; } }

main.standard-modules .module.text-block-section .text-block-content {
  grid-column: 2 / span 6; }

@media screen and (max-width: 809px) {
  main.subpage .text-block-section .text-block-content,
  main[data-scene="events"] .text-block-section .text-block-content {
    grid-column: 1 / -1 !important; } }

main[data-scene="events"] .module.text-block-section .text-block-content p,
main[data-type="simple"] .module.text-block-section .text-block-content p {
  width: 100%; }

.module.text-block {
  --color: var(--darkgreen);
  --accent: var(--green);
  padding: var(--margin);
  padding-bottom: 2rem;
  align-items: center; }
  .module.text-block[data-position="left"] .text-block-content {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .module.text-block[data-position="left"] .text-block-content {
        grid-column: 1 / span 6; } }
  .module.text-block[data-position="center"] .text-block-content {
    grid-column: 4 / span 6; }
    @media screen and (max-width: 1024px) {
      .module.text-block[data-position="center"] .text-block-content {
        grid-column: 1 / span 6; } }
  .module.text-block table {
    width: 100%; }
  .module.text-block .section-tag {
    background: var(--accentColor, var(--lightred));
    color: var(--bgcolor, black); }
  .module.text-block.two-cols[data-position="left"] .text-block-content, .module.text-block.two-cols[data-position="center"] .text-block-content {
    grid-column: 2 / -2; }
    @media screen and (max-width: 809px) {
      .module.text-block.two-cols[data-position="left"] .text-block-content, .module.text-block.two-cols[data-position="center"] .text-block-content {
        grid-column: 1 / -1; } }
    .module.text-block.two-cols[data-position="left"] .text-block-content .columns, .module.text-block.two-cols[data-position="center"] .text-block-content .columns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gutter); }
      @media screen and (max-width: 809px) {
        .module.text-block.two-cols[data-position="left"] .text-block-content .columns, .module.text-block.two-cols[data-position="center"] .text-block-content .columns {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          column-gap: var(--gutter); }
          .module.text-block.two-cols[data-position="left"] .text-block-content .columns .col:last-child, .module.text-block.two-cols[data-position="center"] .text-block-content .columns .col:last-child {
            margin-top: 3rem; } }

main[data-scene="events"] .module.text-block,
main[data-scene="join"] .module.text-block {
  padding-bottom: 4rem; }

main[data-scene="events"] .module:not(.text-block-section),
main[data-scene="join"] .module:not(.text-block-section) {
  background: var(--darktint); }

.module.intro-section {
  --color: var(--darktint);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  background: var(--color);
  padding: 5rem var(--padding);
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  margin-top: -3rem; }
  @media screen and (max-width: 1024px) {
    .module.intro-section p {
      font-size: 2rem; } }
  .module.intro-section > * {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .module.intro-section > * {
        grid-column: 1 / span 6; } }
  @media screen and (max-width: 1024px) {
    .module.intro-section {
      padding-top: 3rem;
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem; } }
  .module.intro-section h2.section-tag {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.3em; }

.module.video-section {
  background: var(--darktint);
  padding: var(--margin);
  padding-top: 5rem;
  padding-bottom: 6rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter); }
  .module.video-section h2, .module.video-section .video-text {
    grid-column: 2 / span 10; }
    @media screen and (max-width: 1024px) {
      .module.video-section h2, .module.video-section .video-text {
        grid-column: 1 / span 6; } }
  .module.video-section .video-text {
    margin-top: 1rem;
    margin-bottom: 3rem; }
  .module.video-section .video-container {
    grid-column: 2 / span 10;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; }
    @media screen and (max-width: 1024px) {
      .module.video-section .video-container {
        grid-column: 1 / span 6; } }
  .module.video-section iframe {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%; }

.module.single-image {
  padding: 2rem var(--margin); }
  .module.single-image figure {
    border-radius: 1rem;
    overflow: hidden; }
  .module.single-image figure, .module.single-image figcaption {
    grid-column: var(--start)/var(--end); }
  .module.single-image[data-size="large"] {
    --start: 2;
    --end: span 8; }
    .module.single-image[data-size="large"][data-alignment="left"] {
      --start: 2; }
    .module.single-image[data-size="large"][data-alignment="right"] {
      --start: 5; }
    .module.single-image[data-size="large"][data-alignment="center"] {
      --start: 3; }
  .module.single-image[data-size="medium"] {
    --start: 2;
    --end: span 6; }
    .module.single-image[data-size="medium"][data-alignment="left"] {
      --start: 2; }
    .module.single-image[data-size="medium"][data-alignment="right"] {
      --start: 6; }
    .module.single-image[data-size="medium"][data-alignment="center"] {
      --start: 4; }
  .module.single-image[data-size="small"] {
    --start: 2;
    --end: span 4; }
    .module.single-image[data-size="small"][data-alignment="left"] {
      --start: 2; }
    .module.single-image[data-size="small"][data-alignment="right"] {
      --start: 8; }
    .module.single-image[data-size="small"][data-alignment="center"] {
      --start: 5; }
  .module.single-image[data-size="full"] figure {
    grid-column: 1 / -1; }
  @media screen and (max-width: 809px) {
    .module.single-image[data-size="small"] figure, .module.single-image[data-size="medium"] figure, .module.single-image[data-size="large"] figure, .module.single-image[data-size="full"] figure {
      grid-column: 1 / -1; } }

.module.images-text {
  margin-top: 2rem;
  padding: 0 var(--margin); }
  .module.images-text .items {
    grid-column: 2 / -2; }
    @media screen and (max-width: 1024px) {
      .module.images-text .items {
        grid-column: 1 / -1; } }
  .module.images-text[data-layout="list"] .items .item {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    margin-bottom: 4rem; }
    .module.images-text[data-layout="list"] .items .item figure {
      grid-column: span 6; }
      .module.images-text[data-layout="list"] .items .item figure img {
        width: 100%; }
    .module.images-text[data-layout="list"] .items .item.has-png {
      align-items: center; }
      .module.images-text[data-layout="list"] .items .item.has-png figure {
        grid-column: span 2; }
      .module.images-text[data-layout="list"] .items .item.has-png img {
        position: relative; }
    .module.images-text[data-layout="list"] .items .item .text-block-content {
      margin-left: 2rem;
      grid-column: span 6; }
  .module.images-text[data-layout="grid2"] .items, .module.images-text[data-layout="grid3"] .items, .module.images-text[data-layout="grid4"] .items {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter); }
    .module.images-text[data-layout="grid2"] .items .item, .module.images-text[data-layout="grid3"] .items .item, .module.images-text[data-layout="grid4"] .items .item {
      grid-column: span calc(var(--cols) / 2);
      margin-bottom: 4rem; }
      .module.images-text[data-layout="grid2"] .items .item figure, .module.images-text[data-layout="grid3"] .items .item figure, .module.images-text[data-layout="grid4"] .items .item figure {
        grid-column: span 6;
        border-radius: 1rem;
        overflow: hidden; }
        .module.images-text[data-layout="grid2"] .items .item figure img, .module.images-text[data-layout="grid3"] .items .item figure img, .module.images-text[data-layout="grid4"] .items .item figure img {
          width: 100%;
          height: 100%;
          object-fit: contain; }
      .module.images-text[data-layout="grid2"] .items .item.has-png, .module.images-text[data-layout="grid3"] .items .item.has-png, .module.images-text[data-layout="grid4"] .items .item.has-png {
        align-items: center; }
        .module.images-text[data-layout="grid2"] .items .item.has-png figure, .module.images-text[data-layout="grid3"] .items .item.has-png figure, .module.images-text[data-layout="grid4"] .items .item.has-png figure {
          width: 50%;
          height: 0;
          padding-bottom: 50%;
          margin: auto; }
        .module.images-text[data-layout="grid2"] .items .item.has-png img, .module.images-text[data-layout="grid3"] .items .item.has-png img, .module.images-text[data-layout="grid4"] .items .item.has-png img {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 1rem 0; }
      .module.images-text[data-layout="grid2"] .items .item .text-block-content, .module.images-text[data-layout="grid3"] .items .item .text-block-content, .module.images-text[data-layout="grid4"] .items .item .text-block-content {
        margin-top: 1rem;
        text-align: center; }
  .module.images-text[data-layout="grid2"] .items .item {
    grid-column: span calc(var(--cols) / 2); }
  .module.images-text[data-layout="grid3"] .items .item {
    grid-column: span calc(var(--cols) / 3); }
  .module.images-text[data-layout="grid4"] .items .item {
    grid-column: span calc(var(--cols) / 4); }
  @media screen and (max-width: 809px) {
    .module.images-text[data-layout="grid2"] .items .item, .module.images-text[data-layout="grid3"] .items .item, .module.images-text[data-layout="grid4"] .items .item {
      grid-column: span calc(var(--cols) / 2); } }

.event-intro + .module.images-text {
  margin-top: 0; }

.people-container {
  background: var(--grey);
  color: black;
  padding: 5rem var(--margin); }
  .people-container .people-group {
    margin-bottom: 6rem; }
  .people-container ul.people-list {
    margin: 3rem 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    gap: var(--gutter); }
    .people-container ul.people-list li {
      grid-column: span 2;
      font-size: 1rem;
      text-align: center; }
      @media screen and (max-width: 1024px) {
        .people-container ul.people-list li {
          grid-column: span 3;
          font-size: 1.3rem; } }
      .people-container ul.people-list li figure {
        text-align: left;
        filter: grayscale(100%);
        margin: 1rem;
        border-radius: 100%;
        overflow: hidden; }
      .people-container ul.people-list li .name {
        font-size: 1.2em;
        font-weight: 500; }
      .people-container ul.people-list li .role {
        font-size: 1.1em;
        line-height: 1.1em;
        margin-top: 0em; }
      .people-container ul.people-list li .title {
        margin-top: 0.7rem;
        font-size: 0.9em;
        line-height: 1.1em; }
        .people-container ul.people-list li .title p {
          margin: 0; }
          .people-container ul.people-list li .title p strong {
            font-weight: 500; }

[data-scene="projects"] {
  --accent: var(--wscolor); }

.project-header {
  position: relative;
  z-index: 1;
  margin-top: 20vw; }
  @media screen and (max-width: 1024px) {
    .project-header {
      margin-top: 30vh; } }
  .project-header.has-image {
    margin-top: 0;
    height: 35vw;
    overflow: hidden; }
    @media screen and (max-width: 1024px) {
      .project-header.has-image {
        height: 50vh; } }
    .project-header.has-image figure {
      opacity: 0.8;
      height: 100%;
      width: 100%; }
      .project-header.has-image figure img {
        object-fit: cover;
        width: 100%;
        height: 100%; }

.project-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  background: var(--color);
  padding: 5rem var(--padding);
  padding-bottom: 10rem;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  margin-top: -3rem; }
  @media screen and (max-width: 1024px) {
    .project-section {
      padding-top: 3rem;
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem; } }
  .project-section h2.section-tag {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.3em; }

.project-intro {
  --color: var(--darktint); }
  .project-intro .intro-content {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .project-intro .intro-content {
        grid-column: 1 / span 6; } }
  .project-intro .project-sidebar {
    grid-column: 9 / span 3;
    background: #B7B2AC;
    border-radius: 2rem;
    padding: 2rem 2.5rem;
    color: black;
    font-size: 1rem; }
    @media screen and (max-width: 1024px) {
      .project-intro .project-sidebar {
        grid-column: 1 / span 6;
        margin-top: 4rem;
        display: flex;
        flex-wrap: wrap;
        font-size: 1.3rem; } }
    .project-intro .project-sidebar dl:not(:last-child) {
      margin-bottom: 2rem; }
    .project-intro .project-sidebar dl dt {
      color: white; }
    @media screen and (max-width: 1024px) {
      .project-intro .project-sidebar dl:not(:first-child):not(:last-child) {
        margin-left: 2rem; } }
    .project-intro .project-sidebar dl.project-partners-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem; }
      @media screen and (max-width: 1024px) {
        .project-intro .project-sidebar dl.project-partners-list {
          width: 100%; } }
      .project-intro .project-sidebar dl.project-partners-list dt {
        flex: 0 0 100%; }
      .project-intro .project-sidebar dl.project-partners-list dd {
        flex-basis: calc(50% - 0.5rem);
        padding: 1rem; }
        @media screen and (max-width: 1024px) {
          .project-intro .project-sidebar dl.project-partners-list dd {
            flex-basis: calc(32% - 0.5rem); } }
        .project-intro .project-sidebar dl.project-partners-list dd img {
          object-fit: contain;
          width: 100%;
          height: 100%; }

.project-objectives {
  --color: #635C59; }
  .project-objectives > * {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .project-objectives > * {
        grid-column: 1 / span 6; } }

.project-content {
  --color: var(--darktint); }
  .project-content > * {
    grid-column: 2 / span 6; }
    @media screen and (max-width: 1024px) {
      .project-content > * {
        grid-column: 1 / span 6; } }
  .project-content .workstream-icon {
    grid-row: 1 / span 4;
    grid-column: 9 / span 3; }
    @media screen and (max-width: 1024px) {
      .project-content .workstream-icon {
        grid-row: 1 / span 1;
        grid-column: 1 / span 6;
        margin-bottom: 3rem; } }
  .project-content p + h4 {
    margin-top: 1.5em;
    margin-bottom: 0.2em; }
  .project-content ol {
    margin-left: 1.5rem;
    line-height: 1.2em; }
    .project-content ol li {
      padding-left: 0.3em; }
      .project-content ol li:not(:last-child) {
        margin-bottom: 0.5em; }

.subpage-header {
  margin: 0 var(--margin);
  margin-top: 20vw; }
  @media screen and (max-width: 1024px) {
    .subpage-header {
      margin-top: 30vw; } }

.pre-header {
  margin-top: 8rem; }
  .pre-header h2 {
    margin-left: var(--margin);
    margin-bottom: 2rem; }

.news-item {
  background: #302A38;
  padding: 4rem var(--padding) 6rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter); }
  .news-item h1, .news-item h2, .news-item .news-content, .news-item .post-date {
    grid-column: 4 / span 6; }
    @media screen and (max-width: 1024px) {
      .news-item h1, .news-item h2, .news-item .news-content, .news-item .post-date {
        grid-column: 1/span var(--cols); } }
  .news-item h2 {
    margin-bottom: 4rem; }
    .news-item h2 a:hover {
      color: var(--sand); }

[data-scene="newsOverview"] .news-item {
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem; }
  [data-scene="newsOverview"] .news-item:not(:last-child) {
    margin-bottom: 5rem; }

[data-scene="newsOverview"] .news-description {
  grid-column: 1/var(--cols-max);
  margin-bottom: 4rem;
  padding: 0 var(--margin); }
  [data-scene="newsOverview"] .news-description p {
    width: 66%; }
    @media screen and (max-width: 809px) {
      [data-scene="newsOverview"] .news-description p {
        width: 100%; } }

[data-scene="join"] .join-form {
  margin-top: 5rem;
  grid-column: 2 / span 6; }

main.subpage {
  background: var(--bgcolor, black); }
  main.subpage .subpage-header {
    position: relative;
    z-index: 1;
    margin-top: 20vw;
    margin-left: 0;
    margin-right: 0; }
    @media screen and (max-width: 1024px) {
      main.subpage .subpage-header {
        margin-top: 30vh; } }
    main.subpage .subpage-header.has-image {
      margin-top: 0;
      height: 35vw;
      overflow: hidden; }
      @media screen and (max-width: 1024px) {
        main.subpage .subpage-header.has-image {
          height: 50vh; } }
      main.subpage .subpage-header.has-image figure {
        opacity: 0.8;
        height: 100%;
        width: 100%; }
        main.subpage .subpage-header.has-image figure img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
  main.subpage .subpage-intro {
    padding: 0rem var(--padding);
    padding-bottom: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter); }
    main.subpage .subpage-intro .subpage-intro-content {
      grid-column: 2 / -2; }
    main.subpage .subpage-intro h1 {
      margin-bottom: 2rem; }
    main.subpage .subpage-intro .section-tag {
      background: var(--primarycolor);
      color: var(--bgcolor); }
  @media screen and (max-width: 809px) {
    main.subpage[data-type="default"] .subpage-intro + .module {
      margin-top: 2rem; } }
  main.subpage[data-type="simple"] {
    padding-top: 15rem; }

.workstreams-container {
  margin-top: 2rem; }

.workstream-section {
  position: relative;
  --accent: var(--wscolor);
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  padding: 4rem var(--margin);
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  height: var(--height);
  overflow: hidden;
  transition: 0.3s; }
  .workstream-section:nth-child(odd) {
    --bg: var(--darktint);
    --color: var(--darktint); }
  .workstream-section:nth-child(even) {
    --bg: var(--darksand);
    --color: var(--darksand); }
  .workstream-section:not(:first-child) {
    margin-top: -3rem; }
  .workstream-section:not(:last-child) {
    padding-bottom: 7rem; }
  .workstream-section:last-child {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem; }
  .workstream-section:not(.active) {
    --height: calc(25rem + 15rem); }
    @media screen and (max-width: 1024px) {
      .workstream-section:not(.active) {
        --height: auto; } }
    .workstream-section:not(.active):last-child {
      --height: calc(27rem + 12rem); }
      @media screen and (max-width: 1024px) {
        .workstream-section:not(.active):last-child {
          --height: auto; } }
    .workstream-section:not(.active) .workstream-projects {
      opacity: 0; }
      @media screen and (max-width: 1024px) {
        .workstream-section:not(.active) .workstream-projects {
          height: 0; } }
    @media screen and (max-width: 809px) {
      .workstream-section:not(.active) .workstream-text {
        font-size: 1.5rem !important; } }
    @media screen and (max-width: 1024px) {
      .workstream-section:not(.active) .workstream-leader {
        display: none; } }
  .workstream-section.active {
    --height: var(--contentHeight); }

.workstream-intro {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  grid-column: span var(--cols);
  height: 31rem; }
  @media screen and (max-width: 1024px) {
    .workstream-intro {
      height: auto; } }
  .workstream-intro .workstream-intro-content {
    grid-column: span 7; }
    @media screen and (max-width: 1024px) {
      .workstream-intro .workstream-intro-content {
        grid-column: span 6; } }
    .workstream-intro .workstream-intro-content h2 {
      margin-bottom: 1.5rem; }
    .workstream-intro .workstream-intro-content .workstream-text {
      font-size: 1.2rem; }
  .workstream-intro .explore-workstream {
    margin-top: 2rem;
    color: var(--accent); }
    .workstream-intro .explore-workstream:hover {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent); }

.workstream-icon {
  grid-column: span 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem; }
  @media screen and (max-width: 1024px) {
    .workstream-icon {
      grid-column: span 6;
      grid-row: 1;
      padding: 0; } }
  .workstream-icon svg {
    object-fit: contain;
    width: 20rem;
    height: 20rem; }
    @media screen and (max-width: 1024px) {
      .workstream-icon svg {
        width: 12rem;
        height: 12rem; } }

.workstream-projects {
  padding-top: 3rem;
  transition: opacity 0.3s;
  grid-column: span var(--cols); }
  @media screen and (max-width: 1024px) {
    .workstream-projects {
      margin-top: 0rem; } }
  .workstream-projects ul.projects-list {
    margin-top: 1rem;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);
    gap: var(--gutter); }
    @media screen and (max-width: 1024px) {
      .workstream-projects ul.projects-list {
        display: flex;
        flex-direction: column; } }
    .workstream-projects ul.projects-list li {
      position: relative;
      border-radius: 2rem;
      padding: 1.5rem 2rem;
      background: white;
      color: black;
      height: 25rem;
      transition: transform 0.1s; }
      .workstream-projects ul.projects-list li .teaser {
        margin-top: 1rem; }
      .workstream-projects ul.projects-list li:hover {
        transform: scale(1.01); }
      .workstream-projects ul.projects-list li a::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2; }

.workstream-leader {
  margin-top: 6rem;
  margin-bottom: 3rem;
  grid-column: span var(--cols); }
  .workstream-leader .leader-content {
    margin-top: 1rem;
    background: #B7B2AC;
    padding: 2rem 2.5rem;
    border-radius: 2rem;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter); }
    @media screen and (max-width: 1024px) {
      .workstream-leader .leader-content {
        display: flex;
        flex-direction: column; } }
    .workstream-leader .leader-content .left {
      grid-column: span 4;
      display: flex;
      flex-direction: column;
      align-self: flex-start; }
      @media screen and (max-width: 1024px) {
        .workstream-leader .leader-content .left {
          display: flex;
          align-items: center;
          margin-bottom: 4rem; }
          .workstream-leader .leader-content .left .leader-info {
            order: 2;
            margin-left: 1rem;
            text-align: center; } }
      .workstream-leader .leader-content .left .title {
        margin-top: 0.5rem;
        font-size: 1.3rem;
        line-height: 1.1em; }
        @media screen and (max-width: 1024px) {
          .workstream-leader .leader-content .left .title {
            width: 80%;
            margin-left: auto;
            margin-right: auto; } }
      .workstream-leader .leader-content .left figure {
        margin-top: 2rem;
        width: 10rem;
        height: 10rem;
        padding-top: 0;
        filter: grayscale(100%);
        border-radius: 100%;
        overflow: hidden; }
        @media screen and (max-width: 1024px) {
          .workstream-leader .leader-content .left figure {
            order: 1;
            width: 15rem;
            height: 15rem;
            margin-top: 0;
            margin-bottom: 1rem; } }
    .workstream-leader .leader-content .bio {
      grid-column: 7/var(--cols-max);
      font-size: 1rem; }
      @media screen and (max-width: 1024px) {
        .workstream-leader .leader-content .bio {
          grid-column: 1 / span 6;
          font-size: 1.3rem; } }

.projects-index {
  margin-top: 10rem;
  background: #DDDDDD;
  color: black;
  padding: 4rem 2.5rem; }
  @media screen and (max-width: 1024px) {
    .projects-index {
      margin-top: 5rem; } }
  .projects-index .index-container {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    row-gap: 7rem; }
    @media screen and (max-width: 1024px) {
      .projects-index .index-container {
        row-gap: 4rem; } }
    .projects-index .index-container .ws-index {
      grid-column: span 6; }
      .projects-index .index-container .ws-index:nth-child(3) {
        grid-row: span 3; }
      .projects-index .index-container .ws-index h3 {
        font-size: 2rem;
        margin-bottom: 1.5rem; }
        .projects-index .index-container .ws-index h3 sub {
          line-height: 0.3em; }
      .projects-index .index-container .ws-index ul {
        list-style-type: none; }
      .projects-index .index-container .ws-index li {
        font-size: 1.2rem;
        margin-bottom: 1.4rem;
        width: 80%; }
        @media screen and (max-width: 1024px) {
          .projects-index .index-container .ws-index li {
            font-size: 1.6rem; } }
        .projects-index .index-container .ws-index li a {
          opacity: 0.7; }
        .projects-index .index-container .ws-index li:hover a {
          opacity: 1; }
        .projects-index .index-container .ws-index li .identifier {
          opacity: 0.4;
          font-size: 0.8em; }
        .projects-index .index-container .ws-index li .title {
          font-weight: 500;
          line-height: 1.2em; }
        .projects-index .index-container .ws-index li .arrow-link {
          position: relative;
          top: 0;
          left: 0; }
          .projects-index .index-container .ws-index li .arrow-link svg {
            margin-top: 0.2rem;
            margin-left: 0;
            width: 2rem; }