/* Cyprex typography — matched to Cyprex_AITP_Final_Assignment_DM_Sans_Manrope_Final */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Manrope", "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
}

/* Match the final AITP type treatment rather than the older heavy Cyprex styles. */
.hero h1 {
  font-family: "Manrope", "DM Sans", sans-serif !important;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}

.section-title,
.section-intro h2,
.migration-copy h2,
.contact-copy h2 {
  font-family: "Manrope", "DM Sans", sans-serif !important;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

.cta h2 {
  font-family: "Manrope", "DM Sans", sans-serif !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}

.hero-lead,
.section-subtitle {
  line-height: 1.65;
}

.hero-lead { font-size: 20px; }
.section-subtitle { font-size: 18px; }

.button,
.desktop-nav a,
.nav a,
.mobile-nav summary {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
}

.button { font-weight: 650 !important; letter-spacing: 0 !important; }
.desktop-nav a,
.nav a { font-size: 15px; font-weight: 600 !important; }

/* Reference file's final label treatment: sentence case, restrained tracking and weight. */
.eyebrow,
.uc-vertical,
.kpi-label,
.method-phase,
.hero-proof strong,
.panel-footer,
.system-map-footer {
  text-transform: none !important;
  letter-spacing: .01em !important;
}

.eyebrow {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.uc-vertical,
.kpi-label,
.method-phase,
.hero-proof strong {
  font-size: 13px !important;
  font-weight: 650 !important;
}

.panel-footer,
.system-map-footer { font-size: 12px !important; }

/* Keep component headings in Manrope even where older CSS used shorthand font declarations. */
.engagement-title,
.stat-value,
.method-num,
.method-title,
.impact-card b,
.smart b,
.tier-name,
.tier-price,
.service-card h3,
.article-card h3,
.product-main h2,
.migration-steps h3,
.approach-grid h3,
.contact-form h3,
.hub-card h2,
.hub-card h3,
.article h2,
.article h3 {
  font-family: "Manrope", "DM Sans", sans-serif !important;
}

/* Prevent synthetic 850/900 UI text from making the site look heavier than the AITP reference. */
.service-number,
.service-card > a,
.product-main small,
.migration-steps article > span,
.approach-grid b,
.text-link,
.article-card small,
.article-card > span,
.contact-direct-label,
.contact-form label > span,
.form-status,
.footer-main strong,
.hub-card small,
.hub-card span,
.cluster-nav a,
.related a {
  font-weight: 700 !important;
}

@media (max-width: 620px) {
  .hero h1 { font-size: 42px; }
  .section-subtitle { font-size: 17px; }
}