/* A small creative studio, built around each page's own footage. */
.motion-hero{position:relative;padding:154px 42px 0;text-align:left;background:linear-gradient(150deg,#fff 25%,#f5faf7 80%,#fff);isolation:isolate}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;max-width:1280px;margin:auto;min-height:590px;padding-bottom:48px}
.hero-copy{position:relative;z-index:2;animation:enter .9s var(--ease) both}
.hero-kicker{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.095em;text-transform:uppercase;font-weight:750;color:#53736a;margin-bottom:27px;line-height:1.6}
.hero-kicker>span{width:7px;height:7px;flex:none;border-radius:50%;background:#00a991;box-shadow:0 0 0 5px #00a9910c}
.motion-hero h1{font-size:clamp(43px,4.8vw,72px);line-height:1.08;letter-spacing:-.065em;text-wrap:initial;margin:0;max-width:650px;animation:none}
.motion-hero h1 em{display:inline-block;position:relative;font-style:normal;color:#009b83;isolation:isolate}
.motion-hero h1 em:after{content:"";position:absolute;left:-2%;right:-2%;height:10px;bottom:1px;background:#bdf6dd;border-radius:50%;transform:rotate(-2deg);z-index:-1}
.motion-hero .landing-h1-brand{display:flex;align-items:center;gap:13px;font-size:.47em;letter-spacing:-.04em;color:#293d35;background:none;margin-top:22px;line-height:1.3}
.brand-spark{font-size:1.2em;color:#00a991!important;background:none!important;display:inline-block;animation:hero-turn 24s linear infinite}
.motion-hero .landing-lead{font-size:17px;line-height:1.8;max-width:495px;margin:28px 0 30px;text-wrap:pretty}
.hero-action{display:flex;gap:21px;align-items:center}.hero-action .button{min-height:58px;padding:16px 35px;box-shadow:0 8px 22px #009b831c}
.hero-platforms{font-size:12px;font-weight:750;line-height:1.8;color:#4e635a}.hero-platforms>span{display:block;font-size:11px;font-weight:500;color:#89958e}
.hero-chips{display:flex;gap:20px;margin-top:30px;flex-wrap:wrap;color:#617269;font-size:11px}.hero-chips>span{display:flex;align-items:center;gap:5px}.hero-chips svg{width:14px;height:14px;stroke:#1ea98c;stroke-width:1.5;fill:none}
.hero-art{position:relative;min-width:0;width:100%;aspect-ratio:1.02;isolation:isolate;animation:hero-arrive 1.2s .12s var(--ease) both;--playhead:0%;--pointer-x:0px;--pointer-y:0px}
.hero-halo{position:absolute;width:92%;aspect-ratio:1;left:7%;top:2%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#c7fbe0 0%,#daf1df 38%,#d5ece8 64%,#c2e1d6 100%);box-shadow:0 0 80px 10px #c4f1d640;z-index:-2}
.hero-halo:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(#5b9a8124 .7px,transparent .7px);background-size:7px 7px;mask-image:linear-gradient(140deg,transparent,#000)}
.hero-orbit{position:absolute;inset:1% -2% 5% 4%;border:1px solid #bad5c766;border-radius:50%;transform:rotate(-30deg) scaleY(.74);z-index:-1}.hero-orbit:after{content:"";position:absolute;inset:-28px;border:1px solid #bad5c744;border-radius:50%}
.hero-screen{position:absolute;left:28%;top:0;width:54%;padding:7px;background:#fff;border-radius:21px;transform:rotate(-5deg) translate(var(--pointer-x),var(--pointer-y));box-shadow:0 35px 70px -20px #153e3555,0 4px 14px #1b4e3012;z-index:3;transition:transform .55s var(--ease)}
.hero-screen-top{display:flex;align-items:center;gap:5px;padding:5px 6px 11px;font-size:8px;letter-spacing:.02em;font-weight:750;color:#5b7269}.hero-screen-top>span:last-child{margin-left:auto;color:#99a29c;font-size:7px}.screen-dot{width:5px;height:5px;border-radius:50%;background:#00ad87}
.hero-player{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:13px;background:#17241e}.hero-player video{width:100%;height:100%;object-fit:cover}.hero-player:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#071b1594);pointer-events:none}.hero-player .video-toggle{width:32px;height:32px;right:11px;bottom:12px;z-index:5}
.hero-screen-caption{position:absolute;bottom:19px;left:17px;right:35px;color:#fff;font-size:clamp(17px,1.8vw,26px);line-height:1.12;letter-spacing:-.045em;font-weight:800;z-index:2}
.hero-image{position:absolute;padding:6px;background:white;box-shadow:0 20px 40px -15px #183d3440;border-radius:14px;overflow:hidden;animation:hero-float 7s ease-in-out infinite;transition:translate .55s var(--ease)}.hero-image img{width:100%;height:100%;object-fit:cover;border-radius:9px}.hero-image>span{position:absolute;bottom:12px;left:12px;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 8px #000;z-index:2}.hero-image:after{content:"";position:absolute;inset:60% 6px 6px;background:linear-gradient(transparent,#0006);border-radius:0 0 9px 9px;pointer-events:none}
.hero-image-back{width:27%;height:37%;left:2%;top:27%;transform:rotate(-13deg);--float-rotate:-13deg;z-index:1}.hero-image-front{width:25%;height:33%;right:-1%;top:37%;transform:rotate(12deg);--float-rotate:12deg;animation-delay:-3s;z-index:4}
.hero-idea{position:absolute;left:-1%;top:1%;width:40%;padding:18px 17px;background:#fffef6;box-shadow:0 14px 28px #46683c12;transform:rotate(-9deg);border:1px solid #e8e5d480;border-radius:3px 3px 22px 3px;z-index:4}.idea-label{display:flex;align-items:center;gap:6px;color:#6d8072;font-size:8px;font-weight:750;letter-spacing:.005em;white-space:nowrap}.idea-label>span{font-size:16px;color:#15a284}.hero-idea p{font-size:clamp(13px,1.35vw,19px);font-weight:650;color:#3a4c41;letter-spacing:-.035em;line-height:1.4;margin-top:10px}
.hero-timeline{position:absolute;left:14%;bottom:-2%;width:82%;padding:16px 19px 15px;border:1px solid #dae8e0;background:#fffffff0;backdrop-filter:blur(16px);border-radius:15px;box-shadow:0 22px 45px -16px #2a544333;transform:rotate(3deg);z-index:6}
.timeline-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#41584b;font-weight:750;margin-bottom:13px}.timeline-heading>span:first-child{display:flex;align-items:center;gap:7px}.timeline-heading svg{width:14px;height:14px;fill:none;stroke:#2b947b;stroke-width:1.3}.hero-time{font-variant-numeric:tabular-nums;font-size:9px;color:#00866e;padding:2px 6px;background:#e7f6ee;border-radius:4px}
.timeline-ruler{display:flex;justify-content:space-between;font-size:7px;font-weight:650;color:#8c9c94;padding-bottom:7px;border-bottom:1px solid #dfe8e2;margin-bottom:5px}.timeline-tracks{position:relative}.timeline-clips{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:4px;height:34px}.timeline-clips>span{border-radius:4px;background-size:cover;background-position:50% 42%;border:1px solid #fff}.timeline-clips>span:nth-child(2){background-position:50% 35%;outline:1.5px solid #32be98;outline-offset:1px}.timeline-audio{height:27px;margin-top:6px;background:#e2f4eb;border-radius:4px;display:flex;align-items:center;justify-content:space-around;padding:0 6px;gap:2px;overflow:hidden}.timeline-audio i{flex:1;min-width:1px;max-width:3px;height:calc(var(--wave)*.65);background:#65b194;border-radius:2px;opacity:.7}.timeline-playhead{position:absolute;top:-10px;bottom:-4px;left:clamp(0%,var(--playhead),100%);width:1.5px;background:#009d7f;box-shadow:0 0 0 1px #fff8;transition:left .25s linear}.timeline-playhead:before{content:"";position:absolute;top:-2px;left:-2px;width:5px;height:5px;border-radius:50%;background:#009d7f}
.hero-star{position:absolute;color:#039e83;font-weight:400;line-height:1;z-index:1}.hero-star-one{right:-2%;top:0;font-size:76px;animation:hero-turn 40s linear infinite}.hero-star-two{left:1%;bottom:5%;font-size:45px;transform:rotate(15deg);color:#96bda6}
.hero-process{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0;max-width:1280px;margin:28px auto 0;border-top:1px solid #dce7df;color:#536d5e;font-size:13px;font-weight:650}.hero-process>span{display:flex;gap:16px;align-items:center}.hero-process small{font-size:10px;color:#9baca1;font-weight:500}
.hero-art.is-still .hero-image,.hero-art.is-still .hero-star{animation-play-state:paused}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(var(--float-rotate))}50%{transform:translateY(-10px) rotate(calc(var(--float-rotate) + 2deg))}}
@keyframes hero-turn{to{rotate:360deg}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(35px) rotate(3deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media(min-width:1500px){.motion-hero{padding-top:180px}.hero-inner{min-height:650px;gap:70px}}
@media(max-width:1100px){.motion-hero{padding:132px 34px 0}.hero-inner{gap:25px;min-height:530px}.motion-hero h1{font-size:clamp(40px,4.8vw,55px)}.motion-hero .landing-lead{font-size:16px;line-height:1.7}.hero-kicker{font-size:9px;letter-spacing:.06em}.hero-chips{gap:12px;font-size:10px}.hero-platforms>span{display:none}.hero-idea{padding:12px}.idea-label{font-size:6px}.hero-timeline{padding:12px}.hero-screen-caption{font-size:20px}.hero-action{gap:13px}.hero-action .button{padding:14px 27px}.hero-star-one{font-size:58px}}
@media(max-width:800px){.motion-hero{padding:121px 26px 0}.hero-inner{grid-template-columns:1fr;gap:48px;padding-bottom:25px}.hero-copy{max-width:600px;text-align:center;margin:auto}.hero-kicker{justify-content:center;font-size:10px;margin-bottom:23px}.motion-hero h1{font-size:clamp(42px,7.7vw,64px);text-wrap:balance;max-width:640px}.motion-hero .landing-h1-brand{justify-content:center;font-size:.5em;margin-top:15px}.motion-hero .landing-lead{margin:22px auto 25px;max-width:540px}.hero-action,.hero-chips{justify-content:center}.hero-chips{font-size:11px;gap:20px;margin-top:22px}.hero-art{max-width:540px;margin:0 auto;width:90%;aspect-ratio:1.05}.hero-idea p{font-size:18px}.hero-idea{padding:16px}.idea-label{font-size:8px}.hero-screen-caption{font-size:25px}.hero-process{font-size:11px;gap:15px;margin-top:20px}.hero-process>span{gap:9px}}
@media(max-width:480px){.motion-hero{padding:109px 22px 0}.hero-kicker{font-size:8px;letter-spacing:.055em;gap:7px;margin-bottom:21px}.hero-kicker>span{width:5px;height:5px}.motion-hero h1{font-size:clamp(32px,9.4vw,44px);line-height:1.08;letter-spacing:-.055em}.motion-hero h1 em:after{height:6px;bottom:0}.motion-hero .landing-h1-brand{font-size:.56em;margin-top:17px;gap:9px}.motion-hero .landing-lead{font-size:14px;line-height:1.75;margin:21px auto 23px}.hero-action{gap:14px}.hero-action .button{padding:13px 24px;min-height:52px;font-size:14px}.hero-platforms{font-size:10px;text-align:left}.hero-platforms>span{display:block;font-size:8px}.hero-chips{font-size:9px;gap:12px;margin-top:20px}.hero-chips svg{width:11px;height:11px}.hero-inner{gap:43px}.hero-art{width:96%;max-width:390px;aspect-ratio:.99;margin-bottom:10px}.hero-screen{border-radius:15px;padding:5px;left:26%;width:57%}.hero-screen-top{font-size:6px;padding:3px 4px 6px}.hero-screen-top>span:last-child{font-size:5px}.hero-player{border-radius:9px}.hero-player .video-toggle{width:27px;height:27px;right:8px;bottom:9px}.hero-screen-caption{font-size:17px;left:10px;bottom:13px;right:33px}.hero-idea{left:-3%;top:1%;width:43%;padding:10px}.idea-label{font-size:5.7px;gap:3px}.idea-label>span{font-size:12px}.hero-idea p{font-size:12px;margin-top:7px}.hero-image{padding:4px;border-radius:10px}.hero-image img{border-radius:6px}.hero-image>span{font-size:7px;left:9px;bottom:9px}.hero-image-front{right:-3%;width:27%;height:34%;top:35%}.hero-image-back{left:-2%;top:28%;width:29%;height:38%}.hero-timeline{width:88%;left:9%;bottom:-3%;padding:10px 12px;border-radius:11px}.timeline-heading{font-size:8px;margin-bottom:9px}.timeline-heading svg{width:11px;height:11px}.hero-time{font-size:7px}.timeline-ruler{font-size:6px;padding-bottom:4px}.timeline-clips{height:24px}.timeline-audio{height:20px;margin-top:4px}.timeline-audio i{height:calc(var(--wave)*.48)}.hero-star-one{font-size:41px;right:-4%;top:-3%}.hero-star-two{font-size:30px;left:-3%;bottom:3%}.hero-process{padding:20px 0;margin-top:6px;gap:7px;align-items:flex-start;font-size:9px}.hero-process>span{flex-direction:column;gap:7px;align-items:flex-start;max-width:88px;line-height:1.4}.hero-process small{font-size:8px}}
.hero-player .video-toggle{top:12px;bottom:auto;right:12px}
@media(max-width:480px){.hero-art{aspect-ratio:.84}.hero-player .video-toggle{top:8px;bottom:auto;right:8px}.hero-screen-caption{font-size:16px;right:13px}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-copy,.hero-image,.hero-star,.brand-spark{animation:none!important}.hero-screen{transform:rotate(-5deg)!important}.timeline-playhead{transition:none}}