/* Final coherence layer for the Compact Website.
   Admin content remains authoritative; this file owns spacing, proportions and responsive positioning.
   Release: spacing-language-v2. */
.shell{width:min(1060px,calc(100% - 48px));margin:auto}
.viewport{grid-template-rows:56px 108px minmax(0,1fr)}
.header-row{height:56px}
.career-track{height:84px;padding:14px 0 7px}
.career-track:before{top:22px}
.career-step{flex:1 0 190px;padding:24px 12px 0 0}
.career-step:before{top:2px;width:12px;height:12px}
html[dir="rtl"] .career-step{padding:24px 0 0 12px}
.career-step time{font-size:.64rem;margin-bottom:1px}
.career-step span{font-size:.66rem;max-width:180px}

/* One coherent vertical rhythm: hero gets presence, lower sections get enough space to breathe. */
.compact-grid{
  grid-template-columns:minmax(0,1.58fr) minmax(220px,.62fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  column-gap:40px;
  row-gap:14px;
  padding:20px 0 16px;
  align-items:center;
}
.hero-copy{align-self:center;min-width:0}
.hero-copy h1{font-size:clamp(2rem,3.9vw,3.55rem);margin:6px 0 8px;max-width:760px}
.hero-copy h2{font-size:clamp(1.08rem,1.9vw,1.55rem);margin:0 0 7px;max-width:720px}
.lead{font-size:clamp(.79rem,1vw,.93rem);line-height:1.46;max-width:700px;display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;overflow:visible!important}
.hero-actions{margin-top:11px}
.profile-panel{width:min(100%,255px);gap:8px;align-self:center}
.portrait{border-radius:18px}
.signal{padding:9px 10px;gap:9px}
.signal strong{font-size:1.55rem}
.signal span{font-size:.65rem}

.expertise-panel{padding-top:10px;align-self:end}
.section-headline{margin-bottom:7px}
.expertise-grid{gap:9px}
.expertise-grid article{min-height:84px;padding:9px 10px;border-radius:12px;display:flex;flex-direction:column;justify-content:flex-start}
.expertise-grid h3{font-size:.74rem;margin:0 0 4px;line-height:1.22}
.expertise-grid p{display:block!important;margin:0;color:var(--muted);font-size:.59rem;line-height:1.3;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;overflow:visible!important}

.worked-with-panel{padding-top:9px;align-self:end}
.journey-heading{margin-bottom:5px}
.worked-with-track{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;align-items:center;min-height:74px}
.partner-card{height:68px;display:flex;align-items:center;justify-content:center;padding:0 4px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.partner-card img{display:block;width:auto;height:auto;object-fit:contain;max-width:96%}
.hightech-card img{max-height:56px;max-width:94%}
.amen-card img{max-height:42px;max-width:98%}
.alahli-card img{max-height:62px;max-width:76%}
.ifq-card img{max-height:44px;max-width:90%}
.bein-card img{max-height:36px;max-width:96%}
.orange-card img{max-height:52px;max-width:68%}

/* Language contract: even fallback/static rendering may never show both languages at once. */
html[lang="en"] .ar{display:none!important}
html[lang="ar"] .en{display:none!important}

@media(min-width:1040px){.career-step{min-width:0;flex:1}.career-track{overflow-x:hidden}.career-hint{display:none}}

@media(max-width:1039px){
  .shell{width:min(100% - 28px,1060px)}
  .viewport{grid-template-rows:52px 102px minmax(0,1fr)}
  .header-row{height:52px}
  .career-track{height:78px}
  .career-hint{display:block}
  .compact-grid{grid-template-columns:minmax(0,1fr) 176px;column-gap:22px;row-gap:9px;padding:11px 0 9px}
  .profile-panel{width:176px}
  .hero-copy h1{font-size:clamp(1.75rem,4.2vw,3rem)}
  .expertise-grid{gap:7px}
  .expertise-grid article{min-height:76px;padding:7px 8px}
  .expertise-grid p{font-size:.54rem;line-height:1.23}
  .worked-with-panel{padding-top:6px}
  .worked-with-track{display:flex;overflow-x:auto;scrollbar-width:none;gap:12px;min-height:56px}
  .worked-with-track::-webkit-scrollbar{display:none}
  .partner-card{flex:0 0 132px;height:54px}
  .hightech-card img{max-height:47px}.amen-card img{max-height:35px}.alahli-card img{max-height:50px}.ifq-card img{max-height:37px}.bein-card img{max-height:30px}.orange-card img{max-height:43px}
}

@media(max-width:620px){
  .shell{width:min(100% - 20px,1060px)}
  .viewport{grid-template-rows:50px 96px minmax(0,1fr)}
  .header-row{height:50px}
  .compact-grid{grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:minmax(0,1fr) auto auto;column-gap:10px;row-gap:6px;padding:7px 0 7px;align-items:start}
  .hero-copy{align-self:center}
  .profile-panel{width:88px;align-self:center}
  .hero-copy h1{font-size:clamp(1.45rem,7.2vw,1.95rem);margin:3px 0 4px}
  .hero-copy h2{font-size:.84rem;margin-bottom:3px}
  .lead{font-size:.56rem;line-height:1.23}
  .hero-actions{margin-top:5px}
  .expertise-panel{padding-top:5px}
  .section-headline{margin-bottom:4px}
  .expertise-grid{grid-template-columns:repeat(2,1fr);gap:4px}
  .expertise-grid article{min-height:0;padding:5px 6px;border-radius:8px}
  .expertise-grid h3{font-size:.58rem;margin:0 0 2px}
  .expertise-grid p{display:block!important;font-size:.48rem;line-height:1.16}
  .worked-with-panel{padding-top:4px}
  .journey-heading{margin-bottom:2px}
  .worked-with-track{gap:10px;min-height:44px}
  .partner-card{flex-basis:104px;height:42px}
  .hightech-card img{max-height:35px}.amen-card img{max-height:26px}.alahli-card img{max-height:37px}.ifq-card img{max-height:28px}.bein-card img{max-height:23px}.orange-card img{max-height:33px}
}

@media(max-height:760px) and (min-width:621px){
  .compact-grid{padding:8px 0 7px;row-gap:6px;column-gap:30px}
  .hero-copy h1{font-size:clamp(1.7rem,3.1vw,2.7rem);margin:3px 0 4px}
  .hero-copy h2{font-size:clamp(.92rem,1.45vw,1.16rem);margin-bottom:3px}
  .lead{font-size:.67rem;line-height:1.29}
  .hero-actions{margin-top:5px}
  .profile-panel{width:min(100%,188px)}
  .expertise-panel{padding-top:5px}
  .expertise-grid article{min-height:0;padding:5px 7px}
  .expertise-grid p{display:block!important;font-size:.52rem;line-height:1.18}
  .worked-with-panel{padding-top:4px}
  .worked-with-track{min-height:50px}
  .partner-card{height:48px}
}

@media(max-height:650px){
  .compact-grid{padding:4px 0;row-gap:4px;column-gap:18px}
  .hero-copy h1{font-size:clamp(1.35rem,2.6vw,2.05rem);margin:2px 0 3px}
  .hero-copy h2{font-size:.78rem;margin-bottom:2px}
  .lead{font-size:.54rem;line-height:1.18}
  .profile-panel{width:min(100%,145px)}
  .expertise-panel{padding-top:3px}
  .expertise-grid article{min-height:0;padding:3px 5px}
  .expertise-grid h3{font-size:.56rem;margin:0 0 1px}
  .expertise-grid p{display:block!important;font-size:.44rem;line-height:1.12}
  .worked-with-panel{padding-top:2px}
  .worked-with-track{min-height:38px}
  .partner-card{height:36px}
}