/* Stable, self-contained crane menu. Intentionally isolated from older experimental crane styles. */
.stable-menu{
  position:sticky;
  top:0;
  z-index:70;
  min-height:188px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:end;
  column-gap:22px;
  padding:0 28px 18px;
  overflow:hidden;
  background:#030303;
  border-bottom:1px solid rgba(212,174,90,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  isolation:isolate;
}
.stable-menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 50% -8%,rgba(212,174,90,.08),transparent 44%),
    linear-gradient(180deg,#070707 0%,#020202 68%,#030303 100%);
}
.stable-menu::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:54px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,174,90,.18),transparent);
  pointer-events:none;
}
.stable-crane-stage{
  position:absolute;
  left:50%;
  top:4px;
  width:min(1500px,94vw);
  height:126px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.stable-grid{
  position:absolute;
  inset:0;
  opacity:.32;
  background:
    repeating-linear-gradient(90deg,rgba(232,238,243,.06) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(232,238,243,.05) 0 1px,transparent 1px 15px);
  mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}
.stable-crane-model{
  position:absolute;
  inset:4px 0 auto 0;
  width:100%;
  height:116px;
  object-fit:fill;
  opacity:.94;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.6));
  transform:translateZ(0);
  animation:stableModelBreath 8s ease-in-out infinite;
}
/* Cover only the original fixed hoist from the raster; the moving sprite sits above it. */
.stable-static-mask{
  position:absolute;
  left:68.7%;
  top:45px;
  width:12.8%;
  height:72px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,#030303 0 42%,rgba(3,3,3,.97) 58%,rgba(3,3,3,.72) 72%,transparent 100%);
  filter:blur(5px);
  z-index:1;
}
.stable-menu-hoist{
  --hx:12.5%;
  --hy:52px;
  --hs:.86;
  position:absolute;
  left:var(--hx);
  top:var(--hy);
  width:104px;
  height:72px;
  object-fit:fill;
  transform:translate(-50%,-50%) scale(var(--hs));
  transform-origin:center;
  z-index:3;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));
  transition:
    left .82s cubic-bezier(.22,.8,.2,1),
    top .82s cubic-bezier(.22,.8,.2,1),
    transform .5s ease;
  animation:stableHoistIdle 2.8s ease-in-out infinite;
}
.stable-axis,.stable-tech-label{
  position:absolute;
  z-index:2;
  font-size:7px;
  letter-spacing:.18em;
  color:rgba(210,220,227,.42);
  text-transform:uppercase;
  user-select:none;
}
.stable-axis-x{left:4%;top:96px;color:rgba(212,174,90,.58)}
.stable-axis-y{left:5.1%;top:82px;color:rgba(220,225,230,.5)}
.label-a{right:4%;top:10px}
.label-b{right:12%;top:105px;color:rgba(212,174,90,.46)}

.stable-menu .brand-text,
.stable-menu .nav,
.stable-menu .header-cta,
.stable-menu .menu-toggle{
  position:relative;
  z-index:5;
}
.stable-menu .brand-text{
  align-self:end;
  margin-bottom:1px;
  font-size:1.45rem;
}
.stable-menu .nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-width:0;
  padding:0;
}
.stable-menu .nav a{
  position:relative;
  flex:0 0 auto;
  padding:9px 10px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.035);
  background:rgba(3,3,3,.58);
  backdrop-filter:blur(8px);
  color:rgba(239,233,221,.84);
  font-size:.86rem;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;
}
.stable-menu .nav a::before{
  content:"";
  position:absolute;
  left:50%;top:-12px;
  width:1px;height:9px;
  background:rgba(212,174,90,.35);
}
.stable-menu .nav a::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:3px;
  height:1px;
  background:var(--gold,#d4ae5a);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.stable-menu .nav a:hover,
.stable-menu .nav a.is-active{
  color:#fff0cc;
  border-color:rgba(212,174,90,.23);
  background:rgba(212,174,90,.075);
  transform:translateY(-1px);
}
.stable-menu .nav a:hover::after,
.stable-menu .nav a.is-active::after{transform:scaleX(1)}
.stable-menu .header-cta{
  align-self:end;
  padding:11px 17px;
  margin-bottom:0;
  font-size:.9rem;
}
.stable-menu .menu-toggle{display:none;align-self:end}

@keyframes stableModelBreath{
  0%,100%{opacity:.9;transform:translateY(0)}
  50%{opacity:1;transform:translateY(1px)}
}
@keyframes stableHoistIdle{
  0%,100%{filter:drop-shadow(0 8px 12px rgba(0,0,0,.58))}
  50%{filter:drop-shadow(0 10px 16px rgba(0,0,0,.68))}
}

@media (max-width:1180px){
  .stable-menu{min-height:164px;padding:0 18px 16px;column-gap:14px}
  .stable-crane-stage{width:97vw;height:106px}
  .stable-crane-model{height:98px}
  .stable-static-mask{top:38px;height:62px}
  .stable-menu-hoist{width:88px;height:61px}
  .stable-menu .nav{gap:10px}
  .stable-menu .nav a{font-size:.76rem;padding:8px 7px}
  .stable-menu .brand-text{font-size:1.25rem}
  .stable-menu .header-cta{font-size:.8rem;padding:10px 13px}
}

@media (max-width:860px){
  .stable-menu{
    min-height:66px;
    height:auto;
    overflow:visible;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    padding:12px 16px;
    background:#050505;
  }
  .stable-menu::after,.stable-crane-stage{display:none}
  .stable-menu .brand-text{align-self:center;margin:0}
  .stable-menu .header-cta{display:none}
  .stable-menu .menu-toggle{display:block;justify-self:end;align-self:center}
  .stable-menu .nav{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    padding:14px 16px 18px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    background:rgba(5,5,5,.97);
    border-bottom:1px solid rgba(212,174,90,.14);
    box-shadow:0 18px 34px rgba(0,0,0,.42);
  }
  .stable-menu .nav.open{display:flex}
  .stable-menu .nav a{font-size:.9rem;padding:12px 14px}
  .stable-menu .nav a::before{display:none}
}