.stations360 { --station-accent: #efc66c; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; margin: 0 0 18px; position: relative; }
.stations360 button { font: inherit; cursor: pointer; }
.stations360 button:focus-visible, .stations360 a:focus-visible { outline: 2px solid var(--station-accent); outline-offset: 4px; }
.stations360__info { display: flex; flex-direction: column; padding: clamp(24px, 2.5vw, 46px); border: 1px solid #35322b; background: radial-gradient(ellipse at 0 0, #30281d66, transparent 60%), #111214; min-width: 0; }
.stations360__eyebrow { display: flex; align-items: center; gap: 9px; color: var(--station-accent); font-size: 9px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; margin-bottom: 38px; }
.stations360__spark { width: 6px; height: 6px; background: var(--station-accent); box-shadow: 0 0 15px #efc66c66; border-radius: 50%; flex-shrink: 0; }
.stations360__category { color: #97948c; font-size: 9px; letter-spacing: .13em; line-height: 1.6; margin: 0 0 12px; }
.stations360__title { margin: 0 0 22px; color: #e8e5de; font-size: clamp(15px, 1.4vw, 23px); line-height: 1; font-weight: 400; letter-spacing: .1em; }
.stations360__title strong { display: block; color: #f3f0e8; font-size: clamp(54px, 5.1vw, 90px); font-weight: 400; letter-spacing: -.065em; line-height: 1.12; margin-top: 2px; }
.stations360__headline { margin: 0 0 14px; max-width: 350px; font-size: clamp(19px, 1.65vw, 28px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; min-height: 2.4em; }
.stations360__description { min-height: 7em; margin: 0 0 22px; color: #aaa9a4; font-size: 13px; line-height: 1.75; }
.stations360__features { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; align-content: start; margin-bottom: 25px; }
.stations360__features span { padding: 6px 8px; border: 1px solid #ffffff1a; border-radius: 3px; color: #c1bcb2; font-size: 10px; }
.stations360__specs { display: flex; flex-wrap: wrap; gap: 16px 22px; padding-top: 20px; border-top: 1px solid #ffffff17; margin: 0 0 26px; }
.stations360__specs dt { color: #888781; font-size: 10px; margin: 0 0 7px; }
.stations360__specs dd { margin: 0; color: #dcd7ce; font-size: 16px; font-variant-numeric: tabular-nums; }
.stations360__info-footer { margin-top: auto; }
.stations360__cta { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 15px 0; border-bottom: 1px solid #ba965347; color: var(--station-accent); text-decoration: none; font-size: 13px; }
.stations360__cta span { transition: transform .25s; font-size: 21px; }
.stations360__cta:hover span { transform: translate(3px,-3px); }
.stations360__info-footer p { color: #82817d; font-size: 10px; line-height: 1.5; margin: 13px 0 0; }
.stations360__showcase { display: flex; flex-direction: column; min-width: 0; border: 1px solid #39362f; background: #141517; overflow: hidden; }
.stations360__topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; color: #aaa69d; font-size: 10px; letter-spacing: .15em; }
.stations360__topbar b { color: #e4c384; font-weight: 500; margin-left: 8px; }
.stations360__count { color: #77756f; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.stations360__count b { color: #f3eee4; }
.stations360__stage { position: relative; isolation: isolate; background: #eeece7; flex: 1; min-height: 400px; overflow: hidden; touch-action: pan-y; }
.stations360__images { position: absolute; inset: 0; }
.stations360__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(24px) scale(.97); transition: opacity .65s ease, transform 1s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.stations360__image.is-active { opacity: 1; transform: translateX(0) scale(1); z-index: 1; }
@media (hover:hover) { .stations360__stage:hover .stations360__image.is-active { transform: scale(1.025); } }
.stations360__arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 48px; color: #363632; background: #f8f6efaa; border: 1px solid #47413722; backdrop-filter: blur(10px); transition: background .2s, color .2s; }
.stations360__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.stations360__arrow--prev { left: 16px; }.stations360__arrow--next { right: 16px; }
.stations360__arrow:hover { background: #191a1b; color: #e9c985; }
.stations360__image-label { position: absolute; z-index: 3; top: 22px; left: 26px; color: #55534d; font-size: 9px; letter-spacing: .15em; }
.stations360__image-label b { margin-left: 5px; color: #222; }
.stations360__scene-note { position: absolute; right: 20px; bottom: 14px; z-index: 3; color: #68645e; font-size: 9px; background: #efede6a6; padding: 4px 6px; border-radius: 2px; }
.stations360__navigation { display: flex; gap: 18px; padding: 20px 26px 0; align-items: center; }
.stations360__models { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); flex: 1; gap: 8px; }
.stations360__models button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 6px 18px; border: 1px solid #ffffff15; color: #a4a099; background: transparent; font-size: 12px; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; overflow: hidden; }
.stations360__models button span { font-size: 8px; color: #6c6a65; }
.stations360__models button:hover { color: #f6e7c8; background: #ffffff08; border-color: #a78b58; }
.stations360__models button.is-active { color: #f1d49e; background: #b1905015; border-color: #a98b545c; }
.stations360__models button.is-active span { color: #c6a775; }
.stations360__models i { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--station-accent); transform: scaleX(0); transform-origin: left; }
.stations360__models .is-active i { transform: scaleX(var(--station-progress,0)); }
.stations360__toggle { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #ffffff26; border-radius: 50%; background: none; color: #c2b9a7; }
.stations360__toggle:hover { color: #f1d49e; border-color: #a98b54; }
.stations360__bottom { padding: 17px 26px 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; color: #797973; font-size: 9px; }
.stations360__bottom > :first-child { color: #aaa292; }
.stations360__copy.is-changing { animation: station-copy-enter .45s ease both; }
@keyframes station-copy-enter { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.stations360__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1600px) { .stations360__stage { min-height: 500px; } }
@media(max-width:1100px) { .stations360 { grid-template-columns: minmax(0, .95fr) minmax(0,1.5fr); } .stations360__info { padding: 24px; } .stations360__description { font-size: 12px; } .stations360__models button { font-size: 11px; } .stations360__models button span { display:none; } .stations360__navigation { gap: 10px; padding: 15px 15px 0; } .stations360__stage { min-height: 360px; } .stations360__bottom { padding:15px; } .stations360__bottom > :last-child { display:none; } }
@media(max-width:760px) { .stations360 { grid-template-columns: 1fr; gap: 0; } .stations360__info { padding: 26px; border-bottom: 0; } .stations360__eyebrow { margin-bottom: 24px; } .stations360__title { font-size:15px; margin-bottom:16px; } .stations360__title strong { font-size:60px; } .stations360__headline { font-size:23px; max-width: 100%; } .stations360__description { font-size:13px; min-height: 7em; margin-bottom: 18px; } .stations360__features { min-height: 52px; margin-bottom: 10px; } .stations360__specs { margin-bottom: 12px; padding-top: 16px; } .stations360__info-footer p { display:none; } .stations360__showcase { border-top:0; } .stations360__stage { flex: auto; aspect-ratio: 1.15; min-height: 0; } .stations360__topbar { padding:18px; } .stations360__arrow { width:32px; height:40px; } .stations360__arrow--prev { left:8px; } .stations360__arrow--next { right:8px; } .stations360__image-label { left:18px; top:15px; } .stations360__navigation { gap:8px; padding: 14px 12px 0; } .stations360__models { gap:4px; } .stations360__models button { padding:14px 2px; font-size:10px; } .stations360__toggle { width:32px; height:32px; } .stations360__scene-note { font-size:8px; bottom:9px; right:9px; } }
@media(prefers-reduced-motion:reduce) { .stations360 *, .stations360 *::before, .stations360 *::after { animation:none!important; transition:none!important; } }
@media(max-width:760px) {
  .stations360__showcase { order: 1; border-top: 1px solid #39362f; }
  .stations360__info { order: 2; border-top: 0; border-bottom: 1px solid #35322b; padding: 24px; }
  .stations360__eyebrow { margin-bottom: 19px; }
  .stations360__description { min-height: 7em; }
  .stations360__features { min-height: 60px; }
}