/* Main Properties - header balance, contact containment and bilingual footer alignment */

/* Header: keep the language control left, logo right, and move navigation slightly right. */
.site-header {
  background-color: rgba(21,22,21,0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    height .52s cubic-bezier(.22,.7,.24,1),
    background-color .52s ease,
    color .4s ease,
    border-color .52s ease,
    box-shadow .52s ease,
    -webkit-backdrop-filter .52s ease,
    backdrop-filter .52s ease;
}

.site-header.scrolled {
  background-color: rgba(21,22,21,.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.site-header .header-inner {
  direction: ltr;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(24px, 2.4vw, 46px);
}

.site-header .header-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  direction: ltr;
}

.site-header .main-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  justify-content: center;
  transform: translateX(clamp(18px, 1.65vw, 32px));
  transition: transform .45s cubic-bezier(.22,.7,.24,1);
}

.site-header .brand {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: clamp(430px, 27vw, 540px);
  height: 90px;
  min-width: 0;
  background: none !important;
  transform-origin: right center;
  transition:
    width .52s cubic-bezier(.22,.7,.24,1),
    height .52s cubic-bezier(.22,.7,.24,1),
    transform .52s cubic-bezier(.22,.7,.24,1);
}

.site-header .brand .brand-copy {
  display: none !important;
}

.site-header .brand-lockup {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
  transform: scale(1);
  transform-origin: right center;
  transition:
    transform .52s cubic-bezier(.22,.7,.24,1),
    opacity .32s ease;
}

.site-header.scrolled .brand {
  width: clamp(330px, 22vw, 410px);
  height: 68px;
}

.site-header.scrolled .brand-lockup {
  transform: scale(.985);
}

html[dir="rtl"] .site-header .main-nav { direction: rtl; }
html[dir="ltr"] .site-header .main-nav { direction: ltr; }

/* Contact section: keep details visually inside the section rather than on the page edge. */
.contact {
  overflow: clip;
}

.contact .contact-top {
  width: min(86vw, 1540px);
  direction: ltr;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(58px, 5.5vw, 104px);
  align-items: start;
}

html[dir="ltr"] .contact .contact-top {
  grid-template-areas: "copy details";
}

html[dir="rtl"] .contact .contact-top {
  grid-template-areas: "details copy";
}

.contact-top > :first-child {
  grid-area: copy;
  min-width: 0;
  max-width: 760px;
}

.contact-details {
  grid-area: details;
  width: min(100%, 560px);
  max-width: 560px;
  min-width: 0;
  justify-self: center;
}

html[dir="rtl"] .contact-top > :first-child,
html[dir="rtl"] .contact-details {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .contact-top > :first-child,
html[dir="ltr"] .contact-details {
  direction: ltr;
  text-align: left;
}

.contact-row {
  grid-template-columns: minmax(90px, 108px) minmax(0, 1fr);
  gap: clamp(16px, 1.7vw, 26px);
  width: 100%;
}

.contact-row a,
.contact-row strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.contact-cta {
  margin-inline-start: 0;
}

/* Footer: compact four-column composition matching the supplied reference. */
.footer {
  background: #0a0b0a;
  color: var(--paper);
  padding: 58px 0 26px;
}

.footer .footer-grid {
  display: grid;
  grid-template-columns:
    minmax(370px, 1.12fr)
    minmax(155px, .58fr)
    minmax(250px, .9fr)
    minmax(360px, 1.22fr);
  column-gap: clamp(50px, 4.25vw, 82px);
  row-gap: 36px;
  align-items: start;
}

html[dir="rtl"] .footer .footer-grid { direction: rtl; }
html[dir="ltr"] .footer .footer-grid { direction: ltr; }

.footer .footer-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

html[dir="ltr"] .footer .footer-identity {
  align-items: flex-start;
  text-align: left;
}

html[dir="rtl"] .footer .footer-identity {
  align-items: flex-end;
  text-align: right;
}

.footer .footer-brand {
  display: flex !important;
  align-items: center;
  width: clamp(390px, 26vw, 470px);
  height: 98px;
  margin-block-start: -19px;
  margin-block-end: 8px;
  background: none !important;
  overflow: visible;
}

.footer .footer-brand .brand-lockup {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
}

html[dir="ltr"] .footer .footer-brand {
  justify-content: flex-start;
  margin-inline-start: clamp(-30px, -1.7vw, -22px);
  margin-inline-end: auto;
}

html[dir="ltr"] .footer .footer-brand .brand-lockup {
  object-position: left center;
}

html[dir="rtl"] .footer .footer-brand {
  justify-content: flex-end;
  margin-inline-start: auto;
  margin-inline-end: clamp(-30px, -1.7vw, -22px);
}

html[dir="rtl"] .footer .footer-brand .brand-lockup {
  object-position: right center;
}

.footer-tagline {
  margin: 0 0 16px;
  max-width: 365px;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(242,239,232,.52);
}

html[dir="rtl"] .footer-tagline {
  max-width: 390px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}

html[dir="ltr"] .footer-contact {
  align-items: flex-start;
  text-align: left;
}

html[dir="rtl"] .footer-contact {
  align-items: flex-end;
  text-align: right;
}

.footer-contact a {
  width: fit-content;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(242,239,232,.72);
  transition: color .2s ease;
}

.footer-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  text-align: start;
}

html[dir="rtl"] .footer-column {
  align-items: flex-start;
  text-align: right;
}

html[dir="ltr"] .footer-column {
  align-items: flex-start;
  text-align: left;
}

.footer-column h3 {
  margin: 5px 0 14px;
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(242,239,232,.48);
}

html[lang="ar"] .footer-column h3 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

.footer-column a {
  width: fit-content;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242,239,232,.68);
  transition: color .2s ease;
}

.footer-contact a:hover,
.footer-contact a:focus-visible,
.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--paper);
}

.footer-compliance p {
  margin: 24px 0 0;
  max-width: 470px;
  color: rgba(242,239,232,.46);
  font-size: 12px;
  line-height: 1.72;
}

.footer-bottom {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid rgba(242,239,232,.12);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(242,239,232,.42);
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 1380px) {
  .site-header .brand {
    width: clamp(380px, 27vw, 455px);
    height: 80px;
  }

  .site-header.scrolled .brand {
    width: clamp(310px, 22vw, 365px);
    height: 64px;
  }

  .site-header .main-nav {
    transform: translateX(clamp(12px, 1.2vw, 20px));
  }

  .main-nav { gap: 26px; }

  .contact .contact-top {
    width: min(89vw, 1260px);
  }

  .footer .footer-grid {
    grid-template-columns: minmax(320px, 1.05fr) .62fr .9fr 1.18fr;
    column-gap: clamp(36px, 3.5vw, 62px);
  }
}

@media (max-width: 1180px) {
  .site-header .brand {
    width: 340px;
    height: 70px;
  }

  .site-header.scrolled .brand {
    width: 305px;
    height: 60px;
  }

  .main-nav { gap: 22px; }

  .footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 72px;
  }

  .footer .footer-brand {
    width: min(400px, 100%);
    height: 92px;
    margin-block-start: -16px;
  }
}

@media (max-width: 1020px) {
  .site-header .header-inner {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 14px;
  }

  .site-header .brand,
  .site-header.scrolled .brand {
    width: clamp(250px, 36vw, 310px);
    height: 56px;
  }

  .site-header .main-nav {
    transform: none;
  }

  .site-header .main-nav.open {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .contact .contact-top {
    width: var(--page);
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "details";
    gap: 48px;
  }

  .contact-details {
    width: 100%;
    max-width: 680px;
    justify-self: stretch;
  }

  html[dir="rtl"] .contact-details { justify-self: end; }
  html[dir="ltr"] .contact-details { justify-self: start; }

  .footer .footer-brand {
    width: min(370px, 88vw);
    height: 86px;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}

@media (max-width: 720px) {
  .site-header .brand,
  .site-header.scrolled .brand {
    width: clamp(220px, 56vw, 280px);
    height: 50px;
  }

  .site-header .header-actions { gap: 8px; }
  .lang-link { min-width: 42px; height: 36px; }

  .contact .contact-top { gap: 36px; }

  .contact-row {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .footer {
    padding-top: 48px;
  }

  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer .footer-brand {
    width: min(350px, 90vw);
    height: 80px;
    margin-block-start: -14px;
    margin-block-end: 8px;
  }

  .footer-tagline { margin-bottom: 16px; }
  .footer-compliance p { margin-top: 10px; }

  .footer-bottom {
    margin-top: 38px;
    flex-direction: column;
    gap: 6px;
  }
}

/* v15: center the desktop navigation on the viewport and align Arabic footer content to its reading edge. */
@media (min-width: 1181px) {
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .site-header .main-nav {
    width: auto;
    justify-self: center;
    transform: none;
  }
}

html[dir="rtl"] .footer-column {
  direction: rtl;
  align-items: flex-end;
  text-align: right;
}

html[dir="rtl"] .footer-column h3,
html[dir="rtl"] .footer-column a {
  align-self: flex-end;
  text-align: right;
}

html[dir="rtl"] .footer-compliance p {
  align-self: flex-end;
  direction: rtl;
  text-align: right;
}