/* ==========================================================================
   Design tokens — שלב 2
   כל הערכים כאן נמדדו מהאתר המקורי ומתועדים ב-analysis.md (סעיפים א׳–ב׳).
   בשלב זה הקובץ מכיל tokens + @font-face + reset בלבד. העיצוב עצמו — שלב 4.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. פונטים — self-hosted, ללא קריאה ל-fonts.googleapis.com
   Rubik הוא variable font (משקלים 300–900 בקובץ אחד), לכן שתי הצהרות בלבד:
   אחת לתת-הקבוצה העברית ואחת ללטינית.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/greatvibes-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --a11y-scale: 1;   /* ווידג'ט הנגישות מכפיל דרכו כל גודל טקסט באתר */

  /* ---- צבעים (analysis.md ב׳) ---- */
  --c-cream:        #FEFAF0;  /* רקע ראשי, רצועת ה-header, כרטיס הטופס, טקסט על חום */
  --c-sage:         #C2C9A2;  /* accent — רצועות סקשנים, חצים, לייבל על כפתור חום */
  --c-brown:        #614630;  /* כפתורים ראשיים, רקע פוטר, טקסט בחלק מהסקשנים */
  --c-olive:        #403F2B;  /* כותרות וטקסט רץ, בלוק מפריד בפוטר */
  --c-pale-yellow:  #F3F1C4;  /* רצועת התמונה באודות, עמודת התמונה בכרטיס הראשון */
  --c-muted:        #706E5C;  /* טקסט משני / קישורים */
  /* ירוק WhatsApp. הוכהה פעמיים: מ-#4CB748 המקורי (טקסט לבן עליו היה 2.57:1
     ב-Lighthouse) ל-#268020, ובשלב 15 ל-#257C1F. הכיול השני נדרש בגלל 1.4.11
     (non-text contrast): כשכפתור "דברו איתנו בוואטסאפ" עבר לירוק, גבול הכפתור
     מול רקע הסייג' של סקשן צור הקשר ירד ל-2.90:1 — מתחת לסף 3.0. axe לא בודק
     את זה ולכן הסריקה הייתה נקייה. ההכהיה מינימלית ושומרת גוון ורוויה במדויק
     (HSL 116.3° 60%, בהירות 31.4%→30.5%) ומביאה ל-3.06:1 מול הסייג'. כל שאר
     השימושים רק השתפרו: טקסט קרם על הירוק 4.81→5.06, לבן במובייל-בר 5.01→5.27. */
  --c-whatsapp:     #257C1F;

  --c-bg:           var(--c-cream);
  --c-text:         var(--c-olive);
  --c-heading:      var(--c-brown);

  /* ---- טיפוגרפיה ---- */
  --ff-sans:    'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ff-display: 'Great Vibes', 'Rubik', cursive;

  /* גדלים — דסקטופ (analysis.md ב׳, סקאלת 1440) */
  --fs-display: calc(80px * var(--a11y-scale));  --lh-display: calc(80px * var(--a11y-scale));
  /* line-height היה קטן מגודל הגופן (36 על 40) — עליוני האותיות נחתכו וכותרות
     צפו מעל התמונה שמתחתן. יחס ≥1.15 נותן כותרת שלמה בתוספת גובה זניחה. */
  --fs-h2: calc(40px * var(--a11y-scale));  --lh-h2:           1.15;
  --fs-card-title: calc(25px * var(--a11y-scale));  --lh-card-title:   1.2;
  --fs-body: calc(17px * var(--a11y-scale));  --lh-body: calc(25.5px * var(--a11y-scale));
  --fs-body-sm: calc(16px * var(--a11y-scale));  --lh-body-sm: calc(24px * var(--a11y-scale));
  --fs-btn: calc(19px * var(--a11y-scale));  --lh-btn: calc(24.7px * var(--a11y-scale));
  --fs-btn-pill: calc(18px * var(--a11y-scale));  --lh-btn-pill: calc(27px * var(--a11y-scale));
  --fs-footer: calc(15px * var(--a11y-scale));  --lh-footer: calc(19.5px * var(--a11y-scale));
  --fs-footer-addr: calc(14px * var(--a11y-scale));

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;

  --ls-header-cta: 0.85px;
  --ls-display:   -0.8px;

  /* ---- פריסה (analysis.md א׳) ---- */
  --w-content:      1265px;  /* עמודת התוכן בדסקטופ — מחווט ל-.wrap ול-.site-header__bar */
  --w-min:           980px;  /* רצפת הרוחב של המקור — מחווט ל-.wrap ב-≤1139 */
  --gutter:           80px;  /* שוליים צדיים ב-≥1140 */
  --h-header:         76px;
  --h-header-mobile:  67px;
  /* טוקנים היסטוריים שמעולם לא חוברו לכלל חי (h-footer, col-*, ar-hero-*/card/about)
     נמחקו בשלב 24 — המידות החיות יושבות על הרכיבים עצמם; מה שנשאר כאן מחווט. */
  --ar-gallery:        3 / 4;

  /* ---- אינטראקציה ---- */
  --radius-pill:  100px;
  --radius-round:  50%;
  --size-arrow-lg: 50px;   /* חצי הגלריה הראשית */
  --size-arrow-sm: 40px;   /* חצי המיני-קרוסלה */
  --size-float:    77px;   /* כפתור צף — דסקטופ */
  --inset-float:   19px;
  --size-scroll-next: 48px; /* חץ הגלילה — מעל מינימום 44 של WCAG 2.5.5 */
  /* בסיס הערימה הצפה התחתונה. במובייל כל מה שצף (חץ, כפתור נגישות, ומעליהם
     ה-nudge והפאנל) נמדד ממנו — כדי שכיוונון של אחד לא ידרוס את השני. */
  --stack-bottom: var(--inset-float);
  --t-btn:  0.4s;          /* pill: חום→קרם */
  --t-btn-fast: 0.2s;      /* שליחה: החלפה מלאה */
}

/* מובייל — הסקאלה של קנבס ה-320 של המקור, מיושמת מ-768 ומטה */
@media (max-width: 767px) {
  :root {
    --fs-display: calc(44px * var(--a11y-scale));  --lh-display: calc(44px * var(--a11y-scale));
    --fs-h2: calc(24px * var(--a11y-scale));  --lh-h2:          1.15;
    --fs-card-title: calc(20px * var(--a11y-scale));  --lh-card-title:  1.2;
    --fs-body: calc(15px * var(--a11y-scale));  --lh-body: calc(22.5px * var(--a11y-scale));
    --fs-body-sm: calc(15px * var(--a11y-scale));  --lh-body-sm: calc(18px * var(--a11y-scale));
    --ls-display:    -0.44px;
    --size-float:     50px;
    --inset-float:    16px;
  }
  /* הסרגל התחתון קיים רק בעמוד הבית (body.has-mobile-bar). בעמודי המשנה אין
     סרגל, ולכן הערימה הצפה יושבת על שולי ברירת המחדל — בלי רצועה ריקה ובלי
     כפתור נגישות שמרחף באוויר (ממצא C1, שלב 24).
     28px מעל הסרגל ולא 12: בהיסט הנמוך יותר חץ הגלילה ישב על כותרת הכרטיס
     "אירועים עסקיים" באחת מנחיתות המנוחה. נמדד — ראו ההערה ב-.scroll-next. */
  body.has-mobile-bar { --stack-bottom: calc(56px + env(safe-area-inset-bottom) + 28px); }
}

/* --------------------------------------------------------------------------
   3. Reset / בסיס
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--h-header); }
@media (max-width: 767px) {
  /* ההדר במובייל נמוך יותר (67 מול 76) — בלי ההתאמה עוגני גלילה נחתו 9px נמוך מדי,
     וחץ הגלילה (שנשען על scroll-padding-top המחושב) ירש את אותה סטייה. */
  html { scroll-padding-top: var(--h-header-mobile); }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

a { color: inherit; }

/* ריסט מלא לכפתורים. ברירת המחדל של הדפדפן (padding: 1px 6px, border: 2px,
   רקע אפור) פגעה בשלושה כפתורים לפחות: עם box-sizing: border-box היא מכווצת את
   תיבת התוכן, וגליף עם flex-shrink נמעך אליה — ‏#nudge-close הראה X ברוחב 8px
   במקום 14, ו-#urgency-close סבל מאותה תקלה בדיוק *וגם* הציג ריבוע אפור על
   הבאנר. במקום טלאי שלישי, מאפסים את המחלקה כולה במקום אחד. כל הכפתורים
   שמגדירים רקע משלהם (חצים, סרגל מובייל, כפתור צף) לא מושפעים. */
button { font: inherit; color: inherit; padding: 0; border: 0; background: none; cursor: pointer; }

/* נגישות: מצב focus נראה לכל אלמנט אינטראקטיבי (החלטת המפקח #4).
   טבעת דו-שכבתית (שלב 24, ממצא A1): הטבעת החומה לבדה נעלמה על הפוטר החום, על
   סרגל המובייל ועל באנר הזית — ובמצב ניגודיות גבוהה הפכה שחור-על-שחור. הדפוס
   של הכפתורים הצפים: שכבת קרם משני צידי הקו הכהה. צמד בניגודיות ~10:1 זה מזה
   מבטיח שעל כל רקע אפשרי לפחות שכבה אחת מחזיקה ≥3:1 — הרקע הגרוע ביותר
   התאורטי (באמצע הגאומטרי בין השניים) נותן ‎√10.2 ≈ 3.2. נבחר זית ולא חום
   כשכבה הכהה: ‎√8.3 של החום יורד אל מתחת ל-3 בדיוק על רקעים כאלה (פריימים
   בהירים של וידאו ההירו). ה-box-shadow נצבע מתחת ל-outline: קרם 0–2px, זית
   2–5px, קרם 5–7px. רכיבים עם box-shadow משלהם (הכפתורים הצפים) שומרים את
   טבעת הקרם הקבועה שלהם — ומקבלים את קו הזית מעליה, אותו אפקט בדיוק.
   במצב ניגודיות גבוהה הטוקנים הופכים ללבן/שחור והטבעת נשארת דו-שכבתית. */
:focus-visible {
  outline: 3px solid var(--c-olive);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--c-cream), 0 0 0 7px var(--c-cream);
}

/* כיבוד העדפת תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* [hidden] חייב לנצח כל display שרכיב מגדיר לעצמו (למשל .urgency-banner/.nudge עם display:flex) —
   אחרת specificity שווה מול ברירת המחדל של הדפדפן מוכרעת לפי סדר, וכלל המחבר עלול לנצח בטעות. */
[hidden] { display: none !important; }

/* ==========================================================================
   שלב 4 — שכפול מבני. כל המידות במקור: analysis.md.
   עמודת תוכן: .wrap — 1265px עם שוליים 80px ב-≥1140, רצפה 980 ב-1140-979,
   כיווץ פרופורציונלי חדש ב-768-979 (החלטה #2), עמודה יחידה מ-767 ומטה.
   ========================================================================== */

.wrap {
  width: min(var(--w-content), 100% - 2 * var(--gutter));
  max-width: var(--w-content);
  margin-inline: auto;
}
@media (max-width: 1139px) { .wrap { width: var(--w-min); } }
@media (max-width: 979px)  { .wrap { width: 100%; padding-inline: 28px; } }
@media (max-width: 479px)  { .wrap { padding-inline: 20px; } }

.skip-link {
  position: absolute; top: -70px; left: 12px; z-index: 100;
  background: var(--c-brown); color: var(--c-cream);
  padding: 12px 20px; border-radius: 8px; font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
/* יעד הדילוג מקבל פוקוס תכנותי (tabindex="-1" + focus() ב-a11y.js) — בלי הכלל
   הזה טבעת ה-:focus-visible הגלובלית הייתה נמתחת סביב כל תוכן העמוד. #main
   אינו פקד, ולכן 2.4.7 (חיווי פוקוס לרכיבי ממשק) לא חלה עליו; הקפיצה היא המשוב. */
#main:focus { outline: none; box-shadow: none; }

/* ---- כפתורים ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--ff-sans);
}
/* אייקון בתוך כפתור — בלי מידה מפורשת ה-SVG נופל לגודל ברירת המחדל שלו ודוחס
   את הטקסט לשורות (קרה ל-#nav-waze כשנוסף לו אייקון בשלב 14). כלל כללי ולא
   ממוקד-כפתור, כדי שהאייקון הבא לא יחזור על אותה תקלה. */
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn--pill {
  border-radius: var(--radius-pill);
  padding: 13px 36px;
  font-size: var(--fs-btn-pill); line-height: var(--lh-btn-pill); font-weight: 600;
}
.btn--solid {
  background: var(--c-brown); color: var(--c-sage);
  transition: background-color var(--t-btn), color var(--t-btn);
}
.btn--solid:hover, .btn--solid:focus-visible { background: var(--c-cream); color: var(--c-brown); }
/* גוון הוואטסאפ הרשמי לשלושת ה-CTA שמובילים לוואטסאפ (שלב 15): hero-cta-primary,
   contact-wa-cta ו-nudge-cta. מודיפייר נפרד ולא שינוי של btn--solid, שנשאר החום של
   "בואו נדבר" בטאגליין. ה-hover מתהפך באותה שפה כמו btn--solid. */
.btn--wa {
  background: var(--c-whatsapp); color: var(--c-cream);
  transition: background-color var(--t-btn), color var(--t-btn);
}
.btn--wa:hover, .btn--wa:focus-visible { background: var(--c-cream); color: var(--c-whatsapp); }
.btn--full { width: 100%; }

.icon-btn {
  width: 44px; height: 44px; /* יעד מגע מלא; האייקון עצמו נשאר 19px */ display: flex; align-items: center; justify-content: center;
  color: var(--c-olive); opacity: 0.85; transition: opacity 0.2s;
}
.icon-btn:hover, .icon-btn:focus-visible { opacity: 1; }
.icon-btn svg { width: 19px; height: 19px; }

.icon-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; opacity: 0.9; transition: opacity 0.2s;
}
.icon-circle:hover, .icon-circle:focus-visible { opacity: 1; }
.icon-circle svg { width: 17px; height: 17px; }

/* ---- Header — מיקום פיזי מוחלט, ללא תלות ב-RTL, תואם analysis.md (ד) ---- */
.site-header {
  position: sticky; top: 0; z-index: 52;
  height: var(--h-header);
  background: var(--c-cream);
}
.site-header__bar {
  position: relative;
  width: min(var(--w-content), 100% - 2 * var(--gutter)); max-width: var(--w-content); margin-inline: auto;
  height: 100%;
}
.site-header__icons {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; gap: 8px;
}
.site-header__logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  text-decoration: none; text-align: center;
}
/* שלב 21 — הלוגו והטאגליין גדלו ב-50% (40→60 דסקטופ, 32→48 מובייל; 10→15 טקסט).
   ‏white-space: nowrap על הטאגליין: הוא ארוך פי שניים מקודמו, וכשהוא נשבר לשתי
   שורות הוא מגביה את הלוגו מעבר ל-76px של ההדר ודוחף אותו אל מחוץ לרצועה. */
.site-header__mark { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; }
.site-header__text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.site-header__brand { font-weight: 700; font-size: calc(19px * var(--a11y-scale)); color: var(--c-brown); line-height: 1.1; }
/* ‏nowrap עם רצפת בטיחות (שלב 24, ממצא C4): בלי הגבלת רוחב הטאגליין זלג ב-320px
   אל מתחת לאייקון הטלפון, ובהגדלת טקסט L2 חרג מה-viewport ופתח גלילה אופקית.
   ellipsis דורש שרשרת שלמה: max-width על ה-logo, ‏min-width: 0 על עמודת הטקסט. */
.site-header__logo { max-width: min(60%, 640px); }
.site-header__tagline {
  font-size: calc(15px * var(--a11y-scale)); color: var(--c-olive); opacity: 0.75;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#header-cta {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  font-size: calc(17px * var(--a11y-scale)); font-weight: 700; letter-spacing: var(--ls-header-cta);
  color: var(--c-olive); text-decoration: none; padding: 8px 4px;
  display: flex; align-items: center; gap: 8px;
}
#header-cta:hover, #header-cta:focus-visible { color: var(--c-brown); }

@media (max-width: 767px) {
  .site-header { height: var(--h-header-mobile); }
  .site-header__bar { width: 100%; padding-inline: 20px; }
  /* ‎88px = ריפוד 20 + אזור האייקונים מימין (44 + 20 + 4 מרווח) — ראו C4 למעלה */
  .site-header__logo { left: 20px; transform: translateY(-50%); max-width: calc(100% - 88px); }
  .site-header__text { align-items: flex-start; }
  .site-header__mark { width: 48px; height: 48px; }
  .site-header__icons { left: auto; right: 20px; }
  #header-cta { display: none; } /* נעלם במובייל, כמו במקור */
}

/* ---- 1. הירו — וידאו full-bleed, ללא כותרת ---- */
.hero { position: relative; width: 100%; height: 741px; background: var(--c-olive); overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* שלב 22 — ההירו במובייל תופס כמעט מסך מלא במקום 468px קבועים.
   שתי הצהרות בכוונה, והסדר הוא המנגנון: הראשונה היא fallback לדפדפנים שלא מכירים
   svh (הם מתעלמים מהשנייה כי calc עם יחידה לא מוכרת פסול), והשנייה דורסת היכן
   שהיא נתמכת. svh ולא vh: ב-iOS Safari ‏100vh נמדד לפי החלון *עם סרגל הכתובת
   מכווץ*, כלומר גדול מהנראה בפועל — הירו כזה נחתך בטעינה ומשנה גובה תוך כדי
   גלילה. svh הוא ה-viewport הקטן (סרגל פרוס) ולכן יציב לכל אורך הגלילה.
   מחסירים את ההדר הדביק כדי שהווידאו ימלא בדיוק את מה שנשאר מתחתיו.
   קובצי הווידאו לא נגעו — object-fit: cover עושה את החיתוך. */
@media (max-width: 767px) {
  .hero { height: calc(100vh - var(--h-header-mobile)); }
  .hero { height: calc(100svh - var(--h-header-mobile)); }
}

/* ---- 2. רצועת טאגליין ---- */
.tagline { background: var(--c-sage); height: 360px; display: flex; align-items: center; }
.tagline__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tagline__eyebrow {
  font-family: var(--ff-display); font-size: var(--fs-display); line-height: var(--lh-display);
  color: var(--c-brown); font-weight: 400;
}
.tagline__heading {
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-brown);
}
@media (max-width: 767px) {
  .tagline { height: auto; padding-block: 48px; }
}

/* ---- 3. אודות — טקסט ממורכז ורצועת רוחב בצבע ---- */
.about { background: var(--c-cream); overflow-x: clip; } /* השוליים השליליים של .about__wide במובייל לא יגרמו לגלישה אופקית */
/* שלב 23: ה-figure של הפורטרט הוסר לבקשת המשתמש, והסקשן הוא טקסט + רצועת רוחב.
   הגובה הקבוע (808px) ירד יחד אתו — הוא נגזר מגובה התמונה, ובלעדיה הוא היה
   משאיר בלוק ריק ענק מתחת לפסקאות. הטקסט מוגבל ל-68ch ומרוכז: בלי התמונה הוא
   היה נמתח על 1265px, כלומר שורות של ~150 תווים שאי אפשר לעקוב אחריהן. */
.about__split {
  padding-block: 96px 72px;
  display: flex; justify-content: center;
}
.about__text {
  width: 100%; max-width: 68ch; min-width: 0;
  direction: rtl; text-align: right;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 20px;
}
.about__text h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-brown); }
.about__text p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-olive); }
.about__wide { margin-top: 64px; width: 100%; height: 700px; background: var(--c-pale-yellow); }
/* בלי grayscale (שלב 23). הסינון היה ירושה עיצובית מהתקופה שבה הסלוט הזה החזיק
   תמונת סטוק; הצילום שהמשתמש בחר נושא את זהות המקום דווקא בצבע — הראנרים
   התכולים, הפאנל הירוק וזהב תאורת מדף היין — והוא חי בצבע בכל שאר האתר. */
.about__wide img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .about__split { padding-block: 40px 32px; }
  .about__text { gap: 14px; }
  .about__wide { height: 220px; margin-top: 0; width: calc(100% + 40px); margin-inline: -20px; }
}

/* ---- 4. סוגי אירועים — כותרת (מקוננת) + 4 כרטיסים לסירוגין ---- */
.events { background: var(--c-cream); }
.events__head {
  background: var(--c-sage); height: 232px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.events__eyebrow {
  font-family: var(--ff-display); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--c-brown);
}
.events__head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-olive); }

/* ריווח אחיד 64 בין הכרטיסים במקום 43/67/68 שהועתקו מהמקור — ההפרשים נקראו כרעש, לא כקצב */
.events__list { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 64px; }
.event-card { display: flex; direction: ltr; align-items: flex-start; } /* הכותרת בגובה קצה התמונה העליון, לא ממורכזת */

/* עמודת התמונה (65% = 822px) מכילה תיבת תמונה ממורכזת אופקית שהיא 78.5% ממנה (645px) — לא ממלאת את כל העמודה */
.event-card__media {
  flex: 0 0 65%;
  display: flex; justify-content: center;
}
.event-card__media-box {
  position: relative; overflow: hidden;
  width: 78.5%; /* 645 / 822 */
  aspect-ratio: 1290 / 886; /* = 645×443 בדיוק */
}
.event-card__media-box > img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease;
}
.event-card__media-box > img.is-active { opacity: 1; }

.carousel-arrow {
  position: absolute; top: 50%; right: 22px; transform: translateY(-50%); /* פיזי, מהקצה הימני של התמונה עצמה — בכל הכרטיסים */
  width: var(--size-arrow-sm); height: var(--size-arrow-sm); border-radius: var(--radius-round);
  background: var(--c-sage); color: var(--c-olive); z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.carousel-arrow svg { width: 16px; height: 16px; }

/* כפתור השהיה לקרוסלת הכרטיס — מנגנון העצירה המפורש ל-2.2.2. מוסתר ב-hidden
   כל עוד אין אוטופליי (reduced-motion / תמונה יחידה), כדי לא להציג פקד מת.
   יושב בפינה התחתונה-שמאלית הפיזית, הרחק מהחץ שיושב במרכז-ימין. */
.carousel-autoplay {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: var(--radius-round);
  background: var(--c-sage); color: var(--c-olive);
  display: flex; align-items: center; justify-content: center;
}
.carousel-autoplay-icon { width: 15px; height: 15px; flex-shrink: 0; }
@media (hover: none) {
  .carousel-autoplay { width: 44px; height: 44px; }   /* יעד מגע 2.5.5 */
}

.event-card__body {
  flex: 0 0 35%; direction: rtl; text-align: right;
  display: flex; flex-direction: column; gap: 14px;
}
.event-card__body h3 { font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: 700; color: var(--c-olive); }
.event-card__body p { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--c-olive); }

.event-card--img-left .event-card__body { padding-left: 56px; }
.event-card--img-right .event-card__body { padding-right: 56px; }

@media (max-width: 767px) {
  .events__head { height: auto; padding-block: 32px; }
  /* ה-gap נקבע מחדש למובייל: אחרת 64 של הדסקטופ מצטבר עם margin-top ונותן 104. */
  .events__list { padding-top: 48px; padding-bottom: 48px; gap: 40px; }
  .event-card {
    direction: rtl; flex-direction: column; align-items: stretch; margin-top: 0;
  }
  /* padding-top אופס (שלב 8): events__list gap:40 כבר יוצר את המרחק בין כרטיסים —
     20px נוספים כאן הצטברו איתו לכ-60px קרם ריק בין תמונת כרטיס אחד לכותרת הבא. */
  /* padding-bottom: 24 (שלב 13) — הכפתור נגע פיזית בתמונה שמתחתיו בכל 4 הכרטיסים
     (נמדד 0px). 24 יושב בין ה-0 הקודם ל-gap:40 שבין הכרטיסים, כך שהיררכיית
     הריווח נשמרת: בתוך כרטיס < בין כרטיסים. */
  .event-card__body,
  .event-card--img-left .event-card__body,
  .event-card--img-right .event-card__body { padding: 0 20px 24px; flex: none; order: 1; } /* טקסט קודם — כמו במקור במובייל */
  .event-card__media,
  .event-card--img-left .event-card__media,
  .event-card--img-right .event-card__media { flex: none; order: 2; } /* תמונה אחרי הטקסט */
  .event-card__media-box { width: 100%; }
  .carousel-arrow { right: 16px; }
}

/* ---- כותרות משותפות (רצועת גלריה) ---- */
.section-head {
  background: var(--c-sage); height: 232px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.section-head__eyebrow {
  font-family: var(--ff-display); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--c-brown);
}
.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-olive); }
@media (max-width: 767px) { .section-head { height: auto; padding-block: 32px; } }

/* ---- 5. גלריה — גלילה אופקית אמיתית, ללא autoplay ---- */
.gallery { background: var(--c-cream); padding-block: 96px; }
/* ה-viewport (ולא ה-wrap) הוא העוגן של החצים: שורת הבקרה שמתחתיו לא אמורה להזיז
   את ה-top:50% שלהם. */
.gallery__wrap { position: static; }
.gallery__viewport { position: relative; }
.gallery__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 55px; overflow-x: auto; scroll-behavior: smooth;
  width: 100%; scrollbar-width: thin;
}
.gallery__track li { flex: 0 0 clamp(200px, 27vw, 383px); }
.gallery__track img { width: 100%; height: auto; aspect-ratio: var(--ar-gallery); object-fit: cover; }
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: var(--size-arrow-lg); height: var(--size-arrow-lg);
  border-radius: var(--radius-round); background: var(--c-sage); color: var(--c-olive);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
/* פיזי בכוונה: prev (חזרה להתחלה) בקצה הימני, next (עוד תוכן) בקצה השמאלי — תואם RTL scrollLeft */
.gallery__arrow--prev { right: 7px; }
.gallery__arrow--next { left: 7px; }
.gallery__wrap:hover .gallery__arrow,
.gallery__wrap:focus-within .gallery__arrow { opacity: 1; }
.gallery__arrow svg { width: 18px; height: 18px; }

/* כפתור השהיה/הפעלה של הגלילה האוטומטית — בפינת ההתחלה (ימין ב-RTL) מתחת לרצועה.
   בניגוד לחצים הוא לא תלוי-hover: זה אמצעי נגישות ולכן גלוי תמיד. */
.gallery__controls { display: flex; justify-content: flex-start; margin-top: 12px; }
.gallery__autoplay {
  width: 36px; height: 36px; border-radius: var(--radius-round);
  background: var(--c-sage); color: var(--c-olive);
  display: flex; align-items: center; justify-content: center;
}
.gallery__autoplay-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* מגע: אין hover אמיתי — חץ next יחיד קבוע, כמו במקור במובייל */
@media (hover: none) {
  .gallery__arrow--prev { display: none; }
  .gallery__arrow--next { opacity: 1; width: 44px; height: 44px; }
  .carousel-arrow { width: 44px; height: 44px; }
  /* כפתור ההשהיה נשמט מהרשימה הזו והיה 36×36 — מתחת ל-2.5.5, ודווקא הוא
     אמצעי הנגישות שמאפשר לעצור את הגלילה האוטומטית. הגליף נשאר 15px. */
  .gallery__autoplay { width: 44px; height: 44px; }
}

@media (max-width: 767px) {
  .gallery { padding-block: 48px; }
  /* תמונה גדולה אחת + הצצה לבאה — תואם את החוויה האימרסיבית בדסקטופ, במקום
     שתי תמונות קטנות (45vw) שלא נתנו לתמונה שום נוכחות. */
  .gallery__track { gap: 14px; }
  .gallery__track li { flex-basis: 74vw; }
  .gallery__wrap { padding-inline: 0; }
}

/* ---- 6. יצירת קשר ---- */
/* 262px במקור נמדד מראש הסקשן ועד ראש הכרטיס — כולל את בלוק הכותרת (156) + הרווח (32),
   לא בנוסף להם. padding-top בפועל = 262 - 156(כותרת) - 32(רווח) ≈ 74. */
.contact { background: var(--c-sage); padding: 80px 0 96px; }
.contact__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.contact__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 640px; }
.contact__eyebrow { font-family: var(--ff-display); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--c-olive); letter-spacing: var(--ls-display); }
.contact__head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-olive); }
.contact__sub { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--c-olive); }
.contact__sub a {
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; direction: ltr; unicode-bidi: isolate; /* מונע שבירת מספר הטלפון לשתי שורות במובייל */
}
#contact-wa-cta { margin-top: 8px; }

/* מסלול המרה יחיד — כרטיס הטופס הוסר (שלב 7); .contact__columns נשאר רק כעטיפה
   סביב .contact__nav, ממורכז בכל הרוחבים, בלי פיצול לשתי עמודות. */
.contact__columns { display: flex; flex-direction: column; align-items: center; width: 100%; }

@media (max-width: 767px) {
  .contact { padding: 48px 0 48px; }
}

/* ---- פוטר — טריק שלוש העמודות (עמודות בהירות על רקע כהה = מפרידים) ---- */
.site-footer { background: var(--c-brown); }
.site-footer__logo {
  padding-block: 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  /* אין הפרדה בקו — במקור ההפרדה בין רצועת הלוגו לעמודות היא מעבר צבע הרקע (חום→זית), לא border.
     גובה קבוע (105px) הוחלף ב-padding כשנוסף סימן הלוגו (56px) — תוכן גבוה יותר, לא לקצץ. */
}
.site-footer__mark { width: 84px; height: 84px; border-radius: 50%; }
/* span:nth-of-type ולא span:first-child (שלב 3): הסימן (img) שנוסף לפני שני
   ה-span-ים הפך את "הראשון" מבין כל הילדים לתמונה, לא לשם העסק — nth-of-type
   סופר רק בין אחים מאותו תג, ולכן עדיין מצביע על ה-span הנכון. */
.site-footer__logo span:nth-of-type(1) { font-weight: 700; font-size: calc(20px * var(--a11y-scale)); color: var(--c-cream); }
.site-footer__logo span:nth-of-type(2) { font-size: calc(17px * var(--a11y-scale)); color: var(--c-sage); } /* שלב 21: +50% (11→17) */
.site-footer__cols {
  background: var(--c-olive);
  display: grid; grid-template-columns: 323fr 333fr 324fr;
}
.footer-col {
  background: var(--c-brown); padding: 46px 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--fs-footer); color: var(--c-cream);
}
.footer-col a { text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { text-decoration: underline; }
.footer-col--links { align-items: flex-start; }
.footer-col--contact { align-items: flex-start; }
.footer-col--address { align-items: flex-start; }
.footer-col--address p { font-size: var(--fs-footer-addr); }
.footer-col__social { display: flex; gap: 10px; margin-top: 4px; }
.footer-col--contact .icon-circle, .footer-col__social .icon-circle { background: var(--c-olive); }

@media (max-width: 767px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  /* 46px ריפוד × 6 קישורים נתן פוטר של 600px במובייל — כמעט מסך שלם של כלום */
  .footer-col { align-items: center; text-align: center; border-bottom: 1px solid var(--c-brown); padding-block: 28px; gap: 8px; }
}

/* ---- כפתור צף — כמו במקור (77 ימין-תחתון דסקטופ, 50 שמאל-תחתון מובייל) ---- */
.float-wa {
  position: fixed; z-index: 50;
  bottom: var(--inset-float); right: var(--inset-float); /* פיזי בכוונה — לא inset-inline, כדי לא להתהפך עם dir=rtl */
  width: var(--size-float); height: var(--size-float); border-radius: 50%;
  background: var(--c-whatsapp); color: var(--c-cream); /* הגליף משתמש ב-currentColor */
  display: flex; align-items: center; justify-content: center;
  /* טבעת הקרם מתקנת נפילת 1.4.11 שהייתה קיימת מאז שהכפתור נוסף: כשהוא צף מעל
     הפוטר החום גבול הכפתור מול הרקע היה 1.64:1 בלבד (וה-box-shadow הרך לא
     מספק גבול), ועכשיו הקרם מול החום נותן 8.30:1. על שאר הדף, שהוא קרם, הטבעת
     נבלעת ברקע והגבול נשאר של הירוק עצמו — 5.06:1, כמו קודם. spread ב-box-shadow
     ולא border, כדי לא לשנות את גודל הכפתור ואת מיקום הגליף. */
  box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25);
}
.float-wa svg { width: 52%; height: 52%; }
@media (max-width: 767px) {
  .float-wa { right: auto; left: var(--inset-float); }
}

/* ---- חץ גלילה לקטע הבא (שלב 21) ---- */
/* צד פיזי הפוך מכפתור הוואטסאפ: הוא יושב ימין-תחתון בדסקטופ, וה-nudge מעליו באותה
   פינה — ולכן החץ בשמאל-תחתון ואין התנגשות. במובייל הוואטסאפ הצף מוסתר לטובת
   הסרגל התחתון, והחץ מורם מעל הסרגל (56px + safe-area) ולא נופל מאחוריו.
   1.4.11 (non-text contrast, axe לא בודק אותו): המילוי החום נמדד מול הרקעים
   שמעליהם הכפתור צף בפועל — קרם 8.30:1, סייג' של רצועת הטאגליין 5.01:1. מעל
   הפוטר החום המילוי נבלע ברקע, ושם טבעת הקרם היא הגבול — 8.30:1. אותו דפוס
   בדיוק כמו .float-wa, ומאותה סיבה: spread ב-box-shadow לא משנה את גודל היעד. */
/* מרכז-תחתון (שלב 23). ההיסט 48px אינו שרירותי: נמדד מה יושב מתחת לכפתור בכל
   אחת משמונה עמדות המנוחה שהחץ עצמו מייצר (elementsFromPoint על 5 נקודות בתוכו),
   וסריקה ב-4px מצאה חלון נקי 40–56px — 48 הוא האמצע, עם 8px מרווח לכל צד.
   ב-19px הכפתור ישב על "Let's Talk" ומ-60px ומעלה על כותרת "גלריה". */
.scroll-next {
  position: fixed; z-index: 50;
  bottom: 48px; left: 50%; transform: translateX(-50%);
  width: var(--size-scroll-next); height: var(--size-scroll-next); border-radius: 50%;
  background: var(--c-brown); color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25);
}
.scroll-next svg { width: 46%; height: 46%; flex-shrink: 0; }
@media (max-width: 767px) {
  .scroll-next { bottom: var(--stack-bottom); }
}

/* ---- עמודי מדיניות (פרטיות/נגישות) — analysis.md (ז) ---- */
.legal {
  max-width: 948px;
  margin: 171px auto 120px;
  display: flex; flex-direction: column; gap: 20px;
}
.legal h1 {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--c-brown);
  margin-bottom: 8px;
}
.legal h2 {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--c-olive);
  margin-top: 8px;
}
.legal p {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-olive);
}
.legal__updated { font-size: calc(14px * var(--a11y-scale)); color: var(--c-muted); margin-top: -12px; }
@media (max-width: 767px) {
  .legal { margin-top: 100px; padding-inline: 20px; gap: 16px; }
}

/* ==========================================================================
   שלב 5 — שכבת ההמרה: וואטסאפ במרכז
   ========================================================================== */

/* ---- כפתור outline (CTA בכרטיסים, ניווט במפה) ---- */
.btn--outline {
  border: 1.5px solid var(--c-brown); color: var(--c-brown); background: transparent;
  padding: 9px 22px; border-radius: var(--radius-pill); font-size: calc(14px * var(--a11y-scale)); font-weight: 600;
  transition: background-color var(--t-btn), color var(--t-btn);
}
.btn--outline:hover, .btn--outline:focus-visible { background: var(--c-brown); color: var(--c-cream); }

/* ---- באנר דחיפות — עם כפתור סגירה ---- */
.urgency-banner {
  position: relative;
  background: var(--c-olive); color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px 44px; font-size: calc(14px * var(--a11y-scale)); font-weight: 600;
}
#urgency-close {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  color: var(--c-cream); opacity: 0.75;
}
#urgency-close:hover, #urgency-close:focus-visible { opacity: 1; }
#urgency-close svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 767px) {
  /* יעד מגע 2.5.5 — הריבוע גדל, הגליף נשאר 14px */
  #urgency-close { width: 44px; height: 44px; right: 4px; }
}

/* ---- כפתור צף — pulse עדין בדסקטופ, מוסתר במובייל (הסרגל התחתון מחליף) ---- */
@media (prefers-reduced-motion: no-preference) {
  .float-wa { animation: wa-pulse 2.4s ease-in-out infinite; }
}
/* ההילה נגזרת מ-#257C1F, ערך --c-whatsapp הנוכחי (שלב 16). קודם היא הייתה
   rgba של #4CB748 — הירוק המקורי מלפני שני הכיולים — ולא התעדכנה באף אחד מהם.
   הפעימה מחליפה את ה-box-shadow כולו, ולכן טבעת הקרם חייבת להופיע גם כאן —
   אחרת היא נמחקת בדסקטופ, שהוא בדיוק המקום שבו היא נחוצה (הכפתור מוסתר במובייל).
   ההילה יוצאת מ-3px, הקצה החיצוני של הטבעת, ולא מ-0 שהיה נבלע מתחתיה. */
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25), 0 0 0 3px rgba(37, 124, 31, 0.45); }
  0%, 100% { box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25), 0 0 0 3px color-mix(in srgb, var(--c-whatsapp) 45%, transparent); }
  50%      { box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25), 0 0 0 13px rgba(37, 124, 31, 0); }
  50%      { box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25), 0 0 0 13px color-mix(in srgb, var(--c-whatsapp) 0%, transparent); }
}
@media (max-width: 767px) { .float-wa { display: none; } }

/* ---- FAQ — accordion native (details/summary) ---- */
.faq { background: var(--c-cream); padding-block: 72px; }
.faq__list { max-width: 948px; display: flex; flex-direction: column; gap: 4px; }
/* הריפוד יושב על ה-summary ולא על ה-item: כך כל גובה השורה הוא יעד לחיצה אמיתי,
   ולא רק 23–26px של גובה הטקסט עצמו. */
.faq__item { border-bottom: 1px solid var(--c-sage); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 18px; min-height: 44px;
  font-size: var(--fs-body); font-weight: 700; color: var(--c-olive);
  transition: background-color 0.15s;
}
.faq__item summary:hover { background: rgba(64, 63, 43, 0.04); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--c-brown); border-bottom: 2px solid var(--c-brown);
  transform: rotate(45deg); transition: transform 0.2s;
}
.faq__item[open] summary::after { transform: rotate(225deg); }
.faq__answer { padding-top: 12px; padding-bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq__answer p { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--c-olive); }
.faq__link { font-size: calc(14px * var(--a11y-scale)); color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .faq { padding-block: 48px; } }

/* ---- הוכחה חברתית — מוסתרת כברירת מחדל (main.js מציג אם socialProof.enabled) ---- */
.social-proof { background: var(--c-sage); padding-block: 64px; }
.social-proof .wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.social-proof__eyebrow { font-family: var(--ff-display); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--c-brown); }
.social-proof h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--c-olive); }
.social-proof__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; }
.social-proof__stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.social-proof__stat-value { font-size: calc(40px * var(--a11y-scale)); font-weight: 700; color: var(--c-brown); }
.social-proof__stat-label { font-size: calc(14px * var(--a11y-scale)); color: var(--c-olive); }
.social-proof__testimonials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.social-proof__testimonial { background: var(--c-cream); padding: 24px; text-align: right; direction: rtl; display: flex; flex-direction: column; gap: 12px; }
.social-proof__testimonial blockquote { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--c-olive); }
.social-proof__testimonial p { font-size: calc(13px * var(--a11y-scale)); font-weight: 600; color: var(--c-brown); margin: 0; }
.social-proof__logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.social-proof__logos li { background: rgba(64, 63, 43, 0.12); color: var(--c-olive); font-size: calc(12px * var(--a11y-scale)); padding: 10px 18px; border-radius: 6px; }
@media (max-width: 767px) { .social-proof__testimonials { grid-template-columns: 1fr; } }

/* ---- מפה + ניווט (מתחת לכרטיס הטופס, אותו רוחב) ---- */
.contact__nav {
  /* margin-top הוסר (שלב 7) — היה מפריד בין הכרטיס לניווט; .contact__inner
     gap:32 כבר עושה את העבודה עכשיו ש-.contact__nav הוא הילד היחיד. */
  width: 504px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.contact__nav h3 { font-size: calc(17px * var(--a11y-scale)); font-weight: 700; color: var(--c-olive); }
.contact__nav p { font-size: calc(14px * var(--a11y-scale)); color: var(--c-olive); }
.contact__nav-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Nudge — כרטיס קטן שמחליק פנימה אחרי 65% גלילה, פעם אחת לסשן ---- */
/* יושב מעל הכפתור הצף ומיושר אליו לימין — במרכז המסך הוא כיסה את הצ'קבוקס וכפתור
   השליחה של הטופס, בדיוק על נקודת ההמרה. הגובה = inset + קוטר הכפתור + 12 רווח. */
.nudge {
  /* z-index 40 < 50 של חץ הגלילה — בכוונה, לא באג: השניים לעולם לא חופפים
     (דסקטופ — פינות מנוגדות; מובייל — ה-nudge מורם *מעל* החץ דרך --stack-bottom),
     ואם ייווצר מצב חדש עדיף שהפקד הקבוע ינצח חלונית חולפת. */
  position: fixed; z-index: 40;
  right: var(--inset-float); left: auto; transform: none;
  bottom: calc(var(--inset-float) + var(--size-float) + 12px);
  width: 320px; max-width: calc(100% - 32px);
  background: var(--c-cream); border-radius: 12px;
  /* צל חזק יותר ובורדר עדין — הכרטיס צף מעל תוכן קרם ובלע את עצמו בו (שלב 16) */
  box-shadow: 0 12px 32px rgba(64, 63, 43, 0.36); border: 1px solid rgba(64, 63, 43, 0.14);
  padding: 18px 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .nudge { animation: nudge-in 0.35s ease-out; }
}
@keyframes nudge-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* במובייל אין כפתור צף — ה-nudge נשאר ממורכז מעל הסרגל התחתון, ולכן צריך גם
   keyframes משלו: אנימציה שלא נושאת את translateX(-50%) הייתה מקפיצה אותו הצידה. */
@keyframes nudge-in-centered {
  from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* למה זה נראה "לא לחיץ": הכפתור ירש את ברירת המחדל של הדפדפן — padding: 1px 6px
   ו-border: 2px — ומעולם לא אופס (הריסט הגלובלי הוא button { font; color } בלבד).
   עם box-sizing: border-box ו-width: 24px תיבת התוכן הצטמצמה ל-24-4-12 = 8px,
   וה-svg של 14px (flex-shrink ברירת מחדל 1) נמעך אליה: ה-X נראה 8×14 במקום 14×14.
   בנוסף היעד עצמו היה 24×24 — 16% בלבד מאזור מגע של אצבע נחת עליו, וכל שאר
   הסביבה היא ה-div של הכרטיס שאין עליו מאזין, כך שהחטאה קרובה לא עשתה כלום.
   התיקון: איפוס padding/border, יעד 44×44 (WCAG 2.5.5) ו-flex-shrink: 0 על הגליף. */
.nudge__close {
  position: absolute; top: 2px; left: 2px;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--c-olive);
}
.nudge__close svg { width: 16px; height: 16px; flex-shrink: 0; }
.nudge__heading {
  font-size: calc(17px * var(--a11y-scale)); line-height: 1.3; font-weight: 700; color: var(--c-olive);
  margin: 0; padding-inline-end: 34px; /* מפנה מקום לכפתור הסגירה */
}
/* הכותרת היא <p> וקודם נדרסה כאן: .nudge p הוא 0-1-1 ומופיע אחרי .nudge__heading
   שהוא 0-1-0, כך שהכותרת רונדרה 14px במקום 17. הכלל ממוקד עכשיו לשורת הגוף בלבד. */
.nudge__text { font-size: calc(14px * var(--a11y-scale)); line-height: 1.5; color: var(--c-olive); margin: 0; }
.nudge .btn--pill { font-size: calc(14px * var(--a11y-scale)); padding: 12px 24px; width: 100%; }
@media (max-width: 767px) {
  .nudge {
    right: auto; left: 50%; transform: translateX(-50%);
    /* מעל הסרגל התחתון *ומעל חץ הגלילה*: במובייל ה-nudge כמעט ברוחב מלא (320px),
       ולכן כל פינה תחתונה בגובה הזה נחתכת על ידו — הרמה מעל החץ במקום הזזה הצידה. */
    bottom: calc(var(--stack-bottom) + var(--size-scroll-next) + 12px);
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nudge { animation-name: nudge-in-centered; }
}

/* ---- סרגל תחתון דביק במובייל — מחליף את הכפתור הצף ---- */
.mobile-bar {
  display: none;
  position: fixed; z-index: 45; bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(64, 63, 43, 0.15);
}
@media (max-width: 767px) {
  .mobile-bar { display: flex; }
  /* שהפוטר לא יוסתר מאחורי הסרגל — רק בעמוד שבו הסרגל בכלל קיים (C1) */
  body.has-mobile-bar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
.mobile-bar__btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: calc(15px * var(--a11y-scale)); font-weight: 600; text-decoration: none;
}
.mobile-bar__btn svg { width: 18px; height: 18px; }
/* קרם ולא לבן — אותו "לבן על ירוק וואטסאפ" בכל שלושת המופעים (btn--wa, float-wa, כאן) */
.mobile-bar__btn--wa { background: var(--c-whatsapp); color: var(--c-cream); }
.mobile-bar__btn--tel { background: var(--c-brown); color: var(--c-cream); }

/* ==========================================================================
   שלב 23 — ווידג'ט נגישות (self-hosted; ה-CSP מתיר script/style מ-'self' בלבד)
   ========================================================================== */

/* ---- 1. אפקטים. כולם נשענים על מחלקה אחת על <html>, כדי שהם יחולו על כל
   העמוד כולל אלמנטים שנוצרו ב-JS, ויישרדו ניווט בין ארבעת העמודים. ---- */

/* הגדלת טקסט: --a11y-scale מוזרק לתוך *כל* טוקן גודל וגם לתוך 20 ה-font-size
   הקשיחים שנשארו בקובץ, ולכן ההגדלה לא מדלגת על ההדר, הפוטר, ה-FAQ וה-nudge. */
html.a11y-text-1 { --a11y-scale: 1.15; }
html.a11y-text-2 { --a11y-scale: 1.32; }

/* עצירת תנועה. מקביל ל-@media (prefers-reduced-motion) אבל בשליטת המשתמש:
   מי שלא הגדיר העדפה במערכת ההפעלה עדיין צריך דרך לעצור. האוטופליי של הגלריה
   והקרוסלות והשהיית הווידאו אינם CSS — הם ב-JS, דרך האירוע a11y:motion. */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-no-motion { scroll-behavior: auto !important; }

/* ניגודיות גבוהה — דריסת הפלטה בלבד, לא של הפריסה. הערכים נבחרו כך שהמצב
   הזה עומד ב-AA בעצמו (שחור על לבן 21:1, לבן על החום-שהפך-לשחור 21:1,
   ולבן על ירוק הוואטסאפ 5.27:1). התמונות לא מסוננות: היפוך/דה-סטורציה שלהן
   פוגע במידע ולא משפר קריאוּת. */
html.a11y-contrast {
  --c-cream:       #FFFFFF;
  --c-sage:        #FFFFFF;
  --c-pale-yellow: #FFFFFF;
  --c-brown:       #000000;
  --c-olive:       #000000;
  --c-muted:       #000000;
  --c-bg:          #FFFFFF;
  --c-text:        #000000;
  --c-heading:     #000000;
}
/* גבולות מפורשים: כשהרקעים כולם לבנים, גבול הסקשן הוא מה שמפריד ביניהם.
   ‏.events__head נוסף בשלב 24 (ממצא C3) — רצועת סייג' זהה ל-.section-head
   שנשמטה מהרשימה המקורית. */
html.a11y-contrast .site-header,
html.a11y-contrast .tagline,
html.a11y-contrast .events__head,
html.a11y-contrast .section-head,
html.a11y-contrast .event-card__body { border-bottom: 1px solid #000; }
/* פקדי הסייג' (חצים וכפתורי השהיה): הרקע שלהם הופך לבן על רקע לבן — גבול
   שחור הוא מה שמסמן את היעד (C3; נסרקו כל הרכיבים עם רקע סייג'/קרם צף). */
html.a11y-contrast .gallery__arrow,
html.a11y-contrast .gallery__autoplay,
html.a11y-contrast .carousel-arrow,
html.a11y-contrast .carousel-autoplay { border: 1.5px solid #000; }

/* הדגשת קישורים — קו תחתון עבה וטקסט מודגש, גם על .btn: כפתור-קישור הוא עדיין
   יעד ניווט. ‏!important בכוונה (שלב 24, ממצא C2): זו שכבת העדפת-משתמש שחייבת
   לגבור על כל ספציפיות של רכיב — ‏#header-cta (‏ID עם text-decoration: none)
   ניצח את הכלל הקודם והמתג דילג בדיוק על ה-CTA הראשי; תיקון ממוקד-ID היה
   נשבר שוב בכל ID מעוצב חדש. */
html.a11y-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}

/* פונט קריא — החלפת שתי המשפחות. Great Vibes הוא כתב-יד דקורטיבי, ודווקא
   הוא הכי חשוב להחלפה כאן. Arial/Helvetica נבחרו כי יש להם כיסוי עברי מלא. */
html.a11y-font {
  --ff-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --ff-display: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
html.a11y-font .site-header__brand,
html.a11y-font .events__eyebrow,
html.a11y-font .section-head__eyebrow,
html.a11y-font .contact__eyebrow,
html.a11y-font .tagline__eyebrow { letter-spacing: normal; }

/* ---- 2. הכפתור הצף ---- */
/* שמאל-תחתון בדסקטופ: הפינה התפנתה כשחץ הגלילה עבר למרכז, וכפתור הוואטסאפ
   יושב מנגד בימין. במובייל הוואטסאפ הצף מוסתר, והכפתור מורם מעל הסרגל
   התחתון — באותו גובה כמו החץ, אבל בציר אופקי אחר ולכן בלי חפיפה. */
.a11y-btn {
  position: fixed; z-index: 51;
  bottom: var(--inset-float); left: var(--inset-float);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-brown); color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--c-cream), 0 4px 14px rgba(64, 63, 43, 0.25);
}
.a11y-btn svg { width: 56%; height: 56%; flex-shrink: 0; }
@media (max-width: 767px) {
  .a11y-btn { bottom: var(--stack-bottom); }
}

/* ---- 3. הפאנל ---- */
.a11y-panel {
  position: fixed; z-index: 52;
  bottom: calc(var(--inset-float) + 48px + 12px); left: var(--inset-float);
  width: 320px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px); overflow-y: auto;
  background: var(--c-cream); color: var(--c-olive);
  border: 1px solid rgba(64, 63, 43, 0.25); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(64, 63, 43, 0.36);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  text-align: right; direction: rtl;
}
@media (max-width: 767px) {
  .a11y-panel {
    bottom: calc(var(--stack-bottom) + var(--size-scroll-next) + 12px);
    left: 50%; transform: translateX(-50%); width: calc(100vw - 32px);
    max-height: calc(100svh - 200px);
  }
}
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.a11y-panel__title { font-size: calc(18px * var(--a11y-scale)); line-height: 1.3; font-weight: 700; color: var(--c-brown); margin: 0; }
.a11y-panel__close {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--c-olive);
}
.a11y-panel__close svg { width: 16px; height: 16px; flex-shrink: 0; }
.a11y-panel__list { display: flex; flex-direction: column; gap: 6px; }
/* יעד 44px גם כאן (2.5.5): ריפוד ולא גובה קשיח, כדי שהשורה תגדל עם הטקסט */
.a11y-opt {
  min-height: 44px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.5px solid var(--c-brown); border-radius: 8px;
  background: transparent; color: var(--c-olive); text-align: right;
  font-size: calc(15px * var(--a11y-scale)); line-height: 1.35;
}
.a11y-opt:hover { background: rgba(97, 70, 48, 0.08); }
.a11y-opt[aria-pressed="true"] { background: var(--c-brown); color: var(--c-cream); }
.a11y-opt__label { flex: 1 1 auto; }
.a11y-opt__value { flex: 0 0 auto; font-weight: 700; }
.a11y-reset {
  min-height: 44px; padding: 10px 12px; border-radius: 8px;
  background: var(--c-brown); color: var(--c-cream); font-weight: 700;
  font-size: calc(15px * var(--a11y-scale));
}
.a11y-link {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--a11y-scale)); color: var(--c-brown);
  text-decoration: underline; text-underline-offset: 3px;
}