/* Reference direction: immersive scale, deliberate motion and contrasting chapters. */
:root{--background:#faf9f6;--ink:#24263d;--navy:#292b56;--violet:#8d84ba;--line:#e5e3ea}
body{background:var(--background)}
.design-bar{background:#efedf4;color:#80768d}.site-header{max-width:1440px;padding:28px 48px;min-height:104px}.wordmark>span{color:#8e8bb1}.wordmark small{background:#eae7f0;color:#83769b}
.studio-home{max-width:1440px;padding:0 48px 40px;overflow:clip}
.studio-hero{grid-template-columns:1.04fr 1fr;gap:45px;padding:27px 0 70px;align-items:center}
.studio-hero:before{inset:-60px -48px -20px 0;background:radial-gradient(ellipse at 80% 40%,#deddf180,transparent 55%),radial-gradient(ellipse at 50% 90%,#f3dfd540,transparent 55%)}
.studio-copy{position:relative;z-index:2;padding-bottom:15px}.studio-copy h1{font-size:clamp(56px,5.3vw,77px);line-height:1.025;letter-spacing:-3px;color:#2b2d48;font-weight:400}.studio-copy h1>span{color:#8f87b4;display:block;white-space:nowrap;font-size:.88em;letter-spacing:-2.8px}
.studio-kicker{color:#807998;letter-spacing:1.6px;margin-bottom:26px}.studio-kicker>span{background:#a19ab9;box-shadow:0 0 0 5px #eeeaf3}.studio-description{max-width:360px;color:#787386;margin-top:29px}.studio-primary{background:#292b56;color:#fff;box-shadow:0 10px 25px #292b561b}.studio-primary:hover{background:#404169}.video-link{color:#746b88}.studio-start-hint{color:#897e97}.studio-facts>span{color:#817690}.studio-disclaimer{color:#908698}
.studio-result{margin-left:24px;animation:none;padding:0 0 0 0}.result-topline{padding:0 3px 14px}.result-topline>span:first-child{color:#91859b}.sample-tag{background:#ffffff50;color:#94879d}
.reveal-canvas{aspect-ratio:.96;border-radius:28px;box-shadow:0 30px 70px -35px #51443e70}.reveal-image{object-position:center 49%}.result-orbit{inset:-35px -25px 0 -60px;border-color:#d8d4e6;transform:rotate(-18deg)}
.eco-origin{position:absolute;z-index:4;top:57px;left:-56px;transform:rotate(-9deg);width:119px;padding:6px 6px 10px;background:#fffdfa;border:1px solid #eee8e1;border-radius:13px;box-shadow:0 12px 35px #45332626;pointer-events:none;animation:origin-in 1.2s ease both}.eco-origin img{border-radius:8px;aspect-ratio:1;width:100%;height:auto;object-fit:cover}.eco-origin>span{font-size:9px;display:block;text-align:center;margin-top:8px;color:#8b796c;letter-spacing:.1px}
.result-controls{padding-top:18px}.result-modes{background:#ebe8f0;border-color:#e4deeb}.result-modes button{color:#8a7b9b}.result-modes button[aria-pressed="true"]{color:#665277}
.reveal-divider>span{color:#8c799b}.reveal-labels>span:last-child{color:#766487}.drag-hint{color:#8d829c}.reveal-labels{inset:auto 17px 20px}
.transformation-story{position:relative;isolation:isolate;display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:center;background:#20253c;border-radius:32px;overflow:hidden;padding:64px 65px;margin:0 0 30px;color:#fff}
.transformation-story:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 80% 40%,#77769a48,transparent 60%),radial-gradient(ellipse at 5% 100%,#41435a60,transparent 65%)}
.story-copy .studio-kicker{font-size:9px;color:#a8a4bd;letter-spacing:1.5px;margin-bottom:31px}.story-copy h2{font-size:clamp(48px,5vw,70px);line-height:1.02;letter-spacing:-2px;font-weight:400;color:#f2eeed}.story-copy h2>span{color:#bbb1ce}.story-copy>p:not(.studio-kicker){font-size:15px;line-height:1.9;color:#bbb7c7;margin-top:26px}
.story-play{display:flex;align-items:center;gap:11px;font-size:12px;background:transparent;border:0;color:#e4dae9;padding:0;min-height:48px;margin-top:24px}.story-play>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #686378;border-radius:50%;font-size:18px;padding-left:2px}.story-play svg{width:17px;height:17px;margin-left:10px;color:#b1a3c5}.story-play:hover{color:white}.story-copy small{font-size:9px;display:block;color:#7f7c94;margin-top:22px}
.story-stage{position:relative;display:block;width:100%;aspect-ratio:1.12;padding:0;border:1px solid #ffffff26;border-radius:23px;overflow:hidden;background:#3c383a;box-shadow:0 30px 70px #0b0d1c65;transition:transform .6s,box-shadow .6s}
.story-stage>img{height:100%;width:100%;object-fit:cover;object-position:center 48%;filter:brightness(.83)}.story-eco{position:absolute;inset:0;clip-path:inset(0 63% 0 0)}.story-eco img{height:100%;width:100%;object-fit:cover;filter:brightness(.85)}.story-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#181622a8)}.story-play-orb{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);height:66px;width:66px;border:1px solid #ffffff80;backdrop-filter:blur(10px);background:#ffffff24;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:34px;padding-left:4px;transition:background .3s,transform .3s}.story-stage:hover{transform:translateY(-5px);box-shadow:0 35px 75px #0b0d1c90}.story-stage:hover .story-play-orb{background:#ffffff45;transform:translate(-50%,-50%) scale(1.08)}.story-caption{position:absolute;z-index:2;bottom:25px;left:25px;text-align:left;color:#f1e9e4;font-size:13px}.story-caption i{display:block;font-style:normal;font-size:7px;letter-spacing:1.2px;margin-top:9px;color:#d3c5d5}
.collection-heading{padding-top:50px;border:0}.collection-heading h2{color:#39364b;font-size:40px}.collection-heading h2 span{color:#9a90b2}.studio-file{border-color:#e7e1e9;background:#fffefc}.studio-file strong{color:#63546f}.studio-file small{color:#8f7f9b}.studio-bottom{background:#eeebf2;border-color:#e6dfe9}.bottom-intro h2{color:#665573}
@keyframes origin-in{from{opacity:0;transform:translate(12px,12px) rotate(-3deg)}to{opacity:1;transform:translate(0,0) rotate(-9deg)}}
@media(prefers-reduced-motion:no-preference){.motion-ready .scroll-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1)}.motion-ready .scroll-reveal.is-visible{opacity:1;transform:translateY(0)}.studio-copy h1{animation:headline-in .85s ease both}.studio-result>.reveal-canvas{animation:portrait-in 1s ease both}@keyframes headline-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes portrait-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}}
@media(max-width:1100px){.studio-copy h1{font-size:62px}.studio-copy h1>span{font-size:.83em;letter-spacing:-2px}.studio-hero{gap:25px}.studio-result{margin-left:18px}.eco-origin{width:100px;left:-35px;top:55px}.transformation-story{padding:48px 44px;gap:36px}.story-copy h2{font-size:55px}.story-copy .studio-kicker{font-size:8px;letter-spacing:1px}}
@media(max-width:800px){.site-header{padding:24px;min-height:90px}.studio-home{padding:0 24px 30px}.studio-hero{padding:24px 0 45px;gap:20px}.studio-copy h1{font-size:50px;letter-spacing:-2px}.studio-copy h1>span{font-size:.83em;letter-spacing:-1.6px}.studio-description{font-size:13px}.reveal-canvas{aspect-ratio:.78;border-radius:23px}.eco-origin{width:79px;left:-25px;top:51px;padding:5px}.eco-origin>span{font-size:7px}.transformation-story{padding:35px 30px;border-radius:26px;gap:25px}.story-copy h2{font-size:43px;letter-spacing:-1.5px}.story-copy>p:not(.studio-kicker){font-size:12px;margin-top:20px}.story-copy .studio-kicker{font-size:7px;letter-spacing:.8px;margin-bottom:23px}.story-stage{aspect-ratio:.85}.story-play{font-size:10px;gap:7px}.story-play svg{margin-left:0}.story-caption{left:15px;bottom:18px;font-size:10px}.story-copy small{font-size:8px}}
@media(max-width:600px){.site-header{padding:20px 22px 14px;min-height:0}.studio-home{padding:0 22px 26px}.studio-hero{padding:23px 0 38px;gap:16px}.studio-copy h1{font-size:clamp(46px,12.9vw,71px);letter-spacing:-2px;line-height:1.04}.studio-copy h1>span{font-size:.84em;letter-spacing:-1.6px;white-space:normal}.studio-description{font-size:14px;max-width:none;margin:5px 0 0}.studio-result{margin:8px 0 0 10px}.reveal-canvas{aspect-ratio:1.06;border-radius:22px}.eco-origin{width:76px;top:45px;left:-17px;transform:rotate(-8deg);padding:5px 5px 8px}.eco-origin>span{font-size:6px}.result-orbit{inset:-15px -12px 0 -25px}.result-topline{padding:0 2px 12px}.result-topline>span:first-child{font-size:8px}.sample-tag{font-size:6px}.reveal-labels{inset:auto 12px 16px}.reveal-labels>span{font-size:8px}.studio-actions{margin:4px 0 0}.studio-kicker{font-size:8px;letter-spacing:1.2px;margin:0}.transformation-story{grid-template-columns:1fr;padding:32px 24px;gap:28px;border-radius:25px;margin:0 -4px 16px}.story-copy .studio-kicker{font-size:7px;letter-spacing:1.1px;margin-bottom:23px}.story-copy h2{font-size:51px;letter-spacing:-1.7px}.story-copy>p:not(.studio-kicker){font-size:13px;margin-top:20px}.story-play{font-size:11px;margin-top:19px}.story-copy small{font-size:8px;margin-top:13px}.story-stage{aspect-ratio:1.12;border-radius:17px}.story-caption{font-size:10px;left:17px;bottom:18px}.story-play-orb{height:52px;width:52px;font-size:28px}.collection-heading{padding-top:28px}.collection-heading h2{font-size:30px}.collection-heading .studio-kicker{margin-bottom:13px}}
@media(max-width:360px){.site-header{padding-inline:18px}.studio-home{padding-inline:18px}.studio-copy h1{font-size:43px}.studio-copy h1>span{font-size:.84em}.studio-kicker{font-size:7px}.studio-result{margin-left:8px}.studio-actions{gap:10px}.story-copy h2{font-size:45px}.transformation-story{padding-inline:21px}}
@media(prefers-reduced-motion:reduce){.eco-origin,.story-stage,.story-play-orb{animation:none;transition:none}.story-stage:hover{transform:none}}
@media(prefers-reduced-motion:no-preference){.transformation-story.is-visible .story-eco{animation:story-reveal 5s cubic-bezier(.25,.6,.2,1) 1s both}@keyframes story-reveal{0%,12%{clip-path:inset(0 0 0 0)}85%,100%{clip-path:inset(0 100% 0 0)}}}
@media(min-width:601px) and (max-width:1100px){.studio-copy h1>span{font-size:.7em}}
@media(max-width:600px){.studio-hero{grid-template-columns:1fr}.studio-copy{display:contents}}