@import url('premium-effects.css');

:root{
  --wrap:min(280px,92vw);
  --g:22px;
  --r:18px;
  --ink:#0a0a0a;
  --muted:#585858;
  --line:#eaeaea;
  --bg:#ffffff;
  --bgSoft:#fafafa;
  /* prefer a single accent value; use gradient only if desired later */
  --btnGrad: var(--notch-accent, #153F34);
  /* site accent fallback - matches main style.css */
  --notch-accent: #153F34;
  --notch-accent-contrast: #ffffff;
  --ease: cubic-bezier(.22,.61,.36,1);
  --glass-bg: rgba(255,255,255,.78);
  --glass-bd: rgba(0,0,0,.08);
  --shadow-lg: 0 28px 90px rgba(0,0,0,.28);
  --shadow-md: 0 14px 44px rgba(0,0,0,.20);
  --font-primary: 'NotchFont-1', system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* font (same path as main site) */
@font-face{
  font-family: 'NotchFont-1';
  /* Prefer modern WOFF2 with WOFF and OTF fallbacks (files live in fonts/english/) */
  src: url('fonts/english/PowerGroteskTrial-Regular.woff2') format('woff2'),
       url('fonts/english/PowerGroteskTrial-Regular.woff') format('woff'),
       url('fonts/english/PowerGroteskTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body{
  font-family: var(--font-primary);
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Fixed logo */
.fixed-logo{
  position:fixed; top:24px; left:24px; z-index:1000; display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#000;
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-lg));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-lg));
  padding:8px 12px; border-radius:14px; border:1px solid var(--glass-bd);
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.fixed-logo:hover{ transform: translateY(-1px) }
.fixed-logo img{ width:92px; height:92px; display:block; }
@media (max-width:520px){ .fixed-logo img{ width:68px; height:68px; } }
.fixed-logo--on-dark img{ filter:brightness(0) invert(1); }

/* Container */
.wrap{ width:min(1200px,92vw); margin:0 auto; padding:28px 0 84px; }
header{ padding-top:136px; margin-bottom:18px; }
.title{ font-size:40px; letter-spacing:1.2px; line-height:1.15; margin:6px 0 8px; font-weight:600;}
.strap{ color:#333; font-size:16px }

/* Hero */
.hero{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  /* Align hero height with Project Management page */
  height: clamp(56vh, 68vh, 78vh);
  margin:18px 0 18px;
  background:#000; box-shadow: var(--shadow-lg);
}
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02) }
.hero img{ z-index: 0; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
  pointer-events:none;
  z-index: 1;
}
.hero .center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; text-align:center; padding:0 14px; text-shadow:0 8px 26px rgba(0,0,0,.5);
  z-index: 2;
  max-width: 90vw; /* منع النص من الامتداد كثيراً */
}
.hero h1{
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 6px;
  margin-bottom:8px; font-weight:300;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}
.hero p{ 
  opacity:.95; 
  margin-bottom:14px;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Menu Strip button */
.strip-launch{
  position:absolute; top:18px; right:18px; z-index:900;
  display:inline-flex; align-items:center; gap:8px;
  height:46px; padding:0 14px; border-radius:12px;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  color:#fff; border:1px solid rgba(255,255,255,.28);
  letter-spacing:2px; font:500 12px/1 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none; cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.strip-launch:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); background: rgba(0,0,0,.58); }
.strip-launch:active{ transform:none; }
.strip-launch__icon,
.strip-launch__icon::before,
.strip-launch__icon::after{
  display:block; width:18px; height:2px; background:#fff; border-radius:2px; content:"";
}
.strip-launch__icon{ position:relative; }
.strip-launch__icon::before{ position:absolute; left:0; top:-6px; }
.strip-launch__icon::after{ position:absolute; left:0; top:6px; }

/* (تمت إزالة تعريف READ MORE القديم بالكامل لمنع التعارض) */

#contentStart{ display:block; width:100%; height:1px; margin:0; padding:0; }

/* Content blocks */
.intro{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--g); margin:18px 0 8px; }
.intro p{ color:#333 }
.card{ background:var(--bgSoft); border:1px solid var(--line); border-radius:var(--r); padding:16px }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); margin:22px 0 }
.value{ border:1px solid var(--line); border-radius:var(--r); padding:16px; background:#fff }
.value h3{ font-size:16px; letter-spacing:.4px; margin:0 0 6px }
.value p{ color:#444; font-size:14px }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px }
.kpi strong{ display:block; font-size:22px; }
.kpi span{ color:var(--muted); font-size:13px }

/* reveal animation */
.reveal-up{ opacity:0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal-up.in{ opacity:1; transform:none; }

/* contact / brief */
.contact{ margin-top:26px; background:var(--bgSoft); border:1px solid var(--line); border-radius:22px; padding:18px }
.contact h2{ font-size:22px; margin-bottom:6px }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form .full{ grid-column:1/-1 }
.field{ display:flex; flex-direction:column; gap:6px }
label{ font-size:13px; color:#333 }
input,textarea{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 12px; font:inherit; color:inherit;
  outline:none; transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
textarea{ min-height:130px; resize:vertical }
input:focus, textarea:focus{ border-color:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08) }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }

/* Buttons (pro) */
.btn{
  --btn-h: 46px;
  --btn-pad-x: 18px;
  --btn-r: 12px;
  --btn-ring: 0 0 0 4px rgba(17,17,17,.10);
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-r);
  font-size:13px; letter-spacing:1.2px; font-weight:500;
  text-decoration:none; color:var(--notch-accent-contrast); background:var(--notch-accent);
  border:1px solid rgba(0,0,0,.08); overflow:hidden; cursor:pointer; user-select:none;
  box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: translateY(0);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease), background .18s var(--ease);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08); filter: saturate(115%) }
.btn:active{ transform: translateY(0); transition-duration:.06s }
.btn:focus-visible{ outline:none; box-shadow: var(--btn-ring), 0 10px 26px rgba(0,0,0,.22); }
.btn--light{
  background:#fff; color:#111; border-color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.04);
}
.btn--light:hover{ background:#111; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.btn--xl{ --btn-h: 54px; --btn-pad-x: 22px; --btn-r: 14px; font-size:14px; letter-spacing:1.4px; }
.btn svg{ width:18px; height:18px; display:block; }

/* Glassy brief card */
  .contact--glass{
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-xl));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-xl));
  border: 1px solid var(--glass-bd);
  box-shadow: var(--shadow-lg);
  border-radius: 22px;
}
.contact--glass .form{ grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.contact--glass .field.full{ grid-column: 1 / -1; }
.contact--glass .actions{ gap: 12px; }

/* Inputs (glassy card) */
.contact--glass input,
.contact--glass textarea{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 12px;
}
.contact--glass input:focus,
.contact--glass textarea:focus{ border-color:#111; box-shadow: 0 0 0 4px rgba(17,17,17,.08); }

/* Override for Start a brief in interior.html (menu-strip.html?section=interior.html) */
body.theme-interior .contact.contact--glass,
#fs-contentHost.theme-interior .contact.contact--glass {
  background: 
    repeating-linear-gradient(0deg,#1a1a1a 0px,#2e2e2e 1px,#3a3a3a 2px,#2e2e2e 3px,#1a1a1a 4px),
    repeating-linear-gradient(90deg,#1a1a1a 0px,#2e2e2e 1px,#3a3a3a 2px,#2e2e2e 3px,#1a1a1a 4px),
    radial-gradient(ellipse at top left,#2a2a2a,#1a1a1a 70%) !important;
  background-blend-mode: overlay, overlay, normal !important;
  background-size: 4px 4px, 4px 4px, 100% 100% !important;
  border: 2px solid #4a4a4a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.3), inset 2px 2px 4px rgba(0,0,0,.4) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
body.theme-interior .contact.contact--glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 15% 20%, rgba(192,192,192,.4) 0%, transparent 25%),
    radial-gradient(circle at 85% 80%, rgba(169,169,169,.3) 0%, transparent 25%),
    repeating-linear-gradient(45deg, transparent 0px, rgba(192,192,192,.15) 1px, rgba(220,220,220,.2) 2px, rgba(192,192,192,.15) 3px, transparent 4px, transparent 8px),
    repeating-linear-gradient(-45deg, transparent 0px, rgba(169,169,169,.1) 1px, rgba(192,192,192,.15) 2px, rgba(169,169,169,.1) 3px, transparent 4px, transparent 8px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.8;
  border-radius: inherit;
  z-index: 0;
}
body.theme-interior .contact.contact--glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.2) 100%),
    linear-gradient(90deg, rgba(192,192,192,.05) 0%, transparent 50%, rgba(169,169,169,.05) 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  border-radius: inherit;
  z-index: 0;
}
body.theme-interior .contact.contact--glass h2,
body.theme-interior .contact.contact--glass p,
body.theme-interior .contact.contact--glass label {
  color: #fff !important;
  position: relative;
  z-index: 1;
}
body.theme-interior .contact.contact--glass input,
body.theme-interior .contact.contact--glass textarea {
  color: #111;
  background: #fff;
  position: relative;
  z-index: 1;
}
body.theme-interior .contact.contact--glass .actions,
body.theme-interior .contact.contact--glass .btn,
body.theme-interior .contact.contact--glass .pill {
  position: relative;
  z-index: 1;
}
body.theme-interior .contact.contact--glass .pill,
#fs-contentHost.theme-interior .contact.contact--glass .pill {
  color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
  background: transparent !important;
}

/* Responsive */
@media (max-width:980px){ .intro{ grid-template-columns:1fr } .values{ grid-template-columns:1fr } }
@media (max-width:640px){ .title{ font-size:34px } .form{ grid-template-columns:1fr } .kpis{ grid-template-columns:1fr 1fr } }
/* ensure scroll */
html, body{ height:auto; min-height:100%; overflow-y:auto; }
.hero{ position: relative; }

/* strip-launch duplication guard */
.strip-launch{ position:absolute; top:18px; right:18px; z-index:5; padding:10px 12px; border-radius:12px; text-decoration:none; color:#fff; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); font-size:12px; letter-spacing:2px; transition:transform .18s ease, opacity .18s ease; }
.strip-launch:hover{ transform: translateY(-1px); opacity:.95; }
.strip-launch__icon{ width:16px; height:12px; position:relative; display:inline-block; }
.strip-launch__icon::before, .strip-launch__icon::after{ content:""; position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; }
.strip-launch__icon::before{ top:0 } .strip-launch__icon::after{ bottom:0 }

/* fallback smooth scroll */
html { scroll-behavior: smooth; }
#contentStart{ scroll-margin-top: 14px; }


/* Interior — polish + scoping for injected mode */
:root{
  --font-ui: var(--font-primary, system-ui, Segoe UI, Roboto, Arial, sans-serif);
  --btn-focus: 0 0 0 4px rgba(17,17,17,.10);
}
:where(body, #fs-contentHost){ font-family: var(--font-ui); }
:where(body, #fs-contentHost) .title{ font-weight:600; letter-spacing:1.2px; }
:where(body, #fs-contentHost) .h2{ font-weight:500; letter-spacing:2px; }
:where(body, #fs-contentHost) .btn{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(0,0,0,.08); box-shadow: 0 10px 26px rgba(0,0,0,.20); background: var(--notch-accent); color: var(--notch-accent-contrast); }
:where(body, #fs-contentHost) .btn:hover{ transform: translateY(-1px); filter:saturate(112%); }
:where(body, #fs-contentHost) .btn--light{ color:#111; border-color:#111; -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-md)); backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-md)); box-shadow: 0 8px 22px rgba(0,0,0,.10); }
:where(body, #fs-contentHost) .btn--primary{ padding:14px 22px; letter-spacing:1.6px; font-weight:600; }
:where(body, #fs-contentHost) .btn .icon{ width:14px; height:14px; display:inline-block; position:relative; }
:where(body, #fs-contentHost) .btn .icon::before{ content:"›"; font-size:16px; line-height:1; display:block; transform:translateY(-1px); }
:where(body, #fs_contentHost) .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
:where(body, #fs_contentHost) .brief-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 12px; }
:where(body, #fs_contentHost) .brief-card{ border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,#fff,#fafafa); box-shadow:0 20px 40px rgba(0,0,0,.06); padding:18px; }
/* ===== Interior theme palette ===== */
:root{
  --c01:#1e4638; /* green */
  --c02:#dcd6cd; /* beige */
  --c03:#020303; /* near-black */
  --c04:#ededed; /* light grey */
}

/* نفعّل السمة على body أو على حاضن الحقن */
:where(body.theme-interior, #fs-contentHost.theme-interior){
  /* نص أبيض على الخلفيات الداكنة */
  --on-dark: #fff;
}

/* النص في الهيرو/البادج أبيض دائمًا (تعزيز) */
:where(.hero, .fs-overlay) .center,
:where(.fs-overlay) .fs-title,
:where(.fs-overlay) .fs-desc { color:#fff !important; }

/* ===== خلفيات الأقسام (بدون تعديل HTML) ===== */
/* Intro: من الأبيض إلى البيج */
:where(body.theme-interior, #fs-contentHost.theme-interior) .intro{
  background: linear-gradient(180deg, #fff 0%, var(--c02) 100%);
  border-radius: 18px;
  padding: 16px;
}

/* Values/KPIs: من الرمادي الفاتح إلى الأسود (ونص أبيض) */
:where(body.theme-interior, #fs-contentHost.theme-interior) .values,
:where(body.theme-interior, #fs-contentHost.theme-interior) .kpis{
  background: linear-gradient(180deg, var(--c04) 0%, var(--c03) 100%);
  border-radius: 18px;
  padding: 16px;
  color: var(--on-dark);
}
:where(body.theme-interior, #fs-contentHost.theme-interior) .values .value,
:where(body.theme-interior, #fs-contentHost.theme-interior) .kpis .kpi{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--on-dark);
}

/* Start a brief: من الأسود إلى الأخضر */
:where(body.theme-interior, #fs-contentHost.theme-interior) .contact{
  background: linear-gradient(180deg, var(--c03) 0%, var(--c01) 100%);
  color: var(--on-dark);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}

/* أزرار على خلفية داكنة */
:where(body.theme-interior, #fs-contentHost.theme-interior) .contact .btn{
  /* Use site accent so interior contact buttons match brand. Fallback kept for older browsers */
  background: var(--notch-accent, #153F34);
  color: var(--notch-accent-contrast, #ffffff);
  border-color: rgba(0,0,0,.08);
}
:where(body.theme-interior, #fs_contentHost.theme-interior) .contact .btn--light{
  background:#fff; color:#111; border-color:#111;
}
/* ===== Color Bands + Auto Contrast ===== */
.band{
  position: relative;
  padding: 28px 0;
  margin: 18px 0;
  border-radius: 18px;
  overflow: hidden;
}

.band--fade-black{  background: linear-gradient(180deg,#fff 0%, #000 100%); }
/* Make green bands use the site accent variable so the brand color is centralized */
.band--fade-green{  background: linear-gradient(180deg,#000 0%, var(--notch-accent, #153F34) 100%); }
.band--fade-white{  background: linear-gradient(180deg,#eaeaea 0%, #fff 100%); }
.band--green-solid{ background: var(--notch-accent, #153F34); }
.band--black-solid{ background: #000; }

/* كونتراست تلقائي باستخدام “on-dark / on-light” */
.band.on-dark{
  --ink:#fff; --muted:rgba(255,255,255,.82);
  color: var(--ink);
}
.band.on-light{
  --ink:#0a0a0a; --muted:#585858;
  color: var(--ink);
}

/* الروابط داخل الداكن */
.band.on-dark a{ color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); }
.band.on-dark .value, 
.band.on-dark .card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}

/* نص الهيرو/العناوين فوق خلفيات داكنة */
.band.on-dark h1, 
.band.on-dark h2, 
.band.on-dark .h2, 
.band.on-dark .title{
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* أزرار داخل الداكن */
.band.on-dark .btn{ background: var(--notch-accent, #153F34); color: var(--notch-accent-contrast, #ffffff); border-color: rgba(0,0,0,.08); }
.band.on-dark .btn--light{
  background: rgba(255,255,255,.9); color:#111; border-color:#111;
}

/* بطاقة زجاجية صغيرة وراء النص لو جزء من التدرّج مزعج */
.band .scrim{
  background: rgba(0,0,0,.35);
  color:#fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* تأمين العناصر الصغيرة */
.band.on-dark .kpi span,
.band.on-dark .value p,
.band.on-dark .strap{ color: var(--muted); }

/* صور داخل البطاقات ما تغمّق زيادة */
.band.on-dark .card img{ filter: brightness(.92) contrast(1.02); }

/* تحسين الوصول */
.band.on-dark .btn:focus-visible{ box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
.band.on-light .btn:focus-visible{ box-shadow: 0 0 0 4px rgba(17,17,17,.12); }
/* helper: خلي الصورة كاملة داخل نفس الصندوق */
.img-fit-contain{
  width: 100%;
  height: 220px;           /* نفس ارتفاع الصندوق الحالي */
  object-fit: contain;     /* تبين الصورة كاملة */
  background: #fff;        /* خلفية بيضاء للـ letterboxing */
  display: block;
}

/* لو انحقنت الصفحة عبر الـ Menu Strip */
#fs-contentHost .img-fit-contain{
  height: 220px;           /* يطابق نفس الارتفاع المحدد هناك */
  object-fit: contain;
  background: #fff;
}
/* صور الكروت: تملأ الصندوق بالكامل بدون فراغات */
.intro .card img,
.card img{
  width:100%;
  height:220px;           /* نفس ارتفاع الكرت الحالي */
  object-fit: cover;      /* تغطية كاملة بدون حواف/فراغات */
  background: none;       /* بدون تلوين خلفية داخلية */
  display:block;          /* يمنع فراغ السطر السفلي */
}

/* Project card images: zoom on hover only. Prevent cards from moving with pointer. */
.project, .project-card { /* ensure cards don't translate on hover from JS/CSS */
  transform: none !important;
}
.project-card__image,
.project-card img,
.project img {
  transition: transform .45s var(--ease);
  transform-origin: center center;
  will-change: transform;
}
/* Apply gentle zoom on hover of the image or the card (keeps click area generous) */
.project-card__image:hover,
.project-card:hover .project-card__image,
.project img:hover,
.project:hover img {
  transform: scale(1.06);
}

/* اختياري: تصغير الارتفاع قليلاً على الشاشات الصغيرة */
@media (max-width:640px){
  .intro .card img,
  .card img{ height:200px; }
}
/* جعل العنوان والوصف أبيض نقي ومتمركز كما في الـ FS */
.hero .center h1,
.fs-title{ color:#fff !important; text-shadow:none !important; opacity:1 !important; }

.hero .center p,
.fs-desc{ color:#fff !important; text-shadow:none !important; opacity:1 !important; }

/* تمركز آمن */
.fs-inner{ display:grid; place-items:center; text-align:center; }
.fs-center{ text-align:center; }

/* =========================================================================
   READ MORE — نص أصغر + ظهور أولي + خطوط إطار تتكوّن بالتتابع + تعبئة شفافة
   ========================================================================= */
.hero .center .readmore[data-readmore]{
  /* احترافي: شكل Pill بدون سهم + تعبئة شفافة متدرجة على الهوفر */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: transparent;
  letter-spacing: 2.4px; /* مسافة أكبر لتبدو هوية قوية */
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 8px 26px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);

  /* دخول أولي */
  opacity: 0;
  transform: translateY(4px);
  animation: rmIn .6s ease forwards .15s;

  /* تعبئة متدرجة (يسار→يمين) */
  --fillColor: rgba(255,255,255,.16);
  --fillGrad: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 100%);
  background-image:
    linear-gradient(0deg, var(--fillColor), var(--fillColor));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left top;
  transition: background-size 1.05s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s var(--ease),
              transform .35s var(--ease),
              border-color .35s var(--ease);
}
.hero .center .readmore[data-readmore]::after{
  /* طبقة تأثير خافت داخلي */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%),
              linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 100%);
  opacity:.0; transform:scale(1.2); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero .center .readmore[data-readmore]:hover,
.hero .center .readmore[data-readmore]:focus-visible{
  background-size: 100% 100%;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
}
.hero .center .readmore[data-readmore]:hover::after,
.hero .center .readmore[data-readmore]:focus-visible::after{
  opacity:.55; transform:scale(1);
}
.hero .center .readmore[data-readmore]:active{
  background-image: linear-gradient(0deg, rgba(255,255,255,.28), rgba(255,255,255,.28));
  transform:translateY(0);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.10);
}

/* خطوط الإطار تُرسم بالتتابع */
.hero .center .readmore[data-readmore]::before,
.hero .center .readmore[data-readmore]::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
}

/* الأفقية: أعلى/أسفل تتمدّد من 0% → 100% */
.hero .center .readmore[data-readmore]::before{
  background:
    linear-gradient(#ffffff,#ffffff) top left / 0% 1px no-repeat,
    linear-gradient(#ffffff,#ffffff) bottom right / 0% 1px no-repeat;
  animation: rmDrawX 1.25s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .45s;
}

/* العمودية: يسار/يمين تتمدّد من 0% → 100% */
.hero .center .readmore[data-readmore]::after{
  background:
    linear-gradient(#ffffff,#ffffff) top left / 1px 0% no-repeat,
    linear-gradient(#ffffff,#ffffff) bottom right / 1px 0% no-repeat;
  animation: rmDrawY 1.25s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .70s;
}

/* تركيز الكيبورد */
.hero .center .readmore[data-readmore]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .hero .center .readmore[data-readmore]{ animation: none; opacity:1; transform:none; transition: none; }
  .hero .center .readmore[data-readmore]::before,
  .hero .center .readmore[data-readmore]::after{ animation: none; }
}

/* Keyframes الخاصة بالزر */
@keyframes rmIn{
  to{ opacity:1; transform:none; }
}
@keyframes rmDrawX{
  0%{ background-size: 0% 1px, 0% 1px; }
  100%{ background-size: 100% 1px, 100% 1px; }
}
@keyframes rmDrawY{
  0%{ background-size: 1px 0%, 1px 0%; }
  100%{ background-size: 1px 100%, 1px 100%; }
}
/* ===========================
   Section Page — Mobile Patch (match PM hero sizing)
   =========================== */

/* 1) Hero heights per breakpoint following PM page */
@media (max-width: 768px){
  .hero{ height: clamp(50vh, 60vh, 70vh); }
}
@media (max-width: 640px){
  .hero{ height: clamp(46vh, 56vh, 64vh); }
}
@media (min-width: 641px) and (max-width: 1024px){
  .hero{ height: clamp(54vh, 64vh, 72vh); }
}

/* 2) اللوجو الثابت — هدف لمس + تخفيف زجاجية على الجوال */
@media (max-width: 768px){
  .fixed-logo{
    top: 16px; left: 16px;
    padding: 8px 10px;
    border-radius: 12px;
    -webkit-backdrop-filter: saturate(130%) blur(3px); /* كان 6px */
    backdrop-filter: saturate(130%) blur(3px); /* كان 6px */
  }
  .fixed-logo img{ width: 72px; height: 72px; }
}

/* 3) مساحات آمنة للـ notch */
@supports(padding: max(0px)){
  body{
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* 4) تدرّج العناوين/النصوص */
.title{
  font-size: clamp(24px, 5.8vw, 40px);
  line-height: 1.15;
}
.strap{ font-size: clamp(14px, 3.6vw, 16px); }

/* 5) شبكة المحتوى والقيم/KPIs تتدرّج أفضل */
@media (max-width: 980px){
  .intro{ grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 900px){
  .values{ grid-template-columns: 1fr 1fr; }
  .kpis{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .values{ grid-template-columns: 1fr; }
  .kpis{ grid-template-columns: 1fr; }
}

/* 6) أزرار وإدخالات — أهداف لمس أوضح */
@media (max-width: 768px){
  .btn{ --btn-h: 50px; --btn-pad-x: 20px; font-size: 13px; letter-spacing: 1.2px; }
  input, textarea{ padding: 14px 12px; font-size: 15px; }
}

/* 7) تخفيف تأثيرات ثقيلة على الجوال */
@media (max-width: 768px){
  .contact--glass{ -webkit-backdrop-filter: saturate(140%) blur(4px); backdrop-filter: saturate(140%) blur(4px); } /* كان 8px */
}
@media (prefers-reduced-motion: reduce){
  .reveal-up{ transition: none; transform: none !important; opacity: 1 !important; }
}

/* 8) تمرّكز نص الهيرو + زر Read More على الشاشات الصغيرة */
@media (max-width: 768px){
  .hero .center{ 
    padding: 0 12px;
    max-width: 94vw; /* زيادة قليلة لمساحة أكبر على الجوال */
  }
  .hero h1{
    font-size: clamp(22px, 6vw, 34px); /* حجم أصغر قليلاً لتجنب الكسر */
    letter-spacing: clamp(2px, 1vw, 5px); /* مسافة أقل */
    line-height: 1.3; /* ارتفاع سطر أفضل */
  }
  .hero p{ 
    font-size: clamp(12px, 3.2vw, 14px);
    max-width: 90%; /* عرض أكبر قليلاً للفقرة */
    line-height: 1.5;
  }
}

/* تحسين للشاشات المتوسطة (أجهزة لوحية) */
@media (min-width: 769px) and (max-width: 1024px){
  .hero .center{ 
    max-width: 88vw;
  }
  .hero h1{
    font-size: clamp(32px, 4.5vw, 48px);
    letter-spacing: clamp(3px, 0.8vw, 6px);
    line-height: 1.2;
  }
  .hero p{ 
    max-width: 80%;
    font-size: clamp(13px, 2vw, 16px);
  }
}

/* 9) تحسين اللفّ والسلوك العام */
html { scroll-behavior: smooth; }
:root{ -webkit-tap-highlight-color: transparent; }

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

/* Arabic typography overrides (ensure ligatures + no forced spacing) */
:where(body.arabic-font, html[lang="ar"]) .hero .center{
  direction: rtl;
  text-align: center;
}
:where(body.arabic-font, html[lang="ar"]) .hero h1{
  letter-spacing: 0 !important;
  white-space: normal !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  font-feature-settings: "liga" 1, "rlig" 1 !important;
  font-variant-ligatures: normal !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
:where(body.arabic-font, html[lang="ar"]) .hero p{
  letter-spacing: 0 !important;
  max-width: 100% !important;
  font-feature-settings: "liga" 1, "rlig" 1 !important;
  transition: none !important;
  animation: none !important;
}
:where(body.arabic-font, html[lang="ar"]) .title,
:where(body.arabic-font, html[lang="ar"]) .h2,
:where(body.arabic-font, html[lang="ar"]) .value h3,
:where(body.arabic-font, html[lang="ar"]) .kpi span,
:where(body.arabic-font, html[lang="ar"]) .kpi strong,
:where(body.arabic-font, html[lang="ar"]) .pill,
:where(body.arabic-font, html[lang="ar"]) .btn{
  letter-spacing: 0 !important;
  transition: none !important;
  animation: none !important;
}