.hero.hero-remix{padding:124px 6vw 0;text-align:left;isolation:isolate;background:#fafbf9}
.hero-halo{position:absolute;z-index:-1;width:950px;height:850px;right:-150px;top:0;pointer-events:none;background:radial-gradient(ellipse,#d7f2e5 0%,#e7f5eb 36%,#fafbf900 69%)}
.hero-layout{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:15px;max-width:1360px;margin:0 auto;min-height:660px}
.hero-remix .hero-copy{padding:30px 0 70px;z-index:3}


.hero-remix h1{font-size:clamp(50px,4.7vw,70px);line-height:1.08;letter-spacing:-.055em;margin:16px 0 25px;font-weight:750}
.hero-remix h1 span{background:none;-webkit-text-fill-color:currentColor}

.hero-remix h1 .hero-moving{color:#108571;position:relative;width:max-content;padding-bottom:10px}
.hero-moving svg{position:absolute;width:98%;height:21px;left:1%;bottom:-2px;color:#a8ddc6;z-index:-1;stroke-dasharray:1050;animation:hero-draw 1.7s .5s both}
.hero-remix .hero-description{font-size:19px;line-height:1.7;color:#63746e}
.hero-remix .hero-action{align-items:flex-start;margin-top:30px;gap:13px}
.hero-remix .hero-action .button{gap:28px;min-height:60px;padding:17px 26px 17px 31px;background:#1bc5a6;border-color:#1bc5a6;box-shadow:0 9px 23px #15967d17}
.hero-remix .hero-action .button:hover{background:#39d4b9;box-shadow:0 12px 28px #15967d25}
.hero-remix .hero-action>span{padding-left:25px;font-size:11px;color:#78867f}
.hero-process{display:flex;align-items:center;gap:16px;margin-top:47px;animation-delay:.5s;color:#60776c;font-size:11px}
.hero-process span{white-space:nowrap}.hero-process b{font-size:9px;color:#a5b7ab;font-weight:600;margin-right:7px}.hero-process>i{width:22px;height:1px;background:#c5d6cb}
.hero-collage{position:relative;height:650px;width:100%;max-width:620px;justify-self:end;animation-delay:.2s}
.collage-orbit{position:absolute;border:1px solid #91c9b34a;border-radius:50%;z-index:-1;pointer-events:none}
.orbit-one{width:570px;height:570px;left:5%;top:35px}.orbit-two{width:450px;height:450px;left:15%;top:95px}
.collage-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-remix .hero-film{position:absolute;left:22%;top:91px;width:56%;max-width:none;aspect-ratio:4/5;margin:0;border:7px solid white;border-radius:23px;transform:rotate(-7deg);box-shadow:0 22px 50px #173f322a;z-index:2;animation:hero-film-in 1.2s .25s var(--ease) both}
.hero-remix .hero-film video{aspect-ratio:4/5;object-fit:cover}
.hero-remix .hero-film .video-toggle{width:auto;height:32px;right:11px;top:13px;bottom:auto;font-size:10px}
.hero-remix .film-caption{left:14px;bottom:24px;font-size:7px;letter-spacing:1px;text-shadow:0 1px 8px #000}
.collage-still{position:absolute;padding:6px;background:#fff;box-shadow:0 15px 40px #16372a1c;border-radius:17px;overflow:hidden;will-change:transform}
.collage-still img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.collage-still>span{position:absolute;left:15px;bottom:17px;font-size:7px;letter-spacing:1.3px;color:#fff;font-weight:750;text-shadow:0 2px 8px #0008}
.still-landscape{width:32%;height:260px;top:27px;right:-1%;transform:rotate(11deg);animation:hero-float-right 7s ease-in-out infinite}
.still-portrait{width:28%;height:206px;top:370px;left:2%;transform:rotate(-12deg);z-index:3;animation:hero-float-left 8s ease-in-out infinite}
.still-portrait img{object-position:35% 30%}
.collage-note{position:absolute;z-index:3;top:22px;left:9%;display:flex;gap:13px;align-items:center;transform:rotate(-8deg);color:#237f67}
.collage-note svg{width:39px;height:39px;animation:hero-star-turn 22s linear infinite}
.collage-note span{font-size:9px;letter-spacing:1.1px;line-height:1.7;font-weight:750}
.motion-strip{position:absolute;z-index:4;left:39%;right:-1%;top:466px;background:#fffef8;border:1px solid #fff;border-radius:14px;padding:15px 16px 12px;transform:rotate(6deg);box-shadow:0 12px 40px #1a473621;animation:hero-float-strip 9s ease-in-out infinite}
.motion-strip-heading{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#416454;margin-bottom:10px}.motion-strip-heading>span:first-child{display:flex;align-items:center;gap:6px}.motion-strip-heading i{width:5px;height:5px;background:#33b596;border-radius:50%}.motion-strip-heading>span:last-child{color:#81938a;letter-spacing:1px}
.motion-clips{height:30px;display:flex;gap:4px;position:relative}.motion-clips>i{display:block;flex:1;background:#a9d9c4;border-radius:4px}.motion-clips>i:nth-child(2){flex:1.5;background:#d4c8ee}.motion-clips>i:nth-child(3){flex:.75;background:#f0ceac}.motion-clips>i:nth-child(4){background:#acd6cd}.motion-clips>b{position:absolute;left:12%;top:-6px;height:64px;border-left:1.5px solid #234b3a;animation:hero-playhead 7s linear infinite}.motion-clips>b:before{content:'';position:absolute;left:-4px;top:-2px;width:7px;height:7px;background:#234b3a;border-radius:2px}
.motion-wave{height:19px;margin-top:7px;background:#e8f0dc;border-radius:4px;overflow:hidden;padding:1px 5px}.motion-wave svg{width:100%;height:100%;fill:none;stroke:#82a46c;stroke-width:1.1}
.hero-footline{max-width:1360px;margin:0 auto;padding:24px 0 22px;border-top:1px solid #dce8df;display:flex;justify-content:space-between;color:#7d9086;font-size:9px;letter-spacing:1.7px;font-weight:600}.hero-footline>span:last-child{display:flex;gap:20px;align-items:center}
@keyframes hero-draw{from{stroke-dashoffset:1050}to{stroke-dashoffset:0}}
@keyframes hero-film-in{from{opacity:0;transform:translateY(55px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(-7deg)}}
@keyframes hero-float-right{0%,100%{transform:translateY(0) rotate(11deg)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes hero-float-left{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(12px) rotate(-9deg)}}
@keyframes hero-float-strip{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes hero-star-turn{to{transform:rotate(360deg)}}
@keyframes hero-playhead{0%{left:5%}100%{left:97%}}
@media(min-width:1600px){.hero.hero-remix{padding-top:145px}.hero-layout{min-height:690px}.hero-remix .hero-film{top:83px}}
@media(max-width:1100px) and (min-width:761px){.hero.hero-remix{padding:119px 5vw 0}.hero-layout{min-height:580px;grid-template-columns:1fr 1fr;gap:8px}.hero-remix h1{font-size:5.2vw}.hero-collage{height:560px}.hero-remix .hero-film{top:100px;left:19%;width:63%;border-width:5px}.still-landscape{height:225px;width:36%;top:40px}.still-portrait{top:345px;height:167px;width:31%;left:-1%}.motion-strip{top:401px;left:35%;right:-2%;padding:11px}.collage-note{left:6%;top:38px}.collage-note span{font-size:8px}.orbit-one{width:440px;height:440px;left:0;top:65px}.orbit-two{width:350px;height:350px;left:11%;top:111px}.hero-process{gap:9px;font-size:10px}.hero-process>i{width:13px}.hero-remix .hero-description{font-size:17px}}
@media(max-width:760px){.hero.hero-remix{padding:109px 22px 0}.hero-layout{display:flex;flex-direction:column;gap:0;min-height:0}.hero-remix .hero-copy{padding:15px 0 0;text-align:center;width:100%}.hero-remix h1{font-size:clamp(34px,8.5vw,48px);margin:18px 0 21px;letter-spacing:-.05em}.hero-remix h1 .hero-moving{margin:auto;padding-bottom:8px}.hero-moving svg{height:14px;bottom:0}.hero-remix .hero-description{font-size:16px;line-height:1.65}.hero-remix .hero-action{align-items:center;margin-top:25px;gap:11px}.hero-remix .hero-action .button{min-height:54px;font-size:16px;padding:15px 24px 15px 29px;gap:25px}.hero-remix .hero-action>span{padding:0;font-size:10px}.hero-process{justify-content:center;margin-top:25px;gap:11px;font-size:10px}.hero-process>i{width:17px}.hero-process b{font-size:8px;margin-right:5px}.hero-collage{height:500px;width:100%;max-width:450px;margin:27px auto 0}.hero-remix .hero-film{top:66px;left:20%;width:62%;border-width:5px;border-radius:19px}.hero-remix .film-caption{font-size:6px;left:9px;letter-spacing:.6px}.hero-remix .hero-film .video-toggle{top:9px;bottom:auto;right:9px;width:auto;height:29px;font-size:9px}.still-landscape{height:207px;width:35%;top:16px;right:-1%;border-radius:14px;padding:5px}.still-portrait{width:29%;height:166px;top:281px;left:0;padding:5px;border-radius:13px}.collage-still>span{font-size:6px;left:10px;bottom:13px;letter-spacing:.7px}.collage-note{left:2%;top:10px;gap:7px}.collage-note svg{width:28px;height:28px}.collage-note span{font-size:7px;letter-spacing:.7px}.motion-strip{top:364px;left:35%;right:-1%;border-radius:11px;padding:11px}.motion-strip-heading{font-size:6px;letter-spacing:.8px}.motion-clips{height:24px;gap:3px}.motion-clips>b{height:54px}.motion-wave{height:15px}.orbit-one{width:410px;height:410px;left:0;top:22px}.orbit-two{width:310px;height:310px;left:12%;top:72px}.hero-halo{width:750px;height:850px;right:-300px;top:280px}.hero-footline{padding:18px 0 19px;letter-spacing:1px;font-size:7px}.hero-footline>span:last-child{gap:9px}}
@media(max-width:400px){.hero.hero-remix{padding-left:20px;padding-right:20px}.hero-collage{height:430px;margin-top:33px}.hero-remix .hero-film{top:69px}.still-landscape{height:173px;top:29px}.still-portrait{height:140px;top:250px}.motion-strip{top:306px;left:33%;right:-1%}.collage-note{top:15px}.orbit-one{width:345px;height:345px;top:50px}.orbit-two{width:265px;height:265px;top:91px}.hero-footline{font-size:6px}.hero-remix h1{font-size:clamp(32px,9.4vw,36px)}}
@media(prefers-reduced-motion:reduce){.hero-remix .hero-film{opacity:1;transform:rotate(-7deg)}.hero-collage{transform:none;opacity:1}.hero-moving svg{stroke-dashoffset:0}.motion-clips>b{left:43%}}