*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;overflow-x:clip}a{color:inherit}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #3078ee;outline-offset:3px}.site-nav{position:fixed;right:28px;top:23px;z-index:5000;display:flex;gap:20px;padding:8px 12px;background:#fffffff0;font-size:11px}.site-nav a{text-decoration:none}.site-nav a:hover{text-decoration:underline}.loading{height:100vh;display:grid;place-items:center;font-size:28px;font-weight:900;letter-spacing:-1px}.reveal-section{position:relative;height:270vh}.reveal-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}.scene-board{position:absolute;width:1024px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;pointer-events:none}.scene-layer{position:absolute;inset:0;pointer-events:none}.scene-object{position:absolute;display:block;padding:0;border:0;background:none;color:inherit;text-decoration:none;transform-origin:center;pointer-events:auto;box-sizing:border-box;outline:none}.scene-object>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.scene-object .object-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.scene-object .screen-video{position:absolute;object-fit:cover;pointer-events:none}.scene-object.device>.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none}.scene-object .crop{position:absolute;inset:0;overflow:hidden;pointer-events:none}.crop img{position:absolute;max-width:none}.scene-object .shell{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-object .phone-poster{width:96%;height:97%;position:absolute;left:2%;top:1.2%;object-fit:cover;border-radius:13% / 7%;pointer-events:none}.object-caption{position:absolute;top:calc(100% + 12px);left:-30px;right:-30px;text-align:center;font-size:11px;line-height:1.3;color:#222;pointer-events:none}.scene-object.paper{display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;background:#f6f2e7;border:1px solid #dedbd2;padding:18px;font-weight:700;box-shadow:0 3px 5px #0000000a;font-size:27px;letter-spacing:-1px}.text-content{width:100%;height:100%;white-space:pre-wrap;line-height:inherit;overflow:visible}.text-content p{margin:0 0 1em}.scene-object.text{cursor:default}.scene-object.video>video{width:100%;height:100%;object-fit:contain;background:#f4f4f4}.scroll-cue{position:absolute;left:28px;bottom:24px;font-size:10px;color:#555;z-index:600;pointer-events:none}.clients-section{position:relative;overflow:clip;background:#fff}.clients-heading{position:absolute;top:50px;left:50%;transform:translateX(-50%);font-size:20px;font-weight:400;margin:0;z-index:3}.clients-section .scene-board,.client-canvas .scene-board{top:0;transform:translateX(-50%) scale(var(--scale,1));transform-origin:top center}.client-canvas{position:relative;margin-top:65px;overflow:clip}.client-empty{max-width:620px;margin:120px auto;padding:0 30px;font-size:14px;line-height:1.8}.arrange-button{position:fixed;left:18px;bottom:18px;z-index:6000;border:1px solid #d8d8d8;background:#fffdf9eF;border-radius:25px;padding:10px 15px;font-size:11px;box-shadow:0 2px 12px #00000008}.arrange-button:hover{background:#f0f0f0}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10000;background:#202020;color:white;border-radius:7px;padding:11px 18px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s}#toast.shown{opacity:1}.editing .reveal-section{height:100vh}.editing .reveal-stage{position:relative}.editing .scroll-cue{display:none}.editing .site-nav{display:none}.editing .clients-section{display:none}.editing .scene-object{cursor:move;touch-action:none;user-select:none}.editing .scene-object.video video{pointer-events:none}.editing .scene-object.selected{outline:1.5px solid #397bdf;outline-offset:5px}.resize-handle,.rotate-handle{position:absolute;z-index:5;background:#fff;border:1.5px solid #397bdf;width:12px;height:12px;display:none;pointer-events:auto}.selected .resize-handle,.selected .rotate-handle{display:block}.resize-handle{bottom:-10px;right:-10px;cursor:nwse-resize}.rotate-handle{left:calc(50% - 6px);top:-33px;border-radius:50%;cursor:grab}.rotate-handle:after{content:'';position:absolute;width:1px;height:18px;background:#397bdf;top:10px;left:4px}.editor{position:fixed;right:12px;top:12px;bottom:12px;z-index:7000;width:282px;background:#fffffff7;border:1px solid #ddd;border-radius:10px;box-shadow:0 5px 30px #0001;display:flex;flex-direction:column;font-size:11px;overflow:hidden;backdrop-filter:blur(16px)}.editor-head{padding:16px;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;justify-content:space-between;gap:15px}.editor-head strong{font-size:13px}.editor-close{border:0;background:transparent;font-size:20px;padding:0 5px}.editor-content{padding:14px 16px;overflow:auto;flex:1}.editor label{display:block;font-size:10px;color:#555;margin:0 0 7px}.editor input,.editor select,.editor textarea{display:block;width:100%;padding:8px;border:1px solid #d6d6d6;border-radius:4px;background:#fff;color:#111;margin-top:4px;font-size:11px;min-width:0}.editor textarea{min-height:130px;resize:vertical;line-height:1.5}.editor .two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.editor hr{border:0;border-top:1px solid #e5e5e5;margin:14px 0}.editor button:not(.editor-close){border:1px solid #d8d8d8;border-radius:4px;background:#fff;padding:8px 10px;font-size:10px}.editor .row{display:flex;gap:6px;margin-bottom:8px}.editor .row>*{flex:1}.editor .primary{background:#171717!important;color:white;border-color:#171717!important}.editor .help{line-height:1.6;color:#777;font-size:10px}.editor .status{font-size:10px;line-height:1.5;color:#444;margin:10px 0 0}.editor-footer{padding:12px 16px;border-top:1px solid #e4e4e4}.editor .object-list{max-height:125px;overflow:auto;border:1px solid #ddd;border-radius:4px;margin:7px 0 10px}.object-list button{width:100%;text-align:left;border:0!important;border-radius:0!important;padding:7px 8px!important;background:none!important}.object-list button.active{background:#eaf1ff!important}.editor .empty-selection{padding:20px 0;color:#777;line-height:1.6}.editor-bar{position:fixed;left:16px;top:16px;z-index:6500;background:white;border:1px solid #ddd;border-radius:5px;padding:9px 12px;font-size:11px;box-shadow:0 2px 10px #0001}.editor-bar strong{font-weight:600}.editor-stage-label{display:none}.editing #app{padding-right:0}.editing .scene-board{background-image:linear-gradient(#dadada26 1px,transparent 1px),linear-gradient(90deg,#dadada26 1px,transparent 1px);background-size:32px 32px}.editing .client-canvas{margin-top:60px}.editing .arrange-button{display:none}.editing .about-only .home-layer{display:none}.editing .home-only .about-layer{opacity:.2}.editing .scene-object.hidden{opacity:.2}.scene-object.hidden:not(.editing .scene-object){display:none}.editor button.selected-asset{background:#edf2fc}.library-preview{display:flex;gap:10px;align-items:center;margin:9px 0}.library-preview img{width:55px;height:55px;object-fit:contain;background:#f4f4f4}.library-preview span{font-size:10px;color:#666}.editor input[type=checkbox]{display:inline;width:auto;margin:0 5px 0 0}.editor .checkbox-label{display:flex;align-items:center;margin:10px 0}.editor-footer .help{margin:8px 0 0}.local-marker{position:fixed;left:18px;top:22px;font-size:10px;color:#777;z-index:4000;pointer-events:none}.client-page .local-marker{display:none}@media(max-width:700px){.site-nav{right:10px;top:10px;gap:12px;font-size:10px}.scroll-cue{left:15px;bottom:70px}.local-marker{left:15px;top:22px}.arrange-button{left:12px;bottom:12px}.editor{width:260px;max-width:calc(100vw - 24px)}.editor-bar{max-width:calc(100vw - 300px);font-size:9px;overflow:hidden}.clients-heading{top:25px;font-size:18px}.client-canvas{margin-top:60px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#toast{transition:none}}

.mobile-about{display:none}
@media(max-width:700px){
 body:not(.editing) .reveal-section{height:145vh}
 body:not(.editing) .reveal-stage{height:100vh}
 body:not(.editing) .about-layer .text,body:not(.editing) .about-layer a{display:none}
 .mobile-about{display:block;padding:35px 26px 55px;font-size:14px;line-height:1.65;scroll-margin-top:70px}
 .mobile-about>img{display:block;width:170px;height:auto;margin:0 0 35px}
 .mobile-about p{margin:0 0 1.2em}
 body:not(.editing) .clients-section .object-caption{font-size:27px;left:-55px;right:-55px}
 .client-page:not(.editing) .client-canvas{height:auto!important;margin-top:70px;padding:20px 24px 70px;overflow:visible}
 .client-page:not(.editing) .client-canvas .scene-board{position:relative;left:auto;top:auto;width:100%;height:auto!important;transform:none!important;pointer-events:auto}
 .client-page:not(.editing) .scene-layer{position:static;display:flex;flex-direction:column;gap:30px}
 .client-page:not(.editing) .scene-object{position:relative;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important}
 .client-page:not(.editing) .scene-object.text{font-size:14px!important;line-height:1.6!important}
 .client-page:not(.editing) .scene-object.text[data-id$="-title"]{font-size:27px!important;line-height:1.15!important}
 .client-page:not(.editing) .scene-object.text[data-id$="-role"]{font-size:12px!important}
 .client-page:not(.editing) .text-content{height:auto}
 .client-page:not(.editing) .text-content p:last-child{margin-bottom:0}
 .client-page:not(.editing) .scene-object.video>video{display:block;width:100%;height:auto;max-height:75vh;aspect-ratio:var(--object-ratio);background:#f4f4f4}
 .client-page:not(.editing) .scene-object>img{width:auto;height:auto;max-width:100%;max-height:60vh;margin:auto}
 .client-page:not(.editing) .object-caption{position:static;display:block;margin-top:10px;font-size:11px}
 .editing .mobile-about{display:none}
}

@media(max-width:700px){
 body:not(.editing) .reveal-section{height:270vh}
 body:not(.editing) .reveal-stage{height:100vh}
 body:not(.editing) .reveal-stage>.scene-board{z-index:2}
 body:not(.editing) .reveal-stage .about-layer{display:none}
 .reveal-stage>.mobile-about{position:absolute;inset:0;height:100%;padding:74px 24px 24px;margin:0;overflow:auto;z-index:0;font-size:13px;line-height:1.5;scroll-margin-top:0}
 .reveal-stage>.mobile-about>img{float:left;width:96px;height:auto;margin:0 22px 20px 0}
 .reveal-stage>.mobile-about>div>p:nth-child(-n+2){font-size:16px}
 .reveal-stage>.mobile-about>div>p:nth-child(3){clear:both}
 .reveal-stage>.mobile-about p{margin-bottom:1em}
 .scroll-cue{background:#ffffffe8;padding:6px 9px;border-radius:15px}
}

/* About remains pinned while the client objects enter the same viewport. */
body:not(.editing) .reveal-section{height:370vh}
body:not(.editing) .clients-section{margin-top:-200vh;background:transparent;overflow:visible;pointer-events:none;z-index:3}
.clients-anchor{position:absolute;top:100vh;left:0}
.clients-stage{position:sticky;top:0;width:100%;overflow:clip;isolation:isolate}
.clients-stage .scene-board{top:0}
.clients-stage .scene-object{will-change:transform}
@media(max-width:700px){body:not(.editing) .reveal-section{height:370vh}}

.scene-object.shape{background:#e5e2dc;border:1px solid #d6d2cb;border-radius:46% 54% 48% 52% / 53% 45% 55% 47%;box-shadow:0 2px 3px #00000008}
.scene-object.shape:hover{background:#dedad3}

/* One fixed client composition per viewport; the arrival only translates objects. */
body:not(.editing) .clients-stage .scene-board{transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center}
@media(max-width:700px){
 body:not(.editing) .clients-section[data-scene="clients-mobile"] .object-caption{font-size:11px;left:-20px;right:-20px}
 .reveal-stage>.mobile-about{font-size:11px;line-height:1.4}
 .reveal-stage>.mobile-about>div>p:nth-child(-n+2){font-size:13px}
}

@media(max-width:700px){.clients-stage .clients-heading{top:58px}}

/* Independent translate keeps the hover bounce separate from scroll placement. */
body:not(.editing) .clients-stage a.scene-object{cursor:pointer}
@keyframes client-hover-bounce{
 0%,100%{translate:0 0}
 40%{translate:0 -7px}
 68%{translate:0 2px}
 84%{translate:0 -2px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 body:not(.editing) .clients-stage a.scene-object:is(:hover,:focus-visible){animation:client-hover-bounce .65s ease-out}
}

/* Client names float in a glass bubble instead of permanent captions. */
body:not(.editing) .clients-stage .object-caption{display:none}
.client-tooltip{position:fixed;z-index:9500;pointer-events:none;max-width:calc(100vw - 24px);padding:10px 17px;border:1px solid #ffffffd9;border-radius:999px;background:linear-gradient(145deg,#fffffff2,#ffffff91 48%,#e9eef4aa);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 8px 24px #25344626,inset 0 1px 1px #fff,inset 0 -1px 1px #ffffff91;color:#24282d;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.015em;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(5px) scale(.94);transform-origin:50% 0;transition:opacity .16s ease,transform .23s cubic-bezier(.2,.85,.3,1.15),visibility .16s}
.client-tooltip:before{content:'';position:absolute;inset:2px 9px 50%;border-radius:999px;background:linear-gradient(#ffffffa3,#ffffff08);pointer-events:none}
.client-tooltip:after{content:'';position:absolute;width:8px;height:8px;top:-5px;left:calc(50% - 4px);background:#ffffffe6;border-left:1px solid #fff;border-top:1px solid #fff;transform:rotate(45deg);border-radius:2px}
.client-tooltip.above{transform-origin:50% 100%}
.client-tooltip.above:after{top:auto;bottom:-5px;transform:rotate(225deg);background:#e9eef4d9}
.client-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.client-tooltip{transition:none}}
.clients-stage{user-select:none;-webkit-user-select:none}

.client-tooltip.floating:after{display:none}

.contact-sheet{width:420px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 40px);overflow:auto;padding:32px;border:1px solid #fff;border-radius:18px;background:#fffefb;color:#171717;box-shadow:0 24px 80px #26211b24;transform:rotate(-.6deg);font-family:Arial,Helvetica,sans-serif}
.contact-sheet[open]{animation:contact-arrive .22s ease-out}
.contact-sheet::backdrop{background:#bdb8b14d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.contact-close{position:absolute;right:12px;top:11px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#777;font-size:22px;line-height:1;cursor:pointer}
.contact-close:hover{background:#eeeae4;color:#111}
.contact-heading-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0 8px}
.contact-heading-row h2{margin:0;font-size:31px;font-weight:400;letter-spacing:-1.2px}
.contact-heading-row img{width:82px;height:auto;transform:rotate(8deg);margin:0 12px 0 10px}
.contact-email{display:inline-block;margin:6px 0 28px;color:#555;font-size:13px;text-decoration:none}
.contact-email:hover{text-decoration:underline}
.contact-form label{display:block;margin-bottom:20px;font-size:10px;color:#777}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:5px;padding:9px 0;border:0;border-bottom:1px solid #dedbd5;border-radius:0;background:transparent;color:#111;font:13px/1.5 Arial,Helvetica,sans-serif;outline-offset:3px}
.contact-form textarea{resize:vertical;min-height:70px;max-height:180px}
.contact-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.contact-actions button{border:0;border-radius:999px;padding:12px 18px;background:#222;color:#fff;font-size:11px;cursor:pointer}
.contact-actions button:hover{background:#444}
.contact-actions span{color:#999;font-size:9px}
.contact-status{margin:14px 0 0;color:#777;font-size:10px;line-height:1.5}
.contact-status:empty{display:none}
@keyframes contact-arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.contact-sheet[open]{animation:none}}

@media(max-width:700px){.reveal-stage>.mobile-about>img.about-scroll-stamp{float:none;display:block;width:76px;height:auto;margin:18px 0 0 auto;transform:rotate(-5deg)}}