@font-face{font-family:General;src:url('assets/GeneralSans-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:General;src:url('assets/GeneralSans-Semibold.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:Jost;src:url('assets/Jost-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:dark;--cream:#fff7e8;--gold:#f4c678;font-family:General,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:#1e3441;color:var(--cream)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffcf81;outline-offset:4px}
.room{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;background:#20394d}.room-image,.room-shade{position:absolute;inset:0;z-index:-2}.room-image{background:url('assets/observatory/interior-night-v3-no-lanterns.png') center center/cover no-repeat}.room-shade{z-index:-1;background:linear-gradient(90deg,#10253515 0%,transparent 48%,#10253546 78%,#10253578 100%),linear-gradient(0deg,#10253543,transparent 37%)}
.room-header{position:absolute;top:0;left:0;right:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px clamp(24px,3.4vw,64px);background:linear-gradient(#10253563,transparent)}.back{font-size:15px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:12px;justify-self:start}.back span{font-size:25px;line-height:1}.back:hover{text-decoration:underline;text-underline-offset:5px}.room-header img{width:43px;height:43px;object-fit:contain;justify-self:end}.room-label{font-size:12px;letter-spacing:.16em;font-weight:600;white-space:nowrap}.room-label i{display:inline-block;width:32px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px}
.avatar-stage{position:absolute;z-index:1;left:7.5%;bottom:-2%;width:38vw;height:82%;pointer-events:none}.avatar-stage canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 16px 13px #12212b6e)}.avatar-fallback{display:none;place-items:center;width:110px;height:110px;border-radius:50%;background:#284854;color:#fff;font-size:32px}
.work-panel{position:relative;z-index:2;width:42.5vw;margin:90px 4.6vw 30px 0;padding:clamp(28px,3vw,72px) clamp(32px,3.4vw,86px) clamp(30px,2vw,50px);border:1.5px solid #f9dbabac;border-radius:26px;background:linear-gradient(145deg,#15313ddc,#17333dd8);box-shadow:0 22px 72px #10202d7d,inset 0 1px #fff4d34d;backdrop-filter:blur(10px)}.panel-kicker{font-size:clamp(14px,min(.84vw,1.8vh),21px);letter-spacing:.2em;font-weight:600;color:var(--gold);padding:0 0 14px;margin:0 0 18px;border-bottom:1px solid #fff3d080}.work-panel h1{font-size:clamp(34px,min(3.75vw,6.6vh),82px);line-height:.99;letter-spacing:-.045em;font-weight:600;margin:0 0 17px}.work-panel h1 em{font-style:normal;color:#ffcf82}.panel-intro{font-size:clamp(16px,min(1.19vw,2.2vh),27px);line-height:1.44;letter-spacing:.005em;color:#f5f3ed;margin:0 0 20px}.steps{display:grid}.step{display:grid;grid-template-columns:clamp(64px,4vw,92px) 1fr;align-items:start;gap:0;width:100%;text-align:left;border:0;border-top:1px solid #e3e9de5c;padding:clamp(13px,1vw,22px) 4px;background:none;color:#f7f9f8;cursor:pointer;border-radius:0}.step:first-child{border-top:0}.step:hover,.step.active{background:#f1c47b1a}.step-number{font-size:clamp(30px,min(1.8vw,3.5vh),43px);line-height:1.15;color:var(--gold);font-weight:600}.step>span:last-child{padding-left:clamp(25px,1.5vw,38px);border-left:1px solid #e2e7dd75;min-height:53px}.step strong,.step small{display:block}.step strong{font-size:clamp(19px,min(1.15vw,2.4vh),28px);line-height:1.14;font-weight:600;margin-bottom:4px}.step small{font-size:clamp(16px,min(.96vw,2vh),23px);line-height:1.29;color:#e7eef0}.contact{display:flex;align-items:center;justify-content:space-between;gap:15px;border-radius:11px;background:#ae4b2b;color:#fff7e7;text-decoration:none;padding:14px 20px;margin-top:9px;font:600 clamp(19px,min(1.2vw,2.5vh),28px) Jost,General,sans-serif;letter-spacing:.01em}.contact:hover{background:#c45a34}.contact span{font:27px General,Arial,sans-serif;line-height:1}
@media(max-width:1100px){.avatar-stage{left:2%;width:44vw;height:75%}.work-panel{width:48vw;margin-right:2vw}.work-panel h1{font-size:clamp(33px,4vw,46px)}.step strong{font-size:16px}.step small{font-size:14px}}
@media(max-width:760px){.room{display:block;overflow:visible;min-height:100svh;padding:0 0 20px}.room-image{background-position:38% top}.room-shade{background:linear-gradient(180deg,#10253560 0%,transparent 30%,#1025355c 60%,#1025359c 100%)}.room-header{position:relative;gap:6px;padding:14px 17px}.room-header img{width:32px;height:32px}.back{font-size:12px;gap:5px}.back span{font-size:19px}.room-label{font-size:9px;letter-spacing:.07em}.room-label i{width:9px;margin:0 4px}.avatar-stage{position:relative;left:auto;bottom:auto;width:100%;height:clamp(295px,45vh,430px);margin:0;z-index:1}.work-panel{width:auto;margin:-32px 12px 0;padding:23px 20px 20px;z-index:2;border-radius:20px}.panel-kicker{font-size:10px;margin-bottom:15px;padding-bottom:10px}.work-panel h1{font-size:clamp(34px,8vw,46px);line-height:1.03}.panel-intro{font-size:16px;line-height:1.4}.step{grid-template-columns:42px 1fr;padding:12px 3px}.step-number{font-size:23px}.step>span:last-child{padding-left:13px;min-height:47px}.step strong{font-size:17px}.step small{font-size:14px;line-height:1.36}.contact{font-size:16px;padding:12px 15px}}
@media(max-width:380px){.room-header{gap:3px;padding-inline:12px}.back{white-space:nowrap;font-size:11px}.room-label{font-size:8px;letter-spacing:0}.room-label i{width:6px;margin:0 2px}.avatar-stage{height:280px}.work-panel{padding:20px 16px}.work-panel h1{font-size:32px}.panel-intro{font-size:15px}.step strong{font-size:16px}.step small{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Still-frame study: geometry matched to avatar-finestra-testi-grande.png. */
@media(min-width:1101px){
 .avatar-stage{left:9.6vw;bottom:-1%;width:auto;height:75svh;aspect-ratio:1086/1448}
 .avatar-stage img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 13px #12212b55)}
 .work-panel{display:flex;flex-direction:column;width:55.5vw;min-height:78.5svh;margin:102px calc(4.6vw + 2px) 30px 0;padding:40px 5.3vw 26px;background:linear-gradient(115deg,#233536cf 0%,#0b3146d7 50%,#102d3ade 100%);border-color:#f5d3a7b8;box-shadow:0 22px 72px #10202d7d,inset 0 1px #fff4d389,0 0 22px #e5b37424}
 .steps{flex:1;grid-template-rows:repeat(3,minmax(0,1fr))}
 .step{padding:12px 4px}
}
@media(min-width:761px) and (max-width:1100px){
 .avatar-stage{left:1%;bottom:-1%;width:auto;height:70svh;aspect-ratio:1086/1448}
 .avatar-stage img{display:block;width:100%;height:100%;object-fit:contain}
 .work-panel{width:59vw;min-height:auto;margin:96px 2vw 25px 0;padding:32px 4vw 26px;background:linear-gradient(115deg,#233536d5,#0b3146dd 55%,#102d3ae5)}
}
@media(max-width:760px){
 .avatar-stage{height:clamp(325px,44svh,385px);display:flex;align-items:flex-end;justify-content:center}
 .avatar-stage img{display:block;width:auto;height:calc(100% - 48px);max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 13px #12212b55)}
 .work-panel{min-height:0;display:block;margin-top:-24px;background:linear-gradient(130deg,#233536d7,#0b3146e8 55%,#102d3aec);border-color:#f5d3a7b8}
}
@media(max-width:380px){
 .avatar-stage{height:320px}
 .avatar-stage img{height:calc(100% - 38px)}
}
@media(min-width:1101px){
 .avatar-stage{left:2vw;bottom:-26.5svh;height:100svh}
 .work-panel{background:linear-gradient(115deg,#27312eb8 0%,#0b3146c7 52%,#102d3ad1 100%);backdrop-filter:blur(6px)}
 .panel-kicker{font-size:16px;letter-spacing:.19em}
 .panel-intro{font-size:clamp(19px,1.3vw,25px);max-width:665px}
 .step strong{font-size:clamp(20px,1.32vw,27px)}
 .step small{font-size:clamp(18px,1.2vw,23px);max-width:570px;line-height:1.26}
 .contact{min-height:63px;font-size:clamp(20px,1.3vw,27px)}
}
@media(max-width:760px){
 .avatar-stage{overflow:hidden}
 .avatar-stage img{position:absolute;left:50%;top:60px;width:auto;height:clamp(510px,71svh,610px);max-width:none;transform:translateX(-50%)}
}
@media(max-width:380px){.avatar-stage img{top:45px}}
/* Wide displays with little CSS height, including browser zoom: keep the whole card visible. */
@media(min-width:1101px) and (max-height:860px){
 .avatar-stage{left:3vw;bottom:-18svh;height:90svh}
 .work-panel{width:52vw;height:calc(100svh - 130px);min-height:0;margin:80px 5.5vw 20px 0;padding:28px 4.5vw 20px}
 .panel-kicker{font-size:clamp(12px,1.7vh,15px);padding-bottom:10px;margin-bottom:13px}
 .work-panel h1{font-size:clamp(39px,5.9vh,52px);margin-bottom:12px}
 .panel-intro{font-size:clamp(16px,2.2vh,19px);line-height:1.35;margin-bottom:12px;max-width:600px}
 .step{padding:9px 4px}
 .step-number{font-size:clamp(24px,3.6vh,31px)}
 .step strong{font-size:clamp(17px,2.5vh,20px)}
 .step small{font-size:clamp(15px,2vh,18px);line-height:1.24;max-width:530px}
 .contact{min-height:54px;font-size:clamp(17px,2.4vh,20px)}
}

/* Atmospheric details share the background image's cover crop. */
.room-image{z-index:-3}
.room-ambient{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ambient-image{position:absolute;width:1536px;height:1024px;transform-origin:top left}
.lantern-3d{position:absolute;top:47.4%;width:8%;height:18%;transform:translate(-50%,-50%);pointer-events:none}
.lantern-3d-left{left:41.3%}
@media(min-width:761px){.lantern-3d-left{left:37.5%;top:45%}}
.lantern-3d-right{left:98.3%;top:36%}
.lantern-3d[data-loaded="true"]::before{content:"";position:absolute;inset:15% -35%;border-radius:50%;background:radial-gradient(circle,#ffc56a80 0%,#e98a3440 30%,transparent 69%);filter:blur(14px);opacity:.6;animation:lantern-breath 7s ease-in-out infinite}
.lantern-3d[data-loaded="true"]::after{content:"";position:absolute;left:50%;top:62%;width:50%;height:37%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fff6d8e8 0%,#ffc66acb 25%,#f79d3970 53%,transparent 76%);filter:blur(9px);mix-blend-mode:screen;opacity:.82;pointer-events:none;animation:lantern-ember 6.5s ease-in-out infinite}
.lantern-3d canvas{display:block;width:100%;height:100%}
@keyframes lantern-breath{0%,100%{opacity:.5}50%{opacity:.7}}
@keyframes lantern-ember{0%,100%{opacity:.76}50%{opacity:.94}}
@media(prefers-reduced-motion:reduce){.lantern-3d::before,.lantern-3d::after{animation:none!important}}
@media(max-width:760px){.lantern-3d-right{display:none}}

/* The approved avatar video uses the same 3:4 stage as its first and final frames. */
.avatar-stage{aspect-ratio:834/1112}
.avatar-stage .avatar-poster,.avatar-stage .avatar-video,.avatar-stage .avatar-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;transform:none;filter:drop-shadow(0 16px 13px #12212b55)}
.avatar-stage .avatar-poster{z-index:1}
.avatar-stage .avatar-video,.avatar-stage .avatar-canvas{z-index:2;opacity:0}
.avatar-stage .avatar-video.is-visible,.avatar-stage .avatar-canvas.is-visible{opacity:1}
.avatar-stage [hidden]{display:none!important}
.room.avatar-sequence .work-panel{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition:opacity .7s ease,transform .7s ease,visibility 0s linear .7s}
.room.avatar-sequence.panel-visible .work-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
@media(min-width:1101px){.avatar-stage{bottom:-22svh}}
@media(min-width:1101px) and (max-height:860px){.avatar-stage{bottom:-15svh}}
@media(max-width:760px){
 .avatar-stage .avatar-poster,.avatar-stage .avatar-video,.avatar-stage .avatar-canvas{left:50%;right:auto;top:60px;bottom:auto;width:auto;height:clamp(510px,71svh,610px);transform:translateX(-50%)}
}
@media(max-width:380px){.avatar-stage .avatar-poster,.avatar-stage .avatar-video,.avatar-stage .avatar-canvas{top:45px}}

/* On phones, the still portrait welcomes visitors while the panel is ready immediately. */
@media(max-width:760px){
 .room.avatar-sequence .work-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
 .avatar-stage{height:clamp(315px,90vw,370px);overflow:visible;aspect-ratio:auto}
 .avatar-stage .avatar-poster{top:8px;width:min(94vw,390px);height:auto;max-width:none;object-fit:contain}
 .avatar-stage .avatar-video,.avatar-stage .avatar-canvas{display:none!important}
 .work-panel{margin-top:-22px}
}

/* A brief welcome accompanies the desktop greeting and clears before the main panel. */
.welcome-bubble{position:absolute;z-index:3;left:28%;top:48%;width:min(31vw,600px);padding:clamp(22px,2vw,38px) clamp(25px,2.3vw,44px);border:2px solid #dba45e;border-radius:28px;background:linear-gradient(145deg,#1d3549f5,#102b3bf2);box-shadow:0 18px 45px #081c2c91,inset 0 1px #ffe0ae38;color:#fff8ea;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.welcome-bubble::before{content:"";position:absolute;left:-13px;top:22%;width:22px;height:22px;transform:rotate(45deg);border-left:2px solid #dba45e;border-bottom:2px solid #dba45e;background:#1b3447}
.welcome-title{margin:0 0 15px;font-size:clamp(26px,2.5vw,48px);font-weight:600;line-height:1.06;letter-spacing:-.035em}
.welcome-title em{font-style:normal;color:#f4c37d}
.welcome-copy{margin:0;font-size:clamp(17px,1.4vw,25px);line-height:1.34;color:#f7eee0}
.room.welcome-visible .welcome-bubble{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.room:not(.welcome-visible) .welcome-bubble{transition:none}
@media(max-width:760px){.welcome-bubble{display:none!important}}

/* Keep the return route recognizable against the illustrated room. */
.back{min-height:48px;padding:8px 16px 8px 9px;border:1px solid #e5b675;border-radius:999px;background:linear-gradient(135deg,#18394bef,#102b3cef);color:#fff8eb;box-shadow:0 8px 20px #061c2b88,inset 0 1px #fff5d84d;gap:9px;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.back span{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#f1c682;color:#193645;font-size:22px;line-height:1;transition:transform .2s ease}
.back:hover{background:linear-gradient(135deg,#24506af5,#17384df5);box-shadow:0 10px 24px #061c2baa,0 0 0 2px #f1c6827a;text-decoration:none;transform:translateX(-2px)}
.back:hover span{transform:translateX(-2px)}
@media(max-width:760px){
 .room-header{position:sticky;top:0;z-index:5;background:linear-gradient(90deg,#19344aef,#19344ad9);backdrop-filter:blur(10px);box-shadow:0 4px 16px #071b2b55}
 .back{min-height:44px;padding:6px 9px 6px 6px;gap:5px;font-size:11px;white-space:nowrap}
 .back span{width:26px;height:26px;font-size:18px}
}