/* ==========================================================================
   من نحن — مبنية عقدةً بعقدة من Figma
   82:22306 WhoWeAre · 83:22702 Approach · 82:22277 Practice
   81:22127 WhoWeServe · 80:21941 LookingAhead
   ========================================================================== */

/* ---------- 1) Who We Are — حشو 42/80 · فجوة 48 ---------- */
.ab-who { background:#FFF; padding:42px 80px; display:flex; flex-direction:column; align-items:center; gap:48px; font-family:var(--aac-font); }
.ab-who__head { display:flex; flex-direction:column; align-items:center; gap:8px; max-inline-size:800px; }
.ab-who__title { margin:0; text-align:center; color:var(--p-950); font-size:var(--t-3xl); line-height:var(--lh-3xl); font-weight:700; }
.ab-who__intro { inline-size:100%; max-inline-size:1280px; display:flex; align-items:center; gap:32px; }
.ab-who__logo { flex:0 0 217px; }
.ab-who__logo img { inline-size:217px; block-size:129px; object-fit:contain; display:block; }
.ab-who__statement { margin:0; flex:1 1 auto; text-align:justify; font-size:var(--t-2xl); line-height:var(--lh-2xl); font-weight:700;
  background-image:linear-gradient(90deg,var(--p-500) 0%,var(--a-500) 50%,var(--a-400) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--p-500); }
.ab-who__row { inline-size:100%; max-inline-size:1280px; display:flex; align-items:center; }
.ab-who__col { flex:0 0 605px; max-inline-size:605px; padding-inline-end:42px; }
.ab-who__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; }
.ab-who__list li { display:flex; gap:4px; align-items:flex-start; }
.ab-who__list p { margin:0; color:var(--p-950); font-size:var(--t-lg); line-height:var(--lh-lg); text-align:justify; }
.ab-arrow { flex:0 0 24px; inline-size:24px; block-size:24px; margin-block-start:3px; background:var(--a-500);
  clip-path:polygon(8% 4%,100% 50%,8% 96%); transform:scale(.6); transform-origin:center; }
[dir="rtl"] .ab-arrow { transform:scale(.6) scaleX(-1); }
.ab-who__media { position:relative; flex:1 1 675px; block-size:560px; border-radius:16px; overflow:hidden; }
.ab-who__media img { inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.ab-who__media::after { content:""; position:absolute; inset:0; background:rgba(20,26,33,0.25); }

/* ---------- 2) Our Approach — خلفية #F5F5F5 · حشو 80 · أرقام 116px ---------- */
.ab-appr { background:#F5F5F5; padding:80px; display:flex; flex-direction:column; align-items:center; gap:0; font-family:var(--aac-font); }
.ab-appr__head { display:flex; flex-direction:column; align-items:center; gap:4px; max-inline-size:688px; margin-block-end:48px; }
.ab-appr__title { margin:0; text-align:center; color:var(--p-950); font-size:var(--t-3xl); line-height:var(--lh-3xl); font-weight:700; }
.ab-appr__list { inline-size:100%; max-inline-size:1280px; display:flex; flex-direction:column; gap:8px; }
.ab-appr__item { display:flex; align-items:center; gap:0; }
.ab-appr__n { flex:0 0 134px; margin:0; font-size:116px; line-height:1; font-weight:700; color:transparent;
  -webkit-text-stroke:3px var(--g-200); margin-inline-end:-24px; }
@supports not (-webkit-text-stroke:1px #000){ .ab-appr__n{ color:var(--g-200); } }
.ab-appr__item p { margin:0; padding-block-start:84px; color:var(--g-600); font-size:var(--t-lg); line-height:var(--lh-lg);
  font-weight:600; text-align:justify; }

/* ---------- 3) What This Means in Practice — #091C31 · حشو 144 ---------- */
.ab-prac { background:var(--a-900); padding:71px 144px; font-family:var(--aac-font); }
.ab-prac__in { inline-size:100%; max-inline-size:1280px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:38px; }
.ab-prac__title { margin:0; color:#FFF; text-align:center; font-size:var(--t-3xl); line-height:var(--lh-3xl); font-weight:700; }
.ab-prac__grid { inline-size:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.ab-prac__card { background:rgba(255,255,255,0.08); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:24px; text-align:center; }
.ab-prac__card h3 { margin:0; color:var(--a-400); font-size:var(--t-lg); line-height:1.5; font-weight:700; }
.ab-prac__card p  { margin:0; color:#FFF; font-size:var(--t-base); line-height:var(--lh-base); }

/* ---------- 4) Who We Serve — #F5F5F5 · حشو 80 · بطاقات 415 ---------- */
.ab-serve { background:#F5F5F5; padding:80px; display:flex; flex-direction:column; align-items:center; gap:48px; font-family:var(--aac-font); }
.ab-serve__grid { inline-size:100%; max-inline-size:1280px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ab-serve__card { background:#FFF; border-radius:16px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ab-serve__card img { inline-size:64px; block-size:64px; object-fit:contain; display:block; }
.ab-serve__card h3 { margin:0; color:var(--a-500); font-size:var(--t-lg); line-height:1.5; font-weight:600; }
.ab-serve__card p  { margin:0; color:var(--g-400); font-size:var(--t-lg); line-height:var(--lh-lg); }
.ab-spectrum { inline-size:100%; max-inline-size:1280px; background:#FFF; border-radius:16px; padding:24px;
  display:flex; flex-direction:column; gap:18px; align-items:center; }
.ab-spectrum h3 { margin:0; font-size:var(--t-2xl); line-height:var(--lh-2xl); font-weight:700;
  background-image:linear-gradient(90deg,var(--p-200) 0%,var(--p-300) 50%,var(--p-500) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--p-300); }
.ab-spectrum p { margin:0; text-align:center; color:var(--p-900); font-size:var(--t-lg); line-height:var(--lh-lg); }

/* ---------- 5) Looking Ahead — حشو 80 · صورة 600×390 ---------- */
.ab-ahead { background:#FFF; padding:80px; font-family:var(--aac-font); }
.ab-ahead__row { inline-size:100%; max-inline-size:1280px; margin-inline:auto; display:flex; align-items:center; }
.ab-ahead__col { flex:0 0 680px; max-inline-size:680px; padding-inline-end:80px; display:flex; flex-direction:column; gap:24px; }
.ab-ahead__eyebrow, .ab-ahead__title { margin:0;
  background-image:linear-gradient(90deg,var(--p-200) 0%,var(--a-500) 50%,var(--p-500) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--a-500); }
.ab-ahead__eyebrow { font-size:var(--t-lg); line-height:1.5; font-weight:600; }
.ab-ahead__title { font-size:var(--t-3xl); line-height:var(--lh-3xl); font-weight:700; }
.ab-ahead__body { margin:0; color:var(--g-400); font-size:var(--t-base); line-height:var(--lh-base); text-align:justify; }
.ab-ahead__note { padding:4px 18px; border-inline-start:3px solid var(--a-500); }
.ab-ahead__note p { margin:0; color:var(--p-950); font-size:var(--t-lg); line-height:var(--lh-lg); }
.ab-ahead__media { flex:1 1 600px; }
.ab-ahead__media img { inline-size:100%; block-size:390px; object-fit:cover; display:block; }

/* ---------- تجاوب ---------- */
@media (max-width:90rem){
  .ab-who,.ab-appr,.ab-serve,.ab-ahead{ padding-inline:clamp(1.25rem,-1rem + 7vw,80px); }
  .ab-prac{ padding-inline:clamp(1.25rem,-3rem + 12vw,144px); }
  .ab-who__col,.ab-ahead__col{ flex:1 1 50%; max-inline-size:none; }
  .ab-who__media{ flex:1 1 50%; block-size:auto; aspect-ratio:675/560; }
}
@media (max-width:64rem){
  .ab-serve__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ab-appr__n{ flex-basis:96px; font-size:72px; margin-inline-end:0; }
  .ab-appr__item p{ padding-block-start:0; }
  .ab-appr__item{ gap:16px; align-items:flex-start; }
}
@media (max-width:48rem){
  .ab-who__row,.ab-ahead__row,.ab-who__intro{ flex-direction:column; gap:32px; align-items:stretch; }
  .ab-who__col,.ab-ahead__col{ padding-inline-end:0; }
  .ab-prac__grid,.ab-serve__grid{ grid-template-columns:1fr; }
  .ab-who__logo img{ margin-inline:auto; }
}