*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ar);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="en"] body { font-family: var(--font-en); line-height: 1.6; }

h1, h2, h3, h4 { color: var(--navy); font-weight: 700; line-height: 1.3; }

/* Arabic needs more leading than Latin at the same size — its ascenders,
   descenders and diacritics occupy more vertical space. */
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.45; }

/* Positive letter-spacing severs Arabic OpenType contextual shaping: letters
   stop joining and every word renders as isolated letterforms. Tracking is
   therefore gated on the English locale, never applied globally. */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  /* Small text — brand teal fails AA here (2.97:1). Use the text-safe
     variant on light backgrounds; restored to brand teal only where the
     background is dark (see .section--dark override below, 6.02:1). */
  color: var(--teal-text);
}
html[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; }

/* Same rule applies to any other tracked/uppercase style: gate it on the
   English locale, never apply it unconditionally. */
.lead {
  font-size: 1.125rem;
  /* No explicit color: inherit whatever the surrounding context sets
     (charcoal by default from `body`, or the dark-section white below).
     A hardcoded color here is exactly the bug class that made the .card h3
     and bare h4 invisible on navy — let it flow through the cascade
     instead of re-fixing it per component. */
  opacity: 0.82;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-12); }
.section--dark { background: var(--navy); color: rgba(255, 255, 255, 0.86); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
/* Small teal text is fine here too — the background is navy, not light. */
.section--dark .eyebrow { color: var(--teal); }
.section--muted { background: var(--grey-light); }

/* Global link default. Every link so far is covered by a component class
   (.btn, .nav__link, .footer__col a, .topbar__contact a…), but the first
   unclassed <a> a later page task drops into body copy would otherwise
   fall back to the browser default blue — outside the five-colour palette.
   Dark-context override follows the same inherit-first pattern as .lead
   and the h4 fix above, rather than leaving a hardcoded navy-on-navy trap
   for the next `.section--dark` a link lands in.

   `:where(.section--dark)` — not plain `.section--dark` — is deliberate.
   A component's own `<a>` (.btn--primary, .btn--secondary…) is still just
   an `<a>` to this selector, and during review a plain `.section--dark a`
   here twice won a specificity fight it should have lost: once against
   `.btn--primary`'s single-class color, and again — because a pseudo-class
   adds a specificity point too — against `.btn--secondary:hover`'s own
   color, both times silently replacing a component's deliberate colour
   with this generic default. `:where()` always contributes zero
   specificity, so these two rules stay pinned at the same weight as the
   bare `a`/`a:hover` rules above (0,0,1)/(0,1,1) — low enough that *any*
   component rule, in *any* state, present or future, wins over them
   without needing its own specificity workaround. That's the actual fix;
   the compound `.btn.btn--primary` selector in components.css is now
   redundant belt-and-braces, kept rather than churned. */
a { color: var(--navy); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--teal-text); }
:where(.section--dark) a { color: var(--white); }
:where(.section--dark) a:hover { color: var(--teal); }

/* Logical properties throughout, so RTL and LTR both work with no overrides. */
.stack > * + * { margin-block-start: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}