/* NDIGIT v2 · קמפיינים: שני לקוחות, שני עולמות.
   Integralab: פורמט שנמתח בגרירה (פופאפ ← A4 ← באנר) וההיררכיה נשארת. הנגבי: גיליון שרטוט הנדסי, הזמנה בשתי גרסאות, פוסטים עם הערות */

/* ---------- פתיחה: שני חצאים ---------- */
.cp-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
.cp-split img { width: 100%; height: 100%; aspect-ratio: .78; object-fit: cover; border-radius: 0 !important; }
.cp-split figcaption { position: absolute; inset: auto 0 72px; display: flex !important; justify-content: space-around; padding: 0 !important; pointer-events: none; }
.cp-split figcaption span { padding: 7px 12px; border-radius: 99px; background: rgba(11,11,10,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 13px/1 var(--text); letter-spacing: .04em; }

/* ---------- כותרת לקוח ---------- */
.cp-client { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 26px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cp-client .cs-h2 { margin: 0; }
.cp-n { flex-basis: 100%; font: 400 15px/1 Anton, sans-serif; letter-spacing: .08em; color: var(--lime); direction: ltr; unicode-bidi: isolate; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.cp-tags li { padding: 8px 13px; border: 1px solid #3a3c33; border-radius: 99px; font: 700 13px/1 var(--text); color: var(--soft); }
.cp-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 30px; justify-content: start; margin: 0; }
.cp-meta dt { font-size: 13px; color: var(--soft); } .cp-meta dd { margin: 4px 0 0; font-weight: 700; }
.cp-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 80px 0 20px; font: 700 clamp(30px, 2.8vw, 44px)/1 var(--display); }
.cp-sub span { font: 400 16px/1.5 var(--text); color: var(--soft); }

/* ---------- Integralab · המתיחה ---------- */
.il-stretch { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 70px); align-items: center; margin-top: 60px; padding: clamp(22px, 3vw, 46px); border-radius: 26px; background: #f3efe6; color: #16233a; }
.il-side .cs-k { color: #1f5fa8; }
.il-side .cs-h3 .lt { color: #6b7385; }
.il-side .cs-p { color: #4a5263; font-size: 16.5px; } .il-side .cs-p b { color: #16233a; }
.il-tiers { display: grid; gap: 8px; list-style: none; margin: 22px 0; padding: 0; counter-reset: t; }
.il-tiers li { counter-increment: t; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #fff; font-size: 16px; box-shadow: 0 1px 0 rgba(22,35,58,.06); }
.il-tiers li::before { content: counter(t); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #16233a; color: #f3efe6; font: 400 13px/1 Anton, sans-serif; }
.il-tiers b { font-weight: 800; }
.il-stage { display: grid; gap: 22px; justify-items: center; }
.il-frame { position: relative; width: var(--fw, 300px); height: var(--fh, 530px); border-radius: 12px; overflow: hidden; background: #fbf8f1; box-shadow: 0 30px 60px -28px rgba(22,35,58,.55), 0 0 0 1px rgba(22,35,58,.08); transition: width .08s linear, height .08s linear; }
.il-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.il-img.on { opacity: 1; }
.il-ctrl { width: min(100%, 560px); display: grid; gap: 10px; }
.il-label { display: flex; justify-content: space-between; align-items: baseline; }
.il-name { font: 700 22px/1 var(--display); }
.il-ratio { font: 400 14px/1 Anton, sans-serif; letter-spacing: .06em; color: #1f5fa8; direction: ltr; }
.il-range { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: ew-resize; direction: rtl; }
.il-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(270deg, #16233a var(--fill, 0%), rgba(22,35,58,.18) var(--fill, 0%)); }
.il-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(22,35,58,.18); }
.il-range::-moz-range-progress { height: 4px; border-radius: 4px; background: #16233a; }
.il-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%; background: var(--lime); border: 3px solid #16233a; box-shadow: 0 6px 14px rgba(22,35,58,.3); }
.il-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--lime); border: 3px solid #16233a; }
.il-range:focus-visible { outline: 2px solid #1f5fa8; outline-offset: 4px; border-radius: 8px; }
.il-stops { display: flex; justify-content: space-between; font: 700 12px/1 var(--text); color: #6b7385; }
.il-stops span:nth-child(2) { margin-right: -10%; }

/* כל התוצרים: סרט בלולאה (js/marquee.js). נעצר בריחוף ובמגע. בלי תנועה: פס שגוללים ביד */
.il-rail { overflow-x: auto; scrollbar-width: thin; padding-bottom: 10px; }
.il-rail.run { overflow: hidden; padding-bottom: 0; }
.mq.run .mq-track { width: max-content; padding-inline-end: 10px; animation: mq var(--dur, 40s) linear infinite; }
.mq.run:hover .mq-track, .mq.run.hold .mq-track, .mq.off .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(50%); } }
.il-row { display: flex; align-items: flex-end; gap: 10px; list-style: none; margin: 0; padding: 0; height: clamp(260px, 26vw, 400px); }
.il-row li + li { margin: 0; }
.il-row li { position: relative; flex: none; height: 100%; aspect-ratio: var(--ar); }
.il-row img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.il-row span { position: absolute; right: 8px; bottom: 8px; padding: 5px 9px; border-radius: 99px; background: rgba(11,11,10,.82); color: var(--bone); font: 700 12px/1 var(--text); white-space: nowrap; }
/* מוקאפים: שורות באותו גובה, כל תמונה ביחס שלה, בלי חיתוך (flex לפי היחס) */
.il-mocks { display: grid; gap: 12px; }
.il-mrow { display: flex; gap: 12px; }
.il-mrow figure { position: relative; flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.il-mocks img { display: block; width: 100%; height: auto; border-radius: 14px; }
.il-mocks figcaption { position: absolute; right: 10px; bottom: 10px; padding: 6px 11px; border-radius: 99px; background: rgba(11,11,10,.8); font: 700 13px/1 var(--text); }

/* ---------- הנגבי · גיליון שרטוט ---------- */
.hg { position: relative; background:
  linear-gradient(rgba(120,170,210,.07) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, rgba(120,170,210,.07) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(rgba(120,170,210,.12) 1px, transparent 1px) 0 0 / 120px 120px,
  linear-gradient(90deg, rgba(120,170,210,.12) 1px, transparent 1px) 0 0 / 120px 120px,
  #0b1319; border-top: 1px solid #1d2a33; }
.hg .cp-client { border-color: #1d2a33; }
.hg-sheet { position: relative; margin-top: 50px; padding: 18px; border: 1px solid rgba(120,170,210,.35); }
.hg-sheet::before, .hg-sheet::after { content: ""; position: absolute; width: 18px; height: 18px; border: solid var(--lime); }
.hg-sheet::before { top: -1px; right: -1px; border-width: 2px 2px 0 0; } .hg-sheet::after { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hg-tag { display: flex; justify-content: space-between; margin: 0 0 14px; font: 700 13px/1 var(--text); letter-spacing: .04em; color: #9fc0d6; }
.hg-tag span { font-family: Anton, sans-serif; font-weight: 400; letter-spacing: .1em; direction: ltr; }
.hg-film { aspect-ratio: 16 / 9; background: #060b0f; }
.hg-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hg-cap { max-width: 70ch; margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--soft); } .hg-cap b { color: var(--bone); direction: ltr; unicode-bidi: isolate; }
.hg-inv { margin-top: 80px; grid-template-columns: .8fr 1fr !important; }
.hg-inv .three { display: none; }
.hg-inv .hg-cmp { width: 100%; aspect-ratio: .8; max-width: 480px; justify-self: center; background: #0b1319; }
.hg-cmp .cmp-before img { object-fit: cover; }
.hg-posts-head { display: grid; grid-template-columns: auto 1fr; gap: 12px 50px; align-items: end; margin: 90px 0 26px; }
.hg-posts-head .cs-h3 { margin: 0; }
.hg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.hg-posts figure { position: relative; margin: 0; overflow: hidden; border-radius: 14px; }
.hg-posts img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: filter .4s; }
.hg-posts p { margin: 12px 0 0; font-size: 15px; color: var(--soft); } .hg-posts p b { color: var(--bone); }
.hg-note { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 16px; background: linear-gradient(transparent, rgba(6,11,15,.92) 55%); color: var(--bone); transform: translateY(101%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hg-note i { flex: none; width: 34px; height: 34px; border: 1.5px dashed var(--lime); border-radius: 50%; }
.hg-note b { font: 700 16px/1.35 var(--text); }
.hg-posts figure::after { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--r, 90px); height: var(--r, 90px); translate: -50% -50%; border: 1.5px dashed var(--lime); border-radius: 50%; opacity: 0; transition: opacity .3s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .hg-posts figure:hover .hg-note { transform: none; }
  .hg-posts figure:hover img { filter: brightness(.85); }
  .hg-posts figure:hover::after { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .hg-note { transform: none; } }

.cp .fmt { grid-template-columns: minmax(0, .563fr) minmax(0, 1.775fr) minmax(0, .8fr) minmax(0, 1fr); align-items: start; }
.cp .fmt li { height: auto; aspect-ratio: var(--ar, 1); }

@media (max-width: 899px) {
  .cp-split figcaption { inset: auto 0 52px; }
  .cp-tags { margin: 0; }
  .cp-meta { grid-template-columns: 1fr 1fr; }
  .il-stretch { grid-template-columns: 1fr; padding: 18px; }
  .hg-inv { grid-template-columns: 1fr !important; }
  .hg-posts-head { grid-template-columns: 1fr; }
  .hg-posts { grid-template-columns: 1fr; }
  .cp .fmt { grid-template-columns: 1fr 1fr; } .cp .fmt .w { grid-column: 1 / -1; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .il-frame, .il-img, .hg-note { transition: none; } }

/* ---------- 03 · גריל מאסטר: עולם שחור־אדום כמו המודעות עצמן. מסגרת קבועה, מדף מתחלף ---------- */
.gm { --gm-red: #e3262b; background: radial-gradient(70% 50% at 85% 10%, rgba(227,38,43,.12), transparent 70%), linear-gradient(#141518, #0e0f11); }
.gm .cp-n { color: var(--gm-red); }
.gm .hl2 { color: var(--bone); }
.gm-band { margin: 44px 0 0; }
.gm-band img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 70px -40px #000; }
.gm-band figcaption { margin-top: 12px; font-size: 14px; color: var(--soft); }
/* המדף: טקסט ובחירת מודעה מימין, הבמה משמאל */
.gm-shelf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 70px); align-items: center; margin-top: 70px; }
.gm-copy .cs-k { color: var(--gm-red); }
.gm-copy .cs-h2 { margin: 10px 0 18px; }
.gm-copy .cs-p { max-width: 46ch; }
.gm-copy .cs-p + .cs-p { margin-top: 12px; }
.gm-key { display: flex; gap: 18px; margin: 24px 0 14px; font: 700 13px/1 var(--text); color: var(--soft); }
.gm-key span { display: inline-flex; align-items: center; gap: 8px; }
.gm-key i { width: 12px; height: 12px; border-radius: 50%; }
.gm-key .fix i { box-shadow: 0 0 0 2px var(--lime); } .gm-key .chg i { background: var(--gm-red); }
.gm-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.gm-t { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s, transform .25s; }
.gm-t img { display: block; width: 100%; aspect-ratio: 1; }
.gm-t[aria-selected="true"] { opacity: 1; border-color: var(--bone); transform: translateY(-3px); }
@media (hover: hover) and (pointer: fine) { .gm-t:hover { opacity: 1; } }
.gm-t:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gm-stage { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 40px 90px -40px #000; }
.gm-ad { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.gm-ad.on { opacity: 1; }
.gm-ad img { display: block; width: 100%; height: 100%; }
/* הסימונים: טבעת ליים על מה שקבוע, נקודה אדומה על מה שמתחלף. נכנסים אחד אחרי השני */
.gm-m { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.gm-m i { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.gm-m b { padding: 5px 9px; border-radius: 99px; font: 700 12.5px/1 var(--text); white-space: nowrap; }
.gm-m.fix i { box-shadow: 0 0 0 3px var(--lime), 0 0 0 8px rgba(200,245,66,.25); }
.gm-m.fix b { background: var(--lime); color: #0b0b0a; }
.gm-m.chg i { background: var(--gm-red); box-shadow: 0 0 0 4px rgba(227,38,43,.35), 0 0 18px rgba(227,38,43,.8); }
.gm-m.chg b { background: #fff; color: var(--gm-red); }
.gm-ad.on.marks .gm-m { opacity: 1; transform: translate(-50%, -50%); }
.gm-ad.on.marks .gm-m:nth-child(2) { transition-delay: .06s; } .gm-ad.on.marks .gm-m:nth-child(3) { transition-delay: .12s; }
.gm-ad.on.marks .gm-m:nth-child(4) { transition-delay: .24s; } .gm-ad.on.marks .gm-m:nth-child(5) { transition-delay: .3s; }
.gm-marks-btn { position: absolute; left: 12px; bottom: 12px; z-index: 3; min-height: 36px; padding: 0 13px; border: 0; border-radius: 99px; background: rgba(11,11,10,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--bone); font: 700 12.5px/1 var(--text); cursor: pointer; }
.gm-marks-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* שאר התוצרים: כל אחד ביחס שלו */
.gm-grid { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.gm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-grid img { display: block; width: 100%; height: auto; border-radius: 14px; }
.gm-more { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; margin-top: 70px; }
.gm-tee { margin: 0; padding: 20px; border-radius: 18px; background: #f3f1ea; }
.gm-tee img { display: block; width: 100%; height: auto; }
.gm-tee figcaption { margin-top: 12px; font-size: 14px; color: #4f4d46; } .gm-tee figcaption b { color: #0b0b0a; }
.gm-banners { display: grid; gap: 14px; }
.gm-banners figure { margin: 0; } .gm-banners img { display: block; width: 100%; height: auto; border-radius: 12px; }
.gm-note { margin: 4px 0 0; font-size: 14px; color: var(--soft); } .gm-note b { color: var(--bone); }
@media (max-width: 899px) {
  .gm-band { margin-top: 28px; } .gm-band img { border-radius: 10px; }
  .gm-shelf { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 44px; }
  .gm-stage { order: 2; border-radius: 14px; }
  .gm-copy { display: contents; }
  .gm-copy .cs-k, .gm-copy .cs-h2, .gm-copy .cs-p { order: 1; }
  .gm-key { order: 3; margin: 0; } .gm-thumbs { order: 4; max-width: none; }
  .gm-m b { font-size: 11px; padding: 4px 7px; } .gm-m i { width: 12px; height: 12px; }
  .gm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gm-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-grid img { border-radius: 10px; }
  .gm-more { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .gm-ad, .gm-m, .gm-t { transition: none; } }
/* התווית יושבת ליד הנקודה ולא עליה, כדי לא להסתיר את מה שמסומן. בצד ימין של המודעה היא עוברת לשמאל הנקודה */
.gm-m { direction: ltr; transform: translate(-8px, -50%) scale(.6); transform-origin: 8px 50%; }
.gm-ad.on.marks .gm-m { transform: translate(-8px, -50%); }
.gm-m.l { direction: rtl; transform: translate(calc(-100% + 8px), -50%) scale(.6); transform-origin: calc(100% - 8px) 50%; }
.gm-ad.on.marks .gm-m.l { transform: translate(calc(-100% + 8px), -50%); }
.gm-m b { direction: rtl; }
/* נתי: "בקושי רואים את הסימונים". כשהסימונים דולקים המודעה מתעמעמת, והסימונים גדולים ובולטים */
.gm-ad img { transition: filter .45s; }
.gm-ad.marks img { filter: brightness(.45) saturate(.75); }
.gm-m i { width: 26px; height: 26px; }
.gm-m.fix i { background: rgba(200,245,66,.25); box-shadow: 0 0 0 3px var(--lime), 0 0 0 10px rgba(200,245,66,.22), 0 0 24px rgba(200,245,66,.6); }
.gm-m.chg i { box-shadow: 0 0 0 4px #fff, 0 0 0 11px rgba(227,38,43,.35), 0 0 26px rgba(227,38,43,.9); }
.gm-m b { padding: 8px 13px; font-size: 15px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.gm-m { gap: 8px; transform: translate(-13px, -50%) scale(.6); transform-origin: 13px 50%; }
.gm-ad.on.marks .gm-m { transform: translate(-13px, -50%); }
.gm-m.l { transform: translate(calc(-100% + 13px), -50%) scale(.6); transform-origin: calc(100% - 13px) 50%; }
.gm-ad.on.marks .gm-m.l { transform: translate(calc(-100% + 13px), -50%); }
@media (max-width: 899px) { .gm-m i { width: 18px; height: 18px; } .gm-m b { padding: 6px 9px; font-size: 12px; } }
.cp .fmt { grid-template-columns: minmax(0, .563fr) minmax(0, 1.775fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- רקע לכל פרויקט (נתי): Integralab בהיר כמו שמנת הקמפיין, הנגבי כחול שרטוט (קיים), גריל מאסטר פחם חם.
   על רקע בהיר ההדגשה בשחור, לא בליים ---------- */
.il { background: #f4f0e6; color: #0b0b0a; --line: #d8d2c3; }
.il .cs-h2, .il .cp-sub, .il .cp-meta dd, .il .cs-p b { color: #0b0b0a; }
.il .cs-h2 .lt, .il .cp-sub span, .il .cp-meta dt, .il .cs-p { color: #55524a; }
.il .hl2 { color: #0b0b0a; font-weight: 800; }
.il .cp-n { color: #0b0b0a; }
.il .cp-tags li { border-color: #cfc8b7; color: #3d3a33; }
.il .cp-client { border-color: #d8d2c3; }
.il .il-stretch { background: #fff; }
.il .il-row span, .il .il-mocks figcaption { background: rgba(11,11,10,.82); color: #f3f1ea; }
.il .il-rail { scrollbar-color: #bdb6a4 transparent; }
.gm { background: #17120f; }

/* "כל התוצרים": יותר רווח בין התוצרים וצל קליל, כדי שיבלטו על הרקע הבהיר (נתי 29.09) */
.il-row { gap: 22px; }
.mq.run .mq-track { padding-inline-end: 22px; }
.il-rail, .il-rail.run { padding-block: 18px 28px; }
.il-row img { box-shadow: 0 14px 28px -12px rgba(40,34,20,.35), 0 2px 6px rgba(40,34,20,.12); }