/* TGN's actual light-top treatment, scoped to the Work page. */
.work-tgn-light-art,
#the-galactic-nexus .work-image-light {
  display: none;
}

html[data-theme="light"] body #selected-work-hero.work-page-hero {
  background: #f2f7f5 !important;
}

html[data-theme="light"] #selected-work-hero .work-tgn-light-art {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #edf4f3;
}

html[data-theme="light"] #selected-work-hero .work-tgn-light-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 48%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html[data-theme="light"] #selected-work-hero .work-tgn-light-foundation {
  opacity: 0.7;
  filter: invert(0.9) hue-rotate(164deg) saturate(0.72) contrast(0.82) brightness(1.12);
}

/* Restore the laptop's glass, metal, and natural shadows after inversion. */
html[data-theme="light"] #selected-work-hero .work-tgn-light-device {
  opacity: 0.9;
  filter: saturate(0.84) contrast(1.18) brightness(1.02);
  -webkit-mask-image: radial-gradient(ellipse 31% 39% at 78% 62%, #000 0 52%, rgba(0,0,0,.94) 61%, rgba(0,0,0,.56) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 31% 39% at 78% 62%, #000 0 52%, rgba(0,0,0,.94) 61%, rgba(0,0,0,.56) 75%, transparent 100%);
}

html[data-theme="light"] #selected-work-hero .work-tgn-light-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #fbfcf8 0%, rgba(249,251,248,.98) 32%, rgba(244,249,247,.93) 49%, rgba(239,247,246,.25) 68%, rgba(235,244,244,.04) 100%),
    linear-gradient(0deg, rgba(239,246,245,.9), transparent 25%);
}

html[data-theme="light"] #the-galactic-nexus .work-image-dark {
  display: none;
}

html[data-theme="light"] #the-galactic-nexus .work-image-light {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1265 / 712;
  object-fit: contain;
  opacity: 1;
  filter: none !important;
}

html[data-theme="light"] #the-galactic-nexus .case-study-media {
  background: #f2f7f5;
  aspect-ratio: 1265 / 712;
}

@media (max-width: 1100px) {
  html[data-theme="light"] #selected-work-hero .work-tgn-light-art::after {
    background:
      linear-gradient(90deg, #fbfcf8 0%, rgba(249,251,248,.98) 36%, rgba(244,249,247,.92) 56%, rgba(239,247,246,.08) 88%),
      linear-gradient(0deg, rgba(239,246,245,.94), transparent 40%);
  }
}

@media (max-width: 600px) {
  html[data-theme="light"] body #selected-work-hero.work-page-hero {
    padding-top: 208px;
    padding-bottom: 42px;
  }
  html[data-theme="light"] #selected-work-hero .work-tgn-light-art img {
    height: 300px;
    object-position: right center;
  }
  html[data-theme="light"] #selected-work-hero .work-tgn-light-art::after {
    background: linear-gradient(0deg, #f2f7f5 0%, #f2f7f5 calc(100% - 220px), rgba(242,247,245,.12) 100%);
  }
}