.photographic-motion .hero-scene-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-scene{position:absolute;inset:0;overflow:hidden;background:#0c1018}
.hero-scene[hidden]{display:none!important}
.hero-scene>img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.75}
.photographic-motion .hero-shade{z-index:2;pointer-events:none;background:linear-gradient(90deg,#080511cc 0%,#0a061570 52%,#03050a22),linear-gradient(0deg,#0a0910,transparent 32%,#0a061140 85%)}
.photographic-motion .hero{height:auto;min-height:max(850px,100svh);max-height:none}
.photographic-motion .hero-content{position:relative;inset:auto;min-height:max(850px,100svh);height:auto;padding:160px 0 145px;box-sizing:border-box;transform:none}
.photographic-motion .hero h1{min-height:2.04em}
.photographic-motion .hero-content>p{min-height:1.8em}
.photographic-motion .reference-caption{bottom:16px;z-index:4;max-width:55%;pointer-events:none}
.photographic-motion #video-toggle{z-index:5;bottom:16px;width:32px;height:32px;font-size:12px}
.hero-scene-controls{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 110px));display:flex;justify-content:space-between;align-items:center;gap:22px;z-index:5}
.hero-scene-tabs{display:flex;gap:22px}
.hero-scene-tabs button{position:relative;display:flex;align-items:center;gap:9px;min-height:44px;border:0;background:none;color:#b4a6c8;padding:8px 0 13px;font:11px OpenSans,Arial,sans-serif;cursor:pointer;transition:color .25s}
.hero-scene-tabs small{font-size:9px;letter-spacing:1px;color:#9482ab}
.hero-scene-tabs button[aria-pressed=true]{color:#fff}
.hero-scene-tabs button i{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#c9b2df25;overflow:hidden;border-radius:4px}
.hero-scene-tabs button[aria-pressed=true] i::after{content:'';display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ab78e2,#9ee4e3)}
.hero-scene-controls.is-running .hero-scene-tabs button[aria-pressed=true] i::after{animation:scene-progress 10s linear forwards}
.hero-scene-controls:not(.is-running) .hero-scene-tabs button[aria-pressed=true] i::after{transform:scaleX(1)}
.hero-scene-arrows{display:flex;gap:8px}
.hero-scene-arrows button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #c2a3df55;border-radius:50%;background:#150d2180;backdrop-filter:blur(12px);color:#ded0f0;cursor:pointer;transition:background .25s,border-color .25s,translate .25s}
.hero-scene-arrows svg{width:22px;height:22px}.scene-previous svg{rotate:180deg}.hero-scene-arrows .scene-pause{font:14px Arial,sans-serif}
.hero-scene-arrows button:disabled{opacity:.35;cursor:default}
.hero-scene-controls button:focus-visible{outline:2px solid #a7e8df;outline-offset:5px}
@keyframes scene-progress{to{transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){
  .photographic-motion .tile{transition:box-shadow .4s,border-color .4s;overflow:hidden}
  .photographic-motion .tile img{transition:transform .8s cubic-bezier(.2,.65,.2,1),filter .5s}
  .photographic-motion .tile:hover img,.photographic-motion .tile:focus-visible img{transform:scale(1.065);filter:brightness(1.1)}
  .photographic-motion .tile>.ks-tile-caption{transition:translate .45s}.photographic-motion .tile:hover>.ks-tile-caption{translate:0 -5px}
  .photographic-motion .installed-product{transition:translate .4s,box-shadow .4s,border-color .4s}
  .photographic-motion .installed-product:hover{translate:0 -5px;box-shadow:0 20px 45px #0005;border-color:#b78fdd70}
  .photographic-motion .installed-product .product-photo img{transition:transform .75s cubic-bezier(.2,.65,.2,1)}
  .photographic-motion .installed-product:hover .product-photo img{transform:scale(1.065)}
  .photographic-motion :is(.btn,.button.purple,.product-select,#garage-continue){position:relative;isolation:isolate;overflow:hidden}
  .photographic-motion :is(.btn,.button.purple,.product-select,#garage-continue)::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 15%,#fff3 48%,transparent 80%);translate:-130% 0;transition:translate .65s;pointer-events:none}
  .photographic-motion :is(.btn,.button.purple,.product-select,#garage-continue):hover::after{translate:130% 0}
  .hero-scene-arrows button:hover{background:#694594b8;border-color:#d1aff1;translate:0 -2px}
  .hero-scene-tabs button:hover{color:#fff}
  .photographic-motion .benefits-bar svg,.photographic-motion .social-strip svg{transition:translate .35s,scale .35s}
  .photographic-motion .benefits-bar>div:hover svg,.photographic-motion .social-strip a:hover svg{translate:0 -2px;scale:1.08}
}
@media(max-width:900px){.hero-scene-controls{width:calc(100% - 70px)}.hero-scene-tabs{gap:16px}}
@media(max-width:700px){
  .photographic-motion .hero{height:auto;min-height:max(840px,100svh)}
  .photographic-motion .hero-content{min-height:max(840px,100svh);padding-top:120px;padding-bottom:140px}
  .photographic-motion .hero-content>p{min-height:3.6em}
  .hero-scene-controls{width:calc(100% - 42px);bottom:54px;gap:14px;align-items:flex-end}
  .hero-scene-tabs{gap:12px;flex:1;justify-content:space-between}
  .hero-scene-tabs button{font-size:9px;gap:5px;min-height:44px;flex-direction:column;align-items:flex-start}
  .hero-scene-arrows{gap:6px}.hero-scene-arrows button{width:35px;height:44px;border-radius:14px}.hero-scene-arrows svg{width:17px}
  .photographic-motion .reference-caption{max-width:75%;font-size:7px}
}
@media(max-width:380px){.hero-scene-controls{gap:10px;width:calc(100% - 36px)}.hero-scene-tabs{gap:8px}.hero-scene-tabs button{font-size:8px}.hero-scene-arrows{gap:4px}.hero-scene-arrows button{width:30px}.photographic-motion .hero{height:auto;min-height:max(860px,100svh)}.photographic-motion .hero-content{min-height:max(860px,100svh)}}
.photographic-motion.quiet-motion .hero-scene-controls .hero-scene-tabs button[aria-pressed=true] i::after{transform:scaleX(1)}
.photographic-motion.quiet-motion :is(.tile img,.installed-product,.product-photo img,.ks-tile-caption,.benefits-bar svg,.social-strip svg){translate:none!important;scale:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.photographic-motion :is(.tile img,.installed-product,.product-photo img,.ks-tile-caption,.benefits-bar svg,.social-strip svg){translate:none!important;scale:none!important;transform:none!important}.hero-scene-tabs button[aria-pressed=true] i::after{transform:scaleX(1)}}