/* ═══ דאק סטודיו — דף הבית ═══
   בסיס הפריסה: פיגמה 1325. בדסקטופ (768 ומעלה) הכול נמדד ביחידת --u = רוחב המסך חלקי 1325,
   נעצר ב-2560 ומעל זה נוספים שוליים (חוק "1325 הוא יחס, לא גבול"). בטלפון (עד 767) — פיקסלים, בבלוק בסוף הקובץ. */

@font-face {
  font-family: 'Futurism';
  src: url('../fonts/Futurism-Light.woff2') format('woff2'), url('../fonts/Futurism-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Futurism';
  src: url('../fonts/Futurism-Bold.woff2') format('woff2'), url('../fonts/Futurism-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #3D3D3B;
  --accent: #FCC402;
  --gray: #E6E8E8;
  --bg: #FCFCFC; /* הרקע האחיד — נדגם מהפיגמה (23.9); הקיר #F8F8F7 עדין מעליו */
  --u: calc(min(100vw, 2560px) / 1325); /* גיבוי לדפדפן בלי container queries */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Futurism', 'Arial Hebrew', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
/* המדידה (cqw) נעשית במסגרת פנימית, ולא ב-body — מיכל מדידה הופך רכיבים קבועים לדבוקים לעמוד */
.site { container-type: inline-size; overflow-x: clip; }

/* רוחב הקונטיינר (cqw) לא כולל את סרגל הגלילה — בניגוד ל-100vw */
.page {
  /* חוק הבנייה של חיים (הוכרע עם עדי 23.9): הכול ב-vw — יחידה אחת לגודל, למיקום ולרווח.
     הכול גדל ביחס לפיגמה (1325) עד 2560, ומעל זה נוספים שוליים. כך העמוד זהה בכל מסך. */
  /* קנה מידה אחד לכל העמוד — כמו תמונה שמשנה גודל בשלמותה:
     הקטן מבין רוחב המסך ÷ 1325 וגובה המסך ÷ 662.5 (פולד 2:1), ועד 2560
     (הוכרע עם עדי 23.9 — המסך שלו 27" 2560×1440; קודם היה 1920).
     כך כל היחסים בין כל האלמנטים זהים בכל מסך. */
  --u: min(calc(min(100cqw, 2560px) / 1325), calc(100svh / 662.5));
  /* יחידת רוחב בלבד — לכל מה שמתחת לשער. השער צריך להיכנס לגובה המסך, אבל הסקשנים יושבים על קווי הגריד
     שנמדדים ברוחב; ביחידה שתלויה בגובה הם זזים מהקווים במסכים רחבים ונמוכים (לפטופ, 27.9) */
  --uw: calc(min(100cqw, 2560px) / 1325);
  --bleed: max(0px, calc((100cqw - 2560px) / 2));
  /* השער ביחס 2:1 (חוק הפולד של חיים) */
  --fold: calc(662.5 * var(--u));
  /* תוכן השער (כותרת וברווז) קטן באותו יחס שבו השער התכווץ מהפיגמה: 662.5 ÷ 819 —
     כך הקומפוזיציה זהה לפיגמה, והברווז מתחיל מתחת לתפריט כמו שם */
  --uh: calc(var(--u) * .75); /* 75% מהפיגמה — עדי, 23.9 */
  /* הסקשן הראשון מתחיל 160 מתחת לשער (בפיגמה: 894) */
  --fold-pad: calc(-71.5 * var(--u));
}

/* כל הסקשנים שאחרי השער: יחידה של 80% (עדי 23.9 — 75% ריק מדי, 90% חונק).
   הם מתחילים 160 מתחת לשער, ו---shift מיישר את המרווח ביניהם ל-160 אחיד. */
.page { --us: calc(var(--uw) * .8); }
#specialties, #projects, #about, #values, #together, #testimonials, footer {
  --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)); /* --gap0: המרווח מהשער לסקשן הראשון */
}

.page {
  position: relative;
  /* העמוד ממלא את כל רוחב המסך (עד 2560); הגריד מרוכז בו והשוליים החיצוניים שלו נמתחים */
  width: min(100cqw, 2560px);
  height: calc(var(--fold) + (var(--page-len, 8887.7) + var(--fd-strip, 0)) * var(--us)); /* 32 יחידות אוויר מתחת לקרדיטים · --page-len: עמודים פנימיים */
  margin-inline: auto;
  /* קישוטים (הילות) לא מאריכים את הגלילה מתחת לפוטר — נחתכים בתחתית העמוד */
  overflow-x: visible; overflow-y: clip;
}

/* כרטיס התמחות שיש לו עמוד — כל הכרטיס לחיץ (הקישור נפרש על כולו, מעל הקישוטים) */
.card-link { position: absolute; inset: 0; z-index: 3; }

/* ─── מיקום מוחלט ביחידות פיגמה ───
   הקואורדינטות מהפיגמה הן פיזיות (מהקצה השמאלי של הפריים),
   ולכן כאן — ורק כאן — left/right פיזיים ולא תכונות לוגיות. */
.abs {
  position: absolute;
  /* מיקום אופקי יחסית למרכז הגריד (662.5 = אמצע הפיגמה) ביחידת העמוד — נשאר על הקווים בכל מסך */
  left: calc(var(--x) / 1325 * 100%);
  top: calc(var(--y) * var(--up, var(--u)));
  width: calc(var(--w, auto) * var(--u));
  height: calc(var(--h, auto) * var(--u));
}
/* יישור לפי הפיגמה: טקסט שמעוגן מימין מיושר לימין; טקסט רב־שורתי בלי יישור בפיגמה — לשמאל (.lft) */
.rgt {
  left: auto;
  right: calc(var(--r) / 1325 * 100%);
  text-align: right;
}
.lft { text-align: left; }

.deco { pointer-events: none; display: flex; align-items: center; justify-content: center; }
.deco img, .cell img, .about-photo img, .logo img { display: block; width: 100%; height: 100%; }
.deco img { object-fit: contain; flex: none; }
.logo img { height: auto; }

/* ─── טיפוגרפיה ─── */
.t-b120 { font-weight: 700; font-size: calc(120 * var(--u) * var(--a11y-fs, 1)); line-height: 1; white-space: nowrap; text-align: left; }
.t-b90  { font-weight: 700; font-size: calc(90 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: calc(100 / 90); white-space: nowrap; }
.t-b50  { font-weight: 700; font-size: calc(50 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: 1; }
.t-l50  { font-weight: 300; font-size: calc(50 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: calc(56 / 50); white-space: nowrap; }
.t-b25  { font-weight: 700; font-size: calc(25 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: 1; }
.t-l25  { font-weight: 300; font-size: calc(25 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: 1.3; } /* טקסט רץ: 1.3 בכל האתר (הסקיל) */
.t-l20  { font-weight: 300; font-size: calc(20 * var(--u) * var(--tk, 1) * var(--a11y-fs, 1));  line-height: normal; }
.yellow { color: var(--accent); }
.center { text-align: center; }

.t-l25 p + p { margin-block-start: 1em; }

/* ═══ הגריד — השלד של העמוד ═══
   ארבעת הקווים (250 · 525 · 800 · 1075 מתוך 1325) יוצרים 5 עמודות.
   כל אלמנט יושב בעמודה; גודלו ורווחיו קבועים ביחידות (--u). כך הכול זז כיחידה אחת בכל מסך.
   הגריד עצמו ב-LTR כדי שמספרי העמודות יתאימו לפיגמה; התוכן בתוכו חוזר ל-RTL. */
/* עמודות הפיגמה: 250 · 275 · 275 · 275 · 250 — תמיד ביחס לרוחב המסך, כך שהשוליים בגודל של הפיגמה בכל מסך.
   המיקומים (x) הם שבר מרוחב העמוד ולכן יושבים על הקווים; הגדלים ביחידה --u, שמותאמת גם לגובה. */
.page { --col: calc(275 * var(--uw)); }
.grid5 { display: grid; direction: ltr; grid-template-columns: 250fr 275fr 275fr 275fr 250fr; }
.grid5 > * { direction: rtl; }

/* ═══ שער — מסך שלם ═══ */
.hero { position: relative; height: var(--fold); grid-template-rows: auto 1fr; }

/* עמודה 5: הקיר לכל גובה המסך, נמתח עד קצה המסך הימני; נמזג לרקע בראשו */
.hero-wall {
  grid-column: 5; grid-row: 1 / -1; z-index: 2;
  margin-right: calc(-1 * var(--bleed, 0px));
  background: linear-gradient(to bottom, var(--bg) 0, #F8F8F7 calc(560 * var(--u)));
}
/* הלוגו והתפריט ב-80% מהפיגמה (עדי, 23.9) */
.hero-logo { grid-column: 1; grid-row: 1; justify-self: start; width: calc(132 * var(--lgs, var(--ls, 1)) * var(--u)); margin: calc((78 + var(--lgy, 0)) * var(--u)) 0 0 calc((43 + var(--lgx, 0)) * var(--u)); }
.hero-menu { grid-column: 5; grid-row: 1; justify-self: end; z-index: 3; width: calc(44 * var(--ls, 1) * var(--u)); height: calc(24 * var(--ls, 1) * var(--u)); margin: calc((91 + var(--mny, 0)) * var(--u)) calc((97 - var(--mnx, 0)) * var(--u)) 0 0; }
.menu-btn { background: none; border: none; cursor: pointer; }
.menu-btn img { display: block; width: 100%; height: 100%; }

/* ערכי השער — נעולים ע"י עדי בלוח הכיוונון (23.9) */
.page { --tx: 50; --ty: -10; --ts: 1; --ds: 1.05; --db: 18; --ls: .75; --lgs: 1; /* הלוגו: "הבית העיצובי שלך" בגובה הטקסט הרץ */
         --lgx: 25; --lgy: -20; --mnx: -10; --mny: -20; --ax: 0; --ay: -40; --bx: 0; --by: -25; }
.hero-title { --u: calc(var(--uh) * var(--ts, 1)); }
.hero-duck { --u: calc(var(--uh) * .92 * var(--ds, 1)); } /* הברווז: 10% פחות ואז 2% יותר, גדל כלפי מעלה (עדי, 23.9) */
/* הכותרת: מקו הגריד הראשון, ממורכזת בגובה המסך (מעט מעל האמצע, כמו בפיגמה) */
.hero-title { grid-column: 2 / 5; grid-row: 2; justify-self: start; align-self: center; position: relative; top: calc((-45 + var(--ty, 0)) * var(--uh)); }
.hero-title p { margin-top: calc(20 * var(--uw)); line-height: 1.3; text-align: left; font-size: calc(50 * var(--us) * var(--a11y-fs, 1)); } /* כמו תת־הכותרות של הסקשנים (עדי, 27.9) */
/* הל' של "לבית." מתחילה על קו הגריד השני (עדי, 23.9): הבלוק זז ימינה בעמודה אחת פחות רוחב המילה.
   רוחב "לבית." = 2.0 × גודל הפונט (נמדד). 100%/3 = עמודה אחת מתוך שלוש העמודות של הכותרת. */
/* 7.10 (אופציה 378): שתי שורות הכותרת, המשפט והכפתור — כולם על קו שמאלי אחד, והוא קו הגריד השני */
.hero-title { margin-left: calc(64.6 * var(--uw)); text-align: left; }
.hero-title h1 { text-align: left; }
.hero-title p { text-align: left; }
.hero-cta { display: inline-block; margin-top: calc(40 * var(--uw)); font-weight: 300; font-size: calc(20 * var(--uw) * var(--a11y-fs, 1)); line-height: 1;
            padding: calc(16 * var(--uw)) calc(32 * var(--uw)); border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* ─── חוק החץ שליד טקסט (עדי, 7.10; נמדד בפוטוריזם ב-100px: האותיות הרגילות .50em, קו הלייט .05em, קו הבולד .12em) ───
   גובה החץ .46em — טיפה נמוך מהאותיות · תחתיתו על קו הבסיס של המילה · עובי הקו כעובי קו הטקסט שלידו (.05em בלייט) · רווח .45em */
.arw { display: inline-block; height: .46em; width: auto; margin-inline-start: .45em; vertical-align: baseline; transform: rotate(-90deg); overflow: visible; }
.arw * { vector-effect: non-scaling-stroke; stroke-width: .05em; }
.hero-ast { position: absolute; z-index: 1; color: var(--ink); left: calc(250 / 1325 * 100%); bottom: calc(18.4 * var(--uw)); width: calc(168.3 * var(--uw)); height: auto; transform: translate(-50%, 50%); overflow: visible; pointer-events: none; }
.hero-ast * { vector-effect: non-scaling-stroke; }

/* קבוצת הברווז: נצמדת לקו הגריד הרביעי ולתחתית המסך. גודל קבוע, תוכן ממוקם יחסית אליה */
.hero-duck {
  grid-column: 3 / 5; grid-row: 1 / -1; justify-self: end; align-self: end;
  position: relative; z-index: 1;
  width: calc(253 * var(--u)); height: calc(649 * var(--u)); margin-bottom: calc((70 + var(--db, 0)) * var(--u));
}
.hero-duck > * { --w: initial; --h: initial; }
.hero-duck .duck-clip { position: absolute; inset: 0; overflow: hidden; }

/* ─── הירו ─── */
/* הרצף אחרי כניסת הברווז: החץ מצטייר מהסלסול אל החוד, ואז הטקסט מופיע */
.bubble {
  transform: rotate(-5deg) translateY(calc(8 * var(--u)));
  text-align: center;
  white-space: nowrap; /* שלוש שורות קבועות: הסמיילי לא יורד שורה בשום מסך */
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.bubble-in .bubble { opacity: 1; transform: rotate(-5deg) translateY(0); } /* הבועה מופיעה רק אחרי שהחץ שלה הצטייר (js/doodles.js) */
.bubble { font-size: calc(20 * var(--us) * var(--a11y-fs, 1)); } /* באותו גודל כמו הטקסט הקטן בשאר הדף, לא לפי גודל הברווז */
/* החץ והבועה — כל אחד זז בנפרד (כיוונון של עדי) */
.arrow-hero { translate: calc(var(--ax, 0) * var(--u)) calc(var(--ay, 0) * var(--u)); }
.bubble { translate: calc(var(--bx, 0) * var(--u)) calc(var(--by, 0) * var(--u)); }

.duck-box { position: absolute; }
.duck-box canvas, .your-place canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease); }
.duck-box.live canvas, .your-place.live canvas { opacity: 1; }
.your-place.live .duck-fallback { opacity: 0; }
.duck-box.live .duck-fallback { opacity: 0; }
.duck-fallback { position: absolute; transition: opacity .4s var(--ease); }
.tilt canvas, .tilt .duck-fallback { transform: rotate(-7.5deg); }

/* חיתוכי תמונת הגיבוי — זהים לחיתוך בפיגמה */
.hero-crop, .footer-crop { height: 197.11%; left: -88.93%; top: -48.17%; width: 274.9%; max-width: none; }
.duck-box { overflow: visible; }

/* ─── קבוצה: יחידה שכל מה שבתוכה ממוקם יחסית אליה ───
   הקבוצה מעוגנת לרוחב העמוד (לפי המרכז שלה), ותוכנה ביחידות — כך הפרופורציות שבתוכה לעולם לא נשברות */
.card { left: calc(var(--cx) / 1325 * 100% - var(--w) * var(--u) / 2); }
/* יחידה שהקצה הימני שלה יושב על קו גריד — מעוגנת לקצה (--rx), כדי שתישאר על הקו גם כשהיא קטנה */
.card.on-line { left: calc(var(--rx) / 1325 * 100% - var(--w) * var(--u)); }
/* משתני CSS עוברים בירושה — רכיב בתוך יחידה לא יורש את הרוחב/גובה שלה */
.card > * { --w: initial; --h: initial; }
/* עיני המקום שלך — ערכי הכיוונון של עדי, נעולים */
.page { --ey-grey: 1.01; --ey-eye-dark: .7; --ey-eye-f: .75; --ey-eye-s: .95; --ey-pu-s: .98; --ey-pu-x: .035; --ey-pu-y: .01; --ey-pu-dark: .35; --ey-pu-f: .75; --ey-pu-gloss: .76; }
/* כרטיסי ההתמחויות ברוחב עמודה אחת בדיוק; הטקסט שבתוכם נשאר בגודל של שאר הדף */
#specialties > .card { --u: calc(var(--col) / 338 * var(--scs, 1)); }
#specialties > .card > h3, #specialties > .card > p { --u: var(--us); }
#specialties .pgap { display: block; height: calc(12 * var(--u)); } /* רווח חצי שורה בין שתי הפסקאות */
/* כיוונון עדין: הזזת כל תיבה מול הקו, וכל אייקון מול התיבה שלו. הערכים נעולים (עדי, 27.9) */
.page { --sc1x: 0; --sc2x: 0; --sc3x: 0; --scs: 1; /* 7.10: הכרטיסים ממורכזים בעמודות, 352 רחב */
        --si1x: 0; --si1y: 0; --si2x: 0; --si2y: 0; --si3x: 0; --si3y: 0; --sis: 1; /* 7.10: האייקון בתוך הכרטיס, בלי ההזזות של החריץ */
        --sa1x: 0; --sa1y: 0; --sa2x: 0; --sa2y: 0; --sa3x: 0; --sa3y: 0; --sas: 1; }
#specialties > .card:nth-of-type(1) { translate: calc(var(--sc1x, 0) * var(--u)) 0; }
#specialties > .card:nth-of-type(2) { translate: calc(var(--sc2x, 0) * var(--u)) 0; }
#specialties > .card:nth-of-type(3) { translate: calc(var(--sc3x, 0) * var(--u)) 0; }
#specialties > .card > .deco:nth-child(2) { scale: var(--sis, 1); transform-origin: bottom center; }
#specialties > .card > .deco:last-child { scale: var(--sas, 1); }
#specialties > .card:nth-of-type(1) > .deco:last-child { translate: calc(var(--sa1x, 0) * var(--u)) calc(var(--sa1y, 0) * var(--u)); }
#specialties > .card:nth-of-type(2) > .deco:last-child { translate: calc(var(--sa2x, 0) * var(--u)) calc(var(--sa2y, 0) * var(--u)); }
#specialties > .card:nth-of-type(3) > .deco:last-child { translate: calc(var(--sa3x, 0) * var(--u)) calc(var(--sa3y, 0) * var(--u)); }
#specialties > .card:nth-of-type(1) > .deco:nth-child(2) { translate: calc(var(--si1x, 0) * var(--u)) calc(var(--si1y, 0) * var(--u)); }
#specialties > .card:nth-of-type(2) > .deco:nth-child(2) { translate: calc(var(--si2x, 0) * var(--u)) calc(var(--si2y, 0) * var(--u)); }
#specialties > .card:nth-of-type(3) > .deco:nth-child(2) { translate: calc(var(--si3x, 0) * var(--u)) calc(var(--si3y, 0) * var(--u)); }
.in {
  position: absolute;
  left: calc(var(--lx, 0) * var(--u));
  top: calc(var(--ly, 0) * var(--u));
  width: calc(var(--w, auto) * var(--u));
  height: calc(var(--h, auto) * var(--u));
}
.in.re { left: auto; right: calc(var(--lr) * var(--u)); text-align: right; }

/* ─── התמחויות ─── */
.frame-box { display: flex; align-items: center; justify-content: center; }
.frame-img { width: calc(384 * var(--u)) !important; height: calc(474 * var(--u)) !important; flex: none; } /* 7.10: הקובץ החדש מצויר ישר במידות הכרטיס (338×442) עם 16 שוליים לצל */

/* ─── פרויקטים ─── */
/* כל תא ממורכז בעמודת גריד: המרחק בין תאים (256) שווה לרוחב עמודה. הכיתוב נשאר בגודל הטקסט של הדף */
#projects > .card:not(.deco) { --u: calc(var(--col) / 256); }
#projects .your-place + p { font-size: calc(25 * var(--us) * var(--a11y-fs, 1)); line-height: 1.3; }
.cell { width: calc(231 * var(--u)); height: calc(231 * var(--u)); overflow: visible; }
.cell img { pointer-events: none; } /* רק התא עצמו מגיב לעכבר, לא השוליים השקופים של התמונה */
.cell img { position: absolute; max-width: none; }
.your-place { overflow: visible; }
.your-place canvas { cursor: pointer; }
.your-place .duck-fallback { width: 100%; height: 100%; object-fit: contain; }

/* ─── פולד פרויקט (7.10): מוקאפ זז בצד אחד, הטקסט בעמודה שבצד השני. data-side="right" = המוקאפ מימין (הראשון), "left" = משמאל ───
   המוקאפ תופס שתי עמודות (550), הטקסט עמודה אחת (275) פחות רווח. הטקסט ממורכז לגובה המוקאפ */
.proj-fold { display: grid; grid-template-columns: calc(275 / 825 * 100%) 1fr; grid-template-rows: auto auto; align-content: center; }
.proj-fold[data-side="right"] { grid-template-columns: 1fr calc(275 / 825 * 100%); }
.proj-fold .proj-mock { grid-row: 1 / 3; align-self: center; }
.proj-fold[data-side="right"] .proj-mock { grid-column: 1; }
.proj-fold[data-side="left"] .proj-mock { grid-column: 2; }
.proj-fold[data-side="right"] :is(.proj-head, .proj-body) { grid-column: 2; text-align: right; } /* הטקסט נצמד לצד של המוקאפ (עדי, 7.10) */
.proj-fold[data-side="left"] :is(.proj-head, .proj-body) { grid-column: 1; text-align: left; }
.proj-fold .proj-head { align-self: end; }
.proj-fold .proj-body { align-self: start; }
.proj-fold h3 { margin: 0; }
.proj-body > p { margin: calc(28 * var(--u)) 0 0; }
/* הקישור כמו הכפתור בהירו: מסגרת שחורה, שיהיה ברור שזה כפתור גם בטלפון (עדי, 7.10) */
/* זהה לכפתור בהירו במידות של 1440: גופן 22, ריפוד 16/32, חץ 1.3 בגובה .72em על קו הבסיס (--u כאן הוא 80%, לכן 25.25) */
/* הכפתור "לפרויקט" כמו הכפתור בהירו (עדי, 7.10: "כפתור יותר ברור"): גופן 22, ריפוד 16/32 ב-1440 */
.proj-link { display: inline-block; margin-top: calc(25 * var(--u)); font-weight: 300; font-size: calc(25 * var(--u) * var(--a11y-fs, 1)); line-height: 1; padding: calc(20 * var(--u)) calc(40 * var(--u)); border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* המחשב צמוד לקו הגריד של צד המוקאפ, 95% מהרוחב (עדי, 7.10): הקומבו נדחף לקצה, והמרווח הפנימי של המחשב (4.7%) מתקזז */
.proj-mock .duck-mockup { width: 100%; }
.proj-fold[data-side="right"] .proj-mock .duck-mockup { margin-inline-end: auto; } /* RTL: inline-end הוא שמאל — המוקאפ נצמד לימין */
.proj-fold[data-side="left"] .proj-mock .duck-mockup { margin-inline-start: auto; }
.proj-mock .dm-fit { justify-content: flex-start; }
.proj-fold[data-side="left"] .proj-mock .dm-fit { justify-content: flex-end; }
.proj-fold[data-side="right"] .proj-mock .dm-combo { translate: calc(var(--w) * .047) 0; }
/* בצד שמאל הפלאפון הוא הקצה, והוא כבר על הקו — בלי דחיפה */
.proj-fold[data-side="left"] .proj-mock .dm-combo { translate: 0 0; }
/* מצגת במחשב בלבד (אתנה): המחשב באותו גודל כמו המחשב של הקומבו */
.proj-mock .duck-mockup[data-device="laptop"] .dm-lap { --w: min(88cqw / 1.162, 84cqh * 1.42); }

/* ─── ככה עובדים יחד (עדי, 7.10): שלושה ברווזים, כל אחד ממורכז על עמודת גריד; מימין לשמאל: בועה, קוביות, גלגל הצלה ─── */
.tg-row { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; }
.tg-item { text-align: right; } /* מיושר לימין, על קו הגריד של העמודה — כמו הערכים וההתמחויות (עדי, 7.10: "אין לנו הרבה ממורכז") */
.tg-duck { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.tg-duck canvas, .tg-duck .duck-fallback { inset: 0 -20%; width: 140%; height: 100%; } /* רחב מהעמודה: הברווז במרכז, האביזר חורג */
.tg-duck .duck-fallback { object-fit: contain; }
.tg-item h3 { margin: calc(10 * var(--u)) 0 0; white-space: nowrap; }
.tg-item p { margin: calc(10 * var(--u)) 0 0; }

/* ─── סיפורי הצלחה (עדי, 7.10): כרטיס לבן מעוגל כמו בהתמחויות; הטקסט ברוחב קריאה (620) כדי שהשורות לא יישברו מוזר;
   הכרטיס בגובה התוכן; המרכאות (אייקון הקו מהמאגר) משני צדי הציטוט; החצים והנקודות מרווחים ─── */
.st-last { white-space: nowrap; } /* 8.10: המרכאות הסוגרות לא קופצות שורה */
.st-card { background: #fff; border-radius: calc(28 * var(--u)); /* כמו הרדיוס הנראה של כרטיסי ההתמחויות (27.5) — רדיוס אחד לכרטיסים (חיים) */ box-shadow: 4px 4px 10px rgba(0,0,0,.05); padding: calc(50 * var(--u)); box-sizing: border-box; height: auto; }
.st-slide { min-height: var(--st-h, auto); }
.st-card { touch-action: pan-y; } .st-slide { transition: opacity .2s var(--ease), transform .2s var(--ease); } .st-slide.st-off { opacity: 0; transform: translateX(var(--sx, 0)); }   /* 9.10: מעבר רך והחלקה באצבע - js/stories.js */
.st-t { margin: 0; white-space: nowrap; } /* השורות נשברות לפי ההיגיון והפיסוק (עדי, 7.10): br בקוד, בטלפון הן זורמות */
.st-quote blockquote { white-space: nowrap; }
.st-quote { margin: calc(25 * var(--u)) 0 0; }
.st-quote blockquote { margin: 0; }
/* המרכאות בעברית: אותו סימן בתחילת הציטוט ובסופו, יושב בגובה ראש האותיות, בתוך השורה. שני קווקווים כקו, בעובי הדודלים (2px) */
/* המרכאות: שני הקווקווים מהדודל 4·63 (עדי), כמו שהם. הקצה הדק פונה תמיד אל הטקסט: הפותחות מימין, הסוגרות משמאל במראה */
.st-qm { display: inline-block; height: .6em; width: auto; aspect-ratio: 60 / 71; vertical-align: .3em; color: var(--accent); overflow: visible; }
.st-qm-open { margin-inline: 0 .4em; transform: scaleX(-1); }  /* מימין לטקסט: הקצה הדק פונה שמאלה, אל הטקסט (נבדק ברינדור גדול) */
.st-qm-close { margin-inline: .4em 0; }                        /* משמאל לטקסט: הקצה הדק פונה ימינה, אל הטקסט */
.st-quote figcaption { margin-top: calc(25 * var(--u)); font-size: calc(25 * var(--u) * var(--a11y-fs, 1)); line-height: 1.3; }
.st-w { display: block; font-weight: 700; }
.st-r { display: block; font-weight: 300; }
.st-nav { display: flex; align-items: center; justify-content: flex-end; margin-top: calc(50 * var(--u)); } /* חצים בלבד, בשמאל (עדי, 7.10); flex-end ב-RTL = שמאל */
.st-ars { display: flex; gap: calc(18 * var(--u)); }
/* חצי הקרוסלה: פינה בלבד, בגובה ובעובי של שאר החצים בעמוד (.arw: .46em, קו 1.3); אזור לחיצה 28 */
.st-ar { width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: calc(25 * var(--us) * var(--a11y-fs, 1)); } /* --us ולא --u: בתוך .card היחידה גדולה יותר, והחץ יצא 14 במקום 10 (נמדד) */
.st-ar .arw { margin: 0; height: calc(16 * var(--us)); } /* חץ שעומד לבד: בגודל ובעובי של חץ הכרטיסים (עדי, 7.10: "לא רואים אותם") */
.st-ar .arw * { stroke-width: 1.5px; }

/* ─── המקום שלך: פולד סיום ממורכז אחרי הפרויקטים (עדי, 7.10) ─── */
.proj-place { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.proj-place .your-place { position: relative; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.proj-place h3 { margin: calc(-5 * var(--u)) 0 0; } /* בתיבת הברווז יש 30 אוויר מתחתיו: יוצא 25 נראה */
.proj-place .proj-link { margin-top: calc(25 * var(--u)); }

/* ─── קצת עליי ─── */
.about-photo img { object-fit: cover; }
/* החולצה נחתכת בדיוק לאורך הקו העליון שמתחתיה — גם כשמזיזים את התמונה או את הקו */
.about-photo { -webkit-mask: url(../assets/profile-clip.svg) no-repeat; mask: url(../assets/profile-clip.svg) no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: calc((var(--ab-l1x, 0) - var(--ab-px, 0)) * var(--u)) calc((var(--ab-l1y, 0) - var(--ab-py, 0)) * var(--u));
  mask-position: calc((var(--ab-l1x, 0) - var(--ab-px, 0)) * var(--u)) calc((var(--ab-l1y, 0) - var(--ab-py, 0)) * var(--u)); }
/* ערכי הכיוונון של קצת עליי — נעולים (עדי, 27.9) */
.page { --ab-gx: 16; --ab-gy: 5; --ab-px: -15.5; --ab-py: -2.5; --ab-l1x: -15; --ab-l1y: 1; --ab-l2x: -15.5; --ab-l2y: 0; --ab-sx: 10.5; --ab-sy: 6.5; }
#about > .card:not(.deco) { translate: calc(var(--ab-gx, 0) * var(--u)) calc(var(--ab-gy, 0) * var(--u)); }
.about-photo, #about .deco:has(img[src*="doodle-profile"]) { translate: calc(var(--ab-px, 0) * var(--u)) calc(var(--ab-py, 0) * var(--u)); }
#about .deco:has(img[src*="profile-line-upper"]) { translate: calc(var(--ab-l1x, 0) * var(--u)) calc(var(--ab-l1y, 0) * var(--u)); }
#about .deco:has(img[src*="profile-line-lower"]) { translate: calc(var(--ab-l2x, 0) * var(--u)) calc(var(--ab-l2y, 0) * var(--u)); }
#about .deco:has(img[src*="smile"]) { translate: calc(var(--ab-sx, 0) * var(--u)) calc(var(--ab-sy, 0) * var(--u)); }

/* ─── המלצות ─── */

/* ─── פוטר ─── */
.contact-link { color: var(--ink); text-decoration: none; }
/* 10.10 (עדי, בעקבות בודק החוק): טקסט צהוב על רקע בהיר היה בניגודיות 1.57. הטקסט נשאר כהה, ומתחתיו נמשך קו צהוב */
.contact-link, .footer-bar a, .menu-links a { background: linear-gradient(var(--accent), var(--accent)) no-repeat 100% 94% / 0 .09em; transition: background-size .3s var(--ease); }
.menu-links a { width: fit-content; }   /* הקו ברוחב המילים, לא ברוחב הרשימה */
:is(.contact-link, .footer-bar a, .menu-links a):is(:hover, :focus-visible) { background-size: 100% .09em; }
.social img { display: block; width: 100%; height: 100%; }
.footer-bar, .credit-bar { width: 100%; left: 0; }
.footer-bar *, .credit-bar * { --w: initial; --h: initial; } /* הקישורים לא יורשים את רוחב הבר */
.footer-bar::before, .credit-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px));
  background: inherit;
}
.footer-bar a { color: var(--ink); text-decoration: none; }
.credit-bar p { color: rgba(61,61,59,.75); } /* 5:1 — מעל סף הניגודיות לטקסט קטן */
/* הפוטר על הרקע (עדי, 27.9): ראש ברווז גדול ממורכז על הקו הראשון, נחתך בפס; קו דק בין התפריט לקרדיט. */
.page { --fd-s: .846; --fd-x: 0; --fd-y: -20; --fd-strip: -55; --fd-line: -10; } /* ערכי הכיוונון של עדי, נעולים */
.footer-bar, .credit-bar { translate: 0 calc((110 + var(--fd-strip, 0)) * var(--u)); }
.credit-bar::after { content: ''; position: absolute; left: calc(85 / 1325 * 100%); right: calc(113 / 1325 * 100%); height: 1px; top: calc(var(--fd-line, 0) * var(--u)); background: rgba(61,61,59,.35); }
#footer-contact .duck-box {
  --w: calc(523 * var(--fd-s, 1)) !important; --h: calc(729 * var(--fd-s, 1)) !important;
  --lx: calc(271 + var(--fd-x, 0) - 261.5 * (var(--fd-s, 1) - 1)) !important;
  --ly: calc(271.75 + var(--fd-y, 0) - 74 * (var(--fd-s, 1) - 1)) !important;
  clip-path: inset(0 0 calc((var(--ly) + var(--h) - 724 - var(--fd-strip, 0)) * var(--u)) 0);
}

/* ─── רקע: קווי הגריד — 4 קווים אנכיים ב-250 · 525 · 800 · 1075, כמו בפריים 1325 ─── */
.grid-lines { position: absolute; inset: 0; display: block; }
/* קווי הגריד נעצרים בתחילת פס הפוטר (הלוגו והתפריט) */
.grid-lines { bottom: auto; height: calc(var(--fold) + (var(--gap0, 120) - 894 + var(--foot-shift, 51.1) + 5943 + 110 + var(--fd-strip, 0)) * var(--us)); }
/* הקווים יושבים בדיוק על גבולות העמודות של .grid5: מרכז העמוד ± 1.5 ו-0.5 עמודה */
.grid-lines i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc((250 + var(--k) * 275) / 1325 * 100%);
  background: var(--gray);
}

/* הברווז נכנס לפריים יחד עם הצופה: מתחיל חבוי לגמרי מאחורי הקיר,
   ונכנס לאט כשהדף נטען (בחירת עדי, 23.9) */
.duck-hero-inner {
  /* הקנבס גולש 250 יח' מעבר לחלון החיתוך — הברווז נחתך בקו הקיר כמו בפריים */
  position: absolute; right: calc(-250 * var(--u)); top: 0;
  width: calc(503 * var(--u)); height: calc(648 * var(--u));
  transform: translateX(calc(560 * var(--u)));
  transition: transform .7s var(--ease) .1s;
}
.duck-hero-inner.live { transform: translateX(0); }
.duck-in .duck-hero-inner { transform: translateX(0); } /* 9.10: בלי תלת־ממד (או כשהוא נכשל) תמונת הגיבוי נכנסת עם רשת הביטחון, במקום להישאר מחוץ לפריים */

/* ─── נגישות ─── */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--accent); } /* רק במקלדת: קו כהה והילה צהובה — נראה על כל רקע ובכל גודל */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ─── כפתורים צפים: וואטסאפ (עיגול צהוב) ונגישות (עיגול אפור כהה, אייקון לבן) ───
   בשוליים השמאליים, מחוץ לעמודות התוכן — לא עולים על טקסט או תמונה */
/* 7.10: עברו לימין למטה, והוואטסאפ ירוק (משוב עדי) */
.float-btns { --uw: calc(min(100vw, 2560px) / 1325); position: fixed; z-index: 50; left: auto; right: calc(20 * var(--uw)); bottom: calc(20 * var(--uw)); display: flex; flex-direction: column-reverse; gap: calc(10 * var(--uw)); } /* נגישות למטה, וואטסאפ מעליו (עדי, 27.9); בקוד הנגישות ראשונה — ראשונה גם במקלדת */
.float-btn { display: grid; place-items: center; width: calc(46 * var(--uw)); height: calc(46 * var(--uw)); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .25s var(--ease); }
.float-btn:hover { transform: scale(1.06); }
.float-btn svg { width: 52%; height: 52%; }
.float-btn.wa { background: #25D366; color: #fff; }
.float-btn.wa svg { width: 50%; height: 50%; }
.float-btn.wa svg path { stroke-width: 2.6; } /* קו דק כמו שאר האייקונים באתר, אבל גלוי בגודל הכפתור */
.float-btn.acc { background: var(--ink); color: #fff; }

/* ─── התפריט ─── */
.menu-toggle, .site-menu { --W: min(100vw, 2560px); --bl: max(0px, calc((100vw - 2560px) / 2)); --mu: calc(var(--W) / 1325 * .8); }
.hero-menu { visibility: hidden; } /* שומר את המקום; הכפתור הקבוע יושב בדיוק עליו */
.menu-toggle { position: fixed; z-index: 70; top: var(--mt, 0); right: var(--mr, 0); width: var(--mw, 33px); height: var(--mh, 18px);
  display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.menu-toggle img, .menu-toggle svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.menu-toggle::before { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } /* אזור לחיצה שקוף של 44 לפחות */
/* פאנל מימין, מקו הגריד השני ועד הקצה (כשני שלישים מהמסך): עמודה ריקה מימין, הקישורים באמצע, עמודה ריקה משמאל */
.site-menu { position: fixed; top: 0; bottom: 0; right: 0; width: calc(var(--bl) + var(--W) * 800 / 1325); z-index: 65; background: var(--bg); overflow: auto; box-shadow: -12px 0 40px rgba(0,0,0,.08); }
.menu-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(61,61,59,.18); }
.menu-backdrop[hidden] { display: none; }
.site-menu[hidden] { display: none; }
.menu-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(61,61,59,.08); }
.menu-lines i:nth-child(1) { right: calc(var(--bl) + var(--W) * 525 / 1325); }
.menu-lines i:nth-child(2) { right: calc(var(--bl) + var(--W) * 250 / 1325); }
/* הקישורים: תחילת השורה (ימין) על הקו הרביעי, ממורכזים בגובה */
.menu-links, .menu-contact { position: absolute; right: calc(var(--bl) + var(--W) * 250 / 1325); list-style: none; text-align: right; }
.menu-links { top: 50%; translate: 0 -58%; }
.menu-links a { display: block; font-weight: 700; font-size: calc(64 * var(--mu) * var(--a11y-fs, 1)); line-height: 1.3; /* 8.10 (עדי): הפונט היה גדול מדי */ color: var(--ink); text-decoration: none; }
/* האייקונים באפור, מיושרים לקו הגריד השמאלי של הפאנל (800) */
.menu-contact { right: auto; left: calc(var(--W) * 275 / 1325); bottom: calc(60 * var(--mu)); display: flex; gap: calc(30 * var(--mu)); }
.menu-contact a { display: block; width: calc(40 * var(--mu)); height: calc(40 * var(--mu)); }
.menu-contact img { display: block; width: 100%; height: 100%; }
.menu-open { overflow: hidden; }

/* ═══ טלפון — עד 767 (מ-768 ומעלה דסקטופ, גם טאבלט עומד — עדי, 29.9) ═══
   בלי קיר. הברווז מציץ מהקצה הימני של המסך; כותרות וטקסט על קו התוכן (--tx), שלושה קווי גריד.
   הכול כאן בתוך המדיה־קוורי: הדסקטופ לא מושפע (נעוץ בתג desktop-locked).
   היחידה --pu = פיקסל אחד (עדי, 28.9; rules.md: "פיקסלים במובייל לכל דבר"), כך שכל המספרים בבלוק הם פיקסלים.
   שני חריגים: כותרת השער קטנה כשהשורה הארוכה לא נכנסת בין קווי התוכן, והברווז בשער הולך עם הרוחב. */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  /* 390 הוא יחס, לא גבול (עדי, 30.9: "יש גדלי ביניים מוזרים"): מעל 390 כל עמוד הטלפון גדל יחד עם הרוחב, עד 767 —
     כמו ש-1325 בדסקטופ. ב-390 ומטה היחידה נשארת פיקסל אחד, בדיוק כמו שאושר */
  :root { --mpu: max(1px, 100vw / 390); } /* יחידת הטלפון לתפריט, שיושב מחוץ ל-.page */
  /* 9.10 (בדיקת 40 מסכים): במסך נמוך (טלפון שוכב 667×375, מתקפל פתוח 673×841, טלפון קטן 320×568) ההירו היה נמוך מהתוכן שלו:
     הכפתור ירד מתחת לקפל, הכותרת עלתה על הבועה, והברווז התכווץ לאפס. לכן לקפל יש גובה מינימלי ביחידות העמוד */
  .page { --pu: max(1px, 100cqw / 390); --fold: max(100svh, calc(480 * var(--pu))); }
  /* ‏המערכת של הטלפון (עדי, 28.9 — לפי rules.md: מודול 25, שוליים חיצוניים = מודול אחד):
     --om · הקו החיצוני, 25: הלוגו, ההמבורגר, הכפתורים הצפים והקצה הלבן של הכרטיסים והמסגרות.
     --tx · קו התוכן, 50 (שני מודולים): כל הטקסט והכותרות. בתוך כרטיס זה יוצא 25 ריפוד מכל צד.
     רווחים: כפולות של 25. */
  .page { --om: calc(25 * var(--pu)); --tx: calc(50 * var(--pu)); }
  .hero-wall { display: none; }
  /* הגריד חוזר (כיוון ג, עדי 28.9): שלושה קווים — קו התוכן מכל צד, וקו במרכז.
     הטקסט והכותרות נשענים על קווי התוכן; הפרויקטים, הברווז האפור וברווז הפוטר על הקו המרכזי */
  .grid-lines i:nth-child(1) { left: var(--tx); }
  .grid-lines i:nth-child(2) { left: 50%; }
  .grid-lines i:nth-child(3) { display: none; }
  .grid-lines i:nth-child(4) { left: calc(100% - var(--tx)); }
  .hero { overflow: clip; } /* ההילה של הברווז לא גולשת לחלק הבא (עדי, 28.9) */
  /* 9.10: החיתוך הזה חתך גם את החצי התחתון של הכוכבית (עדי, 8.10). ההילה מימין נשארת חתוכה; רק בפינה של הכוכבית החיתוך יורד מתחת להירו */
  .hero { overflow: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--tx) + 70 * var(--pu)) 100%, calc(var(--tx) + 70 * var(--pu)) calc(100% + 60 * var(--pu)), 0 calc(100% + 60 * var(--pu))); }
  .duck-go .duck-hero-inner { transform: translateX(0); } /* נכנס מיד עם תמונת הגיבוי — js/menu.js */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0 0 minmax(0, 1fr); }
  .hero-logo { grid-column: 1 / 3; width: calc(100 * var(--pu)); margin: calc(36 * var(--pu)) 0 0 var(--om); }
  .hero-menu { grid-column: 5; justify-self: end; width: calc(30 * var(--pu)); height: calc(16 * var(--pu)); margin: calc(46 * var(--pu)) var(--om) 0 0; }
  /* הכותרת למעלה, על קצה העמוד */
  /* 7.10 (378 במובייל): הבלוק צמוד לקו הגריד השמאלי, מעט נמוך יותר, והכותרת רצה עד הקצה הימני */
  .hero-title { grid-column: 1 / -1; grid-row: 1 / -1; justify-self: start; align-self: start; top: 0; margin: calc(150 * var(--pu)) 0 0 var(--tx); }
  /* הכותרת של השער גדולה בהרבה מכותרות החלקים (עדי, 27.9): "הופך לבית." ממלאת את הרוחב בין הקצוות */
  .hero-title h1 { font-size: calc(min(var(--h1s, 72) * var(--pu), (100cqw - var(--tx) - 20 * var(--pu)) / 4.45) * var(--a11y-fs, 1)); line-height: 1.02; text-align: left; }
  .hero-title { text-align: left; }
  .hero-cta { margin-top: calc(25 * var(--pu)); font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); padding: calc(15 * var(--pu)) calc(30 * var(--pu)); }
  .hero-ast { left: var(--tx); bottom: calc(12 * var(--pu)); width: calc(120 * var(--pu)); }
  /* "דאק סטודיו." מיושר לנקודה של "לבית." (שמאל הכותרת), כמו בדסקטופ — הצד הימני מתחת לכותרת פנוי לברווז (עדי, 27.9) */
  .hero-title p { font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(10 * var(--pu)); text-align: left; }
  /* הברווז: אותה קבוצה כמו בדסקטופ (ברווז, צל, הילה, חץ ובועה), צמודה לקצה הימני של המסך ולתחתית — המסך הוא שחותך אותו */
  /* הברווז (עדי, 27.9): המסך חותך אותו רק מימין; הנורה כולה נראית. גודל: הולך עם הרוחב — זהה ב-380, קטן ב-360, גדל ב-430 (עדי, 29.9),
     או קטן יותר כשהגובה לא מספיק — הקבוצה (649 + 10 שוליים) נכנסת מתחת לשורה השנייה של הכותרת (290) */
  .hero-duck { grid-column: 1 / -1;
    --u: min(calc(100cqw / 380 * .9), calc((var(--fold) - 330 * var(--pu)) / 659)); /* 7.10: 10% קטן יותר, מקום לכותרת */
    margin-bottom: calc(10 * var(--u)); }
  /* הבועה והחץ במקום שלהם מהדסקטופ — ליד בסיס הנורה, בשטח הפנוי (עדי, 27.9); הבועה נגמרת איפה שהחץ מתחיל */
  .page { --by: var(--hby, -45); --ay: var(--hay, -60); --ax: var(--hax, -60); } /* שמאלה; החץ בגובה הקו העליון של בסיס הנורה (עדי, 28.9) */
  .bubble { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); left: auto; right: calc(100% - (80 + var(--ax)) * var(--u) + 10px); width: auto; height: auto;
            align-items: flex-end; text-align: right; }
  /* 9.10: כשהברווז מתכווץ (מסך נמוך) הבועה נשארת בגודל הטקסט ויצאה מתחתית ההירו (320×568, 673×841) — עולה בדיוק כמה שחסר */
  .bubble { translate: calc(var(--bx, 0) * var(--u)) calc(var(--by, 0) * var(--u) - max(0px, 3.6em + 14px - 187 * var(--u))); }
  .arrow-hero { scale: 1.14; transform-origin: left center; }
  /* הכפתורים הצפים: גודל אגודל (46), לא יחידת דסקטופ. הנגישות תמיד; הוואטסאפ מצטרף מעליה רק אחרי השער (עדי, 27.9) — js/menu.js מסמן past-hero */
  /* עיגולים של 40 על הקו החיצוני (25) — כמו הקצה הלבן של הכרטיסים (עדי, 28.9) */
  .float-btns { right: calc(25 * var(--mpu)); bottom: calc(25 * var(--mpu)); gap: 10px; }
  /* 12.10 (עדי): הוואטסאפ הצף תמיד במסך, בכל העמודים חוץ מ-404, גם על השער בטלפון. עד היום הוא הצטרף רק אחרי השער */
  /* גלילה למטה: ההמבורגר והכפתורים יורדים מהדרך; הנגישות חוזרת בעצירה (js/menu.js) */
  .menu-toggle, .float-btn.acc { transition: opacity .3s var(--ease), visibility .3s, transform .25s var(--ease); }
  /* 9.10: הנגישות והוואטסאפ נשארים תמיד במסך; ההיעלמות בגלילה עברה לסרגל העליון (סוף הקובץ) */
  .float-btn { width: 40px; height: 40px; }

  /* ─── מתחת לשער: החלקים זורמים אחד אחרי השני (בדסקטופ כל אחד ממוקם בנקודה מחושבת בדף) ─── */
  .page { height: auto; }
  .grid-lines { height: auto; bottom: 0; }

  /* ─── התמחויות (כיוון ב, עדי 27.9): הכותרת על הקו הימני, הכרטיסים ברוחב כמעט מלא ─── */
  /* כל חלק בנוי: זורם, והכותרת ושורת הפתיחה שלו נשענות על הקו הימני */
  :is(#specialties, #projects, #about, #values, #together, #testimonials, footer) { position: relative; top: auto; height: auto; padding-top: calc(75 * var(--pu)); }
  :is(#specialties, #projects, #about, #values, #together, #testimonials, footer) > :is(p, h2).abs:not(.t-l25), #testimonials > .card > :is(p, h2).in:not(.re) {
    position: static; width: auto; height: auto; margin-right: var(--tx); text-align: right; }
  :is(#specialties, #projects, #about, #values, #together, #testimonials, footer) > p.t-l50, #testimonials > .card > p.t-l50 { font-size: calc(24 * var(--pu) * var(--a11y-fs, 1)); }
  :is(#specialties, #projects, #about, #values, #together, #testimonials, footer) > h2.abs, #testimonials > .card > h2.in { font-size: calc(40 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(5 * var(--pu)); }
  /* הכרטיס: המסגרת נחתכת לתשעה — הפינה עם החריץ (שבו יושב האייקון) בגודל קבוע, רק הצלעות נמתחות */
  #specialties > .card:nth-of-type(n) { --u: calc(var(--pu) * .95); position: relative; left: auto; top: auto; translate: none; width: auto; height: auto;
    /* הקצה הלבן על הקו החיצוני, והטקסט על קו התוכן — ריפוד 25 מכל צד (עדי, 28.9).
       הצל של קובץ המסגרת: 15 למעלה ומשמאל, 23 מימין ולמטה — מקוזז בשוליים ובריפוד */
    --cp: calc(var(--tx) - var(--om));
    margin: calc(-5 * var(--pu)) calc(var(--om) - 15 * var(--pu)) 0; /* הצל תופס 15 מכל צד של התיבה: הקצה הנראה על הקו החיצוני, 25 בין כרטיס לכרטיס */
    padding: calc(15 * var(--pu) + var(--cp)) calc(15 * var(--pu) + var(--cp)) calc(15 * var(--pu) + var(--cp) + 45 * var(--pu));
    border: 0 solid transparent; border-image: url(../assets/specialty-frame-3.svg) 40 fill / calc(38 * var(--pu)); } /* 7.10: החיתוך האלכסוני בימין למעלה, כמו בדסקטופ */
  #specialties > .card:nth-of-type(n) > .frame-box { display: none; }
  /* האייקונים כמו בדסקטופ (עדי, 28.9): באותו גובה (64), מיושרים לכרטיס — הקצה השמאלי על הקצה הלבן השמאלי,
     והחלק העליון בגובה החלק העליון של הכרטיס (הצל של המסגרת: 15 משמאל ומלמעלה) */
  /* כולם ברוחב של המחשב (עדי, 28.9): 64 גובה × 91/76 */
  /* 8.10 (עדי): האייקון בגובה גוש הכותרת (שתי שורות של 32 = 67), ממורכז מולו, ולא יורד אל הפסקה */
  #specialties > .card:nth-of-type(n) > .deco:nth-child(2) { --iw: calc(50 * var(--pu) * 91 / 76); --th: calc(67 * var(--pu)); width: var(--iw); height: calc(var(--iw) * var(--h) / var(--w));
    left: calc(25 * var(--pu) + var(--cp)); top: calc(15 * var(--pu) + var(--cp) + (var(--th) - var(--iw) * var(--h) / var(--w)) / 2); translate: none; scale: 1; } /* 7.10: בתוך הכרטיס */
  /* העט צר וגבוה: בגובה של הלייק ולא ברוחב המחשב, כדי שלא ייצא מהחריץ (עדי, 28.9) */
  #specialties > .card:nth-of-type(1) > .deco:nth-child(2) { height: calc(var(--iw) * 76 / 68); width: calc(var(--iw) * 76 / 68 * var(--w) / var(--h)); top: calc(15 * var(--pu) + var(--cp) + (var(--th) - var(--iw) * 76 / 68) / 2); }
  #specialties > .card:nth-of-type(n) > h3, #specialties > .card:nth-of-type(n) > p { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; }
  #specialties > .card:nth-of-type(1) { margin-top: calc(10 * var(--pu)); } #specialties > .card:nth-of-type(3) { margin-bottom: calc(-15 * var(--pu)); }
  #specialties > .card:nth-of-type(n) > h3 { font-size: calc(32 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.05; } /* הכותרת גדולה וממלאת עד החריץ, כמו בדסקטופ */
  #specialties > .card:nth-of-type(n) > p { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; margin-top: calc(25 * var(--pu)); }
  #specialties > .card:nth-of-type(n) > .deco:last-child { left: calc(15 * var(--pu) + var(--cp)); top: auto; bottom: calc(15 * var(--pu) + var(--cp)); width: calc(20 * var(--pu)); height: calc(20 * var(--pu)); translate: none; }

  /* ─── פרויקטים: אחד בשורה (עדי, 27.9), ממורכזים בטור האמצעי, בסדר הקריאה של הדסקטופ (מימין לשמאל, שורה אחרי שורה);
     המקום שלך בסוף. --gu: יחידת התא — תא של 231 יחידות ברוחב שני שלישים מהמסך */
  #projects { --gu: calc(100cqw * 2 / 3 / 231); }
  #projects > .card:not(.deco) { --u: var(--gu); position: relative; left: auto; top: auto; width: auto; height: auto; margin: calc(25 * var(--pu)) 0 0;
    display: flex; flex-direction: column; align-items: center; gap: calc(50 * var(--pu)); }
  #projects > .card:not(.deco) > .in { position: relative; left: auto; top: auto; }
  #projects > .card:not(.deco) > :nth-child(3) { order: 1; } #projects > .card:not(.deco) > :nth-child(6) { order: 2; }
  #projects > .card:not(.deco) > :nth-child(1) { order: 3; } #projects > .card:not(.deco) > :nth-child(2) { order: 4; }
  #projects > .card:not(.deco) > :nth-child(7) { order: 5; } #projects > .card:not(.deco) > :nth-child(4) { order: 6; }
  #projects > .card:not(.deco) > :nth-child(5) { order: 7; margin-top: calc(-34 * var(--pu)); width: auto; }
  /* יישור לפי החלק הנראה של כל תמונה, כולל הצל (עדי, 27.9): השוליים השקופים נחתכים, והתמונה ממורכזת לפי מה שרואים.
     הערכים נמדדו מהשקיפות של הקבצים — שבר מגודל התא (231; המקום שלך 233.4). כך הרווח בין תמונה לתמונה אחיד.
     מרכוז לרוחב — לפי גוף המכשיר בלי הצל, ושם כולם כבר במרכז התא (נמדד, עדי 28.9) */
  #projects { --cs: calc(231 * var(--gu)); }
  /* גדלים אחידים לעין (עדי, 28.9): לכל תמונה קנה מידה לפי החלק הנראה שלה — ממוצע בין השוואת גובה להשוואת שטח.
     הלפטופ הנמוך גדל, המכשירים הגבוהים קטנים מעט. הרווחים נשארים אחידים (השוליים מחושבים מהגודל החדש) */
  /* המוקאפים החדשים באותו מסגור (1.10): גודל אחיד, ורווח אחיד ביניהם */
  #projects > .card:not(.deco) > .cell { margin-block: calc(-.085 * var(--cs)); }
  #projects > .card:not(.deco) > :nth-child(4) { --u: calc(var(--gu) * 1.15); margin-block: calc(-.207 * 233.4 * var(--u)) calc(-.084 * 233.4 * var(--u)); } /* המקום שלך גדול ב-15% (עדי, 29.9); השוליים נמדדו על הברווז החי */
  #projects .your-place + p { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); }
  #projects > .deco.card { display: none; } /* בלי העיגולים בטלפון (עדי, 28.9) */
  /* פולד פרויקט בטלפון: שם ותגיות, המוקאפ מהקו החיצוני עד הקו החיצוני, הסיפור והקישור */
  .proj-fold { position: relative; left: auto; top: auto; width: auto; height: auto; margin: calc(25 * var(--pu)) var(--tx) 0; display: flex; flex-direction: column; }
  /* המוקאפ ראשון וממורכז (עדי, 7.10: "המחשב לא צריך להיות מוטה לצד במובייל"), השם מתחתיו, היישור לסירוגין, הכפתור צמוד לשמאל */
  .proj-fold .proj-mock { order: 1; align-self: stretch; margin: 0 calc(var(--om) - var(--tx)); } .proj-fold .proj-head { order: 2; margin-top: calc(7 * var(--pu)); } /* תיבת המוקאפ מחזיקה 18 אוויר מתחת לטלפון: יוצא 25 נראה */ .proj-fold:has([data-device="laptop"]) .proj-head { margin-top: calc(-11 * var(--pu)); } .proj-fold .proj-body { order: 3; display: flex; flex-direction: column; }
  .proj-fold[data-side] :is(.proj-head, .proj-body) { padding: 0; align-self: stretch; }
  .proj-fold[data-side] :is(.proj-head, .proj-body) { text-align: right; } /* בטלפון כיוון אחיד: השם לימין, הכפתור לשמאל (עדי, 7.10) */
  .proj-mock .dm-fit { justify-content: center !important; } .proj-mock .dm-combo { translate: 0 0 !important; } .proj-mock .duck-mockup { margin: 0 !important; }
  .proj-fold + .proj-fold { margin-top: calc(75 * var(--pu)); }
  .proj-place { position: relative; left: auto; top: auto; width: auto; height: auto; margin: calc(75 * var(--pu)) var(--tx) 0; }
  .proj-place .your-place { width: 55%; height: auto; aspect-ratio: 231 / 233.4; }
  .proj-place h3 { font-size: calc(32 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.05; }
  .proj-place .proj-link { align-self: center; margin-top: calc(25 * var(--pu)); } .proj-place h3 { margin-top: calc(10 * var(--pu)); }
  .proj-fold h3 { font-size: calc(32 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.05; }
  .proj-body > p { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(24 * var(--pu)); }
  .proj-link { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(25 * var(--pu)); padding: calc(15 * var(--pu)) calc(30 * var(--pu)); align-self: flex-end; } /* flex-end ב-RTL = שמאל */

  /* ─── קצת עליי: התמונה עם הקישוטים שלה ברוחב המסך, והטקסט מתחתיה ─── */
  /* התמונה בין שני קווי התוכן (עדי, 29.9): היד השמאלית נוגעת בקו השמאלי והסמיילי נגמר על הקו הימני.
     נמדד: היד 41.6 יחידות מקצה הכרטיס, הסמיילי 11.6 מהקצה השני — ביניהם 495.8 יחידות = הרוחב שבין הקווים */
  #about > .card:not(.deco) { --u: calc((100cqw - 2 * var(--tx)) / 495.8); position: relative; left: auto; top: auto; translate: none;
    margin: calc(25 * var(--pu)) auto 0 calc(var(--tx) - 41.6 * var(--u)); }
  #about > .t-l25 { position: static; width: auto; height: auto; margin: calc(25 * var(--pu)) var(--tx) 0; text-align: right;
    font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; text-wrap: pretty; } /* בלי מילה בודדת בסוף פסקה (עדי, 28.9) */
  /* שבירות שורה של הדסקטופ שנופלות באמצע משפט (d-br) — יורדות בטלפון; סימנים שנחוצים רק בדסקטופ (m-hide) */
  .d-br, .m-hide { display: none; }

  /* ─── ערכים: זיגזג של חצי טור (עדי, 29.9) — כל ערך מיושר לימין: האייקון, השם ותחילת הטקסט בקצה הימני שלו,
     והשורות נמשכות עד הקו שמשמאלו. לסירוגין: מהקו הימני עד חצי הטור השמאלי, ומחצי הטור הימני עד הקו השמאלי.
     שבירה רגילה (לא מאוזנת ולא מיושרת לשני הצדדים) — כל שורה מתמלאת עד הקו ─── */
  #values > .deco.card { --u: calc(var(--pu) * .35); left: 50%; top: 55%; translate: -50% -50%; } /* מאחורי רשימת הערכים */
  #values > .card.on-line { --u: calc(var(--pu) * .8); --half: calc((100cqw - 2 * var(--tx)) / 4); position: relative; left: auto; top: auto; width: auto; height: auto;
    margin: calc(10 * var(--pu)) var(--tx) 0; display: flex; flex-direction: column; align-items: stretch; }
  #values > .card.on-line > .in { position: relative; left: auto; right: auto; top: auto; text-align: right; }
  #values > .card.on-line > .deco { align-self: flex-start; margin-top: calc(50 * var(--pu)); }
  #values > .card.on-line > .deco:first-child { margin-top: calc(15 * var(--pu)); } /* הערך הראשון 25 מתחת לכותרת */
  #values > .card.on-line > :nth-child(1),
  #values > .card.on-line > :nth-child(2),
  #values > .card.on-line > :nth-child(3),
  #values > .card.on-line > :nth-child(7),
  #values > .card.on-line > :nth-child(8),
  #values > .card.on-line > :nth-child(9),
  #values > .card.on-line > :nth-child(13),
  #values > .card.on-line > :nth-child(14),
  #values > .card.on-line > :nth-child(15) { margin-left: var(--half); }
  #values > .card.on-line > :nth-child(4),
  #values > .card.on-line > :nth-child(5),
  #values > .card.on-line > :nth-child(6),
  #values > .card.on-line > :nth-child(10),
  #values > .card.on-line > :nth-child(11),
  #values > .card.on-line > :nth-child(12) { margin-right: calc(var(--half) + var(--fit, 0px)); } /* --fit: menu.js מכווץ לשורה הארוכה */
  #values > .card.on-line > h3 { width: auto; text-align: right; font-size: calc(32 * var(--pu) * var(--a11y-fs, 1)); margin-top: calc(10 * var(--pu)); }
  #values > .card.on-line > p { width: auto; height: auto; text-align: right; font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; margin-top: calc(10 * var(--pu)); }
  #values > .card.on-line > p br { display: none; }
  #values .m-blk { display: inline; }
  #values .m-nw { white-space: nowrap; } /* מילת פתיחה קצרה (לכן, גם, זה, כל) לא נשארת לבד בסוף שורה */

  /* ─── המלצות: הכותרת על הקו; המסגרת בחיתוך תשעה, הפוכה כמו בדסקטופ — החריץ בפינה הימנית־התחתונה, ובו המירכאות ─── */
  /* ככה עובדים יחד בטלפון: אחד מתחת לשני, הברווז ב-60% מהרוחב */
  .tg-row { position: relative; left: auto; top: auto; width: auto; margin: calc(25 * var(--pu)) var(--tx) 0; display: flex; flex-direction: column; gap: calc(50 * var(--pu)); }
  .tg-duck { width: 58%; margin-inline: 0 auto; }
  .tg-item h3 { font-size: calc(32 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.05; margin-top: calc(10 * var(--pu)); }
  .tg-item p { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; margin-top: calc(10 * var(--pu)); }

  /* סיפורי הצלחה בטלפון: הכרטיס מהקו החיצוני עד הקו החיצוני, הטקסט על קו התוכן */
  .st-card { border-radius: calc(24 * var(--pu)); /* בטלפון היחידה של הכרטיס קטנה והרדיוס יצא 6.6 — כמעט ישר (עדי, 8.10); 24 כמו הרדיוס הנראה של כרטיסי ההתמחויות */ position: relative; left: auto; top: auto; width: auto; translate: none; margin: calc(25 * var(--pu)) var(--om) 0; padding: calc(25 * var(--pu)) calc(var(--tx) - var(--om)); }
  .st-t, .st-quote { max-width: none; }
  .st-t, .st-quote blockquote { white-space: normal; } .st-t br, .st-quote br { display: none; }
  .st-t, .st-quote blockquote, .st-quote figcaption { font-size: calc(20 * var(--pu) * var(--a11y-fs, 1)); line-height: 1.3; }
  .st-quote { margin-top: calc(25 * var(--pu)); }
  .st-quote figcaption { margin-top: calc(25 * var(--pu)); }
  .st-nav { margin-top: calc(25 * var(--pu)); }
  .st-ars { gap: calc(14 * var(--pu)); }
  .st-ar { width: calc(32 * var(--pu)); height: calc(32 * var(--pu)); }
  .st-ar .arw { height: calc(14 * var(--pu)); }

  /* ─── פוטר: כותרת, טלפון ומייל על הקווים; ראש הברווז ממורכז על הקו הראשון ונחתך בפס, כמו בדסקטופ; הפס עם הלוגו והקישורים ─── */
  footer { display: flex; flex-direction: column; }
  footer > p.abs { order: 1; } footer > h2.abs { order: 2; }
  footer > .card:has(.contact-link) { order: 3; } footer > .card:has(.social) { order: 4; }
  footer > .card:has(.duck-box) { order: 5; } footer > .footer-bar { order: 6; } footer > .credit-bar { order: 7; }
  footer > h2.lft { text-align: right; }
  footer > h2.abs br { display: none; } /* "שנעבור לפרטי?" בשורה אחת (עדי, 28.9) */
  footer > .card:has(.contact-link) { --u: calc(var(--pu) * .72); position: relative; left: auto; top: auto; flex: none; margin: calc(25 * var(--pu)) auto 0 var(--tx); } /* פרטי הקשר צמודים לשמאל (עדי, 28.9) */
  footer > .card:has(.social) { --u: calc(var(--pu) * .9); position: relative; left: auto; top: auto; flex: none; margin: calc(25 * var(--pu)) auto 0 var(--tx); }
  /* הברווז מתחבא מאחורי הפס (כיוון 3, עדי 28.9): רואים רק עד תחילת המקור. הכרטיס והחיתוך של הברווז
     עולים יחד 122 יחידות מקו הפס של הדסקטופ (669) — הברווז מציץ טיפה יותר מעל המדף (עדי, 28.9). הראש במרכז המסך */
  footer > .card:has(.duck-box) { --u: calc(var(--pu) * .62); --hide: 70; /* כמה מהברווז מתחבא מאחורי הפס — עדי בחר בסליידר (+10), 29.9 */ position: relative; left: auto; top: auto; flex: none; height: calc((669 - var(--hide)) * var(--u));
    margin: calc(-314 * var(--u)) 0 0; align-self: flex-start; left: calc(468 * var(--u) - 100cqw / 2); } /* רחב מהמסך, ולכן מוזז ולא בשוליים; עולה על החלק הריק שמעל הראש */
  /* קו דק בגובה החיתוך — ה"מדף" שהברווז מציץ מאחוריו (כמו הקו שמעל הקרדיט) */
  footer > .footer-bar::after { content: ""; position: absolute; top: 0; left: var(--om); right: var(--om); height: 1px; background: rgba(61, 61, 59, .35); }
  #footer-contact .duck-box { clip-path: inset(0 0 calc((var(--ly) + var(--h) - 724 - var(--fd-strip, 0) + var(--hide)) * var(--u)) 0); }
  footer > .footer-bar, footer > .credit-bar { position: relative; top: auto; left: auto; width: auto; height: auto; translate: none; }
  /* החלק התחתון מצומצם (עדי, 29.9): לוגו קטן יותר ורווחים הדוקים; ההצהרות בשורה משלהן, קטנות ובהירות */
  footer > .footer-bar { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--pu)); padding: calc(20 * var(--pu)) calc(16 * var(--pu)) calc(14 * var(--pu)); }
  footer > .footer-bar > .logo { position: static; width: calc(115 * var(--pu)); }
  footer > .footer-bar > nav { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--pu)) calc(18 * var(--pu)); }
  footer > .footer-bar > nav::before { content: ""; flex-basis: 100%; order: 1; }
  footer > .footer-bar > nav > a { position: static; order: 0; font-size: calc(16 * var(--pu) * var(--a11y-fs, 1)); }
  footer > .footer-bar > nav > a:nth-last-child(-n+2) { order: 2; font-size: calc(12 * var(--pu) * var(--a11y-fs, 1)); opacity: .75; }
  footer > .credit-bar { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--pu)); padding: calc(12 * var(--pu)) calc(16 * var(--pu)) calc(18 * var(--pu)); }
  footer > .credit-bar > p { position: static; font-size: calc(12 * var(--pu) * var(--a11y-fs, 1)); }
  footer > .credit-bar::after { left: var(--om); right: var(--om); top: 0; } /* כמו קו המדף — על הקו החיצוני */
  /* התפריט על גריד הטלפון (עדי, 27.9): הפאנל מהקו הראשון ועד הקצה, השליש השמאלי מעומעם.
     הקישורים והאייקונים מתחילים על קו הקיר (הקו השני) — כמו בדסקטופ, שם הם מתחילים על הקו הרביעי */
  .site-menu { width: calc(200vw / 3); }
  .menu-lines { display: none; } /* בלי קווי גריד בתפריט (עדי, 27.9) */
  .menu-links a { font-size: calc(28 * var(--mpu) * var(--a11y-fs, 1)); line-height: 1.4; }
  /* רווחים שווים (עדי, 27.9): מה-X לרשימה = מהרשימה לטלפון ולמייל = מהם לתחתית.
     בלי גריד בתפריט — הקישורים והאייקונים מתחילים בקצה הימני של ה-X (ה-X: 90% מכפתור של 30, במרכז עמודת הקיר) */
  .site-menu { display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
               padding: calc(66 * var(--mpu)) calc(25 * var(--mpu) + 1.5 * var(--mpu)) 0 0; }
  .menu-links, .menu-contact { position: static; translate: none; }
  .menu-contact { gap: 24px; }
  .menu-contact a { width: 36px; height: 36px; }
}


/* ─── החוויה בטלפון (עדי, 8.10): זיגזג לפי קווי הגריד. "מעבר לעיצוב" נשאר על קו התוכן הימני,
   סוף המילה "החוויה" על הקו האמצעי, והפריטים מתחלפים בין העמודות: שמאל, ימין, שמאל.
   כל הברווזים באותו כיוון (בלי שיקוף), והטקסט נגמר על קו הגריד של העמודה ─── */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  .page #together > h2.abs.t-b90 { margin-inline: auto 50%; text-align: left; } /* התיבה מתחילה בקו האמצעי, והמילה נצמדת לקצה השמאלי שלה */
  #together .tg-item { width: 50%; }
  #together .tg-item:nth-child(odd) { margin-inline-start: auto; }
  #together .tg-duck { width: 100%; margin-inline: 0; }
  #together .tg-item p { white-space: nowrap; }
}
/* 9.10 (בודק QA): בטלפון כרטיס הברווז והפס של הפוטר תפסו את הלחיצות על הטלפון, המייל, הרשתות וקישורי הפוטר */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  footer > .card:has(.duck-box) { pointer-events: none; }
  .footer-bar::before, .credit-bar::before { pointer-events: none; z-index: -1; }
}
/* 9.10 (עדי): בכל האתר הנגישות בשמאל והוואטסאפ בימין. המכל נמתח לרוחב המסך ולא תופס לחיצות */
.float-btns { left: calc(20 * var(--uw)); direction: ltr; flex-direction: row; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.float-btn { pointer-events: auto; }
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) { .float-btns { left: calc(25 * var(--mpu)); } }
/* 9.10: קישור 'דלג לתוכן' (נראה רק בפוקוס מקלדת) וטקסט לקוראי מסך בלבד */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 60; top: 12px; left: 50%; transform: translate(-50%, -300%); padding: 10px 18px; border-radius: 999px; background: #3D3D3B; color: #fff; text-decoration: none; font-size: 16px; pointer-events: auto; }
.skip:focus-visible { transform: translate(-50%, 0); }
.float-btns:has(.skip:focus-visible) { z-index: 72; } /* 12.10: הקישור יושב בתוך הכפתורים הצפים (שכבה 50) ונבלע מאחורי הסרגל (63). כשהוא במוקד כל הקבוצה עולה מעליו */
/* 9.10 (עדי): כותרות ההתמחויות והערכים באפור הכהה, והצהוב עובר לחצי הדגשה מאחורי המילים — ניגודיות מלאה לטקסט */
.hl { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / 100% .3em; white-space: nowrap; }
/* 9.10 (עדי): גם בטלפון כותרת ההתמחות בשתי שורות, כמו במחשב */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) { #specialties h3 .d-br { display: inline; } }
/* 9.10 (בודק QA): אזור הלחיצה בטלפון גדל ל-44 סביב כפתורים וקישורים קטנים; המראה לא משתנה. בפס התחתון 30, כדי ששורות שכנות לא יתפסו זו את זו */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  .st-ar, .float-btn { position: relative; }
  footer .footer-bar a { position: relative !important; inset: auto !important; }   /* בטלפון הקישורים בזרימה; relative רק כדי שאזור הלחיצה ייצמד לקישור עצמו */
  :is(.st-ar, a.social, .contact-link, .float-btn)::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .footer-bar a::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% + 12px); height: max(100%, 30px); transform: translate(-50%, -50%); }
}
/* 9.10 (עדי): בהגדלת טקסט בטלפון ההירו מפסיק להיות מסך אחד — הוא נמשך למטה, והברווז יורד מתחת לטקסט במקום לעלות עליו */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  html:is([data-a11y-text="2"], [data-a11y-text="3"], [data-a11y-text="4"]) .hero { height: auto; min-height: var(--fold); grid-template-rows: auto auto; }
  html:is([data-a11y-text="2"], [data-a11y-text="3"], [data-a11y-text="4"]) .hero-title { grid-row: 1; }
  html:is([data-a11y-text="2"], [data-a11y-text="3"], [data-a11y-text="4"]) .hero-duck { grid-row: 2; margin-top: calc(20 * var(--pu)); }
}
/* 9.10 (עדי): במתקפל פתוח ובטאבלט עומד הרווח שמעל הכותרת מצטמצם — המסך רחב ולא גבוה, ו-150 יחידות תפסו שליש ממנו */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { .hero-title { margin-top: max(calc(95 * var(--pu)), min(calc(150 * var(--pu)), 17.8svh)); } }

/* ═══ סרגל עליון ותפריט זכוכית (עדי, 9.10) ═══
   ראש העמוד נשאר כמו שהיה: הלוגו בשער, ושלושת הקווים במקומם. אחרי גלילה קצרה מופיעה קפסולה מטושטשת
   עם לוגו ושלושת הקווים. בזמן גלילה למטה היא נעלמת, ובעצירה היא חוזרת (js/menu.js).
   התפריט: זכוכית צפה ומעוגלת ברוחב הקישורים. הקישורים, האיקס והאייקונים נשענים על אותו קו ימני (--tgr).
   כפתורי הנגישות והוואטסאפ נשארים תמיד במסך. */
html { --bu: calc(min(100vw, 2560px) / 1440); --bbl: max(0px, calc((100vw - 2560px) / 2)); --tgr: var(--tgr0, 0px);
       --bar-top: calc(14 * var(--bu)); --bar-in: calc(20 * var(--bu)); --bar-h: calc(62 * var(--bu)); --pan-in: calc(14 * var(--bu));
       /* 9.10 (עדי): הקישורים היו צמודים מדי לימין. הריווח מקצה התפריט: לפחות 84, והאיקס זז אליו כשהתפריט פתוח */
       --mpad: max(calc(84 * var(--bu)), calc(var(--tgr) - var(--bbl) - var(--pan-in))); }
html.bar-on { --tgr: calc(var(--bbl) + 74 * var(--bu)); --tgb: calc(var(--bar-top) + (var(--bar-h) + 17 * var(--bu)) / 2); }
html { --tgb: var(--tgb0, 97px); } /* התחתית של שלושת הקווים: ממנה מתחיל הריווח השווה בתפריט */
.top-bar { position: fixed; z-index: 63; top: var(--bar-top); left: calc(var(--bbl) + var(--bar-in)); right: calc(var(--bbl) + var(--bar-in)); height: var(--bar-h);
  border-radius: 999px; border: 1px solid rgba(61,61,59,.14); background: rgba(252,252,252,.68); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), visibility .3s, transform .35s var(--ease); }
.top-logo { position: absolute; left: calc(54 * var(--bu)); top: 50%; translate: 0 -50%; width: calc(108 * var(--bu)); display: block; }
.top-logo img { display: block; width: 100%; height: auto; }
.bar-on .top-bar { opacity: 1; visibility: visible; transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top-bar, .site-menu { background: rgba(252,252,252,.96) !important; } }

/* שלושת הקווים: שלושה קווים אמיתיים, שהופכים לאיקס */
.menu-toggle { right: var(--tgr); transition: top .35s var(--ease), right .35s var(--ease), width .35s var(--ease), height .35s var(--ease), opacity .3s var(--ease), visibility .3s; }
.bar-on .menu-toggle { top: calc(var(--bar-top) + (var(--bar-h) - 17 * var(--bu)) / 2); width: calc(30 * var(--bu)); height: calc(17 * var(--bu)); }
.menu-toggle i { position: absolute; left: 0; width: 80%; height: 1.4px; border-radius: 1px; /* 9.10 (עדי): בעובי הקו של אייקוני הטלפון והמייל */ background: currentColor;
  transition: transform .4s var(--ease), opacity .2s, width .4s var(--ease), top .4s var(--ease), left .4s var(--ease); }
.menu-toggle i:nth-child(1) { top: 0; } .menu-toggle i:nth-child(2) { top: calc(50% - .7px); left: 20%; } .menu-toggle i:nth-child(3) { top: calc(100% - 1.4px); }
.menu-open .menu-toggle i:nth-child(1) { top: calc(50% - .7px); width: 100%; transform: rotate(45deg); }
.menu-open .menu-toggle i:nth-child(3) { top: calc(50% - .7px); width: 100%; transform: rotate(-45deg); }
.menu-open .menu-toggle i:nth-child(2) { opacity: 0; left: -30%; }
/* בזמן גלילה למטה הסרגל ושלושת הקווים יורדים מהדרך, ובעצירה חוזרים */
.scroll-down:not(.scroll-idle):not(.menu-open) :is(.top-bar, .menu-toggle) { opacity: 0; visibility: hidden; }

/* התפריט */
.menu-backdrop { background: rgba(61,61,59,.08); opacity: 0; transition: opacity .3s var(--ease); }
.menu-open .menu-backdrop { opacity: 1; }
.site-menu { top: var(--pan-in); bottom: var(--pan-in); right: calc(var(--bbl) + var(--pan-in)); width: auto; max-width: calc(100vw - 2 * var(--pan-in));
  border-radius: calc(26 * var(--bu)); border: 1px solid rgba(61,61,59,.14); background: rgba(252,252,252,.68); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.12);
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
  padding: calc(var(--tgb) - var(--pan-in)) var(--mpad) 0; /* 9.10 (עדי): ריווח שווה, כמו בטלפון - מהאיקס לרשימה, מהרשימה לאייקונים, ומהם לתחתית */
  transform: translateX(calc(100% + 40px)); transition: transform .45s var(--ease); }
.menu-open .site-menu { transform: none; }
.menu-lines { display: none; }
.menu-links { position: static; translate: none; }
.menu-contact { position: static; }
html.menu-open .menu-toggle { right: calc(var(--bbl) + var(--pan-in) + var(--mpad)); top: calc(var(--pan-in) + var(--mpad)); } /* 9.10 (עדי): האיקס היה צמוד למעלה. עכשיו באותו מרחק מלמעלה כמו מימין */
html.menu-open { --tgb: calc(var(--pan-in) + var(--mpad) + 20 * var(--bu)); }
.menu-links li { opacity: 0; transform: translateX(calc(18 * var(--bu))); }
.menu-open .menu-links li { opacity: 1; transform: none; transition: opacity .35s, transform .45s var(--ease); transition-delay: calc(.16s + var(--i, 0) * .05s); }
.menu-links li:nth-child(2) { --i: 1; } .menu-links li:nth-child(3) { --i: 2; } .menu-links li:nth-child(4) { --i: 3; } .menu-links li:nth-child(5) { --i: 4; } .menu-links li:nth-child(6) { --i: 5; } .menu-links li:nth-child(n+7) { --i: 6; }
.menu-contact { opacity: 0; } .menu-open .menu-contact { opacity: 1; transition: opacity .4s .5s; }
html:is(.a11y-contrast-1, .a11y-contrast-2) :is(.top-bar, .site-menu) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.a11y-contrast-1 :is(.top-bar, .site-menu) { background: #fff; border-color: #000; }

@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  html { --bu: var(--mpu); --bar-top: calc(10 * var(--bu)); --bar-in: calc(10 * var(--bu)); --bar-h: calc(48 * var(--bu)); --pan-in: calc(10 * var(--bu)); --mpad: calc(32 * var(--bu)); }
  html.bar-on { --tgr: calc(26 * var(--bu)); --tgb: calc(var(--bar-top) + (var(--bar-h) + 15 * var(--bu)) / 2); }
  .top-logo { left: calc(15 * var(--bu)); width: calc(76 * var(--bu)); }
  .bar-on .menu-toggle { top: calc(var(--bar-top) + (var(--bar-h) - 15 * var(--bu)) / 2); width: calc(28 * var(--bu)); height: calc(15 * var(--bu)); }
  .site-menu { border-radius: calc(28 * var(--bu)); }
  html.menu-open { --tgb: calc(var(--pan-in) + var(--mpad) + 16 * var(--bu)); }
}


/* ═══ תנועת הכפתורים (עדי, 9.10): במנוחה החץ באלכסון; במעבר עכבר, במיקוד ובלחיצה הוא מתיישר שמאלה ("קדימה" בעברית) והכפתור מתמלא ═══ */
.hero-cta, .proj-link { transition: background-color .25s var(--ease), color .25s var(--ease); }
.hero-cta .arw, .proj-link .arw { transition: transform .3s var(--ease); }
.hero-cta:is(:focus-visible, :active), .proj-link:is(:focus-visible, :active) { background-color: var(--ink); color: var(--bg); }
.hero-cta:is(:focus-visible, :active) .arw, .proj-link:is(:focus-visible, :active) .arw { transform: rotate(-45deg); }
@media (hover: hover) {
  .hero-cta:hover, .proj-link:hover { background-color: var(--ink); color: var(--bg); }
  .hero-cta:hover .arw, .proj-link:hover .arw { transform: rotate(-45deg); }
}

/* פעימה אחת בוואטסאפ (עדי, 9.10) - js/menu.js. טבעת ירוקה שמתרחבת ונעלמת, פעם אחת */
@keyframes wa-pulse { from { box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 0 0 0 rgba(37,211,102,.6); } to { box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 0 0 18px rgba(37,211,102,0); } }
.float-btn.wa.wa-pulse { animation: wa-pulse .7s ease-out 1; }

/* טלפון שוכב (10.10): יחידת הטלפון גדלה עם הרוחב, והתפריט יצא גבוה מהמסך ואייקוני הטלפון והמייל ירדו מתחתיו.
   כשהמסך נמוך, גודל הקישורים והאייקונים נגזר מהגובה, והאיקס קרוב יותר לראש התפריט */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  html { --mpad: min(calc(32 * var(--bu)), 9vh); }
  .menu-links a { font-size: min(calc(28 * var(--mpu) * var(--a11y-fs, 1)), calc(7.4vh * var(--a11y-fs, 1))); line-height: 1.25; }
  .menu-contact a { width: 8vh; height: 8vh; } .menu-contact { gap: 5vh; }
}

/* אזור הלחיצה של הלוגו בקפסולה: לפחות 44 גובה, בלי לשנות את המראה (10.10) */
.top-logo::after { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) 0; }

/* כרטיסי ההתמחויות: כל פסקה מתחלקת לשורות שוות באורכן (10.10) */
#specialties .card .bal { display: block; text-wrap: balance; }
/* 12.10 (בודק QA): אזור לחיצה של 44 לפחות לכפתורים הצפים ולאייקוני הקשר בתפריט, בכל רוחב. המראה לא משתנה */
.float-btn, .menu-contact a { position: relative; }
:is(.float-btn, .menu-contact a)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }