/*
 * THE SPARK MEP — BIM-only visual finish (v3)
 * Applied to /bim-coordination/ only. Other domains, owner access and BOQ stay frozen.
 * Keep people, hard-hat/vest logos, engineering annotation and drawings UNMIRRORED.
 */
body.sp-bim-page .nextRef{background:#edf5f8}
body.sp-bim-page .nHeroFounder{
  min-height:570px;
  padding-block:76px 92px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#041a27!important;
  background-image:radial-gradient(ellipse at 72% 32%,#134158 0%,#082936 40%,#041a27 82%)!important;
}
body.sp-bim-page .nHeroFounder:before,
body.sp-bim-page .nHeroFounder:after{display:none!important}
body.sp-bim-page .nHeroFounder .nCopy{
  position:relative;
  z-index:6;
  width:45%;
  max-width:570px;
  padding:16px 0;
}
body.sp-bim-page .nHeroFounder .nCopy h1{
  letter-spacing:-1.2px;
  font-size:clamp(39px,4.35vw,63px);
  line-height:1.12;
  text-shadow:0 4px 22px rgba(0,10,18,.55);
}
body.sp-bim-page .nHeroFounder .nCopy p{
  max-width:520px;
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.7;
  color:#e5f3f7;
}
body.sp-bim-page .nHeroFounder .nPills span{
  background:rgba(9,59,76,.82);
  border-color:rgba(98,221,245,.52);
}
body.sp-bim-page .bimHeroArtwork{
  position:absolute;
  z-index:1;
  right:1.9%;
  left:auto;
  top:42px;
  bottom:42px;
  width:58%;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(117,226,245,.62);
  border-radius:18px;
  box-shadow:0 26px 70px rgba(0,11,20,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  background:#0e3548;
}
body.sp-bim-page .bimHeroArtwork img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  filter:brightness(1.47) contrast(1.08) saturate(1.17);
  transform:none!important;
}
body.sp-bim-page .bimHeroArtwork:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  z-index:2;
  width:54%;
  background:linear-gradient(90deg,rgba(5,25,39,.10),rgba(5,25,39,.22)),url('/assets/visuals/3d-coordination-premium.svg') center/cover no-repeat;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.65) 60%,transparent 100%);
  pointer-events:none;
}
body.sp-bim-page .bimHeroArtwork:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(90deg,rgba(3,22,33,.18),transparent 46%,rgba(3,22,33,.12));
  pointer-events:none;
}
body.sp-bim-page .bimHeroArtwork .bimArtworkLabel{
  position:absolute;
  z-index:4;
  left:22px;
  bottom:18px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  padding:10px 14px;
  border-radius:7px;
  border:1px solid rgba(138,231,246,.5);
  color:#e5faff;
  background:rgba(2,29,44,.82);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
/* A controlled photographic fade starts behind the copy; never hide the founder's
   face, model screen or vest behind a full black overlay. */
body.sp-bim-page .nHeroFounder .bimHeroVeil{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#041a27 0%,rgba(4,26,39,.98) 28%,rgba(4,26,39,.76) 42%,rgba(4,26,39,.08) 63%,transparent 82%);
}

/* Engineering clash review: text + image are two actual, independently legible panes.
   The historic full-card image had dark unused portions underneath heavy overlays. */
body.sp-bim-page .nFeatureFounder{
  max-width:1180px;
  margin:30px auto 24px;
  min-height:445px;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,43%) minmax(0,57%);
  background:#0c3243!important;
  background-image:none!important;
  border:1px solid #a1cdd9;
  box-shadow:0 20px 48px rgba(7,40,55,.13);
}
body.sp-bim-page .nFeatureFounder>div:first-child{
  background:
    radial-gradient(circle at 7% 12%,rgba(44,181,217,.24),transparent 42%),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(109,201,226,.045) 48px 49px),
    linear-gradient(135deg,#0a3445,#0c2a3a);
  padding:48px 39px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
body.sp-bim-page .nFeatureFounder h2{
  line-height:1.15;
  max-width:450px;
  font-size:clamp(30px,2.8vw,40px);
}
body.sp-bim-page .nFeatureFounder p{font-size:14px;line-height:1.65;color:#d2e9f0}
body.sp-bim-page .nFeatureFounder .nSteps{
  width:100%;
  max-width:370px;
  margin-top:20px;
}
body.sp-bim-page .nFeatureFounder .nSteps span{
  background:rgba(30,105,132,.32);
  border-color:rgba(64,192,220,.3);
  border-radius:6px;
}
body.sp-bim-page .nFeatureFounder .nVisualFounder{
  position:relative;
  min-height:445px;
  overflow:hidden;
  isolation:isolate;
  background:#0b293a!important;
  pointer-events:auto;
}
body.sp-bim-page .nFeatureFounder .nVisualFounder:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url('/assets/visuals/bim-conflict-founder.webp') right center/cover no-repeat;
  filter:brightness(1.43) contrast(1.06) saturate(1.17);
}
body.sp-bim-page .nFeatureFounder .nVisualFounder:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,transparent 58%,rgba(2,18,28,.64));
  pointer-events:none;
}
body.sp-bim-page .nFeatureFounder .nVisualFounder b{
  z-index:2;
  color:#eefbff;
  left:20px;
  right:20px;
  bottom:22px;
  width:max-content;
  max-width:calc(100% - 40px);
  border-radius:5px;
  padding:11px 14px;
  background:rgba(3,33,47,.8);
  border:1px solid rgba(144,233,247,.46);
  font-size:11px;
  line-height:1.5;
}

/* Visually rich model cards: reveal the bright routing and actual clash
   points from the approved source images, instead of darkening the entire card. */
body.sp-bim-page .nPairRef{
  max-width:1180px;
  gap:22px;
  margin:0 auto 34px;
}
body.sp-bim-page .nPairRef article{
  min-height:365px;
  height:365px;
  border-radius:16px;
  background:#092939!important;
  background-image:none!important;
  border:1px solid rgba(65,182,211,.5);
  box-shadow:0 18px 43px rgba(5,42,57,.15);
  overflow:hidden;
}
body.sp-bim-page .nPairRef article:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  filter:brightness(1.38) contrast(1.09) saturate(1.24);
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat;
}
body.sp-bim-page .nPairRef .nPairIntegrated:before{background-image:url('/assets/visuals/bim-integrated-mep.webp')}
body.sp-bim-page .nPairRef .nPairCoordination:before{background-image:url('/assets/visuals/bim-3d-coordination.webp')}
body.sp-bim-page .nPairRef article:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  width:auto;height:auto;left:0;top:0;
  border-radius:0;
  box-shadow:none;
  background:
    linear-gradient(180deg,rgba(3,22,33,.86),rgba(3,22,33,.20) 35%,transparent 62%,rgba(3,22,33,.10) 100%);
  pointer-events:none;
}
body.sp-bim-page .nPairRef .nPairCopy{
  z-index:3;
  top:23px;
  left:23px;
  right:23px;
}
body.sp-bim-page .nPairRef .nPairCopy b{
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.32;
  max-width:390px;
  text-shadow:0 2px 16px rgba(1,18,29,.95);
}

/* Light, legible deliverables section prevents a featureless dark-scroll feeling. */
body.sp-bim-page .nDeliver{
  max-width:none;
  margin:0;
  padding:52px max(20px,calc((100vw - 1180px)/2)) 68px;
  background:
    radial-gradient(circle at 95% 7%,rgba(47,175,210,.13),transparent 35%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(49,126,150,.055) 80px 81px),
    #edf6f9;
}
body.sp-bim-page .nDeliver>small{font-size:12px;font-weight:950}
body.sp-bim-page .nDeliver h2{
  max-width:900px;
  font-size:clamp(30px,3vw,42px);
  line-height:1.19;
  margin:12px 0 26px;
  color:#0a2b3a;
}
body.sp-bim-page .nDeliver .nCards{
  max-width:1180px;
  gap:15px;
  margin:0 auto;
}
body.sp-bim-page .nCards article{
  position:relative;
  border:1px solid #c3dce4;
  border-top:4px solid #16a9d1;
  min-height:215px;
  padding:24px 21px;
  background:linear-gradient(155deg,#fff,#f3fbfd);
  box-shadow:0 13px 27px rgba(5,44,61,.075);
  transition:transform .15s ease,box-shadow .15s ease;
}
body.sp-bim-page .nCards article:nth-child(2){border-top-color:#e89f42}
body.sp-bim-page .nCards article:nth-child(3){border-top-color:#31b8a8}
body.sp-bim-page .nCards article:nth-child(4){border-top-color:#5873d1}
body.sp-bim-page .nCards article i{font-weight:950;font-size:13px;color:#008bb0}
body.sp-bim-page .nCards article b{color:#173d4b;font-size:13px;line-height:1.35}
body.sp-bim-page .nCards article p{font-size:12px;line-height:1.72;color:#506d79}

/* Closing CTA has a recognizable BIM model, not an empty black rectangle. */
body.sp-bim-page .nClose{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:200px;
  gap:28px;
  background:
    linear-gradient(90deg,#063047 0%,rgba(6,48,71,.95) 40%,rgba(6,48,71,.54) 67%,rgba(6,48,71,.26) 100%),
    url('/assets/visuals/3d-coordination-premium.svg') right center/auto 185% no-repeat,
    #063047;
  border-top:3px solid #1fb2d9;
}
body.sp-bim-page .nClose>div,body.sp-bim-page .nClose>.nBtn{position:relative;z-index:2}
body.sp-bim-page .nClose h2{font-size:clamp(25px,2.5vw,37px);line-height:1.17;max-width:650px}
body.sp-bim-page .nClose .nBtn{flex:0 0 auto;background:#17bee9;color:#061c29;font-weight:950}
body.sp-bim-page .nBtn:focus-visible{outline:3px solid #fafcfd;outline-offset:4px}

/* True Arabic composition: copy is right, engineering photograph visible left.
   Critically, only CSS layout changes: NO mirrored people, logos or issue labels. */
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder{
  direction:rtl;
  background-image:radial-gradient(ellipse at 72% 32%,#134158 0%,#082936 40%,#041a27 82%)!important;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder:before,
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder:after{display:none!important}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .nCopy{
  width:44%!important;
  max-width:540px!important;
  margin-left:0;
  margin-right:0;
  text-align:right;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .nCopy h1{font-size:clamp(37px,4.15vw,61px);line-height:1.33!important}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .bimHeroArtwork{right:auto;left:1.9%;width:58%}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .bimHeroVeil{
  background:linear-gradient(270deg,#041a27 0%,rgba(4,26,39,.98) 28%,rgba(4,26,39,.83) 41%,rgba(4,26,39,.14) 58%,transparent 74%);
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .bimHeroArtwork .bimArtworkLabel{
  left:18px;right:auto;direction:ltr
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nFeatureFounder{direction:rtl;grid-template-columns:minmax(0,43%) minmax(0,57%)}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nFeatureFounder>div:first-child{direction:rtl;align-items:flex-start;text-align:right}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nFeatureFounder .nVisualFounder:before{background-position:right center}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nFeatureFounder .nVisualFounder b{right:20px;left:auto;text-align:right}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nPairRef .nPairCopy{text-align:right;direction:rtl}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nPairRef .nPairCopy b{margin-left:0;margin-right:0}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nDeliver{text-align:right;direction:rtl}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nClose{direction:rtl;flex-direction:row}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nClose{
  background:
    linear-gradient(270deg,#063047 0%,rgba(6,48,71,.95) 39%,rgba(6,48,71,.54) 72%,rgba(6,48,71,.25) 100%),
    url('/assets/visuals/3d-coordination-premium.svg') left center/auto 185% no-repeat,#063047
}
/* Accessible compact composition: complete headline and CTA above the visual. */
@media(max-width:900px){
  body.sp-bim-page .nHeroFounder{
    min-height:710px;
    padding:36px 22px 320px;
    align-items:flex-start;
    background-image:linear-gradient(180deg,#062738,#031923)!important;
  }
  body.sp-bim-page .nHeroFounder .nCopy,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .nCopy{
    width:100%!important;
    max-width:100%!important;
    margin:0;
    padding:0;
  }
  body.sp-bim-page .nHeroFounder .nCopy h1,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .nCopy h1{
    font-size:clamp(29px,7vw,44px);
    line-height:1.27!important;
  }
  body.sp-bim-page .nHeroFounder .nCopy p{font-size:13px;line-height:1.55}
  body.sp-bim-page .nHeroFounder .nPills{margin:15px 0;gap:6px}
  body.sp-bim-page .nHeroFounder .nPills span{font-size:8px;padding:7px 10px}
  body.sp-bim-page .bimHeroArtwork,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .bimHeroArtwork{
    left:14px;right:14px;top:auto;bottom:15px;width:auto;height:285px;border-radius:12px;
  }
  body.sp-bim-page .nHeroFounder .bimHeroVeil,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .bimHeroVeil{
    background:linear-gradient(180deg,#062738 0%,rgba(6,39,56,.94) 39%,rgba(6,39,56,.06) 59%,transparent 100%);
  }
  body.sp-bim-page .nFeatureFounder,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nFeatureFounder{
    direction:inherit;
    grid-template-columns:minmax(0,1fr)!important;
    margin:20px 12px;
    min-height:0;
    border-radius:13px;
  }
  body.sp-bim-page .nFeatureFounder>div:first-child{
    width:100%!important;max-width:100%!important;padding:27px 24px;min-height:310px;
  }
  body.sp-bim-page .nFeatureFounder .nVisualFounder{
    display:block!important;
    width:100%;
    min-height:300px;
    height:300px;
  }
  body.sp-bim-page .nFeatureFounder h2{font-size:clamp(28px,7vw,36px);line-height:1.26!important}
  body.sp-bim-page .nPairRef{margin:0 12px 24px;grid-template-columns:minmax(0,1fr);gap:14px}
  body.sp-bim-page .nPairRef article{height:300px;min-height:300px;border-radius:12px}
  body.sp-bim-page .nDeliver{padding:38px 20px 45px}
  body.sp-bim-page .nDeliver .nCards{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sp-bim-page .nClose{padding:30px 22px;min-height:200px}
}
@media(max-width:560px){
  body.sp-bim-page .nHeroFounder{
    min-height:760px;
    padding:29px 20px 316px;
  }
  body.sp-bim-page .nHeroFounder .nCopy h1,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder .nCopy h1{
    font-size:clamp(29px,7.3vw,39px)!important;
    line-height:1.28!important;
  }
  body.sp-bim-page .bimHeroArtwork,
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .bimHeroArtwork{
    height:286px;bottom:14px;left:11px;right:11px;
  }
  body.sp-bim-page .bimHeroArtwork .bimArtworkLabel{
    padding:8px 10px;bottom:11px;left:11px;font-size:8px;
  }
  body.sp-bim-page .nFeatureFounder{margin:14px 10px}
  body.sp-bim-page .nFeatureFounder>div:first-child{padding:25px 22px}
  body.sp-bim-page .nFeatureFounder .nVisualFounder{height:260px;min-height:260px}
  body.sp-bim-page .nPairRef{margin:0 10px 24px}
  body.sp-bim-page .nPairRef article{height:268px;min-height:268px}
  body.sp-bim-page .nDeliver .nCards{grid-template-columns:minmax(0,1fr)}
  body.sp-bim-page .nDeliver h2{font-size:29px}
  body.sp-bim-page .nClose,html[lang="ar"] body.sp-bim-page.sp-public-v2 .nClose{display:flex;flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){body.sp-bim-page .nCards article{transition:none}}


/* Override the older Arabic-art gradient pseudo-layer only on BIM model cards.
   Otherwise its high-specificity legacy rule displaces the newly revealed photos. */
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nPairRef .nPairIntegrated:before{
  background:url('/assets/visuals/bim-integrated-mep.webp') right center/cover no-repeat!important;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nPairRef .nPairCoordination:before{
  background:url('/assets/visuals/bim-3d-coordination.webp') right center/cover no-repeat!important;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nPairRef article:after{
  background:linear-gradient(180deg,rgba(3,22,33,.85),rgba(3,22,33,.2) 35%,transparent 62%,rgba(3,22,33,.1) 100%)!important;
}


/*
 * Critical Arabic hero readability hotfix, 2026-10-08.
 * The shared late-injected arabic-art-direction.css assigned .nCopy z-index:2,
 * while BIM v3's veil was z-index:3, concealing RTL typography. Protect the
 * actual reading layer explicitly, not just its background or text-shadow.
 */
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy {
  position:relative!important;
  z-index:10!important;
  color:#f8fdff!important;
  opacity:1!important;
  visibility:visible!important;
  text-align:right;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy h1 {
  color:#ffffff!important;
  opacity:1!important;
  -webkit-text-fill-color:#ffffff!important;
  filter:none!important;
  text-shadow:0 3px 18px rgba(0,9,17,.7)!important;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy p {
  color:#e9f5fa!important;
  opacity:1!important;
  -webkit-text-fill-color:#e9f5fa!important;
  font-weight:500;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy small {
  color:#7de9ff!important;
  -webkit-text-fill-color:#7de9ff!important;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy .nPills {
  position:relative;
  z-index:11;
  opacity:1;
}
html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .bimHeroVeil {
  z-index:3!important;
  pointer-events:none!important;
}
/* Preserve clear and legible Arabic text at every breakpoint, including desktop-
   requested tabs displayed on narrow physical phone screens. */
@media(max-width:900px){
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy {
    padding-block:8px 6px!important;
  }
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy h1{
    font-size:clamp(29px,7.4vw,46px)!important;
    line-height:1.35!important;
    overflow-wrap:break-word;
  }
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy p{
    font-size:clamp(14px,3.5vw,17px)!important;
    line-height:1.72!important;
  }
  html[lang="ar"] body.sp-bim-page.sp-public-v2 .nHeroFounder > .nCopy .nPills span{
    font-size:clamp(10px,2.6vw,12px)!important;
  }
}