/* DeepCiphers / Module 1: typography only.
   Important declarations are contained in one cascade layer so legacy page
   overrides cannot fragment the type system. No layout, component surfaces,
   button geometry, section gaps, borders or animation rules belong here. */
@import url('/assets/css/heading-accent-font.css');

@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-700.woff2') format('woff2'); }

@layer dc-typography {
  :root {
    --dc-type-family: 'DeepCiphers Jakarta', 'Plus Jakarta Sans', Arial, sans-serif;
    --dc-type-ink: #000;
    --dc-type-accent: #26D06A;
    --dc-type-heading-color: var(--dc-type-ink);
    --dc-type-accent-color: #26D06A;
    --dc-type-accent-decoration: none;
    --dc-type-handwritten-family: 'DeepCiphers Brush', var(--dc-type-family);
    --dc-type-handwritten-weight: 400;
    --dc-type-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --dc-type-compact-h1: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
    --dc-type-h2: clamp(1.875rem, 1.35rem + 2vw, 3rem);
    --dc-type-subheading: clamp(1.5rem, 1.25rem + .7vw, 1.875rem);
    --dc-type-card-title: clamp(1.25rem, 1.125rem + .3vw, 1.375rem);
    --dc-type-compact-title: 1.125rem;
    --dc-type-body: 1rem;
    --dc-type-card-body: .9375rem;
    --dc-type-support: .875rem;
    --dc-type-label: .75rem;
  }

  body,
  body :where(*):not(svg *, .bi, [class^='bi-'], [class*=' bi-'], pre, code, kbd, samp, pre *, code *) {
    font-family: var(--dc-type-family) !important;
  }
  body { font-synthesis: none; }
  svg :where(text, tspan) { font-family: var(--dc-type-family) !important; }

  :where(h1, h2, h3, h4, h5, h6, [data-dc-type='heading'], [data-dc-heading-copy='h2']) {
    color: var(--dc-type-heading-color) !important;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
    font-style: normal !important;
    text-wrap: balance;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    hyphens: none;
    max-inline-size: 100%;
    min-inline-size: 0;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
    text-shadow: none !important;
  }
  :where(h1) { font-size: var(--dc-type-h1) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; }
  /* An aria-hidden crossfade copy shares the semantic heading's metrics. */
  :where(h2, [data-dc-heading-copy='h2']) { font-size: var(--dc-type-h2) !important; line-height: 1.16 !important; }
  :where(h3) { font-size: var(--dc-type-card-title) !important; line-height: 1.3 !important; letter-spacing: -.025em !important; }
  :where(h4) { font-size: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -.02em !important; }
  :where(h5) { font-size: 1rem !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
  :where(h6) { font-size: var(--dc-type-support) !important; line-height: 1.5 !important; letter-spacing: 0 !important; }

  /* Fill the first line before wrapping instead of forcing equal lines.
     Compact card titles and the approved Home hero retain their treatment. */
  :where(h1, h2, [data-dc-heading-copy='h2']):not(.heroHeadline, .case-card h2, [data-dc-type='card-title'], #dc-support-heading) {
    text-wrap: wrap !important;
  }

  /* Standalone process title: longer opening, short destination. The lead
     can still wrap naturally when CMS wording exceeds the text column. */
  .next-heading { text-align: center; }
  .next-heading [data-dc-heading-format='lead-tail'] {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto !important;
    text-align: center;
  }
  [data-dc-heading-format='lead-tail'] > [data-dc-heading-lead] {
    display: block;
  }
  [data-dc-heading-format='lead-tail'] > [data-dc-heading-tail] {
    display: table !important;
    max-inline-size: 100%;
    margin-inline: auto;
  }

  /* Split copy columns keep their alignment, with ordinary inline phrases. */
  .contact-stage .hero-title h2 > :where(span, em),
  #career-title > :where(span, em) {
    display: inline !important;
    inline-size: auto;
    margin: 0;
    transform: none;
  }

  /* Long standalone leadership heading; portrait cards remain unchanged. */
  #about-leadership-title {
    max-inline-size: min(100%, 22ch);
    margin-inline: auto !important;
    text-align: center;
  }
  #about-leadership-title > span {
    display: inline !important;
    margin-inline: 0 !important;
  }

  /* The assistant title is compact UI text, not a page heading. Keep this
     exception in the typography layer so its important rules win over the
     shared H2 role without changing the panel or its controls. */
  [data-dc-support] #dc-support-heading {
    margin: 0 0 3px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.2px !important;
    text-align: left;
    text-transform: none !important;
    text-wrap: wrap;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    -webkit-text-fill-color: currentColor !important;
  }

  @media (max-width: 335px) {
    [data-dc-support] #dc-support-heading { font-size: clamp(11px, 5vw - 3px, 13px) !important; }
  }

  /* Text inside a heading belongs to its role, including split-line titles.
     Existing display, alignment, breaks and animation hooks are preserved. */
  :where(h1, h2, h3, h4, h5, h6, [data-dc-heading-copy='h2']) :where(span, em, strong, b, a) {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    white-space: normal !important;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
    text-shadow: none !important;
  }

  /* Compact page-title role for narrow split heroes and document headers. */
  :where(.hero-copy h1, .career-detail-intro h1, [data-dc-type='compact-page-title']) {
    font-size: var(--dc-type-compact-h1) !important;
  }

  /* Shared roles for legacy markup that uses H2 for cards or labels. */
  :where(.case-card h2, [data-dc-type='card-title']) {
    font-size: var(--dc-type-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -.025em !important;
    color: var(--dc-type-heading-color) !important;
  }
  :where(.career-detail-card h2, .statement h3, .culture-card h3,
    .industryPanel h3, .aiAppsCaseCard h3, [data-dc-type='subheading']) {
    font-size: var(--dc-type-subheading) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em !important;
  }
  :where(.job-card h3, .testimonialCard h3, [data-dc-type='compact-title']) {
    font-size: var(--dc-type-compact-title) !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em !important;
  }
  /* Email values are compact card text, not section titles. Fit the existing
     contact columns without an isolated final character on a second line. */
  :where(.channel-project, .channel-careers) .channel-copy strong {
    font-size: clamp(1rem, 5.1vw, 1.125rem) !important;
  }


  /* Body colour intentionally remains controlled by existing page styles.
     The separate readability module has not been started. */
  :where(p, blockquote, li:not(header li, nav li, footer li), .t-body, [data-dc-type='body']):not(:where(#dcGlobalHeader *)) {
    font-size: var(--dc-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: -.005em !important;
    overflow-wrap: anywhere;
  }
  :where(.service-card p, .tech-card p, .model-card p, .trust-card p,
    .project-card p, .case-card p, .value-card p, .next-card p,
    .pp-value-card p, .dc-home-service-card p, .problemProductCard p,
    .insightsCard p, .testimonialCard p, #process article p,
    [data-dc-type='card-body']) {
    font-size: var(--dc-type-card-body) !important;
    line-height: 1.65 !important;
  }
  :where(small, figcaption, .dc-detail-disclosure,
    [data-dc-type='support']) {
    font-size: var(--dc-type-support) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }
  :where(.eyebrow, .intro-eyebrow, .dc-detail-eyebrow, .mobile-dev-kicker,
    .final-eyebrow, .cta-badge, .value-badge, .card-label, .pp-eyebrow,
    .peg-eyebrow, .peg-index, .peg-tag, h5.t-btn,
    [data-dc-type='eyebrow']) {
    font-size: var(--dc-type-label) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .08em !important;
  }
  :where(.talk-subtitle, .howAiSubtitle, .aiFirstSubtitle, .testimonialsSubtitle, .toolsSubtitle, .insightsSubtitle, [data-dc-type='lead']) {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.015em !important;
  }

  /* Surfaces only set typography variables; their backgrounds are untouched. */
  :where([data-dc-surface='dark'], .oj-section, .testimonials-surface,
    .ns-card, .cta-card, .project-card, .final-cta, .accent-card,
    .pp-dark, .pp-transition-stage, .peg, .aiSignalPanel,
    .problemProductSection, .finalCtaCard, .dev-process-intro-section,
    .middle-svg-section, .decrypt-complete, .dc-home-page .hero) {
    --dc-type-heading-color: #fff;
    --dc-type-accent-color: var(--dc-type-accent);
    --dc-type-accent-decoration: none;
  }
  :where([data-dc-surface='light'], .problemProductCard, .pp-closing-panel) {
    --dc-type-heading-color: var(--dc-type-ink);
    --dc-type-accent-color: #26D06A;
    --dc-type-accent-decoration: none;
  }

  /* Only intentional heading phrases use the accent face. Never apply it to
     navigation, buttons, paragraphs, testimonials or ordinary card titles. */
  body :where(h1, h2, [data-dc-heading-copy='h2']) :is([data-dc-heading-accent], [data-dc-accent], .heading-accent,
    .heroHeadlineAccent, .aiFirstAccent, .toolsTitleAccent, em),
  body :where(h3) [data-dc-heading-accent] {
    font-family: var(--dc-type-handwritten-family) !important;
    font-weight: var(--dc-type-handwritten-weight) !important;
    font-synthesis: none;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: .005em !important;
    color: #26D06A !important;
    -webkit-text-fill-color: #26D06A !important;
    text-decoration: none !important;
    text-transform: none !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    padding-inline: .025em;
  }

  @media (max-width: 700px) {
    :root {
      --dc-type-body: .9375rem;
      --dc-type-card-body: .9375rem;
      --dc-type-h1: clamp(2rem, 1.5rem + 3vw, 4rem);
      --dc-type-compact-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem);
      --dc-type-h2: clamp(1.625rem, 1.35rem + 2vw, 3rem);
    }
    :where(.job-card h3, .testimonialCard h3, [data-dc-type='compact-title']) { font-size: 1.0625rem !important; }
    /* The existing arrow composition needs a second text line on small
       screens; the adjacent scrolling pillar cards retain their geometry. */
    #about-story h2 {
      flex-wrap: wrap;
      gap: .5rem 1rem;
      padding-inline: 0 !important;
    }
    #about-story h2 > [aria-hidden='true'] {
      margin-inline: 0 !important;
      min-inline-size: 1.5rem;
    }
    #about-story h2 > [data-dc-heading-accent] {
      flex-basis: 100%;
      min-inline-size: 0;
    }
  }
}