/* EngiTools service cards — approved clean split layout. */
:root{
  --et-art-mechanical:url('https://res.cloudinary.com/pnuzoh4o/image/upload/v1787475602/engitools/mechanical-hero-20260823-final.webp');
  --et-art-electrical:url('/static/service-art-electrical.svg?v=20260902');
  --et-art-architect:url('/static/service-art-architect.svg?v=20260902');
}

/* Desktop: exactly two clean panels, image LEFT / copy RIGHT. */
.service-stack-section .service-cta{
  position:absolute!important;
  isolation:isolate!important;
  overflow:hidden!important;
  padding:0!important;
  background:#f7f7f5!important;
  color:#0a0a0a!important;
  border:1px solid rgba(10,10,10,.14)!important;
  border-radius:28px!important;
}
.service-stack-section .service-cta::before{display:none!important;content:none!important}
.service-stack-section .service-cta::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:56%!important;
  height:100%!important;
  z-index:1!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  background-color:#07090b!important;
  opacity:1!important;
  filter:grayscale(1) contrast(1.06)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  border:0!important;
  border-right:1px solid rgba(10,10,10,.14)!important;
  border-radius:27px 0 0 27px!important;
  transform:none!important;
}
.service-stack-section .service-card-1::after{background-image:var(--et-art-mechanical)}
.service-stack-section .service-card-dark::after{background-image:var(--et-art-electrical)}
.service-stack-section .service-card-muted::after{background-image:var(--et-art-architect)}
.service-stack-section .service-card-1,
.service-stack-section .service-card-dark{background:#f7f7f5!important;color:#0a0a0a!important}
.service-stack-section .service-card-1 *,
.service-stack-section .service-card-dark *{color:#0a0a0a!important}
.service-stack-section .service-cta .companion-icon{display:none!important}

.service-stack-section .service-cta .cta-top{
  position:absolute!important;
  z-index:4!important;
  top:clamp(34px,4vw,58px)!important;
  right:clamp(34px,4vw,64px)!important;
  left:auto!important;
  width:35%!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:0!important;
  transform:none!important;
}
.service-stack-section .service-cta .service-code{
  display:inline-flex!important;
  align-items:center!important;
  padding:9px 15px!important;
  border:1px solid currentColor!important;
  border-radius:999px!important;
  opacity:.62!important;
  letter-spacing:.16em!important;
  font-size:11px!important;
}
.service-stack-section .service-cta .cta-body{
  position:absolute!important;
  z-index:4!important;
  right:clamp(34px,4vw,64px)!important;
  left:auto!important;
  top:49%!important;
  transform:translateY(-50%)!important;
  width:35%!important;
  max-width:520px!important;
  margin:0!important;
  padding:0!important;
  text-align:right!important;
  direction:rtl!important;
}
.service-stack-section .service-cta .cta-body h3{
  color:#050505!important;
  font-size:clamp(48px,5vw,82px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  margin:0 0 26px!important;
}
.service-stack-section .service-cta .cta-body p{
  color:#575757!important;
  max-width:100%!important;
  font-size:clamp(15px,1.2vw,20px)!important;
  line-height:2!important;
  margin:0!important;
}
.service-stack-section .service-cta .cta-link{
  position:absolute!important;
  z-index:4!important;
  right:clamp(34px,4vw,64px)!important;
  left:auto!important;
  bottom:clamp(34px,4vw,58px)!important;
  width:35%!important;
  min-width:0!important;
  margin:0!important;
  padding-top:28px!important;
  border-top:1px solid rgba(10,10,10,.35)!important;
  justify-self:auto!important;
  direction:rtl!important;
  color:#0a0a0a!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.service-stack-section .service-cta .cta-link .arrow,
.service-stack-section .service-cta .cta-link .cta-arrow{
  background:#050505!important;
  color:#fff!important;
}

/* Discipline landing heroes reuse the same monochrome discipline art. */
.discipline-page.mechanical .discipline-visual,
.discipline-page.electrical .discipline-visual{
  position:relative;
  min-height:clamp(420px,56vw,680px)!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background-color:#090b0e!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  box-shadow:0 28px 70px rgba(0,0,0,.16)!important;
  filter:grayscale(1);
}
.discipline-page.mechanical .discipline-visual{background-image:var(--et-art-mechanical)!important}
.discipline-page.electrical .discipline-visual{background-image:var(--et-art-electrical)!important}
.discipline-page .discipline-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(0,0,0,.03),rgba(0,0,0,.18))}
.discipline-page .discipline-visual .visual-symbol,
.discipline-page .discipline-visual>span{display:none!important}

@media(max-width:900px){
  .service-stack-section .service-cta::after{
    left:0!important;right:auto!important;top:0!important;bottom:auto!important;
    width:100%!important;height:48%!important;
    background-position:center center!important;
    border-right:0!important;border-bottom:1px solid rgba(10,10,10,.14)!important;
    border-radius:27px 27px 0 0!important;
  }
  .service-stack-section .service-cta .cta-top{top:calc(48% + 22px)!important;right:24px!important;width:calc(100% - 48px)!important}
  .service-stack-section .service-cta .cta-body{top:68%!important;right:24px!important;width:calc(100% - 48px)!important;max-width:none!important}
  .service-stack-section .service-cta .cta-link{right:24px!important;bottom:24px!important;width:calc(100% - 48px)!important}
  .discipline-page.mechanical .discipline-visual,.discipline-page.electrical .discipline-visual{min-height:420px!important}
}
@media(max-width:640px){
  .service-stack-section .service-cta::after{height:42%!important}
  .service-stack-section .service-cta .cta-top{top:calc(42% + 18px)!important}
  .service-stack-section .service-cta .cta-body{top:64%!important}
  .service-stack-section .service-cta .cta-body h3{font-size:clamp(40px,12vw,62px)!important}
  .discipline-page.mechanical .discipline-visual,.discipline-page.electrical .discipline-visual{min-height:330px!important}
}

/* Native artwork layer: preserve the full 16:9 frame; never crop the approved artwork. */
.service-stack-section .service-cta::after{display:none!important;content:none!important}
.service-stack-section .service-stack-art{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:56%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:grayscale(1) contrast(1.04)!important;
  border-right:1px solid rgba(10,10,10,.14)!important;
  border-radius:27px 0 0 27px!important;
  background:#07090b!important;
}
@media(max-width:900px){
  .service-stack-section .service-stack-art{
    width:100%!important;
    height:48%!important;
    top:0!important;
    bottom:auto!important;
    object-fit:contain!important;
    border-right:0!important;
    border-bottom:1px solid rgba(10,10,10,.14)!important;
    border-radius:27px 27px 0 0!important;
    background:#07090b!important;
  }
}
@media(max-width:640px){
  .service-stack-section .service-stack-art{height:42%!important}
}


/* Unified light treatment for all three home service cards. */
html body .service-stack-section .service-cta,
html body .service-stack-section .service-card-1,
html body .service-stack-section .service-card-dark,
html body .service-stack-section .service-card-muted{
  background:#f7f7f5!important;
  color:#0a0a0a!important;
  border-color:rgba(10,10,10,.14)!important;
}
html body .service-stack-section .service-cta .cta-top,
html body .service-stack-section .service-cta .service-code,
html body .service-stack-section .service-cta .cta-body,
html body .service-stack-section .service-cta .cta-body h3,
html body .service-stack-section .service-cta .cta-body p,
html body .service-stack-section .service-cta .cta-link,
html body .service-stack-section .service-cta .cta-link span{
  color:#0a0a0a!important;
}
html body .service-stack-section .service-cta .cta-body p{
  color:#575757!important;
}
html body .service-stack-section .service-cta .service-code{
  border-color:rgba(10,10,10,.62)!important;
}
html body .service-stack-section .service-cta .cta-link{
  border-top-color:rgba(10,10,10,.35)!important;
}
html body .service-stack-section .service-cta .cta-arrow{
  background:#050505!important;
  color:#fff!important;
}

html body .service-stack-section .service-card-1 .service-code,
html body .service-stack-section .service-card-dark .service-code,
html body .service-stack-section .service-card-muted .service-code{color:#54544f!important;}


/* Match every interactive state to the approved first service card. */
html body .service-stack-section .service-cta:hover,
html body .service-stack-section .service-cta:focus-visible{
  background:#f7f7f5!important;
  color:#0a0a0a!important;
  border-color:rgba(10,10,10,.14)!important;
  box-shadow:none!important;
}
html body .service-stack-section .service-cta:hover .cta-top,
html body .service-stack-section .service-cta:focus-visible .cta-top,
html body .service-stack-section .service-cta:hover .cta-body,
html body .service-stack-section .service-cta:focus-visible .cta-body,
html body .service-stack-section .service-cta:hover .cta-body h3,
html body .service-stack-section .service-cta:focus-visible .cta-body h3,
html body .service-stack-section .service-cta:hover .cta-link,
html body .service-stack-section .service-cta:focus-visible .cta-link,
html body .service-stack-section .service-cta:hover .cta-link span,
html body .service-stack-section .service-cta:focus-visible .cta-link span{
  color:#0a0a0a!important;
}
html body .service-stack-section .service-cta:hover .cta-body p,
html body .service-stack-section .service-cta:focus-visible .cta-body p{
  color:#575757!important;
}
html body .service-stack-section .service-cta:hover .service-code,
html body .service-stack-section .service-cta:focus-visible .service-code{
  color:#54544f!important;
  border-color:rgba(10,10,10,.62)!important;
}
html body .service-stack-section .service-cta:hover .cta-link,
html body .service-stack-section .service-cta:focus-visible .cta-link{
  border-top-color:rgba(10,10,10,.35)!important;
}
html body .service-stack-section .service-cta:hover .cta-arrow,
html body .service-stack-section .service-cta:focus-visible .cta-arrow{
  background:#050505!important;
  color:#fff!important;
}
html body .service-stack-section .service-cta:hover .service-stack-art,
html body .service-stack-section .service-cta:focus-visible .service-stack-art{
  opacity:1!important;
  filter:grayscale(1) contrast(1.04)!important;
}