/* ============================================================
   TYPOGRAPHY — Manrope Premium Industrial System
   500 body · 600 UI · 700 nav/buttons · 800 headings
   ============================================================ */


/* ── Base body ── */

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-graphite);
  line-height: 1.70;
}


/* ── Heading hierarchy ── */

h1 {
  font-family: var(--font-base);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.030em;
  color: var(--c-graphite);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-base);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-graphite);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.016em;
  color: var(--c-graphite);
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--font-base);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.010em;
  color: var(--c-graphite);
  text-wrap: balance;
}


/* ── Paragraph ── */

p {
  font-weight: 500;
  color: var(--c-steel);
  line-height: 1.75;
}


/* ── Strong / bold inline ── */

strong, b {
  font-weight: 700;
  color: var(--c-graphite);
}


/* ── Small / caption text ── */

small {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
}


/* ── Labels and UI text ── */

label {
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ════════════════════════════════════════════════════════════
   SHARED SECTION PATTERNS
   — DRY: labels, titles, subtitles used in every section
   ════════════════════════════════════════════════════════════ */

/* ── Section label — amber dash + uppercase tag ── */

.services__label,
.projects__label,
.workflow__label,
.trust__label,
.quiz__label,
.contacts__label,
.final-cta__label,
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.services__label::before,
.projects__label::before,
.workflow__label::before,
.trust__label::before,
.quiz__label::before,
.contacts__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-amber);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}


/* ── Section title — h2 level ── */

.services__title,
.projects__title,
.workflow__title,
.trust__title,
.quiz__title,
.contacts__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--c-graphite);
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
}


/* ── Section subtitle ── */

.services__subtitle,
.projects__subtitle,
.workflow__subtitle,
.trust__subtitle,
.quiz__subtitle,
.contacts__desc {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--c-steel);
  line-height: 1.65;
  max-width: 520px;
}


/* ── Shared section header layout ── */

.services__header,
.projects__header,
.workflow__header,
.trust__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-bottom: var(--sp-10);
}

.services__header-text,
.projects__header-text,
.workflow__header-text,
.trust__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 768px) {
  .services__header,
  .projects__header,
  .workflow__header,
  .trust__header {
    margin-bottom: var(--sp-12);
  }
}

@media (min-width: 1024px) {
  .services__header,
  .projects__header,
  .trust__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .workflow__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}


/* ── Section title balance ── */

.hero__headline,
.services__title,
.projects__title,
.workflow__title,
.trust__title,
.quiz__title,
.contacts__title,
.final-cta__title,
.final-cta__card-headline {
  text-wrap: balance;
}