/* ===== preloader + page wipe (light) ===== */
html.lenis{scroll-behavior:auto}
#pre{position:fixed;inset:0;z-index:9999;animation:preFail 0s 9s forwards}
@keyframes preFail{to{visibility:hidden;opacity:0}}
html.pre-skip #pre{display:none}
#pre.hide{display:none}
#pre .pp{position:absolute;inset:0;display:flex}
#pre .pp i{flex:1;position:relative;transition:transform 1s cubic-bezier(.76,0,.24,1)}
#pre .pp i:nth-child(1){background:var(--navy)}#pre .pp i:nth-child(2){background:var(--teal);transition-delay:.07s}
#pre .pp i:nth-child(3){background:var(--sage);transition-delay:.14s}#pre .pp i:nth-child(4){background:var(--mist);transition-delay:.21s}
#pre.done .pp i{transform:translateY(-104%)}
#pre.wipe .pp i{transform:translateY(104%)}
#pre.wipe.cover .pp i{transform:none}
/* paper layer that holds the logo, fades away before the panels lift */
.pre-paper{position:absolute;inset:0;background:var(--paper);z-index:1;transition:opacity .5s}
#pre.done .pre-paper{opacity:0}
#pre.wipe .pre-paper,html.pre-wipe #pre .pre-paper{display:none}
#pre.wipe .pre-in,html.pre-wipe #pre .pre-in{display:none}
.pre-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;transition:opacity .45s}
#pre.done .pre-in{opacity:0}
.pre-logo{width:104px;height:auto;margin:0 auto 22px;opacity:0;animation:logoIn .9s .1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes logoIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
.pre-name{font-weight:800;font-size:clamp(18px,3vw,30px);letter-spacing:.32em;color:var(--navy);text-indent:.32em}
.pre-name span{display:inline-block;opacity:0;transform:translateY(12px);animation:pl .6s forwards}
@keyframes pl{to{opacity:1;transform:none}}
.pre-sub{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--teal);text-indent:.34em}
.pre-bar{display:flex;width:min(260px,70vw);height:4px;margin:26px auto 0;border-radius:2px;overflow:hidden;background:rgba(3,25,38,.12)}
.pre-bar i{height:100%;width:0;transition:width .15s linear}
.pre-bar i:nth-child(1){background:var(--cy)}.pre-bar i:nth-child(2){background:var(--ma)}.pre-bar i:nth-child(3){background:var(--ye)}.pre-bar i:nth-child(4){background:var(--navy)}
.pre-pct{position:absolute;right:clamp(18px,4vw,56px);bottom:clamp(14px,3vw,40px);font-family:var(--mono);font-size:clamp(34px,7vw,84px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--teal);z-index:2;transition:opacity .4s}
#pre.done .pre-pct{opacity:0}
html.pre-wipe #pre .pre-pct{display:none}

/* ===== journey (light, soft) ===== */
.journey{display:none;padding:0;background:var(--cream)}
html.gs .journey{display:block}
.journey .stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--cream)}
.scene{position:absolute;inset:0}
.scene svg{width:100%;height:100%;display:block}
.s-desk{will-change:transform}
.s-ui,.s-press,.s-led{opacity:0;visibility:hidden}
.steam path{animation:steam 3.2s ease-in-out infinite}.steam path+path{animation-delay:-1.6s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}50%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}}

.app{position:absolute;inset:0;display:flex;flex-direction:column;background:#eef1ec;color:#35575c;font-size:clamp(10px,1.05vw,14px);font-family:system-ui,"Segoe UI",sans-serif}
.a-top{height:2.6em;background:#dbe5e1;display:flex;align-items:center;gap:1.6em;padding:0 1em;border-bottom:1px solid #c3d2cd}
.dots{display:flex;gap:.5em}.dots i{width:.85em;height:.85em;border-radius:50%;background:#ff5f56}.dots i:nth-child(2){background:#ffbd2e}.dots i:nth-child(3){background:#27c93f}
.a-menu{opacity:.85;white-space:nowrap;overflow:hidden}.a-title{margin-left:auto;opacity:.7;white-space:nowrap}
.a-prop{height:2.4em;background:#e6ede9;display:flex;align-items:center;gap:1.8em;padding:0 1em;border-bottom:1px solid #c3d2cd;white-space:nowrap;overflow:hidden}
.a-prop b{color:var(--navy);font-weight:600;margin-left:.3em}.a-prop .sp{margin-left:auto}.a-prop .sp+.sp{margin-left:0}
.a-body{flex:1;display:grid;grid-template-columns:3.6em 1fr 17em;min-height:0}
.a-tools{background:#e6ede9;border-right:1px solid #c3d2cd;display:flex;flex-direction:column;align-items:center;gap:.5em;padding-top:.8em}
.a-tools i{width:2.5em;height:2.5em;display:grid;place-items:center;border-radius:.4em}
.a-tools i.on{background:var(--teal)}.a-tools svg{width:1.4em;height:1.4em;fill:none;stroke:#35575c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-tools i.on svg{stroke:#fff}
.a-canvas{position:relative;background:#c9d7d2;display:grid;place-items:center;overflow:hidden}
.ruler{position:absolute;background:#dbe5e1;z-index:2;background-image:repeating-linear-gradient(90deg,#8aa5a1 0 1px,transparent 1px 12px)}
.ruler.rx{left:0;right:0;top:0;height:1.3em}.ruler.ry{top:0;bottom:0;left:0;width:1.3em;background-image:repeating-linear-gradient(0deg,#8aa5a1 0 1px,transparent 1px 12px)}
.artboard{position:relative;width:min(78%,calc((100vh - 12em)*1.9));box-shadow:0 12px 40px rgba(3,25,38,.28);background:#fff;line-height:0}
.artboard svg{width:100%;height:auto}
.sel{position:absolute;inset:-6px;border:1px dashed var(--cy);pointer-events:none;opacity:0}
.sel i{position:absolute;width:9px;height:9px;background:#fff;border:1px solid var(--cy)}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){left:50%;top:-5px}.sel i:nth-child(3){right:-5px;top:-5px}.sel i:nth-child(4){left:-5px;top:50%}
.sel i:nth-child(5){right:-5px;top:50%}.sel i:nth-child(6){left:-5px;bottom:-5px}.sel i:nth-child(7){left:50%;bottom:-5px}.sel i:nth-child(8){right:-5px;bottom:-5px}
.a-side{background:#e6ede9;border-left:1px solid #c3d2cd;padding:.8em;display:flex;flex-direction:column;gap:.9em;overflow:hidden}
.panel{background:#fff;border-radius:.5em;padding:.8em;border:1px solid #d3dfdb}.panel h4{font-size:.9em;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:.7em;font-family:var(--mono)}
.sl{display:grid;grid-template-columns:1.4em 1fr 2em;align-items:center;gap:.5em;margin-bottom:.55em}.sl em{font-style:normal;font-weight:700}
.sl span{height:.5em;border-radius:.3em;background:#dbe5e1;position:relative;overflow:hidden}.sl u{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--teal),var(--sage))}.sl b{text-align:right;color:var(--navy);font-weight:600}
.ly{display:flex;align-items:center;gap:.6em;padding:.45em .5em;border-radius:.35em;background:#eef1ec;margin-bottom:.35em;opacity:0}.ly i{width:1.2em;height:1.2em;border-radius:.2em;background:linear-gradient(135deg,var(--cy),var(--ma))}
.a-palette{height:2.4em;background:#e6ede9;border-top:1px solid #c3d2cd;display:flex;gap:.3em;align-items:center;padding:0 .8em}.a-palette i{width:1.6em;height:1.6em;border-radius:.25em;border:1px solid rgba(3,25,38,.2)}
.a-status{height:2.1em;background:#dbe5e1;display:flex;gap:2em;align-items:center;padding:0 1em;font-size:.9em;color:#5d7b80;white-space:nowrap;overflow:hidden}.a-status .sp{margin-left:auto;color:#1c8a52}

/* the one dark moment: night shop front (deep navy, not black) */
.s-led{background:#07202e}
.led-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,#1d4a5c,#07202e 72%)}
.led-wall{position:absolute;left:0;right:0;top:12%;bottom:0;background:repeating-linear-gradient(0deg,#16394a 0 28px,#102f3e 28px 30px),#133545;opacity:.95}
.led-beams{position:absolute;left:0;right:0;top:8%;height:70%;opacity:0;background:radial-gradient(ellipse 36% 60% at 50% 0,rgba(244,233,205,.3),transparent 70%)}
.led-board{position:absolute;left:50%;top:20%;transform:translateX(-50%);width:min(90vw,1180px);padding:clamp(18px,4vw,50px) clamp(12px,3vw,40px);background:#0b2b3b;border:2px solid #2a5566;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center}
.led-word{display:flex;justify-content:center;font-weight:900;font-size:clamp(28px,8vw,118px);line-height:1.05;letter-spacing:.05em}
.led-word span{--on:0;color:color-mix(in srgb,#fff7e0 calc(var(--on)*100%),#2b5566);text-shadow:0 0 calc(7px*var(--on)) rgba(255,247,224,var(--on)),0 0 calc(24px*var(--on)) rgba(244,233,205,var(--on)),0 0 calc(60px*var(--on)) rgba(255,200,110,var(--on)),0 0 calc(110px*var(--on)) rgba(255,200,110,calc(var(--on)*.6))}
.led-sub{margin-top:clamp(8px,1.6vw,20px);font-family:var(--mono);font-size:clamp(10px,1.3vw,16px);letter-spacing:.42em;color:#5f8794;transition:color .6s}
.led-board.lit .led-sub{color:var(--cream)}
.led-shop{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(70vw,860px);height:30%;display:flex;gap:10px;align-items:flex-end;justify-content:center}
.led-shop i{flex:1;height:84%;background:linear-gradient(#f4e9cd,#e9c98a);opacity:0;border-radius:10px 10px 0 0}

.jcap{position:absolute;left:clamp(16px,5vw,70px);bottom:clamp(64px,11vh,120px);max-width:min(440px,calc(100vw - 32px));z-index:6;padding:22px 26px;border-radius:22px;background:rgba(251,247,234,.94);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 18px 40px rgba(3,25,38,.18)}
.jn{display:block;font-family:var(--mono);font-size:44px;font-weight:700;line-height:1;color:var(--sage)}
.jt{font-size:clamp(22px,3vw,32px);margin:8px 0 6px;text-transform:uppercase;font-weight:800}.jp{font-size:15px}.jcap .btn{margin-top:16px}
.jdots{position:absolute;right:clamp(14px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:6}
.jdots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--navy);background:rgba(251,247,234,.6);transition:.3s}.jdots i.on{background:var(--navy);transform:scale(1.3)}
.jhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--navy);background:rgba(251,247,234,.85);padding:6px 14px;border-radius:999px}

/* ===== 3D walk gallery ===== */
.walk{display:none;position:relative;background:var(--cream)}
html.gs .walk.on{display:block}
.walk-stage{position:relative;height:100vh;height:100svh;overflow:hidden;perspective:900px;perspective-origin:50% 46%;background:linear-gradient(#f4e9cd,#dcecea)}
.walk-world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.wfloor{position:absolute;left:50%;top:62%;width:1400px;margin-left:-700px;height:20000px;background:repeating-linear-gradient(0deg,rgba(3,25,38,.12) 0 2px,transparent 2px 200px),linear-gradient(90deg,transparent 0,rgba(119,172,162,.35) 50%,transparent 100%);transform-origin:50% 0;transform:translateZ(3000px) rotateX(-90deg);transform-style:preserve-3d}
.wf{position:absolute;left:50%;top:46%;width:360px;margin-left:-180px;transform-style:preserve-3d;transform:translate3d(calc(var(--side)*400px),-50%,calc(var(--i)*-560px)) rotateY(calc(var(--side)*-26deg))}
.wf figure{border-radius:6px;overflow:hidden;background:#fff;padding:12px 12px 8px;box-shadow:0 24px 50px rgba(3,25,38,.28);border:1px solid var(--line)}
.wf img{width:100%;height:230px;object-fit:cover;border-radius:2px}
.wf figcaption{padding:10px 2px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.wf figcaption b{color:var(--teal);margin-right:8px}
.walk-ui{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:3}
.walk-ui span{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;background:rgba(251,247,234,.9);border:1px solid var(--line);padding:8px 16px;border-radius:999px}
.walk-title{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:3;text-align:center;pointer-events:none}
.walk-title h2{margin:0;font-size:clamp(24px,4vw,44px)}
.modes{display:flex;gap:8px;margin-bottom:26px}
.modes .chip.on{background:var(--navy);color:#fff}

@media(max-width:760px){
 .a-body{grid-template-columns:0 1fr 0}.a-tools,.a-side{display:none}.a-menu{display:none}.a-prop .sp{display:none}
 .artboard{width:94%}.jdots{display:none}.jcap{padding:16px 18px}.jn{font-size:32px}
}
@media(prefers-reduced-motion:reduce){#pre{display:none}.journey{display:none!important}.walk{display:none!important}}

@media(max-width:760px){.walk{display:none!important}.modes{display:none}}

/* ===== page transition (Heron-style: page slides away under hairline grid) ===== */
#pt{position:fixed;inset:0;z-index:9998;pointer-events:none;visibility:hidden;overflow:hidden}
#pt.in{visibility:visible}
#pt .ptp,#pt .ptg{position:absolute;inset:0;transform:translateX(100%);transition:transform .85s cubic-bezier(.76,0,.24,1)}
#pt .ptp{background:var(--paper)}
#pt .ptg{transition-delay:.07s;
  background:
   linear-gradient(90deg,transparent calc(100% - 1px),rgba(3,25,38,.26) 0) 0 0/25% 100%,
   linear-gradient(transparent calc(100% - 1px),rgba(3,25,38,.26) 0) 0 0/100% 33.3334%,
   radial-gradient(circle,rgba(3,25,38,.5) 1.5px,transparent 2px) 0 0/25% 33.3334%}
#pt::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border:1px solid rgba(3,25,38,.5);border-radius:50%;opacity:0;transition:opacity .3s .4s}
#pt.cover::after{opacity:.6}
#pt.cover .ptp,#pt.cover .ptg{transform:none}
html.leaving body>section,html.leaving body>.marq,html.leaving body>.hero2,html.leaving body>.phero{transform:translateX(-9vw);transition:transform .85s cubic-bezier(.76,0,.24,1)}
html.pt-arrive #pt{visibility:visible}
html.pt-arrive #pt .ptp,html.pt-arrive #pt .ptg{transform:none;transition:none}
html.pt-arrive #pt.out .ptp,html.pt-arrive #pt.out .ptg{transform:translateX(-100%);transition:transform .95s cubic-bezier(.76,0,.24,1)}
html.pt-arrive #pt.out .ptg{transition-delay:.06s}
html.pt-arrive #pt::after{opacity:0}

/* ===== section animations ===== */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wm>span{display:inline-block}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;top:0;height:4px;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--cy),var(--ma),var(--ye),var(--navy));z-index:2}
.st{transition:background .5s,opacity .5s;opacity:.55}.st.on{opacity:1;background:rgba(244,233,205,.55)}.st.on::before{color:var(--teal)}
.svc-sec.pinned{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 40px;overflow:hidden}
.svc-sec.pinned>.wrap{max-width:none;width:100%}
.svc-sec.pinned .sec-head{max-width:1200px;margin:0 auto 34px}
.cards.hs{display:flex;flex-wrap:nowrap;gap:24px;width:max-content;padding:0 22px 8px max(22px,calc((100vw - 1200px) / 2))}
.cards.hs .sc{width:400px;flex:0 0 400px}
.svc-sec.pinned .rvl{opacity:1;transform:none}