/* ===============================
   GLOBAL TYPOGRAPHY & RESET
   =============================== */

/* Use font on body, NOT universal selector */
body {
  font-family: "Shantell Sans", sans-serif;
}

/* Lightweight body / paragraph text */
.shantell-sans-100 {
  font-family: "Shantell Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.6;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

/* ===============================
   TITLE SYSTEM (SINGLE SOURCE)
   =============================== */

.shantell-sans-title {
  font-family: "Shantell Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  font-size: clamp(1.6rem, 4vw, 3.5rem);
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

/* CTA titles with links */
.offer__cta-single .shantell-sans-title > a {
  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
  line-height: 1.25;
  display: inline-block;
}

/* ===============================
   NAVBAR
   =============================== */

.primary-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
  border: none;
  box-shadow: none;
}

.navbar {
  background: transparent;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  box-shadow: none;
}

.primary-navbar::after,
.navbar::after {
  display: none;
}

/* Logo */
.logo {
  font-family: "Shantell Sans", sans-serif;
  text-decoration: none;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  line-height: 1;
  display: inline-block;
}

.logo span {
  font-size: inherit;
  font-family: inherit;
}

.logo-thin {
  color: #ffffff;
  font-weight: 300;
}

.logo-highlight {
  color: #FF7425;
  font-weight: 650;
}

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

/* Mobile & small tablets */
@media (max-width: 768px) {

  /* Banner heading */
  .banner__content h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    line-height: 1.2;
    word-break: break-word;
  }

  /* Animated / section titles */
  .title,
  .title-anim,
  .shantell-sans-title {
    font-size: 1.8rem;
    line-height: 1.25;
    white-space: normal;
  }

  /* Sliders */
  .portfolio__text-slider h2,
  .testimonial__text-slider h2,
  .next__text-slider h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  /* Process cards */
  .card__content h2 {
    font-size: 1.5rem;
  }

  .card__content h3 {
    font-size: 1.2rem;
  }

  /* GSAP text safety */
  .title-anim span,
  .title-anim div {
    display: inline;
  }
}