/* خطّا العناوين المحلّيان — محوّلان إلى woff2.
   swap: النصّ يظهر بالخطّ الاحتياطي فوراً ثم يُستبدل، فلا وميض فارغ. */
@font-face {
  font-family: "ZEYADA Arabic Display";
  src: url("./zeyada-arabic-display.woff2") format("woff2-variations"),
       url("./zeyada-arabic-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arabic UI Display";
  src: url("./arabic-ui-display-heavy.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Nard homepage redesign — editorial, RTL, Sarmad-inspired rhythm */

/* محور wdth في ZEYADA يتحكّم بطول التطويل (ـ) لا بعرض المحارف.
   المتصفّح يفترضه 100 فيصير التطويل ٨٤٠px لكل كشيدة عند خطّ 100px،
   فتنكسر العناوين لأربعة أسطر. القيمة 50 تعطي نفس عرض الخطّ السابق
   (1300 مقابل 1333) فتبقى العناوين على أسطرها كما صُمّمت.
   الخطوط الأخرى لا تملك هذا المحور فتتجاهله. */
:root {
  font-variation-settings: "wdth" 50;
  --page-pad: clamp(22px, 5vw, 76px);
  --section-space: clamp(52px, 6vw, 92px);
  --display-face: "ZEYADA Arabic Display", "Arabic UI Display", "Markazi Text", sans-serif;
  --stack-top: clamp(78px, 8vh, 96px);   /* أسفل شريط التنقّل */
}

body {
  background: var(--bg);
  color: var(--ink);
}

.container {
  max-width: 1440px;
  padding-inline: var(--page-pad);
}

/* Header: one calm glass strip, five destinations only. */
.navpill {
  gap: 8px;
  padding: 7px 9px;
}
.navpill__logo {
  display: flex;
  align-items: center;      /* كان الشعار يعلو داخل صندوقه: ٨px أعلى / ١٢px أسفل */
  justify-content: center;
  min-height: 44px;
  padding-inline: 12px;
}
.navpill__logo img { height: 40px; width: auto; display: block; }
.navpill__nav { gap: 2px; }
.nav__link { height: 44px; padding-inline: clamp(12px, 1.5vw, 20px); }

/* Shared editorial markers. */
.section-mark {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 clamp(18px, 2.6vw, 30px);
  color: var(--muted);
  font-size: var(--fs-small);
}
.studio-section {
  padding-block: var(--section-space);
}
.services-v2 { padding-top: clamp(30px, 4vw, 58px); }
.section-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: start;
}
.section-split h2,
.start-panel h2 {
  font-family: var(--display-face);
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
}
.section-split--intro { align-items: end; margin-bottom: clamp(48px, 7vw, 82px); }
/* العنوان فوق فقرته لا جنبها */
.section-split--stacked {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(18px, 2.4vw, 30px);
}
.section-copy {
  max-width: 48ch;
  padding-top: 10px;
}
.section-copy p + p { margin-top: 24px; }
.section-copy p:not(.lead-v2) { color: var(--muted); }
.lead-v2 {
  max-width: 42ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* Hero: one image panel carries the section — button top-start,
   headline and sub-line low and centred, the way Sarmad's does. */
.landing {
  padding-block: clamp(96px, 11vw, 132px) clamp(30px, 4vw, 52px);
  overflow: hidden;
}
.hero-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78vh, 760px);
  /* حشو سفلي كبير يرفع الكتلة عن القاع بدل إلصاقها به */
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 3vw, 44px) clamp(64px, 10vw, 146px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #B5B0A8;   /* لون الصورة نفسه — لا وميض قبل تحميلها */
}
.hero-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* اللوح يصير شبه مربّع على الجوال: الاقتصاص يُركّز على عنقود النرد */
  object-position: 62% 42%;
}
/* حجاب فاتح يتركّز أسفل اللوح حيث النص، ويترك أعلاه للصورة */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(230, 227, 218, 0.94) 0%,
    rgba(230, 227, 218, 0.74) 28%,
    rgba(230, 227, 218, 0.22) 56%,
    rgba(230, 227, 218, 0) 80%);
}

/* الشعار في ركن اللوح العلوي — خارج تدفّق النصّ */
.hero-panel__cta {
  align-self: center;
  margin-top: clamp(24px, 3vw, 38px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: var(--ctl-md);
  padding-inline: 26px;
  border-radius: 999px;
  background: var(--brown);
  color: var(--cream);
  font-size: var(--ctl-fs-md);
  font-weight: 700;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hero-panel__cta:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.hero-panel__cta span { font-size: 1.05em; line-height: 1; }

.hero-panel__copy { text-align: center; }
.hero-panel__copy h1 {
  margin: 0;
  font-family: var(--display-face);
  font-size: clamp(2.1rem, 5.1vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--brown);
  text-wrap: balance;
}
.hero-panel__copy h1 strong { font-weight: 700; }
.hero-panel__copy p {
  max-width: 54ch;
  margin: clamp(18px, 2.2vw, 28px) auto 0;
  font-size: clamp(.95rem, 1.25vw, 1.15rem);
  line-height: 1.85;
  color: rgba(52, 26, 23, 0.80);
}

/* About: Sarmad's proportions — a tall name, a short wide paragraph, tops aligned. */
.about-v2 {
  background: var(--bg);
  color: var(--ink);
  border-radius: 0;
  margin-inline: 0;
  /* «خدماتنا» يليه مباشرة ببلاطة لا بعنوان، فلا داعي لحشو قسمين كاملين بينهما */
  padding-bottom: clamp(34px, 4.4vw, 66px);
}
.about-v2__split {
  /* العنوان فوق الفقرة، لا جنبها */
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
.about-v2 .about-v2__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--display-face);
  /* بحجم عناوين الأقسام — صار جملة لا اسماً، وnowrap كان سيخرجه عن الشاشة */
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: start;
}
.about-v2 .about-v2__title strong { font-weight: 700; }
.about-v2 .section-copy { max-width: none; padding-top: 0; }
.about-v2__lead {
  margin: 0;
  /* سرمد: 28px / 1.5 في مقاس واسع — فقرة قصيرة عريضة، لا عمود ضيّق */
  max-width: 46ch;
  font-size: clamp(.98rem, 1.35vw, 1.22rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}


/* ---- النرد المُفعَّل: مكعّبات البلاطات، صندوق الرمية، شاشة الدخول ---- */

/* مكعّب البلاطة يحلّ محلّ النقش المسطّح */
.tile__cube { display: block; flex: none; }
.tile__cube .dice-stage { --s: clamp(48px, 5vw, 72px); }
.tile__cube .dice { cursor: default; }

/* البلاطة التي وصلتها الرمية */
.tile.is-picked {
  outline: 2px solid var(--edge-strong);
  outline-offset: -2px;
}

/* صندوق الرمية في رأس الخدمات */
.rollbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: clamp(26px, 3.4vw, 44px) 0 clamp(30px, 4vw, 48px);
  text-align: center;
}
.rollbox__stage { margin-bottom: clamp(26px, 3.2vw, 42px); }
.rollbox__stage .dice-stage { --s: clamp(86px, 9vw, 124px); }
.rollbox__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ctl-md);
  padding-inline: clamp(24px, 3vw, 34px);
  border: 1px solid var(--edge-ctl);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--ctl-fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rollbox__btn:hover {
  background: var(--cream);
  color: var(--brown);
  border-color: var(--cream);
  transform: translateY(-3px);
}
.rollbox__btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.rollbox__hint {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* شاشة الدخول — رمية واحدة لكل جلسة */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.loader .dice-stage { --s: clamp(96px, 12vw, 150px); }
.loader.is-done { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* Services: flush square tiles in one rounded block — Sarmad's mosaic. */
/* عمود موسّط من مربّعات: وحدة التراكم حجر نرد، لا مستطيل عريض */
.tile-mosaic {
  display: block;
  max-width: min(580px, 86vw);
  margin-inline: auto;
}
.tile-row { display: contents; }
.tile {
  position: sticky;
  top: var(--stack-top);
  will-change: transform;
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  /* ظلّ علوي: يفصل الحجر الصاعد عمّا تحته فيُقرأ التراكم */
  box-shadow: 0 -16px 38px -20px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(24px, 3.4vw, 54px);
  text-align: center;
}
.tile--light { background: var(--cream); color: var(--brown); }
.tile--dark  { background: var(--bg-2);  color: var(--cream); }
.tile--photo { padding: 0; overflow: hidden; }
.tile--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.55) contrast(1.06);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.tile--photo:hover img { transform: scale(1.04); filter: saturate(.85) contrast(1.02); }

/* الخدمة السابعة: لا يوجد وجه نرد بسبعة، فالشعار هو علامتها.
   يُرسم كقناع فيأخذ لون البلاطة — بنّي على الفاتحة، كريمي على الداكنة. */
.tile__logo {
  width: clamp(76px, 8vw, 116px);
  aspect-ratio: 548 / 339;
  flex: none;
  background: currentColor;
  opacity: .92;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
}
.tile__title {
  margin: 0;
  max-width: 14ch;
  /* خطّ النصّ لا خطّ العناوين — والعنوان عريض ليتميّز عن الوصف.
     المقاس مرفوع ١٫١٤× لأن Markazi أصغر من خطّ العناوين بنفس القيمة. */
  font-family: var(--font-ar);
  font-size: clamp(1.7rem, 2.95vw, 2.72rem);
  font-weight: 700;
  line-height: 1.32;
}
.tile__desc {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.75;
  opacity: .72;
}

/* Work: an endless strip of shots — a section of its own. */
.work-v2 { background: var(--bg); border-radius: 0; margin-inline: 0; }
.shotstrip {
  margin-block: clamp(30px, 4vw, 48px) clamp(30px, 4vw, 50px);
  margin-inline: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: hidden;
}
.shotstrip .marquee__group { gap: clamp(14px, 1.8vw, 26px); padding-inline: clamp(7px, .9vw, 13px); }
.shot {
  display: block;
  flex: none;
  width: clamp(230px, 27vw, 390px);
}
.shot img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(.86) contrast(1.02);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.shot:hover img { transform: translateY(-6px); filter: saturate(1) contrast(1); }
.shot:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; border-radius: var(--radius); }
.shot > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 4px 4px;
}
.shot b { font-size: clamp(1.02rem, 1.25vw, 1.18rem); }
.shot small { color: var(--muted); }

/* Start CTA: a light panel mid-page — the closing block is dark,
   so this breaks the rhythm instead of repeating it. */
.startcta { padding-block: clamp(30px, 4vw, 58px); }
.startcta__panel {
  max-width: 880px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(34px, 4.4vw, 62px) clamp(22px, 3vw, 48px);
  border-radius: var(--radius-lg);
  background: #E5EBE0;
  color: var(--brown);
}
.startcta__mark {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  color: rgba(52, 26, 23, 0.6);
  font-size: var(--fs-small);
}
.startcta__panel h2 {
  margin: 0;
  font-family: var(--display-face);
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--brown);
}
.startcta__lead {
  max-width: 44ch;
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  color: rgba(52, 26, 23, 0.78);
}
.startcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: var(--ctl-md);
  margin-top: clamp(22px, 2.8vw, 34px);
  padding-inline: clamp(26px, 3vw, 36px);
  border-radius: 999px;
  background: var(--brown);
  color: var(--cream);
  font-size: var(--ctl-fs-md);
  font-weight: 700;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.startcta__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(0,0,0,.55); }
.startcta__btn:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }

/* Process: the number carries the step, outlined so it reads as a marker. */
/* مسار كخريطة كنز: الخطوات تتعاقب رأسياً وتتبادل الجهتين،
   والسهم المرسوم يقود من كل واحدة إلى التي بعدها. */
.flow {
  --flow-gap: clamp(98px, 10vw, 152px);
  --flow-pad: clamp(26px, 2.6vw, 36px);
  --flow-num: clamp(2rem, 3.4vw, 3.2rem);
  position: relative;
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  padding: 0;
  display: block;
  max-width: 860px;     /* بلا سقف تتمدّد البطاقة وتتفكّك الدرجات */
}
.flow li {
  position: relative;
  width: 80%;
  margin-bottom: var(--flow-gap);
  padding: var(--flow-pad);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.flow li:nth-child(even) { margin-inline-start: auto; }   /* يقفز للجهة المقابلة */
.flow li:last-child { margin-bottom: 0; }

/* السهم يقع في الفجوة بين خطوتين، بمحاذاة منتصف الرقم */
.flow__arrow {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  bottom: calc(var(--flow-gap) * -0.59);
  width: clamp(68px, 8.6vw, 124px);  /* صندوقه المُدار = ٠٫٩٤ من عرضه */
  z-index: 3;          /* البطاقة التالية شقيق لاحق، فكانت تطمس رأس السهم */
  pointer-events: none;
}
/* الرسم يتّجه يميناً في الأصل — يُعكس ويُمال ليهبط نحو الخطوة التالية */
/* السهم المتّجه يساراً: الدوران الموجب يرفع رأسه لأعلى، فنعكس الإشارة ليهبط */
.flow li:nth-child(odd)  .flow__arrow { transform: rotate(-56deg) scaleX(-1); }
.flow li:nth-child(even) .flow__arrow { transform: rotate(56deg); }
/* الرسم يتّجه يميناً في الأصل — يُعكس ليتبع اتجاه القراءة العربية */
.flow__arrow img { display: block; width: 100%; height: auto; }
.flow__num {
  display: block;
  /* .en تفرض direction:ltr للأرقام، فتصير محاذاتها يساراً — نعيدها لبداية السطر العربي */
  text-align: right;
  font-family: var(--display-face);
  font-size: var(--flow-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(231, 238, 226, 0.66);
}
.flow h3 {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  font-weight: 600;
}
.flow p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.8;
}

/* توقيع الخاتمة: الشعار فوق سطر الحقوق */
.closing__sig { display: inline-flex; align-items: center; gap: 12px; }
.closing__sig img { height: clamp(24px, 2.6vw, 30px); width: auto; opacity: .92; }
/* بلا هذا تصير العُقَد النصّية و<span> السنة عناصر فليكس منفصلة فتتكدّس رأسياً */
.closing__rights { white-space: nowrap; }

/* Partners: the client marks live here now, with the reviews under them. */
.partners-v2 { background: var(--bg); }
/* تسمية تعرّف الشريط — كان يطفو بلا سياق بين العنوان والآراء */
.strip-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: var(--muted);
  font-size: var(--fs-small);
}
.strip-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge);
}

.brandstrip {
  margin-block: 0 clamp(44px, 6vw, 76px);
  margin-inline: var(--page-pad);
  padding-block: clamp(6px, .8vw, 10px);
  background: none;
  border-radius: 0;
  border: 0;
  /* الحواف تتلاشى فلا يبدو الشريط مقصوصاً فجأة */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.brandstrip .marquee__group { gap: 0; padding-inline: 0; align-items: stretch; }
.brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex: none;
  min-width: clamp(160px, 17vw, 232px);
  min-height: clamp(66px, 6.4vw, 86px);
  margin-inline: clamp(7px, .9vw, 12px);
  padding-inline: clamp(18px, 2vw, 28px);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: rgba(231, 238, 226, 0.035);
  color: var(--cream);
  opacity: .8;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.brandmark:hover {
  opacity: 1;
  background: rgba(231, 238, 226, 0.07);
  border-color: var(--edge-ctl);
}
/* مربّع بصري واحد لكل علامة: الرموز كانت متفاوتة الوزن */
.brandmark svg {
  width: clamp(26px, 2.6vw, 32px);
  height: clamp(26px, 2.6vw, 32px);
  flex: none;
  stroke-width: 1.7;
}
.brandmark b {
  font-family: var(--display-face);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 600;
  white-space: nowrap;
}

.review-head__logo {
  height: clamp(26px, 2.8vw, 34px);
  width: auto;
  opacity: .8;
  flex: none;
  align-self: center;
}
.review-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 38px);
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--edge);
}
.review-head h3 {
  margin: 0;
  font-family: var(--display-face);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 600;
}
.review-head p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

.reviews {
  display: grid;
  /* ثلاث بطاقات في صفّ: بنّي · كريمي · بنّي */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
.review {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--edge);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.review:hover { border-color: var(--edge-ctl); transform: translateY(-3px); }

/* علامة اقتباس كعلامة مائية — ترسي البطاقة بصرياً */
.review__mark {
  position: absolute;
  inset-block-start: -.12em;
  inset-inline-start: .18em;
  font-family: var(--display-face);
  font-size: clamp(5rem, 8vw, 7.5rem);
  line-height: 1;
  color: var(--cream);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.review blockquote {
  position: relative;
  margin: 0;
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.95;
  color: rgba(231, 238, 226, 0.9);
}

.review figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--edge);
}
/* الحرف الأوّل في قرص — إسناد واضح بلا صور شخصية */
.review__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--display-face);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.review__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.review__who b { font-weight: 700; font-size: .96rem; }
.review__who small { color: var(--muted); font-size: var(--fs-small); }
.review__who a {
  /* اسم قصير مثل «أثر» يعطي هدفاً ١٢px — الحشو يرفعه فوق حدّ اللمس */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  justify-content: center;
  padding-inline: 4px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--edge-ctl);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.review__who a:hover { color: var(--cream); border-color: var(--cream); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: var(--ctl-md);
  margin-top: clamp(30px, 4vw, 52px);
  padding-inline-end: 6px;
  font-weight: 700;
  font-size: var(--ctl-fs-md);
  color: var(--ink);
}
/* السهم في قرص محدّد بدل خطّ سفلي — فعل واضح لا سطر نصّ */
.text-link__disc {
  display: grid;
  place-items: center;
  width: var(--ctl-md);
  height: var(--ctl-md);
  border-radius: 50%;
  border: 1px solid var(--edge-ctl);
  color: var(--ink);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.text-link__disc svg { width: 21px; height: 21px; display: block; }
.text-link span:first-child {
  position: relative;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size var(--t) var(--ease);
}
.text-link:hover span:first-child { background-size: 100% 1px; }
.text-link:hover .text-link__disc {
  background: var(--cream);
  color: var(--brown);
  border-color: var(--cream);
  transform: translate(-3px, 3px);
}
.text-link:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; border-radius: 999px; }

/* Divider headline: the oversized section break, pinned low like Sarmad's. */
/* ثابت بطلب: يمرّ مع الصفحة كبقية المحتوى، بلا التصاق */
.divider-head {
  /* فاصل أوضح بين «قالــوا عــن نــرد» وبداية كتلة الختام */
  margin: clamp(34px, 5vw, 72px) 0 0;
  padding-bottom: clamp(20px, 2.6vw, 38px);
  text-align: center;
  color: var(--ink);
}
.divider-head__text {
  display: block;
  font-family: var(--display-face);
  font-size: clamp(1.45rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

/* Start: a single high-contrast decision. */
.start-panel {
  position: relative;
  z-index: 1;
  min-height: clamp(480px, 60vw, 720px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(36px, 7vw, 98px);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  color: var(--cream);
}
.start-panel > p { margin-bottom: clamp(26px, 4vw, 48px); color: var(--muted); }
.start-panel h2 { max-width: 14ch; }
.start-panel__cta { margin-top: clamp(34px, 5vw, 58px); background: var(--cream); color: var(--brown); }

/* Quiet footer; the contact decision already happened above. */
.site-footer { padding-block: 44px 26px; border-top: 1px solid var(--edge); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 48px;
}
.site-footer__brand { font-family: var(--display-face); font-size: 2.6rem; font-weight: 700; }
.site-footer__inner > div:first-child p { color: var(--muted); font-size: var(--fs-small); }
.site-footer__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.site-footer__contact nav { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: var(--fs-small); }
.site-footer__contact a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__base {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .hero-panel { min-height: min(72vh, 620px); min-height: min(72dvh, 620px); }
  .section-split { grid-template-columns: 1fr; }
  .section-split--intro { align-items: start; }
  .about-v2__split { grid-template-columns: 1fr; }

  .reviews { grid-template-columns: 1fr; }
  .review-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .review-head__logo { height: 34px; }
  .review-head h3 { font-size: 1.6rem; line-height: 1.25; }
  .review-head p { line-height: 1.7; }
}

@media (max-width: 760px) {
  :root { --section-space: 48px; }
  .header { padding-inline: 10px; }
  /* عند ٣٩٠px كان محتوى الشريط ٣٨٥px داخل صندوق ٣٦٨px،
     فيُقتطع «تواصل معنا» من الحافة. نقلّص الحشو لا حجم الخط. */
  .navpill { padding: 5px; gap: 6px; }
  .navpill__logo { padding-inline: 6px; }
  /* التسميات الطويلة تُختصر، فيتّسع المجال لحجم مقروء بدل ١١٫٥px */
  .nav__more { display: none; }
  .nav__link {
    min-height: 44px;
    height: 44px;
    font-size: .84rem;
    padding-inline: 7px;
    letter-spacing: -0.01em;
  }
  .section-mark { margin-bottom: 24px; gap: 14px; }
  .landing { padding-block: 94px 24px; }
  /* اللوح كان ٣٤٦px داخل شاشة ٣٩٠ — الهامش يأكل ٤٤px بلا داعٍ */
  .landing .container { padding-inline: 8px; }
  /* الصورة عرضية (16:9) ولا يمكن لأي لوح طوليّ أن يعرضها كاملة مع
     نصّ فوقها: لإظهارها كلها بعرض ٣٧٤px يلزم ارتفاع ٢١٠px فقط.
     فعلى الجوال تخرج الصورة من الخلفية إلى التدفّق بنسبتها الطبيعية،
     والنصّ ينزل تحتها على أرضية كريمية — صفر اقتصاص. */
  .hero-panel {
    min-height: 0;
    justify-content: flex-start;
    padding: 0;
    border-radius: var(--radius);
    background: #E6E3DA;
  }
  .hero-panel__bg {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .hero-panel::after { display: none; }
  .hero-panel__copy {
    padding: clamp(18px, 4.5vw, 26px) 18px clamp(24px, 6vw, 32px);
  }
  .hero-panel__copy h1 { font-size: clamp(1.95rem, 9.2vw, 2.9rem); }
  .hero-panel__copy p { font-size: .92rem; }
  .section-split h2 { font-size: clamp(1.95rem, 8.8vw, 2.8rem); }
  .section-split { gap: 34px; }
  .section-split--intro { margin-bottom: 38px; }
  .divider-head__text { white-space: normal; }
  .tile { gap: 14px; border-radius: var(--radius); }
  .rollbox__stage .dice-stage { --s: 84px; }
  .shot { width: min(58vw, 236px); }
  /* السلّم يبقى سلّماً على الجوال: البطاقة أعرض، والإزاحة أصغر */
  .flow { --flow-gap: 98px; }
  .flow li .flow__arrow { bottom: calc(var(--flow-gap) * -0.59); }
  .tile--photo:hover img { transform: none; }
  .brandstrip { margin-inline: 0; border-radius: var(--radius); }
}

/* شاشة قصيرة: البلاطة أطول من المنفذ فيغطّيها التالي قبل أن تُقرأ */
@media (max-height: 640px) {
  .tile-row,
  .tile { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .tile--photo img,
  .marquee__track { animation: none; }
}



/* ======================================================================
   شريط التنقّل: تأشير المرور
   كان :hover يرفع شفافية اللون من ٧٨٪ إلى ١٠٠٪ فقط — فرق لا يكاد يُرى
   على خلفية كريمية. نضيف كبسولة خفيفة خلف الرابط.
   ====================================================================== */
.nav__link {
  transition: color .3s var(--ease), background-color .25s var(--ease);
}
/* الرابط الذي تحته الكبسولة البنّية — سواء النشط أو المُحوَّم عليه */
.nav__link.is-marked { color: #EBEDE2; }
.nav__link.is-active:not(.is-marked) { color: rgba(52, 26, 23, 0.78); }
/* تأشير إضافي خفيف قبل أن تصل الكبسولة */
.nav__link:not(.is-marked):hover { color: #2B1513; }
.navpill__logo:hover { opacity: .78; }
.navpill__logo { transition: opacity .25s var(--ease); }

/* ======================================================================
   صندوق الختام: صفّان بدل عمود واحد
   الصندوق صار أعرض (١٠٤٠px) لكن محتواه بقي عموداً واحداً، فالعرض
   لم يشترِ أي ارتفاع. هنا الدعوة والنرد جنباً إلى جنب، والإيميل
   والأيقونات على سطر واحد.
   ====================================================================== */
.closing__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 9.5vw, 160px);
}
.closing__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.closing__dice {
  margin-bottom: 0;
  flex: none;
  /* متّسع لظرف الدوران (٢٠٪ من الحجم) والطفو (٩px) */
  padding-block: clamp(20px, 2.2vw, 32px);
}
.closing__dice .dice-stage { --s: clamp(60px, 6.2vw, 88px); }

.closing__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(16px, 2vw, 24px);
}
.closing__contact .closing__mail,
.closing__contact .closing__social { margin-top: 0; }

.closing__signoff {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* الجوال: نفس ترتيب الحاسوب — الدعوة والنرد جنباً إلى جنب —
   والفرق حجم فقط. النرد يصغر ليترك للعنوان عرضاً كافياً. */
@media (max-width: 899px) {
  /* التذييل على الجوال: عمود واحد متمركز.
     كان صفّاً أفقياً (نصّ | نرد) فينكسر عمود التواصل لثلاثة أسطر،
     ويبقى الإيميل وحيداً في الأعلى وفراغ تحته، والنرد ملاصقاً للأيقونات. */
  .closing__top {
    flex-direction: column-reverse;   /* النرد فوق، ثم التواصل */
    align-items: center;
    gap: clamp(16px, 4vw, 22px);
  }
  .closing__dice .dice-stage { --s: clamp(46px, 11.5vw, 58px); }
  .closing__contact {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 0;
  }
  .closing__contact .closing__mail { padding-inline: 2px; }
  .closing__contact .closing__social { margin-top: 8px; }
}

/* ======================================================================
   هواتف ضيّقة: ٣٢٠ و٣٦٠ و٣٧٥
   الضبط السابق كان معايَراً على ٣٩٠px بالضبط، وعند ٣٦٠ يفيض
   الشريط بـ٢٣px فيُقتطع «تواصل». نقلّص الحشو وحجم الشعار لا حجم الخط.
   الحدّ ٣٨٥ لا ٤٠٠: عند ٣٩٠ المجال يتّسع فلا داعي للتضييق.
   ====================================================================== */
@media (max-width: 385px) {
  .navpill { padding: 4px; gap: 3px; }
  .navpill__logo { padding-inline: 2px; }
  .navpill__logo img { height: 30px; }
  .nav__link { padding-inline: 4px; }
  .navpill__nav { gap: 0; }

  .closing__dice .dice-stage { --s: 44px; }
  .closing__cta { padding-inline: 18px; }
}


/* ======================================================================
   الختام: الدعوة خارج الصندوق، والصندوق صار تذييلاً
   العنوان والزرّ يقفان على خلفية الصفحة ليأخذا وزنهما، ويبقى في
   الصندوق ما هو مرجعي: النرد وبيانات التواصل والتوقيع وسطر الحقوق.
   ====================================================================== */
.closing__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto clamp(28px, 3.6vw, 52px);
}
.closing__lead .closing__title { max-width: none; }

/* عمود المعلومات داخل الصندوق */
.closing__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
}
.closing__info .closing__contact,
.closing__info .closing__signoff {
  margin-top: 0;
  justify-content: flex-start;
  text-align: start;
}

@media (max-width: 899px) {
  .closing__info {
    width: 100%;
    align-items: center;
    gap: clamp(14px, 3.5vw, 20px);
  }
  .closing__info .closing__contact,
  .closing__info .closing__signoff { justify-content: center; text-align: center; }
  .closing__signoff { flex-direction: column; align-items: center; gap: 6px; }
}


/* ======================================================================
   أجهزة اللمس: لا وميض رمادي عند اللمس، والتغذية الراجعة من :active
   ====================================================================== */
@media (hover: none) {
  a, button, [role="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active,
  .nav__link:active,
  .soc:active,
  .closing__cta:active,
  .hero-panel__cta:active,
  .rollbox__btn:active { transform: scale(.97); }
}


/* ======================================================================
   أهداف اللمس: آبل توصي بـ٤٤×٤٤px. القياس عند ٣٩٠px أظهر روابط
   المشاريع داخل بطاقات الشهادات عند ٢٤×٣٠px — صعبة الإصابة بالإبهام.
   نوسّع مساحة اللمس بعنصر شفّاف لا يغيّر التخطيط ولا يزيح النصّ.
   ====================================================================== */
/* لا تضع position على .scroll-dice — هي fixed في dice.css وهذا الملفّ
   يُحمَّل بعده فيلغيه، فينزل المؤشّر مع الصفحة بدل أن يثبت في الزاوية.
   وكونها fixed يكفي لتثبيت طبقة اللمس ::after عليها. */
.review__who a { position: relative; }

.review__who a::after,
.scroll-dice::after {
  content: "";
  position: absolute;
  inset: -7px -10px;
}

@media (max-width: 899px) {
  /* الأزرار والروابط المستقلّة ترتفع فعلياً إلى ٤٤px */
  .filter,
  .closing__mail,
  .closing__up {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ======================================================================
   تبادل لونَي البطاقات — نفس لونَي بطاقات الخدمات بالضبط:
   الكريمي #E7EEE2 والبنّي المحروق #341A17
   ====================================================================== */

/* آلية العمل: خطوة بنّية ثم خطوة كريمية */
.flow li:nth-child(even) {
  background: var(--cream);
  color: var(--brown);
  border-color: rgba(52, 26, 23, 0.16);
}
.flow li:nth-child(even) .flow__num {
  -webkit-text-stroke-color: rgba(52, 26, 23, 0.55);
}
.flow li:nth-child(even) p { color: rgba(52, 26, 23, 0.72); }

/* قالوا عن نرد: بطاقة بنّية ثم كريمية */
.review:nth-child(even) {
  background: var(--cream);
  color: var(--brown);
  border-color: rgba(52, 26, 23, 0.16);
}
.review:nth-child(even) .review__mark { color: var(--brown); opacity: .09; }
.review:nth-child(even) blockquote { color: rgba(52, 26, 23, 0.88); }
.review:nth-child(even) figcaption { border-top-color: rgba(52, 26, 23, 0.18); }
.review:nth-child(even) .review__avatar { background: var(--brown); color: var(--cream); }
.review:nth-child(even) .review__who small { color: rgba(52, 26, 23, 0.68); }
.review:nth-child(even) .review__who a {
  color: rgba(52, 26, 23, 0.86);
  border-bottom-color: rgba(52, 26, 23, 0.45);
}
.review:nth-child(even) .review__who a:hover { color: var(--brown); border-bottom-color: var(--brown); }
.review:nth-child(even):hover { border-color: rgba(52, 26, 23, 0.4); }


/* ======================================================================
   الشعار خارج الكبسولة — ملاصق لها، والهيدر يبقى ثابتاً أعلى الشاشة
   ملاحظة: لا تضع position هنا — base.css يجعل .header ثابتاً (fixed)،
   وأي position لاحق يلغيه فيهرب الشريط مع التمرير.
   ====================================================================== */
.header {
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);   /* الشعار بجانب الكبسولة لا في طرف الصفحة */
}

.header__logo {
  pointer-events: auto;
  flex: none;
  display: flex;
  align-items: center;
  transition: opacity .3s var(--ease);
}
.header__logo img {
  display: block;
  height: clamp(44px, 4.4vw, 68px);
  width: auto;
}
.header__logo:hover { opacity: .82; }
.header__logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }

.navpill { padding-inline: 10px; }

@media (max-width: 760px) {
  .header__logo img { height: clamp(36px, 9vw, 46px); }
}
@media (max-width: 385px) {
  .header { gap: 6px; }
  .header__logo img { height: 32px; }
}

/* الوجه الأوّل في بطاقة «فيديوهات ورسوم متحركة»: نقطة عادية لا شعار */
.dice--plain .pip--brand {
  grid-area: 2 / 2;
  width: 100%;
  background: var(--die-dot, currentColor);
}
.dice--plain .pip__logo { display: none; }

/* ===================================================================
   home2.html — الهيرو بالفيديو
   الفيديو يحمل صنف .hero-panel__bg نفسه، فيرث كل شيء: الاقتصاص،
   الطبقة، وسلوك الجوال (static + contain). هنا فقط ما يخصّ <video>.
   =================================================================== */
video.hero-panel__bg, img.hero-panel__bg {
  display: block;
  background: #B5B0A8;   /* لون اللوح — لا وميض أبيض قبل ظهور الملصق */
}

/* النصّ تحت الفيديو في كل المقاسات — نفس ترتيب الجوال.
   السبب: الفيديو عرضيّ (16:9)، وأيّ لوح أطول منه يجبرنا على اقتصاصه
   لنُجلس النصّ فوقه. بإخراجه من الخلفية إلى التدفّق يظهر كاملاً بلا
   اقتصاص، وينزل النصّ تحته على أرضية كريمية فيُقرأ بلا حجاب. */
.hero-panel--stack {
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  background: #E6E3DA;
}
.hero-panel--stack > video.hero-panel__bg,
.hero-panel--stack > img.hero-panel__bg {
  position: static;
  z-index: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* ───────── خلفية الواجهة كصورة ─────────
   إطار ثابت النسبة: لا يتحرّك شيء في الصفحة مهما كانت الصورة المرفوعة.
   • fit  : الصورة كاملة بلا قصّ ولا تكبير (الصغيرة تبقى حادّة)، والفراغ تملؤه نسخة ضبابية منها.
   • fill : تملأ الإطار حول نقطة تركيز يحدّدها صاحب الموقع. */
.hero-panel--stack > .hero-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #B5B0A8; isolation: isolate;
}
.hero-media > img { position: absolute; display: block; }
.hero-media__blur {
  inset: -8%; width: 116%; height: 116%; object-fit: cover; z-index: 0;
  filter: blur(28px) saturate(1.12) brightness(.92);
}
.hero-media__img { z-index: 1; }
.hero-media--fit .hero-media__img {
  inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
}
.hero-media--fill .hero-media__blur { display: none; }
.hero-media--fill .hero-media__img {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}
@media (max-width: 760px) { .hero-panel--stack > .hero-media { aspect-ratio: 4 / 3; } }

/* الحجاب المتدرّج كان يُعتّم أسفل الصورة ليُقرأ النصّ فوقها — لا داعي له الآن */
.hero-panel--stack::after { display: none; }
.hero-panel--stack .hero-panel__copy {
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 3vw, 44px) clamp(34px, 4.2vw, 60px);
}
@media (max-width: 760px) {
  .hero-panel--stack .hero-panel__copy {
    padding: clamp(18px, 4.5vw, 26px) 18px clamp(24px, 6vw, 32px);
  }
}
/* الفيديو يملأ اللوح من حافّة إلى حافّة كما في الجوال — لا حشو حوله.
   ولتصغيره نُضيّق اللوح نفسه بدل لجم الفيديو داخله، فيبقى المظهر
   واحداً في كل المقاسات. بعرض اللوح كامل كان طوله ١٠٨٦px أي أطول
   من الشاشة، فلا يُرى العنوان إلا بعد سكرول. */
/* الفيديو كامل بلا اقتصاص (16:9 من القاعدة أعلاه: contain)، والنصّ تحته.
   وبما أن ارتفاعه يتبع عرضه، فالطريق الوحيد ليدخل اللوح كلّه في الشاشة
   اللوح عريض لا مربّع: تضييقه كثيراً كان يقرّب عرضه من ارتفاعه
   (٧٨٠×٧٤٩ — مربّع تقريباً) لأن ارتفاع كتلة النصّ ثابت بينما ينكمش
   الفيديو معه. فنصغّره باعتدال (١١٠٠) ونضغط كتلة النصّ بدلاً من ذلك:
   يقصر الارتفاع بلا أن تقترب النسبة من المربّع. */
/* العرض ثابت ١١٠٠ — لا تربطه بارتفاع الشاشة.
   جُرّب اشتقاقه من الارتفاع ليدخل اللوح كلّه فوق الطيّة، فانكمش العرض
   إلى ٨٩٦ وعلى الشاشات القصيرة إلى ٦٤٧، فعاد اللوح مربّعاً (نسبة 1.05).
   نزول اللوح تحت الطيّة أهون من أن يصير مربّعاً. */
@media (min-width: 761px) {
  .hero-panel--stack {
    max-width: min(100%, 1100px);
    margin-inline: auto;
  }
  .hero-panel--stack .hero-panel__copy {
    padding: clamp(16px, 1.5vw, 20px) clamp(20px, 2.2vw, 32px) clamp(20px, 2vw, 28px);
  }
  .hero-panel--stack .hero-panel__copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); }
  .hero-panel--stack .hero-panel__copy p { margin-top: clamp(12px, 1.4vw, 20px); }
}

/* ===================================================================
   الفيديو جنب «من نحن» في الصفحة الرئيسية
   =================================================================== */
.about-v2__split {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.15fr);
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
}
.about-v2__text {
  display: grid;
  align-content: start;
  gap: clamp(20px, 3vw, 34px);
}
.about-v2__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;       /* يحجز مكانه قبل التحميل — لا إزاحة */
  object-fit: cover;
  border-radius: var(--radius);
  /* شفّاف لا رماديّ فاتح: القسم داكن، وأيّ نزّ دون البكسل عند الحافّة
     المستديرة كان يظهر خيطاً فاتحاً تحت الفيديو. والملصق يغطّي الانتظار. */
  background: transparent;
}

@media (max-width: 900px) {
  /* تحت التسعمئة يعود عموداً واحداً: الفيديو تحت النصّ */
  .about-v2__split { grid-template-columns: 1fr; }
}

/* صورة «من نحن»: واضحة وحادّة بحوافّ مستديرة. كان عليها تلاشٍ شفّاف من
   الجهات الأربع (قناع) فتبدو باهتة الأطراف وتذوب في الخلفية الداكنة. */
.about-v2__media { display: block; }
.about-v2__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, .75);
}


/* ===================================================================
   المشاريع للعرض فقط — لا نقر ولا فتح لصفحة المشروع
   • بطاقات «أعمالنا» وشريط الرئيسية صارت بلا href
   • اسم الشركة في «قالوا عن نرد» نصّ عادي لا رابط
   =================================================================== */
.work-card, .shot { cursor: default; }
.review__co {
  font-weight: 700;
  color: inherit;
  padding-inline: 4px;
}
.hero-media--fit .hero-media__img { box-shadow: 0 0 48px rgba(0, 0, 0, .28); }