/* =============================================
   Viqsa — Shared Typography System
   Source of truth: index.html / style.css
   ============================================= */

:root {
  --font-family: 'Clash Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Text colors */
  --text-primary: #121212;
  --text-muted: rgba(18, 18, 18, 0.7);
  --text-soft: rgba(18, 18, 18, 0.9);
  --text-white: #ffffff;
  --text-brand: #D7923C;

  /* Aliases for legacy variables */
  --orange: var(--text-brand);
  --orange-light: #F8B05E;
  --orange-dark: #8D4B00;
  --black: var(--text-primary);
  --ink: var(--text-primary);
  --ink-soft: var(--text-soft);
  --brand: #c17619;
  --brand-light: var(--text-brand);

  /* Tags / badges — shared brand palette */
  --tag-bg: rgba(248, 176, 94, 0.12);
  --tag-bg-strong: rgba(215, 146, 60, 0.18);
  --tag-bg-muted: rgba(141, 75, 0, 0.12);
  --tag-color: var(--orange-dark);
  --tag-color-accent: var(--orange-light);
  --tag-border: rgba(215, 146, 60, 0.22);

  /* H1 — hero / page title */
  --type-h1-size: clamp(28px, 3.5vw, 44px);
  --type-h1-weight: 600;
  --type-h1-lh: 1.3;
  --type-h1-ls: 1.2px;

  /* H2 — section headings */
  --type-h2-size: clamp(24px, 2.4vw, 34px);
  --type-h2-size-lg: 30px;
  --type-h2-weight: 500;
  --type-h2-lh: 1.2;
  --type-h2-ls: 0.02em;

  /* H3 — card / feature titles */
  --type-h3-size: 18px;
  --type-h3-size-lg: 25px;
  --type-h3-weight: 600;
  --type-h3-weight-lg: 500;
  --type-h3-lh: 1.4;

  /* Body */
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-lh: 1.75;
  --type-body-sm-size: clamp(14px, 1.5vw, 17px);
  --type-body-sm-lh: 1.7;

  /* Hero subtitle / description */
  --type-hero-sub-size: clamp(16px, 1.8vw, 22px);
  --type-hero-desc-size: clamp(14px, 1.5vw, 17px);

  /* Eyebrow labels */
  --type-eyebrow-size: 26px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-ls: 0.04em;
}

body {
  font-family: var(--font-family);
  color: var(--text-primary);
}

/* ── Hero H1 / page titles ── */
.hero-content h1,
.page-hero h1,
.hms-hero h1,
.ai-hero-content h1,
.da-hero h1,
.au-page-title,
.blog-page-title {
  font-family: var(--font-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  color: var(--text-white);
}

/* ── Section H2 ── */
h2.section-title,
.truck-intro-heading,
.intro-copy h2,
.section-heading,
.center-title h2,
.expertise-text h2,
.services-heading-wrap h2,
.dark-experience-copy h2,
.truck-solution-copy h2,
.cta-box h2,
.hms-section-title,
.ai-section-title,
.da-title,
.au-about-heading,
.au-business-heading,
.blog-card-title,
.cu-form-title,
.pp-title,
.viqsa-product-cta__content h2,
.newsletter-content h2 {
  font-family: var(--font-family);
  font-size: var(--type-h2-size-lg);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--text-primary);
}

.why-us .section-title,
.process-content .section-title {
  font-size: var(--type-h2-size);
}

/* Dark / brand section H2 color modifiers */
h2.section-title.light,
.hms-section-title.light,
.da-title.light,
.ai-section-title.light {
  color: var(--text-white);
}

.newsletter-content h2 {
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-brand);
}

/* ── Card / feature H3 ── */
.service-card h3,
.field-card h3,
.solution-card h3,
.truck-service-card h3,
.truck-solution-card h3,
.hms-module-card h3,
.ai-service-card h3,
.ai-who-card h3,
.da-type-card h3,
.da-step h3,
.reach-col h3,
.crm-page .crm-mod-card h3 {
  font-family: var(--font-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  color: var(--text-primary);
}

.hero-card h3 {
  font-family: var(--font-family);
  font-size: var(--type-h3-size-lg);
  font-weight: var(--type-h3-weight-lg);
  line-height: 1.14;
  color: var(--text-white);
}

.vertical-title h3 {
  font-family: var(--font-family);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: var(--type-h3-weight-lg);
  line-height: 1;
}

.solution-card h3 {
  color: var(--brand);
}

/* ── Body paragraphs ── */
.dark-experience-copy h2 {
  color: var(--text-white);
}

.dark-experience-copy p {
  font-family: var(--font-family);
  font-size: clamp(15px, 0.85vw, 16px);
  font-weight: var(--type-body-weight);
  line-height: 1.92;
  color: rgba(255, 255, 255, 0.88);
}

.dark-experience-copy p.experience-subtitle {
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
}

.dark-experience-copy strong {
  color: var(--text-white);
  font-weight: 500;
}

.reach-col h3 {
  color: var(--brand);
}

.reach-col h3 span {
  color: var(--text-primary);
}

.truck-solution-card h3 {
  color: var(--text-white);
}

.reach-col .rich-text {
  font-size: clamp(15px, 0.85vw, 16px);
  line-height: 1.92;
}

.about-content p,
.service-card p,
.rich-text,
.rich-text p,
.process-content p,
.feature-text,
.expertise-text .rich-text,
.reach-col .rich-text,
.truck-solution-copy p,
.au-about-text,
.da-sub,
.hms-section-sub,
.ai-section-sub,
.hms-module-card p,
.ai-who-card p,
.ai-service-card p,
.crm-page .crm-mod-card p,
.da-step p,
.da-type-card p,
.viqsa-product-cta__content p,
.pp-text,
.pp-list li {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--text-muted);
}

.pp-subtitle {
  font-size: var(--type-h3-size);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-brand);
  font-weight: 600;
}

.rich-text,
.process-content p,
.feature-text,
.au-about-text,
.da-sub {
  color: var(--text-soft);
}

.service-card p {
  line-height: 1.55;
}

.process-content p {
  line-height: 1.8;
}

.hms-section-sub.light,
.da-sub.light,
.ai-section-sub.light {
  color: rgba(255, 255, 255, 0.72);
}

/* Dark sections — light text on cards */
.ai-section-dark .ai-service-card h3 {
  color: var(--text-white);
}

.ai-section-dark .ai-service-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.ai-why-visual h3 {
  color: var(--text-white);
}

.ai-why-grid .section-label {
  text-align: left;
}

.ai-why-grid .ai-section-sub {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: none;
}

.ai-section-sub-left {
  margin: 0;
  text-align: left;
  max-width: none;
}

/* ── Hero subtitle / description ── */
.hero-subtitle {
  font-family: var(--font-family);
  font-size: var(--type-hero-sub-size);
  font-weight: 500;
  color: var(--text-white);
  letter-spacing: 0.44px;
}

.hero-description,
.hms-hero-desc,
.ai-hero-desc,
.da-hero-sub {
  font-family: var(--font-family);
  font-size: var(--type-hero-desc-size);
  font-weight: var(--type-body-weight);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.48px;
  line-height: var(--type-body-sm-lh);
}

.hero-card p {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.14;
  color: var(--text-primary);
}

/* ── Section header block (common tag + title) ── */
.section-header {
  margin-bottom: 25px;
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-tag {
  display: block;
}

.section-header--left {
  text-align: left;
}

.section-header--left .section-tag {
  display: inline-block;
}

.section-header .section-title {
  margin: 0;
}

/* ── Eyebrow labels ── */
.section-tag,
.section-label,
div.section-title,
.da-label,
.hms-label,
.ai-label {
  font-family: var(--font-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: 1;
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
}

.section-tag,
.section-label {
  margin-bottom: 12px;
  background: linear-gradient(359.26deg, #8D4B00 -24.88%, #F8B05E 124.51%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-label {
  display: block;
  text-align: center;
}

.da-center h2.section-title,
.hms-center h2.section-title,
.ai-center h2.section-title {
  margin-bottom: 16px;
}

.da-center .section-label,
.hms-center .section-label,
.ai-center .section-label,
.ai-cta-inner .section-label {
  margin-bottom: 12px;
}

div.section-title {
  color: var(--brand);
  margin-bottom: 12px;
}

.why-us .section-header {
  margin-bottom: 44px;
}

.process-content .section-header {
  margin-bottom: 14px;
}

.da-label {
  display: inline-block;
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.da-label.light {
  color: var(--orange-light);
}

.hms-label,
.ai-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-light);
  margin-bottom: 12px;
}

.hms-label-light,
.ai-label-light {
  color: var(--brand-light);
}