@font-face {
  font-family: "ArtifexCF-reg";
  src: url("../ASSETS/FONTS/ArtifexCF-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "basiercircle-reg";
  src: url("../ASSETS/FONTS/basiercircle-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "basiercircle-regitalic";
  src: url("../ASSETS/FONTS/basiercircle-Regularitalic.woff") format("woff");
  font-style: italic;
  font-weight: normal;
  font-variant: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "basiercircle-semibold";
    src: url("../ASSETS/FONTS/basiercircle-Semibold.woff") format("woff");
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  @font-face {
    font-family: "IBMPlexMono-Semibold";
    src: url("../ASSETS/FONTS/IBMPlexMono-SemiBold.woff") format("woff");
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }










  h1 {
    font-family: ArtifexCF-reg;
    font-size: clamp(68px, -0.3rem + 18vw, 300px);
    line-height: clamp(74px, 21vw, 308px); /*em dash*/
    
    font-size: 64px;
    color: var(--color-black);
    letter-spacing: -1.4px;
    line-height: 72px;
  
    font-weight: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibilitycontent-optimizeLegibility;
  }

  h1 i, h1 em {font-style: oblique 16deg;}
  
  @media (max-width: 500px) {
    h1 {    
        font-size: 28px;
        letter-spacing: -1px;
        line-height: 36px;
    }
  }

h2,
.h2-case-study {
    font-family: ArtifexCF-reg;
 
    font-size: var(--size-l);
    color: var(--color-black);
    letter-spacing: -0.5px;
    line-height: 48px;
    margin-bottom: var(--size-l);

    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibilitycontent-optimizeLegibility;
  }
  @media (max-width: 500px) {
    h2,
    .h2-case-study {    
        font-size: var(--size-m);
        letter-spacing: -0.4px;
        line-height: 32px;
        padding: var(--size-xs) 0 0 0;
    }
  }
  .h2-case-study {
    padding: var(--size-xs) 0 0 0;
    margin-bottom: 0;
  }

  h3,
  li {
    font-family: basiercircle-reg;
    
    font-size: 24px;
    color: var(--color-black);
    letter-spacing: -0.4px;
    line-height: 32px;
    
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibilitycontent-optimizeLegibility;
  }
  @media (max-width: 500px) {
    h3,
    li {    
        font-size: 16px;
        letter-spacing: 0;
        line-height: 24px;
    }
  }

  p {
    font-family: basiercircle-reg;
    
    font-size: var(--size-m);
    color: var(--color-black);
    letter-spacing: -0.6px;
    line-height: var(--size-l);
    margin-bottom: var(--size-l);
  }
p b, p strong {font-family: basiercircle-semibold;}
p i, p em { font-family: basiercircle-regitalic;}

@media (max-width: 500px) {
  p {    
    font-size: var(--size-s);
    line-height: var(--size-m);
  }
}


.label,
a.link-back,
a.close-btn {
    font-family: IBMPlexMono-Semibold;
    font-size: 14px;
    color: var(--color-grey);
    letter-spacing: 0.8px;
    line-height: 16px;
    text-transform: uppercase;
    flex: 0 0 293px; 
}
a.close-btn {
  text-align: right;
  position: relative;
  right: 10px;
  flex: 0 0 24px;
}

@media (max-width: 500px) {
  .label,
  a.link-back,
  a.close-btn {
        flex: none;
        font-size: 11px;
        line-height: 19px;
    }
}


blockquote {
    font-family: ArtifexCF-reg;
    font-style: oblique 16deg;
    font-size: 64px;
    color: var(--color-black);
    letter-spacing: -1.4px;
    line-height: 72px; 

    display: inline-block;
}
@media (max-width: 500px) {
    blockquote {
        font-size: 28px;
        letter-spacing: -1px;
        line-height: 36px;
    }
}

blockquote:before {
    display: block;
    font-style: normal;
    content: "“";
    position: absolute;
    margin-left: -32px;
  }
  @media (max-width: 500px) {
    blockquote:before {
        margin-left: -16px;
      }
}

cite {
    display: inline-block;
    font-family: basiercircle-reg;
    font-style: normal;
    font-size: 24px;
    color: var(--color-black);
    letter-spacing: -0.6px;
    line-height: 40px;
}
@media (max-width: 500px) {
    cite {
        font-size: 16px;
        color: var(--color-black);
        letter-spacing: -0.6px;
        line-height: 24px;    
    }
  }

a {
    font-family: ArtifexCF-reg;
    
    /*font-size: 24px;*/
    color: var(--color-black);
    letter-spacing: -0.4px;
    line-height: 32px;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibilitycontent-optimizeLegibility;
  
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
  }
  @media (max-width: 500px) {
    a {
        /*font-size: 16px;*/
        letter-spacing: 0;
        line-height: 24px;
    }
}










#impact-list {
    list-style: none; 
    padding: var(--size-xl) 0 var(--size-xl) 0;
  }

.impact-item1,
.impact-item2,
.impact-item3,
.impact-item4,
.impact-item5 {
    position: relative; 
    padding: 0 0 var(--size-l) 0;
}

  li.impact-item1,
  li.impact-item2,
  li.impact-item3,
  li.impact-item4,
  li.impact-item5 {
    font-family: ArtifexCF-reg;
    
    font-size: var(--size-m);
    color: var(--color-black);
    letter-spacing: -0.4px;
    line-height: 32px;

    /*H2 font-size: 40px;
    color: var(--color-black);
    letter-spacing: -0.5px;
    line-height: 48px;*/
    
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibilitycontent-optimizeLegibility;
  }

  .impact-item1::before,
  .impact-item2::before,
  .impact-item3::before,
  .impact-item4::before,
  .impact-item5::before {
    content: '';
    position: absolute;
    
    left: -20px;
    top: var(--size-m);
    transform: translateY(-107%);
    width: 12px;
    height: 12px;

    /*H2left: -32px;
    top: var(--size-m);
    transform: translateY(-50%);
    width:12px; 
    height: 12px;*/

    background-image: url('../IMAGES/SVG/dot-l-1.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
  }
  .impact-item2::before {
    background-image: url('../IMAGES/SVG/dot-l-2.svg'); 
  }
  .impact-item3::before {
    background-image: url('../IMAGES/SVG/dot-l-3.svg'); 
  }
  .impact-item4::before {
    background-image: url('../IMAGES/SVG/dot-l-4.svg'); 
  }

  .impact-item5::before {
    background-image: url('../IMAGES/SVG/dot-l-5.svg'); 
  }