/* TITECH v3 · type.css: owned by the work order listed in work-orders/DESIGN-SPEC.md §1. */
/* The type system (DESIGN-SPEC §3), applied over the legacy selectors at equal or higher specificity.
   WO-22a (2026-09-23) moved the scale onto the owner's brandbook: H1 48 / H2 40 / H3 32 / H4 24 at the desktop
   end, heading line height 1.2 x size and body line height 1.4 x size. The fluid clamp() approach is unchanged,
   so every heading still shrinks on a phone; only the ceilings and the leading moved. The home hero keeps one
   step above H1 (64px), the display size the brandbook's four-step table does not cover. */

:root {
  /* 40 -> 64px: the home hero, one step above H1. The vw term is set by the 1001-1200px band, where hero.css holds
     the headline on one line: Inter sets "Connecting tomorrow." about 7% wider than Plex Sans did, and at the old
     rate the line overran its 547px column at 1024 and ran into the orbit art. */
  --fs-display: clamp(2.5rem, 1.4rem + 2.95vw, 4rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 2.3vw, 3rem);         /* 36 -> 48px  (brandbook H1) */
  --fs-h2: clamp(1.875rem, 1.4rem + 1.55vw, 2.5rem);      /* 30 -> 40px  (brandbook H2) */
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);       /* 22 -> 28px  (architect: one step under the brandbook's 32, so card titles stop wrapping under 40px section titles) */
  --fs-h4: clamp(1.125rem, 1.02rem + .55vw, 1.5rem);      /* 18 -> 24px  (brandbook H4) */
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --lh-heading: 1.2; /* brandbook: 1.2 x size on every heading */
  --lh-body: 1.5;    /* architect: between the brandbook's 1.4 and the 1.65 we had — 1.4 reads cramped on screen */
}

/* Brand faces (brandbook): Inter for Latin. site.css names the family on body and on the form controls, so both
   are restated here rather than edited in the legacy file. */
body, input, textarea, select, button { font-family: var(--font-sans); }
body { color: var(--ctx-body); font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, h3, h4 { color: var(--ctx-heading); }
h4 { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-heading); }

/* Display and headings */
.hero h1 {
  color: var(--ctx-heading);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: var(--lh-heading);
  letter-spacing: -.03em; /* Inter is a touch wider than Plex Sans at display sizes */
}
.page-hero h1, main h1 {
  color: var(--ctx-heading);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: var(--lh-heading);
  letter-spacing: -.025em;
}
.section-title, .proof-intro h2, .industry-overview h2, .deliverables-panel h2, .cta-band h2,
.solution-row-copy > h2, .solution-row-copy > .wp-block-group__inner-container > h2,
.contact-details h2, .contact-form-panel > h2, .content-prose h2 {
  color: var(--ctx-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
}
.service-card h3, .why-card h3, .capability-card h3, .usecase-card h3, .process-step h3, .industry-title,
.timeline-item h3, .timeline .timeline-item h3, .leadership-card h3, .leadership-grid .leadership-card h3, .deliverables-panel h3 {
  color: var(--ctx-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -.01em;
}

/* Lead and small text */
.hero-lead, .section-intro, .page-hero .hero-lead, .page-hero .section-intro, .solution-row-copy .section-intro,
.profile-copy .section-intro {
  color: var(--ctx-body);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;
}
.site-footer, .site-footer p, .site-footer address, .footer-bottom, .footer-bottom p,
.form-note, .enquiry-form__hint, .enquiry-form__privacy {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Labels: Plex Mono, uppercase, tracked. The longer selectors match legacy size overrides. */
.eyebrow, .section-kicker, .service-num, .art-label, .hero-meta, .proof-label, .cert-standard, .breadcrumb, .industry-no,
.page-hero .eyebrow, .cta-band .section-kicker, .cta-band .cta-contact .section-kicker,
.service-card p.service-num, .process-step .service-num, .leadership-grid .leadership-card .service-num,
.proof-card .proof-label, .cert-grid .cert-item .cert-standard,
.partner-strip > .section-kicker, .partner-strip > .wp-block-group__inner-container > .section-kicker,
.profile-copy .section-kicker, .contact-details .section-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow, .section-kicker, .service-num, .art-label, .hero-meta, .breadcrumb, .industry-no,
.page-hero .eyebrow, .solution-row-copy .eyebrow,
.partner-strip > .section-kicker, .partner-strip > .wp-block-group__inner-container > .section-kicker,
.profile-copy .section-kicker, .contact-details .section-kicker {
  color: var(--ctx-muted);
}
.proof-card .proof-label, .cert-grid .cert-item .cert-standard { color: var(--ctx-heading); }

/* The legacy dot becomes a 24×1px spectrum line. Flex order puts it at the inline-start in both directions. */
.eyebrow, .section-kicker { gap: 12px; }
.eyebrow::before, .section-kicker::before,
.page-hero .eyebrow::before, .solution-row-copy .eyebrow::before,
.section-navy .section-kicker::before, .cta-band .section-kicker::before {
  flex: 0 0 24px;
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: var(--g-spectrum);
}

.proof-card .proof-number, .fact-card .fact-value, [data-count] { font-variant-numeric: tabular-nums; }
code, kbd, samp, pre { font-family: var(--font-mono); }

/* Arabic. Last in the file so it wins: each selector repeats a Latin one above behind the
   :is([dir="rtl"], html[lang^="ar"]) scope, which adds (0,1,1) over it and over the legacy [dir="rtl"] rules.
   Plex Mono has no Arabic glyphs, so labels drop it. */
/* Arabic: Tajawal (brandbook). site.css sets the Arabic family on html[lang^="ar"] body, so this rule restates it
   with the same reach; the form controls inherit it through the body rule above. Arabic keeps the DESIGN-SPEC §3
   leading (body 1.8, headings the Latin value + 0.15), which the brandbook's 1.4 would make too tight to read. */
:is([dir="rtl"], html[lang^="ar"]) body,
:is([dir="rtl"], html[lang^="ar"]) :is(input, textarea, select, button) {
  font-family: var(--font-arabic);
  line-height: 1.8;
}
:is([dir="rtl"], html[lang^="ar"]) :is(h1, h2, h3, h4) { font-weight: 500; }
:is([dir="rtl"], html[lang^="ar"]) h4 { line-height: 1.35; }
:is([dir="rtl"], html[lang^="ar"]) .hero h1 {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.35;
}
:is([dir="rtl"], html[lang^="ar"]) .page-hero h1,
:is([dir="rtl"], html[lang^="ar"]) main h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.35;
}
:is([dir="rtl"], html[lang^="ar"]) .section-title,
:is([dir="rtl"], html[lang^="ar"]) .proof-intro h2,
:is([dir="rtl"], html[lang^="ar"]) .industry-overview h2,
:is([dir="rtl"], html[lang^="ar"]) .deliverables-panel h2,
:is([dir="rtl"], html[lang^="ar"]) .cta-band h2,
:is([dir="rtl"], html[lang^="ar"]) .solution-row-copy > h2,
:is([dir="rtl"], html[lang^="ar"]) .solution-row-copy > .wp-block-group__inner-container > h2,
:is([dir="rtl"], html[lang^="ar"]) .contact-details h2,
:is([dir="rtl"], html[lang^="ar"]) .contact-form-panel > h2,
:is([dir="rtl"], html[lang^="ar"]) .content-prose h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.35;
}
:is([dir="rtl"], html[lang^="ar"]) .service-card h3,
:is([dir="rtl"], html[lang^="ar"]) .why-card h3,
:is([dir="rtl"], html[lang^="ar"]) .capability-card h3,
:is([dir="rtl"], html[lang^="ar"]) .usecase-card h3,
:is([dir="rtl"], html[lang^="ar"]) .process-step h3,
:is([dir="rtl"], html[lang^="ar"]) .industry-title,
:is([dir="rtl"], html[lang^="ar"]) .timeline-item h3,
:is([dir="rtl"], html[lang^="ar"]) .timeline .timeline-item h3,
:is([dir="rtl"], html[lang^="ar"]) .leadership-card h3,
:is([dir="rtl"], html[lang^="ar"]) .leadership-grid .leadership-card h3,
:is([dir="rtl"], html[lang^="ar"]) .deliverables-panel h3 {
  font-weight: 500;
  line-height: 1.35;
}
:is([dir="rtl"], html[lang^="ar"]) .hero-lead,
:is([dir="rtl"], html[lang^="ar"]) .section-intro,
:is([dir="rtl"], html[lang^="ar"]) .page-hero .hero-lead,
:is([dir="rtl"], html[lang^="ar"]) .page-hero .section-intro,
:is([dir="rtl"], html[lang^="ar"]) .solution-row-copy .section-intro,
:is([dir="rtl"], html[lang^="ar"]) .profile-copy .section-intro,
:is([dir="rtl"], html[lang^="ar"]) .site-footer,
:is([dir="rtl"], html[lang^="ar"]) .site-footer p,
:is([dir="rtl"], html[lang^="ar"]) .site-footer address,
:is([dir="rtl"], html[lang^="ar"]) .footer-bottom,
:is([dir="rtl"], html[lang^="ar"]) .footer-bottom p,
:is([dir="rtl"], html[lang^="ar"]) .form-note,
:is([dir="rtl"], html[lang^="ar"]) .enquiry-form__hint,
:is([dir="rtl"], html[lang^="ar"]) .enquiry-form__privacy {
  line-height: 1.8;
}
:is([dir="rtl"], html[lang^="ar"]) .eyebrow,
:is([dir="rtl"], html[lang^="ar"]) .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .service-num,
:is([dir="rtl"], html[lang^="ar"]) .art-label,
:is([dir="rtl"], html[lang^="ar"]) .hero-meta,
:is([dir="rtl"], html[lang^="ar"]) .proof-label,
:is([dir="rtl"], html[lang^="ar"]) .cert-standard,
:is([dir="rtl"], html[lang^="ar"]) .breadcrumb,
:is([dir="rtl"], html[lang^="ar"]) .industry-no,
:is([dir="rtl"], html[lang^="ar"]) .page-hero .eyebrow,
:is([dir="rtl"], html[lang^="ar"]) .cta-band .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .cta-band .cta-contact .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .service-card p.service-num,
:is([dir="rtl"], html[lang^="ar"]) .process-step .service-num,
:is([dir="rtl"], html[lang^="ar"]) .leadership-grid .leadership-card .service-num,
:is([dir="rtl"], html[lang^="ar"]) .proof-card .proof-label,
:is([dir="rtl"], html[lang^="ar"]) .cert-grid .cert-item .cert-standard,
:is([dir="rtl"], html[lang^="ar"]) .partner-strip > .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .partner-strip > .wp-block-group__inner-container > .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .profile-copy .section-kicker,
:is([dir="rtl"], html[lang^="ar"]) .contact-details .section-kicker {
  font-family: var(--font-arabic);
  font-size: .8125rem; /* 13px */
  font-weight: 500;
  line-height: 1.6;
  text-transform: none;
}
/* Tracking breaks Arabic joining, so it is zero on every element. The second :is() argument lends
   the list the specificity of the strongest tracking rule (.cert-grid .cert-item .cert-standard). */
:is([dir="rtl"], html[lang^="ar"]) :is(*, .cert-grid .cert-item .cert-standard) { letter-spacing: 0; }

/* Architect: text selection (spec had no value). */
::selection { background: rgb(76 141 255 / .28); color: inherit; }