/* =========================================================
   FONTS
   Inter — UI
   Mulish — logo only
========================================================= */

/* =========================
   Inter
========================= */

@font-face {
  font-family: 'Inter';
  src: local('Inter Regular'),
       local('Inter-Regular'),
       url('fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Medium'),
       local('Inter-Medium'),
       url('fonts/Inter-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter SemiBold'),
       local('Inter-SemiBold'),
       url('fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Bold'),
       local('Inter-Bold'),
       url('fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter ExtraBold'),
       local('Inter-ExtraBold'),
       url('fonts/Inter-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Mulish
========================= */

@font-face {
  font-family: 'Mulish';
  src: local('Mulish Light'),
       local('Mulish-Light'),
       url('fonts/Mulish-Light.woff2') format('woff2'),
       url('fonts/Mulish-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: local('Mulish Regular'),
       local('Mulish-Regular'),
       url('fonts/Mulish-Regular.woff2') format('woff2'),
       url('fonts/Mulish-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: local('Mulish Medium'),
       local('Mulish-Medium'),
       url('fonts/Mulish-Medium.woff2') format('woff2'),
       url('fonts/Mulish-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: local('Mulish SemiBold'),
       local('Mulish-SemiBold'),
       url('fonts/Mulish-SemiBold.woff2') format('woff2'),
       url('fonts/Mulish-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: local('Mulish ExtraBold'),
       local('Mulish-ExtraBold'),
       url('fonts/Mulish-ExtraBold.woff2') format('woff2'),
       url('fonts/Mulish-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

html,
body,
input,
select,
textarea,
button {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   LOGO ONLY
========================================================= */

.pg-header__brand-title,
.pg-header__brand-title--strong,
.pg-header__brand-title--light {
  font-family: 'Mulish', sans-serif !important;
}