/* POWEREC UX-audit implementation pass.
   Scope: Eclipse-inspired footer motion, no red status/node glows,
   mobile Who We Are pin/fill behavior, and hero contrast hardening. */

/* HERO: keep the single redesigned proposition, but guarantee a consistently dark reading field. */
.hero-editorial .hero-bg{
  background-image:
    linear-gradient(90deg,rgba(3,7,11,.94) 0%,rgba(3,7,11,.84) 46%,rgba(3,7,11,.70) 72%,rgba(3,7,11,.58) 100%),
    linear-gradient(0deg,rgba(3,7,11,.78) 0%,rgba(3,7,11,.40) 54%,rgba(3,7,11,.18) 100%),
    url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2400&q=88')!important;
}
.hero-editorial h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.22)}
.hero-editorial .hero-copy{color:#f5f7fa!important}
.hero-editorial .hero-kicker,.hero-editorial .hero-scroll{color:#f4f7fa!important}

/* FOOTER: remove the SaaS/status visual language completely. */
.footer-eclipse .status-dot,
.footer-eclipse .field-node{display:none!important;animation:none!important;box-shadow:none!important}
.footer-command-status{gap:0!important}

/* Keep the engineering field, but make every line continuous across the clipped field. */
.footer-engineering-field{overflow:hidden!important}
.footer-engineering-field .field-line{
  display:block!important;
  width:124vw!important;
  height:1px!important;
  left:-12vw!important;
  right:auto!important;
  opacity:.22!important;
  background:linear-gradient(90deg,transparent 0%,rgba(23,61,104,.54) 10%,rgba(23,61,104,.54) 90%,transparent 100%)!important;
  transform-origin:center center!important;
}
.footer-engineering-field .field-line.l1{top:112px!important;transform:rotate(8deg)!important}
.footer-engineering-field .field-line.l2{top:202px!important;transform:rotate(-7deg)!important}
.footer-engineering-field .field-line.l3{top:316px!important;transform:rotate(-4deg)!important}
.footer-engineering-field .field-line.l4{top:402px!important;transform:rotate(9deg)!important}

/* Eclipse-inspired kinetic end-state: one seamless oversized typographic belt. */
.footer-kinetic-word{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:clamp(145px,19vw,300px)!important;
  overflow:hidden!important;
  contain:paint;
}
.footer-kinetic-word>.footer-kinetic-track{
  display:flex!important;
  align-items:center!important;
  flex:none!important;
  width:max-content!important;
  will-change:transform;
  animation:powerecEclipseMarquee 24s linear infinite!important;
}
.footer-kinetic-word>.footer-kinetic-track>span{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  display:block!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  transform:none!important;
  animation:none!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(8.5rem,22vw,23rem)!important;
  font-weight:600!important;
  letter-spacing:-.08em!important;
  line-height:.72!important;
  padding-right:.12em!important;
  color:transparent!important;
  -webkit-text-stroke:1px rgba(17,52,88,.32)!important;
}
@keyframes powerecEclipseMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* The later mobile-only Who We Are pinning override was removed.
   The section now uses the original shared scroll-fill behavior in app.js. */
@media(max-width:780px){
  .footer-kinetic-word{height:150px!important}
  .footer-kinetic-word>.footer-kinetic-track>span{font-size:9.2rem!important}
}

@media(prefers-reduced-motion:reduce){
  .footer-kinetic-word>.footer-kinetic-track{animation:none!important;transform:none!important}
  .footer-kinetic-word>.footer-kinetic-track>span:nth-child(n+2){display:none!important}
  .hero-editorial .hero-bg{animation:none!important;transform:none!important}
}