/* ===== 3D desk room + services corridor ===== */
.world{display:none;padding:0;background:#f1e8cf}
html.gs .world{display:block}
html.world-on .svc-grid{display:none}
.world-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#16313a}
.room{position:absolute;inset:0}
.room canvas{width:100%;height:100%;display:block}

/* corridor */
.space{position:absolute;inset:0;opacity:0;visibility:hidden;perspective:900px;perspective-origin:50% 50%;overflow:hidden}
.space-bg{position:absolute;inset:0;background:linear-gradient(#f4e9cd 0,#eee8d2 42%,#dcecea 100%)}
.space-world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fl{position:absolute;left:50%;top:64%;width:1500px;margin-left:-750px;height:26000px;transform-origin:50% 0;transform:translateZ(3200px) rotateX(-90deg);
  background:repeating-linear-gradient(0deg,rgba(3,25,38,.13) 0 2px,transparent 2px 200px),linear-gradient(90deg,transparent 0,rgba(119,172,162,.38) 50%,transparent 100%)}
.fw{--dx:410px;position:absolute;left:50%;top:57%;width:370px;margin-left:-185px;will-change:opacity;
  transform:translate3d(calc(var(--side) * var(--dx)),-50%,calc(var(--i) * -520px - 420px)) rotateY(calc(var(--side) * -26deg))}
.fw figure{margin:0;border-radius:6px;overflow:hidden;background:#fff;padding:12px 12px 8px;box-shadow:0 26px 50px rgba(3,25,38,.28);border:1px solid var(--line)}
.fi{height:236px;border-radius:2px;overflow:hidden;background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative}
.fi img{width:100%;height:100%;object-fit:cover;display:block}
.fw figcaption{padding:10px 2px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.fw figcaption b{color:var(--teal);margin-right:8px}
.fi.t-brand{background:var(--cream)}.fi.t-brand .lg{width:26%;height:auto;object-fit:contain}
.fi.t-cmyk{align-items:stretch}.fi.t-cmyk i{flex:1}
.fi.t-half{background-color:#dcecea;background-image:radial-gradient(rgba(3,25,38,.3) 1.8px,transparent 2.2px);background-size:11px 11px}
.fi.t-half b{font-family:var(--head);font-weight:800;font-size:44px;letter-spacing:.03em;color:var(--navy);background:rgba(251,247,234,.9);padding:2px 14px}
.fi.t-swatch{background:var(--paper)}.fi.t-swatch .sw{display:block;width:62%;height:62%;border-radius:10px}
.fi.t-label{background:var(--navy)}.fi.t-label b{color:#fff;font-size:20px;text-transform:uppercase;text-align:center;padding:0 22px;line-height:1.2}

/* title at the top */
.sv-title{position:absolute;left:50%;top:clamp(78px,11vh,120px);transform:translate(-50%,0);width:min(900px,92vw);text-align:center;z-index:5;opacity:0;pointer-events:none}
.sv-title .mono{display:block;color:var(--teal);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.sv-title h2{font-size:clamp(26px,3.6vw,52px);line-height:1.04;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);margin:0}
.sv-title p{font-size:clamp(14px,1.3vw,17px);color:var(--mute);margin-top:8px}
.sv-title .btn{margin-top:14px;padding:10px 22px;font-size:14px;pointer-events:none}
.sv-title.on .btn{pointer-events:auto}
.sv-count{position:absolute;left:clamp(16px,5vw,70px);bottom:clamp(18px,5vh,46px);z-index:6;color:var(--mute);opacity:0}
.sv-count b{color:var(--navy);font-weight:700}
.sv-dots{position:absolute;right:clamp(14px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:6;opacity:0}
.sv-dots i{width:9px;height:9px;border-radius:50%;background:rgba(3,25,38,.22);transition:.3s}.sv-dots i.on{background:var(--navy);transform:scale(1.5)}
.sv-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);background:rgba(251,247,234,.85);padding:7px 16px;border-radius:999px;border:1px solid var(--line);opacity:0}

.wcap{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);z-index:6;color:#e8f2ef;padding:10px 20px;border-radius:999px;background:rgba(3,25,38,.5);backdrop-filter:blur(8px);white-space:nowrap;transition:opacity .3s}
.whint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;color:#cfe3e0;letter-spacing:.3em;text-transform:uppercase;font-size:11px;transition:opacity .3s}

@media(max-width:760px){
 .fw{--dx:15vw;width:56vw;margin-left:-28vw;top:56%;will-change:auto;transform:translate3d(calc(var(--side) * var(--dx)),-50%,calc(var(--i) * -520px - 420px)) rotateY(calc(var(--side) * -12deg))}
 .fw figure{padding:8px 8px 6px;box-shadow:0 12px 24px rgba(3,25,38,.22)}
 .fi{height:40vw;max-height:210px}.fi.t-half b{font-size:26px}.fi.t-label b{font-size:16px;padding:0 14px}.fw figcaption{font-size:9px;letter-spacing:.1em;padding:8px 2px 2px}
 .fl{width:900px;margin-left:-450px}
 .space{perspective:1250px}.wcap{bottom:14%;font-size:10px}.sv-dots{display:none}
 .sv-title{top:92px;width:90vw}.sv-title .mono{font-size:11px}.sv-title h2{font-size:25px}.sv-title p{font-size:13px;margin-top:6px}.sv-title .btn{margin-top:10px;padding:9px 18px;font-size:13px}
 .sv-count{bottom:76px}.sv-hint{bottom:74px;font-size:10px;letter-spacing:.2em;padding:6px 12px}
}
/* phones: no 3D journey, services become a stack of sticky cards (CSS only) */
@media(max-width:760px){
 .world{display:none!important}
 .svc-grid .cards{display:block;padding-bottom:6px}
 .svc-grid .sc{position:sticky;top:calc(84px + var(--n,0) * 14px);margin-bottom:26px;box-shadow:0 -6px 30px rgba(3,25,38,.12),0 14px 30px rgba(3,25,38,.1)}
 .svc-grid .sc:nth-child(1){--n:0}.svc-grid .sc:nth-child(2){--n:1}.svc-grid .sc:nth-child(3){--n:2}.svc-grid .sc:nth-child(4){--n:3}.svc-grid .sc:nth-child(5){--n:4}.svc-grid .sc:nth-child(6){--n:5}
 .svc-grid .sc .im{height:180px}.svc-grid .sc .tx{padding:18px 18px 20px}.svc-grid .sc .tx p{margin:6px 0 12px;font-size:14px}
 a.sc:hover{transform:none;box-shadow:none}.sc:hover .im img{transform:none}.svc-grid .sc .bar{transform:none}
}
@media(prefers-reduced-motion:reduce){.world{display:none!important}html.world-on .svc-grid{display:block!important}}