:root {
  --bg: #0F1A14;
  --bg2: #0A120D;
  --ink: #F1EEE6;
  --ink2: #B7BBB1;
  --line: rgba(241,238,230,.13);
  --accent: #E3A33B;
  --glow: rgba(227,163,59,.20);
  --glow2: rgba(120,160,90,.10);
}
/* R and M sites (no JavaScript): one stylesheet for EN (ltr) and AR (rtl), built with logical properties.
   Theme colours are prepended per site as :root custom properties by build-site.mjs. */

@font-face {
  font-family: "Schibsted";
  src: url("../fonts/schibsted-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Kufi";
  src: url("../fonts/noto-kufi-arabic-var-arabic.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --sans: "Schibsted", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --arab: "Plex Arabic", "Schibsted", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --kufi: "Kufi", "Schibsted", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --gut: clamp(20px, 4.4vw, 64px);
  --wrap: 1312px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:lang(ar) body, body:lang(ar) { font-family: var(--arab); font-size: 1.16rem; line-height: 1.85; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.num { unicode-bidi: isolate; }

.skip {
  position: absolute; z-index: 50; inset-inline-start: 16px; top: -80px;
  padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ── Header ─────────────────────────────────────────────── */
.top { position: absolute; inset: 0 0 auto; z-index: 10; }
.top__in { display: flex; align-items: center; gap: 36px; min-height: 96px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 38px; width: auto; }
.top__in > nav { margin-inline-start: auto; }
.nav { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav a, .lang a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .97rem; text-decoration: none; color: var(--ink);
  opacity: .82; transition: opacity .2s;
}
.nav a:hover, .lang a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.lang { display: flex; align-items: center; gap: 10px; }
.lang a[aria-current] { opacity: 1; color: var(--accent); }
.lang__sep { opacity: .35; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(660px, 100svh, 960px);
  display: grid; align-items: center;
  padding-block: 128px 72px;
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* floor light under the object */
.hero::before {
  inset-inline: 34% -18%; bottom: -22%; height: 78%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
}
.hero::after {
  inset-inline: -20% 40%; top: -30%; height: 80%;
  background: radial-gradient(closest-side, var(--glow2), transparent 70%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px; }
.hero h1 {
  margin: 0; max-width: 14ch;
  font-size: clamp(2.7rem, 1.2rem + 4.1vw, 5.2rem);
  font-weight: 700; line-height: .98; letter-spacing: -.038em;
  text-wrap: balance;
}
.lede {
  margin: 30px 0 0; max-width: 34ch;
  color: var(--ink2); font-size: clamp(1.06rem, .96rem + .38vw, 1.28rem); line-height: 1.55;
}
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 44px 0 0; padding: 0; list-style: none;
  color: var(--ink2); font-size: .95rem;
}
.hero__facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero__art { margin: 0; position: relative; display: grid; place-items: center; }
.hero__art svg { width: min(100%, 600px); height: auto; overflow: visible; }
.grid-lines { stroke: var(--ink); stroke-width: .022; opacity: .11; }
.grid-mask stop:first-child { stop-color: #fff; }

/* the mark writes itself like a pen stroke, then the nuqta drops in */
.ink { fill: none; stroke-linejoin: miter; stroke-miterlimit: 2; stroke-linecap: butt; }
.ink--body { stroke: var(--ink); stroke-width: 1.2; }
.ink--hole { stroke: var(--bg); stroke-width: .48; }
.ink--route { stroke: var(--accent); stroke-width: .14; stroke-dasharray: .9 .5; animation: route 2.4s linear infinite, route-in .8s 2s both; }
@keyframes route-in { from { opacity: 0; } }
.nuqta { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: drop .7s 2.15s both var(--ease); }
.w { stroke-dasharray: 1 1; animation: write 1.1s both cubic-bezier(.55, .1, .3, 1); }
.w1 { animation-delay: .25s; }
.w2 { animation-delay: .95s; animation-duration: 1.25s; }
.w3 { animation-delay: 1.85s; animation-duration: .45s; }
@keyframes write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-1.6px) rotate(-45deg) scale(.4); } }
@keyframes route { to { stroke-dashoffset: -1.4; } }
.hero h1, .lede, .hero__facts, .hero__ar { animation: fade 1s both var(--ease); }
.hero__ar { margin: 0 0 22px; font: 600 1.05rem/1.4 var(--kufi); color: var(--accent); }
.lede { animation-delay: .12s; }
.hero__facts { animation-delay: .22s; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }

/* marker: solid square for trading, ring node for consultancy (mirrors the two marks) */
.mk { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
[data-mark="track"] .mk { border-radius: 50%; background: transparent; border: 3px solid var(--accent); }

/* ── Sections ───────────────────────────────────────────── */
.sec { padding-block: clamp(84px, 10vw, 152px); border-top: 1px solid var(--line); }
.sec__head {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px 16px; align-items: end;
  margin-bottom: clamp(40px, 5.4vw, 76px);
}
h2 {
  margin: 0; font-size: clamp(2.05rem, 1.25rem + 2.3vw, 3.35rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.032em; text-wrap: balance;
}
.sec__note { margin: 0; max-width: 40ch; color: var(--ink2); }

.acts { margin: 0; padding: 0; list-style: none; }
.act {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, .62fr) minmax(0, .46fr); gap: 14px 16px;
  align-items: baseline; padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.act:last-child { border-bottom: 1px solid var(--line); }
.act__name { display: flex; align-items: baseline; gap: 18px; }
.act__name .mk { transform: translateY(-.32em); }
.act h3 {
  margin: 0; font-size: clamp(1.45rem, 1rem + 1.45vw, 2.35rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.022em;
}
.act p { margin: 0; color: var(--ink2); max-width: 36ch; }
.act__code { margin: 0; text-align: end; }
.act__code > b { display: block; font-weight: 600; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); color: var(--accent); letter-spacing: -.01em; }
.act__code > span { display: block; font-size: .86rem; color: var(--ink2); }

.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(56px, 8vw, 132px); }
.split h2 { margin-bottom: clamp(28px, 3.4vw, 48px); }
.facts { margin: 0; }
.facts div {
  display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr); gap: 4px 24px;
  padding-block: 17px; border-top: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink2); font-size: .95rem; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.office address {
  font-style: normal; font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.05vw, 2.1rem); line-height: 1.28; letter-spacing: -.018em;
}
.maps {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 32px;
  min-height: 52px; padding-inline: 24px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  font-weight: 600; text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.maps:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.maps svg { width: 16px; height: 16px; }
[dir="rtl"] .maps svg { transform: scaleX(-1); }

/* ── Footer ─────────────────────────────────────────────── */
.foot { position: relative; overflow: clip; background: var(--bg2); padding-block: clamp(64px, 8vw, 104px) 36px; }
.foot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 48px; align-items: end; }
.foot__logo { height: 52px; width: auto; }
.foot__legal { margin: 26px 0 0; color: var(--ink2); font-size: .95rem; line-height: 1.7; }
.foot__legal > span { display: block; }
.foot__side { display: grid; justify-items: end; gap: 8px; }
.foot__side a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; opacity: .82; }
.foot__side a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 7px; }
.foot__side svg { width: 14px; height: 14px; }
.foot__base { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink2); font-size: .88rem; }
.foot__base p { margin: 0; }
.foot__mark { position: absolute; z-index: 0; inset-inline-end: -3vw; bottom: -9vw; width: min(52vw, 760px); opacity: .055; pointer-events: none; }

/* ── Reveal on scroll: CSS scroll-driven, no JS. Browsers without view timelines just show the content. ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    @keyframes rv { from { opacity: 0; transform: translateY(28px); } }
  }
}

/* ── Arabic typography ─────────────────────────────────── */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .office address { letter-spacing: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-family: var(--kufi); font-weight: 600; }
.ar-name { font-family: var(--kufi); font-weight: 500; }
:lang(ar) .hero h1 { line-height: 1.22; font-size: clamp(2.5rem, 1.1rem + 4.1vw, 5rem); max-width: 13ch; }
:lang(ar) h2 { line-height: 1.25; }
:lang(ar) .act h3 { line-height: 1.35; }
:lang(ar) .office address { line-height: 1.6; }
:lang(en) { letter-spacing: inherit; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav { display: none; }
  .lang { margin-inline-start: auto; }
  .top__in { min-height: 80px; }
  .brand img { height: 32px; }
  .hero { min-height: 0; padding-block: 112px 24px; align-items: start; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hero__art { margin-top: 28px; }
  .hero__art svg { width: min(88%, 420px); }
  .hero::before { inset-inline: -10% -10%; bottom: -10%; height: 55%; }
  .sec__head, .split { grid-template-columns: minmax(0, 1fr); }
  .act { grid-template-columns: minmax(0, 1fr) auto; }
  .act p { grid-column: 1 / -1; grid-row: 2; }
  .act__code { grid-column: 2; grid-row: 1; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__side { justify-items: start; }
  .foot__mark { width: 90vw; bottom: -18vw; }
}
@media (max-width: 560px) {
  .act { grid-template-columns: minmax(0, 1fr); }
  .act__code { grid-column: 1; grid-row: auto; text-align: start; display: flex; align-items: baseline; gap: 10px; }
  .act__code > b, .act__code > span { display: inline; }
  .facts div { grid-template-columns: minmax(0, 1fr); }
  .hero__facts { gap: 8px 22px; margin-top: 32px; }
}

@media print { .rv, .w, .nuqta, .hero__art, .hero h1, .lede, .hero__facts, .hero__ar { animation: none !important; } .w { stroke-dasharray: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .w { stroke-dasharray: none; }
}

/* ── Utilities and the 404 page ─────────────────────────── */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nf { min-height: 100svh; display: grid; align-items: center; padding-block: 64px; }
.nf h1 { margin: 56px 0 8px; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -.035em; }
.nf__ar { margin: 0; font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/1.5 var(--kufi); color: var(--ink2); }
.nf__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 40px 0 0; }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 7px; }