:root{--ink:#171a18;--cream:#f6f2e9;--muted:#d9d3c7;--accent:#dc5a50}

    *{box-sizing:border-box}
html{scroll-behavior:smooth}
html.scene-navigating{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:white;font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
::selection{background:#cf6e61;color:white}

    .topbar{height:74px;position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,70px);background:linear-gradient(#1119,#1110);transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.topbar.scrolled{background:#171a18ee;backdrop-filter:blur(18px);border-color:#ffffff24}

    .brand{display:inline-flex;align-items:center;gap:10px;font:800 29px/1 Manrope,sans-serif;letter-spacing:-.075em}
.topbar .brand-logo{display:block;width:auto;height:58px;object-fit:contain;filter:drop-shadow(0 2px 10px #0008)}
.brand-mark{display:inline-block;width:27px;height:27px;border:6px solid #d94c55;border-right-color:#13a4d8;border-radius:50%;transform:rotate(-30deg)}
.top-links{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:700;letter-spacing:.015em}
.top-links a:hover{color:#e8b6aa}
.top-links .outline{border:1px solid #ffffff8c;padding:11px 15px}
.menu{display:none;border:0;background:none;color:white;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation}

    .entry{height:290vh;position:relative;--p:0;--approach:0;--cross:0;--room-progress:0;--portal-x:1%;--portal-y:1%;--door-p:0;--facade-alpha:1;--threshold-alpha:1;--inside-alpha:0}
.entry-stage{height:100vh;position:sticky;top:0;overflow:hidden;background:#161a18}
.inside,.threshold,.facade-piece{position:absolute;inset:0}
.inside{background:var(--asset-room-overview) center/cover;opacity:var(--inside-alpha);transform:scale(calc(.94 + var(--room-progress)*.12));filter:brightness(.92)}
/* The doorway and the settled room use the same photograph; their close scales keep the handoff continuous. */
.threshold{z-index:1;background:var(--asset-room-overview) center/cover;opacity:var(--threshold-alpha);transform:scale(calc(.94 + var(--room-progress)*.12));filter:brightness(.92)}
/* One aspect-preserving image plane keeps the real door pixels and masks aligned at every viewport. */
.entry-stage{container-type:size}
.facade{--fw:max(100cqw,196.078431cqh);--fh:max(100cqh,51cqw);--dl:.366;--dm:.5;--dr:.635;--dt:.14902;--db:.84902;position:absolute;z-index:2;left:50%;top:50%;width:var(--fw);height:var(--fh);transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--approach)*.24 + var(--cross)*.12));transform-origin:center;will-change:transform}
.entry.crossing .facade{mask-image:radial-gradient(ellipse var(--portal-x) var(--portal-y) at 50% 50%,transparent 78%,#000 100%)}
.facade-piece{z-index:2;overflow:hidden;opacity:var(--facade-alpha);pointer-events:none}
.facade-piece picture,.door-wing picture{position:absolute;inset:0;display:block}
.facade-piece img{width:100%;height:100%;object-fit:cover;display:block}
.facade-top{clip-path:inset(0 0 calc((1 - var(--dt))*100%) 0)}
.facade-bottom{clip-path:inset(calc(var(--db)*100%) 0 0 0);opacity:var(--facade-alpha)}
.facade-left{clip-path:inset(calc(var(--dt)*100%) calc((1 - var(--dl))*100%) calc((1 - var(--db))*100%) 0)}
.facade-right{clip-path:inset(calc(var(--dt)*100%) 0 calc((1 - var(--db))*100%) calc(var(--dr)*100%))}
.door-wing{position:absolute;z-index:3;top:calc(var(--dt)*100%);height:calc((var(--db) - var(--dt))*100%);overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;opacity:var(--facade-alpha);box-shadow:0 0 22px #0009;will-change:transform}
.door-wing img{position:absolute;width:var(--fw);height:var(--fh);max-width:none;object-fit:cover;top:calc(var(--fh)*var(--dt)*-1);display:block}
.door-wing.left{left:calc(var(--dl)*100%);width:calc((var(--dm) - var(--dl))*100%);transform-origin:left center;transform:perspective(1200px) rotateY(calc(var(--door-p)*-108deg))}
.door-wing.right{left:calc(var(--dm)*100%);width:calc((var(--dr) - var(--dm))*100%);transform-origin:right center;transform:perspective(1200px) rotateY(calc(var(--door-p)*108deg))}
.door-wing.left img{left:calc(var(--fw)*var(--dl)*-1)}
.door-wing.right img{left:calc(var(--fw)*var(--dm)*-1)}

    .entry-shade{position:absolute;z-index:4;inset:0;background:linear-gradient(180deg,#10120f55,transparent 42%,#080a08a6);pointer-events:none;opacity:calc(1 - var(--p)*.8)}
.entry-copy{position:absolute;z-index:5;left:8vw;bottom:13vh;max-width:780px;opacity:clamp(0,calc((.27 - var(--p))*5.2),1);transform:translateY(calc(var(--p)*-35px));pointer-events:none}
.eyebrow{display:block;color:#f1c6ae;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.entry-copy h1{font:800 clamp(47px,7.5vw,112px)/.99 Manrope,sans-serif;letter-spacing:-.072em;margin:19px 0 20px;text-shadow:0 5px 25px #0007}
.entry-copy p{font-size:clamp(16px,1.6vw,20px);color:#f4f0e9;margin:0 0 42px;line-height:1.5}
.scroll-cue{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:inline-flex;gap:15px;align-items:center}
.scroll-cue:after{content:'';display:inline-block;width:50px;height:1px;background:#fff}
.inside-copy{position:absolute;z-index:5;left:8vw;bottom:13vh;opacity:clamp(0,calc((var(--p) - .70)*3.7),1);pointer-events:none}
html.showroom-motion .entry .inside-copy{opacity:0}
.inside-copy strong{display:block;font:700 clamp(40px,5.7vw,84px)/1.04 Manrope,sans-serif;letter-spacing:-.065em;margin-top:15px;text-shadow:0 4px 20px #0007}

.journey{height:1100vh;margin-top:-100vh;position:relative;background:transparent}
.journey-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#161c17;container-type:size;will-change:transform,opacity}
.hall{position:absolute;inset:-3%;background:var(--asset-room-overview) center/cover;transform:translate3d(calc(var(--hall-x,0vw) + var(--walk-x,0vw)),calc(var(--hall-y,0px) + var(--walk-y,0px)),0) scale(var(--hall-scale,1.06));transform-origin:center 46%;will-change:transform;filter:saturate(var(--hall-saturation,.91)) brightness(var(--hall-brightness,1))}
.hall:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#070b0844,transparent 42%,#090e0b6e)}

    .bay{position:absolute;inset:-3%;background-image:var(--image);background-size:cover;background-position:var(--focus,center);opacity:var(--alpha,0);transform:translate3d(var(--slide,0vw),var(--bay-y,0px),0) scale(var(--scale,1.04));transform-origin:var(--origin,center);will-change:opacity,transform;pointer-events:none}
.bay.left{mask-image:linear-gradient(90deg,#000 0%,#000 46%,rgba(0,0,0,var(--coverage,0)) 82%)}
.bay.right{mask-image:linear-gradient(270deg,#000 0%,#000 46%,rgba(0,0,0,var(--coverage,0)) 82%)}
.bay.back{mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,#000 43%,rgba(0,0,0,var(--coverage,0)) 87%)}
.bay.sanitari-approach,.bay.sanitari-depart.departing,.bay.ngrohje-approach,.bay.ngrohje-depart.departing,.bay.uji-approach,.bay.uji-depart.departing,.bay.vegla-approach,.bay.vegla-depart.departing,.bay.garden-approach,.bay.garden-depart.departing{mask-image:none}
.return-facade{--facade-alpha:1;z-index:3;opacity:var(--return-alpha,0);transform:translate3d(-50%,-50%,0) scale(var(--return-scale,1));pointer-events:none;will-change:opacity,transform}

    .journey-stage:after{content:'';position:absolute;z-index:2;inset:0;background:linear-gradient(0deg,#090c09a8,transparent 35%),linear-gradient(90deg,#0a0e0a56,transparent 35%,transparent 65%,#0a0e0a56);pointer-events:none}

    .intro,.chapter,.journey-entry-copy{position:absolute;z-index:4;pointer-events:none;opacity:var(--alpha,0)}
.journey-entry-copy{left:8vw;bottom:13vh;transform:translate3d(var(--copy-x,0),var(--copy-y,0),0)}
.journey-entry-copy strong{display:block;font:700 clamp(40px,5.7vw,84px)/1.04 Manrope,sans-serif;letter-spacing:-.065em;margin-top:15px;text-shadow:0 4px 20px #0007}
.intro{inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 8vw 12vh;transform:translate3d(var(--intro-x,0),var(--intro-y,0),0)}
.intro h2{font:800 clamp(47px,6vw,88px)/1.03 Manrope,sans-serif;letter-spacing:-.07em;margin:17px 0 20px;max-width:750px;text-shadow:0 4px 30px #0009}
.intro p{font-size:16px;max-width:500px;line-height:1.55;color:#eee9dd;margin:0 0 22px}
.quick-nav{display:flex;flex-wrap:wrap;gap:7px;max-width:900px}
.quick-nav a{min-height:44px;pointer-events:auto;display:grid;grid-template-columns:26px auto 16px;align-items:center;gap:10px;background:#121713e8;border:1px solid #ffffff52;padding:9px 13px;font-size:12px;font-weight:700;transition:background .2s,border-color .2s,color .2s,transform .2s}
.quick-nav .sector-number,.route-number{color:#e6a496;font:700 10px/1 Manrope,sans-serif;letter-spacing:.12em}
.quick-nav .sector-name{white-space:nowrap}
.quick-nav .sector-arrow{color:#f1c6ae;transition:transform .2s}
.quick-nav a:hover,.quick-nav a:focus-visible{background:#f4f0e9;border-color:#f4f0e9;color:#171a18;transform:translateY(-2px)}
.quick-nav a:hover .sector-arrow,.quick-nav a:focus-visible .sector-arrow{transform:translate(2px,-2px)}

    .chapter{bottom:10vh;max-width:min(500px,41vw);padding:18px 21px 20px;background:linear-gradient(100deg,#0c110dde 0%,#101510c2 66%,#10151028 100%);border-top:1px solid #ffffff42;box-shadow:0 22px 70px #0002;transform:translateY(var(--rise,18px));text-shadow:0 2px 15px #000a}
.chapter.left-text{left:8vw}
.chapter.right-text{right:max(190px,10vw);text-align:right;background:linear-gradient(260deg,#0c110dde 0%,#101510c2 66%,#10151028 100%)}
.chapter.active{pointer-events:auto}
.chapter .eyebrow{display:inline-block;border-top:2px solid var(--accent);padding-top:12px}
.chapter h2{font:800 clamp(48px,5.7vw,82px)/1.03 Manrope,sans-serif;letter-spacing:-.065em;margin:13px 0 16px}
.chapter p{font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:#f4eee4;margin:0 0 23px}
.chapter .items{font-size:12px;color:#e8d8c8;line-height:1.6;margin:0 0 23px;letter-spacing:.025em}
.chapter a{min-height:44px;display:inline-flex;align-items:center;gap:22px;padding:12px 17px;background:#f5f0e7;color:#1b201b;font-size:13px;font-weight:800;text-shadow:none;transition:background .2s,transform .2s}
.chapter a:hover{background:white;transform:translateY(-3px)}

    .route{position:absolute;z-index:5;top:50%;right:22px;width:162px;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:6px;background:linear-gradient(90deg,#11161120,#111611dc);border-right:1px solid #ffffff2e;opacity:var(--route-alpha,0);pointer-events:none}
.route.show{pointer-events:auto}
.route a{min-height:44px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;padding:8px 10px;border-right:2px solid transparent;background:#151a16a6;color:#eee9df;transition:background .2s,border-color .2s,color .2s,transform .2s}
.route-name{font:700 11px/1.2 Manrope,sans-serif;letter-spacing:.025em;white-space:nowrap}
.route a.active{background:#f5f0e7;color:#171a18;border-right-color:var(--accent);transform:translateX(-4px)}
.route a.active .route-number{color:#a43f38}
.route a:hover,.route a:focus-visible{background:#ffffffeb;color:#171a18}
.walk-meter{position:absolute;z-index:5;left:8vw;bottom:4vh;display:flex;align-items:center;gap:15px;color:#eee9df;font:700 10px Manrope,sans-serif;letter-spacing:.17em;opacity:var(--meter-alpha,1)}
.meter-line{width:clamp(150px,24vw,310px);height:1px;background:#ffffff64}
.meter-line i{display:block;height:100%;width:var(--walk-progress,0%);background:var(--accent)}
.waypoint{height:100vh;pointer-events:none}

    .finish{padding:110px 8vw 120px;background:#ece8df;color:#20241f}
.finish h2{font:800 clamp(40px,5vw,72px)/1.04 Manrope,sans-serif;letter-spacing:-.06em;max-width:760px;margin:18px 0}
.finish p{font-size:17px;line-height:1.6;max-width:560px;color:#55594f}
.finish-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.finish-links a{border:1px solid #303b36;padding:12px 16px;font-size:13px;font-weight:700}
.finish-links a:hover{background:#20241f;color:white}
.footer{background:#171a18;padding:36px 8vw;display:flex;justify-content:space-between;align-items:center;color:#b9baaf;font-size:13px}

    @media(max-width:700px){.topbar{height:65px}
.brand{font-size:25px}
.topbar .brand-logo{height:50px}
.brand-mark{width:24px;height:24px;border-width:5px}
.menu{display:block;min-height:44px;padding:0 10px;margin-right:-10px;position:relative;z-index:2}
.top-links{display:none;position:absolute;top:65px;left:0;right:0;background:#171a18f5;padding:22px;flex-direction:column;align-items:stretch;gap:20px}
.top-links.open{display:flex}
.entry{height:240svh}
.entry-stage,.journey-stage{height:100svh}
.inside,.threshold{background-image:var(--asset-room-overview-mobile)}
.facade{--fw:max(100cqw,66.157761cqh);--fh:max(100cqh,151.153846cqw);--dl:.25;--dm:.507692;--dr:.767308;--dt:.295165;--db:.749364;transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--approach)*.16 + var(--cross)*.08))}
.facade.return-facade{transform:translate3d(-50%,-50%,0) scale(var(--return-scale,1))}
.threshold,.inside{transform:scale(calc(.98 + var(--room-progress)*.08))}
.entry-copy,.inside-copy{left:23px;right:23px;bottom:13vh}
.entry-copy h1{font-size:clamp(46px,12vw,68px)}
.entry-copy p{font-size:16px;max-width:330px}
.inside-copy strong{font-size:clamp(44px,11vw,63px)}
.journey{height:1100svh;margin-top:-100svh}
.waypoint{height:100svh}
.hall{background-image:var(--asset-room-overview-mobile);background-position:center}
.bay.left,.bay.right,.bay.back{inset:-1%;background-position:var(--mobile-focus,center);mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,var(--coverage,0)) 77%)}
.bay.sanitari-approach,.bay.sanitari-depart.departing,.bay.ngrohje-approach,.bay.ngrohje-depart.departing,.bay.uji-approach,.bay.uji-depart.departing,.bay.vegla-approach,.bay.vegla-depart.departing,.bay.garden-approach,.bay.garden-depart.departing{mask-image:none}
.intro{padding:0 22px 12vh}
.journey-entry-copy{left:22px;right:22px;bottom:13vh}
.journey-entry-copy strong{font-size:clamp(44px,11vw,63px)}
.intro h2{font-size:clamp(39px,10vw,56px)}
.intro p{font-size:14px;margin-bottom:16px}
.quick-nav{gap:6px}
.quick-nav a{min-height:44px;grid-template-columns:23px auto 13px;gap:7px;font-size:11px;padding:9px 10px}
.chapter,.chapter.left-text,.chapter.right-text{left:16px;right:16px;bottom:9vh;max-width:none;max-height:calc(100svh - 215px);padding:14px 16px 16px;text-align:left;background:linear-gradient(180deg,#111611e8,#0d110dee)}
.chapter h2{font-size:clamp(43px,11vw,59px);margin:8px 0 11px}
.chapter p{font-size:15px;margin-bottom:12px;max-width:370px}
.chapter .items{font-size:11px;margin-bottom:13px}
.chapter a{min-height:44px;padding:11px 14px}
.route{left:12px;right:12px;top:76px;width:auto;transform:none;flex-direction:row;gap:2px;padding:4px;background:#111611e8;border:1px solid #ffffff2e}
.route a{min-width:44px;min-height:44px;flex:0 1 44px;grid-template-columns:1fr 0fr;gap:0;padding:8px 10px;overflow:hidden;border-right:0;border-bottom:2px solid transparent;text-align:center}
.route a.active{flex:1 1 130px;grid-template-columns:28px 1fr;gap:7px;border-right:0;border-bottom-color:var(--accent);transform:none;text-align:left}
.route .route-name{max-width:0;opacity:0;overflow:hidden;transition:max-width .2s,opacity .2s}
.route a.active .route-name{max-width:110px;opacity:1}
.walk-meter{left:22px;bottom:25px;font-size:10px;gap:12px}
.meter-line{width:145px}
.finish{padding:80px 23px}
.footer{padding:30px 23px;gap:20px;flex-direction:column;text-align:center}
}

    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.door-wing{display:none}
.facade-piece{opacity:0!important}
.return-facade{display:none}
.threshold{opacity:0!important}
.inside{opacity:1!important}
.hall,.bay,.entry-copy,.inside-copy,.chapter{transform:none!important}
}

  
/* Keep this stylesheet isolated from the existing Tailwind pages. */
.showroom-page{color:#fff;background:#171a18}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:#f6f2e9;color:#171a18;padding:12px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.company-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}

.finish .eyebrow{color:#9d453c}.finish a:focus-visible{outline-color:#171a18}
.entry-stage,.journey-stage{background:#171a18}
.chapter{max-height:calc(100svh - 150px);overflow:auto}
.intro[inert],.route[inert]{pointer-events:none}
.finish{scroll-margin-top:74px}
@media(max-width:700px){.chapter,.chapter.left-text,.chapter.right-text{max-height:calc(100svh - 215px)}}
@media(min-width:701px) and (max-height:600px){.chapter h2{font-size:42px}.chapter p{font-size:14px}.intro h2{font-size:42px}}
/* No JS and reduced motion expose every stop in ordinary document flow. */
html:not(.showroom-motion) .entry{height:100svh}
html:not(.showroom-motion) .entry-stage{position:relative}
html:not(.showroom-motion) .entry-copy{opacity:1;transform:none}
html:not(.showroom-motion) .inside{opacity:1;transform:none}
html:not(.showroom-motion) .facade-piece,html:not(.showroom-motion) .door-wing,html:not(.showroom-motion) .threshold,html:not(.showroom-motion) .inside-copy,html:not(.showroom-motion) .return-facade{display:none}
html:not(.showroom-motion) .journey{height:auto;margin-top:0}
html:not(.showroom-motion) .journey-stage{position:relative;height:auto;margin-bottom:0;overflow:visible}
html:not(.showroom-motion) .hall,html:not(.showroom-motion) .bay,html:not(.showroom-motion) .route,html:not(.showroom-motion) .waypoint,html:not(.showroom-motion) .walk-meter,html:not(.showroom-motion) .journey-entry-copy{display:none}
html:not(.showroom-motion) .intro,html:not(.showroom-motion) .chapter{position:relative;inset:auto;opacity:1;transform:none;max-width:none;max-height:none;pointer-events:auto;text-align:left;padding:90px 8vw;scroll-margin-top:65px}
html:not(.showroom-motion) .chapter{min-height:65svh;background:linear-gradient(90deg,#171a18ef,#171a1888),var(--stop-image) center/cover;border-top:1px solid #ffffff26}
html:not(.showroom-motion) .journey-stage:after{display:none}

/* Temporary mobile image clarity test */
@media (max-width: 767px) {
    .journey-stage .bay {
        inset: 0;
    }
}