/* EXA's common card system with two approved blue cover sizes */
body.site-card-system {
  --exa-cover-short: 74px;
  --exa-cover-rich: 182px;
  --exa-card-radius: 22px;
  --exa-card-border: #d7e3f3;
  --exa-card-shadow: 0 4px 12px #102d5004, 0 20px 42px -28px #163a7045;
  --exa-card-ink: #12365f;
  --exa-card-blue: #2464df;
  --exa-card-cover: radial-gradient(ellipse at 50% -20%, #285d99 0%, #143e6c 38%, #0d2c50 80%);
}
body.site-card-system .exa-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--exa-card-border);
  border-radius: var(--exa-card-radius);
  background: #fff;
  box-shadow: var(--exa-card-shadow);
  text-align: center;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
body.site-card-system .exa-card-heading {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 27px 22px 25px;
  border-radius: 21px 21px 0 0;
  overflow: hidden;
  color: #fff;
  background: var(--exa-card-cover);
}
body.site-card-system .exa-card-heading::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(#a8cfff24 1px, transparent 1px), linear-gradient(90deg, #a8cfff24 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  pointer-events: none;
}
body.site-card-system .exa-card-heading::after {
  content: '';
  position: absolute;
  inset-inline: 20%;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #5594ff, transparent);
}
body.site-card-system .exa-card .exa-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  margin: 0 auto 17px;
  padding: 11px;
  color: #d0e4ff;
  border: 1px solid #8eb8f557;
  border-radius: 18px;
  background: #488aff14;
  box-shadow: 0 0 0 6px #7eb3ff07;
}
body.site-card-system .exa-card-icon svg { display: block; width: 100%; height: 100%; }
body.site-card-system .exa-card .exa-card-heading > :is(h2,h3) {
  display: block;
  width: 100%;
  min-height: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.45;
  margin: 0;
}
body.site-card-system .exa-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 25px 24px;
}
body.site-card-system .exa-card .exa-card-content > p {
  width: 100%;
  max-width: 46ch;
  color: #526984;
  font-size: 16px;
  line-height: 1.85;
  margin: 0;
}
body.site-card-system .exa-card-content > .inline-link,
body.site-card-system .exa-card-content > .contact-value {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  margin-top: 23px;
  border: 1px solid #d6e3f7;
  border-radius: 12px;
  background: #edf4ff;
  color: #1c54bd;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
body.site-card-system .exa-card-content > .inline-link .link-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  margin: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--exa-card-blue);
  font-size: 20px;
}
body.site-card-system .exa-card :is(a,button):focus-visible,
body.site-card-system a.exa-card:focus-visible,
body.site-card-system a.exa-hero-card:focus-visible {
  outline: 3px solid #2464df;
  outline-offset: 4px;
}
body.site-card-system .exa-card:hover { transform: none; }
body.site-card-system .exa-card:focus-within { border-color: #83afea; }
body.site-card-system .exa-card-content > :is(.inline-link,.contact-value):hover {
  color: #fff;
  border-color: #2464df;
  background: #2464df;
}
/* Portfolio: a strong header followed by quieter product and engineering detail */
body.site-card-system .capability.exa-card { border-top-width: 1px; }
body.site-card-system .exa-card--technology .exa-card-content > p { max-width: 44ch; }
body.site-card-system .exa-card .engineering-detail { margin-top: 24px; padding-top: 22px; border-color: #e1eaf6; }
body.site-card-system .exa-card :is(.engineering-detail,.vendor-product-block,.vendor-support-block) h4 {
  color: #235bac;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 15px;
}
body.site-card-system .exa-card .vendor-links { gap: 8px; margin-bottom: 24px; }
body.site-card-system .exa-card .vendor-links a {
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #dbe6f7;
  border-radius: 9px;
  background: #f1f6ff;
  color: #244d82;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.site-card-system .exa-card .vendor-links a:hover { background: #e6f0ff; border-color: #9cbbeb; }
body.site-card-system .exa-card .engineering-list li { font-size: 15px; line-height: 1.8; }
/* Detailed services */
body.site-card-system .exa-card--detail .exa-card-content > p { flex: 1; margin-bottom: 22px; }
body.site-card-system .exa-card .delivery-list {
  border: 1px solid #e3ebf7;
  border-radius: 13px;
  padding: 4px 15px;
  background: #f5f8fd;
}
body.site-card-system .exa-card .delivery-list li { padding: 11px 0; font-size: 14px; }
/* Vendor cards keep logos on white, above a clear name and product category */
body.site-card-system .partners .exa-card--vendor { min-height: 0; height: auto; padding: 0; }
body.site-card-system .exa-card--vendor .exa-card-heading {
  flex: 0 0 auto;
  justify-content: center;
  padding: 14px 20px;
  min-height: var(--exa-cover-rich);
}
body.site-card-system .exa-vendor-mark {
  width: 100%;
  min-height: 68px;
  margin-bottom: 8px;
  padding: 5px 18px;
  border: 1px solid #d8e6f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px #041a3633;
}
body.site-card-system .exa-vendor-mark .brand-image { height: 56px; margin: 0; }
body.site-card-system .exa-card.exa-card--vendor .exa-card-heading .vendor-name {
  color: #fff;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 6px;
  min-height: 0;
}
body.site-card-system .exa-card--vendor .vendor-area {
  min-height: 0;
  max-width: 32ch;
  margin: 0;
  color: #c6dbf8;
  font-size: 14px;
  line-height: 1.5;
}
body.site-card-system .exa-card--vendor .exa-card-content { padding: 25px 22px 24px; }
body.site-card-system .exa-card--vendor .vendor-product-block { padding: 0; border: 0; }
body.site-card-system .exa-card--vendor .vendor-support-block { margin-top: 22px; padding-top: 22px; border-color: #e1eaf6; }
body.site-card-system .exa-card--vendor .product-list li {
  padding: 15px 13px;
  margin: 0 0 10px;
  border: 1px solid #e6edf8;
  border-radius: 12px;
  background: #f6f9fe;
}
body.site-card-system .exa-card--vendor .product-list li:last-child { margin-bottom: 0; }
body.site-card-system .exa-card--vendor .product-list strong { font-size: 15px; color: #173b67; }
body.site-card-system .exa-card--vendor .product-list li > span { font-size: 14px; line-height: 1.8; }
body.site-card-system .exa-card--vendor .exa-card-content > .vendor-note { margin-top: 18px; font-size: 13px; }
/* Logo collections use the same silhouette while preserving each original mark */
body.site-card-system .exa-card--logo {
  min-height: 172px;
  padding: 21px 0 0;
  border-radius: 18px;
  overflow: hidden;
}
body.site-card-system .exa-card--logo::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 30%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #5286d7;
}
body.site-card-system .exa-card--logo .brand-image { padding-inline: 16px; margin-bottom: 18px; }
body.site-card-system .exa-card--logo > .exa-logo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 55px;
  margin-top: auto;
  padding: 11px 10px;
  border-top: 1px solid #e1e9f5;
  color: #264f7f;
  background: #f0f5fc;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
}
/* Compact editorial cards: lighter surfaces to balance the blue section cards */
body.site-card-system .exa-card--compact,
body.site-card-system .exa-card--related {
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0, #edf4ff 0, #fff 64%);
}
body.site-card-system .exa-card--compact .exa-card-heading,
body.site-card-system .exa-card--related .exa-card-heading {
  flex-direction: row;
  gap: 13px;
  justify-content: center;
  padding: 25px 22px 0;
  border-radius: 19px 19px 0 0;
  background: transparent;
  overflow: visible;
}
body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-heading::before,
body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-heading::after { content: none; }
body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-icon {
  width: 45px;
  height: 45px;
  padding: 9px;
  margin: 0;
  border-radius: 13px;
  border-color: #ccddf7;
  color: #2464df;
  background: #eaf2ff;
  box-shadow: none;
}
body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-heading h3 {
  width: auto;
  color: #12365f;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -.3px;
}
body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-content { padding: 17px 24px 25px; }
body.site-card-system .exa-card--compact .exa-card-content > p { font-size: 15px; margin: 0 auto; }
body.site-card-system .about-values { gap: 15px; }
body.site-card-system .about-values > .exa-card { padding-top: 0 !important; padding-bottom: 0; border: 1px solid var(--exa-card-border); }
body.site-card-system .about-values > .exa-card .exa-card-heading { padding-top: 20px; }
body.site-card-system .about-values > .exa-card .exa-card-content { padding-top: 12px; padding-bottom: 20px; }
body.site-card-system .support-process { gap: 22px; }
body.site-card-system .support-process > .exa-card { padding: 0; border: 1px solid var(--exa-card-border); }
body.site-card-system .exa-card--related .exa-card-content > p { flex: 1; }
body.site-card-system .exa-card--related .exa-card-content > .link-arrow {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-top: 20px;
  border: 1px solid #d0e1fb;
  border-radius: 50%;
  color: #2464df;
  background: #edf4ff;
}
/* Contact cards and company facts */
body.site-card-system .exa-card--contact .exa-card-content > p { flex: 1; }
body.site-card-system .exa-card--contact .contact-value { font-size: 18px; overflow-wrap: anywhere; }
body.site-card-system .exa-fact {
  position: relative;
  padding: 24px 18px;
  gap: 7px;
  border: 1px solid var(--exa-card-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--exa-card-shadow);
}
body.site-card-system .exa-fact::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: calc(50% - 18px);
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #5286d7;
}
body.site-card-system .exa-fact strong { color: #1b518e; }
/* Banner tiles and larger contact panels follow the same border and blue palette */
body.site-card-system .hero-feature.exa-panel,
body.site-card-system .office-panel.exa-panel {
  border: 1px solid #90b8ec59;
  border-radius: 24px;
  background: var(--exa-card-cover);
  box-shadow: 0 22px 48px -22px #041a3645, inset 0 1px 0 #ffffff10;
}
body.site-card-system .exa-hero-card { border-radius: 15px; box-shadow: 0 6px 14px #03152c0a; }
body.site-card-system :is(.hero-overview-row,.hero-capability).exa-hero-card {
  border-color: #9bc5ff40;
  background: linear-gradient(145deg,#7da7e014,#ffffff05);
}
body.site-card-system .hero-partner-logo.exa-hero-card { border-color: #d7e4f7; }
body.site-card-system .hero-partner-logo.exa-hero-card > span { color: #264f7f; font-weight: 600; }
body.site-card-system .partnership-panel.exa-panel {
  border-color: #d7e3f3;
  background: radial-gradient(ellipse at 50% 0, #e7f0ff 0, #fff 75%);
  box-shadow: var(--exa-card-shadow);
}
body.site-card-system .contact-card.exa-panel {
  min-width: 0;
  padding: 30px 26px;
  border: 1px solid #9ac1f340;
  border-radius: 24px;
  background: #ffffff05;
  box-shadow: 0 15px 40px #03162f12;
}
body.site-card-system .contact-card.exa-panel .contact-email { max-width: 100%; font-size: clamp(25px,2.6vw,35px); overflow-wrap: anywhere; }
body.site-card-system .saudi-local.exa-panel {
  padding: 22px;
  border: 1px solid #d8e5f6;
  border-inline-start: 3px solid #71a6ec;
  border-radius: 16px;
  background: #f5f9ff;
}
/* Arabic and responsive rules remain fluid, with no text clipping */
html[lang="ar"] body.site-card-system .exa-card .exa-card-heading > :is(h2,h3) { font-size: 26px; line-height: 1.6; letter-spacing: 0; }
html[lang="ar"] body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-heading h3 { font-size: 23px; }
html[lang="ar"] body.site-card-system .exa-card .exa-card-content > p { font-size: 17px; line-height: 1.9; }
html[lang="ar"] body.site-card-system .exa-card--compact .exa-card-content > p { font-size: 16px; }
html[lang="ar"] body.site-card-system .exa-card--vendor .vendor-area { font-size: 15px; min-height: 0; }
html[lang="ar"] body.site-card-system .exa-card :is(.vendor-product-block,.vendor-support-block,.engineering-detail) h4 { font-size: 17px; }
html[lang="ar"] body.site-card-system .exa-card .engineering-list li { font-size: 16px; }
html[lang="ar"] body.site-card-system .exa-card .product-list strong { font-size: 15px; }
html[lang="ar"] body.site-card-system .exa-card .product-list li > span { font-size: 15px; }
html[lang="ar"] body.site-card-system .exa-card .delivery-list li { font-size: 15px; }
html[lang="ar"] body.site-card-system .exa-card-content > .inline-link { font-size: 15px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body.site-card-system .exa-card.exa-interactive:hover { transform: translateY(-3px); border-color: #94b6e8; box-shadow: 0 24px 46px -25px #163a7050; }
}
@media (max-width:1100px) {
  body.site-card-system .exa-card-heading { padding-inline: 18px; }
  body.site-card-system .exa-card-content { padding-inline: 20px; }
  body.site-card-system .exa-card--vendor .exa-card-heading { padding-inline: 20px; }
  body.site-card-system :is(.exa-card--compact,.exa-card--related) .exa-card-heading { flex-direction: column; gap: 12px; }
}
@media (max-width:700px) {
  body.site-card-system .exa-card { border-radius: 20px; }
  body.site-card-system .exa-card-heading { padding: 24px 20px; border-radius: 19px 19px 0 0; min-height: 0; }
  body.site-card-system .exa-card .exa-card-heading > :is(h2,h3) { font-size: 24px; }
  body.site-card-system .exa-card--vendor .exa-card-heading { min-height: var(--exa-cover-rich); }
  body.site-card-system .exa-card .vendor-area { min-height: 0; }
  body.site-card-system .exa-card-content { padding: 23px 20px; }
  body.site-card-system .exa-card .exa-card-content > p { font-size: 15px; }
  body.site-card-system .exa-card--vendor .exa-card-content { padding: 24px 20px; }
  body.site-card-system .exa-card--logo { min-height: 160px; border-radius: 16px; }
  body.site-card-system .exa-card--logo .brand-image { padding-inline: 12px; }
  body.site-card-system .exa-card--logo > .exa-logo-label { font-size: 11px; padding-inline: 8px; }
  body.site-card-system .company-facts { gap: 14px; padding-block: 22px; }
  body.site-card-system .exa-fact { padding: 23px 18px; }
  body.site-card-system .contact-card.exa-panel { padding: 26px 22px; }
  body.site-card-system .support-process { gap: 16px; }
  html[lang="ar"] body.site-card-system .exa-card .exa-card-heading > :is(h2,h3) { font-size: 25px; }
  html[lang="ar"] body.site-card-system .exa-card .exa-card-content > p { font-size: 16px; }
  html[lang="ar"] body.site-card-system .exa-card .vendor-area { min-height: 0; }
}
@media (prefers-reduced-motion:reduce) {
  body.site-card-system .exa-card,
  body.site-card-system .exa-card a { transition: none; }
  body.site-card-system .exa-card.exa-interactive:hover { transform: none; }
}

/* Short cover: keep icon and title together, allowing long titles to wrap */
body.site-card-system .exa-card:is(.exa-card--technology,.exa-card--detail,.exa-card--contact) .exa-card-heading {
  flex-direction: row;
  flex: 0 0 auto;
  gap: 12px;
  min-height: var(--exa-cover-short);
  padding: 7px 18px;
}
body.site-card-system .exa-card:is(.exa-card--technology,.exa-card--detail,.exa-card--contact) .exa-card-icon {
  width: 38px;
  height: 38px;
  padding: 7px;
  margin: 0;
  border-radius: 11px;
  box-shadow: none;
}
body.site-card-system .exa-card:is(.exa-card--technology,.exa-card--detail,.exa-card--contact) .exa-card-heading > :is(h2,h3) {
  width: auto;
  min-width: 0;
  font-size: 24px;
  line-height: 1.25;
}
html[lang="ar"] body.site-card-system .exa-card:is(.exa-card--technology,.exa-card--detail,.exa-card--contact) .exa-card-heading > :is(h2,h3) {
  font-size: 22px;
  line-height: 1.35;
}
@media (max-width:700px) {
  body.site-card-system .exa-card:is(.exa-card--technology,.exa-card--detail,.exa-card--contact) .exa-card-heading {
    padding-inline: 15px;
    gap: 10px;
  }
}