/* ==========================================================================
   VC ABOUT STORY
   Story-driven About page: chapter kickers, golden scroll thread, word
   cascades, hover-expanding team/value/approach cards.
   Loads with vc-cinematic-headers.css (shared sheen/divider system).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Golden thread — fixed scroll-progress line down the story
   -------------------------------------------------------------------------- */
.vc-thread {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(14px, calc((100vw - 1200px) / 2 - 52px));
  width: 2px;
  z-index: 5;
  pointer-events: none;
  background: rgba(255, 248, 230, 0.08);
}

.vc-thread span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f6d166, var(--cream, #FFF8E6) 50%, #d4a51d);
  box-shadow: 0 0 12px rgba(246, 209, 102, 0.45);
  transform: scaleY(0);
  transform-origin: top;
}

@media (max-width: 900px) {
  .vc-thread {
    left: 7px;
  }
}

/* --------------------------------------------------------------------------
   2. Chapter kickers — decorative labels above section headers
   -------------------------------------------------------------------------- */
.about-page .vc-header-stage[data-vc-kicker]::before {
  content: attr(data-vc-kicker);
  display: block;
  margin-bottom: 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-soft, rgba(255, 248, 230, 0.8));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-page .vc-header-stage.vc-inview[data-vc-kicker]::before,
html:not(.vc-cine-js) .about-page .vc-header-stage[data-vc-kicker]::before {
  opacity: 1;
  transform: none;
}

/* about headers are left-aligned — divider follows */
.about-page .vc-cine-divider {
  justify-content: flex-start;
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   3. Word cascade
   -------------------------------------------------------------------------- */
.vc-words-ready .vc-w {
  display: inline-block;
  transition:
    opacity 550ms ease calc(var(--wi) * 26ms),
    transform 650ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--wi) * 26ms),
    filter 550ms ease calc(var(--wi) * 26ms);
}

.vc-cine-js [data-vc-words].vc-words-ready:not(.vc-inview) .vc-w {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(5px);
}

/* --------------------------------------------------------------------------
   4. Team — hover-expanding member cards ("us" at the bottom of the story)
   -------------------------------------------------------------------------- */
.about-page .team-member {
  position: relative;
  overflow: hidden;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 300ms ease;
}

.about-page .team-member-image {
  overflow: hidden;
}

.about-page .team-member-image img {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-page .team-member .team-bio {
  max-height: 4.7em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  transition: max-height 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .about-page .team-member:hover,
  .about-page .team-member:focus-within {
    border-color: rgba(246, 209, 102, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(246, 209, 102, 0.14);
  }

  .about-page .team-member:hover .team-member-image img,
  .about-page .team-member:focus-within .team-member-image img {
    transform: scale(1.06);
  }

  .about-page .team-member:hover .team-bio,
  .about-page .team-member:focus-within .team-bio {
    max-height: 30em;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* touch devices read the full bio */
@media (hover: none), (max-width: 768px) {
  .about-page .team-member .team-bio {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* staggered team entrance */
.vc-cine-js .about-page .team-section:not(.vc-inview) .team-member {
  opacity: 0;
  transform: translateY(34px);
}

.about-page .team-section .team-member {
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: 700ms, 700ms, 350ms, 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.about-page .team-section .team-member:nth-child(2) { transition-delay: 70ms, 70ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(3) { transition-delay: 140ms, 140ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(4) { transition-delay: 210ms, 210ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(5) { transition-delay: 280ms, 280ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(6) { transition-delay: 350ms, 350ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(7) { transition-delay: 420ms, 420ms, 0ms, 0ms; }
.about-page .team-section .team-member:nth-child(8) { transition-delay: 490ms, 490ms, 0ms, 0ms; }

/* --------------------------------------------------------------------------
   5. Values + journey cards — hover lift & glow
   -------------------------------------------------------------------------- */
.about-page .value-journey-item,
.about-page .journey-card {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease, border-color 250ms ease;
}

@media (hover: hover) {
  .about-page .value-journey-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 24px rgba(246, 209, 102, 0.15);
  }

  .about-page .journey-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4), 0 0 28px rgba(246, 209, 102, 0.12);
  }
}

/* --------------------------------------------------------------------------
   6. Approach steps — hover slide, number fills gold
   -------------------------------------------------------------------------- */
.about-page .approach-steps li {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-page .approach-steps .step-number {
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

@media (hover: hover) {
  .about-page .approach-steps li:hover {
    transform: translateX(8px);
  }

  .about-page .approach-steps li:hover .step-number {
    background: linear-gradient(135deg, #f6d166, #c9961f);
    color: #1a1206;
    box-shadow: 0 0 22px rgba(246, 209, 102, 0.4);
  }
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vc-thread {
    display: none;
  }

  .about-page .vc-header-stage[data-vc-kicker]::before,
  .vc-words-ready .vc-w,
  .about-page .team-member,
  .about-page .team-member-image img,
  .about-page .team-member .team-bio,
  .about-page .value-journey-item,
  .about-page .journey-card,
  .about-page .approach-steps li,
  .about-page .approach-steps .step-number {
    transition: none !important;
  }

  .about-page .vc-header-stage[data-vc-kicker]::before {
    opacity: 1;
    transform: none;
  }

  .vc-cine-js [data-vc-words].vc-words-ready:not(.vc-inview) .vc-w {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .vc-cine-js .about-page .team-section:not(.vc-inview) .team-member {
    opacity: 1;
    transform: none;
  }

  .about-page .team-member .team-bio {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}