:root{--ink:#f3edf9;--paper:#101021;--pink:#ff59b7;--teal:#69ffe5;--line:#ffffff21;background:var(--paper);color:var(--ink)}
html{scroll-padding-top:20px}body{background:radial-gradient(ellipse at 90% 53%,#34133366,transparent 38%),#101021}
::selection{background:#ff59b7;color:#101021}
.hero{background:#151229;max-height:none;min-height:820px;--scene-x:0px;--scene-y:0px;--scroll-depth:0px}
.hero-landscape{background-image:url('assets/tokyo-buildings.webp');background-position:center;inset:-45px;animation:none;transform:translate3d(calc(var(--scene-x) * -.25),calc(var(--scene-y) * -.25 + var(--scroll-depth) * .22),0) scale(1.04);z-index:-7}
.hero-wash{z-index:-4;background:linear-gradient(90deg,#0b0b1dcc 0%,#1111269c 33%,#14112921 65%,transparent 85%),linear-gradient(0deg,#101021,transparent 25%,transparent 75%,#0c0a1c5e)}
.hero-foreground{position:absolute;inset:-55px;z-index:-2;pointer-events:none;background:url('assets/tokyo-balcony.webp') center/cover no-repeat;transform:translate3d(calc(var(--scene-x) * -.95),calc(var(--scene-y) * -.8 + var(--scroll-depth) * -.12),0) scale(1.04);filter:drop-shadow(0 0 14px #ff43b91a);will-change:transform}
.hero-rain{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.95}
.city-light{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;filter:blur(45px);z-index:-3;will-change:transform}
.city-light-pink{width:300px;height:420px;right:4%;top:21%;background:radial-gradient(ellipse,#f529af50,transparent 67%);transform:translate3d(calc(var(--scene-x) * -1.6),calc(var(--scene-y) * -1.4),0);animation:neon-breathe 7s infinite alternate}
.city-light-cyan{width:480px;height:160px;right:21%;bottom:15%;background:radial-gradient(ellipse,#18ffd54a,transparent 66%);transform:translate3d(calc(var(--scene-x) * -.7),calc(var(--scene-y) * -.6),0);animation:neon-breathe 5s 1s infinite alternate}
.grain{opacity:.085}.header{border-color:#ffffff24;height:110px;position:relative;z-index:5}.brand-period{color:#ff67b9}.brand svg{stroke:#78ffe0;filter:drop-shadow(0 0 7px #4ffff544)}.header nav{color:#eae1f4}.header nav a:hover,.text-link:hover,.footer a:hover{color:var(--teal)}.nav-cta{border-color:#ffffff70;background:#12122559;backdrop-filter:blur(8px)}.nav-cta:hover{background:#fc55b527;border-color:#ff77c6}.hero-content{z-index:4;padding-top:clamp(95px,12vh,175px);pointer-events:none}.hero-content a{pointer-events:auto}.hero-content .eyebrow{color:#8cfce4;font-weight:500;letter-spacing:2.2px;text-shadow:0 0 14px #41f5ce40}.tiny-star{color:#ff61bb;text-shadow:0 0 12px #ff61bb;animation:star-turn 24s linear infinite}
h1{font-size:clamp(66px,7.1vw,115px);font-weight:500;letter-spacing:-5.5px;text-shadow:0 3px 32px #0c0c2199}h1 em{color:#ffa1d9;text-shadow:0 0 40px #fa64bd40,0 2px 30px #160c30;font-size:1.1em}.hero-description{color:#e8e2f2;font-size:17px;line-height:1.8;text-shadow:0 2px 10px #060513}.hero-note{color:#c7bfd7}.small-wave{color:var(--teal)}.button-dark{color:#17162b;background:#80ffe0;box-shadow:0 0 28px #63ffda24}.button-dark:hover{background:#a0ffe9;box-shadow:0 0 38px #63ffda50}.text-link{color:#f2e6f5}.hero-actions{gap:32px}
.scene-label{z-index:4;bottom:155px;right:65px;color:#ffeaf8;letter-spacing:2px;font-size:10px;text-shadow:0 0 16px #fa48bbaa}.scene-dot{background:#74ffe2;box-shadow:0 0 12px #63ffda}.scene-japanese{display:block;font-family:serif;font-size:45px;letter-spacing:9px;line-height:1.45;margin-top:9px;color:#ff90cd;text-shadow:0 0 20px #ff51b86b}.scene-translation{display:block;font-family:Georgia,serif;font-style:italic;font-size:19px;letter-spacing:.3px;color:#f4d3ef}.interaction-hint{margin:18px 0 0;color:#e4c7e4;font-size:11px}.hero-footer{z-index:5;color:#d9cfe8}.local-time{color:#86ffe4;font-size:11px}#motion-toggle{background:#171426ad;color:#f0dcea;border-color:#f394d044;backdrop-filter:blur(15px)}.scroll-line{border-color:#d393c5}.scroll-line:after{background:#78ffde}
.services{position:relative}.services:before{content:'LESS BUSY. MORE HUMAN.';position:absolute;top:38px;right:0;color:#887993;font-size:10px;letter-spacing:3px}.section-intro .eyebrow,.contact>.eyebrow{color:#e79bcf}.section-aside{color:#aea4c2}h2 em{color:#94e8d6}.service{padding-block:39px}.service-number{color:#9a839f}.service h3{font-weight:450}.service p{color:#bab3ca}.tag-pink{background:#482039;color:#ff9bcf;border:1px solid #ff71b329}.tag-teal{background:#163a36;color:#87e9d1;border:1px solid #70ffcd25}.tag-neutral{background:#302645;color:#cdb1f0;border:1px solid #d99cff22}.service-symbol{color:#8bfce0;text-shadow:0 0 22px #5aeec532}.service:first-child .service-symbol{color:#ff8bcc;text-shadow:0 0 22px #ff4db93d}.service:before{background:radial-gradient(ellipse 350px 200px at var(--mouse-x) var(--mouse-y),#c12d772e,transparent)}.service:nth-child(2):before{background:radial-gradient(ellipse 350px 200px at var(--mouse-x) var(--mouse-y),#25a89126,transparent)}
.approach{background:radial-gradient(ellipse at 0% 100%,#4c1c534d,transparent 60%),#16172a;border-color:#ffffff1c}.approach .eyebrow{color:#76dbc8}.approach-heading>p:not(.eyebrow),.steps p{color:#b9b0c8}.handwritten{color:#ee8ac2;font-size:29px}.steps li>span{border-color:#977ba05c;color:#ddafd5}.steps h3{color:#f3eafa}.contact h2 em{color:#f396ce}.contact-circle{background:#f279c1;color:#1d162b;box-shadow:0 0 65px #fc60bd24}.contact-circle:hover{background:#90ffe1;box-shadow:0 0 65px #67ffd92b}.contact>p:last-child{color:#b5a8c4}.footer{color:#a59ab6}.footer .brand{color:#eee5f3}.template-label{color:#7f738e}.cursor-aura{border-color:#ff8ecc;box-shadow:0 0 20px #ff4faf29;background:#ff68ba06}.cursor-aura.is-link{background:#70ffdc1a;border-color:#80ffdf}.cursor-aura span{color:#80ffdf}
.motion-paused .hero-landscape,.motion-paused .hero-foreground,.motion-paused .city-light{transform:none!important}
@keyframes neon-breathe{0%{opacity:.5}100%{opacity:1}}@keyframes star-turn{to{transform:rotate(360deg)}}
@media(min-width:1600px){.hero-content{padding-top:16vh}}
@media(max-width:1100px){h1{letter-spacing:-4px}.hero-wash{background:linear-gradient(90deg,#0b0b1dd9,#11112688 48%,#14112922),linear-gradient(0deg,#101021,transparent 30%)}.scene-label{right:32px}}
@media(max-width:760px){.hero{min-height:790px;max-height:1100px}.header{height:87px}.hero-content{padding-top:99px}.hero-content .eyebrow{font-size:9px;letter-spacing:1.5px}.hero-landscape{background-position:62% center}.hero-foreground{background-position:60% center;opacity:.85}.hero-wash{background:linear-gradient(180deg,#0b0b1d88,#111126a3 30%,#14112933 70%,#101021),linear-gradient(90deg,#100e2766,transparent)}h1{font-size:clamp(42px,8.7vw,65px);letter-spacing:-2.6px}.hero-description{font-size:14px}.hero-actions{gap:20px}.hero-note{font-size:10px}.scene-label{right:22px;bottom:108px;font-size:9px}.scene-japanese{font-size:30px;letter-spacing:7px}.scene-translation{font-size:15px}.scene-label .interaction-hint{display:none}.city-light-pink{right:-80px}.city-light-cyan{width:250px;right:5%}.services:before{display:none}.section-pad{padding-block:75px}.service p{font-size:15px}.contact-circle{width:115px;height:115px}.hero-rain{opacity:.7}}
@media(prefers-reduced-motion:reduce){.hero-landscape,.hero-foreground,.city-light{transform:none!important}}
/* Separate registered artwork planes: far skyline, city, balcony, then rain. */
.hero-horizon{position:absolute;inset:-55px;z-index:-8;pointer-events:none;background:var(--horizon-image,none) center/cover no-repeat;transform:translate3d(calc(var(--scene-x) * -.08),calc(var(--scene-y) * -.06 + var(--scroll-depth) * .07),0) scale(1.035);will-change:transform}
.hero-landscape{background-image:var(--midground-image,url('assets/tokyo-buildings.webp'));will-change:transform}
.city-world,.foreground-world{position:absolute;pointer-events:none}
.city-windows,.vending-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.city-train{position:absolute;transform:rotate(-2.462deg);transform-origin:bottom left;filter:drop-shadow(-7px 1px 4px #ff78cf29);will-change:left,top}
.city-mist{position:absolute;inset:30% -15% 4%;z-index:-5;pointer-events:none;background:radial-gradient(ellipse at 60% 68%,#ca7fd912,transparent 45%),radial-gradient(ellipse at 35% 76%,#79cbed12,transparent 30%);filter:blur(25px);animation:mist-drift 32s ease-in-out infinite alternate;transform:translate3d(calc(var(--scene-x) * -.5),0,0)}
@keyframes mist-drift{from{translate:-3% 0;opacity:.45}to{translate:4% -2%;opacity:1}}
.motion-paused .hero-horizon{transform:none!important}
@media(prefers-reduced-motion:reduce){.hero-horizon{transform:none!important}}
.hero-rain-back{z-index:-3;opacity:.78}
.hero-rain-front{z-index:-1;opacity:.95}
.hero{--midground-image:url('assets/tokyo-buildings.webp');--horizon-image:url('assets/tokyo-skyline.webp')}
.city-windows{z-index:3}.city-train{z-index:1}
.balcony-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vending-light,.balcony-water{z-index:2}
.tokyo-headline{font-size:clamp(84px,8.5vw,142px);line-height:.86;letter-spacing:-.065em;margin-bottom:24px;font-weight:650}
.tokyo-headline em{font-family:'DM Sans',sans-serif;font-style:normal;font-weight:500;font-size:.85em;letter-spacing:-.055em;display:inline-block;padding-top:15px;color:#ffa1d9}
.headline-caption{display:block;font-size:16px;letter-spacing:.12em;font-weight:450;line-height:1.7;text-transform:none;margin-top:25px;color:#eee6f5}
.hero-clouds{position:absolute;inset:-25px;background:var(--cloud-image,none) center/cover no-repeat;animation:cloud-drift 50s ease-in-out infinite alternate;pointer-events:none;opacity:.95}
@keyframes cloud-drift{from{transform:translate3d(-15px,6px,0) scale(1.025)}to{transform:translate3d(23px,-9px,0) scale(1.055)}}
@media(max-width:760px){.tokyo-headline{font-size:clamp(77px,15vw,110px);letter-spacing:-.06em;line-height:.9}.tokyo-headline em{font-size:.76em;padding-top:9px}.headline-caption{font-size:12px;letter-spacing:.025em;margin-top:24px}.nav-cta{white-space:nowrap}.hero-content{padding-top:86px}}
.hero{--horizon-image:url('assets/tokyo-skyline.webp');--cloud-image:url('assets/tokyo-clouds.webp')}
/* Keep all architecture rigid while the plant-only layer is prepared. */
/* A continuous cloud field crosses the fixed moon and distant skyline. */
.hero-clouds{inset:0;background:none;animation:none;opacity:.95;overflow:hidden}
.cloud-bank{position:absolute;width:var(--cloud-span,177.7vh);height:var(--cloud-height,100%);left:var(--cloud-left,0);top:var(--cloud-top,0);background:var(--cloud-image) center/100% 100% no-repeat;mask-image:linear-gradient(90deg,transparent,black 12%,black 82%,transparent);animation:cloud-travel 100s linear infinite;will-change:transform}
.cloud-bank-before{margin-left:calc(-1 * var(--cloud-span,177.7vh))}.cloud-bank-after{margin-left:var(--cloud-span,177.7vh)}
@keyframes cloud-travel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--cloud-span,177.7vh)),0,0)}}
/* Plants are a real transparent image; no deformation touches the balcony. */
.hero-foreground{background-image:url('assets/tokyo-balcony.webp')}
.plant-motion{position:absolute;inset:0;background:url('assets/tokyo-plants.webp') center/100% 100% no-repeat;transform-origin:92% 86%;animation:plant-breeze 7.5s ease-in-out infinite alternate;filter:brightness(.86) saturate(.9);will-change:transform}
@keyframes plant-breeze{from{transform:rotate(-.23deg) translate3d(-1px,0,0)}to{transform:rotate(.31deg) translate3d(2px,-1px,0)}}
.hero{--midground-image:url('assets/tokyo-buildings.webp')}
.city-windows{z-index:0}
.city-bridge{position:absolute;left:0;transform:rotate(-2.462deg);transform-origin:top left;z-index:2;pointer-events:none;filter:brightness(.72) saturate(.9)}
/* Performance: static color grading/edge masks are baked into the artwork. */
.hero-foreground,.plant-motion,.city-bridge,.city-mist,.city-light,.city-train{filter:none}
.cloud-bank{mask-image:none}
.nav-cta,#motion-toggle,.cursor-aura.is-link{backdrop-filter:none}
#motion-toggle{background:#171426e8}
.city-train{left:0;top:0;will-change:transform;animation:train-travel 33s linear -10s infinite}
@keyframes train-travel{from{transform:translate3d(var(--train-from-x),var(--train-from-y),0) rotate(-2.462deg)}to{transform:translate3d(var(--train-to-x),var(--train-to-y),0) rotate(-2.462deg)}}
.vending-light{animation:fridge-pulse 7.854s ease-in-out -10s infinite;will-change:opacity}
@keyframes fridge-pulse{0%,100%{opacity:.675}25%{opacity:1}75%{opacity:.35}}
.hero.scene-suspended *,.hero.scene-suspended *::before,.hero.scene-suspended *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.hero *,.hero *::before,.hero *::after{animation-play-state:paused!important}}

/* Keep the rigid cabinet in front of the separate swaying foliage. Reuse the
   existing transparent balcony texture, clipped to the cabinet silhouette. */
.vending-cabinet{position:absolute;inset:0;z-index:1;pointer-events:none;background:url('assets/tokyo-balcony.webp') center/100% 100% no-repeat;clip-path:polygon(90.85% 54.1%,96.95% 53.3%,98.8% 54.2%,98.8% 86.7%,97.35% 89%,90.85% 87.2%)}