@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-variable.ttf') format('truetype-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-variable.ttf') format('truetype-variations');
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-display: swap;
}

:root {
    --font-primary: 'Montserrat', Helvetica, sans-serif;
    --font-secondary: 'Roboto', Helvetica, sans-serif;
    --font-text: Helvetica, sans-serif;
}

body,
input,
select,
textarea {
    font-family: var(--font-text);
}

h1,
h2,
h3,
h4,
.brand-name,
.nav-list,
.button,
.text-link,
.stat strong,
.service-card,
.footer-brand > a {
    font-family: var(--font-primary);
}

.institution-bar,
.eyebrow,
.breadcrumbs,
.hero-institution,
.hero-contact,
.visual-label,
.caption-year,
.news-meta,
.service-card-top > span,
.service-more,
.partner-card,
.footer-grid,
.footer-bottom,
.directory-filter label,
.result-count,
.availability,
.wp-caption-text,
.gallery-caption {
    font-family: var(--font-secondary);
}