/*
  Our Team page (our-team.php) — scoped redesign. Every rule is prefixed
  with .our-team-page so nothing leaks onto other pages; `.team-member`,
  `.team-section` etc. aren't reused elsewhere on the site, but the hero
  gradient/badge pattern and heading-accent-bar ARE shared conventions
  used across the redesigned service/product pages, so this file follows
  the same structure for consistency.

  Concept: the old grid used shared cell borders (border-right-0/
  border-bottom-0 utility classes creating a spreadsheet look — literally
  a checklist-style layout for people, not a team). This redesign gives
  every person their own real card: a photo that comes into full colour
  on hover, a role shown as a tag rather than plain grey text, and a
  persistent (not hover-only, so it stays reachable on touch/keyboard)
  LinkedIn pill.
*/

.our-team-page{--otx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

/* ---------------------------------------------------------------------- */
/* 1) Hero — richer gradient, faint diagonal signal-line texture, eyebrow  */
/*    badge.                                                              */
/* ---------------------------------------------------------------------- */
.our-team-page .main-video-section .video-overlay-main{
  background: linear-gradient(125deg, rgba(8,14,28,.88) 0%, rgba(24,88,202,.60) 55%, rgba(8,14,28,.84) 100%) !important;
  position: absolute;
}
.our-team-page .main-video-section .video-overlay-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  opacity:.6;
}
.our-team-page .main-video-section .container{position:relative;z-index:1;}
.our-team-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family: var(--otx-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.our-team-page .hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4A8AFE;
  box-shadow:0 0 0 4px rgba(74,138,254,.3);
  animation: otxPulse 2.2s ease-in-out infinite;
}
@keyframes otxPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.our-team-page .main-video-section .section-content .title{text-shadow:0 2px 20px rgba(0,0,0,.3);}

/* ---------------------------------------------------------------------- */
/* 2) Intro heading accent bar.                                          */
/* ---------------------------------------------------------------------- */
.our-team-page .heading11 h2{position:relative;padding-top:18px;margin-bottom:16px;}
.our-team-page .heading11 h2::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:46px;height:4px;border-radius:2px;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
}

/* ---------------------------------------------------------------------- */
/* 3) Team grid — flex-basis:19% + shared cell borders replaced with a    */
/*    real CSS grid of gapped, independent cards.                        */
/*                                                                          */
/*    GOTCHA: 15 of the 19 `.team-member` divs still carry the OLD grid's */
/*    `.border-right-0`/`.border-bottom-0` utility classes (from Bootstrap,*/
/*    both declared with `!important`). Since every card now has its own  */
/*    full border on all four sides, those leftover classes would strip   */
/*    the right/bottom border off just those cards, making the grid look  */
/*    inconsistent (some cards missing an edge, breaking the rounded-     */
/*    corner look). Removing the classes from 19 HTML blocks isn't        */
/*    necessary — overriding at higher specificity here is simpler and    */
/*    exactly as reliable.                                                */
/* ---------------------------------------------------------------------- */
.our-team-page .team-section .team-members{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
}
.our-team-page .team-section .team-members .team-member{
  flex-basis:auto;
  background:#fff;
  padding:0;
  border:1px solid var(--vtc-border-border-1);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.our-team-page .team-section .team-members .team-member.border-right-0,
.our-team-page .team-section .team-members .team-member.border-bottom-0{
  border:1px solid var(--vtc-border-border-1) !important;
}
.our-team-page .team-section .team-members .team-member:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 44px -20px rgba(24,88,202,.3);
  border-color:transparent;
}
/* No wrapper divs exist around the photo or the text block in the source
   markup (img/h3/p/a are direct children of `.team-member`) — rather than
   edit all 19 repeated blocks to add wrapper elements, the "photo area"
   and "padded text area" are both achieved by styling the direct children
   themselves (aspect-ratio directly on the <img>; margins instead of a
   padded wrapper on the text). */
.our-team-page .team-section .team-members .team-member img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  margin:0 0 0;
  border-radius:0;
  -o-object-fit:cover;
  object-fit:cover;
  filter:grayscale(45%) saturate(1.05);
  transform:scale(1.001);
  transition:filter .45s ease, transform .5s ease;
}
.our-team-page .team-section .team-members .team-member:hover img{
  filter:grayscale(0%) saturate(1.05);
  transform:scale(1.07);
}
.our-team-page .team-section .team-members .team-member h3{
  font-size:16.5px;
  font-weight:700;
  margin:16px 16px 6px;
  color:var(--vtc-text-heading-text-1);
}
.our-team-page .team-section .team-members .team-member p{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:var(--vtc-bg-main-bg-1);
  background:var(--vtc-bg-main-bg-6);
  padding:4px 11px;
  border-radius:999px;
  margin:0 0 14px 16px;
  line-height:1.5;
}
.our-team-page .team-section .team-members .team-member a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:calc(100% - 32px);
  margin:0 16px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--vtc-bg-main-bg-1);
  border:1.5px solid var(--vtc-bg-main-bg-6);
  border-radius:999px;
  padding:8px 10px;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.our-team-page .team-section .team-members .team-member a:hover{
  text-decoration:none;
  background:var(--vtc-bg-main-bg-1);
  border-color:var(--vtc-bg-main-bg-1);
  color:#fff;
}
.our-team-page .team-section .team-members .team-member a:hover .link-img{filter:brightness(0) invert(1);}
.our-team-page .team-section .team-members .team-member .link-img{width:14px;vertical-align:middle;transition:filter .3s ease;margin-bottom:0 !important;}

@media (max-width:1199px){
  .our-team-page .team-section .team-members{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:991px){
  .our-team-page .team-section .team-members{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:575px){
  .our-team-page .team-section .team-members{grid-template-columns:repeat(2,1fr);gap:16px;}
  .our-team-page .team-section .team-members .team-member .member-body{padding:14px;}
}

@media (prefers-reduced-motion: reduce){
  .our-team-page .hero-badge .dot{animation:none;}
  .our-team-page .team-section .team-members .team-member,
  .our-team-page .team-section .team-members .team-member img,
  .our-team-page .team-section .team-members .team-member a{transition:none;}
  .our-team-page .team-section .team-members .team-member:hover{transform:none;}
}