/* ===========================================================================
   1. SETTINGS & DESIGN TOKENS (CSS Variables, Spaces, Colors)
   ========================================================================== */
:root {
  --space-s: 14px;
}

.space-s {
  margin-bottom: var(--space-s);
}

/* ===========================================================================
   2. GLOBAL RESET & GENERIC STYLES (Base Elements)
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Helvetica;
  font-size: 65%;
  background-color: #ffffff;
  color: #000000;
  line-height: 1.42;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

main {
  padding: 40px 0;
}

/* ===========================================================================
   3. TYPOGRAPHY SPECIFICATIONS (Base Rules - Mobile First)
   ========================================================================== */
h1 {
  font-family: Helvetica;
  font-size: 16.25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #000000;
}

h2 {
  font-family: Helvetica;
  font-size: 13px;
  font-weight: bold;
  text-transform: capitalize; /* titlecase */
  color: #000000;
}

h3 {
  font-family: Helvetica;
  font-size: 11.05px;
  font-weight: bold;
  font-variant: small-caps;
  text-transform: none;
  color: #000000;
}

h4 {
  font-family: Helvetica;
  font-size: 8.45px;
  font-weight: bold;
  font-variant: small-caps;
  color: #000000;
}

.caption {
  font-family: Helvetica;
  font-size: 8.45px;
  font-weight: bold;
  text-transform: capitalize; /* titlecase */
  color: #000000;
}

.body1 {
  font-family: Helvetica;
  font-size: 7.8px;
  font-weight: 300; /* light */
  text-transform: capitalize; /* start case */
  color: #000000;
}

.body2,
.body02 {
  font-family: Helvetica;
  font-size: 7.8px;
  font-weight: 300; /* light */
  text-transform: capitalize; /* start case */
  color: #5e5e5e;
  line-height: 1.45;
}

.body3 {
  font-family: Helvetica;
  font-size: 5.85px;
  font-weight: 300; /* light */
  text-transform: none;
  color: #929292;
}

/* ===========================================================================
   4. UNIVERSAL BREAKPOINTS (Only insert modified unique values here)
   ========================================================================== */
@media (min-width: 320px) {
  /* <!--global-css-MOBILE-SMALL-320px-group--> */
  /* The mobile-first typography values above are the approved 320px scale. */
  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 15px;
  }

  h4,
  .caption {
    font-size: 13px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 13px;
  }

  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 375px) {
  /* <!--global-css-MOBILE-BASE-375px-group--> */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  .caption {
    font-size: 13px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 13px;
  }

  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 425px) {
  /* <!--global-css-MOBILE-LARGE-425px-group--> */
  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  .caption {
    font-size: 13px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 13px;
  }

  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 600px) {
  /* <!--global-css-TABLET-SMALL-600px-group--> */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  .caption {
    font-size: 13px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 12px;
  }

  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  /* <!--global-css-TABLET-BASE-768px-group--> */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  .caption {
    font-size: 13px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 12px;
  }

  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  /* <!--global-css-TABLET-LARGE-1024px-group--> */
  h1 {
    font-size: 24.5px;
  }

  h2 {
    font-size: 17.25px;
  }

  h3 {
    font-size: 14.75px;
  }

  h4,
  .caption {
    font-size: 11.25px;
  }

  .body1,
  .body2,
  .body02 {
    font-size: 11px;
  }

  .body3 {
    font-size: 10.5px;
  }
}

@media (min-width: 1280px) {
  /* <!--global-css-DESKTOP-SMALL-1280px-group--> */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 19px;
  }

  h3 {
    font-size: 16.25px;
  }

  h4,
  .caption {
    font-size: 12.25px;
  }

  .body1,
  .body2,
  .body02,
  .body3 {
    font-size: 12px;
  }
}

@media (min-width: 1440px) {
  /* <!--global-css-DESKTOP-BASE-1440px-group--> */
  h1 {
    font-size: 29.9px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  .caption,
  .body1,
  .body2,
  .body02,
  .body3 {
    font-size: 13px;
  }
}

@media (min-width: 1680px) {
  /* <!--global-css-DESKTOP-LARGE-1680px-group--> */
  h1 {
    font-size: 34.9px;
  }

  h2 {
    font-size: 23.3px;
  }

  h3 {
    font-size: 19.8px;
  }

  h4,
  .caption,
  .body1,
  .body2,
  .body02,
  .body3 {
    font-size: 15.2px;
  }
}

@media (min-width: 1920px) {
  /* <!--global-css-DESKTOP-ULTRAWIDE-1920px-group--> */
  h1 {
    font-size: 39.9px;
  }

  h2 {
    font-size: 26.7px;
  }

  h3 {
    font-size: 22.7px;
  }

  h4,
  .caption,
  .body1,
  .body2,
  .body02,
  .body3 {
    font-size: 17.3px;
  }
}

@media (min-width: 2560px) {
  /* <!--global-css-DESKTOP-4K-2560px-group--> */
  h1 {
    font-size: 53.2px;
  }

  h2 {
    font-size: 35.6px;
  }

  h3 {
    font-size: 30.2px;
  }

  h4,
  .caption,
  .body1,
  .body2,
  .body02,
  .body3 {
    font-size: 23.1px;
  }
}