@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --tf-text-color: #000;
  --sds-typography-body-font-weight-strong: 500;
  --sds-typography-weight-extra-bold: 800;
  --sds-typography-title-page-font-weight: 700;
  --sds-typography-body-font-weight-regular: 400;
  --sds-typography-heading-font-weight: 600;
  --sds-typography-subtitle-font-weight: 400;
  --sds-typography-subheading-font-weight: 400;

  /* Base sizes (Desktop) */
  --sds-typography-title-page-size-base: 3rem;      /* 48px */
  --sds-typography-heading-size-base: 1.5rem;       /* 24px */
  --sds-typography-subtitle-size-base: 2rem;        /* 32px */
  --sds-typography-subheading-size-medium: 1.25rem; /* 20px */
  --sds-typography-body-size-regular: 1rem;         /* 16px */
  --sds-typography-body-size-medium: 0.875rem;      /* 14px */
  --sds-typography-body-size-small: 0.875rem;       /* 14px */
  --sds-typography-body-size-tiny: 0.75rem;         /* 12px */
}

/* ---------------------------------------------------
   TYPOGRAPHY CLASSES (base = desktop)
---------------------------------------------------- */

/* Hero */
.tf-hero-secondary {
  color: var(--tf-text-color);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 4.25rem; /* 68px */
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
}

.tf-hero-regular {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-size: 4.375rem; /* 70px */
  font-style: normal;
  font-weight: var(--sds-typography-weight-extra-bold);
  line-height: 120%;
  letter-spacing: -2.1px;
}

/* Title Page */
.tf-title-page-secondary {
  font-size: var(--sds-typography-title-page-size-base);
  line-height: 120%;
  letter-spacing: -0.96px;
  font-style: normal;
  font-weight: 700;
}

.tf-title-page-secondary-hero {
font-family: "Roboto Condensed";
font-size: var(--sds-typography-title-page-size-base);
font-style: normal;
font-weight: var(--sds-typography-title-page-font-weight);
line-height: 110%; /* 3.3rem */
letter-spacing: -0.06rem;
}

.tf-title-page-subheading-hero {
font-family: Mulish;
font-size: var(--sds-typography-subheading-size-medium);
font-style: normal;
font-weight: var(--sds-typography-subheading-font-weight);
line-height: 125%; 
}

.tf-title-page-regular {
  font-family: "Roboto Condensed";
font-size: var(--sds-typography-title-page-size-base);
font-style: normal;
font-weight: var(--sds-typography-title-page-font-weight);
line-height: 110%; /* 3.3rem */
letter-spacing: -0.06rem;
  }

.tf-title-page-secondary {
  color: var(--Blue-Blue-Extra-Dark);
  font-family: "Roboto Condensed", sans-serif;
}

.tf-title-page-regular {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: 800;
}

/* Subtitle */

.tf-subtitle-regular,
.tf-subtitle-bold {
  font-size: var(--sds-typography-heading-size-base);
  font-style: normal;
  line-height: 120%;
  margin: 0;
}

.tf-subtitle-regular-hero {
  font-family: Mulish;
font-size: var(--sds-typography-subheading-size-medium);
font-style: normal;
font-weight: var(--sds-typography-subheading-font-weight);
line-height: 125%;
}

.tf-subtitle-secondary {
  font-size: var(--sds-typography-heading-size-base);
  font-style: normal;
  line-height: 120%;
  margin: 0;
  color: var(--tf-text-color);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
}

.tf-subtitle-regular {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: 400;
}

.tf-subtitle-bold {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: 700;
}

/* Heading */
.tf-heading-regular,
.tf-heading-bold,
.tf-heading-extrabold {
  font-size: var(--sds-typography-subtitle-size-base);
  font-style: normal;
  line-height: 120%;
}

.tf-heading-regular {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: var(--sds-typography-subtitle-font-weight);
}

.tf-heading-bold {
  color: var(--Blue-Blue-Extra-Dark);
  font-family: Mulish, sans-serif;
  font-weight: 700;
}

.tf-heading-extrabold {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: 800;
  line-height: 120%
}

/* Subheading */
.tf-subheading-regular,
.tf-subheading-semibold,
.tf-subheading-extrabold {
  font-size: 20px;
  font-style: normal;
  line-height: 125%;
}

.tf-subheading-regular {
  color: var(--tf-text-color);
  font-family: Mulish, sans-serif;
  font-weight: 400;
}

.tf-subheading-semibold {
  font-family: Mulish, sans-serif;
  color: var(--tf-text-color);
  font-weight: 500;
}

.tf-subheading-extrabold {
  font-family: Mulish, sans-serif;
  color: var(--tf-text-color);
  font-weight: 800;
}

/* Body */
.tf-body-regular,
.tf-body-bold,
.tf-body-extrabold {
  font-size: var(--sds-typography-body-size-regular);
  font-style: normal;
  line-height: 140%;
  margin: 0;
}

.tf-body-regular-heigh {
font-family: Mulish;
font-size: 0.875rem;
font-style: normal;
font-weight: 700;
line-height: 120%;
  }

.tf-body-regular {
  font-family: Mulish, sans-serif;
  color: var(--Blue-Blue-Extra-Dark);
  font-weight: var(--sds-typography-body-font-weight-regular);
}

.tf-body-bold {
  font-family: Mulish, sans-serif;
  color: var(--Blue-Blue-Extra-Dark);
  font-weight: 700;
}

.tf-body-extrabold {
  font-family: Mulish, sans-serif;
  color: var(--Blue-Blue-Extra-Dark);
  font-weight: 800;
}

.tf-body-emphasis {
  font-family: Mulish, sans-serif;
  font-size: var(--sds-typography-body-size-medium);
  font-style: italic;
  font-weight: 400;
  line-height: 140%;
  color: var(--tf-text-color);
}

.tf-body-small-uppercase {
  font-family: Mulish, sans-serif;
  font-size: var(--sds-typography-body-size-small);
  font-style: normal;
  font-weight: var(--sds-typography-body-font-weight-strong);
  line-height: 140%;
  letter-spacing: 0.175rem;
  text-transform: uppercase;
  color: var(--Blue-Blue-Extra-Dark, #253271);
}

.tf-body-small-regular {
  font-family: Mulish, sans-serif;
  font-size: var(--sds-typography-body-size-small);
  font-style: normal;
  font-weight: var(--sds-typography-body-font-weight-regular);
  line-height: 140%;
}

.tf-body-tiny-extrabold,
.tf-body-tiny-bold {
  font-family: Mulish, sans-serif;
  font-size: var(--sds-typography-body-size-tiny);
  font-style: normal;
  line-height: 120%;
}

.tf-body-tiny-extrabold {
  font-weight: 800;
}

.tf-body-tiny-bold {
  font-weight: 700;
}

/* ---------------------------------------------------
   RESPONSIVE TYPOGRAPHY (mobile/tablet)
---------------------------------------------------- */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .tf-hero-regular { font-size: 3.5rem; }   /* ~56px */
  .tf-hero-secondary { font-size: 3.5rem; } /* ~54px */
  .tf-title-page-regular,
  .tf-title-page-secondary,
  .tf-title-page-secondary-hero { font-size: 2.5rem; } /* 40px */
  .tf-heading-regular,
  .tf-heading-bold,
  .tf-heading-extrabold { font-size: 1.75rem; } /* 28px */
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .tf-hero-regular { font-size: 2.2rem; }  /* ~44px */
  .tf-hero-secondary { font-size: 2.5625rem;
  line-height: 110%;
  } /* ~40px */
  .tf-title-page-regular{ line-height: 110%; /* 2.6125rem */
line-height: 110%; /* 2.6125rem */
letter-spacing: -0.0475rem; } 
  .tf-title-page-secondary,
  .tf-title-page-secondary-hero { font-size: 2.375rem;
line-height: 110%; /* 2.6125rem */
letter-spacing: -0.0475rem; } /* ~32px */
  .tf-heading-regular,
  .tf-heading-bold,
  .tf-heading-extrabold { font-size: 1.4rem; }
  .tf-subtitle-secondary { font-size: 1.25rem; !important
line-height: 120%; }
    .tf-subtitle-regular { font-size: 1.25rem; !important
line-height: 120%; } 
      .tf-subtitle-regular-hero { font-size: 1.25rem; !important
line-height: 120%; } 
    .tf-subtitle-bold { font-size: 1.25rem;
line-height: 120%; } 
  .tf-subheading-regular,
  .tf-subheading-extrabold { font-size: 1rem; }
  .tf-body-small-uppercase { font-size: 0.75rem;
line-height: 140%; /* 1.05rem */
letter-spacing: 0.15rem;
}
}

.body-base-regular {
font-family: Mulish;
font-size: 0.875rem;
font-style: normal;
font-weight: var(--sds-typography-body-font-weight-regular);
line-height: 120%; /* 1.05rem */
  }