/* Velar Bureau — home: "about us" intro and the "why clients pick us" cards in one block */
.vx-abw { padding-bottom: var(--sec); }
.vx-abw .mani__grid { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; align-items: end; }
.vx-abw__arr { display: flex; justify-content: flex-end; margin-top: clamp(28px, min(3vw, 43.2px), 44px); background: none; }
.vx-abw__why { background: none; margin-top: clamp(20px, min(2vw, 28.8px), 28px); }
/* the cards sit in the content column, framed on every side */
.vx-abw .why-rail { margin-inline: 0; padding-left: 0; border: 1px solid var(--line-d); grid-auto-columns: calc((100vw - 2 * var(--gx)) / 3.4); }
.vx-abw .why:last-child { border-right: 0; }
@media (max-width: 1100px) { .vx-abw .why-rail { grid-auto-columns: calc((100vw - 2 * var(--gx)) / 2.2); } }
@media (max-width: 700px) { .vx-abw .why-rail { grid-auto-columns: 86%; } }
.vx-abw .mani__txt { max-width: none; width: 100%; justify-self: stretch; }
.vx-abw .mani__txt p { max-width: 46ch; }

/* desktop: the text column starts exactly where the third card starts; text at the top, arrows on the headline's last line */
@media (min-width: 1101px) {
  .vx-abw .mani__grid { grid-template-columns: calc((100vw - 2 * var(--gx)) / 3.4 * 2) minmax(0, 1fr); column-gap: 0; align-items: stretch; }
  .vx-abw .mani__txt { display: flex; flex-direction: column; justify-content: space-between; padding-left: clamp(24px, min(3vw, 43.2px), 40px); }
  .vx-abw .mani__txt p { margin-top: .6em; }
  .vx-abw__arr { margin-top: 28px; }
  .vx-abw .h2 { max-width: none; font-size: clamp(2.6rem, min(4.3vw, 61.92px), 4rem); line-height: .98; }
}

/* the slider controls belong to the cards: one bar under them with a counter, a progress line and the arrows */
.vx-abw__ctl { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.vx-abw__cnt { flex: none; font-family: var(--fm); font-size: .8rem; letter-spacing: .04em; color: #8C929C; }
.vx-abw__cnt b { font-weight: 500; color: #0E0F11; }
.vx-abw__bar { position: relative; flex: 1; height: 2px; background: rgba(14, 15, 17, .12); }
.vx-abw__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--signal); transition: width .3s var(--ease); }
.vx-abw__ctl .arrows { flex: none; }
.vx-abw__ctl .arrow { background: transparent; color: #0E0F11; border: 1px solid rgba(14, 15, 17, .16); }
.vx-abw__ctl .arrow:hover { background: #0E0F11; color: #E3E7ED; border-color: #0E0F11; }
.vx-abw__ctl .arrow:disabled { background: transparent; color: #0E0F11; opacity: .25; }

/* the rail is not clipped by the content column: cards run out to the screen edges, the first card still lines up with the text */
.vx-abw .why-rail { margin-inline: calc(max(var(--gx), env(safe-area-inset-left, 0px)) * -1) !important; padding-inline: max(var(--gx), env(safe-area-inset-left, 0px)) !important; scroll-padding-inline: max(var(--gx), env(safe-area-inset-left, 0px)); }