/*=====================================================*/
/*  VERSA AI OPSENGINE™ — page styles                  */
/*  Depends on assets/css/ai/common.css                */
/*=====================================================*/

/*----------------------------*/
/* WHAT YOU'LL DISCOVER STRIP */
/*----------------------------*/
/* Was a flat ink strip wedged between the ink hero and the ink ticker. Now a
   proper numbered section further down the page, once the reader has met the
   Digital Workforce and a roadmap actually earns its place. */
.ops-discover {
  border-top: 1px solid var(--ai-line);
}

/* The "What You'll Learn" panel mirrors the same block on the
   Versa AI Approach page so the hub reads as one consistent journey. */
.ops-discover__panel {
  max-width: 860px;
  margin: 0 auto;
}

/*----------------------------*/
/* MEET YOUR WORKFORCE        */
/*----------------------------*/
.ops-workforce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 64px;
}

.ops-workforce__media {
  position: relative;
  margin: 0;
}

.ops-workforce__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--ai-line);
  box-shadow: 0 30px 60px rgba(20, 20, 20, 0.12);
}

.ops-workforce__media figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ai-ink);
}

.ops-workforce__media figcaption i,
.ops-workforce__media figcaption svg {
  width: 20px;
  height: 20px;
  color: var(--ai-primary);
  stroke-width: 2.2;
  flex-shrink: 0;
}

.ops-workforce__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.ops-workforce__copy h2 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ai-ink);
}

.ops-workforce__copy>p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.ops-knowledge {
  margin: 2px 0 6px;
}

.ops-knowledge li i,
.ops-knowledge li svg {
  width: 14px;
  height: 14px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

/*----------------------------*/
/* JOURNEY STAGE CARDS        */
/*----------------------------*/
.ops-stage {
  gap: 12px;
}

.ops-stage__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-stage__top .ai-index {
  font-size: 14px;
}

.ops-stage__tagline {
  font-family: var(--ai-heading);
  font-size: 14px !important;
  font-weight: 700;
  color: var(--ai-primary-deep) !important;
}

.ops-stage .ai-tags {
  margin: 4px 0 10px;
}

/*----------------------------*/
/* ADVISOR SPACING            */
/*----------------------------*/
.ops-advisor {
  margin-top: 56px;
}

/*----------------------------*/
/* LIFECYCLE REEL             */
/* Slot-machine heading: one  */
/* word centred, neighbours   */
/* faded, stepping in a loop. */
/*----------------------------*/
.ops-reel {
  /* Row height drives everything else, in em so it tracks the clamped
     heading size without any JS. */
  --reel-h: 1.3em;
  --reel-dur: 12s;
  --reel-dim: 0.15;
}

.ops-reel__window {
  display: block;
  height: calc(3 * var(--reel-h));
  overflow: hidden;
  /* Only softens the outer edges of the window — the centred row sits between
     33% and 67%, so it is never touched by this. Per-word opacity below does
     the actual dimming, which keeps each word evenly lit instead of shaded
     across its own height. */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 17%,
      #000 83%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 17%,
      #000 83%,
      transparent 100%);
}

.ops-reel__track {
  display: block;
  animation: ops-reel-roll var(--reel-dur) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

.ops-reel__item {
  display: block;
  height: var(--reel-h);
  line-height: var(--reel-h);
  opacity: var(--reel-dim);
  animation: ops-reel-focus var(--reel-dur) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

/* Each word is lit for the step it spends in the centre. Negative delays
   offset every word by one step (a fifth of the cycle); the padding copies
   share the phase of the word they duplicate. */
.ops-reel__item:nth-child(2),
.ops-reel__item:nth-child(7) {
  animation-delay: 0s;
}

.ops-reel__item:nth-child(3),
.ops-reel__item:nth-child(8) {
  animation-delay: calc(var(--reel-dur) * -0.8);
}

.ops-reel__item:nth-child(4) {
  animation-delay: calc(var(--reel-dur) * -0.6);
}

.ops-reel__item:nth-child(5) {
  animation-delay: calc(var(--reel-dur) * -0.4);
}

.ops-reel__item:nth-child(1),
.ops-reel__item:nth-child(6) {
  animation-delay: calc(var(--reel-dur) * -0.2);
}

/* Lit while centred, dimmed the rest of the cycle. The crossfades line up
   with the 16%-20% window where the reel is actually moving. */
@keyframes ops-reel-focus {

  0%,
  16% {
    opacity: 1;
  }

  20%,
  96% {
    opacity: var(--reel-dim);
  }

  100% {
    opacity: 1;
  }
}

/* Each word holds in the centre, then the reel snaps on by one row. The last
   step lands on a repeat of the first word, so restarting is invisible. */
@keyframes ops-reel-roll {

  0%,
  16% {
    transform: translateY(0);
  }

  20%,
  36% {
    transform: translateY(calc(-1 * var(--reel-h)));
  }

  40%,
  56% {
    transform: translateY(calc(-2 * var(--reel-h)));
  }

  60%,
  76% {
    transform: translateY(calc(-3 * var(--reel-h)));
  }

  80%,
  96% {
    transform: translateY(calc(-4 * var(--reel-h)));
  }

  100% {
    transform: translateY(calc(-5 * var(--reel-h)));
  }
}

/* No rolling: drop the padding copies and stack the five words plainly. */
@media (prefers-reduced-motion: reduce) {
  .ops-reel__window {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ops-reel__track {
    animation: none;
    transform: none;
  }

  .ops-reel__item {
    animation: none;
    opacity: 1;
  }

  .ops-reel__item[data-reel-pad] {
    display: none;
  }
}

/*----------------------------*/
/* OPERATIONAL TEAMS GRID     */
/*----------------------------*/
/* Flex rather than grid so a partial last row centres instead of
   left-aligning against empty columns. Needs .ai-page to outrank
   `.ai-page ul { margin: 0 }` in common.css, which was killing the auto
   margins and pinning the list to the left of .ai-wrap. */
.ai-page .ops-teams {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto !important;
}

.ops-teams li {
  display: flex;
  flex: 0 1 calc((100% - 32px) / 3);
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ai-ink);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ops-teams li:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.07);
}

.ops-teams li i,
.ops-teams li svg {
  width: 21px;
  height: 21px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
  flex-shrink: 0;
}

/*----------------------------*/
/* DEFINITION + WHY CHOOSE    */
/*----------------------------*/
.ops-definition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Both titles reserve two lines so the copy under them starts level,
   whatever each title's length. */
.ops-definition__card h2,
.ops-definition__why h3 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  min-height: 2.3em;
}

.ops-definition__card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7 !important;
}

.ops-definition__why .ai-checklist {
  width: 100%;
  margin-top: 6px;
}

.ops-definition__why .ai-checklist li {
  font-size: 14.5px;
}

/*----------------------------*/
/* RESPONSIVE                 */
/*----------------------------*/
@media (max-width: 1023px) {
  .ops-workforce {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ops-workforce__media {
    order: 2;
    max-width: 560px;
  }

  .ops-teams li {
    flex-basis: calc((100% - 16px) / 2);
  }

  .ops-definition {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 767px) {
  .ops-teams li {
    flex-basis: 100%;
  }


}