/* =====================================================================
   עמוד לקוח, מבוסס נתונים: client.html?c=<client_key>
   רגע החתימה: "גוללים, והאתר גולל". מסגרת דפדפן דביקה, ובתוכה הלכידה המלאה
   של האתר (-full.webp) זזה עם גלילת הדף, בזמן שהסיפור (האתגר, מה בנינו,
   הרגע) עובר לידה. בדסקטופ טלפון עם לכידת המובייל יושב על פינת המסגרת.
   במובייל המסגרת דביקה למעלה והסיפור גולל מתחתיה, והטלפון מקבל מקטע משלו.
   תנועה מופחתת: אין תנועה, ואפשר לגלול בתוך המסגרת ביד.
   ===================================================================== */

.cs{position:relative;background:#000;color:#fff;overflow:clip}
.cs .sh-ghost{top:38%;text-transform:lowercase;direction:ltr}
.cs-g{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"hero vis" "bl vis";column-gap:80px;max-width:1792px;margin:0 auto;padding:0 var(--gut) 14vh}
.cs-hero{grid-area:hero;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 90px}
.crumb{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;min-height:44px;margin:0 0 26px;font-size:18px;font-weight:700;color:var(--fg-72);border-radius:8px;transition:color .3s var(--ease)}
.crumb i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg-50);transition:background-color .35s var(--ease),color .35s var(--ease),transform .5s var(--soft)}
.crumb svg{width:16px;height:16px;transform:scaleX(-1)}
@media (hover:hover){.crumb:hover{color:#fff}.crumb:hover i{background:#fff;color:#000;transform:translateX(6px)}}
.crumb:focus-visible i,.crumb:active i{background:#fff;color:#000}
.cs-h1{margin:0;font-weight:900;font-size:clamp(56px,5.6vw,118px);line-height:.94;letter-spacing:-.015em;text-wrap:balance}
.cs-tag{margin:30px 0 0;font-size:clamp(21px,1.5vw,28px);font-weight:300;line-height:1.45;color:var(--fg-72);max-width:30ch;text-wrap:pretty}
.cs .btns{margin-top:44px}
.cs-cr{margin:26px 0 0;font-size:18px;color:var(--fg-50)}

/* המסגרת */
.cs-vis{grid-area:vis;position:sticky;top:clamp(108px,calc(50svh - 330px),250px);align-self:start;margin-top:clamp(108px,calc(50svh - 330px),250px);z-index:3}
.bw{position:relative;border-radius:18px;background:#141414;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 50px 120px -50px rgba(0,0,0,1)}
.bw-bar{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;direction:ltr}
.bw-bar i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.bw-url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;max-width:420px;height:30px;margin:0 auto;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);font-size:16px;line-height:1;color:rgba(255,255,255,.8);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bw-url svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.bw-scr{position:relative;aspect-ratio:16/10;margin:0 6px 6px;border-radius:12px;overflow:hidden;background:#0c0c0c}
.bw-scr img{position:absolute;top:0;left:0;width:100%;height:auto}
.bw-scr .poster{height:100%;object-fit:cover;object-position:50% 0}
.bw-scr .full{will-change:transform}
.bw-scr.fit{background:#fff}
.bw-scr.fit .poster{object-fit:contain;padding:8% 12%}
.bw-pb{position:absolute;bottom:6px;left:6px;right:6px;height:3px;border-radius:0 0 12px 12px;background:#fff;transform:scaleX(0);transform-origin:100% 50%;mix-blend-mode:difference;pointer-events:none}
.rm .bw-scr.can{overflow-y:auto;overscroll-behavior:contain}
.rm .bw-scr.can .full{position:relative}
.rm .bw-scr.can .poster{display:none}
.bw-scr:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ph{position:absolute;bottom:-12%;left:-5%;width:21%;z-index:2}
.ph-f,.cs-m-ph{position:relative;padding:7px;border-radius:30px;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 40px 80px -30px rgba(0,0,0,1)}
.ph-s{position:relative;aspect-ratio:780/1688;border-radius:24px;overflow:hidden;background:#111}
.ph-s img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ph-s::after{content:"";position:absolute;top:8px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:999px;background:#000}

/* הסיפור */
.cs-bl{grid-area:bl}
.cs-b{min-height:76vh;min-height:76svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.24;transition:opacity .8s var(--ease)}
.cs-b.on,.rm .cs-b{opacity:1}
.cs-b .eyebrow{color:#fff}
.cs-p{margin:0;font-size:clamp(24px,1.85vw,34px);font-weight:300;line-height:1.45;max-width:30ch;text-wrap:pretty}
.cs-b:nth-child(3) .cs-p{font-weight:700}
.cs-m{display:none}
/* מצב טעינה: שלד שקט של הפתיחה והמסגרת, עד שהנתונים מגיעים */
.sk-l{display:block;height:16px;margin:0 0 18px;border-radius:999px;background:rgba(255,255,255,.08)}
.sk-h{height:clamp(44px,4.4vw,92px);width:86%;border-radius:18px}
.sk-sh{overflow:hidden}
.sk-sh::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:translateX(-100%);animation:skm 1.6s var(--soft) infinite}
@keyframes skm{to{transform:translateX(100%)}}
.sk-cs .bw-url{max-width:260px}

/* פרויקטים של הלקוח */
.pjs .h2{max-width:none}
.pj-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:72px}
.pj{position:relative;display:flex;flex-direction:column;padding:6px 6px 0;border-radius:22px;background:var(--fg-06);box-shadow:0 0 0 1px var(--fg-12);scroll-margin-top:110px;transition:box-shadow .6s var(--ease)}
.pj.hit{box-shadow:0 0 0 2px var(--fg)}
.pj-shot{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#111}
.pj-shot img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:opacity .55s var(--ease),transform 1s var(--ease)}
.pj-shot .g{filter:grayscale(1) contrast(1.05)}
.pj-shot .c{opacity:0}
.pj-shot.fit{background:#fff}
.pj-shot.fit img{object-fit:contain;padding:10% 14%}
.pj:hover .pj-shot .c,.pj:focus-within .pj-shot .c,.pj.hit .pj-shot .c{opacity:1}
.pj:hover .pj-shot img,.pj:focus-within .pj-shot img{transform:scale(1.03)}
.pj-tx{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 20px 26px}
.pj-ty{margin:0;font-size:16px;font-weight:700;color:var(--fg-50)}
.pj-t{margin:0;font-size:clamp(26px,2vw,36px);font-weight:900;line-height:1.05}
.pj-h{margin:0 0 10px;font-size:18px;color:var(--fg-72);direction:ltr;text-align:right;overflow-wrap:anywhere}
.pj .btn{min-height:56px}

/* הלקוח הבא והקודם */
.nx{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#000;color:#fff;border-top:1px solid var(--fg-12)}
.nx-a{position:relative;display:flex;flex-direction:column;gap:18px;min-height:38vh;padding:72px var(--gut) 64px;overflow:hidden;isolation:isolate}
.nx-a+.nx-a{box-shadow:inset -1px 0 0 var(--fg-12)}
.nx-a:nth-child(2){align-items:flex-end;text-align:left}
.nx-l{display:inline-flex;align-items:center;gap:14px;font-size:18px;font-weight:700;color:var(--fg-72)}
.nx-l i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg-50);transition:background-color .35s var(--ease),color .35s var(--ease),transform .5s var(--soft)}
.nx-l svg{width:18px;height:18px}
.nx-a:first-child .nx-l svg{transform:scaleX(-1)}
.nx-t{position:relative;z-index:2;font-size:clamp(40px,4.4vw,88px);font-weight:900;line-height:.96;letter-spacing:-.01em;max-width:13ch;text-wrap:balance;margin-top:auto}
.nx-im{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;clip-path:inset(50% 50% 50% 50%);transition:clip-path .8s var(--soft)}
.nx-im img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(1) brightness(.42);transform:scale(1.08);transition:transform 1.2s var(--soft)}
@media (hover:hover){
  .nx-a:hover .nx-im{clip-path:inset(0 0 0 0)}
  .nx-a:hover .nx-im img{transform:none}
  .nx-a:hover .nx-l{color:#fff}
  .nx-a:hover .nx-l i{background:#fff;color:#000}
  .nx-a:first-child:hover .nx-l i{transform:translateX(8px)}
  .nx-a:nth-child(2):hover .nx-l i{transform:translateX(-8px)}
}
.nx-a:focus-visible{outline-offset:-6px}
.nx-a:focus-visible .nx-l i,.nx-a:active .nx-l i{background:#fff;color:#000}
.nx-a:focus-visible .nx-im,.nx-a:active .nx-im{clip-path:inset(0 0 0 0)}

/* לקוח בלי סיפור: מסך אחד, בלי דביקה */
.cs.plain .cs-g{grid-template-areas:"hero vis";padding-bottom:0}
.cs.plain .cs-vis{position:relative;top:auto;align-self:center;margin-top:0}

@media (max-width:1279px){
  .cs-g{column-gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:899px){
  .cs .sh-ghost{font-size:52vw;top:14%;-webkit-text-stroke-color:rgba(255,255,255,.09)}
  .cs-g{grid-template-columns:1fr;grid-template-areas:"hero" "vis" "bl";padding:0 16px 40px}
  .cs.plain .cs-g{grid-template-areas:"hero" "vis";padding-bottom:90px}
  .cs-hero{min-height:0;padding:118px 0 34px;text-align:center;align-items:center}
  .crumb{align-self:center;margin-bottom:18px}
  .cs-h1{font-size:clamp(42px,11.4vw,72px)}
  .cs-tag{margin:22px auto 0;font-size:20px}
  .cs .btns{margin-top:30px;width:100%}
  .cs-vis{top:76px;margin-top:0;padding-bottom:14px;background:#000}
  .cs-vis::after{content:"";position:absolute;top:100%;left:0;width:100%;height:36px;background:linear-gradient(#000,rgba(0,0,0,0));pointer-events:none}
  .cs.plain .cs-vis::after{display:none}
  .bw{border-radius:14px}
  .bw-bar{height:36px;padding:0 12px;gap:6px}
  .bw-bar i{width:9px;height:9px}
  .bw-url{height:26px;max-width:none;margin-inline:8px 0}
  .ph{display:none}
  .cs-b{min-height:0;padding:56px 0 64px;text-align:center;align-items:center}
  .cs-b:first-child{padding-top:44px}
  .cs-p{font-size:21px;max-width:34ch}
  .cs-m{display:block;padding:24px 16px 110px;background:#000}
  .cs-m-ph{width:min(64vw,280px);margin:0 auto}
  .cs-m p{margin:22px 0 0;text-align:center;font-size:16px;color:var(--fg-50);direction:ltr}
  .pj-l{grid-template-columns:1fr;gap:20px;margin-top:44px}
  .pjs .eyebrow{display:flex}
  .pjs .h2{text-align:center}
  .pj-tx{align-items:center;text-align:center;padding:22px 14px 24px}
  .pj-h{text-align:center}
  .nx{grid-template-columns:1fr}
  .nx-a{min-height:0;padding:44px 16px 48px;align-items:center!important;text-align:center!important}
  .nx-a+.nx-a{box-shadow:inset 0 1px 0 var(--fg-12)}
  .nx-t{font-size:clamp(34px,9.6vw,52px);margin-top:4px}
  .nx-im{clip-path:none;opacity:.4}
  .nx-im img{transform:none}
}