/* Final brand/hero tuning: keep role cards on the portrait and split the name weight. */

/* Wordmark: first name carries the brand weight, family name stays calmer. */
.wordmark-name .brand-first{font-weight:800!important}
.wordmark-name .brand-last{font-weight:500!important}
html[lang='ar'] .site-header .wordmark-name .brand-first{font-weight:800!important}
html[lang='ar'] .site-header .wordmark-name .brand-last{font-weight:500!important}

/* Role cards: overlap the lower edge of the portrait instead of sitting below it. */
html body main .hero .hero-grid .hero-visual{
  padding-bottom:0!important;
}

/* Keep both employer marks visually consistent: same logo box, same muted monochrome treatment. */
html body main .hero .hero-grid .hero-visual .note-a,
html body main .hero .hero-grid .hero-visual::before{
  background-color:#11151b!important;
  background-repeat:no-repeat!important;
  background-blend-mode:luminosity!important;
}

html body main .hero .hero-grid .hero-visual .note-a{
  left:18px!important;
  right:auto!important;
  top:auto!important;
  bottom:20px!important;
  width:calc(50% - 30px)!important;
  height:90px!important;
  min-height:90px!important;
  padding:14px 94px 14px 16px!important;
  border-radius:17px!important;
  background-position:right 16px center!important;
  background-size:68px auto!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
}
html body main .hero .hero-grid .hero-visual .note-a small{
  font-size:8.2px!important;
  margin-bottom:5px!important;
}
html body main .hero .hero-grid .hero-visual .note-a strong{
  font-size:13px!important;
  line-height:1.2!important;
}

html body main .hero .hero-grid .hero-visual::before{
  left:auto!important;
  right:18px!important;
  top:auto!important;
  bottom:20px!important;
  width:calc(50% - 30px)!important;
  height:82px!important;
  min-height:82px!important;
  padding:12px 94px 11px 14px!important;
  background-position:right 16px center!important;
  background-size:68px auto!important;
  border-radius:16px!important;
  box-shadow:0 14px 30px rgba(0,0,0,.24)!important;
  font-size:7.4px!important;
}
html body main .hero .hero-grid .hero-visual::after{
  left:auto!important;
  right:18px!important;
  top:auto!important;
  bottom:20px!important;
  width:calc(50% - 30px)!important;
  height:82px!important;
  padding:28px 94px 10px 14px!important;
  box-sizing:border-box!important;
  font-size:9.6px!important;
  line-height:1.22!important;
}

/* RTL mirrors the cards and the logo placement, while keeping current role primary. */
html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{
  left:auto!important;
  right:18px!important;
  padding:14px 16px 14px 94px!important;
  background-position:left 16px center!important;
  text-align:right!important;
}
html[lang='ar'] body main .hero .hero-grid .hero-visual::before{
  left:18px!important;
  right:auto!important;
  padding:12px 14px 11px 94px!important;
  background-position:left 16px center!important;
  text-align:right!important;
}
html[lang='ar'] body main .hero .hero-grid .hero-visual::after{
  left:18px!important;
  right:auto!important;
  padding:28px 14px 10px 94px!important;
  text-align:right!important;
  font-size:9.3px!important;
}

@media(max-width:1050px) and (min-width:761px){
  html body main .hero .hero-grid .hero-visual .note-a{
    left:14px!important;bottom:16px!important;width:calc(50% - 24px)!important;
    height:84px!important;min-height:84px!important;
    padding-right:82px!important;background-size:58px auto!important;background-position:right 13px center!important;
  }
  html body main .hero .hero-grid .hero-visual::before,
  html body main .hero .hero-grid .hero-visual::after{
    right:14px!important;bottom:16px!important;width:calc(50% - 24px)!important;height:76px!important;min-height:76px!important;
  }
  html body main .hero .hero-grid .hero-visual::before{padding-right:82px!important;background-size:58px auto!important;background-position:right 13px center!important}
  html body main .hero .hero-grid .hero-visual::after{padding-right:82px!important;font-size:8.9px!important;box-sizing:border-box!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{left:auto!important;right:14px!important;padding-left:82px!important;padding-right:14px!important;background-position:left 13px center!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual::before{left:14px!important;right:auto!important;padding-left:82px!important;padding-right:12px!important;background-position:left 13px center!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual::after{left:14px!important;right:auto!important;padding-left:82px!important;padding-right:12px!important}
}

@media(max-width:760px){
  html body main .hero .hero-grid .hero-visual{padding-bottom:0!important;width:96%!important}
  html body main .hero .hero-grid .hero-visual .note-a{
    left:10px!important;right:auto!important;bottom:10px!important;
    width:calc(50% - 15px)!important;height:70px!important;min-height:70px!important;
    padding:10px 50px 10px 10px!important;background-position:right 8px center!important;background-size:36px auto!important;
    border-radius:13px!important;
  }
  html body main .hero .hero-grid .hero-visual .note-a small{font-size:6.8px!important;margin-bottom:3px!important}
  html body main .hero .hero-grid .hero-visual .note-a strong{font-size:9.8px!important;line-height:1.2!important}
  html body main .hero .hero-grid .hero-visual::before{
    left:auto!important;right:10px!important;bottom:10px!important;
    width:calc(50% - 15px)!important;height:64px!important;min-height:64px!important;
    padding:9px 50px 8px 9px!important;background-position:right 8px center!important;background-size:36px auto!important;
    border-radius:12px!important;font-size:6.1px!important;
  }
  html body main .hero .hero-grid .hero-visual::after{
    left:auto!important;right:10px!important;bottom:10px!important;
    width:calc(50% - 15px)!important;height:64px!important;
    padding:23px 50px 7px 9px!important;box-sizing:border-box!important;font-size:7.6px!important;line-height:1.2!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{
    left:auto!important;right:10px!important;padding:10px 10px 10px 50px!important;background-position:left 8px center!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual::before{
    left:10px!important;right:auto!important;padding:9px 9px 8px 50px!important;background-position:left 8px center!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual::after{
    left:10px!important;right:auto!important;padding:23px 9px 7px 50px!important;font-size:7.3px!important;
  }
}