/* ============================================================
   בת-אל בורנשטיין - סגנונות (site-v2)
   שפה: "ספוטלייט" - כהה, קולנועי, וידאו-first.
   כל הצבעים והגופנים מגיעים מ-tokens.css בלבד.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: var(--lh-heading); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.wrap-narrow { max-width: var(--container-narrow); }
.center { text-align: center; }
/* מדביק צמד שאסור שייקרע בין שתי שורות. משמש איפה ש-  לא מספיק,
   כלומר כשהקריעה עלולה ליפול על מקף ("ב-2014") ולא על רווח. */
.nb { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; right: -999px; top: 8px; z-index: 200;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 10px 18px; border-radius: var(--radius);
}
.skip-link:focus { right: 12px; }

/* טבעת פוקוס אחידה במקלדת לכל קישור, כפתור ושאלה (יחידה F, 16.10.2026).
   בלי זה קישורי התפריט, הפוטר, תוכן העניינים ונגני הווידאו קיבלו את ברירת המחדל
   של הדפדפן: קו של 1px כמעט שחור על רקע כהה. :where לא מוסיף משקל, ולכן כל כלל
   ספציפי קיים (שדות הטופס, כרטיסי האפשרויות) ממשיך לגבור. נראית רק בניווט מקלדת. */
:where(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 3px;
}

.eyebrow {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--color-accent); margin-bottom: var(--sp-2);
}
/* דסקטופ בלבד: מוגדל, באותו צבע (הכרעת ניר, 4.10.2026). 1.17rem = 18.72px
   מודגש, מעל סף "טקסט גדול" (18.66px מודגש), שבו סף הניגודיות 3:1, ולכן
   3.93 על #191113 עובר. בנייד נשאר 0.82rem לבקשת ניר, ולכן שם הצבע הרך (ראו בהמשך). */
@media (min-width: 901px) { .eyebrow { font-size: 1.17rem; } }
/* הילה כהה, באותו אדום (ניר, 17.10.2026). מעל וידאו הפתיחה היא מעלה את הניגודיות.
   על רקע כהה אחיד ("הצצה קטנה") היא לא משנה אותה: בנייד 3.93 נשאר מתחת ל-4.5 (יחידה F) */
.eyebrow { text-shadow: var(--halo-text); }
/* בנייד (עד 900) השורות הקטנות באדום הרך, בלי השקיפות של "חוויה בימתית": 0.82rem מודגש
   הוא טקסט רגיל, והאדום של האתר נותן בו 3.93 מול 4.5 הנדרשים; הרך נותן 5.81 (ניר, 17.10.2026).
   בדסקטופ האדום נשאר, כי שם הגודל הוא "טקסט גדול" (סף 3) */
@media (max-width: 900px) {
  .eyebrow { color: var(--color-accent-soft); }
  .eyebrow.eyebrow-nav span { opacity: 1; }
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-ink); }
.muted { color: var(--color-ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  padding: 0.9em 1.8em; border-radius: var(--radius-btn);
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
/* מסכי 16 עד 27 אינץ' (ניר, 8.10.2026): הכפתור קבוע בפיקסלים, ולכן במסך צר הוא נראה גדול יותר.
   בטווח 900-1699 הוא קטן בכ-10% (גובה 55 במקום 61). מ-1700 ומעלה, ובנייד (כללים נפרדים), בלי שינוי. */
@media (min-width: 900px) and (max-width: 1699px) {
  .btn { font-size: 0.96rem; padding: 0.8em 1.6em; }
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 12px 40px var(--color-glow); }
.btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-bg); }
.btn-ghost { color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--color-accent); }
.btn-ghost:hover { color: var(--color-accent-soft); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition);
}
/* גוון בורדו ולא צבע הקנבס, אחרת הפס נמרח לתוך הרקע והעין לא מוצאת גבול */
.site-header[data-scrolled] {
  background: rgba(62, 16, 25, 0.94);
  -webkit-backdrop-filter: blur(12px);   /* ספארי דרש תחילית עד גרסה 18 */
          backdrop-filter: blur(12px);
  border-color: rgba(214, 52, 71, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* בעמוד עם תמונה צמודה מתחת להאדר (.lede, עמוד ההרצאה) הצל נפל על
   התמונה והחשיך רצועה של ~40px בעד 26%, רצועה שזזה איתה בגלילה ונראתה
   כמריחה (ניר, 28.9.2026, נמדד בניסוי מבוקר). הקו האדום נשאר כמפריד. */
body:has(.lede) .site-header[data-scrolled] { box-shadow: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: 14px; }
/* הבלוק מתכווץ לרוחב השם, ושלוש המילים נמתחות בדיוק לאותו רוחב */
.brand { display: inline-flex; flex-direction: column; width: fit-content; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-ink); white-space: nowrap; }
/* גופן גדול יותר משאיר פחות מקום לחלוקה, ולכן הרווחים מתקצרים מעצמם */
.brand-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.95rem; font-weight: 500; color: var(--color-ink-soft); margin-top: 3px;
}
.brand-sub > span { white-space: nowrap; }
.brand-sub > i { font-style: normal; color: var(--color-accent); font-size: 0.8em; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }

/* כפתורי חיוג ווואטסאפ, פנייה מכל נקודה בגלילה */
.nav-direct { display: flex; align-items: center; gap: 8px; }
.nav-direct a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  /* מסגרת קרם רך (ניר בחר B מול קרם מלא במתג, 19.10.2026): נראית, ולא מושכת תשומת לב */
  border: 1px solid var(--color-ink-soft); color: var(--color-ink);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* ".site-nav" בסלקטור כדי לגבור על ".site-nav a:hover", שצבע את האייקון
   בוורוד על הרקע האדום והעלים אותו (27.9.2026) */
.site-nav .nav-direct a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
/* וואטסאפ מקבל את הירוק שלו, לא את האדום של האתר (ניר, 27.9.2026). מ-19.10.2026 הסמל ירוק גם במנוחה (ניר) */
.nav-direct a[href^="https://wa.me"] { color: var(--color-whatsapp); }
.nav-direct a[href^="https://wa.me"]:hover { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: #fff; }
/* הצהרת הנגישות (ניר, 19.10.2026): הסמל עצמו הוא העיגול, ולכן בלי מסגרת. עיגול כחול ודמות לבנה
   גם במנוחה; בריחוף טבעת בצבע הטקסט, בלי רקע אדום */
.nav-direct .nav-a11y { border: 0; }
/* viewBox חתוך לטבעת החיצונית, ולכן העיגול הכחול ממלא בדיוק את הכפתור: 34 בדסקטופ, 44 בנייד,
   כמו העיגולים של הטלפון והוואטסאפ (היה 32.9 בתוך 34, ניר מדד ב-DevTools) */
.nav-direct .nav-a11y svg { display: block; width: 100%; height: 100%; }
/* הסמלים בתוך העיגולים החלולים הוגדלו (ניר, 19.10.2026): העיגול המלא של הנגישות גרם להם להיראות קטנים */
.nav-direct a svg { width: 21px; height: 21px; }
.nav-a11y .a11y-bg { fill: var(--color-on-a11y); }
.nav-a11y .a11y-fg { fill: var(--color-a11y); }
.site-nav .nav-direct .nav-a11y:hover { background: transparent; box-shadow: 0 0 0 2px var(--color-ink); }
.site-nav a { font-size: 0.97rem; color: var(--color-ink); transition: color var(--transition); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent-soft); }
/* דסקטופ בלבד: שמות העמודים גדולים מעט (ניר, 28.9.2026). "> a" בלי
   .nav-cta ו-.nav-lang תופס בדיוק את חמשת העמודים, לא את כפתור הקשר,
   לא את EN ולא את כפתורי החיוג. מתחת ל-900 חל התפריט הנפתח. */
@media (min-width: 901px) {
  .site-nav > a:not(.nav-cta):not(.nav-lang) { font-size: 1.1rem; }
  /* חדות העיגולים בהאדר (ניר ראה מסגרת "מפוקסלת", 19.10.2026). גובה השם היה 49.89px, ולכן כל מה
     שמרוכז לידו ישב על y=21.94, בין פיקסלים, והקצוות נמרחו. 50px מיישר את העיגולים ל-y=22 (ההאדר
     גבוה ב-0.11px). (מסגרת 1.334px נבדקה ונפסלה: כרום מעגל עובי מסגרת כלפי מטה ל-1px שלם) */
  .brand { min-height: 50px; }
}
/* מסכים עם הגדלה חלקית (Windows 125%, 150%, 175%; המסך של ניר 150%): קו של 1px יוצא 1.25 עד 1.75
   פיקסלים פיזיים ונמרח. במקומו טבעת וקטורית (mask) בעובי של בדיוק 2 פיקסלים פיזיים, בצבע המסגרת.
   דסקטופ בלבד: ה-mask מצויר ל-34px. ב-x1, x2 ו-x3 המסגרת הרגילה כבר חדה ונשארת (ניר, 19.10.2026) */
@media (min-width: 901px) and (min-resolution: 1.2dppx) and (max-resolution: 1.8dppx) {
  .nav-direct a:not(.nav-a11y) { position: relative; }
  .nav-direct a:not(.nav-a11y):not(:hover) { border-color: transparent; }
  .nav-direct a:not(.nav-a11y)::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background: var(--color-ink-soft);
    -webkit-mask: var(--ring) center / 100% 100% no-repeat;
            mask: var(--ring) center / 100% 100% no-repeat;
  }
  .nav-direct a:not(.nav-a11y):hover::after { background: transparent; }
  /* קובצי הטבעת ב-assets/ui ולא data: ב-CSS, כי ה-CSP (img-src 'self') חוסם data: גם ב-mask.
     העובי בכל קובץ = 2 פיקסלים פיזיים: 1.6px ב-x1.25, 1.3334px ב-x1.5, 1.1429px ב-x1.75 */
  .nav-direct a { --ring: url("../assets/ui/ring-125.svg"); }
}
@media (min-width: 901px) and (min-resolution: 1.4dppx) and (max-resolution: 1.6dppx) {
  .nav-direct a { --ring: url("../assets/ui/ring-150.svg"); }
}
@media (min-width: 901px) and (min-resolution: 1.65dppx) and (max-resolution: 1.8dppx) {
  .nav-direct a { --ring: url("../assets/ui/ring-175.svg"); }
}
.nav-cta {
  background: var(--color-accent); color: var(--color-on-accent) !important;
  padding: 0.55em 1.15em; border-radius: var(--radius-btn); font-weight: 700;
}
.nav-cta:hover { background: var(--color-accent-hover); }
.nav-lang { font-size: 0.85rem; color: var(--color-ink-soft) !important; letter-spacing: 0.06em; }
.nav-toggle { display: none; }
/* כפתור קשר בהאדר בנייד, ליד ההמבורגר (ניר, 19.10.2026). בדסקטופ יש .nav-cta בתפריט.
   מסגרת אדומה בלי מילוי, 34px כמו ההמבורגר (ניר בחר מבין ארבע גרסאות). אזור הנגיעה 44px דרך ::before */
.header-cta { display: none; }
@media (max-width: 900px) {
  .header-cta {
    position: relative;
    display: inline-flex; align-items: center; min-height: 34px; margin-inline-start: auto;
    padding: 0 0.9em; border-radius: var(--radius-btn);
    border: 1.5px solid var(--color-accent); background: transparent; color: var(--color-ink);
    font-size: 0.85rem; font-weight: 700; white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .header-cta::before { content: ""; position: absolute; inset: -6px 0; }
  /* בגלילה (האדר בורדו) המסגרת בקרם: אדום על בורדו נבלע (ניר, 19.10.2026, גרסה C) */
  .site-header[data-scrolled] .header-cta { border-color: var(--color-ink); }
  /* ריחוף ולחיצה: אדום מלא כמו שאר הכפתורים, גם המסגרת, גם בגלילה */
  .site-header .header-cta:hover,
  .site-header .header-cta:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  /* תפריט פתוח: הפאנל חותך את הכפתור, ובתפריט יש כפתור קשר משלו */
  body.nav-open .header-cta { visibility: hidden; }
}

/* ---------- Hero: פריסה קולנועית-דרמטית ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; z-index: 0; }
/* גרדיאנט מכוון מלמטה במקום כהות אחידה, כדי שבת-אל תישאר נראית */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--color-bg) 2%, rgba(25,17,19,0.78) 26%, rgba(25,17,19,0.28) 58%, rgba(25,17,19,0.10) 100%),
    linear-gradient(to left, rgba(25,17,19,0.55) 0%, rgba(25,17,19,0) 55%);
}
.hero .hero-inner { position: relative; z-index: 2; padding-block: clamp(48px, 10vh, 120px); }
/* עמודה צרה יחסית מול טיפוגרפיה ענקית: זה מה שיוצר את הערימה הדרמטית.
   רוחב הכותרת ב-em, כדי שהשבירה תישאר זהה בכל גודל מסך ולא רק בדסקטופ */
.hero-text { max-width: 46ch; }
.hero-title { font-size: var(--fs-hero); max-width: 6em; text-shadow: 0 2px 30px rgba(0,0,0,0.55); }
.hero-title em { font-style: normal; color: var(--color-accent); text-shadow: var(--halo-text); }
.hero-lead { margin-top: 1.6rem; max-width: 40ch; color: var(--color-ink); text-shadow: 0 1px 16px rgba(0,0,0,0.6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; }
/* הפתיחה שתי שורות טקסט (7.10.2026). בדסקטופ היא מקבלת את כל רוחב העמודה כדי לא להתארך,
   ובמסך נמוך (מחשב נייד 1366x768 עם סרגלי דפדפן) התוכן עולה למעלה, כי ההירו בגובה החלון
   ומתחיל מתחת להאדר, ובמרכוז הכפתורים נדחפים אל מתחת לקצה המסך */
@media (min-width: 901px) {
  .hero-lead { max-width: none; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .hero { align-items: flex-start; }
  .hero .hero-inner { padding-block: 28px 40px; }
}

/* שורת הניתוב: שתי הדלתות, זהה חזותית ל-eyebrow רגיל */
.eyebrow-nav a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); }
.eyebrow-nav a:hover { border-bottom-color: currentColor; color: var(--color-accent-soft); }
.eyebrow-nav span { opacity: 0.85; }

/* רמז גלילה */
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; }
.scroll-hint span { display: block; width: 22px; height: 36px; border: 2px solid rgba(242,233,220,0.5); border-radius: 12px; position: relative; }
.scroll-hint span::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 2px; background: var(--color-accent);
  animation: scrolldot 1.6s infinite;
}
@keyframes scrolldot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint span::after { animation: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(52px, 7.5vw, 100px); }
.section-tight { padding-block: clamp(34px, 4.5vw, 56px); }
.section-alt { background: var(--color-surface); }
.section-panel { background: var(--color-panel); }
.section-head { margin-bottom: clamp(28px, 4vw, 50px); }
.section-head.center { text-align: center; margin-inline: auto; max-width: 46ch; }
.section-head .lead { margin-top: var(--sp-2); color: var(--color-ink-soft); }
/* כותרת ה-TED ארוכה: בדסקטופ הכותרת רחבה יותר כדי שתהיה בשתי שורות, ואיזון השורות מונע מילה בודדת (8.10.2026) */
.section-head.center.section-head-wide { max-width: 62ch; }
#ted-title { text-wrap: balance; }

/* ============================================================
   לוגואים: שתי אפשרויות לבחירה
   א. פס רציף רץ על רצועה בהירה אחת (כמו בסטייג'ינג)
   ב. קיר לוגואים נמוך יותר בגלילה
   ============================================================ */

/* --- אפשרות א: פס רציף --- */
/* רקע שמנת, נבחר ע"י ניר 28.7.2026. אין יותר מתג לבן/שמנת */
.logos-strip {
  background: var(--color-bg-light); border-block: 1px solid var(--color-line);
  padding-block: var(--sp-3); overflow: hidden;
}
.marquee {
  position: relative; overflow: hidden; direction: ltr;
  /* מגע באזור הזה לא בוחר, לא גורר ולא מדגיש */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.marquee img {
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none; /* אין מה ללחוץ עליו כאן */
}
/* התנועה מנוהלת ב-JS (מחזור פריטים), לא באנימציית CSS. ראו main.js */
.marquee-track {
  display: flex; align-items: center; gap: clamp(38px, 5vw, 72px);
  width: max-content; will-change: transform;
}
.marquee-track li { flex: 0 0 auto; display: flex; align-items: center; }
/* גודל אופטי: שטח שווה ולא גובה שווה. המקדם --s לכל לוגו מחושב ב-tools/logo_sizes.py
   (ניר, 27.9.2026). הרצפה של 20px שומרת על לוגו רחב קריא בנייד. */
.marquee-track img { height: max(20px, calc(clamp(34px, 4vw, 50px) * var(--s, 1))); width: auto; object-fit: contain; }
.marquee-track.is-static {
  flex-wrap: wrap; justify-content: center; width: 100%;
  gap: var(--sp-3); transform: none !important; will-change: auto;
}
/* נייד: פס נמוך יותר. רק הריפוד מתכווץ, הלוגואים עצמם כבר קטנים בנייד
   ולא מוקטנים עוד. ניר, 27.9.2026. */
@media (max-width: 600px) {
  .logos-strip { padding-block: 16px; }
}

/* הווידאו בסקשן הקליפ מתארח אצלנו. ההטמעה של יוטיוב נשארת רק ב-TED */
.video-native {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9;
  display: block; background: #000;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}

/* מתג תמונת האודות הוסר (10.8.2026): התמונה הוכרעה, נשארה אחת.
   שים לב שאין כאן יותר כלל display גורף על .about-media img - הוא
   היה מעלים כל תמונה שלא נבחרה במתג, וזו הייתה מלכודת בעמודים אחרים. */

/* ---------- Video facade ---------- */
/* הנגן הוגדל (ניר, 7.8.2026). היחס נעול על 16:9, ולכן הגדלה בגובה
   נעשית דרך הרוחב. 1040 הוא התקרה שנכנסת בתוך המכל בלי לגעת בשוליים. */
.video-wrap { max-width: 1040px; margin-inline: auto; position: relative; }
/* ההילה מקובעת כשכבה מורכבת יציבה. בלי זה כרום מרנדר מחדש את
   הטשטוש בכל פריים של גלילה, באיכות נמוכה תוך כדי תנועה ובאיכות
   מלאה בעצירה, וההילה נראית "נושמת" סביב המסגרת. אין לזה השפעה
   על המראה במנוחה, רק על אופן הרינדור. */
.video-wrap.glow::before {
  content: ""; position: absolute; inset: -10% -5%;
  background: radial-gradient(closest-side, var(--color-glow), transparent 75%);
  filter: blur(24px); z-index: 0;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
/* הרקע הוא התמונה מיוטיוב, מאוחסנת מקומית כדי שלא תיווצר פנייה חיצונית */
.video-facade {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line); cursor: pointer; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #000 center / cover no-repeat;
  color: var(--color-ink); font-family: var(--font-body);
  padding: 0; border-width: 0;
}
/* הכהיה עדינה כדי שהכפתור והכיתוב ייקראו מעל התמונה.
   שני המצבים הובהרו (ניר, 6.8.2026), והמרווח ביניהם נשמר כדי
   שהריחוף עדיין ירגיש. הבהירות נבדקה מול הפריים עצמו: הרצועה
   שמאחורי הכיתוב עומדת על 0.28 בהירות, ולכן יש מרווח בטוח. */
.video-facade::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,17,19,0.05), rgba(25,17,19,0.34));
  transition: background var(--transition);
}
.video-facade:hover::before { background: linear-gradient(180deg, rgba(25,17,19,0), rgba(25,17,19,0.16)); }
.video-facade .play-icon,
.video-facade .video-facade-label { position: relative; z-index: 1; }
/* כפתור בסגנון נגן יוטיוב: מלבן מעוגל ולא עיגול. זהו הסימן המוסכם
   שמאחורי התמונה יושבת הטמעת יוטיוב, והוא מופיע רק באפשרות הזו.
   האדום הוא האדום של יוטיוב. להחלפה לאדום של האתר: var(--color-accent). */
.video-facade .play-icon {
  /* 68x48 הוא הגודל המדויק של הכפתור בנגן יוטיוב (viewBox 0 0 68 48) */
  width: 68px; height: 48px; border-radius: 14px;
  background: #FF0000; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  transition: transform var(--transition), background var(--transition);
}
.video-facade .play-icon svg { width: 26px; height: 26px; margin-inline-start: 2px; }
.video-facade:hover .play-icon { transform: scale(1.07); background: #F00; }
/* צל כפול: קרוב לקריאות מיידית, רחוק להפרדה מהתמונה שמאחור */
.video-facade-label { font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 1px 14px rgba(0,0,0,0.7); }

/* החזית של האפשרות המקומית מונחת מעל הווידאו ולכן היא מוחלטת.
   הכלל חייב לבוא אחרי .video-facade, אחרת ה-relative שם גובר
   והחזית נופלת מתחת לנגן במקום עליו. */
.video-facade-over { position: absolute; inset: 0; z-index: 2; }
/* המיכל שמחליף את הכפתור אחרי הלחיצה. אותה מסגרת, בלי התנהגות כפתור */
.video-frame {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); background: #000;
}
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Power strip ---------- */
.power-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); text-align: center; }
.power-row strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem); color: var(--color-accent-soft); line-height: 1.1;
}
.power-row span { display: block; margin-top: var(--sp-1); color: var(--color-ink-soft); font-size: 0.95rem; }

/* ---------- Silhouette motif (הצללית של ערן, כמוטיב ולא כלוגו האדר) ---------- */
.has-motif { position: relative; overflow: hidden; }
/* מסכה ולא img, כדי שהצללית תיצבע מהטוקנים */
.motif {
  position: absolute; inset-block: -6% -12%; inset-inline-start: 2%;
  width: 30vh; max-width: 260px; height: 118%; z-index: 0;
  background-color: var(--color-accent);
  -webkit-mask: url('../assets/silhouette.svg') no-repeat center / contain;
  mask: url('../assets/silhouette.svg') no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}
.has-motif > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .motif { opacity: 0.05; height: 88%; inset-block: auto -4%; } }

/* ---------- About (מקוצר) ---------- */
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
/* הכותרת והכפתור ממורכזים גם בדסקטופ (ניר, 12.10.2026) */
.about-text h2 { margin-bottom: var(--sp-3); text-align: center; }
.about-text p { color: var(--color-ink-soft); margin-bottom: var(--sp-2); max-width: 54ch; margin-inline: auto; text-align: center; }
.about-text p:last-of-type { margin-bottom: 0; }
.about-cta { margin: 0; text-align: center; }
.about-media { margin: 0; }
/* aspect-ratio כפול ל-width/height של הקובץ, בכוונה: המקום נשמר גם בלעדיו
   (נמדד 350x437 לפני הטעינה), אבל כרום בנייד הציג אזהרת "lazy בלי מידות"
   כל עוד היחס הגיע רק מהתכונות. כאן היחס חל על המסגרת כולה (כולל הגבול),
   ולכן cover: חצי פיקסל של חיתוך במקום חצי פיקסל של מתיחה. */
.about-media img {
  width: 100%; aspect-ratio: 1000 / 1250; object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow-card); border: 1px solid var(--color-line);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* אותו ריחוף כמו כרטיסי ההרצאה והמופע (ניר, 27.9.2026) */
.about-media img:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 20px 55px var(--color-glow); }
@media (min-width: 900px) {
  /* טקסט מימין, תמונה משמאל, כמו בסטייג'ינג */
  /* הכפתור יושב ב-HTML אחרי התמונה (בשביל הנייד). כאן הוא חוזר מתחת לטקסט:
     שורות ה-1fr הריקות ממרכזות את הטקסט והכפתור יחד מול התמונה */
  .about-grid {
    grid-template-columns: 6fr 5fr; grid-template-rows: 1fr auto auto 1fr; row-gap: 0;
    grid-template-areas: ". media" "text media" "cta media" ". media";
  }
  .about-text { grid-area: text; }
  .about-media { grid-area: media; }
  .about-cta { grid-area: cta; margin-top: var(--sp-3); }
  .about-media img { height: 100%; object-fit: cover; object-position: top center; max-height: 620px; }
  /* דסקטופ בלבד: הכותרת, הפסקאות והכפתור מיושרים לימין, בקו אחד (ניר, 19.10.2026, במקום המרכוז) */
  .about-text h2, .about-text p, .about-cta { text-align: start; }
  .about-text p { margin-inline: 0; }
}
/* בנייד, עמודה אחת: הכותרת ממורכזת (ניר, 7.10.2026) */
@media (max-width: 899.98px) {
  .about-text h2 { text-align: center; }
  /* הכפתור אחרי התמונה, ממורכז, בגודל של כפתורי ההירו בנייד */
  .about-cta { text-align: center; }
  .about-cta .btn { font-size: 0.94rem; padding: 0.8em 1.6em; }
  /* טאבלט לאורך (עד 899): התמונה לא מתפרסת על כל הרוחב, ובלוק הטקסט (54ch) ממורכז מתחת לכותרת.
     בטלפון אין לזה השפעה, שם שניהם צרים מהגבול ממילא (ניר, 7.10.2026) */
  .about-media { width: 100%; max-width: 440px; margin-inline: auto; }
  .about-text p { margin-inline: auto; }
}

/* ---------- Two options ---------- */
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); }
.option-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.option-card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 20px 55px var(--color-glow); }
.option-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-panel); }
.option-media img { width: 100%; height: 100%; object-fit: cover; }
.option-body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; flex: 1; }
.option-tag { font-family: var(--font-display); color: var(--color-accent); font-size: 0.95rem; margin-bottom: var(--sp-1); }
.option-card h3 { color: var(--color-ink); margin-bottom: var(--sp-1); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.option-meta { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: var(--sp-2); }
.option-body p { color: var(--color-ink-soft); }
.option-link { margin-top: auto; padding-top: var(--sp-3); color: var(--color-accent-soft); font-weight: 700; }
.option-link::after { content: " ←"; }
/* הכרטיס כולו לחיץ (ניר, 27.9.2026): הקישור הקיים נמתח על כל הכרטיס
   בשכבה שקופה. נשאר קישור אחד בלבד, ולכן קורא מסך ומקלדת לא משתנים. */
.option-card { position: relative; }
.option-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
/* הטקסט מעל השכבה השקופה, כדי שאפשר יהיה לסמן ולהעתיק אותו (ניר, 8.10.2026).
   לחיצה בודדת על הטקסט עדיין פותחת את העמוד: js/main.js, "כרטיסי האפשרויות".
   על התמונה, הרווחים והקישור עצמו הקישור עובד ישירות, כולל לחיצה ימנית וגלגלת. */
.option-body > :not(.option-link) { position: relative; z-index: 2; cursor: pointer; }
.option-link:focus-visible { outline: none; }
.option-card:has(.option-link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* ---------- Shows ---------- */
.shows-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2.4vw, 24px); }
.show-card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); text-align: center;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* אותו ריחוף כמו כרטיסי ההרצאה והמופע (ניר, 27.9.2026) */
.show-card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 20px 55px var(--color-glow); }
.show-city { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-ink); margin-bottom: 4px; }
.show-venue { color: var(--color-ink-soft); font-size: 0.95rem; }
.show-date { color: var(--color-accent-soft); font-weight: 700; margin-top: var(--sp-2); }
.show-tickets { display: inline-block; margin-top: var(--sp-3); }

/* אזלו הכרטיסים: מדבקה על הקו העליון של הכרטיס, כך שאינה מכסה את שם העיר
   גם בכרטיס הצר ביותר (230). הכפתור נשאר במקומו, כבוי ובלי ריחוף. */
.show-card.is-soldout { position: relative; }
/* מרווח בין שורות כרטיסים גדול יותר, כי המדבקה בולטת כ-15 פיקסלים מעל הכרטיס.
   ב-16 שלפני כן היא כמעט נגעה בכרטיס שמעליה בנייד (נמדד 3.10.2026, רווח של 2). */
.shows-grid { row-gap: clamp(32px, 3.4vw, 40px); }
.show-soldout {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(-3deg);
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: 700; font-size: 0.85rem; line-height: 1; white-space: nowrap;
  padding: 0.5em 1em; border-radius: var(--radius-btn);
}
.show-tickets:disabled,
.show-tickets:disabled:hover {
  background: transparent; color: var(--color-ink-soft); border-color: var(--color-line);
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* קישורי "לוח הופעות" מוסתרים כשאין הופעות. בנייד ".site-nav > a" מקבל
   display: flex, וזה גבר על hidden: הפריט נשאר בתפריט גם בלוח ריק (נמדד 3.10.2026). */
[data-shows-link][hidden] { display: none !important; }

/* לוח מוסתר בין שני סקשנים באותו רקע (בדף הבית: TED והציטוט): בלי שינוי הצבע
   שמסמן את המעבר, 200 פיקסלים נראו כמו חור. הרווח יורד ל-120 (בנייד מ-104 ל-62).
   חל רק כשהלוח מוסתר, וכשיש הופעות הרווח הרגיל חוזר לבד (ניר, 4.10.2026).
   בעמוד המופע הסקשן שלפני הוא section-alt, ולכן הכלל לא חל שם. */
.section:not(.section-alt) + #shows[hidden] + .section:not(.section-alt) { padding-top: clamp(10px, 1.5vw, 20px); }

/* ---------- Quotes ----------
   הציטוט המלא: שלוש השורות הראשונות מתארות, האחרונה נוחתת.
   הרוחב בפיקסלים ולא ביחידת ch: ב-Secular One היחידה זעירה
   ו-22ch הצטמצמו ל-210 פיקסלים, כלומר טור צר במקום ציטוט. */
.quote-main { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 48px); }
.quote-lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.65;
  color: var(--color-ink-soft); max-width: 60ch; margin-inline: auto;
}
.quote-punch {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.25; color: var(--color-ink);
  max-width: 12em; margin: var(--sp-2) auto 0;
}
.quote-main cite { display: block; margin-top: var(--sp-3); font-style: normal; color: var(--color-accent-soft); font-size: 0.95rem; letter-spacing: 0.04em; }

/* ---------- המלצות: כרטיס אחד מתחלף (29.9.2026) ----------
   כל הכרטיסים יושבים באותו תא בגריד, ולכן הגובה נקבע לפי הארוך שבהם
   ואין קפיצה בהחלפה. כרטיס לא פעיל שקוף ומוסתר (גם מקורא מסך).
   קדימה: נכנס משמאל (--from) ויוצא ימינה (--to), אחורה הפוך. JS קובע את שניהם.
   ההחלפה האוטומטית מונעת מסיום אנימציית פס ההתקדמות (animationend),
   כך שההשהיה בריחוף ובפוקוס היא פשוט animation-play-state. */
.reviews { position: relative; max-width: 840px; margin-inline: auto; }
.reviews-stage {
  position: relative; display: grid; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 22px; box-shadow: var(--shadow-card);
  touch-action: pan-y;
}
.review-card {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  padding: clamp(26px, 4.2vw, 52px) clamp(22px, 4.6vw, 60px) clamp(30px, 4.4vw, 54px);
  --from: -16px; --to: -16px;
  opacity: 0; visibility: hidden; transform: translateX(var(--from));
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.55s;
}
.review-card[data-state="active"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.08s, transform 0.55s cubic-bezier(0.32, 0.72, 0, 1) 0.08s, visibility 0s;
}
.review-card[data-state="leaving"] { opacity: 0; visibility: visible; transform: translateX(var(--to)); }
.review-card::before {
  content: "\201C"; display: block; height: 26px;
  font-family: var(--font-display); font-size: 4.4rem; line-height: 1; color: var(--color-accent);
}
.review-card blockquote { margin: 0; }
.review-card blockquote p {
  margin: 0; font-family: var(--font-display); color: var(--color-ink);
  font-size: clamp(1.14rem, 2.3vw, 1.6rem); line-height: 1.55;
}
.review-card footer { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-2); border-top: 1px solid var(--color-line); }
.review-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-ink); }
.review-role { font-size: 0.95rem; color: var(--color-ink-soft); }
.review-progress {
  position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: right center; opacity: 0;
}
.reviews.is-autoplay .review-progress { opacity: 1; animation: review-progress var(--rev-dur, 12s) linear forwards; }
.reviews.is-autoplay.is-holding .review-progress,
.reviews.is-autoplay.is-paused .review-progress { animation-play-state: paused; }
@keyframes review-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reviews-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--sp-3); flex-wrap: wrap; }
.reviews-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; width: 100%; }
/* לשונית = נקודה בכל רוחב (הוחלט 29.9.2026: שמות הארגונים בשורה לא נראו טוב).
   שם הארגון נשאר לקורא מסך (span מוסתר חזותית) ולטולטיפ, והוא כתוב בכרטיס. */
.review-chip {
  position: relative; flex: 0 1 44px; min-width: 0; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%; font: inherit;
}
.review-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.review-chip::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--color-line);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.review-chip:hover::after { background: var(--color-accent-soft); }
.review-chip[aria-current="true"]::after { background: var(--color-accent); transform: scale(1.3); }
.review-chip:focus-visible, .reviews-pause:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* כפתור ההשהיה יושב בפינת הכרטיס, מחוץ לשורת הניווט, כדי שהנקודות בנייד ישארו בשורה אחת */
.reviews-pause {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid var(--color-line);
  transition: border-color 0.3s ease;
}
.reviews-pause:hover { border-color: var(--color-accent-soft); }
.reviews-pause i {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 14px; margin: -7px 0 0 -6px;
  background: linear-gradient(90deg, var(--color-accent-soft) 0 4px, transparent 4px 8px, var(--color-accent-soft) 8px 12px);
}
.reviews-pause[aria-pressed="true"] i {
  width: 0; height: 0; margin: -7px 0 0 -4px; background: none;
  border-block: 7px solid transparent; border-left: 12px solid var(--color-accent-soft);
}
/* חיצים: רק במכשיר עם עכבר, מופיעים בריחוף מעל הכרטיס או בפוקוס מקלדת.
   בנייד ההחלקה והנקודות מחליפות אותם. ברוחב 1000 ומעלה הם יושבים מחוץ
   לכרטיס (במרווח של ה-wrap). בצר מזה, על שולי הכרטיס, עם ריפוד צדדי גדול יותר. */
.reviews-frame { position: relative; }
.reviews-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .reviews-arrow {
    display: block; position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px;
    border-radius: 50%; cursor: pointer; padding: 0;
    background: rgba(25, 17, 19, 0.78); border: 1px solid var(--color-line);
    opacity: 0; transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  }
  .reviews-arrow-next { left: 8px; }
  .reviews-arrow-prev { right: 8px; }
  .review-card { padding-inline: 64px; }
  .reviews:hover .reviews-arrow, .reviews:focus-within .reviews-arrow { opacity: 1; }
  .reviews-arrow:hover { border-color: var(--color-accent); background: rgba(214, 52, 71, 0.22); }
  .reviews-arrow:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .reviews-arrow i { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-bottom: 2px solid var(--color-accent-soft); }
  .reviews-arrow-next i { border-left: 2px solid var(--color-accent-soft); transform: translateX(2px) rotate(45deg); }
  .reviews-arrow-prev i { border-right: 2px solid var(--color-accent-soft); transform: translateX(-2px) rotate(-45deg); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .reviews-arrow-next { left: -64px; }
  .reviews-arrow-prev { right: -64px; }
  .review-card { padding-inline: clamp(22px, 4.6vw, 60px); }
}
.reviews:not([data-reviews-auto]) .reviews-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .review-card, .review-card[data-state="active"], .review-chip::after, .reviews-pause, .reviews-arrow { transition: none; }
  .reviews.is-autoplay .review-progress { animation: none; opacity: 0; }
}

/* ---------- Placeholders ---------- */
.ph {
  border: 1px dashed var(--color-accent); border-radius: var(--radius);
  background: rgba(214, 52, 71, 0.07); color: var(--color-ink-soft);
  padding: clamp(18px, 2.6vw, 26px); text-align: center; font-size: 0.92rem;
}
.ph-media {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 12px, #2c2023 12px, #2c2023 24px);
  color: var(--color-ink-soft); font-size: 0.9rem; line-height: 1.5;
}
.ph-note { display: block; width: fit-content; margin-inline: auto; margin-top: clamp(24px, 3.5vw, 40px); }

/* ---------- Contact ---------- */
.contact { background: linear-gradient(180deg, var(--color-panel), #2a0a11); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact-direct { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-3); }
.contact-direct a { color: var(--color-ink); }
.contact-direct a:hover { color: var(--color-accent-soft); }
.form-field { margin-bottom: var(--sp-2); }
.form-field label { display: block; font-size: 0.9rem; margin-bottom: 6px; color: var(--color-ink-soft); }
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--color-line); background: rgba(0,0,0,0.22);
  color: var(--color-ink); font-family: var(--font-body); font-size: 1rem;
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form-note { margin-top: var(--sp-2); font-size: 0.85rem; }
.form-note:empty { margin: 0; }
/* שגיאת שליחה (יחידה C): אותו צבע של שגיאת שדה */
.form-note.is-error { color: var(--color-accent-soft); }
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.contact-submit:disabled, .contact-submit[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* ---------- Contact: כרטיס דף הבית (27.9.2026) ----------
   תמונה מימין, פאנל טופס בורדו משמאל, בתוך מסגרת משותפת. הכול תחת
   .contact-home כדי שעמוד ההרצאה (שחולק את .contact) לא ישתנה.
   המעטפת הכהה הוכרעה (ניר, 3.10.2026) והמתג הוסר, יחד עם חלופות
   השמנת, האדום ו"בלי". */
.contact-home { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(214, 52, 71, 0.10), transparent 70%), var(--color-bg); }
.contact-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(12px, 1.4vw, 18px); border-radius: 28px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}
.contact-photo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; min-height: 100%; }
.contact-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
}
.contact-panel {
  border-radius: 18px; background: linear-gradient(165deg, var(--color-panel), #2a0a11);
  padding: clamp(28px, 4.2vw, 56px) clamp(22px, 3.6vw, 48px);
}
.contact-solo { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
.contact-heading { text-align: center; margin-bottom: clamp(24px, 3.5vw, 44px); }
/* בהרצאה ובמופע זו כותרת הסקשן (h2), בדף הבית h3 (ניר, 20.10.2026). הגופן והמשקל כתובים כאן במפורש
   ו-.contact-panel בסלקטור, כדי שכללי h2 הכלליים (Secular One, .lede ~ section h2) לא ישנו אותה */
.contact-panel .contact-panel-title {
  text-align: center; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.form-field-wide { grid-column: 1 / -1; }
.contact-home .form-field label { color: var(--color-ink); font-size: 0.95rem; }
.contact-home .req { color: var(--color-accent-soft); margin-inline-start: 3px; }
.contact-home .form-field input, .contact-home .form-field textarea {
  background: var(--color-ink); color: var(--color-ink-on-light);
  border: 2px solid transparent; border-radius: 10px; padding: 13px 15px;
  font-size: 1rem; /* 16px: מונע זום אוטומטי ב-iOS בזמן הקלדה */
}
.contact-home .form-field textarea { resize: vertical; min-height: 130px; }
.contact-home .form-field ::placeholder { color: var(--color-ink-soft-on-light); opacity: 1; }
.contact-home .form-field input[type="email"],
.contact-home .form-field input[type="tel"] { direction: ltr; text-align: right; }
.contact-home .form-field [aria-invalid="true"] { border-color: var(--color-accent-soft); }
.field-error { margin: 6px 0 0; font-size: 0.85rem; color: var(--color-accent-soft); }
.contact-submit { display: flex; min-width: 200px; margin: var(--sp-2) auto 0; }
.contact-home .form-note { text-align: center; }
.form-privacy { margin: var(--sp-3) 0 0; font-size: 0.85rem; color: var(--color-ink-soft); text-align: center; }
/* נייד: טופס קומפקטי. ניר, 27.9.2026: הגלילה בטופס הייתה ארוכה מדי.
   הגופן בשדות נשאר 16px בכוונה, מתחתיו iOS עושה זום בזמן הקלדה. */
@media (max-width: 600px) {
  .contact-card { padding: 8px; gap: 8px; border-radius: 20px; }
  .contact-home .contact-photo { aspect-ratio: 1 / 1; border-radius: 14px; }
  .contact-home .contact-photo img { object-position: 50% 23%; }
  .contact-panel { padding: 22px 18px 20px; border-radius: 14px; }
  .contact-panel .contact-panel-title { font-size: 1.3rem; margin-bottom: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-home .form-field { margin-bottom: 10px; }
  .contact-home .form-field label { font-size: 0.88rem; margin-bottom: 4px; }
  .contact-home .form-field input, .contact-home .form-field textarea { padding: 9px 12px; border-radius: 8px; }
  .contact-home .form-field textarea { min-height: 84px; }
  .field-error { margin-top: 4px; font-size: 0.8rem; }
  /* 70% מהרוחב, ממורכז (ניר, 14.10.2026; היה 100%) */
  .contact-submit { width: 70%; margin-top: 6px; padding-block: 0.75em; }
  .form-privacy { margin-top: 12px; font-size: 0.78rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: #0f0a0b; border-top: 1px solid var(--color-line); padding-block: clamp(28px, 3.5vw, 44px) 20px; }
/* פריסה (7.10.2026): בדסקטופ השם והתיאור בעמודה הרחבה, ושתי עמודות הקישורים צמודות זו לזו בצד השני,
   במרווח קבוע. בנייד השם למעלה, ומתחתיו שתי עמודות ברוחב שווה, כך שיצירת הקשר מתחילה בדיוק באמצע */
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(56px, 7vw, 112px); }
  .footer-brand { grid-column: auto; }
}
.footer-brand .brand-name { font-size: 1.35rem; }
.footer-brand p { color: var(--color-ink-soft); margin-top: var(--sp-1); font-size: 0.95rem; max-width: 34ch; }
/* אייקוני הרשתות (ניר, 3.10.2026). אותו עיגול של כפתורי הטלפון והוואטסאפ בהאדר.
   הכתובות מ-context/meta_accounts.md, וטיקטוק מניר. */
/* האייקונים יושבים בעמודת יצירת הקשר, מתחת למייל (ניר, 8.10.2026) */
.footer-social { display: flex; gap: 8px; margin-top: 6px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--color-line); color: var(--color-ink-soft);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* ריחוף בצבעים הרשמיים של כל רשת (הכרעת ניר, 3.10.2026, אחרי מתג סקירה). */
.footer-social a:hover { color: #fff; }
.footer-social a[href*="facebook.com"]:hover { background: #0866FF; border-color: #0866FF; }
.footer-social a[href*="instagram.com"]:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: transparent;
}
/* טיקטוק: עיגול שחור עם מסגרת דקה, אחרת הוא נבלע ברקע הכהה של הפוטר.
   הלוגו בנוי משלוש שכבות וקטוריות (טורקיז, אדום, לבן) ולא מ-drop-shadow:
   הפילטר הפך את האייקון לתמונה והזיז אותה בחצאי פיקסלים, והקצוות נמרחו
   (נמדד ביחס פיקסלים 1.5: חדות הקצה 680 עם הפילטר מול 941 בלעדיו). */
.footer-social a[href*="tiktok.com"]:hover { background: #000; border-color: rgba(255, 255, 255, 0.55); }
.footer-social .tt-cyan, .footer-social .tt-red { fill: transparent; transition: fill var(--transition); }
.footer-social a:hover .tt-cyan { fill: #25F4EE; }
.footer-social a:hover .tt-red { fill: #FE2C55; }
/* ריווח צפוף בין הקישורים (8.10.2026). `>` כדי לא לגעת באייקונים שבתוך עמודת יצירת הקשר */
.footer-nav { display: flex; flex-direction: column; gap: 4px; }
.footer-nav > a { color: var(--color-ink-soft); font-size: 0.95rem; line-height: 1.55; }
.footer-nav > a {
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
/* טלפון: קו תחתון קבוע, כי בנייד אין ריחוף ושם לוחצים כדי להתקשר. באדום של הקישור למדיניות הפרטיות
   מתחת לכפתור השליחה (ניר, 20.10.2026). האימייל וקישורי העמודים בלי קו במנוחה */
.footer-nav > a[href^="tel:"] { text-decoration-color: var(--color-accent); }
/* בריחוף: הצבע מתבהר וקו תחתון אדום-במה נכנס בעדינות, כדי שיהיה ברור שזה קישור */
.footer-nav > a:hover, .footer-nav > a:focus-visible { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.footer-legal { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--color-line); text-align: center; color: var(--color-ink-soft); font-size: 0.82rem; }
/* התיאור בשתי שורות, בלי מילה בודדת בשורה שלישית (ניר, 8.10.2026).
   בדסקטופ: עמודה רחבה יותר. בנייד: רוחב מלא ואות מעט קטנה יותר, וכל המרווחים צפופים יותר */
@media (min-width: 900px) {
  .footer-brand p { max-width: 46ch; }
}
@media (max-width: 899.98px) {
  .footer-inner { gap: var(--sp-2) var(--sp-3); }
  .footer-brand .brand-name { font-size: 1.2rem; }
  .footer-brand p { max-width: none; font-size: 0.86rem; margin-top: 4px; }
  .footer-social a { width: 34px; height: 34px; }
  /* עמוד האודות בנייד בלבד: בלי בלוק השם והתיאור בפוטר. השם בכותרת העליונה, והתיאור חוזר על בלוק ה-CTA שמעליו (ניר, 12.10.2026). הטקסט נשאר ב-HTML */
  body:has(.about-page) .footer-brand { display: none; }
}
/* קישורים משפטיים בשורת הזכויות (ניר, 14.10.2026): בלי להעמיס את הפוטר עצמו */
.footer-legal a { color: var(--color-ink-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--transition), text-decoration-color var(--transition); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.footer-legal-sep { margin-inline: 0.4em; }
/* בנייד: שורת הזכויות לבד, ושלושת הקישורים בשורה מתחתיה, כדי שנקודה מפרידה
   לא תפתח שורה לבד. המפריד הראשון הופך לשבירת שורה בלתי נראית (18.10.2026, ניר השאיר להחלטתי) */
@media (max-width: 600px) {
  .footer-legal-sep:not(.footer-legal-sep ~ .footer-legal-sep) { display: block; height: 0; overflow: hidden; visibility: hidden; }
}
/* "של האתר" יורדים יחד, כדי ש"האתר" לא תישאר לבד בשורה (ניר, 14.10.2026) */
.form-privacy .nowrap { white-space: nowrap; }
.form-privacy a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.form-privacy a:hover, .form-privacy a:focus-visible { color: var(--color-accent-soft); }

/* ---------- עמודים משפטיים (מדיניות פרטיות, ובהמשך הצהרת נגישות) ----------
   אותו עיצוב משמש גם את החלון הקופץ שנפתח מהטפסים (.legal-dialog). */
.legal h1 { font-size: var(--fs-h1-inner); text-align: center; }
.legal-updated { margin-top: var(--sp-1); text-align: center; color: var(--color-ink-soft); font-size: var(--fs-small); }
.legal-toc { margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--sp-4); }
.legal-toc li { break-inside: avoid; padding-block: 3px; font-size: 0.95rem; }
.legal-toc a { color: var(--color-ink-soft); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--color-accent-soft); }
.legal h2 { font-size: calc(var(--fs-h1-inner) * 0.62); margin: var(--sp-6) 0 var(--sp-2); color: var(--color-ink); scroll-margin-top: 100px; }
.legal h3 { font-size: 1.1rem; margin: var(--sp-3) 0 var(--sp-1); scroll-margin-top: 100px; }
.legal p, .legal li { color: var(--color-ink-soft); }
.legal p { margin: 0 0 var(--sp-2); }
.legal ul { margin: 0 0 var(--sp-2); padding-inline-start: 1.3em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--color-accent); }
/* טבלת העוגיות בסעיף 12 (יחידה E). גלילה אופקית בתוך המסגרת בנייד, לא בעמוד */
.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-3); border: 1px solid var(--color-line); border-radius: var(--radius); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); }
.legal-table th { color: var(--color-ink); font-weight: 700; background: var(--color-surface); white-space: nowrap; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--color-ink); white-space: nowrap; direction: ltr; unicode-bidi: isolate; text-align: right; }
.legal strong { color: var(--color-ink); font-weight: 700; }
@media (max-width: 600px) {
  .legal-toc { padding: var(--sp-2); margin-bottom: var(--sp-4); }
  .legal-toc ol { columns: 1; }
  .legal-toc li { padding-block: 1px; font-size: 0.86rem; line-height: 1.5; }
  .legal h2 { margin-top: var(--sp-4); }
}

/* חלון קופץ: נבנה ב-js/main.js סביב ה-<article> של העמוד המשפטי */
.legal-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: min(85vh, 900px);
  padding: 0; border: 1px solid var(--color-line); border-radius: 18px;
  background: var(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-card);
  overflow: hidden;
}
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog::backdrop { background: rgba(10, 6, 7, 0.72); backdrop-filter: blur(2px); }
.legal-dialog-bar { display: flex; justify-content: flex-end; gap: var(--sp-2); align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--color-line); }
.legal-dialog-bar a { font-size: 0.85rem; color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 3px; margin-inline-end: auto; }
.legal-dialog-bar a:hover { color: var(--color-ink); }
.legal-dialog-close {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-line); background: transparent; color: var(--color-ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.legal-dialog-close:hover { background: var(--color-accent); border-color: var(--color-accent); }
.legal-dialog-close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.legal-dialog-body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 4vw, 40px); scrollbar-color: var(--color-line) transparent; }
/* הפוקוס עובר לאזור הגלילה רק כדי שהחצים והרווח יגללו מיד; אין לו מסגרת משלו */
.legal-dialog-body:focus { outline: none; }
.legal-dialog .legal h2, .legal-dialog .legal h3 { scroll-margin-top: 0; }
body.legal-open { overflow: hidden; }
@media (max-width: 600px) {
  .legal-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); border-radius: 14px; }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; inset-block-end: 24px; inset-inline-start: 24px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-accent); color: #fff; font-size: 1.3rem;
  box-shadow: 0 10px 30px var(--color-glow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-accent-hover); }

/* ---------- Reveal ---------- */
/* חשיפה בגלילה בוטלה בכל האתר (ניר, 12.10.2026): כל הטקסט מופיע כבר בטעינה. תכונת data-reveal נשארה ב-HTML ואינה עושה דבר. */

/* ============================================================
   אזור בהיר: עמודי קריאה (הרצאה, אודות, שאלות)
   ============================================================ */
.page-light { background: var(--color-bg-light); color: var(--color-ink-on-light); }
.page-light h1, .page-light h2 { color: var(--color-ink-on-light); }
.page-light h3 { color: var(--color-ink-on-light); }
.page-light .lead, .page-light p { color: var(--color-ink-soft-on-light); }
.page-light .section-alt { background: var(--color-surface-light); }
.page-light .btn-outline { border-color: var(--color-ink-on-light); color: var(--color-ink-on-light); }
.page-light .btn-outline:hover { background: var(--color-ink-on-light); color: var(--color-bg-light); }

/* Inner-page hero: always opens with Bat-El on stage, never a text headline */
.page-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-bg); }
.page-hero .ph-media { position: absolute; inset: 0; }
.page-hero .hero-overlay { z-index: 1; }
.page-hero .wrap { position: relative; z-index: 2; padding-block: clamp(40px, 7vw, 70px); }
.page-hero h1 { color: var(--color-ink); font-size: clamp(2rem, 5.5vw, 3.4rem); }
.page-hero .lead { color: var(--color-ink); margin-top: var(--sp-2); max-width: 44ch; }

/* ============================================================
   עמוד ההרצאה: פתיחה נקייה, גוף טקסט, ושאלות ותשובות
   נבנה 20.8.2026. הרכיבים כאן שייכים לעמוד ההרצאה בלבד ואינם
   נוגעים ב-.page-hero, שממשיך לשרת עמודים אחרים.
   ============================================================ */

/* ---------- Lede: פתיחת העמוד ----------
   בניגוד ל-.page-hero, כאן התמונה נקייה לחלוטין והכותרת יושבת מתחתיה
   (הכרעת ניר, 20.8.2026). התמונה ברוחב מלא.

   אין כאן aspect-ratio ואין object-fit במכוון: היחס מגיע מ-width/height
   של הקובץ עצמו, ולכן אף פיקסל אינו נחתך בדפדפן ואין קפיצת פריסה
   בטעינה. את החיתוך לנייד עושה <picture> עם קובץ 4:3 שנחתך מראש. */
.lede { background: var(--color-bg); }
.lede-media { margin: 0; line-height: 0; }
.lede-media img { width: 100%; height: auto; }
/* ממוסגרת, דסקטופ בלבד (הכרעת ניר, 1.10.2026: הוסר המתג ונשארה האפשרות
   הקטנה). 1322 = 1983/1.5: ברוחב הזה, במסך של ניר (יחס פיקסלים 1.5), כל
   פיקסל של המקור מוצג כמו שהוא, בלי מתיחה. הנייד לא מושפע. */
@media (min-width: 901px) {
  .lede-media { max-width: 1322px; margin-inline: auto; padding: clamp(20px, 2.5vw, 36px) 20px 0; }
  .lede-media img { border-radius: var(--radius); border: 1px solid var(--color-line); }
}
/* וידאו אווירה בעמוד המופע (הכרעת ניר, 4.10.2026). הסרטון "קצבי": העריכה
   של ניר ובת-אל, נבנתה מחדש מהטריילר המקורי (tools/make_show_cut.py).
   המצב נקבע ב-js/main.js לפי רוחב החלון, ונכתב ל-body[data-show-hero]:
     frame - עד 1599: במסגרת. נייד 4:3 (אייפון 17, 402x684), מחשב נייד
             2.5:1 (16", 1280x551). אותה מסגרת של התמונה.
     wide  - 1600 ומעלה: רוחב מלא עם מסגרת דקה, ביחס קבוע 2.7:1 - היחס שניר
             אישר במסך 32" (2560x1271, אז 2473x911). יחס קבוע ולא גובה
             לפי גובה החלון: במסכי 24"-27" (1920x950, 1707x830) גובה לפי
             החלון יצר רצועה של 3.1-3.45:1 שחתכה ראשים ואת שורת הטאגליין.
             הקובץ חתוך מראש ל-2.7:1 לכל שוט בנפרד (tools/make_show_cut.py).
   בלי JS אין data-show-hero, והתמונה נשארת. aspect-ratio כאן כי עם
   preload="none" אין לווידאו מידות עד שהוא נטען. */
.lede-media { position: relative; }
.lede-video { display: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
@media (min-width: 901px) {
  .lede-video { aspect-ratio: 5 / 2; border-radius: var(--radius); border: 1px solid var(--color-line); }
}
body[data-show-hero] .lede-media picture { display: none; }
body[data-show-hero] .lede-video { display: block; }
body[data-show-hero="wide"] .lede-media {
  max-width: none; padding: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) 0;
}
body[data-show-hero="wide"] .lede-video { aspect-ratio: 1920 / 712; }
/* מאז G התמונה בתוך noscript, ולכן בדפדפן עם JS אין מה שיחזיק את הגובה עד ש-main.js
   כותב את data-show-hero (נמדדה קפיצת פריסה של 0.34 בנייד). כאן הווידאו מחזיק את
   המקום כבר בציור הראשון, באותם גבולות רוחב של main.js (עד 1599 frame, מ-1600 wide). */
@media (scripting: enabled) {
  .lede-video { display: block; }
}
@media (scripting: enabled) and (min-width: 1600px) {
  .lede-media { max-width: none; padding: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) 0; }
  .lede-video { aspect-ratio: 1920 / 712; }
}

/* חץ גלילה: מופיע רק כשהכותרת מתחת לקצה החלון (למשל מחשב נייד עם 551
   פיקסלי גובה, שבו הווידאו ממלא את כל המסך), ונעלם עם הגלילה הראשונה.
   קבוע לתחתית החלון, כי שם הווידאו נחתך. לחיצה גוללת לכותרת. */
.scroll-cue {
  position: fixed; inset-block-end: 18px; inset-inline-start: 50%; z-index: 40;
  translate: 50% 0; /* inline-start ב-RTL הוא ימין, ולכן חצי רוחב ימינה */
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  /* אדום-במה של האתר, כמו כפתור "יצירת קשר" (ניר, 4.10.2026) */
  background: var(--color-accent); border: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  color: #fff; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.scroll-cue.is-visible { opacity: 1; visibility: visible; animation: cue-bob 2.2s ease-in-out infinite; }
.scroll-cue:hover { background: var(--color-accent-hover); }
.scroll-cue svg { width: 22px; height: 22px; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue.is-visible { animation: none; } }
.lede-head { padding-block: clamp(34px, 5vw, 60px) 0; }
/* H1 של עמודי אודות, הרצאה ומופע: אותו גודל (--fs-h1-inner ב-tokens.css) (ניר, 8.10.2026).
   בהרצאה ובמופע מיושר לימין, בקו אחד עם הטקסט, בכל המסכים (ניר, 18.10.2026, במקום המרכוז).
   בנייד הוא זז פנימה יחד עם הפסקאות, ראו "ריווח מהקצה הימני" למטה. */
.lede-head h1 { color: var(--color-ink); font-size: var(--fs-h1-inner); text-align: start; }

/* עמוד המופע: שם המופע ב-H1 ו"סטנדאפ מוזיקלי" כשורת משנה באדום (ניר, 18.10.2026).
   בנייד האדום הרך (5.81), כי בגדלים האלה זה טקסט רגיל והאדום של האתר נותן 3.93
   מול 4.5 הנדרשים. בדסקטופ האדום של האתר, רק בגודל של "טקסט גדול" (סף 3).
   מתחת לשם, בגופן התצוגה, כ-0.62 מה-H1. נבחרה מתוך שלוש תצוגות במתג (ניר, 18.10.2026).
   אותה שורת משנה גם בעמוד האודות, מתחת לשם (ניר, 19.10.2026). */
.page-sub {
  margin: 4px 0 0; color: var(--color-accent-soft);
  font-family: var(--font-display); line-height: var(--lh-heading);
  font-size: calc(var(--fs-h1-inner) * 0.62);
}
@media (min-width: 901px) {
  .page-sub { font-size: max(1.5rem, calc(var(--fs-h1-inner) * 0.62)); color: var(--color-accent); }
}


/* כותרות H2 בהרצאה ובמופע: 0.82 מה-H1 (יחס כ-1.22), כדי שכותרת העמוד תישאר בולטת. 25.4px בנייד, 34.7px ב-1440 (ניר, 12.10.2026). בדף הבית ה-H2 לא משתנה */
.lede ~ section h2 { font-size: calc(var(--fs-h1-inner) * 0.82); }

/* ---------- גוף הטקסט ----------
   p מאופס ב-reset, ולכן הרווח בין הפסקאות מוגדר כאן במפורש. */
.lecture-body { padding-block: clamp(30px, 4.2vw, 48px) clamp(52px, 7.5vw, 100px); }
/* הטופס בא מיד אחרי הטקסט, על אותו רקע (ניר, 19.10.2026). בלי זה הריפוד של שני הסקשנים
   מצטבר (102px בנייד). הרווח עכשיו ריפוד אחד: כ-56 בנייד וכ-70 בדסקטופ, מעל הרווח בין פסקאות. לחזרה לסדר הקודם מוחקים את שני הכללים */
.lecture-body:has(+ .contact) { padding-bottom: clamp(58px, 5vw, 72px); }
.lecture-body + .contact { padding-top: 0; }
/* קפיצה מ"יצירת קשר" בהאדר: לסקשן אין ריפוד עליון, והכרטיס נחת מתחת להאדר הדביק (70 בנייד, 79
   בדסקטופ). עכשיו הקפיצה עוצרת כ-20px מתחת להאדר (ניר, 20.10.2026). גובר על #contact בנייד */
.lecture-body + #contact { scroll-margin-top: 100px; }
@media (max-width: 600px) { .lecture-body + #contact { scroll-margin-top: 90px; } }
/* "יצירת קשר" בכרטיס בהרצאה ובמופע היא כותרת הסקשן, ולכן גדולה ב-20% מכותרת הכרטיס בדף הבית
   (ניר, 20.10.2026): 25px בנייד (היה 20.8), עד 36.5px בדסקטופ (היה 30.4) */
.lecture-body + .contact .contact-panel .contact-panel-title { font-size: clamp(1.6rem, 3.1vw, 2.28rem); }
@media (max-width: 600px) { .lecture-body + .contact .contact-panel .contact-panel-title { font-size: 1.56rem; } }
/* דסקטופ, הרצאה ומופע: ריווח עליון ותחתון בכרטיס עד 40px (היה 56). הטופס כאן לבד, בלי תמונה לצידו,
   וה-56 נבנה לגובה התמונה בדף הבית (ניר, 20.10.2026). min ולא ערך קבוע, כדי שלא תהיה קפיצה ב-901 */
@media (min-width: 901px) {
  .lecture-body + .contact .contact-panel { padding-block: min(clamp(28px, 4.2vw, 56px), 40px); }
}
/* גודל וגובה שורה כמו גוף עמוד האודות (1.12rem, 1.75). היה 17px (ניר, 12.10.2026) */
.lecture-body { font-size: 1.12rem; line-height: 1.75; }
.lecture-body p { margin-bottom: var(--sp-3); }
.lecture-body p:last-child { margin-bottom: 0; }
.lecture-body .lead { margin-bottom: var(--sp-4); color: inherit; font-size: inherit; line-height: inherit; } /* אותו צבע וגודל כמו שאר הפסקאות, בהרצאה ובמופע (ניר, 12.10.2026) */
/* פסקאות הגוף מיושרות לימין (ניר, 12.10.2026, ביטול המרכוז מאותו יום). text-wrap: pretty מונע מילה בודדת בשורה האחרונה */
.lecture-body p { text-wrap: pretty; }

/* ---------- פיצול הפסקה הארוכה, נייד בלבד ----------
   הפסקה על המסע האישי נמדדה 9 שורות ברוחב 390, מעל הסף של 7.
   אותו פתרון שאושר בעמוד האודות (ניר, 12.8.2026): בנייד היא נשברת
   לשלוש פסקאות לפי פרקי החיים, ומ-900 ומעלה החלקים חוזרים להיצמד
   לפסקה אחת רציפה. הטקסט זהה בשני המצבים ואינו משוכפל ב-DOM,
   והרווח בין החלקים מגיע מהמעבר לשורה חדשה בקובץ ה-HTML. */
.lecture-body .para { margin-bottom: var(--sp-3); }
.lecture-body .para > p { margin: 0; }

@media (max-width: 899.98px) {
  .lecture-body .para > p + p { margin-top: var(--sp-3); }
}

@media (min-width: 900px) {
  .lecture-body .para > p { display: inline; }
}

/* ---------- עמוד המופע: ציטוטי ביקורת בתוך עמודת הקריאה (30.9.2026) ----------
   העמוד משתמש ב-.lecture-body כמו שהוא, כדי שהגוף, הרוחב והמרווחים יהיו
   זהים להרצאה. כאן רק הציטוטים: קו אדום בצד ההתחלה, הטקסט בדיו הראשי
   (בהיר יותר מגוף הטקסט) והמקור ב-accent-soft, שעובר ניגודיות (5.81:1)
   בניגוד ל-accent (3.93:1). בלי גופן התצוגה: Secular One בפסקה של
   5 שורות ומעלה מעייף בקריאה. */
/* מונע מילה בודדת בשורה אחרונה, כמו בעמוד האודות. נמדד ב-360:
   "לאימהות." נשארה לבד בשורה בלי זה. */
.show-body p { text-wrap: pretty; }
.show-body .press-quote {
  margin: var(--sp-4) 0;
  padding-inline-start: clamp(16px, 3vw, 26px);
  border-inline-start: 3px solid var(--color-accent);
}
.show-body .press-quote blockquote { margin: 0; }
.show-body .press-quote blockquote p {
  margin: 0; color: var(--color-ink);
  font-size: clamp(1.08rem, 1.7vw, 1.2rem); line-height: 1.7;
}
.show-body .press-quote figcaption { margin-top: var(--sp-1); }
.show-body .press-quote cite {
  font-style: normal; font-size: 0.95rem; color: var(--color-accent-soft);
}
/* צילום הקהל באמצע הטקסט, ברוחב עמודת הקריאה. היחס הוא של הקבצים עצמם,
   והחיתוך לנייד נעשה מראש ב-tools/make_show_photos.py. aspect-ratio כפול
   ל-width/height של הקבצים, רק כדי שכרום לא יציג אזהרת "lazy בלי מידות"
   (4.10.2026, ראו .about-media img). cover: חצי פיקסל חיתוך ולא מתיחה. */
.show-body .show-photo { margin: var(--sp-6) 0; line-height: 0; }
.show-body .show-photo img {
  width: 100%; height: auto; aspect-ratio: 1400 / 933; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-line);
}
@media (max-width: 600px) { .show-body .show-photo img { aspect-ratio: 1200 / 900; } }

/* ריווח מהקצה הימני לטקסט, נייד בלבד (ניר, 18.10.2026): ה-H1, פסקאות הגוף וציטוטי
   הביקורת זזים 12px פנימה מהצד הימני. הצילום נשאר ברוחב העמודה המלא. */
@media (max-width: 600px) {
  .about-flow > .para,
  .about-head hgroup,
  .lede-head h1,
  .lede-head .page-sub,
  .lecture-body .wrap > p,
  .lecture-body .para,
  .show-body .press-quote { margin-inline-start: 12px; }
}

/* ---------- שאלות ותשובות ----------
   details/summary מקוריים: נפתחים בלי שורת JS אחת, עובדים ב-Enter
   וב-Space, ומוכרזים נכון בקורא מסך.

   הסמן המובנה מוסתר. האייקון הוא טבעת (::before) עם פלוס (::after)
   בתחילת השורה, כלומר מימין ב-RTL. המיקום בתכונות לוגיות
   (inset-inline-start, padding-inline-start), ולכן הוא נופל נכון
   בלי כלל direction נפרד. הפלוס מורכב משני גרדיאנטים ב-currentColor,
   ולכן צבעו מתחלף במעבר חלק. בפתיחה הוא מסתובב ל-x והטבעת נצבעת.

   הפתיחה: ::details-content מקבל מעבר גובה (עם interpolate-size),
   והתשובה מופיעה בדעיכה. דפדפן שלא מכיר את זה פותח מיידית, בלי שבר. */
/* רווחים קטנים יותר סביב השאלות והתשובות בהרצאה ובמופע (ניר, 19.10.2026). היה: 99px בנייד ו-194
   בדסקטופ מכרטיס הטופס לכותרת, ו-52/100 מהשאלה האחרונה לפוטר */
.contact:has(+ .faq) { padding-bottom: clamp(40px, 5vw, 72px); }
.faq { padding-block: clamp(36px, 4.5vw, 64px); }
.faq-item { border-bottom: 1px solid var(--color-line); interpolate-size: allow-keywords; }
.faq-item:first-of-type { border-top: 1px solid var(--color-line); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; min-height: 44px;
  padding-block: 17px; padding-inline-start: 48px;
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--color-ink); transition: color 0.3s ease;
}
/* בדסקטופ השאלות קטנות יותר (22px במקום 25.6), כדי שלא יתחרו בגוף הטקסט ובכותרות (ניר, 12.10.2026) */
@media (min-width: 900px) { .faq-item summary { font-size: 1.375rem; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before,
.faq-item summary::after {
  content: ""; position: absolute; inset-inline-start: 2px; top: 50%;
  width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
}
.faq-item summary::before {
  border: 1.5px solid var(--color-accent-soft);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.faq-item summary::after {
  color: var(--color-accent-soft);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), color 0.35s ease;
}
.faq-item summary:hover { color: var(--color-accent-soft); }
.faq-item summary:hover::before { box-shadow: 0 0 0 4px var(--color-glow); }
.faq-item[open] summary::before { background-color: var(--color-accent); border-color: var(--color-accent); }
.faq-item[open] summary::after { color: var(--color-ink); transform: rotate(135deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 0.5s cubic-bezier(0.32, 0.72, 0, 1), content-visibility 0.5s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-answer {
  padding-block: 0 22px; padding-inline-start: 48px;
  color: var(--color-ink-soft); max-width: 62ch;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.faq-item[open] .faq-answer { opacity: 1; transform: none; transition-delay: 0.08s; }
.faq-answer a { color: var(--color-accent-soft); text-decoration: underline; text-underline-offset: 4px; }
/* בנייד (עד 600) הכותרת ואייקון הפלוס זזים 12px פנימה, לקו אחד עם פסקאות הגוף (ניר, 18.10.2026).
   השאלה והתשובה זזות באותה מידה, כדי שהרווח מהאייקון לא ישתנה. הקווים המפרידים נשארים ברוחב מלא */
@media (max-width: 600px) {
  .faq .section-head h2 { margin-inline-start: 12px; }
  .faq-item summary { padding-inline-start: 58px; }
  .faq-item summary::before, .faq-item summary::after { inset-inline-start: 12px; }
  .faq-answer { padding-inline-start: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary, .faq-item summary::before, .faq-item summary::after,
  .faq-item::details-content, .faq-answer { transition: none; }
}

/* ---------- קפיצה לעוגנים בנייד (29.9.2026) ----------
   ההאדר דביק (69 עד 79 פיקסלים) והריפוד העליון של סקשן הוא 52 עד 67, ולכן
   קפיצה שמיישרת את הסקשן לראש המסך הסתירה את הכותרת. ההיסט מחשב לכל רוחב
   את המרחק כך שהכותרת נוחתת מתחת להאדר. #option-show הוא כרטיס ולא סקשן, ולכן
   ההיסט שלו קבוע. בדסקטופ לא משתנה כלום. */
@media (max-width: 900px) {
  #contact, #options { scroll-margin-top: calc(96px - clamp(52px, 7.5vw, 100px)); }
  #option-show { scroll-margin-top: 96px; }
}
/* דסקטופ, 901 עד כ-1330: ריפוד הסקשן (7.5vw) קטן מההאדר (79), ו"יצירת קשר" נעצרה 11px מתחתיו
   ב-901 (ניר, 20.10.2026). אותו חישוב כמו בנייד, עם 100px: הכותרת כ-20px מתחת להאדר; מ-1334 ההיסט 0 */
@media (min-width: 901px) {
  #contact { scroll-margin-top: max(0px, calc(100px - clamp(52px, 7.5vw, 100px))); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .options-grid { grid-template-columns: 1fr; }
  .power-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .contact-grid { grid-template-columns: 1fr; }
  /* בנייד התמונה עולה מעל הטופס, בחיתוך ריבועי שמשאיר פנים, יד ומיקרופון.
     23% מכויל לתמונת "מסך צבעוני" (ניר, 27.9.2026, לפי צילום מסך). */
  .contact-card { grid-template-columns: 1fr; border-radius: 22px; }
  .contact-photo { min-height: 0; aspect-ratio: 1 / 1; }
  .contact-photo img { object-position: 50% 23%; }
  .hero-text { max-width: none; }
  /* פתיחת ההירו בנייד: חמש שורות, שבירה לפי משמעות. כך הבלוק צר כמו הכותרת ולא נמרח לרוחב המסך.
     המשפט על הנוכחות וההומור יורד בנייד (ניר, 7.10.2026), ובסוף השורה השנייה נקודה במקום פסיק */
  .hero-lead > span { display: block; }
  .hero-lead br, .hero-lead .lead-full { display: none; }
  .hero-lead .lead-end::after { content: "."; }
  .hero-lead .lead-break { margin-top: 0.45em; }

  /* בנייד הבלוק היה ממורכז אנכית ונפל על גובה העיניים, עם רווח מיותר
     מתחת להאדר. עוגן לראש המסך במקום מרכוז, כדי שהשורה העליונה
     תתחיל בגובה המצח. ניר, 9.8.2026. בדסקטופ המרכוז נשאר. */
  .hero { align-items: flex-start; }
  .hero .hero-inner { padding-block: clamp(56px, 11vh, 120px) clamp(48px, 10vh, 120px); }

  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; background: none;
    border: none; cursor: pointer; padding: 8px; z-index: 120;
  }
  .nav-toggle span { width: 26px; height: 2.5px; background: var(--color-ink); border-radius: 2px; }
  /* הפאנל: 68% מרוחב המסך במקום 74%, כדי שיישאר יותר מהדף גלוי.
     הריפוד האופקי ירד ל-32 כדי שכפתור "יצירת קשר" (139 פיקסלים)
     לא ייצמד לשוליים בטלפון צר.
     140 למעלה: מוריד את החלל שנוצר מהמרכוז, אבל לא דוחף את
     הקישורים לאזור שקשה להגיע אליו עם האגודל.
     overflow ו-overscroll: הגנה למסך נמוך (טלפון לרוחב), ומניעת
     המשך גלילה אל הדף שמאחור. */
  .site-nav {
    position: fixed; inset: 0 0 0 38%; background: var(--color-surface);
    flex-direction: column; justify-content: flex-start; gap: 14px;
    padding: 140px 32px calc(32px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%); transition: transform var(--transition); box-shadow: var(--shadow-card);
    overflow-y: auto; overscroll-behavior: contain;
  }

  /* הריפוד העליון נגזר מגובה המסך ולא ממספר קבוע.
     נמדד על המכשיר של ניר: החלון הגלוי הוא 684 ולא 844, כי סרגלי
     כרום אוכלים 190 פיקסלים. ריפוד קבוע של 140 תפס שם 20% מהמסך
     במקום 17%, ולא נשאר מספיק מקום פנוי שגוש הקשר ייצמד לתחתית.

     svh הוא גובה החלון כשסרגלי הדפדפן גלויים, כלומר המצב הצפוף
     ביותר. שימוש בו מונע קפיצה כשהסרגלים נעלמים בגלילה.
     שורת ה-vh שלפניו היא נפילה לאחור לדפדפן ישן שלא מכיר svh. */
  .site-nav {
    padding-top: clamp(60px, 12vh, 110px);
    padding-top: clamp(60px, 12svh, 110px);
  }
  .site-nav.is-open { transform: translateX(0); }
  /* תפריט סגור לא נגיש בטאב (יחידה F): visibility נכבה רק אחרי שהפאנל סיים
     לצאת מהמסך, ולכן ההחלקה לא משתנה. בלי זה הטאב עבר על 7 קישורים בלתי נראים */
  .site-nav { visibility: hidden; transition: transform var(--transition), visibility 0s linear 200ms; }
  .site-nav.is-open { visibility: visible; transition: transform var(--transition), visibility 0s; }
  .site-nav a { font-size: 1.25rem; }

  /* אזור נגיעה של 44 פיקסלים במקום 34, בלי לשנות את גודל הטקסט.
     המרווח ירד מ-24 ל-14 כדי לפצות: 44+14 שווה בדיוק ל-34+24,
     ולכן המרחק בין המילים שהעין רואה נשאר זהה לחלוטין.
     נבחר "> a" כדי לא לגעת ב-.nav-cta ובכפתורי .nav-direct,
     שיש להם ריפוד וגדלים משלהם. */
  .site-nav > a:not(.nav-cta) {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding-inline: 14px;
  }

  /* אוויר נוסף מעל ה-CTA, כדי שייקרא כפעולה ולא כעוד שורה ברשימה.
     הכפתור עצמו הוקטן לבקשת ניר: גופן קטן יותר וריפוד צר יותר.
     min-height שומר אותו מעל 44, המינימום לאזור נגיעה. */
  .site-nav .nav-cta {
    margin-top: 18px;
    font-size: 1.05rem;
    padding: 0.5em 1.1em;
    min-height: 46px;
    display: flex; align-items: center; justify-content: center;
  }

  /* מסמן שנגיעה מחוץ לפאנל סוגרת אותו. בלי זה, בספארי של אייפון
     אזור ריק לא תמיד מייצר אירוע click והסגירה מחוץ לתפריט
     מתנהגת באופן לא עקבי. */
  body.nav-open { cursor: pointer; }

  /* גוש הקשר והשפה נדחף לתחתית. margin-top: auto בולע את המקום
     הפנוי, ו-EN שאחריו נגרר איתו. */
  .nav-direct { margin-top: auto; gap: 12px; }
  .nav-direct a { width: 44px; height: 44px; }
  .nav-direct a svg { width: 26px; height: 26px; }

  body.nav-open { overflow: hidden; }

  /* אלמנט עם backdrop-filter שאינו none הופך לבלוק מכיל עבור צאצאים
     ב-position: fixed. תפריט המובייל יושב בתוך ההדר, ולכן ברגע
     שהגלילה הדליקה את [data-scrolled] הוא נמתח על ההדר (69 פיקסלים)
     במקום על החלון (844), והתפריט נפתח כרצועה שבורה. נמדד בניסוי
     מבוקר: אותה תקלה בדיוק מתרחשת גם ב-scrollY אפס אם מכריחים את
     ה-backdrop-filter, ונעלמת בגלילה אם מנטרלים רק אותו.

     כאן, ברוחבי נייד בלבד, הבלר מכובה. הרקע נשאר 94% אטום ולכן
     ההפרש כמעט בלתי נראה. (הרקע המוטבע שהיה בעמודים הפנימיים הוסר
     4.10.2026, וכל העמודים מקבלים עכשיו בורדו בגלילה.) בדסקטופ התפריט אינו fixed, ולכן שם הבלר
     נשאר בדיוק כפי שתוכנן. */
  .site-header,
  .site-header[data-scrolled] {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* מסך נמוך, בעיקר טלפון לרוחב. הריפוד העליון כבר מטופל ב-clamp
   שמעליו ומגיע שם לרצפה של 72, ולכן כאן רק המרווחים מתכווצים
   כדי לקצר את הגלילה. אזורי הנגיעה נשארים 44. */
@media (max-width: 900px) and (max-height: 600px) {
  .site-nav { gap: 10px; }
  .site-nav .nav-cta { margin-top: 12px; }
}

/* טלפון נמוך (360x640 ומטה): פחות אוויר מתחת להאדר, כדי שכפתורי ההירו לא ייחתכו */
@media (max-width: 900px) and (max-height: 660px) {
  .hero .hero-inner { padding-top: 46px; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }

  /* שם קטן יותר, ושלוש המילים מתאימות את עצמן אליו */
  .brand-name { font-size: 1.3rem; }
  .brand-sub { font-size: 0.8rem; margin-top: 2px; }

  /* שני הכפתורים זה לצד זה, כמו בדסקטופ */
  .hero-actions { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .hero-actions .btn-primary { padding: 0.8em 1.15em; font-size: 0.94rem; white-space: nowrap; }
  .hero-actions .btn-ghost { padding: 0.8em 0.2em; font-size: 0.94rem; white-space: nowrap; }
  .hero-lead { margin-top: 1.2rem; }
}

/* בפס הרץ במגע: שקוף לחלוטין לאצבע, ותנועה מהירה יותר.
   pointer-events: none מעביר כל נגיעה לדף שמאחור, כך שגלילה עובדת
   ולחיצה ארוכה לא בוחרת, לא מדגישה ולא מעלימה לוגואים. */
@media (hover: none) {
  .marquee { pointer-events: none; }
}




/* ============================================================
   עמוד אודות (about/)
   שני מבנים חיים באותו HTML ומתחלפים במתג הסקירה:
   "זרימה" - הדיוקן צף והטקסט זורם סביבו ואז ברוחב מלא.
   "במה"   - רצועת יין עם גריד דו-טורי, והפסקאות מתחתיה על כהה.
   ============================================================ */

.about-page { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 80px); }

/* רחב יותר ועם שוליים צרים יותר, לבקשת ניר.
   1300 עם ריפוד מוקטן, במקום 1040 עם הריפוד הרגיל של האתר. */
.about-flow { max-width: 1300px; padding-inline: clamp(20px, 2.6vw, 36px); }
.about-flow > .para { margin-bottom: var(--sp-3); }
.about-flow > .para:last-child { margin-bottom: 0; }

.about-head { margin-bottom: var(--sp-4); }
/* השם ב-H1 ושורת המשנה (.page-sub) מיושרים לימין, כמו בהרצאה ובמופע (ניר, 19.10.2026, במקום "נעים להכיר" ממורכז) */
.about-head h1 { font-size: var(--fs-h1-inner); line-height: var(--lh-heading); text-align: start; text-wrap: balance; }
/* בטלפון השם נכנס בשורה אחת: הגודל יורד רק כשהמסך צר מדי, לפי הרוחב (נמדד: 345px ב-31px,
   ושטח פנוי = רוחב המסך פחות 52). מ-394 ומעלה, כולל iPhone 17 ב-402, הגודל לא משתנה (ניר, 19.10.2026) */
@media (max-width: 600px) {
  .about-head h1 { font-size: min(var(--fs-h1-inner), calc((100vw - 52px) * 0.089)); }
}
/* בנייד "בורנשטיין (פאפורה)" לא נשבר באמצע. בדסקטופ הוא כן יכול להישבר: בעמודה הצרה ליד הדיוקן (900-1100) שורה שאינה נשברת נדחפת מתחת לדיוקן */
@media (max-width: 899.98px) { .br-d { display: none; } .nm { white-space: nowrap; } }


.about-portrait { margin: 0; }
.about-portrait img { width: 100%; }

/* גוף הסיפור. אין max-width על הפסקה במכוון: הרוחב נשלט ברמת
   הבלוק, ו-max-width על הפסקה היה מונע ממנה למלא את השורה
   המלאה מתחת לדיוקן. */
.about-flow > .para {
  font-size: 1.12rem;            /* טקסט בהיר על כהה נראה דק יותר ממה שהוא */
  line-height: 1.75;
  color: var(--color-ink-soft);  /* 7.96:1, עובר AAA, ובלי בוהק הדיו המלא */
  /* הדפדפן מונע מילה בודדת בשורה האחרונה, בכל רוחב מסך ובלי סימון ידני.
     דפדפן שלא תומך מתעלם ומקבל את ההתנהגות הקודמת, בלי נזק.
     נקבע כאן ולא על ה-<p>, כי בדסקטופ ה-<p> הוא inline והתכונה
     חלה על מיכל הבלוק. היא עוברת בירושה לשני המצבים. */
  text-wrap: pretty;
}

/* ---------- הפיצול: נייד בלבד ----------
   ניר הכריע (12.8.2026): רוב המבקרים בנייד, ובמסך גדול קל יותר
   לקרוא רצף ארוך. לכן בנייד כל חלק הוא פסקה נפרדת, ובדסקטופ
   החלקים חוזרים להיות פסקה אחת רציפה. הטקסט זהה בשני המצבים
   ואינו משוכפל ב-DOM. */
.about-flow > .para > p { margin: 0; }

@media (max-width: 899.98px) {
  .about-flow > .para > p + p { margin-top: var(--sp-3); }
}

/* מ-900 ומעלה החלקים נצמדים חזרה. שני <p> סמוכים ב-display: inline
   יוצרים תיבת בלוק אנונימית אחת, כלומר פסקה רצופה. הרווח ביניהם
   מגיע מהמעבר לשורה חדשה שבין התגיות בקובץ ה-HTML. */
@media (min-width: 900px) {
  .about-flow > .para > p { display: inline; }
}

/* ---------- שבירה ידנית, נייד בלבד ----------
   `.br-m` הוא <br> שפעיל רק בטווח שבו הוא באמת עוזר. הוא מוצב במקום
   שבו משפט חדש מתחיל בסוף שורה ומשאיר ממנו מילה תלויה, וכך המשפט
   מתחיל בשורה משלו. יש רווח לפניו ב-HTML, ולכן כשהוא מכובה המילים
   נשארות מופרדות כרגיל.

   הטווח 391 עד 450 נגזר ממדידה ולא מניחוש:
   - עד 390 המילה כבר פותחת שורה מעצמה, ושבירה כפויה הייתה יוצרת
     שורה קטועה מיותרת.
   - מעל 450 השורה שלפני השבירה מתרוקנת: 59% מלאה ב-440, 40% ב-460,
     ו-15% בלבד ב-520. שם עדיף לתת לטקסט לזרום.
   - הטווח מכסה את כל הטלפונים במצב לאורך, כולל ה-Pro Max. */
.br-m { display: none; }
@media (min-width: 391px) and (max-width: 450px) {
  .br-m { display: inline; }
}

/* ---------- נייד: בדיוק המראה שאושר ----------
   הדיוקן ראשון ב-DOM לצורך ה-float, ולכן כאן מסדרים מחדש.
   שוויון ב-order נשבר לפי סדר ה-DOM, ולכן הכותרת לפני שורת המשנה. */
@media (max-width: 899.98px) {
  .about-flow { display: flex; flex-direction: column; padding-inline: 0; }
  .about-top { display: contents; }
  .about-head  { order: 1; padding-inline: clamp(20px, 5vw, 48px); }
  .about-portrait { order: 2; margin-block: var(--sp-4) 0; }
  .about-flow > .para { order: 3; padding-inline: clamp(20px, 5vw, 48px); }
  /* ריווח מהקצה הימני, כמו בהרצאה ובמופע (ניר, 19.10.2026): בטלפון (עד 600) הפסקאות 12px פנימה */
  /* לא :first-of-type. הוא היה נתפס על .about-top, שהוא גם div. */
  .about-top + .para { margin-top: var(--sp-4); }
  .about-portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  }
}

/* ============================================================
   מבנה "זרימה" (הוכרע 4.10.2026, מבנה "במה" ומתג הסקירה הוסרו)
   .about-top נשאר בלוק רגיל ואינו יוצר הקשר עיצוב חדש, ולכן
   הצף שבתוכו ממשיך להשפיע גם על הפסקאות שאחריו. זה מה שמייצר
   את המעבר משורות קצרות לצד הדיוקן לשורות מלאות מתחתיו.
   ============================================================ */
@media (min-width: 900px) {
  .about-portrait {
    float: left;
    width: 560px;
    /* ב-RTL זהו הצד הימני של התמונה, כלומר הצד שפונה לטקסט */
    margin-inline-start: 46px;
    margin-block-end: var(--sp-3);
  }
  /* דעיכה מרוסנת לבקשת ניר, נגזרת מהמדידה של הדיוקן (טל שחר 0061, מסגור
     שלישי 4.10.2026): בת-אל תופסת 23.7% עד 84.2% מהרוחב, ולכן 6% בכל צד נוגעים
     ברקע בלבד. בגובה היא מתחילה ב-6.1% (מעל הדעיכה העליונה של 4%) ונגמרת
     ב-91.4%, ולכן הדעיכה התחתונה מ-93% נופלת על הרצפה בלבד. */
  .about-portrait img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 93%, transparent 100%);
            mask-composite: intersect;
  }
  /* מנקים את הצף כדי שסקשן ה-CTA לא ייכנס לתוכו */
  .about-flow::after { content: ""; display: block; clear: both; }
}

.about-next { border-top: 1px solid var(--color-line); }
/* סקשן הסיום פחות גדול (ניר, 8.10.2026): כותרת קטנה יותר, טקסט משנה קטן יותר וריפוד צר יותר */
.about-next { padding-block: clamp(36px, 5vw, 64px); }
/* לא גדול מ-0.82 מה-H1, כמו בהרצאה ובמופע. בנייד וטאבלט נשאר 24px (ניר, 12.10.2026) */
.about-next h2 { font-size: min(clamp(1.5rem, 3vw, 2.25rem), calc(var(--fs-h1-inner) * 0.82)); }
.about-next .lead { font-size: 1.1rem; }
/* הסקשן כולו ממורכז: כותרת, טקסט וכפתורים (ניר, 8.10.2026) */
.about-next .wrap { text-align: center; }
.about-next-actions { justify-content: center; }
/* שלושת הכפתורים באותו רוחב, של הרחב שבהם (ניר, 19.10.2026): גריד של שלוש עמודות 1fr
   ברוחב fit-content, כך שכל עמודה גדלה לרוחב הכפתור הרחב. היה flex, והרוחב נקבע לפי אורך המילה */
.about-next-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); width: fit-content; max-width: 100%;
  margin-inline: auto; gap: var(--sp-2); margin-top: var(--sp-3);
}
/* כפתורים מעט קטנים יותר בנייד בלבד, כדי ששלושתם יישבו נוח יותר
   על מסך צר. הדסקטופ לא נוגע. הריפוד עדיין שומר על שטח נגיעה
   של מעל 44 פיקסלים, שזה המינימום לנגישות. */
@media (max-width: 899.98px) {
  .about-next-actions .btn { font-size: 0.92rem; padding: 0.78em 1.35em; }
  /* קטנים עוד מעט בנייד (ניר, 19.10.2026), ושטח הנגיעה לא יורד מ-44 פיקסלים */
  .about-next-actions .btn { font-size: 0.86rem; padding: 0.66em 1.15em; min-height: 44px; }
}
/* טלפונים צרים: "בואו נדבר" נשבר לשתי שורות ב-360 בגלל הרוחב האחיד. ריפוד צדדי ורווח קטנים יותר,
   כך ששלושת הכפתורים נשארים בשורה אחת ובאותו רוחב (נמדד 320-430, 19.10.2026) */
.about-next-actions .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .about-next-actions { gap: 10px; }
  .about-next-actions .btn { padding-inline: 1em; }
}
@media (max-width: 359px) {
  .about-next-actions .btn { padding-inline: 0.7em; }
}

/* ============================================================
   הסכמה לעוגיות (יחידה E, 16.10.2026): באנר וחלון הגדרות.
   נבנים ב-js/consent.js. "אישור" אדום, "דחייה" במסגרת (ניר).
   כשהבאנר פתוח, לגוף העמוד ריווח תחתון בגובה הבאנר (--consent-h),
   כדי שאפשר יהיה לגלול את כפתור השליחה של הטופס אל מעל הבאנר.
   ============================================================ */
.consent-banner {
  position: fixed; inset-block-end: 24px; inset-inline: 0; margin-inline: auto; z-index: 95;
  width: min(540px, calc(100vw - 24px));
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-card);
}
/* כרטיס צף (ניר, 16.10.2026). מקוצר (ניר, 19.10.2026, לפי צילום): אייקון עוגייה בפינה הימנית,
   משפט אחד, ומתחתיו שני כפתורים. בלי קישור "הגדרות" (ניר): החלון נפתח מהפוטר */
/* --consent-lift: כמה הבאנר מתארך כדי לא לחתוך טקסט (fitBanner ב-consent.js). התוספת מתחלקת לריווח:
   55% מעל הטקסט, כדי שהמשפט בבאנר יתרחק מהקצה העליון ומהשורה הגלויה מאחוריו (ניר, 19.10.2026),
   30% בין הטקסט לכפתורים, 15% מתחת לכפתורים */
.consent-inner {
  display: flex; flex-direction: column;
  padding: calc(18px + var(--consent-lift, 0px) * 0.55) 22px calc(18px + var(--consent-lift, 0px) * 0.15);
  gap: calc(16px + var(--consent-lift, 0px) * 0.3);
}
.consent-copy { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.consent-icon {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  fill: none; stroke: var(--color-accent-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.consent-text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-ink); text-wrap: balance; }
.consent-text .nowrap { white-space: nowrap; }
.consent-dialog-policy a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.consent-dialog-policy a:hover { color: var(--color-accent-soft); }
.consent-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.consent-btn {
  min-height: 42px; min-width: 0; padding: 0.4em 0.8em;
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  border-radius: var(--radius-btn); border: 2px solid var(--color-ink);
  background: transparent; color: var(--color-ink); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.consent-btn:hover { background: var(--color-ink); color: var(--color-bg); }
/* "אישור" באדום של כפתורי האתר (החלטת ניר, 16.10.2026, במקום "בולטים באותה מידה" במפרט, סעיף 6) */
.consent-btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.consent-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
.consent-btn:focus-visible,
.consent-dialog-policy a:focus-visible,
.consent-cat input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* הקישור בפוטר פותח את חלון ההגדרות. טבעת פוקוס ברורה כמו בבאנר (שאר קישורי הפוטר: יחידה F) */
.footer-legal a[data-cookie-settings]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
html.has-consent { scroll-padding-bottom: calc(var(--consent-h, 0px) + 12px); }
html.has-consent body { padding-bottom: var(--consent-h, 0px); }
html.has-consent .to-top { inset-block-end: calc(var(--consent-h, 0px) + 16px); }
#main:focus, #main h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 600px) {
  .consent-banner { inset-block-end: 12px; border-radius: 14px; }
  /* סרגל הדפדפן הוסתר בגלילה (consent.js): הבאנר לא נדחק לקצה המעוגל של המסך. התנועה עצמה
     (glide) ב-consent.js, יחד עם התזוזה של הדפדפן (ניר, iPhone, 20.10.2026) */
  .consent-banner.is-bar-hidden { inset-block-end: 28px; }
  /* מעל הטקסט 20px (היה 16): המשפט בבאנר היה קרוב מדי לקצה העליון (ניר, 19.10.2026) */
  .consent-inner {
    padding: calc(20px + var(--consent-lift, 0px) * 0.55) 14px calc(16px + var(--consent-lift, 0px) * 0.15);
    gap: calc(16px + var(--consent-lift, 0px) * 0.3);
  }
  .consent-copy { gap: 8px; }
  .consent-icon { width: 24px; height: 24px; }
  .consent-br { display: none; }
  /* 0.875rem: ב-390 הטקסט נכנס לשתי שורות ונשבר אחרי "לשפר" (ניר, 19.10.2026) */
  .consent-text { font-size: 0.875rem; line-height: 1.55; }
  /* בנייד הכפתורים זה מתחת לזה, ברוחב מלא, כמו בצילום: "דחייה" למעלה, "אישור" למטה */
  .consent-actions { grid-template-columns: 1fr; gap: 8px; }
  .consent-btn { min-height: 44px; font-size: 0.95rem; }
}

/* סוגר מיותר כאן (מאז E) ביטל את הכלל של .consent-dialog, והחלון הוצג לבן בעיצוב
   ברירת המחדל של הדפדפן. הוסר ביחידה F אחרי שניר שם לב */
.consent-dialog {
  width: min(600px, calc(100vw - 32px)); max-height: min(88vh, 760px);
  padding: 0; border: 1px solid var(--color-line); border-radius: 18px;
  background: var(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-card);
  overflow: hidden;
}
.consent-dialog[open] { display: flex; flex-direction: column; }
.consent-dialog::backdrop { background: rgba(10, 6, 7, 0.72); backdrop-filter: blur(2px); }
.consent-dialog-bar { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 12px; padding-inline-start: 20px; border-bottom: 1px solid var(--color-line); }
.consent-dialog-title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin: 0; margin-inline-end: auto; color: var(--color-ink); }
.consent-dialog-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; }
.consent-dialog-intro { margin: 0 0 var(--sp-2); font-size: 0.95rem; color: var(--color-ink-soft); }
.consent-cats { display: grid; gap: 12px; }
.consent-cat {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
}
.consent-cat input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.consent-cat input:disabled { cursor: default; }
.consent-cat-name { font-weight: 700; cursor: pointer; }
.consent-cat-fixed { font-weight: 400; color: var(--color-ink-soft); font-size: 0.9rem; }
.consent-cat-desc { grid-column: 2; margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-ink-soft); }
.consent-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 14px 20px 18px; border-top: 1px solid var(--color-line); }
/* כפתור השמירה, היחיד בחלון: אדום, צר, מעט גבוה, במרכז (ניר, 17.10.2026) */
.consent-dialog-save { min-height: 48px; min-width: 160px; padding-inline: 1.8em; font-size: 0.95rem; }
@media (max-width: 600px) {
  .consent-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); border-radius: 14px; }
}

/* כפתור עצירה שנראה רק במקלדת (S28ג, יחידה F, 17.10.2026): לווידאו בדף הבית, לפס
   הלוגואים ולווידאו בעמוד המופע. מוסתר כמו "דלגו לתוכן" ומופיע רק בפוקוס, ולכן
   מי שגולש בעכבר או במגע לא רואה שינוי. הילה כהה סביב הכפתור, כדי שטבעת הפוקוס
   הוורודה תיגע רק בכהה (5.81) גם מעל וידאו וגם על הרקע הבהיר של פס הלוגואים. */
.motion-pause {
  position: absolute; z-index: 5; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap;
}
.motion-pause:focus {
  width: 44px; height: 44px; margin: 0; overflow: visible; clip-path: none; cursor: pointer;
  border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-line);
  box-shadow: 0 0 0 9px var(--color-bg);
}
.motion-pause i {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 14px; margin: -7px 0 0 -6px;
  background: linear-gradient(90deg, var(--color-ink) 0 4px, transparent 4px 8px, var(--color-ink) 8px 12px);
}
.motion-pause.is-stopped i {
  width: 0; height: 0; margin: -7px 0 0 -4px; background: none;
  border-block: 7px solid transparent; border-left: 12px solid var(--color-ink);
}
.hero > .motion-pause:focus { bottom: 20px; inset-inline-end: 20px; }
.logos-strip { position: relative; }
.logos-strip > .motion-pause:focus { top: 50%; margin-top: -22px; inset-inline-end: 16px; }
.lede-media > .motion-pause:focus { bottom: 16px; inset-inline-end: 16px; }
@media (min-width: 901px) { .lede-media > .motion-pause:focus { inset-inline-end: 36px; } }