/* NDIGIT v2 · סולם טיפוגרפי אחד לדסקטופ (נתי 03.10, תוכנית ההיררכיה).
   נטען אחרון. במחשב יש html{zoom:.88} (layer.css), אז כל ערך כאן קטן ב־12% על המסך:
   96px → 84 בפועל · 48 → 42 · 24 → 21 · 20.5 → 18 · 15 → 13.2.
   מובייל לא נוגעים (יש לו סולם משלו ב־mobile.css), חוץ מכותרות המשנה בסוף הקובץ. */
@media (min-width: 900px) {
  :root {
    --sc-h2: 96px;      /* כותרת סקשן. גרסה ב: 82px (72 בפועל) */
    --sc-h3: 48px;      /* כותרת משנה בתוך סקשן */
    --sc-card: 24px;    /* כותרת כרטיס, Heebo */
    --sc-body: 20.5px;  /* גוף */
    --sc-lead: 23px;    /* פסקת ההירו */
    --sc-small: 18px;   /* גוף בכרטיסים צפופים: ציטוטים, בועות שאלות, שורות */
    --sc-label: 15px;   /* לייבל. רצפה, שום טקסט לא קטן מזה */
  }
  @media (max-width: 1199px) { :root { --sc-h2: 80px; --sc-h3: 42px; } }

  /* H2: כל כותרות הסקשנים בגודל אחד, כולל @ndig1t בסוף העמוד */
  main :is(.wh-big, .rt-title, .nb-h, .rl-h, .abx-quote, .xr-h, .fqs-h, .contact-h),
  #feed .so-handle { font-size: var(--sc-h2) !important; }

  /* H3 */
  #services .sv-h, #process .nb-say h3, #motion .rl-client { font-size: var(--sc-h3) !important; }

  /* כותרות כרטיס: מ־Karantina קטן ל־Heebo, שנקרא בגודל הזה */
  #works .fd-h { font: 600 var(--sc-card)/1.3 var(--text) !important; letter-spacing: 0; }
  #services .sf-l b { font: 700 calc(var(--sc-card) - 6px)/1.3 var(--text) !important; }

  /* השאלה בשירותים: גוף מודגש, לא כותרת נוספת */
  #services .sv-q { font: 700 var(--sc-body)/1.4 var(--text) !important; color: inherit; }

  /* פסקת ההירו: גדולה ובהירה, היא המשפט שמסביר מה אני עושה */
  #hero .hb-sub { font-size: var(--sc-lead) !important; line-height: 1.55; color: #ddd9ce; }

  /* גוף */
  main :is(.wh-small, .sv-lead, .sv-p, .nb-intro, .rl-intro, .xr-intro, .fqs-p, .contact-copy .lead, .so-lead),
  #process .nb-say p, #about .abx-bio p, #contact legend, #contact .step2 { font-size: var(--sc-body) !important; line-height: 1.65; }
  main :is(.rl-line, .xr-q, .fq-q, .fq-a, .so-what, .sv-alt, .pn-sum) { font-size: var(--sc-small) !important; line-height: 1.6; }
  #kind .xr-name b { font-size: 17px !important; }

  /* לייבלים: רצפה של 15px (13.2 על המסך) */
  main :is(.hb-by, .small-h, .text-link, .sv-tag, .sf-d, .kt-up-key, .kt-hint, .rl-n, .chat-st, .chat-pick, .pn-many,
    .form-note, .form-err, .so-copy, .pz-now, .pz-reset, .sv-said, .contact-note, .sec-k, .abx-eyebrow, .xr-name span, .sv-pick),
  #process .nb-say .k, #process .nb-say .out b, #services .sf-l span, #services .sv-kit-h span, #services .kt b, #motion .rl-line a, #motion .rl-n b,
  #contact .fld span, #contact small, #feed .so-what small { font-size: var(--sc-label) !important; }
}

/* מובייל: כותרות המשנה (44–52px) קרובות מדי לכותרת הסקשן (64px) */
@media (max-width: 899px) {
  #services .sv-h, #process .nb-say h3, #motion .rl-client { font-size: 36px !important; }
}

/* נתי 03.10: סקשן הלקוחות היה גבוה ובולט מדי. הכותרת במרכז, פחות גובה, לוגואים קטנים יותר */
#clients .small-h { text-align: center; }
@media (min-width: 900px) {
  #clients.clients { padding: 26px 0 28px; }
  #clients .small-h { margin-bottom: 14px; }
  #clients .marq .logos { gap: clamp(48px, 4.6vw, 84px); }
  #clients .marq .logos img { height: clamp(34px, 3.1vw, 48px); max-width: clamp(120px, 10vw, 160px); }
  #clients .marq .logos img[src*="museum"] { height: clamp(44px, 4vw, 60px) !important; }
}
/* נתי 03.10 (סבב 2): עדיין גבוה. טאבלט ומובייל צפופים יותר, והלוגו של המוזיאון (הגבוה) לא מותח את השורה */
@media (max-width: 899px) {
  #clients.clients { padding: 20px 0 22px !important; }
  #clients .small-h { margin-bottom: 10px !important; }
  #clients .marq .logos img[src*="museum"] { height: 40px !important; }
}
@media (max-width: 760px) {
  #clients .marq .logos img[src*="museum"] { height: 34px !important; }
}
/* נתי 03.10 (סבב 3): הלוגואים הוקטנו יותר מדי, והכותרת גדולה ביחס אליהם. לוגואים חזרה לגודל בינוני, כותרת שקטה */
#clients .small-h { font-size: 13px !important; letter-spacing: .02em; opacity: .8; }
@media (min-width: 900px) {
  #clients .small-h { font-size: 15px !important; }
  #clients .marq .logos img { height: clamp(42px, 3.9vw, 58px) !important; max-width: clamp(140px, 12vw, 190px) !important; }
  #clients .marq .logos img[src*="museum"] { height: clamp(60px, 5.4vw, 82px) !important; }
}
@media (max-width: 899px) {
  #clients .marq .logos img { height: 36px !important; max-width: 120px !important; }
  #clients .marq .logos img[src*="museum"] { height: 50px !important; }
}
@media (max-width: 760px) {
  #clients .marq .logos img { height: 32px !important; max-width: 108px !important; }
  #clients .marq .logos img[src*="museum"] { height: 46px !important; }
}
/* נתי 03.10: בקרוסלת הסרטונים ירד בלוק המידע (מספר, לקוח, שורה, "לסיפור המלא"). נשארו רק החצים, בלי קו מפריד מעליהם */
#motion .rl-grid .rl-foot { border-top: 0; padding-top: 0; }

/* ===== נתי 28.10: "מה אני עושה?" מחדש, כיוון ד "רשימה ובמה" (design/services-desktop-v8d.html, design/build-sv8.js).
   מחשב: רשימה מימין, במה ריבועית משמאל. מעבר עכבר, מיקוד או לחיצה על שורה מחליפים רק את הבמה. שום דבר לא נפתח (⛔ 27.10: פאנלים שנפתחים).
   המיתוג הוא בלוק ליים (נתי). הכפתור של כל שורה קטן ובפינה השמאלית התחתונה (סימון של נתי). ב-1440×900 הסקשן 824px, כלומר מסך אחד.
   טלפון וטאבלט: קרוסלה אופקית של כרטיסים ממורכזים, המיתוג ראשון ובליים, והכרטיס הבא מציץ.
   ⛔ עד 28.10: שלושה כרטיסים (.sx-row), הבורר "איפה אתם עומדים", "בסוף יש לכם", תוויות על התמונות, תמונות קטנות בשורות.
   משתני הסולם (--sc-*) מוגדרים רק מ-900, ולכן תמיד עם ברירת מחדל: font מקוצר עם var לא מוגדר נופל כולו, כולל המשקל ===== */
#services.ls-sec{position:relative;padding:76px 0 52px}
#services .ls-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;column-gap:56px;margin-bottom:40px}
#services .ls-head .sec-k{grid-column:1 / -1}
#services .ls-head .rt-title{white-space:nowrap}
#services .ls-head .sv-lead{justify-self:stretch;margin:0 0 12px;padding:0;max-width:34ch;font:400 var(--sc-small,16px)/1.6 var(--text);color:var(--soft)}
#services .ls-head .btn{margin-bottom:10px}
#services .btn{min-height:46px;padding:11px 20px;gap:14px;font:700 16px/1 var(--text)}
#services .btn-line{border-color:rgba(245,243,238,.3);color:var(--bone);background:transparent}
#services .btn-line span{color:var(--lime);transition:color .2s}
@media (hover:hover) and (pointer:fine){
  #services .btn-line:hover{background:var(--bone);border-color:var(--bone);color:var(--coal)}
  #services .btn-line:hover span{color:var(--coal)}
}
#services .ls{--stg:min(640px,43%);position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stg);column-gap:56px}
#services .ls-list{display:flex;flex-direction:column}
#services .ls-row{flex:1;display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:36px;padding:24px 30px 22px 24px;border-bottom:1px solid var(--line);box-shadow:inset -3px 0 0 transparent;transition:box-shadow .4s ease}
#services .ls-row.on{box-shadow:inset -3px 0 0 var(--lime)}
#services .ls-h{grid-column:1;grid-row:1 / -1;margin:2px 0 0;font:700 56px/.8 var(--display);letter-spacing:0;color:var(--bone);white-space:nowrap;transition:color .3s}
#services .ls-row:not(.on) .ls-h{color:#d9d6cd}
#services .ls-body{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:10px;padding-top:6px}
#services .ls-hook{margin:0;font:700 var(--sc-body,18px)/1.4 var(--text);color:var(--bone);text-wrap:balance}
#services .ls-txt{margin:0;font:400 var(--sc-small,16px)/1.6 var(--text);color:var(--soft);text-wrap:pretty}
#services .ls-go{grid-column:2;grid-row:3;justify-self:end;align-self:end;margin-top:14px;min-height:40px;padding:9px 16px;gap:10px;font-size:15px}
/* המיתוג: בלוק ליים. הטקסט והכפתור כהים, והוא לא מתעמעם כשהבמה עוברת לשירות אחר */
#services .ls-row.ls-br{flex:1.2;background:var(--lime);border-bottom-color:var(--lime);box-shadow:none}
#services .ls-br .ls-h,#services .ls-br:not(.on) .ls-h,#services .ls-br .ls-hook{color:var(--coal)}
#services .ls-br .ls-txt{color:rgba(11,11,10,.74)}
#services .ls-br .ls-go{background:var(--coal);border-color:var(--coal);color:var(--bone)}
#services .ls-br .ls-go span{color:var(--lime)}
@media (hover:hover) and (pointer:fine){#services .ls-br .ls-go:hover{background:#2a2a26;border-color:#2a2a26;color:var(--bone)}#services .ls-br .ls-go:hover span{color:var(--lime)}}
#services .ls-stage{width:100%;aspect-ratio:1;border-radius:14px;background:#151512}
#services .ls-dots{display:none}
/* העבודות של כל שירות. במחשב הן מונחות על הבמה: המיקום יחסית ל-.ls, ולכן השורות לא ממוקמות ובלי translate (חשיפה בגלילה רק על .ls כולו) */
#services .ls-set{position:absolute;z-index:1;top:0;left:0;width:var(--stg);aspect-ratio:1;overflow:hidden;border-radius:14px;background:#151512;opacity:0;pointer-events:none;transition:opacity .5s ease;cursor:pointer}
#services .ls-row.on .ls-set{z-index:2;opacity:1;pointer-events:auto}
#services .ls-sl{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
#services .ls-sl.cur{opacity:1}
#services .ls-sl :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
#services .ls-set-br .ls-sl img{transform:scale(1.05);transition:transform 3.6s ease-out}
#services .ls-set-br .ls-sl.cur img{transform:none}
#services .ls-set::after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(to top,rgba(11,11,10,.72),rgba(11,11,10,0));pointer-events:none}
#services .ls-cap{position:absolute;z-index:2;right:22px;bottom:20px;margin:0;font:400 var(--sc-label,14px)/1.3 var(--text);color:var(--bone)}
#services .ls-cap b{font-weight:700}
#services .ls-bars{position:absolute;z-index:2;left:22px;bottom:26px;display:flex;gap:6px;direction:ltr}
#services .ls-bars i{position:relative;width:28px;height:3px;border-radius:2px;background:rgba(245,243,238,.32);overflow:hidden}
#services .ls-bars i::after{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
#services .ls-bars i.done::after{transform:none}
#services .ls-bars i.run::after{animation:lsbar 2800ms linear forwards}
@keyframes lsbar{to{transform:none}}
/* מחשב צר (900 עד 1180): השם עולה מעל הטקסט, כדי שלטקסט יישאר רוחב */
@media (min-width:900px) and (max-width:1180px){
  #services .ls-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  #services .ls-h{grid-column:1;grid-row:1;margin-bottom:12px}
  #services .ls-body{grid-column:1;grid-row:2;padding-top:0}
  #services .ls-go{grid-column:1;grid-row:4}
}
/* טלפון וטאבלט: קרוסלה אופקית של שלושה כרטיסים עם הצמדה. המיתוג ראשון ובליים, הכרטיס הבא מציץ משמאל, ושלושה פסים מתחת.
   בכל כרטיס, הכול ממורכז: תמונה 6:5 שמתחלפת כשהכרטיס במסך, שם, שאלה, הסבר, כפתור קטן */
@media (max-width:899px){
  #services.ls-sec{padding:56px 0 44px !important}
  #services .ls-head{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:14px;margin-bottom:28px;text-align:center}
  #services .ls-head .sec-k{margin:0;justify-content:center}
  #services .ls-head .rt-title{white-space:normal}
  #services .ls-head .sv-lead{justify-self:center;margin:0;max-width:30ch;font-size:16px}
  #services .ls-head .btn{margin:6px 0 0}
  #services .ls{display:block}
  #services .ls-stage{display:none}
  #services .ls-list{flex-direction:row;gap:12px;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  #services .ls-list::-webkit-scrollbar{display:none}
  #services .ls-row,#services .ls-row.ls-br{flex:0 0 min(86%,340px);display:flex;flex-direction:column;align-items:center;padding:0 0 20px;border:0;border-radius:16px;overflow:hidden;background:#161614;text-align:center;box-shadow:none;scroll-snap-align:start}
  #services .ls-row.ls-br{background:var(--lime)}
  #services .ls-row:not(.on) .ls-h{color:var(--bone)}
  #services .ls-br .ls-h,#services .ls-br:not(.on) .ls-h{color:var(--coal)}
  #services .ls-set{position:relative;order:-1;width:100%;aspect-ratio:6 / 5;border-radius:0;opacity:1;pointer-events:auto;cursor:default}
  #services .ls-set::after{height:90px}
  #services .ls-cap{right:14px;bottom:12px}
  #services .ls-bars{left:14px;bottom:17px;gap:4px}
  #services .ls-bars i{width:18px}
  #services .ls-h{margin:18px 18px 10px !important;font-size:42px !important;line-height:.88 !important}
  #services .ls-body{align-items:center;gap:6px;margin-bottom:18px;padding:0 18px}
  #services .ls-hook{font-size:17px;line-height:1.4}
  #services .ls-txt{font-size:15px;line-height:1.6}
  #services .ls-go{align-self:center;margin:auto 18px 0;min-height:40px;padding:8px 14px;gap:8px;font-size:14px}
  #services .ls-dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
  #services .ls-dots i{width:18px;height:3px;border-radius:2px;background:rgba(245,243,238,.28);transition:width .3s,background .3s}
  #services .ls-dots i.cur{width:30px;background:var(--lime)}
}
@media (prefers-reduced-motion:reduce){#services .ls *{transition:none !important;animation:none !important}}
html.nd-still #services .ls *{transition:none !important;animation:none !important}