/* ===== rcs-tokens ===== */

  :root {
    --rcs-brand:        #8c182a;   /* deepened to match Mac render on Windows. ORIGINAL: #9c1b2f — revert here if too dark */
    --rcs-brand-hover:  #a61f34;   /* ORIGINAL: #b8233a */
    --rcs-dark-bg:        #262626;
    --rcs-dark-elevated:  #333333;
    --rcs-dark-text:      #eaeaea;
    --rcs-dark-headline:  #ffffff;
    --rcs-dark-muted:     #999999;
    --rcs-dark-border:    rgba(255, 255, 255, 0.15);
    --rcs-light-bg:        #f8f9fa;
    --rcs-light-elevated:  #ffffff;
    --rcs-light-text:      #2b2b2b;
    --rcs-light-headline:  #000000;
    --rcs-light-muted:     #555555;
    --rcs-light-border:    rgba(0, 0, 0, 0.12);
    --c-red:        var(--rcs-brand);
    --c-red-hover:  var(--rcs-brand-hover);
    --c-dark:       var(--rcs-dark-bg);
    --c-dark-elevated: var(--rcs-dark-elevated);
    --c-light:      var(--rcs-dark-text);
    --c-white:      var(--rcs-dark-headline);
    --c-grey:       var(--rcs-dark-muted);
    --c-border:     var(--rcs-dark-border);
    --font-main: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-ar:   'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-h: var(--font-main);
    --font-b: var(--font-main);
    --nav-height: 80px;
    --vh: 1vh;
  }
  html[data-theme="light"] {
    --c-dark:       var(--rcs-light-bg);
    --c-dark-elevated: var(--rcs-light-elevated);
    --c-light:      var(--rcs-light-text);
    --c-white:      var(--rcs-light-headline);
    --c-grey:       var(--rcs-light-muted);
    --c-border:     var(--rcs-light-border);
  }
  html[dir="rtl"], html[lang="ar"] {
    --font-h: var(--font-ar);
    --font-b: var(--font-ar);
    direction: rtl;
  }

/* ===== rcs-red-force ===== */

  /* GLOBAL RED LOCK — every brand red resolves to #8c182a everywhere, even when a
     section embed redefines the token via its own :root / #id block.
     !important beats a non-important embed declaration regardless of specificity. */
  html, :root, html[data-theme="light"], html[lang="ar"], html[dir="rtl"] {
    --rcs-brand:  #8c182a !important;
    --c-red:      #8c182a !important;
    --h-red:      #8c182a !important;
  }

/* ===== rcs-fluid-root ===== */

  html { font-size: 16px; }
  @media (min-width: 1024px) {
    html { font-size: clamp(12.5px, 1.111vw, 16.33px); } /* v6.0: frozen at MacBook Air ~1470px */
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    html { font-size: 15px; }
  }
  @media (max-width: 767px) {
    html { font-size: 14px; }
  }
  @media (max-width: 767px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="url"], input[type="password"],
    input[type="number"], select, textarea, .hfm-input {
      font-size: 16px !important;
    }
  }

/* ===== rcs-base ===== */

  *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--nav-height) + 24px);
    background-color: var(--c-dark);
    color: var(--c-light);
    transition: background-color 0.4s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    margin: 0; padding: 0;
    min-width: 320px; width: 100%;
    position: relative;
    background-color: var(--c-dark);
    color: var(--c-light);
    font-family: var(--font-main);
    line-height: 1.65;
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  p, li, blockquote { font-size: 1.05rem; line-height: 1.7; }
  h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }
  img, svg, video, iframe, picture, picture img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  input, textarea, select, button { font-family: inherit; }
  /* Subtle scrollbar — transparent track, soft translucent thumb, theme-aware. No harsh red bar. */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 10px; border: 1px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); background-clip: content-box; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.24); background-clip: content-box; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.36); background-clip: content-box; }
  html { scrollbar-color: rgba(255,255,255,0.22) transparent; scrollbar-width: thin; }
  html[data-theme="light"] { scrollbar-color: rgba(0,0,0,0.25) transparent; }

/* ===== rcs-preloader ===== */

  #rcs-global-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; display: flex; justify-content: center; align-items: center; pointer-events: none; overflow: hidden; }
  .rcs-preloader-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c-dark); z-index: 1; pointer-events: auto; }
  #rcs-preloader-dot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0.95; }
  html[data-theme="light"] #rcs-preloader-dot-canvas { filter: invert(1) opacity(0.5); }
  .rcs-shockwave { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.5); width: 1px; height: 1px; border-radius: 50%; z-index: 3; opacity: 0; }
  .rcs-flying-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 250px; z-index: 4; will-change: transform, opacity, top, left, width, height; }
  body.rcs-preload-active .hero-title, body.rcs-preload-active .hero-desc, body.rcs-preload-active .hero-subtitle, body.rcs-preload-active .hero-btn, body.rcs-preload-active .hero-cta, body.rcs-preload-active .hero-actions { opacity: 0 !important; }
  body.rcs-hero-ready .hero-title, body.rcs-hero-ready .hero-desc, body.rcs-hero-ready .hero-subtitle, body.rcs-hero-ready .hero-btn, body.rcs-hero-ready .hero-cta, body.rcs-hero-ready .hero-actions { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }

/* ===== rcs-rtl ===== */

  html[lang="ar"] .hf-navbar { direction: ltr !important; }
  html[lang="ar"] .hf-nav-links-wrapper { display: flex !important; flex-direction: row-reverse !important; }
  html[lang="ar"] .hf-nav-link, html[lang="ar"] .hf-hp-title, html[lang="ar"] .hf-hp-ltitle, html[lang="ar"] .cb-title, html[lang="ar"] .hf-mob-link, html[lang="ar"] .hf-explore-btn, html[lang="ar"] .hf-mega-footer { font-family: var(--font-ar) !important; letter-spacing: 0 !important; }
  html[lang="ar"] .hf-takeover-mega { direction: rtl !important; text-align: right; }
  html[lang="ar"] .hf-hp-bottom-ui { grid-template-columns: minmax(260px, 320px) 1fr; }
  html[lang="ar"] .hf-hp-left { border-right: none; border-left: 1px solid var(--c-border); text-align: right; }
  html[lang="ar"] .hf-hp-link { flex-direction: row-reverse; text-align: right; }
  html[lang="ar"] .hf-hp-icon { transform: scaleX(-1); }
  html[lang="ar"] .hf-mega-close { right: auto !important; left: 18px !important; }
  html[lang="ar"] .hf-mob-close { right: auto !important; left: 5vw !important; }
  html[lang="ar"] .hf-contact-pill { right: auto; left: 30px; direction: rtl !important; }
  html[lang="ar"] .hf-cp-text { padding-right: 12px; padding-left: 0; }
  html[lang="ar"] .hf-explore-btn svg { transform: scaleX(-1); }
  html[lang="ar"] .hf-nav-actions { flex-direction: row-reverse; }

/* ===== rcs-navbar ===== */

  .hf-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
    background: rgba(38, 38, 38, 0.98);
    /* blur intentionally NOT here — a fixed blurred bar re-blurs the page every scroll frame (main cause of Windows scroll lag). Blur is applied ONLY in the at-rest transparent state below, where it isn't scrolling. */
    display: flex; align-items: center; justify-content: space-between;
    z-index: 10000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
    border-bottom: 1px solid var(--c-border);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
  }
  html[data-theme="light"] .hf-navbar { background: rgba(248, 249, 250, 0.98); border-color: var(--rcs-light-border); }
  @media (max-width: 1199px) {
    /* iOS smoothness: transform-only reveal, static solid background, zero box-shadow.
       Animating background/box-shadow on a fixed bar during momentum is what stalls
       scroll-up on iPhone — so the bar's paint is frozen and only its transform moves. */
    .hf-navbar {
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
      background: rgba(38, 38, 38, 0.98) !important;
      box-shadow: none !important;
    }
    html[data-theme="light"] .hf-navbar { background: rgba(248, 249, 250, 0.98) !important; }
    .hf-navbar.nav-scrolled, .hf-navbar.nav-transparent, .hf-navbar:hover {
      background: rgba(38, 38, 38, 0.98) !important;
      box-shadow: none !important;
    }
    html[data-theme="light"] .hf-navbar.nav-scrolled,
    html[data-theme="light"] .hf-navbar.nav-transparent,
    html[data-theme="light"] .hf-navbar:hover { background: rgba(248, 249, 250, 0.98) !important; }
    .hf-navbar.nav-hidden {
      pointer-events: none;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }
  .hf-navbar.nav-transparent { background: transparent !important; box-shadow: none; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
  @media (max-width: 1199px) {
    /* Mobile/tablet: a blurred fixed bar re-composites every scroll frame — the main cause
       of the scroll-up lag + flashing on phones. Solid fill instead, no blur. */
    .hf-navbar.nav-transparent { background: rgba(38, 38, 38, 0.98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
    html[data-theme="light"] .hf-navbar.nav-transparent { background: rgba(248, 249, 250, 0.98) !important; }
  }
  html[data-theme="light"] .hf-navbar.nav-transparent { background: rgba(248, 249, 250, 0.98) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
  .hf-navbar.nav-scrolled, .hf-navbar:hover { background: rgba(38, 38, 38, 0.98) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  html[data-theme="light"] .hf-navbar.nav-scrolled, html[data-theme="light"] .hf-navbar:hover { background: rgba(248, 249, 250, 0.98) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
  .hf-navbar.nav-hidden { transform: translateY(-100%); }
  .hf-nav-left { flex: 1; padding-left: 4vw; display: flex; align-items: center; justify-content: flex-start; z-index: 10002; }
  .hf-nav-center { flex: 2; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; }
  .hf-nav-right { flex: 1; padding-right: 4vw; display: flex; align-items: center; justify-content: flex-end; z-index: 10002; }
  .hf-nav-actions { display: flex; align-items: center; gap: 14px; }
  @media (max-width: 767px) { .hf-nav-left { padding-left: 5vw; } .hf-nav-right { padding-right: 5vw; } }
  .hf-logo-img { height: 48px; width: auto; display: block; object-fit: contain; transition: opacity 0.3s ease, height 0.3s ease; opacity: 0; }
  @media (max-width: 1199px) { .hf-logo-img { height: 42px; } }
  @media (max-width: 767px) { .hf-logo-img { height: 36px; } }
  .hf-theme-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--c-border); color: var(--c-white); cursor: pointer; transition: 0.3s; margin-right: 15px; }
  .hf-theme-btn:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); transform: scale(1.1); }
  html[data-theme="light"] .hf-theme-btn { background: var(--c-red); border-color: var(--c-red); color: #ffffff; }
  html[data-theme="light"] .hf-theme-btn:hover { background: var(--c-red-hover); border-color: var(--c-red-hover); color: #ffffff; }
  html[lang="ar"] .hf-theme-btn { margin-right: 0; margin-left: 15px; }
  .hf-nav-links-wrapper { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 28px); height: 100%; z-index: 10002; position: relative; }
  .hf-nav-item { position: relative; height: 100%; display: flex; align-items: center; flex-shrink: 0 !important; }
  .hf-nav-link { color: var(--c-light); text-decoration: none; font-size: 14.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; transition: color 0.3s; height: 100%; display: flex; align-items: center; white-space: nowrap !important; }
  .hf-nav-link:hover { color: var(--c-white); }
  .hf-nav-link.active-page { color: var(--c-red); font-weight: 900; font-size: 15.5px; pointer-events: none; }
  .hf-nav-link.active-page + .hf-takeover-mega { display: none !important; }

/* ===== rcs-mega ===== */

  .hf-takeover-mega {
    position: fixed; top: calc(var(--nav-height) - 1px); left: 0; width: 100vw; max-height: min(50vh, 380px);
    background: var(--c-dark-elevated); border: 1px solid var(--c-border);
    display: flex; flex-direction: column;
    z-index: 10000; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
    overflow: hidden;
    box-shadow: 0 26px 55px rgba(0,0,0,0.28);
  }
  .hf-nav-item:hover .hf-takeover-mega, .hf-nav-item:focus-within .hf-takeover-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  body.is-global-scrolling .hf-takeover-mega { pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; }
  html[data-theme="light"] .hf-takeover-mega { background-color: var(--rcs-light-elevated); border-color: var(--rcs-light-border); box-shadow: 0 20px 50px rgba(38,38,38,0.08); }
  @media (max-width: 1199px) { .hf-takeover-mega { display: none !important; } }
  .hf-mega-close { position: absolute; top: 16px; right: 18px; z-index: 2000; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: var(--c-dark-elevated); color: var(--c-white); cursor: pointer; transition: 0.3s; }
  .hf-mega-close:hover { background: var(--c-red); border-color: var(--c-red); transform: rotate(90deg); color: #fff; }
  .hf-hp-bottom-ui { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; width: 100%; background: var(--c-dark); }
  .hf-hp-left { padding: 16px 20px; border-right: 1px solid var(--c-border); display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,0.02); }
  .hf-hp-label { font-family: var(--font-h); font-size: 10px; font-weight: 800; color: var(--c-red); letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 8px; }
  .hf-hp-title { font-family: var(--font-h); font-size: clamp(1rem, 1.1vw, 1.2rem); font-weight: 900; color: var(--c-white); text-transform: uppercase; line-height: 1.1; margin-bottom: 6px; }
  .hf-explore-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; padding: 10px 16px; font-family: var(--font-h); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: #fff; background: var(--c-red); text-decoration: none; transition: 0.3s; border: 1px solid var(--c-red); border-radius: 4px; width: fit-content; }
  .hf-explore-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; transition: 0.3s; }
  .hf-explore-btn:hover { background: transparent; color: var(--c-white); border-color: var(--c-red); }
  html[data-theme="light"] .hf-explore-btn:hover { color: var(--c-red); }
  html:not([lang="ar"]) .hf-explore-btn:hover svg { transform: translateX(5px); }
  .hf-hp-middle { padding: 14px; display: flex; align-items: stretch; overflow-y: auto; overflow-x: hidden; background: var(--c-dark); }
  .hf-hp-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hf-hp-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .hf-hp-grid--three .hf-hp-link { min-height: 64px; padding: 12px 14px; }
  .hf-hp-grid--three .hf-hp-ltitle { font-size: 12.5px; line-height: 1.3; }
  .hf-hp-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hf-hp-grid--four .hf-hp-link { min-height: 50px; padding: 8px 10px; }
  .hf-hp-grid--four .hf-hp-ltitle { font-size: 11px; line-height: 1.2; }
  .hf-hp-link { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.02); text-decoration: none; transition: 0.25s; opacity: 0; transform: translateY(10px); border: 1px solid var(--c-border); border-radius: 4px; }
  html[data-theme="light"] .hf-hp-link { background: rgba(0,0,0,0.02); border-color: var(--rcs-light-border); }
  html[data-theme="light"] .hf-hp-link:hover { background: rgba(0,0,0,0.045); border-color: var(--c-red); box-shadow: none; }
  .hf-hp-info { display: flex; flex-direction: column; transition: 0.3s; }
  .hf-hp-ltitle { font-family: var(--font-h); font-size: 12px; font-weight: 700; color: var(--c-light); text-transform: uppercase; transition: 0.3s; }
  .hf-hp-icon { width: 18px; height: 18px; color: var(--c-red); opacity: 0.5; transition: 0.3s; fill: none; stroke: currentColor; }
  .hf-hp-grid:hover .hf-hp-link:not(:hover) { opacity: 0.55; }
  html:not([lang="ar"]) .hf-hp-link:hover { background: rgba(255,255,255,0.05); transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.2); }
  html:not([lang="ar"]) .hf-hp-link:hover .hf-hp-info { transform: translateX(8px); }
  html:not([lang="ar"]) .hf-hp-link:hover .hf-hp-icon { opacity: 1; transform: translateX(5px); }
  html:not([lang="ar"]) .hf-hp-link:hover .hf-hp-ltitle { color: var(--c-red); }
  .hf-nav-item:hover .hf-hp-link, .hf-nav-item:focus-within .hf-hp-link { opacity: 1; transform: translateY(0); }
  .hf-nav-item:hover .hf-hp-link:nth-child(1) { transition-delay: 0.04s; }
  .hf-nav-item:hover .hf-hp-link:nth-child(2) { transition-delay: 0.08s; }
  .hf-nav-item:hover .hf-hp-link:nth-child(3) { transition-delay: 0.12s; }
  .hf-nav-item:hover .hf-hp-link:nth-child(4) { transition-delay: 0.16s; }
  .hf-nav-item:hover .hf-hp-link:nth-child(5) { transition-delay: 0.2s; }
  .hf-nav-item:hover .hf-hp-link:nth-child(6) { transition-delay: 0.24s; }
  .hf-mega-footer { width: 100%; min-height: 48px; background: rgba(0,0,0,0.22); border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; font-family: var(--font-h); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; }
  .hf-mf-left, .hf-mf-right { display: flex; align-items: center; gap: 20px; }
  .hf-mf-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--c-red); color: #fff !important; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-decoration: none; transition: 0.3s; border: 1px solid var(--c-red); }
  .hf-mf-cta:hover { background: transparent; color: var(--c-red) !important; }
  .hf-mf-login { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: transparent; color: var(--c-light) !important; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-decoration: none; transition: 0.3s; border: 1px solid var(--c-border); }
  .hf-mf-login:hover { background: var(--c-red); color: #fff !important; border-color: var(--c-red); }
  .hf-mf-socials { display: flex; align-items: center; gap: 16px; }
  .hf-mf-socials a { color: var(--c-grey); width: 20px; height: 20px; transition: 0.3s; display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .hf-mf-socials a:hover { color: var(--c-red); transform: translateY(-3px); }
  .hf-mf-socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .rcs-icon-x { font-family: var(--font-h); font-size: 14px; font-weight: 800; line-height: 1; }

/* ===== rcs-lang-mobile ===== */

  .hf-lang-switch { display: flex; align-items: center; gap: 8px; }
  .hf-lang-btn { min-width: 0; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.25s ease; border: none; background: transparent; color: var(--c-grey); text-decoration: none; font-family: var(--font-h); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
  .hf-lang-btn:hover { color: var(--c-white); background: transparent; }
  .hf-lang-btn.active { color: var(--c-red); background: transparent; pointer-events: none; }
  html[data-theme="light"] .hf-lang-btn { background: transparent; color: var(--rcs-light-muted); border: none; }
  html[data-theme="light"] .hf-lang-btn:hover { color: var(--rcs-light-headline); }
  html[data-theme="light"] .hf-lang-btn.active { color: var(--c-red); }
  .hf-hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 5px; z-index: 10003; position: relative; }
  .hf-hamburger span { width: 26px; height: 2px; border-radius: 2px; background: var(--c-white); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease, background 0.3s ease; transform-origin: center; }
  .hf-hamburger:hover span { background: var(--c-red); }
  .hf-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hf-hamburger.open span:nth-child(2) { opacity: 0; }
  .hf-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hf-mob-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--c-dark); z-index: 9999; display: flex; flex-direction: column; align-items: center; padding: max(var(--nav-height), 80px) 0 0; opacity: 0; pointer-events: none; transition: opacity 0.32s ease, visibility 0.32s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .hf-mob-menu.open { opacity: 1; pointer-events: auto; }
  /* Center the menu content vertically so it doesn't sit high with an empty gap below; auto margins still allow scroll if it overflows on tiny phones. */
  .hf-mob-menu #hfMobLinks { margin-top: auto; margin-bottom: auto; }
  /* Redundant close removed — the hamburger morphs into an X and is the single, consistent close control (same in EN & AR). */
  .hf-mob-close { display: none !important; }
  .hf-mob-link { color: var(--c-white); font-size: 26px; font-weight: 700; text-transform: uppercase; text-decoration: none; display: block; margin: 13px auto; letter-spacing: 2px; width: min(300px, 82vw); text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), color 0.3s ease; }
  .hf-mob-menu.open .hf-mob-link { opacity: 1; transform: translateY(0); }
  .hf-mob-menu.open .hf-mob-link:nth-child(1) { transition-delay: 0.06s; }
  .hf-mob-menu.open .hf-mob-link:nth-child(2) { transition-delay: 0.11s; }
  .hf-mob-menu.open .hf-mob-link:nth-child(3) { transition-delay: 0.16s; }
  .hf-mob-menu.open .hf-mob-link:nth-child(4) { transition-delay: 0.21s; }
  .hf-mob-menu.open .hf-mob-link:nth-child(5) { transition-delay: 0.26s; }
  .hf-mob-menu.open .hf-mob-link:nth-child(6) { transition-delay: 0.31s; }
  html[data-theme="light"] .hf-mob-link { color: var(--rcs-light-text); }
  .hf-mob-link:hover { color: var(--c-red); }
  .hf-mob-link.active-page { color: var(--c-red); font-size: 28px; font-weight: 800; }
  .hf-mob-footer-panel { width: 100%; margin-top: 30px; padding: 25px 5vw 40px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease 0.36s, transform 0.45s cubic-bezier(0.16,1,0.3,1) 0.36s; }
  .hf-mob-menu.open .hf-mob-footer-panel { opacity: 1; transform: translateY(0); }
  .hf-mob-footer-panel .hf-mob-cta-btn { width: min(300px, 82vw); padding: 15px 24px; background: var(--c-red); color: #fff !important; font-family: var(--font-h); font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid var(--c-red); border-radius: 4px; transition: 0.3s; }
  .hf-mob-footer-panel .hf-mob-cta-btn:hover { background: var(--c-red-hover); border-color: var(--c-red-hover); color: #fff !important; }
  .hf-mob-footer-socials { display: flex; gap: 28px; margin-top: 14px; align-items: center; }
  .hf-mob-footer-socials a { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--c-grey); transition: 0.3s; text-decoration: none; }
  .hf-mob-footer-socials a:hover { color: var(--c-red); transform: translateY(-3px); }
  /* Mobile Projects accordion — sectors expand cleanly under the Projects row */
  .hf-mob-acc { width: min(300px, 82vw); display: flex; flex-direction: column; align-items: center; }
  .hf-mob-acc-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: transparent; border: none; cursor: pointer; padding: 0; }
  /* Invisible spacer = chevron width, so the PROJECTS label centres like the other items (works LTR + RTL). */
  .hf-mob-acc-btn::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; }
  .hf-mob-acc-ico { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.32s cubic-bezier(0.16,1,0.3,1); }
  .hf-mob-acc.open .hf-mob-acc-btn { color: var(--c-red); }
  .hf-mob-acc.open .hf-mob-acc-ico { transform: rotate(180deg); }
  .hf-mob-sub { width: 100%; max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
  .hf-mob-acc.open .hf-mob-sub { max-height: 60vh; }
  .hf-mob-sublink { color: var(--c-grey); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; margin: 9px 0; transition: color 0.3s ease; }
  .hf-mob-sublink:first-child { margin-top: 16px; }
  .hf-mob-sublink:last-child { margin-bottom: 4px; }
  .hf-mob-sublink:hover, .hf-mob-sublink.active-page { color: var(--c-red); }
  html[lang="ar"] .hf-mob-sublink { font-size: 17px; letter-spacing: 0; }
  /* Menu labels render at their natural, uniform size (equal-width fitter removed).
     "All Projects" is a normal sub-item — it only turns red when on the /all page. */
  .hf-mob-fit { display: inline-block; white-space: nowrap; }

/* ===== rcs-pill-chatbot ===== */

  .hf-contact-pill { position: fixed; bottom: 30px; right: 30px; z-index: 9000; display: flex; align-items: center; background: var(--c-red); border-radius: 50px; height: 54px; width: 54px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: width 0.32s ease, transform 0.24s ease; overflow: hidden; }
  .hf-contact-pill[hidden] { display: none !important; }
  .hf-contact-pill:hover { width: 170px; transform: translateY(-4px); }
  html[lang="ar"] .hf-contact-pill:hover { width: 210px; }
  .hf-cp-icon-box { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .hf-cp-icon-box svg { width: 22px; height: 22px; color: #fff; fill: none; stroke: currentColor; }
  .hf-cp-text { font-family: var(--font-h); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; white-space: nowrap; opacity: 0; transition: 0.2s; padding-left: 12px; }
  .hf-contact-pill:hover .hf-cp-text { opacity: 1; }
  .hf-back-top { position: fixed; bottom: 95px; right: 30px; z-index: 8999; width: 50px; height: 50px; background: rgba(38,38,38,0.9); border: 1px solid var(--c-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(20px); transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
  html[lang="ar"] .hf-back-top { right: auto; left: 30px; }
  .hf-back-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .hf-back-top:hover { background: var(--c-red); border-color: var(--c-red); transform: translateY(-5px); }
  .hf-arrow-svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .hf-chatbot-widget { position: fixed; bottom: 95px; right: 30px; width: 380px; max-width: calc(100vw - 40px); height: min(550px, calc(100vh - 120px)); z-index: 9999; display: flex; flex-direction: column; pointer-events: none; opacity: 0; transform: translateY(20px) scale(0.95); transform-origin: bottom right; transition: 0.4s cubic-bezier(0.16,1,0.3,1); background: rgba(38,38,38,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; }
  html[data-theme="light"] .hf-chatbot-widget { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
  .hf-chatbot-widget.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  html[lang="ar"] .hf-chatbot-widget { right: auto; left: 30px; transform-origin: bottom left; }
  .cb-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--c-border); background: rgba(0,0,0,0.2); }
  .cb-title { font-size: 14px; font-weight: 800; color: var(--c-white); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
  .cb-title svg { color: var(--c-red); width: 18px; height: 18px; fill: none; stroke: currentColor; }
  .cb-actions { display: flex; align-items: center; gap: 12px; }
  .cb-contact-btn { background: var(--c-red); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px; border-radius: 4px; text-decoration: none; transition: 0.3s; }
  .cb-contact-btn:hover { background: var(--c-white); color: var(--c-red); }
  .cb-close { cursor: pointer; color: var(--c-grey); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
  .cb-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
  .cb-close:hover { color: var(--c-red); transform: rotate(90deg); }
  .chatbot-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .chat-msg { padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 85%; line-height: 1.5; }
  .bot-msg { background: rgba(255,255,255,0.05); color: var(--c-white); align-self: flex-start; border-bottom-left-radius: 0; }
  html[data-theme="light"] .bot-msg { background: rgba(0,0,0,0.05); color: var(--rcs-light-text); }
  .chatbot-input-area { display: flex; border-top: 1px solid var(--c-border); padding: 10px; background: rgba(0,0,0,0.2); }
  .chatbot-input-area .hfm-input { flex: 1; background: transparent; border: none; padding: 10px; color: var(--c-white); outline: none; font-size: 13px; }
  .chat-send-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--c-red); color: #fff; border: none; cursor: pointer; border-radius: 4px; transition: 0.3s; flex-shrink: 0; }
  .chat-send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ===== rcs-responsive ===== */

  @media (max-width: 1199px) {
    .hf-navbar { padding: 0 5vw; }
    .hf-nav-center { display: none; }
    .hf-hamburger { display: flex; }
    /* Keep the hamburger pinned to the same (right) edge in Arabic as in English — don't let RTL reverse it toward center. */
    html[lang="ar"] .hf-nav-actions { flex-direction: row; }
    .hf-contact-pill { bottom: 20px; right: 20px; }
    .hf-back-top { bottom: 86px; right: 20px; }
    html[lang="ar"] .hf-contact-pill { left: 20px; right: auto; }
    html[lang="ar"] .hf-back-top { left: 20px; right: auto; }
    .hf-chatbot-widget { bottom: 86px; right: 20px; }
  }
  @media (max-width: 767px) {
    .hf-contact-pill:hover { width: 54px; transform: none; }
    .hf-cp-text { display: none; }
    .hf-chatbot-widget { position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; min-height: 0 !important; border: none !important; border-radius: 0 !important; transform: none !important; z-index: 100001 !important; }
    .hf-chatbot-widget .cb-header { padding-top: calc(15px + env(safe-area-inset-top)) !important; }
    .hf-chatbot-widget .chatbot-input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  }
  @media (hover: none) {
    .hf-contact-pill:hover { width: 54px; transform: none; }
    .hf-cp-text { display: none; }
    .hf-explore-btn:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    #rcs-preloader-dot-canvas { display: none !important; }
  }
  @media print {
    .hf-navbar, .hf-contact-pill, .hf-back-top, .hf-chatbot-widget, #rcs-global-preloader, .hf-mob-menu { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
  }
  *:focus { outline: none; }
  *:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
  @media (max-width: 1199px) {
    /* EN / AR / hamburger stay flush-right; the theme toggle is CENTRED in the bar. */
    .hf-nav-right { justify-content: flex-end !important; }
    .hf-nav-actions { margin-left: auto; gap: 14px; align-items: center; }
    .hf-theme-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; line-height: 0; padding: 0; }
    .hf-theme-btn:hover, .hf-theme-btn:active { transform: translate(-50%, -50%); }
    html[lang="ar"] .hf-theme-btn { margin: 0 !important; }
    .hf-theme-btn svg { display: block; margin: auto; }
  }
  @media (max-width: 767px) {
    .hf-mob-close, .chat-send-btn { min-width: 44px; min-height: 44px; }
    .hf-theme-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
    .hf-theme-btn svg { width: 15px !important; height: 15px !important; }
    .hf-lang-btn { min-width: 0; }
  }
  a, button, [onclick], .hf-nav-link, .hf-mob-link, .hf-explore-btn, .hf-contact-pill, .cb-contact-btn, .hf-theme-btn, .hf-lang-btn, .chat-send-btn { touch-action: manipulation; }
  .hf-contact-pill, .hf-back-top, .hf-chatbot-widget, .hf-mob-menu { transform: translate3d(0, 0, 0); backface-visibility: hidden; }

/* ===== rcs-typography ===== */

  html, html body, html body *:not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
    font-family: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  }
  html[lang="ar"], html[lang="ar"] body, html[lang="ar"] body *:not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
  }
  code, pre, kbd, samp, [class*="icon"], [class*="Icon"], :is(ion-icon,svg), svg, svg * { font-family: inherit !important; }
  html[lang="ar"] .hf-nav-link { font-size: 17px; font-weight: 700; letter-spacing: 0; }
  html[lang="ar"] .hf-nav-link.active-page { font-size: 18px; font-weight: 800; }
  html[lang="ar"] .hf-lang-btn { font-size: 16px; min-width: 0; height: 34px; letter-spacing: 0; }
  html[lang="ar"] .hf-mob-link { font-size: 26px; letter-spacing: 0; }
  html[lang="ar"] .hf-mob-link.active-page { font-size: 28px; }
  html[lang="ar"] .hf-hp-ltitle { font-size: 14px; font-weight: 700; letter-spacing: 0; }
  html[lang="ar"] .hf-mega-footer { font-size: 12px; letter-spacing: 0.5px; }
  html[lang="ar"] .hf-explore-btn { font-size: 12px; letter-spacing: 1px; }

/* ===== rcs-section-headings ===== */

  /* Universal heading safety — no word-breaks anywhere */
  h1, h2, h3, h4, h5, h6,
  .hg-headline, .vo-head, .vo-brand-title,
  .irc-head, .bpi-title, .g3d-title, .crc-head,
  .cta-headline, .fm-mz-title, .fm-mz-city,
  [class*="title"]:is(h1,h2,h3,h4,h5,h6,div,p,span),
  [class*="-head"]:is(h1,h2,h3,h4,h5,h6,div,p,span),
  [class*="-heading"]:is(h1,h2,h3,h4,h5,h6,div,p,span),
  [class*="hero-"]:is(h1,h2,h3,h4,h5,h6) {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
  }
  /* Hero headline (home) — HIGH SPECIFICITY beats section embed !important */
  html body section .hg-headline,
  html body section h1.hg-headline,
  html body .hg-headline {
    font-size: clamp(2.2rem, 5.5vw, 80.85px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  /* About Us Vault headline */
  html body #rcs-about-vault .vo-text-card .vo-red-header h3.vo-head,
  html body #rcs-about-vault .vo-head,
  html body .vo-head {
    font-size: clamp(2rem, 4.5vw, 66.15px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }
  html body section .vo-brand-title,
  html body .vo-brand-title {
    font-size: clamp(1.4rem, 3.8vw, 55.86px) !important;
    line-height: 1.1 !important;
  }
  /* Services Lifecycle / Integrated Precision */
  html body section .irc-head,
  html body .irc-head {
    font-size: clamp(1.8rem, 4.5vw, 66.15px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  /* Sector Expertise */
  html body section .bpi-title,
  html body .bpi-title {
    font-size: clamp(1.8rem, 4.5vw, 66.15px) !important;
    line-height: 1.05 !important;
  }
  /* Vision 2030 / Giga Projects */
  html body section .g3d-title,
  html body .g3d-title {
    font-size: clamp(1.8rem, 4.5vw, 66.15px) !important;
    line-height: 1.05 !important;
  }
  /* Clients / Trusted By */
  html body section .crc-head,
  html body .crc-head {
    font-size: clamp(1.6rem, 4vw, 58.8px) !important;
    line-height: 1.05 !important;
  }
  /* CTA Closer headline (biggest) */
  html body section .cta-headline,
  html body .cta-headline {
    font-size: clamp(2.5rem, 7vw, 102.9px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }
  /* Footer Global Synchro */
  html body section .fm-mz-title,
  html body .fm-mz-title {
    font-size: clamp(1.5rem, 3.8vw, 55.86px) !important;
    line-height: 1.05 !important;
  }
  html body section .fm-mz-city,
  html body .fm-mz-city {
    font-size: clamp(1.2rem, 2vw, 29.4px) !important;
  }
  /* Body prose stays normal */
  p, li, blockquote, td, th,
  [class*="-body"], [class*="-desc"], [class*="-paragraph"] {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Section tags / labels always on top */
  [class*="section-tag"], .vo-section-tag,
  [class*="-overview"]:not(section):not(div[class*="container"]),
  [class*="-tag"]:not(input):not(button) {
    z-index: 25 !important;
    position: relative;
  }
  .vo-section-tag, [class*="section-tag"][style*="absolute"] {
    position: absolute !important;
    z-index: 25 !important;
  }
  /* === ARABIC refinements — taller glyphs, no negative letter-spacing === */
  html[lang="ar"] .hg-headline,
  html[lang="ar"] .vo-head,
  html[lang="ar"] .vo-brand-title,
  html[lang="ar"] .irc-head,
  html[lang="ar"] .bpi-title,
  html[lang="ar"] .g3d-title,
  html[lang="ar"] .crc-head,
  html[lang="ar"] .cta-headline,
  html[lang="ar"] .fm-mz-title {
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  html[lang="ar"] .hg-headline { font-size: clamp(1.8rem, 4.6vw, 67.62px) !important; }
  html[lang="ar"] .vo-head { font-size: clamp(1.7rem, 3.8vw, 55.86px) !important; }
  html[lang="ar"] .vo-brand-title { font-size: clamp(1.2rem, 3.2vw, 47.04px) !important; }
  html[lang="ar"] .irc-head { font-size: clamp(1.5rem, 3.8vw, 55.86px) !important; }
  html[lang="ar"] .cta-headline { font-size: clamp(2rem, 5.8vw, 85.26px) !important; }

/* ===== rcs-browser-fixes ===== */

  /* Safari/iOS — backdrop-filter performance issue */
  @supports (-webkit-touch-callout: none) {
    .hf-chatbot-widget { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  }
  /* Firefox — different behavior on transform-origin, prefers 100vh fallback */
  @-moz-document url-prefix() {
    .vo-stage, [class*="-stage"] { will-change: auto; }
  }
  /* Samsung Internet — uses webkit prefix more aggressively */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Ensures Bahij Janna loads from Google Fonts properly */
    body { font-display: swap; }
  }

/* ===== rcs-navbar-glass ===== */

  /* LIGHT-MODE GLASSMORPHISM NAVBAR — all devices, every scroll state.
     Placed last + !important so it beats the earlier solid/opaque and mobile perf overrides.
     NOTE: re-introduces backdrop-blur on the fixed bar (removed earlier for iOS scroll perf);
     kept static (no background/shadow animation on scroll) to minimise the cost. */
  html[data-theme="light"] .hf-navbar,
  html[data-theme="light"] .hf-navbar.nav-scrolled,
  html[data-theme="light"] .hf-navbar.nav-transparent,
  html[data-theme="light"] .hf-navbar:hover {
    background: rgba(248, 249, 250, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--rcs-light-border) !important;
  }

/* ===== rcs-extreme-lock ===== */

  /* ==============================================================
     EXTREME BRAND LOCK  (v6.9)
     Forces RCS red (#8c182a) and Bahij Janna across the WHOLE site,
     EN + AR, overriding any section embed that still ships the old
     red or the old font through its OWN :root / #id tokens.
     Placed LAST so it wins every source-order tie.
     ============================================================== */
  /* 1. RED - force every red-named custom property the section embeds use.
        (Design-Services ships --m-red = old red x22; reference ships --c-red.)
        !important on html/:root beats a non-important embed :root regardless
        of specificity, so every var(--*-red) in every section resolves red. */
  html, :root, html[data-theme="light"], html[lang="ar"], html[dir="rtl"], body {
    --rcs-brand:       #8c182a !important;
    --rcs-brand-hover: #a61f34 !important;
    --c-red:           #8c182a !important;
    --c-red-hover:     #a61f34 !important;
    --m-red:           #8c182a !important;
    --h-red:           #8c182a !important;
    --red:             #8c182a !important;
    --brand-red:       #8c182a !important;
    --primary-red:     #8c182a !important;
    --accent-red:      #8c182a !important;
    --main-red:        #8c182a !important;
    --theme-red:       #8c182a !important;
    /* 2. FONT tokens - force every font-named property to Bahij Janna first.
          (Design-Services ships --font-h/--font-b:'Gotham'; reference ships
          --font-main/--font-book:'Gotham'.) */
    --font-main:    'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
    --font-h:       'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
    --font-b:       'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
    --font-book:    'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
    --font-body:    'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
    --font-heading: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif !important;
  }
  html[lang="ar"], html[dir="rtl"] {
    --font-ar: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
  }
  /* 3. FONT - nuclear universal rule. The :not(#rcs-none) tokens match every
        element (nothing has that id) while pumping specificity to ID-level, so
        this outranks even a section's own #id{ font-family: ... !important }.
        Same icon/svg/code exclusions as #rcs-typography (no new icon breakage). */
  html:not(#rcs-none) body:not(#rcs-none) *:not(#rcs-none):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
    font-family: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  }
  html[lang="ar"]:not(#rcs-none) body:not(#rcs-none) *:not(#rcs-none):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
  }

/* ===== unnamed ===== */

  .rcs-fouc-shield { position: fixed; inset: 0; background-color: var(--c-dark); z-index: 2147483647; }
  html[data-theme="light"] .rcs-fouc-shield { background-color: var(--rcs-light-bg); }
  html.rcs-fouc-active::after { content: ''; position: fixed; inset: 0; z-index: 2147483647; background: var(--c-dark); }
  html[data-theme="light"].rcs-fouc-active::after { background: var(--rcs-light-bg); }