/* Shared CTT typography and logo system. Keep this file identical in concepts 1–3. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

:root {
  --font-family-body: "Manrope", "Noto Sans SC", system-ui, sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-size-h1: clamp(3.25rem, 6.4vw, 5.75rem);
  --font-size-h2: clamp(2.625rem, 4.6vw, 4.5rem);
  --font-size-h3: clamp(1.5rem, 2.2vw, 1.875rem);
  --font-size-body: 1.0625rem;
  --font-size-lead: clamp(1.125rem, 1.55vw, 1.3125rem);
  --font-size-label: .875rem;
  --font-size-caption: .8125rem;
  --line-height-h1: 1.12;
  --line-height-h2: 1.16;
  --line-height-h3: 1.28;
  --line-height-body: 1.72;
  --line-height-lead: 1.62;
  --font-weight-body: 400;
  --font-weight-heading: 700;
  --font-weight-label: 700;
  --type-space-heading: 1.125rem;
  --type-space-paragraph: 1rem;
  --type-measure: 68ch;
  --type-measure-lead: 56ch;
  --section-space: clamp(5.5rem, 9vw, 9rem);
  --content-gap: clamp(2rem, 5vw, 5.5rem);
  --control-height: 3.5rem;
}

html { font-size: 100%; overflow-x: clip; }
body, button, input, textarea, select {
  font-family: var(--font-family-body) !important;
}
body :is(h1, h2, h3, h4, p, span, strong, small, a, button, label, input,
  textarea, select, li, figcaption, address, summary) {
  font-family: var(--font-family-body) !important;
}
body { min-width: 20rem; overflow-x: clip; font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-body); }
body :is(main, section, article, div, header, footer, nav, figure) { min-width: 0; }

/* Semantic elements and optional utility classes use one scale on every route. */
h1, .type-h1, h2, .type-h2, h3, .type-h3 {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-heading) !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  letter-spacing: -.04em !important;
}
h1, .type-h1 {
  font-size: var(--font-size-h1) !important;
  line-height: var(--line-height-h1) !important;
  margin-block: 0 var(--type-space-heading) !important;
}
h2, .type-h2 {
  font-size: var(--font-size-h2) !important;
  line-height: var(--line-height-h2) !important;
  margin-block: 0 var(--type-space-heading) !important;
}
h3, .type-h3 {
  font-size: var(--font-size-h3) !important;
  line-height: var(--line-height-h3) !important;
  margin-block: 0 .75rem !important;
}
main p, main li, .site-footer p, .type-body {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-body) !important;
  font-weight: var(--font-weight-body);
}
main p { max-width: var(--type-measure); }
main p + p { margin-top: var(--type-space-paragraph); }
main :is(h1, h2, h3) + p { margin-top: 0; }
main :is(.hero-lead, .localized-lead, .inner-hero-content > p:last-child,
  .c3-hero-copy > p:not(.c3-eyebrow), .c3-statement > p:not(.c3-eyebrow),
  .c3-contact > p:not(.c3-eyebrow), .c2-hero-center > span), .type-lead {
  font-size: var(--font-size-lead) !important;
  line-height: var(--line-height-lead) !important;
  max-width: var(--type-measure-lead);
}
main :is(.section-kicker, .eyebrow, .c2-kicker, .c3-eyebrow,
  .c3-caption, .c2-hero-center > p:first-child), .type-label {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-label) !important;
  line-height: 1.5 !important;
  font-weight: var(--font-weight-label) !important;
  letter-spacing: .08em !important;
}
main :is(.section-kicker, .eyebrow, .c2-kicker, .c3-eyebrow) { margin-bottom: .875rem !important; }
main :is(small, figcaption span), .type-caption {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 1.5 !important;
}
main :is(.value-copy strong, .c2-category strong, .material-catalog-grid strong),
.site-footer .footer-links strong { font-family: var(--font-family-heading) !important; }
main :is(.value-copy strong, .c2-category strong, .material-catalog-grid strong) {
  font-size: var(--font-size-h3) !important;
  line-height: var(--line-height-h3) !important;
  font-weight: var(--font-weight-heading) !important;
}

/* Hierarchy audit: predictable line breaks, spacing and CTA prominence. */
main h1 { max-width: 18ch; }
main h2 { max-width: 22ch; }
main h3 { max-width: 28ch; }
main :is(.hero-copy, .inner-hero-content, .localized-hero-copy, .c2-hero-center, .c3-hero-copy) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main :is(.hero-actions, .contact-form-actions) { margin-top: 2rem; }
.primary-cta, .header-cta, .outline-cta, .secondary-form-cta {
  min-height: var(--control-height) !important;
  padding-inline: 1.5rem !important;
  font-size: .875rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap;
}
.primary-cta { box-shadow: 0 .75rem 2rem rgba(5, 31, 43, .18); }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 1rem 2.4rem rgba(5, 31, 43, .24); }
.inline-link, .text-cta { font-size: .9375rem !important; line-height: 1.45 !important; font-weight: 700 !important; }
.site-header .desktop-nav a {
  font-size: .8125rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.site-header .lang-switch a { font-size: .75rem !important; font-weight: 700 !important; }
.site-footer :is(a, span, address) { font-size: .9375rem; line-height: 1.6; }
main :is(.intro-section, .products-section, .process-section, .quality-section,
  .story-section, .values-section, .product-detail-section, .capabilities-section,
  .portfolio-page-section, .contact-page-section) {
  padding-block: var(--section-space) !important;
}
main :is(.intro-grid, .story-grid, .process-grid, .quality-grid, .product-cta-grid,
  .contact-page-grid, .localized-hero-grid, .zh-two-col) { gap: var(--content-gap) !important; }
:focus-visible { outline: 3px solid #67d3c6; outline-offset: 4px; }

/* CJK needs a little more vertical room while following the same size hierarchy. */
.locale-zh, .locale-zh :is(h1, h2, h3, h4, p, span, strong, small, a,
  button, label, li, figcaption) {
  font-family: "Noto Sans SC", "Manrope", system-ui, sans-serif !important;
}
.locale-zh :is(h1, h2, h3) { letter-spacing: -.025em !important; }
.locale-zh h1 { line-height: 1.2 !important; }
.locale-zh h2 { line-height: 1.25 !important; }
.locale-zh h3 { line-height: 1.32 !important; }

/* The transparent CTT logo is white in dark headers and full-colour in footers. */
.site-header {
  background: rgba(17, 28, 48, .94) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 12px 32px rgba(13, 17, 31, .2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header .desktop-nav a { color: #eef3f5 !important; }
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active { color: #a8e5ed !important; }
.site-header .lang-switch {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}
.site-header .lang-switch a { color: #eef3f5 !important; }
.site-header .lang-switch a.active,
.site-header .lang-switch a:hover { background: #e8f3f5 !important; color: #142436 !important; }
.site-header .brand-logo {
  display: block;
  width: 8.375rem;
  height: auto;
  max-height: 2.75rem;
  object-fit: contain;
  filter: brightness(0) invert(1) !important;
}
.site-footer .footer-logo-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.25rem;
  min-height: 3.75rem;
  padding: .5rem .75rem !important;
  border: 1px solid rgba(17,28,48,.1);
  border-radius: .5rem;
  background: #fff !important;
  box-shadow: none;
}
.site-footer .brand-logo {
  display: block;
  width: 8.75rem;
  height: auto;
  max-height: 2.75rem;
  object-fit: contain;
  filter: none !important;
}

@media (max-width: 760px) {
  :root {
    --font-size-h1: clamp(2.75rem, 10.2vw, 4rem);
    --font-size-h2: clamp(2.25rem, 8vw, 3.25rem);
    --font-size-h3: clamp(1.375rem, 5.8vw, 1.625rem);
    --font-size-body: 1rem;
    --font-size-lead: 1.0625rem;
    --line-height-h1: 1.16;
    --line-height-h2: 1.2;
    --line-height-h3: 1.32;
    --type-space-heading: .875rem;
    --section-space: clamp(4.5rem, 17vw, 6.5rem);
    --content-gap: 2.25rem;
    --control-height: 3.375rem;
  }
  main h1, main h2, main h3 { max-width: 100%; }
  main :is(.hero-copy, .inner-hero-content, .localized-hero-copy, .c2-hero-center, .c3-hero-copy) { width: 100%; }
  .primary-cta, .outline-cta, .secondary-form-cta { width: 100%; justify-content: center; }
  .site-header .desktop-nav a { font-size: .875rem !important; }
  .site-header .brand-logo { width: 7.25rem; max-height: 2.375rem; }
  .site-footer .footer-logo-shell { width: 9.5rem; }
}