/* אופציה B — פאנלים צבעוניים עם פורטרט מונוכרום ברקע ודמות בצבע מלא שפורצת החוצה (לפי "השראת עיצוב 2") */
.s2b { background: var(--paper); }
.s2b .num { color: var(--pink-deep); }

.s2b__intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 6vw, 100px); align-items: center; }

/* פאנל */
.panel { position: relative; margin: 0; --h: clamp(470px, 42vw, 580px); }
.panel__box {
  position: relative; height: var(--h); overflow: hidden; border-radius: 6px;
  background: var(--c); isolation: isolate;
}
.panel__bg {
  position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 40%;
  mix-blend-mode: multiply; opacity: .5; filter: grayscale(1) contrast(1.1);
}
.panel__name {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center; z-index: 1;
  font-family: "Polin Condensed", var(--sans); font-weight: 900; line-height: .85; letter-spacing: -.01em;
  font-size: clamp(76px, 8vw, 118px); color: var(--nc);
}
.panel__name .ch { display: inline-block; }
.panel__cut {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--h) * .1 + 40px); height: calc(var(--h) * .9); width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 24px rgba(40, 30, 30, .22));
}
.panel--liron .panel__cut { top: calc(var(--h) * .12); height: calc(var(--h) * .88); left: 46%; }
.panel__cap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 58px; text-align: center; }
.panel--liron .panel__cap { margin-top: 22px; }
.panel__cap b { font-size: clamp(19px, 1.5vw, 22px); font-weight: 400; color: var(--ink-soft); }
.panel__cap .panel__who { font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; color: var(--ink); line-height: 1.15; }
.panel__cap .hand { font-size: clamp(25px, 2vw, 30px); color: var(--pink-deep); margin-top: -20px; } /* הגופן בכתב יד יושב נמוך בשורה — מקרבים אותו להגדרה כדי שייראה כבלוק אחד */
.panel:hover .panel__box { transform: rotate(-1.2deg); transition: transform .5s var(--ease-spring); }
.panel__box { transition: transform .5s var(--ease-spring); }

.s2b__team { margin-top: clamp(110px, 12vw, 170px); }
.s2b__team .s2-intro { text-align: center; max-width: 820px; margin-inline: auto; }
.s2b__team .s2-intro.hand { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.25; } /* כתב יד צריך להיות גדול יותר כדי להיקרא */
.s2b__meet { display: inline-block; font-size: 1.7em; color: var(--pink-deep); transform: rotate(-4deg) translateY(4px); margin-right: 6px; }
.s2b__panels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); max-width: 900px; margin: clamp(50px, 6vw, 80px) auto 0; }
.panel--liron { margin-top: 80px; }

@media (max-width: 860px) {
  .s2b__intro { grid-template-columns: 1fr; }
  .panel--liat { width: min(420px, 100%); margin: 30px auto 0; }
  .s2b__panels { grid-template-columns: 1fr; gap: 60px; max-width: 420px; }
  .panel--liron { margin-top: 0; }
  .panel { --h: 500px; }
}

/* ליאת: הרקע הוא התמונה המקורית המלאה, ממוקמת כך שליאת שבתמונה יושבת בדיוק מתחת לחיתוך.
   כך המכון בפרופורציה האמיתית ואין שום "חור" או טשטוש מאחוריה.
   (חיתוך הדמות החדש נרשם מול התמונה המקורית — התאמה 0.988: בתמונת הרקע 1600px הדמות בגובה 1006.2px, מתחילה ב-214.6px, מרכזה ב-794.4px) */
.panel--liat .panel__bg {
  inset: auto; object-fit: fill; height: auto;
  width: calc(var(--h) * 1.43112);
  top: calc(var(--h) * .1 + 40px - var(--h) * .19195);
  left: calc(50% - var(--h) * .71055);
}
.panel--liat:hover .panel__box, .panel--liron:hover .panel__box { transform: none; } /* בלי הטיה: אצל ליאת — כדי שהרקע יישאר מיושר לדמות; אצל לירון — כדי שקו המותניים יישאר צמוד לתחתית */