@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../webfonts/dm-sans-100.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/dm-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../webfonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/poppins-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/poppins-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/poppins-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/poppins-700-italic.woff2') format('woff2');
}

/* =========================================================
 * Poppins fallback font metric overrides
 * ---------------------------------------------------------
 * When font-display:swap is used, the browser initially
 * renders text with a system fallback font. If the fallback
 * has different metrics than the web font, text blocks shift
 * when the web font swaps in — causing CLS.
 *
 * These @font-face declarations define a calibrated fallback
 * that closely mimics Poppins' metrics using size-adjust,
 * ascent-override, and descent-override. The browser uses
 * this fallback instead of raw system-ui, so the swap is
 * nearly invisible to the user.
 *
 * Metric values derived from Poppins' actual font geometry:
 *   ascent: ~105% of em, descent: ~26%, size-adjust: ~112%
 *   (i.e. Arial rendered at 112% ≈ same line box as Poppins)
 * ========================================================= */

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Arial');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Arial Italic');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: italic;
  font-weight: 500;
  src: local('Arial Italic');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: italic;
  font-weight: 600;
  src: local('Arial Italic');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: italic;
  font-weight: 700;
  src: local('Arial Italic');
  ascent-override: 93%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 112%;
}