/* ===== Arabic font support ===== */
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-U+06FF, U+0750-U+077F, U+08A0-U+08FF, U+FB50-U+FDFF, U+FE70-U+FEFF;
}

@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-U+06FF, U+0750-U+077F, U+08A0-U+08FF, U+FB50-U+FDFF, U+FE70-U+FEFF;
}

:root{
  --wrapW: min(1500px, 94vw);
  --badgeW: 820px;
  --badgeH: 460px;
  --gap: 28px;
  --topPad: clamp(70px, 14vh, 160px);
  --inEase: cubic-bezier(.22,.61,.36,1);
  /* fallback accent variables to match main site accent if this file is loaded alone */
  --notch-accent: #153F34;
  --notch-accent-contrast: #ffffff;
  /* Arabic text support */
  --font-arabic: 'Cairo', 'Arabic Typesetting', 'Simplified Arabic', 'Traditional Arabic', system-ui, sans-serif;
}
/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#000;color:#fff;overflow:hidden;scrollbar-gutter:stable;
  font-family: var(--font-primary), system-ui, Segoe UI, Roboto, Arial, sans-serif;
  /* Arabic font support with proper shaping */
  font-feature-settings: 'liga' 1, 'dlig' 1, 'calt' 1;
  /* Fix Arabic character rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior:contain;
}

/* Ensure Arabic text uses appropriate font and rendering */
:lang(ar),
[lang="ar"],
.ar-text,
[dir="rtl"] {
  font-family: var(--font-arabic);
  font-feature-settings: 'liga' 1, 'dlig' 1, 'calt' 1, 'rlig' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Fixed logo */
.fixed-logo{
  position: fixed;
  top: 26px;
  left: 30px;
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}
.fixed-logo, .fixed-logo *{ color: var(--notch-accent); fill: var(--notch-accent); }
.fixed-logo img{ filter: none; }
.fixed-logo img{
  width: 140px;
  height: auto;
}
body.fs-mode .fixed-logo{
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
  position: fixed !important;
  z-index: 9999 !important;
}
.fixed-logo{ position:fixed; top:26px; left:30px; z-index:60; display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.fixed-logo img{ width:140px; height:auto; }
@media (max-width:520px){ 
  .fixed-logo{ position:fixed !important; top:18px !important; left:18px !important; z-index:9999 !important; }
  .fixed-logo img{ width:100px; height:auto; } 
}

/* Veil */
.veil{ position:fixed;inset:0;background:rgba(0,0,0,.65); opacity:0;pointer-events:none;transition:opacity .5s var(--inEase); }
body.loading .veil{opacity:1} body.ready .veil{opacity:0}

/* Shell */
.shell{ position:fixed;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:flex-start; padding: var(--topPad) 0 18px; gap: 12px; }

/* Close */
.strip-close{ 
  position:fixed; top:22px; right:26px; z-index:70; 
  width:54px; height:54px; 
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color:#fff; cursor:pointer; border-radius:16px; line-height:1;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition: background .25s var(--inEase), box-shadow .25s var(--inEase), transform .25s var(--inEase), border-color .25s var(--inEase);
}
.strip-close__icon svg{ display:block; pointer-events:none; transition: transform .45s var(--inEase); }
.strip-close:hover{ 
  background:linear-gradient(180deg, rgba(21,63,52,.92), rgba(21,63,52,.78)); 
  border-color:rgba(255,255,255,.28); 
  box-shadow:0 10px 30px -4px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.14) inset;
  transform:translateY(-2px);
}
.strip-close:hover .strip-close__icon svg{ transform:rotate(90deg); }
.strip-close:active{ transform:translateY(0); box-shadow:0 6px 18px -6px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18) inset; }
.strip-close:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.28), 0 0 0 1px rgba(255,255,255,.18) inset; }
@media (prefers-reduced-motion: reduce){ .strip-close, .strip-close__icon svg{ transition:none; } }

/* Assistive text utility */
.visually-hidden{ 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; }

/* Row */
.row{ width: var(--wrapW); max-height: min(80vh, 820px); display:flex; align-items:stretch; gap: var(--gap); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; user-select:none; cursor:grab; touch-action: pan-x; scrollbar-width: none; isolation:isolate; scroll-behavior: auto; overscroll-behavior-x: contain; will-change: scroll-position; }
.row::-webkit-scrollbar{ display:none; }
.row.is-dragging{ cursor:grabbing; }
.group{display:flex;flex-direction:column;gap:10px;min-width:max-content}
.label{ font-size:13px;letter-spacing:4px;opacity:.9;white-space:nowrap; padding-left:6px; }

/* Fix Arabic text in labels */
body.arabic-font .label {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* Cards */
.cards{ 
  display:flex !important; 
  flex-wrap:nowrap !important; 
  align-items:stretch !important; 
  gap:var(--gap) !important; 
  min-height:var(--badgeH) !important; 
}
.cards > .badge{ 
  flex:0 0 var(--badgeW) !important;
  width:var(--badgeW) !important;
  height:var(--badgeH) !important;
}
@supports not (gap: 1rem){ .cards > .badge + .badge{ margin-left: var(--gap); } }

/* Badge */
.badge{
  position:relative;
  flex:0 0 var(--badgeW) !important;
  width:var(--badgeW) !important;
  height:var(--badgeH) !important;
  min-width:var(--badgeW) !important;
  min-height:var(--badgeH) !important;
  max-width:var(--badgeW) !important;
  max-height:var(--badgeH) !important;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  transform: translateY(16px) scale(.98); 
  opacity:0;
  animation: badgeIn .6s var(--inEase) both;
  -webkit-touch-callout:none; 
  user-select:none;
  cursor:pointer;
}
.group:nth-child(1) .badge{ animation-delay: .08s; }
.group:nth-child(2) .badge{ animation-delay: .12s; }
.group:nth-child(3) .badge{ animation-delay: .16s; }
.group:nth-child(4) .badge{ animation-delay: .20s; }
.group:nth-child(5) .badge{ animation-delay: .24s; }
@keyframes badgeIn{ to{ transform:none; opacity:1; } }
.badge img{ 
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1);
  transition:transform .35s ease, filter .35s ease; 
  -webkit-user-drag:none; 
  user-select:none; 
  pointer-events:none;
  display:block !important;
  max-width:100% !important;
  max-height:100% !important;
}
.badge::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1)); pointer-events:none; }
.badge:hover img{ transform:scale(1.06); }
.badge span{ position:absolute;left:16px;bottom:16px;z-index:2; background: rgba(21,63,52,0.9);padding:14px 18px;border-radius:12px; font-size:17px;letter-spacing:1px;white-space:nowrap; }

/* Fix Arabic text in badge labels */
body.arabic-font .badge span {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* Sub-menu للبطاقات التي تحتوي فروع */
.badge.has-sub { cursor: pointer; }
.badge .sub-menu {
  position: absolute;
  left: 16px;
  bottom: 60px;
  z-index: 10;
  background: rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
  backdrop-filter: blur(var(--glass-blur-xl));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--inEase), transform 0.3s var(--inEase);
}
.badge.has-sub:hover .sub-menu,
.badge.has-sub[aria-expanded="true"] .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.badge .sub-item {
  display: block;
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.badge .sub-item:hover {
  background: var(--notch-accent);
  color: var(--notch-accent-contrast);
}

/* Fix Arabic text in sub-menu items */
body.arabic-font .badge .sub-item {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* Progress */
.progress{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; width: var(--wrapW); height: 8px; background:rgba(255,255,255,.22); border-radius:99px; overflow:hidden; user-select:none; z-index:50; }
.bar{ position:absolute;left:0;top:0;height:100%;width:0; background:var(--notch-accent);opacity:.45;transition:width .08s linear; }
.thumb{ position:absolute;left:0;top:0;height:100%;width:20%; background:var(--notch-accent-contrast);border-radius:99px;box-shadow:0 6px 20px rgba(21,63,52,.18); cursor:grab;min-width:42px; }
.thumb:active{ cursor:grabbing; transform:scale(1.02); }

/* Hide progress UI on touch devices and tablets/phones to keep the strip clean */
@media (hover: none) and (pointer: coarse), (max-width: 1024px){
  .progress{ display:none !important; }
}

/* Responsive */
@media (max-width: 1280px){ :root{ --badgeW: 680px; --badgeH: 380px; } }
@media (max-width: 900px){  :root{ --badgeW: 520px; --badgeH: 300px; --gap: 22px; } }
@media (max-width: 640px){  
  :root{ --badgeW: 320px; --badgeH: 210px; --gap: 18px; }
  /* البطاقات في منتصف الشاشة للجوال */
  .cards{ align-items: center !important; }
}

/* Lower the cards a bit on tablets and phones so they sit lower in the viewport */
@media (max-width: 1024px){
  :root{ --topPad: clamp(90px, 16vh, 200px); }
  /* nudge badges further down for clearer spacing under header controls */
  .badge{ transform: translateY(22px) scale(.98); }
  /* slightly more pronounced on smaller phones */
}
@media (max-width: 640px){
  :root{ --topPad: clamp(110px, 18vh, 220px); }
  .badge{ transform: translateY(28px) scale(.98); }
}

/* iPad specific tuning -------------------------------------------------- */
/* iPad Pro 12.9" landscape (1366x1024) — add extra top padding */
@media (min-width:1200px) and (max-width:1400px) and (orientation: landscape){
  :root{ --topPad: clamp(110px, 14vh, 240px); }
  .badge{ transform: translateY(28px) scale(.98); }
}

/* iPad Air / smaller iPad sizes (portrait & landscape around 820–1194 widths) */
@media (min-width:768px) and (max-width:1194px){
  :root{ --topPad: clamp(96px, 15vh, 210px); }
  .badge{ transform: translateY(24px) scale(.98); }
}


/* Leave transition */
.page-transition{ position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; transform: scale(1); pointer-events: none; transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .60s cubic-bezier(.22,.61,.36,1); }
body.is-leaving .page-transition{ opacity:1; transform:scale(1.035); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .page-transition{ transition:opacity .2s linear, transform .2s linear; } body.is-leaving .page-transition{ transform:none; } }

/* Activating */
.row.is-activating .badge{ opacity:.32; transform:scale(.96); transition:transform .22s var(--inEase), opacity .22s var(--inEase), filter .22s var(--inEase); will-change: transform, opacity; }
.badge.is-active{ opacity:1 !important; transform:scale(1.02) !important; z-index:5; }

/* ===== FS overlay (lighter dimming) ===== */
.fs-overlay{ 
  position:fixed; 
  inset:0;
  box-shadow:0 30px 80px rgba(0,0,0,.45); 
  pointer-events:auto;
  /* ✓ ENABLE VERTICAL SCROLLING */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
}


.fs-overlay.is-full {
  opacity: 1;
  transform: scale(1) translateY(0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  .fs-overlay {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .fs-overlay.is-full {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.fs-overlay::before{
  content:"";
  position:absolute; inset:0;
  /* أخفّ من قبل */
  background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.10) 100%);
  pointer-events:none;
}
.fs-overlay::after{
  content:"";
  position:absolute; inset:0;
  /* أخفّ من قبل */
  background:linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,.04));
  pointer-events:none;
}

/* FS logo */
.fs-logo-link{ position:absolute; top:26px; left:30px; z-index:10000; display:inline-block; line-height:0; pointer-events:auto; }
.fs-logo{ width:120px; height:120px; object-fit:contain; filter: brightness(0) invert(1); cursor:pointer; transition:opacity .18s ease, transform .18s ease; pointer-events:auto; }
.fs-logo:hover{ opacity:.9; transform:scale(1.02); }
@media (max-width:520px){ .fs-logo{ width:84px; height:84px; } }

/* FS inner */
.fs-inner{
  position:relative;
  display:grid; grid-template-rows: 1fr auto;
  min-height: clamp(52vh, 64vh, 72vh);
  opacity:0; transform:translateY(10px);
  transition: opacity .52s var(--inEase) .28s, transform .52s var(--inEase) .28s;
  padding: min(5vh,40px) min(4vw,40px);
}
.fs-overlay.is-full .fs-inner{ opacity:1; transform:none; }

/* FS center */
.fs-center{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; color:#fff; gap:12px; padding: 0 20px;
  max-width: 92vw; /* منع النصوص من الامتداد الزائد */
  margin: 0 auto;
}
.fs-title{ 
  font-size: clamp(28px, 5vw, 56px); 
  letter-spacing: 6px; 
  font-weight: 600; 
  margin:0;
  max-width: 100%;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}
.fs-desc{ 
  max-width: min(900px, 86vw); 
  color: #f0f0f0; 
  font-size: clamp(14px, 1.6vw, 18px); 
  letter-spacing: .6px;
  word-wrap: break-word;
  line-height: 1.6;
}

/* Fix Arabic text letter-spacing to prevent disconnected characters */
body.arabic-font .fs-title,
body.arabic-font .fs-desc,
html[lang="ar"] .fs-title,
html[lang="ar"] .fs-desc {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
  font-feature-settings: "liga" 1, "calt" 1 !important;
  font-variant-ligatures: normal !important;
  -webkit-font-feature-settings: "liga" 1, "calt" 1 !important;
  text-rendering: optimizeLegibility;
}

/* ظهور العنوان/الوصف */
.fs-title, .fs-desc{ opacity: 0; transform: translateY(8px); transition: opacity .9s var(--inEase), transform 1s var(--inEase); }
.fs-overlay.is-full .fs-title{ opacity:1; transform:none; transition-delay:.08s; }
.fs-overlay.is-full .fs-desc{  opacity:1; transform:none; transition-delay:.22s; }

/* ========== READ MORE — نص أولًا + إطار يرسم تدريجيًا + تعبئة شفافة عند الهوفر ========== */

/* متغيرات قابلة للتحريك لرسم الإطار */
@property --w { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --h { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* تموضع الزر العام */
.fs-read{ justify-self:center !important; align-self:center !important; margin:16px 0 0 !important; }
/* Align the global pill button inside overlay */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]{
  justify-self:center; align-self:center; margin:64px 0 0; text-decoration:none;
}

/* الشكل النهائي داخل الأوفرلاي - محسّن احترافي */
/* Apply the global pill look directly inside overlay (mirrors section-page.css readmore) */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  padding: 15px 30px; border-radius:999px;
  border: 1.5px solid rgba(255,255,255,.32); 
  color:#fff; background:rgba(255,255,255,.09);
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.14), 0 0 0 0px rgba(255,255,255,0);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  isolation:isolate; overflow:visible;
  letter-spacing: 1.4px; font-size: 13px; font-weight: 600; text-transform:uppercase;
  cursor: pointer; user-select: none;
  /* animated fill */
  --fillColor: rgba(255,255,255,.12);
  --fillDur: .8s;
  background-image: linear-gradient(0deg, var(--fillColor), var(--fillColor));
  background-repeat:no-repeat; background-size:0% 100%; background-position:center;
  transition: all .4s cubic-bezier(.22,.61,.36,1);
}

/* Fix Arabic text in readmore button */
body.arabic-font .fs-overlay.is-full .fs-inner .readmore[data-readmore] {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* نُلغي أي تأثيرات قديمة محتملة */
.fs-overlay.is-full .fs-inner .fs-read{ box-shadow:none; }

/* رسم الإطار: أربع طبقات (أعلى/أسفل تعتمد على --w) و(يمين/يسار تعتمد على --h) */
/* no extra border draw for pill; keep it clean */

/* السهم المتحرك */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]::before{
  content: "→";
  position: relative;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  transition: transform .4s cubic-bezier(.34,.1,.64,1);
}

/* تأثير الـ Glow */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]::after{
  content:""; position:absolute; inset:-2px; pointer-events:none; z-index:-1;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 75%);
  opacity: 0; filter: blur(10px);
  transition: opacity .4s cubic-bezier(.22,.61,.36,1), filter .4s cubic-bezier(.22,.61,.36,1);
}

/* تعبئة عند الهوفر/الفوكس */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]:hover,
.fs-overlay.is-full .fs-inner .readmore[data-readmore]:focus-visible{
  background-size: 100% 100%;
  background: rgba(255,255,255,.16);
  box-shadow: 0 16px 48px rgba(0,0,0,.32), inset 0 1px 2px rgba(255,255,255,.18), 0 0 24px rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.65);
  transform: translateY(-2px);
}

.fs-overlay.is-full .fs-inner .readmore[data-readmore]:hover::before{
  transform: translateX(4px);
}

.fs-overlay.is-full .fs-inner .readmore[data-readmore]:hover::after,
.fs-overlay.is-full .fs-inner .readmore[data-readmore]:focus-visible::after{
  opacity: .75; filter: blur(14px);
}

/* ضغط ـ نعطي غلاف أقوى */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]:active{
  background: rgba(255,255,255,.2);
  transform: translateY(0px);
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 2px rgba(255,255,255,.15);
}

/* تركيز الكيبورد */
.fs-overlay.is-full .fs-inner .readmore[data-readmore]:focus-visible{ outline:none; }

/* تجميل الـ Shine effect */
.fs-overlay.is-full .fs-inner .readmore[data-readmore] .shine,
.hero .center .readmore[data-readmore] .shine {
  display: inline-block;
  margin-left: 2px;
  opacity: 0.6;
}

/* حركات */
@keyframes rmIn{ to{ opacity:1; transform:none; } }

/* يرسم الإطار: أول 50% تمدد أفقي ثم تكملة رأسية */
@keyframes borderDraw{
  0%   { --w: 0%;  --h: 0%;  }
  50%  { --w: 100%; --h: 0%; }
  100% { --w: 100%; --h: 100%; }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .fs-overlay.is-full .fs-inner .readmore[data-readmore]{ animation:none; opacity:1; transform:none; transition:none; background-size:0% 100%; }
}

/* Sticky hero */
.fs-overlay.fs-hero{
  position: fixed !important;
  inset: 0;
  width: 100% !important; height: 100vh !important;
  border-radius: 0 !important; z-index: 999;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.fs-overlay.fs-hero::after{
  content:""; position:absolute; inset:0;
  /* أخفّ من قبل */
  background:linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,.04));
  pointer-events:none;
}

/* Injected content */
#fs-contentHost{ 
  position: relative; 
  z-index: 1; 
  background:#fff; 
  color:#0a0a0a; 
  width: 100%;
  overflow: visible;
}
.fs-content-inner{ width:min(1200px,92vw); margin: 0 auto; padding: 28px 0 84px; }
.fs-content-inner .reveal-up{ opacity:0; transform: translateY(10px); transition: opacity .45s var(--inEase), transform .45s var(--inEase); }
.fs-content-inner .reveal-up.in{ opacity:1; transform:none; }

/* mode */
body.fs-mode{ overflow: hidden; scrollbar-gutter: stable; }
body.fs-mode .shell{ position: static; height: auto; z-index: 0; }
body.fs-mode .progress{ display:none; }
body.fs-mode .row{ pointer-events: none; }
#fs-contentHost{ z-index: 1; }
.fs-overlay.fs-hero{ z-index: 999; }

/* layout fixes */
.row{ align-items: flex-start !important; }
.cards{ 
  display: flex !important; 
  flex-wrap: nowrap !important; 
  gap: var(--gap) !important; 
  align-items: stretch !important; 
  min-height: var(--badgeH); 
}
.cards > .badge + .badge{ margin-left: 0 !important; }
.badge{ 
  flex: 0 0 auto !important; 
  width: var(--badgeW) !important; 
  height: var(--badgeH) !important; 
  min-width: var(--badgeW) !important;
  max-width: var(--badgeW) !important;
  min-height: var(--badgeH) !important;
  max-height: var(--badgeH) !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .fs-title,.fs-desc{ transition: none; opacity:1; transform:none; }
  .seq-start .fs-read::before, .seq-start .fs-read::after, .seq-start .fs-read .shine{ animation: none !important; opacity: 0 !important; }
}

/* text on images */
.badge::after{ z-index: 1; }
.badge span{ position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.85); }

/* injected defaults */
#fs-contentHost .wrap, #fs-contentHost main.wrap, #fs-contentHost .fs-content-inner > .wrap{ width: min(1100px, 92vw); margin: 0 auto; padding: 24px 0 80px; }
#fs-contentHost img{ max-width:100%; height:auto; display:block; }
#fs-contentHost .hero{ position: relative; height: clamp(40vh, 50vh, 60vh); overflow: hidden; border-radius: 0; background:#000; }
#fs-contentHost .hero img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; background:#000; }
body.fs-section-projects-residential #fs-contentHost .hero img{ object-position:50% 0% !important; }
@media (min-width: 769px) {
  #fs-contentHost .hero{ height: 70vh; }
}
#fs-contentHost .hero .center h1{ letter-spacing: 8px; }
#fs-contentHost .hero .center p{ letter-spacing: 2px; }

/* Fix Arabic text letter-spacing in hero section */
body.arabic-font #fs-contentHost .hero .center h1,
body.arabic-font #fs-contentHost .hero .center p {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* ==== Brand buttons inside injected content (ensure green bg + white text) ==== */
#fs-contentHost .btn,
#fs-contentHost a.btn,
#fs-contentHost button.btn{
  background: var(--notch-accent) !important;
  color: var(--notch-accent-contrast) !important;
  border-color: rgba(0,0,0,.12) !important;
}
#fs-contentHost .btn:not(.btn--light):is(:hover, :focus){
  color: var(--notch-accent-contrast) !important;
}
#fs-contentHost .actions .primary{
  background: var(--notch-accent) !important;
  color: var(--notch-accent-contrast) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* remove bullets from all lists in injected content */
#fs-contentHost ul{ list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
#fs-contentHost ul li{ padding-left:0 !important; }
#fs-contentHost ul li::before{ display:none !important; }

/* بطاقات داخل الصفحات المحقونة */
#fs-contentHost .card img{
  width:100%;
  height:220px;
  object-fit: contain;
  background:#fff;
  display:block;
}
@media (max-width:640px){
  #fs-contentHost .card img{ height:200px; }
}

/* إصلاح تنسيق بطاقات Capabilities في صفحة About */
#fs-contentHost .cards{
  display: grid !important;
  align-items: stretch !important;
}
#fs-contentHost .card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
#fs-contentHost .card__body{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
#fs-contentHost .card__title{
  margin-bottom: 8px !important;
}
#fs-contentHost .card__text{
  flex: 1 !important;
}

/* Match standalone About > Capabilities look when injected */
#fs-contentHost [aria-labelledby="about-capabilities"] .cards{
  align-items: stretch !important;
  gap: 14px !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card{
  display: flex !important;
  flex-direction: column !important;
  min-height: 320px !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__body{
  flex: 1 1 auto !important;
  padding: 14px 16px !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__text{
  flex: 1 1 auto !important;
}
/* Ensure card images mirror standalone sizing */
#fs-contentHost [aria-labelledby="about-capabilities"] .card img{
  height: 200px !important;
  object-fit: cover !important;
  background: transparent !important;
}
/* Restore dark block container like standalone (cards themselves are beige) */
#fs-contentHost [aria-labelledby="about-capabilities"]{
  background: #0f0f0f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 28px min(4vw, 28px) !important;
}

/* Compact the Capabilities container (injected view only) without changing card sizes */
#fs-contentHost [aria-labelledby="about-capabilities"]{
  padding: 16px min(3vw, 18px) !important;
  border-radius: 14px !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] h2{
  margin: 0 0 6px !important;
  letter-spacing: 2px !important;
}

/* Fix Arabic text letter-spacing in capabilities section */
body.arabic-font #fs-contentHost [aria-labelledby="about-capabilities"] h2 {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

#fs-contentHost [aria-labelledby="about-capabilities"] .lead{
  margin: 0 0 8px !important;
  font-size: 14px !important;
  opacity: .9 !important;
}

/* === Make Capabilities cards content-driven height (menu-strip injected view) === */
#fs-contentHost [aria-labelledby="about-capabilities"] .cards{ align-items: start !important; }
#fs-contentHost [aria-labelledby="about-capabilities"] .card{
  min-height: auto !important;
  height: auto !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__body{
  flex: 0 0 auto !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__text{
  flex: initial !important;
}

/* === FINAL: Match standalone About Capabilities exactly (size + border + spacing) === */
#fs-contentHost [aria-labelledby="about-capabilities"]{
  background: #0f0f0f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 28px min(4vw, 28px) !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .cards{
  align-items: stretch !important; /* equalize heights per row */
  gap: 10px !important; /* compact gap */
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;          /* equal height */
  min-height: 0 !important;         /* but allow compact rows */
  background: var(--c02, #dcd6cd) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__body{
  flex: 1 1 auto !important;
  padding: 8px 10px !important;     /* smaller padding for shorter cards */
}
#fs-contentHost [aria-labelledby="about-capabilities"] .card__title{ margin-bottom: 4px !important; }
#fs-contentHost [aria-labelledby="about-capabilities"] .card__text{ flex: 1 1 auto !important; }

/* Neutralize any imported global min-height rules from section pages when injected */
body.fs-mode #fs-contentHost .card{ min-height: 0 !important; }

/* (Reverted) Keep outer block frame for Capabilities in injected view */
/* hide strip when section is shown */
body[data-page="strip"].fs-mode{ overflow-y:auto; background:#fff; }
body.fs-mode .shell, body.fs-mode .progress, body.fs-mode .strip-close { display: none !important; }
#fs-contentHost { position: relative; z-index: 1; background: #fff; }

/* keep strip dark when not fs-mode */
body[data-page="strip"]:not(.fs-mode){
  background:#000 !important;
  color:#fff !important;
}
body[data-page="strip"]:not(.fs-mode) .shell,
body[data-page="strip"]:not(.fs-mode) .row,
body[data-page="strip"]:not(.fs-mode) .label,
body[data-page="strip"]:not(.fs-mode) .progress{
  color:#fff !important;
}
body[data-page="strip"]:not(.fs-mode) .fixed-logo{
  opacity:1 !important;
  pointer-events:auto !important;
  filter:none !important;
}

/* remove bg tint + hide fs-logo when overlay shown */
.fs-overlay{ background-color: transparent !important; }
.fs-overlay .fs-logo-link { display: none !important; }

/* استيراد ستايل الأقسام: moved to top to comply with @import placement rules */

/* لا تغيّر حجوم الخطوط/الحاويات داخل وثائق الأقسام */
.injected .wrap { max-width: min(1100px, 92vw); margin: 0 auto; }
.injected .wrap section { margin: 28px 0; }
.injected .hero img { object-fit: cover; object-position:50% 0%; background:#000; }

/* منع تأثيرات strip على عناصر صفحات الأقسام */
.shell .wrap .title,
.shell .wrap .strap,
.shell .wrap .btn,
.shell .wrap .cards,
.shell .wrap .block { all: revert; }

/* تنظيف شعارات داخل البطاقات */
.badge img{ 
  display:block !important; 
  width:100% !important; 
  height:100% !important; 
  object-fit:cover !important;
  position:absolute !important;
  inset:0 !important;
}
.badge .logo, .badge .brand, .badge .badge-logo{ display:none !important; }

/* ===== Injected page stage (iframe) ===== */
.inject-stage{
  position: relative;
  width: 100%;
  min-height: 80vh;
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.inject-stage iframe{
  display: block;
  width: 100%;
  height: calc(100vh - 160px);
  border: 0;
  background: #fff;
}
.inject-close{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,.4);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
}
/* إخفاء الشبكة عند الإطار */
.shell.show-injected #row{ display:none !important; }

/* تأكيد ظهور اللوقو العالمي */
.global-fixed-logo{ z-index: 5000 !important; }
.inject-stage{ z-index: 1; }
/* === Stronger pure-white text for FS hero === */
.fs-overlay.is-full .fs-title,
.fs-overlay.is-full .fs-desc{
  color: #fff !important;
  opacity: 1 !important;                  /* لا شفافية أبداً */
  text-shadow:
    0 0 0 #fff,                           /* يضمن بياض صافي */
    0 0 18px rgba(255,255,255,.55),       /* وهج أقوى */
    0 0 36px rgba(255,255,255,.35);       /* وهج إضافي ناعم */
}

/* ===== READ MORE button inside injected pages (floating over overlay) ===== */
body.fs-mode .readmore[data-readmore].is-floating{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10050; /* above fs-overlay (~9998) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  letter-spacing: .16em;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid var(--notch-accent, #153F34) !important;
  color: var(--notch-accent, #153F34) !important;
  background: transparent !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
  overflow: hidden;
  /* animated brand fill */
  --fillColor: var(--notch-accent, #153F34);
  --fillDur: .9s;
  background-image: linear-gradient(0deg, var(--fillColor), var(--fillColor));
  background-repeat:no-repeat;
  background-size: 0% 100%;
  background-position: left top;
  transition: background-size var(--fillDur) var(--inEase), transform .18s var(--inEase), filter .18s var(--inEase), box-shadow .18s var(--inEase), opacity .2s ease;
}
body.fs-mode .readmore[data-readmore].is-floating:hover,
body.fs-mode .readmore[data-readmore].is-floating:focus-visible{
  background-size: 100% 100%;
  color: #fff !important;
  outline: none;
}
body.fs-mode .readmore[data-readmore].is-floating:active{
  filter: brightness(1.05);
}
body.fs-mode .readmore[data-readmore].is-floating.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Fix Arabic text in floating readmore button */
body.arabic-font.fs-mode .readmore[data-readmore].is-floating {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

@media (max-width: 540px){
  body.fs-mode .readmore[data-readmore].is-floating{
    right: 12px;
    bottom: 12px;
    height: 40px;
    padding: 0 14px;
    font-size: 11px;
  }
}

/* لو فيه أي تلوين عام داخل الكتلة، ثبّت الأبيض */
.fs-overlay.is-full .fs-center{ color:#fff !important; }

/* خيار: زيد تباين الخلفية الخفيف أسفل النص فقط */
.fs-overlay.is-full::before{
  background:
    radial-gradient(60% 60% at 50% 55%, rgba(0,0,0,0.02), rgba(0,0,0,0.10)),
    linear-gradient(to top, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
}

/* لو تبغى نفس التعزيز داخل هيدر الصفحات بعد الحقن أيضاً */
#fs-contentHost .hero .center,
#fs-contentHost .hero .center h1,
#fs-contentHost .hero .center p{
  color:#fff !important;
  text-shadow:
    0 0 0 #fff,
    0 0 14px rgba(255,255,255,.45),
    0 0 28px rgba(255,255,255,.28);
  max-width: 90vw;
  word-wrap: break-word;
}
#fs-contentHost .hero .center h1{
  line-height: 1.2;
  hyphens: auto;
}
#fs-contentHost .hero .center p{
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
/* ===== Hero section ===== */

/* تأكيد بقاء النص أبيض وواضح */
.fs-overlay.fs-hero .fs-title,
.fs-overlay.fs-hero .fs-desc{
  color:#fff !important;
  text-shadow: 0 0 0 #fff, 0 0 10px rgba(255,255,255,.35), 0 0 22px rgba(255,255,255,.25);
}
/* === READ MORE (Hero) — طابق زر الأوفرلاي بدقة مع حواف حادّة وتعبئة متحركة === */
.fs-overlay.is-full .fs-inner .fs-read{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 16px;
  border-radius: 0 !important;                /* حواف حادّة */
  letter-spacing: .16em;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;                                 /* نص أبيض افتراضيًا */
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
  overflow: hidden;
  /* تعبئة متحركة */
  --fillColor: rgba(255,255,255,.32);         /* كانت .16 → الآن أفتح */
  --fillDur: .9s;
  background-image: linear-gradient(0deg, var(--fillColor), var(--fillColor));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left top;
  transition: background-size var(--fillDur) var(--inEase),
              transform .18s var(--inEase),
              filter .18s var(--inEase),
              box-shadow .18s var(--inEase),
              color .25s cubic-bezier(.22,.61,.36,1);
}

/* Fix Arabic text in fs-read button */
body.arabic-font .fs-overlay.is-full .fs-inner .fs-read {
  letter-spacing: 0 !important;
  font-family: var(--font-arabic);
}

/* عند الضغط نخليها أفتح شوي زيادة */
.fs-overlay.is-full .fs-inner .fs-read:active{
  background-image: linear-gradient(0deg, rgba(255,255,255,.44), rgba(255,255,255,.44));
}

/* الإطار المتحرك يرث الحواف الحادّة ويكون واضح */
.fs-overlay.is-full .fs-inner .fs-read::after{
  border-radius: 0 !important;                /* نفس الحواف الحادّة */
  opacity: 1;                                  /* خط أبيض أنصع */
}
/* === READ MORE (fs-read) — غيّر لون الجملة للأسود أثناء التعبئة === */

/* تعبئة عند الهوفر/الفوكس + قلب لون النص للأسود */
.fs-overlay.is-full .fs-inner .fs-read:hover,
.fs-overlay.is-full .fs-inner .fs-read:focus-visible{
  background-size: 100% 100%;
  color: #111;                                   /* أسود واضح عند التعبئة */
  outline: none;
}

/* أثناء الهوفر/الفوكس/الضغط تصير الجملة سوداء لكون الخلفية صارت بيضاء */
.fs-overlay.is-full .fs-inner .fs-read:hover,
.fs-overlay.is-full .fs-inner .fs-read:focus-visible,
.fs-overlay.is-full .fs-inner .fs-read:active{
  text-shadow: none;                             /* ألغِ أي توهج قد يضعّف الوضوح */
}

/* (اختياري) لو فيه أي أيقونة داخل الزر، خلّي لونها يتبع النص */
.fs-overlay.is-full .fs-inner .fs-read svg,
.fs-overlay.is-full .fs-inner .fs-read .icon{
  transition: fill .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1);
  fill: currentColor;
  color: currentColor;
}

/* ===== Footer Styles for Injected Content ===== */
#fs-contentHost .site-footer{
  background: transparent;
  padding: 24px 0 0;
  color: #333;
  border-top: 1px solid #eaeaea;
  margin-top: 40px;
}
#fs-contentHost .site-footer .footer-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding-bottom: 12px !important;
}
#fs-contentHost .site-footer .footer-copy{
  font-size: 14px;
  opacity: 0.9;
  color: #333;
}
#fs-contentHost .site-footer .social-icons{
  display: flex;
  gap: 12px;
  align-items: center;
}
#fs-contentHost .site-footer .social-icons a{
  color: var(--notch-accent, #153F34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#fs-contentHost .site-footer .social-icons a:hover{
  transform: translateY(-2px);
  opacity: 0.8;
}
#fs-contentHost .site-footer svg{
  display: block;
  width: 20px;
  height: 20px;
  color: var(--notch-accent, #153F34);
}
@media (max-width: 640px){
  #fs-contentHost .site-footer .footer-copy{
    font-size: 13px;
  }
}

/* Premium Effects import moved to top to comply with @import placement rules */

/* ==== Carbon-fiber overlay ONLY for About section (keeps hero image visible) ==== */
.fs-overlay.is-about::before{
  content: "";
  position: absolute; inset: 0;
  /* combine existing vignette with subtle carbon crosshatch */
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,var(--vigCenter, .12)) 0%, rgba(0,0,0,var(--vigEdge, .38)) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent 100%);
  background-size: auto, 8px 8px, 8px 8px;
  pointer-events: none;
}

/* Show inline footer only when injected */
#fs-contentHost .site-footer--inline{ display:block !important; }

/* ===== تحسينات النصوص للجوال والشاشات المتوسطة ===== */
@media (max-width: 768px){
  .fs-center{
    padding: 0 16px;
    max-width: 95vw;
  }
  .fs-title{
    font-size: clamp(22px, 6vw, 34px);
    letter-spacing: clamp(2px, 1vw, 5px);
    line-height: 1.3;
  }
  .fs-desc{
    font-size: clamp(13px, 3.2vw, 15px);
    max-width: 92vw;
    line-height: 1.6;
  }
  #fs-contentHost .hero .center h1{
    font-size: clamp(22px, 6vw, 34px) !important;
    letter-spacing: clamp(2px, 1vw, 5px) !important;
  }
  #fs-contentHost .hero .center p{
    font-size: clamp(12px, 3.2vw, 14px) !important;
    max-width: 92% !important;
  }
  
  /* Fix Arabic text letter-spacing on mobile */
  body.arabic-font .fs-title,
  body.arabic-font #fs-contentHost .hero .center h1 {
    letter-spacing: 0 !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px){
  .fs-center{
    max-width: 90vw;
  }
  .fs-title{
    font-size: clamp(32px, 4.5vw, 48px);
    letter-spacing: clamp(3px, 0.8vw, 6px);
  }
  .fs-desc{
    max-width: min(850px, 88vw);
  }
  #fs-contentHost .hero .center h1{
    font-size: clamp(32px, 4.5vw, 48px) !important;
  }
  
  /* Fix Arabic text letter-spacing on tablets */
  body.arabic-font .fs-title {
    letter-spacing: 0 !important;
  }
}