.ba[data-v-7a8388e5] {
  --pos: 55%;
  width: 100%;
}
.ba__frame[data-v-7a8388e5] {
  position: relative;
  overflow: hidden;
  border-radius: var(--dt-radius-xl);
  background: var(--dt-teal-50);
  aspect-ratio: 3 / 2;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: var(--dt-shadow-md);
}
.ba__img[data-v-7a8388e5] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The "after" layer is revealed from the inline-start edge up to --pos.
   clip-path is physical (top right bottom left), so each direction gets its
   own rule. RTL is the default because the app ships RTL-first. */
.ba__after[data-v-7a8388e5] {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 calc(100% - var(--pos)));
  will-change: clip-path;
}
[dir='ltr'] {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__divider[data-v-7a8388e5] {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos);
  width: 3px;
  margin-inline-start: -1.5px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 0 14px rgb(7 59 76 / 0.35);
  pointer-events: none;
}
.ba__handle[data-v-7a8388e5] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--pos);
  translate: 50% -50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface);
  color: var(--dt-teal-600);
  box-shadow: var(--dt-shadow-lg);
  border: 2px solid var(--dt-white);
  cursor: grab;
  /* `translate` centres the handle on the split; `scale` stays free for hover
     feedback so the two never fight over the transform property. */
  transition: scale var(--dt-dur-2) var(--dt-ease-spring);
}
[dir='ltr'] {
  translate: -50% -50%;
}
.ba__handle[data-v-7a8388e5]:hover {
  scale: 1.08;
}
.ba--dragging .ba__handle[data-v-7a8388e5] {
  cursor: grabbing;
  scale: 0.95;
}
.ba__tag[data-v-7a8388e5] {
  position: absolute;
  inset-block-start: var(--dt-space-4);
  padding: 0.32rem 0.85rem;
  border-radius: var(--dt-radius-pill);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-bold);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ba__tag--before[data-v-7a8388e5] {
  inset-inline-end: var(--dt-space-4);
  background: rgb(11 31 39 / 0.72);
  color: #fff;
}
.ba__tag--after[data-v-7a8388e5] {
  inset-inline-start: var(--dt-space-4);
  background: rgb(0 159 163 / 0.9);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.ba__handle[data-v-7a8388e5] {
    transition: none;
}
}

.ba-sec__layout[data-v-f00a1d11] {
  display: grid;
  gap: var(--dt-space-6);
}
.ba-sec__mobile-grid[data-v-f00a1d11] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ba-sec__mobile-card[data-v-f00a1d11] {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  box-shadow: var(--dt-shadow-sm);
}
.ba-sec__hint[data-v-f00a1d11] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-block-start: var(--dt-space-3);
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.ba-sec__side[data-v-f00a1d11] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-4);
}
.ba-sec__tabs[data-v-f00a1d11] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-2);
}
.ba-sec__tab[data-v-f00a1d11] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  padding: var(--dt-space-3) var(--dt-space-4);
  text-align: start;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-surface);
  transition:
    border-color var(--dt-dur-2) var(--dt-ease-out),
    background-color var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-out);
}
.ba-sec__tab[data-v-f00a1d11]:hover {
  border-color: var(--dt-teal-300);
  transform: translateY(-2px);
}
.ba-sec__tab--active[data-v-f00a1d11] {
  border-color: var(--dt-teal-500);
  background: var(--dt-teal-50);
}
.ba-sec__tab-icon[data-v-f00a1d11] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-sunken);
  color: var(--dt-navy-600);
}
.ba-sec__tab--active .ba-sec__tab-icon[data-v-f00a1d11] {
  background: var(--dt-teal-500);
  color: #fff;
}
.ba-sec__tab-text[data-v-f00a1d11] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ba-sec__tab-text strong[data-v-f00a1d11] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
}
.ba-sec__tab-text small[data-v-f00a1d11] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
}
.ba-sec__cta[data-v-f00a1d11] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
  padding: var(--dt-space-5);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-grad-mint);
  border: 1px solid var(--dt-teal-100);
  margin-block-start: auto;
}
.ba-sec__cta-text[data-v-f00a1d11] {
  font-size: var(--dt-fs-sm);
  color: var(--dt-ink-soft);
  line-height: var(--dt-lh-snug);
}
.ba-sec__cta-text strong[data-v-f00a1d11] {
  color: var(--dt-teal-700);
}
@media (min-width: 900px) {
.ba-sec__layout[data-v-f00a1d11] {
    grid-template-columns: 1.55fr 1fr;
    align-items: stretch;
}
}

.vc[data-v-dd66e7b4] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: start;
  border-radius: var(--dt-radius-xl);
  overflow: hidden;
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
  transition:
    transform var(--dt-dur-3) var(--dt-ease-out),
    box-shadow var(--dt-dur-3) var(--dt-ease-out),
    border-color var(--dt-dur-3) var(--dt-ease-out);
}
.vc[data-v-dd66e7b4]:hover {
  transform: translateY(-5px);
  box-shadow: var(--dt-shadow-lg);
  border-color: var(--dt-teal-200);
}
.vc__media[data-v-dd66e7b4] {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dt-teal-50);
}
.vc__media img[data-v-dd66e7b4] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dt-dur-5) var(--dt-ease-out);
}
.vc:hover .vc__media img[data-v-dd66e7b4] {
  transform: scale(1.06);
}
.vc__scrim[data-v-dd66e7b4] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(4 30 40 / 0.5), transparent 55%);
}
.vc__play[data-v-dd66e7b4] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: 50% -50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--dt-radius-pill);
  background: rgb(255 255 255 / 0.92);
  color: var(--dt-teal-700);
  box-shadow: var(--dt-shadow-lg);
  padding-inline-start: 3px;
  transition:
    transform var(--dt-dur-3) var(--dt-ease-spring),
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.vc:hover .vc__play[data-v-dd66e7b4] {
  transform: translate(50%, -50%) scale(1.12);
  background: var(--dt-teal-500);
  color: #fff;
}
.vc__duration[data-v-dd66e7b4],
.vc__soon[data-v-dd66e7b4] {
  position: absolute;
  inset-block-end: var(--dt-space-3);
  inset-inline-end: var(--dt-space-3);
  padding: 0.2rem 0.55rem;
  border-radius: var(--dt-radius-xs);
  background: rgb(4 30 40 / 0.75);
  color: #fff;
  font-size: 0.68rem;
  font-weight: var(--dt-fw-semibold);
}
.vc__soon[data-v-dd66e7b4] {
  background: rgb(255 255 255 / 0.9);
  color: var(--dt-navy-700);
}
.vc__body[data-v-dd66e7b4] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--dt-space-4) var(--dt-space-5) var(--dt-space-5);
  flex: 1;
}
.vc__service[data-v-dd66e7b4] {
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-50);
  color: var(--dt-teal-700);
  font-size: 0.68rem;
  font-weight: var(--dt-fw-semibold);
}
.vc__title[data-v-dd66e7b4] {
  font-weight: var(--dt-fw-bold);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-snug);
}
.vc__quote[data-v-dd66e7b4] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
}
.vc__meta[data-v-dd66e7b4] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: var(--dt-space-3);
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.vc__meta--pending[data-v-dd66e7b4] {
  color: var(--dt-muted-soft);
}
.vc__customer[data-v-dd66e7b4] {
  font-weight: var(--dt-fw-medium);
  color: var(--dt-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
.vc[data-v-dd66e7b4],
  .vc__media img[data-v-dd66e7b4],
  .vc__play[data-v-dd66e7b4] {
    transition: none;
}
.vc[data-v-dd66e7b4]:hover {
    transform: none;
}
.vc:hover .vc__media img[data-v-dd66e7b4] {
    transform: none;
}
.vc:hover .vc__play[data-v-dd66e7b4] {
    transform: translate(50%, -50%);
}
}

.vm[data-v-5b75951d] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-4);
}
.vm__stage[data-v-5b75951d] {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--dt-radius-lg);
  overflow: hidden;
  background: var(--dt-navy-900);
}
.vm__player[data-v-5b75951d] {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
  background: var(--dt-navy-900);
}

/* ---------- pending state ---------- */
.vm__pending[data-v-5b75951d] {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.vm__pending-bg[data-v-5b75951d] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(0.7);
  opacity: 0.35;
}
.vm__pending-inner[data-v-5b75951d] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-space-3);
  padding: var(--dt-space-6);
  text-align: center;
  color: #fff;
  max-width: 42ch;
}
.vm__pending-icon[data-v-5b75951d] {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--dt-radius-pill);
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.24);
}
.vm__pending-inner h3[data-v-5b75951d] {
  font-size: var(--dt-fs-h3);
}
.vm__pending-inner p[data-v-5b75951d] {
  font-size: var(--dt-fs-sm);
  color: rgb(255 255 255 / 0.8);
  line-height: var(--dt-lh-snug);
}

/* ---------- quote ---------- */
.vm__quote[data-v-5b75951d] {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-3);
  padding: var(--dt-space-4);
  border-radius: var(--dt-radius-md);
  background: var(--dt-grad-mint);
  border: 1px solid var(--dt-teal-100);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-snug);
}
.vm__quote[data-v-5b75951d] svg {
  flex: none;
  color: var(--dt-teal-300);
  fill: currentColor;
  stroke: none;
}
.vm__customer[data-v-5b75951d] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.35rem;
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}

.vg--dark[data-v-3789c85a] {
  background: var(--dt-grad-deep);
}
.vg--sunken[data-v-3789c85a] {
  background: var(--dt-surface-sunken);
}
.vg__filters[data-v-3789c85a] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dt-space-2);
  margin-block-end: var(--dt-space-6);
}
.vg__filter[data-v-3789c85a] {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--dt-radius-pill);
  border: 1.5px solid var(--dt-line);
  background: var(--dt-surface);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-ink-soft);
  transition:
    border-color var(--dt-dur-2) var(--dt-ease-out),
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.vg__filter[data-v-3789c85a]:hover {
  border-color: var(--dt-teal-300);
  color: var(--dt-teal-700);
}
.vg__filter--on[data-v-3789c85a] {
  background: var(--dt-grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--dt-shadow-teal);
}
.vg--dark .vg__filter[data-v-3789c85a] {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.8);
}
.vg--dark .vg__filter--on[data-v-3789c85a] {
  background: #fff;
  color: var(--dt-teal-700);
}
.vg__notice[data-v-3789c85a] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-block-end: var(--dt-space-5);
  padding: var(--dt-space-3) var(--dt-space-4);
  border-radius: var(--dt-radius-md);
  background: var(--dt-teal-50);
  color: var(--dt-teal-800);
  font-size: var(--dt-fs-xs);
  text-align: center;
}
.vg__notice[data-v-3789c85a] svg {
  flex: none;
  color: var(--dt-teal-600);
}
.vg--dark .vg__notice[data-v-3789c85a] {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.85);
}
.vg--dark .vg__notice[data-v-3789c85a] svg {
  color: var(--dt-teal-300);
}
.vg__grid[data-v-3789c85a] {
  display: grid;
  gap: var(--dt-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.vg__grid > li[data-v-3789c85a] {
  min-width: 0;
}
.vg__more[data-v-3789c85a] {
  display: flex;
  justify-content: center;
  margin-block-start: var(--dt-space-6);
}
@media (min-width: 1100px) {
.vg__grid[data-v-3789c85a] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

/**
 * On phones the gallery becomes a single swipeable row instead of a stacked
 * grid: eight full-width cards made the home page enormous, and the filter
 * chips alone wrapped onto four lines. Both turn into horizontal rails that
 * bleed to the screen edge so it's obvious there's more to swipe to.
 */
@media (max-width: 767px) {
.vg__filters[data-v-3789c85a] {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--dt-gutter) * -1);
    padding-inline: var(--dt-gutter);
    margin-block-end: var(--dt-space-5);
}
.vg__filters[data-v-3789c85a]::-webkit-scrollbar,
  .vg__grid[data-v-3789c85a]::-webkit-scrollbar {
    display: none;
}
.vg__filter[data-v-3789c85a] {
    flex: 0 0 auto;
}
.vg__grid[data-v-3789c85a] {
    display: flex;
    gap: var(--dt-space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--dt-gutter) * -1);
    padding-inline: var(--dt-gutter);
    padding-block-end: var(--dt-space-2);
}
.vg__grid > li[data-v-3789c85a] {
    flex: 0 0 auto;
    width: min(78vw, 300px);
    scroll-snap-align: start;
}
}
.vg__rail-item[data-v-3789c85a] {
  width: min(84vw, 330px);
}
.vg__controls[data-v-3789c85a] {
  margin-block-start: var(--dt-space-5);
}