:root {
  --cw-lime: #C6F24E;
  --cw-lime-d: #6E9B0E;
  --cw-ink: #14181C;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0f12; font-family: 'Rubik', sans-serif; }

.cw { position: fixed; inset: 0; overflow: hidden; }
.cw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.cw-canvas:active { cursor: grabbing; }

/* forward-motion veil during a walk */
.cw-veil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, transparent 25%, rgba(12,15,18,.55) 100%);
  transition: opacity .35s ease;
}
.cw-veil.on { opacity: 1; }

/* The permanent grade. Seven independently generated panos share no
   lighting pass; a whisper of a vignette plus a warm centre unifies them
   into one photographed campus — the same trick, always on, at a fraction
   of the walk-veil's strength. DOM compositing, zero WebGL cost. */
.cw-grade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 44%, rgba(255,208,150,.05) 0%, transparent 50%),
    radial-gradient(120% 95% at 50% 44%, transparent 62%, rgba(10,13,17,.26) 100%);
}

/* top bar — identity + location read as ONE cluster; space-between used to
   strand the counter alone in 600px of dead sky */
.cw-top {
  position: absolute; top: 0; right: 0; left: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  background: linear-gradient(rgba(12,15,18,.5), transparent);
}
.cw-tools { margin-inline-start: auto; display: flex; align-items: center; }
.cw-brand { color: rgba(255,255,255,.72); font-weight: 500; font-size: .82rem; letter-spacing: .1em; font-family: 'IBM Plex Mono', monospace; }
.cw-room { color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cw-tools button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(12,15,18,.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 1rem; border-radius: 100px; width: 38px; height: 38px; cursor: pointer; margin-inline-end: 6px;
  transition: background .2s, border-color .2s;
}
/* the visual circle stays 38 (34 on a phone); the THUMB gets 44 */
.cw-tools button::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.cw-tools button:hover { background: rgba(12,15,18,.6); border-color: rgba(255,255,255,.34); }
.cw-tools button svg { width: 19px; height: 19px; display: block; }
.cw-tools .on { background: var(--cw-lime-d); border-color: var(--cw-lime-d); }

/* keyboard visitors could not see where they were — 0 focus rules in the file */
.cw button:focus-visible, .cw a:focus-visible {
  outline: 2px solid var(--cw-lime); outline-offset: 3px; border-radius: 6px;
}

/* sound toggle — an equalizer that flatlines when muted */
.cw-tools button.cw-snd { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.cw-snd i {
  display: block; width: 2px; height: 13px; border-radius: 2px; background: currentColor;
  transform-origin: 50% 50%; animation: cwEq 1s ease-in-out infinite;
  transition: height .28s ease;
}
.cw-snd i:nth-child(2) { animation-duration: 1.45s; }
.cw-snd i:nth-child(3) { animation-duration: .78s; }
.cw-snd.is-off i { animation: none; height: 2px; transform: none; opacity: .6; }
@keyframes cwEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .cw-snd i { animation: none; } }

/* Tier 3 — instruction. No pill, no blur: a caption floating under the room,
   not another button competing with the doors. Clears the compass by 46px
   instead of painting under it. */
.cw-hint {
  position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 58px);
  left: 50%; transform: translateX(-50%);
  z-index: 7; color: rgba(255,255,255,.66); font-size: .74rem; font-weight: 500;
  letter-spacing: .01em; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .6s ease;
}
.cw-hint b { display: inline-block; direction: ltr; font-weight: 600; color: rgba(255,255,255,.85); }
.cw-hint.show { opacity: 1; }

/* floating whatsapp — always there, but UNDER an open reading card (z 30):
   on a phone the card is a near-full-height sheet, and a CTA floating on
   top of the text you are reading is clutter, not conversion */
.cw-wa {
  position: fixed; z-index: 28; left: var(--cw-bar-x); bottom: var(--cw-bar-y);
  display: grid; place-items: center; text-decoration: none;
  width: var(--cw-bar-s); height: var(--cw-bar-s);
  background: #1EBE5D; color: #06331a;
  border-radius: 50%;
  /* a neutral drop, not a coloured halo — and it no longer pulses. An
     infinite glow on a "leave your number" button reads as pressure before
     a single sentence has said what the company does. */
  box-shadow: 0 10px 26px rgba(6,26,15,.42);
  transition: background .2s, transform .2s;
}
.cw-wa svg { width: 20px; height: 20px; }
.cw-wa:hover { background: #25D366; transform: translateY(-2px); }

/* ---------- the bottom control row ----------
   WhatsApp, the assistant and the pass button used to be three labelled pills
   scattered up the left edge, which on a phone ran off the screen and crowded
   the wordmark. They are one row of equal circles now, so the top of the frame
   is the room and the bottom is the controls. The words survive as accessible
   names, not as pixels. */
:root {
  --cw-bar-s: 56px;                                   /* circle */
  --cw-bar-g: 10px;                                   /* gap */
  --cw-bar-x: 18px;
  --cw-bar-y: max(18px, env(safe-area-inset-bottom));
}
@media (max-width: 860px) {
  :root { --cw-bar-s: 52px; --cw-bar-g: 8px; --cw-bar-x: 14px; }
}
/* The accessibility widget is shared with the department sites and appends
   itself to body, so it is sized here rather than in a11y.css: in the hall it
   is one of the row, at the row's size and on the row's baseline. */
#cw-a11y-trigger {
  width: var(--cw-bar-s); height: var(--cw-bar-s);
  inset-block-end: var(--cw-bar-y);
  right: var(--cw-bar-x);
}
/* a circle has no room for a caption; the button keeps its aria-label */
.cw-wa span, .cw-assist-open__l {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cw-wa svg { width: 24px; height: 24px; }

/* map */
.cw-mapui { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(12,15,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cw-mapui__in { background: #fff; border-radius: 20px; padding: 26px; width: min(420px, 90vw); direction: rtl; }
.cw-mapui__in h3 { margin: 0 0 16px; color: var(--cw-ink); }
.cw-mapui__grid { display: grid; gap: 8px; }
.cw-mapui__grid button { border: 1px solid rgba(20,24,28,.12); background: #fff; border-radius: 12px; padding: 13px; font: inherit; font-weight: 700; color: var(--cw-ink); cursor: pointer; text-align: start; }
.cw-mapui__grid button.on { background: var(--cw-lime); border-color: var(--cw-lime); }
.cw-mapui__grid button.seen { background: rgba(110,155,14,.10); border-color: rgba(110,155,14,.35); }
.cw-mapui__grid button:hover { border-color: var(--cw-lime-d); }
.cw-mapui__x { margin-top: 16px; width: 100%; border: 0; background: var(--cw-ink); color: #fff; border-radius: 100px; padding: 12px; font: inherit; font-weight: 700; cursor: pointer; }


@keyframes cwSpin { to { transform: rotate(360deg) } }

/* on-screen movement pad — present, reachable, and no longer the loudest
   control in the frame. The lime ring on the forward key was pulling the eye
   away from the doors it exists to reach. */
.cw-pad {
  position: fixed; z-index: 27; bottom: max(20px, env(safe-area-inset-bottom));
  /* clear of the accessibility trigger, which is the last circle in the row.
     The pad's third arrow used to sit underneath it and could not be pressed
     at all. Driven by the row's own tokens so it cannot drift again. */
  right: calc(var(--cw-bar-x) + var(--cw-bar-s) + var(--cw-bar-g));
  display: flex; align-items: center; gap: 8px;
}
.cw-pad button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
  border: 1px solid rgba(255,255,255,.16); background: rgba(20,24,28,.36);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: rgba(255,255,255,.8); transition: background .15s, transform .15s, color .15s;
  touch-action: none; user-select: none;
}
.cw-pad button:active { background: var(--cw-lime); color: #0c0f12; transform: scale(.93); }
.cw-pad__up { width: 54px; height: 54px; font-size: 1.3rem; }

/* lobby compass — the seven wings around you, as status. Small: it answers
   "how much campus is behind me", it is not a control (pointer-events: none)
   and it should never out-shout a door. */
.cw-compass {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: max(20px, env(safe-area-inset-bottom)); width: 58px; height: 58px;
  border-radius: 50%; background: rgba(12,15,18,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.13); pointer-events: none;
}
.cw-compass::after {
  content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid rgba(255,255,255,.6);
}
.cw-compass__ring { position: absolute; inset: 0; }
.cw-compass__d {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.34); transition: background .25s, box-shadow .25s;
}
.cw-compass__d.near { background: var(--cw-lime); box-shadow: 0 0 8px var(--cw-lime); }

/* first paint: soft brand splash while the lobby texture streams in */
.cw-load { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #1a2026, #0c0f12 72%); transition: opacity .6s ease; }
.cw-load[hidden] { display: none; }
.cw-load span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--cw-lime); animation: cwSpin .8s linear infinite; }
/* ============ markers: three tiers ============ */
.cw-spots { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.cw-spot, .cw-door {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer;
  border: 0; background: transparent; font-family: inherit; padding: 0;
}
/* ---- Tier 2: story hotspots. Content, not navigation — so a step quieter
   than a door in size, weight and material, and it stops competing with it. ---- */
.cw-spot:not(.is-product):not(.is-plaque):not(.is-axis) i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.9); border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 0 0 4px rgba(255,255,255,.1), 0 0 12px rgba(255,255,255,.4);
  animation: cwPulse 2.6s ease-in-out infinite; animation-delay: var(--ph, 0s);
}
@keyframes cwPulse { 50% { box-shadow: 0 0 0 9px rgba(255,255,255,.05), 0 0 20px rgba(255,255,255,.5) } }
/* the pill label belongs to point markers only — product windows build their own
   spans (frame/glass/chip/tag) and must not inherit a 100px radius and a blur */
/* the YouTube panel builds its own rows, chip and caption; inheriting the
   point-marker pill (nowrap, blur, 100px radius) clipped its caption to one
   line and wrapped every control row in a stray dark bar */
.cw-spot:not(.is-product):not(.is-yt):not(.is-plaque):not(.is-axis) span {
  color: rgba(255,255,255,.94); font-size: .78rem; font-weight: 500; white-space: nowrap;
  background: rgba(12,15,18,.5); padding: 5px 11px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, border-color .2s;
}
.cw-spot:not(.is-product):not(.is-yt):not(.is-plaque):not(.is-axis):hover span { background: rgba(12,15,18,.8); border-color: rgba(255,255,255,.34); }
/* action: whatsapp green */
.cw-spot.is-action:not(.is-product):not(.is-plaque) i {
  background: #25D366; border-color: #eafff2;
  box-shadow: 0 0 0 5px rgba(37,211,102,.22), 0 0 18px rgba(37,211,102,.8);
}
.cw-spot.is-action span { background: rgba(6,51,26,.72); border-color: rgba(37,211,102,.5); }
/* product: a holo window pinned into the room */
.cw-spot.is-product { display: block; --acc: var(--cw-acc, #6E9B0E); }
/* the lobby TV: same window, cinema size, a real bezel, no float-wobble */
.cw-spot.is-tv { display: block; --acc: #26d07c; }
.cw-spot.is-tv .cw-spot__frame {
  width: clamp(300px, 34vw, 560px);
  transform: perspective(1200px) rotateY(var(--tilt, 0deg));
  animation: none;
}
.cw-spot.is-tv .cw-spot__glass {
  border: 6px solid #14181c; border-radius: 12px; background: #000;
}
.cw-spot.is-tv video { display: block; width: 100%; height: auto; }
/* the side screen: same bezel kit, roughly half the wall, so the room reads
   as a main screen plus a monitor beside it rather than two rival TVs.
   The iframe takes no pointer events — YouTube's own surface would swallow
   the click, and here the whole panel is one button that opens the source. */
.cw-spot.is-yt { display: block; --acc: #26d07c; }
.cw-spot.is-yt .cw-spot__frame {
  /* the floor is set by the channel strip, not by taste: six numbers plus two
     arrows need ~210px, and on a 390px phone 21vw does not reach it — below
     that the strip spilled out past the bezel on both sides */
  width: clamp(214px, 21vw, 340px);
  transform: perspective(1200px) rotateY(var(--tilt, 0deg));
  animation: none;
}
.cw-spot.is-yt .cw-spot__glass {
  border: 5px solid #14181c; border-radius: 10px; background: #000;
}
.cw-spot.is-yt iframe {
  /* the API stamps width/height attributes on the iframe, and a height
     presentational hint pins the box so aspect-ratio never gets a say —
     the player then letterboxes itself inside a too-short frame */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
}
/* the channel strip. Six episodes need a way to move between them that reads
   at a glance from across the room, so the numbers ARE the control — no menu,
   no titles competing with the room. LTR because it is a numeric track, and
   the arrows point the way the numbers run. */
.cw-yt-zap {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  direction: ltr; margin-top: 8px; max-width: 100%;
}
.cw-yt-dots { display: flex; gap: 4px; }
.cw-yt-zap button {
  font: 600 .72rem/1 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.82);
  min-width: 23px; height: 25px; padding: 0 4px; cursor: pointer; flex: none;
  background: rgba(12,15,18,.62); border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px; transition: background .18s, border-color .18s, color .18s;
}
.cw-yt-zap button:hover { background: rgba(12,15,18,.9); border-color: rgba(255,255,255,.4); color: #fff; }
.cw-yt-nav { font-size: .95rem !important; line-height: 0 !important; }
.cw-yt-dot.is-on {
  color: #05130b; background: var(--acc); border-color: var(--acc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 55%, transparent);
}
/* sound and size sit on their own row: they act on the screen as a whole,
   the numbers act on what is playing in it */
.cw-yt-bar { display: flex; gap: 6px; margin-top: 6px; }
.cw-yt-bar button {
  flex: 1; font: 500 .72rem/1 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.8);
  height: 26px; cursor: pointer; background: rgba(12,15,18,.62);
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  transition: background .18s, border-color .18s, color .18s;
}
.cw-yt-bar button:hover { background: rgba(12,15,18,.9); border-color: rgba(255,255,255,.4); color: #fff; }
.cw-yt-snd.is-on { color: #05130b; background: var(--acc); border-color: var(--acc); }
/* the caption. Two lines on the wall — the whole point of the screen is that
   a visitor understands what they are looking at without opening anything */
.cw-yt-note {
  display: block; margin-top: 7px; text-align: start;
  font: 400 .71rem/1.5 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.72);
  /* point markers set white-space: nowrap on every span they own; a caption
     that refuses to wrap just runs off the side of the screen */
  white-space: normal;
  background: rgba(12,15,18,.52); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 7px 9px;
  /* two lines on the wall: with three, the side panel's total footprint grew
     taller than the main TV's glass and quietly became the larger object */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---- theatre mode ----
   project() rewrites left/top on every frame, so pinning the expanded panel
   needs !important — otherwise the screen keeps sliding with the wall behind
   it while you are trying to watch it. */
.cw-yt-scrim { display: none; }
.cw-yt-scrim.is-on {
  display: block; position: fixed; inset: 0; z-index: 55; pointer-events: auto;
  background: rgba(6,8,10,.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cw-spot.is-yt.is-big {
  position: fixed !important; display: block !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important; z-index: 60;
}
.cw-spot.is-yt.is-big .cw-spot__frame { width: min(92vw, 1000px); transform: none; }
.cw-spot.is-yt.is-big .cw-spot__anchor { display: none; }
.cw-spot.is-yt.is-big .cw-yt-note { -webkit-line-clamp: 6; font-size: .84rem; padding: 10px 13px; }
.cw-spot.is-yt.is-big .cw-yt-zap button, .cw-spot.is-yt.is-big .cw-yt-bar button { height: 32px; font-size: .82rem; }
.cw-spot.is-yt.is-big .cw-yt-dot { min-width: 30px; }
.cw-spot__frame {
  display: block; position: relative; width: clamp(160px, 17vw, 260px);
  transform: perspective(1000px) rotateY(var(--tilt, 9deg)) rotateX(1.5deg);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  animation: cwFloat 7s ease-in-out infinite; animation-delay: var(--ph, 0s);
}
@keyframes cwFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -11px } }
.cw-spot.is-product:hover .cw-spot__frame {
  transform: perspective(1000px) rotateY(calc(var(--tilt, 9deg) * .3)) rotateX(0deg) scale(1.05);
}
/* the pane itself: white edge, deep drop, a breath of accent light */
.cw-spot__glass {
  display: block; position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent),
    0 40px 90px rgba(12,15,18,.5),
    0 0 44px color-mix(in srgb, var(--acc) 20%, transparent);
  transition: box-shadow .3s;
}
.cw-spot__glass img { display: block; width: 100%; height: auto; }
/* the diagonal sheen that makes it read as glass, not as a sticker —
   measured against the busy panos the old .32/.14 stops barely registered
   and the window read as a photocard with a shadow */
.cw-spot__glass::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0%, transparent 30%, transparent 68%, rgba(255,255,255,.22) 100%);
}
.cw-spot__chip {
  position: absolute; top: -14px; inset-inline-end: 14px; z-index: 2; direction: ltr;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .07em; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--acc) 88%, #000);
  padding: 5px 12px; border-radius: 100px;
  box-shadow: 0 6px 18px rgba(12,15,18,.4);
}
.cw-spot__tag {
  position: absolute; right: 0; left: 0; bottom: 0; z-index: 1; padding: 26px 13px 10px;
  color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.45; text-align: start;
  background: linear-gradient(0deg, rgba(12,15,18,.86), rgba(12,15,18,.5) 65%, transparent);
}
/* the AR pin — a thread down to the floor with a lit tip. 2px and near
   full accent at the top: at 1px/70% it vanished into the pano and the
   "pinned in the room" read was lost */
.cw-spot__anchor {
  position: absolute; top: 100%; inset-inline-end: 24%; width: 2px; height: 62px;
  background: linear-gradient(color-mix(in srgb, var(--acc) 95%, transparent), transparent 88%);
}
.cw-spot__anchor::after {
  content: ""; position: absolute; bottom: -3px; inset-inline-end: -3.5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 12px var(--acc);
}
.cw-spot.is-portrait .cw-spot__frame { width: clamp(110px, 11vw, 170px); }
/* discovered */
.cw-spot.is-seen:not(.is-product):not(.is-plaque) i { background: var(--cw-lime); border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 4px rgba(198,242,78,.18); animation: none; }
.cw-spot.is-seen:not(.is-plaque):not(.is-axis) span::after, .cw-spot.is-seen:not(.is-axis) .cw-spot__chip::after { content: " ✓"; color: var(--cw-lime); }
.cw-spot.is-seen .cw-spot__glass { box-shadow: 0 0 0 1px rgba(198,242,78,.7), 0 30px 66px rgba(12,15,18,.45); }

/* ---- Tier 1: doors. The only navigation in the room, so the only thing
   allowed to be the biggest text on screen. Solid white, no backdrop blur —
   the blur was over a photograph, where it buys nothing and costs a
   full-screen compositing pass per pill on a phone. A 14px corner, so the
   one remaining 100px capsule on screen is the WhatsApp button and it reads
   as the only "button" in the frame. ---- */
.cw-door { flex-direction: column; gap: 5px; opacity: .5; transition: opacity .45s ease; }
.cw-door__l {
  color: var(--cw-ink); background: #fff;
  font-weight: 700; font-size: 1.02rem; white-space: nowrap;
  padding: 12px 24px; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  transition: transform .25s, box-shadow .25s, scale .45s ease;
  scale: .88;
}
/* weight follows the gaze: the door you face is lit and full-size, the ones
   at the edge of vision recede instead of shouting alongside it */
.cw-door.is-facing { opacity: 1; }
.cw-door.is-facing .cw-door__l { scale: 1; box-shadow: 0 14px 40px rgba(0,0,0,.42), 0 0 0 2px rgba(198,242,78,.6); }
.cw-door.is-far { opacity: .3; }
.cw-door.is-far .cw-door__l { scale: .8; }
.cw-door:hover { opacity: 1; }
.cw-door:hover .cw-door__l { transform: translateY(-3px); scale: 1; box-shadow: 0 16px 44px rgba(0,0,0,.45), 0 0 0 3px var(--cw-lime); }
.cw-door.is-next .cw-door__l { background: var(--cw-lime); }
.cw-door.is-home .cw-door__l { background: rgba(20,24,28,.88); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
/* one arrow, on the doorway you are actually walking toward — not seven of
   them bouncing at once around the ring */
.cw-door__a {
  font-style: normal; color: #fff; font-size: 1.1rem; line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .35s ease;
}
.cw-door.is-facing .cw-door__a { opacity: 1; animation: cwStep 1.8s ease-in-out infinite; }
@keyframes cwStep { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(6px); opacity: 1 } }
/* finished the room, the onward door beckons */
.room-done .cw-door.is-next .cw-door__l { animation: cwBeckon 1.9s ease-in-out infinite; }
@keyframes cwBeckon {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px var(--cw-lime) }
  50% { box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 0 7px rgba(198,242,78,.35) }
}

/* Tier 3 — status. Empty until there is something to count, and then a
   caption beside the room name rather than a fourth chip in the sky. */
.cw-prog {
  font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.6);
  white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.7);
  transition: color .3s;
}
.cw-prog:empty { display: none; }
.cw-prog.done { color: var(--cw-lime); font-weight: 600; }

/* ============ rich card ============ */
.cw-card {
  position: fixed; z-index: 30; right: 50%; transform: translateX(50%); bottom: 13vh;
  width: min(430px, calc(100vw - 32px)); max-height: 74vh; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 20px; direction: rtl; box-shadow: 0 34px 90px rgba(0,0,0,.5);
  animation: cwIn .26s cubic-bezier(.2,.8,.2,1); scrollbar-width: none;
}
.cw-card::-webkit-scrollbar { display: none; }
@keyframes cwIn { from { opacity: 0; transform: translateX(50%) translateY(24px) scale(.97) } }
.cw-card img { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: top; border-radius: 20px 20px 0 0; }
.cw-card__body { padding: 20px 22px 22px; }
.cw-card__kind {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--cw-lime-d); padding: 4px 11px; border-radius: 100px; margin-bottom: 9px;
}
.cw-card h3 { margin: 0 0 8px; font-size: 1.22rem; color: var(--cw-ink); line-height: 1.3; }
.cw-card p { margin: 0; font-size: .95rem; line-height: 1.68; color: rgba(20,24,28,.78); }
.cw-card__x {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; font-size: .9rem;
  background: rgba(255,255,255,.85); color: var(--cw-ink); box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.cw-card__grab { display: none; }
/* metrics */
.cw-metrics { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.cw-metrics b { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--cw-ink); }
.cw-metrics span { font-size: .74rem; color: rgba(20,24,28,.55); }
/* tech chips */
.cw-tech { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.cw-tech span {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; direction: ltr;
  background: rgba(20,24,28,.06); color: rgba(20,24,28,.7);
  padding: 4px 10px; border-radius: 7px;
}
/* result quote */
.cw-quote {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(198,242,78,.16); border-inline-start: 3px solid var(--cw-lime);
  font-size: .9rem; line-height: 1.6; color: rgba(20,24,28,.82); font-style: italic;
}
/* card CTA */
.cw-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px;
  background: #1EBE5D; color: #fff; font-weight: 700; font-size: .93rem;
  padding: 13px 18px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(30,190,93,.32); transition: background .2s, transform .2s;
}
.cw-card__cta svg { width: 19px; height: 19px; }
.cw-card__cta:hover { background: #25D366; transform: translateY(-2px); }

/* ============ mobile: a sheet, not a shrunken box ============ */
@media (max-width: 860px) {
  .cw-card {
    right: 0; left: 0; bottom: 0; transform: none; width: 100%; max-height: 78svh;
    border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
    animation: cwSheet .26s cubic-bezier(.2,.85,.25,1);
  }
  @keyframes cwSheet { from { transform: translateY(100%) } }
  .cw-card img { max-height: 150px; border-radius: 22px 22px 0 0; }
  .cw-card__grab {
    display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 100px; background: rgba(20,24,28,.22); z-index: 2;
  }
  .cw-card__x { top: 14px; inset-inline-start: 14px; }
  .cw-card__body { padding: 22px 20px 24px; }
  .cw-spot__frame { width: clamp(130px, 38vw, 210px); }
  .cw-spot.is-tv .cw-spot__frame { width: clamp(200px, 56vw, 420px); }
  .cw-spot.is-yt:not(.is-big) .cw-spot__frame { width: clamp(190px, 50vw, 300px); }
  .cw-spot.is-portrait .cw-spot__frame { width: clamp(96px, 25vw, 150px); }
  .cw-spot:not(.is-product) span { font-size: .78rem; }
  .cw-spot__tag { font-size: .72rem; padding: 20px 10px 8px; }
  .cw-spot__chip { font-size: .62rem; padding: 4px 9px; top: -11px; inset-inline-end: 10px; }
  .cw-spot__anchor { height: 34px; }
  .cw-prog { font-size: .7rem; padding: 4px 10px; }
  .cw-room { font-size: .92rem; }
}

/* ============ finale ============ */
.cw-finale {
  position: fixed; z-index: 42; right: 50%; transform: translateX(50%); bottom: 12vh;
  width: min(430px, calc(100vw - 32px)); direction: rtl;
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 22px; padding: 24px; box-shadow: 0 36px 96px rgba(0,0,0,.55);
  animation: cwIn .45s cubic-bezier(.2,.8,.2,1);
}
.cw-fin__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .16em; color: var(--cw-lime-d); }
.cw-finale h3 { margin: 8px 0 8px; font-size: 1.4rem; color: var(--cw-ink); }
.cw-finale p { margin: 0 0 18px; font-size: .93rem; line-height: 1.65; color: rgba(20,24,28,.75); }
.cw-fin__x {
  position: absolute; top: 14px; inset-inline-start: 14px; border: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(20,24,28,.07); color: var(--cw-ink);
}
.cw-fin__paths { display: grid; gap: 9px; }
.cw-fin__paths a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid rgba(20,24,28,.1); border-radius: 14px; padding: 13px 15px;
  transition: border-color .2s, transform .2s, background .2s;
}
.cw-fin__paths a:hover { border-color: var(--cw-lime-d); background: rgba(198,242,78,.12); transform: translateX(calc(-3px * var(--cw-dir, 1))); }
.cw-fin__paths b { font-size: 1.25rem; }
.cw-fin__paths span { font-weight: 700; color: var(--cw-ink); font-size: .95rem; }
@media (max-width: 860px) {
  .cw-finale { right: 0; left: 0; bottom: 0; transform: none; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); animation: cwSheet .36s cubic-bezier(.2,.85,.25,1); }
}

/* ============ atmosphere ============ */
.cw-motes { position: absolute; inset: -10%; z-index: 4; pointer-events: none; transition: transform .5s ease-out; }
.cw-motes i {
  position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: 0 0 6px rgba(255,255,255,.5);
  animation: cwDrift var(--d, 12s) linear infinite;
}
@keyframes cwDrift {
  0%   { transform: translate(0, 0); opacity: 0 }
  15%  { opacity: .65 }
  85%  { opacity: .45 }
  100% { transform: translate(28px, -70px); opacity: 0 }
}

/* room name written in the air on arrival */
.cw-title {
  position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.cw-title.on { animation: cwTitle 2.4s ease forwards; }
@keyframes cwTitle {
  0%   { opacity: 0 }
  18%  { opacity: 1 }
  72%  { opacity: 1 }
  100% { opacity: 0 }
}
.cw-title span {
  color: #fff; font-size: clamp(1.6rem, 4.4vw, 2.9rem); font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,.75), 0 2px 12px rgba(0,0,0,.5);
  padding: 0 24px; text-align: center;
}
.cw-title.on span { animation: cwTitleIn 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cwTitleIn { from { transform: translateY(16px) scale(.96); letter-spacing: .12em } to { transform: none; letter-spacing: -.01em } }

/* polish: keep product tags inside the frame, and the room title out of the way */
.cw-spot__tag {
  white-space: normal; line-height: 1.35; max-height: 2.7em; overflow: hidden;
  padding: 20px 11px 9px; font-size: .8rem;
}
.cw-title { align-items: start; padding-top: 16vh; }
.cw-title span { opacity: .92; }

/* Rubik tuning — Hebrew reads best slightly tighter with a touch more weight */
.cw-room, .cw-card h3, .cw-finale h3, .cw-door__l, .cw-spot:not(.is-product) span, .cw-spot__tag,
.cw-fin__paths span, .cw-metrics b, .cw-prog { letter-spacing: -.01em; }
.cw-card h3, .cw-finale h3 { font-weight: 700; }
.cw-card p, .cw-finale p { font-weight: 400; }
.cw-card__kind, .cw-prog { font-weight: 600; }

/* product screens sit fully on-screen even near the frame edge */
.cw-spot.is-product { max-width: none; }
.cw-spot__tag { text-shadow: 0 1px 8px rgba(0,0,0,.7); }
/* progress chip should not crowd the room title on narrow screens */
.cw-prog__s { display: none; }
@media (max-width: 600px) {
  /* three tools now — keep the bar on one line instead of letting it wrap */
  .cw-top { gap: 8px; flex-wrap: nowrap; }
  .cw-tools { display: flex; align-items: center; flex: none; }
  .cw-tools button { width: 34px; height: 34px; font-size: .88rem; margin-inline-end: 5px; }
  /* 34px circle, 46px thumb target — WCAG 2.5.5 without changing the look */
  .cw-tools button::before { inset: -6px; }
  .cw-tools button svg { width: 17px; height: 17px; }
  .cw-snd i { height: 11px; }
  .cw-brand { font-size: .74rem; letter-spacing: .08em; }
  .cw-prog__l { display: none; }
  .cw-prog__s { display: inline; }
  /* 46vw was measured against Hebrew room names. "Measurement Solutions"
     and "The Entrance" are longer, and with a fifth tool button in the row
     the name climbed straight into the language switch. The name yields
     first; the controls never move. */
  .cw-room { min-width: 0; flex: 0 1 auto; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cw-brand { flex: none; }
  .cw-tools { flex: none; }
}

/* click-outside scrim for panels */
.cw-scrim { position: fixed; inset: 0; z-index: 28; background: rgba(8,11,14,.42); animation: cwFade .3s ease; }
.cw-scrim[hidden] { display: none; }
@keyframes cwFade { from { opacity: 0 } }

/* ============ the ceiling: a reward for looking up ============ */
.cw-sky {
  position: absolute; inset: 0; z-index: 11; display: grid; place-items: center;
  pointer-events: none; opacity: 0; padding-bottom: 22vh;
  transition: opacity .18s linear;
}
.cw-sky__in {
  position: relative; text-align: center; direction: rtl; padding: 30px 34px;
  max-width: min(460px, 86vw);
  background: radial-gradient(ellipse at 50% 35%, rgba(198,242,78,.14), transparent 72%);
}
.cw-sky__in::before {
  content: ""; position: absolute; left: 50%; top: -8%; transform: translateX(-50%);
  width: 120%; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 62%);
  filter: blur(18px);
}
.cw-sky__icon {
  display: block; font-size: 2.6rem; line-height: 1; color: var(--cw-lime);
  text-shadow: 0 0 26px rgba(198,242,78,.8), 0 0 60px rgba(198,242,78,.35);
  animation: cwSkySpin 22s linear infinite;
}
@keyframes cwSkySpin { to { transform: rotate(360deg) } }
.cw-sky h4 {
  margin: 14px 0 10px; color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700;
  letter-spacing: -.01em; text-shadow: 0 3px 26px rgba(0,0,0,.8);
}
.cw-sky p {
  margin: 0 0 5px; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.6;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.cw-sky__stat {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 14px;
  padding: 8px 18px; border-radius: 100px;
  background: rgba(12,15,18,.5); border: 1px solid rgba(198,242,78,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cw-sky__stat b { color: var(--cw-lime); font-size: 1.2rem; }
.cw-sky__stat span { color: rgba(255,255,255,.75); font-size: .78rem; }
/* once discovered, the halo settles */
.cw-sky.seen .cw-sky__icon { animation-duration: 40s; }

/* the nudge that teaches the gesture */
.cw-lookup {
  /* 4vh, not 12: at 12 the nudge landed square on the lobby's ring
     emblem and read as a label for it */
  position: absolute; top: 4vh; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.75); font-size: .76rem; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.cw-lookup.show { opacity: 1; animation: cwLookup 2.4s ease-in-out infinite; }
.cw-lookup i { font-style: normal; font-size: 1.4rem; line-height: .7; color: var(--cw-lime); }
@keyframes cwLookup { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-8px) } }
@media (max-width: 860px) {
  .cw-sky { padding-bottom: 26vh; }
  .cw-sky__in { padding: 24px 22px; }
}

/* sky polish: give the stat pill room, and let the halo breathe instead of spin */
.cw-sky__stat { padding: 9px 20px; gap: 10px; }
.cw-sky__stat b { font-size: 1.3rem; line-height: 1.2; }
.cw-sky__icon { animation: cwSkyGlow 4.5s ease-in-out infinite; }
@keyframes cwSkyGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(198,242,78,.7), 0 0 52px rgba(198,242,78,.28); transform: scale(1) }
  50%      { text-shadow: 0 0 34px rgba(198,242,78,.95), 0 0 78px rgba(198,242,78,.45); transform: scale(1.06) }
}
.cw-sky.seen .cw-sky__icon { animation-duration: 7s; }

/* ============================================================
   The quiet pass — what the founder meant by "מרגיש לי קצת רעש"
   ============================================================ */

/* 1. The chrome recedes when you stop touching it. Stand still for 4.5s and
   the signage dims to a third so the hall is the thing you are looking at.
   Nothing is removed; any drag, tap or key brings it all straight back. */
.cw-top, .cw-pad, .cw-compass, .cw-wa {
  transition: opacity .7s cubic-bezier(.16,1,.3,1);
}
.cw.is-idle .cw-top,
.cw.is-idle .cw-pad,
.cw.is-idle .cw-compass { opacity: .26; }
.cw.is-idle .cw-wa { opacity: .55; }
/* the hint is exempt: it is teaching, and it leaves on its own the moment
   it is obeyed */

/* 2. The look-up nudge stops landing inside the logo ring on a phone. The
   desktop rule moved it to 4vh for exactly this reason and the mobile
   override at 15vh put it straight back on the emblem. */
@media (max-width: 860px) {
  .cw-lookup { top: 7vh; }
  .cw-hint { font-size: .72rem; top: calc(max(14px, env(safe-area-inset-top)) + 54px); }
  /* the compass is a status ring, not a control, and centred on the phone it
     sat inside the button row and read as a fourth button. The row stays
     controls only. */
  .cw-compass { display: none; }
  .cw-door__l { font-size: .95rem; padding: 11px 20px; }
  /* The look-around pad goes away on a phone. The whole frame is already a
     drag surface, the hint says so ("גררו כדי להסתכל"), and at 390px the pad
     and the new bottom-left row would have overlapped by about 34px, which is
     exactly the crowding this row was meant to end. Arrow keys still pan on
     any device with a keyboard. */
  .cw-pad { display: none; }
}

/* 3. Reduced motion was honoured in two places out of a dozen. The camera's
   own idle pan — the one animation with no off switch anywhere in the UI —
   is gated in world.js; these are the rest. */
@media (prefers-reduced-motion: reduce) {
  .cw-door__a, .cw-door.is-facing .cw-door__a,
  .cw-lookup, .cw-lookup.show,
  .cw-spot__frame, .cw-spot:not(.is-product) i,
  .cw-sky__icon, .cw-motes i,
  .room-done .cw-door.is-next .cw-door__l { animation: none !important; }
}

/* ---- the phone ----
   A 214px panel on a wall cannot hold a control deck: 25px buttons are half a
   touch target and a three-line caption at .71rem is decoration, not text. On
   a narrow screen the wall panel keeps the picture and one full-width way in;
   everything else moves into theatre mode, sized for a thumb. */
@media (max-width: 560px) {
  .cw-spot.is-yt:not(.is-big) .cw-yt-zap,
  .cw-spot.is-yt:not(.is-big) .cw-yt-note,
  .cw-spot.is-yt:not(.is-big) .cw-yt-snd { display: none; }
  .cw-spot.is-yt:not(.is-big) .cw-yt-bar { margin-top: 7px; }
  .cw-spot.is-yt:not(.is-big) .cw-yt-big {
    height: 34px; font-size: .78rem; color: #05130b;
    background: var(--acc); border-color: var(--acc);
  }
  .cw-spot.is-yt.is-big .cw-spot__frame { width: 94vw; }
  .cw-spot.is-yt.is-big .cw-yt-zap { gap: 4px; margin-top: 10px; }
  .cw-spot.is-yt.is-big .cw-yt-zap button,
  .cw-spot.is-yt.is-big .cw-yt-bar button { height: 40px; font-size: .8rem; }
  .cw-spot.is-yt.is-big .cw-yt-dot { min-width: 34px; }
  .cw-spot.is-yt.is-big .cw-yt-bar { margin-top: 8px; }
  .cw-spot.is-yt.is-big .cw-yt-note { font-size: .8rem; -webkit-line-clamp: 8; }
}

/* Theatre mode arrives, it does not appear. The panel itself is pinned with
   !important (project() rewrites left/top every frame) and an animation cannot
   outrank that — so the frame inside does the moving and the scrim fades under
   it. Roughly a third of a second: long enough to read as a camera push,
   short enough that a second tap never has to wait for it. */
@keyframes cwYtIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes cwYtScrim { from { opacity: 0 } to { opacity: 1 } }
.cw-spot.is-yt.is-big .cw-spot__frame { animation: cwYtIn .3s cubic-bezier(.2,.7,.2,1) both; }
.cw-yt-scrim.is-on { animation: cwYtScrim .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .cw-spot.is-yt.is-big .cw-spot__frame, .cw-yt-scrim.is-on { animation: none; }
}

/* =====================================================================
   THE 15.8 HALL — five axis screens, wall plaques, the open wall
   ===================================================================== */

/* always-visible way home. Same glass as the tool buttons so it belongs to
   the bar; a pill not a circle because it carries words. */
.cw-home {
  border: 1px solid rgba(255,255,255,.22); background: rgba(12,15,18,.42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: 600 .82rem/1 Rubik, system-ui, sans-serif; border-radius: 100px;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.cw-home:hover { background: rgba(12,15,18,.7); border-color: rgba(255,255,255,.4); }

/* ---- axis screens on the hall walls ---- */
.cw-spot.is-axis { display: block; --acc: #26d07c; }
.cw-spot.is-axis .cw-spot__frame {
  width: clamp(240px, 24vw, 400px);
  transform: perspective(1200px) rotateY(var(--tilt, 0deg));
  animation: none; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cw-spot.is-axis .cw-spot__glass { border: 6px solid #14181c; border-radius: 12px; background: #000; }
.cw-spot.is-axis video, .cw-spot.is-axis img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cw-spot.is-axis .cw-spot__tag b { color: var(--cw-lime, #C6F24E); font-weight: 600; }
/* the faced screen leans out a touch and brightens — the hall telling you
   which film is running */
.cw-spot.is-axis.is-facing .cw-spot__frame { transform: perspective(1200px) scale(1.04); }
.cw-spot.is-axis.is-facing .cw-spot__glass { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent), 0 40px 90px rgba(12,15,18,.55), 0 0 60px color-mix(in srgb, var(--acc) 30%, transparent); }
.cw-spot.is-axis:not(.is-facing) .cw-spot__glass::before {
  content: ""; position: absolute; inset: 0; background: rgba(6,8,10,.28); pointer-events: none; z-index: 1;
}
/* a still that breathes: the two screens without a film yet get a slow push */
@keyframes cwKB { from { transform: scale(1) } to { transform: scale(1.08) translateX(-1.5%) } }
.cw-kb { animation: cwKB 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@media (prefers-reduced-motion: reduce) { .cw-kb { animation: none; } }

/* ---- wall plaques ---- */
.cw-spot.is-plaque { display: block; }
.cw-plaque {
  display: block; width: clamp(150px, 15vw, 230px); text-align: start;
  background: rgba(12,15,18,.58); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-inline-start: 3px solid var(--cw-acc, #6E9B0E); border-radius: 10px; padding: 10px 12px 11px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(12,15,18,.35);
  transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.cw-plaque b { display: block; font: 600 .86rem/1.3 Rubik, system-ui, sans-serif; }
.cw-plaque small { display: block; margin-top: 4px; font: 400 .72rem/1.45 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.72); white-space: normal; }
.cw-spot.is-plaque:hover .cw-plaque { background: rgba(12,15,18,.84); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.cw-spot.is-plaque.is-action .cw-plaque { border-inline-start-color: #25D366; }
.cw-spot.is-plaque.is-seen .cw-plaque b::after { content: " \2713"; color: var(--cw-lime, #C6F24E); }
.cw-spot.is-plaque .cw-spot__anchor { display: block; }

/* while a wall is open the hall's markers step back */
.axis-open .cw-spots, .axis-open .cw-pad, .axis-open .cw-compass, .axis-open .cw-hint, .axis-open .cw-lookup { pointer-events: none; opacity: 0; transition: opacity .3s; }

/* ---- the open wall ---- */
/* display:grid would beat the hidden attribute — the wall must obey it */
.cw-axis[hidden] { display: none; }
.cw-axis {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(6,8,10,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: max(70px, env(safe-area-inset-top)) 16px 20px; overflow: auto;
  animation: cwYtScrim .3s ease both;
}
.cw-axis__wall {
  position: relative; width: min(1180px, 100%); direction: rtl;
  display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "media bubble" "feats feats"; gap: 18px 24px;
  background: rgba(20,24,28,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
  padding: 22px; box-shadow: 0 60px 140px rgba(0,0,0,.6);
  animation: cwYtIn .32s cubic-bezier(.2,.7,.2,1) both;
}
.cw-axis__x {
  position: absolute; top: -50px; inset-inline-end: 0; border: 1px solid rgba(255,255,255,.22); background: rgba(12,15,18,.55);
  color: #fff; font: 600 .84rem/1 Rubik, system-ui, sans-serif; border-radius: 100px; padding: 11px 16px; cursor: pointer;
}
.cw-axis__x:hover { background: rgba(12,15,18,.9); border-color: rgba(255,255,255,.4); }
.cw-axis__media { grid-area: media; position: relative; border: 6px solid #14181c; border-radius: 14px; overflow: hidden; background: #000; align-self: start; }
.cw-axis__media video, .cw-axis__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cw-axis__snd {
  position: absolute; bottom: 12px; inset-inline-start: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(12,15,18,.62);
  color: #fff; font: 500 .74rem/1 Rubik, system-ui, sans-serif; border-radius: 100px; padding: 8px 12px; cursor: pointer;
}
.cw-axis__bubble { grid-area: bubble; color: #fff; align-self: start; }
.cw-axis__eyebrow { display: block; font: 500 .74rem/1 'IBM Plex Mono', monospace; color: var(--acc, #26d07c); letter-spacing: .06em; margin-bottom: 10px; }
.cw-axis__bubble h2 { font: 800 clamp(1.5rem, 2.6vw, 2.2rem)/1.15 Rubik, system-ui, sans-serif; margin: 0 0 12px; }
.cw-axis__bubble h2 em { font: 600 .55em/1 Rubik, system-ui, sans-serif; color: #14181c; background: var(--cw-lime, #C6F24E); border-radius: 100px; padding: 5px 10px; vertical-align: middle; margin-inline-start: 6px; font-style: normal; }
.cw-axis__bubble p { font: 400 1rem/1.7 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.86); margin: 0 0 16px; }
.cw-axis__go { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cw-axis__go > * {
  font: 600 .84rem/1 Rubik, system-ui, sans-serif; border-radius: 100px; padding: 11px 16px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
}
.cw-axis__room { background: var(--cw-lime, #C6F24E) !important; border-color: var(--cw-lime, #C6F24E) !important; color: #14181c !important; }
.cw-axis__wa { border-color: rgba(37,211,102,.55) !important; color: #7CE8A6 !important; }
.cw-axis__go > *:hover { filter: brightness(1.1); }
.cw-axis__made { display: block; font: 400 .72rem/1.4 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.5); }
/* features: a row of smaller screens under the film */
/* The row of features reads left to right so the numbers count the way
   numbers count, while each tile keeps its own RTL text. And the tiles size
   to their content: they used to be accordions on an equal-height grid, so
   every unopened one was a tall empty box. */
.cw-axis__feats {
  grid-area: feats; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; direction: ltr; align-items: start;
}
.cw-axis__feat {
  position: relative; text-align: start; cursor: default; direction: rtl;
  border: 1px solid rgba(255,255,255,.12); background: rgba(12,15,18,.55); border-radius: 12px; padding: 12px; color: #fff;
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; transition: background .2s, border-color .2s;
}
.cw-axis__feat:hover { background: rgba(12,15,18,.85); border-color: rgba(255,255,255,.28); }
.cw-axis__feat-mark {
  position: relative; width: 44px; height: 44px; border-radius: 7px; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--acc, #26d07c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, #26d07c) 35%, transparent);
}
.cw-axis__feat-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-axis__feat-mark i {
  position: relative; z-index: 1; font: 600 .95rem/1 'IBM Plex Mono', monospace; font-style: normal;
  color: var(--acc, #26d07c);
}
/* over a photograph the number needs its own ground to stay legible */
.cw-axis__feat-mark.has-img i {
  color: #fff; background: rgba(12,15,18,.72); border-radius: 5px; padding: 3px 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.cw-axis__feat-t b { display: block; font: 600 .86rem/1.3 Rubik, system-ui, sans-serif; }
.cw-axis__feat-t i { display: inline-block; margin-top: 4px; font: 500 .66rem/1 Rubik, system-ui, sans-serif; font-style: normal; color: #14181c; background: var(--cw-lime, #C6F24E); border-radius: 100px; padding: 3px 7px; }
.cw-axis__feat-x { grid-column: 1 / -1; margin-top: 6px; font: 400 .78rem/1.55 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.8); }

@media (max-width: 860px) {
  .cw-home { padding: 8px 11px; font-size: .74rem; }
  /* must live in THIS block: the desktop width rule is declared above and
     would otherwise win on source order */
  .cw-spot.is-axis .cw-spot__frame { width: clamp(170px, 46vw, 300px); }
  .cw-plaque { width: clamp(140px, 42vw, 200px); }
  .cw-axis { padding: max(64px, env(safe-area-inset-top)) 8px 12px; align-items: start; }
  .cw-axis__wall { grid-template-columns: 1fr; grid-template-areas: "media" "bubble" "feats"; padding: 14px; gap: 14px; border-radius: 16px; }
  .cw-axis__x { top: -46px; right: 4px; }
  .cw-axis__feats { grid-template-columns: 1fr 1fr; }
  .cw-axis__bubble p { font-size: .92rem; }
}

/* ---- the guided pass ---- */
.cw-tour {
  position: fixed; z-index: 22;
  left: calc(var(--cw-bar-x) + (var(--cw-bar-s) + var(--cw-bar-g)) * 2);
  bottom: var(--cw-bar-y);
  display: flex; align-items: center;
}
.cw-tour[hidden] { display: none; }
.cw-tour__go {
  border: 0; background: var(--cw-lime, #C6F24E); color: #14181c; cursor: pointer;
  width: var(--cw-bar-s); height: var(--cw-bar-s);
  display: grid; place-items: center; padding: 0;
  font: 700 1.15rem/1 Rubik, system-ui, sans-serif; border-radius: 50%;
  box-shadow: 0 14px 40px rgba(198,242,78,.28), 0 2px 0 rgba(0,0,0,.2); transition: transform .2s, box-shadow .2s;
}
.cw-tour__go:hover { transform: translateY(-1px); box-shadow: 0 18px 46px rgba(198,242,78,.36); }
.tour-on .cw-tour__go { background: rgba(12,15,18,.7); color: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.cw-tour__dots { display: flex; gap: 6px; }
.cw-tour__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.4); transition: background .3s, transform .3s; }
.cw-tour__dots i.on { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.65); }
/* the one you are standing in front of, not merely one you have seen */
.cw-tour__dots i.now { background: var(--cw-lime, #C6F24E); border-color: var(--cw-lime, #C6F24E); transform: scale(1.25); }
.cw-tour__dots i.now { transform: scale(1.5); }
/* the wall stays put on the pass: no hover lifts, no idle drift */
.tour-on .cw-hint, .tour-on .cw-pad, .tour-on .cw-lookup { opacity: 0; pointer-events: none; }
.axis-open .cw-tour { z-index: 45; }
@media (max-width: 860px) {
  /* the bar grew a second row, and the agent stands in the same corner it
     used to have to itself: give the column the height it now needs */
  .cw-tour__go { font-size: .84rem; padding: 12px 16px; }
}

/* ---------- the language switch ----------
   A quiet text button in the tool row, the same weight as the icons beside
   it: the hall is Hebrew and English is an option, not a flag to salute.
   Wide enough for "עברית" so the row does not jump when it is pressed. */
.cw-lang {
  min-width: 44px; height: 38px; padding: 0 10px;
  font: 600 .76rem/1 'IBM Plex Mono', ui-monospace, monospace;
  color: #fff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20); border-radius: 100px;
  cursor: pointer; margin-inline-end: 6px;
  transition: background .18s, border-color .18s;
}
.cw-lang:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.42); }
.cw-lang:focus-visible { outline: 2px solid var(--cw-lime); outline-offset: 2px; }
.cw-lang[lang="he"] { font-family: Rubik, system-ui, sans-serif; font-weight: 500; }
@media (max-width: 860px) { .cw-lang { min-width: 40px; height: 34px; padding: 0 8px; font-size: .72rem; } }

/* Direction-aware sign for the few transforms that must lean with the text.
   `dir` is on <html>, so a single custom property carries the sign into any
   rule that needs it instead of duplicating the whole selector. */
:root { --cw-dir: 1; }
:root[dir="ltr"] { --cw-dir: -1; }

/* In English the plaques and captions read left-to-right; their leader lines,
   accent bars and chips all follow because they are logical properties now.
   The one thing that must NOT flip is the panorama itself and anything
   measured against it — the spot layer is positioned in pixels by project(),
   which is direction-blind by construction. */

/* English runs ~20% longer than Hebrew, and the point-marker rule sets
   white-space: nowrap on every span a spot owns — so the screen caption
   ran off the end of its own bezel and lost its last word. It wraps. */
.cw-spot:not(.is-product) .cw-spot__tag { white-space: normal; }

/* ---------- the lobby assistant ----------
   It stands beside the WhatsApp button, in the same corner and at the same
   weight, because the two are the same offer at different temperatures: ask
   the site a question, or go talk to a person. Charcoal against the
   WhatsApp green so they read as a pair without competing. */
.cw-assist-open {
  position: fixed; z-index: 44;
  left: calc(var(--cw-bar-x) + var(--cw-bar-s) + var(--cw-bar-g));
  bottom: var(--cw-bar-y);
  width: var(--cw-bar-s); height: var(--cw-bar-s);
  display: grid; place-items: center; cursor: pointer;
  overflow: hidden; clip-path: circle(50%);
  background: rgba(20,24,28,.82); color: #fff; font: 600 .84rem/1 Rubik, system-ui, sans-serif;
  padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(8,11,14,.34);
  transition: background .2s, border-color .2s, transform .2s;
}
.cw-assist-open svg { width: 19px; height: 19px; flex: none; }
.cw-assist-open:hover { background: rgba(20,24,28,.95); border-color: rgba(255,255,255,.32); }
.cw-assist-open.is-on { background: var(--cw-lime); color: #0c0f12; border-color: var(--cw-lime); }
.cw-assist-open:focus-visible { outline: 2px solid var(--cw-lime); outline-offset: 3px; }

.cw-assist {
  position: fixed; z-index: 45;
  left: var(--cw-bar-x); bottom: calc(var(--cw-bar-y) + var(--cw-bar-s) + var(--cw-bar-g));
  width: min(370px, calc(100vw - 36px)); max-height: min(60vh, 520px);
  display: flex; flex-direction: column; overflow: hidden;
  /* the hall's own material: dark glass with a hairline, the same as the
     screen walls. A white card belonged to some other website. */
  background: rgba(20,24,28,.9); color: #fff;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0,0,0,.62);
  animation: cwAssistIn .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes cwAssistIn { from { opacity: 0; transform: translateY(12px) scale(.97) } }
@media (prefers-reduced-motion: reduce) { .cw-assist { animation: none; } }
.cw-assist__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.1); flex: none;
}
.cw-assist__title { font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.cw-assist__x {
  border: 0; background: transparent; cursor: pointer; font-size: .95rem;
  color: rgba(255,255,255,.5); padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.cw-assist__x:hover { background: rgba(255,255,255,.1); color: #fff; }
.cw-assist__log {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px; font-size: .88rem; line-height: 1.6;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.cw-assist__greet { margin: 0; color: rgba(255,255,255,.62); }
.cw-assist__msg {
  margin: 0; padding: 9px 13px; border-radius: 14px; max-width: 88%;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* the visitor speaks in the brand's colour, the agent in the hall's glass */
.cw-assist__msg.is-user {
  align-self: flex-end; background: var(--cw-lime); color: #0c0f12; font-weight: 500;
  border-end-end-radius: 5px;
}
.cw-assist__msg.is-bot {
  align-self: flex-start; background: rgba(255,255,255,.09); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.08); border-end-start-radius: 5px;
}
.cw-assist__msg.is-wait { color: rgba(255,255,255,.42); }
.cw-assist__msg.is-wait::after { content: ""; animation: cwDots 1.2s steps(4, end) infinite; }
@keyframes cwDots { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } }
.cw-assist__msg.is-err { background: rgba(226,75,74,.14); border-color: rgba(226,75,74,.3); color: #ffb4b3; }

/* the input is one object: the field holds the button, instead of the button
   floating beside it like an afterthought */
.cw-assist__row {
  display: flex; align-items: center; gap: 0; padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.1); flex: none;
}
.cw-assist__in {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .88rem; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px; padding: 11px 15px;
  padding-inline-end: 52px;                 /* the well the button sits in */
  transition: border-color .18s, background .18s;
}
.cw-assist__in::placeholder { color: rgba(255,255,255,.42); }
.cw-assist__in:focus { outline: none; border-color: var(--cw-lime); background: rgba(255,255,255,.12); }
.cw-assist__go {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--cw-lime); color: #0c0f12; font-size: .95rem; font-weight: 700;
  margin-inline-start: -43px;               /* tucked inside the field */
  position: relative; z-index: 1;
  transition: transform .15s, background .15s;
}
.cw-assist__go:hover { background: #fff; transform: scale(1.06); }
.cw-assist__go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the openers: four things worth asking, so nobody faces an empty box */
.cw-assist__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cw-assist__chip {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); cursor: pointer;
  border-radius: 100px; padding: 7px 12px; font: inherit; font-size: .79rem;
  color: rgba(255,255,255,.78); transition: background .16s, border-color .16s, color .16s;
}
.cw-assist__chip:hover { background: rgba(198,242,78,.16); border-color: var(--cw-lime); color: #fff; }
.cw-assist__chip:focus-visible { outline: 2px solid var(--cw-lime); outline-offset: 2px; }

/* On a phone the panel is a sheet at the very bottom, not a card floating
   in the middle: at 56vh it swallowed the screen it had just opened. It
   keeps the top of the frame clear so the answer and the thing being
   answered about are visible at the same time. */
@media (max-width: 860px) {
  .cw-assist {
    left: 8px; right: 8px; width: auto;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px);
    max-height: 44vh; border-radius: 18px;
  }
  .cw-assist__head { padding: 10px 14px; }
  .cw-assist__log { padding: 11px 14px; gap: 7px; font-size: .85rem; }
  .cw-assist__row { padding: 9px 10px 11px; }
  .cw-assist__chip { font-size: .77rem; padding: 7px 11px; }
  /* the launcher steps aside while the sheet is up, rather than sitting on it */
  .cw-assist-open.is-on { opacity: 0; pointer-events: none; }
}
/* the idle dim leaves the assistant alone: it is a conversation, not chrome */
.cw.is-idle .cw-assist-open { opacity: .55; }


/* ---------- the agent's corner stage ----------
   He replaces the drawn speech bubble, which stays underneath as the fallback
   for a failed model or a browser with no WebGL left to give. */
/* He stands ON the button rather than inside it: at 34px he was a smudge,
   and a companion the visitor is meant to recognise has to be big enough to
   have a face. The overflow is deliberate, the pill is his plinth. */
.cw-agent {
  /* absolutely placed, not a grid item: he is wider than his button on purpose
     so he fills the circle rather than floating in the middle of it, and a
     grid item that overflows its track does not stay centred. */
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; margin: 0;
  /* the renderer frames him inside his own bounds, which leaves a ring of air
     in a 56px circle. A gentle scale fills it without touching the edge, and
     the button's clip-path is there in case a different export runs bigger. */
  transform: scale(1.18);
}
.cw-assist-open:hover .cw-agent { transform: scale(1.26); }
.cw-agent svg { width: 20px; height: 20px; position: absolute; inset: auto 0 10px; margin: auto; }
.cw-agent.is-ready svg { display: none; }
.cw-agent__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* he is the reason to look, so the button leans on him rather than the label */
.cw-agent { transition: transform .2s cubic-bezier(.2,.8,.2,1); }


/* [hidden] is only display:none at UA-stylesheet strength, so the display
   declarations above silently outrank it: the panel was open on arrival and
   the launcher survived leaving the lobby. */
.cw-assist[hidden], .cw-assist-open[hidden] { display: none !important; }

/* Carousel focus. --focus runs 1 at dead centre to 0 out at the edges, so the
   screen you are turned toward is full strength and the rest sit back. They
   are still there, still real, just not competing. */
.cw-spot.is-axis .cw-spot__frame {
  opacity: calc(.34 + var(--focus, 1) * .66);
  transition: opacity .25s linear;
}
.cw-spot.is-axis .cw-spot__chip { opacity: calc(.3 + var(--focus, 1) * .7); }

/* Each expertise has a full site of its own, and on the wall that fact was
   the quietest of three buttons inside a panel you had to open first. A badge
   on the screen itself says so before you click anything. */
.cw-spot__site {
  /* The chip forces direction: ltr on itself, so ITS inline-end is the right
     edge while an RTL-inheriting badge's inline-start is also the right edge.
     Both logical properties resolved to the same corner. Physical, therefore,
     and deliberately: the chip owns the right, this owns the left. */
  position: absolute; top: -13px; left: 12px; right: auto; z-index: 2;
  font: 600 .62rem/1 'IBM Plex Mono', monospace; letter-spacing: .04em;
  color: #14181c; background: var(--cw-lime, #C6F24E);
  border-radius: 100px; padding: 5px 9px; white-space: nowrap;
  opacity: calc(.25 + var(--focus, 1) * .75);
}
/* and inside the wall it stops being the dimmest option */
.cw-axis__site { border-color: var(--cw-lime) !important; color: var(--cw-lime) !important; }

/* On a phone the frame is 46vw and the department chip alone can be 134px of
   it. The badge would sit on top of the chip, so there the same fact rides
   the caption line instead, which spans the full width. */
@media (max-width: 860px) { .cw-spot__site { display: none; } }

/* ---------- the rail ----------
   The screens, off the wall and into a row with real depth. One card in
   focus, whole and centred; the neighbours behind it in perspective, dimmer,
   smaller, turned a few degrees away. The room reads through the gaps and
   the wordmark above has nothing on it. */
.cw-rail {
  position: fixed; left: 0; right: 0; z-index: 24;
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 126px);
  perspective: 1400px; perspective-origin: 50% 40%;
  pointer-events: none; touch-action: pan-y;
  --cw: 420px;
}
.cw-rail[hidden] { display: none !important; }
.cw-card3 {
  position: absolute; top: 0; left: 50%; width: var(--cw); margin-left: calc(var(--cw) / -2);
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: start;
  transform-style: preserve-3d; will-change: transform, opacity;
  pointer-events: auto; font-family: inherit; color: #fff;
  transition: opacity .18s linear;
}
.cw-card3:focus-visible { outline: none; }
.cw-card3:focus-visible .cw-card3__glass { box-shadow: 0 0 0 3px var(--cw-lime), 0 40px 90px rgba(0,0,0,.6); }
.cw-card3__glass {
  position: relative; display: block; overflow: hidden; border-radius: 16px;
  aspect-ratio: 16 / 9; background: #0c0f12;
  border: 5px solid #14181c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.6);
  transition: box-shadow .25s;
}
.cw-card3.is-focus .cw-card3__glass {
  box-shadow: 0 0 0 1px rgba(198,242,78,.55), 0 0 40px rgba(198,242,78,.16), 0 50px 110px rgba(0,0,0,.66);
}
.cw-card3 video, .cw-card3 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-card3 .cw-kb { animation: cwKB 18s ease-in-out infinite alternate; }
/* the glass sheen and the bottom scrim that makes the caption legible over any frame */
.cw-card3__glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* the scrim has to survive a bright frame: the supermarket's floor is
     almost white, and a gradient that only went dark at the very bottom left
     the caption as white text on white */
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.06) 44%, rgba(0,0,0,.62) 76%, rgba(0,0,0,.9) 100%);
}
.cw-card3__chip {
  position: absolute; top: 12px; right: 12px; z-index: 2; direction: ltr;
  font: 500 .7rem/1 'IBM Plex Mono', monospace; letter-spacing: .07em; white-space: nowrap;
  color: #0c0f12; background: var(--cw-lime); border-radius: 100px; padding: 6px 10px;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.cw-card3.is-film .cw-card3__chip { color: #fff; background: rgba(12,15,18,.72); border: 1px solid rgba(255,255,255,.22); }
.cw-card3__site {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font: 500 .66rem/1 'IBM Plex Mono', monospace; letter-spacing: .04em; white-space: nowrap;
  color: #fff; background: rgba(12,15,18,.82); border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px; padding: 5px 9px;
}
.cw-card3__tag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 14px 12px;
  text-shadow: 0 1px 8px rgba(0,0,0,.75);
  font: 500 .86rem/1.4 Rubik, system-ui, sans-serif; color: #fff; text-align: start;
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* the neighbours lose their captions: they are context, not reading matter */
.cw-card3:not(.is-focus) .cw-card3__tag, .cw-card3:not(.is-focus) .cw-card3__site { opacity: 0; transition: opacity .2s; }
.cw-card3.is-focus .cw-card3__tag, .cw-card3.is-focus .cw-card3__site { opacity: 1; transition: opacity .3s .12s; }

/* arrival: the row comes forward out of the room instead of appearing */
@keyframes cwRailIn { from { opacity: 0; transform: translateY(26px) } }
.cw-rail:not([hidden]) .cw-card3 { animation: cwRailIn .7s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .cw-rail .cw-card3 { animation: none; } .cw-card3 .cw-kb { animation: none; } }

@media (max-width: 860px) {
  .cw-rail { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 180px); perspective: 900px; }
  .cw-card3__glass { border-radius: 14px; border-width: 4px; }
  .cw-card3__chip { top: 9px; font-size: .62rem; padding: 5px 8px; }
  .cw-card3__site { top: 9px; font-size: .6rem; padding: 4px 7px; }
  .cw-card3__tag { font-size: .8rem; padding: 18px 11px 10px; }
}

/* a short desktop frame: the carousel bar and the pass button share one row
   so the rail above them can keep a usable height */
/* the short-screen override is gone with the pill: the tour button now sits
   in the bottom row like everything else, at every height */
.cw.is-short .cw-hint { display: none; }

/* ---------- who we are ----------
   The card: two portraits side by side where a film would be. The wall: the
   same two portraits large, and each founder's full profile as a tile with
   room to actually read it. */
.cw-card3__pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #14181c; }
.cw-card3__pair img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.cw-card3.is-team .cw-card3__chip { color: #fff; background: rgba(12,15,18,.72); border: 1px solid rgba(255,255,255,.22); }

.cw-team__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 10; background: #0c0f12;
}
.cw-team__pair img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.cw-axis.is-team .cw-axis__feats { grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-person {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start;
  border: 1px solid rgba(255,255,255,.12); background: rgba(12,15,18,.55); border-radius: 16px; padding: 16px; color: #fff;
}
.cw-person img { width: 112px; height: 112px; object-fit: cover; object-position: 50% 15%; border-radius: 12px; display: block; }
.cw-person h3 { margin: 0 0 3px; font: 800 1.15rem/1.2 Rubik, system-ui, sans-serif; }
.cw-person__role { display: block; font: 500 .74rem/1 'IBM Plex Mono', monospace; color: var(--acc, #C6F24E); letter-spacing: .04em; margin-bottom: 10px; }
.cw-person p { margin: 0 0 10px; font: 400 .92rem/1.65 Rubik, system-ui, sans-serif; color: rgba(255,255,255,.86); }
.cw-person .cw-tech { margin: 0 0 10px; }
.cw-person__wa {
  display: inline-block; font: 600 .8rem/1 Rubik, system-ui, sans-serif; text-decoration: none;
  color: #7CE8A6; border: 1px solid rgba(37,211,102,.55); border-radius: 100px; padding: 9px 14px;
}
.cw-person__wa:hover { background: rgba(37,211,102,.12); }
@media (max-width: 860px) {
  .cw-axis.is-team .cw-axis__feats { grid-template-columns: 1fr; }
  .cw-person { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; }
  .cw-person img { width: 84px; height: 84px; }
  .cw-person p { font-size: .88rem; }
}

/* inside the wall the carousel and the pass button are somebody else's
   controls: they stay behind the scrim, not on top of the profiles */
.axis-open:not(.tour-on) .cw-tour { opacity: 0; pointer-events: none; }   /* the pass keeps its stop button */
.cw-person .cw-tech span { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
.cw-axis__feat-go { display: inline-block; margin-inline-start: 6px; color: var(--cw-lime); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cw-axis__feat-go:hover { text-decoration: underline; }

/* English keeps its own reading order inside the tiles */
:root[dir="ltr"] .cw-axis__feat { direction: ltr; }