/* ═══════════════════════════════════════
   ABOUT PAGE — WHO WE ARE (section2)
   Scroll-driven: intro → image grows to full
   screen → company text appears → image blurs.
═══════════════════════════════════════ */

.who-scroll {
  position: relative;
  height: 250vh;            /* scroll length that drives the animation */
  background: var(--bg-primary);
  z-index: 2;
}

.who-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-primary);
}

/* ── Intro (header + lead paragraph) ── */
.who-intro {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(800px, 90%);
  text-align: center;
  will-change: opacity, transform;
}
.who-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-primary-30);
  margin-bottom: 24px;
}
.who-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--text-primary-60);
}

/* ── Growing image ── */
.who-image {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 3;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 50px 110px -50px rgba(15, 37, 67, 0.5);
  will-change: width, height, top, border-radius;
}
.who-image img,
.who-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: filter;
}
.who-tint {
  position: absolute;
  inset: 0;
  background: rgba(8, 17, 28, 0.6);
  opacity: 0;
  will-change: opacity;
}

/* ── Company overlay text ── */
.who-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(980px, 88%);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.who-overlay p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 3.1vw, 44px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .who-lead { font-size: 15px; }
  .who-overlay p { font-size: clamp(20px, 5.5vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .who-image img,
  .who-image video { filter: none !important; }
}