/* ==========================================================================
   Reset, typography, bilingual machinery, layout primitives
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--bone-2);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
[hidden] { display: none !important; }

/* Classed lists are layout, not prose: strip the UA inline padding that eats
   the right edge in RTL. */
:where(ul, ol)[class] { list-style: none; padding: 0; }

:target { scroll-margin-block-start: 7rem; }

::selection { background: var(--rose); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* --------------------------------------------------------------------------
   Language: both copies ship in the markup, CSS hides the inactive one, so
   the page is correct before a single line of JS runs.
   -------------------------------------------------------------------------- */
html[lang="ar"] { --f-body: var(--f-ar);  --f-display: var(--f-ar-display); }
html[lang="en"] { --f-body: var(--f-en);  --f-display: var(--f-en-display); }

html[lang="ar"] [data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="ar"] { display: none !important; }

/* Strict single-language mode. The bilingual "lockups" — an Arabic display
   word paired with its English translation (section headings, service and
   pillar labels, project titles) — used to show BOTH languages at once. They
   now collapse to whichever language the toggle selects, so Arabic mode reads
   fully Arabic and English mode fully English. Numerals, stat figures and the
   Latin brand sub-mark carry lang="en" only for rendering and stay untouched. */
html[lang="ar"] .duo__en,
html[lang="ar"] .svc__en,
html[lang="ar"] .pillar__en,
html[lang="ar"] .work-card__t-en { display: none !important; }

html[lang="en"] .duo__ar,
html[lang="en"] .svc__ar,
html[lang="en"] .pillar__ar,
html[lang="en"] .work-card__t { display: none !important; }

/* When the English half stands alone it becomes the heading, so give it the
   primary ink and heading scale instead of the small rose "translation" look. */
html[lang="en"] .duo__en { color: var(--bone); font-size: var(--t-2xl); }
html[lang="en"] .duo--lg .duo__en { font-size: var(--t-3xl); }
html[lang="en"] .on-paper .duo__en { color: var(--paper-ink); }
html[lang="en"] .on-wine .duo__en,
html[lang="en"] .on-deep .duo__en { color: var(--bone); }
html[lang="en"] .svc__en,
html[lang="en"] .work-card__t-en {
  color: var(--bone); font-size: var(--t-md);
  text-transform: none; letter-spacing: 0;
}
html[lang="en"] .pillar__en { color: var(--bone); font-size: var(--t-md); margin-block-start: 0; }

/* Latin text inside an Arabic page still needs Latin type. */
:lang(en) { font-family: var(--f-en); }
html[lang="en"] :lang(ar) { font-family: var(--f-ar); }

/* Arabic sets a little tighter and heavier than the Latin at the same size. */
html[lang="ar"] body { line-height: 1.85; }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--bone);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3 { letter-spacing: -0.025em; }

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }

/* Arabic carries diacritics above the line and long descenders below it, so the
   Latin heading leading collides. Give every Arabic heading more room. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  line-height: 1.34;
}

p { text-wrap: pretty; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}
.shell--wide { width: min(100% - var(--gutter) * 2, var(--shell-wide)); }
.shell--tight { width: min(100% - var(--gutter) * 2, 60rem); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: var(--section-t); }

.stack > * + * { margin-block-start: var(--flow, var(--s-4)); }

.prose { max-width: var(--measure); }
.prose p + p { margin-block-start: var(--s-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.hairline {
  border: 0;
  border-block-start: var(--hair) solid var(--ink-line);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: var(--z-tooltip);
  background: var(--gold);
  color: var(--ink-deep);
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.skip-link:focus { inset-block-start: 0; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.on-wine  { background: var(--rose-deep);      color: var(--bone); }
.on-deep  { background: var(--ink-deep); color: var(--bone); }
.on-raise { background: var(--ink-raise); color: var(--bone-2); }

.on-paper {
  background: var(--paper);
  color: var(--paper-ink-2);
}
.on-paper h1, .on-paper h2, .on-paper h3, .on-paper h4 { color: var(--paper-ink); }
.on-paper .hairline { border-color: var(--paper-line); }

.dotfield {
  background-image: var(--dots);
  background-size: var(--dots-size);
}

/* --------------------------------------------------------------------------
   Reveal: content is visible by default. JS opts in only when it has booted
   and the visitor has not asked for reduced motion.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--d-4) var(--ease),
    transform var(--d-4) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}