/*
 * Ibtikar Tech — Typography Scale Refinement V1
 * Shared responsive type hierarchy for public pages.
 * Keeps source composition intact while preventing oversized headings from
 * dominating the viewport on desktop, tablet and mobile.
 */

:root {
  --ibt-type-hero: clamp(40px, 4.45vw, 62px);
  --ibt-type-section: clamp(30px, 3.05vw, 44px);
  --ibt-type-section-compact: clamp(27px, 2.55vw, 38px);
  --ibt-type-card: clamp(20px, 1.75vw, 26px);
  --ibt-type-lead: clamp(14px, 1.15vw, 17px);
  --ibt-type-copy: clamp(13px, .98vw, 15px);
}

/* --------------------------------------------------------------------------
   INNER-PAGE HEROES
   Hero titles remain clearly dominant, but no longer occupy most of a desktop
   viewport or break into excessively tall stacks on medium screens.
   -------------------------------------------------------------------------- */
body.inner-page:not(.article-page) main :is(
  .platform-hero .hero-copy,
  .service-commerce-copy,
  .svc-hero__copy,
  .commerce-hero__copy,
  .product-hero__copy,
  .page-hero__copy
) h1 {
  max-width: 15ch !important;
  margin-block-start: 12px !important;
  margin-block-end: 16px !important;
  font-size: var(--ibt-type-hero) !important;
  line-height: 1.09 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
}

body.inner-page:not(.article-page) main :is(
  .platform-hero .hero-copy,
  .service-commerce-copy,
  .svc-hero__copy,
  .commerce-hero__copy,
  .product-hero__copy,
  .page-hero__copy
) > p {
  max-width: 58ch !important;
  font-size: var(--ibt-type-lead) !important;
  line-height: 1.88 !important;
}

/* Product/service source pages historically shipped with exceptionally large
   display type. This explicit cap wins over preserved source CSS. */
body.source-product-service .service-commerce-copy h1,
body[data-page="product-page-optimization"] :is(.service-commerce-copy,.svc-copy,.svc-hero__copy) h1 {
  font-size: clamp(38px, 4.15vw, 58px) !important;
  line-height: 1.1 !important;
}

/* --------------------------------------------------------------------------
   SHARED SECTION HEADINGS
   One visual tier for major section titles across home, service, commerce and
   category pages. Long-form article body typography is deliberately excluded.
   -------------------------------------------------------------------------- */
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
) h2 {
  margin-block-start: 8px !important;
  margin-block-end: 10px !important;
  font-size: var(--ibt-type-section) !important;
  line-height: 1.16 !important;
  letter-spacing: -.026em !important;
  text-wrap: balance !important;
}

/* Catch source-owned section titles that do not use a shared heading wrapper,
   while avoiding card titles and long-form articles. */
body:not(.article-page) main section > :is(.container,.service-detail-shell,.strategy-shell,.svc-container) > h2,
body:not(.article-page) main section > h2 {
  font-size: var(--ibt-type-section) !important;
  line-height: 1.16 !important;
  letter-spacing: -.026em !important;
  text-wrap: balance !important;
}

/* Supporting copy below a section title should read comfortably and never
   compete with the heading itself. */
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
) > p {
  max-width: 62ch !important;
  font-size: var(--ibt-type-copy) !important;
  line-height: 1.85 !important;
}

/* Keep heading groups compact enough that the next content appears within the
   same visual context, especially at 1366–1600px desktop widths. */
body:not(.article-page) main :is(
  .section-heading,
  .platform-heading,
  .service-detail-heading,
  .strategy-head
) {
  margin-block-end: clamp(24px, 2.6vw, 36px) !important;
}

/* Related-services carousel: title and controls stay on one calm row. */
body:not(.article-page) .service-related-carousel__header :is(.service-detail-heading,.platform-heading) h2 {
  max-width: 16ch !important;
  font-size: clamp(29px, 2.8vw, 41px) !important;
}

/* Final CTA is important, but should not jump to hero-level scale. */
body:not(.article-page) main :is(.page-cta,.cta-card,.final-cta,.service-final-cta) h2 {
  max-width: 18ch !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance !important;
}

/* Internal informational headings use the compact tier. */
body:not(.article-page) main :is(
  .split-layout,
  .commerce-category-principle,
  .service-fit-card,
  .timeline,
  .faq-list,
  .evidence-strip
) h2 {
  font-size: var(--ibt-type-section-compact) !important;
  line-height: 1.2 !important;
}

/* Card titles remain clearly below section-title scale. */
body:not(.article-page) main :is(
  .route-card,
  .platform-card,
  .service-related-card,
  .commerce-service-card,
  .fast-discovery-slide,
  .services-mobile-card,
  .service-problem-grid article,
  .service-result-grid article,
  .service-scope-grid article
) h3 {
  font-size: var(--ibt-type-card) !important;
  line-height: 1.3 !important;
  letter-spacing: -.012em !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE SCALE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --ibt-type-hero: clamp(38px, 5.8vw, 54px);
    --ibt-type-section: clamp(29px, 4.25vw, 40px);
    --ibt-type-section-compact: clamp(26px, 3.7vw, 35px);
    --ibt-type-card: clamp(20px, 2.35vw, 24px);
  }

  body.inner-page:not(.article-page) main :is(
    .platform-hero .hero-copy,
    .service-commerce-copy,
    .svc-hero__copy,
    .commerce-hero__copy,
    .product-hero__copy,
    .page-hero__copy
  ) h1 {
    max-width: 16ch !important;
  }
}

@media (max-width: 820px) {
  :root {
    --ibt-type-hero: clamp(34px, 9.4vw, 48px);
    --ibt-type-section: clamp(27px, 7.25vw, 36px);
    --ibt-type-section-compact: clamp(25px, 6.2vw, 32px);
    --ibt-type-card: clamp(19px, 5.25vw, 23px);
    --ibt-type-lead: clamp(14px, 3.7vw, 16px);
    --ibt-type-copy: clamp(13px, 3.35vw, 15px);
  }

  body.inner-page:not(.article-page) main :is(
    .platform-hero .hero-copy,
    .service-commerce-copy,
    .svc-hero__copy,
    .commerce-hero__copy,
    .product-hero__copy,
    .page-hero__copy
  ) h1 {
    max-width: 17ch !important;
    margin-block-end: 13px !important;
    line-height: 1.12 !important;
  }

  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
  ) h2 {
    line-height: 1.18 !important;
  }

  body:not(.article-page) .service-related-carousel__header {
    align-items: center !important;
  }

  body:not(.article-page) .service-related-carousel__header :is(.service-detail-heading,.platform-heading) h2 {
    max-width: 18ch !important;
    font-size: var(--ibt-type-section) !important;
  }
}

@media (max-width: 560px) {
  :root {
    --ibt-type-hero: clamp(32px, 10.7vw, 43px);
    --ibt-type-section: clamp(26px, 8.3vw, 34px);
    --ibt-type-section-compact: clamp(24px, 7.4vw, 30px);
    --ibt-type-card: clamp(19px, 5.8vw, 22px);
  }

  body.inner-page:not(.article-page) main :is(
    .platform-hero .hero-copy,
    .service-commerce-copy,
    .svc-hero__copy,
    .commerce-hero__copy,
    .product-hero__copy,
    .page-hero__copy
  ) h1 {
    max-width: none !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
  }

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

  body:not(.article-page) main :is(.page-cta,.cta-card,.final-cta,.service-final-cta) h2 {
    max-width: none !important;
    font-size: clamp(27px, 8vw, 34px) !important;
  }
}

/* Keep article reading hierarchy intentionally separate from marketing pages. */
body.article-page .article-body h2,
body.article-page .article-end h2 {
  text-wrap: pretty;
}