:root {
    --title-hero-size: clamp(calc(var(--title-hero-min-size) * 1px),
      calc(var(--title-hero-min-size) * 1px + (var(--title-hero-max-size) - var(--title-hero-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--title-hero-max-size) * 1px));
    --title-page-size: clamp(calc(var(--title-page-min-size) * 1px),
      calc(var(--title-page-min-size) * 1px + (var(--title-page-max-size) - var(--title-page-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--title-page-max-size) * 1px));
    --subtitle-size: clamp(calc(var(--subtitle-min-size) * 1px),
      calc(var(--subtitle-min-size) * 1px + (var(--subtitle-max-size) - var(--subtitle-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--subtitle-max-size) * 1px));
    --heading-size: clamp(calc(var(--heading-min-size) * 1px),
      calc(var(--heading-min-size) * 1px + (var(--heading-max-size) - var(--heading-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--heading-max-size) * 1px));  
    --subheading-size: clamp(calc(var(--subheading-min-size) * 1px),
      calc(var(--subheading-min-size) * 1px + (var(--subheading-max-size) - var(--subheading-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--subheading-max-size) * 1px));
    --small-heading-size: clamp(calc(var(--small-heading-min-size) * 1px),
      calc(var(--small-heading-min-size) * 1px + (var(--small-heading-max-size) - var(--small-heading-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--small-heading-max-size) * 1px));
    --small-subheading-size: clamp(calc(var(--small-subheading-min-size) * 1px),
      calc(var(--small-subheading-min-size) * 1px + (var(--small-subheading-max-size) - var(--small-subheading-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--small-subheading-max-size) * 1px));
    --body-base-resp-size: clamp(calc(var(--body-fluid-min-size) * 1px),
      calc(var(--body-fluid-min-size) * 1px + (var(--body-fluid-max-size) - var(--body-fluid-min-size)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--body-fluid-max-size) * 1px));
    
      /* Fluid Line Heights */
    --title-hero-line-height: clamp(calc(var(--title-hero-line-height-min) * 1px),
      calc(var(--title-hero-line-height-min) * 1px + (var(--title-hero-line-height-max) - var(--title-hero-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--title-hero-line-height-max) * 1px));
    --title-page-line-height: clamp(calc(var(--title-page-line-height-min) * 1px),
      calc(var(--title-page-line-height-min) * 1px + (var(--title-page-line-height-max) - var(--title-page-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--title-page-line-height-max) * 1px));
    --subtitle-line-height: clamp(calc(var(--subtitle-line-height-min) * 1px),
      calc(var(--subtitle-line-height-min) * 1px + (var(--subtitle-line-height-max) - var(--subtitle-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--subtitle-line-height-max) * 1px));
    --heading-line-height: clamp(calc(var(--heading-line-height-min) * 1px),
      calc(var(--heading-line-height-min) * 1px + (var(--heading-line-height-max) - var(--heading-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--heading-line-height-max) * 1px));
    --subheading-line-height: clamp(calc(var(--subheading-line-height-min) * 1px),
      calc(var(--subheading-line-height-min) * 1px + (var(--subheading-line-height-max) - var(--subheading-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--subheading-line-height-max) * 1px));
    --small-heading-line-height: clamp(calc(var(--small-heading-line-height-min) * 1px),
      calc(var(--small-heading-line-height-min) * 1px + (var(--small-heading-line-height-max) - var(--small-heading-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--small-heading-line-height-max) * 1px));
    --small-subheading-line-height: clamp(calc(var(--small-subheading-line-height-min) * 1px),
      calc(var(--small-subheading-line-height-min) * 1px + (var(--small-subheading-line-height-max) - var(--small-subheading-line-height-min)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--small-subheading-line-height-max) * 1px));
    --body-line-height-resp: clamp(calc(var(--body-line-height-small) * 1px),
      calc(var(--body-line-height-small) * 1px + (var(--body-line-height-base) - var(--body-line-height-small)) * ((100vw - var(--alpha-fluid-min-width) * 1px) / (var(--alpha-fluid-max-width) - var(--alpha-fluid-min-width)))),
      calc(var(--body-line-height-base) * 1px));
}

/* =============================================================================
     CSS CLASSES FOR EACH TYPOGRAPHY STYLE
============================================================================= */

/* Title Hero */
.title-hero,
.title-hero h1,
.title-hero h2,
.title-hero h3,
.title-hero h4,
.title-hero h5,
.title-hero h6,
.title-hero p {
  font-family: var(--title-hero-font-family);
  font-size: var(--title-hero-size);
  font-weight: var(--title-hero-font-weight);
  line-height: var(--title-hero-line-height);
  letter-spacing: var(--title-hero-letter-spacing);
}

/* Title Page */
.title-page,
.title-page h1,
.title-page h2,
.title-page h3,
.title-page h4,
.title-page h5,
.title-page h6,
.title-page p {
  font-family: var(--title-page-font-family);
  font-size: var(--title-page-size);
  font-weight: var(--title-page-font-weight);
  line-height: var(--title-page-line-height);
  letter-spacing: var(--title-page-letter-spacing);
}

/* Subtitle */
.subtitle,
.subtitle h1,
.subtitle h2,
.subtitle h3,
.subtitle h4,
.subtitle h5,
.subtitle h6,
.subtitle p {
  font-family: var(--subtitle-font-family);
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-font-weight);
  line-height: var(--subtitle-line-height);
  letter-spacing: var(--subtitle-letter-spacing);
}

/* Heading */
.heading,
.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5,
.heading h6,
.heading p,
.heading span {
  font-family: var(--heading-font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

/* Subheading */
.subheading,
.subheading h1,
.subheading h2,
.subheading h3,
.subheading h4,
.subheading h5,
.subheading h6,
.subheading p {
  font-family: var(--subheading-font-family);
  font-size: var(--subheading-size);
  font-weight: var(--subheading-font-weight);
  line-height: var(--subheading-line-height);
  letter-spacing: var(--subheading-letter-spacing);
}

/* Small Heading */
.small-heading,
.small-heading h1,
.small-heading h2,
.small-heading h3,
.small-heading h4,
.small-heading h5,
.small-heading h6,
.small-heading p {
  font-family: var(--small-heading-font-family);
  font-size: var(--small-heading-size);
  font-weight: var(--small-heading-font-weight);
  line-height: var(--small-heading-line-height);
  letter-spacing: var(--small-heading-letter-spacing);
}

/* Small subheading */
.small-subheading,
.small-subheading h1,
.small-subheading h2,
.small-subheading h3,
.small-subheading h4,
.small-subheading h5,
.small-subheading h6,
.small-subheading p {
  font-family: var(--small-subheading-font-family);
  font-size: var(--small-subheading-size);
  font-weight: var(--small-subheading-font-weight);
  line-height: var(--small-subheading-line-height);
  letter-spacing: var(--small-subheading-letter-spacing);
}

/* Body Medium (Regular Weight) */
.body-base,
.body-base p,
.body-base h2,
.body-base h3,
.body-base h4,
.body-base div,
.body-base span,
.body-base a,
.body-base ul li,
.body-base ol li,
.body-base-strong,
.body-base-strong p,
.body-base-strong a,
.body-base-strong h2,
.body-base-strong h3,
.body-base-strong h4,
.body-base-strong span {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-base) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-line-height-base)*1px);
  letter-spacing: var(--body-letter-spacing);
}
.body-base-resp,
.body-base-resp p,
.body-base-resp a,
.body-base-resp h2,
.body-base-resp h3,
.body-base-resp h4,
.body-base-resp div,
.body-base-resp span,
.body-base-resp ul li,
.body-base-resp ol li {
	font-family: var(--body-font-family);
  font-size: var(--body-base-resp-size);
  font-weight: var(--body-font-weight-regular);
  line-height: var(--body-line-height-resp);
  letter-spacing: var(--body-letter-spacing);	
}
/* Body Medium Strong */
.body-base-strong,
.body-base-strong p,
.body-base-strong a,
.body-base-strong h2,
.body-base-strong h3,
.body-base-strong h4,
.body-base-strong span {
  font-weight: var(--body-font-weight-strong);
}

/* Body Small (Regular Weight) */
.body-small,
.body-small p,
.body-small a,
.body-small h2,
.body-small h3,
.body-small h4,
.body-small div,
.body-small span,
.body-small-strong,
.body-small-strong p,
.body-small-strong h2,
.body-small-strong h3,
.body-small-strong h4,
.body-small-strong span {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-small) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-line-height-small)*1px);
  letter-spacing: var(--body-letter-spacing);
}

/* Body Small Strong */
.body-small-strong,
.body-small-strong p,
.body-small-strong a,
.body-small-strong h2,
.body-small-strong h3,
.body-small-strong h4,
.body-small-strong span {
  font-weight: var(--body-font-weight-strong);
}

/* Single line base */
.single-line-body-base,
.single-line-body-base h2,
.single-line-body-base h3,
.single-line-body-base h4,
.single-line-body-base h5,
.single-line-body-base h6,
.single-line-body-base p,
.single-line-body-base a,
.single-line-body-base-strong,
.single-line-body-base-strong h2,
.single-line-body-base-strong h3,
.single-line-body-base-strong h4,
.single-line-body-base-strong h5,
.single-line-body-base-strong h6,
.single-line-body-base-strong a,
.single-line-body-base-strong p{
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-base) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-size-base) * 1px)!important;
  letter-spacing: var(--body-letter-spacing);
}

/* Single line base Strong */
.single-line-body-base-strong,
.single-line-body-base-strong h2,
.single-line-body-base-strong h3,
.single-line-body-base-strong h4,
.single-line-body-base-strong h5,
.single-line-body-base-strong h6,
.single-line-body-base-strong p,
.single-line-body-base-strong a {
  font-weight: var(--body-font-weight-strong);
}

.single-line-body-small-strong,
.single-line-body-small-strong h2,
.single-line-body-small-strong h3,
.single-line-body-small-strong h4,
.single-line-body-small-strong h5,
.single-line-body-small-strong h6,
.single-line-body-small-strong p,
.single-line-body-small-strong a {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-small) * 1px);
  font-weight: var(--body-font-weight-strong);
  line-height: calc(var(--body-size-small) * 1px)!important;
  letter-spacing: var(--body-letter-spacing);
}

/* ======================== TYPOGRAPHY ====================================== */
body {
  font-family: var(--body-font-family);
}

/* → title-page */
.et_pb_post_title .et_pb_title_container h1.entry-title {
  font-family: var(--title-page-font-family);
  font-size: var(--title-page-size);
  font-weight: var(--title-page-font-weight);
  line-height: var(--title-page-line-height);
  letter-spacing: var(--title-page-letter-spacing);
}
 
/* → subtitle */
.et_pb_post_title .et_pb_title_container p.et_pb_title_meta_container {
  font-family: var(--subtitle-font-family);
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-font-weight);
  line-height: var(--subtitle-line-height) !important;
  letter-spacing: var(--subtitle-letter-spacing);
}
 
/* → heading */
.et_pb_post_content.et_pb_post_content_0_tb_body h2,
.pum-theme-default-theme .pum-container .pum-title.popmake-title {
  font-family: var(--heading-font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}
 
/* → small-heading */
h2.vp-portfolio__item-meta-title,
.et_pb_post_content.et_pb_post_content_0_tb_body h3,
.et_pb_post_content.et_pb_post_content_0_tb_body h4,
.et_pb_blurb .et_pb_blurb_container .et_pb_module_header,
.et_pb_promo .et_pb_promo_description .et_pb_module_header,
.et_pb_posts .et_pb_post .entry-title,
.et_pb_blog_grid .et_pb_post .entry-title,
.et_pb_posts.posts-list .et_pb_post .entry-title,
.et_pb_accordion .et_pb_toggle_title {
  font-family: var(--small-heading-font-family);
  font-size: var(--small-heading-size);
  font-weight: var(--small-heading-font-weight);
  line-height: var(--small-heading-line-height);
  letter-spacing: var(--small-heading-letter-spacing);
}
/* → small-subheading */
.et_pb_posts .et_pb_post .post-meta,
.et_pb_blog_grid .et_pb_post .post-meta,
.et_pb_posts.posts-list .et_pb_post .post-meta {
  font-family: var(--small-subheading-font-family);
  font-size: var(--small-subheading-size);
  font-weight: var(--small-subheading-font-weight);
  line-height: var(--small-subheading-line-height);
  letter-spacing: var(--small-subheading-letter-spacing);
}
 
/* → body-base */
.et_pb_post_content p,
.et_pb_post_content ul li,
.et_pb_post_content ol li,
.et_pb_post .post-content .post-content-inner,
.et_pb_post .post-content p,
.et_pb_blog_grid .et_pb_post .post content .post-content-inner,
.et_pb_blurb .et_pb_blurb_container .et_pb_blurb_description,
.et_pb_promo .et_pb_promo_description p,
.et_pb_accordion .et_pb_toggle_content p {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-base) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-line-height-base)*1px);
  letter-spacing: var(--body-letter-spacing);
}
 
/* → body-base-strong */
/* .et_pb_posts.posts-list .et_pb_post .entry-title {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-base) * 1px);
  font-weight: var(--body-font-weight-strong);
  line-height: calc(var(--body-line-height-base)*1px);
  letter-spacing: var(--body-letter-spacing);
} */
 
/* → body-small */
/* .et_pb_posts .et_pb_post .post-meta {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-small) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-line-height-small)*1px);
  letter-spacing: var(--body-letter-spacing);
} */
 
/* → body-small-strong */
/* .et_pb_post .post-content .more-link {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-small) * 1px);
  font-weight: var(--body-font-weight-strong);
  line-height: calc(var(--body-line-height-small)*1px);
  letter-spacing: var(--body-letter-spacing);
} */
 
/* → single-line-body-base */
.et_pb_tabs .et_pb_tabs_controls li a,
.vertical-tabs3 .et_pb_tabs_controls li a,
.et_pb_contact_form_container .et_pb_button {
  font-family: var(--body-font-family);
  font-size: calc(var(--body-size-base) * 1px);
  font-weight: var(--body-font-weight-regular);
  line-height: calc(var(--body-size-base)*1px) !important;
  letter-spacing: var(--body-letter-spacing);
}