/* S-Consulting brand typography contract
   Source: supplied brand brief — Lato 700, #3F63C8, #FFFFFF. */
:root {
  --brand-title-font: "Lato", system-ui, sans-serif;
  --brand-title-weight: 700;
  --brand-primary: #3F63C8;
  --brand-white: #FFFFFF;
  --brand-display-size: clamp(3rem, 5.25vw, 5.6rem);
  --brand-display-leading: .88;
  --brand-display-tracking: -.074em;
  --brand-section-size: clamp(2.25rem, 3.6vw, 4.4rem);
  --brand-section-leading: .91;
  --brand-section-tracking: -.066em;
}

/* Semantic title contract. Individual pages retain their intentional
   responsive size/layout rules, but cannot silently switch typeface or weight. */
:where(h1, h2, h3, .story-instrument__title, .story-question) {
  font-family: var(--brand-title-font) !important;
  font-weight: var(--brand-title-weight) !important;
}

/* Shared display hierarchy for every semantic page title. */
:where(h1) {
  font-family: var(--brand-title-font) !important;
  font-weight: var(--brand-title-weight) !important;
  font-size: var(--brand-display-size) !important;
  line-height: var(--brand-display-leading) !important;
  letter-spacing: var(--brand-display-tracking) !important;
}

/* Explicit hero aliases cover any non-semantic display wrappers. */
:where(.story-hero-copy h1, .about-hero--operational h1, .services-hero h1,
  .industries-hero h1, .insights-hero h1, .contact-hero h1,
  .careers-hero h1, .case-studies-hero h1, .csd-hero h1) {
  font-family: var(--brand-title-font) !important;
  font-weight: var(--brand-title-weight) !important;
  font-size: var(--brand-display-size) !important;
  line-height: var(--brand-display-leading) !important;
  letter-spacing: var(--brand-display-tracking) !important;
}

/* Brief primary blue on light-theme headline surfaces. */
:where(.about-page, .services-page, .contact-immersive-page, .careers-immersive-page)
  :is(h1, h2, h3, .story-instrument__title, .story-question) {
  color: var(--brand-primary) !important;
}

/* Dark-theme page headings retain the brief white contrast treatment. */
:where(.insights-immersive-page, .case-studies-immersive-page, .case-study-immersive-page,
  .industries-immersive-page) :is(h1, h2, h3) {
  color: var(--brand-white) !important;
}

@media (max-width: 640px) {
  :where(h1, .story-hero-copy h1, .about-hero--operational h1, .services-hero h1,
    .industries-hero h1, .insights-hero h1, .contact-hero h1,
    .careers-hero h1, .case-studies-hero h1, .csd-hero h1) {
    font-size: clamp(2.45rem, 11vw, 3.55rem) !important;
  }
}