/* =========================================================
   v77 — About page
   ========================================================= */

/* ---- Hero: hand photo on the open side, globe faint behind the copy ---- */
body .qs-visual-about .qs-visual-frame{background-image:url("../assets/visuals/art/about-hero-en.webp")!important;background-size:cover!important;background-position:center!important;height:600px!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-frame{background-image:url("../assets/visuals/art/about-hero-ar.webp")!important}
body .qs-visual-about .qs-mask-left{width:62%!important;height:100%!important;background:linear-gradient(90deg,rgba(4,22,40,.88) 0%,rgba(4,22,40,.72) 55%,rgba(4,22,40,0) 100%)!important}
html[dir="rtl"] body .qs-visual-about .qs-mask-left{left:auto!important;right:0!important;background:linear-gradient(270deg,rgba(4,22,40,.88) 0%,rgba(4,22,40,.72) 55%,rgba(4,22,40,0) 100%)!important}
body .qs-visual-about .qs-mask-bottom{display:none!important}
body .qs-visual-about .qs-visual-copy{left:clamp(24px,5vw,90px)!important;top:9%!important;width:min(46%,620px)!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-copy{left:auto!important;right:clamp(24px,5vw,90px)!important}
body .qs-visual-about .qs-visual-lead{font-size:18px!important;line-height:1.75!important;color:#dbe8f1!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-lead{font-size:20px!important;font-weight:700!important}

/* hero bottom strip: same floating card as the home trust strip */
body .qs-visual-about .qs-visual-bottom{left:clamp(24px,5vw,90px)!important;right:clamp(24px,5vw,90px)!important;bottom:22px!important;height:auto!important;padding:18px 20px!important;border-radius:22px;
  background:repeating-linear-gradient(90deg,rgba(95,196,244,.04) 0 1px,transparent 1px 28px),linear-gradient(115deg,rgba(6,45,78,.95) 0%,rgba(7,61,104,.95) 50%,rgba(5,42,73,.95) 100%)!important;
  border:1px solid rgba(120,200,240,.28);box-shadow:0 24px 50px -18px rgba(0,20,40,0.39);overflow:hidden}
body .qs-visual-about .qs-visual-bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#F9C721 20%,#fff 50%,#F9C721 80%,transparent)}
body .qs-visual-about .qs-visual-bottom-item{flex-direction:row!important;gap:14px!important;justify-content:flex-start!important;text-align:start!important;border-color:rgba(249,199,33,.35)!important;padding:6px 18px!important;font-size:16px!important;font-weight:800!important;color:#fff!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-bottom-item{font-size:18px!important}
body .qs-visual-about .qs-visual-bottom-icon.ab3d{flex:none;width:58px!important;height:58px!important;border-radius:50%!important;display:grid!important;place-items:center;border:0!important;margin:0!important;
  background:radial-gradient(circle at 40% 32%,#2a8fc4 0%,#0b6a9b 55%,#05486c 100%)!important;
  box-shadow:inset 0 -3px 6px rgba(0,20,40,0.21),inset 0 2px 4px rgba(255,255,255,0.108),0 0 0 2px rgba(249,199,33,0.27),0 6px 12px rgba(0,0,0,0.18)!important}
body .qs-visual-about .ab3d .ic3d{width:36px!important;height:36px!important}

/* ---- Story: live HTML version of the approved artwork ---- */
body .about-story{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;background:#fff;overflow:hidden;min-height:620px}
body .about-story-art{grid-column:2;grid-row:1;align-self:stretch;min-height:620px;background:url("../assets/visuals/art/about-story-art-en.webp") left center/cover no-repeat}
body .about-story-copy{grid-column:1;grid-row:1;padding:70px clamp(24px,5vw,90px) 70px;max-width:760px}
html[dir="rtl"] body .about-story-art{background-image:url("../assets/visuals/art/about-story-art-ar.webp");background-position:right center}
body .about-story-eyebrow{display:none;margin:0 0 14px;color:#006697;font-size:19px;font-weight:700}
html[dir="rtl"] body .about-story-eyebrow{display:block}
body .about-story h2{margin:0 0 22px;color:#0b2a4a;font:800 44px/1.15 Montserrat,Inter,Arial,sans-serif}
html[dir="rtl"] body .about-story h2{font-size:48px;line-height:1.35}
body .about-story-copy p:not(.about-story-eyebrow){margin:0 0 20px;color:#4b6072;font-size:17.5px;line-height:1.75}
html[dir="rtl"] body .about-story-copy p:not(.about-story-eyebrow){font-size:20px;line-height:1.95;font-weight:700;color:#4b6072}

/* ---- What we believe: trust-strip style ---- */
body .about-lower{padding:50px 0 60px!important;background:#f2f7fb}
body .about-beliefs{margin:0!important;padding:0!important;border:0!important}
body .about-beliefs h2{text-align:center;color:#0b2a4a;font-size:40px;font-weight:800;margin:0 0 30px}
html[dir="rtl"] body .about-beliefs h2{font-size:44px}
body .belief-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin:0!important;border-radius:22px;overflow:hidden;position:relative;padding:24px 16px;
  background:repeating-linear-gradient(90deg,rgba(95,196,244,.04) 0 1px,transparent 1px 28px),linear-gradient(115deg,#062d4e 0%,#073d68 50%,#052a49 100%);
  border:1px solid rgba(120,200,240,.28);box-shadow:0 24px 50px -18px rgba(0,20,40,0.33)}
body .belief-grid::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#F9C721 20%,#fff 50%,#F9C721 80%,transparent)}
body .belief-item{display:flex;align-items:center;gap:16px;padding:10px 20px;position:relative}
body .belief-item+.belief-item::before{content:"";position:absolute;inset-inline-start:0;top:14%;bottom:14%;width:1px;background:linear-gradient(180deg,transparent,rgba(249,199,33,.7),transparent)}
body .belief-ic{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 32%,#2a8fc4 0%,#0b6a9b 55%,#05486c 100%);
  box-shadow:inset 0 -3px 6px rgba(0,20,40,0.21),inset 0 2px 4px rgba(255,255,255,0.108),0 0 0 2px rgba(249,199,33,0.27),0 6px 12px rgba(0,0,0,0.18)}
body .belief-ic .ic3d{width:38px;height:38px}
body .belief-item p{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font-size:17px!important;font-weight:800!important;line-height:1.45!important;
  background:linear-gradient(90deg,#fff 0%,#fff 60%,#F9C721 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
html[dir="rtl"] body .belief-item p{font-size:19px!important;background:linear-gradient(270deg,#fff 0%,#fff 60%,#F9C721 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* ---- Vision: photo background ---- */
body .about-vision{position:relative;isolation:isolate;overflow:hidden;margin-top:40px!important;padding:56px 60px!important;border-radius:24px!important;color:#fff;
  background:url("../assets/visuals/art/what-we-bring-art.jpg") center/cover no-repeat!important;box-shadow:0 24px 50px -18px rgba(0,20,40,0.33)}
body .about-vision::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,30,56,.94) 0%,rgba(4,40,72,.82) 55%,rgba(4,40,72,.5) 100%)}
html[dir="rtl"] body .about-vision::before{background:linear-gradient(270deg,rgba(4,30,56,.94) 0%,rgba(4,40,72,.82) 55%,rgba(4,40,72,.5) 100%)}
body .about-vision::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:linear-gradient(180deg,#FFE066,#E8A90C)}
body .about-vision h2{color:#fff!important;font-size:38px!important;font-weight:800!important;margin:0 0 18px!important}
html[dir="rtl"] body .about-vision h2{font-size:42px!important}
body .about-vision p{max-width:720px;color:#dbe8f1!important;font-size:18.5px!important;line-height:1.8!important}
html[dir="rtl"] body .about-vision p{font-size:20.5px!important;font-weight:700}
body .about-signoff{margin-top:40px!important;padding-top:30px!important}

/* ---- soft hand-off into the footer ---- */
body .about-foot-wave{height:80px;margin:0;background:#f2f7fb;line-height:0}
body .about-foot-wave svg{display:block;width:100%;height:100%}

/* ---- responsive ---- */
@media (max-width:1100px){body .belief-grid{grid-template-columns:1fr 1fr!important;row-gap:12px!important}body .belief-item:nth-child(3)::before{display:none}}
@media (max-width:900px){
  body .qs-visual-about .qs-visual-frame{height:auto!important;background-size:cover!important}
  body .qs-visual-about .qs-visual-copy{left:auto!important;right:auto!important;width:auto!important}
  body .qs-visual-about .qs-visual-bottom{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:20px 14px 14px}
  body .about-story{grid-template-columns:1fr!important;min-height:0}
  body .about-story-art,html[dir="rtl"] body .about-story-art{grid-column:1;grid-row:1;min-height:260px}
  body .about-story-copy,html[dir="rtl"] body .about-story-copy{grid-column:1;grid-row:2;padding:34px 20px}
  body .about-story h2{font-size:32px}html[dir="rtl"] body .about-story h2{font-size:34px}
  body .belief-grid{grid-template-columns:1fr!important}
  body .belief-item::before{display:none}
  body .about-vision{padding:34px 24px!important}
}
@media (max-width:900px){
  body .qs-visual-about .qs-visual-frame{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;padding:0 0 18px!important;background-size:auto 340px!important;background-position:right top!important}
  html[dir="rtl"] body .qs-visual-about .qs-visual-frame{background-position:left top!important}
  body .qs-visual-about .qs-mask-left{width:100%!important;height:100%!important;background:linear-gradient(180deg,rgba(4,22,40,.1) 0,rgba(4,22,40,.55) 200px,#061f34 330px)!important}
  html[dir="rtl"] body .qs-visual-about .qs-mask-left{background:linear-gradient(180deg,rgba(4,22,40,.1) 0,rgba(4,22,40,.55) 200px,#061f34 330px)!important}
  body .qs-visual-about .qs-visual-copy,html[dir="rtl"] body .qs-visual-about .qs-visual-copy{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;margin:230px 20px 0!important;transform:none!important}
  body .qs-visual-about .qs-visual-bottom{position:relative!important;inset:auto!important;margin:24px 14px 0!important;display:grid!important;grid-template-columns:1fr!important;gap:6px}
  body .qs-visual-about .qs-visual-bottom-item{border:0!important;padding:6px 4px!important}
}

/* =========================================================
   v77b — globe visible behind copy, cleaner Arabic type, phone layout, footer join
   ========================================================= */
body .qs-visual-about .qs-mask-left{background:linear-gradient(90deg,rgba(4,22,40,.42) 0%,rgba(4,22,40,.28) 50%,rgba(4,22,40,0) 100%)!important}
html[dir="rtl"] body .qs-visual-about .qs-mask-left{background:linear-gradient(270deg,rgba(4,22,40,.42) 0%,rgba(4,22,40,.28) 50%,rgba(4,22,40,0) 100%)!important}
body .qs-visual-about .qs-visual-copy h1,body .qs-visual-about .qs-visual-lead{text-shadow:0 2px 14px rgba(0,10,25,.75)}

/* Arabic: Somar for headings, lighter weight for reading text */
html[dir="rtl"] body :is(.about-story-copy p,.qs-visual-about .qs-visual-lead,.about-vision p){font-family:"IBM Plex Sans Arabic","Somar Sans",Tahoma,sans-serif!important;font-weight:500!important;line-height:1.95!important}
html[dir="rtl"] body .about-story-copy p:not(.about-story-eyebrow){font-size:19px!important;color:#3f5466!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-lead{font-size:19px!important}
html[dir="rtl"] body .about-vision p{font-size:19.5px!important}
html[dir="rtl"] body .belief-item p,html[dir="rtl"] body .qs-visual-about .qs-visual-bottom-item{font-family:"Somar Sans","IBM Plex Sans Arabic",sans-serif!important;font-weight:700!important}

/* footer: wave cut into the top of the footer itself (no colour seam) */
body .site-footer.has-top-wave{padding-top:110px!important}
body .foot-top-wave{position:absolute;left:0;right:0;top:-1px;height:80px;z-index:2;line-height:0;pointer-events:none}
body .foot-top-wave svg{display:block;width:100%;height:100%}
body .about-lower{padding-bottom:30px!important}

/* icons never squash */
body .qs-visual-about .qs-visual-bottom-icon.ab3d{min-width:58px;min-height:58px}

/* ---- phones: photo block, then copy on the globe, then strip ---- */
@media (max-width:900px){
  body .qs-visual-about .qs-visual-frame,html[dir="rtl"] body .qs-visual-about .qs-visual-frame{background:#061f34 url("../assets/visuals/art/about-globe-m.webp") center 280px/cover no-repeat!important;padding-bottom:20px!important}
  body .qs-visual-about .qs-mask-left,html[dir="rtl"] body .qs-visual-about .qs-mask-left{display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:270px!important;flex:none;
    background:linear-gradient(180deg,rgba(6,31,52,0) 60%,#061f34 100%),url("../assets/visuals/art/about-man-m.webp") 60% 30%/cover no-repeat!important}
  body .qs-visual-about .qs-visual-copy,html[dir="rtl"] body .qs-visual-about .qs-visual-copy{margin:6px 20px 0!important;padding:0!important}
  body .qs-visual-about .qs-visual-copy h1{font-size:34px!important;line-height:1.2!important}
  html[dir="rtl"] body .qs-visual-about .qs-visual-copy h1{font-size:36px!important;line-height:1.45!important}
  body .qs-visual-about .qs-visual-lead{font-size:16.5px!important}
  html[dir="rtl"] body .qs-visual-about .qs-visual-lead{font-size:17.5px!important}
  body .qs-visual-about .qs-visual-actions{flex-wrap:wrap;gap:12px!important}
  body .qs-visual-about .qs-visual-bottom{padding:12px!important}
  body .qs-visual-about .qs-visual-bottom-item{font-size:16px!important}
  body .qs-visual-about .qs-visual-bottom-icon.ab3d{width:50px!important;height:50px!important;min-width:50px;min-height:50px}
  body .about-story-art,html[dir="rtl"] body .about-story-art{min-height:230px;background-size:cover!important;background-position:center!important}
  body .about-story-copy p:not(.about-story-eyebrow){font-size:16.5px!important}
  html[dir="rtl"] body .about-story-copy p:not(.about-story-eyebrow){font-size:17.5px!important}
  body .about-beliefs h2{font-size:32px}html[dir="rtl"] body .about-beliefs h2{font-size:34px}
  body .site-footer.has-top-wave{padding-top:80px!important}
  body .foot-top-wave{height:50px}
}
@media (max-width:900px){body .qs-visual-about .qs-visual-copy,html[dir="rtl"] body .qs-visual-about .qs-visual-copy{margin-top:18px!important}body .qs-visual-about .qs-visual-actions{justify-content:flex-start!important}}
/* let the globe show behind the copy (legacy frame overlays were solid) */
body .qs-visual-about .qs-visual-frame::before{background:linear-gradient(90deg,rgba(6,31,52,.72) 0%,rgba(6,31,52,.55) 45%,rgba(6,31,52,0) 64%)!important}
html[dir="rtl"] body .qs-visual-about .qs-visual-frame::before{background:linear-gradient(270deg,rgba(6,31,52,.72) 0%,rgba(6,31,52,.55) 45%,rgba(6,31,52,0) 64%)!important}
body .qs-visual-about .qs-visual-frame::after{top:auto!important;height:180px!important;background:linear-gradient(180deg,rgba(6,31,52,0),rgba(6,31,52,.85))!important}
@media (max-width:900px){body .qs-visual-about .qs-visual-frame::before{display:none!important}body .qs-visual-about .qs-visual-frame::after{display:none!important}}

/* =========================================================
   v77c — identical hero rhythm in AR/EN, tighter section gaps, new phone hero
   ========================================================= */
@media (min-width:901px){
  body .qs-visual-about .qs-visual-frame{height:auto!important;min-height:600px;display:flex!important;flex-direction:column;justify-content:space-between;padding:54px 0 22px!important}
  body .qs-visual-about .qs-visual-copy,html[dir="rtl"] body .qs-visual-about .qs-visual-copy{position:relative!important;top:auto!important;margin:0 clamp(24px,5vw,90px)!important;left:auto!important;right:auto!important}
  body .qs-visual-about .qs-visual-bottom{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:44px clamp(24px,5vw,90px) 0!important}
}
/* tighter vertical rhythm */
body .about-story-copy{padding:44px clamp(24px,5vw,90px) 40px!important}
body .about-story,body .about-story-art{min-height:540px!important}
body .about-lower{padding:36px 0 20px!important}
body .about-beliefs h2{margin-bottom:22px!important}
body .about-vision{margin-top:26px!important}
body .about-signoff{margin-top:22px!important;padding-top:18px!important;padding-bottom:0!important}
body .site-footer.has-top-wave{padding-top:86px!important}
body .foot-top-wave{height:60px}

/* phones: one layered hero — photo + globe behind the copy, no separate photo block */
@media (max-width:900px){
  body .qs-visual-about .qs-visual-frame,html[dir="rtl"] body .qs-visual-about .qs-visual-frame{position:relative;padding:34px 0 18px!important;
    background:linear-gradient(180deg,rgba(6,31,52,.55) 0%,rgba(6,31,52,.82) 45%,#061f34 100%),url("../assets/visuals/art/about-man-m.webp") 70% 0/cover no-repeat,#061f34!important}
  body .qs-visual-about .qs-mask-left,html[dir="rtl"] body .qs-visual-about .qs-mask-left{display:none!important}
  body .qs-visual-about .qs-visual-copy,html[dir="rtl"] body .qs-visual-about .qs-visual-copy{margin:0 20px!important}
  body .qs-visual-about .qs-visual-copy h1{text-shadow:0 2px 18px rgba(0,10,25,.9)}
  body .qs-visual-about .qs-visual-actions{margin-top:6px}
  body .qs-visual-about .qs-visual-bottom{margin:26px 14px 0!important}
  body .about-story,body .about-story-art{min-height:0!important}
  body .about-story-art,html[dir="rtl"] body .about-story-art{height:210px}
  body .about-story-copy{padding:26px 20px 24px!important}
  body .about-lower{padding:24px 0 10px!important}
}
@media (min-width:901px){body .qs-visual-about .qs-visual-frame{justify-content:center!important;min-height:0!important;padding:60px 0 26px!important}}