/* ===== Video Testimonials (stylish carousel + lightbox) ===== */
.vt-section {
  --vt-red: #ee3d25;
  --vt-navy: #233058;
  position: relative;
  /* Light band — breaks navy work sections above/below */
  background:
    radial-gradient(70% 80% at 8% 0%, rgba(238, 61, 37, 0.07), transparent 55%),
    radial-gradient(55% 70% at 100% 100%, rgba(35, 48, 88, 0.06), transparent 60%),
    linear-gradient(180deg, #f7f7f8 0%, #f0f1f4 100%);
  background-color: #f7f7f8;
  color: var(--vt-navy);
  padding: 6.25vw 0 6.94vw;
  overflow: hidden;
  isolation: isolate;
}
/* soft dotted wash on light base */
.vt-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(rgba(35, 48, 88, 0.07) 0.07vw, transparent 0.09vw) 0 0 / 1.6vw 1.6vw;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
  opacity: 0.9;
}
.vt-section .container { position: relative; z-index: 1; }

/* header: exact home .tech-* sizes (so About / other pages match Home) */
.vt-section .tech-eyebrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  width: 100%;
  margin: 0 0 1.1vw;
  text-align: center;
  font-family: "Geometria", sans-serif;
  font-weight: 700;
  font-size: 1.2vw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b5b5b3;
}
.vt-section .tech-eyebrow:before,
.vt-section .tech-eyebrow:after {
  content: "";
  display: block;
  flex: 1 1 0;
  height: 1px;
  min-width: 2vw;
}
.vt-section .tech-eyebrow:before {
  background: linear-gradient(90deg, transparent, rgba(10, 8, 3, 0.16));
}
.vt-section .tech-eyebrow:after {
  background: linear-gradient(90deg, rgba(10, 8, 3, 0.16), transparent);
}
.vt-section .tech-eyebrow-line {
  display: none !important;
}
.vt-section .tech-head-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-gap: 1.2vw;
  gap: 1.2vw;
  margin-bottom: 2.8vw;
}
.vt-section .tech-h2 {
  font-family: "Geometria", sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.85vw !important;
  line-height: 112% !important;
  letter-spacing: -0.01em !important;
  color: #EE3D25 !important;
  max-width: 56vw;
  margin: 0 auto !important;
  text-align: center !important;
}
.vt-section .tech-h2 b {
  font-weight: 700 !important;
  color: #233058 !important;
}
.vt-section .tech-desc {
  font-family: "Raleway", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.98vw !important;
  line-height: 160% !important;
  color: #54524f !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100%;
  white-space: nowrap;
}
@media (min-width: 769px) {
  .vt-section .container { max-width: 83.62269vw; }
}
@media (max-width: 768px) {
  .vt-section .tech-eyebrow {
    font-size: 4vw;
    gap: 3vw;
  }
  .vt-section .tech-head-row {
    grid-gap: 4vw;
    gap: 4vw;
  }
  .vt-section .tech-h2 {
    font-size: 8.2vw !important;
    max-width: 100%;
  }
  .vt-section .tech-desc {
    white-space: normal;
    max-width: 92% !important;
    font-size: 3.6vw !important;
  }
}

/* slider */
.vt-slider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 2.4vw 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vt-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1.8vw;
  padding: 0 4vw;
  animation: vt-slide 36s linear infinite;
  will-change: transform;
}
.vt-slider:hover .vt-track { animation-play-state: paused; }
@keyframes vt-slide { to { transform: translate3d(-33.3333%, 0, 0); } }

/* card: gradient frame, staggered up/down rhythm */
.vt-card {
  position: relative;
  flex-shrink: 0;
  height: 27vw;
  border-radius: 1.4vw;
  padding: 0.14vw;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 40%, rgba(238, 61, 37, 0.5));
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s, filter 0.45s;
  box-shadow: 0 1vw 2.2vw rgba(35, 48, 88, 0.14);
  outline: none;
}
.vt-card.vt-up { transform: translateY(-1.1vw); }
.vt-card.vt-down { transform: translateY(1.1vw); }
.vt-card-in {
  position: relative;
  height: 100%;
  border-radius: 1.28vw;
  overflow: hidden;
  background: #14120e;
}
.vt-card video {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* fade the siblings a little when one is hovered */
.vt-track:hover .vt-card:not(:hover) { filter: brightness(0.6) saturate(0.8); }
.vt-card:hover,
.vt-card:focus-visible {
  transform: translateY(-1.8vw) scale(1.04);
  box-shadow: 0 2vw 4vw rgba(238, 61, 37, 0.35), 0 0 0 1px rgba(238, 61, 37, 0.7);
  background: linear-gradient(160deg, #ee3d25, rgba(255, 138, 92, 0.6) 50%, #ee3d25);
  z-index: 2;
}
.vt-card:hover video { transform: scale(1.06); }

.vt-quote {
  position: absolute;
  top: 1vw; left: 1vw;
  width: 2.3vw; height: 2.3vw;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 8, 3, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.vt-quote svg { width: 1vw; height: 1vw; }

.vt-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 4.4vw; height: 4.4vw;
  margin: -2.2vw 0 0 -2.2vw;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vt-red);
  box-shadow: 0 0.8vw 2vw rgba(238, 61, 37, 0.55);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.vt-play::after {
  content: ""; position: absolute; inset: -0.5vw; border-radius: 50%;
  border: 1px solid rgba(238, 61, 37, 0.7);
  animation: vt-ring 1.6s ease-out infinite;
}
@keyframes vt-ring { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vt-play svg { width: 1.5vw; height: 1.5vw; margin-left: 0.2vw; }
.vt-card:hover .vt-play, .vt-card:focus-visible .vt-play { opacity: 1; transform: scale(1); }

.vt-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4vw 1.2vw 1.1vw;
  background: linear-gradient(to top, rgba(10, 8, 3, 0.95), rgba(10, 8, 3, 0.55) 55%, rgba(10, 8, 3, 0));
  pointer-events: none;
}
.vt-caption::before {
  content: ""; display: block;
  width: 1.8vw; height: 0.2vw; border-radius: 1vw;
  background: var(--vt-red);
  margin-bottom: 0.65vw;
  transition: width 0.45s;
}
.vt-card:hover .vt-caption::before { width: 3.4vw; }
.vt-caption p {
  margin: 0;
  font-family: "Geometria", sans-serif;
  font-weight: 700;
  font-size: 1.1vw;
  color: #fff;
}
.vt-caption span {
  display: block;
  margin-top: 0.25vw;
  font-family: Raleway, sans-serif;
  font-weight: 500;
  font-size: 0.8vw;
  color: rgba(255, 255, 255, 0.7);
}

/* lightbox */
.vt-modal {
  position: fixed; inset: 0;
  z-index: 2147483100;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 5, 2, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s;
}
.vt-modal.open { display: flex; }
.vt-modal.show { opacity: 1; }
.vt-modal-box {
  position: relative;
  height: min(86vh, 52vw);
  border-radius: 1.4vw;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(238, 61, 37, 0.6), 0 3vw 8vw rgba(238, 61, 37, 0.3);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  background: #000;
}
.vt-modal.show .vt-modal-box { transform: scale(1); }
.vt-modal video { display: block; height: 100%; width: auto; max-width: 92vw; }
.vt-modal.wide .vt-modal-box { height: auto; }
.vt-modal.wide video { height: auto; width: min(80vw, calc(86vh * 1.7778)); max-width: 92vw; }
.vt-modal-close {
  position: absolute; top: 1.6vw; right: 1.8vw;
  width: 3vw; height: 3vw; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 1.5vw; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.vt-modal-close:hover { background: #ee3d25; transform: rotate(90deg); }

@media (max-width: 768px) {
  .vt-section { padding: 12vw 0 14vw; }
  .vt-slider { padding: 7vw 0; }
  .vt-track { gap: 4vw; padding: 0 6vw; animation-duration: 22s; }
  .vt-card { height: 78vw; border-radius: 4vw; padding: 0.4vw; }
  .vt-card.vt-up { transform: translateY(-2.5vw); }
  .vt-card.vt-down { transform: translateY(2.5vw); }
  .vt-card-in { border-radius: 3.6vw; }
  .vt-card:hover { transform: none; }
  .vt-quote { width: 8vw; height: 8vw; top: 3vw; left: 3vw; }
  .vt-quote svg { width: 3.4vw; height: 3.4vw; }
  .vt-play { width: 14vw; height: 14vw; margin: -7vw 0 0 -7vw; opacity: 1; transform: none; }
  .vt-play svg { width: 5vw; height: 5vw; }
  .vt-caption { padding: 12vw 4vw 4vw; }
  .vt-caption::before { width: 7vw; height: 0.7vw; margin-bottom: 2vw; }
  .vt-caption p { font-size: 4vw; }
  .vt-caption span { font-size: 3vw; margin-top: 0.8vw; }
  .vt-modal-box { height: 78vh; border-radius: 4vw; }
  .vt-modal-close { width: 10vw; height: 10vw; font-size: 5vw; top: 4vw; right: 4vw; }
}
@media (max-width: 768px) {
  .vt-modal.wide video { width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-track, .vt-hint i, .vt-play::after { animation: none; }
}