/* ═══ עמודי השירות (מעצב לצידך · בונה לך אתר · שותף לקמפיין) ═══
   נשענים על style.css של דף הבית: אותו רקע, גריד, תפריט, כפתורים צפים ופוטר.
   כאן רק מה שייחודי לעמוד שירות. מבנה אחיד בשלושת העמודים (עדי, 29.9). */

/* הסקשנים של עמוד השירות ממוקמים באותה שיטה כמו בדף הבית (style.css: #specialties, #projects...) */
#steps {
  --u: var(--us); --up: var(--us);
  position: absolute; left: 0; width: 100%; height: 0;
  top: calc(var(--fold) + (var(--gap0, 120) - 894 + var(--shift, 0)) * var(--u));
}

/* "השירות" (שותף לקמפיין ומעצב לצידך — פריסה א, עדי 30.9): אותה שיטת מיקום כמו השלבים; השלבים יורדים בגובה שלו (--shift) */
#service {
  --u: var(--us); --up: var(--us);
  position: absolute; left: 0; width: 100%; height: 0;
  top: calc(var(--fold) + (var(--gap0, 120) - 894) * var(--u));
}
.svc-items { list-style: none; }
.svc-intro { width: calc(550 * var(--u)); text-align: right; }
.svc-it { white-space: nowrap; }
.svc-ip { text-align: right; }
.svc-cta { text-align: left; }
.svc-more { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* ─── שער (נעול 30.9, עדי בחר את גרסה 2 מהפיגמה Services 124:2): ב-80% כמו כל האתר (--us). בלי פיבונאצ'י.
   כותרת בשורה אחת על קו הגריד 1075 · משפט הפתיחה בשלוש שורות · כוכבית דקה משמאלו ופסקה רחבה (250–629) מתחתיו.
   כל הגוש ירד 40 יחידות מהפיגמה (עדי: "שתתחיל יותר למטה", ואז "קצת פחות") ─── */
.svc-head { position: absolute; inset: 0; }
.svc-head { pointer-events: none; } /* 9.10: הקופסה כיסתה את הלוגו והוא לא נלחץ */
.svc-head > * { position: absolute; pointer-events: auto; }
.svc-head h1 { right: calc(250 / 1325 * 100%); top: calc(268 * var(--us)); font-size: calc(120 * var(--us) * var(--a11y-fs, 1)) !important; line-height: 1 !important; white-space: nowrap; text-align: right; }
.svc-ld { right: calc(252 / 1325 * 100%); top: calc(504 * var(--us)); transform: translateY(-50%); font-weight: 300; font-size: calc(50 * var(--us) * var(--a11y-fs, 1)); line-height: 1.2; text-align: right; white-space: nowrap; }
.svc-ld span { display: block; }
.svc-mark { left: calc(640 / 1325 * 100%); top: calc(628.7 * var(--us)); width: calc(68 / 1325 * 100%); }
.svc-mark img { display: block; width: 100%; height: auto; }
/* כניסה (עדי, 30.9): הכוכבית מתגלגלת מקו הגריד 1075 שמאלה עד תחילת הפסקה, בכיוון הקריאה.
   המרחק 367 יחידות = 5.397 רוחבי כוכבית; הסיבוב מתאים למרחק (367÷34 רדיאן ≈ 618°) ומעוגל ל-630 — כפולה של 45, כך שהיא נעצרת בדיוק במצב הנוכחי */
@media (prefers-reduced-motion: no-preference) {
  .svc-mark img { animation: svc-roll 1.4s cubic-bezier(.22, .61, .36, 1) .35s both; }
}
@keyframes svc-roll {
  from { transform: translateX(539.7%) rotate(630deg); opacity: 0; }
  10% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
.svc-pa { left: calc(250 / 1325 * 100%); top: calc(626 * var(--us)); width: calc(379 / 1325 * 100%); font-weight: 300; font-size: calc(25 * var(--us) * var(--a11y-fs, 1)); line-height: 1.2; text-align: right; }

/* ─── השלבים: זיגזג, ברווז עם כובע לכל שלב, מספר מתאר צהוב מאחורי השם ─── */
.steps { list-style: none; }
.step-n { width: calc(150 * var(--u)); text-align: center; font-weight: 700; font-size: calc(150 * var(--u)); line-height: 1; color: transparent; -webkit-text-stroke: calc(1.6 * var(--u)) var(--accent); opacity: .5; }
.step-duck { width: calc(136 * var(--u)); height: calc(200 * var(--u)); }
.step-duck img { display: block; width: 100%; height: 100%; object-fit: contain; }
.step-t { font-weight: 700; font-size: calc(50 * var(--u) * var(--a11y-fs, 1)); line-height: 1; white-space: nowrap; }
.step-p { font-weight: 300; font-size: calc(25 * var(--u) * var(--a11y-fs, 1)); line-height: 1.3; }
/* שבירות השורה הן של עדי (קובץ הטקסטים, 30.9): כל שורה שלו נשארת שורה אחת */
.step-ln { display: block; white-space: nowrap; }
.step-l { text-align: left; } /* שלב שהברווז שלו משמאל — הטקסט מיושר אליו */
/* הקו הידני בין השלבים — js/steps.js מצייר אותו */
.steps-line { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.steps-line path { fill: none; stroke: var(--ink); stroke-linecap: round; }
#steps .abs { z-index: 1; }
/* מסע הברווז (js/steps.js): ברווז אחד נוסע על הקו ומחליף אביזר. הברווזים הסטטיים נשארים רק כגיבוי — בלי JS ובטלפון */
.jr-on .step-duck img { visibility: hidden; }
html.a11y-still .jr-on .step-duck img { visibility: visible; } html.a11y-still .jr-duck { display: none; }   /* במצב עצירת אנימציות: הברווזים הקבועים במקום הברווז הנוסע */
.jr-duck { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.jr-mo { position: absolute; inset: 0; }
.jr-mo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.jr-acc { opacity: 0; }

/* 30.9: הסיום מיושר ימינה כמו שלב שהברווז שלו מימין — הברווז צמוד לסוף הטקסט (עדי) */
.svc-close { text-align: right; }
.svc-close.step-l { text-align: left; } /* סיום משמאל — כשמספר השלבים אי־זוגי */

/* צירוף שלא נשבר בסוף שורה (עדי, 29.9: "כדי / שהפרויקט") */
.nw { white-space: nowrap; }

/* ═══ טלפון — השלבים (עדי, 30.9: פריסה א, "טור אחד") ═══
   כל שלב שורה: הברווז בטור מימין (58, על קו 25), הטקסט לידו ומסתיים על קו התוכן השמאלי (50); רווח 24 ביניהם.
   גודל הפסקה מתכווץ רק כמה שצריך כדי שכל שורה של עדי תישאר שלמה (השורה הארוכה: 242 בגודל 17.5).
   הברווז הנוסע והקו — js/steps-m.js */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  #steps { position: relative; top: auto; height: auto; padding-top: calc(75 * var(--pu)); padding-bottom: calc(25 * var(--pu)); --mD: calc(50 * var(--pu)); }
  #steps > p.t-l50, #steps > h2.t-b90 { position: static; width: auto; height: auto; margin-right: var(--tx); text-align: right; }
  #steps > p.t-l50 { font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); }
  #steps > h2.t-b90 { font-size: calc(42 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(4 * var(--pu)); }
  #steps .steps li, #steps .steps-close { display: grid; grid-template-columns: var(--mD) minmax(0, 1fr); column-gap: calc(24 * var(--pu));
    align-items: start; margin: calc(50 * var(--pu)) calc(36 * var(--pu)) 0 var(--tx); } /* הברווז 36 מהקצה — כשהסלאלום מוציא אותו החוצה הוא לא נוגע בקצה (עדי, 30.9) */
  #steps .steps li > *, #steps .steps-close > * { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; text-align: right; }
  #steps .step-duck { grid-column: 1; grid-row: 1 / span 3; width: var(--mD); height: calc(var(--mD) * 440 / 316); }
  #steps .step-n { grid-column: 2; grid-row: 1; font-size: calc(64 * var(--pu)); -webkit-text-stroke-width: 1.4px; margin-bottom: calc(-26 * var(--pu)); }
  #steps .step-t { grid-column: 2; grid-row: 2; z-index: 1; font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); line-height: 1; }
  #steps .step-p { grid-column: 2; grid-row: 3; margin-top: calc(8 * var(--pu));
    font-size: calc(min(17.5 * var(--pu), (100cqw - 160 * var(--pu)) * 17.5 / var(--lnw, 242)) * var(--a11y-fs, 1)); } /* --lnw: השורה הארוכה של העמוד (build/services.js) */
  #steps .steps-close { align-items: center; }
  #steps .steps-close .step-end { grid-column: 1; grid-row: 1; }
  #steps .steps-close .svc-close { grid-column: 2; grid-row: 1; font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.15; white-space: normal; }
  /* המסע פעיל: הברווזים הקבועים שומרים את המקום, והברווז הנוסע מחליף אותם */
  .jrm-on .step-duck img { visibility: hidden; }
  /* המסילה: הטור של הברווזים, מהשלב הראשון עד הסיום. בתוכה הברווז צמוד למסך (sticky) והקו — js/steps-m.js */
  /* הקווים של הדסקטופ (js/steps.js מצייר אותם גם כשהמסע שלו כבוי) — בטלפון יש קו משלו */
  #steps .steps-line { display: none; }
  .jrm-rail { position: absolute; z-index: 2; pointer-events: none; }
  .jrm-rail svg { position: absolute; left: 0; top: 0; overflow: visible; }
  .jrm-rail svg path { fill: none; stroke: var(--ink); opacity: .4; stroke-width: 1.4px; stroke-dasharray: 5 5; stroke-linecap: round; }
  .jrm-duck { position: sticky; top: calc(45svh - var(--h) / 2); width: var(--d); height: var(--h); }
  .jrm-duck > b { position: absolute; inset: 0; will-change: transform; }
  .jrm-duck img { position: absolute; display: block; }
}

/* ═══ טלפון — השער (עדי, 30.9 — אפשרות ט): כמו השער של דף הבית בטלפון — כותרת גדולה על קו התוכן הימני (125 מלמעלה),
   משפט הפתיחה בשלוש השורות של עדי. מתחתיו הפסקה משמאל, ומימינה הכוכבית — כמו בדסקטופ — כשהקו הימני של הגריד (340)
   עובר בדיוק במרכזה והמסך חותך את קצה הזרועות. 136 רוחב, 20 בינה לבין הפסקה ═══ */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  /* בלי ברווז בשער — השער בגובה התוכן, והשלבים מתחילים מתחתיו (אין מסך ריק) */
  .svc-hero { height: auto; }
  .svc-head { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 2; padding: calc(52 * var(--pu)) var(--tx) 0; display: grid;
    grid-template-columns: minmax(0, 1fr); align-content: start; --mk: calc(136 * var(--pu)); }
  .svc-head > * { position: static; grid-column: 1; }
  .svc-head h1 { font-size: calc(min(72 * var(--pu), (100cqw - 2 * var(--tx)) / 3.95) * var(--a11y-fs, 1)) !important; line-height: 1.02 !important;
    white-space: normal; text-align: right; }
  .svc-ld { transform: none; font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.25; margin-top: calc(22 * var(--pu)); }
  /* הפסקה נגמרת 20 לפני הכוכבית: הקו הימני פחות חצי כוכבית פחות 20 */
  .svc-pa { grid-row: 3; width: auto; margin: calc(30 * var(--pu)) calc(var(--mk) / 2 + 20 * var(--pu)) 0 0;
    font-size: calc(17.5 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; }
  /* הכוכבית: באותה שורת גריד כמו הפסקה (תא הגריד הוא הבסיס למיקום), מרכזה על קצה התוכן הימני = קו 340 */
  .svc-head > .svc-mark { position: absolute; grid-row: 3; width: var(--mk); right: calc(var(--mk) / -2); top: calc(21 * var(--pu)); left: auto; }
}
/* בטלפון הכוכבית נכנסת מהקצה הימני ומתגלגלת שמאלה עד מקומה, כמו בדסקטופ (מרחק = רוחב אחד = 2 רדיאן → 135°) */
@media (max-width: 1024px) and (orientation: portrait) and (prefers-reduced-motion: no-preference), (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .svc-mark img { animation-name: svc-roll-m; }
}
@keyframes svc-roll-m {
  from { transform: translateX(100%) rotate(135deg); opacity: 0; }
  10% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* ═══ טלפון — פרויקטים (עדי, 30.9: "סדר וגודל בטלפון"): הסדר כמו בקריאת הדסקטופ מימין לשמאל — מחשב נייד, טלפון, טאבלט.
   כל מכשיר מקבל את הגודל והשוליים של אותה תמונה בדף הבית (style.css — "גדלים אחידים לעין"): הלפטופ = הראשון שם, הטלפון = השביעי, הטאבלט = השישי ═══ */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  /* ההגדלה וההזזה שבסימון נועדו ליישור בדסקטופ — בטלפון הגודל בא מהכללים של דף הבית בלבד */
  #projects > .card:not(.deco) > .cell { scale: 1 !important; translate: none !important; }
  #projects > .card:not(.deco) > :nth-child(1) { order: 1; }
  #projects > .card:not(.deco) > :nth-child(2) { order: 2; }
  #projects > .card:not(.deco) > :nth-child(3) { order: 3; }
  /* הגודל והשוליים של כל תמונה מגיעים איתה (--ms/--mt/--mb בסימון, build/services.js) — כך הם נכונים בכל עמוד ובכל סדר */
  #projects > .card:not(.deco) > .cell { --u: calc(var(--gu) * var(--ms, 1)); --cs: calc(231 * var(--gu) * var(--ms, 1)); margin-block: calc(var(--mt, 0) * var(--cs)) calc(var(--mb, 0) * var(--cs)); }
}

/* ═══ טלפון — "השירות", משפט המבוא של השלבים ו"לראות עוד" (שותף לקמפיין, 30.9): זורמים בטור, באותה מערכת של השלבים ═══ */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  #service { position: relative; top: auto; height: auto; padding-top: calc(75 * var(--pu)); }
  #service > p.t-l50, #service > h2.t-b90 { position: static; width: auto; height: auto; margin-right: var(--tx); text-align: right; }
  #service > p.t-l50 { font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); }
  #service > h2.t-b90 { font-size: calc(42 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(4 * var(--pu)); }
  :is(#service, #steps) > .svc-intro { position: static; width: auto; height: auto; margin: calc(12 * var(--pu)) var(--tx) 0;
    font-size: calc(17.5 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; text-align: right; }
  #service .svc-items li { margin: calc(30 * var(--pu)) var(--tx) 0; }
  #service .svc-items li > * { position: static; width: auto; height: auto; text-align: right; }
  #service .svc-it { font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); line-height: 1; }
  #service .svc-ip { margin-top: calc(8 * var(--pu)); font-size: calc(17.5 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; }
  #service .svc-cta { position: static; width: auto; height: auto; margin: calc(40 * var(--pu)) var(--tx) 0; text-align: right;
    font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.15; white-space: normal; }
  #projects > .svc-more { position: static; display: block; width: auto; height: auto; margin: calc(8 * var(--pu)) var(--tx) 0 0; text-align: right;
    font-size: calc(17.5 * var(--pu) * var(--a11y-fs, 1)); }
}

/* שבירה לטלפון בלבד בתוך שורת שלב ארוכה מרוחב המסך (10.10) */
.step-ln .m-br { display: none; }
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) { .step-ln .m-br { display: inline; } }