@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   TOC Contracting — toc.css

   §0  tokens              §7  clients grid
   §1  reset + base        §8  gallery
   §2  typography          §9  buttons + sticky CTA
   §3  layout primitives   §10 footer
   §4  header + lang       §11 direction corrections
   §5  hero                §12 print
   §6  cards + projects

   LIGHT THEME ONLY. There is no `prefers-color-scheme` block in this file and
   there must never be one. Every surface declares an explicit background —
   Android WebView's algorithmic darkening latches onto the UA default canvas
   and onto `transparent`, so an inherited or absent background is exactly what
   gets mangled in the WhatsApp in-app browser.

   MOBILE FIRST. Base rules target ~375px. `min-width` queries only.

   ONE STYLESHEET, BOTH DIRECTIONS. Inline-axis properties are logical
   (margin-inline-*, padding-inline, inset-inline-*, text-align: start). There
   are no [dir="rtl"] override blocks except §11, which handles the six things
   logical properties genuinely cannot flip.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── §-1  FONTS ─────────────────────────────────────────────────────────── */
/* IBM Plex Sans Arabic (SIL OFL), self-hosted. The unicode-range values are
   Google's own per-script subsets, copied verbatim: the arabic subset is 42KB
   against 72KB for IBM's unsubsetted file, and the split means an English page
   never downloads the Arabic glyphs at all.

   Self-hosted rather than CDN because Chrome partitioned the HTTP cache by
   top-level site in 2020 — the shared-cache argument is dead — and the CDN
   costs two extra DNS+TLS handshakes on a cold in-app-browser connection.

   `swap`, not `optional`: a first-time WhatsApp prospect has an empty cache,
   and `optional` would show them the system Arabic face for the whole session,
   which defeats having a brand font at all. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/plex-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── §0  TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* `only` is the keyword that FORBIDS the UA from forcing dark. Plain `light`
     merely declares support and leaves the override permitted. */
  color-scheme: only light;

  /* colour */
  --c-ink:        #111111;   /* headings, wordmark on light */
  --c-body:       #303030;   /* brand dark, doubles as body copy */
  --c-muted:      #6E6E6E;   /* eyebrow, caption, meta */
  --c-hairline:   #E4E4E4;   /* the only border colour */
  --c-bg:         #FFFFFF;
  --c-bg-sub:     #F7F7F7;   /* alternating section wash */
  --c-dark:       #303030;   /* full-bleed dark bands, per profile pp.1,7 */
  --c-dark-ink:   #FFFFFF;
  --c-dark-muted: #A8A8A8;
  --c-wa:         #25D366;   /* the only chromatic value in the system */
  --c-wa-ink:     #FFFFFF;

  /* space — 4px base, eight values, no others */
  --s-1: .25rem;  --s-5: 2.5rem;
  --s-2: .5rem;   --s-6: 4rem;
  --s-3: 1rem;    --s-7: 6rem;
  --s-4: 1.5rem;  --s-8: 9rem;

  /* rhythm — this is where "generous whitespace" lives */
  --section-y: var(--s-6);
  --gutter:    var(--s-4);
  --measure:   64ch;
  --wrap:      1180px;

  /* type */
  --f-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: 1.0625rem;   /* 17px — Arabic wants a nudge up from 16 */
  --t-lg:   1.1875rem;
  --t-xl:   1.5rem;
  --t-2xl:  1.875rem;
  --t-3xl:  2.25rem;
  --lh-tight: 1.2;
  --lh-head:  1.35;      /* Arabic headings need more leading than Latin */
  --lh-body:  1.85;      /* Arabic body wants 1.7–1.9, never 1.5 */
  --track:    .12em;     /* Latin only — zeroed for Arabic in §11 */

  /* geometry */
  --radius: 0;           /* stark. squares only. */
  --hairline: 1px solid var(--c-hairline);
  --tap: 48px;           /* satisfies WCAG 2.5.5 AAA, Apple HIG and Material */
  --flip: 1;             /* directional-icon multiplier, see §11 */

  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 180ms;
}

@media (min-width: 45em) {
  :root {
    --section-y: var(--s-7); --gutter: var(--s-5);
    --t-2xl: 2.25rem; --t-3xl: 3rem;
  }
}
@media (min-width: 64em) {
  :root { --section-y: var(--s-8); --t-3xl: 3.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* ── §1  RESET + BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }

html {
  background-color: var(--c-bg);
  -webkit-text-size-adjust: 100%;   /* kills WebView font boosting */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5rem; /* clears the sticky header on #anchor jumps */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-body);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  /* Clears the sticky CTA so the last section is never covered. */
  padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 56em) { body { padding-block-end: 0; } }

img, picture, svg { display: block; max-width: 100%; }
/* Fallback tint only. Photos override it inline with their own mean colour
   (see picture.js); every transparent brand/client mark overrides it with the
   colour of the surface it sits on. Both are load-bearing: without the
   override a transparent mark shows this #F7F7F7 box as a visible seam. */
img { height: auto; background-color: var(--c-bg-sub); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background-color: var(--c-bg); color: var(--c-ink);
  padding: var(--s-3) var(--s-4); border: var(--hairline);
}
.skip:focus { inset-inline-start: 0; }

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

/* ── §2  TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1, h2, h3 {
  color: var(--c-ink);
  font-weight: 700;
  line-height: var(--lh-head);
  text-wrap: balance;
}

.eyebrow {
  margin-block-end: var(--s-3);
  color: var(--c-muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.section__title    { font-size: var(--t-2xl); letter-spacing: -.01em; }
.section__title--sm{ font-size: var(--t-xl); }

.section__lead {
  max-inline-size: var(--measure);
  margin-block-start: var(--s-3);
  color: var(--c-muted);
  font-size: var(--t-lg);
}

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

/* ── §3  LAYOUT PRIMITIVES ──────────────────────────────────────────────── */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  background-color: var(--c-bg);
  padding-block: var(--section-y);
}
.section--vision,
.section--values { background-color: var(--c-bg-sub); }

.section--values,
.section--project-cta {
  background-color: var(--c-dark);
  color: var(--c-dark-ink);
}
.section--values h2, .section--values h3,
.section--project-cta h2 { color: var(--c-dark-ink); }
.section--values .eyebrow,
.section--values .card__body,
.section--project-cta .section__lead { color: var(--c-dark-muted); }

.section--project-cta { text-align: center; }
.section--project-cta .section__lead { margin-inline: auto; }
.section--project-cta .btn { margin-block-start: var(--s-4); }

.section__back { margin-block-start: var(--s-4); font-size: var(--t-sm); }
.section__back a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: var(--tap);
  color: var(--c-dark-muted);
}

/* ── §4  HEADER + LANGUAGE SWITCH ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--c-bg);
  border-block-end: var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-3);
  min-block-size: 3.75rem;
}
.site-header__brand { display: flex; align-items: center; margin-inline-end: auto; }
/* The wordmark SVG is a transparent glyph, so it must not inherit the §1 img
   fallback tint — that painted an #F7F7F7 box against this white header. Set to
   the header's own colour rather than `transparent`, which the file-header rule
   forbids: WebView's algorithmic darkening latches onto transparent. */
.site-header__brand img {
  inline-size: 76px; block-size: auto;
  background-color: var(--c-bg);
}

/* The in-page nav is a homepage convenience, not the primary path — the
   primary path is a pasted deep link. Below 56em it is hidden rather than
   turned into a JS hamburger: this site ships zero JavaScript, and every nav
   target is reachable by scrolling the single page anyway. */
.site-nav { display: none; }
@media (min-width: 56em) {
  .site-nav { display: block; }
  .site-nav__list { display: flex; gap: var(--s-4); }
  .site-nav__list a {
    display: flex; align-items: center;
    min-block-size: var(--tap);
    color: var(--c-body); font-size: var(--t-sm); text-decoration: none;
  }
}

.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--tap); min-inline-size: var(--tap);
  padding-inline: var(--s-3);
  background-color: var(--c-bg);
  border: var(--hairline);
  color: var(--c-ink);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}

/* ── §5  HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  background-color: var(--c-dark);
  isolation: isolate;
}
.hero > * { grid-area: 1 / 1; }

.hero__media { block-size: 100%; }
.hero__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 45%;
  min-block-size: 78svh;
}
@media (min-width: 45em) { .hero__media img { min-block-size: 68svh; } }

/* Opaque gradient, never `transparent` alone — an explicit colour at both ends
   keeps forced-dark from reinterpreting the stack. */
.hero__scrim {
  background-image: linear-gradient(
    to bottom,
    rgba(17, 17, 17, .30) 0%,
    rgba(17, 17, 17, .58) 55%,
    rgba(17, 17, 17, .86) 100%
  );
}

.hero__body {
  z-index: 1;
  align-self: end;
  padding-block: var(--s-6);
  color: var(--c-dark-ink);
}
.hero__title {
  max-inline-size: 18ch;
  color: var(--c-dark-ink);
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}
.hero__lead {
  max-inline-size: 46ch;
  margin-block-start: var(--s-3);
  color: #E8E8E8;
  font-size: var(--t-lg);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-start: var(--s-5);
}

/* ── §6  CARDS + PROJECTS ───────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s-5); margin-block-start: var(--s-5); }
@media (min-width: 45em) { .cards--services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 45em) { .cards--values   { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .cards--values   { grid-template-columns: repeat(4, 1fr); } }

.card { border-block-start: var(--hairline); padding-block-start: var(--s-4); }
.section--values .card { border-block-start-color: #4A4A4A; }

.card__num {
  display: block; margin-block-end: var(--s-2);
  color: var(--c-muted); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: var(--track);
}
.card__title { font-size: var(--t-xl); }
.card__body {
  margin-block-start: var(--s-2);
  max-inline-size: 46ch;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* Vision / mission */
.vm { display: grid; gap: var(--s-5); margin-block-start: var(--s-4); }
@media (min-width: 45em) { .vm { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.vm__item { border-block-start: var(--hairline); padding-block-start: var(--s-4); }
.vm__label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--c-muted);
}
.vm__body {
  margin-block-start: var(--s-3);
  max-inline-size: 34ch;
  color: var(--c-ink);
  font-size: var(--t-xl);
  line-height: var(--lh-head);
}

/* Project grid */
.projects-grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-5); }
@media (min-width: 45em) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .projects-grid { grid-template-columns: repeat(4, 1fr); } }

.project-card__link {
  display: block; text-decoration: none;
  background-color: var(--c-bg);
}
.project-card__media { overflow: hidden; background-color: var(--c-bg-sub); }
.project-card__media img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.project-card__body { padding-block-start: var(--s-3); }
.project-card__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-lg);
}
.project-card__ar { color: var(--c-muted); font-size: var(--t-sm); font-weight: 400; }
.project-card__summary {
  margin-block-start: var(--s-1);
  color: var(--c-muted); font-size: var(--t-sm);
}
.project-card__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: var(--tap);
  color: var(--c-ink); font-size: var(--t-sm); font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .project-card__link:hover .project-card__media img { transform: scale(1.03); }
  .project-card__link:hover .project-card__cta { text-decoration: underline; }
}

/* Project page hero + facts */
.project-hero { position: relative; display: grid; background-color: var(--c-dark); }
.project-hero > * { grid-area: 1 / 1; }
.project-hero__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; min-block-size: 62svh;
}
.project-hero__scrim {
  background-image: linear-gradient(
    to bottom, rgba(17,17,17,.30) 0%, rgba(17,17,17,.55) 50%, rgba(17,17,17,.85) 100%);
}
.project-hero__body {
  z-index: 1; align-self: end;
  padding-block: var(--s-6);
  color: var(--c-dark-ink);
}
.project-hero__back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: var(--tap);
  color: #D8D8D8; font-size: var(--t-sm); text-decoration: none;
}
.project-hero__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  margin-block-start: var(--s-2);
  color: var(--c-dark-ink);
  font-size: var(--t-3xl); line-height: var(--lh-tight);
}
.project-hero__ar { color: #D8D8D8; font-size: var(--t-xl); font-weight: 400; }
.project-hero__summary {
  max-inline-size: 46ch; margin-block-start: var(--s-3);
  color: #E8E8E8; font-size: var(--t-lg);
}

/* A low-resolution source (Aseeb Najd, 642x480 native) is never stretched to
   full bleed — it is boxed on a light ground instead.

   The base .project-hero stacks every child into one grid cell so the title can
   sit over the photo. The contained variant must UNDO that stacking: with a
   light ground and no scrim, overlaid text would be dark-on-photo and
   unreadable. So the children flow as normal rows and the copy sits below the
   image. */
.project-hero--contained {
  display: block;
  background-color: var(--c-bg-sub);
}
.project-hero--contained > * { grid-area: auto; }
.project-hero--contained .project-hero__media img {
  min-block-size: 0; max-inline-size: 640px; margin-inline: auto;
}
.project-hero--contained .project-hero__scrim { display: none; }
.project-hero--contained .project-hero__body {
  padding-block: var(--s-5) var(--s-6); color: var(--c-body);
}
.project-hero--contained .project-hero__title { color: var(--c-ink); }
.project-hero--contained .project-hero__ar,
.project-hero--contained .project-hero__back { color: var(--c-muted); }
.project-hero--contained .project-hero__summary { color: var(--c-muted); }

.facts { display: grid; gap: var(--s-5); }
@media (min-width: 45em) { .facts { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.facts__row { border-block-start: var(--hairline); padding-block-start: var(--s-3); }
.facts__label {
  color: var(--c-muted); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: var(--track); text-transform: uppercase;
}
.facts__value { margin-block-start: var(--s-2); margin-inline-start: 0; color: var(--c-ink); }
.scope li { padding-block: var(--s-1); }
.scope li::before {
  content: "—"; margin-inline-end: var(--s-2); color: var(--c-muted);
}

/* ── §7  CLIENTS GRID ───────────────────────────────────────────────────── */
/* Eight marks spanning 1.05:1 to 7.70:1 — a 7.4x range. No single automatic
   rule balances that, so each cell is a fixed-height box and each mark gets an
   optical scale factor tuned against profile p.18.
   --k  scales the HEIGHT cap (raise for lockups carrying dead space)
   --kw scales the WIDTH cap  (lower for ultra-wide single-line marks)          */
.clients__grid {
  --logo-h: 34px;
  --cell-h: 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--s-5);
  border-block-start: var(--hairline);
}
.clients__cell {
  display: grid; place-items: center;
  min-block-size: var(--cell-h);
  padding-inline: var(--s-3);
  background-color: var(--c-bg);
  border-block-end: var(--hairline);
}
.clients__cell:nth-child(2n) { border-inline-start: var(--hairline); }

.clients__logo {
  inline-size: auto; block-size: auto;
  max-inline-size: calc(100% * var(--kw, 1));
  max-block-size: calc(var(--logo-h) * var(--k, 1));
  /* Transparent marks: carry the cell's own colour, not `transparent` — same
     seam-free result, but an explicit value forced dark cannot mangle. */
  background-color: var(--c-bg);
}
/* Full colour, no greyscale filter: with no hover state there is nothing to
   reveal, and desaturating kills the Aseeb roundel, the ELCT bear and the
   DURMA blue. This matches profile p.18 exactly. */
.c-option-b   { --k: .85; }   /* 3.90 — pure wordmark */
.c-movenpick  { --k: 1.25; }  /* 3.35 — two-line lockup + bird */
.c-mirror     { --k: 1.30; }  /* 1.63 — two-line bilingual */
.c-aseeb-najd { --k: 1.45; }  /* 1.05 — roundel, a symbol */
.c-sssenses   { --k: .55; --kw: .92; } /* 7.70 — thin tracked caps */
.c-alrahden   { --k: 1.35; }  /* 2.87 — three-part lockup */
.c-elct       { --k: 1.40; }  /* 1.26 — mark over wordmark */
.c-durma      { --k: 1.00; }  /* 3.68 — wordmark + small mark */

@media (min-width: 45em) {
  .clients__grid { grid-template-columns: repeat(4, 1fr); --logo-h: 42px; --cell-h: 140px; }
  .clients__cell:nth-child(2n) { border-inline-start: none; }
  .clients__cell:not(:nth-child(4n+1)) { border-inline-start: var(--hairline); }
}
@media (min-width: 64em) { .clients__grid { --logo-h: 48px; --cell-h: 168px; } }

/* ── §8  GALLERY ────────────────────────────────────────────────────────── */
/* CSS scroll-snap, zero JavaScript. Also sidesteps the long-standing
   cross-browser disagreement over the sign of scrollLeft in RTL. */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery__item { scroll-snap-align: start; }
.gallery__media img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
@media (min-width: 45em) { .gallery { grid-auto-columns: 46%; } }
@media (min-width: 64em) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    max-inline-size: var(--wrap);
    margin-inline: auto;
    overflow-x: visible;
    gap: var(--s-4);
  }
}

/* ── §9  BUTTONS + STICKY CTA ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--tap); min-inline-size: var(--tap);
  padding-inline: var(--s-4);
  border: 1px solid transparent;
  font-size: var(--t-base); font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.btn--lg { min-block-size: 56px; padding-inline: var(--s-5); }

.btn--wa { background-color: var(--c-wa); color: var(--c-wa-ink); }
.btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--c-dark-ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover   { background-color: #1FB856; }
  .btn--ghost:hover{ background-color: rgba(255, 255, 255, .12); }
}

.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

.sticky-cta {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: 60;
  background-color: var(--c-bg);
  border-block-start: var(--hairline);
  padding: var(--s-2) var(--gutter);
  padding-block-end: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
}
.sticky-cta .btn { inline-size: 100%; }
@media (min-width: 56em) { .sticky-cta { display: none; } }

/* Contact list */
.contact-list { margin-block-start: var(--s-5); }
.contact-list__item {
  display: flex; align-items: center; gap: var(--s-3);
  min-block-size: var(--tap);
  padding-block: var(--s-2);
  border-block-start: var(--hairline);
  font-size: var(--t-sm);
}
.contact-list__item--primary { border-block-start: 0; padding-block-end: var(--s-4); }
.contact-list__item--primary .btn { inline-size: 100%; }
@media (min-width: 45em) {
  .contact-list__item--primary .btn { inline-size: auto; }
}
.contact-list__label {
  min-inline-size: 7ch; color: var(--c-muted);
}
.contact-list__item a { color: var(--c-ink); font-weight: 600; }

/* ── §10  FOOTER ────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--c-dark);
  color: var(--c-dark-muted);
  padding-block: var(--s-6);
  font-size: var(--t-sm);
}
/* White glyph on the dark band: carry --c-dark, not `transparent`. */
.site-footer__mark { inline-size: 76px; block-size: auto; background-color: var(--c-dark); }
.site-footer__meta {
  display: grid; gap: var(--s-2);
  margin-block-start: var(--s-4);
}
.site-footer__legal {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid #4A4A4A;
  font-size: var(--t-xs);
}
@media (min-width: 45em) {
  .site-footer__meta { grid-auto-flow: column; justify-content: start; gap: var(--s-5); }
}

/* ── §11  DIRECTION CORRECTIONS ─────────────────────────────────────────── */
/* The six things logical properties do NOT flip. Everything else in this file
   is direction-agnostic by construction. */

/* Arabic: letter-spacing breaks glyph joining. Never apply it. */
:root:lang(ar) { --track: 0; }

/* Directional icons: one rule, driven by a single multiplier token. */
:root[dir="rtl"] { --flip: -1; }
.icon--dir { transform: scaleX(var(--flip)); }

/* ── §12  PRINT ─────────────────────────────────────────────────────────── */
@media print {
  .sticky-cta, .site-nav, .lang-switch, .skip { display: none; }
  .hero__scrim, .project-hero__scrim { display: none; }
  body { padding-block-end: 0; color: #000; }
  .section, .site-footer { background-color: #fff; color: #000; }
}