:root{--ink:#191919;--violet:#6060ff;--paper:#f7f7f3;--line:#dcdcd8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'roc-grotesk',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:32px;font-weight:700;letter-spacing:-2px}.brand span{color:var(--violet)}.nav{font-size:13px;display:flex;gap:35px;align-items:center}.nav .pill{border:1px solid #bcbcb9;border-radius:30px;padding:11px 20px}.hero{max-width:1440px;margin:auto;padding:65px 5% 52px;display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:end}.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:500;text-transform:uppercase;display:flex;gap:10px;align-items:center}.dot{width:7px;height:7px;border-radius:50%;background:var(--violet);display:inline-block}h1{font-weight:500;font-size:clamp(54px,6.8vw,104px);line-height:.99;letter-spacing:-.055em;margin:30px 0 0}h1 em{font-style:normal;color:var(--violet)}.intro{max-width:365px;justify-self:end;padding-bottom:6px}.intro p{font-size:19px;line-height:1.55;font-weight:300;margin:0 0 28px}.cta{display:inline-flex;gap:27px;align-items:center;background:var(--violet);color:white;padding:17px 18px 17px 24px;border-radius:50px;font-size:14px;position:relative;overflow:hidden}.cta:before{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-102%);transition:transform .3s}.cta:hover:before,.cta:focus-visible:before{transform:translateX(0)}.cta span{position:relative}.arrow{width:30px;height:30px;display:grid;place-items:center;border:1px solid #ffffff66;border-radius:50%;transition:transform .3s}.cta:hover .arrow{transform:rotate(-40deg)}:focus-visible{outline:3px solid #06bbdc;outline-offset:5px}.work{margin:0 22px;background:var(--ink);border-radius:16px;color:white;padding:40px clamp(24px,5vw,75px) 30px;position:relative;overflow:hidden}.workhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.workhead .eyebrow{color:#d0d0d0}.workhead .dot{background:#aaaaff}.subtle{font-size:12px;color:#bdbdbd}.showcase{display:grid;grid-template-columns:1fr minmax(240px,330px) 1fr;gap:clamp(25px,6vw,100px);max-width:1130px;align-items:center;margin:0 auto}.editorial h2{font-size:clamp(30px,3vw,46px);font-weight:400;line-height:1.13;letter-spacing:-1.4px;margin:15px 0}.editorial p{font-size:15px;font-weight:300;line-height:1.65;color:#bdbdbd;max-width:235px}.index{font-size:12px;color:#a5a5a5}.frame{position:relative;aspect-ratio:9/16;width:100%;border-radius:13px;overflow:hidden;background:#6060ff;box-shadow:0 22px 65px #0004}video{width:100%;height:100%;object-fit:contain;display:block}.pause{position:absolute;right:14px;bottom:14px;background:#191919c9;color:white;border:1px solid #ffffff55;border-radius:30px;padding:10px 15px;cursor:pointer;font-size:12px}.side{align-self:center}.spec{border-top:1px solid #ffffff30;padding:15px 0;font-size:12px;color:#bbb;display:flex;justify-content:space-between;gap:12px}.spec b{font-weight:400;color:white}.demo{display:inline-block;border:1px solid #ffffff40;border-radius:30px;padding:7px 10px;font-size:10px;letter-spacing:.8px;color:#ddd;margin-bottom:22px}.side h3{font-size:24px;line-height:1.2;font-weight:400;margin:0 0 25px}.workfoot{display:flex;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid #ffffff25;font-size:12px;color:#bdbdbd}.after{max-width:1440px;margin:auto;padding:45px 5% 60px;display:flex;justify-content:space-between;gap:20px}.after p{font-size:24px;font-weight:300;letter-spacing:-.5px;max-width:550px;margin:0}.after small{font-size:11px;color:#6c6c6c;max-width:235px;line-height:1.7}.contact{border:0;border-top:1px solid var(--line);padding:30px 5%;background:white}.contact summary{cursor:pointer;font-size:15px}.contact p{font-size:14px;color:#555;max-width:500px;line-height:1.6}.mobileonly{display:none}@media(min-width:1450px){.work{max-width:1396px;margin:auto}}@media(max-width:850px){.hero{gap:35px;grid-template-columns:1fr;padding-top:45px}.intro{justify-self:start;max-width:450px}.intro p{font-size:17px}.showcase{grid-template-columns:1fr 1fr;gap:35px}.editorial{grid-column:1}.frame{grid-column:2;grid-row:1/3;max-height:none}.side{grid-column:1}.editorial h2{font-size:34px}.work{margin:0 12px;padding:28px}.workhead .subtle{display:none}}@media(max-width:560px){header{padding:22px 6%}.brand{font-size:29px}.nav>a:first-child{display:none}.nav .pill{font-size:11px;padding:10px 15px}.hero{padding:40px 6% 35px}h1{font-size:59px}.eyebrow{font-size:10px}.showcase{display:flex;flex-direction:column;gap:25px}.editorial{width:100%}.editorial h2{font-size:34px;margin:9px 0}.editorial p{max-width:100%;margin-bottom:0}.frame{max-width:310px}.side{width:100%}.side h3{font-size:21px;margin-bottom:15px}.demo{margin-bottom:15px}.workfoot{gap:20px;font-size:10px}.after{padding:30px 6%;flex-direction:column}.after p{font-size:22px}.after small{max-width:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{transition:none!important}}