/* =========================================================
   T-146 · المرحلة 2 · د: «من نحن» (محتوى T-138) بنظام الشبكة
   يُحمَّل بعد grid/grid.css ولا يعدّله. خصائص منطقية فقط، والكود الزخرفي اللاتيني وحده بموضع فيزيائي
   ========================================================= */

/* الترويسة: الصفحة الحالية */
.bar__nav a[aria-current="page"] { color: var(--t1); background: rgba(255, 255, 255, .06) }

/* الهيرو: الزوايا فصول الصفحة */
.ab-chap { display: contents }
.ab-hero .corner a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; display: inline-flex; align-items: center; min-block-size: 32px }
.ab-hero .hero__b .hl { margin-block-start: 4px }
@media (hover: hover) and (pointer: fine) {
  .ab-hero .corner a:hover { text-decoration-color: var(--w) }
}

/* الإطار الموحّد للمراسي داخل الأقسام */
.ab-obj { position: relative; align-items: stretch }
.fhead .kicker { margin-block-end: 6px }

/* ---------- من نحن ---------- */
.ab-intro__body { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: auto auto; min-block-size: clamp(400px, 48vh, 500px) }
.ab-intro__obj { grid-column: 1; grid-row: 1 / 3; min-block-size: 380px }
.ab-intro__lede { display: block; grid-column: 2 / 5; grid-row: 1; padding: clamp(22px, 2.6vw, 40px); font-family: var(--ard); font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.7; color: var(--t1); align-items: flex-start }
.ab-intro__lede bdi { font-weight: 600 }
.ab-facts { display: contents }
.ab-facts > div { grid-row: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 22px 24px }
.ab-facts dt { font-size: 13px; color: var(--t3) }
.ab-facts dd { font-size: 15px; line-height: 1.75; color: var(--t1) }

/* ---------- المبدأ ---------- */
.ab-rule__body { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; min-block-size: clamp(420px, 52vh, 520px) }
.ab-rule__obj { grid-row: 1 / 3 }
.ab-rule__c { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px 28px; gap: 6px }
.ab-rule__c b { font-size: 11px; color: var(--t4); font-weight: 600; margin-block-end: auto; letter-spacing: .04em }
.ab-rule__c h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.4; color: var(--t1) }
.ab-rule__c p { font-size: 15px; color: var(--t2) }

/* ---------- الخدمات ---------- */
.ab-svc__body { display: grid; grid-template-columns: 1.35fr 1fr; min-block-size: clamp(420px, 52vh, 520px) }
.ab-svc__body > .cell { align-items: stretch }
.ab-svc__panels { flex-direction: column; justify-content: flex-start; padding: clamp(20px, 2.6vw, 40px); display: flex !important }
.ab-slide { animation: swap .32s var(--ease) both }
.ab-slide h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.45; color: var(--t1); display: flex; flex-direction: column; align-items: flex-start }
.ab-slide h3 .hl { margin-block-start: 6px; white-space: nowrap }
.ab-slide p { margin-block: 22px 28px; max-inline-size: 42ch; color: var(--t2) }
.ab-svc .fhead__go { font-size: 13px }

/* ---------- كيف نشتغل ---------- */
.ab-proc__body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(170px, auto) }
.ab-proc__obj { grid-row: span 2; min-block-size: 380px }

/* ---------- المجموعات ---------- */
.ab-groups__body { display: grid; grid-template-columns: 1.35fr 1fr; min-block-size: clamp(440px, 54vh, 540px) }
.ab-acc { display: flex; flex-direction: column }
.ab-acc__h { font: inherit }
.ab-acc__btn { inline-size: 100%; gap: 16px; padding-inline: 24px; min-block-size: 76px; text-align: start; font-family: var(--ard); font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; color: var(--t3); transition: color .2s var(--ease), background-color .2s var(--ease) }
.ab-acc__btn b { font-family: var(--lat); font-size: 11px; color: var(--t4); font-weight: 600; letter-spacing: .04em }
.ab-acc__btn span { flex: 1 }
.ab-acc__btn i { position: relative; inline-size: 16px; block-size: 16px; flex: none }
.ab-acc__btn i::before, .ab-acc__btn i::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7.5px; inline-size: 16px; block-size: 1.5px; background: var(--t1); transition: transform .3s var(--ease) }
.ab-acc__btn i::after { transform: rotate(90deg) }
.ab-acc__item.is-open .ab-acc__btn { color: var(--t1); background: rgba(255, 255, 255, .06) }
.ab-acc__item.is-open .ab-acc__btn b { color: var(--t1) }
.ab-acc__item.is-open .ab-acc__btn i::after { transform: rotate(0) }
.ab-acc__panel { padding: 22px 24px 26px; animation: swap .32s var(--ease) both; box-shadow: 1px 0 0 0 var(--line-s) inset, -1px 0 0 0 var(--line-s) inset }
.ab-acc__line { font-size: 17px; color: var(--t1) }
.ab-acc__role { font-size: 14px; color: var(--t3); margin-block: 6px 18px }
.ab-acc__list { display: flex; flex-direction: column }
.ab-acc__list a { justify-content: space-between; gap: 16px; padding-inline: 18px; min-block-size: 52px; font-size: 14px; color: var(--t1) }
.ab-acc__list i { font-style: normal; font-family: var(--lat) }
.ab-acc__foot { margin-block-start: auto; padding-inline: 24px; font-size: 14px; color: var(--t3) }
@media (hover: hover) and (pointer: fine) {
  .ab-acc__btn:hover, .ab-acc__list a:hover { color: var(--w); background: rgba(255, 255, 255, .05) }
}

/* ---------- الأدوات ---------- */
.ab-tools { margin-block-start: clamp(56px, 8vh, 96px) }
.ab-tools__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain }
.ab-tools__row::-webkit-scrollbar { display: none }
.ab-tools__row li { flex: 0 0 clamp(210px, 21vw, 280px); scroll-snap-align: start; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 22px 24px; min-block-size: 190px }
.ab-tools__row li b { font-size: 11px; color: var(--t4); font-weight: 600; margin-block-end: auto; letter-spacing: .04em }
.ab-tool__name { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; line-height: 1.35; color: var(--t1); letter-spacing: -.005em }
.ab-tool__use { font-size: 14px; color: var(--t3) }
.ab-tools__hint { font-size: 13px; color: var(--t3) }

/* ---------- كلّمنا ---------- */
.ab-contact__body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(120px, auto) }
.ab-contact__obj { grid-row: span 4; min-block-size: 440px }
.ab-coms__label { grid-column: 2 / 4; min-block-size: 56px; padding-inline: 24px; font-family: var(--ard); font-weight: 600; font-size: 17px; color: var(--t1) }
.ab-contact .go__steps li { min-block-size: 150px }

/* ---------- الذيل ---------- */
.ab-bye { margin-block-start: clamp(64px, 10vh, 120px) }
.ab-bye .bye__obj { min-block-size: clamp(360px, 52vh, 520px) }
.ab-say { opacity: 1; transform: none }

/* ---------- تابلت ---------- */
@media (max-width: 1100px) {
  .bar__nav .cell { padding-inline: 14px }
  .ab-intro__body { grid-template-columns: 1fr 1fr 1fr }
  .ab-intro__obj { grid-column: 1 / -1; grid-row: 1; min-block-size: 340px }
  .ab-intro__lede { grid-column: 1 / -1; grid-row: 2 }
  .ab-facts > div { grid-row: 3 }
  .ab-proc__body, .ab-contact__body { grid-template-columns: 1fr 1fr }
  .ab-proc__obj, .ab-contact__obj { grid-column: 1 / -1; grid-row: auto; min-block-size: 320px }
  .ab-coms__label { grid-column: 1 / -1 }
  .ab-groups__body { grid-template-columns: 1fr 1fr }
}

/* ---------- جوال ---------- */
@media (max-width: 768px) {
  .ab-intro__body, .ab-rule__body, .ab-svc__body, .ab-proc__body, .ab-groups__body, .ab-contact__body { grid-template-columns: 1fr; min-block-size: 0 }
  .ab-intro__obj, .ab-proc__obj, .ab-contact__obj { min-block-size: 0; aspect-ratio: 1 / .8 }
  .ab-facts > div { grid-row: auto; padding: 18px 20px }
  .ab-intro__lede { padding: 20px; font-size: 19px }
  .ab-rule__body { grid-template-rows: auto }
  .ab-rule__obj { grid-row: auto; aspect-ratio: 1 / 1.05 }
  .ab-rule__c { padding: 18px 20px; min-block-size: 140px }
  .ab-svc__obj { aspect-ratio: 1 / .8; grid-row: 2 }
  .ab-svc__panels { padding: 20px }
  .ab-groups__obj { aspect-ratio: 1 / .8; grid-row: 1 }
  .ab-acc__btn { min-block-size: 64px; padding-inline: 18px; font-size: 19px }
  .ab-acc__panel { padding: 18px 18px 22px }
  .ab-acc__foot { min-block-size: 52px; padding-inline: 18px; margin-block-start: 0 }
  .ab-tools__row li { flex-basis: 72%; min-block-size: 160px; padding: 18px 20px }
  .ab-coms__label { padding-inline: 20px }
  .ab-contact .go__steps li { min-block-size: 0 }
  .ab-bye .bye__obj { min-block-size: 0; aspect-ratio: 1 / 1 }
  .say__en.lat { letter-spacing: .08em }
}

@media (prefers-reduced-motion: reduce) {
  .ab-slide, .ab-acc__panel { animation-name: fade }
  .ab-acc__btn i::before, .ab-acc__btn i::after { transition: none }
}
/* سكتا keep قبل الأدوات وقبل الذيل: لا موضع تمرير بلا مرساة على الجوال (فلا يتجمّد آخر إطار) */
.ab-tools, .ab-bye { margin-block-start: 0 }
/* الجوال: مرساة «كلّمنا» بين الزر والالتزامات، فلا يطول المقطع بلا مرساة */
@media (max-width: 768px) {
  .ab-contact .go__acts a { order: 0 }
  .ab-contact__obj { order: 1 }
  .ab-coms__label { order: 2 }
  .ab-contact .go__steps li { order: 3 }
}