/* Velar Bureau — home "why Velar": tall poster cards. A big symbol for each reason is drawn in thin vertical lines
   (js/whyx.js); a magenta measuring frame follows the pointer. Gradient and black cards take turns. */
.vx-abw { --wx-hud: #FC00FD; }
.vx-abw .why-rail { border: 0; column-gap: clamp(14px, min(2.6vw, 37.44px), 40px);
  grid-auto-columns: calc((min(100vw, 1440px) - 2 * var(--gx) - 2 * clamp(14px, min(2.6vw, 37.44px), 40px)) / 2.6); }
.vx-abw .why { --wp: clamp(26px, min(3.8vw, 54.72px), 56px); position: relative; overflow: hidden; isolation: isolate; border: 0 !important; padding: var(--wp);
  aspect-ratio: 3 / 4; min-height: 0; display: flex; flex-direction: column; color: #fff; background: #141414; cursor: crosshair; }
/* five colours, one per card: blue, graphite with red lines, signal, steel, green */
.vx-abw .why:nth-child(5n + 1) { --wx-line: 170, 186, 255; background: linear-gradient(180deg, #14127A 0%, #3A52FD 100%); }
.vx-abw .why:nth-child(5n + 2) { --wx-line: 226, 73, 43; background: #141414; }
.vx-abw .why:nth-child(5n + 3) { --wx-line: 255, 222, 212; background: linear-gradient(180deg, #5E1407 0%, #E2492B 100%); }
.vx-abw .why:nth-child(5n + 4) { --wx-line: 14, 15, 17; background: linear-gradient(180deg, #F4F6F9 0%, #C9D0DA 100%); color: #0E0F11; }
.vx-abw .why:nth-child(5n + 5) { --wx-line: 150, 240, 190; background: linear-gradient(180deg, #04241A 0%, #128A5A 100%); }
.vx-abw .why:nth-child(5n + 4) h3, .vx-abw .why:nth-child(5n + 4) .wx__top { color: #0E0F11; }
.vx-abw .why:nth-child(5n + 4) p { color: rgba(14, 15, 17, .68); }
.vx-abw .why > .why__art { position: absolute; inset: 0; z-index: -1; width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important; background: none; border: 0; overflow: hidden; }
.vx-abw .why > .why__art > svg, .vx-abw .why .why__tile { display: none; }
.vx-abw .why__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wx__top { display: flex; align-items: center; gap: 12px; font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; color: #fff; }
.wx__top svg { width: 30px; height: 30px; }
.wx__top small { font-family: var(--fm); font-stretch: 100%; font-weight: 400; font-size: .72rem; letter-spacing: .1em; opacity: .6; margin-left: auto; }
.vx-abw .why h3 { margin-top: auto !important; padding-top: 24px; color: #fff; font-weight: 400; font-size: clamp(1.5rem, min(2.1vw, 30.24px), 1.95rem); line-height: 1.2; letter-spacing: -.015em; max-width: 16ch; }
.vx-abw .why p { min-height: 0; margin-top: 14px; color: rgba(255, 255, 255, .72); font-size: 1rem; max-width: 32ch; }
@media (max-width: 1100px) { .vx-abw .why-rail { grid-auto-columns: calc((100vw - 2 * var(--gx)) / 1.7); } }
@media (max-width: 700px) {
  .vx-abw .why-rail { grid-auto-columns: 84%; column-gap: 12px; padding-right: var(--gx); }
  .vx-abw .why { aspect-ratio: auto; height: 500px; }
}

/* v233 — the fifth card: dark steel instead of green, so the set has one cool accent (the blue first card), not two */
.vx-abw .why:nth-child(5n + 5) { --wx-line: 227, 231, 237; background: linear-gradient(180deg, #17191C 0%, #4A505B 100%); }