/* Velar Bureau — service pages: one pinned scene where the site assembles as you scroll (js/asm.js).
   The caption column and the browser window reuse the .sh__* styles of the old four scenes (css/show.css);
   the mock pieces reuse the .m-* parts from css/get.css. js/asm.js sets is-in, is-k1 … is-k5 (they add up) and data-lang.
   k0 hero · k1 enquiry form · k2 booking block · k3 catalogue block · k4 languages · k5 a scroll through the whole site. */
.sh[hidden] { display: none !important; }
.asm { position: relative; height: 380vh; padding: 0 !important; }
.asm__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, min(4vw, 57.6px), 64px);
  padding: calc(var(--top-h, 76px) + 16px) var(--gx) 32px; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }

/* the caption: one panel per part, they swap as the scene moves on */
.asm__txt { position: relative; display: grid; align-content: center; }
.asm__p { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; gap: 22px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .5s var(--ease); }
.asm__p.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.asm .sh__price { opacity: 1; transform: none; }
.asm .sh__steps li { display: block; }
.asm__p.is-on .sh__steps li { color: #0E0F11; border-left-color: var(--signal); transition-delay: calc(var(--i) * .6s + .3s); }
/* part 01 runs over two steps: the last three lines wait for the enquiry form */
.asm:not(.is-k1) .asm__p[data-part="0"] .sh__steps li:nth-child(n + 2) { color: #9CA2AD; border-left-color: rgba(14, 15, 17, .12); transition-delay: 0s; }
.asm.is-k1 .asm__p[data-part="0"] .sh__steps li { transition-delay: calc((var(--i) - 1) * .7s + .2s); }
.asm__end { margin: 0; max-width: 30ch; color: #646A76; font-size: 1.12rem; line-height: 1.45; }
.asm__go { align-self: flex-start; }
.asm__segs { grid-area: 2 / 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 6px; margin-top: 30px; }
.asm__segs i { position: relative; display: block; height: 2px; background: rgba(14, 15, 17, .1); }
.asm__segs i::after { content: ""; position: absolute; inset: 0; background: #0E0F11; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }

/* the page inside the window: blocks stack up, the page slides to the newest one */
.asm__page { position: absolute; left: 0; right: 0; top: 0; transition: transform 1s var(--ease); will-change: transform; }
.asm.is-tour .asm__page { transition: transform .25s linear; }
.asm__b { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 10.4; padding: 4.5cqw 5cqw; font-size: 1.6cqw; color: #0E0F11; background: #F7F8FA;
  opacity: 0; transform: translate(4cqw, 10cqw) rotate(3deg) scale(.94); transform-origin: 15% 0; transition: opacity .45s, transform .95s var(--ease); }
.asm__b small { font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: #8C929C; }
.asm__b + .asm__b { border-top: 1px solid rgba(14, 15, 17, .1); }
.asm.is-in .asm__b--land, .asm.is-k2 .asm__b--floor, .asm.is-k3 .asm__b--cat, .asm.is-k3 .asm__b--foot { opacity: 1; transform: none; }
.asm__b--floor { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; align-items: end; }
.asm__b--cat { display: flex; flex-direction: column; justify-content: center; }
.asm__b--foot { aspect-ratio: auto; display: flex; align-items: center; gap: 3cqw; padding-block: 3.2cqw; background: #0E0F11; color: #F7F8FA; }
.asm__b--foot b { margin-right: auto; font-family: var(--fd); font-stretch: 125%; font-size: 1.1em; letter-spacing: .04em; }
.asm__b--foot b i { font-style: normal; color: var(--signal); }
.asm__b--foot span { width: 6cqw; height: .7cqw; background: rgba(247, 248, 250, .28); }
.asm__b--foot em { font-style: normal; font-size: .85em; color: rgba(247, 248, 250, .6); }

/* every block carries its part of the service: number, name, price */
.asm__chip { position: absolute; right: 1.6cqw; bottom: 1.6cqw; z-index: 3; display: flex; align-items: center; gap: 1cqw; padding: .9cqw 1.3cqw; background: #0E0F11; color: #F7F8FA; font-size: max(10px, .92em); line-height: 1; white-space: nowrap;
  opacity: 0; transform: translateY(1.2cqw); transition: opacity .4s .5s, transform .6s var(--ease) .5s; }
.asm__chip b { font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .86em; color: var(--signal); }
.asm__chip em { font-style: normal; padding: .5cqw .9cqw; background: var(--signal); color: #fff; }
.asm.is-in .asm__b--land > .asm__chip:not(.asm__chip--lang), .asm.is-k2 .asm__b--floor .asm__chip, .asm.is-k3 .asm__b--cat .asm__chip { opacity: 1; transform: none; }
.asm__b--land > .asm__chip:not(.asm__chip--lang) { right: auto; left: 5cqw; }
.asm__chip--lang { right: 5cqw; }
.asm.is-k4 .asm__chip--lang { opacity: 1; transform: none; }

/* k0 the hero settles in piece by piece · k1 the enquiry form drops in, gets filled in and sent */
.asm .m-nav, .asm .m-hl, .asm .m-land > .m-pic { opacity: 0; transform: translateY(2cqw); transition: opacity .5s, transform .7s var(--ease); }
.asm.is-in .m-nav, .asm.is-in .m-hl, .asm.is-in .m-land > .m-pic { opacity: 1; transform: none; }
.asm.is-in .m-hl { transition-delay: .25s; } .asm.is-in .m-land > .m-pic { transition-delay: .4s; }
.asm .m-form { opacity: 0; transform: translate(2cqw, 5cqw) rotate(5deg); transition: opacity .4s, transform .85s var(--ease), box-shadow .5s; }
.asm.is-k1 .m-form { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--signal); }
.asm.is-k2 .m-form { box-shadow: none; }
.asm .m-in { position: relative; transition: border-color .4s; }
.asm .m-in s { text-decoration: none; transition: opacity .3s; }
.asm .m-in .m-ty { position: absolute; left: 1.4cqw; top: 50%; transform: translateY(-50%); font-style: normal; color: #0E0F11; clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(16); }
.asm.is-k1 .m-in { border-color: #0E0F11; transition-delay: .8s; }
.asm.is-k1 .m-in s { opacity: 0; transition-delay: .8s; }
.asm.is-k1 .m-in .m-ty { clip-path: inset(0 0 0 0); transition-delay: .9s; }
.asm.is-k1 .m-in + .m-in, .asm.is-k1 .m-in + .m-in s { transition-delay: 1.7s; }
.asm.is-k1 .m-in + .m-in .m-ty { transition-delay: 1.8s; }
.asm .m-send { transition: background .3s; }
.asm.is-k1 .m-send { background: var(--signal); transition-delay: 2.8s; }
.asm .m-toast { transition: opacity .5s, transform .5s var(--ease); }
.asm.is-k1:not(.is-k2) .asm__b--land .m-toast { opacity: 1; transform: none; transition-delay: 3.1s; }

/* k2 booking: a day lights up, the free hours come in, one gets picked */
.asm .m-fl, .asm .m-fl i { transition: background .4s; }
.asm.is-k2 .m-fl--on { background: var(--signal); transition-delay: .8s; }
.asm.is-k2 .m-fl--on i { background: #F9C9BC; transition-delay: .8s; }
.asm .m-u { transition: opacity .5s, transform .5s var(--ease), box-shadow .4s; }
.asm.is-k2 .m-u { opacity: 1; transform: none; transition-delay: 1.3s; }
.asm.is-k2 .m-u:nth-of-type(2) { transition-delay: 1.38s; } .asm.is-k2 .m-u:nth-of-type(3) { transition-delay: 1.46s; } .asm.is-k2 .m-u:nth-of-type(4) { transition-delay: 1.54s; }
.asm.is-k2 .m-u:nth-of-type(2) { box-shadow: inset 0 0 0 2px var(--signal); transition: opacity .5s 1.38s, transform .5s var(--ease) 1.38s, box-shadow .4s 2.4s; }

/* k3 catalogue: a filter, one product lifts, the quote request goes out */
.asm .m-card { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease), box-shadow .4s; }
.asm .m-chips span { transition: background .3s, color .3s, border-color .3s; }
.asm.is-k3 .m-chips span { background: none; color: inherit; border-color: rgba(14, 15, 17, .16); transition-delay: .9s; }
.asm.is-k3 .m-chips span:nth-child(3) { background: #0E0F11; color: #fff; border-color: #0E0F11; }
.asm.is-k3 .m-card:not(.m-card--hit) { opacity: .35; transition-delay: .9s; }
.asm .m-rq { transition: background .3s, color .3s, border-color .3s; }
.asm.is-k3 .m-card--hit { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(14, 15, 17, .35); transition-delay: 1.6s; }
.asm.is-k3 .m-card--hit .m-rq { background: var(--signal); color: #fff; border-color: var(--signal); transition-delay: 1.6s; }
.asm.is-k3 .asm__b--cat .m-toast { opacity: 1; transform: none; transition-delay: 2.3s; }
.asm__b--cat .m-toast { bottom: auto; top: 4cqw; }

/* k4 languages: the switch appears in the menu and the same first screen changes language */
.asm__langs { opacity: 0; transform: scale(.8); transform-origin: 100% 50%; transition: opacity .4s, transform .5s var(--ease); }
.asm.is-k4 .asm__langs { opacity: 1; transform: none; transition-delay: .5s; }
.asm__langs i { transition: background .3s, color .3s, border-color .3s; }
.asm__lt, .asm__lh { display: grid; }
.asm__lt span, .asm__lh span { grid-area: 1 / 1; opacity: 0; transform: translateY(.8cqw); transition: opacity .14s, transform 0s .14s; }
.asm__scr[data-lang="0"] .asm__lt span:nth-child(1), .asm__scr[data-lang="0"] .asm__lh span:nth-child(1), .asm__scr[data-lang="1"] .asm__lt span:nth-child(2), .asm__scr[data-lang="1"] .asm__lh span:nth-child(2),
.asm__scr[data-lang="2"] .asm__lt span:nth-child(3), .asm__scr[data-lang="2"] .asm__lh span:nth-child(3), .asm__scr[data-lang="3"] .asm__lt span:nth-child(4), .asm__scr[data-lang="3"] .asm__lh span:nth-child(4) { opacity: 1; transform: none; transition: opacity .35s .16s, transform .45s var(--ease) .16s; }
.asm__scr[data-lang="0"] .asm__langs i:nth-child(1), .asm__scr[data-lang="1"] .asm__langs i:nth-child(2), .asm__scr[data-lang="2"] .asm__langs i:nth-child(3), .asm__scr[data-lang="3"] .asm__langs i:nth-child(4) { background: #0E0F11; color: #fff; border-color: #0E0F11; }

/* the other service pages (data-asm="stack"): each block is one of the old scenes, kept whole. The block carries the .sh class,
   so every scene rule in css/show.css still applies; js/asm.js plays its three inner steps on a timer once the block has landed. */
.asm__b.sh { height: auto; padding: 0 !important; }
.asm--stack .asm__b.is-on { opacity: 1; transform: none; }
.asm--stack .asm__b.is-on > .asm__chip { opacity: 1; transform: none; }
.asm--stack .asm__chip { right: auto; left: 1.6cqw; }   /* the scenes put their toasts bottom right */
.asm--stack .asm__segs { grid-template-columns: repeat(4, 1fr); }
.asm--stack .asm__p.is-on .sh__steps li { transition-delay: calc(var(--i) * .85s + .15s); }

/* phones and tablets: the window on top, the caption under it */
@media (max-width: 900px) {
  .asm { height: 340vh; }
  .asm__pin { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding: calc(var(--top-h, 64px) + 10px) var(--gx) 90px; }
  .asm__win { order: -1; }
  .asm__b { font-size: 2.2cqw; padding: 4cqw; }
  .asm__p { gap: 12px; }
  .asm .sh__steps li { padding: 5px 0 5px 14px; font-size: .98rem; }
  .asm__segs { margin-top: 18px; }
  .asm__b--land > .asm__chip:not(.asm__chip--lang) { left: 4cqw; }
  .asm__chip--lang { right: 4cqw; }
}
@media (max-width: 900px) and (max-height: 720px) { .asm .sh__steps li:nth-child(n + 3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .asm { height: auto; }
  .asm__pin { position: relative; height: auto; padding-block: 48px; align-items: start; }
  .asm__txt { display: block; }
  .asm__p { opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px; }
  .asm__segs { display: none; }
  .asm__scr { aspect-ratio: auto; }
  .asm__page { position: static; transform: none !important; }
  .asm__b, .asm__chip { transition: none; }
}