h1 {
  font-family: var(--font-body-semibold);
  font-size: clamp(3.125rem, 2.375rem + 3.75vw, 6.875rem);
  line-height: clamp(3.75rem, 2.725rem + 5.125vw, 8.875rem);
  text-transform: uppercase;
  color: var(--color-primary);
}

h2,
h3,
h4 {
  font-family: var(--font-heading-bold);
  line-height: 1.15;
  color: var(--color-primary);
}

h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
}

h3 {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
}

p {
  font-size: 1rem;
}

.section-title {
  font-family: var(--font-body-semibold);
  font-size: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
  line-height: 105%;
}

.section-title-container {
  position: relative;
  padding-right: 1.75rem;
  padding-bottom: var(--space-xs);
  width: fit-content;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: clamp(1.125rem, 0.875rem + 1.25vw, 2.375rem);
}

.section-title-container::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Underline draw-in (js/modules/sectionTitleLine.js): while JS motion is
   active the border is swapped for a drawable line that grows left→right,
   then the end dot pops in. Without JS / with reduced motion nothing changes. */
.section-title-container.has-line-motion {
  border-bottom-color: transparent;
}

.section-title-container.has-line-motion::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.section-title-container.has-line-motion::after {
  opacity: 0;
  transform: scale(0);
}

.section-title-container.is-line-drawn::before {
  transform: scaleX(1);
}

.section-title-container.is-line-drawn::after {
  opacity: 1;
  transform: scale(1);
  /* Delay only on the way in, so the dot appears once the line reaches it. */
  transition:
    opacity 0.3s ease 0.85s,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.85s;
}