/* NDIGIT v2 · נדל״ן (VISION, WING 612). נשען על case.css ו־work-campaigns.css (cp-*).
   כלל: תמונות באותה שורה באותו גובה, בלי חיתוך. כל הריבועים 1:1 וכל המוקאפים 3:2, אז אין object-fit */
.re-intro { max-width: 820px; margin: 56px 0 28px; font: 700 clamp(22px, 2vw, 30px)/1.4 var(--text); }
.re-cd { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-bottom: 72px; }
.re-cd > div { padding-top: 20px; border-top: 1px solid var(--line); }
.re-cd .cs-h3 { margin: 6px 0 12px; }

.re-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.re-film { aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #0b0b0a; }
.re-film video { display: block; width: 100%; height: 100%; object-fit: contain; }

.re-grid { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.re-grid + .re-grid { margin-top: 14px; }
.re-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.re-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.re-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.re-grid img { display: block; width: 100%; height: auto; border-radius: 14px; }
.re-grid figure { margin: 0; }
.re-grid figcaption { margin-top: 8px; font: 700 14px/1.4 var(--text); color: var(--soft); }
.re-proof { margin-top: 0; }

@media (max-width: 760px) {
  .re-intro { margin: 40px 0 24px; }
  .re-cd { grid-template-columns: 1fr; margin-bottom: 48px; }
  .re-feature { grid-template-columns: 1fr; gap: 24px; }
  .re-grid, .re-grid + .re-grid { gap: 8px; }
  .re-grid + .re-grid { margin-top: 8px; }
  .re-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-3.re-mocks, .re-2.re-mocks { grid-template-columns: 1fr; }
  .re-grid img { border-radius: 10px; }
}

/* ---------- רקע לכל פרויקט (נתי): VISION חם־ירקרק, WING כחול־אפור מסחרי ---------- */
.re-vision { background: #1d2118; }
.re-wing { background: #171d22; }
.re-vision .cp-client, .re-vision .re-cd > div { border-color: #353b2a; }
.re-wing .cp-client, .re-wing .re-cd > div { border-color: #2a343c; }

/* ---------- VISION: במת היבטים. לוחצים על היבט, והפוסט שמוביל אותו עולה לבמה ---------- */
.re-asp { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 72px; }
.re-alist { display: grid; gap: 8px; }
.re-a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: baseline; min-height: 44px; padding: 16px 18px; border: 1px solid #353b2a; border-radius: 16px; background: none; color: var(--soft); text-align: right; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.re-a b { font: 700 clamp(22px, 2vw, 30px)/1.1 var(--display); color: var(--bone); }
.re-a small { grid-column: 2; margin-top: 6px; font: 400 15px/1.5 var(--text); }
.re-an { grid-row: 1 / 3; font: 400 18px/1 Anton, sans-serif; color: var(--lime); direction: ltr; }
.re-a[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: #0b0b0a; }
.re-a[aria-selected="true"] b, .re-a[aria-selected="true"] .re-an { color: #0b0b0a; }
@media (hover: hover) and (pointer: fine) { .re-a:not([aria-selected="true"]):hover { border-color: var(--lime); } }
.re-a:focus-visible, .re-vbtns button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.re-astage, .re-vstage { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.re-astage img, .re-vstage img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.re-astage img.on, .re-vstage img.on { opacity: 1; transform: none; }
.re-more { margin-top: 72px; }

/* ---------- WING: שלוש גרסאות על אותה במה ---------- */
.re-ver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 72px 0 0; }
.re-vbtns { display: flex; gap: 8px; margin-top: 24px; }
.re-vbtns button { min-height: 44px; padding: 0 20px; border: 1px solid #2a343c; border-radius: 99px; background: none; color: var(--bone); font: 700 15px/1 var(--text); cursor: pointer; }
.re-vbtns button[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: #0b0b0a; }

/* ---------- מוקאפים: עולים אחד אחרי השני בגלילה ---------- */
.re-rise.js figure { opacity: 0; transform: translateY(40px); transition: opacity .7s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.re-rise.js figure:nth-child(2) { transition-delay: .12s; } .re-rise.js figure:nth-child(3) { transition-delay: .24s; } .re-rise.js figure:nth-child(4) { transition-delay: .36s; }
.re-rise.in figure { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .re-asp, .re-ver { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .re-a { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .re-astage img, .re-vstage img, .re-rise.js figure { transition: none; transform: none; } }

/* נתי: פחות מלל ברצף. הבמה באה מיד אחרי הכותרת, והאתגר וההחלטה הם פס קומפקטי אחד "מ־ ← ל־" אחריה */
.re-asp, .re-proof { margin-top: 48px; }
.re-ft { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 72px; padding: 24px 28px; border-radius: 18px; background: rgba(255,255,255,.04); }
.re-ft b { display: block; margin-top: 6px; font: 700 clamp(22px, 2vw, 30px)/1.1 var(--display); }
.re-ft p:not(.cs-k) { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--soft); }
.re-arrow { align-self: center; font: 700 28px/1 var(--text); color: var(--lime); }
@media (max-width: 760px) { .re-ft { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; padding: 18px; } .re-arrow { transform: rotate(-90deg); justify-self: start; } }

/* נתי: תמונת הפתיחה נחתכה. שני המוקאפים ב־3:2, אז המסגרת ב־3:2, ולא נכנסת מתחת לפס הפרקים */
.re .cs-cover.rot { aspect-ratio: 3 / 2; margin-bottom: 0; border-radius: 20px; }
.re .cs-cover.rot .rs img { object-fit: contain; }

/* נתי: הסרטון באמצע, הכותרת מימין וההסבר משמאל, ורווח מהפתיחה */
.re-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; margin-top: 72px; }
.re-fl { margin: 0; align-self: end; }
@media (max-width: 760px) { .re-feature { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; } }