/* Orbital Studio: faithful proportions and composition from the selected reference. */
:root{--bg:#0d0d12;--violet:#956bff}.wrap{width:min(1320px,calc(100% - 64px))}body{background:radial-gradient(ellipse at 85% 12%,#1b14251a,transparent 35%),#0d0d12;font-size:15px}.header{height:70px;border:0}.brand{font-size:24px;font-weight:550;letter-spacing:-1px}.brand .spark{font-size:40px}.header nav{gap:38px}.header nav>a:not(.button){font-size:13px}.button{border-radius:7px;padding:13px 25px;font-size:14px;gap:23px;font-weight:500}.button.small{padding:9px 16px}.hero{min-height:565px;padding-top:0;grid-template-columns:46% 54%;isolation:isolate}.hero-copy{z-index:3;padding-bottom:20px}.hero h1{font-size:clamp(42px,5.35vw,74px);font-weight:450;letter-spacing:-3.7px;line-height:1.04;width:740px;max-width:145%}.intro{font-size:16px;line-height:1.47;max-width:360px;color:#eeeaf1;margin-top:28px;margin-bottom:29px}.actions{gap:17px}.hero-art{height:560px;margin-left:-70px;width:calc(100% + 70px);margin-right:0}.orbital-glow{inset:0 -5% -5%;background:radial-gradient(ellipse at 50% 65%,#9a48ff24,transparent 65%)}.site-preview{left:19%;top:20%;width:73%;height:330px;transform:rotateY(-20deg) rotateX(8deg) rotateZ(-8deg);border:1px solid #d5b1fc88;border-radius:5px}.preview-bar{height:25px}.preview-content{height:305px}.preview-content h2{font-family:'DM Sans',sans-serif;font-weight:400;font-style:italic;font-size:39px;line-height:1.06;letter-spacing:-1px;margin-top:28px}.preview-nav b{font-family:'DM Sans',sans-serif;font-size:17px}.preview-nav>span{font-size:8px}.preview-content>p{display:none}.preview-bottom{font-size:5px}.coffee-cup{width:125px;height:100px;right:33px;bottom:55px}.motion-control{bottom:24px;right:5px;opacity:.55;font-size:8px}.motion-control:hover{opacity:1}#orbit{inset:0 -20px;z-index:2}.hero-bottom{display:none}.section{padding-top:38px}.reference-heading{display:flex;align-items:center;gap:30px;margin-bottom:24px}.reference-heading h2{font-family:'DM Sans',sans-serif;font-size:34px;letter-spacing:-1px;font-weight:450;line-height:1.2;white-space:nowrap}.reference-heading>span{height:1px;background:linear-gradient(90deg,#ffffff36,#ffffff50);flex:1}.reference-heading a{font-size:12px;white-space:nowrap}.reference-heading b{font-size:22px;font-weight:400;margin-left:17px}.projects{gap:14px}.project{border-radius:11px;overflow:hidden;background:linear-gradient(120deg,#202029,#181820);border:1px solid #ffffff12;transition:transform .3s}.project:hover{transform:translateY(-4px)}.project-image{height:310px;border-radius:0;background-image:url('./assets/reference.png');background-size:325.08% 679.65%}.project-image.coffee{background-position:4.65% 43.05%}.project-image.home{background-position:50.49% 43.05%}.project-image.beauty{background-position:96.05% 43.05%}.project:hover .project-image{transform:none}.project-meta{padding:10px 13px;align-items:center}.project-meta .tag,.project-meta h3{display:none}.project-meta p{color:#f5f3ef;font-size:11px}.round-arrow{border:0;margin:0;font-size:22px;width:23px;height:20px}.project:hover .round-arrow{background:none;color:#b89cf5;transform:none}.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border:0}.service{display:flex;gap:23px;padding:24px 22px;border:1px solid #ffffff29;border-radius:11px;background:linear-gradient(135deg,#202027,#17171f);min-height:128px;position:relative}.service:hover{padding:24px 22px;background:#25202f;transform:translateY(-3px)}.service-number,.service-details{display:none}.service-symbol{font-size:35px;font-weight:400;color:#b694e5;flex-shrink:0}.service h3{font:500 20px 'DM Sans',sans-serif;letter-spacing:-.4px;white-space:nowrap}.service p{color:#e1dce8;font-size:11px;line-height:1.45;margin-top:6px;max-width:235px}.service>span:last-child{position:absolute;right:13px;bottom:12px;font-size:20px;color:white}.pricing-choice{display:none}.plans{gap:20px;padding-top:0}.plan{padding:22px 29px 20px;border-radius:13px;min-height:240px;display:block;background:linear-gradient(130deg,#222129,#15151d)}.plan.featured{border-color:#b18be9;box-shadow:0 12px 18px -15px #a366ff,0 0 30px #956bff0b}.plan .plan-type,.plan ul{display:none}.plan h3{font:500 18px 'DM Sans',sans-serif;letter-spacing:0}.price{font:500 45px 'DM Sans',sans-serif;letter-spacing:-2px;margin:12px 0 8px;line-height:1}.price span{color:#fff;font:400 24px 'DM Sans',sans-serif;margin-left:1px}.plan>p:not(.price):not(.plan-type){font-size:12px;color:#ede8f2;line-height:1.4;max-width:250px}.plan .button{position:absolute;right:15px;bottom:18px;padding:0;border:0;font-size:0;background:none;box-shadow:none;color:white}.plan .button span{font-size:25px}.recommended{top:17px;right:20px;font-size:10px;padding:3px 12px;font-weight:500;letter-spacing:0;background:linear-gradient(110deg,#a279ed,#d6b4fc);color:#15101f}.scope{display:none}.plan-details{margin-top:20px;border:1px solid var(--line);border-radius:8px;padding:12px 18px}.plan-details summary{font-size:11px;color:#b8a4ce}.plan-details p{font-size:11px;padding:15px 0}.plan-details ul{font-size:11px;color:#c1b5d1}.reference-cta{position:relative;text-align:center;border:1px solid #b18be955;border-radius:18px;padding:38px 20px 32px;margin-top:48px;background:radial-gradient(ellipse at 100% 0,#9161e840,transparent 45%),linear-gradient(120deg,#262330,#15141c 70%);overflow:hidden;isolation:isolate}.reference-cta h2{font:450 36px 'DM Sans',sans-serif;letter-spacing:-1px;position:relative;z-index:1}.reference-cta p{font-size:16px;color:#eeeaf3;margin:9px 0 20px;position:relative;z-index:1}.reference-cta .button{position:relative;z-index:1}.cta-orbit{position:absolute;width:115%;height:240px;border:3px solid #bfa7e5;border-radius:50%;transform:rotate(-7deg);top:75px;left:-7%;box-shadow:0 -2px 4px white,0 0 16px #956bff,inset 0 3px 12px #956bff;background:linear-gradient(10deg,#956bff22,transparent 35%);z-index:0;opacity:.65}.contact-disclosure{margin-top:18px}.contact-disclosure>summary{font-size:11px;color:#a59bb5;padding:12px}.contact-disclosure>summary:after{display:none}.contact-disclosure:not([open]){position:relative;height:0;margin-top:0}.contact-disclosure:not([open])>summary{position:absolute;right:0;top:8px;padding:0;font-size:0}.contact-disclosure:not([open])>summary span{font-size:12px;color:#847390}.contact.section{padding-top:20px;width:100%;padding-bottom:15px}.contact-box{padding:35px}.footer{margin-top:30px;padding-top:20px;padding-bottom:22px;position:relative}.footer .brand{font-size:22px;font-weight:500}.footer .spark{font-size:33px}.footer>p,.footer>span{display:none}.footer nav{display:flex;gap:28px;font-size:12px;margin-left:auto}.footer>a:last-child{font-size:0;border:1px solid #ffffff55;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.footer>a:last-child:after{content:'';font-size:19px}.reference-heading,.projects,.service-list,.plans{position:relative;z-index:1}.project-image{background-color:#211e24}
@media(min-width:1500px){.hero{min-height:600px}.hero-art{height:590px}.site-preview{top:20%;height:350px}.preview-content{height:325px}.hero h1{font-size:76px}}
@media(max-width:1100px){.hero{min-height:450px}.hero-art{height:450px;margin-left:-50px;width:calc(100% + 50px)}.hero h1{font-size:54px;letter-spacing:-2.8px;width:540px;max-width:145%}.intro{font-size:14px;max-width:320px}.site-preview{height:270px;top:20%;left:20%;width:74%}.preview-content{height:245px}.preview-content h2{font-size:30px}.coffee-cup{width:100px;height:80px;right:25px;bottom:40px}.project-image{height:225px}.service-list{gap:15px}.service{padding:20px 17px;gap:15px;min-height:96px}.service:hover{padding:20px 17px}.service-symbol{font-size:28px}.service h3{font-size:17px}.service p{font-size:10px}.plan{padding:19px 24px;min-height:183px}.price{font-size:39px}.price span{font-size:22px}.plan>p:not(.price):not(.plan-type){font-size:12px}.recommended{top:15px;right:15px}.reference-heading h2{font-size:31px}.reference-cta h2{font-size:31px}.reference-cta p{font-size:15px}.reference-cta{padding-top:27px;padding-bottom:27px;margin-top:36px}}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.header{height:74px}.brand{font-size:18px}.brand .spark{font-size:30px}.hero{grid-template-columns:1fr;padding-top:35px;overflow:hidden}.hero-copy{padding-bottom:0}.hero h1{font-size:clamp(35px,6.9vw,54px);letter-spacing:-1.7px;width:auto;max-width:100%}.intro{font-size:14px;max-width:400px;margin:23px 0}.actions .button{font-size:12px;padding:11px 18px;gap:17px}.hero-art{height:365px;width:100%;margin:8px 0 0}.site-preview{width:71%;left:20%;height:240px;top:18%}.preview-content{height:215px}.preview-content h2{font-size:29px;margin-top:25px}.preview-nav>span{font-size:6px}.coffee-cup{width:85px;height:75px;right:20px;bottom:27px}.motion-control{bottom:6px;font-size:7px}.section{padding-top:30px}.reference-heading{gap:14px;margin-bottom:18px}.reference-heading h2{font-size:26px}.reference-heading a{font-size:9px}.reference-heading b{font-size:18px;margin-left:8px}.projects{grid-template-columns:1fr;gap:16px}.project-image{height:300px}.project-meta{padding:10px 13px}.service-list{grid-template-columns:1fr;gap:12px}.service{min-height:94px;padding:20px;gap:20px}.service:hover{padding:20px}.service h3{font-size:20px}.service p{font-size:12px;max-width:260px}.service-symbol{font-size:33px}.plans{grid-template-columns:1fr;gap:15px}.plan{min-height:180px;padding:22px 25px}.plan h3{font-size:20px}.price{font-size:43px}.plan>p:not(.price):not(.plan-type){font-size:13px;max-width:260px}.recommended{top:20px}.reference-cta{margin-top:30px;padding:29px 23px}.reference-cta h2{font-size:27px;line-height:1.2}.reference-cta p{font-size:13px;line-height:1.5;margin:15px 0 20px}.reference-cta .button{font-size:12px}.footer{margin-top:30px;flex-wrap:wrap;padding-top:20px;gap:18px}.footer .brand{font-size:18px;width:auto}.footer nav{gap:17px;font-size:10px}.footer>a:last-child{display:none}.contact-box{padding:25px 20px}.contact-disclosure{width:calc(100% - 32px)}dialog .project-image{height:260px}.hero-art #orbit{inset:0 -10px}.footer .spark{font-size:28px}}
@media(max-width:390px){.hero h1{font-size:35px}.hero-art{height:320px}.site-preview{height:210px}.preview-content{height:185px}.preview-content h2{font-size:25px}.coffee-cup{width:70px;height:60px}.project-image{height:270px}.reference-heading{gap:10px}.reference-heading h2{font-size:24px}.reference-heading a{font-size:8px}.footer nav{margin-left:0}.reference-cta h2{font-size:25px}}
.hero-art #orbit,.hero-art .site-preview{display:none}.reference-artwork{position:absolute;inset:-5% -10% -3% -16%;background:url('./assets/orbital-hero.png') center/contain no-repeat;mask-image:linear-gradient(to right,transparent,#000 10%,#000 93%,transparent);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .8s ease-out;animation:orbital-float 7s ease-in-out infinite;will-change:translate}.hero-art:after{content:'';position:absolute;width:110px;height:4px;left:14%;bottom:8%;background:#ba8cff;border-radius:50%;filter:blur(10px);opacity:.5;animation:orbital-light 6s ease-in-out infinite;pointer-events:none}.motion-paused .reference-artwork,.motion-paused:after{animation-play-state:paused}.motion-paused .reference-artwork{transform:none}.motion-control{z-index:4}.hero-copy h1{position:relative}.service-symbol{line-height:1}@keyframes orbital-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes orbital-light{0%,100%{opacity:.3;translate:0 0}50%{opacity:.7;translate:130px 0}}@media(min-width:761px) and (max-width:1100px){.hero{min-height:410px}.hero-art{height:410px}.hero-copy{padding-bottom:0}.reference-artwork{inset:-10% -10% -8% -18%}}@media(max-width:760px){.reference-artwork{inset:-4% -8% -3% -12%}}@media(prefers-reduced-motion:reduce){.reference-artwork,.hero-art:after{animation:none}}
html{overflow-x:hidden}.hero-art{z-index:0}.hero-copy{z-index:3}.hero-copy h1{max-width:none}.footer .brand{order:-1}.plan ul{display:none!important}.project-prices{margin-bottom:20px}.reference-artwork{mask-image:linear-gradient(to right,transparent,#000 8%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 89%,transparent);mask-composite:intersect}.reference-cta .cta-orbit{animation:cta-drift 10s ease-in-out infinite}@keyframes cta-drift{50%{translate:0 -14px;rotate:2deg}}@media(prefers-reduced-motion:reduce){.reference-cta .cta-orbit{animation:none}}
/* Fixed chrome geometry. Only illumination changes over time. */
.reference-artwork{animation:none!important;transform:none!important;transition:none;will-change:auto}.chrome-reflections{position:absolute;inset:-5% -10% -3% -16%;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#c9a6ff33 36%,#f8f0ffa0 43%,#fff 45%,#ad76ff66 48%,transparent 57%);background-size:350% 100%;mask:url('./assets/chrome-reflection-mask.svg') center/contain no-repeat;mix-blend-mode:screen;animation:chrome-illumination 11s ease-in-out infinite;opacity:.8}.hero-art:after{width:75%;height:18%;left:15%;bottom:2%;background:radial-gradient(ellipse at 30% 55%,#b489ff70,transparent 28%),radial-gradient(ellipse at 70% 55%,#e2d1ff55,transparent 20%);background-size:200% 100%;filter:blur(12px);opacity:.5;animation:floor-illumination 12s ease-in-out infinite;translate:none!important}.motion-paused .chrome-reflections,.motion-paused:after{animation-play-state:paused}.reference-cta .cta-orbit{animation:none}@keyframes chrome-illumination{0%,100%{background-position:100% 50%;opacity:.35}50%{background-position:0% 50%;opacity:.85}}@keyframes floor-illumination{0%,100%{background-position:0% 50%;opacity:.25}50%{background-position:100% 50%;opacity:.65}}@media(min-width:761px) and (max-width:1100px){.chrome-reflections{inset:-10% -10% -8% -18%}}@media(max-width:760px){.chrome-reflections{inset:-4% -8% -3% -12%}}@media(prefers-reduced-motion:reduce){.chrome-reflections,.hero-art:after{animation:none}}
/* Requested mobile reading order: artwork, heading, supporting copy. */
@media(max-width:760px){.hero{padding-top:0}.hero-art{grid-row:1;margin:0;height:330px}.hero-copy{grid-row:2;padding:8px 0 24px}.hero h1{font-size:clamp(35px,6.9vw,54px)}.hero .intro{margin-top:20px}.work.section{padding-top:24px}.motion-control{bottom:4px}.reference-artwork,.chrome-reflections{inset:-8% -8% -7% -12%}}
@media(max-width:390px){.hero-art{height:300px}}
/* User-requested autoplay. Geometry remains still; only light reflections animate. */
.hero-art .chrome-reflections{animation:chrome-illumination 11s ease-in-out infinite!important;animation-delay:-3s!important}.hero-art:after{animation:floor-illumination 12s ease-in-out infinite!important;animation-delay:-4s!important}.hero-art.motion-paused .chrome-reflections,.hero-art.motion-paused:after{animation-play-state:paused!important}
/* Reflection layer and artwork share the exact same contain box at every size. */
.chrome-reflections{mask-size:contain;mask-position:center;mask-repeat:no-repeat;filter:none;box-shadow:none}.chrome-reflections:before,.chrome-reflections:after{display:none}.hero-art:after{display:none}
/* Wispy steam remains registered to the cup in the source artwork. */
.coffee-steam{position:absolute;inset:-5% -10% -3% -16%;z-index:1;pointer-events:none;overflow:hidden}.coffee-steam svg{display:block;width:100%;height:100%;overflow:visible}.steam-wisp{transform-box:fill-box;transform-origin:center bottom;animation:steam-rise 7s ease-in-out infinite!important;opacity:0}.steam-b{animation-delay:-2.8s!important;animation-duration:8.3s!important}.steam-c{animation-delay:-5s!important;animation-duration:6.5s!important}.motion-paused .steam-wisp{animation-play-state:paused!important}@keyframes steam-rise{0%{transform:translate(0,18px) scaleX(.7);opacity:0}20%{opacity:.6}55%{transform:translate(5px,-10px) scaleX(1);opacity:.5}100%{transform:translate(-8px,-45px) scaleX(1.35);opacity:0}}@media(min-width:761px) and (max-width:1100px){.coffee-steam{inset:-10% -10% -8% -18%}}@media(max-width:760px){.coffee-steam{inset:-8% -8% -7% -12%}}
.orbital-effects{position:absolute;inset:-5% -10% -3% -16%;width:126%;height:108%;object-fit:contain;z-index:2;pointer-events:none}.chrome-reflections,.coffee-steam{display:none!important}@media(min-width:761px) and (max-width:1100px){.orbital-effects{inset:-10% -10% -8% -18%;width:128%;height:118%}}@media(max-width:760px){.orbital-effects{inset:-8% -8% -7% -12%;width:120%;height:115%}}