/* ═══ תוסף הנגישות — בשפה של האתר: קו דק, צבעי המותג, בלי עומס.
   הגדלים ב-rem, כדי שהפאנל עצמו יגדל עם הזום של הדפדפן ═══ */
.a11y { position: fixed; z-index: 80; left: 1rem; bottom: 1rem; width: min(25rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; background: #F4F5F4; color: #3D3D3B; border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.16); font-family: 'Futurism', 'Arial Hebrew', Arial, sans-serif; font-weight: 300; font-size: 1rem; direction: rtl; }
.a11y[hidden] { display: none; }
.a11y svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; background: #3D3D3B; color: #fff; }
.a11y-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.a11y-close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; cursor: pointer; }
.a11y-close svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.4; }
.a11y-body { overflow: auto; padding: 1rem; }
.a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.a11y-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 6.25rem; padding: .75rem .4rem .9rem;
  background: #fff; border: 1px solid #E5E8E7; border-radius: .9rem; color: inherit; font: inherit; font-size: .9rem; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.a11y-tile:hover { border-color: #3D3D3B; }
.a11y-tile[aria-pressed="true"] { border: 2px solid #FCC402; padding: calc(.75rem - 1px) calc(.4rem - 1px) calc(.9rem - 1px); box-shadow: 0 0 0 3px rgba(252,196,2,.18); }
.a11y-tile .a11y-check { position: absolute; top: .45rem; left: .45rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #FCC402; display: none; place-items: center; }
.a11y-tile .a11y-check svg { width: .8rem; height: .8rem; stroke-width: 2; stroke: #3D3D3B; }
.a11y-tile[aria-pressed="true"] .a11y-check { display: grid; }
.a11y-dots { display: flex; gap: .25rem; height: .35rem; }
.a11y-dots i { width: .9rem; height: .2rem; border-radius: 1rem; background: #E5E8E7; }
.a11y-dots i.on { background: #3D3D3B; }
.a11y-level { font-size: .75rem; color: rgba(61,61,59,.8); min-height: .9rem; }
.a11y-struct { margin-top: .75rem; background: #fff; border: 1px solid #E5E8E7; border-radius: .9rem; padding: .5rem; }
.a11y-struct[hidden] { display: none; }
.a11y-struct button { display: block; width: 100%; text-align: right; background: none; border: 0; border-radius: .5rem; padding: .45rem .6rem; font: inherit; color: inherit; cursor: pointer; }
.a11y-struct button:hover, .a11y-struct button:focus-visible { background: #F4F5F4; }
.a11y-struct .lv3 { padding-inline-start: 1.5rem; font-size: .9rem; }
.a11y-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .9rem 1rem 1rem; border-top: 1px solid #E5E8E7; background: #F4F5F4; }
.a11y-foot button, .a11y-foot a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .5rem .75rem; border-radius: 999px; font: inherit; font-size: .92rem; text-decoration: none; cursor: pointer; }
.a11y-foot svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.4; }
.a11y-reset { background: #fff; border: 1px solid #3D3D3B; color: #3D3D3B; }
.a11y-report { background: #FCC402; border: 1px solid #FCC402; color: #3D3D3B; }
.a11y-statement { grid-column: 1 / -1; min-height: auto !important; padding: .1rem !important; color: #3D3D3B; text-decoration: underline !important; text-decoration-color: #FCC402 !important; text-underline-offset: 3px; }
.a11y :focus-visible { outline: 2px solid #3D3D3B; outline-offset: 2px; }
.a11y-head :focus-visible { outline-color: #fff; }

/* ─── ההתאמות עצמן ─── */
html[data-a11y-text="1"] { --a11y-fs: 1.15; }
html[data-a11y-text="2"] { --a11y-fs: 1.3; }
html[data-a11y-text="3"] { --a11y-fs: 1.5; }
html[data-a11y-text="4"] { --a11y-fs: 2; }
html.a11y-spacing .site *, html.a11y-spacing #site-menu * { letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.8 !important; }
html.a11y-font .site *, html.a11y-font #site-menu * { font-family: Arial, 'Arial Hebrew', sans-serif !important; }
/* צבע: הפילטרים מצטברים דרך משתנים, כדי שניגודיות ורוויה יעבדו יחד */
html.a11y-contrast-2 { --f-inv: invert(1) hue-rotate(180deg); background: #000; }
html[data-a11y-sat="1"] { --f-sat: saturate(.5); }
html[data-a11y-sat="2"] { --f-sat: grayscale(1); }
html[data-a11y-sat="3"] { --f-sat: saturate(1.8); }
html.a11y-contrast-2 .site, html[data-a11y-sat] .site { filter: var(--f-inv,) var(--f-sat,); }
html.a11y-contrast-2 .site img, html.a11y-contrast-2 .site canvas { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-1 .site *, html.a11y-contrast-1 #site-menu * { color: #000 !important; }
html.a11y-contrast-1 .site .yellow, html.a11y-contrast-1 .a11y-keep-yellow { color: #6B5100 !important; }
html.a11y-contrast-1 .site .grid-lines, html.a11y-contrast-1 .site .deco { opacity: .45; }
html.a11y-links .site a, html.a11y-links #site-menu a { outline: 2px solid #3D3D3B !important; outline-offset: 3px; text-decoration: underline !important; background: #FFF3B0 !important; color: #3D3D3B !important; }
html.a11y-headings .site h1, html.a11y-headings .site h2, html.a11y-headings .site h3 { outline: 2px dashed #3D3D3B !important; outline-offset: 6px; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-focus :focus { outline: 3px solid #3D3D3B !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #FCC402 !important; }
html.a11y-noimg .site img:not([src*="logo"]), html.a11y-noimg .site canvas, html.a11y-noimg .site .deco { visibility: hidden !important; }
/* 9.10: המחלקה הזאת מושמת גם על html (מצב דולק) — בלי div הכלל העלים את כל האתר */
div.a11y-guide { position: fixed; z-index: 79; left: 0; right: 0; height: 2.2rem; pointer-events: none; background: rgba(252,196,2,.12); border-top: 2px solid #FCC402; border-bottom: 2px solid #FCC402; display: none; }
html.a11y-guide .a11y-guide { display: block; }

/* ═══ הגדלת טקסט בלי חפיפות ובלי חיתוך (9.10) ═══
   כל הכללים כאן נדלקים רק כשהגולש בחר הגדלת טקסט. בלי הגדלה אף אחד מהם לא חל, והעיצוב הרגיל לא משתנה.
   מחשב, רמה 1 (115%): הפריסה הרגילה נשארת, עם שני תיקונים קטנים לכותרת השער.
   מחשב, מרמה 2: "מצב קריאה". js/a11y.js מדליק במחשב את הפריסה הזורמת של הטלפון (המחלקה a11y-read), והעמוד הופך לטור ממורכז.
     בתוך הטור הטקסט בגודל הרגיל של הפריסה (--a11y-fs: 1), והטור עצמו רחב יותר מרמה לרמה: כל המידות בו ביחידת הטור (--pu),
     ולכן טור רחב יותר = טקסט גדול יותר, והכול נשאר ביחסים שאושרו.
   טלפון: הפריסה כבר זורמת, והטקסט גדל בתוכה. הכללים שבסוף משחררים את מה שהיה נעול לשורה אחת או לקופסה קבועה. */

/* ─── מחשב, רמה 1: כותרת השער של עמודי השירות והפרויקט גדלה כלפי מעלה, כדי שלא תרד על המשפט שמתחתיה (נמדד: 12-18% חפיפה) ─── */
@media (min-width: 1025px), (min-width: 768px) and (orientation: landscape) {
  html[data-a11y-text="1"] :is(.svc-head h1, #case h1.t-b120) { translate: 0 calc(-18 * var(--us)); }   /* 120 × 0.15 = 18 */
  /* הציטוט בעמוד פרויקט (10.10): גובה הקופסה קבוע, וציטוט של שמונה שורות יצא ממנה בכמה פיקסלים (נמדד ב-XI). השורות מתהדקות מעט */
  html[data-a11y-text="1"] .case-qb .st-quote blockquote { line-height: 1.16; }
}

/* ─── מחשב, מרמה 2: מצב קריאה ───
   --read-c: רוחב הטור כחלק מרוחב המסך. הטקסט הרץ בטור הוא 20 מתוך 390 יחידות, ובמחשב 20 מתוך 1325,
   לכן ההגדלה שלו = --read-c × 1325 / 390: ברמה 2 פי 1.66, ברמה 3 פי 1.94, ברמה 4 פי 2.29 (והטקסט הקטן ביותר, 17.5, בדיוק פי 2).
   ברמה 2 הטור רחב מספיק כדי שגם תת־הכותרות (50 במחשב, 24 בטור) לא יקטנו. */
html.a11y-read { --a11y-fs: 1; --read-c: .49;
  --read-w: calc(min(100vw, 2560px) * var(--read-c));
  --mpu: calc(var(--read-w) / 390);   /* יחידת התפריט והכפתורים הצפים, שיושבים מחוץ לטור */
  min-height: 0 !important; }         /* js/steps.js מאריך את העמוד לעצירות של מסע הברווז; במצב קריאה אין מסע */
html.a11y-read[data-a11y-text="3"] { --read-c: .57; }
html.a11y-read[data-a11y-text="4"] { --read-c: .6728; }
html.a11y-read .site { width: var(--read-w); margin-inline: auto; }
/* מסע הברווז של המחשב (js/steps.js) כבוי: הברווזים הקבועים חוזרים, והעמוד לא נעצר בגלילה */
html.a11y-read .page { animation: none !important; transform: none !important; }
html.a11y-read .jr-duck { display: none; }
html.a11y-read .jr-on .step-duck img { visibility: visible; }
/* השער של דף הבית נשאר מסך אחד עם הברווז, כמו בטלפון בלי הגדלה: הכלל ב-style.css שמאריך אותו נועד לטקסט שגדל בתוך מסך צר, וכאן הטקסט בגודל הפריסה */
html.a11y-read .page:not(.svc) .hero { height: var(--fold); min-height: 0; grid-template-rows: auto 1fr; }
html.a11y-read .page:not(.svc) .hero-title { grid-row: 1 / -1; }
html.a11y-read .page:not(.svc) .hero-duck { grid-row: 1 / -1; margin-top: 0; }
/* שני מקומות שבהם פריסת הטלפון מקטינה טקסט כדי לשמור שורה שלמה. במצב קריאה הגודל קודם לשורה:
   טקסט השלבים בגודל המלא (17.5) והשורות זורמות; שם הפרויקט גדל (58 במקום 40) כדי שלא יהיה קטן מבמחשב, ויורד שורה כשצריך */
html.a11y-read #steps .step-p { font-size: calc(17.5 * var(--pu)); }
html.a11y-read .step-ln { display: inline; white-space: normal; }
html.a11y-read .step-ln::after { content: ' '; }
html.a11y-read #case h1.t-b120 { font-size: calc(58 * var(--pu)); white-space: normal; }

/* ─── עמודי ההצהרות (css/doc.css): כתובת מייל או מילה ארוכה נשברת ולא דוחפת את העמוד לצדדים ─── */
html[data-a11y-text] .doc { overflow-wrap: break-word; }
/* 12.10 (בודק QA): בהגדלת טקסט בטלפון ובטאבלט עומד, מה שנעול לשורה אחת בהצהרות נשבר לשורות, ושלוש העובדות יורדות לטור אחד */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  html[data-a11y-text] .doc :is(.hl, .doc-facts li, .doc-btn) { white-space: normal; }
  html[data-a11y-text] .doc .doc-btn { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
  html[data-a11y-text] .doc .doc-btn .arw { flex: none; }
  html:is([data-a11y-text="2"], [data-a11y-text="3"], [data-a11y-text="4"]) .doc-facts { grid-template-columns: 1fr; row-gap: calc(28 * var(--u)); }
}

/* ─── טלפון: מה שהיה נעול לשורה אחת או לקופסה קבועה משתחרר. במצב הקריאה של המחשב הכללים האלה לא חלים (שם הטקסט בגודל הפריסה) ─── */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  /* רשת ביטחון: מילה שרחבה מהשורה נשברת במקום לצאת מהמסך */
  html[data-a11y-text]:not(.a11y-read) .site { overflow-wrap: break-word; }
  /* הכותרות, תת־הכותרות והשורות ה"קבועות" יורדות שורה כשצריך */
  html[data-a11y-text]:not(.a11y-read) :is(.t-b120, .t-b90, .t-l50, #case h1.t-b120, .svc-ld, .svc-it, .step-t, .nw, .m-nw, .st-last, .tg-item h3, #together .tg-item p, .case-nav strong,
    .case-meta b, .case-meta span, .case-rows, .case-lab, .case-bar, .case-rc h2) { white-space: normal; }
  html[data-a11y-text]:not(.a11y-read) .site [style*="white-space:nowrap"] { white-space: normal !important; }   /* צירופים שננעלו בסימון עצמו */
  /* השער של דף הבית נמשך למטה והברווז יורד מתחת לטקסט כבר מרמה 1 (ב-style.css: מרמה 2). בטאבלט עומד הטקסט נגע בבועה כבר ב-115% (נמדד ב-820) */
  html[data-a11y-text="1"]:not(.a11y-read) .page:not(.svc) .hero { height: auto; min-height: var(--fold); grid-template-rows: auto auto; }
  html[data-a11y-text="1"]:not(.a11y-read) .page:not(.svc) .hero-title { grid-row: 1; }
  html[data-a11y-text="1"]:not(.a11y-read) .page:not(.svc) .hero-duck { grid-row: 2; margin-top: calc(20 * var(--pu)); }
  html[data-a11y-text]:not(.a11y-read) .hero-logo { align-self: start; }   /* כשהשער נמשך, קופסת הקישור של הלוגו לא נמתחת אל מתחת לכותרת */
  /* הבועה של הברווז: שלוש שורות קבועות, מעוגנת לברווז. במסך צר מאוד (320) בהגדלה מלאה היא יצאה משמאל: רוחבה נעצר בקצה המסך והמילים יורדות שורה */
  html[data-a11y-text]:not(.a11y-read) .bubble { white-space: normal; max-width: calc(100cqw - (173 - var(--ax, 0)) * var(--u) - 16px); }
  /* כותרת השער של עמודי השירות: גדלה עד שהמילה הארוכה ביותר ("לקמפיין.") ממלאת את השורה, ולא מעבר לזה */
  html[data-a11y-text]:not(.a11y-read) .svc-head h1 { font-size: min(72 * var(--pu) * var(--a11y-fs, 1), (100cqw - 2 * var(--tx)) / 3.2) !important; }
  /* השלבים: השורות של עדי נשארות שורות כל עוד הן נכנסות; בהגדלה הן זורמות כפסקה אחת */
  html[data-a11y-text]:not(.a11y-read) .step-ln { display: inline; white-space: normal; }
  html[data-a11y-text]:not(.a11y-read) .step-ln::after { content: ' '; }
  /* פרטי הקשר בפוטר: האייקון והטקסט בשורה, שורה מתחת לשורה, והמייל נשבר אם הוא רחב מהמסך */
  html[data-a11y-text]:not(.a11y-read) footer > .card:has(.contact-link) { direction: ltr; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(14 * var(--pu)) calc(14 * var(--pu)); width: auto; height: auto; margin-inline: var(--tx); }
  html[data-a11y-text]:not(.a11y-read) footer > .card:has(.contact-link) > .in { position: relative; inset: auto; }   /* relative ולא static: אזור הלחיצה המוגדל של כל קישור נשאר צמוד אליו */
  html[data-a11y-text]:not(.a11y-read) .contact-link { overflow-wrap: anywhere; }
  /* עמוד פרויקט: פס הצבעים נערם (הקוד לא נכנס בשליש שורה). !important: בעמוד עם ארבעה צבעים מספר העמודות כתוב על האלמנט עצמו */
  html[data-a11y-text]:not(.a11y-read) #case .case-strip { grid-template-columns: minmax(0, 1fr) !important; height: auto; }
  html[data-a11y-text]:not(.a11y-read) .case-strip > div { min-height: calc(60 * var(--pu)); }
  /* הציטוט (10.10, אחרי הרקעים הייעודיים): הקופסה שומרת על הפרופורציה של הרקע כגובה מינימלי, וגדלה כשהטקסט צריך יותר.
     הטקסט בזרימה למעלה, והאיור נשאר בגודלו ומעוגן לתחתית; מעליו נמשך הצבע העליון של אותה תמונה (--qbg).
     --qart: החלק מגובה התמונה שהאיור תופס מלמטה; הוא נשמר פנוי מתחת לטקסט, כך שהטקסט לא עולה על האיור.
     השבירות הידניות נכבות: בטקסט מוגדל הן משאירות מילה בודדת בשורה, והטקסט זורם לבד */
  html[data-a11y-text]:not(.a11y-read) #case .case-qb { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--qbg, #3D3D3B); }
  html[data-a11y-text]:not(.a11y-read) #case .case-qb::before { content: ''; grid-area: 1 / 1; padding-top: calc(1520 / 1020 * 100%); pointer-events: none; }
  html[data-a11y-text]:not(.a11y-read) .case-qb img { inset: auto 0 0; height: auto; aspect-ratio: 1020 / 1520; }
  html[data-a11y-text]:not(.a11y-read) .case-qb .st-quote { grid-area: 1 / 1; position: relative; inset: auto; padding: calc(40 * var(--pu)) calc(25 * var(--pu)) calc(var(--qart, 0) * 1520 / 1020 * 100% + 40 * var(--pu)); }
  html[data-a11y-text]:not(.a11y-read) .case-qb .st-quote blockquote br.m-br { display: none; }
  html[data-a11y-text]:not(.a11y-read) .site .case-qb blockquote [dir="ltr"][style*="white-space:nowrap"] { white-space: nowrap !important; }   /* שם באנגלית בתוך הציטוט נשאר שלם: כשהוא נשבר בין שורות, השורה שאחריו צוירה משובשת (נצפה ב-XI ב-200%) */
  html[data-a11y-text]:not(.a11y-read) .case-qb:has(img[src*="/liberals/"]) { --qbg: #554099; --qart: .3; }
  html[data-a11y-text]:not(.a11y-read) .case-qb:has(img[src*="/numbers/"]) { --qbg: #361E5B; --qart: .46; }
  html[data-a11y-text]:not(.a11y-read) .case-qb:has(img[src*="/holy/"]) { --qbg: #010101; --qart: .52; }
  html[data-a11y-text]:not(.a11y-read) .case-qb:has(img[src*="/xi/"]) { --qbg: #399986; }   /* מרקם עדין בלי איור: הטקסט יכול לעבור מעליו, כמו בלי הגדלה */
  html[data-a11y-text]:not(.a11y-read) .case-qb:has(img[src*="/athena/"]) img { inset: 0; height: 100%; aspect-ratio: auto; }   /* מרקם על כל התמונה: היא ממלאת את הקופסה גם כשהיא גדלה */
  /* מרמה 3: מה שעמד זה לצד זה בחצי רוחב עובר לשורה משלו */
  html:is([data-a11y-text="3"], [data-a11y-text="4"]):not(.a11y-read) #together .tg-item { width: auto; margin-inline-start: 0; }
  html:is([data-a11y-text="3"], [data-a11y-text="4"]):not(.a11y-read) #together .tg-duck { width: 58%; }
  html:is([data-a11y-text="3"], [data-a11y-text="4"]):not(.a11y-read) .case-navs { flex-direction: column; }
}

/* ═══ ניגודיות מול מה שנוסף ב-9-10.10 (סרגל, תפריט זכוכית, ציטוטים על תמונה, פסי צבעים, מילוי כפתורים) ═══ */
/* מוגברת (1): הכלל הכללי צובע כל טקסט בשחור. במקומות שהרקע כהה זה הופך את הטקסט לבלתי קריא, ולכן שם הוא נשאר לבן */
html.a11y-contrast-1 .site .case-qb img { filter: brightness(.4); }
html.a11y-contrast-1 .site .case-qb :is(blockquote, blockquote *, figcaption, figcaption *) { color: #fff !important; }
html.a11y-contrast-1 .site .case-strip div[style*="color:#fff"] b { color: #fff !important; }
html.a11y-contrast-1 .site :is(.hero-cta, .proj-link, .e-btn, .doc-btn):is(:hover, :focus-visible, :active),
html.a11y-contrast-1 .site :is(.hero-cta, .proj-link, .e-btn, .doc-btn):is(:hover, :focus-visible, :active) * { color: #fff !important; background-color: #000; }
/* כהה (2): העמוד כולו מתהפך. הרקע של הדף עצמו חייב להיות שחור, אחרת הטקסט ההפוך יושב על רקע בהיר */
html.a11y-contrast-2 body { background: #000; }
html.a11y-contrast-2 .doc-box { border: 1px solid var(--ink); } /* 12.10: הקופסה נבלעה ברקע השחור */
html.a11y-contrast-2 :is(.top-bar, .site-menu) { background: #111; border-color: rgba(255,255,255,.5); }
html.a11y-contrast-2 .menu-toggle, html.a11y-contrast-2 .menu-links a { color: #fff; }
html.a11y-contrast-2 :is(.top-logo img, .menu-contact img) { filter: invert(1) hue-rotate(180deg); }
/* ציטוט על תמונה: התמונה חוזרת לצבעיה (הכלל של התמונות למעלה), ולכן הטקסט צריך לצאת לבן אחרי ההיפוך */
html.a11y-contrast-2 .site .case-qb :is(blockquote, blockquote *, figcaption, figcaption *) { color: #000 !important; }
/* פסי הצבעים מציגים את צבעי הלקוח האמיתיים, אז הם מתהפכים חזרה */
html.a11y-contrast-2 .site .case-strip { filter: invert(1) hue-rotate(180deg); }
/* מסגרות, אייקונים ודודלים הם קובצי SVG ולא תצלומים: הם מתהפכים עם העמוד (אחרת כרטיס נשאר לבן עם טקסט בהיר) */
html.a11y-contrast-2 .site img[src$=".svg"], html.a11y-contrast-2 .site img[src*=".svg?"] { filter: none; }