.control-arm-page .sd-hero h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.control-arm-page .control-arm-hero-visual::after {
  background:
    radial-gradient(ellipse at 35% 70%, rgba(255,173,0,.13), transparent 23%),
    radial-gradient(ellipse at 77% 61%, rgba(255,173,0,.1), transparent 22%),
    linear-gradient(0deg, rgba(13,18,25,.2), transparent 38%);
}

.control-arm-page .control-arm-hero-car {
  left: -1%;
  right: -2%;
  bottom: 4%;
  aspect-ratio: 1672 / 941;
}

.control-arm-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  will-change: opacity, filter;
}

.control-arm-frame--base { z-index: 1; opacity: 1; }
.control-arm-frame--xray { z-index: 2; opacity: 0; }
.control-arm-frame--highlight { z-index: 3; opacity: 0; }

.control-arm-hero-visual.is-animating .control-arm-frame--base {
  animation: control-arm-base-cycle 10.5s ease-in-out infinite;
}

.control-arm-hero-visual.is-animating .control-arm-frame--xray {
  animation: control-arm-xray-cycle 10.5s ease-in-out infinite;
}

.control-arm-hero-visual.is-animating .control-arm-frame--highlight {
  animation: control-arm-highlight-cycle 10.5s ease-in-out infinite;
}

@keyframes control-arm-base-cycle {
  0%, 17% { opacity: 1; filter: brightness(1); }
  29%, 88% { opacity: .09; filter: grayscale(.55) brightness(.5); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes control-arm-xray-cycle {
  0%, 17% { opacity: 0; filter: none; }
  29%, 58% { opacity: 1; filter: saturate(.9) contrast(1.08) brightness(1.07) drop-shadow(0 0 14px rgba(242,13,22,.2)); }
  70%, 88% { opacity: .22; filter: grayscale(.88) brightness(.48); }
  100% { opacity: 0; filter: none; }
}

@keyframes control-arm-highlight-cycle {
  0%, 59% { opacity: 0; filter: none; }
  71%, 88% { opacity: 1; filter: saturate(1.35) brightness(1.3) drop-shadow(0 0 2px rgba(255,224,115,.95)) drop-shadow(0 0 19px rgba(255,164,0,.92)) drop-shadow(0 0 34px rgba(242,13,22,.48)); }
  100% { opacity: 0; filter: none; }
}

.control-arm-exploded .ed-stage {
  min-height: clamp(460px, 45vw, 660px);
}

.control-arm-exploded-scene {
  inset: clamp(34px, 3.4vw, 54px) clamp(14px, 2vw, 32px) clamp(38px, 3.6vw, 58px);
}

.control-arm-base-ghost,
.control-arm-xray-ghost,
.control-arm-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.control-arm-base-ghost {
  opacity: .12;
  filter: grayscale(.45) brightness(.62);
  transition: opacity .45s ease;
}

.control-arm-xray-ghost {
  opacity: .12;
  filter: grayscale(.82) brightness(.5);
  transition: opacity .45s ease, filter .45s ease;
}

.control-arm-layer {
  opacity: 0;
  filter: saturate(1.25) brightness(1.22) drop-shadow(0 0 2px rgba(255,225,120,.9)) drop-shadow(0 0 18px rgba(255,166,0,.76));
}

.control-arm-layer--front {
  z-index: 2;
  mask-image: radial-gradient(ellipse 20% 25% at 35% 69%, #000 48%, transparent 78%);
  mask-repeat: no-repeat;
  --ed-start-transform: translate3d(-9%, 5%, 0);
  transform-origin: 35% 69%;
  transition-delay: .08s;
}

.control-arm-layer--rear {
  z-index: 2;
  mask-image: radial-gradient(ellipse 22% 23% at 74% 55%, #000 48%, transparent 78%);
  mask-repeat: no-repeat;
  --ed-start-transform: translate3d(9%, 4%, 0);
  transform-origin: 74% 55%;
  transition-delay: .18s;
}

.control-arm-exploded.is-ready .control-arm-layer {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.control-arm-exploded-scene[data-focus]:not([data-focus="overview"]) .control-arm-layer {
  opacity: .06;
  filter: grayscale(.9) brightness(.42);
}

.control-arm-exploded-scene[data-focus="front"] .control-arm-layer[data-control-arm-layer="front"],
.control-arm-exploded-scene[data-focus="rear"] .control-arm-layer[data-control-arm-layer="rear"] {
  z-index: 3;
  opacity: 1;
  transform: translate3d(0,0,0) scale(1.03);
  filter: saturate(1.4) contrast(1.1) brightness(1.35) drop-shadow(0 0 3px rgba(255,229,133,.98)) drop-shadow(0 0 23px rgba(255,166,0,.92)) drop-shadow(0 0 34px rgba(242,13,22,.46));
}

.control-arm-exploded-scene[data-focus]:not([data-focus="overview"]) .control-arm-base-ghost {
  opacity: .055;
}

.control-arm-exploded-scene[data-focus]:not([data-focus="overview"]) .control-arm-xray-ghost {
  opacity: .045;
  filter: grayscale(1) brightness(.36);
}

.control-arm-exploded-scene[data-focus="front"] {
  --ed-focus-x: 35%;
  --ed-focus-y: 69%;
  --ed-focus-w: 35%;
  --ed-focus-h: 48%;
}

.control-arm-exploded-scene[data-focus="rear"] {
  --ed-focus-x: 74%;
  --ed-focus-y: 55%;
  --ed-focus-w: 39%;
  --ed-focus-h: 45%;
}

.control-arm-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .control-arm-page .control-arm-hero-car { left: -2%; right: -4%; bottom: 5%; }
  .control-arm-exploded .ed-stage { min-height: clamp(430px, 67vw, 620px); }
}

@media (max-width: 680px) {
  .control-arm-page .sd-hero h1 { font-size: clamp(33px, 9.6vw, 43px); }
  .control-arm-page .control-arm-hero-car { top: 14%; left: -4%; right: -6%; }
  .control-arm-page .repair-hero-panel { width: calc(100% - 32px); }
  .control-arm-exploded .ed-stage { min-height: 390px; }
  .control-arm-exploded-scene { inset: 42px 8px 38px; }
  .control-arm-tabs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .control-arm-hero-visual.is-animating .control-arm-frame { animation: none; }
  .control-arm-frame--base { opacity: .09; filter: grayscale(.55) brightness(.5); }
  .control-arm-frame--xray { opacity: .22; filter: grayscale(.88) brightness(.48); }
  .control-arm-frame--highlight { opacity: 1; filter: saturate(1.35) brightness(1.3) drop-shadow(0 0 18px rgba(255,164,0,.92)); }
}