.brand-logo {
  display: block;
  width: auto;
  height: 79px;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

.hero {
  background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 48%, rgba(255,255,255,.2) 100%), url('assets/network-light.jpeg');
  background-size: cover;
  background-position: center;
}

.hero-visual {
  aspect-ratio: 3 / 2;
  max-width: 620px;
}

.hero-visual > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

.about {
  position: relative;
  background-image: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 52%, rgba(255,255,255,.3) 100%), url('assets/network-wave.jpeg');
  background-size: cover;
  background-position: center;
}

.services {
  background-image: linear-gradient(rgba(4,19,39,.92), rgba(4,19,39,.94)), url('assets/network-dark.jpeg');
  background-size: cover;
  background-position: center;
}

.approach {
  background-image: linear-gradient(90deg, rgba(243,247,251,.98) 0%, rgba(243,247,251,.93) 55%, rgba(243,247,251,.66) 100%), url('assets/human-network.jpeg');
  background-size: cover;
  background-position: center;
}

.contact {
  background-image: linear-gradient(110deg, rgba(4,38,78,.94), rgba(9,109,217,.8)), url('assets/human-network.jpeg');
  background-size: cover;
  background-position: center;
}

.footer-brand .brand-logo {
  width: 172px;
  height: auto;
  max-height: 92px;
}

@media (max-width: 900px) {
  .brand-logo { width: auto; height: 70px; max-height: none; }
  .hero { background-image: linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.82)), url('assets/network-light.jpeg'); }
  .hero-visual { max-width: 520px; }
  .about, .approach { background-image: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.9)), url('assets/network-wave.jpeg'); }
}

@media (max-width: 600px) {
  .brand-logo { width: auto; height: 64px; max-height: none; }
  .hero-visual { max-width: 100%; }
  .hero-visual > img { border-radius: 0; }
  .footer-brand .brand-logo { width: 150px; height: auto; max-height: 80px; }
}

@media (min-width: 901px) {
  .site-header { height: 88px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .site-header { height: 88px; }
  .site-header nav { top: 88px; }
}

/* Full Arabic reading direction */
body[dir="rtl"] { text-align: right; }
body[dir="rtl"] .section-heading,
body[dir="rtl"] .about-copy,
body[dir="rtl"] .services-heading,
body[dir="rtl"] .catalogue-heading,
body[dir="rtl"] .services-cta,
body[dir="rtl"] .approach-intro,
body[dir="rtl"] .steps,
body[dir="rtl"] .contact,
body[dir="rtl"] footer { text-align: right; }
body[dir="rtl"] .hero-actions { justify-content: flex-start; }
body[dir="rtl"] .service-contact-button { justify-self: start; }

/* Six-stage approach — a clear sequence instead of a wrapping headline */
.approach { display: block; }
.approach-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: 8vw;
  align-items: end;
}
.approach-intro > p:last-child { margin: 0 0 6px; }
.steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps li {
  position: relative;
  display: block;
  min-height: 265px;
  padding: 30px 22px;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.44);
}
.steps li:last-child { border-right: 0; }
.steps li > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(9,109,217,.35);
  border-radius: 50%;
  background: rgba(255,255,255,.86);
}
.steps h3 { margin: 38px 0 12px; font-size: 21px; }
.steps p { font-size: 14px; line-height: 1.7; }
.steps li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 34px;
  right: -13px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--blue);
  background: #f5f8fb;
  font-weight: 800;
}
body[dir="rtl"] .steps li { border-right: 0; border-left: 1px solid var(--line); }
body[dir="rtl"] .steps li:last-child { border-left: 0; }
body[dir="rtl"] .steps li:not(:last-child)::after {
  content: "←";
  right: auto;
  left: -13px;
}

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { min-height: 235px; border-bottom: 1px solid var(--line); }
  .steps li:nth-child(3n) { border-right: 0; }
  .steps li:nth-last-child(-n+3) { border-bottom: 0; }
  .steps li:nth-child(3n)::after { display: none; }
  body[dir="rtl"] .steps li:nth-child(3n) { border-left: 0; }
}

@media (max-width: 760px) {
  .approach-intro { grid-template-columns: 1fr; gap: 28px; }
  .steps { grid-template-columns: 1fr; margin-top: 44px; }
  .steps li,
  body[dir="rtl"] .steps li {
    min-height: auto;
    padding: 26px 18px 28px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .steps li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .steps li:last-child,
  body[dir="rtl"] .steps li:last-child { border-bottom: 0; }
  .steps h3 { margin: 20px 0 8px; }
  .steps li:not(:last-child)::after,
  body[dir="rtl"] .steps li:not(:last-child)::after {
    content: "↓";
    display: grid;
    top: auto;
    right: 22px;
    left: auto;
    bottom: -13px;
  }
  body[dir="rtl"] .steps li:not(:last-child)::after { right: auto; left: 22px; }
}

/* Approved homepage hero direction */
.hero {
  min-height: 720px;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
  padding: 88px clamp(24px, 7vw, 112px) 92px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,.82) 56%, rgba(255,255,255,.98) 100%), url('assets/human-ideas-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero:before { display: none; }

.hero-copy {
  grid-column: 2;
  max-width: 760px;
  justify-self: end;
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(44px, 5vw, 74px);
  line-height: 1.04;
  letter-spacing: -.052em;
}

.hero h1 span,
.hero h1 strong { display: block; }

.hero h1 strong {
  margin-top: 10px;
  color: var(--blue);
  font-weight: 800;
}

.hero-text { max-width: 650px; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: none;
  border-left: 0;
  padding: 0;
  right: clamp(24px, 7vw, 112px);
  bottom: 34px;
}

.hero-note strong { color: var(--blue); }
.hero-note span { padding-left: 18px; border-left: 1px solid var(--line); }

body[dir=rtl] .hero-copy { grid-column: 2; text-align: right; }
body[dir=rtl] .hero-note { right: auto; left: clamp(24px, 7vw, 112px); border-right: 0; padding-right: 0; }
body[dir=rtl] .hero-note span { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid var(--line); }

@media (max-width: 900px) {
  .hero {
    min-height: 760px;
    display: block;
    padding: 390px 24px 110px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 29%, rgba(255,255,255,.98) 47%, #fff 100%), url('assets/human-ideas-hero.webp');
    background-size: auto 430px;
    background-position: left top;
  }
  .hero-copy, body[dir=rtl] .hero-copy { max-width: 720px; text-align: start; }
  .hero-note, body[dir=rtl] .hero-note { left: 24px; right: 24px; bottom: 28px; }
}

@media (max-width: 600px) {
  .hero { min-height: 820px; padding: 330px 20px 122px; background-size: auto 360px; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .hero-note { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hero-note span, body[dir=rtl] .hero-note span { padding: 0; border: 0; }
}

/* Keep the Arabic hero copy in the physical right-hand column.
   In RTL, CSS grid line numbering is mirrored, so column 1 is the right column. */
@media (min-width: 901px) {
  body[dir=rtl] .hero-copy {
    grid-column: 1;
    width: 100%;
    max-width: 760px;
    justify-self: start;
    text-align: right;
  }

  body[dir=rtl] .hero-note {
    right: clamp(24px, 7vw, 112px);
    left: auto;
  }
}