/* About EXA: modern Saudi architecture and EXA's blue identity */
.page-about { --saudi-surface: #f2f6fc; --saudi-accent: #71a6ec }
.page-about .company-facts { background: var(--saudi-surface); border-bottom-color: #dce7f5; padding-block: 30px }
.page-about .fact-card { border-inline-end-color: #d1e0f2 }
.page-about .fact-card strong { color: #174984 }
.page-about .saudi-about {
  display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  align-items: center; gap: 48px 7%; background: #fff;
}
.saudi-story { min-width: 0; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7%; align-items: start }
.saudi-story-heading, .saudi-story-detail { min-width: 0 }
.saudi-story .eyebrow { color: #376392; margin-bottom: 22px }
.saudi-story h2 { font-size: clamp(36px,3.8vw,56px); font-weight: 600; line-height: 1.15; letter-spacing: -1.6px; margin: 0 0 26px }
.saudi-story h2 span { color: #3e6d9f }
.saudi-story p { font-size: 16px; line-height: 1.9; max-width: 57ch; color: #526984; margin: 0 0 18px }
.saudi-story .saudi-lead { color: #153a65; font-size: 21px; line-height: 1.65; margin-bottom: 20px; max-width: 38ch }
.saudi-local { border-inline-start: 3px solid var(--saudi-accent); padding-inline-start: 20px; margin: 30px 0 22px }
.saudi-local > span { display: block; color: #5a7596; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 8px }
.saudi-local > strong { display: block; font-size: 19px; line-height: 1.5; font-weight: 600; color: #133b6a; margin-bottom: 6px }
.saudi-local p { font-size: 14px; line-height: 1.75; margin: 0; max-width: 44ch }
.saudi-story .inline-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-size: 14px }
.saudi-portrait {
  position: relative; min-width: 0; width: 100%; grid-column: 1 / -1;
  justify-self: center; margin: 0; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 22px; background: #082346; box-shadow: 0 18px 46px #123b641a;
}

.saudi-portrait > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center }
.saudi-portrait figcaption { position: absolute; inset: auto 0 0; padding: 100px 36px 28px; background: linear-gradient(transparent,#061b36f2); color: #fff }
.saudi-portrait figcaption strong { display: block; font-size: clamp(26px,3vw,40px); font-weight: 600; line-height: 1.4; margin-bottom: 5px }
.saudi-portrait figcaption span { display: block; font-size: 13px; color: #e4edf8; line-height: 1.8 }
.saudi-portrait .photo-attribution { display: flex; flex-wrap: wrap; gap: 0 12px }
.saudi-portrait figcaption a { display: inline-block; font-size: 10px; line-height: 1.8; color: #d3e1f3; margin-top: 9px; text-underline-offset: 3px; text-decoration: underline }
.saudi-sectors { grid-column: 1 / -1; min-width: 0; padding-top: 32px; border-top: 1px solid #e4eaf2 }
.saudi-sectors .section-head { margin-bottom: 28px; text-align: center; justify-content: center }
.saudi-sectors .section-head h2 { font-size: clamp(28px,2.6vw,38px); line-height: 1.4; letter-spacing: -.7px; margin: 0 }
.saudi-sectors .section-head .eyebrow { margin-bottom: 14px }
.saudi-sector-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px }
.saudi-sector-card { text-align: center; padding: 28px 24px; border: 1px solid #dce6f3; border-radius: 18px; background: #f7faff; min-width: 0 }
.saudi-sector-card > svg { display: block; width: 38px; height: 38px; color: #2165db; margin: 0 auto 18px }
.saudi-sector-card h3 { color: #133b6a; font-size: 21px; line-height: 1.5; margin-bottom: 12px }
.saudi-sector-card p { font-size: 15px; line-height: 1.8; margin: 0 auto; color: #526984; max-width: 36ch }
.page-about .principles-section { position: relative; background: var(--saudi-surface); border-block: 1px solid #dce7f5 }
.page-about .principles-section .info-card { border-color: #dce7f5 }
html[lang="ar"] .saudi-story h2 { font-size: clamp(36px,3.4vw,52px); line-height: 1.55; letter-spacing: 0 }
html[lang="ar"] .saudi-story p { font-size: 17px; line-height: 1.9 }
html[lang="ar"] .saudi-story .saudi-lead { font-size: 22px; line-height: 1.8 }
html[lang="ar"] .saudi-local > span { font-size: 12px; letter-spacing: 0 }
html[lang="ar"] .saudi-local > strong { font-size: 20px }
html[lang="ar"] .saudi-local p { font-size: 15px }
html[lang="ar"] .saudi-sectors .section-head h2 { line-height: 1.65; letter-spacing: 0 }
html[lang="ar"] .saudi-sector-card h3 { font-size: 22px }
html[lang="ar"] .saudi-sector-card p { font-size: 16px; line-height: 1.9 }
@media (max-width:1100px) {
  .page-about .saudi-about { column-gap: 5%; row-gap: 56px }
  .saudi-story h2 { font-size: 40px }
  .saudi-story .saudi-lead { font-size: 19px }
  .saudi-sector-card { padding: 24px 18px }
}
@media (max-width:900px) {
  .page-about .saudi-about { grid-template-columns: minmax(0,1fr); gap: 40px }
  .saudi-story p { max-width: 65ch }
  .saudi-story { grid-template-columns: minmax(0,1fr); gap: 20px }
  .saudi-portrait { width: 100% }
  .saudi-sector-grid { grid-template-columns: 1fr; gap: 16px }
  .saudi-sector-card p { max-width: 52ch }
}
@media (max-width:600px) {
  .page-about .company-facts { padding-block: 16px }
  .saudi-story h2 { font-size: 36px; letter-spacing: -1px; margin-bottom: 20px }
  .saudi-story p { font-size: 16px; line-height: 1.85 }
  .saudi-story .saudi-lead { font-size: 19px; line-height: 1.7 }
  .saudi-local { margin-top: 24px; padding-inline-start: 16px }
  .saudi-portrait { border-radius: 18px; aspect-ratio: auto }
  .saudi-portrait > img { height: auto; aspect-ratio: 16/9 }
  .saudi-portrait figcaption { position: relative; padding: 18px 20px; background: #082346 }
  .saudi-portrait figcaption strong { font-size: 26px }
  .saudi-portrait figcaption span { font-size: 12px }
  .saudi-sectors { padding-top: 26px }
  .saudi-sectors .section-head h2 { font-size: 27px }
  html[lang="ar"] .saudi-story h2 { font-size: 36px; line-height: 1.5 }
  html[lang="ar"] .saudi-story p { font-size: 16px }
  html[lang="ar"] .saudi-story .saudi-lead { font-size: 20px }
  html[lang="ar"] .saudi-local p { font-size: 15px }
}