/* Shared demo parts. Each demo sets its own look through these variables in its style.css. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
img{display:block;max-width:100%}

/* parallax images sit oversized inside a clipped frame */
.ph{overflow:hidden;position:relative}
.ph>img{width:100%;height:100%;object-fit:cover}
.ph>img[data-px]{position:relative;top:-9%;height:118%}
.ph>img[data-zoom]{transform-origin:50% 60%}

/* reveals only hide content once the script is running */
.mo .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.16,1,.3,1)}
.mo .rv.in{opacity:1;transform:none}
.mo .rv.cur{opacity:1;transform:none;clip-path:inset(16% 0 0 0);transition:clip-path 1.6s cubic-bezier(.16,1,.3,1)}
.mo .rv.cur.in{clip-path:inset(0)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.wi{display:inline-block}
.mo [data-lines] .wi{transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*38ms)}
.mo [data-lines].in .wi{transform:none}
.fw{transition:opacity .25s linear}

/* horizontal reel: a swipe row by default, pinned on larger screens */
[data-h] .h-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
[data-h] .h-track::-webkit-scrollbar{display:none}
[data-h] .h-track>*{flex:none;scroll-snap-align:start}
[data-h].h-on .h-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
[data-h].h-on .h-track{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform}

/* stage: panels stacked by default, crossfading in a pinned frame on larger screens */
[data-stage].st-on .st-pin{position:sticky;top:0;height:100vh;overflow:hidden}
[data-stage].st-on .st-p{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
[data-stage].st-on .st-p.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
[data-stage].st-on .st-p .ph>img{transform:scale(1.05);transition:transform 2.2s cubic-bezier(.16,1,.3,1)}
[data-stage].st-on .st-p.on .ph>img{transform:none}

/* filter chips */
[data-filter-item]{transition:opacity .45s ease,transform .45s ease}
[data-filter-item].off{display:none}

/* demo popup */
.dm{position:fixed;inset:0;margin:auto;width:min(92vw,520px);max-height:88vh;height:fit-content;border:0;padding:clamp(28px,4vw,44px);background:var(--dm-bg,#fff);color:var(--dm-ink,#111);border-radius:var(--dm-r,0);font-family:var(--dm-body,inherit);overflow:auto;box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.dm[open]{animation:dmin .55s cubic-bezier(.16,1,.3,1)}
.dm::backdrop{background:rgba(10,10,10,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:dmfade .4s ease}
@keyframes dmin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dmfade{from{opacity:0}to{opacity:1}}
.dm-t{font-family:var(--dm-disp,inherit);font-weight:var(--dm-w,400);font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:var(--dm-ls,-.015em);text-transform:var(--dm-tt,none)}
.dm-m{margin-top:14px;font-size:17px;line-height:1.6;opacity:.82}
.dm-x{margin-top:26px;min-height:50px;padding:0 26px;border:1px solid var(--dm-btn,#111);border-radius:var(--dm-btnr,0);background:var(--dm-btn,#111);color:var(--dm-btnink,#fff);font:inherit;font-size:15px;cursor:pointer;transition:opacity .25s}
.dm-x:hover{opacity:.8}

/* styled dropdown, built from a native select */
.sel{position:relative;min-width:0}
.sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.sel-b{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:var(--sel-h,44px);padding:var(--sel-pad,0);border:var(--sel-bd,0);border-bottom:var(--sel-bb,1px solid currentColor);border-radius:var(--sel-r,0);background:var(--sel-bg,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s}
.sel-b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-b i{flex:none;width:9px;height:9px;margin:-3px 3px 0 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sel.open .sel-b i{transform:translateY(4px) rotate(225deg)}
.sel-l{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:var(--sel-lp,6px);list-style:none;max-height:260px;overflow:auto;background:var(--sel-lbg,#fff);color:var(--sel-link,#111);border:var(--sel-lbd,1px solid rgba(0,0,0,.12));border-radius:var(--sel-lr,0);box-shadow:0 26px 50px -22px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s .28s}
.sel.open .sel-l{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s}
.sel.up .sel-l{top:auto;bottom:calc(100% + 8px)}
.sel-l li{padding:11px 14px;border-radius:var(--sel-ir,0);font-size:16px;line-height:1.3;cursor:pointer;transition:background .2s,color .2s}
.sel-l li.act,.sel-l li:hover{background:var(--sel-hbg,rgba(0,0,0,.07));color:var(--sel-hink,inherit)}
.sel-l li[aria-selected="true"]{font-weight:500}

/* mobile menu */
.mm{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow-y:auto;transform:translateY(-100%);visibility:hidden;transition:transform .7s cubic-bezier(.22,1,.36,1),visibility 0s .7s}
.mm.open{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.22,1,.36,1),visibility 0s}

.kmd{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;gap:10px;align-items:center;padding:9px 14px;border-radius:999px;background:#151A17;color:#fff;font:500 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.kmd b{font-weight:700;color:#B9E2C8;white-space:nowrap}
@media(max-width:520px){.kmd span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}