/* ============================================================
   Marketer · shared site styles
   Loaded by every page (landing + 6 subpages + brand). Tokens, typography,
   buttons, theme/lang toggles, hero, sections, work cards, pricing tiers,
   manifesto, FAQ, footer, MVPs, CTA-final, page-hero, geo-context.
   ============================================================ */

/* ============================================================
   1. TOKENS — palette, type, layout, motion
   ============================================================ */
:root {
  /* Two greens: --live for filled chips + dark-surface displays (CTAs, hero period).
     --live-deep for green text on cream (5.0:1 vs --bone-deep) — labels, accents, links. */
  --ink: #111111;
  --ink-soft: #1C1C1C;
  --bone: #F4F1EA;
  --bone-deep: #ECE8DD;
  --live: #00C566;
  --live-soft: #00A050;
  --live-tint: #E5F7ED;
  --live-deep: #00703A;
  --track: #D8D3C7;
  --whisper: #5A564E;
  --hairline: #ECEAE5;
  --tint: rgba(0, 197, 102, 0.06);
  --bone-fade-72: rgba(244, 241, 234, 0.72);
  --bone-fade-55: rgba(244, 241, 234, 0.55);

  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --max-w: 1180px;
  --pad-x: 32px;
  --section-py: 120px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-natural: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"] {
  --ink: #E8E4DB;
  --ink-soft: #D4CFC2;
  --bone: #14140F;
  --bone-deep: #1E1D17;
  --live: #2BD17C;
  --live-soft: #1FA862;
  --live-tint: #0F2A1C;
  --live-deep: #2BD17C;
  --track: #2A2924;
  --whisper: #9A968B;
  --hairline: #1F1E1B;
  --tint: rgba(43, 209, 124, 0.08);
  --bone-fade-72: rgba(232, 228, 219, 0.72);
  --bone-fade-55: rgba(232, 228, 219, 0.55);
}

[data-lang="ar"] { direction: rtl; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-en);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}

[data-lang="ar"] body { font-family: var(--font-ar); }

::selection { background: var(--live); color: var(--ink); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ============================================================
   2. UTIL — language visibility + a11y helpers
   ============================================================ */
.en, .ar { display: contents; }
[data-lang="en"] .ar { display: none !important; }
[data-lang="ar"] .en { display: none !important; }
[data-lang="ar"] .ar { display: contents; }
[data-lang="en"] [data-ar-block] { display: none; }
[data-lang="ar"] [data-en-block] { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.05; font-weight: 700; }
[data-lang="ar"] h1, [data-lang="ar"] h2, [data-lang="ar"] h3, [data-lang="ar"] h4 {
  letter-spacing: 0; line-height: 1.25;
}

h1 { font-size: clamp(40px, 7vw, 88px); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; text-wrap: balance; }
h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.25; }
h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--whisper); }

p { font-size: 17px; line-height: 1.65; max-width: 60ch; }
[data-lang="ar"] p { line-height: 1.85; font-size: 17px; }

p.lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; max-width: 640px; }
[data-lang="ar"] p.lead { line-height: 1.75; }

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--live-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--live-deep);
}

.mono { font-family: var(--font-mono); font-size: 0.92em; }
.accent { color: var(--live); }
.wedge .accent,
.cta-close .accent,
.stack-section .accent,
.mvps-section .accent,
.cta-final .accent,
.page-hero .accent,
#manifesto .accent { color: var(--live-deep); }

/* ============================================================
   4. NAV — sticky top, backdrop blur, active-page highlight
   ============================================================ */
nav.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background 400ms var(--ease), border-color 400ms var(--ease);
}
nav.top .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.nav-logo svg { height: 22px; width: auto; }
.nav-logo:focus-visible { outline: 2px solid var(--live); outline-offset: 4px; border-radius: 2px; }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: opacity 200ms var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1.5px;
  background: var(--live);
  transition: right 300ms var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { right: 0; }
.nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a:focus-visible { outline: 2px solid var(--live); outline-offset: 4px; border-radius: 2px; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  touch-action: manipulation;
}
.lang-toggle:hover { border-color: var(--ink); }
.lang-toggle:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

/* Theme toggle — bordered pill with sun + moon icons inside the track and a sliding green thumb. */
.theme-toggle {
  width: 56px;
  height: 30px;
  padding: 7px 0;
  box-sizing: content-box;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: border-color 200ms var(--ease);
}
.theme-toggle:hover { border-color: var(--live-deep); }
[data-theme="dark"] .theme-toggle:hover { border-color: var(--live); }
.theme-toggle:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

.toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
}
.toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 2;
  color: var(--ink);
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
.toggle-icon-sun { opacity: 1; }
.toggle-icon-moon { opacity: 0.35; }
[data-theme="dark"] .toggle-icon-sun { opacity: 0.35; }
[data-theme="dark"] .toggle-icon-moon { opacity: 1; }

.toggle-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--live);
  transition: left 320ms var(--ease-snap), background 200ms var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
[data-theme="dark"] .toggle-thumb { left: calc(100% - 25px); }

@media (max-width: 640px) {
  .theme-toggle { width: 52px; height: 28px; }
  .toggle-thumb { width: 20px; height: 20px; }
  [data-theme="dark"] .toggle-thumb { left: calc(100% - 23px); }
}

/* Unified button system — primary filled green, ghost bordered, link plain + arrow. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
[data-lang="ar"] .btn { font-family: var(--font-ar); font-weight: 500; }
.btn:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--live);
  color: var(--ink);
  border-color: var(--live);
}
.btn-primary:hover {
  background: var(--live-soft);
  border-color: var(--live-soft);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bone);
}

.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 14px;
}
.btn-link:hover { color: var(--live-deep); }
.btn-link:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }

.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn-arrow, .btn-link-arrow { transition: transform 200ms var(--ease); display: inline-block; }
@media (hover: hover) {
  .btn:hover .btn-arrow { transform: translateX(3px); }
  [data-lang="ar"] .btn:hover .btn-arrow { transform: translateX(-3px); }
  .btn-link:hover .btn-link-arrow,
  .btn-link:hover .btn-arrow { transform: translateX(3px); }
  [data-lang="ar"] .btn-link:hover .btn-link-arrow,
  [data-lang="ar"] .btn-link:hover .btn-arrow { transform: translateX(-3px); }
}

/* On the hero-content panel (the only ink-dark band in light mode), ghost btn flips
   to bone-on-transparent. Dark mode inverts back via the token swap. */
[data-theme="light"] .hero-content .btn-ghost,
html:not([data-theme="dark"]) .hero-content .btn-ghost {
  color: var(--bone);
  border-color: var(--bone);
  background: transparent;
}
[data-theme="light"] .hero-content .btn-ghost:hover,
html:not([data-theme="dark"]) .hero-content .btn-ghost:hover {
  background: var(--bone);
  color: var(--ink);
}

/* Skip-to-content — fully hidden until keyboard focus. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--live);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================
   5. HERO (landing only — has video stage + content panel)
   ============================================================ */
.hero {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero-stage {
  position: relative;
  width: 100%;
  height: min(56vh, 640px);
  background: var(--ink);
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(17, 17, 17, 0.4) 75%,
    var(--ink) 100%
  );
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .hero-stage::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(20, 20, 15, 0.5) 75%,
    var(--bone) 100%
  );
}
.hero-content {
  background: var(--ink);
  color: var(--bone);
  padding: 80px 0 var(--section-py);
}
[data-theme="dark"] .hero-content { background: var(--bone); color: var(--ink); }
.hero-sound-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.hero-sound-toggle:hover { background: rgba(10, 10, 10, 0.8); }
.hero-sound-toggle:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.hero-sound-toggle[aria-pressed="true"] {
  background: var(--live);
  color: var(--ink);
  border-color: var(--live);
}
[data-lang="ar"] .hero-sound-toggle { right: auto; left: 24px; }
@media (prefers-reduced-motion: reduce) {
  .hero-stage { display: none; }
}
@media (max-width: 980px) {
  .hero-stage { height: 50vh; }
}
@media (max-width: 640px) {
  .hero-stage { height: 40vh; }
  .hero-content { padding: 48px 0 var(--section-py); }
  .hero-sound-toggle { top: 16px; right: 16px; width: 44px; height: 44px; }
  [data-lang="ar"] .hero-sound-toggle { right: auto; left: 16px; }
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--whisper);
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 99px;
  background: var(--bone);
  margin-bottom: 40px;
  transition: all 240ms var(--ease);
}
.live-pill:hover { border-color: var(--live); color: var(--ink); }
.live-dot {
  width: 7px;
  height: 7px;
  background: var(--live);
  border-radius: 50%;
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: var(--live);
  border-radius: 50%;
  opacity: 0.4;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

.hero h1 {
  margin-bottom: 32px;
  max-width: 18ch;
  letter-spacing: -0.035em;
}
[data-lang="ar"] .hero h1 { letter-spacing: 0; max-width: 16ch; }
.hero h1 .accent { color: var(--live); }

.hero-sub {
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--whisper);
  max-width: 600px;
  margin-bottom: 48px;
  line-height: 1.5;
}
[data-lang="ar"] .hero-sub { line-height: 1.7; }

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.meta-stat { display: flex; flex-direction: column; gap: 4px; }
.meta-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.meta-num .accent { color: var(--live); }
.meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--whisper);
}

.hero-content .live-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(244, 241, 234, 0.85);
}
.hero-content .live-pill:hover {
  border-color: var(--live);
  color: rgba(244, 241, 234, 1);
}
.hero-content .hero-sub { color: var(--bone-fade-72); }
.hero-content .meta-num { color: var(--bone); }
.hero-content .meta-label { color: var(--bone-fade-55); }
[data-theme="dark"] .hero-content .live-pill {
  background: rgba(20, 20, 15, 0.4);
  border-color: var(--track);
  color: var(--whisper);
}
[data-theme="dark"] .hero-content .hero-sub { color: var(--whisper); }
[data-theme="dark"] .hero-content .meta-num { color: var(--ink); }
[data-theme="dark"] .hero-content .meta-label { color: var(--whisper); }

/* ============================================================
   5b. PAGE-HERO — smaller hero used by subpages (no video)
   ============================================================ */
.page-hero {
  padding: 96px 0 80px;
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.page-hero .container { max-width: 980px; }
.page-hero .section-label { margin-bottom: 24px; }
.page-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  max-width: 16ch;
}
[data-lang="ar"] .page-hero h1 { letter-spacing: 0; line-height: 1.2; }
.page-hero p.lead {
  color: var(--whisper);
  max-width: 640px;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .page-hero { padding: 64px 0 56px; }
}

/* ============================================================
   5c. WORK COMING-SOON — single full-bleed hero on /work
   ============================================================ */
.work-coming-soon {
  min-height: calc(100vh - 88px);
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  padding: 96px 0 80px;
  position: relative;
}
.work-coming-soon .container {
  max-width: 980px;
  text-align: center;
}
.work-coming-soon .section-label {
  margin-bottom: 32px;
  display: inline-flex;
  justify-content: center;
}
.cs-headline {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 auto 32px;
  max-width: 14ch;
  color: var(--ink);
}
[data-lang="ar"] .cs-headline {
  letter-spacing: 0;
  line-height: 1.18;
  max-width: 18ch;
  font-family: var(--font-ar, "IBM Plex Sans Arabic"), sans-serif;
}
.cs-headline .accent { color: var(--live-deep); }
[data-theme="dark"] .cs-headline .accent { color: var(--live); }
.cs-headline-inner {
  display: inline-block;
  will-change: transform;
  animation: cs-breathe 5.6s ease-in-out infinite;
  animation-play-state: paused;
}
.cs-headline.in-view .cs-headline-inner { animation-play-state: running; }
@keyframes cs-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.008); }
}
.cs-lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--whisper);
  max-width: 560px;
  margin: 0 auto 40px;
}
[data-lang="ar"] .cs-lead { line-height: 1.85; }
.cs-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.cs-secondary {
  font-size: 15px;
  color: var(--whisper);
  margin: 0;
}
.cs-secondary a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--track);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.cs-secondary a:hover { color: var(--live-deep); border-bottom-color: var(--live-deep); }
[data-theme="dark"] .cs-secondary a:hover { color: var(--live); border-bottom-color: var(--live); }
.cs-secondary .btn-arrow { font-size: 0.9em; margin-inline-start: 2px; }

@media (max-width: 640px) {
  .work-coming-soon { padding: 56px 0 48px; min-height: calc(100vh - 72px); }
  .cs-headline { font-size: clamp(40px, 12vw, 64px); margin-bottom: 24px; }
  .cs-lead { margin-bottom: 32px; font-size: 17px; }
  .cs-cta { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-headline-inner { animation: none !important; }
}

/* ============================================================
   6. SECTIONS — shared
   ============================================================ */
section.std {
  padding: var(--section-py) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.section-head { margin-bottom: 64px; max-width: 800px; }
.section-head .section-label { margin-bottom: 24px; }
.section-head h2 { margin-bottom: 20px; }
.stack-section > .container > .section-label,
.wedge > .container > .section-label,
.mvps-section > .container > .section-label,
.cta-final > .container > .section-label { margin-bottom: 24px; }

#services, #process, #manifesto, #faq { background: var(--bone-deep); }
.stack-section, .wedge, .cta-close { background: var(--bone-deep); color: var(--ink); }
footer { background: var(--bone-deep); }

/* ============================================================
   7. MVPs — three-card section on landing
   ============================================================ */
.mvps-section {
  background: var(--bone-deep);
  padding: var(--section-py) 0;
  position: relative;
}
.mvps-headline {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 32px;
  margin-bottom: 80px;
  max-width: 1100px;
  color: var(--ink);
}
[data-lang="ar"] .mvps-headline {
  font-family: var(--font-ar);
  letter-spacing: 0;
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
}
.mvps-headline .accent { color: var(--live-deep); }

.mvps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mvp-card {
  background: var(--bone);
  border: 1.5px solid var(--track);
  border-radius: 16px;
  padding: 40px 32px;
  transition: transform 0.4s var(--ease-natural),
              box-shadow 0.4s var(--ease-natural),
              border-color 0.2s var(--ease);
  display: flex;
  flex-direction: column;
}
.mvp-card:hover {
  transform: translateY(-6px);
  border-color: var(--live);
  box-shadow: 0 24px 48px rgba(0, 197, 102, 0.12);
}
.mvp-card-featured {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.mvp-card-featured:hover { border-color: var(--live); }
.mvp-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--live-deep);
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.mvp-card-featured .mvp-num { color: var(--live); }
.mvp-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--ink);
}
.mvp-card-featured .mvp-title { color: var(--bone); }
.mvp-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--whisper);
  margin-bottom: 28px;
  flex-grow: 1;
}
.mvp-card-featured .mvp-desc { color: var(--bone-fade-72); }
.mvp-card-featured .btn-link { color: var(--live); }
.mvp-card-featured .btn-link:hover { color: var(--bone); }

@media (max-width: 1024px) {
  .mvps-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .mvps-section { padding: 80px 0; }
  .mvps-headline { margin-bottom: 56px; }
  .mvp-card { padding: 32px 24px; }
}

/* ============================================================
   7b. MVP scroll-linked staged reveal
   The ONE motion focal point on the landing page. Card 01 slides from left,
   card 02 (featured) scales up from below with 0.15s delay, card 03 slides
   from right with 0.3s delay. Section label + headline reveal first as preamble.
   Pure CSS + IntersectionObserver (in site.js); no GSAP, no scroll hijack.
   RTL-aware (slide directions flip). Mobile fallback: simpler vertical stagger.
   ============================================================ */

/* Section preamble — label + headline reveal before cards */
.mvps-section .section-label,
.mvps-section .mvps-headline {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-natural),
              transform 0.8s var(--ease-natural);
}
.mvps-section .mvps-headline { transition-delay: 0.1s; }
.mvps-section .section-label.is-revealed,
.mvps-section .mvps-headline.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Cards — initial offsets per data-mvp-pos */
.mvp-card-anim {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.9s var(--ease-natural),
              transform 1s var(--ease-natural);
}
.mvp-card-anim[data-mvp-pos="left"]   { transform: translateX(-80px) translateY(20px); }
.mvp-card-anim[data-mvp-pos="center"] { transform: translateY(60px) scale(0.92); transition-delay: 0.15s; }
.mvp-card-anim[data-mvp-pos="right"]  { transform: translateX(80px) translateY(20px); transition-delay: 0.3s; }

/* Settled state — cards arrive at final position */
.mvp-card-anim.is-revealed {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  will-change: auto;  /* free up compositor once settled; :hover transform takes over */
}

/* RTL — flip horizontal slide direction so cards still enter from screen edges
   that match the reading direction */
[dir="rtl"] .mvp-card-anim[data-mvp-pos="left"]  { transform: translateX(80px) translateY(20px); }
[dir="rtl"] .mvp-card-anim[data-mvp-pos="right"] { transform: translateX(-80px) translateY(20px); }
[dir="rtl"] .mvp-card-anim.is-revealed { transform: translateX(0) translateY(0) scale(1); }

/* Mobile/tablet — cards stack, horizontal slide stops making sense.
   Replace with gentler vertical stagger. */
@media (max-width: 1024px) {
  .mvp-card-anim[data-mvp-pos="left"],
  .mvp-card-anim[data-mvp-pos="right"] { transform: translateY(40px); }
  .mvp-card-anim[data-mvp-pos="center"] { transform: translateY(40px) scale(1); }
  .mvp-card-anim[data-mvp-pos="left"]   { transition-delay: 0s; }
  .mvp-card-anim[data-mvp-pos="center"] { transition-delay: 0.1s; }
  .mvp-card-anim[data-mvp-pos="right"]  { transition-delay: 0.2s; }
}

/* Reduced motion — strip all animation, cards visible immediately */
@media (prefers-reduced-motion: reduce) {
  .mvps-section .section-label,
  .mvps-section .mvps-headline,
  .mvp-card-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   7e. TRUST SIGNALS — count-up + staggered reveal
   Sits inside hero-content (replaces the old .hero-meta block).
   On viewport-enter, each .trust-stat fades up with stagger; numbers
   count from 0 to data-count-target with a power2.out curve. KSA is
   text-only. Reduced-motion shows final values immediately.

   STRUCTURAL FIX (2026-05-02): each .trust-stat is an explicit flex column
   with consistent gap so the strip remains a visual unit on mobile rather
   than collapsing to flowing single-column text. Mobile keeps a 2×2 grid
   instead of stacking to 1 column.
   ============================================================ */
.trust-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 56px 0;
  margin-top: 64px;
  border-top: 1px solid var(--track);
  border-bottom: 1px solid var(--track);
}

.trust-stat {
  /* Default = visible. JS animation path sets opacity:0 + translateY only
     when GSAP is ready and about to animate. If GSAP fails to load (CDN
     blocked, etc.), users see stats normally — no invisible-trapped state. */
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
[data-lang="ar"] .trust-stat,
[dir="rtl"] .trust-stat { text-align: right; }

.trust-num {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.trust-num [data-count-target],
.trust-num .trust-text { display: inline-block; }

/* Accent green on 2× and KSA */
.trust-stat:nth-child(2) .trust-num,
.trust-stat:last-child .trust-num { color: var(--live); }

.trust-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--whisper);
  text-transform: uppercase;
  line-height: 1.4;
}
[data-lang="ar"] .trust-label { font-family: var(--font-ar); letter-spacing: 0; font-size: 13px; text-transform: none; line-height: 1.5; }

/* Inside .hero-content (ink-dark band in light mode), text + accent flip to bone */
.hero-content .trust-signals {
  border-top-color: rgba(244, 241, 234, 0.18);
  border-bottom-color: rgba(244, 241, 234, 0.18);
}
.hero-content .trust-num { color: var(--bone); }
.hero-content .trust-stat:nth-child(2) .trust-num,
.hero-content .trust-stat:last-child .trust-num { color: var(--live); }
.hero-content .trust-label { color: rgba(244, 241, 234, 0.6); }
[data-theme="dark"] .hero-content .trust-num { color: var(--ink); }
[data-theme="dark"] .hero-content .trust-label { color: var(--whisper); }

/* Tablet — 2 columns × 2 rows */
@media (max-width: 1024px) {
  .trust-signals {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    padding: 48px 0;
    margin-top: 48px;
  }
}

/* Mobile — KEEP 2 columns (NOT single-column flowing text) */
@media (max-width: 640px) {
  .trust-signals {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
    padding: 40px 0;
    margin-top: 40px;
  }
  .trust-num { font-size: 2rem; }
  .trust-label { font-size: 11px; letter-spacing: 0.1em; }
  [data-lang="ar"] .trust-label { font-size: 12px; }
}

/* Reduced motion / no-JS — stats visible immediately */
@media (prefers-reduced-motion: reduce) {
  .trust-stat { opacity: 1 !important; transform: none !important; }
}
.no-js .trust-stat { opacity: 1; transform: none; }

/* ============================================================
   7e-bis. iOS Safari grid layout defensive patches (2026-05-02 EVE)

   HUS reported on real iPhone Safari that .trust-signals renders as
   flowing single-column text — not reproducible in Chromium device-mode
   or Playwright iOS emulation. Known iOS Safari quirks targeted:
     - display:grid sometimes degrades to block when grid-auto-rows /
       grid-template-rows is implicit
     - 1fr columns can collapse inside parents with content-box sizing
     - flex children of grid items can drop their inline width

   Layer 1: explicit width / box-sizing / row template on the strip
   and force min-width:0 on stats so flex children don't blow up cells.

   Layer 2: iOS-only fallback via @supports(-webkit-touch-callout: none)
   that switches the strip to flex with calc-based widths matching the
   tablet/mobile gap math (32px and 20px respectively). Same visual
   result, guaranteed to render even if iOS grid is broken on that device.
   ============================================================ */
.trust-signals {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-auto-rows: auto;
  grid-template-rows: auto;
}
@media (max-width: 1024px) {
  .trust-signals { grid-template-rows: auto auto; }
}
@media (max-width: 640px) {
  .trust-signals { grid-template-rows: auto auto; }
}
.trust-stat {
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* iOS-only flex fallback. -webkit-touch-callout is an iOS-only property,
   so this @supports block targets iOS Safari (and other WebKit-on-iOS
   browsers like iOS Chrome/Firefox/Edge which all share WebKit). The
   calc widths match the existing horizontal gap (32px tablet / 20px
   mobile), so the layout is visually identical to the grid version. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    .trust-signals {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .trust-stat {
      flex: 1 1 calc(50% - 16px);
      min-width: calc(50% - 16px);
      max-width: calc(50% - 16px);
    }
  }
  @media (max-width: 640px) {
    .trust-stat {
      flex: 1 1 calc(50% - 10px);
      min-width: calc(50% - 10px);
      max-width: calc(50% - 10px);
    }
  }
}

/* ============================================================
   7d. CINEMATIC SCROLL EXPERIENCE — Apple-grade, desktop ≥1025px
   Section becomes 4× viewport tall with a sticky inner container.
   Cards layered absolutely at viewport center, sized for magazine-spread
   feel: min(1100px, 90vw). Section background flips to ink-dark so the
   cinematic moment reads as a distinct "filmic" passage. Cards retain
   light bone surface so body text stays high-contrast.

   TEXT-VISIBLE BUG FIX: opacity is animated ONLY on the card wrapper
   .mvp-card-anim — inner content (.mvp-num, .mvp-title, .mvp-desc, .btn-link)
   has opacity:1 + transform:none with !important so it can never inherit
   a competing fade-out from any other rule.

   Mobile + reduced-motion fall back to original staged-reveal pattern.
   ============================================================ */
@media (min-width: 1025px) {
  .mvps-section.cinematic {
    height: 400vh;
    position: relative;
    padding: 0;
    background: var(--ink);
    color: var(--bone);
  }
  .mvps-section.cinematic > .container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    max-width: 1400px;
    padding: 96px 48px;
    box-sizing: border-box;
  }
  .mvps-section.cinematic > .container > .section-label,
  .mvps-section.cinematic .mvps-headline {
    flex-shrink: 0;
    opacity: 1 !important;
    transform: none !important;
    color: var(--bone);
  }
  .mvps-section.cinematic .section-label { color: var(--live); }
  .mvps-section.cinematic .section-label::before { background: var(--live); }
  .mvps-section.cinematic .mvps-headline { margin-bottom: 56px; color: var(--bone); }
  .mvps-section.cinematic .mvps-headline .accent { color: var(--live); }
  .mvps-section.cinematic .mvps-grid {
    position: relative;
    flex: 1;
    display: block;
    grid-template-columns: none;
    gap: 0;
  }

  /* Card wrapper — full magazine spread */
  .mvps-section.cinematic .mvp-card-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(1100px, 90vw);
    max-width: none;
    padding: 64px 72px;
    background: var(--bone);
    color: var(--ink);
    border: 1px solid var(--track);
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    transition: none;
    will-change: opacity, transform;
    box-sizing: border-box;
  }
  /* Reset per-position transforms so cards stack centered */
  .mvps-section.cinematic .mvp-card-anim[data-mvp-pos="left"],
  .mvps-section.cinematic .mvp-card-anim[data-mvp-pos="center"],
  .mvps-section.cinematic .mvp-card-anim[data-mvp-pos="right"] {
    transform: translate(-50%, -50%);
  }

  /* Inner content — opacity + transform LOCKED at visible/identity so a
     stray rule from anywhere else can't make text disappear. The card
     wrapper is what GSAP fades. */
  .mvps-section.cinematic .mvp-card-anim .mvp-num,
  .mvps-section.cinematic .mvp-card-anim .mvp-title,
  .mvps-section.cinematic .mvp-card-anim .mvp-desc,
  .mvps-section.cinematic .mvp-card-anim .btn-link {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Larger, magazine-spread typography for full-viewport cards */
  .mvps-section.cinematic .mvp-num {
    font-size: 14px;
    color: var(--live-deep);
    margin-bottom: 32px;
    letter-spacing: 0.18em;
  }
  .mvps-section.cinematic .mvp-title {
    font-size: clamp(2.5rem, 4.2vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.04;
    margin-bottom: 32px;
    color: var(--ink);
  }
  .mvps-section.cinematic .mvp-desc {
    font-size: 20px;
    line-height: 1.55;
    color: var(--whisper);
    margin-bottom: 36px;
    max-width: 760px;
  }
  .mvps-section.cinematic .btn-link {
    font-size: 15px;
    color: var(--ink);
  }
  .mvps-section.cinematic .btn-link:hover { color: var(--live-deep); }

  /* Featured card — visually distinct without breaking text contrast */
  .mvps-section.cinematic .mvp-card-featured {
    background: var(--ink-soft);
    color: var(--bone);
    border: 1.5px solid var(--live);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 197, 102, 0.08);
  }
  .mvps-section.cinematic .mvp-card-featured .mvp-num { color: var(--live); }
  .mvps-section.cinematic .mvp-card-featured .mvp-title { color: var(--bone); }
  .mvps-section.cinematic .mvp-card-featured .mvp-desc { color: rgba(244, 241, 234, 0.78); }
  .mvps-section.cinematic .mvp-card-featured .btn-link { color: var(--live); }
  .mvps-section.cinematic .mvp-card-featured .btn-link:hover { color: var(--bone); }
}

/* Mobile / tablet — cinematic CSS off, original staged-reveal stays. */
@media (max-width: 1024px) {
  .mvps-section.cinematic {
    height: auto;
    background: var(--bone-deep);
    color: var(--ink);
  }
  .mvps-section.cinematic > .container {
    position: static;
    height: auto;
  }
  .mvps-section.cinematic .mvps-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    display: grid;
  }
  .mvps-section.cinematic .mvp-card-anim {
    position: static;
    transform: none;
    width: 100%;
  }
}

/* Reduced motion — pin/scrub off, cards static side-by-side. */
@media (prefers-reduced-motion: reduce) {
  .mvps-section.cinematic {
    height: auto;
    padding: var(--section-py) 0;
    background: var(--bone-deep);
    color: var(--ink);
  }
  .mvps-section.cinematic > .container {
    position: static;
    height: auto;
    padding: 0 var(--pad-x);
  }
  .mvps-section.cinematic .mvps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .mvps-section.cinematic .mvp-card-anim {
    position: static;
    transform: none !important;
    width: 100%;
    opacity: 1 !important;
  }
}

/* ============================================================
   8. CTA-FINAL — single-focus conversion section on landing/contact
   ============================================================ */
.cta-final {
  background: var(--bone);
  padding: 160px 0;
  position: relative;
}
.cta-final-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.cta-final .section-label { margin-bottom: 24px; justify-content: center; }
.cta-final .section-label::before { display: none; }
.cta-final-headline {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 24px;
  margin-bottom: 24px;
  color: var(--ink);
}
[data-lang="ar"] .cta-final-headline { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.2; }
.cta-final-headline .accent { color: var(--live-deep); }
.cta-final-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--whisper);
  margin: 0 auto 48px;
  max-width: 680px;
}
.cta-final-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .cta-final { padding: 96px 0; }
  .cta-final-actions { flex-direction: column; align-items: stretch; }
  .cta-final-actions .btn { justify-content: center; }
}

/* ============================================================
   9. SCROLL ANIMATIONS
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 80ms; }
.fade-up:nth-child(3) { transition-delay: 160ms; }
.fade-up:nth-child(4) { transition-delay: 240ms; }
.fade-up:nth-child(5) { transition-delay: 320ms; }
.fade-up:nth-child(6) { transition-delay: 400ms; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-natural), transform 900ms var(--ease-natural);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-up { opacity: 1; transform: none; transition: none; }
}

.section-head p.lead { color: var(--whisper); }

/* ============================================================
   10. WEDGE — kept for /services subpage if reused
   ============================================================ */
.wedge { padding: var(--section-py) 0; position: relative; overflow: hidden; }
.wedge h2 {
  font-size: clamp(40px, 6.5vw, 80px);
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: 48px;
}
.wedge h2 .strike {
  color: var(--whisper);
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 3px;
}
.wedge h2 .accent { color: var(--live-deep); }
.wedge .wedge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--track);
}
.wedge-item .wedge-num {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--live-deep);
  margin-bottom: 12px;
  line-height: 1;
}
.wedge-item h3 { color: var(--ink); margin-bottom: 12px; }
.wedge-item p { color: var(--whisper); }

/* ============================================================
   11. SERVICES — grid for /services subpage
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.svc {
  background: var(--bone);
  padding: 36px 28px;
  position: relative;
  transition: all 320ms var(--ease);
  overflow: hidden;
  scroll-margin-top: 96px;  /* anchor offset so #ai etc. land below sticky nav */
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--live);
  transform: translateY(100%);
  transition: transform 360ms var(--ease);
  z-index: 0;
}
.svc:hover::before { transform: translateY(0); }
.svc > * { position: relative; z-index: 1; transition: color 320ms var(--ease); }
.svc:hover h3, .svc:hover p, .svc:hover .svc-num { color: var(--ink); }
.svc:hover .svc-tag { color: var(--ink); border-color: var(--ink); }
.svc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--whisper);
  margin-bottom: 28px;
}
.svc h3 { margin-bottom: 10px; }
.svc p { font-size: 14px; color: var(--whisper); margin-bottom: 24px; }
.svc-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--whisper);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 99px;
  transition: all 320ms var(--ease);
}
.svc-deliverables {
  list-style: none;
  margin-top: 16px;
  font-size: 13px;
  color: var(--whisper);
  line-height: 1.6;
}
.svc-deliverables li { padding: 4px 0; padding-left: 16px; position: relative; }
.svc-deliverables li::before { content: '·'; position: absolute; left: 4px; color: var(--live-deep); font-weight: 700; }
[data-lang="ar"] .svc-deliverables li { padding-left: 0; padding-right: 16px; }
[data-lang="ar"] .svc-deliverables li::before { left: auto; right: 4px; }
.svc:hover .svc-deliverables li, .svc:hover .svc-deliverables li::before { color: var(--ink); }

/* ============================================================
   12. WORK — branded snapshot panels (per-brand palettes are theme-INDEPENDENT)
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.work-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 360ms var(--ease), border-color 360ms var(--ease), box-shadow 360ms var(--ease);
  isolation: isolate;
}
.work-card:hover, .work-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .work-card:hover,
[data-theme="dark"] .work-card:focus-visible {
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.work-snapshot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ws-chrome {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.ws-stage {
  position: relative;
  flex: 1;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
}

/* ── 1. Sadq · DGA-licensed e-signature ── */
.work-sadq { background: linear-gradient(160deg, #0D2F3B 0%, #1A4250 100%); color: #FAF8F5; }
.ws-sadq-badge {
  display: inline-block; align-self: flex-start; padding: 6px 14px; border-radius: 99px;
  background: #00B53A; color: #0D2F3B; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
}
.ws-sadq-headline {
  font-family: 'IBM Plex Sans', 'Tajawal', system-ui, sans-serif;
  font-size: 20px; font-weight: 600; line-height: 1.25; color: #FAF8F5; max-width: 90%;
}
.ws-sadq-stamp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  color: #1A7A7A; border-top: 1px solid rgba(26, 122, 122, 0.4); padding-top: 12px;
}

/* ── 2. Akenna · Saudi rental marketplace ── */
.work-akenna {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(244, 162, 79, 0.18), transparent 55%),
    #1C140D;
  color: #F4EFE5;
  position: relative;
}
.ws-akenna-mash {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg, rgba(244, 162, 79, 0.08) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(120deg, rgba(184, 73, 44, 0.08) 0 1px, transparent 1px 12px);
  opacity: 0.55;
}
.ws-akenna-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 24px; font-weight: 500; line-height: 1.18;
  color: #F4EFE5; position: relative;
}
.ws-akenna-cta {
  align-self: flex-start; padding: 8px 16px; border-radius: 99px;
  background: linear-gradient(90deg, #B8492C, #F4A24F); color: #1C140D;
  font-family: 'IBM Plex Sans', 'Tajawal', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; position: relative;
}

/* ── 3. Orsom · Web AR for art galleries ── */
.work-orsom { background: #0B0B14; color: #F5F3EE; }
.ws-orsom-frame {
  align-self: center; width: 60%; aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #C9A757 0%, #8B6914 100%);
  padding: 4px; border: 1px solid rgba(201, 167, 87, 0.4);
  margin-top: 6px; position: relative;
}
.ws-orsom-art {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 243, 238, 0.18), transparent 50%),
    linear-gradient(180deg, #2A2218 0%, #0B0B14 100%);
}
.ws-orsom-tag {
  align-self: center; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px; color: #C9A757;
}
.ws-orsom-headline {
  align-self: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px; color: #F5F3EE;
}

/* ── 4. Jad Art Gallery · obsidian dark museum ── */
.work-jad { background: #0A0807; color: #E8DFCE; }
.ws-jad-painting {
  align-self: center; width: 50%; aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, rgba(212, 163, 74, 0.4) 0%, rgba(232, 223, 206, 0.15) 50%, rgba(10, 8, 7, 0.9) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(212, 163, 74, 0.25), transparent 60%);
  border: 1px solid rgba(212, 163, 74, 0.3);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
}
.ws-jad-headline {
  align-self: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 22px; color: #E8DFCE;
}
.ws-jad-rule {
  align-self: center; width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 163, 74, 0.6), transparent);
}
.ws-jad-meta {
  align-self: center; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 3px; color: rgba(212, 163, 74, 0.7);
}

/* ── 5. Al Bashi · Galaxy of Art ── */
.work-albashi { background: #0B1230; color: #EADFCA; position: relative; }
.ws-albashi-arc {
  position: absolute; inset: -10% -10% auto -10%; height: 50%;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(217, 167, 60, 0.35), transparent 65%);
  pointer-events: none;
}
.ws-albashi-painting {
  align-self: center; width: 42%; aspect-ratio: 4 / 5;
  background: radial-gradient(ellipse at 50% 60%, rgba(200, 90, 61, 0.55), rgba(11, 18, 48, 0.9) 80%);
  border: 1px solid rgba(217, 167, 60, 0.4);
  box-shadow: 0 0 60px -12px rgba(217, 167, 60, 0.35);
  position: relative; z-index: 1;
}
.ws-albashi-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 18% 18%, rgba(234, 223, 202, 0.6), transparent 50%),
    radial-gradient(1px 1px at 78% 22%, rgba(234, 223, 202, 0.45), transparent 50%),
    radial-gradient(1px 1px at 88% 70%, rgba(217, 167, 60, 0.55), transparent 50%),
    radial-gradient(1px 1px at 24% 80%, rgba(234, 223, 202, 0.4), transparent 50%);
}
.ws-albashi-headline {
  align-self: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 20px; color: #EADFCA;
  position: relative; z-index: 1;
}
.ws-albashi-tag {
  align-self: center; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 3px; color: rgba(217, 167, 60, 0.8);
  position: relative; z-index: 1;
}

/* ── 6. Artist's Feather · ريشة منال ── */
.work-feather {
  background:
    radial-gradient(ellipse 120% 80% at 0% 100%, rgba(166, 159, 138, 0.25), transparent 55%),
    #F4EFE5;
  color: #2A2A2A;
}
.ws-feather-mark {
  align-self: flex-start; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 90px; font-weight: 400; line-height: 0.85;
  color: #2A2A2A; letter-spacing: -0.04em;
}
.ws-feather-headline {
  align-self: flex-start; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 22px; color: #2A2A2A; max-width: 88%;
}
.ws-feather-meta {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px;
  color: rgba(42, 42, 42, 0.55);
  border-top: 1px solid rgba(42, 42, 42, 0.18); padding-top: 10px;
}

.work-meta {
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.work-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--whisper);
}
.work-meta h3 { font-size: 22px; margin: 0; line-height: 1.2; }
.work-meta p { font-size: 13.5px; color: var(--whisper); line-height: 1.55; margin: 0; }
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  transition: color 280ms var(--ease);
}
.work-card:hover .work-link { color: var(--live-deep); }
.work-link .btn-arrow { transition: transform 320ms var(--ease); }
.work-card:hover .work-link .btn-arrow { transform: translate(2px, -2px); }

/* ============================================================
   13. PROCESS — timeline
   ============================================================ */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 32px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--hairline);
}
.t-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 12px;
  position: relative;
}
.t-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--whisper);
  margin-top: 13px;
  margin-bottom: 12px;
  transition: all 320ms var(--ease);
}
.t-step:hover .t-dot {
  background: var(--live);
  border-color: var(--live);
  transform: scale(1.3);
}
.t-step:first-child .t-dot { background: var(--live); border-color: var(--live); }
.t-day {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--live-deep);
}
.t-step h3 { font-size: 17px; margin-bottom: 0; line-height: 1.3; }
.t-step p { font-size: 13px; color: var(--whisper); line-height: 1.5; }

/* ============================================================
   14. MANIFESTO — list with numbered principles
   ============================================================ */
.manifesto-list { list-style: none; margin-top: 32px; }
.manifesto-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
  transition: padding 320ms var(--ease);
  cursor: default;
}
.manifesto-item:last-child { border-bottom: 1px solid var(--hairline); }
.manifesto-item:hover { padding-left: 12px; }
[data-lang="ar"] .manifesto-item:hover { padding-left: 0; padding-right: 12px; }
.m-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--live-deep);
  letter-spacing: 1px;
}
.m-content h3 { margin-bottom: 8px; line-height: 1.2; }
.m-content p { font-size: 16px; color: var(--whisper); }

/* ============================================================
   15. PRICING / engagement tiers
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.tier {
  padding: 40px 32px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--bone);
  transition: all 320ms var(--ease);
  display: flex;
  flex-direction: column;
}
.tier:hover { border-color: var(--ink); transform: translateY(-3px); }
.tier.featured {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.tier.featured h3 { color: var(--bone); }
.tier.featured .tier-desc, .tier.featured .tier-list li { color: var(--bone-fade-72); }
.tier.featured .tier-list li::before { color: var(--live); }
.tier.featured .tier-tag { background: var(--live); color: var(--ink); }
[data-theme="dark"] .tier.featured .tier-desc,
[data-theme="dark"] .tier.featured .tier-list li { color: var(--whisper); }
.tier-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--track);
  color: var(--ink);
  margin-bottom: 24px;
  width: fit-content;
}
.tier h3 { margin-bottom: 8px; }
.tier-desc { font-size: 14px; margin-bottom: 24px; line-height: 1.5; color: var(--whisper); }
.tier-price {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
.tier-list { list-style: none; margin-bottom: 32px; flex-grow: 1; }
.tier-list li {
  font-size: 14px;
  padding: 8px 0;
  padding-left: 22px;
  position: relative;
  color: var(--whisper);
  line-height: 1.4;
}
[data-lang="ar"] .tier-list li { padding-left: 0; padding-right: 22px; }
.tier-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--live-deep);
  font-weight: 600;
  font-family: var(--font-mono);
}
.tier.featured .tier-list li::before { color: var(--live); }
[data-lang="ar"] .tier-list li::before { left: auto; right: 0; content: '←'; }

/* ============================================================
   16. FAQ
   ============================================================ */
.faq-list { margin-top: 32px; }
.faq {
  border-top: 1px solid var(--hairline);
  padding: 28px 0;
  cursor: pointer;
  transition: padding 280ms var(--ease);
}
.faq:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 20px; font-weight: 600; transition: color 200ms var(--ease); }
.faq[open] summary h3 { color: var(--live-deep); }
@media (hover: hover) { .faq:hover summary h3 { color: var(--live-deep); } }
.faq summary:focus-visible { outline: 2px solid var(--live); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform 360ms var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: all 280ms var(--ease);
}
.faq-icon::before { top: 11px; left: 4px; right: 4px; height: 2px; }
.faq-icon::after { left: 11px; top: 4px; bottom: 4px; width: 2px; }
.faq[open] .faq-icon::after { transform: scaleY(0); }
.faq[open] .faq-icon { transform: rotate(180deg); }
.faq-body {
  margin-top: 16px;
  font-size: 16px;
  color: var(--whisper);
  line-height: 1.65;
  max-width: 70ch;
}

/* ============================================================
   17. CTA-CLOSE — lighter alternative ending used on subpages
   ============================================================ */
.cta-close {
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-close::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center, var(--tint), transparent 60%);
  pointer-events: none;
}
.cta-close > * { position: relative; }
.cta-close h2 {
  font-size: clamp(40px, 7vw, 88px);
  margin-bottom: 32px;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.035em;
}
[data-lang="ar"] .cta-close h2 { letter-spacing: 0; max-width: 14ch; }
.cta-close p.lead { color: var(--whisper); margin: 0 auto 48px; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   18. ABOUT page — narrative blocks
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 32px;
}
.about-block h3 { margin-bottom: 16px; font-size: 22px; }
.about-block p { color: var(--whisper); margin-bottom: 16px; }
.about-block p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Contact details list */
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}
.contact-detail h4 {
  margin-bottom: 8px;
  color: var(--whisper);
}
.contact-detail a, .contact-detail p {
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
}
.contact-detail a { transition: color 200ms var(--ease); }
.contact-detail a:hover { color: var(--live-deep); }

/* ============================================================
   19. GEO context — small visible block for LLM/SEO synthesis
   ============================================================ */
.geo-context {
  padding: 48px 0;
  background: var(--bone-deep);
  border-top: 1px solid var(--track);
}
.geo-summary {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--whisper);
  text-align: center;
  padding: 0 24px;
}

/* ============================================================
   20. FOOTER
   ============================================================ */
footer {
  padding: 80px 0 48px;
  background: var(--bone-deep);
  border-top: 1px solid var(--track);
  color: var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-col h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--whisper);
  margin-bottom: 16px;
  line-height: 1.05;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 4px 0; }
.footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  transition: color 200ms var(--ease);
}
.footer-col a:hover { color: var(--live-deep); }
.footer-col a:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }
.footer-brand svg { height: 26px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--whisper); max-width: 320px; }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--whisper);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  :root { --section-py: 80px; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .timeline { grid-template-columns: 1fr; gap: 24px; }
  .timeline::before { display: none; }
  .t-step { padding: 0; flex-direction: row; align-items: center; gap: 16px; }
  .t-dot { margin-top: 0; margin-bottom: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .wedge .wedge-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  :root { --pad-x: 24px; --section-py: 64px; }
  .svc-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 24px; }
  .nav-actions { gap: 8px; }
  .lang-toggle { padding: 6px 10px; }
  .manifesto-item { grid-template-columns: 60px 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  :root { --pad-x: 16px; }
  nav.top .inner { gap: 12px; padding: 12px var(--pad-x); }
  .nav-logo svg { height: 18px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-primary { display: none; }
  .lang-toggle { padding: 5px 8px; font-size: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .live-dot::after { display: none; }
}