:root {

  /* colors */
  --color-white: #fff;
  --color-black: #000;
  --color-off-white: #fefff6;
  --color-teal-deep: #0e4d47;
  --color-lime-soft: #dde675;
  --color-lime-pale: #faffbd;
  --color-lime-muted: #dde575;
  --color-blue-strong: #1c458d;
  --color-blue-muted: #aabae0;
  --color-blue-soft: #c6ddf0;
  --color-magenta-accent: #ff00c3;
  --color-error: #df0004;
  --color-blue-muted-75: rgba(170, 186, 224, 0.75);
  --color-blue-muted-38: rgba(170, 186, 224, 0.38);
  --color-magenta-accent-50: rgba(255, 0, 195, 0.5);
  --color-teal-deep-35: rgba(14, 77, 71, 0.35);
  --color-teal-deep-15: rgba(14, 77, 71, 0.15);
  --color-lime-soft-95: rgba(221, 230, 117, 0.95);
  --color-lime-soft-55: rgba(221, 230, 117, 0.55);

  /* fonts */
  --default-font-family: figtree, figtree-fallback, sans-serif;
  --heading-font-family: rubik, rubik-fallback, sans-serif;
  --roboto-font-family: roboto, roboto-fallback, sans-serif;

  /* font-weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  /* --font-weight-bold: 700; */
  --font-weight-bold: 600;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* sizes (desktop) */
  --display-header-1-size: 4.6875rem; /* 75px */
  --display-header-2-size: 2.625rem;  /* 42px */
  --heading-h1-size: 2.5rem;          /* 40px */
  --heading-h2-size: 2.1875rem;       /* 35px */
  --heading-h3-size: 1.875rem;        /* 30px */
  --heading-h4-size: 1.5625rem;       /* 25px */
  --heading-h5-size: 0.875rem;        /* 14px */
  --body-l-size: 1.25rem;             /* 20px */
  --body-m-size: 1.125rem;            /* 18px */
  --body-s-size: 1rem;                /* 16px */
  --caption-size: 0.75rem;            /* 12px */
  --eyebrow-size: 1rem;               /* 16px */
  --default-size: 1rem;               /* 16px */
  --bodycopy-size: 1rem;              /* 16px */
  --footnote-size: 0.8125rem;         /* 13px */
  --formcopy-size: 1rem;              /* 16px */
  --errormessage-size: 1rem;          /* 16px */
  --button-size: 1rem;                /* 16px */
  --navigationlink-size: 1rem;        /* 16px */
  --banner-1-size: 1.4375rem;         /* 23px */
  --banner-2-size: 1.4375rem;         /* 23px */
  --disclaimer-1-size: 0.875rem;      /* 14px */
  --disclaimer-2-size: 0.875rem;      /* 14px */
  --call-to-action-size: 1.5rem;      /* 24px */
  --callout-size: 1.75rem;            /* 28px */
  --banner-3-size: 1.0625rem;         /* 17px */
  --banner-4-size: 1rem;              /* 16px */

}

@media (width < 1200px) {
  :root {

    --header-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #DCDCDC 100%);

    /* sizes (mobile) */
    --display-header-1-size: 3rem;        /* 48px */
    --display-header-2-size: 2.5rem;      /* 40px */
    --heading-h1-size: 2.1875rem;         /* 35px */
    --heading-h2-size: 1.875rem;          /* 30px */
    --heading-h3-size: 1.5625rem;         /* 25px */
    --heading-h4-size: 1.375rem;          /* 22px */
    --heading-h5-size: 0.875rem;          /* 14px */
    --body-l-size: 1.25rem;               /* 20px */
    --body-m-size: 1.125rem;              /* 18px */
    --body-s-size: 1rem;                  /* 16px */
    --caption-size: 0.75rem;              /* 12px */
    --eyebrow-size: 1rem;                 /* 16px */
    --default-size: 1rem;                 /* 16px */
    --bodycopy-size: 1rem;                /* 16px */
    --footnote-size: 0.8125rem;           /* 13px */
    --formcopy-size: 1rem;                /* 16px */
    --errormessage-size: 1rem;            /* 16px */
    --button-size: 1rem;                  /* 16px */
    --navigationlink-size: 1rem;          /* 16px */
    --banner-1-size: 1.5625rem;           /* 25px */
    --banner-2-size: 1.125rem;            /* 18px */
    --disclaimer-1-size: 0.625rem;        /* 10px */
    --disclaimer-2-size: 0.875rem;        /* 14px */
    --call-to-action-size: 1.5rem;        /* 24px */
    --callout-size: 1.125rem;             /* 18px */
    --banner-3-size: 1rem;                /* 16px */
    --banner-4-size: 1rem;                /* 16px */
  }
}

/* fallback fonts */
@font-face {
  font-family: figtree-fallback;
  size-adjust: 100%;
  src: local('Arial');
}

@font-face {
  font-family: rubik-fallback;
  size-adjust: 100%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 100.145%;
  src: local('Arial');
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-break: break-word;
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-off-white);
  color: var(--color-black);
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--default-size);
}

html {
  scroll-behavior: smooth;
}

body.appear {
  display: block;
}

main {
  padding-top: var(--header-offset, 0);
}

.display-header-1 {
  font-family: var(--default-font-family);
  font-size: var(--display-header-1-size);
  font-weight: var(--font-weight-semibold);
}

.display-header-2 {
  font-family: var(--default-font-family);
  font-size: var(--display-header-2-size);
  font-weight: var(--font-weight-regular);
}

h1 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h1-size);
  font-weight: var(--font-weight-semibold);
}

h2 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h2-size);
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h3-size);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h4-size);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-family: var(--default-font-family);
  font-size: var(--heading-h5-size);
  font-weight: var(--font-weight-regular);
}

.body-l {
  font-family: var(--default-font-family);
  font-size: var(--body-l-size);
  font-weight: var(--font-weight-regular);
}

.body-m {
  font-family: var(--default-font-family);
  font-size: var(--body-m-size);
  font-weight: var(--font-weight-regular);
}

.body-s {
  font-family: var(--default-font-family);
  font-size: var(--body-s-size);
  font-weight: var(--font-weight-regular);
}

.caption {
  font-family: var(--default-font-family);
  font-size: var(--caption-size);
  font-weight: var(--font-weight-medium);
}

li::marker {
  color: var(--color-black);
}

.eyebrow {
  font-family: var(--default-font-family);
  font-size: var(--eyebrow-size);
  font-weight: var(--font-weight-regular);
}

.bodycopy {
  font-family: var(--default-font-family);
  font-size: var(--bodycopy-size);
  font-weight: var(--font-weight-regular);
}

.footnote {
  font-family: var(--default-font-family);
  font-size: var(--footnote-size);
  font-weight: var(--font-weight-regular);
}

.formcopy {
  font-family: var(--default-font-family);
  font-size: var(--formcopy-size);
  font-weight: var(--font-weight-regular);
}

.errormessage {
  font-family: var(--default-font-family);
  font-size: var(--errormessage-size);
  font-weight: var(--font-weight-regular);
  color: var(--color-error);
}

.button {
  font-family: var(--default-font-family);
  font-size: var(--button-size);
  font-weight: var(--font-weight-bold);
}

.link {
  font-family: var(--default-font-family);
  font-size: var(--navigationlink-size);
  font-weight: var(--font-weight-regular);
}

.banner-1 {
  font-family: var(--default-font-family);
  font-size: var(--banner-1-size);
  font-weight: var(--font-weight-regular);
}

.banner-2 {
  font-family: var(--default-font-family);
  font-size: var(--banner-2-size);
  font-weight: var(--font-weight-regular);
}

.disclaimer-1 {
  font-family: var(--default-font-family);
  font-size: var(--disclaimer-1-size);
  font-weight: var(--font-weight-regular);
}

.disclaimer-2 {
  font-family: var(--default-font-family);
  font-size: var(--disclaimer-2-size);
  font-weight: var(--font-weight-regular);
}

.call-to-action {
  font-family: var(--default-font-family);
  font-size: var(--call-to-action-size);
  font-weight: var(--font-weight-regular);
}

.callout {
  font-family: var(--default-font-family);
  font-size: var(--callout-size);
  font-weight: var(--font-weight-regular);
}

.banner-1 {
  font-family: var(--default-font-family);
  font-size: var(--banner-1-size);
  font-weight: var(--font-weight-regular);
}

.banner-2 {
  font-family: var(--default-font-family);
  font-size: var(--banner-2-size);
  font-weight: var(--font-weight-regular);
}

.banner-3 {
  font-family: var(--default-font-family);
  font-size: var(--banner-3-size);
  font-weight: var(--font-weight-regular);
}

.banner-4 {
  font-family: var(--default-font-family);
  font-size: var(--banner-4-size);
  font-weight: var(--font-weight-regular);
}

@media (width < 1200px) {
  .display-header-1 {
    font-size: 3rem; /* 48px */
  }

  .display-header-2 {
    font-size: 2.5rem; /* 40px */
  }

  h1 {
    font-size: 2.1875rem; /* 35px */
  }

  h2 {
    font-size: 1.875rem; /* 30px */
  }

  h3 {
    font-size: 1.5625rem; /* 25px */
  }

  h4 {
    font-size: 1.375rem; /* 22px */
  }

  h5 {
    font-size: 0.875rem; /* 14px */
  }

  .body-l {
    font-size: 1.25rem; /* 20px */
  }

  .body-m {
    font-size: 1.125rem; /* 18px */
  }

  .body-s {
    font-size: 1rem; /* 16px */
  }

  .caption {
    font-size: 0.75rem; /* 12px */
  }

  main > .section > div {
    margin: 0 20px;
  }

  main > .section {
   overflow: hidden;
  }
}

@media (width < 768px) {
  body {
    background-color: transparent;
  }
}