@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../assets/Fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../assets/Fonts/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../assets/Fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('../assets/Fonts/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../assets/Fonts/thmanyahseriftext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../assets/Fonts/thmanyahseriftext-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../assets/Fonts/thmanyahseriftext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  src: url('../assets/Fonts/thmanyahseriftext-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

/* ════════════════════════════════════════════
   SAILOORS ADVERTISING — DESIGN SYSTEM 2026
   Inspired by askphill.com
════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tajawal:wght@400;500;700;900&display=swap');

/* ── TOKENS ── */
/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Phase 2.1
   Three layers, in this order:
     1. PALETTE   raw values. Never referenced by a component rule.
     2. CONTEXT   --bg/--fg/--fg-muted/--rule/--accent-text, redefined by
                  exactly two classes: .sec--dark and .sec--light.
     3. ALIASES   the legacy names (--white/--dim/--border/--bg2 …) point at
                  the context layer, so the ~160KB of existing component CSS
                  inverts with the section it sits in without being rewritten.
                  This is what makes "two classes, no per-section colour
                  rules" achievable instead of a 300-rule light-mode sheet.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 1. PALETTE ── */
  --ink:       #07070A;
  --paper:     #F7F5F1;
  --red:       #F00514;   /* fills, buttons, display-size text only */
  --red-ink:   #B8000F;   /* small red text on paper — 6.33:1 */
  --red-glow:  #FF4A55;   /* small red text on ink   — 6.10:1 */

  /* ── TYPE SCALE ── */
  --lh-body:    1.85;
  --lh-tight:   1.15;
  --lh-display: 1.05;
  --ls-display: -0.01em;
  --fw-body:    300;

  --fs-xs:      clamp(11px, .8vw, 13px);
  --fs-sm:      clamp(15px, 1.1vw, 17px);
  --fs-base:    clamp(17px, 1.3vw, 19px);
  --fs-md:      clamp(24px, 2vw, 28px);
  --fs-lg:      clamp(32px, 3vw, 42px);
  --fs-xl:      clamp(44px, 4.6vw, 63px);
  --fs-display: clamp(56px, 7vw, 96px);

  /* ── SPACING ── */
  --sec-sm: 90px;
  --sec-md: 130px;
  --sec-lg: 160px;

  /* ── GLOW ── */
  --glow-y: 0%;

  --ff-en:     'Bebas Neue', sans-serif;
  --ff-body:   'Instrument Sans', sans-serif;
  --ff-ar:     'Tajawal', sans-serif;
  --nav-h:     76px;
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --ease2:     cubic-bezier(0.77,0,0.18,1);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --g:         clamp(20px,5vw,80px);
}

/* ── 2. CONTEXT ──────────────────────────────────────────────────────
   Dark is the document default so anything outside a section (nav,
   overlays, mobile menu) has a defined context. .sec--light flips it. */
:root,
.sec--dark {
  --bg:           var(--ink);
  --fg:           var(--paper);
  --fg-muted:     color-mix(in srgb, var(--paper) 55%, transparent);
  --rule:         color-mix(in srgb, var(--paper) 14%, transparent);
  --accent-text:  var(--red-glow);
}

/* .nav--on-light is listed here, not given its own colour rules: the nav is
   fixed and crosses both grounds, so it needs the same context switch the
   sections use. JS toggles the class from whichever section is under the nav's
   bottom edge. The inline logo inherits it too — its .cls-2 fill is var(--fg),
   so no separate dark logo asset is needed. */
.sec--light,
.nav--on-light {
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     color-mix(in srgb, var(--ink) 62%, transparent);
  --rule:         color-mix(in srgb, var(--ink) 13%, transparent);
  --accent-text:  var(--red-ink);
}

/* ── 3. ALIASES ──────────────────────────────────────────────────────
   Legacy token names kept as pointers into the context layer. Every
   existing `var(--white)` / `var(--dim)` / `var(--border)` rule therefore
   follows whichever section class is its ancestor. Do not give these
   literal values again — that would re-pin the old palette. */
:root,
.sec--dark,
.sec--light,
.nav--on-light {
  --white:   var(--fg);
  --dim:     var(--fg-muted);
  --dim2:    var(--rule);
  --border:  var(--rule);
  --border2: color-mix(in srgb, var(--fg) 22%, transparent);
  --bg2:     var(--bg);
  --bg3:     var(--bg);
  --red-a:   color-mix(in srgb, var(--red) 12%, transparent);
}

.sec--dark,
.sec--light {
  background-color: var(--bg);
  color: var(--fg);
  position: relative;
  isolation: isolate;
}

/* ── 2.2 GLOW ────────────────────────────────────────────────────────
   One variable, --glow-y, two behaviours decided by the section class.
   Dark: light is a point in the dark. Light: the glow has already filled
   the frame, so it is not repeated — what is left of it are thin red
   threads (rules, underlines, folio numerals).
   Implemented as background layers rather than ::before/::after because
   .hero already owns both of its pseudo-elements. */
.sec--dark {
  background-image:
    radial-gradient(125% 85% at 50% var(--glow-y),
      color-mix(in srgb, var(--red) 14%, transparent) 0%,
      color-mix(in srgb, var(--red) 10%, transparent) 26%,
      transparent 62%);
  background-repeat: no-repeat;
}

.sec--light {
  background-image: none;
}

/* ── 2.3 TRANSITION ──────────────────────────────────────────────────
   A 120px ramp wherever the ground changes, so no section meets another
   on a hard edge. Adjacent-sibling selectors mean the ramp appears only
   at a real boundary: two light sections in a row get nothing. */
.sec--dark + .sec--light {
  background-image: none;
}

.sec--light + .sec--dark {
  background-image: none;
}

/* The footer sits outside <main>, so the adjacent-sibling rule above
   cannot reach it. :has() asks the same question across that boundary:
   ramp into the footer only when the page ends on a light section. */
main:has(> :last-child.sec--light) + .footer.sec--dark {
  background-image: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 120px, 100% 100%;
  background-position: top left, center center;
}

/* ── 2.2 RED THREADS (light sections only) ───────────────────────────
   Context-driven, not per-section: any rule/divider inside a light
   section thins out and picks up the red. */
.sec--light .label-line::before,
.sec--light hr,
.sec--light .rule {
  background: color-mix(in srgb, var(--red) 55%, transparent);
  height: 0.5px;
}

.sec--light .folio,
.sec--light .proj-index,
.sec--light .svc-num {
  color: color-mix(in srgb, var(--red) 8%, var(--fg));
}

/* Display-size headings keep the pure brand red; the 20px floor in the
   token comment is enforced by everything else using --accent-text. */
.display .c-red,
.h1 .c-red,
.h2 .c-red,
h1 .c-red,
h2 .c-red,
.cta-title .c-red,
.stat-num,
.process-n {
  color: var(--red);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-body);
  overflow-x: hidden;
  cursor: none;
}
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { background: none; border: none; cursor: none; font-family: inherit; }

/* ── NOISE ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 8000; pointer-events: none;
  opacity: 0.028;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 256px;
}

/* ── CURSOR ── */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 9px; height: 9px;
  background: var(--white);
  border-radius: 50%;
}
.cursor-ring {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  transition: width .45s var(--ease), height .45s var(--ease), border-color .3s;
}
.cursor.hover .cursor-ring { width: 90px; height: 90px; border-color: var(--accent-text); }
.cursor.hover .cursor-dot  { transform: translate(-50%,-50%) scale(0); }
.cursor.click .cursor-dot  { transform: translate(-50%,-50%) scale(2.2); }

/* ── LOADER ── */
#loader {
  position: fixed; inset: 0;
  z-index: 9998; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 36px;
}
#loader .l-logo {
  font-family: var(--ff-en);
  font-size: clamp(52px, 9vw, 120px);
  letter-spacing: 0.06em;
  overflow: hidden;
}
#loader .l-logo span { display: block; transform: translateY(100%); }
#loader .l-bar-wrap {
  width: min(380px, 58vw); height: 1px;
  background: var(--border);
}
#loader .l-bar { height: 100%; background: var(--red); width: 0; }
#loader .l-pct {
  font-family: var(--ff-en);
  font-size: 13px; letter-spacing: 0.28em;
  color: var(--dim);
}

/* ── PROGRESS ── */
#scrollProgress {
  position: fixed; top: 0; left: 0;
  height: 2px; background: var(--red);
  z-index: 9000; width: 0;
  transition: width 0.08s linear;
}

/* ── PAGE TRANSITION ── */
#pageTransition {
  position: fixed; inset: 0;
  z-index: 9997; background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; height: var(--nav-h);
  padding: 0 var(--g);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .35s, border-color .35s, transform .28s var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
.nav.nav-hidden {
  transform: translateY(-100%);
}
.nav-logo {
  display: flex; align-items: center;
  height: 28px;
}
.nav-logo svg { height: 100%; width: auto; }
.nav-logo .cls-2 { fill: var(--white); }
.nav-logo .cls-1 { fill: var(--red); }

.nav-links {
  display: flex; align-items: center; gap: 40px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
  position: relative;
  transition: color .25s;
}
.nav-link::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--red);
  transition: width .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-cta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 24px;
  background: var(--red); color: var(--white);
  border-radius: 2px;
  transition: all .25s var(--ease);
}
.nav-cta:hover { background: var(--white); color: var(--bg); transform: translateY(-2px); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 28px;
}
.nav-hamburger span {
  display: block; height: 1.5px;
  background: var(--white);
  transition: all .3s var(--ease);
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; flex-direction: column;
  justify-content: center; padding: var(--g);
  transform: translateX(100%);
  transition: transform .65s var(--ease2);
}
.nav-mobile.open { transform: none; }
.nav-mobile-link {
  font-family: var(--ff-en);
  font-size: clamp(48px, 11vw, 88px);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--fg) 35%, transparent);
  display: block; padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s, padding-left .3s var(--ease);
}
.nav-mobile-link:hover { color: var(--accent-text); padding-left: 16px; }
.nav-mobile-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── MARQUEE ── */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
  animation: marqueeScroll 16s linear infinite;
}

.marquee.rev .marquee-track {
  animation-name: marqueeScrollRev;
}

.marquee-group {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
}


.marquee-item {
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px;
  font-family: var(--ff-en);
  font-size: clamp(22px, 2.8vw, 38px);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--fg) 25%, transparent);
  white-space: nowrap;
}
.marquee-star { color: var(--accent-text); font-size: 0.7em; }
/* Force monochrome text glyphs (not colored emoji) for symbol icons on iOS Safari */
.marquee-star, .nm2-arrow, .btn-arrow, .proj-arr, .nm2-social, .dd-code {
  font-variant-emoji: text;
  -webkit-font-feature-settings: normal;
}
@keyframes marqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marqueeScrollRev {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ── LAYOUT ── */
.container {
  width: 100%; max-width: 1560px;
  margin: 0 auto; padding: 0 var(--g);
}
.section { padding: clamp(80px, 11vw, 160px) 0; }
/* Removed: .section-dark / .section-alt / .marquee / .footer each painted
   their own background. Those are exactly the per-section colour rules the
   rhythm system replaces, and the `background:` shorthand also reset the
   background-image, silently killing the glow layer on any section that
   carried one. Ground colour now comes only from .sec--dark / .sec--light. */
.rule { height: 1px; background: var(--border); margin: 0 var(--g); }

/* ── TYPOGRAPHY ── */
.display-xl {
  font-family: var(--ff-en);
  font-size: clamp(90px, 16vw, 240px);
  line-height: 0.84; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display {
  font-family: var(--ff-en);
  font-size: clamp(64px, 10vw, 160px);
  line-height: 0.88; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--ff-en);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.92; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--ff-en);
  font-size: clamp(28px, 3.5vw, 56px);
  text-transform: uppercase; line-height: 1;
}
.body-xl { font-size: clamp(18px, 1.6vw, 26px); line-height: 1.65; color: var(--dim); }
.body-lg { font-size: clamp(15px, 1.3vw, 21px); line-height: 1.7;  color: var(--dim); }
.body    { font-size: clamp(13px, 1vw,  17px);  line-height: 1.75; color: var(--dim); }
.label {
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  color: var(--dim);
}
.label-line {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.label-line::before {
  content: ''; width: 28px; height: 1.5px;
  background: var(--red); display: block; flex-shrink: 0;
}
.c-red    { color: var(--accent-text); }
.c-white  { color: var(--white); }
.c-dim    { color: var(--dim); }
.outline  { -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 22%, transparent); color: transparent; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: all .28s var(--ease);
  position: relative;
}
.btn-fill {
  background: var(--red); color: var(--white);
  padding: 15px 36px; border-radius: 2px;
}
.btn-fill:hover { background: var(--white); color: var(--bg); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(240,5,20,.28); }
.btn-stroke {
  border: 1.5px solid var(--border2); color: var(--white);
  padding: 14px 36px; border-radius: 2px;
}
.btn-stroke:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-3px); }
.btn-text { color: var(--white); gap: 14px; }
.btn-text:hover { color: var(--accent-text); }
.btn-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.btn:hover .btn-arrow { transform: rotate(-45deg); }

/* ── SECTION HEADER ── */
.sec-head {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(48px, 7vw, 88px);
  flex-wrap: wrap;
}

/* ── PROJECT CARDS ── */
.proj-card {
  position: relative; border-radius: 6px;
  overflow: hidden; background: var(--bg3);
  display: block; cursor: none;
}
.proj-card-img {
  width: 100%; height: 100%;
  transition: transform 1s var(--ease);
  will-change: transform;
}
.proj-card:hover .proj-card-img { transform: scale(1.07); }
.proj-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 95%, transparent) 0%, color-mix(in srgb, var(--bg) 15%, transparent) 55%, transparent 100%);
  opacity: .6; transition: opacity .5s;
}
.proj-card:hover .proj-overlay { opacity: 1; }
.proj-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px;
  transform: translateY(6px);
  transition: transform .4s var(--ease);
}
.proj-card:hover .proj-info { transform: none; }
.proj-tags { display: flex; gap: 8px; margin-bottom: 10px; }
.proj-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-text);
  background: rgba(240,5,20,.1);
  border: 1px solid rgba(240,5,20,.25);
  padding: 3px 10px; border-radius: 100px;
}
.proj-name {
  font-family: var(--ff-en);
  font-size: clamp(20px, 2.5vw, 36px);
  text-transform: uppercase; line-height: 1; margin-bottom: 8px;
}
.proj-meta { display: flex; align-items: center; justify-content: space-between; }
.proj-client { font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.proj-arr {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; opacity: 0;
  transform: rotate(-45deg);
  transition: all .3s var(--ease);
}
.proj-card:hover .proj-arr { opacity: 1; border-color: var(--accent-text); color: var(--accent-text); transform: rotate(0); }

/* ── SERVICE ITEMS ── */
.svc-item {
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px; align-items: start;
  cursor: none;
  transition: padding-left .3s var(--ease);
}
.svc-item:first-child { border-top: 1px solid var(--border); }
.svc-item:hover { padding-left: 20px; }
.svc-num { font-family: var(--ff-en); font-size: 13px; letter-spacing: .15em; color: var(--accent-text); padding-top: 6px; }
.svc-title {
  font-family: var(--ff-en);
  font-size: clamp(30px, 4vw, 60px);
  text-transform: uppercase; line-height: 1; margin-bottom: 10px;
  transition: color .2s;
}
.svc-item:hover .svc-title { color: var(--accent-text); }
.svc-desc { font-size: 14px; color: var(--dim); max-width: 480px; line-height: 1.7; }
.svc-icon { font-size: 32px; opacity: .25; padding-top: 4px; transition: opacity .2s, transform .3s var(--ease); }
.svc-item:hover .svc-icon { opacity: .6; transform: scale(1.2) rotate(-10deg); }
.svc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.svc-tag-pill {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--border2);
  padding: 4px 12px; border-radius: 100px; color: var(--dim);
}

/* ── STATS ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border-radius: 6px; overflow: hidden;
}
.stat-box { background: var(--bg2); padding: 44px 36px; text-align: center; }
.stat-num {
  font-family: var(--ff-en);
  font-size: clamp(56px, 7vw, 100px);
  line-height: 1; color: var(--accent-text); margin-bottom: 6px;
}
.stat-lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); font-weight: 600; }

/* ── CLIENTS ── */
.clients-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--border);
  border-radius: 6px; overflow: hidden;
}
.client-box {
  background: var(--bg2);
  padding: 32px 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.client-box:hover { background: var(--bg3); }
.client-name {
  font-family: var(--ff-en); font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 28%, transparent); text-align: center;
  transition: color .2s;
}
.client-box:hover .client-name { color: color-mix(in srgb, var(--fg) 75%, transparent); }

/* ── PROCESS ── */
.process-list { display: flex; flex-direction: column; gap: 2px; }
.process-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px; align-items: center;
  padding: 28px 32px;
  background: var(--bg2);
  border-radius: 3px;
  cursor: none;
  transition: background .2s, padding-right .3s var(--ease);
}
.process-item:hover { background: var(--bg3); padding-right: 48px; }
.process-n { font-family: var(--ff-en); font-size: 52px; color: var(--accent-text); line-height: 1; }
.process-title { font-family: var(--ff-en); font-size: clamp(22px, 2.5vw, 40px); text-transform: uppercase; line-height: 1; margin-bottom: 4px; }
.process-desc { font-size: 13px; color: var(--dim); }

/* ── PAGE HERO ── */
.page-hero {
  min-height: 60vh;
  display: flex; align-items: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: clamp(60px, 8vw, 100px);
  position: relative; overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(240,5,20,.06) 0%, transparent 55%);
  pointer-events: none;
}

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.contact-info { }
.contact-detail { padding: 24px 0; border-bottom: 1px solid var(--border); }
.contact-detail:first-child { border-top: 1px solid var(--border); }
.contact-detail-label { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; font-weight: 600; }
.contact-detail-val { font-size: 17px; font-weight: 600; }
.contact-detail-val a:hover { color: var(--accent-text); }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.form-field {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  padding: 14px 18px;
  color: var(--white);
  font-family: var(--ff-body); font-size: 15px;
  outline: none; width: 100%;
  transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none;
}
.form-field:focus { border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(240,5,20,.08); }
.form-field::placeholder { color: color-mix(in srgb, var(--fg) 20%, transparent); }
textarea.form-field { resize: vertical; min-height: 130px; }
select.form-field {
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F00514' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-left: 40px;
}
select.form-field option { background: var(--bg3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── FOOTER ── */
.footer {
  border-top: 1px solid var(--border);
  padding: clamp(60px, 8vw, 120px) var(--g) 40px;
}
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 60px; padding-bottom: 60px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}
.footer-logo { height: 42px !important; margin-bottom: 24px; }
.footer-logo svg { height: 100%; width: auto; }
.footer-logo .cls-2 { fill: var(--white); }
.footer-logo .cls-1 { fill: var(--red); }
.footer-tag { font-size: 14px; color: var(--dim); line-height: 1.65; max-width: 280px; }
.footer-col-title { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-lnk { font-size: 14px; color: var(--dim); transition: color .2s; }
.footer-lnk:hover { color: var(--white); }
.footer-socials { display: flex; flex-direction: column; gap: 12px; }
.footer-soc { font-size: 14px; color: var(--dim); display: flex; align-items: center; gap: 8px; transition: color .2s; }
.footer-soc:hover { color: var(--accent-text); }
.footer-lnk.is-disabled,
.footer-soc.is-disabled,
.contact-info-value.is-disabled { pointer-events: none; opacity: .55; cursor: default; }
.footer-bottom {
  position: relative;
  min-height: 40px;
  display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-size: 12px; color: var(--dim); text-align: center; }
.back-top {
  position: absolute;
  left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--dim);
  transition: all .25s var(--ease);
}
.back-top:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-4px); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(240,5,20,.35); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── GSAP INITIAL STATES — handled below with transitions ── */

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .clients-grid { grid-template-columns: repeat(3,1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media(max-width:768px) {
  :root { --nav-h: 64px; }
  body { cursor: auto; }
  .cursor { display: none; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
  .svc-item { grid-template-columns: 60px 1fr; }
  .svc-icon { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .process-item { grid-template-columns: 64px 1fr; padding: 20px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
}

/* ══ LANGUAGE TOGGLE ══ */
/* ══ LANGUAGE TOGGLE ══ */
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  height: 42px;
  padding: 0 16px;

  border-radius: 999px;
  border: 1px solid rgba(240, 5, 20, .65);
  background: rgba(240, 5, 20, .10);

  color: var(--white);
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;

  cursor: pointer;
  white-space: nowrap;
  transition: all .25s var(--ease);
}

.lang-btn:hover {
  border-color: var(--accent-text);
  background: rgba(240, 5, 20, .18);
  box-shadow: 0 0 0 4px rgba(240, 5, 20, .10);
}

.lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;

  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  line-height: 1;
}

.lang-option.active {
  background: var(--red);
  color: var(--white);
}

.lang-ar {
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0;
  font-weight: 800;
}

.lang-divider {
  color: rgba(255, 255, 255, .35);
  font-weight: 700;
}
.lang-btn:hover{border-color: var(--accent-text);background:rgba(240,5,20,.08);}
[dir="rtl"] .h-stat{padding-right:32px;padding-left:0;border-right:1px solid var(--border);border-left:none;}
[dir="rtl"] .h-stat:first-child{border-right:none;padding-right:0;}
[dir="rtl"] .label-line{flex-direction:row-reverse;}
[dir="rtl"] .label-line::before{margin-left:0;}
[dir="rtl"] .svc-item{direction:rtl;}
[dir="rtl"] .footer-top{direction:rtl;}
[dir="rtl"] .nav-mobile-link:hover{padding-right:16px;padding-left:0;}
[dir="rtl"] .scroll-cue{right:auto;left:var(--g);}
[dir="rtl"] .statement-title{font-family:'Tajawal',sans-serif;font-weight:900;}
[dir="rtl"] .cta-title{font-family:'Tajawal',sans-serif;font-weight:900;}
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
[dir="rtl"] .body-xl,[dir="rtl"] .body-lg,[dir="rtl"] .body,[dir="rtl"] .svc-desc,[dir="rtl"] .process-desc,[dir="rtl"] .footer-tag{font-family:'Tajawal',sans-serif;}

/* ══ LOGO TRUST ══ */
.logo-trust{padding:clamp(60px,8vw,100px) var(--g);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);text-align:center;}
.logo-trust-inner{display:flex;flex-direction:column;align-items:center;gap:32px;}
.logo-trust-mark{width:min(520px,72vw);filter:drop-shadow(0 0 60px rgba(240,5,20,.18));animation:logoFloat 4s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.logo-trust-tagline{font-family:var(--ff-en);font-size:clamp(11px,1.2vw,14px);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}
.logo-trust-tagline span{color: var(--accent-text);}
.logo-trust-dividers{display:flex;align-items:center;gap:16px;width:min(400px,60vw);}
.logo-trust-line{flex:1;height:1px;background:var(--border);}
.logo-trust-star{color: var(--accent-text);font-size:14px;}

/* ══ SCROLL REVEAL — IntersectionObserver classes ══
   The hidden start-state is scoped to html.js-reveal, which is set by an
   inline <head> script. If JS is disabled or fails to load, the class is
   never added and all content renders visible — no blank sections. ══ */
html.js-reveal .gsap-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
html.js-reveal .gsap-fade {
  opacity: 0;
  transition: opacity 0.9s ease;
}
html.js-reveal .gsap-up.visible {
  opacity: 1;
  transform: translateY(0);
}
html.js-reveal .gsap-fade.visible {
  opacity: 1;
}
html.js-reveal [data-stagger-item] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
html.js-reveal [data-stagger-item].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: force the final state, no transform, no transition. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .gsap-up,
  html.js-reveal .gsap-fade,
  html.js-reveal [data-stagger-item],
  .gsap-up, .gsap-fade, [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}
/* إخفاء نسبة التحميل 0% */
.loader-percent,
.preloader-percent,
.loading-percent,
.progress-percent,
.percentage,
.percent,
#percent,
#percentage,
#progress-percent {
  display: none !important;
}
.l-pct {
  display: none !important;
}

/* ===== Home Projects Editorial Grid ===== */
#homeProjects .home-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

#homeProjects .proj-card {
  width: 100%;
  min-width: 0;
}

#homeProjects .home-featured {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 520px;
  aspect-ratio: auto;
}

#homeProjects .home-wide {
  grid-column: span 2;
  aspect-ratio: 16 / 8;
}

#homeProjects .home-normal {
  grid-column: span 1;
  aspect-ratio: 1 / 1.05;
}

#homeProjects .proj-card.gsap-up {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1000px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide {
    grid-column: span 2;
  }

  #homeProjects .home-featured {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: 1fr;
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide,
  #homeProjects .home-normal {
    grid-column: span 1;
    grid-row: auto;
    min-height: 320px;
    aspect-ratio: 16 / 11;
  }
}
.clients-grid a.client-box {
  text-decoration: none;
  color: inherit;
}

.clients-grid a.client-box:hover {
  cursor: pointer !important;
}
/* ===== Language switch: text-only active state ===== */
.lang-option.active {
  background: transparent !important;
  color: var(--accent-text) !important;
}

.lang-option {
  background: transparent !important;
}

.lang-btn {
  background: transparent !important;
  box-shadow: none !important;
}

.lang-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.lang-divider {
  color: rgba(255, 255, 255, .35) !important;
}
#ftPhone,
#ctPhone {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ===== Home Projects Editorial Grid ===== */
#homeProjects {
  width: 100%;
}

#homeProjects .home-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

#homeProjects .proj-card {
  width: 100%;
  min-width: 0;
  display: block;
}

#homeProjects .home-featured {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 520px;
  aspect-ratio: auto;
}

#homeProjects .home-wide {
  grid-column: span 2;
  min-height: 260px;
  aspect-ratio: 16 / 8;
}

#homeProjects .home-normal {
  grid-column: span 1;
  min-height: 260px;
  aspect-ratio: 1 / 1.05;
}

#homeProjects .proj-card.gsap-up {
  opacity: 1 !important;
  transform: none !important;
}

#homeProjects .proj-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1000px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide {
    grid-column: span 2;
  }

  #homeProjects .home-featured {
    min-height: 420px;
  }

  #homeProjects .home-normal,
  #homeProjects .home-wide {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: 1fr;
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide,
  #homeProjects .home-normal {
    grid-column: span 1;
    grid-row: auto;
    min-height: 320px;
    aspect-ratio: 16 / 11;
  }
}
/* ===== Home Projects Editorial Grid ===== */
#homeProjects {
  width: 100%;
  display: block;
}

#homeProjects .home-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

#homeProjects .proj-card {
  width: 100%;
  min-width: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg3);
}

#homeProjects .home-featured {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 520px;
  aspect-ratio: auto;
}

#homeProjects .home-wide {
  grid-column: span 2;
  min-height: 260px;
  aspect-ratio: 16 / 8;
}

#homeProjects .home-normal {
  grid-column: span 1;
  min-height: 260px;
  aspect-ratio: 1 / 1.05;
}

#homeProjects .proj-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#homeProjects .proj-card.visible,
#homeProjects .proj-card.gsap-up {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1000px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide {
    grid-column: span 2;
  }

  #homeProjects .home-featured {
    min-height: 420px;
  }

  #homeProjects .home-normal,
  #homeProjects .home-wide {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  #homeProjects .home-projects-grid {
    grid-template-columns: 1fr;
  }

  #homeProjects .home-featured,
  #homeProjects .home-wide,
  #homeProjects .home-normal {
    grid-column: span 1;
    grid-row: auto;
    min-height: 320px;
    aspect-ratio: 16 / 11;
  }
}
/* Keep numbers and website links readable */
[dir="rtl"] [data-count],
[dir="rtl"] .svc-num,
[dir="rtl"] .process-n,
[dir="rtl"] #ftPhone,
[dir="rtl"] #ctPhone,
[dir="rtl"] .footer-email,
[dir="rtl"] #ftEmail {
  font-family: 'Instrument Sans', sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
/* ===== FINAL RTL TYPOGRAPHY CLEAN SYSTEM ===== */

/* Arabic base text */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .footer-lnk,
html[dir="rtl"] .footer-soc,
html[dir="rtl"] .label,
html[dir="rtl"] .body,
html[dir="rtl"] .body-lg,
html[dir="rtl"] .svc-desc,
html[dir="rtl"] .process-desc,
html[dir="rtl"] .footer-desc,
html[dir="rtl"] .proj-client,
html[dir="rtl"] .proj-tag,
html[dir="rtl"] .svc-tag-pill {
  font-family: 'Thmanyah Serif Text', 'Tajawal', 'Tahoma', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
}

/* Arabic main display titles */
html[dir="rtl"] .hero-headline,
html[dir="rtl"] .hero-headline .line:not(.outline),
html[dir="rtl"] .display,
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .statement-title,
html[dir="rtl"] .cta-title,
html[dir="rtl"] .svc-title,
html[dir="rtl"] .proj-name,
html[dir="rtl"] .client-name {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.18 !important;
  overflow: visible !important;
}

/* Arabic gray hero middle word: Thmanyah font without opacity blur */
html[dir="rtl"] #homeHeroLine2,
html[dir="rtl"] .hero-headline .outline {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-weight: 900 !important;
  color: #808080 !important;
  opacity: 1 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  font-feature-settings: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Arabic marquee container */
html[dir="rtl"] .marquee {
  overflow: hidden !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  background: #000 !important;
}

html[dir="rtl"] .marquee-track {
  align-items: center !important;
}

/* Hide inherited font size on item and control text only through .marquee-word */
html[dir="rtl"] .marquee-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 0 34px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  direction: rtl !important;
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Arabic marquee word: Thmanyah font, solid gray, no opacity */
html[dir="rtl"] .marquee-word {
  display: inline-block !important;
  font-family: 'Tajawal', 'Thmanyah Serif Text', sans-serif !important;
  font-size: clamp(15px, 1.5vw, 22px) !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #808080 !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  font-feature-settings: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

html[dir="rtl"] .marquee-star {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #F00514 !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Arabic navigation */
html[dir="rtl"] .nav-link {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Arabic paragraphs and gray descriptions */
html[dir="rtl"] .body,
html[dir="rtl"] .body-lg,
html[dir="rtl"] .svc-desc,
html[dir="rtl"] .process-desc,
html[dir="rtl"] .footer-desc {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
}

/* Keep numbers, emails, and phone readable */
html[dir="rtl"] [data-count],
html[dir="rtl"] .svc-num,
html[dir="rtl"] .process-n,
html[dir="rtl"] #ftPhone,
html[dir="rtl"] #ctPhone,
html[dir="rtl"] #ftEmail,
html[dir="rtl"] .footer-email {
  font-family: 'Instrument Sans', sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Home stats Arabic suffix fix */
html[dir="rtl"] .h-stat-n {
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  display: inline-block !important;
}
/* ===== True item-by-item news ticker ===== */
.marquee {
  overflow: hidden !important;
}

.marquee-track {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  overflow: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
}

.marquee.rev .marquee-track {
  animation: none !important;
  transform: none !important;
}

.marquee-track.ticker-ready .marquee-item {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  flex: none !important;
  will-change: transform !important;
}

.marquee-group {
  display: contents !important;
}

html[dir="rtl"] .marquee-track {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

html[dir="rtl"] .marquee-track.ticker-ready .marquee-item {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
}
/* ===== Ticker anti-jitter rendering fix ===== */
.marquee {
  contain: paint !important;
}

.marquee-track.ticker-ready .marquee-item {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html[dir="rtl"] .marquee-word,
html[dir="rtl"] .marquee-item {
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* ===== Project Video Section ===== */
.project-video-wrap {
  width: 100%;
  margin: 0 0 clamp(40px, 5vw, 72px);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
}

.project-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
/* ===== Footer email + phone clean fix ===== */

/* Keep footer layout untouched — only control email and phone */
#ftEmail,
#ftPhone {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: color-mix(in srgb, var(--fg) 66%, transparent) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  transition: color .2s ease !important;
}

/* Phone directly under email */
#ftPhone {
  margin-top: 6px !important;
}

/* Hover */
#ftEmail:hover,
#ftPhone:hover {
  color: var(--white) !important;
}

/* RTL: do not flip email/phone, but keep them inside their footer column */
html[dir="rtl"] #ftEmail,
html[dir="rtl"] #ftPhone {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
}

/* Fix only the home footer wrapper without changing column position */
.footer-contact-links {
  display: block !important;
  direction: inherit !important;
  text-align: inherit !important;
}

.footer-contact-links .footer-col-title {
  margin-bottom: 8px !important;
}
/* ===== Contact Page Clean Premium Layout ===== */
.contact-hero-clean {
  padding: calc(var(--nav-h) + 72px) var(--g) clamp(54px, 6vw, 86px);
  min-height: auto;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.contact-hero-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 76% 28%, rgba(240,5,20,.08), transparent 56%);
  pointer-events: none;
}

.contact-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.contact-hero-copy {
  grid-column: 1;
}

.contact-hero-title {
  font-family: var(--ff-en);
  font-size: clamp(76px, 12vw, 178px);
  line-height: .85;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-top: 16px;
  max-width: 760px;
}

.contact-section-clean {
  padding-top: clamp(54px, 6vw, 92px) !important;
}

.contact-layout-clean {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.38fr);
  gap: clamp(34px, 5vw, 86px);
  align-items: start;
}

.contact-info-card,
.contact-form-card-clean {
  background:
    radial-gradient(circle at 0% 0%, rgba(240,5,20,.08), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--fg) 4%, transparent), color-mix(in srgb, var(--fg) 1.8%, transparent));
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 42px);
}

.contact-info-card {
  position: sticky;
  top: calc(var(--nav-h) + 26px);
}

.contact-mini-label,
.contact-info-label {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
}

.contact-mini-label {
  margin-bottom: 24px;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.contact-info-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.contact-info-label {
  margin-bottom: 8px;
}

.contact-info-value {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.contact-red {
  color: var(--accent-text) !important;
  transition: color .2s ease;
}

.contact-red:hover {
  color: var(--white) !important;
}

.contact-social-box {
  margin-top: 28px;
}

.contact-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.contact-form-grid-clean {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.contact-form-card-clean .form-label {
  margin-bottom: 7px;
}

.contact-form-card-clean .form-field {
  min-height: 58px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 3.8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 11.5%, transparent);
}

.contact-form-card-clean .form-field:hover {
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
}

.contact-form-card-clean .form-field:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(240,5,20,.08);
}

.phone-combo-pro {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 10px;
  direction: ltr;
}

.phone-number-field {
  direction: ltr !important;
  text-align: left !important;
}

.contact-message-clean {
  min-height: 168px !important;
  resize: vertical;
}

.contact-submit-clean {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  padding: 17px;
  margin-top: 18px;
  border-radius: 3px;
}

.contact-msg-clean {
  display: none;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 14px;
  background: rgba(240,5,20,.08);
  border: 1px solid rgba(240,5,20,.25);
  color: var(--accent-text);
}

/* Custom Dropdown */
.contact-dd {
  position: relative;
  width: 100%;
  direction: ltr;
}

.contact-dd-btn {
  width: 100%;
  min-height: 58px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--fg) 11.5%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--fg) 5.5%, transparent), color-mix(in srgb, var(--fg) 2.5%, transparent));
  color: var(--white);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.contact-dd-btn:hover,
.contact-dd.open .contact-dd-btn {
  border-color: rgba(240,5,20,.55);
  box-shadow: 0 0 0 4px rgba(240,5,20,.07);
}

.dd-main {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd-code {
  color: var(--accent-text);
  flex: 0 0 auto;
  font-weight: 900;
}

.contact-dd-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  width: min(420px, 100%);
  max-height: 310px;
  display: none;
  z-index: 50;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--fg) 13%, transparent);
  background: rgba(12,13,18,.98);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

.contact-dd.open .contact-dd-menu {
  display: block;
}

.contact-dd-search {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 4.5%, transparent);
  color: var(--white);
  outline: none;
  padding: 0 12px;
  margin-bottom: 8px;
  font-family: var(--ff-body);
}

.contact-dd-list {
  max-height: 238px;
  overflow-y: auto;
  padding-right: 4px;
}

.contact-dd-list::-webkit-scrollbar {
  width: 5px;
}

.contact-dd-list::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 20px;
}

.contact-dd-option {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--white);
  padding: 12px 10px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 13px;
  text-align: left;
}

.contact-dd-option:hover {
  background: rgba(240,5,20,.12);
}

.dd-country {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.service-dd .contact-dd-menu {
  width: 100%;
}

/* RTL Contact */
html[dir="rtl"] .contact-hero-inner {
  direction: rtl;
}

html[dir="rtl"] .contact-hero-copy {
  grid-column: 2;
  text-align: right;
}

html[dir="rtl"] .contact-hero-title {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}

html[dir="rtl"] .contact-layout-clean {
  direction: rtl;
}

html[dir="rtl"] .contact-info-card,
html[dir="rtl"] .contact-form-card-clean {
  text-align: right;
}

html[dir="rtl"] .contact-mini-label,
html[dir="rtl"] .contact-info-label,
html[dir="rtl"] .contact-form-card-clean .form-label {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .phone-combo-pro,
html[dir="rtl"] .contact-dd,
html[dir="rtl"] .contact-dd-btn,
html[dir="rtl"] .contact-dd-option {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .service-dd,
html[dir="rtl"] .service-dd .contact-dd-btn,
html[dir="rtl"] .service-dd .contact-dd-option {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .service-dd .contact-dd-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Responsive */
@media(max-width: 1100px) {
  .contact-hero-inner,
  .contact-layout-clean {
    grid-template-columns: 1fr;
  }

  html[dir="rtl"] .contact-hero-copy {
    grid-column: 1;
  }

  .contact-info-card {
    position: static;
  }
}

@media(max-width: 720px) {
  .contact-hero-clean {
    padding-top: calc(var(--nav-h) + 44px);
  }

  .contact-form-grid-clean {
    grid-template-columns: 1fr;
  }

  .phone-combo-pro {
    grid-template-columns: 1fr;
  }

  .contact-info-card,
  .contact-form-card-clean {
    padding: 22px;
  }

  .contact-dd-menu {
    width: 100%;
  }
}
/* ===== Contact Arabic Hero Layout Final Fix ===== */
html[dir="rtl"] .contact-hero-clean {
  padding-top: calc(var(--nav-h) + 70px) !important;
  padding-bottom: clamp(70px, 8vw, 120px) !important;
  min-height: 620px !important;
}

html[dir="rtl"] .contact-hero-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  direction: rtl !important;
}

html[dir="rtl"] .contact-hero-copy {
  grid-column: 1 !important;
  justify-self: start !important;
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
}


html[dir="rtl"] .contact-hero-clean .label {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[dir="rtl"] .contact-hero-title {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  font-size: clamp(78px, 8.5vw, 136px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: right !important;
  max-width: 720px !important;
  margin: 0 !important;
  overflow: visible !important;
}

html[dir="rtl"] .contact-hero-title .c-red {
  display: block !important;
  color: var(--accent-text) !important;
}


/* Tablet */
@media (max-width: 1200px) {
  html[dir="rtl"] .contact-hero-copy {
    width: min(620px, 100%) !important;
    max-width: 620px !important;
  }

  html[dir="rtl"] .contact-hero-title {
    font-size: clamp(68px, 10vw, 112px) !important;
    max-width: 620px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  html[dir="rtl"] .contact-hero-clean {
    min-height: auto !important;
    padding-top: calc(var(--nav-h) + 48px) !important;
    padding-bottom: 58px !important;
  }

  html[dir="rtl"] .contact-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[dir="rtl"] .contact-hero-title {
    font-size: clamp(54px, 17vw, 88px) !important;
    max-width: 100% !important;
  }
}
/* ===== Final Fix: Arabic Contact Hero Label Position ===== */
html[dir="rtl"] .contact-hero-copy {
  position: relative !important;
}

html[dir="rtl"] .contact-hero-clean .label-line {
  position: absolute !important;
  top: -34px !important;
  right: 0 !important;
  left: auto !important;

  width: auto !important;
  max-width: none !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  direction: rtl !important;
  text-align: right !important;
  transform: none !important;
}

html[dir="rtl"] .contact-hero-clean .label-line::before {
  content: "" !important;
  width: 34px !important;
  height: 2px !important;
  background: var(--red) !important;
  display: inline-block !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  order: 0 !important;
}

html[dir="rtl"] .contact-hero-clean .label {
  display: inline-block !important;
  order: 1 !important;
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--dim) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
/* ===== Project Case Study Builder Layout ===== */
.project-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  transition: color .2s;
}

.project-back-link:hover {
  color: var(--accent-text);
}

.project-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.project-main-title {
  max-width: 980px;
}

.project-case-section {
  padding-top: clamp(48px, 6vw, 92px) !important;
}

.case-builder-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
}

.case-block {
  width: 100%;
}

.case-text-block {
  display: block;
  padding: clamp(34px, 4vw, 58px);
  background:
    radial-gradient(circle at 0 0, rgba(240,5,20,.08), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--fg) 4%, transparent), color-mix(in srgb, var(--fg) 1.8%, transparent));
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  border-radius: 12px;
}

.case-text-inner {
  max-width: 900px;
}

/* Remove old numbering completely */
.case-block-num {
  display: none !important;
}

.case-title {
  font-family: var(--ff-en);
  font-size: clamp(34px, 5vw, 72px);
  line-height: .95;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.case-copy {
  color: var(--dim);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.9;
  max-width: 900px;
}

.case-copy p + p {
  margin-top: 16px;
}

.case-media {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}

.case-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-media.wide {
  aspect-ratio: 16 / 9;
}

.case-media.vertical {
  aspect-ratio: 4 / 5;
}

.case-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-placeholder span {
  font-family: var(--ff-en);
  font-size: clamp(34px, 7vw, 120px);
  color: color-mix(in srgb, var(--fg) 4.5%, transparent);
  letter-spacing: .08em;
}

.case-image-row {
  display: grid;
  gap: 16px;
}

.case-row-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.case-row-3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.case-video-frame {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}

.case-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.case-caption {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 12px;
  max-width: 760px;
}

.case-empty {
  padding: 60px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 12px;
  color: var(--dim);
  text-align: center;
}

.next-project-title {
  font-family: var(--ff-en);
  font-size: clamp(15px, 2vw, 24px);
  text-transform: uppercase;
}

/* RTL */
html[dir="rtl"] .case-text-block {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .case-title {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  text-transform: none;
  line-height: 1.08;
}

html[dir="rtl"] .case-copy,
html[dir="rtl"] .case-caption {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  line-height: 2;
}

html[dir="rtl"] .next-project-title {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  text-transform: none;
}

/* Responsive */
@media(max-width: 900px) {
  .case-text-block {
    display: block;
  }

  .case-row-2,
  .case-row-3 {
    grid-template-columns: 1fr;
  }

  .case-media.vertical {
    aspect-ratio: 16 / 11;
  }
}
/* ===== Clean Project Page According To Client Layout ===== */
.project-clean-hero {
  padding: calc(var(--nav-h) + 70px) var(--g) clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.project-clean-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 82% 18%, rgba(240,5,20,.08), transparent 58%);
  pointer-events: none;
}

.project-clean-hero .container {
  position: relative;
  z-index: 1;
}

.project-clean-top {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: clamp(32px,5vw,80px);
  align-items: end;
}

.project-main-title {
  max-width: 980px;
}

.project-clean-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
}

.project-clean-desc {
  max-width: 900px;
  margin-top: clamp(28px,4vw,48px);
  color: var(--dim);
  font-size: clamp(16px,1.4vw,20px);
  line-height: 1.9;
}

.project-clean-desc p + p {
  margin-top: 16px;
}

.project-header-shot {
  width: 100%;
  margin-top: clamp(34px,5vw,70px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  background: var(--bg2);
  aspect-ratio: 16 / 9;
}

.project-header-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RTL */
html[dir="rtl"] .project-clean-hero,
html[dir="rtl"] .project-clean-desc,
html[dir="rtl"] .project-clean-meta {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .project-main-title {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  line-height: 1.08;
}

html[dir="rtl"] .project-clean-desc {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  line-height: 2;
}

@media(max-width: 900px) {
  .project-clean-top {
    grid-template-columns: 1fr;
  }
}
/* ===== Missing project media fallback ===== */
.case-media {
  position: relative;
}

.case-missing-text {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--dim);
  font-size: 13px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
}

.case-media.case-missing .case-missing-text {
  display: flex;
}
/* ===== RTL Sub Pages Hero Safe Spacing ===== */
html[dir="rtl"] .sub-hero {
  min-height: 68vh !important;
  padding-top: calc(var(--nav-h) + 120px) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
  align-items: flex-end !important;
}

html[dir="rtl"] .sub-hero .container {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .sub-hero .label-line {
  justify-content: flex-start !important;
  margin-bottom: 18px !important;
}

html[dir="rtl"] .sub-hero .label-line::before {
  flex: 0 0 34px !important;
}

html[dir="rtl"] .sub-hero .display {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  font-size: clamp(72px, 9vw, 138px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  max-width: 820px !important;
  margin-top: 12px !important;
  overflow: visible !important;
}

html[dir="rtl"] .sub-hero .display .c-red {
  display: inline-block !important;
}

/* Work page hero: subtle left-side brand atmosphere */
body.work-page .sub-hero {
  isolation: isolate;
}

body.work-page .sub-hero::before,
body.work-page .sub-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

body.work-page .sub-hero::before {
  left: clamp(24px, 7vw, 110px);
  top: 50%;
  width: min(46vw, 620px);
  height: min(28vw, 360px);
  transform: translateY(-42%);
  background:
    radial-gradient(ellipse at 38% 50%, rgba(240, 5, 20, .13), transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--fg) 4.5%, transparent), transparent 58%);
  filter: blur(18px);
  opacity: .72;
}

body.work-page .sub-hero::after {
  content: "SAILOORS WORK";
  left: clamp(-96px, -4vw, -36px);
  top: 50%;
  transform: translateY(-46%);
  max-width: min(48vw, 660px);
  font-family: var(--ff-en);
  font-size: clamp(62px, 8vw, 132px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 2.8%, transparent);
  text-shadow: 0 0 48px rgba(240, 5, 20, .055);
  white-space: normal;
}

body.work-page .sub-hero .ph-bg,
body.work-page .sub-hero .container {
  position: relative;
  z-index: 1;
}

html[dir="ltr"] body.work-page .sub-hero::before {
  left: auto;
  right: var(--g);
}

html[dir="ltr"] body.work-page .sub-hero::after {
  left: auto;
  right: var(--g);
  top: 46%;
  transform: translateY(-50%);
  max-width: min(43vw, 560px);
  font-size: clamp(68px, 8.4vw, 140px);
  color: color-mix(in srgb, var(--fg) 2.6%, transparent);
  text-shadow: 0 0 50px rgba(240, 5, 20, .052);
  text-align: right;
}

/* Services page hero: soft left-side brand balance */
body.services-page .sub-hero {
  isolation: isolate;
}

body.services-page .sub-hero::before,
body.services-page .sub-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

body.services-page .sub-hero::before {
  left: clamp(18px, 6vw, 96px);
  top: 50%;
  width: min(48vw, 640px);
  height: min(30vw, 380px);
  transform: translateY(-43%);
  background:
    radial-gradient(ellipse at 34% 50%, rgba(240, 5, 20, .12), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--fg) 4%, transparent), transparent 58%);
  filter: blur(20px);
  opacity: .68;
}

body.services-page .sub-hero::after {
  content: "SAILOORS SERVICES";
  left: clamp(-120px, -5vw, -44px);
  top: 50%;
  transform: translateY(-47%);
  max-width: min(50vw, 700px);
  font-family: var(--ff-en);
  font-size: clamp(58px, 7.6vw, 124px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 2.7%, transparent);
  text-shadow: 0 0 50px rgba(240, 5, 20, .052);
  white-space: normal;
}

body.services-page .sub-hero .container {
  position: relative;
  z-index: 1;
}

html[dir="ltr"] body.services-page .sub-hero::before {
  left: auto;
  right: var(--g);
}

html[dir="ltr"] body.services-page .sub-hero::after {
  left: auto;
  right: var(--g);
  top: 46%;
  transform: translateY(-50%);
  max-width: min(43vw, 560px);
  font-size: clamp(68px, 8.4vw, 140px);
  color: color-mix(in srgb, var(--fg) 2.6%, transparent);
  text-shadow: 0 0 50px rgba(240, 5, 20, .052);
  text-align: right;
}

html[dir="ltr"] body.services-page .sub-hero,
html[dir="ltr"] body.work-page .sub-hero {
  min-height: clamp(620px, 82svh, 760px) !important;
  align-items: center !important;
  padding: calc(var(--nav-h) + 80px) var(--g) clamp(76px, 9vw, 118px) !important;
}

html[dir="ltr"] body.services-page .sub-hero .container,
html[dir="ltr"] body.work-page .sub-hero .container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  align-self: center;
}

html[dir="ltr"] body.services-page .sub-hero .label-line,
html[dir="ltr"] body.work-page .sub-hero .label-line {
  margin-bottom: clamp(18px, 2vw, 28px);
}

html[dir="ltr"] body.services-page .sub-hero .display,
html[dir="ltr"] body.work-page .sub-hero .display {
  max-width: min(58vw, 720px);
  margin-top: 0 !important;
  font-size: clamp(78px, 10.4vw, 168px);
  line-height: .84;
  letter-spacing: -.025em;
  text-align: left;
}

@media(max-width: 720px) {
  body.work-page .sub-hero::before {
    left: 50%;
    top: 44%;
    width: 86vw;
    height: 260px;
    transform: translate(-50%, -50%);
    opacity: .42;
    filter: blur(22px);
  }

  body.work-page .sub-hero::after {
    display: none;
  }

  body.services-page .sub-hero::before {
    left: 50%;
    top: 44%;
    width: 86vw;
    height: 260px;
    transform: translate(-50%, -50%);
    opacity: .4;
    filter: blur(22px);
  }

  body.services-page .sub-hero::after {
    display: none;
  }
}

@media(max-width: 720px) {
  html[dir="rtl"] .sub-hero {
    min-height: auto !important;
    padding-top: calc(var(--nav-h) + 76px) !important;
    padding-bottom: 52px !important;
  }

  html[dir="ltr"] body.services-page .sub-hero,
  html[dir="ltr"] body.work-page .sub-hero {
    min-height: auto !important;
    align-items: flex-end !important;
    padding-top: calc(var(--nav-h) + 76px) !important;
    padding-bottom: 52px !important;
  }

html[dir="rtl"] .sub-hero .display {
    font-size: clamp(54px, 16vw, 88px) !important;
  }

  html[dir="ltr"] body.services-page .sub-hero .display,
  html[dir="ltr"] body.work-page .sub-hero .display {
    max-width: 100%;
    font-size: clamp(56px, 15vw, 92px) !important;
    line-height: .92;
  }
}

/* ===== Phase 6: Localization, Responsive, and Motion Polish ===== */
html.js-reveal .gsap-up {
  transform: translateY(28px) !important;
  transition: opacity .72s var(--ease), transform .72s var(--ease) !important;
}

html.js-reveal .gsap-fade {
  transition: opacity .72s var(--ease) !important;
}

html.js-reveal [data-stagger-item] {
  transform: translateY(24px) !important;
  transition: opacity .68s var(--ease), transform .68s var(--ease) !important;
}

html.js-reveal .gsap-up.visible,
html.js-reveal [data-stagger-item].visible {
  transform: translateY(0) !important;
}

@media (min-width: 1200px) {
  .proj-card,
  .svc-item,
  .client-box,
  .case-media,
  .project-header-shot,
  .contact-info-card,
  .contact-form-card-clean {
    transition:
      transform .32s var(--ease),
      border-color .32s var(--ease),
      background .32s var(--ease),
      box-shadow .32s var(--ease) !important;
  }

  .proj-card:hover,
  .client-box:hover,
  .case-media:hover,
  .project-header-shot:hover {
    transform: translateY(-4px);
  }

  .contact-info-card:hover,
  .contact-form-card-clean:hover {
    border-color: color-mix(in srgb, var(--fg) 16%, transparent);
  }
}

@media (max-height: 780px) and (min-width: 1024px) {
  .hero {
    min-height: 100svh !important;
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + 36px) !important;
    padding-bottom: clamp(36px, 5vw, 64px) !important;
  }

  .hero-tag {
    margin-bottom: 24px !important;
  }

  .hero-headline {
    font-size: clamp(76px, 13.2vw, 178px) !important;
    line-height: .84 !important;
    margin-bottom: 34px !important;
  }

  html[dir="rtl"] .hero-headline {
    font-size: clamp(72px, 10.8vw, 142px) !important;
    line-height: 1.05 !important;
  }

  .hero-stats {
    margin-top: clamp(24px, 3.5vw, 42px) !important;
  }

  .h-stat {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .page-hero,
  html[dir="rtl"] .sub-hero {
    min-height: 52vh !important;
    padding-top: calc(var(--nav-h) + 72px) !important;
    padding-bottom: 56px !important;
  }

  html[dir="rtl"] .sub-hero .display {
    font-size: clamp(68px, 7.6vw, 112px) !important;
  }

  .project-clean-hero {
    padding-top: calc(var(--nav-h) + 46px) !important;
    padding-bottom: clamp(34px, 4.2vw, 60px) !important;
  }

  .project-header-shot {
    margin-top: clamp(24px, 3.5vw, 44px) !important;
  }
}

@media (max-width: 1100px) {
  .contact-section-clean {
    padding-top: clamp(34px, 5vw, 56px) !important;
  }

  .contact-layout-clean {
    gap: 28px !important;
  }
}

@media (max-width: 720px) {
  .contact-hero-clean,
  html[dir="rtl"] .contact-hero-clean {
    padding-bottom: 42px !important;
  }

  .contact-section-clean {
    padding-top: 34px !important;
  }

  .contact-info-item {
    padding: 14px 0 !important;
  }

  .contact-social-box {
    margin-top: 20px !important;
  }

  .contact-message-clean {
    min-height: 132px !important;
  }
}

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

  .marquee-track.ticker-ready .marquee-item,
  .hero-headline .line,
  #heroTag,
  #heroSub,
  #heroStats,
  #scrollArrow,
  .logo-trust-mark,
  .scroll-cue-line {
    animation: none !important;
    transform: none !important;
  }

  .gsap-up,
  .gsap-fade,
  [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
  }

  .proj-card:hover,
  .client-box:hover,
  .case-media:hover,
  .project-header-shot:hover,
  .btn:hover,
  .nav-cta:hover,
  .back-top:hover {
    transform: none !important;
  }
}
/* ===== About Page Arabic Thmanyah Only ===== */
html[dir="rtl"] body.about-page,
html[dir="rtl"] body.about-page p,
html[dir="rtl"] body.about-page a,
html[dir="rtl"] body.about-page li,
html[dir="rtl"] body.about-page button,
html[dir="rtl"] body.about-page input,
html[dir="rtl"] body.about-page textarea,
html[dir="rtl"] body.about-page select,
html[dir="rtl"] body.about-page .body,
html[dir="rtl"] body.about-page .body-lg,
html[dir="rtl"] body.about-page .label,
html[dir="rtl"] body.about-page .footer-lnk,
html[dir="rtl"] body.about-page .footer-soc {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[dir="rtl"] body.about-page .display,
html[dir="rtl"] body.about-page .h1,
html[dir="rtl"] body.about-page .h2,
html[dir="rtl"] body.about-page .h3,
html[dir="rtl"] body.about-page .client-name,
html[dir="rtl"] body.about-page [data-i18n="about.tagline"] {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.12 !important;
}

html[dir="rtl"] body.about-page [data-count],
html[dir="rtl"] body.about-page .process-n,
html[dir="rtl"] body.about-page #ftPhone,
html[dir="rtl"] body.about-page #ftEmail {
  font-family: 'Instrument Sans', sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
/* ===== About values cards Arabic font final fix ===== */
html[dir="rtl"] body.about-page .vb,
html[dir="rtl"] body.about-page .vb * {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[dir="rtl"] body.about-page .vb [data-i18n="about.v1t"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v2t"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v3t"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v4t"] {
  font-family: 'Thmanyah Serif Display', 'Tajawal', sans-serif !important;
  font-size: clamp(28px, 2.8vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important; 
  margin-bottom: 12px !important;
}

html[dir="rtl"] body.about-page .vb [data-i18n="about.v1d"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v2d"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v3d"],
html[dir="rtl"] body.about-page .vb [data-i18n="about.v4d"] {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-size: clamp(17px, 1.5vw, 22px) !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* ===== Client Logos Display ===== */
.client-logo-img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 70px;
  object-fit: contain;
  margin: 0 auto;
  filter: grayscale(1);
  opacity: .72;
  transition: .25s ease;
}

.client-box:hover .client-logo-img {
  filter: grayscale(0);
  opacity: 1;
}

.home-client-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 54px;
}

.home-client-logo {
  max-width: 130px;
  max-height: 48px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .68;
  transition: .25s ease;
}

.home-client-logo-wrap:hover .home-client-logo {
  filter: grayscale(0);
  opacity: 1;
}

#homeClients.clients-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 42px) clamp(28px, 5vw, 72px) !important;
  max-width: min(1120px, 100%) !important;
  margin-inline: auto !important;
  padding-block: clamp(28px, 3.4vw, 42px) !important;
}

#homeClients .home-client-logo-wrap,
#homeClients .cli-name {
  flex: 0 1 clamp(120px, 13vw, 170px) !important;
  min-width: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

#homeClients .home-client-logo {
  max-width: min(136px, 100%) !important;
}

/* ===== Arabic Clients Grid RTL Order ===== */
html[dir="rtl"] .clients-grid {
  direction: rtl !important;
}

html[dir="rtl"] .clients-grid .client-box {
  direction: rtl !important;
}

/* ===== Phase 6B: project detail final visual tightening ===== */
@media (min-width: 1024px) {
  .project-clean-hero {
    padding-top: calc(var(--nav-h) + 38px) !important;
    padding-bottom: clamp(30px, 3.6vw, 52px) !important;
  }

  .project-clean-top {
    align-items: center !important;
    gap: clamp(24px, 3.6vw, 56px) !important;
  }

  .project-main-title {
    max-width: 900px !important;
  }

  .project-clean-desc {
    max-width: 760px !important;
    margin-top: clamp(18px, 2.4vw, 30px) !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
    line-height: 1.75 !important;
  }

  .project-clean-meta {
    padding: clamp(18px, 2vw, 22px) !important;
    gap: 12px !important;
  }

  .project-header-shot {
    width: min(100%, 1320px) !important;
    margin-top: clamp(22px, 2.8vw, 38px) !important;
    aspect-ratio: 21 / 9 !important;
    max-height: min(52vh, 520px) !important;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .project-clean-hero {
    padding-top: calc(var(--nav-h) + 30px) !important;
    padding-bottom: 34px !important;
  }

  .project-main-title {
    font-size: clamp(54px, 7.2vw, 126px) !important;
  }

  html[dir="rtl"] .project-main-title {
    font-size: clamp(54px, 6.2vw, 104px) !important;
  }

  .project-header-shot {
    aspect-ratio: 24 / 9 !important;
    max-height: min(46vh, 430px) !important;
    margin-top: 22px !important;
  }
}

@media (max-width: 900px) {
  .project-clean-hero {
    padding-top: calc(var(--nav-h) + 44px) !important;
    padding-bottom: 34px !important;
  }

  .project-clean-desc {
    margin-top: 18px !important;
  }

  .project-header-shot {
    aspect-ratio: 16 / 9 !important;
    margin-top: 20px !important;
    max-height: none !important;
  }
}

/* ===== Phase 6C: final homepage hero + header logo tightening ===== */
.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: clamp(98px, 8.2vw, 132px) !important;
  height: clamp(26px, 2.05vw, 32px) !important;
  min-width: 98px !important;
  overflow: visible !important;
  color: var(--white) !important;
}

.nav-logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.nav-right {
  flex: 0 0 auto !important;
}

.hero {
  min-height: clamp(680px, 92svh, 940px) !important;
  justify-content: flex-end !important;
}

.hero-inner {
  padding-top: calc(var(--nav-h) + clamp(30px, 4.2vw, 62px)) !important;
  padding-bottom: clamp(34px, 5.2vw, 76px) !important;
}

.hero-tag {
  margin-bottom: clamp(18px, 2.6vw, 36px) !important;
}

.hero-headline {
  font-size: clamp(78px, 13.2vw, 212px) !important;
  line-height: .84 !important;
  margin-bottom: clamp(24px, 3.8vw, 46px) !important;
}

html[dir="rtl"] .hero-headline {
  font-size: clamp(64px, 10.4vw, 158px) !important;
  line-height: 1.04 !important;
  margin-bottom: clamp(22px, 3.2vw, 38px) !important;
}

.hero-ghost {
  bottom: clamp(-54px, -3.2vw, -24px) !important;
  left: clamp(-24px, -1.2vw, -8px) !important;
  font-size: clamp(132px, 22vw, 380px) !important;
  opacity: .82 !important;
}

.hero-desc p {
  max-width: 520px !important;
  font-size: clamp(15px, 1.18vw, 20px) !important;
  line-height: 1.62 !important;
}

.hero-subrow {
  gap: clamp(20px, 3vw, 34px) !important;
}

.hero-ctas {
  gap: 12px !important;
}

.hero-stats {
  margin-top: clamp(22px, 3.6vw, 48px) !important;
}

.h-stat {
  padding-top: clamp(18px, 2.4vw, 28px) !important;
  padding-bottom: clamp(18px, 2.4vw, 28px) !important;
}

.h-stat-n {
  font-size: clamp(31px, 3.8vw, 56px) !important;
}

.scroll-cue {
  bottom: clamp(20px, 3vw, 34px) !important;
}

@media (max-height: 780px) and (min-width: 1024px) {
  .hero {
    min-height: clamp(620px, 94svh, 760px) !important;
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + 24px) !important;
    padding-bottom: clamp(24px, 3.8vw, 44px) !important;
  }

  .hero-headline {
    font-size: clamp(68px, 11.2vw, 150px) !important;
    line-height: .84 !important;
    margin-bottom: clamp(18px, 2.8vw, 30px) !important;
  }

  html[dir="rtl"] .hero-headline {
    font-size: clamp(58px, 8.6vw, 116px) !important;
    line-height: 1.03 !important;
  }

  .hero-ghost {
    font-size: clamp(116px, 18vw, 260px) !important;
    bottom: -34px !important;
  }

  .hero-stats {
    margin-top: clamp(18px, 2.8vw, 32px) !important;
  }

  .h-stat {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 980px) {
  .nav-logo {
    width: clamp(92px, 16vw, 122px) !important;
    height: clamp(24px, 4.2vw, 30px) !important;
    min-width: 92px !important;
  }

  .hero {
    min-height: clamp(660px, 94svh, 900px) !important;
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + 34px) !important;
    padding-bottom: clamp(30px, 6vw, 56px) !important;
  }

  .hero-headline {
    font-size: clamp(66px, 15.5vw, 126px) !important;
    margin-bottom: clamp(22px, 5vw, 36px) !important;
  }

  html[dir="rtl"] .hero-headline {
    font-size: clamp(56px, 13.2vw, 102px) !important;
  }

  .hero-ghost {
    font-size: clamp(120px, 34vw, 260px) !important;
    bottom: -28px !important;
  }
}

@media (max-width: 560px) {
  .nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .nav-logo {
    width: 100px !important;
    min-width: 100px !important;
    height: 27px !important;
  }

  .nav-right {
    gap: 12px !important;
  }

  .hero {
    min-height: auto !important;
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + 54px) !important;
    padding-bottom: 34px !important;
  }

  .hero-tag {
    margin-bottom: 20px !important;
  }

  .hero-headline,
  html[dir="rtl"] .hero-headline {
    font-size: clamp(50px, 15.2vw, 70px) !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
  }

  .hero-subrow {
    gap: 20px !important;
  }

  .hero-desc p {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .hero-ctas {
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-ctas .btn {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  .hero-stats {
    margin-top: 20px !important;
  }

  .h-stat {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .scroll-cue {
    display: none !important;
  }

  .hero-ghost {
    font-size: clamp(100px, 40vw, 170px) !important;
    bottom: -18px !important;
  }
}

/* Phase 6C refinement: bring homepage stats into view sooner on Arabic desktop */
@media (min-width: 981px) {
  html[dir="rtl"] .hero-headline {
    font-size: clamp(60px, 9vw, 142px) !important;
    line-height: 1.03 !important;
  }

  .hero-headline {
    margin-bottom: clamp(18px, 3vw, 36px) !important;
  }

  .hero-stats {
    margin-top: clamp(16px, 2.8vw, 38px) !important;
  }
}

@media (max-height: 780px) and (min-width: 1024px) {
  html[dir="rtl"] .hero-headline {
    font-size: clamp(54px, 8.1vw, 106px) !important;
  }
}

/* Phase 6C refinement: short desktop balance */
@media (min-width: 1400px) and (max-height: 900px) {
  html[dir="rtl"] .hero-headline {
    font-size: clamp(58px, 8.2vw, 126px) !important;
  }

  .hero-stats {
    margin-top: clamp(14px, 2.2vw, 30px) !important;
  }
}

/* ===== Phase 6D: real visual correction pass ===== */
.nav {
  overflow: visible !important;
}

.nav-logo,
.nav-mobile-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1080 / 359.48 !important;
  color: var(--white) !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.nav-logo {
  width: clamp(142px, 10.4vw, 178px) !important;
  height: auto !important;
  min-width: 142px !important;
  max-width: 178px !important;
}

.nav-logo svg,
.nav-mobile-brand svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1080 / 359.48 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

.nav-logo svg *,
.nav-mobile-brand svg * {
  vector-effect: non-scaling-stroke;
}

.nav-logo .lw,
.nav-mobile-brand .lw { fill: currentColor !important; }
.nav-logo .lr,
.nav-mobile-brand .lr { fill: var(--red) !important; }

.nav-mobile {
  overflow: visible !important;
  padding-top: calc(var(--nav-h) + 24px) !important;
}

.nav-mobile-brand {
  position: absolute !important;
  top: 20px !important;
  right: var(--g) !important;
  width: clamp(132px, 34vw, 172px) !important;
  z-index: 2 !important;
}

html[dir="rtl"] .nav-mobile-brand {
  right: auto !important;
  left: var(--g) !important;
}

/* Compose the homepage hero as a compact first-screen system instead of a tall poster. */
.hero {
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}

.hero-inner {
  min-height: clamp(500px, 66svh, 640px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-top: calc(var(--nav-h) + clamp(34px, 4vw, 58px)) !important;
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}

.hero-tag {
  margin-bottom: clamp(14px, 1.8vw, 24px) !important;
}

.hero-headline {
  max-width: min(1160px, 92vw) !important;
  font-size: clamp(72px, 10.4vw, 168px) !important;
  line-height: .84 !important;
  margin-bottom: clamp(18px, 2.6vw, 34px) !important;
}

html[dir="rtl"] .hero-headline {
  max-width: min(1040px, 92vw) !important;
  font-size: clamp(56px, 7.9vw, 116px) !important;
  line-height: 1.02 !important;
  margin-bottom: clamp(16px, 2.2vw, 28px) !important;
}

.hero-subrow {
  align-items: center !important;
  gap: clamp(18px, 2.6vw, 32px) !important;
  max-width: min(1180px, 100%) !important;
}

.hero-desc p {
  max-width: 500px !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.58 !important;
}

.hero-ctas {
  gap: 12px !important;
}

.hero-stats {
  margin: 0 var(--g) clamp(18px, 2.4vw, 30px) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(13,13,18,.62) !important;
}

.h-stat {
  padding: clamp(17px, 1.8vw, 26px) 0 clamp(17px, 1.8vw, 26px) clamp(20px, 2.4vw, 32px) !important;
}

.h-stat-n {
  font-size: clamp(30px, 3.1vw, 48px) !important;
}

.h-stat-l {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.hero-ghost {
  font-size: clamp(100px, 15vw, 260px) !important;
  bottom: clamp(-34px, -2vw, -18px) !important;
  opacity: .72 !important;
}

.scroll-cue {
  display: none !important;
}

.logo-trust {
  padding: clamp(42px, 5.8vw, 78px) var(--g) !important;
}

.logo-trust-inner {
  gap: clamp(20px, 3vw, 28px) !important;
}

.logo-trust-mark {
  width: min(420px, 66vw) !important;
}

.section {
  padding: clamp(62px, 8vw, 118px) 0 !important;
}

.sec-head {
  margin-bottom: clamp(34px, 5vw, 64px) !important;
}

.statement-wrap {
  padding: clamp(64px, 8vw, 118px) var(--g) !important;
}

.cta-big {
  padding: clamp(66px, 8vw, 118px) var(--g) !important;
}

@media (max-height: 780px) and (min-width: 1024px) {
  .hero-inner {
    min-height: clamp(454px, 61svh, 520px) !important;
    padding-top: calc(var(--nav-h) + 24px) !important;
    padding-bottom: 28px !important;
  }

  html[dir="rtl"] .hero-headline {
    font-size: clamp(52px, 7.2vw, 98px) !important;
  }

  .hero-desc p {
    font-size: 15px !important;
  }

  .hero-stats {
    margin-bottom: 16px !important;
  }
}

@media (min-width: 1400px) and (max-height: 900px) {
  .hero-inner {
    min-height: clamp(500px, 63svh, 570px) !important;
  }

  html[dir="rtl"] .hero-headline {
    font-size: clamp(58px, 7.4vw, 108px) !important;
  }
}

@media (max-width: 980px) {
  .nav-logo {
    width: clamp(126px, 20vw, 158px) !important;
    min-width: 126px !important;
  }

  .hero-inner {
    min-height: clamp(520px, 66svh, 650px) !important;
    padding-top: calc(var(--nav-h) + 42px) !important;
    padding-bottom: 30px !important;
  }

  html[dir="rtl"] .hero-headline,
  .hero-headline {
    font-size: clamp(54px, 12vw, 92px) !important;
    line-height: 1.04 !important;
  }

  .hero-subrow {
    align-items: flex-start !important;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .h-stat {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding-left: 0 !important;
  }

  html[dir="rtl"] .h-stat {
    border-right: none !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 560px) {
  .nav {
    height: 64px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .nav-logo {
    width: 128px !important;
    min-width: 128px !important;
  }

  .nav-right {
    gap: 10px !important;
  }

  .hero-inner {
    min-height: auto !important;
    padding-top: calc(64px + 52px) !important;
    padding-bottom: 26px !important;
  }

  html[dir="rtl"] .hero-headline,
  .hero-headline {
    font-size: clamp(46px, 13vw, 58px) !important;
    margin-bottom: 18px !important;
  }

  .hero-tag {
    margin-bottom: 16px !important;
  }

  .hero-subrow {
    gap: 16px !important;
  }

  .hero-desc p {
    font-size: 14px !important;
    line-height: 1.56 !important;
  }

  .hero-ctas .btn {
    min-height: 44px !important;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .h-stat {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .h-stat-n {
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  .h-stat-l {
    font-size: 9px !important;
  }

  .hero-ghost {
    font-size: clamp(82px, 29vw, 120px) !important;
    bottom: -14px !important;
  }

  .logo-trust {
    padding-top: 36px !important;
    padding-bottom: 42px !important;
  }

  .section {
    padding-top: 54px !important;
    padding-bottom: 64px !important;
  }

  .sec-head {
    margin-bottom: 30px !important;
  }
}

/* Phase 6D correction: make RTL mobile menu and menu logo settle inside viewport */
.nav-mobile.open,
html[dir="rtl"] .nav-mobile.open {
  transform: translate3d(0, 0, 0) !important;
}

html[dir="rtl"] .nav-mobile-brand,
.nav-mobile-brand {
  left: auto !important;
  right: var(--g) !important;
}

@media (max-width: 560px) {
  html[dir="rtl"] .nav-mobile-brand,
  .nav-mobile-brand {
    right: 18px !important;
    width: 132px !important;
  }
}

/* Phase 6D correction: override the legacy RTL menu translate with higher specificity */
body #navMobile.nav-mobile.open,
html[dir="rtl"] body #navMobile.nav-mobile.open,
html[dir="ltr"] body #navMobile.nav-mobile.open {
  transform: none !important;
  translate: 0 0 !important;
  left: 0 !important;
  right: 0 !important;
}

body #navMobile.nav-mobile.open .nav-mobile-brand,
html[dir="rtl"] body #navMobile.nav-mobile.open .nav-mobile-brand {
  left: auto !important;
  right: var(--g) !important;
}

@media (max-width: 560px) {
  body #navMobile.nav-mobile.open .nav-mobile-brand,
  html[dir="rtl"] body #navMobile.nav-mobile.open .nav-mobile-brand {
    left: auto !important;
    right: 18px !important;
  }
}

/* Stats alignment polish */
.hero-stats {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--g) !important;
  padding-right: var(--g) !important;
}

.h-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: clamp(96px, 9vw, 132px) !important;
  padding: clamp(18px, 2vw, 28px) clamp(12px, 1.8vw, 24px) !important;
}

.h-stat:first-child {
  border-left: none !important;
}

html[dir="rtl"] .h-stat {
  border-left: none !important;
  border-right: 1px solid var(--border) !important;
  padding-left: clamp(12px, 1.8vw, 24px) !important;
  padding-right: clamp(12px, 1.8vw, 24px) !important;
}

html[dir="rtl"] .h-stat:first-child {
  border-right: none !important;
}

@media (max-width: 980px) {
  .hero-stats {
    padding-left: var(--g) !important;
    padding-right: var(--g) !important;
  }

  .h-stat,
  html[dir="rtl"] .h-stat {
    min-height: clamp(88px, 20vw, 112px) !important;
    border-top: 1px solid var(--border) !important;
    border-left: none !important;
    border-right: none !important;
    padding: clamp(14px, 4vw, 20px) clamp(10px, 3vw, 18px) !important;
  }

  .h-stat:nth-child(-n+2),
  html[dir="rtl"] .h-stat:nth-child(-n+2) {
    border-top: none !important;
  }

  .h-stat:nth-child(even) {
    border-left: 1px solid var(--border) !important;
  }

  html[dir="rtl"] .h-stat:nth-child(even) {
    border-left: none !important;
    border-right: 1px solid var(--border) !important;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Section label RTL order fix */
html[dir="rtl"] body .label-line.label-line {
  flex-direction: row !important;
}

/* Home hero contact form */
.hero .hero-inner {
  display: block !important;
}

.hero-copy {
  min-width: 0;
}

.cta-form-layout {
  display: grid !important;
  grid-template-columns: minmax(560px, 640px) minmax(420px, 1fr) !important;
  gap: clamp(64px, 6.5vw, 112px) !important;
  align-items: center !important;
  direction: ltr !important;
  position: relative;
  z-index: 5;
  overflow: visible !important;
}

html[dir="ltr"] .cta-form-layout {
  grid-template-columns: minmax(420px, 1fr) minmax(560px, 640px) !important;
}

.cta-copy-wrap {
  grid-column: 2 !important;
  min-width: 0;
}

.cta-form-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center;
  width: min(100%, 640px);
  margin-bottom: 0;
  transform: none;
  position: relative;
  z-index: 20;
  overflow: visible !important;
}

html[dir="rtl"] .cta-copy-wrap {
  grid-column: 2 !important;
}

html[dir="rtl"] .cta-form-wrap {
  grid-column: 1 !important;
}

html[dir="ltr"] .cta-copy-wrap {
  grid-column: 1 !important;
}

html[dir="ltr"] .cta-form-wrap {
  grid-column: 2 !important;
}

.home-hero-form-card {
  padding: clamp(32px, 3vw, 44px) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(240,5,20,.055), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--fg) 3.2%, transparent), color-mix(in srgb, var(--fg) 1.4%, transparent)) !important;
  border-color: color-mix(in srgb, var(--fg) 7.5%, transparent) !important;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: visible !important;
  z-index: 20;
}

.home-contact-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
}

.home-hero-form-card .form-group {
  margin-bottom: 16px;
  gap: 8px;
}

.home-form-group-spaced {
  margin-top: 0 !important;
}

.home-contact-form-grid .form-group:has(.home-phone-combo) {
  grid-column: 1 / -1 !important;
}

.home-hero-form-card .form-field,
.home-hero-form-card .contact-dd-btn {
  min-height: 56px;
  border-radius: 3px;
  font-size: 14px;
}

.home-phone-combo {
  grid-template-columns: minmax(138px, 150px) minmax(0, 1fr) !important;
  gap: 12px;
}

.home-contact-message {
  min-height: 132px !important;
}

.home-hero-form-card .contact-submit-clean {
  margin-top: 14px;
  padding: 17px;
}

/* Softer, less aggressive interactive states for the home hero form */
.home-hero-form-card .form-field:focus {
  border-color: color-mix(in srgb, var(--fg) 34%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 7%, transparent) !important;
}
.home-hero-form-card .contact-dd-btn:hover,
.home-hero-form-card .contact-dd.open .contact-dd-btn {
  border-color: color-mix(in srgb, var(--fg) 30%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 6%, transparent) !important;
}
/* Multi-select service options: 2-column, checkable */
.home-hero-form-card #homeServiceList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
}
.home-hero-form-card #homeServiceList .contact-dd-option {
  border-radius: 3px;
}
.home-hero-form-card #homeServiceList .contact-dd-option.is-selected {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.home-hero-form-card #homeServiceList .contact-dd-option.is-selected .dd-code {
  color: color-mix(in srgb, var(--fg) 72%, transparent);
}
/* Neutralize the red phone-code (+967) in the home form country button */
.home-hero-form-card #homeCountryPickerBtn .dd-code {
  color: color-mix(in srgb, var(--fg) 72%, transparent) !important;
}
@media (max-width: 560px) {
  .home-hero-form-card #homeServiceList {
    grid-template-columns: 1fr;
  }
}

.cta-copy-wrap .cta-title {
  line-height: 1.22 !important;
  margin-bottom: clamp(38px, 4.2vw, 60px) !important;
  overflow: visible !important;
  max-width: 620px;
}

html[dir="rtl"] .cta-copy-wrap .cta-title {
  line-height: 1.38 !important;
  max-width: 660px;
}

html[dir="ltr"] .cta-copy-wrap .cta-title {
  line-height: 1.2 !important;
  max-width: 680px;
}

.cta-copy-wrap .cta-title .c-red {
  display: block !important;
  margin-top: .2em;
  padding-top: .06em;
  line-height: 1.1;
  clear: both;
}

.cta-form-layout .contact-dd,
.cta-form-layout .phone-combo-pro,
.cta-form-layout .form-group {
  overflow: visible !important;
}

.cta-form-layout .contact-dd.open {
  z-index: 2000;
}

.cta-form-layout .country-dd,
.cta-form-layout .country-dd .dd-main {
  min-width: 0;
}

.cta-form-layout .country-dd .dd-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cta-form-layout .country-dd .contact-dd-menu {
  z-index: 2001 !important;
  max-height: min(300px, 52vh) !important;
  width: min(460px, calc(100vw - 48px)) !important;
  overflow: hidden !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
}

.cta-form-layout .country-dd.drop-up .contact-dd-menu {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
}

.cta-form-layout .country-dd .contact-dd-list {
  max-height: min(226px, 38vh) !important;
  overflow-y: auto !important;
}

@media (max-width: 1100px) {
  .about-page main > .section:first-child .ag > .gsap-up:not(.av) {
    order: -1;
  }
}

html[dir="rtl"] .cta-copy-wrap,
html[dir="rtl"] .home-hero-form-card {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .cta-copy-wrap,
html[dir="ltr"] .home-hero-form-card {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .home-phone-combo,
html[dir="rtl"] .home-hero-form-card .country-dd,
html[dir="rtl"] .home-hero-form-card .country-dd .contact-dd-btn,
html[dir="rtl"] .home-hero-form-card .country-dd .contact-dd-option {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .home-hero-form-card .service-dd,
html[dir="rtl"] .home-hero-form-card .service-dd .contact-dd-btn,
html[dir="rtl"] .home-hero-form-card .service-dd .contact-dd-option {
  direction: rtl;
  text-align: right;
}

@media (max-width: 1100px) {
  .cta-form-layout,
  html[dir="rtl"] .cta-form-layout,
  html[dir="ltr"] .cta-form-layout {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  html[dir="rtl"] .cta-copy-wrap,
  html[dir="ltr"] .cta-copy-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[dir="rtl"] .cta-form-wrap,
  html[dir="ltr"] .cta-form-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(100%, 680px);
    align-self: start;
    margin-bottom: 0;
    transform: none;
  }
}

@media (max-width: 640px) {
  .cta-form-layout {
    gap: 26px !important;
  }

  .cta-copy-wrap .cta-title {
    line-height: 1.18 !important;
    margin-bottom: 30px !important;
  }

  html[dir="rtl"] .cta-copy-wrap .cta-title {
    line-height: 1.32 !important;
  }

  .home-hero-form-card {
    padding: 22px !important;
  }

  /* keep name+email paired and phone inline so the form stays compact, not a tall stack */
  .home-hero-form-card .form-group { margin-bottom: 12px; }
  .home-hero-form-card .form-field,
  .home-hero-form-card .contact-dd-btn { min-height: 50px; }
  .home-contact-message { min-height: 104px !important; }

  .home-phone-combo {
    grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) !important;
    gap: 10px;
  }

  .cta-form-layout .country-dd .contact-dd-menu {
    width: min(100%, calc(100vw - 48px)) !important;
    max-height: min(280px, 46vh) !important;
  }

  .cta-form-layout .country-dd .contact-dd-list {
    max-height: min(206px, 34vh) !important;
  }
}

/* very small phones: stack the paired fields to avoid cramping */
@media (max-width: 380px) {
  .home-contact-form-grid { grid-template-columns: 1fr !important; }
  .home-phone-combo { grid-template-columns: 1fr !important; }
}

.home-services-section .container {
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(420px, 1fr);
  gap: clamp(52px, 8vw, 128px);
  align-items: center;
  direction: ltr;
}

.home-services-section .sec-head {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: block;
  margin: 0;
}

.home-services-section .sec-head .btn {
  margin-top: 26px;
}

.home-services-section .home-services-cta {
  --home-services-cta-x: 0px;
  width: max-content;
  min-height: 58px;
  display: inline-flex;
  margin-inline: auto;
  margin-top: 34px;
  padding: 15px 18px 15px 28px;
  border: 1.5px solid rgba(214, 18, 31, .52);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(214, 18, 31, .145), rgba(255, 255, 255, .035));
  color: var(--white);
  font-size: 13px;
  letter-spacing: .12em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
  transform: translateX(var(--home-services-cta-x));
}

.home-services-section .home-services-cta .btn-arrow {
  width: 36px;
  height: 36px;
  margin-inline-start: 4px;
  border-color: rgba(214, 18, 31, .58);
  background: rgba(214, 18, 31, .18);
  color: var(--accent-text);
}

.home-services-section .home-services-cta:hover {
  border-color: rgba(214, 18, 31, .9);
  background:
    linear-gradient(135deg, rgba(214, 18, 31, .22), rgba(255, 255, 255, .055));
  color: var(--white);
  transform: translateX(var(--home-services-cta-x)) translateY(-3px);
  box-shadow: 0 18px 42px rgba(214, 18, 31, .12), inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.home-services-section .home-services-cta:hover .btn-arrow {
  background: var(--red);
  border-color: var(--accent-text);
  color: var(--white);
  transform: translateX(2px);
}

html[dir="rtl"] .home-services-section .home-services-cta {
  --home-services-cta-x: 0px;
  padding: 15px 28px 15px 18px;
}

html[dir="rtl"] .home-services-section .home-services-cta:hover .btn-arrow {
  transform: translateX(-2px);
}

.home-services-section .svc-item {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(70px, 6.4vw, 88px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.5vw, 28px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .016));
  border: 1px solid color-mix(in srgb, var(--fg) 10.5%, transparent);
  border-top: 0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.home-services-section .svc-item + .svc-item {
  margin-top: 14px;
}

.home-services-section .svc-item::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  width: 2px;
  background: var(--red);
  opacity: .62;
}

.home-services-section .svc-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 3px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fg) 5.5%, transparent), transparent 42%);
  opacity: .7;
}

.home-services-section .svc-item:hover {
  background:
    linear-gradient(135deg, rgba(214, 18, 31, .095), rgba(255, 255, 255, .025));
  border-color: rgba(214, 18, 31, .34);
  transform: translateY(-2px);
}

.home-services-section .svc-num,
.home-services-section .svc-desc,
.home-services-section .svc-tags,
.home-services-section .svc-tag-pill,
.home-services-section .svc-icon {
  display: none !important;
}

.home-services-section .svc-title {
  font-size: clamp(21px, 1.85vw, 30px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg);
  text-align: center;
  width: 100%;
  transition: color .25s var(--ease), transform .25s var(--ease);
}

.home-services-section .h2 .no-wrap {
  white-space: nowrap;
}

.home-services-section .svc-item:hover .svc-title {
  color: var(--accent-text);
  transform: translateY(-1px);
}

html[dir="rtl"] .home-services-section .container {
  direction: rtl;
}

html[dir="rtl"] .home-services-section .sec-head {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, max-content);
  align-items: end;
  text-align: right;
}

html[dir="rtl"] .home-services-section .sec-head > div:first-child {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

html[dir="rtl"] .home-services-section .sec-head .home-services-cta {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin-top: 24px;
}

html[dir="rtl"] .home-services-section .svc-item {
  grid-column: 2;
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .home-services-section .svc-item::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

html[dir="rtl"] .home-services-section .svc-title {
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
}

html[dir="rtl"] .home-services-section .svc-item:hover .svc-title {
  transform: translateY(-1px);
}

html[dir="ltr"] .home-services-section .sec-head {
  grid-column: 1;
  text-align: left;
}

html[dir="ltr"] .home-services-section .svc-item {
  grid-column: 2;
}

html[dir="ltr"] .hero-headline #homeHeroLine1,
html[dir="ltr"] .hero-headline #homeHeroLine2 {
  display: inline-block !important;
}

html[dir="ltr"] .hero-headline #homeHeroLine1 {
  margin-inline-end: .08em;
}

html[dir="ltr"] .hero-headline #homeHeroLine3 {
  display: block !important;
}

@media (max-width: 900px) {
  .home-services-section .container,
  html[dir="rtl"] .home-services-section .container {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-services-section .sec-head,
  html[dir="rtl"] .home-services-section .sec-head {
    grid-column: 1;
    grid-row: 1;
  }

  html[dir="rtl"] .home-services-section .sec-head {
    grid-template-columns: 1fr;
  }

  html[dir="rtl"] .home-services-section .sec-head > div:first-child,
  html[dir="rtl"] .home-services-section .sec-head .home-services-cta {
    grid-column: 1;
  }

  .home-services-section .svc-item,
  html[dir="rtl"] .home-services-section .svc-item {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  .home-services-section .svc-title {
    font-size: clamp(21px, 6.4vw, 30px);
  }

  .home-services-section .svc-item {
    min-height: 68px;
    padding: 17px 20px;
  }
}

/* Services page process premium redesign */
body.services-page #svcList .svc-item {
  grid-template-columns: clamp(72px, 7vw, 104px) minmax(0, 1fr);
  column-gap: clamp(24px, 3.6vw, 48px);
  align-items: start;
}

body.services-page #svcList .svc-num {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: 0;
  padding-top: clamp(2px, .35vw, 6px);
  width: 1.15em;
  display: block;
  justify-self: center;
  text-align: center;
}

body.services-page #svcList .svc-item:hover {
  padding-left: 0;
}

html[dir="rtl"] body.services-page #svcList .svc-num {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', sans-serif !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  justify-self: center;
}

@media (max-width: 720px) {
  body.services-page #svcList .svc-item {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 18px;
  }

  body.services-page #svcList .svc-num {
    font-size: clamp(30px, 10vw, 44px);
    padding-top: 2px;
  }
}

html[dir="rtl"] body.services-page .section-dark .process-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(100%, 1120px);
  margin-inline: auto;
  gap: clamp(16px, 2.4vw, 24px);
  position: relative;
}

html[dir="rtl"] body.services-page .section-dark .process-item {
  display: flex;
  flex-direction: column;
  direction: rtl !important;
  align-items: stretch;
  justify-content: space-between;
  min-height: clamp(190px, 18vw, 236px);
  gap: 18px;
  padding: clamp(26px, 3vw, 36px);
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 18, 31, .105), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .016));
  border: 1px solid color-mix(in srgb, var(--fg) 11%, transparent);
  border-radius: 4px;
  text-align: right;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

html[dir="rtl"] body.services-page .section-dark .process-item::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block: 26px;
  width: 2px;
  background: linear-gradient(to bottom, var(--red), rgba(214, 18, 31, .08));
  opacity: .62;
}

html[dir="rtl"] body.services-page .section-dark .process-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%);
  pointer-events: none;
  z-index: -1;
}

html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(even) {
  transform: translateY(26px);
}

html[dir="rtl"] body.services-page .section-dark .process-item:hover {
  padding: clamp(26px, 3vw, 36px);
  border-color: rgba(214, 18, 31, .36);
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 18, 31, .15), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 44px rgba(0, 0, 0, .18);
}

html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(odd):hover {
  transform: translateY(-3px);
}

html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(even):hover {
  transform: translateY(23px);
}

html[dir="rtl"] body.services-page .section-dark .process-item > div:not(.process-n) {
  direction: rtl;
  flex: 1 1 auto;
  min-width: 0;
}

html[dir="rtl"] body.services-page .section-dark .process-n {
  flex: 0 0 auto;
  width: fit-content;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  background: transparent;
  border-radius: 0;
  text-align: right;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1;
  letter-spacing: .06em;
  opacity: .95;
  margin-bottom: 4px;
}

html[dir="rtl"] body.services-page .section-dark .process-n::before {
  content: "";
  width: clamp(28px, 3vw, 42px);
  height: 1px;
  background: rgba(214, 18, 31, .58);
  order: 2;
}

html[dir="rtl"] body.services-page .section-dark .process-title {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-size: clamp(25px, 2.45vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
}

html[dir="rtl"] body.services-page .section-dark .process-desc {
  font-family: 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-size: clamp(14px, 1.18vw, 16px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  text-transform: none;
  max-width: 520px;
  margin-inline-start: auto;
  color: color-mix(in srgb, var(--fg) 66%, transparent);
}

html[dir="ltr"] body.services-page .section-dark .process-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(100%, 1120px);
  margin-inline: auto;
  gap: clamp(16px, 2.4vw, 24px);
  position: relative;
}

html[dir="ltr"] body.services-page .section-dark .process-item {
  display: flex;
  flex-direction: column;
  direction: ltr !important;
  align-items: stretch;
  justify-content: space-between;
  min-height: clamp(190px, 18vw, 236px);
  gap: 18px;
  padding: clamp(26px, 3vw, 36px);
  background:
    radial-gradient(circle at 88% 0%, rgba(214, 18, 31, .105), transparent 34%),
    linear-gradient(225deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .016));
  border: 1px solid color-mix(in srgb, var(--fg) 11%, transparent);
  border-radius: 4px;
  text-align: left;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

html[dir="ltr"] body.services-page .section-dark .process-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 26px;
  width: 2px;
  background: linear-gradient(to bottom, var(--red), rgba(214, 18, 31, .08));
  opacity: .62;
}

html[dir="ltr"] body.services-page .section-dark .process-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 3px;
  background:
    linear-gradient(225deg, rgba(255, 255, 255, .04), transparent 42%);
  pointer-events: none;
  z-index: -1;
}

html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(even) {
  transform: translateY(26px);
}

html[dir="ltr"] body.services-page .section-dark .process-item:hover {
  padding: clamp(26px, 3vw, 36px);
  border-color: rgba(214, 18, 31, .36);
  background:
    radial-gradient(circle at 88% 0%, rgba(214, 18, 31, .15), transparent 36%),
    linear-gradient(225deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 44px rgba(0, 0, 0, .18);
}

html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(odd):hover {
  transform: translateY(-3px);
}

html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(even):hover {
  transform: translateY(23px);
}

html[dir="ltr"] body.services-page .section-dark .process-item > div:not(.process-n) {
  direction: ltr;
  flex: 1 1 auto;
  min-width: 0;
}

html[dir="ltr"] body.services-page .section-dark .process-n {
  flex: 0 0 auto;
  width: fit-content;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1;
  letter-spacing: .06em;
  opacity: .95;
  margin-bottom: 4px;
}

html[dir="ltr"] body.services-page .section-dark .process-n::after {
  content: "";
  width: clamp(28px, 3vw, 42px);
  height: 1px;
  background: rgba(214, 18, 31, .58);
}

html[dir="ltr"] body.services-page .section-dark .process-title {
  font-family: var(--ff-en);
  font-size: clamp(25px, 2.45vw, 38px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 10px;
}

html[dir="ltr"] body.services-page .section-dark .process-desc {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.18vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  text-transform: none;
  max-width: 520px;
  margin-inline-end: auto;
  color: color-mix(in srgb, var(--fg) 66%, transparent);
}

/* Project detail final CTA */
.project-detail-cta {
  padding: clamp(74px, 9vw, 132px) var(--g);
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 18, 31, .12), transparent 38%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border-top: 1px solid var(--border);
  text-align: center;
}

.project-detail-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 34px);
}

.project-detail-cta-title {
  margin: 0;
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif;
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fg);
}

.project-detail-cta-btn {
  justify-content: center;
  min-width: 176px;
}

@media (max-width: 640px) {
  .project-detail-cta {
    padding: 72px var(--g);
  }
}

@media (max-width: 900px) {
  html[dir="rtl"] body.services-page .section-dark .process-list,
  html[dir="ltr"] body.services-page .section-dark .process-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html[dir="rtl"] body.services-page .section-dark .process-item,
  html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(even),
  html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(odd):hover,
  html[dir="rtl"] body.services-page .section-dark .process-item:nth-child(even):hover,
  html[dir="ltr"] body.services-page .section-dark .process-item,
  html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(even),
  html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(odd):hover,
  html[dir="ltr"] body.services-page .section-dark .process-item:nth-child(even):hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  html[dir="rtl"] body.services-page .section-dark .process-item,
  html[dir="ltr"] body.services-page .section-dark .process-item {
    min-height: auto;
    gap: 16px;
    padding: 24px 22px;
  }

  html[dir="rtl"] body.services-page .section-dark .process-n,
  html[dir="ltr"] body.services-page .section-dark .process-n {
    font-size: 18px;
  }

  html[dir="rtl"] body.services-page .section-dark .process-title,
  html[dir="ltr"] body.services-page .section-dark .process-title {
    font-size: clamp(24px, 7.4vw, 32px);
  }
}

/* Homepage hero client alignment pass */
.hero {
  isolation: isolate;
  --hero-content-w: min(1040px, calc(100% - var(--g) - var(--g)));
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--fg) 3%, transparent) 0%, transparent 30%),
    radial-gradient(ellipse at 22% 54%, rgba(214, 18, 31, .08), transparent 44%);
  clip-path: polygon(0 0, 52% 0, 38% 100%, 0 100%);
  opacity: .62;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--fg) 3.2%, transparent) 0,
      color-mix(in srgb, var(--fg) 3.2%, transparent) 1px,
      transparent 1px,
      transparent clamp(82px, 9vw, 132px)
    );
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5), transparent 54%);
  opacity: .24;
  z-index: 0;
}

.hero > *:not(.hero-ghost):not(.hero-bg-glow) {
  position: relative;
  z-index: 1;
}

html[dir="rtl"] .hero-headline .line:empty {
  display: none !important;
}

html[dir="rtl"] .hero-headline {
  max-width: 100% !important;
}

html[dir="rtl"] .hero-headline .line {
  white-space: nowrap;
}

.hero-stats {
  width: var(--hero-content-w) !important;
  max-width: 1040px !important;
  margin: clamp(32px, 4vw, 58px) auto clamp(18px, 2.4vw, 30px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.hero-inner {
  width: var(--hero-content-w) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-copy {
  width: 100% !important;
}

.hero-subrow {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 480px) minmax(260px, 390px) !important;
  align-items: end !important;
  justify-content: space-between !important;
}

html[dir="rtl"] .hero-subrow {
  direction: rtl;
}

html[dir="rtl"] .hero-desc {
  grid-column: 1;
}

html[dir="rtl"] .hero-ctas {
  grid-column: 2;
  justify-content: flex-start !important;
  align-self: end;
}

html[dir="ltr"] .hero-desc {
  grid-column: 1;
}

html[dir="ltr"] .hero-ctas {
  grid-column: 2;
  justify-content: flex-end !important;
}

@media (max-width: 980px) {
  .hero::before {
    clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
    opacity: .48;
  }

  .hero-stats {
    width: var(--hero-content-w) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-inner {
    width: var(--hero-content-w) !important;
    max-width: none !important;
  }

  .hero-subrow {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html[dir="rtl"] .hero-desc,
  html[dir="rtl"] .hero-ctas,
  html[dir="ltr"] .hero-desc,
  html[dir="ltr"] .hero-ctas {
    grid-column: 1;
  }

  html[dir="rtl"] .hero-ctas,
  html[dir="ltr"] .hero-ctas {
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  html[dir="rtl"] .hero-headline {
    max-width: 100% !important;
  }

  html[dir="rtl"] .hero-headline .line {
    white-space: normal;
  }

  .hero-stats {
    margin-top: 18px !important;
  }
}

@media (min-width: 981px) {
  html[dir="rtl"] .hero-inner {
    padding-top: calc(var(--nav-h) + clamp(52px, 6.4vw, 84px)) !important;
    padding-bottom: clamp(8px, 1.2vw, 16px) !important;
  }

  html[dir="rtl"] .hero-copy {
    grid-template-columns: minmax(320px, 420px) minmax(520px, 650px) !important;
    align-items: center !important;
  }

  html[dir="rtl"] .hero-tag {
    margin-bottom: clamp(26px, 3vw, 38px) !important;
  }

  html[dir="rtl"] .hero-headline {
    margin-bottom: clamp(34px, 4vw, 48px) !important;
  }

  html[dir="rtl"] .hero-ctas {
    width: min(420px, 100%) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
    border-right: 2px solid rgba(214, 18, 31, .78) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
      radial-gradient(circle at 0 50%, rgba(214,18,31,.12), transparent 58%) !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
    backdrop-filter: blur(14px);
  }

  html[dir="rtl"] .hero-ctas .btn {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stats {
    margin-top: clamp(14px, 2.2vw, 30px) !important;
  }
}

@media (min-width: 981px) {
  html[dir="rtl"] .hero-copy {
    display: grid !important;
    grid-template-columns: minmax(290px, 390px) minmax(520px, 650px) !important;
    column-gap: 0 !important;
    justify-content: space-between !important;
    align-items: end !important;
    direction: ltr;
  }

  html[dir="rtl"] .hero-tag,
  html[dir="rtl"] .hero-headline,
  html[dir="rtl"] .hero-desc {
    grid-column: 2 !important;
    justify-self: end !important;
    direction: rtl;
    width: 100% !important;
  }

  html[dir="rtl"] .hero-tag {
    max-width: 650px !important;
    justify-content: flex-start !important;
  }

  html[dir="rtl"] .hero-headline {
    max-width: 650px !important;
    text-align: right !important;
  }

  html[dir="rtl"] .hero-desc {
    max-width: 480px !important;
  }

  html[dir="rtl"] .hero-subrow {
    display: contents !important;
  }

  html[dir="rtl"] .hero-ctas {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    justify-content: flex-start !important;
    direction: ltr;
  }

  html[dir="rtl"] .hero-ctas .btn {
    direction: rtl;
  }

  html[dir="rtl"] .hero-ctas .btn:first-child {
    margin-inline-start: 0 !important;
  }
}

/* Homepage hero final visual composition */
@media (min-width: 981px) {
  html[dir="rtl"] .hero-inner {
    padding-top: calc(var(--nav-h) + clamp(52px, 6.4vw, 84px)) !important;
    padding-bottom: clamp(8px, 1.2vw, 16px) !important;
  }

  html[dir="rtl"] .hero-copy {
    grid-template-columns: minmax(320px, 420px) minmax(520px, 650px) !important;
    align-items: center !important;
  }

  html[dir="rtl"] .hero-tag {
    margin-bottom: clamp(26px, 3vw, 38px) !important;
  }

  html[dir="rtl"] .hero-headline {
    margin-bottom: clamp(34px, 4vw, 48px) !important;
  }

  html[dir="rtl"] .hero-ctas {
    width: min(420px, 100%) !important;
    grid-row: 1 / 4 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
    border-right: 2px solid rgba(214, 18, 31, .78) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
      radial-gradient(circle at 0 50%, rgba(214,18,31,.12), transparent 58%) !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
    backdrop-filter: blur(14px);
  }

  html[dir="rtl"] .hero-ctas .btn {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stats {
    margin-top: clamp(14px, 2.2vw, 30px) !important;
  }
}

@media (max-width: 980px) {
  .hero-stats {
    margin-top: 32px !important;
  }
}

/* Homepage hero outer rail correction */
.hero {
  --hero-content-w: calc(100% - var(--g) - var(--g));
}

.hero-inner,
.hero-stats {
  width: var(--hero-content-w) !important;
  max-width: none !important;
}

@media (min-width: 981px) {
  html[dir="rtl"] .hero-copy {
    grid-template-columns: minmax(320px, 420px) minmax(540px, 650px) !important;
    justify-content: space-between !important;
  }

  html[dir="rtl"] .hero-ctas {
    justify-self: start !important;
  }

  html[dir="rtl"] .hero-tag,
  html[dir="rtl"] .hero-headline,
  html[dir="rtl"] .hero-desc {
    justify-self: end !important;
  }
}

/* Header row optical alignment */
.nav {
  align-items: center !important;
}

.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(128px, 10vw, 150px) !important;
  min-width: 128px !important;
  height: 32px !important;
  line-height: 1 !important;
}

.nav-logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.nav-links {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
}

.nav-link,
.lang-btn,
.nav-cta,
.nav-hamburger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
}

/* Header alignment without logo resizing */
.nav-logo {
  width: clamp(142px, 10.4vw, 178px) !important;
  min-width: 142px !important;
  height: auto !important;
  line-height: 0 !important;
  align-self: center !important;
}

.nav-logo svg {
  width: 100% !important;
  height: auto !important;
}

.nav-links,
.nav-right,
.lang-btn,
.nav-cta {
  align-items: center !important;
}

.nav-link,
.lang-btn,
.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nav-hamburger {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 980px) {
  .nav-logo {
    width: clamp(126px, 20vw, 158px) !important;
    min-width: 126px !important;
  }

  .nav-hamburger {
    display: inline-flex !important;
  }
}

@media (max-width: 520px) {
  .nav-logo {
    width: 128px !important;
    min-width: 128px !important;
  }
}

/* Header row layout alignment without logo resizing */
@media (min-width: 981px) {
  .nav {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: clamp(28px, 4vw, 64px) !important;
  }

  .nav-logo {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .nav-links {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .nav-right {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Logo-only optical row adjustment */
.nav-logo {
  transform: translate(16px, 8px) !important;
}

/* Header page labels optical lift */
.nav-link {
  transform: translateY(-6px) !important;
}

/* Homepage hero left-side visual treatment */
@media (min-width: 981px) {
  .hero::before {
    background:
      linear-gradient(105deg, rgba(240, 5, 20, .085) 0%, rgba(240, 5, 20, .038) 28%, transparent 58%),
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fg) 1.8%, transparent) 48%, transparent 100%) !important;
    clip-path: none !important;
    opacity: .72 !important;
  }

  .hero::after {
    mask-image: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.24) 38%, transparent 64%) !important;
    opacity: .28 !important;
  }

  .hero-ghost {
    top: clamp(154px, 23vh, 230px) !important;
    bottom: auto !important;
    left: calc(var(--g) - 8px) !important;
    font-size: clamp(118px, 12.5vw, 230px) !important;
    line-height: .82 !important;
    letter-spacing: .08em !important;
    color: color-mix(in srgb, var(--fg) 3.2%, transparent) !important;
    opacity: 1 !important;
    text-shadow: 0 0 72px rgba(240, 5, 20, .10);
    z-index: 0 !important;
  }

  html[dir="rtl"] .hero-ctas {
    transform: translateY(-10px);
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 980px) {
  .hero-ghost {
    opacity: .36 !important;
  }
}

/* Bilingual homepage hero balance after CTA removal */
@media (min-width: 981px) {
  .hero-subrow {
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 650px) !important;
  }

  html[dir="rtl"] .hero::before {
    background:
      radial-gradient(ellipse at 22% 38%, rgba(240, 5, 20, .105), transparent 42%),
      linear-gradient(105deg, color-mix(in srgb, var(--fg) 2.6%, transparent) 0%, transparent 52%) !important;
  }

  html[dir="ltr"] .hero::before {
    background:
      radial-gradient(ellipse at 78% 38%, rgba(240, 5, 20, .105), transparent 42%),
      linear-gradient(255deg, color-mix(in srgb, var(--fg) 2.6%, transparent) 0%, transparent 52%) !important;
  }

  html[dir="rtl"] .hero::after {
    mask-image: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.22) 42%, transparent 68%) !important;
  }

  html[dir="ltr"] .hero::after {
    mask-image: linear-gradient(270deg, rgba(0,0,0,.58), rgba(0,0,0,.22) 42%, transparent 68%) !important;
  }

  html[dir="rtl"] .hero-ghost,
  html[dir="ltr"] .hero-ghost {
    top: clamp(164px, 24vh, 236px) !important;
    bottom: auto !important;
    font-size: clamp(108px, 11vw, 210px) !important;
    line-height: .82 !important;
    letter-spacing: .09em !important;
    color: color-mix(in srgb, var(--fg) 2.6%, transparent) !important;
    text-shadow: 0 0 86px rgba(240, 5, 20, .12);
    opacity: 1 !important;
  }

  html[dir="rtl"] .hero-ghost {
    left: var(--g) !important;
    right: auto !important;
    text-align: left;
  }

  html[dir="ltr"] .hero-ghost {
    right: var(--g) !important;
    left: auto !important;
    text-align: right;
  }

  html[dir="rtl"] .hero-desc {
    grid-column: 2 !important;
  }

  html[dir="ltr"] .hero-desc {
    grid-column: 1 !important;
  }
}

/* Homepage stats strip width adjustment */
@media (min-width: 981px) {
  .hero-stats {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}

html[dir="rtl"] .hero-stats .h-stat-n[data-suffix-ar],
html[dir="rtl"] body.about-page [data-count="6"][data-suffix=" سنوات"] {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Tajawal', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0;
}

html[dir="rtl"] .ar-digit {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', sans-serif !important;
  font-synthesis: none;
  font-feature-settings: normal;
  letter-spacing: 0;
}

html[dir="rtl"] [data-count],
html[dir="rtl"] body.about-page [data-count] {
  font-family: 'Thmanyah Serif Display', 'Thmanyah Serif Text', sans-serif !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  font-synthesis: none;
  font-feature-settings: normal;
  letter-spacing: 0 !important;
}

/* Contact page hero removal spacing */
main > .contact-section-clean:first-child {
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) !important;
}

@media (max-width: 1100px) {
  main > .contact-section-clean:first-child .contact-layout-clean > .contact-form-card-clean {
    order: -1;
  }
}

@media (max-width: 720px) {
  main > .contact-section-clean:first-child {
    padding-top: calc(var(--nav-h) + 24px) !important;
  }
}

/* Arabic About hero stats balance */
html[dir="rtl"] body.about-page .ag > .gsap-up > div[style*="display:flex"][style*="margin-top:36px"] {
  justify-content: center;
  align-items: stretch;
  gap: clamp(22px, 3vw, 42px) !important;
}

html[dir="rtl"] body.about-page .ag > .gsap-up > div[style*="display:flex"][style*="margin-top:36px"] > div {
  min-width: clamp(96px, 10vw, 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

html[dir="rtl"] body.about-page .ag > .gsap-up > div[style*="display:flex"][style*="margin-top:36px"] [data-count] {
  font-size: clamp(38px, 4.2vw, 46px) !important;
  line-height: .95 !important;
  display: block;
  width: 100%;
  text-align: center;
}

html[dir="rtl"] body.about-page .ag > .gsap-up > div[style*="display:flex"][style*="margin-top:36px"] [data-count] + .label {
  margin-top: 10px !important;
  width: 100%;
  text-align: center;
  line-height: 1.35;
}

/* Public mobile navigation menu */
.nav-mobile-close {
  display: none;
}

@media (max-width: 980px) {
  .nav {
    overflow: visible !important;
  }

  .nav-hamburger {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--fg) 6%, transparent) !important;
    color: var(--white) !important;
    position: relative !important;
    z-index: 1002 !important;
  }

  .nav-hamburger span {
    display: block !important;
    width: 17px !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    pointer-events: none !important;
  }

  .nav-hamburger:hover,
  .nav-hamburger.open {
    border-color: rgba(240, 5, 20, .48) !important;
    background: rgba(240, 5, 20, .13) !important;
  }

  .nav-mobile {
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .55s var(--ease2), opacity .35s ease !important;
    overflow-x: hidden !important;
  }

  html[dir="ltr"] .nav-mobile {
    transform: translate3d(-100%, 0, 0) !important;
  }

  .nav-mobile.open,
  html[dir="rtl"] .nav-mobile.open,
  html[dir="ltr"] .nav-mobile.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
  }

  body #navMobile.nav-mobile.open,
  html[dir="rtl"] body #navMobile.nav-mobile.open,
  html[dir="ltr"] body #navMobile.nav-mobile.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    translate: 0 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  html[dir="ltr"] body #navMobile.nav-mobile {
    left: -100vw !important;
    right: auto !important;
    width: 100vw !important;
    transform: none !important;
  }

  html[dir="rtl"] body #navMobile.nav-mobile {
    right: -100vw !important;
    left: auto !important;
    width: 100vw !important;
    transform: none !important;
  }

  html[dir="ltr"] body #navMobile.nav-mobile.open {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  html[dir="rtl"] body #navMobile.nav-mobile.open {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  .nav-mobile-close {
    display: inline-flex;
    position: absolute;
    top: calc(var(--nav-h) / 2 - 21px);
    inset-inline-end: var(--g);
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    color: var(--white);
    z-index: 2;
  }

  .nav-mobile-close span {
    position: absolute;
    width: 17px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    pointer-events: none;
  }

  .nav-mobile-close span:first-child {
    transform: rotate(45deg);
  }

  .nav-mobile-close span:last-child {
    transform: rotate(-45deg);
  }
}

@media (min-width: 981px) {
  .nav-hamburger {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .nav-right {
    gap: 6px !important;
    margin-right: 48px !important;
  }

  html[dir="rtl"] .nav-right {
    margin-right: 0 !important;
    margin-left: 48px !important;
  }

  .lang-btn {
    min-width: auto !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  .nav-cta {
    min-width: auto !important;
    padding-inline: 10px !important;
    font-size: 10px !important;
  }

  .nav-hamburger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    position: fixed !important;
    top: 14px !important;
    right: 18px !important;
    left: auto !important;
  }

  html[dir="rtl"] .nav-hamburger {
    right: auto !important;
    left: 18px !important;
  }
}

@media (max-width: 440px) {
  html[dir="ltr"] .nav-logo {
    transform: translate(44px, 8px) !important;
  }

  html[dir="ltr"] .nav-right {
    margin-right: 0 !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }

  html[dir="ltr"] .nav-hamburger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    position: fixed !important;
    top: 14px !important;
    left: 18px !important;
    right: auto !important;
  }
}

@media (max-width: 400px) {
  html[dir="ltr"] .nav {
    height: 112px !important;
  }

  html[dir="ltr"] .nav-right > .lang-btn {
    display: inline-flex !important;
    position: fixed !important;
    top: 88px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1001 !important;
  }
}

/* Public mobile menu overlay cleanup */
@media (max-width: 980px) {
  body.mobile-menu-open #nav {
    z-index: 1000 !important;
  }

  body.mobile-menu-open #nav .nav-logo,
  body.mobile-menu-open #nav .nav-right > .lang-btn,
  body.mobile-menu-open #nav .nav-right > .nav-cta {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.mobile-menu-open #nav .nav-hamburger {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body #navMobile.nav-mobile {
    z-index: 9998 !important;
    background:
      radial-gradient(ellipse at 22% 18%, rgba(240, 5, 20, .14), transparent 44%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 99%, transparent), color-mix(in srgb, var(--bg) 97%, transparent)) !important;
    isolation: isolate;
  }

  body #navMobile.nav-mobile.open {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
  }

  body #navMobile.nav-mobile .nav-mobile-brand {
    position: absolute !important;
    top: 18px !important;
    inset-inline-start: var(--g) !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 2 !important;
    opacity: 1 !important;
  }

  body #navMobile.nav-mobile .nav-mobile-close {
    position: fixed !important;
    top: 14px !important;
    inset-inline-end: var(--g) !important;
    z-index: 3 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body #navMobile.nav-mobile:not(.open) .nav-mobile-close {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body #navMobile.nav-mobile ul {
    width: min(100%, 720px) !important;
    margin: 0 auto !important;
    padding: calc(var(--nav-h) + 36px) 0 28px !important;
  }

  body #navMobile.nav-mobile .nav-mobile-link {
    text-align: center !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 560px) {
  body #navMobile.nav-mobile .nav-mobile-brand {
    top: 19px !important;
    width: 118px !important;
  }

  body #navMobile.nav-mobile .nav-mobile-close {
    inset-inline-end: 18px !important;
  }
}

/* Public mobile header cross-device final layout */
@media (max-width: 560px) {
  #nav.nav {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    grid-template-rows: 60px !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 4px 18px !important;
  }

  #nav .nav-links {
    display: none !important;
  }

  #nav .nav-cta {
    display: none !important;
  }

  #nav .nav-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  #nav .nav-right {
    display: contents !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  #nav .nav-hamburger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  #nav .nav-cta {
    display: none !important;
  }

  #nav .nav-right > .lang-btn,
  #nav .lang-btn,
  #langToggle {
    display: none !important;
  }
}

@media (max-width: 360px) {
  #nav.nav {
    grid-template-columns: 36px minmax(108px, 1fr) auto !important;
    column-gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #nav .nav-cta {
    max-width: 104px !important;
    padding-inline: 9px !important;
  }
}

/* Final English Thmanyah typography system */
html[dir="ltr"] {
  --ff-en-display: 'Thmanyah Serif Display', 'Bebas Neue', sans-serif;
  --ff-en-body: 'Thmanyah Serif Text', 'Instrument Sans', sans-serif;
  --ff-en: var(--ff-en-display);
}

html[dir="ltr"] body,
html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] .nav-link,
html[dir="ltr"] .nav-cta,
html[dir="ltr"] .btn,
html[dir="ltr"] .lang-btn,
html[dir="ltr"] .label,
html[dir="ltr"] .label-line,
html[dir="ltr"] .body,
html[dir="ltr"] .body-lg,
html[dir="ltr"] .body-xl,
html[dir="ltr"] p,
html[dir="ltr"] .svc-desc,
html[dir="ltr"] .process-desc,
html[dir="ltr"] .footer-tag,
html[dir="ltr"] .footer-lnk,
html[dir="ltr"] .footer-soc,
html[dir="ltr"] .contact-info-label,
html[dir="ltr"] .contact-info-value,
html[dir="ltr"] .form-label,
html[dir="ltr"] .form-field,
html[dir="ltr"] .contact-dd-btn,
html[dir="ltr"] .contact-dd-option,
html[dir="ltr"] .project-meta,
html[dir="ltr"] .project-detail-copy,
html[dir="ltr"] .case-copy,
html[dir="ltr"] .proj-meta,
html[dir="ltr"] .proj-tag {
  font-family: var(--ff-en-body) !important;
  letter-spacing: 0 !important;
}

html[dir="ltr"] .nav-link {
  font-size: clamp(14px, .98vw, 16px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

html[dir="ltr"] .nav-cta,
html[dir="ltr"] .btn,
html[dir="ltr"] .lang-btn {
  font-weight: 700 !important;
  line-height: 1 !important;
}

html[dir="ltr"] .svc-title,
html[dir="ltr"] .process-title,
html[dir="ltr"] .project-title,
html[dir="ltr"] .project-card-title,
html[dir="ltr"] .work-card-title,
html[dir="ltr"] .proj-name,
html[dir="ltr"] .case-title,
html[dir="ltr"] .footer-col-title,
html[dir="ltr"] .contact-card-title,
html[dir="ltr"] .stat-num,
html[dir="ltr"] .h-stat-n,
html[dir="ltr"] .about-stat-number,
html[dir="ltr"] .about-stat-n,
html[dir="ltr"] .process-n,
html[dir="ltr"] .service-item-num,
html[dir="ltr"] .marquee-word,
html[dir="ltr"] .logo-trust-tagline {
  font-family: var(--ff-en-display) !important;
  letter-spacing: -.006em !important;
  line-height: .98 !important;
}

html[dir="ltr"] .proj-name,
html[dir="ltr"] .project-card-title,
html[dir="ltr"] .work-card-title {
  font-size: clamp(28px, 3vw, 48px) !important;
  line-height: .96 !important;
  max-width: 100% !important;
}

html[dir="ltr"] .svc-title,
html[dir="ltr"] .process-title {
  font-size: clamp(28px, 2.4vw, 42px) !important;
  line-height: 1 !important;
}

/* Final English hero display system */
html[dir="ltr"] .hero-headline,
html[dir="ltr"] body.services-page .sub-hero .display,
html[dir="ltr"] body.work-page .sub-hero .display,
html[dir="ltr"] .contact-hero-title {
  font-family: var(--ff-en-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 3 !important;
}

html[dir="ltr"] .hero-headline {
  max-width: min(760px, 50vw) !important;
  font-size: clamp(62px, 7.8vw, 132px) !important;
  line-height: .9 !important;
  margin-bottom: clamp(30px, 3.4vw, 50px) !important;
}

html[dir="ltr"] .hero-headline #homeHeroLine1,
html[dir="ltr"] .hero-headline #homeHeroLine2,
html[dir="ltr"] .hero-headline #homeHeroLine3 {
  display: block !important;
}

html[dir="ltr"] .hero-headline #homeHeroLine1 {
  margin-inline-end: 0 !important;
}

html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-headline {
  max-width: min(1280px, 84vw) !important;
  font-size: clamp(54px, 5.8vw, 108px) !important;
  letter-spacing: -.014em !important;
}

html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-headline #homeHeroLine1,
html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-headline #homeHeroLine2 {
  display: inline !important;
}

html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-headline #homeHeroLine3 {
  display: block !important;
}

html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-ghost {
  right: clamp(72px, 7vw, 138px) !important;
  top: clamp(330px, 42vh, 390px) !important;
  transform: translateX(15%) !important;
  font-size: clamp(104px, 7.6vw, 142px) !important;
  color: rgba(240, 5, 20, .044) !important;
}

@media (max-width: 1400px) {
  html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-ghost {
    right: clamp(48px, 6vw, 84px) !important;
    transform: translateX(20%) !important;
    font-size: clamp(94px, 7vw, 106px) !important;
    color: rgba(240, 5, 20, .038) !important;
  }
}

html[dir="ltr"] .hero-headline #homeHeroLine3 {
  margin-top: 0 !important;
}

html[dir="ltr"] .hero-headline .outline {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 38%, transparent) !important;
}

html[dir="ltr"] .hero-ghost {
  position: absolute !important;
  left: auto !important;
  right: clamp(70px, 8vw, 180px) !important;
  top: clamp(190px, 26vh, 280px) !important;
  bottom: auto !important;
  transform: translateX(50%) !important;
  z-index: 0 !important;
  font-family: var(--ff-en-display) !important;
  font-weight: 700 !important;
  font-size: clamp(130px, 13vw, 240px) !important;
  line-height: .86 !important;
  letter-spacing: .035em !important;
  color: rgba(240, 5, 20, .03) !important;
  text-shadow: 0 0 70px rgba(240, 5, 20, .07) !important;
  pointer-events: none !important;
  user-select: none !important;
}

html[dir="ltr"] body.services-page .sub-hero .display,
html[dir="ltr"] body.work-page .sub-hero .display {
  max-width: 760px !important;
  font-size: clamp(64px, 7vw, 118px) !important;
  line-height: .92 !important;
  text-align: left !important;
}

html[dir="ltr"] body.services-page .sub-hero .display .c-red,
html[dir="ltr"] body.work-page .sub-hero .display .c-red {
  display: block !important;
  margin-top: 0 !important;
}

html[dir="ltr"] body.services-page .sub-hero::after,
html[dir="ltr"] body.work-page .sub-hero::after {
  font-family: var(--ff-en-display) !important;
  font-weight: 700 !important;
  left: auto !important;
  right: clamp(70px, 8vw, 160px) !important;
  top: 50% !important;
  transform: translateY(-48%) !important;
  max-width: min(42vw, 580px) !important;
  font-size: clamp(78px, 7.2vw, 136px) !important;
  line-height: .9 !important;
  letter-spacing: .035em !important;
  text-align: right !important;
  color: rgba(240, 5, 20, .024) !important;
  text-shadow: 0 0 54px rgba(240, 5, 20, .055) !important;
  z-index: 0 !important;
}

html[dir="ltr"] .contact-hero-title {
  max-width: 900px !important;
  font-size: clamp(56px, 6.2vw, 104px) !important;
  line-height: .94 !important;
}

@media (max-width: 980px) {
  html[dir="ltr"] .hero-headline {
    max-width: 92vw !important;
    font-size: clamp(54px, 11vw, 92px) !important;
    line-height: .94 !important;
  }

  html[dir="ltr"] .hero-ghost {
    font-size: clamp(96px, 18vw, 160px) !important;
    right: clamp(18px, 6vw, 70px) !important;
    top: clamp(170px, 24vh, 240px) !important;
    transform: translateX(56%) !important;
    color: rgba(240, 5, 20, .018) !important;
  }

  html[dir="ltr"] body.services-page .sub-hero .display,
  html[dir="ltr"] body.work-page .sub-hero .display,
  html[dir="ltr"] .contact-hero-title {
    max-width: 100% !important;
    font-size: clamp(50px, 10vw, 86px) !important;
    line-height: .98 !important;
  }

  html[dir="ltr"] body.services-page .sub-hero::after,
  html[dir="ltr"] body.work-page .sub-hero::after {
    opacity: .45 !important;
    font-size: clamp(64px, 10vw, 96px) !important;
    right: var(--g) !important;
  }
}

@media (max-width: 900px) {
  html[dir="ltr"] .hero-ghost,
  html[dir="ltr"] body.services-page .sub-hero::after,
  html[dir="ltr"] body.work-page .sub-hero::after {
    display: none !important;
  }
}

@media (max-width: 560px) {
  html[dir="ltr"] .hero-headline {
    max-width: 92vw !important;
    font-size: clamp(48px, 14.5vw, 74px) !important;
    line-height: 1 !important;
    letter-spacing: -.006em !important;
  }

  html[dir="ltr"] body.services-page .sub-hero .display,
  html[dir="ltr"] body.work-page .sub-hero .display,
  html[dir="ltr"] .contact-hero-title {
    font-size: clamp(40px, 12vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.006em !important;
  }
}

@media (max-width: 560px) {
  html[dir="ltr"] body:not(.services-page):not(.work-page) .hero-headline {
    max-width: 94vw !important;
    font-size: clamp(38px, 10.8vw, 52px) !important;
    line-height: 1.04 !important;
  }
}

/* Contact page: keep the English contact hero/form composition separated. */
html[dir="ltr"] .contact-section-clean {
  position: relative;
  overflow-x: clip;
}

html[dir="ltr"] .contact-section-clean .container {
  isolation: isolate;
}

html[dir="ltr"] .contact-layout-clean {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr) !important;
  align-items: start !important;
}

html[dir="ltr"] .contact-info-card,
html[dir="ltr"] .contact-form-card-clean {
  position: relative;
  z-index: 1;
  min-width: 0;
}

html[dir="ltr"] .contact-form-card-clean {
  justify-self: stretch;
}

html[dir="ltr"] .contact-info-card {
  overflow: hidden;
}

html[dir="ltr"] .contact-info-value {
  overflow-wrap: anywhere;
}

html[dir="ltr"] .contact-hero-clean .hero-ghost,
html[dir="ltr"] .contact-hero-clean .hero-bg-glow {
  z-index: 0 !important;
  pointer-events: none;
}

html[dir="ltr"] .contact-hero-title {
  max-width: min(680px, 46vw) !important;
  overflow-wrap: normal;
}

@media (max-width: 1100px) {
  html[dir="ltr"] .contact-layout-clean {
    grid-template-columns: 1fr !important;
  }

  html[dir="ltr"] .contact-hero-title {
    max-width: 100% !important;
  }
}

/* Homepage CTA/contact form: keep English title and glow out of the form rail. */
html[dir="ltr"] .cta-big:has(.home-hero-form-card) {
  isolation: isolate;
  padding-top: clamp(40px, 5vh, 72px) !important;
  padding-bottom: clamp(40px, 5vh, 72px) !important;
}

html[dir="ltr"] .cta-big:has(.home-hero-form-card) .cta-glow {
  left: 22% !important;
  width: min(500px, 38vw) !important;
  height: 320px !important;
  opacity: .58;
  z-index: 0;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) {
  grid-template-columns: minmax(0, .46fr) minmax(520px, .54fr) !important;
  gap: clamp(48px, 5vw, 84px) !important;
  align-items: center !important;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap {
  min-width: 0;
  overflow: visible;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
  max-width: min(620px, 100%) !important;
  font-size: clamp(60px, 4.8vw, 94px) !important;
  line-height: .9 !important;
  letter-spacing: -.008em !important;
  margin-bottom: clamp(24px, 3vh, 38px) !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .cta-form-wrap,
html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
  position: relative;
  z-index: 2;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
  padding: clamp(22px, 2.2vw, 32px) !important;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-contact-form-grid {
  row-gap: 2px !important;
  column-gap: 16px !important;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-group {
  margin-bottom: 10px;
  gap: 6px;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-label {
  margin-bottom: 5px;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-field,
html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .contact-dd-btn {
  min-height: 52px;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-contact-message {
  min-height: 116px !important;
}

html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .contact-submit-clean {
  margin-top: 10px;
  min-height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Homepage CTA/contact form: mirror compact sizing for Arabic without changing side order. */
html[dir="rtl"] .cta-big:has(.home-hero-form-card) {
  isolation: isolate;
  padding-top: clamp(40px, 5vh, 72px) !important;
  padding-bottom: clamp(40px, 5vh, 72px) !important;
}

html[dir="rtl"] .cta-big:has(.home-hero-form-card) .cta-glow {
  right: clamp(-96px, -6vw, -48px) !important;
  width: min(500px, 38vw) !important;
  height: 320px !important;
  opacity: .58;
  z-index: 0;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) {
  grid-template-columns: minmax(520px, .54fr) minmax(0, .46fr) !important;
  gap: clamp(48px, 5vw, 84px) !important;
  align-items: center !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap {
  min-width: 0;
  overflow: visible;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
  max-width: min(620px, 100%) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: clamp(50px, 4.3vw, 78px) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  margin-bottom: clamp(24px, 3vh, 38px) !important;
  overflow: visible !important;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line {
  display: block !important;
  font-size: clamp(50px, 4.3vw, 78px) !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  transform: none !important;
  position: relative;
  overflow: visible !important;
  white-space: nowrap;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line {
  margin-top: clamp(16px, 1.6vw, 28px) !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line-accent {
  font-size: clamp(58px, 4.8vw, 90px) !important;
  line-height: 1.2 !important;
  margin-top: clamp(8px, 1vw, 16px) !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line-accent {
  margin-top: clamp(8px, 1vw, 16px) !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-form-wrap,
html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
  position: relative;
  z-index: 2;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
  padding: clamp(22px, 2.2vw, 32px) !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-contact-form-grid {
  row-gap: 2px !important;
  column-gap: 16px !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-group {
  margin-bottom: 10px;
  gap: 6px;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-label {
  margin-bottom: 5px;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .form-field,
html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .contact-dd-btn {
  min-height: 52px;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-contact-message {
  min-height: 116px !important;
}

html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card .contact-submit-clean {
  margin-top: 10px;
  min-height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
}

@media (max-width: 1100px) {
  html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
    max-width: 100% !important;
    font-size: clamp(50px, 8vw, 72px) !important;
    line-height: .96 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
    max-width: 100% !important;
    gap: 0;
    font-size: clamp(46px, 7.1vw, 62px) !important;
    line-height: 1.28 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line {
    font-size: clamp(46px, 7.1vw, 62px) !important;
    line-height: 1.28 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line {
    margin-top: clamp(14px, 1.8vw, 22px) !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line-accent {
    font-size: clamp(52px, 7.8vw, 70px) !important;
    line-height: 1.2 !important;
    margin-top: clamp(8px, 1.2vw, 14px) !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line-accent {
    margin-top: clamp(8px, 1.2vw, 14px) !important;
  }

  html[dir="ltr"] .cta-big:has(.home-hero-form-card) .cta-glow {
    top: 22% !important;
    left: 50% !important;
    width: min(480px, 70vw) !important;
    height: 220px !important;
    opacity: .34;
  }

  html[dir="rtl"] .cta-big:has(.home-hero-form-card) .cta-glow {
    top: 22% !important;
    right: 50% !important;
    width: min(480px, 70vw) !important;
    height: 220px !important;
    opacity: .34;
  }
}

@media (max-width: 640px) {
  html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
    font-size: clamp(38px, 10.8vw, 48px) !important;
    line-height: 1.04 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title {
    gap: 0;
    font-size: clamp(34px, 9.6vw, 42px) !important;
    line-height: 1.3 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line {
    font-size: clamp(34px, 9.6vw, 42px) !important;
    line-height: 1.3 !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line {
    margin-top: 12px !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line-accent {
    font-size: clamp(38px, 10.8vw, 48px) !important;
    line-height: 1.22 !important;
    margin-top: 10px !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .cta-copy-wrap .cta-title .cta-title-line + .cta-title-line-accent {
    margin-top: 10px !important;
  }

  html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) {
    gap: 26px !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) {
    gap: 26px !important;
  }

  html[dir="ltr"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
    padding: 22px !important;
  }

  html[dir="rtl"] .cta-form-layout:has(.home-hero-form-card) .home-hero-form-card {
    padding: 22px !important;
  }

  html[dir="ltr"] .cta-big:has(.home-hero-form-card) .cta-glow {
    top: 20% !important;
    width: min(320px, 76vw) !important;
    height: 180px !important;
    opacity: .22;
  }

  html[dir="rtl"] .cta-big:has(.home-hero-form-card) .cta-glow {
    top: 20% !important;
    width: min(320px, 76vw) !important;
    height: 180px !important;
    opacity: .22;
  }
}


.vslider {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.vslide {
  display: none;
}
.vslide.vslide--active {
  display: block;
}

.vslide-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}

.vslide-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.vslider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.vslider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg, var(--fg));
  font-size: 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.vslider-btn:hover {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  border-color: color-mix(in srgb, var(--fg) 35%, transparent);
}

.vslider-count {
  font-family: var(--ff-en, monospace);
  font-size: 14px;
  color: var(--dim, color-mix(in srgb, var(--fg) 50%, transparent));
  min-width: 52px;
  text-align: center;
}


.vsWrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.vsFrame {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}

.vsFrame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.vslider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
}

.vsBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.vsBtn:hover {
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}

.vsCount {
  font-size: 13px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  font-family: var(--ff-en, monospace);
  min-width: 48px;
  text-align: center;
}

/* ── Video Slider ─────────────────────────────────────────────── */
.vs-slide { display: none; }
.vs-slide.vs-active { display: block; }

.vs-frame {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.vs-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
.vs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
}
.vs-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.vs-btn:hover { background: color-mix(in srgb, var(--fg) 15%, transparent); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.vs-count {
  font-size: 13px;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  font-family: var(--ff-en, monospace);
  min-width: 44px;
  text-align: center;
}

/* ── SEMANTIC HEADING PROMOTION ──
   Several real page titles were marked up as <div>, leaving about.html without
   an <h1> and contact.html without a single heading of any level. The fix is to
   use the correct tag, not to bolt ARIA roles onto a div. Because this
   stylesheet has no global reset, a promoted heading would otherwise pick up
   the UA defaults for margin/size/weight; this class neutralises them so the
   element keeps rendering exactly as it did as a <div>.
   Wrapped in :where() so the rule carries zero specificity: any real class on
   the same element (.contact-mini-label, .display, .h2 ...) still wins, and
   only the properties nobody else sets fall back to this reset. */
:where(.heading-reset) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-family: inherit;
  color: inherit;
}

/* ── ENGLISH NUMERALS — force lining figures everywhere ── */
body, .h-stat-n, [data-count], .h2, .counter, .proj-index, .svc-num, .folio {
  font-variant-numeric: lining-nums tabular-nums;
  -moz-font-feature-settings: "lnum" 1, "tnum" 1;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ── HOME PROJECTS grid reveal ── */
#homeProjects .gsap-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
#homeProjects .gsap-up.visible {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════
   HERO ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes lineUp {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════
   DATA-REVEAL SCROLL SYSTEM
   ═══════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════
   DEPTH GAUGE — fixed left sidebar
   ═══════════════════════════════════════════════════════ */
#depthGauge {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
#depthRail {
  width: 1px;
  height: 120px;
  background: rgba(247,245,241,.15);
  position: relative;
  border-radius: 1px;
}
#depthDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F00514;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: top .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px #F00514;
}
#depthLabel {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(247,245,241,.35);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media (max-width: 768px) { #depthGauge { display: none; } }

/* ═══════════════════════════════════════════════════════
   WAYPOINTS SECTION
   ═══════════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } }

.wp-item {
  display: flex;
  gap: 20px;
  padding: 28px 48px 28px 0;
  border-bottom: 1px solid rgba(7,7,10,.1);
  position: relative;
  transition: background .3s;
  cursor: default;
}
.wp-item:hover { background: rgba(240,5,20,.04); }

.wp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,5,20,.4);
  flex-shrink: 0;
  margin-top: 6px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.wp-item.active .wp-dot,
.wp-item:hover .wp-dot {
  background: #F00514;
  border-color: #F00514;
  box-shadow: 0 0 10px rgba(240,5,20,.6);
}

.wp-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wp-num {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(240,5,20,.7);
}

.wp-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #F7F5F1;
  line-height: 1.2;
  margin: 0;
}
.wp-desc {
  font-size: 14px;
  color: rgba(7,7,10,.58);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}
.wp-en {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(7,7,10,.22);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   SERVICES CARDS
   ═══════════════════════════════════════════════════════ */
.svc-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247,245,241,.06);
}
@media (max-width: 900px) { .svc-grid-new { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .svc-grid-new { grid-template-columns: 1fr; } }

.svc-card-new {
  background: #07070A;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid transparent;
  transition: border-color .3s, background .3s, transform .3s;
  cursor: default;
}
.svc-card-new:hover {
  background: rgba(240,5,20,.04);
  border-color: rgba(240,5,20,.25);
  transform: translateY(-3px);
}
.svc-card-num {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(240,5,20,.6);
}
.svc-card-title {
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 700;
  color: #F7F5F1;
  margin: 0;
  line-height: 1.25;
}
.svc-card-desc {
  font-size: 13.5px;
  color: rgba(247,245,241,.5);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240,5,20,.8);
  text-decoration: none;
  font-family: 'Courier New', monospace;
  margin-top: auto;
  transition: color .2s, gap .2s;
}
.svc-card-link:hover { color: #F00514; gap: 10px; }

/* ═══════════════════════════════════════════════════════
   WORK GRID
   ═══════════════════════════════════════════════════════ */
.work-grid-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.work-col-r {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.work-row-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .work-grid-main { grid-template-columns: 1fr; }
  .work-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .work-row-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PROFESSIONAL GLOWS & SECTION TRANSITIONS
   ═══════════════════════════════════════════════════════ */

/* Hero red text glow */
.hero h1 span[style*="color:#F00514"] {
  text-shadow: 0 0 80px rgba(240,5,20,.25), 0 0 160px rgba(240,5,20,.1);
}

/* Stats bar refined */
.hero [style*="grid-template-columns:repeat(4"] {
  background: rgba(7,7,10,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.h-stat-n {
  font-family: 'Bebas Neue', sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1 !important;
}

/* Dark section ambient glow at edges */
.sec--dark {
  position: relative;
}

/* Marquee border glow */
.marquee {
  border-top: 1px solid rgba(240,5,20,.12);
  border-bottom: 1px solid rgba(240,5,20,.12);
}

/* Service cards grid gap fix */
.svc-grid-new {
  gap: 1px;
  background: rgba(7,7,10,.1);
}

/* WP dot line vertical */
.wp-item + .wp-item {
  border-top: none;
}

/* CTA heading glow effect */
section.sec--dark h2 span[style*="color:#F00514"] {
  text-shadow: 0 0 60px rgba(240,5,20,.3), 0 0 120px rgba(240,5,20,.12);
}

/* Section label red dash glow */
span[style*="background:#F00514"][style*="height:1.5px"],
span[style*="background:#F00514"][style*="height:1px"] {
  box-shadow: 0 0 8px rgba(240,5,20,.5);
}



/* Proj card hover red border flash */
.proj-card:hover {
  box-shadow: 0 0 0 1.5px rgba(240,5,20,.35), 0 24px 48px rgba(7,7,10,.5);
}

/* Force stat numbers to Bebas Neue (English) */
[data-count] {
  font-family: 'Bebas Neue', sans-serif !important;
  font-variant-numeric: lining-nums !important;
  unicode-bidi: isolate;
  direction: ltr;
}

/* ═══════════════════════════════════════════════════════
   FIXES v2 — clean sections, correct colors, readable text
   ═══════════════════════════════════════════════════════ */

/* ── NUMBERS: force English / LTR on every counter ── */
[data-count],
.h-stat-n {
  font-family: 'Bebas Neue', 'Arial', sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

/* ── SECTION TRANSITIONS: clean hard cuts, no grey ── */
.sec--dark,
.sec--light {
  /* Never use box-shadow that creates grey gradients */
  box-shadow: none;
}

/* Border between sections instead of gradient */
.sec--light + .sec--dark,
.sec--dark + .sec--light {
  border-top: none;
}

/* ── WP-ITEMS (inside light section): dark text ── */
.wp-title {
  color: #07070A !important;
}
.wp-desc {
  color: rgba(7,7,10,.58) !important;
}
.wp-en {
  color: rgba(7,7,10,.22) !important;
}
.wp-dot {
  border-color: rgba(200,0,15,.4) !important;
}
.wp-item.active .wp-dot,
.wp-item:hover .wp-dot {
  background: #C8000C !important;
  border-color: #C8000C !important;
  box-shadow: 0 0 10px rgba(200,0,12,.5) !important;
}

/* ── SECTION LABEL: dark text in light sections ── */
.sec--light .wp-num {
  color: rgba(200,0,12,.7) !important;
}

/* ── PROJECTS GRID: balanced layout ── */
.work-grid-main {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
  align-items: start;
}
.work-col-r {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.work-row-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px !important;
}
/* Proj card placeholder gradient — not too dark */
.proj-card {
  border-radius: 3px !important;
  overflow: hidden;
}

/* ── SERVICE CARDS: visible on dark, readable ── */
.svc-card-new {
  background: #0D0D10 !important;
  border: 1px solid rgba(247,245,241,.07) !important;
}
.svc-card-new:hover {
  border-color: rgba(200,0,12,.3) !important;
  background: rgba(200,0,12,.04) !important;
  transform: translateY(-2px) !important;
}
.svc-card-title {
  color: #F7F5F1 !important;
}
.svc-card-desc {
  color: rgba(247,245,241,.52) !important;
}

/* ── RED GLOW on stat numbers: subtle ── */
.h-stat-n {
  color: #C8000C !important;
  text-shadow: none !important;
}

/* ── HERO h1 red line: soft shadow only ── */
.hero h1 {
  text-shadow: none;
}

/* Language toggle disabled site-wide — overrides the `display:inline-flex !important`
   nav-alignment rules above, which otherwise defeat any inline hiding. */
.lang-btn,
#langToggle,
#langToggleMobile,
.lang-option,
.lang-divider {
  display: none !important;
}

/* ── Arabic hero responsive tuning ── */
@media (max-width: 1024px) {
  html[dir="rtl"] .hero-h1-ar { font-size: clamp(52px, 11vw, 100px) !important; }
}
@media (max-width: 640px) {
  html[dir="rtl"] .hero-h1-ar {
    font-size: clamp(40px, 13vw, 68px) !important;
    white-space: normal !important;
    margin-bottom: 32px !important;
  }
  html[dir="rtl"] .hero-subrow-ar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 26px !important;
  }
  html[dir="rtl"] .hero-subrow-ar .hero-cta-work {
    width: 100% !important;
    justify-content: center !important;
  }
  html[dir="rtl"] .marquee-word { font-size: clamp(14px, 4.2vw, 18px) !important; }
}

/* ============================================================
   nm2 — redesigned mobile menu (Round 4)
   ============================================================ */
html[dir="rtl"] body #navMobile.nav-mobile.nm2,
html[dir="ltr"] body #navMobile.nav-mobile.nm2 {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(240,5,20,.16), transparent 55%),
    #0a0a0a !important;
  color: #fff !important;
}
html[dir="rtl"] body #navMobile.nav-mobile.nm2:not(.open) {
  pointer-events: none !important;
}
html[dir="rtl"] body #navMobile.nav-mobile.nm2.open {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

/* top row: brand right, close left */
html[dir="rtl"] body #navMobile.nm2 .nm2-top,
html[dir="ltr"] body #navMobile.nm2 .nm2-top {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 22px 8px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-brand,
html[dir="ltr"] body #navMobile.nm2 .nm2-brand {
  position: static !important;
  inset: auto !important;
  width: 128px !important;
  height: auto !important;
  opacity: 1 !important;
  color: #fff !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-brand svg,
html[dir="ltr"] body #navMobile.nm2 .nm2-brand svg { width: 100% !important; height: auto !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-brand .lw,
html[dir="ltr"] body #navMobile.nm2 .nm2-brand .lw { fill: #fff !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-brand .lr,
html[dir="ltr"] body #navMobile.nm2 .nm2-brand .lr { fill: var(--red) !important; }

/* close button */
html[dir="rtl"] body #navMobile.nm2 .nm2-close,
html[dir="ltr"] body #navMobile.nm2 .nm2-close {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.04) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: background .2s ease, transform .2s ease !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-close:hover { background: var(--red) !important; transform: rotate(90deg) !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-close span,
html[dir="ltr"] body #navMobile.nm2 .nm2-close span {
  position: absolute !important;
  width: 18px !important;
  height: 1.6px !important;
  background: #fff !important;
  border-radius: 2px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-close span:first-child { transform: rotate(45deg) !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-close span:last-child  { transform: rotate(-45deg) !important; }

/* nav rows */
html[dir="rtl"] body #navMobile.nm2 .nm2-nav,
html[dir="ltr"] body #navMobile.nm2 .nm2-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 12px 22px !important;
  gap: 2px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-link,
html[dir="ltr"] body #navMobile.nm2 .nm2-link {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 6px !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  color: #fff !important;
  text-decoration: none !important;
  text-align: right !important;
  transition: padding .25s ease, color .2s ease !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-link:hover,
html[dir="rtl"] body #navMobile.nm2 .nm2-link:active {
  color: var(--red) !important;
  padding-inline-start: 20px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-num,
html[dir="ltr"] body #navMobile.nm2 .nm2-num {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--red) !important;
  min-width: 26px !important;
  font-variant-numeric: tabular-nums !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-label,
html[dir="ltr"] body #navMobile.nm2 .nm2-label {
  flex: 1 1 auto !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: clamp(26px, 8vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-arrow,
html[dir="ltr"] body #navMobile.nm2 .nm2-arrow {
  font-size: 20px !important;
  color: rgba(255,255,255,.35) !important;
  transition: color .2s ease, transform .2s ease !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-link:hover .nm2-arrow { color: var(--red) !important; transform: translate(-3px,-3px) !important; }

/* footer */
html[dir="rtl"] body #navMobile.nm2 .nm2-foot,
html[dir="ltr"] body #navMobile.nm2 .nm2-foot {
  flex: 0 0 auto !important;
  padding: 8px 22px 26px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-cta,
html[dir="ltr"] body #navMobile.nm2 .nm2-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 18px !important;
  border-radius: 14px !important;
  background: var(--red) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  transition: filter .2s ease !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-cta:hover { filter: brightness(1.08) !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-cta-arrow { font-size: 18px !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-meta,
html[dir="ltr"] body #navMobile.nm2 .nm2-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 18px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-social,
html[dir="ltr"] body #navMobile.nm2 .nm2-social {
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
html[dir="rtl"] body #navMobile.nm2 .nm2-social:hover { color: #fff !important; }
html[dir="rtl"] body #navMobile.nm2 .nm2-copy,
html[dir="ltr"] body #navMobile.nm2 .nm2-copy {
  color: rgba(255,255,255,.4) !important;
  font-size: 13px !important;
}

/* ============================================================
   Services showcase (home)
   ============================================================ */
.svc-list {
  border-top: 1px solid rgba(7,7,10,.14);
}
.svc-row {
  position: relative;
  display: block;
  padding: clamp(26px,3.4vw,46px) clamp(18px,2.4vw,40px);
  border-bottom: 1px solid rgba(7,7,10,.14);
  text-decoration: none;
  overflow: hidden;
}
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #07070A;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.svc-row-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(16px,2vw,34px);
}
.svc-row-num {
  font-family: 'Thmanyah Serif Display', serif;
  font-size: clamp(13px,1.1vw,15px);
  font-weight: 700;
  color: #F00514;
  min-width: 30px;
  letter-spacing: .05em;
}
.svc-row-title {
  margin: 0;
  flex: 1;
  font-family: 'Thmanyah Serif Display', serif;
  font-weight: 900;
  font-size: clamp(24px,3.4vw,48px);
  line-height: 1.12;
  color: #07070A;
  transition: color .45s ease, transform .55s cubic-bezier(0.16,1,0.3,1);
}
.svc-row-arrow {
  font-size: clamp(18px,1.8vw,24px);
  color: rgba(7,7,10,.28);
  transition: color .45s ease, transform .45s ease;
}
.svc-row-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 62ch;
  padding-right: calc(30px + clamp(16px,2vw,34px));
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(14px,1.05vw,16px);
  line-height: 1.85;
  color: rgba(7,7,10,.55);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(0.16,1,0.3,1), opacity .4s ease, margin-top .55s ease, color .45s ease;
}
.svc-row:hover::before { transform: scaleX(1); }
.svc-row:hover .svc-row-title { color: #F7F5F1; transform: translateX(-10px); }
.svc-row:hover .svc-row-arrow { color: #F00514; transform: translateX(-10px); }
.svc-row:hover .svc-row-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: 18px;
  color: rgba(247,245,241,.72);
}
@media (hover: none) {
  .svc-row::before { display: none; }
  .svc-row-desc { max-height: none; opacity: 1; margin-top: 14px; }
}
.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 48px;
  background: #F00514;
  color: #F7F5F1;
  text-decoration: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 16px;
  font-weight: 700;
  transition: background .25s ease;
}
.svc-cta:hover { background: #c40410; }
.svc-cta span {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
}
.svc-cta:hover span { transform: translateX(-6px); }

/* ═══════════════════════════════════════════════════════
   HOME PROJECTS — premium cards + auto-generated covers
   ═══════════════════════════════════════════════════════ */
#homeProjects .hp-card {
  border-radius: 4px;
  background: #0c0c0e;
  text-decoration: none;
  isolation: isolate;
}
#homeProjects .hp-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .85s cubic-bezier(.16,1,.3,1);
}
#homeProjects .hp-card:hover .hp-media { transform: scale(1.06); }

#homeProjects .hp-fallback {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(155deg,#151517 0%,#0b0b0d 55%,#120406 100%);
}
#homeProjects .hp-fallback::before {
  content: ""; position: absolute; inset: 0; background: var(--hp-glow);
}
#homeProjects .hp-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(247,245,241,.028) 1px, transparent 1px);
  background-size: 100% 36px; opacity: .6;
}
#homeProjects .hp-ghost {
  position: absolute; top: -.14em; right: .01em;
  font-family: 'Thmanyah Serif Display', serif; font-weight: 900;
  font-size: clamp(180px,26vw,340px); line-height: 1; letter-spacing: -.03em;
  color: rgba(247,245,241,.055); pointer-events: none; user-select: none;
}
#homeProjects .hp-featured .hp-ghost { font-size: clamp(300px,30vw,520px); }

#homeProjects .hp-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(7,7,10,.9) 0%, rgba(7,7,10,.28) 52%, transparent 100%);
}
#homeProjects .hp-noimg .hp-veil {
  background: linear-gradient(to top, rgba(7,7,10,.72) 0%, rgba(7,7,10,.1) 55%, transparent 100%);
}
#homeProjects .hp-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(20px,2vw,30px);
}
#homeProjects .hp-cat {
  display: inline-block; margin-bottom: 10px;
  font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; color: #F00514;
}
#homeProjects .hp-title {
  margin: 0; font-family: 'Thmanyah Serif Display', serif; font-weight: 900;
  color: #F7F5F1; line-height: 1.22; font-size: clamp(19px,1.9vw,25px);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
#homeProjects .hp-featured .hp-title { font-size: clamp(30px,3.3vw,50px); }
#homeProjects .hp-card:hover .hp-title { transform: translateX(-6px); }

#homeProjects .hp-go {
  position: absolute; top: clamp(18px,1.8vw,26px); left: clamp(18px,1.8vw,26px);
  z-index: 3; font-size: 22px; line-height: 1; color: rgba(247,245,241,.5);
  transition: transform .45s cubic-bezier(.16,1,.3,1), color .3s ease;
}
#homeProjects .hp-card:hover .hp-go { color: #F00514; transform: translateX(-8px); }

/* ═══════════════════════════════════════════════════════
   PHILOSOPHY SECTION
   ═══════════════════════════════════════════════════════ */
.philo-ghost {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  bottom: -.16em; left: -.03em;
  font-family: 'Thmanyah Serif Display', serif; font-weight: 900;
  font-size: clamp(150px,18vw,300px); line-height: .8; letter-spacing: -.04em;
  color: rgba(247,245,241,.02);
}
@media (max-width: 900px) { .philo-ghost { display: none; } }
@media (max-width: 900px) {
  .philo-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .philo-grid > div:last-child {
    border-right: none !important; padding-right: 0 !important;
    border-top: 1px solid rgba(247,245,241,.12); padding-top: 40px;
  }
}

/* ══════════════════════════════════════════════
   CLIENTS — logo grid (dashboard-editable)
══════════════════════════════════════════════ */
.clients-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(30px,4vw,58px) clamp(42px,6vw,88px);
  max-width:1150px;margin:0 auto;
}
.client-item{
  display:flex;align-items:center;justify-content:center;
  height:clamp(30px,3.4vw,46px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .35s ease,filter .35s ease;
  opacity:.9;
}
.client-item:hover{transform:translateY(-5px) scale(1.05);opacity:1;}
.client-logo{
  height:100%;width:auto;max-width:clamp(90px,11vw,150px);object-fit:contain;display:block;
}
@media(max-width:600px){
  .clients-wall{gap:26px 34px;}
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — v3. Clean corporate. No red, real SVG social icons.
   ═══════════════════════════════════════════════════════════════ */
.footer.sf {
  background-image: none !important;
  background: #050508;
  border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  padding: clamp(56px, 6.5vw, 96px) var(--g) 26px;
}
.sf .sf-inner { max-width: 1320px; margin: 0 auto; }

/* Grid: brand + 2 link columns */
.sf .sf-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 60px);
}

/* Brand */
.sf .sf-logo { height: 38px; }
.sf .sf-logo svg { height: 100%; width: auto; }
.sf .sf-logo .cls-2 { fill: var(--paper); }
.sf .sf-logo .cls-1 { fill: var(--red); }
.sf .sf-tag {
  margin: 22px 0 26px; max-width: 360px;
  font-family: 'Tajawal', sans-serif; font-size: 15px; line-height: 1.9;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.sf .sf-contact { display: flex; flex-direction: column; gap: 4px; }
.sf .sf-contact-lnk { width: fit-content; }
.sf #ftEmail, .sf #ftPhone {
  color: color-mix(in srgb, var(--fg) 70%, transparent) !important;
  font-size: 15px !important;
}
.sf #ftEmail:hover, .sf #ftPhone:hover { color: var(--paper) !important; }
.sf .sf-hours {
  font-family: 'Tajawal', sans-serif; font-size: 13px; margin-top: 4px;
  color: color-mix(in srgb, var(--paper) 42%, transparent);
}

/* Columns */
.sf .sf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sf .sf-col-title {
  font-family: 'Tajawal', sans-serif; font-size: 12px; letter-spacing: .14em;
  font-weight: 700; margin-bottom: 22px;
  color: color-mix(in srgb, var(--paper) 42%, transparent);
}
.sf .sf-lnk {
  font-family: 'Tajawal', sans-serif; font-size: 15px; width: fit-content;
  color: color-mix(in srgb, var(--paper) 64%, transparent);
  transition: color .2s var(--ease);
}
.sf .sf-lnk:hover { color: var(--paper); }

/* Bottom band */
.sf .sf-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}

/* Social icons */
.sf .sf-socials { display: flex; align-items: center; gap: 10px; order: 1; }
.sf .sf-soc {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.sf .sf-soc svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.sf .sf-soc:hover {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 34%, transparent);
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  transform: translateY(-2px);
}
.sf .sf-soc.is-disabled { display: none !important; }

/* Legal */
.sf .sf-legal { order: 2; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.sf .sf-copy, .sf .sf-motto {
  font-family: 'Tajawal', sans-serif; font-size: 12.5px;
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}
.sf .sf-motto {
  padding-inline-start: 16px;
  border-inline-start: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  letter-spacing: .03em;
}

/* Back to top */
.sf .sf-top {
  order: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  transition: all .25s var(--ease);
}
.sf .sf-top:hover {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 34%, transparent);
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 880px) {
  .sf .sf-grid { grid-template-columns: 1fr 1fr; }
  .sf .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .sf .sf-bottom { flex-direction: column; gap: 22px; }
  .sf .sf-socials, .sf .sf-legal { order: 0; justify-content: center; }
  .sf .sf-legal { flex-direction: column; gap: 8px; }
  .sf .sf-motto { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 560px) {
  .footer.sf { padding-top: clamp(44px, 11vw, 60px); }
  /* keep the two link columns side-by-side so the footer stays compact, not a tall stack */
  .sf .sf-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; padding-bottom: 30px; }
  .sf .sf-brand { grid-column: 1 / -1; }
  .sf .sf-tag { margin: 15px 0 15px; max-width: 320px; font-size: 14px; }
  .sf .sf-col-title { margin-bottom: 13px; }
  .sf .sf-col ul { gap: 10px; }
  .sf .sf-lnk, .sf #ftEmail, .sf #ftPhone { font-size: 14px !important; }
}

/* ============================================================
   PROJECT PAGE v4 — matches homepage system (compact, sharp)
   ============================================================ */
.pj-wrap { padding: clamp(70px,9vw,130px) var(--g) 0; }
.pj-wrap.pj-next-sec,
.pj-wrap.pj-cta { padding-top: clamp(60px,8vw,110px); }
.pj-hero { padding: clamp(48px,6vw,84px) var(--g) 0; }
.pj-in { max-width: 1500px; margin: 0 auto; }
.pj-in + .pj-in { margin-top: clamp(40px,5vw,70px); }

/* breadcrumb */
.pj-crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Tajawal', sans-serif; font-size: 13px;
  margin-bottom: 0;
}
.pj-crumb-lnk { color: var(--fg); text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px; }
.pj-crumb-sep { color: color-mix(in srgb, var(--fg) 35%, transparent); font-family: 'Instrument Sans', sans-serif; }
.pj-crumb-cur { color: color-mix(in srgb, var(--fg) 50%, transparent); }

/* eyebrow (used by next/cta sections) */
.pj-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pj-eyebrow-line { width: 36px; height: 1.5px; background: var(--red); display: block; flex-shrink: 0; }
.pj-eyebrow-txt {
  font-family: 'Tajawal', sans-serif; font-size: 12px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}

/* ---- centered editorial hero (balanced, no side void) ---- */
.pj-hero-in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: min(74vh, 640px); justify-content: center;
  padding: clamp(20px,4vw,50px) 0 clamp(30px,4vw,50px);
}
.pj-kicker { display: inline-flex; align-items: center; gap: 14px; margin-bottom: clamp(22px,3vw,34px); }
.pj-kicker-line { width: clamp(24px,3.5vw,50px); height: 1.5px; background: var(--red); display: block; flex-shrink: 0; }
.pj-kicker-txt {
  font-family: 'Tajawal', sans-serif; font-size: clamp(12px,1vw,14px);
  letter-spacing: .1em; color: color-mix(in srgb, var(--fg) 62%, transparent);
}

.pj-title {
  margin: 0; font-family: 'Thmanyah Serif Display', serif; font-weight: 900;
  font-size: clamp(44px,7.4vw,108px); line-height: 1.02; color: var(--fg);
  max-width: 18ch; letter-spacing: -.01em;
}

.pj-lead {
  margin: clamp(26px,3.4vw,44px) auto 0; max-width: 56ch;
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(16px,1.35vw,21px); line-height: 1.8;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.pj-lead p { margin: 0 0 1em; }
.pj-lead p:last-child { margin-bottom: 0; }

/* credits — centered inline row, hairline top */
.pj-credits {
  margin: clamp(34px,4.5vw,56px) auto 0; padding-top: clamp(22px,2.6vw,30px);
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px clamp(36px,5vw,72px); width: 100%; max-width: 760px;
}
.pj-credit { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.pj-credit-l {
  font-family: 'Tajawal', sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--fg) 42%, transparent);
}
.pj-credit-v {
  margin: 0; font-family: 'Tajawal', sans-serif; font-size: clamp(15px,1.1vw,17px);
  font-weight: 600; color: var(--fg);
}

/* scope / services — rendered as tidy chips instead of a scattered slash line */
.pj-scopes {
  margin: clamp(20px,2.4vw,30px) auto 0; width: 100%; max-width: 760px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pj-scopes-l {
  font-family: 'Tajawal', sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--fg) 42%, transparent);
}
.pj-scopes-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.pj-scope-chip {
  font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 600;
  line-height: 1; color: color-mix(in srgb, var(--fg) 78%, transparent);
  padding: 9px 15px; border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  white-space: nowrap; transition: border-color .2s ease, color .2s ease;
}
.pj-scope-chip.is-primary {
  color: var(--fg); border-color: color-mix(in srgb, #F00514 55%, transparent);
}

/* scroll cue — invites the user into the details */
.pj-scroll {
  margin-top: clamp(38px,5vw,64px); display: inline-flex; flex-direction: column;
  align-items: center; gap: 12px; text-decoration: none;
  font-family: 'Tajawal', sans-serif; font-size: 13px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--fg) 60%, transparent); transition: color .2s ease;
}
.pj-scroll:hover { color: var(--fg); }
.pj-scroll-arrow {
  font-family: 'Instrument Sans', sans-serif; font-size: 20px; line-height: 1;
  animation: pjBob 1.8s var(--ease) infinite;
}
@keyframes pjBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* cover (only when a project has a real image) */
.pj-cover {
  margin-top: clamp(40px,5vw,70px);
  border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; background: var(--bg3);
}
.pj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- next project — clean editorial row, no boxes ---- */
.pj-next-sec { padding: clamp(50px,7vw,96px) var(--g) 0; }
.pj-next {
  display: block; text-decoration: none; padding: clamp(30px,4vw,52px) 0 clamp(34px,4.5vw,58px);
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
.pj-next-eyebrow {
  display: block; margin-bottom: clamp(14px,2vw,22px);
  font-family: 'Tajawal', sans-serif; font-size: 12px; letter-spacing: .12em;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.pj-next-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pj-next-titles { display: flex; flex-direction: column; gap: clamp(8px,1vw,12px); min-width: 0; }
.pj-next-title {
  font-family: 'Thmanyah Serif Display', serif; font-weight: 900;
  font-size: clamp(30px,4.6vw,64px); line-height: 1.02; color: var(--fg);
  transition: color .2s ease;
}
.pj-next-tag {
  font-family: 'Tajawal', sans-serif; font-size: clamp(12px,1vw,14px);
  letter-spacing: .08em; color: color-mix(in srgb, var(--fg) 52%, transparent);
}
.pj-next-go {
  font-family: 'Instrument Sans', sans-serif; font-size: clamp(28px,3vw,44px);
  color: color-mix(in srgb, var(--fg) 55%, transparent); flex-shrink: 0;
  transition: transform .3s var(--ease), color .2s ease;
}
.pj-next:hover .pj-next-go { transform: translateX(-12px); color: var(--fg); }

/* ---- CTA — centered, consistent with hero ---- */
.pj-cta { padding: clamp(70px,9vw,130px) var(--g) clamp(30px,4vw,50px); }
.pj-cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pj-cta-title {
  margin: 0 0 clamp(30px,4vw,48px); font-family: 'Thmanyah Serif Display', serif;
  font-weight: 900; font-size: clamp(34px,5.4vw,76px); line-height: 1.06; color: var(--fg);
  max-width: 18ch;
}
.pj-cta-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pj-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 700;
  padding: 16px 44px; background: var(--fg); color: var(--bg); text-decoration: none;
  transition: transform .25s var(--ease), opacity .2s ease;
}
.pj-cta-btn:hover { transform: translateY(-2px); opacity: .9; }
.pj-cta-alt {
  font-family: 'Tajawal', sans-serif; font-size: 15px; color: var(--fg);
  text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 3px;
}

@media (max-width: 640px) {
  .pj-hero { padding-top: clamp(30px,7vw,48px); }
  .pj-hero-in { min-height: 0; padding-top: clamp(8px,3vw,20px); }
  .pj-title { font-size: clamp(34px,10vw,52px); line-height: 1.06; max-width: 100%; }
  .pj-lead { margin-top: 22px; font-size: 16px; line-height: 1.75; }
  .pj-kicker { margin-bottom: 18px; }
  .pj-credits { margin-top: 30px; padding-top: 22px; gap: 20px 28px; }
  .pj-credit { align-items: center; }
  .pj-scroll { margin-top: 34px; }

  .pj-next-sec { padding-top: clamp(44px,10vw,64px); }
  .pj-next { padding: 26px 0 30px; }
  .pj-next-row { gap: 16px; }
  .pj-next-title { font-size: clamp(26px,8vw,40px); }
  .pj-next-tag { font-size: 12px; }
  .pj-next-go { font-size: 26px; }

  .pj-cta { padding-top: clamp(56px,14vw,84px); }
  .pj-cta-title { font-size: clamp(28px,8.5vw,44px); max-width: 100%; }
  .pj-cta-btn { padding: 15px 40px; }
}

@media (max-width: 400px) {
  .pj-title { font-size: 30px; }
  .pj-next-title { font-size: 24px; }
  .pj-cta-title { font-size: 26px; }
  .pj-credits { gap: 16px 20px; }
}


/* ============================================================
   Services page — detailed service sections (svd)
   ============================================================ */
body.services-page #svcList { padding: 0; }

/* intro band */
.svl-intro { max-width: 760px; margin: 0 0 clamp(20px,3vw,44px); }
.svl-intro-p {
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(18px,1.9vw,26px);
  line-height: 1.75;
  color: color-mix(in srgb, var(--fg) 66%, transparent);
  margin: 0;
}
html[dir="ltr"] .svl-intro-p { font-family: var(--ff-en); }

/* detailed blocks */
.svc-detail { border-top: 1px solid var(--border); }
.svd-block {
  display: grid;
  grid-template-columns: 0.82fr 1.5fr;
  gap: clamp(28px,5vw,84px);
  padding: clamp(46px,6vw,92px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  scroll-margin-top: 110px;
}
.svd-aside { position: sticky; top: 118px; }
.svd-index {
  font-family: 'Thmanyah Serif Display', serif;
  font-weight: 900;
  font-size: clamp(58px,8vw,132px);
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in srgb, var(--fg) 24%, transparent);
  margin-bottom: clamp(14px,1.6vw,22px);
}
.svd-en {
  font-family: var(--ff-en);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #F00514;
  display: block; margin-bottom: 10px;
}
.svd-title {
  font-family: 'Thmanyah Serif Display', serif;
  font-weight: 900;
  font-size: clamp(28px,3.4vw,50px);
  line-height: 1.12;
  color: var(--fg);
  margin: 0 0 12px;
}
.svd-tagline {
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(14px,1.2vw,18px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  margin: 0;
}
html[dir="ltr"] .svd-tagline, html[dir="ltr"] .svd-desc,
html[dir="ltr"] .svd-inc-item, html[dir="ltr"] .svd-inc-label { font-family: var(--ff-en); }

.svd-desc {
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(15.5px,1.15vw,18px);
  line-height: 2;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  margin: 0 0 clamp(26px,3vw,40px);
  max-width: 62ch;
}
.svd-inc-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-en);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 44%, transparent);
  margin-bottom: clamp(16px,1.8vw,22px);
}
html[dir="rtl"] .svd-inc-label { font-family: 'Tajawal', sans-serif; letter-spacing: .04em; font-weight: 700; font-size: 13px; color: color-mix(in srgb, var(--fg) 52%, transparent); }
.svd-inc-label::before { content: ""; width: 22px; height: 2px; background: #F00514; flex: none; }
.svd-inc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px,1.4vw,18px) clamp(24px,3vw,44px);
  margin: 0 0 clamp(28px,3vw,38px);
  list-style: none; padding: 0;
}
.svd-inc-item {
  position: relative;
  font-family: 'Tajawal', sans-serif;
  font-size: clamp(14px,1vw,16px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--fg) 82%, transparent);
  padding-inline-start: 20px;
}
.svd-inc-item::before {
  content: "—";
  position: absolute; inset-inline-start: 0; top: 0;
  color: #F00514; font-weight: 700;
}
.svd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px,3vw,36px); }
.svd-tag {
  font-family: 'Tajawal', sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  white-space: nowrap;
}
.svd-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Tajawal', sans-serif; font-weight: 700;
  font-size: clamp(14px,1.05vw,16px);
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  transition: color .3s ease, gap .3s ease, border-color .3s ease;
}
html[dir="ltr"] .svd-cta { font-family: var(--ff-en); }
.svd-cta .svd-cta-arrow { color: #F00514; transition: transform .35s cubic-bezier(0.16,1,0.3,1); }
.svd-cta:hover { color: #F00514; gap: 18px; border-color: #F00514; }
.svd-cta:hover .svd-cta-arrow { transform: translateX(-6px); }
.svd-toggle { display: none; }

@media (max-width: 900px) {
  .svd-block { grid-template-columns: 1fr; gap: clamp(22px,4vw,34px); }
  .svd-aside { position: static; }
  .svd-index { font-size: clamp(52px,16vw,90px); }
}
@media (max-width: 560px) {
  .svd-inc { grid-template-columns: 1fr; }
}

/* Services page — nautical voyage chart (svp) */
.svp-chart{position:relative;max-width:880px;margin:clamp(44px,5vw,80px) auto 0;padding-block:clamp(8px,1.5vw,18px);}
.svp-route{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:repeating-linear-gradient(to bottom,rgba(247,245,241,.16) 0 6px,transparent 6px 13px);}
.svp-route-fill{position:absolute;top:0;left:0;width:100%;height:0;background:repeating-linear-gradient(to bottom,#F00514 0 6px,transparent 6px 13px);transition:height .35s linear;filter:drop-shadow(0 0 5px rgba(240,5,20,.5));}
.svp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(20px,3vw,38px);position:relative;z-index:1;}
.svp-step{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(14px,2vw,28px);}
/* number sits on the meridian — no box, just a backdrop breaking the route */
.svp-marker{grid-column:2;grid-row:1;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:#0a0a0c;padding:clamp(8px,1vw,12px) clamp(6px,.7vw,9px);}
.svp-num{font-family:'Thmanyah Serif Display',serif;font-weight:900;font-size:clamp(16px,1.5vw,21px);color:rgba(247,245,241,.42);line-height:1;transition:color .45s ease;}
/* card — borderless, aligned inline */
.svp-card{grid-column:3;grid-row:1;display:flex;align-items:center;opacity:0;transform:translateX(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.svp-step:nth-child(even) .svp-card{grid-column:1;grid-row:1;transform:translateX(-22px);justify-content:flex-end;text-align:end;}
.svp-step.visible .svp-card{opacity:1;transform:translateX(0);}
.svp-ico{display:none;}
.svp-txt{min-width:0;}
.svp-title{margin:0 0 4px;font-family:'Thmanyah Serif Display',serif;font-weight:900;font-size:clamp(17px,1.7vw,23px);color:#F7F5F1;line-height:1.2;}
.svp-desc{margin:0;font-family:'Tajawal',sans-serif;font-size:clamp(12.5px,.95vw,15px);line-height:1.75;color:rgba(247,245,241,.5);}
:root[lang="en"] .svp-title,html[lang="en"] .svp-title{font-family:var(--ff-en,'Thmanyah Serif Display',serif);}
:root[lang="en"] .svp-desc,html[lang="en"] .svp-desc{font-family:var(--ff-en,sans-serif);}
/* reached state — number lights up in sequence, no boxes */
.svp-step.svp-reached .svp-num{color:#F00514;}
.svp-step.svp-reached .svp-ico{color:#F7F5F1;transform:scale(1.05);}
.svp-step.svp-reached .svp-title{color:#fff;}
/* mobile — single rail on the inline-start edge (RTL-aware) */
@media (max-width:720px){
  .svp-chart{margin-top:clamp(30px,7vw,52px);max-width:100%;}
  .svp-route{left:auto;right:auto;inset-inline-start:21px;transform:none;}
  .svp-route-fill{left:0;}
  .svp-steps{gap:22px;}
  .svp-step{grid-template-columns:44px 1fr;column-gap:16px;align-items:center;}
  .svp-marker{grid-column:1;grid-row:1;justify-self:center;padding:6px 7px;}
  .svp-card,.svp-step:nth-child(even) .svp-card{grid-column:2;grid-row:1;flex-direction:row;justify-content:flex-start;text-align:start;transform:translateY(16px);}
  .svp-step.visible .svp-card{transform:translateY(0);}
  .svp-title{font-size:18px;}
  .svp-desc{font-size:14px;line-height:1.7;}
}
@media (max-width:400px){
  .svp-step{grid-template-columns:38px 1fr;column-gap:13px;}
  .svp-route{inset-inline-start:18px;}
  .svp-title{font-size:16.5px;}
}

/* ── Services page — unified type scale (top→bottom consistency) ── */
/* Display tier */
.services-page .sv-title{font-size:clamp(40px,6.4vw,92px);line-height:1.14;font-weight:900;}
/* Section headings (process + CTA) — unify weight & size below hero */
.services-page .h2{font-size:clamp(30px,4.4vw,60px);line-height:1.16;font-weight:900;}
/* Service names */
.services-page .svd-title{font-size:clamp(26px,3.1vw,44px);line-height:1.18;font-weight:900;}
/* Step names */
.services-page .svp-title{font-size:clamp(18px,1.6vw,23px);line-height:1.2;font-weight:900;}
/* Lead body text (hero sub, service description, tagline) */
.services-page .sv-sub,
.services-page .svd-desc,
.services-page .svd-tagline{font-size:clamp(15px,1.15vw,17.5px);line-height:1.85;}
/* Base body text (included items, step description) */
.services-page .svd-inc-item,
.services-page .svp-desc{font-size:clamp(13.5px,.98vw,15px);line-height:1.8;}
/* Labels / eyebrows — one size everywhere */
.services-page .sv-kicker span:last-child,
.services-page .svd-en,
.services-page .section-dark .label,
.services-page .label,
.services-page .svd-inc-label{font-size:12px;letter-spacing:.06em;}
/* Numbers */
.services-page .svp-num{font-size:clamp(17px,1.5vw,21px);font-weight:900;}
@media (max-width:560px){
  .services-page .svd-title{font-size:clamp(24px,7vw,32px);}
  .services-page .svp-title{font-size:17px;}
}

/* Services page — final contact CTA band */
.svc-cta-band{position:relative;overflow:hidden;padding:clamp(72px,11vw,140px) var(--g);text-align:center;background:#0a0a0c;display:block;width:100%;}
.svc-cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(240,5,20,.10) 0%,transparent 60%);pointer-events:none;}
.svc-cta-in{position:relative;z-index:1;max-width:760px;margin:0 auto;}
.svc-cta-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:clamp(22px,3vw,34px);}
.svc-cta-kicker span{display:inline-block;width:clamp(30px,5vw,54px);height:1.5px;background:#F00514;}
.svc-cta-kicker em{font-style:normal;font-family:'Tajawal',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.55);}
:root[lang="ar"] .svc-cta-kicker em{letter-spacing:.04em;}
.svc-cta-title{margin:0;color:#F7F5F1;}
.svc-cta-sub{margin:clamp(18px,2.2vw,26px) auto 0;max-width:48ch;font-family:'Tajawal',sans-serif;font-size:clamp(15px,1.15vw,17.5px);line-height:1.85;color:rgba(247,245,241,.55);}
.svc-cta-btn{margin-top:clamp(30px,4vw,46px);font-size:15px;padding:18px 46px;}

/* ── Services page — mobile polish (professional pass) ── */
@media (max-width:768px){
  .services-page .sv-hero{min-height:auto;padding:calc(64px + 56px) var(--g) clamp(34px,8vw,52px);}
  .services-page .sv-kicker{margin-bottom:18px;}
  .services-page .sv-sub{max-width:100%;}

  /* tighten the vertical rhythm of the page sections on phones (override !important base) */
  .services-page .section{padding:clamp(26px,7vw,44px) 0 !important;}

  /* ── service list: clean tap-to-expand accordion (no boxes) ── */
  .services-page .svc-detail{border-top:0;}
  .services-page .svd-block{
    display:block;padding:clamp(22px,6vw,28px) 0;gap:0;
    border-bottom:1px solid var(--border);align-items:stretch;
  }
  .services-page .svc-detail .svd-block:first-child{border-top:1px solid var(--border);}
  .services-page .svd-index{display:none;}            /* no numbers on mobile */

  /* header: label + title + tagline (all right-aligned in RTL) */
  .services-page .svd-aside{
    position:relative;inset:auto;top:auto;display:block;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .services-page .svd-en{margin-bottom:7px;}
  .services-page .svd-title{margin-bottom:7px;line-height:1.22;}
  .services-page .svd-tagline{margin:0;}

  /* red "معرفة المزيد" toggle sits BELOW the tagline, on the reading-start side (right in RTL); arrow leads */
  .services-page .svd-toggle{
    display:inline-flex;align-items:center;gap:8px;margin-top:14px;
    padding:0;background:none;border:0;cursor:pointer;
    color:#F00514;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;
  }
  html[dir="ltr"] .services-page .svd-toggle{font-family:var(--ff-en);}
  .services-page .svd-toggle-ico{width:18px;height:18px;transition:transform .4s cubic-bezier(.16,1,.3,1);}
  .services-page .svd-block.svd-open .svd-toggle-ico{transform:rotate(180deg);}

  /* collapsed details */
  .services-page .svd-main{
    overflow:hidden;max-height:0;opacity:0;margin-top:0;
    transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .35s ease,margin-top .45s ease;
  }
  .services-page .svd-block.svd-open .svd-main{max-height:1600px;opacity:1;margin-top:clamp(20px,6vw,26px);}
  .services-page .svd-desc{margin-bottom:clamp(20px,6vw,26px);}
}
@media (max-width:600px){
  .services-page .svd-tags{gap:7px;}
  .services-page .svd-tag{padding:7px 12px;font-size:11.5px;}
  .services-page .svc-cta-sub{max-width:100%;}
}
@media (max-width:440px){
  .services-page .svc-cta-btn{display:flex;justify-content:center;width:100%;padding:17px 24px;}
  .services-page .svc-cta-kicker span{width:24px;}
}