/*
  Typography bridge — maps existing component selectors onto the global type scale.
  Loaded last so one system wins over legacy per-section font-size clamps.
  Source of truth: design-tokens.css
*/

/* ── Display / hero H1 ─────────────────────────────────────────────────────── */
.home-hero__title,
.page-hero-editorial__title,
.svc-hero--video .svc-hero__title,
.svc-hero--media .svc-hero__title,
.cs-hero__title,
.cs-cine-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
  max-width: min(var(--text-measure-title), 100%);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Oversized cinematic names → still display, but capped (was up to 5.25rem) */
.home-work-stage__name,
.home-work__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
}

/* ── Page / section H1-scale titles ────────────────────────────────────────── */
.blog-article-title,
.portfolio-showcase-title,
.insight-article__title,
.home-section__title--xl,
.home-cta__title,
.appointment-hero h1,
.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
}

/* ── Section H2 ────────────────────────────────────────────────────────────── */
.home-section__title,
.work-stack__title,
.home-svc-rail__title,
.page-section-header__title,
.blog-featured-title,
.featured-insights__title,
.cs-related__title,
.home-ai__title,
.eits-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
}

/* ── H3 / card & list titles ───────────────────────────────────────────────── */
.home-insights-list__title,
.work-stack__heading,
.home-services-list__name,
.blog-card-title,
.insight-card__title,
.portfolio-card-title,
.cs-gallery__title,
.svc-faq-item summary,
.svc-process__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
}

/* ── H4 / small titles ─────────────────────────────────────────────────────── */
.svc-section__title,
.eits-row-list__title,
.featured-work-title,
.home-svc-rail__name,
.home-approach-list__title,
.footer-col__title,
.site-footer h4,
.svc-column__title,
.svc-deliverable__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
}

/* Must follow base .svc-section__title so --lg wins */
.svc-section__title--lg {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
}

/* ── Large body / intros ───────────────────────────────────────────────────── */
.home-hero__subhead,
.page-hero-editorial__subtitle,
.svc-hero--video .svc-hero__lede,
.svc-hero--media .svc-hero__lede,
.home-section__lede,
.work-stack__lede,
.home-cta__lede,
.page-section-header__lede,
.home-ai__lede,
.cs-hero__lede,
.blog-article-lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-lg-line);
  max-width: var(--text-measure-hero);
}

/* ── Normal body ───────────────────────────────────────────────────────────── */
.svc-overview__text,
.svc-section p,
.home-services-list__desc,
.home-insights-list__excerpt,
.blog-article-prose,
.blog-card-excerpt,
.featured-work-role,
.work-stack__copy,
.cs-cine-body p,
.eits-row-list__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-line);
}

.svc-overview__text,
.home-section__lede,
.page-section-header__lede,
.blog-article-lead,
.work-stack__lede {
  max-width: var(--text-measure);
}

/* ── Small / supporting ────────────────────────────────────────────────────── */
.home-insights-list__meta,
.blog-card-meta,
.featured-work-meta,
.cs-meta,
.portfolio-card-meta,
.insight-card__meta {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-small-line);
}

/* ── Eyebrows / labels ─────────────────────────────────────────────────────── */
.home-hero__eyebrow,
.home-section__eyebrow,
.work-stack__eyebrow,
.page-hero-editorial__eyebrow,
.svc-section .ds-eyebrow,
.featured-work-cat,
.home-hero__pause,
.home-hero__counter {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--text-eyebrow-tracking);
  line-height: var(--text-eyebrow-line);
}

.home-hero__tab,
.home-hero__tab-label {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  line-height: var(--text-label-line);
  text-transform: uppercase;
}

.featured-work-cat,
.blog-tag,
.insight-card__tag {
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.site-nav__link,
.site-nav__trigger,
.site-header__mobile-list a,
.site-flyout__link,
.mega-nav a,
.services-flyout a {
  font-family: var(--font-body);
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-line);
  letter-spacing: 0.01em;
}

.site-header .site-brand__mark {
  line-height: 0;
}

.site-flyout__overview,
.services-flyout__overview {
  font-size: var(--text-nav-size);
  font-weight: var(--font-weight-semibold);
}

/* ── Buttons / CTAs ────────────────────────────────────────────────────────── */
.ds-btn,
.home-btn,
.header-cta,
.eits-btn,
.cta-btn,
a.ds-btn {
  font-family: var(--font-body);
  font-size: var(--text-btn-size);
  font-weight: var(--text-btn-weight);
  line-height: var(--text-btn-line);
  letter-spacing: 0.01em;
}

.site-header .header-cta {
  font-size: var(--text-btn-size);
  font-weight: var(--text-btn-weight);
  letter-spacing: 0.02em;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer,
.site-footer p,
.site-footer a,
.site-footer li {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}

.site-footer .site-brand__name,
.site-footer .footer-brand__name {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
}

.site-footer h4,
.site-footer .footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--text-label-line);
}

/* ── Blog / article prose hierarchy ────────────────────────────────────────── */
.blog-article-prose h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
}

.blog-article-prose h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-h4-line);
}

.blog-article-prose p,
.blog-article-prose li {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  max-width: var(--text-measure);
}

/* ── Short-viewport hero safety (keep hierarchy, trim extremes) ──────────── */
@media (max-height: 780px) {
  .home-hero__title,
  .page-hero-editorial__title,
  .svc-hero--video .svc-hero__title,
  .svc-hero--media .svc-hero__title {
    font-size: clamp(1.5rem, 3.8vh + 0.4rem, var(--text-display-size));
  }

  .home-hero__subhead,
  .page-hero-editorial__subtitle {
    font-size: var(--text-body-size);
  }
}

/* Narrow / mid phones & small tablets — force token scale over legacy local clamps */
@media (max-width: 900px) {
  body.home-page .home-hero__title,
  .page-hero-editorial__title,
  .home-work-stage__name,
  .home-work__title {
    font-size: var(--text-display-size);
    max-width: min(var(--text-measure-title), 100%);
    line-height: var(--text-display-line);
  }

  body.home-page .home-hero__subhead,
  .page-hero-editorial__subtitle,
  .home-work-stage__excerpt {
    font-size: var(--text-body-size);
  }

  body.home-page .home-hero__actions .ds-btn,
  body.home-page .home-hero__actions .home-btn {
    min-height: 48px;
    font-size: var(--text-btn-size);
  }
}

@media (max-width: 640px) {
  body.home-page .home-hero__title {
    font-size: var(--text-display-size);
    max-width: min(var(--text-measure-title), 100%);
    line-height: var(--text-display-line);
  }

  body.home-page .home-hero__subhead {
    font-size: var(--text-body-size);
  }
}

/* Shared interactive buttons */
.ds-btn,
.home-btn,
a.ds-btn {
  min-height: 48px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ── Tailwind CDN size utilities → design scale ─────────────────────────────
   Tailwind Play CDN injects utilities that can fight the design system.
   Keep color/spacing utilities; normalize type sizes on marketing content. */
main .text-5xl,
main .md\:text-5xl,
main .lg\:text-5xl,
main .text-4xl,
main .md\:text-4xl,
main .lg\:text-4xl {
  font-size: var(--text-h1-size) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--text-h1-line) !important;
  letter-spacing: var(--text-h1-tracking) !important;
}

main .text-3xl,
main .md\:text-3xl,
main .lg\:text-3xl,
main .text-\[2\.75rem\],
main .lg\:text-\[2\.75rem\] {
  font-size: var(--text-h2-size) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--text-h2-line) !important;
}

main .text-2xl,
main .md\:text-2xl {
  font-size: var(--text-h3-size) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--text-h3-line) !important;
}

main .text-xl {
  font-size: var(--text-h4-size) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--text-h4-line) !important;
}

main .text-lg {
  font-size: var(--text-body-lg-size) !important;
  line-height: var(--text-body-lg-line) !important;
}

main .text-base {
  font-size: var(--text-body-size) !important;
  line-height: var(--text-body-line) !important;
}

main .text-sm {
  font-size: var(--text-small-size) !important;
  line-height: var(--text-small-line) !important;
}

main .text-xs {
  font-size: var(--text-small-size) !important;
  line-height: var(--text-small-line) !important;
}

/* How-we-work step cards */
.how-step-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line);
}

.how-step-text {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.how-step-num {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
}

.section-badge {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}
.home-hero__eyebrow,
.page-hero-editorial__eyebrow,
.home-section__eyebrow,
.work-stack__eyebrow,
.page-section-header__eyebrow {
  margin-bottom: 0.75rem;
}

.home-hero__title + .home-hero__subhead,
.page-hero-editorial__title + .page-hero-editorial__subtitle,
.home-section__title + .home-section__lede,
.page-section-header__title + .page-section-header__lede,
.work-stack__title + .work-stack__lede {
  margin-top: 1.25rem;
}

.home-hero__subhead + .home-hero__actions,
.page-hero-editorial__subtitle + .page-hero-editorial__actions,
.home-section__lede + .home-section__actions,
.home-cta__lede + .home-cta__actions {
  margin-top: 1.75rem;
}

.home-services-list__name + .home-services-list__desc,
.home-insights-list__title + .home-insights-list__excerpt,
.featured-work-title + .featured-work-role,
.eits-row-list__title + .eits-row-list__desc {
  margin-top: 0.5rem;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.eits-label,
.eits-form label,
label.eits-label {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-label-line);
  letter-spacing: 0.01em;
}

.eits-field,
.eits-form input,
.eits-form select,
.eits-form textarea,
.phone-number-input {
  font-family: var(--font-body);
  font-size: var(--text-form-size);
  line-height: var(--text-form-line);
}

.eits-form .text-xs,
.eits-form .eits-hint,
.eits-form .mt-1\.5 {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.cs-breadcrumb,
.cs-breadcrumb a,
.cs-breadcrumb li,
.breadcrumb,
nav[aria-label="Breadcrumb"] {
  font-family: var(--font-body);
  font-size: var(--text-breadcrumb-size);
  line-height: var(--text-breadcrumb-line);
}

/* ── Buttons / nav — long translations ─────────────────────────────────────── */
.ds-btn,
.home-btn,
.header-cta,
.eits-btn {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}

.site-nav__link,
.site-header__mobile-list a {
  overflow-wrap: break-word;
}

/* ── Cards / CTA headings already on tokens; balance long titles ───────────── */
.home-hero__title,
.page-hero-editorial__title,
.ds-h1,
.ds-h2,
.ds-display,
.eits-cta__title,
.home-cta__title,
.svc-hub-rows__title {
  text-wrap: balance;
}

/* Error pages */
.eits-body .ds-h2,
section .ds-h2 {
  overflow-wrap: break-word;
}