/* ==========================================================================
   GlobalScalar v39 — Card image clarity (full website)
   Loaded LAST on every page. Goals:
     1. Every card illustration is shown COMPLETE (no cropping, no zoom, no drift).
     2. Overlays (badge, scan line, frame) never sit on top of the artwork.
     3. Hotspot icons and captions are larger and higher-contrast.
   All illustrations in assets/img are 8:5 (800x500), so boxes use that exact ratio.
   ========================================================================== */

/* ---------- 1. Technology banners (Technology 01 / 02 … on every page) ---------- */
html body .tech-card-visual,
html body[data-v20] .tech-card-visual,
html body[data-v20] .v20-tcard .tech-card-visual,
html body[data-v20] .tech-detail-card .tech-card-visual{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  height:auto!important;
  min-height:0!important;
  position:relative!important;
  overflow:hidden!important;
  background:#07170d!important;
  border-bottom:1px solid rgba(122,204,5,.35)!important;
}
/* the picture: natural 8:5 shape, fully visible */
html body .tech-card-visual>img,
html body[data-v20] .tech-card-visual>img{
  position:static!important;
  display:block!important;
  flex:none!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:8/5!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#07170d!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
}
/* decorative layers that covered or tinted the artwork */
html body .tech-card-visual::before,
html body .tech-card-visual::after,
html body .tech-visual-scan{display:none!important}

/* badge becomes a readable caption bar UNDER the picture */
html body .tech-card-visual .tech-visual-badge{
  position:static!important;
  display:block!important;
  align-self:stretch!important;
  margin:0!important;
  padding:9px 14px!important;
  border:0!important;
  border-top:1px solid rgba(122,204,5,.30)!important;
  border-radius:0!important;
  background:#0c2010!important;
  backdrop-filter:none!important;
  color:#c6f75a!important;
  font-size:.74rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}

/* ---------- 2. Interactive illustration tiles (.cvx) on every card ---------- */
html body .cvx .cvx-stage{aspect-ratio:8/5!important;height:auto!important;background:#07170d!important}
html body .cvx .cvx-stage>img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;
  transform:none!important;filter:none!important;animation:none!important;
}
/* hotspot icons: bigger, ringed, easy to see on the artwork (hit area ≈ 42px via the existing :before) */
html body .cvx .cvx-dot{
  width:24px!important;height:24px!important;
  margin:-12px 0 0 -12px!important;
  border:2.5px solid #d4ff6e!important;
  background:rgba(7,19,10,.78)!important;
  box-shadow:0 0 0 3px rgba(182,242,74,.22),0 2px 8px rgba(0,0,0,.55)!important;
}
html body .cvx .cvx-dot i{inset:6px!important;background:#d4ff6e!important}
html body .cvx .cvx-dot.on{background:#d4ff6e!important;box-shadow:0 0 0 5px rgba(212,255,110,.35),0 3px 10px rgba(0,0,0,.55)!important}
html body .cvx .cvx-dot.on i{background:#07170d!important}
/* captions: larger, higher contrast */
html body .cvx .cvx-cap{background:#0c2010!important;padding:12px 15px 14px!important;min-height:84px!important}
html body .cvx .cvx-cap b{color:#d4ff6e!important;font-size:.95rem!important;line-height:1.25!important;margin-bottom:4px!important}
html body .cvx .cvx-cap span{color:#f3f9ea!important;font-size:.9rem!important;line-height:1.5!important}

/* ---------- 3. Service images, photos and any other card picture ---------- */
html body .svc-img img,
html body .svc-img.cv-tilt:hover img,
html body .v20-photo:hover img{transform:none!important}
html body .svc-img img{width:100%!important;height:auto!important;aspect-ratio:8/5!important;object-fit:contain!important;background:#07170d}
/* training / staffing photos are 16:9 — give them a 16:9 frame so none is cut */
html body .v20-photo img{aspect-ratio:16/9!important;object-fit:contain!important;background:#07170d}

@media (prefers-reduced-motion:reduce){
  html body .tech-card-visual>img,html body .cvx .cvx-stage>img{animation:none!important}
}