/* =========================================================
   MVP N BEYOND
   GLOBAL TYPOGRAPHY SYSTEM
   Apply AFTER all page-specific CSS
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

  /* FONT */
  --font-primary: "Inter", sans-serif;


  /* =====================================
     DESKTOP FONT SIZES
  ===================================== */

  --text-hero: 44px;

  --text-section-title: 32px;

  --text-subsection-title: 24px;

  --text-card-title: 17px;

  --text-body: 15px;

  --text-body-small: 13px;

  --text-eyebrow: 11px;

  --text-button: 14px;

  --text-meta: 12px;


  /* =====================================
     TABLET FONT SIZES
  ===================================== */

  --text-hero-tablet: 38px;

  --text-section-title-tablet: 30px;

  --text-subsection-title-tablet: 22px;

  --text-card-title-tablet: 17px;

  --text-body-tablet: 14px;


  /* =====================================
     MOBILE FONT SIZES
  ===================================== */

  --text-hero-mobile: 32px;

  --text-section-title-mobile: 27px;

  --text-subsection-title-mobile: 21px;

  --text-card-title-mobile: 16px;

  --text-body-mobile: 14px;

  --text-small-mobile: 12px;

  --text-button-mobile: 13px;


  /* =====================================
     COLORS
  ===================================== */

  --heading-color: #111827;

  --body-color: #2C3E50;

  --muted-color: #59647D;

  --primary-color: #314DDF;


  /* =====================================
     FONT WEIGHTS
  ===================================== */

  --weight-regular: 400;

  --weight-medium: 500;

  --weight-semibold: 600;

  --weight-bold: 700;

  --weight-extrabold: 800;


  /* =====================================
     LINE HEIGHTS
  ===================================== */

  --line-hero: 1.12;

  --line-heading: 1.2;

  --line-subheading: 1.3;

  --line-card: 1.35;

  --line-body: 1.65;

}


/* =========================================================
   GLOBAL BASE
========================================================= */

html,
body {
  font-family: var(--font-primary);
}

body {
  color: var(--heading-color);
}


/*
 Do NOT force all paragraphs with !important.
 Page-specific components may legitimately need smaller copy.
*/

p {
  line-height: var(--line-body);
}


/* =========================================================
   PAGE HERO TITLES
========================================================= */

/*
 Covers common hero title classes used throughout
 service/about/startup/contact/case-study pages.
*/

:where(
  .hero-title,
  .page-hero-title,
  .inner-hero-title,
  .about-hero-title,
  .services-hero-title,
  .service-hero-title,
  .startup-hero-title,
  .process-hero-title,
  .faq-hero-title,
  .contact-hero-title,
  .resource-hero-title,
  .article-hero-title,
  .case-hero-title,
  .case-study-hero-title,
  .construction-saas-content h1
) {
  font-family: var(--font-primary);

  font-size: var(--text-hero);

  font-weight: var(--weight-bold);

  line-height: var(--line-hero);

  letter-spacing: -1.5px;
}


/* Generic page H1 fallback */

main > section:first-of-type h1 {
  font-family: var(--font-primary);

  font-weight: var(--weight-bold);

  line-height: var(--line-hero);

  letter-spacing: -1.5px;
}


/* =========================================================
   MAIN SECTION HEADINGS
========================================================= */

:where(
  .section-heading h2,
  .services-heading h2,
  .industries-heading h2,
  .testimonial-heading h2,
  .insights-heading h2,
  .estimate-heading h2,
  .case-section-heading h2,
  .business-objectives-heading h2,
  .challenges-heading h2,
  .our-approach-heading h2,
  .solution-overview-content h2,
  .project-snapshot-heading h2,
  .client-about-content h2,
  .key-capabilities-heading h2,
  .technology-stack-heading h2,
  .similar-projects-heading h2,
  .result-impact-heading h2,
  .project-info-heading h2
) {
  font-family: var(--font-primary);

  font-size: var(--text-section-title);

  font-weight: var(--weight-extrabold);

  line-height: var(--line-heading);

  letter-spacing: -1px;
}


/* =========================================================
   GENERIC SECTION H2 FALLBACK
========================================================= */

/*
 This helps pages that don't share the same classes.
 Avoid applying it to legal content and specialized cards.
*/

main section h2 {
  font-family: var(--font-primary);

  font-weight: var(--weight-extrabold);

  line-height: var(--line-heading);
}


/* =========================================================
   CARD / FEATURE TITLES
========================================================= */

:where(
  .help-content h3,
  .service-card h3,
  .industry-content h3,
  .insight-card h3,
  .business-objective-card h3,
  .challenge-content h3,
  .our-approach-step h3,
  .similar-project-content h3,
  .impact-stat-card h3,
  .project-snapshot-content h3,
  .feature-card h3,
  .solution-card h3,
  .process-card h3,
  .resource-card h3,
  .case-card h3,
  .technology-card h3
) {
  font-family: var(--font-primary);

  font-size: var(--text-card-title);

  font-weight: var(--weight-bold);

  line-height: var(--line-card);

  letter-spacing: 0;
}


/* =========================================================
   STANDARD BODY COPY
========================================================= */

:where(
  .section-description,
  .about-description p,
  .service-description,
  .case-description,
  .industries-heading p,
  .testimonial-heading p,
  .insights-heading p,
  .estimate-heading p,
  .solution-overview-content p,
  .client-about-content p,
  .business-objectives-heading p,
  .challenges-heading p,
  .our-approach-heading p,
  .similar-projects-heading p,
  .result-impact-heading p
) {
  font-family: var(--font-primary);

  font-size: var(--text-body);

  font-weight: var(--weight-regular);

  line-height: var(--line-body);

  color: var(--body-color);
}


/* =========================================================
   CARD BODY COPY
========================================================= */

:where(
  .help-content p,
  .service-card p,
  .industry-content p,
  .insight-description,
  .business-objective-card p,
  .challenge-content p,
  .similar-project-content p,
  .impact-stat-card p,
  .project-snapshot-content p
) {
  font-family: var(--font-primary);

  font-weight: var(--weight-regular);

  line-height: 1.6;
}


/* =========================================================
   EYEBROWS / SMALL LABELS
========================================================= */

:where(
  .eyebrow,
  .hero-eyebrow,
  .section-eyebrow,
  .solution-overview-eyebrow,
  .client-about-eyebrow,
  .construction-saas-badge,
  .case-first-badge
) {
  font-family: var(--font-primary);

  font-size: var(--text-eyebrow);

  font-weight: var(--weight-bold);

  line-height: 1.35;

  letter-spacing: 0.8px;
}


/* =========================================================
   BUTTON TYPOGRAPHY
========================================================= */

:where(
  .hero-btn,
  .about-btn,
  .btn-primary-custom,
  .btn-get-in-touch,
  .service-link,
  .case-study-btn,
  .view-all-insights-btn,
  .estimate-main-btn,
  .faq-contact-btn,
  .contact-submit-btn,
  .similar-build-btn,
  .case-first-btn
) {
  font-family: var(--font-primary);

  font-size: var(--text-button);

  font-weight: var(--weight-semibold);

  line-height: 1.3;
}


/* =========================================================
   NAVIGATION
========================================================= */

.custom-nav-link {
  font-family: var(--font-primary);

  font-size: 14px;

  font-weight: var(--weight-medium);

  line-height: 1.4;
}


.dropdown-item {
  font-family: var(--font-primary);

  font-size: 13px;

  font-weight: var(--weight-medium);
}


/* =========================================================
   FOOTER
========================================================= */

.footer-heading {
  font-family: var(--font-primary);

  font-size: 15px;

  font-weight: var(--weight-semibold);

  line-height: 1.4;
}


.footer-links a,
.footer-text,
.contact-info {
  font-family: var(--font-primary);

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   FAQ PAGE
========================================================= */

/*
 FAQ questions are NOT regular card titles.
 They need slightly stronger sizing.
*/

.faq-heading {
  font-family: var(--font-primary);

  font-size: 35px;

  font-weight: var(--weight-extrabold);

  line-height: 1.1;

  letter-spacing: -1px;
}


.faq-button,
.faq-button:not(.collapsed) {
  font-family: var(--font-primary);

  font-size: 15px;

  font-weight: var(--weight-semibold);

  line-height: 1.5;
}


.faq-answer {
  font-family: var(--font-primary);

  font-size: 14px;

  font-weight: var(--weight-regular);

  line-height: 1.7;

  color: var(--body-color);
}


/* =========================================================
   CASE STUDY LISTING
========================================================= */

/*
 Listing card project names can be larger than normal cards.
*/

.case-first-content h2 {
  font-family: var(--font-primary);

  font-size: 24px;

  font-weight: var(--weight-bold);

  line-height: 1.3;

  letter-spacing: -0.4px;
}


.case-first-description {
  font-family: var(--font-primary);

  font-size: var(--text-body);

  line-height: 1.65;

  color: var(--body-color);
}


/* =========================================================
   CASE STUDY DETAIL
========================================================= */

.construction-saas-content h1 {
  font-size: var(--text-hero);

  font-weight: var(--weight-extrabold);

  line-height: 1.08;
}


.project-snapshot-heading h2,
.client-about-content h2,
.business-objectives-heading h2,
.challenges-heading h2,
.our-approach-heading h2,
.solution-overview-content h2,
.key-capabilities-heading h2,
.technology-stack-heading h2,
.similar-projects-heading h2,
.result-impact-heading h2 {
  font-size: var(--text-section-title);

  font-weight: var(--weight-extrabold);

  line-height: var(--line-heading);
}


/* =========================================================
   PRIVACY / LEGAL PAGE
========================================================= */

/*
 Privacy page has many H2 headings.
 Using 32px for every legal subsection would be too large.
*/

.privacy-policy-section h1,
.privacy-hero h1,
.policy-hero h1 {
  font-size: var(--text-hero);

  font-weight: var(--weight-bold);

  line-height: var(--line-hero);
}


:where(
  .privacy-policy-content,
  .privacy-content,
  .policy-content
) h2 {
  font-size: 22px;

  font-weight: var(--weight-bold);

  line-height: 1.35;

  letter-spacing: -0.3px;
}


:where(
  .privacy-policy-content,
  .privacy-content,
  .policy-content
) h3 {
  font-size: 17px;

  font-weight: var(--weight-bold);

  line-height: 1.4;
}


:where(
  .privacy-policy-content,
  .privacy-content,
  .policy-content
) p,
:where(
  .privacy-policy-content,
  .privacy-content,
  .policy-content
) li {
  font-size: 14px;

  line-height: 1.75;

  color: var(--body-color);
}


/* =========================================================
   ARTICLE DETAIL
========================================================= */

.article-detail-page h1,
.article-hero h1,
.article-header h1 {
  font-size: 40px;

  font-weight: var(--weight-extrabold);

  line-height: 1.15;

  letter-spacing: -1.2px;
}


:where(
  .article-content,
  .article-body
) h2 {
  font-size: 26px;

  font-weight: var(--weight-bold);

  line-height: 1.3;
}


:where(
  .article-content,
  .article-body
) h3 {
  font-size: 20px;

  font-weight: var(--weight-bold);

  line-height: 1.4;
}


:where(
  .article-content,
  .article-body
) p,
:where(
  .article-content,
  .article-body
) li {
  font-size: 15px;

  line-height: 1.8;

  color: var(--body-color);
}


/* =========================================================
   QUICK ESTIMATE / FORMS
========================================================= */

:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) h1 {
  font-size: var(--text-hero);

  font-weight: var(--weight-bold);

  line-height: var(--line-hero);
}


:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) h2 {
  font-size: var(--text-section-title);

  font-weight: var(--weight-extrabold);

  line-height: var(--line-heading);
}


:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) label {
  font-family: var(--font-primary);

  font-size: 13px;

  font-weight: var(--weight-semibold);
}


:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) input,
:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) select,
:where(
  .quick-estimate-section,
  .quick-estimate-page,
  .project-info-section
) textarea {
  font-family: var(--font-primary);

  font-size: 14px;
}


/* =========================================================
   404 / THANK YOU
========================================================= */

:where(
  .error-page,
  .error-section,
  .thank-you-page,
  .thank-you-section
) h1 {
  font-family: var(--font-primary);

  font-size: var(--text-hero);

  font-weight: var(--weight-extrabold);

  line-height: var(--line-hero);
}


:where(
  .error-page,
  .error-section,
  .thank-you-page,
  .thank-you-section
) h2 {
  font-size: var(--text-section-title);

  font-weight: var(--weight-bold);

  line-height: var(--line-heading);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  :where(
    .hero-title,
    .page-hero-title,
    .inner-hero-title,
    .about-hero-title,
    .services-hero-title,
    .service-hero-title,
    .startup-hero-title,
    .process-hero-title,
    .faq-hero-title,
    .contact-hero-title,
    .resource-hero-title,
    .article-hero-title,
    .case-hero-title,
    .case-study-hero-title,
    .construction-saas-content h1
  ) {
    font-size: var(--text-hero-tablet);

    letter-spacing: -1.2px;
  }


  :where(
    .section-heading h2,
    .services-heading h2,
    .industries-heading h2,
    .testimonial-heading h2,
    .insights-heading h2,
    .estimate-heading h2,
    .case-section-heading h2,
    .business-objectives-heading h2,
    .challenges-heading h2,
    .our-approach-heading h2,
    .solution-overview-content h2,
    .project-snapshot-heading h2,
    .client-about-content h2,
    .key-capabilities-heading h2,
    .technology-stack-heading h2,
    .similar-projects-heading h2,
    .result-impact-heading h2
  ) {
    font-size: var(--text-section-title-tablet);
  }


  .article-detail-page h1,
  .article-hero h1,
  .article-header h1 {
    font-size: 36px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  :where(
    .hero-title,
    .page-hero-title,
    .inner-hero-title,
    .about-hero-title,
    .services-hero-title,
    .service-hero-title,
    .startup-hero-title,
    .process-hero-title,
    .faq-hero-title,
    .contact-hero-title,
    .resource-hero-title,
    .article-hero-title,
    .case-hero-title,
    .case-study-hero-title,
    .construction-saas-content h1
  ) {
    font-size: var(--text-hero-mobile);

    line-height: 1.15;

    letter-spacing: -0.8px;
  }


  :where(
    .section-heading h2,
    .services-heading h2,
    .industries-heading h2,
    .testimonial-heading h2,
    .insights-heading h2,
    .estimate-heading h2,
    .case-section-heading h2,
    .business-objectives-heading h2,
    .challenges-heading h2,
    .our-approach-heading h2,
    .solution-overview-content h2,
    .project-snapshot-heading h2,
    .client-about-content h2,
    .key-capabilities-heading h2,
    .technology-stack-heading h2,
    .similar-projects-heading h2,
    .result-impact-heading h2
  ) {
    font-size: var(--text-section-title-mobile);

    letter-spacing: -0.6px;
  }


  :where(
    .help-content h3,
    .service-card h3,
    .industry-content h3,
    .insight-card h3,
    .business-objective-card h3,
    .challenge-content h3,
    .our-approach-step h3,
    .similar-project-content h3,
    .impact-stat-card h3
  ) {
    font-size: var(--text-card-title-mobile);
  }


  :where(
    .section-description,
    .about-description p,
    .service-description,
    .case-description,
    .solution-overview-content p,
    .client-about-content p
  ) {
    font-size: var(--text-body-mobile);
  }


  :where(
    .hero-btn,
    .about-btn,
    .btn-primary-custom,
    .service-link,
    .case-study-btn,
    .view-all-insights-btn,
    .estimate-main-btn,
    .faq-contact-btn,
    .contact-submit-btn
  ) {
    font-size: var(--text-button-mobile);
  }


  /* FAQ */

  .faq-heading {
    font-size: 30px;
  }


  .faq-button,
  .faq-button:not(.collapsed) {
    font-size: 14px;
  }


  .faq-answer {
    font-size: 13px;
  }


  /* CASE LISTING */

  .case-first-content h2 {
    font-size: 20px;
  }


  .case-first-description {
    font-size: 14px;
  }


  /* ARTICLE */

  .article-detail-page h1,
  .article-hero h1,
  .article-header h1 {
    font-size: 30px;
  }


  :where(
    .article-content,
    .article-body
  ) h2 {
    font-size: 23px;
  }


  :where(
    .article-content,
    .article-body
  ) h3 {
    font-size: 18px;
  }


  /* PRIVACY */

  :where(
    .privacy-policy-content,
    .privacy-content,
    .policy-content
  ) h2 {
    font-size: 20px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  :where(
    .hero-title,
    .page-hero-title,
    .inner-hero-title,
    .about-hero-title,
    .services-hero-title,
    .service-hero-title,
    .startup-hero-title,
    .process-hero-title,
    .contact-hero-title,
    .resource-hero-title,
    .case-hero-title,
    .construction-saas-content h1
  ) {
    font-size: 29px;
  }


  :where(
    .section-heading h2,
    .services-heading h2,
    .industries-heading h2,
    .testimonial-heading h2,
    .insights-heading h2,
    .estimate-heading h2,
    .case-section-heading h2,
    .business-objectives-heading h2,
    .challenges-heading h2,
    .our-approach-heading h2,
    .solution-overview-content h2,
    .client-about-content h2,
    .key-capabilities-heading h2,
    .technology-stack-heading h2,
    .similar-projects-heading h2,
    .result-impact-heading h2
  ) {
    font-size: 25px;
  }


  .article-detail-page h1,
  .article-hero h1,
  .article-header h1 {
    font-size: 27px;
  }

}