/* Davision kiosk kit: the real 55" portrait totem and its two live UIs.
   Markup comes from .site-build/kiosk_ui.py (kiosk_screen) inside common.kiosk().
   Every size inside the screen is in --u, one 1080th of the screen width, the
   same unit the product uses on its 1080 x 1920 panel, so the miniature is
   measured, not drawn. case-kiosk.js runs the call clock; without it (or with
   reduced motion) the screen rests in the first answer. */

/* ------------------------------------------------------------------ the totem */
.dv.dv-totem > .dv-in { padding: 6.2cqw 3.2cqw 3.2cqw; border-radius: 3.2cqw 3.2cqw 1.8cqw 1.8cqw; overflow: visible;
  background: linear-gradient(90deg, #0d0d11 0%, #26262e 6%, #18181e 50%, #26262e 94%, #0d0d11 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13), inset 0 0.35cqw 0 rgba(255,255,255,0.07), 0 4cqw 10cqw rgba(0,0,0,0.5); }
.dv.dv-totem > .dv-in::before { content: ''; position: absolute; top: 2.3cqw; left: 50%; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 38% 34%, #5a6075, #0b0b0f 68%); box-shadow: 0 0 0 0.45cqw rgba(255,255,255,0.05); }
.dv.dv-totem > .dv-in::after { content: ''; position: absolute; top: 2.75cqw; bottom: auto; left: 50%; width: 8cqw; height: 0.8cqw; margin-left: 3cqw;
  transform: none; border-radius: 1cqw; background: rgba(255,255,255,0.07); box-shadow: none; }
.dv.dv-totem .dv-screen { aspect-ratio: 9 / 16; border-radius: 0.7cqw; background: #0b0d12; box-shadow: 0 0 0 0.35cqw #040406; }
.dv.dv-totem > .dv-in { border-radius: 3.2cqw 3.2cqw 0 0; }
.dv.dv-totem > .dv-foot { position: relative; width: 100%; height: 24cqw; margin: 0; padding: 0; border-radius: 0; clip-path: none; background: none; box-shadow: none; }
/* the cabinet under the screen: the housing carries on down, tapering a little, to a plinth on the floor */
.dv.dv-totem .dv-col { position: absolute; left: 0; right: 0; top: 0; height: 20cqw; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  background: linear-gradient(90deg, #0b0b0e 0%, #23232a 7%, #16161b 50%, #23232a 93%, #0b0b0e 100%);
  box-shadow: inset 0 1.2cqw 1.6cqw rgba(0,0,0,0.55); }
.dv.dv-totem .dv-col::after { content: ''; position: absolute; left: 50%; top: 7cqw; width: 30cqw; height: 4cqw; transform: translateX(-50%); border-radius: 2cqw;
  background-image: radial-gradient(rgba(255,255,255,0.12) 0.45cqw, transparent 0.55cqw); background-size: 1.8cqw 1.8cqw; }
.dv.dv-totem .dv-base { position: absolute; left: 50%; top: 19.6cqw; width: 94%; height: 2.6cqw; transform: translateX(-50%); border-radius: 0.6cqw 0.6cqw 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #3a3a44 0%, #17171c 50%, #070709 100%); box-shadow: inset 0 0.25cqw 0 rgba(255,255,255,0.14); }
.dv.dv-totem > .dv-foot::after { content: ''; display: block; position: absolute; z-index: -1; left: 50%; top: 19cqw; width: 124cqw; height: 9cqw; margin: 0;
  transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.6), rgba(0,0,0,0.22) 55%, transparent); }

/* ------------------------------------------------------------------ the screen */
.kx { position: absolute; inset: 0; z-index: 1; overflow: hidden; container-type: inline-size; isolation: isolate;
  --u: calc(100cqw / 1080); --b: 1;
  --kf: 'Ubuntu', 'Inter', system-ui, sans-serif; --bf: Arial, Helvetica, sans-serif;
  --tw: linear-gradient(172deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 46%, transparent 62%);
  --smoke: linear-gradient(160deg, rgba(22,26,36,0.44), rgba(12,15,24,0.38));
  --smoke-hi: linear-gradient(160deg, rgba(38,44,58,0.5), rgba(22,27,40,0.44));
  --blue: linear-gradient(160deg, rgba(50,138,214,0.62), rgba(16,80,146,0.54));
  --green: linear-gradient(160deg, rgba(52,214,106,0.88), rgba(18,156,74,0.8));
  --edge: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.14);
  --cyan: #2fd3e6; --sub: #9aa6bd;
  color: #fff; font-family: var(--bf); line-height: 1.3; text-align: start; background: #0b0d12;
  -webkit-font-smoothing: antialiased; }
.kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
.kx em, .kx i, .kx b, .kx small { font-style: normal; }
.kx svg { display: block; flex: none; }
.kx img { display: block; }
/* small totems on the page: the words still have to be readable */
@container (max-width: 520px) { .kx > * { --b: 1.35; } }
@container (max-width: 300px) { .kx > * { --b: 1.6; } }

.kx .kx-glass, .kx-flag, .kx-vol, .kx-reset, .kx-comp, .kx-start, .kx-quick > span, .kx-b, .kx-cta, .kx-send {
  -webkit-backdrop-filter: blur(calc(24 * var(--u))) saturate(1.5); backdrop-filter: blur(calc(24 * var(--u))) saturate(1.5); }

/* the face: idle loop, the talking clip crossfades in only while she speaks */
.kx-media { position: absolute; inset: 0; z-index: 0; transform: scale(var(--fz, 1)); transform-origin: var(--fx, 50%) var(--fy, 30%); }
.kx-media > img, .kx-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* case-ui.css shows any playing .ui-vid (video.ui-vid.is-playing, 0,2,1): these rules outrank it, so the
   talking clip is visible only while she talks */
.kx .kx-media > video.ui-vid, .kx .kx-media > video.ui-vid.is-playing { opacity: 0; transition: opacity 0.22s ease; }
.kx .kx-media > video.ui-vid.kx-idle.is-playing { opacity: 1; }
.kx.kx-talking .kx-media > video.ui-vid.kx-talk.is-playing { opacity: 1; }
.kx-talya::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(420 * var(--u)); pointer-events: none;
  background: linear-gradient(0deg, rgba(2,5,12,0.62) 0%, rgba(2,5,12,0.42) 30%, rgba(2,5,12,0.18) 65%, rgba(2,5,12,0)); }
.kx-scrim { position: absolute; left: 0; right: 0; top: 0; height: calc(120 * var(--u)); z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(2,5,12,0.42), rgba(2,5,12,0.2) 55%, rgba(2,5,12,0)); }

.kx-t { display: none; }
.kx-t.on { display: flex; }

/* transcript */
.kx-convo { position: absolute; z-index: 10; display: flex; flex-direction: column; gap: calc(18 * var(--u)); overflow: hidden; }
.kx-m { display: none; }
.kx-m.on { display: flex; animation: kxMsg 0.25s ease-out both; }
.kx-m-me { justify-content: flex-end; }
.kx-b { max-width: 70%; padding: calc(9 * var(--u) * var(--b)) calc(13 * var(--u) * var(--b)); font: 400 calc(20 * var(--u) * var(--b)) / 1.5 var(--kf);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.35); overflow-wrap: anywhere; }
.kx-w { display: none; }
.kx-w.on { display: inline; }
.kx-dots { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(24 * var(--u) * var(--b)); padding: 0 calc(4 * var(--u)); }
.kx-dots i { width: calc(10 * var(--u) * var(--b)); height: calc(10 * var(--u) * var(--b)); border-radius: 50%; background: rgba(255,255,255,0.9); animation: kxDot 1s ease-in-out infinite; }
.kx-dots i:nth-child(2) { animation-delay: 0.15s; } .kx-dots i:nth-child(3) { animation-delay: 0.3s; }

/* panels: over the transcript, never over the controls */
.kx-panel { position: absolute; z-index: 18; flex-direction: column; overflow: hidden; border-radius: calc(16 * var(--u)); font-family: var(--kf);
  background: linear-gradient(160deg, rgba(10,14,26,0.84), rgba(6,9,18,0.86));
  -webkit-backdrop-filter: blur(calc(34 * var(--u))) saturate(1.2); backdrop-filter: blur(calc(34 * var(--u))) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.35); }
.kx-panel.on { animation: kxPanel 0.3s cubic-bezier(0.22,1,0.36,1) both; }
.kx-p-flight { background: rgba(6,10,20,0.92); }
.kx-ph { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); height: calc(74 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u) * var(--b)); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.kx-ph span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-x { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.16); }
.kx-x svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.kx-pb { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 calc(10 * var(--u)) calc(10 * var(--u)); }

/* flight card (the kiosk's own .flight-card) */
.kx-fc { flex: 1; padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); font-variant-numeric: tabular-nums; }
.kx-fc-head { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.kx-fc-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(14 * var(--u)); min-width: 0; }
.kx-fc-code { font-size: calc(46 * var(--u)); font-weight: 700; letter-spacing: calc(1 * var(--u)); line-height: 1.1; }
.kx-fc-kind { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); }
.kx-fc-st { margin-inline-start: auto; box-sizing: border-box; padding: calc(8 * var(--u)) calc(20 * var(--u)); border-radius: 999px; font-size: calc(18 * var(--u)); font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); }
.kx-fc-route { display: flex; align-items: center; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.kx-fc-route i { color: var(--cyan); }
.kx-fc-route em { padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(18 * var(--u)); letter-spacing: 0.05em; color: var(--sub);
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); }
.kx-fc-times { margin-top: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(22 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.kx-fc-times small, .kx-fc-cell small { display: block; font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); margin-bottom: calc(6 * var(--u)); }
.kx-fc-times b { display: block; font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1; }
.kx-fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }
.kx-fc-cell { padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); min-width: 0; }
.kx-fc-cell b { display: block; font-size: calc(27 * var(--u)); font-weight: 700; }
.kx-fc-cell.key { background: rgba(47,211,230,0.1); box-shadow: inset calc(4 * var(--u)) 0 0 var(--cyan), inset 0 0 0 1px rgba(47,211,230,0.18); }
.kx-fc-cell.key b { font-size: calc(33 * var(--u)); color: var(--cyan); }

/* route QR: a free-floating card in the top corner, on the page rather than in the panel */
.kx-qr { position: absolute; z-index: 19; top: calc(28 * var(--u)); inset-inline-end: calc(28 * var(--u)); width: calc(190 * var(--u) * (1 + (var(--b) - 1) * 0.6));
  flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center; }
.kx-qr.on { animation: kxFade 0.3s ease both; }
.kx-qr img { width: 100%; height: auto; padding: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,0.35); }
.kx-qr span { font: 400 calc(16 * var(--u) * var(--b)) / 1.35 var(--kf); color: rgba(255,255,255,0.88); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* a page the agent opened (show_website): a capture of the real component, at its own aspect ratio */
.kx-site { flex: none; border-radius: calc(6 * var(--u)); overflow: hidden; background: #8aa0aa; }
.kx-site img { width: 100%; height: auto; }
.kx-talya .kx-panel.kx-p-site, .kx-dfcm .kx-panel.kx-p-site { top: auto; }

/* site card in the transcript (the product's "Floor Plans" chip under an answer) */
.kx-m-site .kx-b { display: inline-flex; align-items: center; gap: calc(9 * var(--u) * var(--b)); padding: calc(13 * var(--u) * var(--b)) calc(20 * var(--u) * var(--b));
  font: 500 calc(17 * var(--u) * var(--b)) / 1.2 var(--bf); border-radius: calc(12 * var(--u)); }
.kx-m-site svg { width: calc(17 * var(--u) * var(--b)); height: calc(17 * var(--u) * var(--b)); opacity: 0.9; }
.kx-talya .kx-m-site .kx-b { background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); }

/* cards: store, offer, opening hours, lead form */
.kx-card { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.kx-card-top { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.kx-chip { padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: 999px; font-size: calc(16 * var(--u) * var(--b)); font-weight: 600; color: var(--cyan);
  background: rgba(47,211,230,0.12); border: 1px solid rgba(47,211,230,0.38); }
.kx-card-top em { font-size: calc(17 * var(--u) * var(--b)); font-weight: 700; color: var(--sub); }
.kx-card-top .kx-open { color: #86efac; }
.kx-card-name { font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.15; }
.kx-rows { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.kx-rows span { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(21 * var(--u) * var(--b)); color: rgba(255,255,255,0.86); }
.kx-rows svg, .kx-cta svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: var(--cyan); }
.kx-card-note { margin: 0; font-size: calc(20 * var(--u) * var(--b)); line-height: 1.45; color: rgba(255,255,255,0.75); }
.kx-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(64 * var(--u) * var(--b)); padding: 0 calc(28 * var(--u)); border-radius: 999px;
  background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); font: 500 calc(21 * var(--u) * var(--b)) var(--bf); }
.kx-cta svg { color: #fff; }
.kx-ig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.kx-ir { padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); min-width: 0; }
.kx-ir small, .kx-f small { display: block; font-size: calc(15 * var(--u) * var(--b)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); }
.kx-ir b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(24 * var(--u) * var(--b)); font-weight: 700; }
.kx-lead { gap: calc(12 * var(--u)); }
.kx-f { padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.kx-fv { display: block; margin-top: calc(4 * var(--u)); min-height: 1.3em; font-size: calc(23 * var(--u) * var(--b)); font-weight: 600; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
[dir="rtl"] .kx-fv { clip-path: inset(0 0 0 100%); }
.kx:not(.kx-live) .kx-fv { clip-path: none; }
.kx-fv.on { animation: kxType var(--ft, 0.8s) steps(var(--fn, 12)) forwards; }
.kx-consent { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(17 * var(--u) * var(--b)); color: rgba(255,255,255,0.8); }
.kx-box { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: none; display: grid; place-items: center; border-radius: calc(6 * var(--u)); border: calc(2 * var(--u)) solid rgba(255,255,255,0.5); transition: background 0.2s, border-color 0.2s; }
.kx-box svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); opacity: 0; transition: opacity 0.2s; }
.kx-box.on { background: #2f8fe0; border-color: #2f8fe0; }
.kx-box.on svg { opacity: 1; }
.kx-send { display: grid; place-items: center; height: calc(62 * var(--u) * var(--b)); border-radius: 999px; background: var(--tw), var(--blue); box-shadow: var(--edge); font: 500 calc(21 * var(--u) * var(--b)) var(--bf); }
.kx-send.on { animation: kxPress 0.5s ease both; }
.kx-done { display: none; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(34,197,94,0.18); border: 1px solid rgba(74,222,128,0.45); color: #c9f7da; font-size: calc(18 * var(--u) * var(--b)); }
.kx-done.on { display: flex; animation: kxMsg 0.3s ease-out both; }
.kx-lead:has(.kx-done.on) .kx-send { display: none; }
.kx-done i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: #22c55e; color: #052e14; }
.kx-done svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* equaliser (green while it listens, blue while she talks) */
.kx-eq { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); height: calc(20 * var(--u)); }
.kx-eq i { width: calc(3.5 * var(--u)); height: 100%; border-radius: calc(2 * var(--u)); background: linear-gradient(#8af7c8, #21c97a); transform: scaleY(0.35); transform-origin: 50% 50%; }
.kx-eq i:nth-child(2) { transform: scaleY(0.6); } .kx-eq i:nth-child(3) { transform: scaleY(0.85); } .kx-eq i:nth-child(4) { transform: scaleY(0.5); } .kx-eq i:nth-child(5) { transform: scaleY(0.25); }
.kx-talking .kx-eq i { background: linear-gradient(#a9c2ff, #4f7bff); }
.kx-talking .kx-eq i, .kx-hearing .kx-eq i { animation: kxEq 0.9s ease-in-out infinite; }
.kx-eq i:nth-child(2) { animation-delay: -0.3s; } .kx-eq i:nth-child(3) { animation-delay: -0.6s; } .kx-eq i:nth-child(4) { animation-delay: -0.15s; } .kx-eq i:nth-child(5) { animation-delay: -0.45s; }
.kx .b-hear { display: none; }
.kx-hearing .b-listen { display: none; }
.kx-hearing .b-hear { display: inline; }

.kx-brand { position: absolute; z-index: 12; left: 0; right: 0; bottom: calc(44 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  font-size: calc(19 * var(--u)); color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.kx-brand img { height: calc(17 * var(--u)); width: auto; opacity: 0.95; filter: brightness(0) invert(1); }

/* ------------------------------------------------------------------ theme: talya (frosted glass, controls at 54%) */
.kx-flags { position: absolute; z-index: 20; left: 0; top: calc(499 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.kx-flag { display: flex; align-items: center; justify-content: flex-end; width: calc(150 * var(--u)); height: calc(102 * var(--u)); margin-left: calc(-54 * var(--u)); padding-right: calc(15 * var(--u));
  border-radius: 0 999px 999px 0; background: var(--tw), var(--smoke); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28); }
.kx-flag img { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,0.28); }
.kx-flag.on { margin-left: calc(-22 * var(--u)); background: var(--tw), var(--smoke-hi);
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) rgba(255,255,255,0.85), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28), 0 0 calc(30 * var(--u)) rgba(70,158,232,0.3); }
.kx-vol { position: absolute; z-index: 20; left: calc(966 * var(--u)); top: calc(499 * var(--u)); width: calc(92 * var(--u)); height: calc(450 * var(--u)); display: flex; flex-direction: column; align-items: center;
  gap: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(46 * var(--u)); background: var(--tw), var(--smoke); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28); }
.kx-vol > i { width: calc(38 * var(--u)); height: calc(38 * var(--u)); color: #8ec6f5; }
.kx-vol > i svg { width: 100%; height: 100%; }
.kx-tr { position: relative; flex: 1; width: calc(6 * var(--u)); margin: calc(10 * var(--u)) 0; border-radius: 99px; background: #4a9fe8; }
.kx-tr b { position: absolute; left: 50%; top: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; transform: translate(-50%, -30%); background: #4a9fe8; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255,255,255,0.25); }
.kx-vol small { font-size: calc(17 * var(--u)); font-weight: 500; color: rgba(255,255,255,0.85); }
.kx-talya .kx-dock { display: contents; }
.kx-row { position: absolute; z-index: 20; left: 0; right: 0; top: calc(1037 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); }
.kx-start { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); width: calc(430 * var(--u)); height: calc(77 * var(--u));
  border-radius: 999px; font-size: calc(25 * var(--u)); font-weight: 500; letter-spacing: 0.03em; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  background: var(--tw), var(--green); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(8,61,31,0.32); animation: kxPulse 3s ease-in-out infinite;
  transition: background 0.3s, box-shadow 0.3s; }
.kx-start::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: kxSheen 3.2s ease-in-out infinite; pointer-events: none; }
.kx-mic svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.kx-lbl em { display: none; }
.kx-lbl .l-start { display: inline; }
.kx-badge { display: none; align-items: center; gap: calc(9 * var(--u)); margin-inline-start: calc(2 * var(--u)); padding-inline-start: calc(12 * var(--u)); border-inline-start: 1px solid rgba(255,255,255,0.3);
  font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: 0; }
.kx-call .kx-start { background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); animation: none; }
.kx-call .kx-start::before, .kx-call .kx-mic { display: none; }
.kx-call .kx-lbl .l-start { display: none; }
.kx-call .kx-lbl .l-live { display: inline; }
.kx-call .kx-badge { display: inline-flex; }
.kx-conn .kx-lbl .l-live, .kx-conn .kx-badge { display: none; }
.kx-conn .kx-lbl .l-conn { display: inline; }
.kx-reset { width: calc(80 * var(--u)); height: calc(80 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--tw), var(--smoke); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28); }
.kx-reset svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.kx-talya .kx-comp { position: absolute; z-index: 20; left: calc(140 * var(--u)); top: calc(1143 * var(--u)); width: calc(800 * var(--u)); height: calc(84 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u)); border-radius: 999px; background: var(--tw), var(--smoke); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28);
  font-size: calc(21 * var(--u)); color: rgba(255,255,255,0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.kx-talya .kx-comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-talya .kx-comp b { flex: none; display: grid; place-items: center; width: calc(148 * var(--u)); height: calc(64 * var(--u)); border-radius: 999px; font-size: calc(21 * var(--u)); font-weight: 500;
  background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); }
.kx-quick { position: absolute; z-index: 19; left: calc(140 * var(--u)); top: calc(1263 * var(--u)); width: calc(800 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u));
  transition: opacity 0.26s, visibility 0s linear; }
.kx-quick > span { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); height: calc(96 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 999px;
  font-size: calc(20 * var(--u)); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.35); white-space: nowrap; background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); }
.kx-quick svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.kx-eng .kx-quick { opacity: 0; visibility: hidden; transition: opacity 0.26s, visibility 0s linear 0.26s; }
.kx-talya .kx-convo { left: calc(160 * var(--u)); right: calc(76 * var(--u)); top: calc(1263 * var(--u)); bottom: calc(106 * var(--u)); }
.kx-talya .kx-m-ag .kx-b, .kx-talya .kx-m-dots .kx-b { background: var(--tw), var(--blue); box-shadow: var(--edge), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(6,40,76,0.3); border-radius: calc(22 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)); }
.kx-talya .kx-m-me .kx-b { background: var(--tw), var(--smoke); box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.28); border-radius: calc(22 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); }
.kx-talya .kx-panel { left: calc(76 * var(--u)); right: calc(76 * var(--u)); top: calc(1263 * var(--u)); bottom: calc(106 * var(--u)); }
.kx-talya .kx-p-store, .kx-talya .kx-p-offer, .kx-talya .kx-p-info { bottom: auto; max-height: calc(551 * var(--u)); }
/* the flight card keeps the product's slot (top 1263) when it fits and grows upward when it does not, never past the call row */
.kx-talya .kx-p-flight { top: auto; min-height: calc(551 * var(--u)); max-height: calc(574 * var(--u)); }
@container (max-width: 520px) { .kx-talya .kx-b { max-width: 84%; } }

/* ------------------------------------------------------------------ theme: dfcm (orb, edge rails, dark tone) */
.kx-dfcm::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; opacity: 0.7; transition: opacity 0.4s;
  background: linear-gradient(rgba(4,6,10,0), rgba(4,6,10,0.5) 45%, rgba(4,6,10,0.72)); }
.kx-dfcm.kx-eng::before { opacity: 1; }
.kx-dfcm .kx-dock { display: contents; }
.kx-rail { position: absolute; z-index: 20; top: calc(756 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); transition: opacity 0.3s, visibility 0s linear; }
.kx-rail-s { inset-inline-start: calc(20 * var(--u)); }
.kx-rail-e { inset-inline-end: calc(20 * var(--u)); }
.kx-rail > span { width: calc(88 * var(--u)); height: calc(88 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); border-radius: 50%; color: #000;
  background: linear-gradient(135deg, rgba(255,255,255,0.56), rgba(255,255,255,0.44));
  -webkit-backdrop-filter: blur(calc(20 * var(--u))) saturate(1.4); backdrop-filter: blur(calc(20 * var(--u))) saturate(1.4);
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,0.55), 0 calc(10 * var(--u)) calc(36 * var(--u)) rgba(0,0,0,0.32); }
.kx-rail svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.kx-rail em { max-width: calc(82 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; line-height: 1.15; text-transform: uppercase; text-align: center; letter-spacing: 0.02em; }
.kx-dfcm[lang="ar"] .kx-rail em { font-size: calc(12.5 * var(--u)); letter-spacing: 0; text-transform: none; }
.kx-eng .kx-rail { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
.kx-orbwrap { position: absolute; z-index: 20; left: 0; right: 0; top: calc(1150 * var(--u)); display: flex; flex-direction: column; align-items: center; transition: opacity 0.35s, transform 0.35s, visibility 0s linear; }
.kx-orb { position: relative; width: calc(168 * var(--u)); height: calc(168 * var(--u)); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 72% 24%, rgba(255,214,90,0.9), rgba(255,214,90,0) 40%), radial-gradient(circle at 30% 72%, #14c58a, #1aa89a 55%, #0e7f88);
  box-shadow: 0 0 calc(44 * var(--u)) rgba(20,190,150,0.45), inset 0 calc(-6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,0.22); }
.kx-orb::before { content: ''; position: absolute; inset: calc(-24 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid rgba(255,255,255,0.16); }
.kx-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(190,255,120,0.35), rgba(255,255,255,0) 40%); mix-blend-mode: screen; animation: kxSpin 6s linear infinite; }
.kx-orb .kx-mic { position: relative; z-index: 1; color: #fff; }
.kx-orb .kx-mic svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.kx-dfcm .kx-lbl { margin-top: calc(24 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.kx-hint { margin-top: calc(8 * var(--u)); text-shadow: 0 1px 6px rgba(0,0,0,0.4); font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.kx-dfcm[lang="ar"] .kx-hint { letter-spacing: 0; font-size: calc(17 * var(--u)); }
.kx-conn .kx-orb { animation: kxOrb 0.9s ease-in-out infinite; }
.kx-conn .kx-orbwrap .l-start { display: none; }
.kx-conn .kx-orbwrap .l-conn { display: inline; }
.kx-dfcm.kx-call:not(.kx-conn) .kx-orbwrap, .kx-dfcm.kx-call:not(.kx-conn) .kx-langs { opacity: 0; visibility: hidden; transform: translateY(calc(20 * var(--u))); transition: opacity 0.35s, transform 0.35s, visibility 0s linear 0.35s; }
.kx-langs { position: absolute; z-index: 20; left: calc(320 * var(--u)); top: calc(1421 * var(--u)); width: calc(440 * var(--u)); height: calc(70 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)); border-radius: 999px; background: rgba(6,10,16,0.42); -webkit-backdrop-filter: blur(calc(24 * var(--u))) saturate(1.4); backdrop-filter: blur(calc(24 * var(--u))) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transition: opacity 0.35s, transform 0.35s, visibility 0s linear; }
.kx-lo { display: flex; align-items: center; gap: calc(14 * var(--u)); height: 100%; padding: 0 calc(26 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; font-size: calc(20 * var(--u)); font-weight: 600; color: #fff; white-space: nowrap; }
.kx-lo img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,0.4); }
.kx-lo.on { background: linear-gradient(#fff, #eef0f2); color: #1f2328; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(11,211,160,0.5); }
.kx-ldiv { width: 1px; height: calc(34 * var(--u)); margin: 0 calc(6 * var(--u)); background: rgba(255,255,255,0.25); }
.kx-lg { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); color: #fff; }
.kx-lg svg:first-child { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.kx-lg svg:last-child { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.kx-dfcm .kx-comp { position: absolute; z-index: 20; left: calc(76 * var(--u)); top: calc(1786 * var(--u)); width: calc(928 * var(--u)); height: calc(70 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(24 * var(--u)); border-radius: 999px; font-size: calc(18 * var(--u)); color: rgba(255,255,255,0.86);
  background: linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0.08)); -webkit-backdrop-filter: blur(calc(10 * var(--u))); backdrop-filter: blur(calc(10 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transition: opacity 0.3s; }
[dir="rtl"] .kx-dfcm .kx-comp, .kx-dfcm[dir="rtl"] .kx-comp { padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); }
.kx-dfcm .kx-comp i { width: calc(54 * var(--u)); height: calc(54 * var(--u)); display: grid; place-items: center; color: rgba(255,255,255,0.85); }
.kx-dfcm .kx-comp svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.kx-dfcm[dir="rtl"] .kx-comp svg { transform: scaleX(-1); }
.kx-endp { position: absolute; z-index: 20; top: calc(1773 * var(--u)); left: 50%; height: calc(62 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(34 * var(--u));
  transform: translateX(-50%); border-radius: 999px; font-size: calc(24 * var(--u)); white-space: nowrap; background: rgba(30,32,40,0.55);
  -webkit-backdrop-filter: blur(calc(18 * var(--u))); backdrop-filter: blur(calc(18 * var(--u))); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.kx-endp b { font-weight: 500; }
.kx-endp em { font-size: calc(18 * var(--u)); font-weight: 500; }
.kx-live-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #22c55e; box-shadow: 0 0 calc(8 * var(--u)) rgba(34,197,94,0.8); }
.kx-sep { width: 1px; height: calc(24 * var(--u)); background: rgba(255,255,255,0.3); }
.kx-dfcm.kx-call:not(.kx-conn) .kx-endp { opacity: 1; visibility: visible; }
.kx-dfcm.kx-call:not(.kx-conn) .kx-comp { opacity: 0; }
.kx-dfcm .kx-brand { bottom: calc(30 * var(--u)); font-size: calc(14 * var(--u)); color: #9aa3b5; gap: calc(7 * var(--u)); }
.kx-dfcm .kx-brand img { height: calc(12 * var(--u)); opacity: 0.7; }
.kx-dfcm .kx-convo { left: calc(76 * var(--u)); right: calc(76 * var(--u)); top: calc(1060 * var(--u)); bottom: calc(172 * var(--u)); justify-content: flex-end; gap: calc(16 * var(--u)); }
.kx-dfcm .kx-b { max-width: 76%; padding: calc(10 * var(--u) * var(--b)) calc(14 * var(--u) * var(--b)); font-size: calc(22 * var(--u) * var(--b)); border-radius: calc(10 * var(--u));
  background: rgba(28,30,38,0.6); -webkit-backdrop-filter: blur(calc(14 * var(--u))); backdrop-filter: blur(calc(14 * var(--u))); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); }
@container (max-width: 520px) { .kx-dfcm .kx-b { max-width: 88%; } }
.kx-dfcm .kx-panel { left: calc(76 * var(--u)); right: calc(76 * var(--u)); top: calc(1000 * var(--u)); bottom: calc(172 * var(--u)); }
.kx-dfcm .kx-p-store, .kx-dfcm .kx-p-offer, .kx-dfcm .kx-p-info, .kx-dfcm .kx-p-lead { top: auto; max-height: calc(748 * var(--u)); }
.kx[dir="rtl"] .kx-b, .kx[dir="rtl"] .kx-card, .kx[dir="rtl"] .kx-ph { font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, var(--kf); }

/* ------------------------------------------------------------------ motion */
@keyframes kxMsg { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes kxPanel { from { opacity: 0; transform: translateY(calc(14 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes kxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kxDot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(calc(-4 * var(--u))); } }
@keyframes kxDots { to { stroke-dashoffset: -15; } }
@keyframes kxType { to { clip-path: inset(0 0 0 0); } }
@keyframes kxPress { 0%, 100% { transform: none; } 40% { transform: scale(0.95); filter: brightness(1.25); } }
@keyframes kxEq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes kxSpin { to { transform: rotate(360deg); } }
@keyframes kxOrb { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.94); } }
@keyframes kxPulse {
  0%, 100% { box-shadow: var(--edge), 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(8,61,31,0.32), 0 0 0 0 rgba(64,220,120,0.4); }
  55% { box-shadow: var(--edge), 0 calc(18 * var(--u)) calc(52 * var(--u)) rgba(20,150,70,0.55), 0 0 0 calc(16 * var(--u)) rgba(64,220,120,0); } }
@keyframes kxSheen { 0%, 52% { transform: translateX(-160%) skewX(-18deg); } 78%, 100% { transform: translateX(380%) skewX(-18deg); } }

@media (prefers-reduced-motion: reduce) {
  .kx *, .kx *::before, .kx *::after { animation: none !important; transition: none !important; }
  .kx-media > video { display: none; }
  .kx-fv { clip-path: none; }
}

/* ------------------------------------------------------------------ the 55" totem, with its cabinet
   (owner, 17 Oct 2026). The plain totem puts the screen almost on the floor and reads as a large
   phone. The 55" LED is 190 cm with the screen in its top two thirds, so here the housing carries on
   under the screen as a cabinet (about 0.47 of the screen height, as on the model sheet) with a
   speaker grille, then the plinth. Opt in with .dv-cab; every other kiosk on the site is unchanged. */
.dv.dv-totem.dv-cab > .dv-foot { height: 82cqw; }
.dv.dv-totem.dv-cab .dv-col { height: 78cqw; clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); }
.dv.dv-totem.dv-cab .dv-col::after { top: 12cqw; width: 36cqw; height: 7cqw; }
.dv.dv-totem.dv-cab .dv-base { top: 77.6cqw; }
.dv.dv-totem.dv-cab > .dv-foot::after { top: 77cqw; }

/* ------------------------------------------------------------------ the pole kiosk (owner, 18 Oct 2026: "a different kiosk
   from the one above"; then "not white: a dark anthracite, close to black"). The same 9:16 screen in a slim anthracite
   frame with rounder corners, on one slim centred post and a low round plinth, like the 32 inch LED on its stand.
   Opt in with .dv-pole; the cabinet totem is unchanged. */
.dv.dv-totem.dv-pole > .dv-in { padding: 3.6cqw 2.6cqw 2.6cqw; border-radius: 4.2cqw;
  background: linear-gradient(90deg, #1b1c20 0%, #34363c 7%, #2a2c31 50%, #34363c 93%, #1b1c20 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0.4cqw 0 rgba(255,255,255,0.08), 0 5cqw 12cqw rgba(10,12,24,0.35); }
.dv.dv-totem.dv-pole > .dv-in::before { top: 1.1cqw; width: 1.3cqw; height: 1.3cqw; background: radial-gradient(circle at 38% 34%, #5a6075, #0b0b0f 68%); box-shadow: none; }
.dv.dv-totem.dv-pole > .dv-in::after { display: none; }
.dv.dv-totem.dv-pole .dv-screen { border-radius: 1.6cqw; box-shadow: 0 0 0 0.3cqw #08090c; }
.dv.dv-totem.dv-pole > .dv-foot { height: 74cqw; }
.dv.dv-totem.dv-pole .dv-col { left: 50%; right: auto; width: 11cqw; height: 70cqw; transform: translateX(-50%); clip-path: none; border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(90deg, #17181c 0%, #3a3c42 40%, #2e3035 55%, #1a1b1f 100%); box-shadow: inset 0 1.6cqw 1.4cqw rgba(0,0,0,0.35); }
.dv.dv-totem.dv-pole .dv-col::after { display: none; }
.dv.dv-totem.dv-pole .dv-base { top: 69.4cqw; width: 52%; height: 3cqw; border-radius: 50% / 100% 100% 0 0;
  background: linear-gradient(180deg, #3b3d43 0%, #26282d 60%, #141519 100%); box-shadow: inset 0 0.3cqw 0 rgba(255,255,255,0.1); }
.dv.dv-totem.dv-pole > .dv-foot::after { top: 69cqw; width: 84cqw; height: 7cqw; background: radial-gradient(closest-side, rgba(10,12,24,0.38), rgba(10,12,24,0.12) 55%, transparent); }

/* ------------------------------------------------------------------ Leo's kiosk: panels stay under his chin
   A page or the wayfinding map used to size itself from its image and grow up past his face. On Leo's
   kiosk every panel keeps its top at 1200 of 1920 units (just under the chin) and the capture fills
   the space it is given, centred, instead of pushing the panel taller (owner, 17 Oct 2026). */
.kx-leo .kx-panel.kx-p-site { top: calc(1200 * var(--u)); bottom: calc(106 * var(--u)); }
.kx-leo .kx-panel.kx-p-site .kx-site { flex: 1; min-height: 0; }
.kx-leo .kx-panel.kx-p-site .kx-site img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kx-leo .kx-p-flight { max-height: calc(1814 * var(--u) - 1200 * var(--u)); }

/* ------------------------------------------------------------------ Leo's kiosk: zoomed out, nothing over his face
   (owner, 18 Oct 2026). His footage is landscape, so "cover" on the 9:16 screen showed only its middle third
   and his face filled the glass. Here the footage sits in the top two thirds of the screen, which shows about
   half of the frame (head, shoulders and the room), and its lower edge dissolves into the screen's own dark;
   his chin lands at about 41% of the height, above every control, card and map below it. */
.kx-leo { background: #070912; }
.kx-leo .kx-media {
  inset: 0 0 auto 0;
  height: 66%;
  transform: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}
.kx-leo .kx-media > img,
.kx-leo .kx-media > video { object-position: 50% 0; }
/* a page Leo opened drifts slowly, like a live screen, instead of sitting still */
.kx-leo .kx-p-site .kx-site:not(.kx-site--vid) img { animation: kxLeoMap 14s ease-in-out infinite alternate; transform-origin: 50% 55%; }
/* wayfinding: the mall's own route animation (recorded from the live map). The still under it shows the whole
   route; the film fades in once it really plays (a paused visible video gets a play glyph on phones). */
.kx-site--vid { position: relative; overflow: hidden; }
.kx-site--vid > .kx-site-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
.kx-site--vid > .kx-site-vid.is-playing { opacity: 1; }
@keyframes kxLeoMap {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .kx-leo .kx-p-site .kx-site img { animation: none; }
}