/* ==========================================================================
   الوسيط للمقاولات — نظام التصميم
   اتجاه معماري تحريري: ورق عاجي، حبر فحمي، لمسة طينية.
   بلا بطاقات، بلا ظلال، بلا حواف دائرية — البنية تقوم على الخطوط الفاصلة.
   ========================================================================== */

/* --- 01 · الرموز --- */
:root {
  /* الأسطح */
  --paper:    #F5F2ED;
  --paper-2:  #EDE8E0;
  --paper-3:  #E3DDD3;

  /* الحبر */
  --ink:      #14110F;
  --ink-80:   #3A3330;
  --ink-60:   #5F5751;
  --ink-40:   #8A827A;

  /* التمييز — أخضر زمردي عميق */
  --clay:     #0F6B5C;
  --clay-dk:  #0B4F44;
  --clay-tint:#DCEAE6;

  --line:     #D9D2C8;
  --line-ink: rgba(245, 242, 237, .18);

  /* الطباعة */
  --f-display: "Reem Kufi", "Noto Kufi Arabic", serif;
  --f-body:    "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --head-h: 78px;
  --gut: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.16, .84, .44, 1);
}

/* --- 02 · الأساس --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--head-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-80);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.24;
  /* لا تباعد حروف مع العربية — يكسر اتصال الحروف */
  letter-spacing: 0;
}

::selection { background: var(--clay); color: var(--paper); }

/* عناصر لاتينية/رقمية فقط — التباعد آمن هنا */
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: .12em;
  font-feature-settings: "tnum";
}

/* --- 03 · التخطيط --- */
.wrap {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: clamp(68px, 8.5vw, 132px); }
.sec--tight { padding-block: clamp(48px, 6vw, 84px); }
.sec--top { border-top: 1px solid var(--line); }

.sec--ink { background: var(--ink); color: rgba(245, 242, 237, .72); }
.sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink h4 { color: var(--paper); }
.sec--ink .label { color: rgba(245, 242, 237, .5); }
.sec--ink .label .mono { color: var(--clay); }

.sec--clay { background: var(--clay); color: rgba(255, 245, 240, .82); }
.sec--clay h1, .sec--clay h2, .sec--clay h3 { color: #FFF8F4; }

/* --- 04 · الطباعة المساعدة --- */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-40);
  margin-bottom: 22px;
}
.label .mono { color: var(--clay); font-size: .76rem; }
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 90px;
}
.sec--ink .label::after { background: var(--line-ink); }

.display {
  font-size: clamp(2.15rem, 5.6vw, 4.6rem);
  line-height: 1.1;
  font-weight: 600;
}
.h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.18; }
.h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.lead {
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.85;
  color: var(--ink-60);
  max-width: 58ch;
}
.sec--ink .lead { color: rgba(245, 242, 237, .66); }

.dim { color: var(--ink-40); }

/* --- 05 · الأزرار (زوايا قائمة) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 30px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-weight: 500;
  font-size: .94rem;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(-6px); }

.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--clay); border-color: var(--clay); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--clay { background: var(--clay); border-color: var(--clay); color: #FFF8F4; }
.btn--clay:hover { background: var(--ink); border-color: var(--ink); }
.btn--onink { border-color: rgba(245, 242, 237, .34); color: var(--paper); }
.btn--onink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onclay { border-color: rgba(255, 248, 244, .5); color: #FFF8F4; }
.btn--onclay:hover { background: #FFF8F4; color: var(--clay-dk); border-color: #FFF8F4; }
.btn--sm { padding: 11px 22px; font-size: .86rem; }
.btn--wide { width: 100%; justify-content: center; }

/* --- 06 · الترويسة --- */
.head {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(245, 242, 237, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.head__in {
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand__a {
  font-family: var(--f-display);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.brand__dot {
  width: 5px; height: 5px;
  background: var(--clay);
  align-self: center;
  flex: none;
}
.brand__b {
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-40);
  letter-spacing: 0;
}
.foot .brand__a, .sec--ink .brand__a { color: var(--paper); }

.nav ul { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink-80);
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .38s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ink); font-weight: 500; }

.head__cta { display: flex; align-items: center; gap: 16px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.burger i {
  position: absolute;
  inset-inline: 11px;
  height: 1px;
  background: var(--ink);
  transition: .35s var(--ease);
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 24px; }
.menu-open .burger i:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-open .burger i:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* قائمة الجوال — طبقة كاملة */
.sheet {
  position: fixed;
  inset: var(--head-h) 0 0;
  /* عرض صريح: بدون هذا يتمدّد الصندوق ليسع أطول نص غير قابل للكسر
     (أرقام وبريد بخط ثابت) فيُحدث تمريراً أفقياً في الصفحة كلها */
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  z-index: 190;
  background: var(--paper);
  padding: 40px var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: .4s var(--ease);
}
.menu-open .sheet { opacity: 1; visibility: visible; transform: none; }
.sheet a.sheet__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--ink);
}
.sheet a.sheet__link .mono { font-size: .74rem; color: var(--clay); }
.sheet__foot { font-size: .9rem; color: var(--ink-40); }
.sheet__foot a { display: block; margin-top: 6px; color: var(--ink); word-break: break-word; }

/* --- 07 · الواجهة --- */
.hero { border-bottom: 1px solid var(--line); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  min-height: calc(100vh - var(--head-h));
}
.hero__text {
  padding: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px) 0 var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__text .display { max-width: 15ch; margin-bottom: 26px; }
.hero__text .display b { color: var(--clay); font-weight: inherit; }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.hero__meta {
  margin-top: clamp(44px, 6vw, 78px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero__meta div { padding: 22px 20px 26px 0; }
.hero__meta div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 20px; }
.hero__meta .mono { display: block; font-size: 1.5rem; color: var(--ink); letter-spacing: .02em; }
.hero__meta span:last-child { font-size: .84rem; color: var(--ink-40); }

.hero__art {
  border-inline-start: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.hero__art img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; }

/* --- 08 · الشريط المتحرك --- */
.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  padding-block: 15px;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker__track > span {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-inline-end: 46px;
  font-size: .84rem;
  color: var(--ink-60);
  white-space: nowrap;
}
.ticker__track i { color: var(--clay); font-style: normal; }
@keyframes ticker { to { transform: translateX(50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* --- 09 · شبكة تحريرية عامة --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.split--even { grid-template-columns: 1fr 1fr; align-items: center; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }

/* --- 10 · صفوف الخدمات المرقّمة --- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.25fr) 44px;
  gap: 24px;
  align-items: start;
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), padding-inline .4s var(--ease);
}
.row:hover { background: var(--paper-2); padding-inline: 22px; }
.row__n { font-family: var(--f-mono); font-size: .84rem; color: var(--clay); letter-spacing: .1em; padding-top: 8px; }
.row__t { font-family: var(--f-display); font-size: clamp(1.22rem, 2.1vw, 1.72rem); color: var(--ink); font-weight: 600; }
.row__d { font-size: .96rem; color: var(--ink-60); margin: 0; }
.row__d + .row__tags { margin-top: 12px; }
.row__tags { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--ink-40); }
.row__tags li::before { content: "—"; color: var(--clay); margin-inline-end: 7px; }
.row__x {
  align-self: center;
  justify-self: end;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-40);
  transition: .4s var(--ease);
}
.row__x svg { width: 15px; height: 15px; }
.row:hover .row__x { background: var(--clay); border-color: var(--clay); color: #FFF8F4; }

/* --- 11 · الأرقام --- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sec--ink .figures { border-color: var(--line-ink); }
.figure { padding: clamp(26px, 3.4vw, 44px) 24px; }
.figure + .figure { border-inline-start: 1px solid var(--line); }
.sec--ink .figure + .figure { border-color: var(--line-ink); }
.figure b {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: .01em;
  margin-bottom: 10px;
}
.sec--ink .figure b { color: var(--paper); }
.figure b em { font-style: normal; color: var(--clay); }
.figure span { font-size: .88rem; color: var(--ink-40); }
.sec--ink .figure span { color: rgba(245, 242, 237, .5); }

/* --- 12 · بيان / اقتباس كبير --- */
.manifesto {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 3.2vw, 2.5rem);
  line-height: 1.42;
  color: var(--ink);
  font-weight: 500;
  max-width: 24ch;
}
.sec--ink .manifesto { color: var(--paper); }
.manifesto b { color: var(--clay); font-weight: inherit; }

.notes { border-top: 1px solid var(--line); }
.note { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 18px; }
.note .mono { color: var(--clay); font-size: .78rem; padding-top: 5px; }
.note strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-bottom: 3px; }
.note p { margin: 0; font-size: .94rem; color: var(--ink-60); }
.notes--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 60px); }
.sec--ink .note { border-color: var(--line-ink); }
.sec--ink .note strong { color: var(--paper); }
.sec--ink .note p { color: rgba(245, 242, 237, .6); }

/* --- 13 · المشاريع: عرض تحريري --- */
.feature { border-top: 1px solid var(--line); }
.feature__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 460px;
}
.feature__art {
  background: var(--paper-2);
  overflow: hidden;
}
.feature__art img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.feature__body {
  padding: clamp(32px, 4.5vw, 62px) clamp(20px, 3vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-inline-start: 1px solid var(--line);
}
.feature--flip .feature__art { order: 2; }
.feature--flip .feature__body { border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.feature__body .h3 { margin: 8px 0 12px; }

/* صناديق الصور الفوتوغرافية داخل الأقسام النصية */
.photo-box { background: var(--paper-2); overflow: hidden; min-height: 320px; }
.photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 28px; }
.specs div { padding-top: 16px; }
.specs div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.specs .mono { display: block; font-size: .72rem; color: var(--ink-40); margin-bottom: 4px; }
.specs span:last-child { font-size: .92rem; color: var(--ink); }

/* --- 14 · فهرس المشاريع (جدول) --- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.chip {
  padding: 9px 20px;
  border: 1px solid var(--line);
  background: none;
  font-size: .88rem;
  color: var(--ink-60);
  cursor: pointer;
  transition: .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.idx { border-top: 1px solid var(--ink); }
.idx__head, .idx__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 2.1fr) 1fr .9fr .8fr 40px;
  gap: 18px;
  align-items: center;
}
.idx__head {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--ink-40);
}
.idx__row {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease), padding-inline .35s var(--ease);
}
.idx__row:hover { background: var(--paper-2); padding-inline: 18px; }
.idx__row.is-out { display: none; }
.idx__row .mono { font-size: .8rem; color: var(--clay); }
.idx__t { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); font-weight: 600; }
.idx__row span { font-size: .9rem; color: var(--ink-60); }
.idx__x { justify-self: end; color: var(--ink-40); transition: .35s var(--ease); }
.idx__x svg { width: 16px; height: 16px; }
.idx__row:hover .idx__x { color: var(--clay); transform: translateX(-5px); }
.idx__empty { padding: 40px 0; color: var(--ink-40); border-bottom: 1px solid var(--line); }

/* --- 15 · المراحل --- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-ink); }
.stage { padding: 34px 26px 0 0; }
.stage + .stage { border-inline-start: 1px solid var(--line-ink); padding-inline-start: 26px; }
.stage .mono { color: var(--clay); font-size: .78rem; }
.stage h3 { font-size: 1.12rem; margin: 14px 0 8px; }
.stage p { font-size: .93rem; margin: 0; color: rgba(245, 242, 237, .6); }

/* --- 16 · الشهادات --- */
.quote { max-width: 940px; margin-inline: auto; text-align: center; }
.quote__mark { font-family: var(--f-display); font-size: 4rem; line-height: .6; color: var(--clay); }
.quote__slides { position: relative; margin-top: 26px; }
.quote__s {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease);
}
.quote__s.is-on { position: relative; opacity: 1; visibility: visible; }
.quote__s p {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 24px;
}
.quote__who { font-size: .92rem; color: var(--ink-40); }
.quote__who b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
.quote__dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.quote__dots button {
  width: 30px; height: 2px;
  border: 0; padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.quote__dots button[aria-pressed="true"] { background: var(--clay); }

/* --- 17 · الباقات --- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.plan { padding: clamp(28px, 3.4vw, 46px) clamp(18px, 2.4vw, 34px); display: flex; flex-direction: column; }
.plan + .plan { border-inline-start: 1px solid var(--line); }
.plan--f { background: var(--ink); color: rgba(245, 242, 237, .7); }
.plan--f h3, .plan--f .plan__p b { color: var(--paper); }
.plan--f li { border-color: var(--line-ink); color: rgba(245, 242, 237, .68); }
.plan .mono { font-size: .74rem; color: var(--clay); }
.plan h3 { font-size: 1.35rem; margin: 12px 0 18px; }
.plan__p { margin-bottom: 26px; }
.plan__p b { font-family: var(--f-mono); font-weight: 500; font-size: 2.1rem; color: var(--ink); letter-spacing: .01em; }
.plan__p span { font-size: .86rem; color: var(--ink-40); }
.plan ul { flex: 1; margin-bottom: 30px; }
.plan li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; display: flex; gap: 10px; }
.plan li::before { content: "—"; color: var(--clay); flex: none; }
.plan li:last-child { border-bottom: 0; }

/* --- 18 · الأسئلة --- */
.faq { border-top: 1px solid var(--line); max-width: 880px; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 24px 0;
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 600;
  color: var(--ink);
}
.faq__q .mono { font-size: .74rem; color: var(--clay); flex: none; }
.faq__q em {
  margin-inline-start: auto;
  flex: none;
  font-style: normal;
  font-size: 1.3rem;
  color: var(--clay);
  transition: transform .4s var(--ease);
  line-height: 1;
}
.faq__i.is-on .faq__q em { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p { padding: 0 0 26px 42px; margin: 0; font-size: .96rem; color: var(--ink-60); max-width: 68ch; }

/* --- 19 · النماذج (سطر سفلي فقط) --- */
.form { display: grid; gap: 22px; }
.form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.f label {
  display: block;
  font-size: .78rem;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.f input, .f select, .f textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: .98rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.f textarea { resize: vertical; min-height: 96px; }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-40); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--clay); }
.f select { appearance: none; cursor: pointer; }
.f.is-bad input, .f.is-bad select, .f.is-bad textarea { border-bottom-color: var(--clay); }
.f.is-bad label { color: var(--clay); }

.sec--ink .f label { color: rgba(245, 242, 237, .5); }
.sec--ink .f input, .sec--ink .f select, .sec--ink .f textarea { color: var(--paper); border-bottom-color: var(--line-ink); }
.sec--ink .f input::placeholder, .sec--ink .f textarea::placeholder { color: rgba(245, 242, 237, .34); }
.sec--ink .f select option { background: var(--ink); }

.form__ok {
  display: none;
  border-inline-start: 2px solid var(--clay);
  padding: 12px 16px;
  background: var(--clay-tint);
  color: var(--clay-dk);
  font-size: .92rem;
}
.sec--ink .form__ok { background: rgba(15, 107, 92, .18); color: #A9DDD1; }
.form__ok.is-on { display: block; }

/* --- 20 · بيانات التواصل --- */
.info { border-top: 1px solid var(--line); }
.info__i { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: baseline; }
.info__i .mono { font-size: .72rem; color: var(--ink-40); }
.info__i div { font-size: .98rem; color: var(--ink); line-height: 1.7; }
.info__i a:hover { color: var(--clay); }

/* --- 21 · نداء الختام --- */
.callout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 60px); align-items: end; }

/* --- 22 · التذييل --- */
.foot { background: var(--ink); color: rgba(245, 242, 237, .58); }
.foot__top { padding-block: clamp(44px, 5vw, 74px); border-bottom: 1px solid var(--line-ink); }
.foot__word {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 8vw, 6.4rem);
  line-height: 1;
  color: var(--paper);
  font-weight: 600;
}
.foot__word i { color: var(--clay); font-style: normal; }
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.1fr;
  gap: 40px;
  padding-block: clamp(38px, 4.5vw, 60px);
}
.foot h4 { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; color: var(--clay); margin-bottom: 20px; }
.foot p { font-size: .93rem; }
.foot li { margin-bottom: 11px; font-size: .93rem; }
.foot a { transition: color .3s var(--ease); }
.foot a:hover { color: var(--paper); }
.foot__bot {
  border-top: 1px solid var(--line-ink);
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(245, 242, 237, .42);
}

/* --- 23 · رأس الصفحات الداخلية --- */
.phead { border-bottom: 1px solid var(--line); padding-block: clamp(46px, 6vw, 92px); }
.phead .crumb { display: flex; gap: 10px; font-size: .84rem; color: var(--ink-40); margin-bottom: 26px; }
.phead .crumb a:hover { color: var(--clay); }
.phead .display { max-width: 18ch; }
.phead .lead { margin-top: 20px; }

/* --- 24 · واتساب وزر الأعلى --- */
.dock {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dock a, .dock button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: .3s var(--ease);
}
.dock a:hover, .dock button:hover { background: var(--clay); border-color: var(--clay); color: #FFF8F4; }
.dock svg { width: 19px; height: 19px; }
.dock button { opacity: 0; pointer-events: none; }
.dock button.is-on { opacity: 1; pointer-events: auto; }

/* --- 25 · الظهور --- */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- 26 · الاستجابة --- */
@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .idx__head, .idx__row { grid-template-columns: 52px minmax(0, 2fr) 1fr .8fr 36px; }
  .idx__head span:nth-child(5), .idx__row > span:nth-child(5) { display: none; }
}

@media (max-width: 900px) {
  :root { --head-h: 68px; }
  .nav { display: none; }
  .head__cta .btn { display: none; }
  .burger { display: block; }

  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding: clamp(40px, 8vw, 60px) var(--gut) 0; }
  .hero__art { border-inline-start: 0; border-top: 1px solid var(--line); }
  .hero__art img { min-height: 280px; max-height: 46vh; }

  .split, .split--even, .cols-2, .callout { grid-template-columns: 1fr; }
  .feature__in { grid-template-columns: 1fr; min-height: 0; }
  .feature--flip .feature__art { order: 0; }
  .feature__body { border-inline-start: 0; border-top: 1px solid var(--line); }
  .feature--flip .feature__body { border-inline-end: 0; border-top: 1px solid var(--line); }

  .figures { grid-template-columns: 1fr 1fr; }
  .figure:nth-child(3) { border-inline-start: 0; }
  .figure:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec--ink .figure:nth-child(n+3) { border-color: var(--line-ink); }

  .stages { grid-template-columns: 1fr 1fr; }
  .stage:nth-child(3) { border-inline-start: 0; }
  .stage:nth-child(n+3) { border-top: 1px solid var(--line-ink); padding-top: 28px; }

  .notes--2 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-inline-start: 0; border-top: 1px solid var(--line); }

  /* وضع صريح للخلايا: صفوف الخدمات فيها أربعة أبناء
     (رقم، عنوان، غلاف الوصف، سهم) وثلاثة أعمدة فقط */
  .row { grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 10px 14px; }
  .row > * { min-width: 0; }
  .row__n { grid-column: 1; grid-row: 1; }
  .row__t { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .row__x { grid-column: 3; grid-row: 1; }
  .row > div { grid-column: 2 / -1; grid-row: 2; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta div + div { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; }
  .form__2 { grid-template-columns: 1fr; }
  .figures, .stages { grid-template-columns: 1fr; }
  .figure + .figure, .stage + .stage { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; }
  .sec--ink .figure + .figure, .stage + .stage { border-color: var(--line-ink); }
  .specs { grid-template-columns: 1fr; }
  .specs div + div { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; margin-top: 12px; }
  .info__i { grid-template-columns: 1fr; gap: 6px; }
  .idx__head { display: none; }
  .idx__row { grid-template-columns: 44px 1fr; row-gap: 4px; }
  .idx__row .idx__x { display: none; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bot { justify-content: center; text-align: center; }
  .dock { inset-block-end: 14px; inset-inline-start: 14px; }
}

@media print {
  .head, .sheet, .dock, .ticker, .foot { display: none; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1; transform: none; }
}