/* Compact v3: narrower frame, top auto-carousel, larger timeline and more Core expertise space. */

.shell{width:min(900px,calc(100% - 64px));margin:auto}
.viewport{grid-template-rows:56px 154px minmax(0,1fr)}
.header-row{height:56px}

/* Top carousel: timeline and journey logos share one generous strip. */
.top-showcase{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
}
.showcase-shell{
  width:min(900px,calc(100% - 64px));
  height:100%;
  margin:auto;
  position:relative;
}
.showcase-viewport{height:100%;position:relative;overflow:hidden}
.showcase-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(18px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;
  padding:12px 0 24px;
}
html[dir="rtl"] .showcase-slide{transform:translateX(-18px)}
.showcase-slide.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  visibility:visible;
  transition-delay:0s;
}
.showcase-label{
  height:21px;
  color:var(--blue);
  font-size:.66rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  display:flex;
  align-items:center;
}
html[dir="rtl"] .showcase-label{letter-spacing:0}
.showcase-controls{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  z-index:5;
}
.showcase-dot{
  appearance:none;
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#b8cceb;
  cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.showcase-dot.is-active{width:21px;background:var(--blue)}
.showcase-dot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Timeline gets real room: full text stays visible and never clamps. */
.career-track{
  height:102px;
  position:relative;
  display:flex;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding:14px 0 4px;
}
.career-track::-webkit-scrollbar{display:none}
.career-track:before{
  content:"";
  position:absolute;
  top:24px;
  left:10px;
  right:10px;
  height:2px;
  background:#cfe0f2;
}
.career-step{
  position:relative;
  z-index:1;
  flex:1 0 176px;
  min-width:0;
  padding:31px 12px 0 0;
  scroll-snap-align:start;
}
html[dir="rtl"] .career-step{padding:31px 0 0 12px}
.career-step:before{
  content:"";
  position:absolute;
  top:3px;
  left:0;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--white);
  border:4px solid var(--blue);
  box-shadow:0 0 0 4px var(--white);
}
html[dir="rtl"] .career-step:before{left:auto;right:0}
.career-step time{
  display:block;
  color:var(--blue);
  font-size:.69rem;
  font-weight:800;
  line-height:1.2;
  margin-bottom:4px;
  white-space:nowrap;
}
.career-step span{
  display:block;
  color:var(--ink);
  font-size:.70rem;
  font-weight:650;
  line-height:1.38;
  max-width:165px;
  white-space:normal;
}
.career-step.coming-soon span{color:var(--muted)}

/* Logos move into the top carousel and get the whole strip. */
.logos-slide{padding-top:12px}
.worked-with-track{
  height:99px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:26px;
  align-items:center;
  overflow:visible;
}
.partner-card{
  height:82px;
  min-width:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible;
  transition:transform .18s ease,opacity .18s ease;
}
.partner-card:hover{transform:translateY(-2px);opacity:.9}
.partner-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:10px}
.partner-card img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain;image-rendering:auto}
.hightech-card img{max-height:72px}
.amen-card img{max-height:53px}
.alahli-card img{max-height:76px;max-width:86%}
.ifq-card img{max-height:48px;max-width:92%}
.bein-card img{max-height:39px;max-width:96%}
.orange-card img{max-height:56px;max-width:70%}

/* Main content: narrower, calmer, and only Hero + Core expertise. */
.compact-grid{
  width:min(860px,calc(100% - 72px));
  height:100%;
  grid-template-columns:minmax(0,1fr) 220px;
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:40px;
  row-gap:16px;
  padding:16px 0 18px;
  align-items:center;
}
.hero-copy h1{font-size:clamp(2.05rem,3.85vw,3.45rem);margin:5px 0 8px;max-width:650px}
.hero-copy h2{font-size:clamp(1.02rem,1.75vw,1.42rem);margin:0 0 7px;max-width:620px}
.lead{
  max-width:620px;
  font-size:clamp(.78rem,.92vw,.91rem);
  line-height:1.48;
  display:block!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow:visible!important;
}
.profile-panel{width:min(100%,220px);gap:8px}
.signal{padding:9px 10px}
.signal strong{font-size:1.48rem}
.signal span{font-size:.62rem}

/* More Core expertise space and full descriptions. */
.expertise-panel{
  grid-column:1/-1;
  align-self:end;
  padding-top:12px;
  border-top:1px solid rgba(219,231,243,.95);
}
.section-headline{margin-bottom:9px}
.expertise-grid{gap:12px}
.expertise-grid article{
  min-height:112px;
  padding:12px 13px;
  border-radius:13px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.expertise-grid h3{font-size:.78rem;line-height:1.22;margin:0 0 6px}
.expertise-grid p{
  display:block!important;
  margin:0;
  color:var(--muted);
  font-size:.62rem;
  line-height:1.36;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow:visible!important;
}

/* The old bottom logo block must not consume layout space even if stale markup is cached. */
.worked-with-panel{display:none!important}

/* One-language contract. */
html[lang="en"] .ar{display:none!important}
html[lang="ar"] .en{display:none!important}

/* Desktop: fit all five timeline milestones without horizontal compression. */
@media(min-width:1040px){
  .career-step{flex:1 1 0;min-width:0}
  .career-track{overflow-x:hidden}
}

@media(max-width:1039px){
  .shell,.showcase-shell{width:min(100% - 36px,900px)}
  .compact-grid{width:min(100% - 44px,860px);grid-template-columns:minmax(0,1fr) 176px;column-gap:24px;row-gap:12px;padding:12px 0 12px}
  .viewport{grid-template-rows:52px 146px minmax(0,1fr)}
  .header-row{height:52px}
  .showcase-slide{padding:10px 0 22px}
  .career-track{height:96px;padding-top:12px}
  .career-step{flex:0 0 178px;padding-top:30px}
  .career-step span{max-width:166px}
  .worked-with-track{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;height:92px}
  .worked-with-track::-webkit-scrollbar{display:none}
  .partner-card{flex:0 0 132px;height:76px}
  .hightech-card img{max-height:62px}.amen-card img{max-height:47px}.alahli-card img{max-height:68px}
  .ifq-card img{max-height:43px}.bein-card img{max-height:35px}.orange-card img{max-height:49px}
  .profile-panel{width:176px}
  .expertise-grid article{min-height:98px;padding:10px 11px}
  .expertise-grid p{font-size:.58rem}
}

@media(max-width:620px){
  .shell,.showcase-shell{width:calc(100% - 28px)}
  .compact-grid{width:calc(100% - 28px);grid-template-columns:minmax(0,1fr) 92px;column-gap:10px;row-gap:8px;padding:7px 0 8px}
  .viewport{grid-template-rows:50px 134px minmax(0,1fr)}
  .header-row{height:50px}
  .showcase-slide{padding:8px 0 20px}
  .showcase-label{font-size:.57rem;height:18px}
  .showcase-controls{bottom:6px}
  .career-track{height:88px;padding:9px 0 2px}
  .career-track:before{top:19px}
  .career-step{flex:0 0 166px;padding-top:27px}
  .career-step:before{top:2px;width:13px;height:13px}
  .career-step time{font-size:.65rem;margin-bottom:3px}
  .career-step span{font-size:.63rem;line-height:1.34;max-width:154px}
  .worked-with-track{height:84px;gap:18px}
  .partner-card{flex-basis:116px;height:68px}
  .hightech-card img{max-height:54px}.amen-card img{max-height:41px}.alahli-card img{max-height:58px}
  .ifq-card img{max-height:37px}.bein-card img{max-height:31px}.orange-card img{max-height:44px}

  .hero-copy h1{font-size:clamp(1.45rem,7vw,1.9rem);margin:3px 0 4px}
  .hero-copy h2{font-size:.82rem;margin-bottom:3px}
  .lead{font-size:.58rem;line-height:1.28}
  .hero-actions{margin-top:6px}
  .profile-panel{width:92px}
  .expertise-panel{padding-top:7px}
  .section-headline{font-size:.57rem;margin-bottom:5px}
  .expertise-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .expertise-grid article{min-height:82px;padding:7px 8px}
  .expertise-grid h3{font-size:.61rem;margin-bottom:3px}
  .expertise-grid p{font-size:.49rem;line-height:1.23}
}

@media(max-height:760px) and (min-width:621px){
  .viewport{grid-template-rows:50px 128px minmax(0,1fr)}
  .showcase-slide{padding-top:7px}
  .career-track{height:83px}
  .career-step{padding-top:27px}
  .worked-with-track{height:78px}
  .partner-card{height:62px}
  .compact-grid{padding:8px 0 8px;row-gap:8px}
  .hero-copy h1{font-size:clamp(1.68rem,3vw,2.55rem);margin:3px 0 4px}
  .hero-copy h2{font-size:clamp(.88rem,1.35vw,1.1rem);margin-bottom:3px}
  .lead{font-size:.65rem;line-height:1.3}
  .hero-actions{margin-top:5px}
  .profile-panel{width:min(100%,170px)}
  .expertise-panel{padding-top:6px}
  .expertise-grid article{min-height:74px;padding:7px 9px}
  .expertise-grid p{font-size:.52rem;line-height:1.2}
}

@media(max-height:650px){
  .viewport{grid-template-rows:46px 108px minmax(0,1fr)}
  .header-row{height:46px}
  .showcase-slide{padding:5px 0 17px}
  .showcase-label{height:15px;font-size:.52rem}
  .career-track{height:70px;padding-top:6px}
  .career-track:before{top:15px}
  .career-step{padding-top:23px}
  .career-step time{font-size:.57rem}
  .career-step span{font-size:.54rem;line-height:1.25}
  .worked-with-track{height:66px}
  .partner-card{height:52px}
  .compact-grid{padding:4px 0;row-gap:5px;column-gap:18px}
  .hero-copy h1{font-size:clamp(1.32rem,2.45vw,1.9rem);margin:2px 0 3px}
  .hero-copy h2{font-size:.76rem;margin-bottom:2px}
  .lead{font-size:.53rem;line-height:1.18}
  .profile-panel{width:min(100%,135px)}
  .expertise-panel{padding-top:4px}
  .expertise-grid article{min-height:0;padding:5px 6px}
  .expertise-grid h3{font-size:.56rem;margin-bottom:2px}
  .expertise-grid p{font-size:.44rem;line-height:1.12}
}

@media(prefers-reduced-motion:reduce){
  .showcase-slide{transition:none}
  .partner-card{transition:none}
}