/* Shared reading rhythm. Layout and motion live in their own stylesheets. */
:root {
  --type-hero-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
  --type-title-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  --type-subtitle-size: clamp(1.5rem, 1.15rem + 1.25vw, 2.1rem);
  --type-story-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem);
  --type-card-title-size: clamp(1.125rem, 1.025rem + 0.35vw, 1.3rem);
  --type-body-size: 1rem;
  --type-small-size: 0.9375rem;
  --type-caption-size: 0.8125rem;
  --type-leading-heading: 1.2;
  --type-leading-card: 1.4;
  --type-leading-body: 1.75;
  --type-leading-control: 1.45;
  --type-leading-caption: 1.55;
  --type-heading-tracking: -0.025em;
}

html[lang="ar"] {
  --type-hero-size: clamp(1.85rem, 1.35rem + 1.8vw, 3rem);
  --type-title-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --type-caption-size: 0.875rem;
  --type-leading-heading: 1.5;
  --type-leading-card: 1.6;
  --type-leading-body: 1.9;
  --type-leading-control: 1.7;
  --type-leading-caption: 1.7;
  --type-heading-tracking: 0;
}

body {
  font-size: var(--type-body-size);
  line-height: var(--type-leading-body);
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.hero h1,
.detail-hero h1 {
  font-size: var(--type-hero-size);
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-heading-tracking);
}

.section-heading h2,
.feature-content h2,
.faq-intro h2 {
  font-size: var(--type-title-size);
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-heading-tracking);
}

.content-block h2,
.contact-info h2,
.contact-form h2,
.detail-cta h2 {
  font-size: var(--type-subtitle-size);
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-heading-tracking);
}

/* Override the earlier Arabic rules that tightened joined Arabic letters. */
html[lang="ar"] .hero h1,
html[lang="ar"] .detail-hero h1,
html[lang="ar"] .section-heading h2,
html[lang="ar"] .feature-content h2 {
  letter-spacing: 0;
}

.hero-copy > p:not(.eyebrow),
.detail-hero-copy > p:not(.eyebrow) {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: var(--type-leading-body);
}

.section-heading > p,
.feature-content > p,
.content-block > p,
.case-card p {
  font-size: var(--type-body-size);
  line-height: var(--type-leading-body);
}

.path-card h3 {
  font-size: var(--type-subtitle-size);
  line-height: var(--type-leading-heading);
}

.case-card h3 {
  font-size: var(--type-story-size);
  line-height: var(--type-leading-heading);
}

.program-card h3,
.service-card h3,
.institution-card__content h3 {
  font-size: var(--type-card-title-size);
  line-height: var(--type-leading-card);
}

.process-card h3,
.capability-card h3,
.roadmap-card h3,
.value-card h3,
.quick-fact strong {
  font-size: 1.0625rem;
  line-height: var(--type-leading-card);
}

.program-card p,
.service-card p,
.institution-card__content p,
.process-card p,
.capability-card p,
.roadmap-card p,
.value-card p {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-body);
}

.btn,
.text-link,
.service-card .text-link,
.whatsapp-float {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-control);
  letter-spacing: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.site-nav a,
.sticky-nav a {
  font-size: 0.875rem;
  line-height: var(--type-leading-control);
  letter-spacing: 0;
}

.language-link,
.language-code {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Icon glyphs use their own square line box, not the Arabic reading rhythm. */
.icon-button > i,
.menu-toggle > i,
.language-link > i,
.btn > i,
.text-link > i {
  line-height: 1;
}

.brand-word {
  line-height: 1.3;
}

.brand-word strong {
  font-family: var(--font-en);
  font-size: 1.3125rem;
  letter-spacing: -0.025em;
}

.brand-word small {
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

html[lang="ar"] .brand-word small {
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0;
}

.eyebrow,
html[lang="ar"] .eyebrow {
  font-size: var(--type-caption-size);
  line-height: var(--type-leading-caption);
}

.program-card .program-meta,
.relationship-label,
.case-label,
.credential-row span,
.tag-row span,
.roadmap-card strong,
.quick-fact span,
.metric-chip span,
.feature-badge span,
.breadcrumbs,
.form-note {
  font-size: var(--type-caption-size);
  line-height: var(--type-leading-caption);
}

.hero-proof li,
.trust-grid > p,
.stat-card span,
.client-note,
.ecosystem-panel__heading p {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-caption);
}

.ecosystem-panel__heading > span,
.faq-list summary {
  line-height: var(--type-leading-card);
}

.stat-card strong {
  font-size: clamp(2rem, 1.45rem + 2vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.metric-chip strong,
.feature-badge strong {
  font-size: 1.125rem;
  line-height: var(--type-leading-control);
  font-variant-numeric: tabular-nums;
}

.field label {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-control);
}

.field input,
.field select,
.field textarea {
  font-size: 1rem;
  line-height: var(--type-leading-control);
}

.form-status,
.preferences-status,
.preferences-dialog-status,
.preference-option span:last-child {
  font-size: var(--type-caption-size);
  line-height: var(--type-leading-caption);
}

.appearance-dialog__header h2 {
  font-size: 1.375rem;
  line-height: var(--type-leading-heading);
}

.appearance-dialog__header p {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-body);
}

.icon-button[data-tooltip]::after,
.language-link[data-tooltip]::after {
  font-size: var(--type-caption-size);
  line-height: var(--type-leading-caption);
}

.footer-column h2,
.sticky-nav h2 {
  font-size: 1rem;
  line-height: var(--type-leading-card);
}

.footer-column a {
  font-size: var(--type-small-size);
  line-height: var(--type-leading-body);
  overflow-wrap: anywhere;
}

.footer-bottom {
  font-size: var(--type-caption-size);
  line-height: var(--type-leading-caption);
}

@media (max-width: 1180px) {
  .site-nav a {
    font-size: 1rem;
  }
}