/* ===========================================================
   about.css — Section 2 "מי זה שי קלך / ערכים של פעם"
   Figma frame 2010:3 — canvas y 1006..2212 → section 1920×1206
   local_y = canvas_y - 1006
   =========================================================== */
.about {
  position: relative;
  width: 100vw;
  max-width: 100%;
  /* section height + top spacer (breathing room from the HERO above) */
  height: calc(100vw * (1330 + 60) / 1920);
  background: var(--white);
  overflow: hidden;
}
.about__stage {
  position: absolute;
  top: calc(100vw * 60 / 1920);   /* top spacer below HERO — was cancelled by a duplicate `top:0` rule */
  left: 0;
  width: 1920px;
  height: 1330px;
  transform: scale(calc(100vw / 1920px));
  transform-origin: top left;
}
.about__stage > *, .value-row > * { position: absolute; }
.value-row { position: relative; display: block; width: 526px; height: 124px; }

/* --- Title + intro bubble --- */
.about__title {
  left: 378px; top: 8px; width: 1164px;
  text-align: center;
  font-family: var(--font-display); font-weight: var(--w-bold);
  color: var(--navy); font-size: 100px; line-height: 90px;
}
.about__pointer {
  left: 920px; top: 119px; width: 79px; height: 79px;
  color: var(--blue-100);
}
.about__pointer svg, .about__pointer img { width: 100%; height: 100%; }
.about__intro-box {
  left: 379px; top: 154px; width: 1162px; height: 135px;
  background: var(--blue-100); border-radius: 4px;
}
.about__intro {
  left: 379px; top: 188px; width: 1162px;
  text-align: center;
  font-family: var(--font-body); color: var(--navy);
  font-size: 27px; line-height: 36px;   /* normalized 24→27 to match about__bio body size (2026-07-02) */
}

/* --- "מי זה שי קלך" eyebrow + heading --- */
.about__eyebrow {
  left: 776px; top: 40px; width: 125px; height: 38px;
  background: var(--blue-100); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--w-bold);
  color: var(--navy); font-size: 28px; line-height: 32px; letter-spacing: 1.12px;
}
.about__heading {
  right: 1016px; top: 89px; width: 612px;
  text-align: right;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 100px; line-height: 100px;
}
/* bio + value-rows flow together in one block (bio grows → rows push down, no overlap) */
.about__bioblock { right: 1016px; top: 303px; width: 526px; text-align: right; }
.about__bio {
  position: static; width: 525px;
  text-align: right;
  font-family: var(--font-body); color: var(--navy);
  font-size: 27px; line-height: 36px;
}
.about__bio strong { font-weight: var(--w-bold); }
.about__bio p { margin: 0; }   /* WYSIWYG wrapper */
.about__values { margin-top: 40px; display: flex; flex-direction: column; gap: 11px; }

/* --- Portrait with quote overlay --- */
.about__portrait {
  left: 975.5px; top: 40px; width: 565.5px; height: 832px;
  border-radius: 6px; overflow: hidden;
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.about__portrait::after {       /* bottom navy gradient */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(12,29,55,0) 0%, var(--navy-deep) 100%);
}
.about__pq-name {
  right: 406px; top: 709px;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--white); font-size: 60px; line-height: 58px; z-index: 2;
}
.about__pq-quote {
  right: 406px; top: 746px; width: 510px;
  text-align: right;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: #DAEFF9; font-size: 58px; line-height: 100px; z-index: 2;   /* Figma exact */
}

/* --- Three value rows (flow inside .about__values; positioned relative to each row) --- */
.value-row__bg {
  inset: 0; border-radius: 4px;
  background: linear-gradient(to right, rgba(218,239,249,0) 0%, var(--blue-100) 100%);
}
.value-row__text {
  right: 110px; left: auto; top: 50%; transform: translateY(-50%);
  text-align: right;
}
.value-row__title {
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 46px; line-height: 48px; white-space: nowrap;
}
.value-row__body { display: none; }   /* 2026 redesign: no body text under the title */
.value-row__icon { right: 22px; left: auto; top: 50%; transform: translateY(-50%); color: var(--navy); }
.value-row__icon img, .value-row__icon svg { width: 100%; height: 100%; }
/* Lottie icon (position 3) — container fills the icon wrapper; lottie svg is centered/contained */
.value-row__icon--lottie { display: block; }
.pj-lottie { display: block; width: 100%; height: 100%; }
.pj-lottie svg { display: block; width: 100% !important; height: 100% !important; }

/* Figma comment: "animate lottie icons" — Lottie JSON not provided (Dropbox);
   tasteful CSS fallback: gentle continuous float + a "pinch" pop when scrolled in / on hover. */
.value-row__icon img { transform-origin: center; transition: transform .25s ease; }
.value-row__icon.is-in img { animation: icon-float 3.6s ease-in-out infinite; animation-delay: var(--icon-delay, 0s); }
.value-row__icon:hover img { transform: scale(1.12) rotate(-4deg); }
@keyframes icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .value-row__icon.is-in img { animation: none; }
}

/* per-row icon sizes (positions are handled by the shared flow rules above) */
.value-row--1 .value-row__icon { width: 72px; height: 72px; }
.value-row--2 .value-row__icon { width: 64px; height: 64px; }
.value-row--3 .value-row__icon { width: 76px; height: 76px; }

/* ===== ABOUT split: top part (title+intro) above VISION2, bottom part (who-is-shai) below ===== */
.about-top { height: calc(100vw * 330 / 1920); }
.about-top .about__stage { height: 330px; top: calc(100vw * 30 / 1920); }
.about-bottom { height: calc(100vw * 924 / 1920); }
.about-bottom .about__stage { height: 924px; top: 0; }

/* eyebrow "מי זה שי קלך" removed 2026-07-01 → pull the right column up to close the gap */
.about-bottom .about__heading  { top: 45px; }
.about-bottom .about__bioblock { top: 259px; }