@font-face{font-family:StudioDisplay;src:url(assets/display.ttf) format('truetype');font-display:swap;font-weight:500}@font-face{font-family:StudioText;src:url(assets/text.ttf) format('truetype');font-display:swap;font-weight:400}
:root{--ink:#1b1714;--wine:#751b2c;--paper:#f8f0e5;--body:18px;--display:clamp(56px,7.8vw,130px)}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);scrollbar-color:var(--wine) var(--paper)}body{margin:0;font:var(--body)/1.5 StudioText,Arial,sans-serif}::selection{background:var(--wine);color:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:.22em}button:focus-visible,a:focus-visible,iframe:focus-visible{outline:3px solid var(--wine);outline-offset:6px}header{position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 6.5vw;pointer-events:none}.brand{font-family:StudioText,sans-serif;font-weight:700;font-size:clamp(24px,2vw,34px);letter-spacing:-.04em;text-decoration:none}header a,header button{pointer-events:auto}nav{display:flex;align-items:center;gap:36px}nav button{border:0;background:none;padding:9px}nav .contact{background:var(--wine);color:#fff5ea;padding:10px 26px;border-radius:30px;text-decoration:none;font-size:16px}nav a:hover{background:#571322}nav button:hover{text-decoration:underline;text-underline-offset:6px}.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate}.art{position:absolute;inset:0;will-change:transform;transform-origin:50% 70%}.art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.wash{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}.intro{position:absolute;inset:0;pointer-events:none}.intro h1{position:absolute;top:9%;left:6.4%;margin:0;font:500 var(--display)/.78 StudioDisplay,Georgia,serif;letter-spacing:-.04em}.intro p{position:absolute;left:66.2%;right:2%;top:14.8%;margin:0;font-size:clamp(16px,1.5vw,25px);line-height:1.35;letter-spacing:-.035em}.device{position:absolute;top:0;left:0;will-change:transform;transform-origin:50% 50%;transform-style:preserve-3d}.phone{width:360px;height:720px;z-index:7}.phone-shell{position:absolute;inset:0;border-radius:49px;background:#171714;padding:12px;box-shadow:inset 0 0 0 3px #b7ada1,inset 0 0 0 7px #3b3b37,6px 18px 21px #250f124a}.phone iframe{width:100%;height:100%;border:0;background:#f5f0e8;border-radius:38px;display:block}.notch{position:absolute;width:100px;height:22px;top:12px;left:130px;background:#171714;border-radius:0 0 16px 16px;pointer-events:none}.tablet{width:960px;height:560px;z-index:9}.tablet-shell{position:absolute;inset:0;border-radius:29px;padding:20px;background:#1c1d1b;box-shadow:inset 0 0 0 3px #b7b5aa,0 13px 0 #53534a,0 28px 28px #28090755}.tablet video{height:100%;width:100%;display:block;object-fit:contain;background:#0d0d0c;border-radius:11px}.monitor{width:1100px;height:650px;z-index:6}.monitor-shell{position:absolute;inset:0;padding:20px 19px 35px;background:#242725;border-radius:16px;box-shadow:inset 0 0 0 3px #888579,0 15px 22px #210c1533}.monitor img{width:100%;height:100%;object-fit:cover;display:block}.monitor a{display:block;width:100%;height:100%}.monitor-foot{position:absolute;top:100%;left:39%;width:22%;height:17%;background:linear-gradient(90deg,#353831,#5a5b51 65%,#343730);transform-origin:top;box-shadow:0 2px 0 #908d80}.monitor-foot:after{content:'';position:absolute;bottom:-8px;left:-80%;width:260%;height:15px;border-radius:4px;background:#3b3c36;box-shadow:0 4px 0 #b3ad9b,0 12px 14px #2009094d}.screen-hit{position:absolute;inset:0;border:0;background:transparent;border-radius:20px;color:white;display:grid;place-items:center}.screen-hit:hover{background:#fff1da0d;box-shadow:0 0 0 2px #fff9eaaa}.play-icon{width:100px;height:100px;filter:drop-shadow(0 4px 6px #0008)}.play-icon circle{fill:#17171499;stroke:#fff;stroke-width:2}.play-icon path{fill:white}.device-label{position:absolute;white-space:nowrap;top:calc(100% + 20px);left:50%;transform:translateX(-50%);color:#fff4e6;font-size:26px;pointer-events:none;text-shadow:0 1px 2px #320a15}.monitor .device-label{top:calc(117% + 25px);font-size:36px}.phone .device-label{font-size:48px;top:calc(100% + 36px)}.tablet .device-label{display:none}.work-copy{position:absolute;left:7%;top:32%;width:30%;opacity:0;pointer-events:none}.work-copy h2{font:500 clamp(44px,4.5vw,72px)/.95 StudioDisplay,Georgia,serif;margin:0 0 24px;letter-spacing:-.035em}.work-copy p{font-size:18px;max-width:29ch}.work-copy a{display:inline-block;margin-top:18px;font-size:16px;color:var(--wine)}.back{position:absolute;left:6.5%;bottom:6%;padding:12px 0;border:0;background:none;color:var(--wine);font-size:16px}.hint{position:absolute;bottom:12px;left:0;width:100%;text-align:center;margin:0;color:#fff4e6;font-size:13px;text-shadow:0 1px 2px #321017}.scroll-route{height:400svh}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:root{--wine-line:color-mix(in srgb,var(--wine) 25%,transparent);--ink-muted:#765345}
@media(max-width:1000px){header{padding:18px 22px}nav{gap:0}nav button{display:none}nav .contact{font-size:12px;padding:9px 14px}.brand{font-size:23px}.intro h1{left:6%;top:105px;font-size:60px;line-height:.86}.intro p{left:6%;right:6%;top:237px;font-size:16px;letter-spacing:-.02em;line-height:1.4}.art img{object-fit:contain;height:auto;top:310px}.work-copy{left:7%;right:7%;top:100px;width:auto}.work-copy h2{font-size:44px;margin-bottom:12px}.work-copy p{font-size:15px;max-width:100%;margin:0}.work-copy a{font-size:14px;margin-top:10px}.back{bottom:24px}.hint{color:var(--wine);text-shadow:none;bottom:16px}.device-label{color:var(--paper)}.scroll-route{height:400svh}}
[hidden]{display:none!important}
:root{--display:clamp(50px,6vw,100px)}
.intro h1{top:11.5%;line-height:.84}
.tablet-caption{position:absolute;color:#fff4e6;font-size:17px;white-space:nowrap;transform:translateX(-50%);pointer-events:none}
.mobile-choices{display:none}
@media(max-width:1000px){.intro h1{top:105px;font-size:54px;line-height:.86}.tablet-caption{display:none}.mobile-choices{position:absolute;top:560px;left:6%;right:6%;display:flex;justify-content:space-between;gap:10px}.mobile-choices button{border:0;border-bottom:1px solid #751b2c66;background:none;color:var(--wine);padding:12px 5px;font-size:14px;min-height:44px}.intro p{top:227px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}
.phone{width:1024px;height:1536px}.monitor{width:1536px;height:1024px}.tablet{width:1961px;height:1201px}
.device-art{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none;filter:none}
.screen-plane{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#111;z-index:2}
.phone-plane{width:430px;height:932px;border-radius:38px}.phone-plane iframe{height:100%;width:100%;border:0;border-radius:0}
.phone-plane .notch{top:0;left:145px;width:145px;height:29px;border-radius:0 0 17px 17px}
.monitor-plane{width:1440px;height:850px;border-radius:2px}.monitor-plane img{width:100%;height:100%;object-fit:cover}
.tablet-plane{width:1280px;height:720px;border-radius:17px}.tablet-plane video{height:100%;width:100%;object-fit:cover;border-radius:0}
.tablet-flat{top:200px;height:802px!important;clip-path:polygon(16.5% 29.5%,82% 29.5%,85% 34%,97% 68%,97% 74%,95% 76.5%,5% 76.5%,3% 74%,3% 68%,15% 33%)}
.tablet-overhead{opacity:0}
.phone .screen-hit{inset:60px 135px 80px 90px}.monitor .screen-hit{inset:25px 170px 240px 170px}.tablet .screen-hit{inset:390px 70px 370px}
.phone .device-label{font-size:86px;top:95%}.monitor .device-label{font-size:44px;top:95%}
.screen-hit{z-index:3}.screen-hit:hover{background:transparent;box-shadow:none}.screen-hit:hover .play-icon{transform:scale(1.08)}
.play-icon{width:110px;height:110px;transition:transform 180ms ease-out}
.brand img{display:block;width:220px;height:auto}.monitor-plane img{height:105%;object-position:50% 0}
@media(max-width:1000px){.brand img{width:160px}}
body{overflow:hidden;height:100svh}.scroll-route{display:none}
.device-label{display:none!important}.scene-captions{position:absolute;inset:0;pointer-events:none}
.scene-caption{position:absolute;transform:translate(-50%,-50%);border:0;padding:5px 0;color:#fff6ed;background:none;font-size:18px;line-height:1.25;white-space:nowrap;pointer-events:auto}
.scene-caption svg{position:absolute;width:40px;height:40px;top:-38px;left:43%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.video-caption svg{left:-34px;top:-30px}.scene-caption:hover{text-decoration:underline;text-underline-offset:5px}
#next-work{position:absolute;bottom:6%;right:6.5%;border:0;border-bottom:1px solid var(--wine);padding:12px 0;background:none;color:var(--wine);font-size:16px}
@media(max-width:1000px){.scene-captions{display:none}#next-work{bottom:24px}}
.phone>.device-art{transform-origin:0 0}
.phone-front{opacity:0;clip-path:path('M306 46H716C789 46 834 91 834 159L838 1279L860 1290L900 1358V1429C894 1446 876 1455 850 1455H174C150 1455 133 1447 124 1430V1358L158 1291L183 1280V159C183 91 228 46 306 46Z')}
.phone-plane .notch{left:125px;width:181px;height:32px}
button:disabled{cursor:default}
.scene-captions{z-index:18}
.video-caption svg{left:-34px;top:-16px;width:32px;height:32px}
.tablet-flat{display:block;top:0;transform-origin:0 0;clip-path:polygon(3% 68%,97% 68%,97% 74%,95% 76%,5% 76%,3% 74%)}.tablet-overhead{opacity:1;transform-origin:0 0}
.monitor-plane img{height:105%;object-position:50% 0}
.work-copy{top:27%;width:32%;z-index:19}
.work-copy h2{font-size:clamp(36px,3.5vw,58px);line-height:1.02;max-width:none;letter-spacing:-.03em;text-wrap:balance}
.work-copy p{font-size:18px;line-height:1.5;max-width:31ch;margin:20px 0 0}
.work-copy #work-invitation{margin-top:8px;color:var(--ink)}
.work-copy[data-service="1"]{width:43%}.work-copy[data-service="1"] h2{font-size:clamp(30px,3vw,50px);max-width:none;white-space:pre-line;text-wrap:initial}
.monitor>.device-art{transform-origin:0 0}
.monitor-front{opacity:0}.monitor-plane img{height:100%;object-fit:cover;object-position:center top}.monitor-plane{height:726px;background:#112224}
.monitor-plane iframe{display:block;width:100%;height:100%;border:0;background:#0d2021}
#site-preview{position:absolute;inset:0;z-index:1;pointer-events:none}
#miniapp-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.details-button{display:inline-flex;align-items:center;gap:24px;margin-top:30px;padding:12px 0;border:0;border-bottom:1px solid var(--wine);background:none;color:var(--wine);font-size:16px}
.details-button svg,.service-contact svg,.dialog-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.details-button svg{transition:transform 180ms ease-out}.details-button:hover svg{transform:translateX(4px)}
.back,#next-work{z-index:21;display:flex;align-items:center;gap:9px}
.back svg,#next-work svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#next-work{border-color:#751b2c40}#next-work:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--wine);transform:scaleX(var(--route-progress,0));transform-origin:left;transition:transform 100ms linear}
#service-dialog{width:min(650px,calc(100vw - 40px));max-height:calc(100svh - 56px);padding:52px;border:0;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #28121840;overflow:auto}
#service-dialog::backdrop{background:#23140fc2;backdrop-filter:blur(5px)}
#service-dialog[open]{animation:dialog-enter 240ms cubic-bezier(.2,.8,.2,1)}
.dialog-close{position:absolute;right:18px;top:18px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--wine)}.dialog-close:hover{background:#751b2c0c}
#service-dialog h2{font:500 48px/1.04 StudioDisplay,Georgia,serif;letter-spacing:-.03em;margin:0 20px 24px 0}
#service-intro{font-size:17px;line-height:1.55;margin:0 0 24px}
#service-points{list-style:none;padding:0;margin:0}#service-points li{border-top:1px solid #751b2c26;padding:14px 0;font-size:15px;line-height:1.5}
.service-terms{display:flex;flex-direction:column;gap:7px;margin-top:24px}.service-terms strong{font-size:19px;font-weight:500}.service-terms span{font-size:14px}
.service-contact{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--wine);color:var(--paper);padding:13px 23px;border-radius:30px;text-decoration:none;font-size:16px;margin-top:30px}.service-contact:hover{background:#571322}
.service-next{font-size:13px;line-height:1.5;max-width:36ch;margin:14px 0 0}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.intro h1{font-size:49px}.work-copy{top:99px;width:auto;left:7%;right:7%}.work-copy h2{font-size:35px;line-height:1;max-width:19ch;margin:0 0 14px}.work-copy p{font-size:14px;line-height:1.45;max-width:100%;margin:0}.work-copy #work-invitation{margin-top:5px}.details-button{font-size:14px;margin-top:14px;padding:8px 0;gap:20px}.details-button svg{width:19px;height:19px}#service-dialog{padding:46px 25px 30px;width:calc(100vw - 28px);max-height:calc(100svh - 28px)}#service-dialog h2{font-size:37px;margin-right:10px}#service-intro{font-size:15px}#service-points li{font-size:14px}.service-terms strong{font-size:17px}.back,#next-work{font-size:14px;bottom:20px;min-height:44px}}
@media(max-width:1000px){.work-copy[data-service="1"]{width:auto}.work-copy[data-service="1"] h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){#service-dialog[open]{animation:none}.details-button svg,#next-work:after{transition:none}}