:root {
  --cms-body-font: "Syne", sans-serif;
  --cms-heading-font: "Marcellus", serif;
  --cms-base-font-size: 16px;
  --cms-hero-title-size: 72px;
  --cms-section-title-size: 44px;
  --cms-body-text-size: 18px;
  --cms-button-text-size: 16px;
}

body {
  font-family: var(--cms-body-font);
  font-size: var(--cms-base-font-size);
}

h1,
h2,
h3,
h4,
.brand span,
.hero-copy h1,
.about-title h2,
.projects-heading h2,
.project-content h3,
.services-heading h2,
.service-main h3,
.cta-copy h2,
.footer-branding strong {
  font-family: var(--cms-heading-font);
}

.hero-copy h1 {
  font-size: var(--cms-hero-title-size);
}

.projects-heading h2,
.services-heading h2,
.about-title h2,
.cta-copy h2,
.feature-video-overlay h2 {
  font-size: var(--cms-section-title-size);
}

.hero-copy p,
.about-content p,
.project-content p,
.service-main p,
.cta-copy p,
.feature-video-overlay p,
.footer-branding p,
.desktop-nav a,
.mobile-nav a {
  font-size: var(--cms-body-text-size);
}

.header-cta,
.hero-button,
.project-content a,
.about-content a,
.cta-primary,
.cta-secondary,
.listing-showcase-action a {
  font-size: var(--cms-button-text-size);
}