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

:root {
  --base-h1: 3rem;
  /* Mobile default */
  /* Mobile default with clamp for min legibility */
  --base-p1: clamp(1rem, calc(var(--base-h1) / var(--ratio) / var(--ratio) / var(--ratio)), 1.5rem);
  --ratio: 1.618;
}

/* sm */
@media (min-width: 576px) {
  :root {
    --base-h1: 4rem;
  }
}

/* md */
@media (min-width: 768px) {
  :root {
    --base-h1: 4.3rem;
  }
}

/* lg */
@media (min-width: 992px) {
  :root {
    --base-h1: 4.6rem;
  }
}

/* xl - Original Base */
@media (min-width: 1200px) {
  :root {
    --base-h1: 4.9rem;
  }
}

/* xxl */
@media (min-width: 1400px) {
  :root {
    --base-h1: 5.2rem;
  }
}

/* Bigboy breakpoint (2700px+) */
@media (min-width: 2700px) {
  :root {
    --base-h1: 5.5rem;
    /* 5rem * 1.2 */
  }
}

h1,
.h1 {
  font-size: var(--base-h1);
  font-weight: 900;
  font-stretch: 120%;
  margin-bottom: calc(var(--base-h1) / var(--ratio));
}

h2,
.h2 {
  font-size: calc(var(--base-h1) / var(--ratio));
  font-weight: 700;
  font-stretch: 120%;
  margin-top: calc(var(--base-p1) * 3);
  margin-bottom: calc(var(--base-p1) * 2.5);
}

h3,
.h3 {
  font-size: calc(var(--base-h1) / var(--ratio) / var(--ratio));
  font-weight: 700;
  font-stretch: 120%;
  margin-bottom: 1rem !important;
}

h4,
.h4 {
  font-size: var(--base-p1);
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.875rem !important;
}

h5,
.h5 {
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.75rem !important;
}

h6,
.h6 {
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.625rem !important;
}

p,
li {
  font-size: var(--base-p1);
  font-weight: 400;
  font-stretch: 120%;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin-bottom: calc(var(--base-p1) * 2.5) !important;
}

p.p-ash1 {
  font-size: var(--base-h1);
  font-weight: 700;
}

p.p-ash2 {
  font-size: calc(var(--base-h1) / var(--ratio));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  /* Initial dimmed state for scroll reveal */
}

.p_cases {
  font-size: calc(var(--base-h1) / var(--ratio) / var(--ratio));
}

.wdth {
  font-stretch: 120%;
}

@media (max-width: 991.98px) {
  .fw-mobile-h1 {
    font-size: var(--base-h1) !important;
    font-weight: 900;
    font-stretch: 120%;
    margin-bottom: calc(var(--base-h1) / var(--ratio));
  }

  .fw-mobile-h2 {
    font-size: calc(var(--base-h1) / var(--ratio)) !important;
    font-weight: 700;
    font-stretch: 120%;
    margin-top: calc(var(--base-p1) * 3);
    margin-bottom: calc(var(--base-p1) * 2.5);
  }
}