/* Video testimonials: centre card enlarged, neighbours dimmed */
.vt-section { position: relative; z-index: 1; margin-top: 70px; padding-top: 64px; color: #fff; border-top: 1px solid rgba(255, 255, 255, .12); }
.vt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.vt-tag { display: inline-block; margin-bottom: 12px; padding: 5px 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ff0bd; background: rgba(61, 177, 102, .18); border: 1px solid rgba(159, 240, 189, .35); border-radius: 999px; }
.vt-title { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; line-height: 1.2; color: #fff; }
.vt-title span { background: linear-gradient(90deg, #7fe0a3, #3db166); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7fe0a3; }
.vt-sub { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .75); }
.vt-arrows { display: flex; gap: 12px; flex-shrink: 0; }
.vt-arrow { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; cursor: pointer; transition: background .2s, color .2s; }
.vt-arrow:hover { background: #fff; color: #0b1a33; }
.vt-carousel { max-width: 1120px; margin: 0 auto; padding: 36px 12px 10px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); }
.vt-carousel .owl-stage { display: flex; align-items: center; }
.vt-card { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.3; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: #16243f; cursor: pointer; opacity: .55; transform: scale(.86); transition: transform .5s ease, opacity .5s ease, box-shadow .5s ease, border-color .5s ease; }
.vt-carousel .owl-item.center .vt-card { opacity: 1; transform: scale(1.04); border-color: rgba(127, 224, 163, .85); box-shadow: 0 0 0 3px rgba(61, 177, 102, .28), 0 22px 44px rgba(0, 0, 0, .5); }
.vt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vt-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 14, 30, .95) 0%, rgba(6, 14, 30, .45) 34%, transparent 60%); }
.vt-info { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vt-info strong { font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; }
.vt-info span { align-self: flex-start; margin-top: 4px; padding: 2px 10px; font-size: 12px; font-weight: 600; color: #0b1a33; background: linear-gradient(135deg, #7fe0a3, #3db166); border-radius: 999px; }
.vt-play { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; background: rgba(61, 177, 102, .9); border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; box-shadow: 0 0 0 0 rgba(61, 177, 102, .6); transition: transform .2s; }
.vt-carousel .owl-item.center .vt-play { animation: vt-pulse 2s ease-out infinite; }
@keyframes vt-pulse { 70% { box-shadow: 0 0 0 16px rgba(61, 177, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 177, 102, 0); } }
.vt-card:hover .vt-play { transform: scale(1.12); }
.vt-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 34px; }
.vt-carousel .owl-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: width .3s, background .3s; }
.vt-carousel .owl-dot.active span { width: 30px; border-radius: 6px; background: #fff; }
.vt-modal-content { position: relative; background: #000; border: 0; border-radius: 14px; overflow: hidden; }
.vt-modal-close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .55); cursor: pointer; }
.vt-frame { position: relative; aspect-ratio: 16 / 9; }
.vt-frame iframe, .vt-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767.98px) {
  .vt-section { margin-top: 48px; padding-top: 44px; }
  .vt-head { flex-direction: column; align-items: flex-start; margin-bottom: 26px; }
  .vt-card { border-radius: 14px; transform: scale(.9); }
  .vt-carousel .owl-item.center .vt-card { transform: scale(1); }
  .vt-carousel { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .vt-card { transition: none; } }

/* stage clips overflow: give the scaled centre card room so its edges are never cut */
.vt-carousel .owl-stage-outer { padding: 34px 0 40px; margin: -34px 0 -40px; }
.vt-carousel .owl-item.center { position: relative; z-index: 2; }
.vt-carousel { -webkit-mask-image: none; mask-image: none; }
.vt-carousel { position: relative; }
.vt-card:focus-visible { outline: 3px solid #7fe0a3; outline-offset: 3px; }
.vt-card:not(.is-center-card) { cursor: pointer; }
.vt-hint { margin: 6px 0 0; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.vt-hint i { margin-right: 6px; color: #7fe0a3; }
.vt-card::after { content: "Watch story"; position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%) translateY(6px); padding: 3px 12px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 999px; opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; }
.vt-carousel .owl-item.center .vt-card::after { opacity: 1; transform: translateX(-50%); }
.vt-modal-meta { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; background: #0b1a33; color: #fff; }
.vt-modal-meta strong { font-size: 17px; }
.vt-modal-meta span { font-size: 13.5px; color: #9ff0bd; }
.vt-arrow:focus-visible { outline: 3px solid #7fe0a3; outline-offset: 3px; }
