/* ============================================================
   MARAKN — site styles
   Logical properties throughout, with ONE deliberate exception:
   the hero grid is pinned to physical order because the artwork
   has its hardware on the physical LEFT and its clean copy space
   on the physical RIGHT. Mirroring the art for English would flip
   screens, ports and connectors, so the LAYOUT stays put and only
   the text direction changes.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[lang="ar"] body, body[dir="rtl"] { font-family: var(--font-arabic); }

h1,h2,h3,h4 { line-height: var(--lh-head); margin: 0; font-weight: 600; letter-spacing: -0.015em; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { letter-spacing: 0; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
/* SC 1.4.11 needs >= 3:1. Brand teal measured 2.70:1 on white and 1.92:1 on
   the CTA band. --teal-700 clears every light ground; dark bands take white. */
:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; border-radius: var(--radius); }
.cta :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; inset-block-start:-100%; inset-inline-start:var(--s-4); background:var(--ink); color:#fff; padding:var(--s-3) var(--s-5); z-index:200; text-decoration:none; }
.skip:focus { inset-block-start: var(--s-3); }
.ltr-num { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* ============================================================
   LOADER — brand opening sequence
   No fake progress, no imposed wait. Fails open: JS dismisses it
   on load, a hard timeout dismisses it if load never fires, and
   without JS it never renders at all.
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; background: var(--ground);
  transition: opacity 560ms var(--ease), visibility 0s linear 560ms;
}
.loader[data-done] { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; gap: var(--s-5); }
.loader__logo { width: clamp(160px, 26vw, 250px); opacity: 0; transform: translateY(10px); }
.loader__arc { width: clamp(200px, 32vw, 310px); overflow: visible; }
.loader__arc path { fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:560; stroke-dashoffset:560; }
.loader__sweep {
  inline-size: clamp(200px, 32vw, 310px); block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--teal) 45%, transparent);
  opacity: 0; transform: scaleX(.2);
}
.loader--play .loader__logo { animation: ld-logo 640ms var(--ease) 100ms forwards; }
.loader--play .loader__arc path { animation: ld-arc 860ms var(--ease) 180ms forwards; }
.loader--play .loader__sweep { animation: ld-sweep 820ms var(--ease) 480ms forwards; }
@keyframes ld-logo { to { opacity:1; transform:none; } }
@keyframes ld-arc  { to { stroke-dashoffset: 0; } }
@keyframes ld-sweep { 40% { opacity:.9; } to { opacity:0; transform:scaleX(1); } }
.loader--static .loader__logo { opacity:1; transform:none; }
.loader--static .loader__arc path { stroke-dashoffset: 0; }

/* ============================================================
   CUSTOM CURSOR — the vendored library injects its own elements.
   Here we only hide the native cursor while it is active and keep
   text selection and form fields behaving natively.
   ============================================================ */
html[data-cursor="on"], html[data-cursor="on"] body { cursor: none; }
html[data-cursor="on"] input, html[data-cursor="on"] textarea, html[data-cursor="on"] [contenteditable] { cursor: auto; }
html[data-cursor="on"] p, html[data-cursor="on"] h1, html[data-cursor="on"] h2,
html[data-cursor="on"] h3, html[data-cursor="on"] li { cursor: text; }
html[data-cursor="on"] a, html[data-cursor="on"] button { cursor: none; }
/* The library draws a dot and a ring and gives them no states at all, so the
   hover and press response is added here. It animates `transform` on top of
   the library's own centring translate; the library only ever writes `left`
   and `top` inline, so this never fights it. */
.__ma-cursor-dot, .__ma-cursor-ring {
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
html[data-cursor-hover="on"] .__ma-cursor-ring { transform: translate(-50%,-50%) scale(1.45); background-color: rgba(23,176,163,.08); border-color: rgba(23,176,163,.55); }
html[data-cursor-hover="on"] .__ma-cursor-dot  { transform: translate(-50%,-50%) scale(.55); }
html[data-cursor-press="on"] .__ma-cursor-ring { transform: translate(-50%,-50%) scale(.85); }
/* Belt and braces: never paint a fake cursor on touch or with motion off,
   whatever state the script is in. */
@media (hover: none), (pointer: coarse) {
  .__ma-cursor-dot, .__ma-cursor-ring { display: none !important; }
  html[data-cursor="on"], html[data-cursor="on"] body,
  html[data-cursor="on"] a, html[data-cursor="on"] button { cursor: auto; }
}

/* ============================================================
   BACKGROUND DECORATION — the former hero diagrams, demoted.
   Behind everything, low contrast, pointer-events:none.
   ============================================================ */
/* FIXED, not absolute: an absolutely positioned layer with no positioned
   ancestor is sized by the initial containing block, so it would cover only
   the first viewport and stop. Fixed keeps the texture behind the whole page
   while the scroll drift supplies the vertical movement. A positioned element
   at z-index 0 still paints above static content, so the header, main and
   footer are lifted to z-index 1 — see the rules on each. */
.bg-deco { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.55; }
.bg-deco svg { position:absolute; inset:0; inline-size:100%; block-size:100%; }
main { position:relative; z-index:1; }
.bg-deco .deco-line { stroke:var(--teal); stroke-width:1; opacity:.26; fill:none; stroke-dasharray:2 9; transition: opacity 900ms var(--ease); }
.bg-deco .deco-arc  { stroke:var(--gold); stroke-width:1.5; opacity:.22; fill:none; }
.bg-deco .deco-node { fill:none; stroke:var(--teal); stroke-width:1.4; opacity:.30; transition: opacity 900ms var(--ease); }
.bg-deco .deco-node--gold { stroke:var(--gold); opacity:.28; }
.bg-deco .deco-dot { fill:var(--gold); opacity:.30; }
.bg-deco .is-lit { opacity:.8; }

/* ============================================================
   HEADER — logo enlarged.
   The master carries 8-17% transparent padding per edge, which is
   why the mark read small. assets/logo-display.png is a DOCUMENTED
   CROP to the opaque bounds (1635x1027 of the untouched 2000x1218
   master): ~19% more mark at the same render height.
   ============================================================ */
.site-header { position:sticky; inset-block-start:0; z-index:60; background:var(--ground); border-block-end:1px solid var(--rule); }
.header-in { display:flex; align-items:center; gap:var(--s-5); padding-block:var(--s-4); }
.brand { display:flex; align-items:center; gap:var(--s-3); text-decoration:none; flex-shrink:0; }
.brand img { width:auto; height:64px; }
@media (max-width: 960px) { .brand img { height:52px; } }
@media (max-width: 400px) { .brand img { height:44px; } }

.nav { display:flex; gap:var(--s-6); margin-inline-start:auto; align-items:center; }
.nav a { text-decoration:none; color:var(--ink-soft); font-size:var(--t-sm); font-weight:500; padding-block:var(--s-2); position:relative; transition:color var(--dur-fast) var(--ease); }
/* scaleX, not inline-size: animating width forces layout every frame. */
.nav a::after { content:""; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:100%; block-size:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
[dir="rtl"] .nav a::after { transform-origin:right; }
.nav a:hover { color:var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform:scaleX(1); }
.lang-switch { font-size:var(--t-sm); font-weight:600; text-decoration:none; color:var(--ink); border:1px solid var(--rule); padding:var(--s-2) var(--s-4); border-radius:var(--radius); transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lang-switch:hover { background:var(--gold-100); border-color:var(--gold-300); }
.nav-toggle { display:none; background:none; border:1px solid var(--rule); inline-size:44px; block-size:44px; border-radius:var(--radius); cursor:pointer; font-size:1.1rem; line-height:1; flex-shrink:0; }

/* ============================================================
   HERO
   ============================================================ */
/* Translucent, so the background decoration reads faintly through the hero
   instead of being covered by it. */
.hero { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(253,251,248,.74) 55%,rgba(251,249,245,.92) 100%); border-block-end:1px solid var(--rule); }
.hero-track { position:relative; z-index:1; }

.hero-stage { display:block; }
.js-slider .hero-stage { display:grid; }
/* The slide container carries NO opacity of its own. An un-transitioned
   opacity:0 here would snap the whole slide invisible on the first frame and
   the recede/enter animation of its children would never be seen. Visibility
   is switched on JS timing instead (.is-leaving is removed once the
   transition has finished), so the outgoing slide leaves the accessibility
   tree and the tab order at a known moment rather than on a CSS delay. */
.js-slider .slide { grid-area:1 / 1; visibility:hidden; pointer-events:none; }
.js-slider .slide.is-current { visibility:visible; pointer-events:auto; }
/* The outgoing slide must stay painted while it recedes, but must not be
   clickable or focusable during the hand-off. */
.js-slider .slide.is-leaving { visibility:visible; pointer-events:none; }
.slide[hidden] { display:none; }
.js-slider .slide[hidden] { display:grid; }   /* JS owns visibility, not display */

/* PHYSICAL column order: artwork left, copy right, in BOTH languages —
   the art has its hardware on the left and its quiet space on the right. */
.slide {
  display:grid; grid-template-columns:1.06fr 0.94fr; gap:var(--s-8);
  align-items:center; padding-block:clamp(2.25rem,5vw,4.5rem);
  direction: ltr;
}
[dir="rtl"] .slide-copy { direction: rtl; }   /* Arabic text flows correctly inside */

.eyebrow { display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-700); font-weight:600; margin-block-end:var(--s-4); }
/* Arabic cannot carry tracking, so it takes size and weight instead. */
[lang="ar"] .eyebrow { letter-spacing:0; text-transform:none; font-size:var(--t-base); font-weight:700; }
.eyebrow::before { content:""; inline-size:30px; block-size:2px; background:var(--teal-700); flex-shrink:0; }

.slide h1 { font-size:var(--t-3xl); margin-block-end:var(--s-5); line-height:var(--lh-tight); }
[lang="ar"] .slide h1 { line-height:1.3; }
.slide h1 .accent { color:var(--gold-text); }
.slide p.lede { font-size:var(--t-lg); color:var(--ink-soft); max-inline-size:44ch; margin-block-end:var(--s-6); }
.hero-actions { display:flex; gap:var(--s-4); flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-6); border-radius:var(--radius); text-decoration:none; font-weight:600; font-size:var(--t-sm); border:1px solid transparent; cursor:pointer; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:var(--teal-700); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { border-color:var(--rule); color:var(--ink); }
.btn-ghost:hover { border-color:var(--gold); background:var(--gold-100); }
.btn .arrow { transition:transform var(--dur-fast) var(--ease); }
[dir="rtl"] .btn .arrow { transform:scaleX(-1); }
.btn:hover .arrow { transform:translateX(3px); }
[dir="rtl"] .btn:hover .arrow { transform:scaleX(-1) translateX(3px); }

/* ---- artwork ---- */
.art { position:relative; border-radius:0; overflow:visible; }
.art img { inline-size:100%; block-size:auto; display:block; }
/* Blended artwork: preserve opaque devices; dissolve only peripheral scenery
   into the actual hero background, including during slide transitions. */
.art picture { display:block; }
.art img {
  border-radius:0; border:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent,#000 3%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent,#000 3%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media(max-width:960px) {
  .art img {
    -webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 89%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 2%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 89%,transparent);
  }
}
/* ONE slide-specific exception, desktop only. The infrastructure artwork is the
   only one whose subject reaches the bottom of the canvas: its marble plinths,
   gold base band and teal glass edge run to 97.7% of height, so the shared 88%
   fade washed them out. 93% restores them and still lands on exactly the page
   ground at the final row.
   Measured on infrastructure-1600.webp: mean mask alpha over content in rows
   792-879 rises 0.585 -> 0.826, while the steepest row-to-row change in the
   composited result only moves 6.19 -> 7.71 per 255 — denser plinth, no edge.
   Scoped inside min-width:961px so it can never outrank the mobile rule above,
   which it would otherwise beat on specificity. The other two slides keep 88%:
   their subjects stop well short of the bottom and need the longer dissolve. */
@media (min-width: 961px) {
  .art[data-art="infrastructure"] img {
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent,#000 3%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent,#000 3%,#000 93%,transparent 100%);
  }
}
/* NEVER mirrored: the art contains devices, ports and screens.
   The guard is on the IMAGE, not on .art. `.art` is the element the slider
   animates (translateX + scale), so including it here made this !important
   rule beat the transition transform — and only in Arabic, so the Arabic
   hero cross-faded while the English one slid and scaled. Verified: with
   `[dir="rtl"] .art` in the selector, a non-current `.art` computed
   `transform:none` on index.html against `matrix(0.972,0,0,0.972,44,0)` on
   en/index.html. The img and picture are never transformed by the slider,
   so guarding those keeps the no-mirroring guarantee with no side effect. */
[dir="rtl"] .art img, [dir="rtl"] .art picture { transform:none !important; }

/* ---- slide transitions ----
   Outgoing recedes and fades; incoming enters with a small directional
   move and settles; copy follows in a restrained stagger. WHOLE LINES
   ONLY — never individual letters, which destroys Arabic joining. */
.js-slider .slide .art,
.js-slider .slide .slide-copy > * { transition:opacity var(--dur-slide) var(--ease-out), transform var(--dur-slide) var(--ease-out); will-change:opacity, transform; }
.js-slider .slide:not(.is-current) .art { opacity:0; transform:translateX(var(--enter-x,44px)) scale(.972); }
.js-slider .slide:not(.is-current) .slide-copy > * { opacity:0; transform:translateY(16px); }
.js-slider .slide.is-current .art { opacity:1; transform:none; }
.js-slider .slide.is-current .slide-copy > * { opacity:1; transform:none; }
.js-slider .slide.is-leaving .art { opacity:0; transform:scale(.985) translateX(calc(var(--enter-x,44px) * -0.3)); }
.js-slider .slide.is-leaving .slide-copy > * { opacity:0; transform:translateY(-10px); }
.js-slider .slide.is-current .slide-copy > *:nth-child(1) { transition-delay:100ms; }
.js-slider .slide.is-current .slide-copy > *:nth-child(2) { transition-delay:175ms; }
.js-slider .slide.is-current .slide-copy > *:nth-child(3) { transition-delay:250ms; }
.js-slider .slide.is-current .slide-copy > *:nth-child(4) { transition-delay:325ms; }
.js-slider .slide.is-leaving .slide-copy > * { transition-delay:0ms; }
.js-slider[data-dir="fwd"]  .slide { --enter-x: 44px; }
.js-slider[data-dir="back"] .slide { --enter-x: -44px; }

/* ---- controls ---- */
.hero-controls { display:flex; align-items:center; gap:var(--s-3); padding-block-end:var(--s-6); flex-wrap:wrap; }
.dots { display:flex; gap:0; flex-shrink:0; }
.dot { inline-size:44px; block-size:44px; padding:0; border:0; cursor:pointer; background:none; display:grid; place-items:center; flex-shrink:0; }
.dot::before { content:""; inline-size:26px; block-size:4px; border-radius:2px; background:var(--rule); transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dot[aria-current="true"]::before { background:var(--gold-text); transform:scaleX(1.15); }
.dot:hover::before { background:var(--gold); }
.dot:focus-visible { outline-offset:-4px; }
.ctrl { inline-size:44px; block-size:44px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--rule); background:var(--surface); border-radius:var(--radius); cursor:pointer; color:var(--ink); transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ctrl:hover { border-color:var(--gold); background:var(--gold-100); }
.ctrl:active { transform:scale(.92); }
.ctrl svg { inline-size:18px; block-size:18px; }
.ctrl[data-prev] .chev { transform:none; }
.ctrl[data-next] .chev { transform:scaleX(-1); }
[dir="rtl"] .ctrl[data-prev] .chev { transform:scaleX(-1); }
[dir="rtl"] .ctrl[data-next] .chev { transform:none; }
.slide-count { font-size:var(--t-sm); color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-inline-start:var(--s-2); flex-shrink:0; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block:clamp(3.5rem,7vw,6.5rem); position:relative; }
.section-alt { background:var(--surface-alt); }
.section-head { max-inline-size:var(--measure); margin-block-end:var(--s-7); }
.section-head:only-child { margin-block-end:0; }
.section-head h2 { font-size:var(--t-2xl); margin-block-end:var(--s-4); }
.section-head p { color:var(--ink-soft); font-size:var(--t-lg); }

.services { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.service { background:var(--surface); padding:var(--s-7) var(--s-6); position:relative; transition:background var(--dur) var(--ease); }
.service:hover { background:var(--gold-100); }
.service .num { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--teal-700); font-weight:600; letter-spacing:.05em; }
.service h3 { font-size:var(--t-xl); margin-block:var(--s-3) var(--s-4); }
.service p { color:var(--ink-soft); }
.service::after { content:""; position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:100%; block-size:3px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
[dir="rtl"] .service::after { transform-origin:right; }
.service:hover::after { transform:scaleX(1); }

.quote { border-inline-start:3px solid var(--gold); padding-inline-start:var(--s-6); max-inline-size:68ch; }
.quote p { font-size:var(--t-xl); line-height:1.5; color:var(--ink); }
.quote p + p { margin-block-start:var(--s-5); font-size:var(--t-base); color:var(--ink-soft); line-height:var(--lh-body); }

.reasons { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
.reason { padding-inline-start:var(--s-5); border-inline-start:3px solid var(--teal); }
.reason h3 { font-size:var(--t-lg); margin-block-end:var(--s-3); }
.reason p { color:var(--ink-soft); font-size:var(--t-sm); }
[lang="ar"] .reason p { font-size:var(--t-base); }

.cta { background:var(--teal-700); color:#fff; position:relative; overflow:hidden; }
.cta .in { display:flex; gap:var(--s-6); align-items:center; justify-content:space-between; flex-wrap:wrap; padding-block:var(--s-8); position:relative; z-index:1; }
.cta h2 { font-size:var(--t-2xl); max-inline-size:22ch; }
.cta .btn-primary { background:#fff; color:var(--ink); }
.cta .btn-primary:hover { background:var(--gold-100); }

.site-footer { position:relative; z-index:1; background:var(--ink); color:rgba(255,255,255,.78); padding-block:var(--s-8) var(--s-6); font-size:var(--t-sm); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-7); }
.site-footer h4 { color:#fff; font-size:var(--t-sm); letter-spacing:.1em; text-transform:uppercase; margin-block-end:var(--s-4); }
[lang="ar"] .site-footer h4 { letter-spacing:0; text-transform:none; font-size:var(--t-lg); font-weight:700; }
.site-footer a { color:rgba(255,255,255,.78); text-decoration:none; }
.site-footer a:hover { color:var(--gold-300); text-decoration:underline; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--s-3); }
.footer-bottom { border-block-start:1px solid rgba(255,255,255,.14); margin-block-start:var(--s-7); padding-block-start:var(--s-5); display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:var(--t-xs); color:rgba(255,255,255,.6); }
.footer-logo { block-size:76px; width:auto; margin-block-end:var(--s-5); }

/* ============================================================
   SCROLL-PROGRESS BACK-TO-TOP — ring fills from real scroll.
   ============================================================ */
.to-top {
  position:fixed; z-index:70;
  inset-block-end:calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  inset-inline-end:calc(var(--s-6) + env(safe-area-inset-right, 0px));
  inline-size:56px; block-size:56px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--surface);
  box-shadow:0 2px 6px rgba(19,33,31,.10), 0 12px 28px -10px rgba(14,122,113,.35);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur), background var(--dur-fast) var(--ease);
}
.to-top.is-shown { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.to-top:hover { background:var(--gold-100); }
.to-top:hover .to-top__arrow { transform:translateY(-2px); }
.to-top:active { transform:scale(.94); }
/* Only the RING is rotated to start the fill at 12 o'clock; the arrow must
   not be. Scoped by class, not `.to-top svg`. */
.to-top .to-top__ring { position:absolute; inset:0; inline-size:56px; block-size:56px; transform:rotate(-90deg); }
.to-top__track { fill:none; stroke:var(--rule); stroke-width:3; }
.to-top__fill { fill:none; stroke:var(--gold-text); stroke-width:3; stroke-linecap:round; stroke-dasharray:var(--ring-len,157.08); stroke-dashoffset:var(--ring-len,157.08); }
.to-top__arrow { position:relative; z-index:1; color:var(--ink); transition:transform var(--dur-fast) var(--ease); }
@media (max-width:560px) {
  .to-top { inline-size:48px; block-size:48px; inset-block-end:calc(var(--s-5) + env(safe-area-inset-bottom,0px)); inset-inline-end:calc(var(--s-5) + env(safe-area-inset-right,0px)); }
  .to-top .to-top__ring { inline-size:48px; block-size:48px; }
}

/* ============================================================
   MOBILE — message and primary CTA first, artwork after.
   ============================================================ */
@media (max-width: 960px) {
  .slide { grid-template-columns:1fr; gap:var(--s-6); padding-block:var(--s-6) var(--s-4); }
  .slide-copy { order:0; }
  .art { order:1; max-inline-size:600px; margin-inline:auto; }
  .slide h1 { font-size:clamp(1.85rem,6.2vw,2.7rem); }
  .slide p.lede { font-size:var(--t-base); margin-block-end:var(--s-5); }
  .services, .reasons, .footer-grid { grid-template-columns:1fr; }
  .nav { display:none; }
  .nav-toggle { display:grid; place-items:center; margin-inline-start:auto; }
  .nav.open { display:flex; position:absolute; inset-block-start:100%; inset-inline:0; flex-direction:column; align-items:flex-start; background:var(--surface); padding:var(--s-5) 1.25rem; gap:var(--s-4); border-block-end:1px solid var(--rule); box-shadow:var(--shadow-md); }
  .cta .in { flex-direction:column; align-items:flex-start; }
  .footer-logo { block-size:64px; }
}
@media (max-width: 560px) {
  .hero-controls { gap:var(--s-2); }
  .slide-count { margin-inline-start:var(--s-1); }
}

/* ---- reveals: visible by default, armed only once observable ---- */
.reveal { opacity:1; transform:none; }
.reveal-armed { opacity:0; transform:translateY(18px); }
.reveal-armed.in { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.no-js .reveal, .no-js .reveal-armed { opacity:1 !important; transform:none !important; }

/* ---- Arabic safety ----
   letter-spacing inserts gaps INSIDE cursive joins. Character-level text
   splitting is FORBIDDEN on Arabic: it forces isolated letterforms and
   destroys the lam-alef ligature. Only whole lines animate anywhere here. */
[lang="ar"] *, [dir="rtl"] * { letter-spacing: normal; }

/* ---- no-JS ---- */
.nav-toggle[hidden] { display:none !important; }
.no-js .nav-toggle { display:none !important; }
.no-js .nav { display:flex !important; position:static !important; flex-wrap:wrap; gap:var(--s-4); inline-size:100%; margin-inline-start:0; padding:0; border:0; box-shadow:none; }
@media (max-width:960px) { .no-js .header-in { flex-wrap:wrap; } }
.no-js .loader { display:none !important; }
.no-js .to-top { display:none !important; }
/* Without JS the carousel cannot rotate, so its controls would be buttons
   that look live and do nothing. Slide 1 still reads in full. */
.no-js .hero-controls { display:none !important; }

/* ---- stills mode for screenshot tooling; never set by the site ---- */
[data-capture] *, [data-capture] *::before, [data-capture] *::after { transition:none !important; animation:none !important; }
[data-capture] .reveal, [data-capture] .reveal-armed { opacity:1 !important; transform:none !important; }
[data-capture] .loader { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .reveal-armed { opacity:1 !important; transform:none !important; }
  .parallax, .bg-deco { transform:none !important; }
  .__ma-cursor-dot, .__ma-cursor-ring { display:none !important; }
  .js-slider .slide:not(.is-current) .art,
  .js-slider .slide:not(.is-current) .slide-copy > * { transform:none !important; }
}
@media (hover:none), (pointer:coarse) { .parallax { transform:none !important; } }

/* ============================================================
   INNER PAGES — About / Services / Contact
   Same tokens, same chrome, same artwork treatment as the home
   page. Only new components live here; nothing above is altered.
   ============================================================ */

/* ---- page header: breadcrumb, title, lede ---- */
.page-head { position:relative; padding-block:clamp(2.25rem,4.5vw,4rem) clamp(1.75rem,3.5vw,3rem); border-block-end:1px solid var(--rule); background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(251,249,245,.80) 100%); }
.page-head h1 { font-size:var(--t-2xl); max-inline-size:22ch; }
.page-head h1 .accent { color:var(--gold-text); }
.page-head .lede { font-size:var(--t-lg); color:var(--ink-soft); max-inline-size:var(--measure); margin-block-start:var(--s-5); }

.breadcrumb { margin-block-end:var(--s-5); font-size:var(--t-sm); }
.breadcrumb ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
/* Generated separator, so it follows the document direction instead of being
   baked into the markup the wrong way round for RTL. */
.breadcrumb li + li::before { content:"/"; color:var(--rule); margin-inline-end:var(--s-3); }
.breadcrumb a { color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover { color:var(--ink); text-decoration:underline; }
.breadcrumb [aria-current="page"] { color:var(--ink); font-weight:600; }

/* ---- supporting artwork band: identical mask treatment to the hero ---- */
.figure-band { display:grid; grid-template-columns:1.02fr 0.98fr; gap:var(--s-8); align-items:center; direction:ltr; }
[dir="rtl"] .figure-band > .band-copy { direction:rtl; }
.band-copy h2 { font-size:var(--t-2xl); margin-block-end:var(--s-5); }
.band-copy p { color:var(--ink-soft); font-size:var(--t-lg); }
.band-copy p + p { margin-block-start:var(--s-4); }

/* ---- two-up cards (vision / mission) ---- */
.duo { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6); }
.card { position:relative; background:var(--surface); border:1px solid var(--rule); padding:var(--s-7) var(--s-6); }
.card::before { content:""; position:absolute; inset-block-start:-1px; inset-inline-start:-1px; inline-size:calc(100% + 2px); block-size:3px; background:var(--gold); }
.card--teal::before { background:var(--teal); }
.card h3 { font-size:var(--t-xl); margin-block-end:var(--s-4); }
.card p { color:var(--ink-soft); font-size:var(--t-lg); }

/* ---- three pillars ---- */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.pillar { background:var(--surface); padding:var(--s-7) var(--s-6); }
.pillar .num { font-family:var(--font-mono); font-size:var(--t-sm); font-weight:600; color:var(--teal-700); letter-spacing:.05em; }
.pillar h3 { font-size:var(--t-lg); margin-block:var(--s-3) var(--s-4); }
.pillar p { color:var(--ink-soft); font-size:var(--t-sm); }
[lang="ar"] .pillar p { font-size:var(--t-base); }

/* ---- capability list ---- */
.caps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:var(--s-4) var(--s-6); }
.caps li { padding-inline-start:var(--s-5); border-inline-start:2px solid var(--gold-300); color:var(--ink-soft); }

/* ---- six-up services grid (reuses .service from the home page) ---- */
.services--three { grid-template-columns:repeat(3,1fr); }

/* ---- contact ---- */
.contact-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s-8); align-items:start; }
.contact-list { margin:0; padding:0; }
.contact-list > div + div { margin-block-start:var(--s-5); padding-block-start:var(--s-5); border-block-start:1px solid var(--rule); }
.contact-list dt { font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--teal-700); margin-block-end:var(--s-2); }
[lang="ar"] .contact-list dt { letter-spacing:0; text-transform:none; font-size:var(--t-sm); }
.contact-list dd { margin:0; color:var(--ink); line-height:var(--lh-body); }
.contact-list dd a { text-decoration:none; }
.contact-list dd a:hover { text-decoration:underline; color:var(--teal-700); }

.form { background:var(--surface); border:1px solid var(--rule); padding:var(--s-7) var(--s-6); display:grid; gap:var(--s-5); }
.form h2 { font-size:var(--t-xl); }
.field { display:grid; gap:var(--s-2); }
.field label { font-weight:600; font-size:var(--t-sm); }
[lang="ar"] .field label { font-size:var(--t-base); }
.field .req { color:var(--gold-text); }
.field input, .field textarea { font:inherit; color:var(--ink); background:var(--ground); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s-3) var(--s-4); inline-size:100%; transition:border-color var(--dur-fast) var(--ease); }
.field input:hover, .field textarea:hover { border-color:var(--gold-300); }
.field textarea { min-block-size:8.5rem; resize:vertical; }
.field .err { font-size:var(--t-sm); color:var(--danger); }
.field .err:empty { display:none; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color:var(--danger); }
.form-note { font-size:var(--t-sm); color:var(--ink-faint); }
.form-status { padding:var(--s-4) var(--s-5); border-inline-start:3px solid var(--gold); background:var(--gold-100); font-size:var(--t-sm); color:var(--ink); }
.form-status:empty { display:none; }
/* The form needs JS (validation, and later the endpoint's nonce). Without it we
   show the direct contact routes instead of a control that cannot work. */
.form-fallback { display:none; }
.no-js .form { display:none !important; }
.no-js .form-fallback { display:block; }

@media (max-width:960px) {
  .figure-band { grid-template-columns:1fr; gap:var(--s-6); }
  .figure-band > .band-copy { order:0; }
  .figure-band > .art { order:1; max-inline-size:600px; margin-inline:auto; }
  .duo, .pillars, .services--three, .contact-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:clamp(1.7rem,5.6vw,2.4rem); }
}

/* ---- footer legal identity ---- */
.legal-name { margin-block-start:var(--s-3); color:rgba(255,255,255,.62); font-size:var(--t-sm); }
.footer-bottom .ids { color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }

/* ============================================================
   COMPANY INFORMATION — discreet, factual, no badges.
   Only identifiers that are documented and current: commercial
   registration and VAT registration. Expired or historical
   certificates are deliberately NOT rendered as credentials.
   ============================================================ */
.co-info { border:1px solid var(--rule); background:var(--surface); padding:var(--s-6); }
.co-info h2 { font-size:var(--t-lg); margin-block-end:var(--s-5); }
.co-info dl { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:var(--s-5) var(--s-6); }
.co-info dt { font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--teal-700); margin-block-end:var(--s-2); }
[lang="ar"] .co-info dt { letter-spacing:0; text-transform:none; font-size:var(--t-sm); }
.co-info dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
.co-info .co-note { margin-block-start:var(--s-5); padding-block-start:var(--s-4); border-block-start:1px solid var(--rule); color:var(--ink-faint); font-size:var(--t-sm); }

/* ---- direct contact actions (no form: see planning/CONTACT-DELIVERY.md) ---- */
.contact-actions { display:grid; gap:var(--s-4); }
.contact-actions .btn { justify-content:center; padding-block:var(--s-5); font-size:var(--t-base); }
.contact-panel { background:var(--surface); border:1px solid var(--rule); padding:var(--s-7) var(--s-6); display:grid; gap:var(--s-5); }
.contact-panel h2 { font-size:var(--t-xl); }
.contact-panel p { color:var(--ink-soft); }