/* =========================================================
   CONCEPT · "סדר שרואים" (index-concept.html בלבד)
   ---------------------------------------------------------
   הסדר עצמו הוא השפה העיצובית:
   1. עקומת תנועה אחת לכל האתר (בהשראת cmcc.vc)
   2. שם קבוע לכל אזור: כוכב · מספר · שם
   3. סימני חיתוך בפינות כל אזור, שמצטיירים בכניסה
   4. מסגרת בחירה (כמו בתוכנת עיצוב) שנמתחת סביב כל כותרת באנגלית
      ברגע שהאותיות נוחתות עליה, עם המידות שלה, ונעלמת
   ========================================================= */

/* ---------- 1. עקומה אחת: התחלה איטית, אמצע חזק, סוף רך וארוך ---------- */
:root{
  --ease-move:cubic-bezier(.58,0,.07,1);
  --ease-soft:cubic-bezier(.58,0,.07,1);
}

/* ---------- 2. שם האזור: כוכב · מספר · שם ---------- */
.tag .sx, .p-head .eyebrow .sx{
  font-family:var(--font-en); font-size:11.5px; font-weight:500; letter-spacing:.1em;
  opacity:.5; direction:ltr; unicode-bidi:isolate;
}
.p-head .eyebrow.tag{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- 3. סימני חיתוך ---------- */
.cm{
  position:absolute; inset:clamp(18px, 2.2vw, 32px) var(--pad-x); z-index:3; pointer-events:none;
  color:rgb(var(--ink-rgb, 20 20 20) / .32);
}
.cm i{ position:absolute; width:14px; height:14px; }
.cm i::before, .cm i::after{
  content:""; position:absolute; background:currentColor;
  transition:transform .9s var(--ease-move);
}
.cm i::before{ width:100%; height:1px; transform:scaleX(0); }
.cm i::after{ width:1px; height:100%; transform:scaleY(0); }
.cm i:nth-child(1){ top:0; right:0; }  .cm i:nth-child(1)::before{ top:0; right:0; transform-origin:100% 0; } .cm i:nth-child(1)::after{ top:0; right:0; transform-origin:0 0; }
.cm i:nth-child(2){ top:0; left:0; }   .cm i:nth-child(2)::before{ top:0; left:0; transform-origin:0 0; }     .cm i:nth-child(2)::after{ top:0; left:0; transform-origin:0 0; }
.cm i:nth-child(3){ bottom:0; right:0; } .cm i:nth-child(3)::before{ bottom:0; right:0; transform-origin:100% 0; } .cm i:nth-child(3)::after{ bottom:0; right:0; transform-origin:0 100%; }
.cm i:nth-child(4){ bottom:0; left:0; }  .cm i:nth-child(4)::before{ bottom:0; left:0; transform-origin:0 0; }    .cm i:nth-child(4)::after{ bottom:0; left:0; transform-origin:0 100%; }
.cm.on i::before{ transform:scaleX(1); }
.cm.on i::after{ transform:scaleY(1); }
.cm.on i:nth-child(2)::before, .cm.on i:nth-child(2)::after{ transition-delay:.08s; }
.cm.on i:nth-child(3)::before, .cm.on i:nth-child(3)::after{ transition-delay:.16s; }
.cm.on i:nth-child(4)::before, .cm.on i:nth-child(4)::after{ transition-delay:.24s; }
/* באזורים הכהים: לבן שקט */
.testi .cm, .process .cm, .faq .cm{ color:rgb(255 255 255 / .28); }
.faq .faq-panel .cm{ color:rgb(20 20 20 / .3); }

/* ---------- 4. מסגרת הבחירה סביב הכותרת ---------- */
.sel-frame{
  position:fixed; z-index:70; pointer-events:none; left:0; top:0;
  border:1px solid currentColor; opacity:0;
}
.sel-frame i{
  position:absolute; width:7px; height:7px; background:var(--paper, #F7F6F2); border:1px solid currentColor;
}
.sel-frame i:nth-child(1){ top:-4px; right:-4px; } .sel-frame i:nth-child(2){ top:-4px; left:-4px; }
.sel-frame i:nth-child(3){ bottom:-4px; right:-4px; } .sel-frame i:nth-child(4){ bottom:-4px; left:-4px; }
.sel-frame b{
  position:absolute; left:50%; top:calc(100% + 10px); translate:-50% 0;
  padding:3px 8px; border-radius:6px; white-space:nowrap;
  font:600 11px/1.3 var(--font-en); letter-spacing:.04em; direction:ltr;
  background:#141414; color:#fff;
}
.sel-frame.dark i{ background:#0F0F0F; }
.sel-frame.dark b{ background:#fff; color:#141414; }

@media (max-width: 900px){
  .cm{ inset:14px 16px; }
  .cm i{ width:10px; height:10px; }
}
@media (prefers-reduced-motion: reduce){
  .cm i::before, .cm i::after{ transition:none; }
}

/* =========================================================
   6. אינדקס גלילה: מספרי האזורים בטור דק בצד, קו שמתמלא, והאזור הנוכחי מודגש
   ========================================================= */
.sx-index{
  position:fixed; z-index:140; left:clamp(14px, 1.6vw, 26px); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:14px; padding:6px 0;
  color:#141414; direction:ltr;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease-move), color .5s;
}
.sx-index.show{ opacity:1; pointer-events:auto; }
.sx-index.light{ color:#fff; }
.sx-index .rail{ position:absolute; left:0; top:0; bottom:0; width:1px; background:currentColor; opacity:.18; }
.sx-index .fill{ position:absolute; left:0; top:0; width:1px; height:100%; background:currentColor; transform-origin:0 0; transform:scaleY(var(--p, 0)); }
.sx-index a{
  position:relative; display:flex; align-items:center; gap:10px; padding-left:14px;
  font:500 11px/1 var(--font-en); letter-spacing:.1em; color:inherit; text-decoration:none;
  opacity:.35; transition:opacity .4s, padding .5s var(--ease-move);
}
.sx-index a::before{ content:""; position:absolute; left:0; top:50%; width:0; height:1px; background:currentColor; transition:width .5s var(--ease-move); }
.sx-index a span{ font:500 12.5px/1 var(--font-he, inherit); letter-spacing:0; direction:rtl; white-space:nowrap;
  opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .45s var(--ease-move); }
.sx-index a.on{ opacity:1; padding-left:20px; }
.sx-index a.on::before{ width:12px; }
.sx-index a:hover{ opacity:1; }
.sx-index a:hover span, .sx-index a.on span{ opacity:1; transform:none; }
.sx-index a:not(.on):not(:hover) span{ width:0; overflow:hidden; }
@media (max-width: 1100px){ .sx-index{ display:none; } }
/* האינדקס: רק מספרים; שם האזור מופיע במעבר עכבר (כדי לא לעלות על החותמת העגולה באודות) */
.sx-index a.on span{ opacity:0; transform:translateX(-6px); width:0; overflow:hidden; }
.sx-index a:hover span{ opacity:1; transform:none; width:auto; }

/* =========================================================
   7. פתיחה עם מונה: כוכב שמסתובב לאט ומונה 0→100, ואז "וילון" עולה
   ========================================================= */
.preload{
  position:fixed; inset:0; z-index:9999; background:var(--paper, #F7F6F2); color:#141414;
  display:grid; place-items:center;
}
.preload .pl-in{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.preload .pl-star{
  width:26px; height:26px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation:plSpin 3.2s linear infinite;
}
.preload .pl-n{ font:500 12px/1 var(--font-en, sans-serif); letter-spacing:.22em; font-variant-numeric:tabular-nums; direction:ltr; }
.preload .pl-line{ width:120px; height:1px; background:rgb(20 20 20 / .12); position:relative; overflow:hidden; }
.preload .pl-line i{ position:absolute; inset:0; background:#141414; transform-origin:0 0; transform:scaleX(var(--p, 0)); }
@keyframes plSpin{ to{ transform:rotate(360deg); } }
.preload.out{ clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.58,0,.07,1); }
.preload.out .pl-in{ opacity:0; transform:translateY(-24px); transition:opacity .4s, transform .8s cubic-bezier(.58,0,.07,1); }

/* =========================================================
   8. פרויקט כגיבור: בלחיצה הכרטיס מתרחב למסך מלא לפני המעבר לפרויקט
   ========================================================= */
.px-clone{ position:fixed; z-index:9000; margin:0; pointer-events:none; overflow:hidden; box-shadow:none !important; }
.px-veil{ position:fixed; inset:0; z-index:9001; pointer-events:none; opacity:0; }

/* =========================================================
   9. ניגודיות טיפוגרפית: כותרות גדולות יותר, טקסט משני שקט יותר, יותר אוויר
   ========================================================= */
/* הכותרות באנגלית: בגודל המקורי (בשביל הפרופורציות). העברית: גדולה וברורה יותר */
.tag, .p-head .eyebrow, .ab-eyebrow{ font-size:16.5px !important; opacity:.85; }
.tag .tag-star{ width:12px; height:12px; }
.t-sub, .faq-sub, .sv-sub, .sv-head .sv-sub, .ab-lead, .f-cta-note p{ font-size:clamp(17.5px, 1.35vw, 21px) !important; opacity:.8; }
.pr-step p{ opacity:.75; }
.testi{ padding-top:clamp(120px, 14vw, 220px) !important; padding-bottom:clamp(110px, 12vw, 200px) !important; }


/* =========================================================
   10. הפרויקטים כעינית (במקום ערימת הכרטיסים)
   רשימה מימין, עינית עם סימני חיתוך במרכז, תיאור משמאל.
   הגלילה מעבירה את הפרויקטים דרך העינית; מי שבחוץ מטושטש ומתחדד בכניסה
   ========================================================= */
.projects.vf{
  --n:3; --frame-w:min(44vw, 720px); --frame-h:calc(var(--frame-w) * .625); --gap:56px;
  /* 100vh ראשונים מוסתרים מתחת לסוף אזור ההשראה (margin-top שלילי), ואחריהם העינית */
  height:calc(var(--n) * 90vh + 200vh);
  background:var(--paper, #F7F6F2);
}
.vf-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; grid-template-columns:1fr var(--frame-w) 1fr; align-items:center; gap:clamp(32px, 4vw, 72px); padding:0 clamp(56px, 7vw, 120px); }

/* הכותרת: במרכז למעלה, הכותרת הקטנה ממש מעליה (גם יעד הנחיתה של אותיות המעבר) */
.projects .p-head.vf-head{ position:absolute; left:0; right:0; top:clamp(84px, 10.5vh, 104px); translate:none; transform:none !important; opacity:1 !important; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
.projects .vf-head .eyebrow{ margin:0; }
.projects .vf-head h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px, 3.4vw, 58px) !important; letter-spacing:-.01em; line-height:1; }
.projects .vf-head h2 span{ font-weight:400 !important; }

.vf-list{ list-style:none; margin:0; padding:0; justify-self:start; }
.vf-list li{ display:grid; grid-template-columns:auto 1fr; gap:4px 18px; padding:12px 0; cursor:pointer; color:rgb(20 20 20 / .38); transition:color .6s var(--ease-move); }
.vf-list .n{ grid-row:span 2; font-family:var(--font-en); font-size:12px; letter-spacing:.1em; padding-top:6px; direction:ltr; }
.vf-list .t{ font-size:clamp(20px, 1.7vw, 26px); font-weight:600; line-height:1.15; }
.vf-list .k{ font-size:13px; }
.vf-list li:hover{ color:rgb(20 20 20 / .7); }
.vf-list li.on{ color:#141414; }
.vf-list li.on .t{ background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover; -webkit-background-clip:text; background-clip:text; color:transparent; }

.vf-window{ position:relative; height:100vh; }
.vf-strip{ position:absolute; inset-inline:0; top:50%; will-change:transform; }
.vf-shot{ display:block; width:var(--frame-w); height:var(--frame-h); margin-bottom:var(--gap); position:relative; overflow:hidden; background:var(--pbg); }
.vf-shot::after{ content:""; position:absolute; inset:0; background:var(--paper, #F7F6F2); opacity:var(--veil, .6); pointer-events:none; }
.vf-mock{ position:absolute; inset:0; --lw:calc(var(--frame-w) * .66); filter:blur(var(--blur, 0px)); transition:filter .65s cubic-bezier(.33,0,.2,1); will-change:filter; }   /* הטשטוש עובר בכרטיס המסך (ראו concept.js) */
.vf-mock .pc-laptop{ left:50%; top:52%; transform:translate(-56%, -50%); filter:drop-shadow(0 26px 30px rgb(0 0 0 / .22)); }
.vf-mock .pc-phone{ --ph:calc(var(--lw) * .62); }
.vf-mock .lap-view{ aspect-ratio:16 / 9; }
.vf-mock.solo .pc-laptop{ transform:translate(-50%, -50%); }
.vf-crop{ position:absolute; left:50%; top:50%; width:calc(var(--frame-w) + 28px); height:calc(var(--frame-h) + 28px); translate:-50% -50%; pointer-events:none; z-index:3; }
.vf-crop i{ position:absolute; width:22px; height:22px; border:0 solid #141414; }
.vf-crop i:nth-child(1){ top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
.vf-crop i:nth-child(2){ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
.vf-crop i:nth-child(3){ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }
.vf-crop i:nth-child(4){ bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px; }
.vf-fade{ position:absolute; inset-inline:0; height:22vh; z-index:2; pointer-events:none; }
.vf-fade.top{ top:0; height:30vh; background:linear-gradient(var(--paper, #F7F6F2) 66%, transparent); }
.vf-fade.bot{ bottom:0; background:linear-gradient(transparent, var(--paper, #F7F6F2)); }

.vf-info{ justify-self:end; width:min(100%, 34ch); }
.vf-info .vf-ty{ font-size:13px; opacity:.5; margin:0 0 14px; }
.vf-info .vf-ds{ font-size:clamp(17px, 1.3vw, 20px); line-height:1.6; margin:0 0 26px; min-height:4.8em; }
.vf-info .ln{ display:block; overflow:hidden; } .vf-info .li{ display:block; }
.vf-info a.btn-ghost{ font-size:15px; font-weight:600; color:inherit; }   /* הקישור שלנו (3.2): חץ ארוך ודק וקו שנכתב מחדש */

.vf-ticks{ position:absolute; top:50%; translate:0 -50%; right:clamp(16px, 1.6vw, 26px); width:18px; height:200px; z-index:4;
  background:repeating-linear-gradient(to bottom, rgb(20 20 20 / .28) 0 1px, transparent 1px 10px); }
.vf-ticks b{ position:absolute; right:0; top:calc(var(--p, 0) * 100%); width:34px; height:1.5px; background:var(--grad); }
.vf-count{ position:absolute; bottom:clamp(24px, 4vh, 40px); left:50%; translate:-50% 0; font-family:var(--font-en); font-size:12px; letter-spacing:.14em; direction:ltr; opacity:.55; z-index:4; }

@media (max-width: 900px){
  /* נייד: הכול בטור אחד ובמרכז: כותרת, שורת שמות, העינית, התיאור והמונה */
  .projects.vf{ --frame-w:calc(100vw - 48px); --gap:32px; }
  .vf-stage{ display:flex; flex-direction:column; justify-content:center; gap:16px; padding:74px 24px 26px; height:100svh; }
  .projects .p-head.vf-head{ position:static; gap:8px; }
  .projects .vf-head h2{ font-size:clamp(34px, 10vw, 48px) !important; }
  .vf-list{ order:2; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; justify-self:auto; align-self:center; }
  .vf-list li{ display:block; padding:4px 0; } .vf-list .n, .vf-list .k{ display:none; } .vf-list .t{ font-size:15px; }
  /* העינית: גובה של מסגרת אחת, חותכת למעלה ולמטה (לא לצדדים, כדי שסימני החיתוך יישארו) */
  .vf-window{ order:3; flex:none; width:100%; height:calc(var(--frame-h) + 28px); min-height:0; clip-path:inset(0 -24px); }
  .vf-fade{ display:none; }
  .vf-info{ order:4; justify-self:auto; width:auto; }
  .vf-info .vf-ty{ margin-bottom:8px; }
  .vf-info .vf-ds{ min-height:3.2em; font-size:16px; margin-bottom:14px; }
  .vf-count{ order:5; position:static; translate:none; align-self:center; }
  .vf-ticks{ display:none; }
}

/* בזמן העינית מוצג רק הסרגל שלה (צד אחד); אינדקס האזורים בצד שמאל מתחבא */
.sx-index.vf-hide{ opacity:0 !important; pointer-events:none !important; }

/* =========================================================
   11. שאלות נפוצות: סימני החיתוך עוברים מפינות הפאנל לפינות של כל משבצת,
   כך שבכל מפגש קווים נוצר "+" קטן, ובקצוות הרשת "L"
   ========================================================= */
.faq .faq-panel > .cm, .faq .cm{ display:none; }
.faq-cell{ overflow:visible; }   /* כדי שהסימנים יישבו על הקווים, ולא חצי פיקסל בתוכם */
/* כל סימן הוא קטע כהה יותר של קו הרשת עצמו, בדיוק על הפיקסלים שלו (בלי היסט ובלי כפילות):
   כל משבצת מסמנת את הקווים שלה: השמאלי (inline-end) והתחתון. השורה העליונה מסמנת גם את הקו העליון,
   והטור הימני גם את הקו הימני (שני אלה הם המסגרת של הרשת) */
.faq-cell::after{
  --mk:#141414; --len:10px;   /* כמו בהשראה: קווים בהירים, סימנים בניגוד (שחור במקום אדום), בעובי הקו */
  --g:linear-gradient(var(--mk), var(--mk)) no-repeat;
  --L:var(--g) 0 1px / 1px var(--len), var(--g) 0 100% / 1px var(--len);
  --B:var(--g) 0 100% / var(--len) 1px, var(--g) right 1px bottom 0 / var(--len) 1px;
  --T:var(--g) 0 0 / var(--len) 1px, var(--g) right 1px top 0 / var(--len) 1px;
  --R:var(--g) right 0 top 1px / 1px var(--len), var(--g) right 0 bottom 0 / 1px var(--len);
  content:""; position:absolute; inset:-1px -1px 0 0; z-index:3; pointer-events:none;
  background:var(--L), var(--B);
}
@media (min-width: 901px){
  .faq-cell:nth-child(-n+3)::after{ background:var(--L), var(--B), var(--T); }
  .faq-cell:nth-child(3n+1)::after{ background:var(--L), var(--B), var(--R); }
  .faq-cell:nth-child(1)::after{ background:var(--L), var(--B), var(--T), var(--R); }
}
@media (min-width: 561px) and (max-width: 900px){
  .faq-cell:nth-child(-n+2)::after{ background:var(--L), var(--B), var(--T); }
  .faq-cell:nth-child(2n+1)::after{ background:var(--L), var(--B), var(--R); }
  .faq-cell:nth-child(1)::after{ background:var(--L), var(--B), var(--T), var(--R); }
}
@media (max-width: 560px){
  .faq-cell::after{ background:var(--L), var(--B), var(--R); }
  .faq-cell:nth-child(1)::after{ background:var(--L), var(--B), var(--T), var(--R); }
}
/* התהליך: מרווח משמאל, כדי שהמוקאפ וחלון הניהול לא יעלו על אינדקס המספרים בצד */
@media (min-width: 1101px){ .process .pr-view{ padding-left:clamp(64px, 6vw, 100px); } }

/* =========================================================
   12. כפתורים (3.2): הראשי בפינות מדויקות עם כוכב, והרקע החי של האתר במעבר עכבר.
   המשני הוא קישור עם החץ הארוך והדק, והקו שמתחתיו נכתב מחדש במעבר עכבר
   ========================================================= */
.btn{ border-radius:10px; }
.btn-primary{ gap:12px; }
.btn-primary .arr-long{ display:none; }
.btn .b-star{
  width:12px; height:12px; flex:none; background:currentColor;
  -webkit-mask:var(--star-m) center/contain no-repeat; mask:var(--star-m) center/contain no-repeat;
  transition:transform .9s var(--ease-move);
}
:root{ --star-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E"); }
.btn:hover .b-star{ transform:rotate(180deg); }

.btn.btn-ghost{
  position:relative; height:auto; padding:8px 0 12px; gap:14px;
  border:0 !important; border-radius:0; background:none !important; box-shadow:none !important;
}
.btn.btn-ghost::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor; transform-origin:0 0; }
.btn.btn-ghost:hover::after{ animation:lkRedraw .9s var(--ease-move); }
@keyframes lkRedraw{ 0%{ transform:scaleX(1); transform-origin:0 0; } 45%{ transform:scaleX(0); transform-origin:0 0; } 46%{ transform:scaleX(0); transform-origin:100% 0; } 100%{ transform:scaleX(1); transform-origin:100% 0; } }
.btn.btn-ghost:hover{ color:inherit !important; }
.btn.btn-ghost .arr-long{ transition:transform .6s var(--ease-move); }
.btn.btn-ghost:hover .arr-long{ transform:translateX(-5px); }
/* בהדר: הקישור "צרו איתי קשר" יושב באמצע הגובה כמו הכפתור הקודם */
.site-header .head-cta.btn-ghost{ align-self:center; }
/* בין הכפתור לקישור: יותר אוויר, כי לקישור אין מסגרת */
.cta{ gap:12px 30px; align-items:center; }
/* העינית בנייד: גם כאן מחשב + טלפון (כללי הנייד של כרטיסי הפרויקטים הסתירו את המחשב) */
@media (max-width: 900px){
  .vf-mock .pc-laptop{ left:50%; top:52%; width:var(--lw); transform:translate(-56%, -50%); filter:drop-shadow(0 18px 22px rgb(0 0 0 / .22)); }
  .vf-mock .lap-screen, .vf-mock .lap-base{ display:block; }
  .vf-mock .pc-phone{ --ph:calc(var(--lw) * .62); position:absolute; right:calc(var(--pw) * -.5); bottom:calc(var(--lw) * -.012); margin:0; transform:none; filter:drop-shadow(-6px 12px 16px rgb(0 0 0 / .3)); }
}

/* הקישורים "בואו נדבר" (שירותים) ו"שאלו אותי" (שאלות): בסגנון הקישור שלנו (3.2), בשורה משלהם */
.sv-more-cta, .faq-cta{ margin:10px 0 0; direction:rtl; }
.sv-more-cta .btn-ghost, .faq-cta .btn-ghost{ font-size:15px; font-weight:600; }
@media (max-width: 900px){ .faq-cta{ order:4; } }

/* =========================================================
   13. התהליך כציר זמן (במקום הגלילה הנעוצה עם המוקאפ הגדול)
   ארבעה שלבים על קו אחד שנצבע בכניסה, ואיור קו קטן לכל שלב
   ========================================================= */
.process{ height:auto !important; }
.process .pr-wrap{ padding:clamp(110px, 11vw, 170px) var(--pad-x) clamp(90px, 9vw, 150px); }
.process .pr-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:clamp(48px, 6vw, 90px); }
.process .tl{ list-style:none; margin:0; padding:42px 0 0; position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 3vw, 52px); }
.process .tl::before, .process .tl::after{ content:""; position:absolute; top:7px; right:0; left:0; height:1px; }
.process .tl::before{ background:rgb(255 255 255 / .18); }
.process .tl::after{ background:var(--grad); transform-origin:100% 0; transform:scaleX(0); transition:transform 1.8s var(--ease-move); }
.process .tl.in::after{ transform:scaleX(1); }
.tl-col{ position:relative; display:flex; flex-direction:column; gap:14px; opacity:0; translate:0 18px; transition:opacity .8s, translate 1s cubic-bezier(.16,1,.3,1); }
.tl.in .tl-col{ opacity:1; translate:none; }
.tl.in .tl-col:nth-child(2){ transition-delay:.35s; } .tl.in .tl-col:nth-child(3){ transition-delay:.7s; } .tl.in .tl-col:nth-child(4){ transition-delay:1.05s; }
.tl-dot{ position:absolute; top:-42px; right:0; width:15px; height:15px; background:#fff; -webkit-mask:var(--star-m) center/contain no-repeat; mask:var(--star-m) center/contain no-repeat; }
.tl-col .n{ font-family:var(--font-en); font-size:12px; letter-spacing:.1em; opacity:.5; direction:ltr; text-align:right; }
.tl-col h3{ margin:0; font-size:clamp(22px, 1.8vw, 28px); font-weight:600; }
.tl-col p{ margin:0; font-size:clamp(15.5px, 1.1vw, 17px); line-height:1.65; opacity:.68; }

/* איורי הקו */
.tl .ill{ display:block; width:100%; max-width:190px; height:86px; margin:4px 0 8px; overflow:visible; fill:none; stroke:#fff; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.tl .ill .dim{ stroke-opacity:.35; }
.tl .ill .g{ stroke:url(#tlGrad); }
.tl .ill .mv{ transition:transform .9s var(--ease-move); transform-box:fill-box; transform-origin:center; }
.tl .s1 .mv:nth-of-type(1){ transform:translate(-8px, 6px) rotate(-14deg); } .tl .s1 .mv:nth-of-type(2){ transform:translate(10px, -8px) rotate(11deg); }
.tl .s1 .mv:nth-of-type(3){ transform:translate(-14px, -4px) rotate(8deg); } .tl .s1 .mv:nth-of-type(4){ transform:translate(6px, 10px) rotate(-9deg); }
.tl .s1 .mv:nth-of-type(5){ transform:translate(16px, 4px) rotate(16deg); } .tl .s1 .mv:nth-of-type(6){ transform:translate(-4px, -10px) rotate(-6deg); }
.tl .act .s1 .mv{ transform:none; }
.tl .s2 .dr{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s var(--ease-move); } .tl .act .s2 .dr{ stroke-dashoffset:0; }
.tl .s2 .bx{ opacity:.35; transition:opacity .6s .3s; } .tl .act .s2 .bx{ opacity:1; }
.tl .s3 .sw{ transition:transform .8s var(--ease-move); } .tl .s3 .sw:nth-of-type(2){ transform:translateX(-14px); } .tl .s3 .sw:nth-of-type(3){ transform:translateX(-28px); }
.tl .act .s3 .sw{ transform:none; }
.tl .s3 text{ fill:#fff; stroke:none; font-family:var(--font-display); font-size:34px; }
.tl .s4 .knob{ transition:transform .7s var(--ease-move); } .tl .act .s4 .knob{ transform:translateX(-22px); }
.tl .s4 .trk{ transition:stroke .5s, stroke-opacity .5s; } .tl .act .s4 .trk{ stroke:url(#tlGrad); stroke-opacity:1; }
.tl .s4 .fill{ transform-origin:right center; transform:scaleX(.25); transition:transform .9s .15s var(--ease-move); transform-box:fill-box; } .tl .act .s4 .fill{ transform:none; }

@media (max-width: 900px){
  .process .pr-head{ display:block; }
  .process .pr-head .t-pill{ margin-bottom:14px !important; }
  /* נייד: הקו אנכי בצד ימין, והשלבים אחד מתחת לשני */
  .process .tl{ grid-template-columns:1fr; gap:44px; padding:0 34px 0 0; }
  .process .tl::before, .process .tl::after{ top:0; bottom:0; right:7px; left:auto; width:1px; height:auto; }
  .process .tl::after{ transform-origin:50% 0; transform:scaleY(0); }
  .process .tl.in::after{ transform:scaleY(1); }
  .tl-dot{ top:2px; right:-34px; }
  .tl .ill{ height:70px; max-width:150px; }
}
@media (min-width: 1101px){ .process .tl::before, .process .tl::after{ left:48px; } }   /* לא עובר מתחת לאינדקס המספרים בצד */
/* קישור "דלג לתוכן" למשתמשי מקלדת: מוסתר עד שמגיעים אליו ב-Tab */
.skip-link{ position:fixed; top:12px; right:12px; z-index:10000; padding:12px 18px; border-radius:10px; background:#141414; color:#fff; font-size:15px; font-weight:600; text-decoration:none; transform:translateY(-200%); transition:transform .3s var(--ease-move); }
.skip-link:focus{ transform:none; outline:2px solid #fff; outline-offset:2px; }

/* =========================================================
   14. טופס פנייה קצר בכרטיס Let's make order
   ========================================================= */
.f-form{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr 1.6fr auto; gap:14px 22px; align-items:end;
  padding-top:clamp(22px, 2.6vw, 36px); border-top:1px solid rgb(255 255 255 / .28); }
.f-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; }
.f-form label small{ opacity:.7; font-weight:400; }
.f-form input{ font:inherit; font-size:16px; font-weight:500; color:#fff; background:transparent; border:0; border-bottom:1px solid rgb(255 255 255 / .55);
  padding:8px 0 10px; border-radius:0; outline:0; transition:border-color .3s; width:100%; }
.f-form input::placeholder{ color:rgb(255 255 255 / .55); }
.f-form input:focus{ border-bottom-color:#fff; }
.f-form input[aria-invalid="true"]{ border-bottom-color:#FFD1E3; }
.f-form .f-send{ background:#fff !important; color:#141414 !important; height:46px; }
@media (hover: hover) and (pointer: fine){ .f-form .f-send:hover{ background:#141414 !important; color:#fff !important; } }
.f-form .f-msg{ grid-column:1 / -1; margin:0; min-height:1.2em; font-size:14px; }
@media (max-width: 900px){
  .f-form{ grid-template-columns:1fr; }
  .f-form .f-send{ justify-self:stretch; justify-content:center; }
}

/* =========================================================
   15. המסך הראשון בנייד: הכותרת "קודם סדר." והכפתורים נכנסים בלי לגלול
   טלפון קטן יותר (main.js קורא את --ph-k / --ph-min), והכפתורים עולים מעל הפסקה
   ========================================================= */
@media (max-width: 600px){
  .stage{ --ph-k:.76; --ph-min:280; }
  .hero-name{ padding-top:14px !important; }
  .hero-copy{ display:flex; flex-direction:column; }
  .hero-copy .kicker{ order:1; } .hero-copy h1{ order:2; } .hero-copy .cta{ order:3; margin-top:18px; } .hero-copy .lead{ order:4; margin:26px 0 0; }
}

/* =========================================================
   16. שירותים בלי גלילה נעוצה (data-free): במחשב, הכותרת משמאל ושלושה כרטיסים בשורה.
   כל הכרטיסים גלויים; הכרטיס שמתחת לעכבר מודגש והחותמת סופרת אותו
   ========================================================= */
@media (min-width: 901px){
  .services[data-free]{ height:auto !important; }
  .services[data-free] .sv-stage{ position:relative; height:auto; min-height:0; overflow:visible; display:grid; grid-template-columns:34% 1fr;
    align-items:end; gap:clamp(28px, 3vw, 56px); padding:clamp(110px, 11vw, 160px) var(--pad-x) clamp(90px, 9vw, 140px); }
  .services[data-free] .sv-head{ position:relative; left:auto; bottom:auto; width:auto; grid-column:1; grid-row:1; align-self:end; }
  .services[data-free] .sv-view{ position:relative; inset:auto; grid-column:2; grid-row:1; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .services[data-free] .sv-track{ position:relative; top:auto; left:auto; translate:none; transform:none !important; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2vw, 34px); padding:0; }
  .services[data-free] .sv-card{ width:auto; opacity:calc(.6 + var(--on, 0) * .4); }
  .services[data-free] .sv-badge{ left:auto; right:calc(66% + 12px); top:clamp(90px, 9vw, 130px); translate:50% 0; }
}
.sv-more-cta{ max-width:40ch; text-align:right; }   /* מיושר עם המשפט שמעליו */
.vf-info .vf-links{ display:flex; flex-wrap:wrap; gap:6px 28px; }

/* =========================================================
   17. ההדר הדביק ממשיך את קווי הגריד של הדף: שני הקווים העדינים (עמודה 1 ו-5 מתוך 6),
   וסימן חיתוך קטן איפה שכל קו פוגש את הקו התחתון של ההדר
   ========================================================= */
@media (min-width: 1101px){
  .site-header.is-stuck{
    --hl:rgb(20 20 20 / .09); --hc:rgb(20 20 20 / .45);
    --x1:calc(var(--pad-x) + (100% - 2 * var(--pad-x) - 1px) / 6);
    --x5:calc(var(--pad-x) + (100% - 2 * var(--pad-x) - 1px) * 5 / 6);
    background-image:
      linear-gradient(var(--hl), var(--hl)), linear-gradient(var(--hl), var(--hl)),
      linear-gradient(var(--hc), var(--hc)), linear-gradient(var(--hc), var(--hc)),
      linear-gradient(var(--hc), var(--hc)), linear-gradient(var(--hc), var(--hc));
    background-position:
      var(--x1) 0, var(--x5) 0,
      calc(var(--x1) - 5px + 11px / 6) 100%, calc(var(--x5) - 5px + 55px / 6) 100%,   /* פיצוי: אחוזים במיקום רקע נמדדים מרוחב פחות רוחב הפס */
      var(--x1) 100%, var(--x5) 100%;
    background-size:1px 100%, 1px 100%, 11px 1px, 11px 1px, 1px 6px, 1px 6px;
    background-repeat:no-repeat;
  }
  .site-header.is-stuck.hdr-dark{ --hl:rgb(255 255 255 / .1); --hc:rgb(255 255 255 / .5);
    background-image:
      linear-gradient(var(--hl), var(--hl)), linear-gradient(var(--hl), var(--hl)),
      linear-gradient(var(--hc), var(--hc)), linear-gradient(var(--hc), var(--hc)),
      linear-gradient(var(--hc), var(--hc)), linear-gradient(var(--hc), var(--hc)); }
}
/* אינדקס המספרים בצד: הוסר (עמוס לעין, ולא נראה על אזורים כהים עם פאנל בהיר; בגלילה בצעדים כבר לא צריך אותו) */
.sx-index{ display:none !important; }

/* =========================================================
   18. כפתורים: עיגול מלא (כמו התפריט וכל השאר באתר), והקישור עם החץ מקבל אנימציה חדשה:
   מעבר עכבר: הטקסט מהבהב בגרדיאנט, ואחריו החץ; הקו מתחת נצבע ונמשך שמאלה, ומתמלא חזרה בשחור.
   יציאת העכבר: כל התהליך הפוך (concept.js מוסיף lk-in / lk-out)
   ========================================================= */
.btn{ border-radius:999px !important; }
.vf-info .vf-links{ align-items:center; gap:14px 30px; }
.vf-info .vf-links .btn-primary{ height:44px; padding:0 22px; font-size:15px; }

.btn.btn-ghost::after{ background:currentColor; animation:none !important; transform-origin:0 0; }
.btn.btn-ghost::before{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--grad); transform-origin:0 0; transform:scaleX(0); opacity:0; }
.btn.btn-ghost .lk-t{ background:var(--grad); -webkit-background-clip:text; background-clip:text; }
.btn.btn-ghost .arr-long{ transition:none; }
/* הרצף: 0-15% הקו הצבעוני מכסה את השחור; 15-55% הוא נמשך שמאלה; 55-100% השחור מתמלא חזרה משמאל */
@keyframes lkLineC{ 0%{ opacity:0; transform:scaleX(1); } 12%{ opacity:1; transform:scaleX(1); } 55%{ opacity:1; transform:scaleX(0); } 100%{ opacity:0; transform:scaleX(0); } }
@keyframes lkLineK{ 0%, 12%{ transform:scaleX(1); } 13%, 55%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
@keyframes lkText{ 0%{ color:currentColor; -webkit-text-fill-color:currentColor; } 40%{ -webkit-text-fill-color:transparent; } 100%{ -webkit-text-fill-color:currentColor; } }
@keyframes lkArrow{ 0%{ color:inherit; transform:none; } 45%{ color:#C042E8; transform:translateX(-5px); } 100%{ color:inherit; transform:translateX(-5px); } }
@keyframes lkArrowOut{ 0%{ color:inherit; transform:translateX(-5px); } 55%{ color:#C042E8; transform:translateX(-5px); } 100%{ color:inherit; transform:none; } }
.btn.btn-ghost.lk-in::before{ animation:lkLineC .95s var(--ease-move) forwards; }
.btn.btn-ghost.lk-in::after{ animation:lkLineK .95s var(--ease-move) forwards !important; }
.btn.btn-ghost.lk-in .lk-t{ animation:lkText .8s ease-in-out; }
.btn.btn-ghost.lk-in .arr-long{ animation:lkArrow .8s .14s ease-in-out forwards; }
.btn.btn-ghost.lk-out::before{ animation:lkLineC .95s var(--ease-move) reverse forwards; }
.btn.btn-ghost.lk-out::after{ animation:lkLineK .95s var(--ease-move) reverse forwards !important; }
.btn.btn-ghost.lk-out .lk-t{ animation:lkText .8s .14s ease-in-out; }
.btn.btn-ghost.lk-out .arr-long{ animation:lkArrowOut .8s ease-in-out forwards; }
.btn.btn-ghost:hover .arr-long{ transform:none; }
/* הכפתור המלא: פחות גבוה (הריווח למעלה ולמטה היה גדול מדי) */
.btn.btn-primary{ height:44px; padding-inline:22px; }

/* =========================================================
   14ב. הטופס החדש: שדות זכוכית עגולים ליד המשפט, והחץ הגדול הוא כפתור השליחה
   (מחליף את השורה הנפרדת שהייתה למטה)
   ========================================================= */
@media (min-width: 901px){ .f-cta{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; } }
.f-cta-note .f-form{ grid-column:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; padding-top:0; border-top:0; align-items:stretch; max-width:440px; }
.f-form .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.f-form label{ display:block; }
.f-form label.wide{ grid-column:1 / -1; }
.f-cta-note .f-form input{ height:46px; padding:0 18px; border-radius:999px; border:1px solid rgb(255 255 255 / .34); background:rgb(255 255 255 / .12);
  color:#fff; font-size:15px; font-weight:500; transition:background .3s, border-color .3s; }
.f-cta-note .f-form input::placeholder{ color:rgb(255 255 255 / .72); }
.f-cta-note .f-form input:focus{ background:rgb(255 255 255 / .22); border-color:#fff; }
.f-cta-note .f-form input[aria-invalid="true"]{ border-color:#FFD1E3; background:rgb(255 255 255 / .2); }
.f-cta-note .f-form input[type="tel"]{ direction:ltr; text-align:right; }
.f-cta-note .f-form .f-msg{ grid-column:1 / -1; margin:2px 4px 0; min-height:0; font-size:13.5px; }
.f-cta-note .f-form .f-msg:empty{ display:none; }
/* העינית: "לעמוד הפרויקט" ו"לאתר החי" באותה שורה */
.vf-info{ width:min(100%, 42ch); }
.vf-info .vf-links{ flex-wrap:nowrap; gap:12px 24px; }
.vf-info .vf-links > *{ flex:none; white-space:nowrap; }

/* =========================================================
   19. שירותים: קו אחד רציף מתחת לכותרות של כל השירותים (משובץ לאורך כל המסילה),
   במקום קו נפרד בכל כרטיס. כל הכותרות יושבות על אותו קו (גובה אחיד)
   ========================================================= */
@media (min-width: 901px){
  .services .sv-meta{ border-bottom-color:transparent; min-height:calc(2.2 * clamp(26px, 2.3vw, 36px) + 14px); align-items:flex-end; }
  .services .sv-track::before{ content:""; position:absolute; left:0; right:0; top:var(--sv-line, -9999px); height:1px; background:rgb(var(--ink-rgb) / .2); pointer-events:none; }
}

/* =========================================================
   14ג. הטופס סימטרי לריבוע: העמודה (כותרת, משפט, שדות) בדיוק בגובה הריבוע,
   למעלה מול למעלה ולמטה מול למטה. במעבר עכבר על הריבוע מופיעה המילה "שליחה"
   ========================================================= */
@media (min-width: 901px){
  .f-cta{ align-items:center; }
  .f-cta-note{ display:flex; flex-direction:column; justify-content:space-between; align-self:center; }
  .f-cta-note .f-form{ margin-top:18px; }
  .f-go{ width:var(--go-size, clamp(104px, 13vw, 196px)); height:var(--go-size, auto); aspect-ratio:auto; }
}
.f-go{ position:relative; }
.f-go .f-go-t{ position:absolute; left:0; right:0; bottom:14%; text-align:center; font-size:15px; font-weight:600; letter-spacing:.02em;
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .6s var(--ease-move); pointer-events:none; }
@media (hover: hover) and (pointer: fine){
  .f-go:hover .f-go-t{ opacity:1; transform:none; }
}

/* =========================================================
   20 · שם האזור הקטן מעל הכותרת באנגלית (כמו ב-Selected Work), והאודות במסך אחד
   ========================================================= */
.hd-en{ direction:ltr; text-align:left; }
.hd-en .tag{ direction:rtl; margin:0 0 clamp(12px, 2vh, 20px) !important; }
.process .pr-head .hd-en{ margin-right:auto; }

/* האודות: "קצת עליי" יושב מעל About Sara, ונכנס יחד עם שאר האזור */
.ab-eyebrow{ position:absolute; left:var(--pad-x); margin:0; opacity:var(--rv, 0); transition:opacity .9s var(--ease-soft); }

@media (min-width: 901px){
  /* כל האזור נכנס במסך אחד, מתחת להדר */
  .about{ min-height:calc(var(--vh, 1vh) * 100); --hdr-h:84px; }
  .ab-stage{ top:var(--hdr-h); }
  .ab-title{ top:calc(4% + 30px); font-size:clamp(72px, min(10.8vw, 19vh), 204px); }
  .ab-eyebrow{ top:4%; }
  .ab-figure{ height:min(86%, 800px); }
  .ab-copy{ padding-top:calc(var(--hdr-h) + clamp(16px, 4vh, 56px)); padding-bottom:clamp(20px, 4vh, 64px); }
  .ab-copy h2{ font-size:clamp(32px, min(4.1vw, 7vh), 68px); }
  .ab-lead{ margin-top:clamp(12px, 2.4vh, 24px); line-height:1.6; font-size:clamp(15px, min(1.35vw, 2.6vh), 21px) !important; }
  .ab-stats{ margin-top:clamp(14px, 2.6vh, 40px); padding-top:clamp(12px, 2.2vh, 30px); }
  .ab-stats .n{ margin:clamp(6px, 1.2vh, 12px) 0 4px; font-size:clamp(32px, min(3.5vw, 6.6vh), 58px); }
  .ab-cta{ margin-top:clamp(14px, 2.8vh, 44px); }
}
@media (max-width: 900px){
  .ab-eyebrow{ top:-10px; }
  .ab-stage{ margin-top:30px !important; }
  .ab-copy h2{ margin-top:72px; }   /* השם הקטן עבר מעל About Sara, אז הכותרת היא הראשונה ומתרחקת מכפתור התפריט */
}

/* קישור החץ: בלי הצללה סגולה מאחורי הטקסט (נשארה מעיצוב הכפתור הממולא) */
.btn.btn-ghost, .btn.btn-ghost *{ text-shadow:none !important; }

/* =========================================================
   21 · שירותים: כל הפריים במסך מתחת להדר, והרשימה נכנסת שורה אחרי שורה
   ========================================================= */
@media (min-width: 901px){
  /* המוקאפ נמוך יותר ומתכווץ לפי גובה המסך, והכרטיס ממורכז בשטח שמתחת להדר (84px) */
  .services[data-steps] .sv-art{ aspect-ratio:auto; height:clamp(170px, calc(var(--vh, 1vh) * 100 - 480px), 400px); }
  .services[data-steps] .sv-track{ top:calc(50% + 42px); }
  .services[data-steps] .sv-badge{ margin-top:42px; }
}
/* השירות שבפוקוס: הסימונים עולים אחד אחרי השני (העיכוב קיים רק בכניסה, כי הוא מוכפל ב---on) */
.services .sv-card li{
  opacity:var(--on, 0);
  transform:translateY(calc((1 - var(--on, 0)) * 14px));
  transition:opacity .55s var(--ease-soft), transform .8s var(--ease-move);
}
.services .sv-card li::before{ transform:scale(var(--on, 0)); transition:transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay:inherit; }
.services .sv-card li:nth-child(1){ transition-delay:calc(var(--on, 0) * .35s); }
.services .sv-card li:nth-child(2){ transition-delay:calc(var(--on, 0) * .5s); }
.services .sv-card li:nth-child(3){ transition-delay:calc(var(--on, 0) * .65s); }
@media (max-width: 900px){ .services .sv-card li, .services .sv-card li::before{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .services .sv-card li, .services .sv-card li::before{ opacity:1; transform:none; transition:none; } }

/* קווי גריד שנגמרים עם האזור שלהם: נעלמים בהדרגה למעלה ולמטה, לא נחתכים בחדות */
.about::before, .testi::before, .sv-stage::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* =========================================================
   22 · טקסט דק: כל מה שהיה במשקל רגיל (400) בעברית עובר למשקל דק.
   המשקל במשתנה אחד, כדי שקל לכוונן (200 = דק מאוד, 300 = דק)
   ========================================================= */
:root{ --w-text:300; }
body, input, textarea, select, button{ font-weight:var(--w-text); }
.brand-name small, .lead, .hero .lead, .f-form label small, .f-pill, .f-pill .lbl,
.m-caption, .t-body blockquote, .ab-lead, .sv-card p, .sv-card li, .faq-sub, .sv-sub, .t-sub{ font-weight:var(--w-text) !important; }

/* =========================================================
   23 · שירותים כאקורדיון אופקי (כהה), באותה שפה של שאר האתר:
   כותרת Bingo עם מילה ראשונה שקטה, שם קטן מעליה, קישור חץ, מוקאפים של ממשק, סימוני וי
   ========================================================= */
.svc-acc{
  --ink:#fff; --ink-rgb:255 255 255; --bg:#0F0F0F;
  position:relative; z-index:2; margin:-36px 0; border-radius:36px;
  background:var(--bg); color:var(--ink); overflow:hidden; isolation:isolate;
}
/* קווי הגריד של האתר, נעלמים בהדרגה למעלה ולמטה */
.svc-acc::before{
  content:""; position:absolute; inset:0 var(--pad-x); pointer-events:none; z-index:-1;
  background-image:linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size:calc((100% - 1px) / 6) 100%; border-right:1px solid rgb(255 255 255 / .05);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.acc-wrap{
  height:calc(var(--vh, 1vh) * 100); min-height:640px; box-sizing:border-box;
  padding:calc(84px + clamp(14px, 3vh, 40px)) var(--pad-x) clamp(22px, 4vh, 52px);
  display:grid; grid-template-rows:auto minmax(0, 1fr); gap:clamp(18px, 3.4vh, 40px);
}
.acc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.svc-acc h2{
  margin:0; font-family:var(--font-display); font-weight:400; font-synthesis:none; font-variant-ligatures:none;
  font-size:clamp(56px, min(7.4vw, 12.5vh), 150px); line-height:.9; letter-spacing:-.01em; white-space:nowrap;
}
.svc-acc h2 span{ font-weight:400 !important; }
.svc-acc h2 span:first-child{ opacity:.5; }
.acc-intro{ max-width:44ch; }   /* המשפט בשתי שורות, כמו שאר משפטי המשנה באתר */
.acc-sub{ margin:0; font-size:clamp(17.5px, 1.35vw, 21px); line-height:1.6; opacity:.8; text-wrap:balance; }
.acc-cta{ margin:10px 0 0; }
.svc-acc .btn-ghost{ color:#fff; }

.acc{ display:flex; gap:12px; min-height:0; }
.svc-acc .pn{
  position:relative; flex:1 1 0; min-width:0; border-radius:28px; overflow:hidden; cursor:pointer;
  background:#181818; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09);
  transition:flex-grow .9s var(--ease-move), background .6s; outline:none;
}
.svc-acc .pn:focus-visible{ box-shadow:inset 0 0 0 2px #fff; }
.svc-acc .pn.on{ flex-grow:3.6; background:#F7F6F2; color:#141414; --ink-rgb:20 20 20; cursor:default; }
.svc-acc .pn-n{ position:absolute; top:22px; right:26px; font-family:var(--font-display); font-size:clamp(36px, min(3.6vw, 7vh), 66px); line-height:.8;
  -webkit-text-stroke:1px rgb(255 255 255 / .7); color:transparent; direction:ltr; transition:-webkit-text-stroke-color .5s; }
.svc-acc .pn.on .pn-n{ -webkit-text-stroke-color:#141414; }
.svc-acc .vt{ position:absolute; bottom:26px; right:26px; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font-size:clamp(20px, 1.7vw, 28px); font-weight:700; transition:opacity .35s; }
.svc-acc .pn.on .vt{ opacity:0; }
/* הפאנל הפתוח: המוקאפ משמאל, הטקסט מימין */
.svc-acc .pn-art{ position:absolute; left:clamp(20px, 2.2vw, 36px); top:clamp(20px, 3vh, 36px); bottom:clamp(20px, 3vh, 36px); width:48%;
  display:flex; align-items:center; opacity:0; transform:translateY(16px) scale(.97); transition:opacity .3s, transform .3s; pointer-events:none; }
.svc-acc .pn.on .pn-art{ opacity:1; transform:none; transition:opacity .7s .3s, transform 1s .3s var(--ease-move); }
.svc-acc .pn-art .sv-art{ width:100%; max-height:100%; aspect-ratio:1.12; transform:none; box-sizing:border-box; }
.svc-acc .pn-bd{ position:absolute; right:clamp(22px, 2.4vw, 40px); bottom:clamp(22px, 3.4vh, 40px); width:calc(52% - clamp(60px, 6vw, 100px));
  display:grid; gap:12px; opacity:0; transform:translateY(16px); transition:opacity .25s, transform .25s; pointer-events:none; }
.svc-acc .pn.on .pn-bd{ opacity:1; transform:none; transition:opacity .6s .35s, transform .9s .35s var(--ease-move); }
.svc-acc .pn-bd h3{ margin:0 0 2px; padding-bottom:12px; border-bottom:1px solid rgb(20 20 20 / .16); font-size:clamp(24px, 2.2vw, 36px); font-weight:700; line-height:1.1; }
.svc-acc .pn-bd p{ margin:0; font-size:clamp(15px, 1.1vw, 17px); line-height:1.6; opacity:.78; text-wrap:balance; }
.svc-acc .pn-bd ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; }
.svc-acc .pn-bd li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.45;
  opacity:var(--on, 0); transform:translateY(calc((1 - var(--on, 0)) * 14px)); transition:opacity .55s var(--ease-soft), transform .8s var(--ease-move); }
.svc-acc .pn-bd li:nth-child(1){ transition-delay:calc(var(--on, 0) * .55s); }
.svc-acc .pn-bd li:nth-child(2){ transition-delay:calc(var(--on, 0) * .7s); }
.svc-acc .pn-bd li:nth-child(3){ transition-delay:calc(var(--on, 0) * .85s); }
.svc-acc .pn-bd li::before{ content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; background:#141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 8.200 2.300 2.300 4.700-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* הפס שמתמלא עד המעבר לשירות הבא */
.svc-acc .bar{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--grad); }
.svc-acc .pn.on .bar{ animation:accBar 5.2s linear forwards; }
.acc.hold .pn.on .bar, .acc.idle .pn.on .bar{ animation-play-state:paused; }
@keyframes accBar{ to{ width:100%; } }

/* המוקאפ של דף הנחיתה (וגם של שלב העיצוב בתהליך) */
.ui-lp-hero{ flex:1; min-height:0; border-radius:12px; background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover;
  display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 8%; }
.ui-lp-hero .ui-h{ background:#fff; }
.ui-lp-form{ gap:8px; }
.ui-field{ flex:1; height:26px; border-radius:99px; border:1px solid rgb(var(--ink-rgb) / .22); }

@media (max-width: 900px){
  .svc-acc{ margin:-26px 0; border-radius:26px; }
  .acc-wrap{ height:auto; min-height:0; padding:72px var(--pad-x) 56px; }
  .acc-head{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:0; }
  .acc-head .hd-en{ margin-bottom:18px; }
  .svc-acc h2{ font-size:clamp(52px, 15vw, 96px); }
  .acc-intro{ margin-bottom:26px; }
  .acc{ flex-direction:column; }
  .svc-acc .pn{ flex:none; min-height:74px; transition:min-height .8s var(--ease-move), background .6s; }
  .svc-acc .pn.on{ min-height:620px; }
  .svc-acc .vt{ writing-mode:horizontal-tb; transform:none; bottom:auto; top:26px; right:96px; }
  .svc-acc .pn-art{ left:20px; right:20px; top:84px; bottom:auto; width:auto; height:240px; }
  .svc-acc .pn-bd{ left:20px; right:20px; bottom:24px; width:auto; }
}
@media (prefers-reduced-motion: reduce){ .svc-acc .pn-bd li{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   24 · התהליך בעיצוב שהיה של השירותים: המוקאפים של כל שלב
   ========================================================= */
.ui-pile{ position:relative; flex:1; min-height:0; }
.ui-pile .ui-chip{ position:absolute; left:var(--x); top:var(--y); background:var(--paper, #F7F6F2);
  transform:rotate(calc(var(--r) * (1 - var(--on, 0) * .6))); transition:transform 1s .2s var(--ease-move); }
.ui-pile .ui-chip.on{ background:rgb(var(--ink-rgb)); }
.ui-tree{ width:100%; height:100%; overflow:visible; }
.ui-tree .ln{ fill:none; stroke:rgb(255 255 255 / .35); stroke-width:1.4; stroke-dasharray:420; stroke-dashoffset:calc(420 - var(--on, 0) * 420); transition:stroke-dashoffset 1.2s .25s var(--ease-move); }
.ui-tree .bx{ fill:none; stroke:rgb(255 255 255 / .55); stroke-width:1.4; }
.ui-tree .bx.on{ fill:#fff; stroke:none; }
.ui-tree .bx.s{ stroke:rgb(255 255 255 / .3); }
.ui-swatch{ display:flex; align-items:center; gap:8px; }
.ui-swatch i{ width:22px; height:22px; border-radius:50%; background:#F0437F; }
.ui-swatch i:nth-child(2){ background:#B23CF0; }
.ui-swatch i:nth-child(3){ background:#6D45F5; }
.ui-swatch b{ margin-inline-start:auto; font-family:var(--font-display); font-weight:400; font-size:26px; direction:ltr; }
.ui-tog{ width:34px; height:20px; border-radius:99px; background:var(--grad); position:relative; }
.ui-tog::after{ content:""; position:absolute; top:3px; left:calc(3px + var(--on, 0) * 14px); width:14px; height:14px; border-radius:50%; background:#fff; transition:left .6s .5s var(--ease-move); }
.svc-acc .pn:nth-child(2) .sv-art{ background:#141414; --ink-rgb:255 255 255; color:#fff; }   /* אתר התדמית: מוקאפ כהה, כמו שהיה בכרטיס */
@media (max-width: 900px){ .svc-acc .bar{ display:none; } }

/* =========================================================
   23ב · האקורדיון בבהיר: נייר, כותרות כהות, מסגרות עדינות (כמו המשבצות בשאלות הנפוצות)
   ========================================================= */
.svc-acc{ --ink:#141414; --ink-rgb:20 20 20; --bg:var(--paper, #F7F6F2); margin:0; border-radius:0; z-index:1; }
.svc-acc::before{ background-image:linear-gradient(to right, rgb(20 20 20 / .06) 1px, transparent 1px); border-right-color:rgb(20 20 20 / .06); }
.svc-acc .btn-ghost{ color:inherit; }
.acc-sub{ white-space:nowrap; }   /* שתי שורות קבועות (שבירה ידנית), כמו שאר משפטי המשנה */
.svc-acc .pn{ background:transparent; box-shadow:inset 0 0 0 1px rgb(20 20 20 / .12); transition:flex-grow .9s var(--ease-move), background .6s, box-shadow .6s; }
.svc-acc .pn:not(.on):hover{ box-shadow:inset 0 0 0 1px rgb(20 20 20 / .3); }
.svc-acc .pn.on{ background:#fff; box-shadow:inset 0 0 0 1px rgb(20 20 20 / .1), 0 30px 60px -40px rgb(20 20 20 / .35); }
.svc-acc .pn-n{ -webkit-text-stroke-color:rgb(20 20 20 / .55); }
.svc-acc .pn.on .pn-n{ -webkit-text-stroke-color:#141414; }
.svc-acc .pn-art .sv-art{ background:var(--paper, #F7F6F2); }
.svc-acc .pn-art .sv-art .ui-prod, .svc-acc .pn-art .sv-art .ui-order{ background:#fff; }
.svc-acc .pn:nth-child(2) .pn-art .sv-art{ background:#141414; }
@media (max-width: 900px){ .svc-acc{ margin:0; border-radius:0; } .acc-sub{ white-space:normal; } .acc-sub br{ display:none; } }

/* המספרים באקורדיון: מלאים, לא חלולים (סגור: אפור, פתוח: כהה) */
.svc-acc .pn-n{ -webkit-text-stroke:0 !important; color:rgb(20 20 20 / .32); transition:color .5s; }
.svc-acc .pn.on .pn-n{ color:#141414; }

/* =========================================================
   23ג · האקורדיון בשפת הגריד של האתר: עמודות ישרות עם קווים דקים משותפים
   (במקום כרטיסים מעוגלים), סימני חיתוך בפינות כמו בשאלות הנפוצות,
   ובלי קווי הרקע באזור הזה, כדי שהקווים לא יתערבבו
   ========================================================= */
.svc-acc::before{ display:none; }
.svc-acc .acc{ --ln:rgb(20 20 20 / .14); gap:0; position:relative; border:1px solid var(--ln); }
.svc-acc .pn, .svc-acc .pn.on{ border-radius:0; box-shadow:none; }
.svc-acc .pn + .pn{ border-right:1px solid var(--ln); }
.svc-acc .pn:not(.on):hover{ box-shadow:none; background:rgb(20 20 20 / .025); }
.svc-acc .pn.on{ background:#fff; }
.svc-acc .pn-art .sv-art{ border-radius:0; box-shadow:inset 0 0 0 1px rgb(20 20 20 / .08); }
/* סימני חיתוך בארבע הפינות החיצוניות */
.svc-acc .acc::after{
  content:""; position:absolute; inset:-6px; pointer-events:none;
  background:
    linear-gradient(#141414, #141414) 0 5px / 11px 1px no-repeat, linear-gradient(#141414, #141414) 5px 0 / 1px 11px no-repeat,
    linear-gradient(#141414, #141414) 100% 5px / 11px 1px no-repeat, linear-gradient(#141414, #141414) calc(100% - 5px) 0 / 1px 11px no-repeat,
    linear-gradient(#141414, #141414) 0 calc(100% - 5px) / 11px 1px no-repeat, linear-gradient(#141414, #141414) 5px 100% / 1px 11px no-repeat,
    linear-gradient(#141414, #141414) 100% calc(100% - 5px) / 11px 1px no-repeat, linear-gradient(#141414, #141414) calc(100% - 5px) 100% / 1px 11px no-repeat;
}
/* הפס הצבעוני מתמלא מימין לשמאל, בכיוון הקריאה */
.svc-acc .bar{ left:auto; right:0; }
@media (max-width: 900px){
  .svc-acc .pn + .pn{ border-right:0; border-top:1px solid var(--ln); }
}

/* המספרים באודות: המספר למעלה, מתחתיו הכותרת (בלי הנקודה), ואז ההסבר */
.ab-stats li{ display:flex; flex-direction:column; align-items:flex-start; }
.ab-stats .n{ order:-1; margin:0 0 10px !important; }
.ab-stats .k{ font-size:15px; font-weight:600; opacity:.9; }
.ab-stats .k::before{ display:none; }
.ab-stats .d{ margin-top:4px; }

/* דף הקונספט עם הגלילה החלקה: אזור המשפט ארוך יותר, כדי שהאלמנטים סביב "Beauty follows order." לא יחלפו מהר מדי */
@media (min-width: 901px){ .manifesto.mf-long{ height:calc(var(--vh, 1vh) * 310) !important; } }
.faq-sub{ max-width:none !important; }
@media (min-width: 901px){ .faq-sub{ white-space:nowrap; } }

/* ביצועים: אזור מחוץ למסך לא מריץ אנימציות (concept.js סעיף 18) */
.is-off, .is-off *, .is-off ::before, .is-off ::after, .is-off *::before, .is-off *::after{ animation-play-state:paused !important; }

/* ביצועים: בהדר (שיש לו טשטוש רקע) שום דבר לא מונפש כל הזמן. אחרת כל פריים מצייר מחדש את הטשטוש של ההדר כולו */
.site-header *, .site-header *::before, .site-header *::after{ animation-play-state:paused !important; }
.view-cursor:not(.on), .view-cursor:not(.on) *{ animation-play-state:paused !important; }

/* האקורדיון על הגריד של האתר (6 עמודות בין השוליים): פאנל סגור = עמודה אחת, הפאנל הפתוח = שלוש עמודות */
@media (min-width: 901px){
  .svc-acc .acc{ border-left:0; border-right:0; }
  .svc-acc .pn{ flex:0 0 calc(100% / 6); transition:flex-basis .9s var(--ease-move), background .6s; }
  .svc-acc .pn.on{ flex:0 0 calc(100% / 2); }
}

/* קווי הגריד באודות על אותו גריד של כל האתר (6 עמודות בין השוליים): שלוש העמודות מאחורי התמונה,
   כך שהם ממשיכים בדיוק את הקווים של השירותים ושל התהליך, והקו מעל המספרים נפגש עם האחרון */
@media (min-width: 901px){
  .about::before{ left:var(--pad-x) !important; right:auto !important; width:calc((100% - 2 * var(--pad-x)) / 2 + 1px) !important; background-size:calc((100% - 1px) / 3) 100% !important; border-right:0 !important; }
}

/* =========================================================
   25 · אנימציות קטנות (concept.js סעיף 19). פעילות רק עם .mx על ה-html (לא למי שביקש פחות תנועה)
   ========================================================= */
/* 1 + 5 · מסיכה: הטקסט עולה מלמטה לתוך מסגרת */
.mx .mk{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.mx .sv-meta .num .mk{ display:inline-block; vertical-align:bottom; }
.mx .mk-in{ display:block; transform:translateY(110%); transition:transform 1s var(--ease-move) var(--mk-d, 0ms); }
.mx .mk-show .mk-in{ transform:none; }
.mx .mk-on .mk-in{ transform:translateY(calc((1 - var(--on, 0)) * 110%)); transition-delay:calc(var(--on, 0) * .3s); }

/* 3 · שם האזור: הטקסט נחשף מימין לשמאל, רגע אחרי שהכוכב מסתובב */
.mx .tag .tag-t{ display:inline-block; clip-path:inset(0 0 0 100%); transition:clip-path 1s var(--ease-move) .25s; }
.mx .tag.tag-shown .tag-t{ clip-path:inset(0 0 0 0); }

/* 4 · קווים שנמתחים מימין לשמאל, כמו סרגל ששרטט אותם */
.mx .ab-stats{ position:relative; border-top-color:transparent !important; }
.mx .ab-stats::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:rgb(var(--ink-rgb, 20 20 20) / .14);
  transform:scaleX(0); transform-origin:100% 0; transition:transform 1.5s var(--ease-move); }
.mx .ab-stats.ln-draw::before{ transform:none; }
.mx .svc-acc .acc{ border-top-color:transparent !important; border-bottom-color:transparent !important;
  background:linear-gradient(var(--ln), var(--ln)) 100% 0 / 0% 1px no-repeat, linear-gradient(var(--ln), var(--ln)) 100% 100% / 0% 1px no-repeat;
  transition:background-size 1.6s var(--ease-move); }
.mx .svc-acc .acc.ln-draw{ background-size:100% 1px, 100% 1px; }
.mx .services .sv-track::before{ transform:scaleX(0); transform-origin:100% 0; transition:transform 1.8s var(--ease-move); }
.mx .services.ln-draw .sv-track::before{ transform:none; }

/* 6 · המוקאפים: כשהשירות או השלב נפתחים, הפריטים מסתדרים במקום אחד אחרי השני */
.mx .sv-art .ui-prod:not(.pick){ transform:translateY(calc((1 - var(--on, 0)) * 18px)); opacity:calc(.45 + var(--on, 0) * .55);
  transition:transform 1s var(--ease-move), opacity .7s; }
.mx .sv-art .ui-prod:nth-child(1){ transition-delay:calc(var(--on, 0) * .12s); }
.mx .sv-art .ui-prod:nth-child(3){ transition-delay:calc(var(--on, 0) * .28s); }
.mx .ui-swatch i{ transform:scale(calc(.3 + var(--on, 0) * .7)); transition:transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.mx .ui-swatch i:nth-child(2){ transition-delay:calc(var(--on, 0) * .1s); }
.mx .ui-swatch i:nth-child(3){ transition-delay:calc(var(--on, 0) * .2s); }
.mx .ui-cols > div{ transform:translateY(calc((1 - var(--on, 0)) * 14px)); transition:transform .9s var(--ease-move); }
.mx .ui-cols > div:nth-child(2){ transition-delay:calc(var(--on, 0) * .1s); }
.mx .ui-cols > div:nth-child(3){ transition-delay:calc(var(--on, 0) * .2s); }
.mx .ui-lp-form > *{ transform:translateY(calc((1 - var(--on, 0)) * 10px)); opacity:calc(.4 + var(--on, 0) * .6); transition:transform .8s var(--ease-move) .2s, opacity .6s .2s; }


/* =========================================================
   26 · הטעינה: המשפט מוקלד מתחת למונה, ואז עף אל הכותרת במסך הפתיחה (concept.js סעיף 6)
   ========================================================= */
.preload .pl-type{ position:absolute; left:50%; top:calc(50% + 62px); transform:translate(-50%, 0) scale(var(--s, .46)); transform-origin:50% 0;
  display:flex; flex-direction:column; align-items:center; direction:rtl; pointer-events:none; }
.preload .pl-tl{ display:block; width:max-content; white-space:nowrap; min-height:1em; }
.preload .pl-caret{ display:inline-block; width:.06em; height:.85em; margin-inline-start:.08em; vertical-align:-.08em; background:currentColor; animation:plCaret .9s steps(1) infinite; }
@keyframes plCaret{ 50%{ opacity:0; } }
.pl-fly{ position:fixed; z-index:10001; margin:0; white-space:nowrap; direction:rtl; text-align:right; transform-origin:100% 0; pointer-events:none; }
/* בזמן שהמשפט עף, הווילון של הטעינה עולה בלי שהתוכן שלו (המונה) "נמרח" */
.preload.out .pl-type{ visibility:hidden; }
/* הלוגו שמסתדר מתחת למשפט בטעינה (concept.js סעיף 6, SW_TRY.plLogo), ועף להדר */
.preload .pl-logo{ position:absolute; left:50%; top:calc(50% + 190px); transform:translateX(-50%); pointer-events:none; }
.preload .pl-logo .logo{ font-size:44px; display:inline-flex; align-items:baseline; }
.preload .pl-logo i{ display:inline-block; font-style:normal; }
.pl-fly-logo{ position:fixed; z-index:10001; margin:0; transform-origin:0 0; pointer-events:none; display:inline-flex; align-items:baseline; }
@media (max-width: 900px){ .preload .pl-logo{ top:calc(50% + 150px); } .preload .pl-logo .logo{ font-size:32px; } }

/* =========================================================
   27 · מסך הפתיחה בנייד: קודם מה אני נותנת (הכותרת והכפתורים), אחר כך הטלפון, ו-Sara Weizman למטה
   ========================================================= */
@media (max-width: 900px){
  .hero{ display:flex; flex-direction:column; }
  .hero > .hero-copy{ order:1; padding-top:24px !important; }
  .hero > .stage{ order:2; }
  .hero > .hero-name{ order:3; padding-top:6px !important; padding-bottom:8px; }
}

/* =========================================================
   28 · השירותים: ספרות גדולות יותר, ובנייד אקורדיון קומפקטי שנפתח בלחיצה
   (הראשון פתוח מהתחלה; פאנל סגור הוא שורה אחת: מספר + שם; בלי גבהים קבועים)
   ========================================================= */
.svc-acc .pn-n{ font-size:clamp(46px, min(4.8vw, 9vh), 88px) !important; }
@media (max-width: 900px){
  .acc-wrap{ padding:56px var(--pad-x) 40px !important; gap:22px !important; }
  .acc-head .hd-en{ margin-bottom:10px !important; }
  .acc-intro{ margin-bottom:0 !important; }
  .svc-acc .acc{ gap:0; }
  .svc-acc .pn, .svc-acc .pn.on{ min-height:0 !important; height:auto; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:16px;
    padding:14px 16px; border-radius:0; transition:background .5s; cursor:pointer; }
  .svc-acc .pn-n{ position:static; font-size:46px !important; line-height:.85; }
  .svc-acc .vt{ position:static; writing-mode:horizontal-tb; transform:none; font-size:20px; opacity:1 !important; }
  .svc-acc .pn.on .vt{ display:none; }
  .svc-acc .pn-art, .svc-acc .pn-bd{ display:none; position:static; width:auto; height:auto; inset:auto; grid-column:1 / -1; }
  .svc-acc .pn.on .pn-art{ display:flex; margin-top:14px; height:190px; }
  .svc-acc .pn.on .pn-bd{ display:grid; margin-top:16px; gap:10px; }
  .svc-acc .pn-art .sv-art{ aspect-ratio:auto; height:100%; }
  .svc-acc .pn-bd h3{ font-size:24px; padding-bottom:10px; }
}

/* =========================================================
   29 · התהליך בנייד: הבמה ננעצת, והגלילה למטה מזיזה את השלבים לרוחב (main.js: data-pin-mobile)
   ========================================================= */
@media (max-width: 900px){
  .services[data-pin-mobile] .sv-stage{ position:sticky; top:0; height:100svh; min-height:0; padding:70px 0 18px; overflow:hidden; display:flex; flex-direction:column; direction:ltr; }
  .services[data-pin-mobile] .sv-head h2{ font-size:clamp(46px, 13.5vw, 80px); }
  .services[data-pin-mobile] .sv-head .sv-sub, .services[data-pin-mobile] .sv-head .sv-more-cta{ display:none; }
  .services[data-pin-mobile] .sv-badge{ top:70px; width:84px; }
  .services[data-pin-mobile] .sv-view{ flex:1; min-height:0; margin-top:16px; overflow:hidden !important; scroll-snap-type:none; direction:ltr; }
  .services[data-pin-mobile] .sv-track{ transform:translate3d(var(--tx, 0px), 0, 0) !important; padding:0 11vw !important; }   /* (100 - 78) / 2: כל שלב נעצר בדיוק במרכז */
  .services[data-pin-mobile] .sv-card{ width:78vw; }
  .services[data-pin-mobile] .sv-art{ aspect-ratio:auto; height:min(30vh, 250px); }
}

/* האודות בנייד: התמונה יורדת קצת, כך שהיא רק נוגסת בתחתית של "Sara" ולא מסתירה את ה-r וה-a */
@media (max-width: 900px){ .ab-figure{ translate:-50% 28% !important; } .ab-stage{ overflow:hidden; } }

/* =========================================================
   30 · פוטר בנייד: פרטי הקשר מיושרים לשמאל, שורת הזכויות במרכז, ופס אנכי דק בין הקישורים המשפטיים
   ========================================================= */
@media (max-width: 900px){
  .f-cols > .f-col:not(nav){ text-align:left; }
  .f-cols > .f-col:not(nav) ul{ align-items:flex-end; }
  .f-bar{ align-items:center !important; text-align:center; }
  .f-bar .f-right, .f-bar .f-left{ width:100%; justify-content:center !important; align-items:center !important; }
  .f-bar ul{ justify-content:center; }
  .f-bar .f-left ul{ gap:0; }
  .f-bar .f-left li::before{ display:none !important; }
  .f-bar .f-left li + li{ border-inline-start:1px solid rgb(255 255 255 / .28); margin-inline-start:18px; padding-inline-start:18px; }
}

/* =========================================================
   31 · התפריט בנייד בשפה של האתר: נייר בהיר, קווי הגריד, טקסט דק בדיו,
   מספרים אפורים קטנים כמו בשמות האזורים, וכוכב בגרדיאנט ליד העמוד הנוכחי
   ========================================================= */
@media (max-width: 1100px){
  .menu{ color:#141414; --m-acc:#141414; }
  .menu-bubble{ background:var(--paper, #F7F6F2); }
  .menu-bubble::before{ background-image:linear-gradient(to right, rgb(20 20 20 / .06) 1px, transparent 1px); border-right-color:rgb(20 20 20 / .06); }
  .menu-bubble::after{ display:none; }
  .menu-open .menu-toggle{ color:#141414; box-shadow:0 0 0 1px rgb(20 20 20 / .2); }
  .menu-top .brand-mark{ border-color:rgb(20 20 20 / .25); }
  .menu-list{ gap:clamp(0px, .6vh, 8px); }
  .menu-list a{ font-size:clamp(34px, min(10.5vw, 6.6vh), 76px); font-weight:200; line-height:1.1; opacity:.5; }
  .menu-list a.is-current, .menu-list a:hover, .menu-list a:focus-visible, .menu-list a:active{ opacity:1; font-weight:600; }
  .menu-list a small{ font-size:12px; font-weight:500; letter-spacing:.06em; color:rgb(20 20 20 / .45) !important; -webkit-text-fill-color:rgb(20 20 20 / .45); background:none !important; translate:0 -1.1em; }
  /* העמוד הנוכחי: הכוכב של האתר בגרדיאנט, במקום הנקודה הכתומה */
  .menu-list a::after{ width:.32em; height:.32em; border-radius:0; background:var(--grad);
    -webkit-mask:var(--star-m, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E")) center / contain no-repeat;
            mask:var(--star-m, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E")) center / contain no-repeat; }
  .menu-cta .btn{ --ink:#fff; --bg:#141414; background:#141414 !important; color:#fff !important; height:54px; border-radius:999px; }
  .menu-foot{ border-top-color:rgb(20 20 20 / .12); }
  .menu-foot a + a{ border-inline-start-color:rgb(20 20 20 / .12); }
  .menu-foot a:hover, .menu-foot a:focus-visible{ background:rgb(20 20 20 / .04); }
}

/* האודות בנייד: קודם הטקסט והמספרים, ובסוף About Sara עם התמונה, שנחתכת אל תוך האזור השחור של ההמלצות (כמו במחשב) */
@media (max-width: 900px){
  .ab-copy h2{ order:1 !important; margin-top:64px !important; }
  .ab-lead{ order:2 !important; }
  .ab-lead + .ab-lead{ order:3 !important; }
  .ab-stats{ order:4 !important; }
  .ab-cta{ order:5 !important; margin-bottom:0 !important; }
  .ab-stage{ order:9 !important; margin-top:36px !important; }
  .ab-figure .inner{ -webkit-mask-image:none !important; mask-image:none !important; }
}

/* מסך הפתיחה בנייד: הכפתורים אחרי הפסקה */
@media (max-width: 600px){ .hero-copy .lead{ order:3 !important; margin:16px 0 0 !important; } .hero-copy .cta{ order:4 !important; margin-top:22px !important; } }

/* בנייד התגיות סביב המשפט עומדות במקום (בלי ריחוף), מיושרות לסימני החיתוך (concept.js סעיף 20) */
@media (max-width: 900px){ .manifesto .chip b{ transform:none !important; } }

/* Selected Work בנייד, באותו קונספט כמו במחשב: יותר אוויר מעל ומתחת לפריים, הפרויקט הקודם והבא מציצים מטושטשים,
   והסרגל עם הקווים בצד */
@media (max-width: 900px){
  .vf-window{ height:calc(var(--frame-h) + 170px) !important; clip-path:inset(0 -24px) !important; }
  .vf-fade{ display:block !important; height:70px !important; }
  .vf-fade.top{ background:linear-gradient(var(--paper, #F7F6F2) 25%, transparent) !important; }
  .vf-stage{ gap:10px !important; }
  .vf-ticks{ display:block !important; right:3px !important; width:12px !important; height:150px !important; }
  .vf-ticks b{ width:16px !important; }
}

/* התהליך בנייד (נעוץ): גם כאן הסימונים נכנסים אחד אחרי השני בשלב שבפוקוס, כמו במחשב */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .services[data-pin-mobile] .sv-card li{ opacity:var(--on, 0); transform:translateY(calc((1 - var(--on, 0)) * 14px)); }
  .services[data-pin-mobile] .sv-card li::before{ transform:scale(var(--on, 0)); }
}

/* =========================================================
   32 · כותרות באנגלית: שורות צפופות יותר · בנייד: יותר אוויר בין האזורים, ושם האזור באודות לא נחתך
   ========================================================= */
.svc-acc h2, .faq-head h2, .t-head h2, .sv-head h2, .f-cta h2, .ab-title{ line-height:.8 !important; }
.sv-head h2 span, .f-cta h2 span{ padding-bottom:.16em; margin-bottom:-.16em; }
@media (max-width: 900px){
  .ab-eyebrow{ top:6px !important; }
  .ab-title{ top:40px !important; }
  .acc-wrap{ padding-top:104px !important; padding-bottom:80px !important; }
  .ab-copy h2{ margin-top:110px !important; }
  .ab-stage{ margin-top:72px !important; }
  .testi{ padding-top:96px !important; }
  .faq-panel{ padding-top:72px !important; padding-bottom:64px !important; }
  .faq{ padding-top:40px !important; }
  .vf-stage{ padding-top:96px !important; }
}

/* הקישורים המשפטיים בשורה התחתונה: פס אנכי דק ביניהם (במקום נקודה), בכל המסכים */
.f-bar .f-left ul{ gap:0 !important; }
.f-bar .f-left li::before{ display:none !important; }
.f-bar .f-left li + li{ border-inline-start:1px solid rgb(255 255 255 / .28); margin-inline-start:18px; padding-inline-start:18px; }

/* =========================================================
   33 · מסך פתיחה, גרסה ב (data-hero-v2): ההבטחה ללקוח היא הכותרת הגדולה, Sara Weizman קטן יותר, כמו חתימה
   ========================================================= */
@media (min-width: 901px){
  [data-hero-v2] .hero-copy{ width:min(560px, 36vw); top:50%; translate:0 -54%; }
  [data-hero-v2] .hero-copy .kicker{ font-size:15px; margin-bottom:22px; }
  [data-hero-v2] .hero-copy h1{ font-size:clamp(46px, 4.7vw, 88px); line-height:1.02; letter-spacing:-.015em; }
  [data-hero-v2] .hero-copy .lead{ max-width:40ch; margin:24px 0 30px; }
  [data-hero-v2] .display-name{ font-size:clamp(46px, 5vw, 92px) !important; }
  [data-hero-v2] .hero-name .eyebrow{ font-size:11px; }
}
@media (max-width: 900px){
  [data-hero-v2] .hero-copy h1{ font-size:clamp(40px, 11.5vw, 60px); line-height:1.04; }
  [data-hero-v2] .display-name{ font-size:clamp(46px, 14vw, 84px) !important; }
}

/* המשפט באנגלית מתחת לשם */
.hero-name .meta{ display:block; }
html.hero-enter .hero-name .lead{ opacity:0; }
/* גרסה ב, במחשב: צד ימין = הכותרת והפסקה; צד שמאל = השם, המשפט באנגלית והכפתורים */
.hero-name .cta-side{ display:none; }
html.hero-enter .hero-name .cta-side{ opacity:0; }
@media (min-width: 901px){
  [data-hero-v2] .hero-copy .cta{ display:none; }
  [data-hero-v2] .hero-name .cta-side{ display:flex; justify-content:flex-end; margin-top:30px; pointer-events:auto; }   /* מיושר לקצה השמאלי של השם */
}


/* Selected Work רך יותר (לבקשת המעצבת): פינות מעוגלות לתמונות, וסימני החיתוך מעוגלים בהתאם */
.vf-shot{ border-radius:26px; }
.vf-crop i:nth-child(1){ border-top-right-radius:14px; }
.vf-crop i:nth-child(2){ border-top-left-radius:14px; }
.vf-crop i:nth-child(3){ border-bottom-right-radius:14px; }
.vf-crop i:nth-child(4){ border-bottom-left-radius:14px; }
@media (max-width: 900px){ .vf-shot{ border-radius:18px; } }

/* המשפט "Beauty follows order.": האותיות מתבלגנות במקום לפי הגלילה (heading-scatter: --mf-sc), לפני שהן יוצאות לפרויקטים */
.sentence .ch{ translate:calc(var(--jx, 0) * var(--mf-sc, 0) * 1px) calc(var(--jy, 0) * var(--mf-sc, 0) * 1px); rotate:calc(var(--jr, 0) * var(--mf-sc, 0) * 1deg); }

/* התהליך בין ההמלצות (כהה) לשאלות (מסגרת כהה): כרטיס בהיר עם פינות מעוגלות, כמו שאר המעברים באתר */
.testi + .services{ position:relative; z-index:3; margin-top:-36px; border-radius:36px 36px 0 0; }
/* התהליך והשאלות על אותו רקע בהיר, ברצף, בלי פס כהה ביניהם; הפינות המעוגלות רק בסוף, מעל הפוטר */
.services + .faq{ background:transparent; padding:0 !important; }
.services + .faq .faq-panel{ border-radius:0 0 36px 36px; }
@media (max-width: 900px){ .testi + .services{ margin-top:-26px; border-radius:26px 26px 0 0; } .services + .faq .faq-panel{ border-radius:0 0 26px 26px; } }

/* גרסה א (דפי הקונספט בלי data-hero-v2): Sara Weizman נשאר גדול, אבל שקוף ושקט, כדי שהעין תלך קודם לכותרת בעברית */
[data-hero-stay]:not([data-hero-v2]) .display-name{ color:rgb(var(--ink-rgb, 20 20 20) / .2); }

/* גרסה א: סימני החיתוך של Selected Work חדים (בגרסה ב הם מעוגלים) */
[data-hero-stay]:not([data-hero-v2]) .vf-crop i{ border-radius:0 !important; }

/* ההמלצות נעוצות בגלילה החלקה (concept.js סעיף 22) */
.t-pin{ position:sticky; }
[data-smooth] .testi{ overflow:clip; }   /* overflow:hidden מבטל את ה-sticky; clip חותך בלי לבטל */

/* =========================================================
   34 · ריווח אחיד בין השאלות לכרטיס הצבעוני (כמו המסגרת השחורה בצדדים),
   והשאלות + הכרטיס נעוצים רגע בגלילה החלקה
   ========================================================= */
.site-footer{ padding-top:clamp(10px, 1.6vw, 24px); }
.f-cta.t-pin{ position:sticky; }
[data-smooth] .faq{ overflow:clip; }

/* =========================================================
   35 · הפרויקטים בגלילה החלקה: פחות גלילה בין פרויקט לפרויקט,
   והעינית יורדת קצת למטה, כדי שיהיה אוויר בינה לבין הכותרת
   ========================================================= */
[data-smooth] .projects.vf{ height:calc(var(--n) * 50vh + 162vh); }
@media (min-width: 901px){
  .vf-stage > :not(.p-head){ translate:0 clamp(18px, 4.5vh, 48px); }
}

/* =========================================================
   36 · בנייד: הכתם הצבעוני מאחורי הטלפון בפתיחה ממורכז בדיוק מאחוריו
   (צורה עגולה ורכה במקום הכתם הא-סימטרי, והגוונים זזים סביב המרכז)
   ========================================================= */
@media (max-width: 900px){
  .hero .stage::before, .hero .stage::after, .hues-hero{
    translate:-50% -50% !important; rotate:none !important; animation:none !important;
    -webkit-mask:radial-gradient(closest-side, #000 55%, transparent) center / contain no-repeat !important;
            mask:radial-gradient(closest-side, #000 55%, transparent) center / contain no-repeat !important;
  }
  .hues-hero i{ left:21% !important; top:21% !important; width:58% !important; }
  .hues-hero i:nth-child(1){ animation:hueM1 9s ease-in-out infinite alternate !important; }
  .hues-hero i:nth-child(2){ animation:hueM2 11s ease-in-out infinite alternate !important; }
  .hues-hero i:nth-child(3){ animation:hueM3 8s ease-in-out infinite alternate !important; }
  .hues-hero i:nth-child(4){ animation:hueM4 10s ease-in-out infinite alternate !important; }
}
@keyframes hueM1{ 0%{ transform:translate(-14%,-10%) scale(1); }  100%{ transform:translate(14%,10%) scale(1.1); } }
@keyframes hueM2{ 0%{ transform:translate(12%,-12%) scale(1.05); } 100%{ transform:translate(-12%,12%) scale(.95); } }
@keyframes hueM3{ 0%{ transform:translate(-10%,14%); }            100%{ transform:translate(10%,-14%) scale(1.08); } }
@keyframes hueM4{ 0%{ transform:translate(10%,10%) scale(.9); }   100%{ transform:translate(-10%,-10%) scale(1.05); } }

/* קישור לאתר החי שהוסתר (פרויקט בלי קישור) */
.vf-info [hidden]{ display:none !important; }

/* בלי הפתיחה (no-pl): לא מציירים את מסך הטעינה בכלל, גם לא לרגע */
.no-pl .preload{ display:none !important; }

/* כותרת שנבנית מהאותיות המעופפות: בלי כניסה משלה (שקיפות/תזוזה), אחרת אחרי הנחיתה היא שקופה לרגע ו"נעלמת" */
[data-smooth] h2.hs-on, [data-smooth] .hs-on h2{ opacity:1 !important; }

/* =========================================================
   ביצועים בגלילה (נמדד בהקלטות): הצבע החי (נקודות שזזות, --mesh-live) על עשרות משטחים קטנים
   (עיגולי ההמלצות והאטבים, המספרים באודות ובתהליך, הגלולות בפוטר) צויר מחדש בכל פריים, יחד עם
   שכבת הגרעיניות. זה עלה בזמן ציור קבוע בכל האזורים האלה. כאן הם נשארים באותם צבעים ובאותה גרעיניות,
   רק בלי התזוזה. הכפתורים, החותמת והנקודה בלוגו ממשיכים לזוז (מעטים, ובמעבר עכבר).
   ========================================================= */
.t-avatar, .t-clip, .ab-stats .n, .sv-meta .num, .ab-eyebrow, .f-pill.solid, .f-pill.sticker,
.f-links a:first-child .row > span, .f-links a:first-child .row i, .menu-list a small{ animation:none !important; }

/* ביצועים: הצל של המחשב והטלפון בעינית הפרויקטים. drop-shadow על מוקאפ שלם (בתוך שכבה עם טשטוש)
   מחייב את כרטיס המסך לצייר את כל המוקאפ פעמיים; נמדד כעצירה של כחמישית שנייה בכניסה לפרויקטים.
   במקומו: צל רך מצויר מראש (גרדיאנט) מתחת למחשב, וצל רגיל (box-shadow) למסגרת של הטלפון. נראה אותו דבר */
.vf-mock .pc-laptop, .vf-mock .pc-phone{ filter:none !important; }
.vf-mock .pc-laptop::after{ content:""; position:absolute; left:4%; right:4%; bottom:-9%; height:16%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgb(0 0 0 / .26), rgb(0 0 0 / .1) 55%, transparent); }
.vf-mock .pc-phone .device{ box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 0 0 calc(var(--pw) * .011) #0b0b0c, -6px 12px 18px rgb(0 0 0 / .28) !important; }

/* ביצועים: הגרדיאנט החי בבלוק "תמונה" שבסקיצת התהליך צויר מחדש בכל פריים (כמו בשאר האלמנטים הקטנים למעלה). נשאר סטטי */
.bk-img .mesh{ animation:none !important; }