/* Shared semantic typography scale: restrained editorial system. */
:root {
  --surface-light: #ffffff;
  --surface-dark: #111111;
  --type-display-xl: clamp(52px, 6.7vw, 96px);
  --type-display-lg: clamp(42px, 5vw, 72px);
  --type-section-title: clamp(32px, 3.05vw, 44px);
  --type-card-title: clamp(22px, 2.1vw, 30px);
  /* Canonical IBM Plex Mono body size: matched to the approved FAQ answer size. */
  --type-ibm-body: 15px;

  --type-intro: var(--type-ibm-body);
  --type-body: var(--type-ibm-body);
  --type-card-body: var(--type-ibm-body);
  --type-faq-question: clamp(15px, 1.18vw, 17px);
  --type-faq-answer: var(--type-ibm-body);
  --type-meta: 12px;
  --type-nav: 12px;
  --type-button: 12px;

  --line-display-xl: 0.94;
  --line-display-lg: 0.96;
  --line-section-title: 1.05;
  --line-card-title: 1.18;
  --line-intro: 1.5;
  --line-body: 1.6;
  --line-card-body: 1.55;
  --line-faq-question: 1.4;
  --line-meta: 1.3;

  --type-section-intro-title: var(--type-display-lg);
  --type-intro-copy: var(--type-intro);
  --type-ibm-intro: var(--type-ibm-body);
  --type-ibm-card: var(--type-ibm-body);
  --type-ibm-meta: var(--type-meta);
  --line-ibm-intro: var(--line-intro);
  --line-ibm-body: var(--line-body);
  --line-ibm-card: var(--line-card-body);
  --line-ibm-meta: var(--line-meta);

  --space-section-xl: clamp(100px, 9vw, 130px);
  --space-section-lg: clamp(90px, 8vw, 120px);
  --space-section-md: clamp(70px, 6.5vw, 96px);
  --space-component-lg: clamp(40px, 4vw, 56px);
  --space-component-md: clamp(28px, 3vw, 40px);
}

html body .usural-services-process,
html body .section-main.footer-section {
  background: var(--surface-light) !important;
}

/* Major display roles. */
html body .v2-original-hero-title,
html body .usural-page-hero h1,
html body .service-detail-hero h1,
html body .journal-hero h1,
html body .article-hero h1 {
  font-size: var(--type-display-xl) !important;
  line-height: var(--line-display-xl) !important;
  max-width: min(100%, 18ch);
  overflow-wrap: normal;
  word-break: normal;
}

html body .usural-project-detail-page .project-hero-heading,
html body .usural-legacy-service-page .hero-title,
html body .usural-service-detail-page .hero-title {
  font-size: var(--type-display-xl) !important;
  line-height: var(--line-display-xl) !important;
}

html body.usural-internal-page.usural-system-page.usural-service-detail-page .usural-legacy-hero-duplicate .hero-title,
html body.usural-internal-page.usural-system-page.usural-service-detail-page .hero-title.usural-legacy-hero-duplicate,
html body.usural-internal-page.usural-project-detail-page .common-hero-section .project-detail-hero-wrapper .project-hero-heading {
  font-size: var(--type-display-xl) !important;
  line-height: var(--line-display-xl) !important;
}

html body.usural-v2 .v2-main .v2-original-hero-title,
html body.usural-system-page .usural-page-hero .usural-page-hero-copy h1,
html body.usural-service-detail-page .service-detail-hero .usural-page-hero-copy h1,
html body.usural-legacy-service-page .service-detail-hero .usural-page-hero-copy h1 {
  font-size: var(--type-display-xl) !important;
  line-height: var(--line-display-xl) !important;
}

html body .v2-section-title,
html body .v2-cta h2,
html body .section-intro__title,
html body .section-intro > :first-child > h2,
html body .usural-editorial-section.section-intro h2,
html body .usural-about-process .heading-style-h2-3,
html body .usural-about-principles .usural-about-section-heading h2,
html body .usural-services-process-heading h2,
html body .service-process .heading-18,
html body .service-projects-preview .heading-21,
html body .related > h2,
html body .closing-cta h2 {
  font-size: var(--type-display-lg) !important;
  line-height: var(--line-display-lg) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body .usural-project-detail-page .heading-style-h2-3 {
  font-size: var(--type-display-lg) !important;
  line-height: var(--line-display-lg) !important;
}

html body.usural-internal-page.usural-project-detail-page .container-large-4 .heading-style-h2-3 {
  font-size: var(--type-display-lg) !important;
  line-height: var(--line-display-lg) !important;
}

html body.usural-system-page .usural-about-principles .usural-about-section-heading h2 {
  font-size: var(--type-display-lg) !important;
  line-height: var(--line-display-lg) !important;
}

/* Secondary section headings. */
html body .service-editorial-section > .heading-style-h2,
html body .service-editorial-section > h4,
html body .service-editorial-section h1,
html body .service-editorial-section .heading-22,
html body .service-editorial-section .heading-23,
html body .service-final-statement .heading-24,
html body .service-final-statement h2,
html body .usural-contact-intro-block h2,
html body .usural-contact-final h2,
html body .article-body h2,
html body .faq-section .faq-section__title {
  font-size: var(--type-section-title) !important;
  line-height: var(--line-section-title) !important;
}

html body.usural-system-page .faq-section .faq-section__header .faq-section__title,
html body.usural-v2 .faq-section .faq-section__header .faq-section__title {
  font-size: var(--type-section-title) !important;
  line-height: var(--line-section-title) !important;
}

/* Component and card headings. */
html body .v2-project-info h3,
html body .v2-service-card h3,
html body .v2-reason h3,
html body .v2-insight h3,
html body .usural-service-card h2,
html body .service-info-card__title,
html body .service-info-card h2,
html body .service-process .heading-10,
html body .feature-bottom-content h5,
html body .post-card h2,
html body .featured-post h2,
html body .article-body h3,
html body .usural-about-principles > div:not(.usural-about-section-heading) > h2 {
  font-size: var(--type-card-title) !important;
  line-height: var(--line-card-title) !important;
}

html body.usural-system-page .usural-service-overview .usural-service-card h2 {
  font-size: var(--type-card-title) !important;
  line-height: var(--line-card-title) !important;
}

/* Intro and editorial statement copy. */
html body .section-intro__description,
html body .section-intro__description p,
html body .section-intro > :last-child > p,
html body .usural-editorial-section.section-intro p,
html body .journal-hero > p:last-child,
html body .article-hero > p,
html body .v2-original-hero-support {
  font-size: var(--type-intro) !important;
  line-height: var(--line-intro) !important;
}

/* Standard body and long-form copy. */
html body .v2-section-text:not(.section-intro__description),
html body .v2-about-text,
html body .v2-cta p,
html body .usural-about-process-step p,
html body .usural-contact-intro-block p,
html body .usural-contact-final p,
html body .service-detail-hero .usural-page-hero-copy > p:not(.usural-eyebrow),
html body .service-editorial-section .text-block-8,
html body .service-editorial-section p,
html body .service-process .accordion-content-text,
html body .service-projects-preview .margin-bottom-24px-2,
html body .service-final-statement .paragraph-57,
html body .article-body,
html body .article-body p,
html body .article-body li,
html body .project-detail-hero-paragraph,
html body .project-text {
  font-size: var(--type-body) !important;
  line-height: var(--line-body) !important;
}

/* Compact card copy. */
html body .v2-project-copy,
html body .v2-service-card p,
html body .v2-reason p,
html body .v2-insight p,
html body .usural-service-card p,
html body .service-info-card__copy,
html body .service-process .service-bullet-point p,
html body .feature-bottom-content .text-size-regular,
html body .post-card p,
html body .featured-post p:not(.eyebrow),
html body .related-card p {
  font-size: var(--type-card-body) !important;
  line-height: var(--line-card-body) !important;
}

/* FAQ typography stays within the shared accessible component. */
html body .faq-section .faq-list .faq-item .faq-heading .faq-question {
  font-size: var(--type-faq-question) !important;
  line-height: var(--line-faq-question) !important;
  padding: clamp(20px, 1.8vw, 26px) 0 !important;
}

html body .faq-section .faq-list .faq-item .faq-answer .faq-answer__inner p {
  font-size: var(--type-faq-answer) !important;
  line-height: var(--line-body) !important;
  padding-bottom: clamp(22px, 2vw, 30px) !important;
}

html body .faq-section {
  --faq-section-space: clamp(90px, 8vw, 120px);
  --faq-column-gap: clamp(56px, 6vw, 88px);
}

/* Homepage FAQ is the canonical shell on every page. */
html body .faq-section.faq-section {
  background: var(--surface-light) !important;
  padding: var(--faq-section-space) clamp(20px, 5vw, 72px) !important;
}

html body.usural-system-page.usural-internal-page .faq-section.faq-section {
  background: var(--surface-light) !important;
  padding: var(--faq-section-space) clamp(20px, 5vw, 72px) !important;
}

html body .faq-section.faq-section .faq-section__inner {
  padding: 0 !important;
  display: grid !important;
  gap: var(--faq-column-gap) !important;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 0.66fr) !important;
  margin: 0 auto !important;
  max-width: 1180px !important;
  width: 100% !important;
}

html body.usural-system-page.usural-internal-page .faq-section.faq-section .faq-section__inner {
  padding: 0 !important;
  display: grid !important;
  gap: var(--faq-column-gap) !important;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 0.66fr) !important;
  margin: 0 auto !important;
  max-width: 1180px !important;
  width: 100% !important;
}

/* Metadata, navigation and button labels. */
html body .usural-eyebrow,
html body .v2-eyebrow,
html body .v2-section-kicker,
html body .eyebrow,
html body .v2-project-meta,
html body .v2-service-index,
html body .article-meta,
html body .project-label-text,
html body .sticky-number,
html body .number-2 {
  font-size: var(--type-meta) !important;
  line-height: var(--line-meta) !important;
}

html body .navbar-link,
html body .v2-nav-links a,
html body .v2-mobile-panel a {
  font-size: var(--type-nav) !important;
}

html body .btn-primary,
html body .btn-text-link,
html body .button-solid,
html body .button-primary-3 {
  font-size: var(--type-button) !important;
}

/* Canonical IBM body-size bridge.
   This catches legacy Webflow/editorial copy that does not carry a dedicated body class.
   Eyebrows, metadata, nav, buttons and display headings remain on their own scales. */
html body .usural-editorial-section.section-intro p,
html body .usural-about-belief p,
html body .usural-about-international p,
html body .usural-about-process-step p,
html body .usural-about-cta-text,
html body .section-intro__description,
html body .section-intro__description p,
html body .usural-projects-intro-right p,
html body .usural-projects-process-right p,
html body .usural-projects-tagline p,
html body .service-editorial-section p,
html body .service-info-card__copy,
html body .service-projects-preview .margin-bottom-24px-2,
html body .project-detail-hero-paragraph,
html body .project-text {
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-body) !important;
}

/* Spacing rebalanced only on components enlarged by the recent type pass. */
html body .v2-section,
html body .usural-about-process,
html body .usural-services-process,
html body .service-info-grid,
html body .service-editorial-section,
html body .service-process,
html body .service-projects-preview {
  padding-top: var(--space-section-lg) !important;
  padding-bottom: var(--space-section-lg) !important;
}

html body .service-info-grid,
html body .service-editorial-section,
html body .service-process,
html body .service-projects-preview {
  --service-section-space: var(--space-section-lg);
}

html body .service-info-card,
html body .v2-service-body,
html body .v2-reason {
  padding: var(--space-component-md) !important;
}

html body .service-process .single-service-grid {
  padding-bottom: var(--space-component-lg) !important;
  padding-top: var(--space-component-lg) !important;
}

@media (max-width: 767px) {
  :root {
    --type-display-xl: clamp(38px, 12vw, 52px);
    --type-display-lg: clamp(32px, 9.8vw, 42px);
    --type-section-title: clamp(26px, 8vw, 32px);
    --type-card-title: clamp(20px, 6vw, 24px);
    --type-ibm-body: 15px;
    --type-intro: var(--type-ibm-body);
    --type-body: var(--type-ibm-body);
    --type-card-body: var(--type-ibm-body);
    --type-faq-question: clamp(15px, 4.1vw, 16px);
    --type-faq-answer: var(--type-ibm-body);
    --space-section-xl: clamp(78px, 22vw, 96px);
    --space-section-lg: clamp(72px, 20vw, 90px);
    --space-section-md: clamp(64px, 17vw, 78px);
    --space-component-lg: clamp(34px, 10vw, 44px);
    --space-component-md: clamp(26px, 8vw, 34px);
  }

  html body .faq-section {
    --faq-section-space: clamp(72px, 20vw, 90px);
    --faq-column-gap: clamp(32px, 10vw, 44px);
  }

  html body .faq-section.faq-section .faq-section__inner {
    grid-template-columns: 1fr !important;
  }

  html body.usural-system-page.usural-internal-page .faq-section.faq-section .faq-section__inner {
    grid-template-columns: 1fr !important;
  }

  html body .section-intro,
  html body .usural-editorial-section.section-intro {
    gap: clamp(24px, 8vw, 36px) !important;
    padding-bottom: var(--space-section-md) !important;
    padding-top: clamp(28px, 8vw, 40px) !important;
  }
}