/* Interior banners share the homepage's 680px desktop scale */
.multipage .page-hero.rich-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 680px;
  gap: 28px;
  padding: 26px max(6%, calc((100vw - 1400px) / 2)) 30px;
  color: #fff;
  background: linear-gradient(100deg, #04182ff2 8%, #082747df 53%, #103c698a), url('assets/hero.png') center 52% / cover;
  overflow: hidden;
}
html[dir="rtl"] .multipage .page-hero.rich-hero {
  background-image: linear-gradient(260deg, #04182ff2 8%, #082747df 53%, #103c698a), url('assets/hero.png');
}
.rich-hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -120px;
  top: 12%;
  width: 640px;
  height: 640px;
  border: 1px solid #90bdff1c;
  border-radius: 50%;
  box-shadow: 0 0 0 65px #83b6ff06, 0 0 0 130px #83b6ff04;
  pointer-events: none;
  z-index: -1;
}
.rich-hero .breadcrumbs {
  display: flex;
  position: static;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.6;
  color: #bfcee2;
}
.rich-hero .breadcrumbs a { padding: 0; min-height: auto; width: auto; font-size: inherit; color: inherit }
.rich-hero .breadcrumbs a:hover { color: #fff }
.rich-hero-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
  gap: 7%;
  align-items: center;
}
.rich-hero-copy { min-width: 0; padding-block: 12px }
.rich-hero .rich-hero-copy .eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1.4px;
  color: #bbd6fb;
}
.multipage .rich-hero .rich-hero-copy h1 {
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -1.8px;
  margin: 0 0 24px;
}
.rich-hero-copy h1 > span { display: block; color: #8fbdff }
.multipage .rich-hero .rich-hero-description {
  max-width: 56ch;
  margin: 0;
  color: #d6e3f4;
  font-size: 18px;
  line-height: 1.85;
}
.rich-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px }
.rich-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; font-size: 14px; font-weight: 600; line-height: 1.6 }
.rich-hero-actions .rich-hero-primary { background: #fff; color: #0b3261; border-color: #fff; border-radius: 10px; padding: 13px 20px }
.rich-hero-actions .rich-hero-primary:hover { background: #e0edff; border-color: #e0edff; transform: translateY(-2px) }
.rich-hero-actions .rich-hero-secondary { color: #e0ebfa; border-bottom: 1px solid #85ade8; padding: 10px 0 8px }
.rich-hero-actions .rich-hero-secondary:hover { color: #fff; border-color: #fff }
.rich-hero-actions a > span, .hero-map-link > span { font-size: 21px; font-weight: 400; line-height: 1 }
html[dir="rtl"] .rich-hero-actions a > span,
html[dir="rtl"] .hero-map-link > span { transform: scaleX(-1) }
.hero-feature {
  min-width: 0;
  width: 100%;
  max-width: 490px;
  justify-self: end;
  padding: 26px;
  border: 1px solid #a4caff40;
  border-radius: 24px;
  background: linear-gradient(145deg, #173f65ed, #082342f5);
  box-shadow: 0 24px 65px #020e2529, inset 0 1px 0 #ffffff0d;
  text-align: center;
}
.hero-panel-label { font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: 1.6px; color: #afd0ff; margin-bottom: 8px }
.rich-hero .hero-feature h2 { color: white; font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: -.5px; margin: 0 0 22px }
.multipage .rich-hero .hero-panel-note { font-size: 13px; line-height: 1.75; color: #c5d7ed; margin: 19px auto 0; max-width: 42ch }
.hero-feature svg { flex: 0 0 auto; width: 28px; height: 28px; color: #94c2ff }
.hero-overview-list { display: grid; gap: 10px }
.hero-overview-row { display: block; min-width: 0; border: 1px solid #9bc5ff29; border-radius: 13px; background: #ffffff06; padding: 13px 16px; transition: background .2s, border-color .2s }
.hero-overview-row:hover { background: #8abaff12; border-color: #9bc5ff70 }
.hero-overview-title { display: flex; align-items: center; justify-content: center; gap: 11px }
.rich-hero .hero-overview-title h3 { font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -.3px; color: #fff; margin: 0 }
.multipage .rich-hero .hero-overview-row p { font-size: 13px; line-height: 1.6; color: #ccdbee; margin: 7px 0 0 }
.hero-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.hero-capability { min-width: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; min-height: 100px; padding: 14px 10px; border: 1px solid #9bc5ff29; border-radius: 13px; background: #ffffff06; transition: background .2s, border-color .2s }
.hero-capability:hover { background: #8abaff12; border-color: #9bc5ff70 }
.rich-hero .hero-capability h3 { font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0; color: #edf5ff; letter-spacing: 0 }
.hero-partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.hero-partner-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 112px; padding: 14px 12px 12px; background: #fff; border: 1px solid #dbe8f8; border-radius: 13px; transition: background .2s, transform .2s }
.hero-partner-logo:hover { transform: translateY(-2px); background: #eff6ff }
.hero-partner-logo > span { color: #38587a; font-size: 11px; line-height: 1.5 }
.hero-partner-logo .brand-image { height: 42px }
.hero-partner-logo .brand-image .logo-mark { width: min(100%, var(--mark-width), calc(40px * var(--mark-aspect))) }
.hero-foundation { position: relative; overflow: hidden; border-block: 1px solid #b8d4f629; padding: 23px 10px }
.hero-foundation > img { display: block; width: 124px; height: auto; margin: 0 auto 21px }
.hero-foundation > span { display: block; font-size: 13px; color: #c6dafa }
.hero-foundation > strong { display: block; margin: 3px 0 12px; font-size: 84px; font-weight: 600; line-height: 1.1; letter-spacing: -3px; color: #a5caff }
.multipage .rich-hero .hero-foundation > p { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 1.6; color: #d5e6fd; margin: 0 }
.hero-foundation > p svg { width: 19px; height: 19px }
.hero-foundation-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 20px; color: #fff; font-size: 12px; line-height: 1.7; margin-top: 20px }
.hero-foundation-tags span { border-bottom: 1px solid #85b9ff59; padding-bottom: 5px }
.hero-location-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #9ac5ff59; border-radius: 50%; background: #6dacf714; box-shadow: 0 0 0 8px #6dacf706; margin: 22px auto }
.hero-location-icon svg { width: 32px; height: 32px }
.rich-hero .hero-office h3 { font-size: 22px; line-height: 1.5; margin: 0 0 8px; font-weight: 600; color: #fff; letter-spacing: -.3px }
.multipage .rich-hero .hero-office > p { color: #ccdbee; font-size: 15px; line-height: 1.8; margin: 0 }
.hero-contact-links { display: grid; gap: 0; margin: 22px 0 10px; border-top: 1px solid #b8d4f629; padding-top: 12px }
.hero-contact-links a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff }
.hero-map-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; font-size: 14px; color: #bcd8ff; border-bottom: 1px solid #85b9ff59 }
.rich-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid #b7d0f22e; padding-top: 22px; margin: 0 }
.rich-hero-facts > div { min-width: 0; display: flex; flex-direction: column-reverse; gap: 4px; border-inline-end: 1px solid #b7d0f22e }
.rich-hero-facts > div:last-child { border: 0 }
.rich-hero-facts dt { font-size: 12px; line-height: 1.7; color: #bdd0e9 }
.rich-hero-facts dd { font-size: 23px; line-height: 1.5; font-weight: 600; color: #e5efff; margin: 0 }
html[lang="ar"] .rich-hero .rich-hero-copy .eyebrow { letter-spacing: 0; font-size: 12px }
html[lang="ar"] .multipage .rich-hero .rich-hero-copy h1 { font-size: clamp(40px, 3.8vw, 58px); line-height: 1.4; letter-spacing: 0 }
html[lang="ar"] .multipage .rich-hero .rich-hero-description { font-size: 19px; line-height: 1.9 }
html[lang="ar"] .rich-hero-actions a { font-size: 15px }
html[lang="ar"] .rich-hero .hero-feature h2 { font-size: 24px; line-height: 1.5; letter-spacing: 0 }
html[lang="ar"] .hero-panel-label { letter-spacing: 0; font-size: 12px }
html[lang="ar"] .rich-hero .hero-overview-title h3 { font-size: 20px; letter-spacing: 0 }
html[lang="ar"] .multipage .rich-hero .hero-overview-row p { font-size: 14px }
html[lang="ar"] .rich-hero .hero-capability h3 { font-size: 15px; line-height: 1.6 }
html[lang="ar"] .multipage .rich-hero .hero-panel-note { font-size: 14px; line-height: 1.8 }
html[lang="ar"] .hero-foundation > strong { letter-spacing: 0 }
html[lang="ar"] .rich-hero-facts dt { font-size: 13px }

@media (max-width: 1180px) {
  .rich-hero-layout { gap: 4% }
  .hero-feature { padding: 22px }
  .multipage .rich-hero .rich-hero-description { font-size: 17px }
  .rich-hero .hero-feature h2 { font-size: 20px }
  .rich-hero-actions { gap: 10px 18px; margin-top: 25px }
  .rich-hero-actions a { font-size: 13px }
}
@media (max-width: 1000px) {
  .multipage .page-hero.rich-hero { gap: 28px; padding-bottom: 30px }
  .rich-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 30px }
  .rich-hero-copy { max-width: 720px; padding: 0 }
  .multipage .rich-hero .rich-hero-copy h1 { font-size: 50px }
  .hero-feature { max-width: none }
  .hero-overview-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .hero-overview-title { flex-direction: column; gap: 8px }
  .hero-capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .hero-partner-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .hero-partner-logo { padding-inline: 10px }
  .hero-foundation { padding-block: 20px }
  .hero-foundation > img { margin-bottom: 14px }
  .hero-foundation > strong { font-size: 72px }
}
@media (max-width: 700px) {
  .multipage .page-hero.rich-hero { min-height: 0; padding: 22px 6% 26px; gap: 26px }
  .rich-hero .breadcrumbs { font-size: 12px; gap: 10px }
  .rich-hero-layout { gap: 28px }
  .rich-hero .rich-hero-copy .eyebrow { font-size: 10px; letter-spacing: .8px; margin-bottom: 16px }
  .multipage .rich-hero .rich-hero-copy h1 { font-size: clamp(33px, 7.7vw, 46px); line-height: 1.18; letter-spacing: -.9px; margin-bottom: 20px }
  .multipage .rich-hero .rich-hero-description { font-size: 16px; line-height: 1.85 }
  .rich-hero-actions { margin-top: 22px; gap: 10px 18px }
  .rich-hero-actions a { min-height: 46px; font-size: 13px }
  .rich-hero-actions .rich-hero-primary { padding: 12px 17px }
  .hero-feature { padding: 22px 18px; border-radius: 18px }
  .rich-hero .hero-feature h2 { font-size: 21px; margin-bottom: 18px }
  .hero-overview-list { grid-template-columns: minmax(0, 1fr) }
  .hero-overview-title { flex-direction: row; gap: 10px }
  .hero-overview-row { padding: 12px }
  .hero-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-capability { min-height: 100px; padding: 12px 8px }
  .hero-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
  .hero-partner-logo { min-height: 100px; padding-inline: 9px }
  .hero-partner-logo > span { font-size: 10px }
  .hero-foundation > strong { font-size: 68px }
  .rich-hero-facts { gap: 12px; padding-top: 20px }
  .rich-hero-facts dd { font-size: 17px; overflow-wrap: anywhere }
  .rich-hero-facts dt { font-size: 10px; line-height: 1.8; padding-inline-end: 4px }
  html[lang="ar"] .multipage .rich-hero .rich-hero-copy h1 { font-size: clamp(34px, 7.9vw, 44px); line-height: 1.4 }
  html[lang="ar"] .multipage .rich-hero .rich-hero-description { font-size: 17px; line-height: 1.9 }
  html[lang="ar"] .rich-hero-actions a { font-size: 14px }
  html[lang="ar"] .rich-hero .hero-feature h2 { font-size: 23px }
  html[lang="ar"] .rich-hero-facts dt { font-size: 11px }
}
@media (max-width: 380px) {
  .hero-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-feature { padding-inline: 15px }
  .rich-hero-facts { gap: 8px }
  .rich-hero-facts dd { font-size: 16px }
}
@media (prefers-reduced-motion: reduce) {
  .rich-hero a { transition: none }
  .rich-hero .rich-hero-actions a:hover,
  .rich-hero .hero-partner-logo:hover { transform: none }
}