/*
 * Ibtikar Tech — Typography Scale Refinement V2
 * Final section-heading normalization across public pages.
 * Purpose: prevent oversized section titles, preserve hierarchy, and keep
 * headings readable and balanced from wide desktop down to small phones.
 */

:root {
  --ibt-section-title: clamp(29px, 2.45vw, 40px);
  --ibt-section-title-compact: clamp(26px, 2vw, 34px);
  --ibt-section-title-small: clamp(23px, 1.65vw, 30px);
  --ibt-section-copy: clamp(13px, .95vw, 15px);
}

/* Main marketing / service / category section headings. */
body:not(.article-page) main :is(
  .section-heading,
  .platform-heading,
  .service-detail-heading,
  .strategy-head,
  .commerce-subservices__intro,
  .commerce-expertise-heading,
  .commerce-performance-copy,
  .content-copy,
  .heading,
  .articles-heading,
  .product-related-heading,
  .service-related-heading,
  .faq-intro,
  .ibtx-static-heading,
  .services-cinema__heading,
  .cinematic-story__intro-inner,
  .ibtx-tharaa-split__content,
  .why-content,
  .commerce-category-principle,
  .product-section-heading,
  .commerce-section-heading,
  .svc-section-heading
) > h2,
body:not(.article-page) main :is(
  .section-heading,
  .platform-heading,
  .service-detail-heading,
  .strategy-head,
  .commerce-subservices__intro,
  .commerce-expertise-heading,
  .commerce-performance-copy,
  .content-copy,
  .heading,
  .articles-heading,
  .product-related-heading,
  .service-related-heading,
  .faq-intro,
  .ibtx-static-heading,
  .services-cinema__heading,
  .cinematic-story__intro-inner,
  .ibtx-tharaa-split__content,
  .why-content,
  .commerce-category-principle,
  .product-section-heading,
  .commerce-section-heading,
  .svc-section-heading
) h2 {
  max-width: 22ch !important;
  margin-block-start: 7px !important;
  margin-block-end: 10px !important;
  font-size: var(--ibt-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: -.022em !important;
  text-wrap: balance !important;
}

/* Source sections that expose h2 directly instead of using a heading wrapper. */
body:not(.article-page) main section > h2,
body:not(.article-page) main section > :is(
  .container,
  .ibtx-container,
  .service-detail-shell,
  .strategy-shell,
  .svc-container,
  .commerce-container
) > h2 {
  max-width: 22ch !important;
  font-size: var(--ibt-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: -.022em !important;
  text-wrap: balance !important;
}

/* Compact informational sections should never visually compete with primary sections. */
body:not(.article-page) main :is(
  .split-layout,
  .service-fit-card,
  .service-note,
  .timeline,
  .faq-list,
  .evidence-strip,
  .service-purchase-box,
  .storefront-anatomy,
  .service-deliverables,
  .service-exclusions
) h2 {
  max-width: 24ch !important;
  font-size: var(--ibt-section-title-compact) !important;
  line-height: 1.22 !important;
  letter-spacing: -.018em !important;
  text-wrap: balance !important;
}

/* Final CTA titles remain prominent without jumping to hero scale. */
body:not(.article-page) main :is(
  .cta-card,
  .cta-section,
  .page-cta,
  .final-cta,
  .service-final-cta
) h2 {
  max-width: 20ch !important;
  font-size: var(--ibt-section-title-compact) !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance !important;
}

/* Supporting copy should reinforce, not compete with, the heading. */
body:not(.article-page) main :is(
  .section-heading,
  .platform-heading,
  .service-detail-heading,
  .strategy-head,
  .commerce-subservices__intro,
  .commerce-expertise-heading,
  .commerce-performance-copy,
  .content-copy,
  .heading,
  .faq-intro,
  .ibtx-static-heading,
  .why-content
) > p {
  max-width: 62ch !important;
  font-size: var(--ibt-section-copy) !important;
  line-height: 1.82 !important;
}

/* Keep section heading blocks compact so the next content stays in context. */
body:not(.article-page) main :is(
  .section-heading,
  .platform-heading,
  .service-detail-heading,
  .strategy-head,
  .ibtx-static-heading,
  .faq-intro
) {
  margin-block-end: clamp(22px, 2.2vw, 32px) !important;
}

/* Related-service carousel header: title and controls stay visually balanced. */
body:not(.article-page) .service-related-carousel__header :is(
  .service-detail-heading,
  .platform-heading,
  .service-related-heading
) h2 {
  max-width: 18ch !important;
  font-size: var(--ibt-section-title-compact) !important;
}

/* Article pages use a calmer reading scale instead of marketing display sizes. */
body.article-page .article-body h2,
body.article-page .article-end h2,
body.article-page .article-related h2 {
  max-width: 28ch;
  font-size: clamp(27px, 2.2vw, 34px) !important;
  line-height: 1.28 !important;
  letter-spacing: -.014em !important;
  text-wrap: pretty !important;
}

@media (max-width: 1024px) {
  :root {
    --ibt-section-title: clamp(28px, 3.7vw, 36px);
    --ibt-section-title-compact: clamp(25px, 3.1vw, 32px);
    --ibt-section-title-small: clamp(22px, 2.6vw, 28px);
  }
}

@media (max-width: 820px) {
  :root {
    --ibt-section-title: clamp(26px, 6.5vw, 32px);
    --ibt-section-title-compact: clamp(24px, 5.7vw, 29px);
    --ibt-section-title-small: clamp(21px, 5vw, 26px);
    --ibt-section-copy: clamp(13px, 3.45vw, 15px);
  }

  body:not(.article-page) main :is(
    .section-heading,
    .platform-heading,
    .service-detail-heading,
    .strategy-head,
    .commerce-subservices__intro,
    .commerce-expertise-heading,
    .commerce-performance-copy,
    .content-copy,
    .heading,
    .articles-heading,
    .product-related-heading,
    .service-related-heading,
    .faq-intro,
    .ibtx-static-heading,
    .services-cinema__heading,
    .cinematic-story__intro-inner,
    .ibtx-tharaa-split__content,
    .why-content
  ) h2 {
    max-width: none !important;
    line-height: 1.2 !important;
    letter-spacing: -.016em !important;
  }

  body:not(.article-page) main :is(
    .section-heading,
    .platform-heading,
    .service-detail-heading,
    .strategy-head,
    .ibtx-static-heading,
    .faq-intro
  ) {
    margin-block-end: 22px !important;
  }

  body.article-page .article-body h2,
  body.article-page .article-end h2,
  body.article-page .article-related h2 {
    font-size: clamp(24px, 6.2vw, 29px) !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 520px) {
  :root {
    --ibt-section-title: clamp(25px, 7.4vw, 30px);
    --ibt-section-title-compact: clamp(23px, 6.6vw, 27px);
    --ibt-section-title-small: clamp(20px, 5.8vw, 25px);
  }

  body:not(.article-page) main :is(
    .cta-card,
    .cta-section,
    .page-cta,
    .final-cta,
    .service-final-cta
  ) h2 {
    max-width: none !important;
    font-size: var(--ibt-section-title-compact) !important;
  }
}