/* Studio art direction: quiet surfaces, generous type, and a gallery for the work. */
:root{--bg:#101114;--panel:#18191f;--text:#f4f1eb;--muted:#b1b1bc;--lime:#b9afff;--line:#ffffff16;--violet:#b9afff}
body{background:radial-gradient(ellipse at 80% 3%,#756aa414,transparent 25%),var(--bg);color:var(--text)}
body:before{display:none}
::selection{background:#b9afff;color:#101114}
.wrap{width:min(1240px,calc(100% - 96px))}
header.wrap{height:108px;border-bottom:1px solid var(--line)}
.brand{letter-spacing:0;font-size:16px;font-weight:600;color:var(--text)}
.brand-name{display:flex;flex-direction:column;gap:5px}.brand-name small{font:400 12px/1.4 'DM Sans',sans-serif;color:var(--muted);letter-spacing:.3px}
.header-avatar{width:46px;height:46px;flex-basis:46px;outline:1px solid #ffffff30;box-shadow:0 0 0 5px #ffffff04}
nav{gap:32px;font-size:15px}nav>a{color:#c1c0c8}nav>a:hover{color:#fff}
.nav-cta{background:#f4f1eb;color:#17171d;border:1px solid #f4f1eb;border-radius:8px;padding:11px 20px}.nav-cta:hover{color:#17171d;background:#dcd5ff}
.hero{grid-template-columns:1fr 1.05fr;gap:56px;min-height:0;padding-block:76px 64px}
.hero h1{font-size:clamp(64px,6.2vw,90px);font-weight:500;letter-spacing:-4.5px;line-height:1.02}
.hero h1 em{background:none;color:#c1b4f0;position:relative}
.eyebrow,.hero .eyebrow{color:#c7bbeb;font-size:12px;letter-spacing:1.7px;line-height:1.7}
.hero .eyebrow{max-width:none;letter-spacing:1.2px;margin-bottom:25px}
.dot{background:#c7bbeb;box-shadow:none;width:6px;height:6px}
.hero .intro{font-size:18px;line-height:1.8;color:#b8b7c1;max-width:440px;margin-block:26px 30px}
.primary{border-radius:8px;background:#c7bbeb;color:#17141f;border:1px solid #c7bbeb;box-shadow:none;transition:transform .2s,background .2s}
.primary:hover{background:#ded4ff;color:#17141f;box-shadow:none;transform:translateY(-2px)}
.actions{gap:24px}.button{padding:16px 22px;min-height:52px}.text-link{border-color:#ffffff35;color:#e1dde9}
.hero-note{list-style:none;display:flex;flex-wrap:wrap;gap:9px 16px;padding:22px 0 0;margin:30px 0 0;border-top:1px solid var(--line);font:400 12px/1.6 'DM Sans',sans-serif;color:#a7a5b2;letter-spacing:.2px;max-width:450px}
.hero-note li{display:flex;align-items:center;gap:16px}.hero-note li:not(:last-child):after{content:'·';color:#65626f}
.showcase,.showcase:hover{transform:none;border-radius:16px;border:1px solid #ffffff20;background:#1b1c22;box-shadow:0 24px 60px #0005;overflow:hidden}
.showcase:before,.orbit-label{display:none}
.showcase-top{padding:18px 20px;color:#aaa7b8;font-size:11px;letter-spacing:1.7px}
.hero-arrows button{width:36px;height:36px;border-color:#ffffff20;background:transparent;color:#e5e1ec}
.showcase-art{aspect-ratio:1.48;background:#111216}
.showcase-art img{object-position:center}
.art-shade{background:linear-gradient(0deg,#101114 0%,#101114b8 20%,transparent 68%)}
.showcase-caption{left:24px;right:24px;bottom:22px;gap:8px}
.showcase-caption>span:first-child{font-size:10px;letter-spacing:1.8px;color:#dbd0f4}
.showcase-caption strong{font-size:30px;font-weight:500;max-width:440px;letter-spacing:-.9px}
.showcase-link{font-size:13px;color:#d1cbdc}
.hero-video-controls{padding:14px 20px 0;grid-template-columns:1fr 1fr;gap:10px}
.hero-video-controls button,.hero-video-controls .hero-mute{background:#25262e;border:1px solid #ffffff16;border-radius:7px;color:#e5e1ec;font-size:13px;min-height:44px;padding:9px 12px}
.hero-video-controls button:hover{background:#34303f}
.world-select{padding:14px 20px 18px;gap:9px}
.world-select button{border:0;border-radius:6px;width:40px;height:40px;background:transparent;color:#b8b4c2;font-size:12px}
.world-select button[aria-pressed=true]{background:#c7bbeb;border:0;color:#17141f}
.world-select .rotation-toggle{border:1px solid #ffffff18;border-radius:6px;font-size:12px}
.proof{border:0;border-block:1px solid var(--line);border-radius:0;background:none;padding:32px 0;gap:30px}
.proof>div:not(:first-child){padding-left:24px;border-left:1px solid var(--line)}
.proof strong{font-size:28px;font-weight:500;color:#f0eaf8;letter-spacing:-1px}.proof span:not(.proof-label){color:#a9a6b3;font-size:14px}.proof-label{font-size:11px;letter-spacing:1.3px;color:#c4b8e3}.proof a{font-size:14px}
.section{padding-block:100px}.section-head{margin-bottom:40px;gap:48px}.section-head h2,h2{font-size:clamp(36px,4vw,52px);font-weight:500;line-height:1.12;letter-spacing:-2px}
.section-head .eyebrow{margin-bottom:20px}.section-head>p{color:#aaa7b3;font-size:16px;line-height:1.8;max-width:330px}
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.service-grid article,.service-grid article:last-child,.service-grid article:nth-child(2),.service-grid article:nth-child(-n+2){padding:32px;border:1px solid var(--line);border-radius:12px;background:#191a20;box-shadow:none;min-height:285px}
.service-grid article:before{display:none}.service-grid article:hover{border-color:#b9afff55;background:#1d1d25;transform:translateY(-3px);box-shadow:none}
.service-number{font-size:11px;color:#aaa7b4;letter-spacing:1.2px;padding-right:50px}
.service-icon{position:absolute;right:30px;top:25px;width:40px;height:40px;border-radius:10px;background:#c7bbeb0a;display:grid;place-items:center;color:#c7bbeb}.service-icon svg{width:25px;height:25px}
.service-grid h3{font-size:26px;line-height:1.24;letter-spacing:-.7px;margin:28px 0 14px;max-width:440px;color:#f2eef7}
.service-grid p{font-size:17px;line-height:1.75;max-width:480px;color:#b0adbb;margin:0 0 25px;min-height:0}
.service-grid .tag{font-size:11px;letter-spacing:1.4px;color:#c7bbeb}
.portfolio{padding-top:24px}.portfolio-toolbar{margin-bottom:32px;padding-block:18px;border-block:1px solid var(--line)}
.project-filters button{border:1px solid transparent;background:none;color:#b1adbd;border-radius:7px;padding:11px 16px;font-size:14px;min-height:44px}
.project-filters button[aria-pressed=true]{background:#c7bbeb;color:#17141f;border-color:#c7bbeb}#project-count{color:#aaa6b4;font-size:13px}
.portfolio-grid{gap:28px;grid-auto-rows:1fr}
.project{border-radius:14px;border:1px solid var(--line);background:#191a20;box-shadow:none;overflow:hidden}
.project:hover{border-color:#b9afff55;box-shadow:0 20px 45px #0003;transform:translateY(-3px)}
.project-media{background:#111216;border-bottom:1px solid var(--line);aspect-ratio:16/9}
.project-media img{object-fit:contain}.project-copy{padding:28px 30px 24px}
.project-copy .eyebrow{color:#b5aacd;font-size:11px;letter-spacing:1.5px;margin-bottom:14px}
.project h3{font-size:29px;line-height:1.18;letter-spacing:-.9px;color:#f3eff8;min-height:2.36em}
.project-description,.project-role p{font-size:16px;line-height:1.8;color:#b8b4c2}
.project-role{border-left:2px solid #a99bc8}.project-details{padding-top:24px}.project-copy h4{font-size:11px;letter-spacing:1.4px;color:#c9c3d4}
.project-tags{min-height:78px;margin:12px 0 18px;gap:7px;align-content:start}.project-tags li{background:#ffffff04;border:1px solid #ffffff12;border-radius:5px;color:#c6c0d0;font-size:12px;padding:6px 10px;line-height:1.5}
.project-links{border-color:var(--line);min-height:66px;padding-top:16px;gap:10px 24px;align-items:start}.project-links a{font-size:14px;min-height:44px;color:#d4c8ef;border:0}
.portfolio-note{font-size:13px;color:#a29dab;line-height:1.7;margin-top:26px;max-width:850px}
.preview-toggle,.portfolio-video-controls .preview-toggle{border:1px solid #ffffff35;background:#111216e8;color:#f5f1fa;border-radius:7px;box-shadow:none;font-size:13px;min-height:48px;backdrop-filter:blur(8px)}
.preview-toggle:hover{background:#34303f}.video-playing:before{background:#111216d9;border:1px solid #ffffff20;font-size:10px;letter-spacing:1.2px;padding:5px 9px;border-radius:5px}
.about{background:#17181e;border-block:1px solid var(--line)}.about-grid{grid-template-columns:.8fr 1fr;gap:100px}
.profile-photo,.profile-photo:hover{transform:none;max-width:370px;background:#101114;border:1px solid #ffffff20;border-radius:14px;box-shadow:none}.profile-photo img{aspect-ratio:1/1.12;object-fit:cover}.profile-photo figcaption{padding:18px 20px;font-size:14px;color:#d7d0e2;letter-spacing:.2px}
.about-copy>p{font-size:18px;line-height:1.8;max-width:550px;color:#bdb7c7}.about h2 em{color:#c7bbeb}.about-copy .source-note{font-size:12px;color:#9b95a7;line-height:1.7}.profile-links{gap:20px}.profile-links a{font-size:15px}
.steps{gap:32px}.steps article{border-color:#ffffff25;padding-top:24px}.steps article>span{background:none;border-color:#ffffff25;color:#c7bbeb;border-radius:9px;width:40px;height:40px}.steps h3{font-size:25px;font-weight:500;letter-spacing:-.7px}.steps p{font-size:17px;color:#afa9bb;line-height:1.8}
.contact{background:#1d1c26;border:1px solid #c7bbeb35;border-radius:16px;gap:55px;padding:48px;grid-template-columns:.85fr 1.15fr;margin-bottom:50px}.contact:after{display:none}.contact h2{font-size:clamp(32px,3.3vw,45px);line-height:1.12;color:#f5f0fb}.contact p:not(.eyebrow){font-size:17px;color:#bbb3c9;line-height:1.7}
.contact-links{gap:12px}.contact-links .email-contact{background:#ffffff04;border:1px solid #ffffff1f;border-radius:10px;color:#f4effa;box-shadow:none;min-height:100px;padding:18px 16px;gap:12px}
.contact-links .email-contact:hover{background:#c7bbeb12;border-color:#c7bbeb80;transform:translateY(-2px)}.contact-links .email-label small{font-size:12px;color:#b9b0c8;margin-bottom:3px}.contact-links .email-label>span{font-size:15px;font-weight:500;line-height:1.5}.contact-links .email-contact>svg{border-radius:8px;padding:5px}
footer{border-top:1px solid var(--line);padding-top:30px;padding-bottom:32px;font-size:13px;color:#aaa2b5}footer .brand{font-size:13px;letter-spacing:.5px}
.video-loading{background:#17151feb;border-color:#c7bbeb60}
@media(min-width:1500px){.hero{padding-block:90px 80px}.showcase-art{aspect-ratio:1.5}}
@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.hero{gap:30px;padding-block:60px}.hero h1{font-size:64px;letter-spacing:-3px}.hero .eyebrow{font-size:10px}.hero .intro{font-size:17px}.showcase-caption strong{font-size:26px}.showcase-art{aspect-ratio:1.2}.brand{font-size:14px}nav{gap:20px}.proof{gap:20px}.proof strong{font-size:25px}.proof>div:first-child{border-bottom:0;padding-bottom:0}.proof>div:not(:first-child){padding-left:16px}.about-grid{gap:55px}.contact{grid-template-columns:1fr;gap:30px}.contact h2{max-width:700px}.contact-links .email-contact{min-height:90px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:38px}.hero-copy{max-width:600px}.hero h1{font-size:clamp(56px,10vw,78px)}.hero .eyebrow{font-size:12px}.hero .intro{max-width:520px}.hero-note{max-width:550px}.showcase{width:100%;margin:0}.showcase-art{aspect-ratio:16/10}.showcase-caption strong{font-size:30px}.showcase-top{font-size:11px}.proof strong{font-size:24px}.section{padding-block:70px}.portfolio{padding-top:8px}.section-head{gap:22px}.service-grid article,.service-grid article:last-child{padding:26px}.service-grid h3{font-size:24px}.service-icon{right:22px;top:22px}.about-grid{gap:38px}.contact{padding:32px}.project-copy{padding:24px}}
@media(max-width:680px){.wrap{width:calc(100% - 36px)}header.wrap{height:auto;min-height:0;padding-block:22px 16px;gap:20px}.brand-name small{font-size:11px}.header-avatar{width:40px;height:40px;flex-basis:40px}header nav{font-size:15px;gap:10px;align-items:center}.nav-cta{padding:9px 14px}.hero{padding-block:40px 46px}.hero h1{font-size:clamp(55px,13vw,78px);letter-spacing:-3px}.hero .eyebrow{font-size:11px;letter-spacing:1px}.hero .intro{font-size:17px;margin-block:24px}.hero-note{margin-top:24px;font-size:12px;gap:8px 12px;padding-top:18px}.hero-note li{gap:12px}.actions{gap:20px}.actions .button{font-size:15px;padding:14px 18px}.actions .text-link{font-size:15px}.showcase-top{padding:14px 16px}.showcase-caption{left:20px;right:20px;bottom:18px}.showcase-caption strong{font-size:26px}.showcase-caption>span:first-child{font-size:10px}.showcase-link{font-size:13px}.hero-video-controls{padding-inline:16px}.world-select{padding:12px 16px 16px;gap:7px}.hero-arrows button{width:44px;height:44px}.proof{grid-template-columns:1fr 1fr;padding-block:26px;gap:25px 18px}.proof>div:first-child{grid-column:1/-1;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.proof>div:not(:first-child){padding-left:14px}.proof strong{font-size:26px}.proof span:not(.proof-label){font-size:14px}.proof-label{font-size:10px}.section-head{flex-direction:column;align-items:start;margin-bottom:30px}.section-head h2,h2{font-size:36px;letter-spacing:-1.6px}.section-head>p{font-size:16px;max-width:100%}.service-grid{grid-template-columns:1fr;gap:14px}.service-grid article,.service-grid article:last-child{min-height:0;padding:28px 24px}.service-grid h3{font-size:25px;max-width:95%;margin-top:32px}.service-grid p{font-size:17px}.portfolio-toolbar{gap:14px;padding-block:16px}.project-filters{gap:5px}.project-filters button{font-size:13px;padding:10px 12px}.portfolio-grid{grid-template-columns:1fr;gap:24px;grid-auto-rows:1fr}.project h3{font-size:26px}.project-tags{min-height:78px}.project-links{min-height:66px;flex-direction:row;gap:10px 18px}.about-grid{grid-template-columns:1fr}.profile-photo{margin:0;max-width:360px;width:100%}.about-copy>p{font-size:17px}.steps{grid-template-columns:1fr;gap:30px}.steps p{max-width:100%}.contact{padding:28px 22px;gap:26px;border-radius:12px}.contact h2{font-size:34px}.contact-links{grid-template-columns:1fr;gap:12px}.contact-links .email-contact{min-height:88px}.contact-links .email-label>span{font-size:16px}footer{flex-direction:column;align-items:flex-start;gap:16px}}
@media(max-width:380px){header nav{font-size:14px;gap:4px}.nav-cta{padding-inline:10px}.hero h1{font-size:51px}.hero .actions{flex-direction:row;gap:15px}.hero .actions .button{padding-inline:14px;font-size:14px}.hero .actions .text-link{font-size:14px}.world-select{gap:5px;padding-inline:12px}.world-select button{width:36px;height:40px}.world-select .rotation-toggle{min-width:54px}.showcase-caption strong{font-size:24px}.project-copy{padding:23px 20px}.project-filters button{padding-inline:10px;font-size:12px}.contact h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){.service-grid article:hover,.project:hover,.primary:hover{transform:none}}

/* Small, finite motion: no animation loop, extra media, or render-time JavaScript. */
@keyframes studio-enter{from{opacity:.65;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .hero-copy{animation:studio-enter .6s ease-out backwards}
 .showcase{animation:studio-enter .65s .08s ease-out backwards}
 .reveal-in{animation:studio-enter .55s ease-out backwards}
 .service-grid article:nth-child(2).reveal-in,.steps article:nth-child(2).reveal-in{animation-delay:70ms}
 .service-grid article:nth-child(3).reveal-in,.steps article:nth-child(3).reveal-in{animation-delay:100ms}
 .service-grid article:nth-child(4).reveal-in{animation-delay:140ms}
 .button>span:last-child,.text-link>span,.nav-cta>span,.service-icon,.profile-photo img{transition:transform .22s ease}
 .button:active,.hero-video-controls button:active,.preview-toggle:active,.world-select button:active{transform:scale(.98)}
}
header nav>a:not(.nav-cta){position:relative}
header nav>a:not(.nav-cta):after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#c7bbeb;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
header nav>a:not(.nav-cta):focus-visible:after{transform:scaleX(1)}
.project-filters button,.hero-video-controls button,.preview-toggle,.nav-cta{transition:background-color .2s,border-color .2s,color .2s,transform .2s}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 header nav>a:not(.nav-cta):hover:after{transform:scaleX(1)}
 .button:hover>span:last-child,.nav-cta:hover>span{transform:translate(2px,-2px)}
 .text-link:hover>span{transform:translateX(3px);display:inline-block}
 .service-grid article:hover .service-icon{transform:translateY(-2px) rotate(-4deg)}
 .profile-photo:hover img{transform:scale(1.015)}
 .project-filters button:hover{transform:translateY(-1px)}
}
.world-select .rotation-toggle{width:auto;min-width:124px;min-height:44px;padding:8px 12px;line-height:1.4}
@media(max-width:680px){.world-select .rotation-toggle{flex-basis:100%;margin-left:0;margin-top:3px;min-height:44px}.world-select{justify-content:center}}
@media(prefers-reduced-motion:reduce){.hero-copy,.showcase,.reveal-in{animation:none!important;translate:none!important}header nav>a:not(.nav-cta):after{transition:none}}

/* Readable professional title above the hero headline. */
.hero .eyebrow{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.7px;color:#ded5f5;max-width:100%;text-wrap:balance}
.hero .eyebrow .dot{width:7px;height:7px;vertical-align:middle}
@media(max-width:680px){.hero .eyebrow{font-size:16px;line-height:1.65;letter-spacing:.5px;margin-bottom:24px}}

/* Project recognition: warm gold, clearly attributed studio milestones. */
.recognition{scroll-margin-top:24px;margin-top:64px;padding:36px;display:grid;grid-template-columns:1fr 1.4fr;gap:36px;border:1px solid #d9bb7138;border-radius:16px;background:radial-gradient(ellipse at 0 0,#c9a75a12,transparent 65%),#18191d}
.recognition-kicker{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:#e2c786;font-size:12px;letter-spacing:1.4px;font-weight:600}.recognition-kicker svg{width:24px;height:24px;flex:none}
.recognition h2{font-size:clamp(30px,3vw,40px);line-height:1.15;letter-spacing:-1.2px;margin:0 0 18px;font-weight:500}.recognition-intro>p:last-child{font-size:16px;line-height:1.75;color:#bdb9b0;margin:0;max-width:390px}.recognition-intro>p a{color:#f1dfb2;text-decoration:underline;text-underline-offset:4px}
.recognition-milestones{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.recognition-milestone{display:flex;flex-direction:column;padding:24px;border:1px solid #d9bb7126;border-radius:10px;background:#ffffff03;text-decoration:none;color:inherit;transition:background .2s,border-color .2s,transform .2s}.recognition-year{display:flex;justify-content:space-between;color:#e2c786;font-size:14px;letter-spacing:1px;margin-bottom:24px}.recognition h3{font-size:23px;line-height:1.25;letter-spacing:-.5px;font-weight:500;margin:0 0 8px}.recognition-milestone p{font-size:16px;color:#e2c786;margin:0 0 16px}.recognition-milestone small{font-size:14px;line-height:1.7;color:#bdb9b0;margin-bottom:20px}.recognition-source{font-size:14px;line-height:1.5;color:#eee0bd;margin-top:auto}.recognition a:focus-visible,.project-recognition:focus-visible{outline:2px solid #e2c786;outline-offset:5px}
.project-recognition{display:flex;flex-wrap:wrap;gap:6px;color:#e2c786;font-size:13px;line-height:1.6;text-decoration:none;margin:-4px 0 16px}.project-recognition:hover{text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){.recognition-milestone:hover{background:#d9bb710b;border-color:#d9bb7160;transform:translateY(-3px)}}
@media(max-width:1000px){.recognition{grid-template-columns:1fr;gap:28px}.recognition-intro>p:last-child{max-width:650px}}
@media(max-width:680px){.recognition{padding:24px 20px;margin-top:40px}.recognition-milestones{grid-template-columns:1fr}.recognition-milestone{padding:22px}.recognition-year{margin-bottom:16px}.recognition h3{font-size:24px}.recognition-milestone small,.recognition-source{font-size:15px}}
@media(prefers-reduced-motion:reduce){.recognition-milestone{transition:none;transform:none!important}}

.hero h1.independent-headline{font-size:clamp(48px,4.8vw,68px);letter-spacing:-2.5px;line-height:1.08}
@media(max-width:760px){.hero h1.independent-headline{font-size:clamp(38px,10.5vw,68px);letter-spacing:-1.8px}}