/* Premium service visual panels */
.feature-panel.service-visual{
  min-height:540px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.feature-panel.service-visual .service-video{
  display:block;
  width:100%;
  height:100%;
  min-height:540px;
  object-fit:cover;
  opacity:.96;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease, opacity .4s ease;
}
.feature-panel.service-visual::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,13,20,.05) 0%,rgba(4,13,20,.06) 48%,rgba(4,13,20,.52) 100%);
}
.feature-panel.service-visual span{z-index:2;position:absolute;left:28px;bottom:24px;
  padding:9px 12px;border:1px solid rgba(247,183,25,.35);background:rgba(3,13,18,.70);
  backdrop-filter:blur(8px);font-size:11px;letter-spacing:.2em;color:#fff;font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

@media (max-width:900px){.feature-panel.service-visual,.feature-panel.service-visual .service-video{min-height:340px}.feature-panel.service-visual span{left:20px;bottom:18px}}

/* ==========================================================
   SERVICE VISUALS — NORMAL BY DEFAULT, SELECTED ON CLICK
   ========================================================== */
.feature-panel.service-visual{
  cursor:pointer;
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease,
    background .28s ease;
  outline:none;
}

.feature-panel.service-visual::before{
  transition:
    inset .28s ease,
    border-color .28s ease,
    opacity .28s ease;
}

.feature-panel.service-visual::after{
  transition:
    opacity .28s ease,
    width .28s ease;
}

.feature-panel.service-visual .service-video{
  transform:scale(1);
  filter:saturate(.92) brightness(.92);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .35s ease,
    opacity .35s ease;
}

.feature-panel.service-visual > span{
  transition:
    color .28s ease,
    border-color .28s ease,
    background .28s ease,
    text-shadow .28s ease;
}

/* Selected state: one service at a time. No service is selected on page load. */
.feature-panel.service-visual.is-selected{
  border-color:rgba(247,183,25,.82)!important;
  box-shadow:
    inset 0 0 110px rgba(247,183,25,.13),
    0 24px 70px rgba(8,31,43,.20),
    0 0 0 1px rgba(247,183,25,.08)!important;
  transform:translateY(-3px);
}

.feature-panel.service-visual.is-selected::before{
  inset:15px;
  border-color:rgba(247,183,25,.28);
}

.feature-panel.service-visual.is-selected::after{
  width:320px;
  opacity:1;
}

.feature-panel.service-visual.is-selected .service-video{
  transform:scale(1.055);
  filter:saturate(1.08) brightness(1.04);
}

.feature-panel.service-visual.is-selected > span{
  color:#ffe08a;
  border-color:rgba(247,183,25,.64);
  background:rgba(3,13,18,.80);
  text-shadow:0 0 18px rgba(247,183,25,.20);
}

/* Keyboard users get the same visual affordance as selection */
.feature-panel.service-visual:focus-visible{
  border-color:rgba(247,183,25,.72)!important;
  box-shadow:
    0 0 0 3px rgba(247,183,25,.18),
    inset 0 0 90px rgba(247,183,25,.10)!important;
}

/* Keep non-selected panels visually calm even when another is active */
.feature-panel.service-visual:not(.is-selected) .service-video{
  opacity:.90;
}

/* Explicit neutral baseline: all six services look identical until selected. */
.feature-panel.service-visual:not(.is-selected){
  border-color:rgba(121,171,194,.28)!important;
  box-shadow:inset 0 0 70px rgba(43,118,151,.05),0 20px 55px rgba(0,0,0,.10)!important;
  transform:none;
}

.feature-panel.service-visual:not(.is-selected)::before{
  inset:22px;
  border-color:rgba(96,173,211,.16);
}

.feature-panel.service-visual:not(.is-selected)::after{
  width:240px;
  opacity:.65;
}

.feature-panel.service-visual:not(.is-selected) > span{
  color:#fff;
  border-color:rgba(247,183,25,.35);
  background:rgba(3,13,18,.70);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

.feature-panel.service-visual.is-selected:focus-visible{
  outline:2px solid rgba(247,183,25,.6);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .feature-panel.service-visual,
  .feature-panel.service-visual img,
  .feature-panel.service-visual::before,
  .feature-panel.service-visual::after,
  .feature-panel.service-visual > span{
    transition:none!important;
  }
}


/* Animated engineering service reels */
.feature-panel.service-visual .service-video{
  object-fit:cover;
  width:100%;
  height:100%;
  min-height:540px;
  background:#06131c;
  border:0;
  pointer-events:none;
  opacity:.96;
}
.feature-panel.service-visual .service-video::-webkit-media-controls{display:none!important}
.feature-panel.service-visual .service-video{
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease, opacity .35s ease;
}
@media (max-width:900px){
  .feature-panel.service-visual .service-video{min-height:340px}
}
@media (prefers-reduced-motion:reduce){
  .feature-panel.service-visual .service-video{animation:none!important;transition:none!important}
}