html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--typeface-h);
  line-height: calc(1em + 0.625rem);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--clr-txt-heading);
  background-color: var(--clr-fore);
  width: 100%;
  min-height: 100%;

  /* Main Grid Level 1 */
  display: grid;
  grid-template-columns: 1fr min(70rem, calc(100% - 2rem)) 1fr;
  grid-column-gap: 1rem;
}

/* Resets */
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a:link,
a:visited,
a:focus {
  color: var(--clr-txt-heading);
  text-decoration: none;
}

.article-txt a:link {
  text-decoration: underline;
}

a:hover,
a:active {
  color: var(--clr-txt-faded);
  transition: color 300ms ease-out;
}
a:focus {
  outline: var(--clr-accent) solid 2px;
}
::-moz-focus-inner {
  border: 0px;
}
::selection {
  background-color: var(--clr-back);
  color: var(--clr-accent);
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

li {
  list-style: none;
}

.team-title {
  margin: auto;
  font-size: 4rem;
}

.article-txt ul > li,
.team-txt ul > li,
.platform-box ul > li {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1rem;
  padding-bottom: 0.5rem;
}

.platform-box:nth-of-type(1) li {
  color: white;
}

.team-txt ul > li > ul > li {
  list-style-type: none;
  padding-bottom: 0;
}

.team-txt h3 {
  font-weight: bold;
}

/* Fonts Sizes */
:is(h1, h2, h3, h4, .ct-grid) {
  line-height: 1.1em;
}

h1 {
  font-weight: 750;
  font-size: var(--font-huge);
}

h2 {
  font-weight: 675;
  font-size: var(--font-large);
}

h3 {
  font-weight: 600;
  font-size: var(--font-medium);
}

h4 {
  font-weight: 550;
  font-size: var(--font-small);
}

p,
ul li {
  font-weight: 400;
  font-family: var(--typeface-b);
  color: var(--clr-txt-body);
  font-size: var(--font-small);
}

.ct-grid p {
  font-size: var(--font-small);
}

.main-menu a > h2 {
  font-size: var(--font-small);
}

.ct-list li {
  font-weight: 600;
  font-size: var(--font-large);
  color: var(--clr-accent);
}

/* Typefaces */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "Exo2";
  src: url("/fonts/Exo2-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "OpenSans";
  src: url("/fonts/OpenSans-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: "Raleway";
  src: url("/fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
  font-weight: 1 999;
}

/*Selector Grouping Padding/Margins*/
.skip-nav-link,
ul.breadcrumb,
.main-hero-title {
  padding: 0.45em 0.75em;
}

* + .main-content {
  margin-bottom: 2rem;
}

.main-content
  *
  + *:not(.platform-grid > p, .team-txt, .ct-grid *, .img-grid *, li) {
  margin-top: 2rem;
}

.main-content * * * + *:not(.ct-grid *, .img-grid *, li),
.breadcrumb {
  margin-top: 1rem;
}

/* Variables */
:root {
  --typeface-h: "Exo2", "ariel", sans-serif;
  --typeface-b: "Exo2", "ariel", sans-serif;
  --font-huge: clamp(2.3rem, 5vw, 4rem);
  --font-large: clamp(1.3rem, 4.5vw, 2rem);
  --font-medium: clamp(1.1rem, 2.5vw, 1.3rem);
  --font-small: clamp(0.9rem, 2vw, 1.1rem);
  --font-tiny: clamp(0.7rem, 1.3vw, 0.9rem);
  --clr-txt-heading: hsl(40, 5%, 10%);
  --clr-txt-body: hsl(40, 5%, 30%);
  --clr-txt-faded: hsl(48, 2%, 47%);
  --clr-fore: hsl(0, 0%, 100%);
  --clr-back: hsla(40, 5%, 93%, 1);
  --clr-accent: #000000;
}

/* Utility Classes */

.bold {
  font-weight: bold;
}

blockquote {
  position: relative;
  margin-inline: 1em;
  padding: 1em;
  color: var(--clr-txt-faded);
}

.time-stamp {
  color: var(--clr-txt-faded);
  font-size: var(--font-tiny);
}

blockquote::before {
  opacity: 0.7;
  content: open-quote;
  position: absolute;
  color: var(--clr-accent);
  font-size: 9em;
  left: -0.2em;
  top: 0.24em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow-x: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.dropcap:first-letter {
  color: var(--clr-accent);
  float: left;
  font-size: 4em;
  line-height: 0.3;
  margin: 0.1em 0.1em 0.2em 0;
}

blockquote {
  position: relative;
  margin-inline: 1em;
  padding: 1em;
  color: var(--clr-txt-faded);
}

.flex-center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

hr {
  border: 0;
  grid-column: 1 / -1;
  background-color: var(--clr-back);
  clear: both;
  height: 2px;
}

.fade-in {
  opacity: 0;
  transition: opacity 1000ms ease-in 500ms;
}

.fade-in.appear {
  opacity: 1;
}

.slide-x {
  opacity: 0;
  transform: translateX(-3%);
  transition: opacity 1000ms ease-in 500ms, transform 1000ms ease-in-out 500ms;
}

.slide-x.appear {
  opacity: 1;
  transform: translateX(0);
}

.slide-y {
  opacity: 0;
  transform: translateY(-3%);
  transition: opacity 1000ms ease-in 500ms, transform 1000ms ease-in-out 500ms;
}

.slide-y.appear {
  opacity: 1;
  transform: translateY(0);
}

.links:link {
  color: #313ba9;
}

.link:visited,
.link:focus,
.links:hover {
  color: #7377a8;
}

/* General Styles */

/* Main Grid Level 2 */
.logo-large,
.main-header,
.main-content,
.main-footer {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: 1fr min(65rem, calc(100% - 2rem)) 1fr;
  grid-column-gap: 1rem;
}

@supports (grid-template-columns: subgrid) {
  .main-header,
  .main-content,
  .main-footer {
    grid-template-columns: subgrid;
  }
}
.main-header > *,
.main-content > *,
.main-footer > * {
  grid-column: 2;
}

.main-header > .reading-bar {
  grid-column: 1 / -1;
}

.main-content > .full-bleed {
  grid-column: 1 / -1;
}

/* Main Header / Navigation */
.section-header {
  height: 5px;
  position: absolute;
  background-color: transparent;
  z-index: -10;
  top: 0;
}

.skip-nav-link {
  position: absolute;
  transform: translateY(-170%);
  transition: transform 300ms ease;
  background-color: var(--clr-fore);
  z-index: 20;
  overflow-x: hidden;
}

.skip-nav-link:focus {
  color: var(--clr-txt-heading);
  transform: translateY(0);
}

.main-header {
  position: sticky;
  background-color: #fafafa;
  top: 0;
  z-index: 10;
  width: 100%;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  transition: all 300ms ease;
}

.main-header .wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo-small {
  width: 160px;
  opacity: 1;
  transition: all 300ms cubic-bezier(0.18, 0.06, 0.4, 1.95);
}

.logo-small-scrolled {
  width: 130px;
}

.lang-switch {
  font-size: var(--font-large);
}

.lang-switch a + a::before {
  content: "|\00a0";
  color: var(--clr-txt-faded);
}

.lang-active,
.lang-active:hover {
  color: var(--clr-accent);
  user-select: none;
}

.main-menu-checkbox {
  display: none;
}

.menu-toggle {
  overflow-x: hidden;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.menu-toggle .ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms ease;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.menu-toggle .hamRotate.active {
  transform: rotate(45deg);
}

.menu-toggle .hamRotate180.active {
  transform: rotate(180deg);
}

.menu-toggle .line {
  fill: none;
  transition: stroke-dasharray 300ms ease, stroke-dashoffset 300ms ease;
  stroke: var(--clr-txt-heading);
  stroke-width: 7;
  stroke-linecap: round;
}

.menu-toggle .ham .top {
  stroke-dasharray: 40 121;
}

.menu-toggle .ham .bottom {
  stroke-dasharray: 40 121;
}

.menu-toggle .ham.active .top {
  stroke-dashoffset: -68px;
}

.menu-toggle .ham.active .bottom {
  stroke-dashoffset: -68px;
}

.main-menu {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  background-color: var(--clr-back);
  text-align: center;
  align-content: center;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 300ms ease-out;
}

.main-menu li {
  margin-block: 2.5rem;
}

.main-menu a {
  position: relative;
  opacity: 0;
  transition: opacity 25ms ease-out, color 300ms ease-out;
}

.main-menu-checkbox:checked ~ .main-menu {
  transform: scale(1, 1);
  transition: transform 300ms ease-out;
}

.main-menu-checkbox:checked ~ .main-menu a {
  opacity: 1;
  transition: opacity 150ms ease 150ms;
}

.reading-bar {
  position: absolute;
  bottom: -3px;
  height: 3px;
  width: 0;
  z-index: 20;
  background-image: linear-gradient(
    to right,
    var(--clr-fore),
    var(--clr-accent)
  );
  transition: width 300ms ease-out;
}

/* Hero Image */

.main-hero,
.team-hero,
.platform-hero,
.pipeline-hero,
.news-hero,
.blog-hero,
.article-hero {
  text-transform: uppercase;
  font-style: italic;
  background-size: cover;
  background-repeat: no-repeat;
  height: 70vh;
  width: 100%;
}

.main-hero-title,
.team-hero-title,
.platform-hero-title,
.pipeline-hero-title,
.news-hero-title,
.blog-hero-title,
.article-hero-title {
  padding-inline: 2rem;
  max-width: 14ch;
  color: var(--clr-back);
  text-shadow: 0 0 10px black;
}

.main-hero {
  background-image: url("/img/mainhero.webp");
  background-position: 50% 87%;
}

.team-hero {
  background-image: url("/img/teamhero.webp");
  background-position: 50% 65%;
}

.ppa {
  font-size: var(--font-huge);
}

.team-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

hr + .team-txt {
  margin-top: 2.5rem;
}

.team-img-size {
  object-fit: cover;
  width: 230px;
  height: 230px;
}

.platform-hero {
  background-image: url("/img/platformhero.webp");
  background-position: 50% 60%;
}

.pipeline-hero {
  background-image: url("/img/pipelinehero.webp");
  background-position: 50% 68%;
}

.platform-grid > h2 {
  text-transform: uppercase;
}

.platform-grid {
  display: grid;
  justify-items: center;
}

.platform-box {
  max-width: 350px;
  min-width: 150px;
  background-color: rgba(0, 0, 0, 0.882);
  padding: 1rem;
  font-size: x-large;
}

.platform-box > h3 {
  color: #fdfcfc;
  text-align: center;
}

.platform-grid .platform-box:nth-child(2 of .platform-box) {
  border: 2px solid black;
  background-color: rgb(255, 255, 255);
}

.platform-grid .platform-box:nth-child(2 of .platform-box) > * {
  color: black;
}

.news-hero {
  background-image: url("/img/newshero.webp");
  background-position: 50% 50%;
}

.blog-hero {
  background-image: url("/img/bloghero.webp");
  background-position: 50% 50%;
}

.article-hero {
  background-image: url("/img/articlehero.webp");
  background-position: 50% 50%;
}

/* Homepage Article */
.article-title.slide-y {
  transform: translateY(3%);
}

.article-title.slide-y.appear {
  transform: translateY(0);
}

/* Clinical Trials, Grids, Counters and Bars */
.ct-list {
  display: grid;
  grid-template-columns: auto 4rem auto;
  row-gap: 1rem;
}

.ct-list > li:nth-child(odd) {
  grid-column: 1;
}

.ct-list > li:nth-child(even) {
  grid-column: 3;
}

.ct-grid {
  display: grid;
  column-gap: 1.5rem;
  grid-template-columns: repeat(3, auto);
  align-items: start;
}

.ct-grid > .fill-row {
  background-color: rgb(250, 250, 250);
  grid-column: 1 / 3;
}

.ct-grid > * {
  display: flex;
  padding-block: 0.5rem;
}

.ct-grid-heading {
  align-items: center;
}

.ct-trial-txt,
.ct-hospital-txt {
  padding-left: 0.5rem;
}

.ct-trial-txt > p {
  font-weight: 550;
}

.ct-grid > .ct-grid-heading:nth-child(1),
.ct-grid > .ct-trial-txt {
  grid-column: 1;
}

.ct-grid > .ct-grid-heading:nth-child(2),
.ct-grid > .ct-hospital-txt {
  grid-column: 2;
}

.ct-grid > .ct-grid-heading:nth-child(n + 3) {
  grid-column: 3;
  display: none;
}

.ct-grid > .ct-grid-heading:nth-child(-n + 3) {
  grid-row: 1;
}

.ct-grid > .ct-grid-heading:nth-child(n + 4) {
  background-color: rgb(250, 250, 250);
  padding-inline: 0.3rem;
}

.ct-grid > .ct-trial-txt:nth-child(1 of .ct-trial-txt) {
  grid-row: 3;
}

.ct-grid > .ct-hospital-txt:nth-child(1 of .ct-hospital-txt) {
  grid-row: 3;
}

.ct-grid > .ct-trial-txt:nth-child(2 of .ct-trial-txt) {
  grid-row: 5;
}

.ct-grid > .ct-hospital-txt:nth-child(2 of .ct-hospital-txt) {
  grid-row: 5;
}

.ct-grid > .ct-trial-txt:nth-child(3 of .ct-trial-txt) {
  grid-row: 7;
}

.ct-grid > .ct-hospital-txt:nth-child(3 of .ct-hospital-txt) {
  grid-row: 7;
}

.ct-grid > .ct-progress-bar {
  position: relative;
  grid-column: 3;
}

.ct-grid > .ct-progress-bar:nth-child(1 of .ct-progress-bar) {
  grid-row: 3;
}
.ct-grid > .ct-progress-bar:nth-child(2 of .ct-progress-bar) {
  grid-row: 5;
}
.ct-grid > .ct-progress-bar:nth-child(3 of .ct-progress-bar) {
  grid-row: 7;
}
.ct-grid > .ct-progress-bar:nth-child(4 of .ct-progress-bar) {
  grid-row: 9;
}
.ct-grid > .ct-progress-bar:nth-child(5 of .ct-progress-bar) {
  grid-row: 11;
}

.ct-grid > .ct-progress-bar > *::before,
.ct-progress-bar > *::after {
  position: absolute;
  height: 1.5rem;
  content: "";
}

.ct-grid > .ct-progress-bar > *::before {
  background-color: rgb(245, 245, 245);
  width: 100%;
}

.ct-grid > .ct-progress-bar > .published-bar::after {
  width: 100%;
  background-color: rgb(36, 235, 139);
  animation: grow1 4000ms ease-in 0ms;
}

.ct-grid > .ct-progress-bar > .completed-bar::after {
  width: 73%;
  background-color: rgb(50, 184, 119);
  animation: grow2 5000ms ease-in 0ms;
}

.ct-grid > .ct-progress-bar > .active-bar::after {
  width: 42%;
  background-color: rgb(34, 103, 70);
  animation: grow3 6000ms ease-in 0ms;
}

.ct-grid > .ct-progress-bar > .discovery-bar::after {
  width: 22%;
  background-color: rgb(25, 64, 44);
  animation: grow4 7000ms ease-in 0ms;
}

.ct-grid > .ct-progress-bar > .placeholder-bar::after {
  width: 1.5%;
  background-color: rgb(34, 34, 34);
  animation: shrink 2000ms cubic-bezier(0.42, 0, 0.58, 1.36) 0ms;
}

@keyframes shrink {
  from {
    width: 30%;
  }

  to {
    width: 1.5%;
  }
}

@keyframes grow1 {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes grow2 {
  from {
    width: 0%;
  }

  to {
    width: 73%;
  }
}

@keyframes grow3 {
  from {
    width: 0%;
  }

  to {
    width: 42%;
  }
}

@keyframes grow4 {
  from {
    width: 0%;
  }

  to {
    width: 22%;
  }
}

.img-grid {
  display: grid;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  grid-template-columns: repeat(2, auto);
  align-items: center;
}

/* Sticky footer stuck to bottom of page using flex and height 100% in body */
.main-footer {
  background-color: var(--clr-back);
  margin-block-start: auto;
  width: 100%;
  text-align: center;
  padding-block: 3rem;
}

.main-footer > ul {
  display: flex;
  justify-content: center;
}

.main-footer > ul > li {
  font-size: var(--font-tiny);
  padding-inline: 0.5rem;
  position: relative;
}

.main-footer > ul > li:nth-child(1):after {
  content: "";
  position: absolute;
  top: 20%;
  right: -1%;
  height: 75%;
  width: 1.2px;
  background-color: grey;
}

.e404-svg {
  width: 80%;
  padding-block: 2rem;
}

/*Desktop Layout*/
@media screen and (min-width: 45em) {
  /*Selector Grouping Padding/Margins*/
  * + .main-content {
    margin-bottom: 3rem;
  }

  .main-content
    *
    + *:not(
      .platform-grid > p,
      .team-txt,
      .team-txt h4,
      .ct-grid *,
      .img-grid *,
      li
    ) {
    margin-top: 3rem;
  }

  .main-content * * * + *:not(.team-txt h4, .ct-grid *, li),
  .breadcrumb {
    margin-top: 1.5rem;
  }

  .main-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .logo-large {
    display: flex;
    margin-inline: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 200px;
    transition: all 600ms ease-out;
  }

  .logo-large-scrolled {
    opacity: 0;
  }

  .logo-small {
    width: 125px;
    opacity: 0;
    transition: all 800ms ease-out;
  }

  .logo-small-scrolled {
    opacity: 1;
  }

  .main-menu-checkbox,
  .menu-toggle {
    display: none;
  }

  .main-menu {
    all: unset;
    display: flex;
    text-align: center;
    align-content: center;
    transition: all 600ms;
  }

  .main-menu a {
    opacity: 1;
  }

  .main-menu a::before {
    top: -0.4em;
    left: 0;
    rotate: 0deg;
    transform: scale(0, 1);
  }

  .main-menu a:hover::before {
    transform: scale(1, 1);
  }

  .main-menu ul {
    display: flex;
    align-items: center;
  }

  .main-menu li {
    padding-inline-start: 4em;
    margin-block: 0;
  }

  .main-menu-checkbox:checked ~ .main-menu {
    transform: scale(1, 1);
  }

  .lang-switch {
    margin-bottom: 0;
    font-size: var(--font-small);
  }

  .main-hero,
  .platform-hero,
  .team-hero,
  .news-hero,
  .pipeline-hero,
  .blog-hero,
  .article-hero {
    height: 80vh;
  }

  .main-hero-title,
  .team-hero-title,
  .platform-hero-title,
  .pipeline-hero-title,
  .news-hero-title,
  .blog-hero-title,
  .article-hero-title {
    max-width: 20ch;
  }

  .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ct-list {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    column-gap: 4rem;
  }

  .ct-list > li:nth-child(odd) {
    grid-column: auto;
    grid-row: 2;
  }

  .ct-list > li:nth-child(even) {
    grid-column: auto;
    grid-row: 1;
  }

  .ct-grid {
    column-gap: 4rem;
    row-gap: 1rem;
    grid-template-columns: repeat(6, auto);
  }

  .ct-grid > .fill-row {
  }

  .ct-grid > .ct-grid-heading:nth-child(n + 3) {
    grid-column: 3;
    display: inline;
  }

  .ct-grid > .ct-grid-heading:nth-child(3) {
    display: none;
  }

  .ct-grid > .ct-grid-heading:nth-child(4) {
    grid-column: 6;
  }

  .ct-grid > .ct-grid-heading:nth-child(5) {
    grid-column: 5;
  }

  .ct-grid > .ct-grid-heading:nth-child(6) {
    grid-column: 4;
  }

  .ct-grid > .ct-grid-heading:nth-child(7) {
    grid-column: 3;
  }

  .ct-grid > .ct-grid-heading:nth-child(n) {
    grid-row: 1;
    background-color: white;
  }

  .ct-grid > .ct-progress-bar {
    grid-column: 3 / 7;
    top: 0;
  }

  .ct-grid > .ct-progress-bar > *::before,
  .ct-progress-bar > *::after {
    height: 2rem;
  }

  .ct-progress-bar:nth-child(1) {
    grid-row: 2;
  }
  .ct-progress-bar:nth-child(2) {
    grid-row: 3;
  }
  .ct-progress-bar:nth-child(3) {
    grid-row: 4;
  }
  .ct-progress-bar:nth-child(4) {
    grid-row: 5;
  }
  .ct-progress-bar:nth-child(5) {
    grid-row: 6;
  }

  .article-txt {
    grid-column: 1 / 3;
  }

  .article-img {
    grid-column: 2 / 4;
  }

  .article-img-size {
    object-fit: cover;
    width: 1080;
    height: 720;
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3.5rem;
  }

  .team-grid > hr {
    display: none;
  }

  hr + .team-txt {
    margin-top: 0;
  }

  .team-txt {
    display: inline;
  }

  .team-img-size {
    object-fit: cover;
    width: 275px;
    height: 275px;
  }

  .platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .platform-grid > h2 {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .platform-grid > p {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 1rem;
  }

  .platform-box {
    grid-row: 3;
  }
}