/*!
 * رواسخ الغربية | Rawasekh Al Gharbia
 * Shared stylesheet for all pages
 */


/* =============================================================
   1. CUSTOM FONT — TheYearofHandicrafts (5 weights only)
============================================================= */
 
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('fonts/TheYearofHandicrafts-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('fonts/TheYearofHandicrafts-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('fonts/TheYearofHandicrafts-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('fonts/TheYearofHandicrafts-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('fonts/TheYearofHandicrafts-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
 
/* =============================================================
   2. DESIGN TOKENS — Premium Cream + Brand Accents
============================================================= */
:root {
  /* Cream / White system */
  --c-cream-0:   #FFFFFF;
  --c-cream-50:  #FDFAF4;
  --c-cream-100: #FAF6EE;
  --c-cream-200: #F5EFDF;
  --c-cream-300: #EBE2CC;
  --c-cream-400: #D9CCAE;
  --c-cream-500: #BFAE89;
 
  /* Ink (text) */
  --c-ink-900: #0E0E0F;
  --c-ink-700: #2A2A2D;
  --c-ink-500: #5C5C61;
  --c-ink-300: #8E8E94;
 
  /* Brand accents (used sparingly — surgical, not decorative) */
  --c-amber:   #D69527;
  --c-amber-d: #B57C18;
  --c-rose:    #C9325E;
  --c-rose-d:  #A02347;
  --c-azure:   #1E8FB8;
 
  /* Effects */
  --grad-warm:  linear-gradient(135deg, var(--c-amber) 0%, var(--c-rose) 100%);
  --grad-cream: linear-gradient(180deg, var(--c-cream-50) 0%, var(--c-cream-200) 100%);
 
  /* Shadow system */
  --sh-1: 0 1px 2px rgba(14,14,15,0.04), 0 0 0 1px rgba(14,14,15,0.04);
  --sh-2: 0 6px 20px -8px rgba(14,14,15,0.10), 0 0 0 1px rgba(14,14,15,0.04);
  --sh-3: 0 22px 50px -16px rgba(14,14,15,0.18), 0 0 0 1px rgba(14,14,15,0.05);
  --sh-glow: 0 0 60px -12px rgba(214,149,39,0.35);
 
  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 140px);
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 42px;
 
  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
  /* Type — TheYearofHandicrafts unified */
  --font-display: 'TheYearofHandicrafts', system-ui, sans-serif;
  --font-ar:      'TheYearofHandicrafts', system-ui, sans-serif;
  --font-en:      'TheYearofHandicrafts', system-ui, sans-serif;
  --font-serif:   'TheYearofHandicrafts', system-ui, sans-serif;
 
  --bnav-h: 76px;
}
 
/* Dark mode tokens */
html.dark {
  --c-cream-0:   #0A0A0B;
  --c-cream-50:  #111114;
  --c-cream-100: #16161A;
  --c-cream-200: #1C1C20;
  --c-cream-300: #2A2A30;
  --c-cream-400: #3A3A42;
  --c-cream-500: #6A6A72;
  --c-ink-900: #FAF6EE;
  --c-ink-700: #E8E2D2;
  --c-ink-500: #B0AAA0;
  --c-ink-300: #7A7470;
  --grad-cream: linear-gradient(180deg, #111114 0%, #1C1C20 100%);
  --sh-1: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,249,238,0.05);
  --sh-2: 0 6px 20px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,249,238,0.05);
  --sh-3: 0 22px 50px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,249,238,0.07);
}
 
/* =============================================================
   3. RESET & BASE
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink-700);
  background: var(--c-cream-100);
  overflow-x: hidden;
  padding-bottom: calc(var(--bnav-h) + 24px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
[lang="en"] body { font-family: var(--font-en); line-height: 1.6; }
 
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-amber); color: var(--c-cream-0); }
 
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 2; }
.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
 
/* =============================================================
   4. TYPOGRAPHY HIERARCHY
============================================================= */
.display-xl, .display-lg, .display-md, .display-sm,
h1.display-xl, h1.display-lg, h1.display-md {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--c-ink-900);
}
.display-xl { font-size: clamp(48px, 8vw, 128px); }
.display-lg { font-size: clamp(40px, 6vw, 88px); }
.display-md { font-size: clamp(32px, 4.4vw, 64px); }
.display-sm { font-size: clamp(24px, 3vw, 40px); line-height: 1.05; }
 
[lang="en"] .display-xl, [lang="en"] .display-lg, [lang="en"] .display-md, [lang="en"] .display-sm {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.04em;
}
 
/* Arabic display headings carry diacritics above the cap-line; the tight
   0.98 line-height crops them on multi-line wrapping. Give Arabic extra
   leading. */
[lang="ar"] .display-xl, [lang="ar"] .display-lg, [lang="ar"] .display-md {
  line-height: 1.15;
}
[lang="ar"] .display-sm { line-height: 1.2; }
 
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  padding: 6px 14px;
  background: var(--c-cream-200);
  border-radius: 50px;
  border: 1px solid var(--c-cream-300);
}
[lang="ar"] .eyebrow {
  font-family: var(--font-ar);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12.5px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px;
  background: var(--c-amber);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(214,149,39,0.18);
}
 
.lead {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.85;
  color: var(--c-ink-500);
  max-width: 60ch;
  font-weight: 400;
}
[lang="ar"] .lead {
  font-family: var(--font-ar);
  font-weight: 400;
  line-height: 1.95;
}
 
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
 
.txt-grad {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Reserve room for Arabic diacritics (fatha/damma above the cap-line) */
  display: inline-block;
  padding-block: 0.12em 0.04em;
  line-height: 1.15;
}
 
/* =============================================================
   5. UI PRIMITIVES — Buttons, links, cards
============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, background 0.3s, color 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  box-shadow: var(--sh-2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  background: var(--c-ink-700);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink-900);
  border: 1px solid var(--c-cream-400);
}
.btn--ghost:hover { background: var(--c-cream-200); border-color: var(--c-ink-700); }
 
.btn--accent {
  background: var(--grad-warm);
  color: var(--c-cream-50);
  box-shadow: 0 8px 24px -6px rgba(201,50,94,0.4);
}
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgba(201,50,94,0.55); }
 
.btn svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
[dir="ltr"] .btn svg:last-child { transform: rotate(180deg); }
.btn:hover svg:last-child { transform: translateX(-3px); }
[dir="ltr"] .btn:hover svg:last-child { transform: rotate(180deg) translateX(-3px); }
 
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--c-ink-900);
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s, gap 0.3s var(--ease-out);
}
.link-arrow:hover { color: var(--c-amber); gap: 14px; }
.link-arrow svg { width: 14px; height: 14px; }
 
/* =============================================================
   6. SECTION HEADER PATTERN
============================================================= */
.sec-head {
  margin-bottom: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 18px;
  max-width: 920px;
  position: relative;
}
.sec-head .num {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-300);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sec-head .num span { color: var(--c-amber); font-weight: 700; }
 
/* Logo chip beside section title */
.sec-head .logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  border-radius: 999px;
  box-shadow: var(--sh-1);
  margin-inline-start: auto;
}
.sec-head .logo-chip img {
  width: 30px; height: 30px;
  object-fit: contain;
}
.sec-head .logo-chip span {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-700);
  font-weight: 700;
}
[lang="en"] .sec-head .logo-chip span { font-family: var(--font-en); }
 
.sec-head .num-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sec-head h2 { color: var(--c-ink-900); }
.sec-head .lead { margin-top: 4px; }
 
@media (max-width: 700px) {
  .sec-head .logo-chip { margin-inline-start: 0; }
  .sec-head .num-row { gap: 12px; }
  .sec-head .logo-chip span { display: none; }
  .sec-head .logo-chip { padding: 4px; }
  .sec-head .logo-chip img { width: 26px; height: 26px; }
}
 
/* =============================================================
   7. BRAND DNA — REMOVED
   All decoration CSS now lives at the bottom of the stylesheet
   in the "DECORATIONS — USER-EDITABLE" section, one rule per line.
============================================================= */
 
 
/* ===== Section logo watermark — small RG logo top-right of every section ===== */
.section-logo-mark {
  position: absolute;
  top: clamp(20px, 4vw, 50px);
  inset-inline-end: clamp(20px, 4vw, 50px);
  width: clamp(40px, 5vw, 64px);
  height: clamp(40px, 5vw, 64px);
  z-index: 3;
  opacity: 0.5;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  padding: 8px;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.section-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.section-logo-mark::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--c-cream-400);
  border-radius: 18px;
  opacity: 0.5;
  pointer-events: none;
}
.section.in-view .section-logo-mark { opacity: 0.85; transform: rotate(-6deg); }
.hero .section-logo-mark { opacity: 0.85; transform: rotate(-6deg); }
html.dark .section-logo-mark { background: var(--c-cream-100); border-color: var(--c-cream-300); }
@media (max-width: 700px) {
  .section-logo-mark { width: 36px; height: 36px; padding: 5px; border-radius: 10px; }
}
 
/* =============================================================
   8. PRELOADER
============================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--c-cream-100);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-mark {
  width: 56px; height: 56px;
  position: relative;
}
.preloader-mark img {
  width: 100%; height: 100%; object-fit: contain;
  animation: pulseLogo 1.6s ease-in-out infinite;
}
@keyframes pulseLogo {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.92); opacity: 0.7; }
}
.preloader-bar {
  width: 120px; height: 1px;
  background: var(--c-cream-300);
  overflow: hidden; position: relative;
}
.preloader-bar::after {
  content: ''; position: absolute;
  width: 40%; height: 100%;
  background: var(--c-ink-900);
  animation: barSlide 1.4s var(--ease-in-out) infinite;
}
@keyframes barSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
[dir="ltr"] .preloader-bar::after { animation-direction: reverse; }
 
/* =============================================================
   9. CURSOR (desktop only)
============================================================= */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--c-cream-50);
  transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out);
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,249,238,0.6);
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), background 0.3s;
}
.cursor-ring.hover { width: 56px; height: 56px; background: rgba(255,249,238,0.08); }
.cursor-dot.hover { width: 0; height: 0; }
@media (hover: none), (max-width: 980px) {
  .cursor-dot, .cursor-ring { display: none; }
}
 
/* =============================================================
   10. SCROLL PROGRESS
============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200;
  background: transparent;
}
.scroll-progress > .bar {
  height: 100%;
  background: var(--grad-warm);
  width: 0%;
  transition: width 0.1s linear;
  transform-origin: right;
}
[dir="ltr"] .scroll-progress > .bar { transform-origin: left; }
 
/* =============================================================
   11. BOTTOM NAV — Apple Floating Pill (Cream Edition)
============================================================= */
.bnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 16px 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.bnav-pill {
  pointer-events: all;
  width: 100%;
  max-width: 1080px;
  height: 64px;
  border-radius: 999px;
  padding: 0 12px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(253,250,244,0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(14,14,15,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(14,14,15,0.04) inset,
    0 18px 50px -14px rgba(14,14,15,0.18);
  transition: transform 0.5s var(--ease-out), background 0.4s, border-color 0.4s;
}
html.dark .bnav-pill {
  background: rgba(20,20,22,0.78);
  border-color: rgba(255,249,238,0.08);
  box-shadow:
    0 1px 0 rgba(255,249,238,0.05) inset,
    0 18px 50px -14px rgba(0,0,0,0.5);
}
 
.bnav-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.3s;
}
.bnav-brand:hover { background: rgba(14,14,15,0.04); }
html.dark .bnav-brand:hover { background: rgba(255,249,238,0.06); }
.bnav-brand img {
  width: 32px; height: 32px;
  object-fit: contain;
  border-radius: 8px;
}
.bnav-brand .brand-text {
  display: flex; flex-direction: column; line-height: 1.05;
}
.bnav-brand .brand-text strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--c-ink-900);
  letter-spacing: -0.01em;
}
.bnav-brand .brand-text span {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-300);
  font-weight: 500;
}
 
.bnav-sep {
  width: 1px; height: 24px;
  background: rgba(14,14,15,0.08);
  margin-inline: 4px;
  flex-shrink: 0;
}
html.dark .bnav-sep { background: rgba(255,249,238,0.1); }
 
.bnav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; overflow: hidden; }
.bnav-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 12px;
  border-radius: 14px;
  color: var(--c-ink-500);
  position: relative;
  transition: color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
  flex-shrink: 0;
}
.bnav-link:hover { color: var(--c-ink-900); transform: translateY(-2px); }
.bnav-link.active { color: var(--c-ink-900); }
.bnav-link.active::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%;
  width: 4px; height: 4px;
  background: var(--c-amber);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(214,149,39,0.2);
}
.bnav-link svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.bnav-link.active svg { transform: scale(1.12); color: var(--c-amber); }
.bnav-link .lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
 
.bnav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.bnav-cta:hover { transform: translateY(-2px) scale(1.03); background: var(--c-amber-d); }
.bnav-cta svg { width: 14px; height: 14px; }
 
.bnav-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-inline-end: 4px; }
.bnav-lang {
  display: flex; padding: 3px;
  border-radius: 999px;
  background: rgba(14,14,15,0.05);
  border: 1px solid rgba(14,14,15,0.06);
}
html.dark .bnav-lang { background: rgba(255,249,238,0.06); border-color: rgba(255,249,238,0.08); }
.bnav-lang button {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink-500);
  font-family: var(--font-en);
  transition: all 0.3s;
}
.bnav-lang button.active {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
}
.bnav-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(14,14,15,0.05);
  border: 1px solid rgba(14,14,15,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-700);
  transition: all 0.3s;
}
.bnav-icon-btn svg { width: 16px; height: 16px; transition: transform 0.5s var(--ease-out); }
.bnav-icon-btn:hover { background: var(--c-ink-900); color: var(--c-cream-50); border-color: var(--c-ink-900); }
.bnav-icon-btn:hover svg { transform: rotate(20deg); }
html.dark .bnav-icon-btn { background: rgba(255,249,238,0.06); border-color: rgba(255,249,238,0.08); color: var(--c-ink-700); }
html.dark .bnav-icon-btn:hover { background: var(--c-cream-50); color: var(--c-ink-900); }
 
/* Responsive nav */
@media (max-width: 980px) {
  .bnav-link .lbl { display: none; }
  .bnav-link { padding: 8px 9px; }
  .bnav-brand .brand-text span { display: none; }
}
@media (max-width: 760px) {
  .bnav-brand .brand-text { display: none; }
  .bnav-sep { display: none; }
  .bnav-cta .lbl { display: none; }
  .bnav-cta { padding: 9px 11px; }
  /* Compact lang — single button that toggles */
  .bnav-lang {
    padding: 0;
    background: transparent;
    border: none;
  }
  .bnav-lang button {
    width: 32px; height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(14,14,15,0.05);
    border: 1px solid rgba(14,14,15,0.06);
    font-size: 10px;
  }
  .bnav-lang button:not(.active) { display: none; }
  .bnav-lang button.active {
    background: var(--c-ink-900);
    color: var(--c-cream-50);
  }
  html.dark .bnav-lang button { background: rgba(255,249,238,0.06); border-color: rgba(255,249,238,0.08); }
  html.dark .bnav-lang button.active { background: var(--c-cream-50); color: var(--c-ink-900); }
}
@media (max-width: 480px) {
  :root { --bnav-h: 64px; }
  .bnav { padding: 0 8px 10px; }
  .bnav-pill { height: 58px; padding: 0 6px; gap: 2px; }
  .bnav-link { padding: 7px 5px; }
  .bnav-link svg { width: 17px; height: 17px; }
  .bnav-brand { padding: 4px 8px 4px 4px; }
  .bnav-brand img { width: 28px; height: 28px; }
  .bnav-cta { padding: 8px 10px; }
  .bnav-cta svg { width: 13px; height: 13px; }
  .bnav-icon-btn { width: 32px; height: 32px; }
  .bnav-icon-btn svg { width: 14px; height: 14px; }
  .bnav-controls { gap: 4px; padding-inline-end: 0; }
  .bnav-lang button { width: 30px; height: 30px; }
}
 
/* On very narrow screens, hide some links to make room — keep core nav */
@media (max-width: 420px) {
  #bn-vision, #bn-values { display: none; }
}
 
/* =============================================================
   12. HERO — "Living Manifesto" interactive concept
   - Asymmetric editorial layout
   - Mouse-tracked aurora background
   - Logo medallion in top-right corner (with hero text)
   - Headline with typewriter + gradient sweep
   - Floating word-cloud (إبداع · إنتاج · تسويق)
   - Editorial side-rail "EST. 2013" rotated
   - Boarding-pass style counter strip
============================================================= */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
  padding-block: clamp(80px, 11vw, 140px) clamp(60px, 8vw, 100px);
  background: var(--c-cream-100);
  isolation: isolate;
}
 
/* Aurora background that follows mouse */
.hero-aurora {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle 600px at var(--mx, 80%) var(--my, 20%), rgba(214,149,39,0.18), transparent 60%),
    radial-gradient(circle 500px at calc(100% - var(--mx, 80%)) calc(100% - var(--my, 20%)), rgba(201,50,94,0.12), transparent 60%),
    radial-gradient(circle 400px at 50% 100%, rgba(30,143,184,0.08), transparent 60%);
  transition: background 0.8s var(--ease-out);
  pointer-events: none;
}
 
/* Animated grid floor — gives depth */
.hero-grid-floor {
  position: absolute;
  bottom: -10%; left: -5%; right: -5%;
  height: 50%;
  z-index: 0;
  background-image:
    linear-gradient(rgba(14,14,15,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,15,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(800px) rotateX(60deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  opacity: 0.4;
  animation: floorGrid 12s linear infinite;
  pointer-events: none;
}
@keyframes floorGrid {
  from { background-position: 0 0; }
  to { background-position: 0 60px; }
}
html.dark .hero-grid-floor { opacity: 0.2; filter: invert(1); }
 
/* Side-rail: vertical brand info strip (right side in RTL = visual left in LTR) */
.hero-siderail {
  position: absolute;
  top: 50%;
  inset-inline-end: clamp(8px, 2vw, 28px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 4;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  pointer-events: none;
}
.hero-siderail-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
[dir="ltr"] .hero-siderail-text {
  writing-mode: vertical-rl;
}
.hero-siderail-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--c-ink-500), transparent);
}
.hero-siderail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-amber);
  box-shadow: 0 0 0 4px rgba(214,149,39,0.18);
  animation: railDot 2s ease-in-out infinite;
}
@keyframes railDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(214,149,39,0.18); }
  50%     { box-shadow: 0 0 0 8px rgba(214,149,39,0.32); }
}
[lang="ar"] .hero-siderail {
  font-family: var(--font-ar);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11.5px;
}
@media (max-width: 980px) { .hero-siderail { display: none; } }
 
/* Hero container — asymmetric grid */
.hero .container {
  position: relative; z-index: 3;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  position: relative;
}
 
/* Logo medallion in top-right corner of hero text area */
.hero-medallion {
  position: absolute;
  top: -20px;
  inset-inline-end: 0;
  width: clamp(140px, 18vw, 220px);
  aspect-ratio: 1;
  z-index: 5;
  pointer-events: none;
}
.hero-medallion-disc {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: var(--c-cream-50);
  box-shadow:
    inset 0 0 0 1px rgba(14,14,15,0.06),
    0 30px 50px -16px rgba(14,14,15,0.2),
    0 10px 20px -8px rgba(214,149,39,0.25);
  display: flex; align-items: center; justify-content: center;
  animation: medallionFloat 5s ease-in-out infinite;
  pointer-events: auto;
}
@keyframes medallionFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}
.hero-medallion-disc img {
  width: 60%; height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(14,14,15,0.18));
}
/* Rotating ring text around medallion */
.hero-medallion-ring {
  position: absolute; inset: 0;
  animation: ringRotate 30s linear infinite;
}
@keyframes ringRotate {
  to { transform: rotate(360deg); }
}
.hero-medallion-ring svg { width: 100%; height: 100%; }
.hero-medallion-ring text {
  fill: var(--c-ink-700);
  font-family: var(--font-en);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
[lang="ar"] .hero-medallion-ring text { font-family: var(--font-ar); letter-spacing: 0.16em; text-transform: none; }
 
/* Outer dashed orbit for medallion */
.hero-medallion-orbit {
  position: absolute; inset: -8%;
  border: 1px dashed rgba(14,14,15,0.15);
  border-radius: 50%;
  animation: ringRotate 50s linear infinite reverse;
}
.hero-medallion-orbit::before, .hero-medallion-orbit::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-amber);
  box-shadow: 0 0 16px rgba(214,149,39,0.7);
}
.hero-medallion-orbit::before { top: -4px; left: 50%; transform: translateX(-50%); }
.hero-medallion-orbit::after  { bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--c-rose); box-shadow: 0 0 16px rgba(201,50,94,0.7); }
 
@media (max-width: 700px) {
  .hero-medallion {
    width: 110px;
    top: -10px;
  }
}
 
/* Eyebrow + Headline section */
.hero-content {
  position: relative;
  max-width: 920px;
  padding-inline-end: clamp(0px, 18vw, 240px);
}
[dir="ltr"] .hero-content { padding-inline-end: 0; padding-inline-start: clamp(0px, 18vw, 240px); }
@media (max-width: 700px) {
  .hero-content { padding-inline-end: 130px; }
  [dir="ltr"] .hero-content { padding-inline-start: 130px; padding-inline-end: 0; }
}
@media (max-width: 480px) {
  .hero-content { padding-inline-end: 0; }
  [dir="ltr"] .hero-content { padding-inline-start: 0; }
}
.hero-content > * + * { margin-top: clamp(18px, 2.4vw, 28px); }
 
.hero .eyebrow {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-color: rgba(14,14,15,0.08);
}
 
/* === Headline — Editorial Manifesto === */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 98px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--c-ink-900);
  position: relative;
  padding-block: clamp(20px, 3vw, 40px);
}
[lang="en"] .hero-headline {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.04em;
  /* English words (Enduring/Advertising/Unforgettable/Impact) are far longer
     than the Arabic source. Cap font-size + tighten letter-spacing so the
     two-row layout fits the column without each word stealing its own line.
     The medallion (~220px) covers the top-right corner, so font ceiling
     stays modest. */
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  padding-block: clamp(14px, 2vw, 28px);
  /* Hard reserve column for the medallion + margin so "Advertising" never
     overlaps it at any viewport width. */
  padding-inline-end: clamp(140px, 22vw, 320px);
}
[dir="rtl"][lang="en"] .hero-headline { padding-inline-end: 0; padding-inline-start: clamp(140px, 22vw, 320px); }
 
/* Each row is a flex line of words */
.hero-headline .hh-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.18em;
}
/* English: keep both words on the same line — no wrapping */
[lang="en"] .hero-headline .hh-row {
  flex-wrap: nowrap;
  gap: 0.22em;
  align-items: center;
}
.hero-headline .hh-row--bottom {
  margin-top: 0.05em;
  padding-inline-start: clamp(20px, 4vw, 80px);
}
[dir="ltr"] .hero-headline .hh-row--bottom { padding-inline-start: 0; padding-inline-end: clamp(20px, 4vw, 80px); }
[lang="en"] .hero-headline .hh-row--bottom { padding-inline-start: 0; padding-inline-end: clamp(12px, 2.5vw, 40px); }
 
.hero-headline .hh-word {
  display: inline-block;
  position: relative;
}
 
/* Featured word — the keyword "راسخ" / "Advertising" gets a pill background */
.hero-headline .hh-feature {
  position: relative;
  padding: 0 0.28em;
  margin-inline-start: 0.05em;
  z-index: 1;
}
.hero-headline .hh-feature::before {
  content: '';
  position: absolute;
  inset: 0.1em -0.1em;
  background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-rose) 100%);
  border-radius: 999px;
  z-index: -1;
  transform: skewX(-8deg);
  box-shadow: 0 14px 30px -10px rgba(214,149,39,0.5);
  animation: featureBg 4s var(--ease-out) infinite alternate;
}
/* English keyword "Advertising" is far wider than Arabic "راسخ".
   The skewed pill clips its right edge — relax skew + extend horizontal inset. */
[lang="en"] .hero-headline .hh-feature {
  padding: 0 0.18em;
}
[lang="en"] .hero-headline .hh-feature::before {
  inset: 0.08em -0.18em;
  transform: skewX(-4deg);
}
[lang="en"] .hero-headline .hh-feature {
  color: var(--c-cream-50);
  -webkit-text-fill-color: var(--c-cream-50);
}
@keyframes featureBg {
  0%   { transform: skewX(-8deg) scale(1, 1); }
  100% { transform: skewX(-8deg) scale(1.02, 1.05); }
}
@keyframes featureBgEn {
  0%   { transform: skewX(-4deg) scale(1, 1); }
  100% { transform: skewX(-4deg) scale(1.02, 1.05); }
}
[lang="en"] .hero-headline .hh-feature::before {
  animation-name: featureBgEn;
}
.hero-headline .hh-feature {
  color: var(--c-cream-50);
  -webkit-text-fill-color: var(--c-cream-50);
}
 
/* Comma styled */
.hero-headline .hh-comma {
  display: inline-block;
  color: var(--c-amber);
  font-size: 1.3em;
  line-height: 0;
  align-self: center;
  margin-inline-start: -0.05em;
  animation: commaPulse 2s ease-in-out infinite;
}
@keyframes commaPulse {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-0.05em) rotate(-4deg); }
}
/* In English, hide the standalone comma — it would dangle awkwardly between
   two long English words on one line. */
[lang="en"] .hero-headline .hh-comma { display: none; }
 
/* Ampersand connector */
.hero-headline .hh-amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--c-amber);
  margin-inline-end: 0.12em;
  display: inline-block;
  line-height: 0.8;
  align-self: center;
  transform: rotate(-8deg);
  position: relative;
  top: -0.12em;
}
[dir="rtl"] .hero-headline .hh-amp::before {
  content: '·';
  margin-inline-end: 0.2em;
  color: var(--c-ink-500);
  font-weight: 900;
}
/* English: tighter ampersand, no extra dot prefix */
[lang="en"] .hero-headline .hh-amp {
  font-size: 0.7em;
  margin-inline-end: 0.08em;
  top: -0.08em;
}
 
/* "لا يُنسى" / "Impact" — italic serif, smaller */
.hero-headline .hh-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--c-ink-700);
  position: relative;
  padding-inline-start: 0.1em;
}
.hero-headline .hh-italic::before {
  content: '';
  position: absolute;
  bottom: 0.1em;
  inset-inline-start: 0;
  width: 100%;
  height: 0.06em;
  background: linear-gradient(90deg, var(--c-amber), transparent);
  transform: scaleX(0);
  transform-origin: right;
  animation: italicLine 2s var(--ease-out) 1.5s forwards;
}
[dir="ltr"] .hero-headline .hh-italic::before { transform-origin: left; }
@keyframes italicLine { to { transform: scaleX(1); } }
 
/* English: keep the italic word at full weight so it doesn't look orphaned */
[lang="en"] .hero-headline .hh-italic {
  font-size: 0.78em;
  font-weight: 600;
}
 
/* Editorial stamp seal — top-right of headline */
.hero-headline .hh-stamp {
  position: absolute;
  top: clamp(-20px, -1vw, 0px);
  inset-inline-end: clamp(40px, 8vw, 140px);
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  color: var(--c-amber);
  pointer-events: none;
  opacity: 0.85;
  animation: stampSpin 30s linear infinite;
}
@keyframes stampSpin { to { transform: rotate(360deg); } }
.hero-headline .hh-stamp svg { width: 100%; height: 100%; }
.hero-headline .hh-stamp text {
  fill: currentColor;
  font-family: var(--font-en);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
[lang="ar"] .hero-headline .hh-stamp text {
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
/* In English the headline columns are wider; pin the stamp to the far edge
   so it sits BESIDE the headline rather than over the second word. */
[lang="en"] .hero-headline .hh-stamp {
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  /* Move down so it sits near the lead, NOT over Advertising */
  top: auto;
  bottom: clamp(-30px, -2vw, -10px);
  inset-inline-end: clamp(20px, 4vw, 60px);
  opacity: 0.7;
}
 
@media (max-width: 900px) {
  /* On tablet+small desktops, English wraps to two rows safely once font is small enough */
  [lang="en"] .hero-headline .hh-row { flex-wrap: wrap; }
  [lang="en"] .hero-headline { font-size: clamp(34px, 6vw, 64px); }
}
@media (max-width: 700px) {
  .hero-headline { font-size: clamp(30px, 11vw, 50px); }
  [lang="en"] .hero-headline { font-size: clamp(30px, 9vw, 52px); }
  .hero-headline .hh-stamp { display: none; }
  .hero-headline .hh-row--bottom { padding-inline-start: 0.4em; }
}
@media (max-width: 480px) {
  .hero-headline .hh-feature::before { inset: 0.05em -0.08em; }
}
 
/* Lead with editorial bar before */
.hero-lead {
  position: relative;
  max-width: 56ch;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.85;
  color: var(--c-ink-500);
  padding-inline-start: 26px;
  border-inline-start: 2px solid var(--c-amber);
}
[lang="ar"] .hero-lead { font-family: var(--font-ar); line-height: 1.95; font-weight: 400; }
 
/* CTA row */
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 44px) !important; }
 
/* Floating word-cloud — 3 keywords drifting in space */
.hero-keywords {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-keyword {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(14,14,15,0.12);
  text-stroke: 1.5px rgba(14,14,15,0.12);
  white-space: nowrap;
  user-select: none;
  will-change: transform;
}
[lang="en"] .hero-keyword { font-family: var(--font-en); font-weight: 800; letter-spacing: -0.05em; }
html.dark .hero-keyword { -webkit-text-stroke: 1.5px rgba(255,249,238,0.12); }
 
.hero-keyword.kw1 {
  top: 12%; inset-inline-end: 8%;
  animation: kwDrift 9s ease-in-out infinite;
}
.hero-keyword.kw2 {
  top: 50%; inset-inline-end: 4%;
  animation: kwDrift 11s ease-in-out infinite reverse;
  animation-delay: 0.5s;
}
.hero-keyword.kw3 {
  bottom: 18%; inset-inline-end: 14%;
  animation: kwDrift 8s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes kwDrift {
  0%, 100% { transform: translate(0, 0) rotate(0); opacity: 0.7; }
  25%      { transform: translate(-12px, -8px) rotate(-1deg); opacity: 0.9; }
  50%      { transform: translate(8px, 12px) rotate(1deg); opacity: 0.5; }
  75%      { transform: translate(-6px, 6px) rotate(-0.5deg); opacity: 0.8; }
}
@media (max-width: 980px) {
  .hero-keyword.kw1, .hero-keyword.kw2, .hero-keyword.kw3 {
    inset-inline-end: -10%;
  }
}
@media (max-width: 700px) {
  .hero-keywords { display: none; }
}
 
/* ============================================================
   Hero Meta — Boarding-pass style strip
============================================================ */
.hero-meta {
  margin-top: clamp(60px, 8vw, 100px) !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-cream-300);
  border: 1px solid var(--c-cream-300);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: var(--sh-2);
}
.hero-meta-item {
  display: flex; align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 28px) clamp(18px, 2.5vw, 28px);
  background: var(--c-cream-50);
  position: relative;
  transition: background 0.4s var(--ease-out);
}
.hero-meta-item:hover { background: var(--c-cream-100); }
.hero-meta-item .meta-logo {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-cream-100);
  border: 1px solid var(--c-cream-300);
  padding: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.5s var(--ease-out), border-color 0.5s, background 0.5s;
}
.hero-meta-item .meta-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero-meta-item:hover .meta-logo {
  transform: rotate(-12deg) scale(1.08);
  border-color: var(--c-amber);
  background: var(--c-cream-50);
}
.hero-meta-item .hmi-content { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.hero-meta-item .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 900;
  color: var(--c-ink-900);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-meta-item .num small {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--c-amber);
  margin-inline-start: 3px;
}
.hero-meta-item .lbl {
  font-size: 12px;
  color: var(--c-ink-500);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
/* Boarding-pass perforation circles between items */
.hero-meta-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  inset-inline-end: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-cream-100);
  z-index: 2;
}
 
@media (max-width: 700px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-meta-item:nth-child(2)::after,
  .hero-meta-item:last-child::after { display: none; }
  .hero-meta-item .meta-logo { width: 32px; height: 32px; padding: 5px; }
  .hero-meta-item { padding: 18px 16px; gap: 12px; }
}
@media (max-width: 480px) {
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta-item::after { display: none; }
  .hero-meta-item:not(:last-child) { border-bottom: 1px dashed var(--c-cream-300); }
}
 
/* Hero DNA — REMOVED (moved to bottom user-editable section) */
 
/* =============================================================
   13. MARQUEE — Continuous-flow brand strip
============================================================= */
.marquee {
  padding-block: clamp(50px, 7vw, 90px);
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  overflow: hidden;
  position: relative;
  border-block: 1px solid rgba(255,249,238,0.06);
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  /* narrower on mobile so the fades don't eat the whole strip */
  width: clamp(40px, 12vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-ink-900) 10%, transparent 100%); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--c-ink-900) 10%, transparent 100%); }
 
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  /* iOS-safe animation: translate3d forces GPU compositing, prevents stutter on iPhone Safari */
  animation: marqueeRun 32s linear infinite;
  white-space: nowrap;
  /* Critical for iOS Safari: hardware acceleration + correct layer promotion */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
  perspective: 1000;
}
[dir="ltr"] .marquee-track { animation-name: marqueeRunLtr; }
/* iOS Safari requires 3D transforms to keep flex/Arabic layout running smoothly */
@keyframes marqueeRun {
  from { -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(50%, 0, 0);  transform: translate3d(50%, 0, 0); }
}
@keyframes marqueeRunLtr {
  from { -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
/* Pause-on-hover ONLY for devices that have a real pointer (desktop).
   On touch devices, :hover sticks after a tap and freezes the marquee. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
 
.marquee-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--c-cream-50);
  flex-shrink: 0;
  display: inline-block;
}
[lang="en"] .marquee-word {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.marquee-word.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-cream-50);
  text-stroke: 1.5px var(--c-cream-50);
}
 
/* Star/asterisk separator */
.marquee-sep {
  flex-shrink: 0;
  width: clamp(20px, 2.5vw, 32px);
  height: clamp(20px, 2.5vw, 32px);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--c-amber);
  animation: spinStar 8s linear infinite;
}
.marquee-sep svg { width: 100%; height: 100%; }
@keyframes spinStar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
 
/* =============================================================
   14. ABOUT / VISION / MISSION (Editorial split)
============================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.split.flip { direction: ltr; }
[dir="ltr"] .split.flip { direction: rtl; }
.split.flip > * { direction: rtl; }
[dir="ltr"] .split.flip > * { direction: ltr; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
 
.split-text > * + * { margin-top: 22px; }
.split-text h2 { font-size: clamp(36px, 4.4vw, 64px); }
 
.split-visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--grad-cream);
  box-shadow: var(--sh-3);
  transform: translateY(0);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s;
}
.split-visual:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -16px rgba(14,14,15,0.25); }
.split-visual::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('img/backgraund.png');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.split-visual-content {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 12%;
  z-index: 1;
}
.split-tile {
  background: var(--c-cream-50);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-1);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 48px);
  font-weight: 900;
  color: var(--c-ink-900);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), background 0.4s;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.1;
}
[lang="en"] .split-tile {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.split-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.7s var(--ease-out);
}
.split-tile:hover { transform: scale(1.04); }
.split-tile:hover::after { background-position: -200% 0; }
.split-tile.amber { background: var(--c-amber); color: var(--c-cream-50); }
.split-tile.dark  { background: var(--c-ink-900); color: var(--c-cream-50); }
.split-tile.rose  { background: var(--c-rose); color: var(--c-cream-50); }
 
/* Logo tile variant */
.split-tile.logo {
  background: var(--c-cream-50);
  padding: 18%;
}
.split-tile.logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(14,14,15,0.12));
  animation: tileLogoFloat 4s ease-in-out infinite;
}
@keyframes tileLogoFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
 
/* =============================================================
   15. VALUES — Editorial cards
============================================================= */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }
 
.value-card {
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: var(--c-cream-400);
  box-shadow: var(--sh-3);
}
.value-card .num {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-amber);
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}
.value-card h4 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  color: var(--c-ink-900);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.value-card p {
  font-size: 14px;
  color: var(--c-ink-500);
  line-height: 1.7;
}
.value-card .arrow {
  margin-top: 22px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-cream-400);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-500);
  transition: all 0.4s var(--ease-out);
}
.value-card:hover .arrow {
  background: var(--c-ink-900);
  border-color: var(--c-ink-900);
  color: var(--c-cream-50);
  transform: rotate(-45deg);
}
[dir="ltr"] .value-card:hover .arrow { transform: rotate(-135deg); }
.value-card .arrow svg { width: 16px; height: 16px; }
 
/* =============================================================
   16. OBJECTIVES
============================================================= */
.obj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .obj-grid { grid-template-columns: 1fr; } }
 
.obj-card {
  position: relative;
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.obj-card:hover { transform: translateY(-4px); }
.obj-card .obj-num {
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-cream-200);
  position: absolute;
  top: 16px;
  inset-inline-end: 24px;
  pointer-events: none;
  letter-spacing: -0.04em;
}
.obj-card h4 {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 900;
  color: var(--c-ink-900);
  margin-bottom: 18px;
}
.obj-card ul {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.obj-card li {
  display: flex; gap: 10px;
  font-size: 14px;
  color: var(--c-ink-500);
  line-height: 1.6;
}
.obj-card li::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-amber);
  margin-top: 8px;
}
 
/* =============================================================
   17. STATS BAND
============================================================= */
.stats {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  padding-block: clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
/* .stats DNA override — REMOVED */
.stats-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stats-item .num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--c-cream-50) 0%, var(--c-cream-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats-item .lbl {
  font-size: 14px;
  color: rgba(255,249,238,0.6);
  margin-top: 12px;
  letter-spacing: 0.02em;
}
.stats-item .lbl-en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-top: 4px;
}
 
/* =============================================================
   18. SERVICES — Tabs (Desktop + Mobile, RTL/LTR aware)
============================================================= */
.services-tabs-wrap {
  margin-bottom: 48px;
  position: relative;
}
.services-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 6px;
  background: var(--c-cream-200);
  border-radius: 999px;
  border: 1px solid var(--c-cream-300);
  width: 100%;
  max-width: 100%;
  box-shadow: inset 0 1px 2px rgba(14,14,15,0.04);
  /* Desktop: full-width pill stretched edge-to-edge inside the container */
}
@media (min-width: 1100px) {
  .services-tabs {
    /* Stretch tabs evenly across the full bar on desktop */
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .services-tab {
    flex: 1 1 0;
    justify-content: center;
  }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .services-tabs {
    flex-wrap: wrap;
    border-radius: 22px;
  }
}
.services-tab {
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  color: var(--c-ink-500);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
}
.services-tab .tab-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
  opacity: 0.85;
}
.services-tab .count {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  min-width: 28px;
  text-align: center;
  border-radius: 999px;
  background: var(--c-cream-300);
  color: var(--c-ink-500);
  transition: background 0.3s, color 0.3s;
  letter-spacing: 0.02em;
}
.services-tab:hover {
  color: var(--c-ink-900);
  background: rgba(255,255,255,0.6);
}
.services-tab:hover .tab-icon { transform: rotate(-6deg) scale(1.1); }
.services-tab.active {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  box-shadow: var(--sh-2), 0 6px 18px rgba(14,14,15,0.18);
  transform: translateY(-1px);
}
.services-tab.active .tab-icon { opacity: 1; transform: rotate(0); }
.services-tab.active .count {
  background: var(--c-amber);
  color: var(--c-ink-900);
}

/* ===== Mobile (≤760px) — horizontal scrollable pill bar with edge fade ===== */
@media (max-width: 760px){
  .services-tabs-wrap {
    /* Bleed to edges on mobile so the scroll feels natural */
    margin-inline: calc(var(--gutter, 20px) * -1);
    padding-inline: var(--gutter, 20px);
    overflow: hidden;
    position: relative;
  }
  /* Fade hints (edge gradients) to suggest horizontal scroll */
  .services-tabs-wrap::before,
  .services-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s;
  }
  .services-tabs-wrap::before {
    inset-inline-start: 0;
    background: linear-gradient(to var(--scroll-end-dir-start, right), var(--c-cream-100, #faf6ee) 30%, transparent);
  }
  .services-tabs-wrap::after {
    inset-inline-end: 0;
    background: linear-gradient(to var(--scroll-end-dir-end, left), var(--c-cream-100, #faf6ee) 30%, transparent);
  }
  [dir="rtl"] .services-tabs-wrap::before { background: linear-gradient(to left, var(--c-cream-100, #faf6ee) 30%, transparent); }
  [dir="rtl"] .services-tabs-wrap::after  { background: linear-gradient(to right, var(--c-cream-100, #faf6ee) 30%, transparent); }
  [dir="ltr"] .services-tabs-wrap::before { background: linear-gradient(to right, var(--c-cream-100, #faf6ee) 30%, transparent); }
  [dir="ltr"] .services-tabs-wrap::after  { background: linear-gradient(to left, var(--c-cream-100, #faf6ee) 30%, transparent); }

  .services-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 999px;
  }
  .services-tabs::-webkit-scrollbar { display: none; }
  .services-tab {
    padding: 10px 16px;
    font-size: 13px;
    scroll-snap-align: start;
    flex-shrink: 0;
    gap: 8px;
  }
  .services-tab .tab-icon { width: 16px; height: 16px; }
  .services-tab .count { font-size: 10px; min-width: 24px; padding: 2px 6px; }
}

/* ===== Services Grid — Desktop & Mobile (12-column responsive system) ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* Wider desktops: 4 columns max, perfect alignment */
@media (min-width: 1280px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}
/* Mid desktops: 3 columns */
@media (min-width: 900px) and (max-width: 1279px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
/* Tablets: 2 columns */
@media (min-width: 600px) and (max-width: 899px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
/* Mobile: 2 columns of compact cards (better than single-column for "All" view of 45 items) */
@media (max-width: 599px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
/* Very small phones: 1 column */
@media (max-width: 360px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


.service-card {
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
  position: relative;
}
.service-card::before {
  /* Brand accent line that animates in on hover */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-amber) 0%, var(--c-amber-light, #ec008c) 50%, var(--c-amber) 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
  z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--c-cream-400);
  box-shadow: var(--sh-3), 0 24px 48px -16px rgba(14,14,15,0.18);
}
.service-card:hover::before { transform: scaleX(1); }

.service-img {
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 30% 20%, rgba(40,171,226,0.06), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(251,176,64,0.06), transparent 60%),
    var(--c-cream-200);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--c-cream-300);
}
.service-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.service-card:hover .service-img img {
  transform: scale(1.06);
}
/* Numbered badge in corner */
.service-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  background: rgba(14,14,15,0.78);
  color: var(--c-cream-50);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.service-card:hover .service-badge {
  background: var(--c-amber);
  color: var(--c-ink-900);
  transform: scale(1.05);
}
/* Subtle gradient overlay on image */
.service-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14,14,15,0.04) 100%);
  pointer-events: none;
  transition: opacity 0.4s;
  opacity: 0;
}
.service-card:hover .service-img-overlay { opacity: 1; }

.service-body {
  padding: 22px 24px 22px;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.service-body h4 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 900;
  color: var(--c-ink-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.service-body .en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink-300);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
[dir="ltr"] .service-body .en {
  /* In LTR mode, the .en field shows the AR name — use Arabic font */
  font-family: var(--font-display);
  direction: rtl;
  text-align: start;
}

.service-body .cta {
  margin-top: 14px; padding: 10px 16px;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--c-ink-900);
  background: var(--c-cream-100, #F5F0E3);
  border: 1px solid var(--c-cream-300);
  border-radius: 999px;
  transition: color 0.3s, background 0.3s, gap 0.3s var(--ease-out), border-color 0.3s, transform 0.3s;
  align-self: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.service-body .cta:hover,
.service-card:hover .service-body .cta {
  color: var(--c-cream-50);
  background: var(--c-ink-900);
  border-color: var(--c-ink-900);
  gap: 14px;
}
.service-body .cta svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
[dir="ltr"] .service-body .cta svg { transform: rotate(180deg); }
[dir="ltr"] .service-card:hover .service-body .cta svg { transform: rotate(180deg) translateX(2px); }
[dir="rtl"] .service-card:hover .service-body .cta svg { transform: translateX(-2px); }

/* ===== Mobile-compact card (≤599px) — denser layout for "All" view ===== */
@media (max-width: 599px) {
  .service-body {
    padding: 14px 14px 14px;
    gap: 4px;
  }
  .service-body h4 {
    font-size: 15px;
    line-height: 1.2;
  }
  .service-body .en {
    font-size: 10px;
    line-height: 1.2;
  }
  .service-body .cta {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 11px;
    gap: 6px;
  }
  .service-body .cta svg { width: 12px; height: 12px; }
  .service-badge {
    top: 8px;
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.04em;
  }
  .service-card::before { height: 2px; }
}

/* ===== Tablet & mid-screen polish ===== */
@media (min-width: 600px) and (max-width: 899px) {
  .service-body { padding: 18px 18px 18px; }
  .service-body h4 { font-size: 17px; }
  .service-body .cta { font-size: 12px; padding: 9px 14px; }
}

/* ===== Smooth grid entry animation when switching tabs ===== */
.services-grid .service-card {
  animation: serviceCardIn 0.5s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
@keyframes serviceCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .services-grid .service-card { animation: none; }
}
 
/* =============================================================
   19. PORTFOLIO — Masonry
============================================================= */
.pf-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 36px;
}
.pf-filter {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--c-ink-500);
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  transition: all 0.3s var(--ease-out);
}
.pf-filter:hover { color: var(--c-ink-900); border-color: var(--c-cream-400); }
.pf-filter.active {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  border-color: var(--c-ink-900);
}
 
.pf-grid {
  columns: 3 280px;
  column-gap: 20px;
}
@media (max-width: 700px) { .pf-grid { columns: 2 160px; column-gap: 12px; } }
 
.pf-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--c-cream-200);
  display: block;
  transform: translateY(0);
  transition: transform 0.5s var(--ease-out);
}
.pf-item:hover { transform: translateY(-4px); }
.pf-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.pf-item:hover img { transform: scale(1.04); filter: brightness(0.85); }
 
.pf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column; justify-content: flex-end;
  padding: 18px 20px;
  background: linear-gradient(0deg, rgba(14,14,15,0.85) 0%, rgba(14,14,15,0) 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.pf-item:hover .pf-overlay { opacity: 1; }
.pf-overlay .cat {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-bottom: 6px;
}
.pf-overlay .title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--c-cream-50);
  letter-spacing: -0.01em;
}
.pf-zoom {
  position: absolute;
  top: 14px; inset-inline-end: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(253,250,244,0.9);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-900);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s var(--ease-out);
}
.pf-item:hover .pf-zoom { opacity: 1; transform: scale(1); }
.pf-zoom svg { width: 14px; height: 14px; }
 
/* Lightbox */
.lb {
  position: fixed; inset: 0;
  background: rgba(14,14,15,0.96);
  z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 40px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.lb.open { opacity: 1; visibility: visible; }
.lb-inner {
  max-width: 90vw;
  max-height: 80vh;
  position: relative;
}
.lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lb-cap {
  position: absolute;
  top: calc(100% + 18px);
  left: 0; right: 0;
  text-align: center;
  color: var(--c-cream-50);
  font-family: var(--font-display);
  font-size: 18px;
}
.lb-cap small {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-top: 4px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(253,250,244,0.1);
  border: 1px solid rgba(253,250,244,0.2);
  color: var(--c-cream-50);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease-out);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
  background: rgba(253,250,244,0.2);
  transform: scale(1.05);
}
.lb-close { top: 30px; inset-inline-end: 30px; }
.lb-prev  { top: 50%; inset-inline-start: 30px; transform: translateY(-50%); }
.lb-next  { top: 50%; inset-inline-end: 30px;  transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { transform: scale(1.05) translateY(-50%); }
.lb-close:hover { transform: scale(1.05); }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 18px; height: 18px; }
 
/* =============================================================
   20. CONTACT
============================================================= */
.quote {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--c-cream-300);
  background: var(--c-cream-50);
  box-shadow: var(--sh-3);
  position: relative;
}
 
@media (max-width: 900px) { .quote { grid-template-columns: 1fr; } }
 
.quote-aside {
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  padding: clamp(36px, 5vw, 60px);
  position: relative;
  overflow: hidden;
}
.quote-aside h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.quote-aside p {
  color: rgba(255,249,238,0.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.quote-info-row {
  display: flex; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,249,238,0.08);
  position: relative; z-index: 1;
}
.quote-info-row:last-child { border-bottom: 0; }
.quote-info-row .ic {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(214,149,39,0.18);
  border: 1px solid rgba(214,149,39,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-amber);
}
.quote-info-row .ic svg { width: 18px; height: 18px; }
.quote-info-row > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.quote-info-row strong {
  font-size: 12px;
  color: rgba(255,249,238,0.5);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.quote-info-row a, .quote-info-row span {
  font-size: 15px;
  color: var(--c-cream-50);
  font-weight: 600;
}
 
.quote-form {
  padding: clamp(36px, 5vw, 60px);
}
.qf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .qf-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .quote-aside { padding: 32px 24px; }
  .quote-form { padding: 32px 24px; }
  .quote-aside h3 { font-size: 26px; }
  .quote-aside p { font-size: 14px; margin-bottom: 24px; }
  .quote-info-row { padding: 14px 0; gap: 12px; }
  .quote-info-row .ic { width: 36px; height: 36px; }
  .quote-info-row a, .quote-info-row span { font-size: 13.5px; word-break: break-word; }
}
.qf-field { display: flex; flex-direction: column; gap: 6px; }
.qf-field.full { grid-column: 1 / -1; }
.qf-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-500);
  letter-spacing: 0.02em;
}
.qf-field label::after { content: ''; }
.qf-field.required label::after { content: ' *'; color: var(--c-rose); }
 
.qf-field input,
.qf-field select,
.qf-field textarea {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--c-cream-300);
  background: var(--c-cream-50);
  font: inherit;
  font-size: 14px;
  color: var(--c-ink-900);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.qf-field input:focus,
.qf-field select:focus,
.qf-field textarea:focus {
  outline: none;
  border-color: var(--c-amber);
  box-shadow: 0 0 0 4px rgba(214,149,39,0.12);
}
.qf-field textarea { min-height: 120px; resize: vertical; font-family: inherit; }
 
.qf-submit {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.3s var(--ease-out);
  margin-top: 8px;
}
.qf-submit:hover {
  background: var(--c-amber-d);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(214,149,39,0.5);
}
.qf-submit svg { width: 16px; height: 16px; }
 
.qf-success {
  display: none;
  padding: 40px;
  text-align: center;
}
.qf-success.show { display: block; }
.qf-success .check {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--c-amber);
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cream-50);
}
.qf-success .check svg { width: 32px; height: 32px; }
.qf-success h4 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--c-ink-900);
}
.qf-success p { color: var(--c-ink-500); }


/* =============================================================
   20.5  LOCATION MAP — Premium framed showcase
============================================================= */
.location-showcase {
  margin-top: clamp(40px, 6vw, 72px);
  position: relative;
}
.location-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.location-showcase-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
[lang="ar"] .location-showcase-eyebrow { font-family: var(--font-ar); letter-spacing: 0.04em; }
.location-showcase-eyebrow::before {
  content: '';
  width: 28px; height: 1.5px;
  background: var(--c-amber);
}
.location-showcase-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  line-height: 1.15;
  margin: 6px 0 0;
}
[lang="ar"] .location-showcase-title { font-family: var(--font-ar); font-weight: 900; }
.location-showcase-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.location-showcase-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.3s var(--ease-out);
  border: 1.5px solid var(--c-ink-900);
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  cursor: pointer;
}
.location-showcase-btn:hover {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: var(--c-ink-900);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(214,149,39,0.28);
}
.location-showcase-btn--ghost {
  background: transparent;
  color: var(--c-ink-900);
}
.location-showcase-btn--ghost:hover {
  background: var(--c-ink-900);
  border-color: var(--c-ink-900);
  color: var(--c-cream-50);
  box-shadow: 0 10px 24px rgba(14,14,15,0.18);
}
.location-showcase-btn svg { width: 16px; height: 16px; }

.location-map-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-ink-900);
  border: 1px solid var(--c-cream-300);
  box-shadow: var(--sh-3), 0 28px 60px -28px rgba(14,14,15,0.35);
  isolation: isolate;
}
.location-map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(360px, 52vh, 520px);
  border: 0;
  filter: grayscale(0.15) contrast(1.02);
  transition: filter 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.location-map-frame:hover iframe {
  filter: grayscale(0) contrast(1.05);
}

/* Corner brackets — match the agency aesthetic */
.location-map-frame::before,
.location-map-frame::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  border: 2.5px solid var(--c-amber);
  pointer-events: none;
  z-index: 4;
  transition: all 0.5s var(--ease-out);
}
.location-map-frame::before {
  top: 14px; inset-inline-start: 14px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 8px;
}
[dir="rtl"] .location-map-frame::before {
  border-right: 2.5px solid var(--c-amber); border-left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
}
.location-map-frame::after {
  bottom: 14px; inset-inline-end: 14px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 8px;
}
[dir="rtl"] .location-map-frame::after {
  border-left: 2.5px solid var(--c-amber); border-right: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 8px;
}
.location-map-frame:hover::before { transform: translate(-3px, -3px); }
.location-map-frame:hover::after  { transform: translate(3px, 3px); }
[dir="rtl"] .location-map-frame:hover::before { transform: translate(3px, -3px); }
[dir="rtl"] .location-map-frame:hover::after  { transform: translate(-3px, 3px); }

/* Floating logo + address card overlay on map */
.location-map-card {
  position: absolute;
  z-index: 5;
  bottom: 22px;
  inset-inline-start: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  background: rgba(255, 249, 238, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(14,14,15,0.35), 0 2px 8px rgba(14,14,15,0.08);
  max-width: calc(100% - 44px);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
[dir="rtl"] .location-map-card {
  padding: 14px 14px 14px 20px;
}
.location-map-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -16px rgba(14,14,15,0.4), 0 4px 12px rgba(14,14,15,0.1);
}
.location-map-card-logo {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--c-cream-50);
  border: 1.5px solid var(--c-cream-300);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(14,14,15,0.1);
  position: relative;
}
.location-map-card-logo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c-amber), transparent 30%, transparent 70%, var(--c-amber));
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}
.location-map-card:hover .location-map-card-logo::after { opacity: 0.6; }
.location-map-card-logo img {
  width: 78%; height: 78%;
  object-fit: contain;
}
.location-map-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.location-map-card-text strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-amber);
  text-transform: uppercase;
}
[lang="ar"] .location-map-card-text strong {
  font-family: var(--font-ar);
  letter-spacing: 0.02em;
  font-size: 11.5px;
}
.location-map-card-text span {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink-900);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[lang="ar"] .location-map-card-text span { font-family: var(--font-ar); }

/* Pin / pulse marker (decorative) on opposite corner */
.location-map-pin {
  position: absolute;
  z-index: 4;
  top: 22px;
  inset-inline-end: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-amber);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-900);
  box-shadow: 0 10px 24px rgba(214,149,39,0.4);
}
.location-map-pin svg { width: 22px; height: 22px; }
.location-map-pin::before,
.location-map-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-amber);
  animation: locPulse 2.4s var(--ease-out) infinite;
}
.location-map-pin::after { animation-delay: 1.2s; }
@keyframes locPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2);   opacity: 0; }
}

@media (max-width: 640px) {
  .location-showcase-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .location-showcase-actions { width: 100%; }
  .location-showcase-btn { flex: 1; justify-content: center; padding: 11px 16px; font-size: 13px; }
  .location-map-frame iframe { height: 340px; }
  .location-map-card {
    bottom: 14px;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    max-width: none;
    padding: 10px 16px 10px 10px;
    gap: 12px;
  }
  [dir="rtl"] .location-map-card { padding: 10px 10px 10px 16px; }
  .location-map-card-logo { width: 44px; height: 44px; }
  .location-map-card-text span { font-size: 13px; white-space: normal; }
  .location-map-pin { width: 38px; height: 38px; top: 14px; inset-inline-end: 14px; }
  .location-map-pin svg { width: 18px; height: 18px; }
  .location-map-frame::before,
  .location-map-frame::after { width: 26px; height: 26px; }
}


/* =============================================================
   21. FOOTER — Cinematic, animated, layered
============================================================= */
.footer {
  position: relative;
  background: var(--c-cream-200);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--c-cream-300);
}
html.dark .footer { background: var(--c-cream-100); }
 
/* Footer DNA — REMOVED (moved to bottom user-editable section) */
 
/* ============================================================
   CTA Band — top of footer
============================================================ */
.footer-cta-band {
  position: relative;
  padding-block: clamp(60px, 9vw, 110px);
  background: linear-gradient(180deg, var(--c-cream-200) 0%, var(--c-cream-100) 100%);
  border-bottom: 1px solid var(--c-cream-300);
  z-index: 2;
}
html.dark .footer-cta-band {
  background: linear-gradient(180deg, var(--c-cream-100) 0%, var(--c-cream-50) 100%);
}
 
.footer-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}
@media (max-width: 900px) {
  .footer-cta-grid { grid-template-columns: 1fr; align-items: stretch; gap: 32px; }
}
 
.footer-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: 22px;
}
[lang="ar"] .footer-cta-eyebrow {
  font-family: var(--font-ar); letter-spacing: 0.04em; text-transform: none; font-size: 13px;
}
.footer-cta-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--c-amber);
}
 
.footer-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 90px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-ink-900);
}
[lang="en"] .footer-cta-headline { font-family: var(--font-en); font-weight: 800; letter-spacing: -0.05em; }
 
.fctah-line {
  display: block;
  overflow: hidden;
}
.fctah-line > span { display: inline-block; }
.fctah-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-rose) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.fctah-italic::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: 0; right: 0;
  height: 0.06em;
  background: linear-gradient(90deg, var(--c-amber), var(--c-rose));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.4s var(--ease-out) 0.4s;
}
[dir="ltr"] .fctah-italic::after { transform-origin: left; }
.footer-cta-band.in .fctah-italic::after { transform: scaleX(1); }
 
.fctah-dot { color: var(--c-amber); }
 
.footer-cta-actions {
  display: flex; flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.footer-cta-btn {
  width: 100%;
  justify-content: space-between;
  padding: 18px 26px;
  font-size: 15px;
  border-radius: 999px;
}
.footer-cta-btn svg { transition: transform 0.4s var(--ease-out); }
.footer-cta-btn:hover svg { transform: translateX(-4px); }
[dir="ltr"] .footer-cta-btn:hover svg { transform: translateX(4px) rotate(180deg); }
[dir="ltr"] .footer-cta-btn svg { transform: rotate(180deg); }
 
.footer-cta-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-700);
  transition: color 0.3s, gap 0.3s var(--ease-out);
}
.footer-cta-link:hover { color: var(--c-amber); gap: 18px; }
.footer-cta-link-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  display: flex; align-items: center; justify-content: center;
  color: #25D366;
  transition: transform 0.3s, box-shadow 0.3s;
}
.footer-cta-link:hover .footer-cta-link-icon {
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 8px 16px -4px rgba(37,211,102,0.4);
}
.footer-cta-link-icon svg { width: 14px; height: 14px; }
 
/* ============================================================
   Footer Marquee — animated brand strip
============================================================ */
.footer-marquee {
  position: relative;
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  padding-block: 22px;
  overflow: hidden;
  z-index: 1;
}
.footer-marquee::before, .footer-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: clamp(28px, 8vw, 80px);
  z-index: 2;
  pointer-events: none;
}
.footer-marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-ink-900), transparent); }
.footer-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--c-ink-900), transparent); }
.footer-marquee-track {
  display: flex; align-items: center; gap: 36px;
  width: max-content;
  animation: footerMarq 28s linear infinite;
  white-space: nowrap;
  /* iOS-safe hardware-accelerated animation */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
  perspective: 1000;
}
[dir="ltr"] .footer-marquee-track { animation-name: footerMarqLtr; }
@keyframes footerMarq {
  from { -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-50%, 0, 0);  transform: translate3d(-50%, 0, 0); }
}
@keyframes footerMarqLtr {
  from { -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-50%, 0, 0);  transform: translate3d(-50%, 0, 0); }
}
/* Pause-on-hover ONLY for desktop (touch :hover stays sticky on mobile) */
@media (hover: hover) and (pointer: fine) {
  .footer-marquee:hover .footer-marquee-track { animation-play-state: paused; }
}
.footer-marquee-item {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-cream-50);
  flex-shrink: 0;
}
[lang="en"] .footer-marquee-item {
  font-family: var(--font-en); letter-spacing: 0.18em; text-transform: uppercase; font-size: clamp(11px, 1.1vw, 13px);
}
.footer-marquee-sep {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-amber);
  flex-shrink: 0;
  animation: marqDotPulse 2s ease-in-out infinite;
}
@keyframes marqDotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.4); opacity: 0.7; }
}
 
/* ============================================================
   Footer Grid — links columns
============================================================ */
.footer .container { padding-block: clamp(60px, 8vw, 100px) 30px; position: relative; z-index: 2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 60px);
  margin-bottom: clamp(50px, 7vw, 80px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
 
/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo-disc {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  padding: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(14,14,15,0.12);
  position: relative;
  transition: transform 0.6s var(--ease-out);
}
.footer-logo-disc::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--c-cream-400);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s, transform 0.6s var(--ease-out);
}
.footer:hover .footer-logo-disc { transform: rotate(-12deg); }
.footer:hover .footer-logo-disc::after { opacity: 1; transform: rotate(180deg); }
.footer-logo-disc img { width: 100%; height: 100%; object-fit: contain; }
 
.footer-logo div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--c-ink-900);
  letter-spacing: -0.01em;
}
.footer-logo div span {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-300);
  margin-top: 4px;
}
.footer-brand p {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--c-ink-500);
  line-height: 1.75;
  max-width: 36ch;
}
[lang="ar"] .footer-brand p { font-family: var(--font-ar); font-size: 14px; line-height: 1.85; }
 
.footer-socials {
  display: flex; gap: 8px;
  margin-top: 8px;
}
.footer-social {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-500);
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.footer-social::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-rose) 100%);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}
.footer-social svg {
  width: 16px; height: 16px;
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-out), color 0.4s;
}
.footer-social:hover {
  border-color: transparent;
  transform: translateY(-4px) scale(1.05);
}
.footer-social:hover::before { transform: scale(1); }
.footer-social:hover svg { color: var(--c-cream-50); transform: scale(1.1); }
 
/* Footer link columns */
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--c-ink-900);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-cream-300);
  letter-spacing: 0.02em;
  position: relative;
}
.footer-col h5::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 32px;
  height: 1px;
  background: var(--c-amber);
  transition: width 0.5s var(--ease-out);
}
.footer-col:hover h5::after { width: 60px; }
 
.footer-col ul li { margin-bottom: 10px; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  color: var(--c-ink-500);
  transition: color 0.3s, gap 0.3s var(--ease-out);
  position: relative;
}
.footer-link::before {
  content: '→';
  display: inline-block;
  width: 0;
  overflow: hidden;
  color: var(--c-amber);
  font-weight: 700;
  transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
[dir="ltr"] .footer-link::before { content: '→'; }
[dir="rtl"] .footer-link::before { content: '←'; }
.footer-link:hover {
  color: var(--c-ink-900);
  gap: 8px;
}
.footer-link:hover::before {
  width: 14px;
  margin-inline-end: 4px;
}
 
/* Contact rows in footer */
.footer-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--c-cream-50);
  border: 1px solid var(--c-cream-300);
  text-decoration: none;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.footer-contact-row::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-amber), var(--c-rose));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.footer-contact-row:hover {
  background: var(--c-cream-100);
  border-color: var(--c-cream-400);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.footer-contact-row:hover::before { transform: scaleY(1); }
.footer-contact-row .ic {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--c-cream-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-700);
  transition: all 0.4s var(--ease-out);
}
.footer-contact-row:hover .ic {
  background: linear-gradient(135deg, var(--c-amber), var(--c-rose));
  color: var(--c-cream-50);
  transform: rotate(-12deg) scale(1.05);
}
.footer-contact-row .ic svg { width: 14px; height: 14px; }
.footer-contact-row > div:nth-child(2) { flex: 1; min-width: 0; }
.footer-contact-row strong {
  display: block;
  font-size: 10.5px;
  color: var(--c-ink-300);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
[lang="ar"] .footer-contact-row strong { letter-spacing: 0.04em; text-transform: none; font-size: 11.5px; }
.footer-contact-row span {
  font-size: 13px;
  color: var(--c-ink-700);
  font-weight: 500;
}
.footer-contact-row .row-arrow {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-300);
  transition: all 0.4s var(--ease-out);
  opacity: 0;
}
.footer-contact-row .row-arrow svg { width: 12px; height: 12px; }
[dir="ltr"] .footer-contact-row .row-arrow svg { transform: rotate(180deg); }
.footer-contact-row:hover .row-arrow {
  opacity: 1;
  background: var(--c-ink-900);
  color: var(--c-cream-50);
}
 
/* ============================================================
   Footer Wordmark — HUGE animated brand
============================================================ */
.footer-wordmark {
  position: relative;
  margin-block: clamp(40px, 6vw, 70px);
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  padding-block: 0.18em 0.32em;
  width: 100%;
}
.footer-wordmark-text {
  font-family: var(--font-display);
  /* Capped so wide Arabic wordmark fits inside the container */
  font-size: clamp(54px, 13vw, 200px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(14,14,15,0.18);
  text-stroke: 1.5px rgba(14,14,15,0.18);
  white-space: nowrap;
  text-align: center;
  display: block;
  width: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 40%,
    rgba(214,149,39,0.4) 50%,
    transparent 60%,
    transparent 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wordmarkSweep 8s linear infinite;
}
[lang="en"] .footer-wordmark-text {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.06em;
}
@keyframes wordmarkSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html.dark .footer-wordmark-text { -webkit-text-stroke: 1.5px rgba(255,249,238,0.18); }
 
@media (max-width: 700px) {
  .footer-wordmark-text {
    font-size: clamp(44px, 16vw, 96px);
    white-space: normal;
    line-height: 1.05;
  }
}
 
/* ============================================================
   Footer Bottom Bar
============================================================ */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--c-cream-300);
  font-family: var(--font-ar);
  font-size: 12px;
  color: var(--c-ink-500);
}
[lang="en"] .footer-bottom { font-family: var(--font-en); font-size: 11.5px; letter-spacing: 0.02em; }
 
.footer-bottom-left { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.footer-bottom-center { justify-self: center; text-align: center; }
.footer-bottom-right { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
 
.footer-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  animation: statusDot 2s ease-in-out infinite;
}
@keyframes statusDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%     { box-shadow: 0 0 0 8px rgba(34,197,94,0.32); transform: scale(1.1); }
}
 
.footer-bottom-heart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--c-rose);
  animation: heartBeat 1.6s ease-in-out infinite;
}
.footer-bottom-heart svg { width: 100%; height: 100%; }
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  20%,40% { transform: scale(1.15); }
  30%     { transform: scale(0.95); }
}
 
@media (max-width: 700px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .footer-bottom-left, .footer-bottom-center, .footer-bottom-right {
    justify-self: center;
  }
}
 
/* ============================================================
   Back to Top Button
============================================================ */
.footer-totop {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 18px;
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 28px -8px rgba(14,14,15,0.3);
  transition: all 0.4s var(--ease-out);
  z-index: 10;
}
.footer-totop svg {
  width: 14px; height: 14px;
  transition: transform 0.4s var(--ease-out);
}
.footer-totop:hover {
  transform: translateX(-50%) translateY(-4px);
  background: var(--c-amber-d);
  box-shadow: 0 20px 36px -8px rgba(214,149,39,0.5);
}
.footer-totop:hover svg { transform: translateY(-3px); }
 
 
/* =============================================================
   22. FAB STACK (above bottom nav)
============================================================= */
.fab-stack {
  position: fixed;
  bottom: calc(var(--bnav-h) + 24px);
  inset-inline-end: 24px;
  z-index: 80;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cream-50);
  box-shadow: var(--sh-3);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.fab:hover { transform: scale(1.08) translateY(-2px); }
.fab.wa { background: #25D366; }
.fab.call { background: var(--c-ink-900); }
.fab svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .fab-stack { inset-inline-end: 14px; gap: 8px; }
  .fab { width: 44px; height: 44px; }
}
 
/* =============================================================
   23. REVEAL ANIMATIONS (CSS-based, JS-enhanced)
============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero-headline [data-reveal] {
  display: inline-block;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.4s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }
 
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="left"].in { transform: translateX(0); }
[dir="ltr"] [data-reveal="left"] { transform: translateX(50px); }
[dir="ltr"] [data-reveal="left"].in { transform: translateX(0); }
 
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="right"].in { transform: translateX(0); }
[dir="ltr"] [data-reveal="right"] { transform: translateX(-50px); }
[dir="ltr"] [data-reveal="right"].in { transform: translateX(0); }
 
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].in { transform: scale(1); }
 
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].in { transform: none; }
 
/* DNA fade-in on section enter — REMOVED (moved to bottom user-editable section) */
 
/* =============================================================
   24. INTERACTIVE ENHANCEMENTS — micro-interactions everywhere
============================================================= */
 
/* Scroll-driven reveal: re-trigger version (subtle exit) */
[data-reveal] {
  transition-property: opacity, transform;
  transition-duration: 0.9s;
  transition-timing-function: var(--ease-out);
}
 
/* Letter-stagger reveal (word-by-word for headlines) */
.split-tile {
  opacity: 0;
  transform: scale(0.7) rotate(-6deg);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-bounce);
}
.in-view .split-tile { opacity: 1; transform: scale(1) rotate(0); }
.in-view .split-tile:nth-child(1) { transition-delay: 0.1s; }
.in-view .split-tile:nth-child(2) { transition-delay: 0.2s; }
.in-view .split-tile:nth-child(3) { transition-delay: 0.3s; }
.in-view .split-tile:nth-child(4) { transition-delay: 0.4s; }
 
/* Button hover — sweeping shine */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
  background-size: 200% 100%;
  background-position: -150% 0;
  transition: background-position 0.6s var(--ease-out);
  z-index: -1;
}
.btn:hover::before { background-position: 150% 0; }
 
/* Service card lift + tilt on hover */
.service-card {
  transform: translateY(0) scale(1);
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
.service-card:hover {
  transform: translateY(-8px) scale(1.015);
}
.service-card:hover .service-img img { transform: scale(1.08) rotate(-2deg); }
.service-card:hover .cta { color: var(--c-amber) !important; gap: 14px !important; }
 
/* Value card — gradient border on hover */
.value-card {
  position: relative;
  isolation: isolate;
}
.value-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 30%, var(--c-amber) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
  padding: 1px;
}
.value-card:hover::before { opacity: 0.8; }
 
/* Portfolio item premium lift */
.pf-item {
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s;
  box-shadow: 0 0 0 transparent;
}
.pf-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 50px -16px rgba(14,14,15,0.25);
  z-index: 5;
  position: relative;
}
 
/* Obj card — number scale on hover */
.obj-card { transition: transform 0.5s var(--ease-out); }
.obj-card:hover { transform: translateY(-4px); }
.obj-card .obj-num {
  transition: transform 0.6s var(--ease-out), color 0.6s;
}
.obj-card:hover .obj-num {
  transform: scale(1.1) rotate(-4deg);
  color: var(--c-amber);
  -webkit-text-fill-color: initial;
}
 
/* Hero CTA pulse animation */
.hero-cta-row .btn--primary {
  position: relative;
}
.hero-cta-row .btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--c-amber);
  opacity: 0;
  animation: ctaPulse 3s ease-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
 
/* Number tickers — micro pulse when visible */
[data-counter] {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
[data-counter].counting { animation: counterPulse 0.4s var(--ease-out); }
@keyframes counterPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}
 
/* Section logo chip subtle bounce on enter */
.sec-head .logo-chip {
  opacity: 0;
  transform: translateX(20px) scale(0.9);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-bounce);
}
[dir="ltr"] .sec-head .logo-chip { transform: translateX(-20px) scale(0.9); }
.sec-head.in .logo-chip,
[data-reveal].in .logo-chip,
.in-view .sec-head .logo-chip { opacity: 1; transform: translateX(0) scale(1); transition-delay: 0.3s; }
 
/* Form field focus — premium glow */
.qf-field input:focus,
.qf-field select:focus,
.qf-field textarea:focus {
  transform: translateY(-1px);
}
 
/* Bottom nav active link bounce */
.bnav-link.active svg { animation: navIconBounce 0.5s var(--ease-bounce); }
@keyframes navIconBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1.12); }
}
 
/* Stats numbers — gradient sweep */
.stats-item .num {
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position 0.8s var(--ease-out);
}
.stats-item:hover .num { background-position: 100% 0; }
 
/* Marquee word hover (when paused) */
.marquee:hover .marquee-word {
  transition: color 0.3s, transform 0.3s;
}
.marquee:hover .marquee-word:hover {
  color: var(--c-amber);
  -webkit-text-fill-color: var(--c-amber);
}
 
/* Hero meta numbers — count-up shake */
.hero-meta-item .num.counting {
  animation: numShake 0.4s ease-out;
}
@keyframes numShake {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
 
/* =============================================================
   25. PARALLAX UTILITY + REDUCE MOTION
============================================================= */
.parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-logo-disc, .hero-visual-orb { animation: none; }
  /* Marquees are CONTENT, not decoration — they must keep moving even when
     the OS asks for reduced motion (some mobile browsers like iOS in Low Power
     Mode force this on by default). Restore the animation explicitly with a
     slower, iOS-friendly duration. */
  .marquee-track {
    animation: marqueeRun 60s linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: 60s !important;
  }
  [dir="ltr"] .marquee-track {
    animation: marqueeRunLtr 60s linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: 60s !important;
  }
  .footer-marquee-track {
    animation: footerMarq 50s linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: 50s !important;
  }
  [dir="ltr"] .footer-marquee-track {
    animation: footerMarqLtr 50s linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: 50s !important;
  }
}
 
/* Keep base body padding when nav hidden state needed */
.no-bnav body { padding-bottom: 0; }
 
/* Print fallback */
@media print {
  .bnav, .fab-stack, .preloader, .cursor-dot, .cursor-ring, .scroll-progress { display: none !important; }
}
 
/* =============================================================================
   ╔═══════════════════════════════════════════════════════════════════════════╗
   ║   ZINAH — RAWASEKH AUTHENTIC LOGO PATTERN                                 ║
   ║   قسم الزخارف — مبنية حصرياً من أشكال شعار رواسخ الغربية الأصلية              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝
 
   النظام:
   ────────
   جميع الزخارف تستخدم *نفس مسارات* SVG شعار رواسخ — لا أشكال جديدة، لا
   ابتكارات. الوحدة الأساسية: قطعة من الشعار بعرض أربع "حروف" (245.64 × 170.59)
   تحوي:
     • النجمات الرباعية الزرقاء/الكهرمانية في الأعلى والأسفل
     • أشكال نصف-الدائرة بأربع توجيهات
     • مربعات صلبة كهرمانية
     • أوراق منحنية بألوان الهوية
     • منحنيات S المستقاة من المسارات الأصلية
 
   ألوان الشعار: ماجنتا #ec008c · سماوي #28abe2 · كهرماني #fbb040 · فحمي #0e0e0f
   ============================================================================= */
 
:root {
  /* وحدة الزخرفة الأساسية = 4 "حروف" من شعار رواسخ، كما هي تماماً في ملف الـ SVG الأصلي */
  --tile-rawasekh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.64 170.59' preserveAspectRatio='xMidYMid meet'><g><path fill='%2328abe2' d='M13.46,26.92c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%23fbb040' d='M44.71,26.92c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%23ec008c' d='M26.92,28.28C26.92,43.14,14.86,55.21,0,55.21C0,40.35,12.06,28.28,26.92,28.28Z'/><path fill='%230e0e0f' d='M31.25,28.28h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%230e0e0f' d='M13.46,57.69c7.43,0,13.46,6.03,13.46,13.46v13.46H0v-13.46C0,63.73,6.03,57.69,13.46,57.69Z'/><path fill='%2328abe2' d='M58.17,84.62h-26.92v-26.92c0,14.87,12.05,26.92,26.92,26.92Z'/><path fill='%23ec008c' d='M13.46,85.98h13.46v26.92h-13.46C6.03,112.9,0,106.87,0,99.44C0,92.01,6.03,85.98,13.46,85.98Z'/><rect fill='%23fbb040' x='31.25' y='85.98' width='26.92' height='26.92'/><path fill='%230e0e0f' d='M13.46,142.31c0-7.43-6.03-13.46-13.46-13.46v-13.46h26.92v13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%2328abe2' d='M58.17,142.31h-26.92v-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46v13.46Z'/><rect fill='%23fbb040' x='0' y='143.67' width='26.92' height='26.92'/><path fill='%23ec008c' d='M31.25,143.67h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%23ec008c' d='M62.49,0h26.92c0,14.86-12.06,26.92-26.92,26.92V0Z'/><rect fill='%23fbb040' x='93.74' y='0' width='26.92' height='26.92'/><path fill='%2328abe2' d='M62.49,28.28h26.92v13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46v-13.46Z'/><path fill='%230e0e0f' d='M107.2,28.28c0,7.43,6.03,13.46,13.46,13.46v13.46H93.74v-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/><rect fill='%23fbb040' x='62.49' y='57.69' width='26.92' height='26.92'/><path fill='%23ec008c' d='M107.2,57.69h13.46v26.92h-13.46c-7.43,0-13.46-6.03-13.46-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><path fill='%2328abe2' d='M62.49,85.98h26.92v26.92c0-14.87-12.05-26.92-26.92-26.92Z'/><path fill='%230e0e0f' d='M107.2,85.98c7.43,0,13.46,6.03,13.46,13.46v13.46H93.74v-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><path fill='%230e0e0f' d='M62.49,115.39h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%23ec008c' d='M93.74,115.39c0,14.86,12.06,26.92,26.92,26.92H93.74v-26.92Z'/><path fill='%23fbb040' d='M75.95,143.67c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/><path fill='%2328abe2' d='M107.2,143.67c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/><path fill='%2328abe2' d='M138.44,26.92c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%23fbb040' d='M169.69,26.92c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%23ec008c' d='M151.9,28.28c0,14.86-12.06,26.92-26.92,26.92c0-14.86,12.06-26.92,26.92-26.92Z'/><path fill='%230e0e0f' d='M156.23,28.28h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%230e0e0f' d='M138.44,57.69c7.43,0,13.46,6.03,13.46,13.46v13.46h-26.92v-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><path fill='%2328abe2' d='M183.15,84.62h-26.92v-26.92c0,14.87,12.05,26.92,26.92,26.92Z'/><path fill='%23ec008c' d='M138.44,85.98h13.46v26.92h-13.46c-7.43,0-13.46-6.03-13.46-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><rect fill='%23fbb040' x='156.23' y='85.98' width='26.92' height='26.92'/><path fill='%230e0e0f' d='M138.44,142.31c0-7.43-6.03-13.46-13.46-13.46v-13.46h26.92v13.46c-7.43,0-13.46,6.03-13.46,13.46Z'/><path fill='%2328abe2' d='M183.15,142.31h-26.92v-13.46c7.43,0,13.46-6.03,13.46-13.46c0,7.43,6.03,13.46,13.46,13.46v13.46Z'/><rect fill='%23fbb040' x='124.98' y='143.67' width='26.92' height='26.92'/><path fill='%23ec008c' d='M156.23,143.67h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%23ec008c' d='M187.47,0h26.92c0,14.86-12.06,26.92-26.92,26.92V0Z'/><rect fill='%23fbb040' x='218.72' y='0' width='26.92' height='26.92'/><path fill='%2328abe2' d='M187.47,28.28h26.92v13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46v-13.46Z'/><path fill='%230e0e0f' d='M232.18,28.28c0,7.43,6.03,13.46,13.46,13.46v13.46h-26.92v-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/><rect fill='%23fbb040' x='187.47' y='57.69' width='26.92' height='26.92'/><path fill='%23ec008c' d='M232.18,57.69h13.46v26.92h-13.46c-7.43,0-13.46-6.03-13.46-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><path fill='%2328abe2' d='M187.47,85.98h26.92v26.92c0-14.87-12.05-26.92-26.92-26.92Z'/><path fill='%230e0e0f' d='M232.18,85.98c7.43,0,13.46,6.03,13.46,13.46v13.46h-26.92v-13.46c0-7.43,6.03-13.46,13.46-13.46Z'/><path fill='%230e0e0f' d='M187.47,115.39h26.92c0,14.86-12.06,26.92-26.92,26.92v-26.92Z'/><path fill='%23ec008c' d='M218.72,115.39c0,14.86,12.06,26.92,26.92,26.92h-26.92v-26.92Z'/><path fill='%23fbb040' d='M200.93,143.67c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/><path fill='%2328abe2' d='M232.18,143.67c0,7.43,6.03,13.46,13.46,13.46c-7.43,0-13.46,6.03-13.46,13.46c0-7.43-6.03-13.46-13.46-13.46c7.43,0,13.46-6.03,13.46-13.46Z'/></g></svg>");
}
 
/* === القاعدة العامة لكل عناصر .deco === */
.deco {
  position: absolute;
  pointer-events: none;
  display: block;
  width: var(--w, 200px);
  height: var(--h, auto);
  top: var(--top, auto);
  bottom: var(--bottom, auto);
  left: var(--left, auto);
  right: var(--right, auto);
  opacity: var(--opacity, 0.5);
  z-index: var(--z, 1);
  transform: scaleX(var(--flipX, 1)) scaleY(var(--flipY, 1)) rotate(var(--rotate, 0deg));
  transform-origin: var(--origin, center);
  transition: opacity 0.6s var(--ease-out, ease-out);
  background-image: var(--tile-rawasekh);
  background-repeat: var(--bg-repeat, no-repeat);
  background-position: var(--bg-pos, center);
  background-size: var(--bg-size, contain);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
 
/* ─────────────────────────────────────────────────────────────────────────────
   POSITIONING — كل تمريرة تحدّد الموضع والحجم فقط، الشكل واحد للجميع
   ───────────────────────────────────────────────────────────────────────────── */
 
/* ── HERO ─────────────────────────── */
.deco-1 {
  --w: clamp(160px, 30vw, 360px);
  --h: clamp(80px, 14vw, 170px);
  --top: 0; --right: 0;
  --opacity: 0.55;
  --bg-pos: top right;
  --bg-size: cover;
}
.deco-2 {
  --w: clamp(160px, 30vw, 360px);
  --h: clamp(80px, 14vw, 170px);
  --top: 0; --left: 0;
  --opacity: 0.55;
  --bg-pos: top left;
  --bg-size: cover;
  --flipX: -1;
}
 
/* ── ABOUT ────────────────────────── */
.deco-3 {
  --w: clamp(150px, 28vw, 330px);
  --h: clamp(75px, 13vw, 160px);
  --bottom: 0; --right: 0;
  --opacity: 0.5;
  --bg-pos: bottom right;
  --bg-size: cover;
  --flipY: -1;
}
.deco-4 {
  --w: clamp(150px, 28vw, 330px);
  --h: clamp(75px, 13vw, 160px);
  --bottom: 0; --left: 0;
  --opacity: 0.5;
  --bg-pos: bottom left;
  --bg-size: cover;
  --flipX: -1; --flipY: -1;
}
 
/* ── VISION — شريط أفقي علوي + سفلي ─────── */
.deco-5 {
  --w: 100%;
  --h: clamp(40px, 5.5vw, 70px);
  --top: 0; --left: 0;
  --opacity: 0.4;
  --bg-repeat: repeat-x;
  --bg-size: auto 100%;
  --bg-pos: left center;
}
.deco-6 {
  --w: 100%;
  --h: clamp(40px, 5.5vw, 70px);
  --bottom: 0; --left: 0;
  --opacity: 0.4;
  --bg-repeat: repeat-x;
  --bg-size: auto 100%;
  --bg-pos: left center;
  --flipY: -1;
}
 
/* ── MISSION — أعمدة جانبية ────────── */
.deco-7 {
  --w: clamp(50px, 6vw, 80px);
  --h: clamp(220px, 36vw, 380px);
  --top: 50%; --right: 0;
  --opacity: 0.4;
  --bg-repeat: repeat-y;
  --bg-size: 100% auto;
  --bg-pos: center top;
  margin-top: clamp(-190px, -18vw, -110px);
}
.deco-8 {
  --w: clamp(50px, 6vw, 80px);
  --h: clamp(220px, 36vw, 380px);
  --top: 50%; --left: 0;
  --opacity: 0.4;
  --bg-repeat: repeat-y;
  --bg-size: 100% auto;
  --bg-pos: center top;
  --flipX: -1;
  margin-top: clamp(-190px, -18vw, -110px);
}
 
/* ── VALUES ───────────────────────── */
.deco-9 {
  --w: clamp(140px, 24vw, 280px);
  --h: clamp(70px, 12vw, 140px);
  --top: 0; --right: 0;
  --opacity: 0.5;
  --bg-pos: top right;
  --bg-size: cover;
}
.deco-10 {
  --w: clamp(140px, 24vw, 280px);
  --h: clamp(70px, 12vw, 140px);
  --top: 0; --left: 0;
  --opacity: 0.5;
  --bg-pos: top left;
  --bg-size: cover;
  --flipX: -1;
}
 
/* ── OBJECTIVES (within values) ───── */
.deco-11 {
  --w: clamp(140px, 24vw, 280px);
  --h: clamp(70px, 12vw, 140px);
  --bottom: 0; --right: 0;
  --opacity: 0.5;
  --bg-pos: bottom right;
  --bg-size: cover;
  --flipY: -1;
}
.deco-12 {
  --w: clamp(140px, 24vw, 280px);
  --h: clamp(70px, 12vw, 140px);
  --bottom: 0; --left: 0;
  --opacity: 0.5;
  --bg-pos: bottom left;
  --bg-size: cover;
  --flipX: -1; --flipY: -1;
}
 
/* ── SERVICES — شريط أفقي ────────── */
.deco-13 {
  --w: 100%;
  --h: clamp(36px, 4.8vw, 56px);
  --top: 0; --left: 0;
  --opacity: 0.35;
  --bg-repeat: repeat-x;
  --bg-size: auto 100%;
  --bg-pos: left center;
}
.deco-14 {
  --w: 100%;
  --h: clamp(36px, 4.8vw, 56px);
  --bottom: 0; --left: 0;
  --opacity: 0.35;
  --bg-repeat: repeat-x;
  --bg-size: auto 100%;
  --bg-pos: left center;
  --flipY: -1;
}
 
/* ── PORTFOLIO ────────────────────── */
.deco-15 {
  --w: clamp(130px, 22vw, 260px);
  --h: clamp(65px, 11vw, 130px);
  --top: 0; --right: 0;
  --opacity: 0.45;
  --bg-pos: top right;
  --bg-size: cover;
}
.deco-16 {
  --w: clamp(130px, 22vw, 260px);
  --h: clamp(65px, 11vw, 130px);
  --top: 0; --left: 0;
  --opacity: 0.45;
  --bg-pos: top left;
  --bg-size: cover;
  --flipX: -1;
}
 
/* ── CONTACT ──────────────────────── */
.deco-17 {
  --w: clamp(150px, 26vw, 300px);
  --h: clamp(75px, 13vw, 150px);
  --bottom: 0; --right: 0;
  --opacity: 0.5;
  --bg-pos: bottom right;
  --bg-size: cover;
  --flipY: -1;
}
.deco-18 {
  --w: clamp(150px, 26vw, 300px);
  --h: clamp(75px, 13vw, 150px);
  --bottom: 0; --left: 0;
  --opacity: 0.5;
  --bg-pos: bottom left;
  --bg-size: cover;
  --flipX: -1; --flipY: -1;
}
 
/* ── FOOTER — أعمدة جانبية ────────── */
.deco-19 {
  --w: clamp(45px, 5.5vw, 70px);
  --h: clamp(180px, 30vw, 340px);
  --top: 50%; --right: 0;
  --opacity: 0.32;
  --bg-repeat: repeat-y;
  --bg-size: 100% auto;
  --bg-pos: center top;
  margin-top: clamp(-170px, -15vw, -90px);
}
.deco-20 {
  --w: clamp(45px, 5.5vw, 70px);
  --h: clamp(180px, 30vw, 340px);
  --top: 50%; --left: 0;
  --opacity: 0.32;
  --bg-repeat: repeat-y;
  --bg-size: 100% auto;
  --bg-pos: center top;
  --flipX: -1;
  margin-top: clamp(-170px, -15vw, -90px);
}
 
/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — أبعاد متناسقة لكل شاشة
   ───────────────────────────────────────────────────────────────────────────── */
 
/* تابلت — تخفيف بسيط */
@media (max-width: 1024px) {
  .deco { opacity: calc(var(--opacity, 0.5) * 0.85); }
}
 
/* موبايل — نخفي الجانبيات (تأخذ مساحة كثيرة) ونصغّر الأركان */
@media (max-width: 700px) {
  .deco-7, .deco-8, .deco-19, .deco-20 { display: none; }
  .deco-1, .deco-2 { --w: clamp(120px, 34vw, 180px); --h: clamp(60px, 17vw, 90px); }
  .deco-3, .deco-4 { --w: clamp(110px, 32vw, 170px); --h: clamp(55px, 16vw, 85px); }
  .deco-9, .deco-10, .deco-11, .deco-12 { --w: clamp(100px, 30vw, 160px); --h: clamp(50px, 15vw, 80px); }
  .deco-15, .deco-16 { --w: clamp(95px, 28vw, 150px); --h: clamp(48px, 14vw, 75px); }
  .deco-17, .deco-18 { --w: clamp(110px, 30vw, 170px); --h: clamp(55px, 15vw, 85px); }
  .deco-5, .deco-6 { --h: clamp(30px, 7.5vw, 45px); --opacity: 0.32; }
  .deco-13, .deco-14 { --h: clamp(26px, 6.5vw, 40px); --opacity: 0.3; }
}
 
/* موبايل صغير */
@media (max-width: 420px) {
  .deco-1, .deco-2 { --opacity: 0.45; }
  .deco-3, .deco-4 { --opacity: 0.4; }
  .deco-9, .deco-10, .deco-11, .deco-12 { --opacity: 0.4; }
  .deco-15, .deco-16, .deco-17, .deco-18 { --opacity: 0.4; }
}
 
/* ─────────────────────────────────────────────────────────────────────────────
   RTL / LTR — مرآة تلقائية للأركان عند تبديل اللغة
   ───────────────────────────────────────────────────────────────────────────── */
[dir="ltr"] .deco-1,
[dir="ltr"] .deco-9,
[dir="ltr"] .deco-15 { --flipX: -1; }
 
[dir="ltr"] .deco-2,
[dir="ltr"] .deco-10,
[dir="ltr"] .deco-16 { --flipX: 1; }
 
[dir="ltr"] .deco-3,
[dir="ltr"] .deco-11,
[dir="ltr"] .deco-17 { --flipX: -1; }
 
[dir="ltr"] .deco-4,
[dir="ltr"] .deco-12,
[dir="ltr"] .deco-18 { --flipX: 1; }
 
/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE — تخفيف الزخارف مع المحافظة على ألوان الهوية
   ───────────────────────────────────────────────────────────────────────────── */
html.dark .deco {
  opacity: calc(var(--opacity, 0.5) * 0.55);
  filter: saturate(0.85) brightness(0.95);
}
 
/* ═════════════════════════════════════════════════════════════════════════════
   نهاية قسم الزخارف — هوية رواسخ الغربية الأصلية
   ═════════════════════════════════════════════════════════════════════════════ */

/* Accessibility helper — visually hidden text for H1 (keeps SEO + screen reader access without changing visual design) */
.visually-hidden-h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



/* ===== BLOCK SEPARATOR ===== */


.faq-section {
  background: var(--c-cream-100);
  padding-block: clamp(60px, 8vw, 100px);
  position: relative;
}
.faq-section .container { max-width: 980px; }
.faq-section-head {
  text-align: center;
  margin-bottom: 48px;
}
.faq-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-d);
  background: var(--c-cream-200);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.faq-section h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-ink-900);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
[lang="ar"] .faq-section h2 { line-height: 1.35; }
.faq-section-sub {
  font-size: 16px;
  color: var(--c-ink-500);
  max-width: 620px;
  margin: 0 auto;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--c-cream-0);
  border: 1px solid var(--c-cream-300);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.faq-item:hover {
  border-color: var(--c-cream-400);
  box-shadow: var(--sh-1);
}
.faq-item[open] {
  border-color: var(--c-amber);
  box-shadow: var(--sh-2);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--c-ink-900);
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-cream-200);
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.faq-q-icon svg {
  width: 16px; height: 16px;
  stroke: var(--c-ink-700);
  stroke-width: 2.5;
  fill: none;
}
.faq-item[open] .faq-q-icon {
  background: var(--c-amber);
  transform: rotate(45deg);
}
.faq-item[open] .faq-q-icon svg { stroke: var(--c-cream-0); }
.faq-a {
  padding: 0 24px 22px 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-ink-500);
  border-top: 1px solid var(--c-cream-200);
  padding-top: 18px;
  margin-top: -1px;
}
[lang="ar"] .faq-q, [lang="ar"] .faq-a { text-align: right; }
[lang="en"] .faq-q, [lang="en"] .faq-a { text-align: left; }