/* נוצר אוטומטית ע"י build.py — אין לערוך ידנית. ערכו את tidluk-basade-landing/css/ */


/* ===== css/tokens.css ===== */
/* ==========================================================================
   תדלוק בשטח — נחמיה אנרגיה | tokens.css
   מקור אמת יחיד. אף קובץ סקשן לא מגדיר ערך גלם — הכל דרך var().

   צבעי מותג (זהים לדלקן — רצף מותגי):
     #08396c נייבי · #30964c ירוק · #f6db2a צהוב · #ffffff לבן

   הקונספט הוויזואלי: "קו הדלק" — קו רציף יחיד שרץ לאורך כל העמוד.
   הרקע מתחלף בהדרגה לאורכו ולכן אין קו חיתוך בין פרקים.
   ========================================================================== */

:root {
  /* --- מותג --- */
  --tbs-navy:   #08396c;
  --tbs-green:  #30964c;
  --tbs-yellow: #f6db2a;
  --tbs-white:  #ffffff;

  /* גוונים נגזרים */
  --tbs-navy-deep:    #04203f;
  --tbs-navy-soft:    #0d4a89;
  --tbs-green-bright: #3fb75f;
  --tbs-green-deep:   #1f6435;
  --tbs-yellow-warm:  #ffe75c;

  /* --- מערכת הרקע הרציפה ---
     הערכים האלה מונפשים ע"י js/modules/backdrop.js לפי התקדמות הגלילה.
     שום סקשן לא מגדיר background-color משלו. */
  --tbs-bg:        #02070d;   /* כמעט-שחור עם נטייה קרה — כמו הרפרנס */
  --tbs-bg-deep:   #010407;   /* העומק ביותר — CTA סוגר */
  --tbs-bg-light:  #ecf1f4;   /* הפרקים הבהירים — האמצע */
  /* צבע הלוח הבהיר. גם הלוח וגם שני המפרידים קוראים מכאן, כדי שלא
     יוכלו להיפרד. שינוי כאן משנה את שלושתם. */
  --tbs-panel-bg:  var(--tbs-bg-light);
  --tbs-backdrop:  var(--tbs-bg);        /* המשתנה החי שהרקע קורא */
  --tbs-ink:       var(--tbs-text);      /* צבע הטקסט החי לפי הרקע */

  /* --- טקסט על כהה --- */
  --tbs-text:       #eaf1f8;
  --tbs-text-muted: rgba(234, 241, 248, 0.66);
  --tbs-text-faint: rgba(234, 241, 248, 0.38);

  /* --- טקסט על בהיר --- */
  --tbs-text-dark:       #062038;
  --tbs-text-dark-muted: rgba(6, 32, 56, 0.68);
  --tbs-text-dark-faint: rgba(6, 32, 56, 0.42);

  /* --- קווים --- */
  --tbs-line:         rgba(234, 241, 248, 0.12);
  --tbs-line-strong:  rgba(234, 241, 248, 0.26);
  --tbs-line-dark:    rgba(6, 32, 56, 0.14);
  --tbs-line-dark-strong: rgba(6, 32, 56, 0.28);

  /* --- טיפוגרפיה --- */
  --tbs-font-he:   'Heebo', system-ui, -apple-system, 'Segoe UI', 'Arial Hebrew', sans-serif;
  --tbs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tbs-fs-hero:    clamp(2rem, 5.4vw, 4.75rem);
  --tbs-fs-display: clamp(2.1rem, 5.6vw, 4.75rem);
  --tbs-fs-h2:      clamp(1.75rem, 4vw, 3.25rem);
  --tbs-fs-h3:      clamp(1.25rem, 2.1vw, 1.7rem);
  --tbs-fs-lead:    clamp(1.0625rem, 1.55vw, 1.375rem);
  --tbs-fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --tbs-fs-small:   0.9375rem;
  --tbs-fs-mono:    0.6875rem;

  --tbs-lh-display: 1.08;
  --tbs-lh-body:    1.7;
  --tbs-ls-display: -0.018em;
  --tbs-ls-mono:    0.16em;
  --tbs-measure:    60ch;

  /* --- ריווח --- */
  --tbs-s-1: 0.25rem;  --tbs-s-2: 0.5rem;  --tbs-s-3: 0.75rem;
  --tbs-s-4: 1rem;     --tbs-s-5: 1.5rem;  --tbs-s-6: 2rem;
  --tbs-s-7: 3rem;     --tbs-s-8: 4rem;    --tbs-s-9: 6rem;
  --tbs-s-10: 8rem;    --tbs-s-11: 11rem;

  /* פרקים — ריווח לא אחיד בכוונה, כדי שלא ייווצר קצב "סקשנים" */
  --tbs-chapter-pad:   clamp(4.5rem, 11vh, 9.5rem);
  --tbs-chapter-pad-l: clamp(6rem, 16vh, 14rem);
  --tbs-gutter:        clamp(1.25rem, 5vw, 5rem);
  --tbs-maxw:          1400px;
  --tbs-maxw-narrow:   900px;

  /* --- קו הדלק --- */
  --tbs-rail-w:      2px;
  --tbs-rail-inset:  clamp(1.25rem, 4.2vw, 4.25rem);
  --tbs-rail-dim:    rgba(234, 241, 248, 0.16);
  --tbs-rail-dim-on-light: rgba(6, 32, 56, 0.14);
  --tbs-rail-flow:   var(--tbs-yellow);
  --tbs-rail-node:   10px;

  /* --- רדיוסים --- */
  --tbs-r-card: 16px;
  --tbs-r-media: 14px;
  --tbs-r-sm:   9px;
  --tbs-r-pill: 999px;

  /* --- תנועה ---
     סקאלת זמנים אחת לכל העמוד. אין ערכי זמן שרירותיים בקבצי הסקשנים.
     הכלל: UI מתחת ל-300ms. hover הוא אינטראקציה של עשרות פעמים ביום
     ולכן מהיר וכמעט בלתי מורגש; רק חשיפות בגלילה מקבלות זמן ארוך. */
  --tbs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tbs-ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  --tbs-dur-press: 120ms;   /* לחיצה — פידבק מיידי */
  --tbs-dur-fast:  200ms;   /* hover, צבע, פוקוס */
  --tbs-dur-base:  260ms;   /* מעברי רכיב */
  --tbs-dur-chrome: 320ms;  /* כותרת, מגירה */
  --tbs-dur-reveal: 700ms;  /* חשיפה בגלילה — לא UI, מותר ארוך */
  --tbs-dur-slow:  900ms;

  /* --- z-index --- */
  --tbs-z-backdrop: 0;
  --tbs-z-content:  2;
  /* ⚠️ הפס היה ב-1, כלומר *מתחת* לתוכן — ולכן נעלם מעל כל פרק שיש לו
     רקע. הוא שכבת chrome, ומקומו מעל התוכן ומתחת לכותרת. */
  --tbs-z-rail:     60;
  --tbs-z-header:   80;
  --tbs-z-float:    90;
  --tbs-z-overlay:  100;

  /* גובה viewport יציב (מונע קפיצת URL bar ב-iOS) */
  --tbs-vh: 1svh;
}

/* ==========================================================================
   פרקים בהירים — היפוך הטוקנים הסמנטיים בלבד.
   שום רכיב לא בודק "אני בפרק בהיר?" — הוא פשוט קורא --tbs-ink.
   ========================================================================== */
.tbs-on-light {
  --tbs-ink:        var(--tbs-text-dark);
  --tbs-ink-muted:  var(--tbs-text-dark-muted);
  --tbs-ink-faint:  var(--tbs-text-dark-faint);
  --tbs-hairline:   var(--tbs-line-dark);
  --tbs-hairline-strong: var(--tbs-line-dark-strong);
  --tbs-rail-dim:   var(--tbs-rail-dim-on-light);
}
.tbs-on-dark {
  --tbs-ink:        var(--tbs-text);
  --tbs-ink-muted:  var(--tbs-text-muted);
  --tbs-ink-faint:  var(--tbs-text-faint);
  --tbs-hairline:   var(--tbs-line);
  --tbs-hairline-strong: var(--tbs-line-strong);
}
:root {
  --tbs-ink-muted: var(--tbs-text-muted);
  --tbs-ink-faint: var(--tbs-text-faint);
  --tbs-hairline:  var(--tbs-line);
  --tbs-hairline-strong: var(--tbs-line-strong);
}

/* דפדפנים ללא svh — נופלים ל-vh כדי שהמסלול הנעוץ לא יקרוס */
@supports not (height: 1svh) {
  :root { --tbs-vh: 1vh; }
}


/* ===== css/base.css ===== */
/* ==========================================================================
   base.css — reset, טיפוגרפיה, פרימיטיבים משותפים
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--tbs-font-he);
  font-size: var(--tbs-fs-body);
  line-height: var(--tbs-lh-body);
  color: var(--tbs-ink);
  background: var(--tbs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ⚠️ ספציפיות מכוונת: `a:any-link` = (0,1,1) לעומת `a` = (0,0,1).
   תבניות וורדפרס טוענות reset.css אחרינו עם `a { color: #cc3366 }` —
   תיקו עם השורה שמעל, וה-reset מנצח בזכות סדר הטעינה. התוצאה: כל קישור
   שלא הכריז על צבע בעצמו יצא ורוד. הכלל הזה סוגר את כל המשפחה בבת אחת,
   ולא רק את המקום שבו הבחנו בזה. */
a:any-link { color: inherit; }

:focus-visible {
  outline: 2px solid var(--tbs-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--tbs-yellow); color: var(--tbs-navy-deep); }

/* --- דילוג לתוכן --- */
.tbs-skip {
  /* fixed + transform ולא inset-inline-start שלילי: ב-RTL ערך שלילי
     מעיף את הקישור 10,000px ימינה ומסתמך על overflow כדי להסתיר אותו. */
  position: fixed;
  inset-inline-start: var(--tbs-s-4);
  top: var(--tbs-s-4);
  transform: translateY(-200%);
  z-index: var(--tbs-z-overlay);
  padding: var(--tbs-s-3) var(--tbs-s-5);
  background: var(--tbs-yellow);
  color: var(--tbs-navy-deep);
  border-radius: var(--tbs-r-pill);
  font-weight: 700;
}
.tbs-skip:focus { transform: none; }

/* ==========================================================================
   פרימיטיבים
   ========================================================================== */

.tbs-chapter {
  position: relative;
  z-index: var(--tbs-z-content);
  padding-block: var(--tbs-chapter-pad);
  color: var(--tbs-ink);
}

.tbs-wrap {
  width: 100%;
  max-width: var(--tbs-maxw);
  margin-inline: auto;
  padding-inline: var(--tbs-gutter);
}
.tbs-wrap--narrow { max-width: var(--tbs-maxw-narrow); }

/* --- overline מונו (LTR island בתוך מסמך RTL) ---
   ⚠️ justify-self: start חיוני, לא קוסמטי.
   כשה-overline הוא grid item, ה-display שלו מבוקלץ מ-inline-flex ל-flex
   והתיבה נמתחת לכל רוחב העמודה. מכיוון שהתוכן שלו dir="ltr", הוא נדחף
   לקצה השמאלי של תיבה רחבה — ואז הכיתוב נראה מנותק מהכותרת שמעליה הוא
   אמור לשבת. בסקשנים שזורמים כ-block זה לא קרה, ולכן ההתנהגות הייתה
   לא עקבית בין הסקשנים. start מכריח shrink-to-fit בכל הקשר. */
.tbs-overline {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--tbs-s-3);
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-mono);
  font-weight: 500;
  letter-spacing: var(--tbs-ls-mono);
  text-transform: uppercase;
  color: var(--tbs-ink-faint);
}
.tbs-overline[dir='ltr'] { direction: ltr; }
.tbs-overline::before {
  content: '';
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* --- כותרות --- */
.tbs-h2 {
  font-size: var(--tbs-fs-h2);
  font-weight: 900;
  line-height: var(--tbs-lh-display);
  letter-spacing: var(--tbs-ls-display);
  text-wrap: balance;
}
.tbs-h3 {
  font-size: var(--tbs-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.tbs-lead {
  font-size: var(--tbs-fs-lead);
  line-height: 1.62;
  color: var(--tbs-ink-muted);
  max-width: var(--tbs-measure);
}
.tbs-body { color: var(--tbs-ink-muted); max-width: var(--tbs-measure); }

/* מילה מודגשת בכותרת */
.tbs-accent { color: var(--tbs-yellow); font-style: normal; }
.tbs-on-light .tbs-accent { color: var(--tbs-green-deep); }

/* --- מספרים וטלפון: LTR island --- */
.tbs-num, .tbs-tel { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================================
   כפתורים
   ========================================================================== */
.tbs-btn {
  --btn-bg: var(--tbs-yellow);
  --btn-fg: var(--tbs-navy-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tbs-s-3);
  padding: 0.95em 1.7em;
  border-radius: var(--tbs-r-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--tbs-fs-small);
  letter-spacing: -0.005em;
  white-space: nowrap;
  /* transform ו-opacity בלבד — שניהם על ה-GPU ולא מפעילים layout */
  transition: transform var(--tbs-dur-press) var(--tbs-ease-out),
              box-shadow var(--tbs-dur-fast) var(--tbs-ease-out),
              background-color var(--tbs-dur-fast) var(--tbs-ease-out);
}

/* ⚠️ ספציפיות מוכפלת בכוונה — הגנה מפני reset של תבנית.
   תבניות וורדפרס נפוצות טוענות reset.css עם:
       [type="submit"]        { background: transparent; color: #cc3366;
                                border: 1px solid #cc3366; border-radius: 3px }
       [type="submit"]:focus  { background: #cc3366; color: #fff }
   ‏[type="submit"] הוא (0,1,0) — *תיקו* עם .tbs-btn, וה-reset נטען אחרינו
   ולכן ניצח: כפתור השליחה יצא ורוד עם מסגרת ורודה במקום צהוב.
   הכפלת הקלאס נותנת (0,2,0), והמצבים (0,3,0) — מעל [type="submit"]:focus
   שהוא (0,2,0). הצבעים עצמם ממשיכים לזרום מהמשתנים, ולכן ghost ו-green
   ממשיכים לעבוד בדיוק כמו קודם. */
.tbs-btn.tbs-btn {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--tbs-r-pill);
  text-decoration: none;
}
.tbs-btn.tbs-btn:hover,
.tbs-btn.tbs-btn:focus,
.tbs-btn.tbs-btn:focus-visible,
.tbs-btn.tbs-btn:active {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border-color: transparent;
}

/* לחיצה קודמת ל-hover בקוד ובחשיבות: זה הפידבק היחיד שקיים במגע.
   מגיב על pointer-down, לא על שחרור. */
.tbs-btn:active { transform: scale(0.97); }

.tbs-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tbs-ink);
  box-shadow: inset 0 0 0 1px var(--tbs-hairline-strong);
}
.tbs-btn--green { --btn-bg: var(--tbs-green); --btn-fg: #fff; }

.tbs-btn__arrow {
  inline-size: 1em; block-size: 1em; flex: none;
  transition: transform var(--tbs-dur-fast) var(--tbs-ease-out);
}

/* hover רק במצביע אמיתי — במגע hover נתקע דלוק אחרי נגיעה */
@media (hover: hover) and (pointer: fine) {
  .tbs-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgb(246 219 42 / 0.6); }
  .tbs-btn:hover:active { transform: translateY(-1px) scale(0.98); }
  .tbs-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--tbs-ink), 0 10px 26px -16px rgb(0 0 0 / 0.5); }
  .tbs-btn--green:hover { box-shadow: 0 10px 30px -12px rgb(48 150 76 / 0.65); }
  .tbs-btn:hover .tbs-btn__arrow { transform: translateX(0.25em); }
  [dir='rtl'] .tbs-btn:hover .tbs-btn__arrow { transform: translateX(-0.25em); }
}

/* ==========================================================================
   מדיה
   ========================================================================== */
.tbs-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--tbs-r-media);
  background: var(--tbs-navy-deep);
  isolation: isolate;
}
/* ⚠️ ספציפיות מכוונת: `figure.tbs-media img` = (0,1,2).
   הכלל הקודם היה `.tbs-media img` = (0,1,1), שזה *תיקו* עם
   `.elementor img { height: auto }` של אלמנטור — ובתיקו מנצח מי שנטען
   אחרון. באתר החי אלמנטור נטען אחרינו, ולכן התמונות קיבלו גובה טבעי,
   object-fit לא היה לו מה לחתוך, ורקע המסגרת הכהה נחשף בתחתית.
   כל תמונה שיחסה רחב מהמסגרת הראתה את הפער. */
figure.tbs-media img,
.tbs-media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* בעבר היה כאן גרדיאנט שהכהה את תחתית התמונות. הוא נועד לקריאות טקסט
   שיושב על התמונה — אבל בכרטיסים ובהצהרה הטקסט יושב *מתחת* לתמונה,
   ולכן הוא רק הכהה את הצילום בלי לשרת שום דבר. הוסר. */

/* ==========================================================================
   reveal בגלילה — מצב טרום-אנימציה קיים רק כשה-gate פעיל
   ========================================================================== */
.tbs-reveal { opacity: 1; }
html.tbs-anim .tbs-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--tbs-dur-reveal) var(--tbs-ease-out),
              transform var(--tbs-dur-reveal) var(--tbs-ease-out);
  transition-delay: var(--tbs-delay, 0ms);
}
html.tbs-anim .tbs-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.tbs-anim .tbs-reveal { opacity: 1; transform: none; transition: none; }
}

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


/* ===== css/sections/backdrop.css ===== */
/* ==========================================================================
   backdrop.css — מערכת הרקע הרציפה + קו הדלק
   זהו המנגנון שמבטל את קווי החיתוך בין פרקים:
   שכבה קבועה אחת שצבעה מתחלף בהדרגה לפי הגלילה.
   ========================================================================== */

.tbs-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--tbs-z-backdrop);
  pointer-events: none;
  background-color: var(--tbs-backdrop);
  transition: background-color 120ms linear;
}

/* הילה רכה שנעה עם הגלילה — נותנת עומק בלי לצייר גבול */
.tbs-backdrop__tint {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 45% at 78% calc(var(--tbs-scroll-y, 0) * -18% + 24%),
      rgb(48 150 76 / 0.16), transparent 68%),
    radial-gradient(52% 40% at 16% calc(var(--tbs-scroll-y, 0) * 22% + 62%),
      rgb(13 74 137 / 0.24), transparent 70%);
  opacity: var(--tbs-tint-opacity, 1);
  /* על רקע בהיר ההילות מלכלכות — הערך מונמך דינמית ב-backdrop.js */
  transition: opacity 400ms var(--tbs-ease-out);
  will-change: opacity;
}

/* גרעין עדין — נותן לרקעים השטוחים מרקם */
.tbs-backdrop__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   קו הדלק — הקו הרציף שרץ לאורך כל העמוד
   ========================================================================== */
.tbs-rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: var(--tbs-rail-inset);
  inline-size: var(--tbs-rail-w);
  z-index: var(--tbs-z-rail);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--tbs-ease-out);
}
html.tbs-anim .tbs-rail.is-on { opacity: 1; }

.tbs-rail__track {
  position: absolute;
  inset: 0;
  background: var(--tbs-rail-dim);
  transition: background-color 400ms var(--tbs-ease-out);
}

/* פולס האנרגיה — מיקומו נגזר מהתקדמות הגלילה */
.tbs-rail__flow {
  position: absolute;
  inset-inline: 0;
  block-size: 26vh;
  top: calc(var(--tbs-rail-pos, 0) * 100% - 13vh);
  background: linear-gradient(180deg,
    transparent 0%,
    var(--tbs-green-bright) 22%,
    var(--tbs-yellow) 50%,
    var(--tbs-green-bright) 78%,
    transparent 100%);
  filter: blur(0.5px);
  opacity: 0.9;
  will-change: top;
}

@media (max-width: 780px) {
  .tbs-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tbs-rail__flow { display: none; }
  .tbs-backdrop { transition: none; }
}


/* ===== css/sections/header.css ===== */
/* ==========================================================================
   header.css — כותרת צפה + מגירת מובייל
   ========================================================================== */

.tbs-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--tbs-z-header);
  color: var(--tbs-text);
  transition: background-color var(--tbs-dur-chrome) var(--tbs-ease-out),
              backdrop-filter var(--tbs-dur-chrome) var(--tbs-ease-out),
              box-shadow var(--tbs-dur-chrome) var(--tbs-ease-out);
}

/* מצב "מוצמד" — נכנס אחרי שעוברים את ה-hero */
/* חומר שקוף שהתוכן נגלל מתחתיו, ולא פס אטום שגוזל רצועה קבועה */
.tbs-header.is-stuck {
  background: rgb(2 7 13 / 0.66);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}
/* קצה גלילה מרוכך ולא קו מפריד חד — הקו החד קורא כמו תפר */
.tbs-header.is-stuck::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(2 7 13 / 0.5), transparent);
}

/* מוסתר בגלילה למטה, חוזר בגלילה למעלה */
.tbs-header.is-hidden { transform: translateY(-102%); }
.tbs-header { transition-property: background-color, backdrop-filter, box-shadow, transform; }

.tbs-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tbs-s-5);
  max-width: var(--tbs-maxw);
  margin-inline: auto;
  padding: clamp(0.75rem, 1.6vh, 1.15rem) var(--tbs-gutter);
}

/* --- מותג --- */
.tbs-header__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.2vw, 0.95rem);
  flex: none;
}
/* אזור נגיעה של 44px ללוגו */
.tbs-header__brand::before {
  content: '';
  position: absolute;
  inset: -9px -6px;
}
/* ⚠️ ספציפיות מוכפלת בכוונה.
   אלמנטור טוען `.elementor img { height: auto; max-width: 100% }` שהוא
   (0,1,1) — גובר על סלקטור קלאס בודד (0,1,0). בהדר זה לא הורגש רק כי
   ה-JS מעביר אותו ל-<body>, מחוץ ל-.elementor; בפוטר הלוגו של דור אלון
   נשאר בגודל הטבעי שלו, 240x363. הכפלת הקלאס נותנת (0,2,0) וסוגרת את זה
   בשני המקומות, גם אם ה-portal לא ירוץ.

   הוורדמארק של נחמיה הוא 6.2:1 וכולל את שורת הטאגליין; המארק של דור אלון
   הוא פורטרט 0.66:1. לכל אחד גובה משלו, אחרת אחד מהם נראה ענק. */
.tbs-header__logo.tbs-header__logo { inline-size: auto; }
.tbs-header__logo--nehemia.tbs-header__logo--nehemia { block-size: clamp(28px, 3.1vw, 38px); }
.tbs-header__logo--dor.tbs-header__logo--dor         { block-size: clamp(30px, 3.4vw, 42px); }
.tbs-header__divider {
  inline-size: 1px;
  block-size: clamp(20px, 2.4vw, 30px);
  background: rgb(234 241 248 / 0.28);
}

/* --- ניווט --- */
.tbs-header__nav { margin-inline-start: auto; }
.tbs-header__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.tbs-header__link {
  position: relative;
  font-size: var(--tbs-fs-small);
  font-weight: 500;
  color: rgb(234 241 248 / 0.78);
  padding-block: 0.35rem;
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out);
}
.tbs-header__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--tbs-yellow);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out);
}
.tbs-header__link.is-current::after { transform: scaleX(1); transform-origin: inline-start; }
.tbs-header__link.is-current { color: var(--tbs-white); }

@media (hover: hover) and (pointer: fine) {
  .tbs-header__link:hover { color: var(--tbs-white); }
  .tbs-header__link:hover::after { transform: scaleX(1); transform-origin: inline-start; }
}

/* --- פעולות --- */
.tbs-header__actions { display: flex; align-items: center; gap: var(--tbs-s-4); flex: none; }
.tbs-header__tel {
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-small);
  font-weight: 500;
  color: rgb(234 241 248 / 0.8);
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tbs-header__tel:hover { color: var(--tbs-yellow); }
}
.tbs-header__cta { padding: 0.72em 1.35em; }

/* --- המבורגר --- */
.tbs-header__burger {
  display: none;
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--tbs-r-sm);
  margin-inline-end: -8px;
}
.tbs-header__burger span {
  position: absolute;
  inset-inline: 11px;
  block-size: 2px;
  /* צבע מפורש ולא currentColor: ה-reset של התבנית מציב color: #cc3366
     על כל button, ו-currentColor היה יורש אותו והופך את הפסים לוורודים. */
  background-color: var(--tbs-yellow);
  border-radius: 2px;
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out), opacity var(--tbs-dur-fast) linear;
}
.tbs-header__burger span:nth-child(1) { top: 17px; }
.tbs-header__burger span:nth-child(2) { top: 25px; }
.tbs-header__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.tbs-header__burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ⚠️ ספציפיות מוכפלת בכוונה — הגנה מפני reset של תבנית.
   התבנית טוענת reset.css אחרינו עם:
       [type="button"], [type="submit"], button
         { background: transparent; border: 1px solid #cc3366; color: #cc3366;
           display: inline-block; padding: 0.5rem 1rem; border-radius: 3px }
       button:hover, button:focus { background: #cc3366; color: #fff }
   שלוש תקלות נבעו מזה בבת אחת:
     1. display: inline-block דרס את display: none — ההמבורגר הופיע בדסקטופ.
     2. color: #cc3366 הפך את הפסים לוורודים, ו-:hover/:focus צבעו את כל
        הכפתור בוורוד מלא.
     3. padding: 0.5rem 1rem רימס את הפסים מ-22px ל-10px, כי הם
        ממוקמים absolute ביחס לתיבת ה-padding.
     4. width: auto (מהכלל הראשון של ה-reset) איפס את הרוחב ל-0 —
        הכפתור הוא flex item בלי תוכן בזרימה, כי הפסים absolute.
   ‏(0,2,0) גובר על (0,1,0), והמצבים ב-(0,3,0) גוברים על button:hover
   שהוא (0,1,1). */
.tbs-header__burger.tbs-header__burger {
  display: none;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--tbs-r-sm);
  background-color: transparent;
  color: var(--tbs-yellow);
}
.tbs-header__burger.tbs-header__burger:hover,
.tbs-header__burger.tbs-header__burger:focus,
.tbs-header__burger.tbs-header__burger:focus-visible,
.tbs-header__burger.tbs-header__burger:active {
  background-color: transparent;
  color: var(--tbs-yellow);
}

/* ==========================================================================
   מגירת מובייל
   ========================================================================== */
.tbs-drawer {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  padding: calc(clamp(3.6rem, 9vh, 5rem) + env(safe-area-inset-top)) var(--tbs-gutter) var(--tbs-s-7);
  background: rgb(4 18 31 / 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: -1;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--tbs-dur-chrome) var(--tbs-ease-out), visibility 0s linear var(--tbs-dur-chrome);
}
.tbs-drawer[hidden] { display: none; }
.tbs-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--tbs-dur-chrome) var(--tbs-ease-out), visibility 0s linear 0s;
}

.tbs-drawer__list { display: grid; gap: var(--tbs-s-2); margin-block-end: var(--tbs-s-6); }
.tbs-drawer__list a {
  display: block;
  padding-block: var(--tbs-s-3);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tbs-text);
  border-block-end: 1px solid rgb(234 241 248 / 0.1);
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out),
              transform var(--tbs-dur-press) var(--tbs-ease-out);
  transform-origin: inline-start;
}
.tbs-drawer__list a:active { color: var(--tbs-yellow); transform: scale(0.985); }
.tbs-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tbs-s-3); }
.tbs-drawer__foot .tbs-btn { inline-size: 100%; }

@media (max-width: 900px) {
  .tbs-header__nav,
  .tbs-header__tel { display: none; }
  .tbs-header__burger.tbs-header__burger { display: block; }
  .tbs-header__cta { display: none; }
  .tbs-header__actions { margin-inline-start: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tbs-header, .tbs-drawer { transition: none; }
  .tbs-drawer__list a:active, .tbs-float.is-on:active { transform: none; }
  .tbs-float { transition: opacity var(--tbs-dur-fast) linear; transform: none; }
}

/* ==========================================================================
   כפתור וואטסאפ צף
   ========================================================================== */
.tbs-float {
  position: fixed;
  inset-block-end: max(1.15rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.15rem;
  z-index: var(--tbs-z-float);
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--tbs-r-pill);
  background: #25d366;
  color: #062038;
  box-shadow: 0 12px 32px -10px rgb(37 211 102 / 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--tbs-dur-chrome) var(--tbs-ease-out),
              transform var(--tbs-dur-chrome) var(--tbs-ease-out);
}
.tbs-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tbs-float svg { inline-size: 27px; block-size: 27px; }
.tbs-float.is-on:active { transform: scale(0.93); transition-duration: var(--tbs-dur-press); }

@media (hover: hover) and (pointer: fine) {
  .tbs-float.is-on:hover { transform: translateY(-2px); }
}


/* ===== css/sections/hero.css ===== */
/* ==========================================================================
   hero.css — רצף וידאו על canvas, מונע בגלילה.
   מבנה זהה לרפרנס: sizer ארוך · במה נעוצה 100svh · כותרת ממורכזת-תחתון.

   הטיפוגרפיה מיושרת למה שנמדד באתר הרפרנס:
     font-weight 400 (לא 900) · גדול מאוד · line-height ~1.0 · ממורכז.
   דווקא המשקל הדק בגודל ענק הוא מה שנותן את התחושה היוקרתית שלהם.
   ========================================================================== */

.tbs-hero {
  position: relative;
  z-index: var(--tbs-z-content);
  overflow: clip;
  --tbs-hero-focus: 50% 50%;
  --tbs-hero-fit: cover;   /* נקרא ע"י hero.js לחישוב הציור ל-canvas */
  --tbs-hero-zoom: 1;      /* מקדם הגדלה מעל ה-fit. דסקטופ נשאר 1 */
  --tbs-hero-track: 0;     /* 1 = המוקד האופקי עוקב אחרי המשאית */
}

.tbs-hero__sizer {
  position: relative;
  block-size: calc(var(--tbs-vh) * var(--tbs-hero-units, 450));
}

.tbs-hero__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: calc(var(--tbs-vh) * 100);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #02070d;
}

/* ==========================================================================
   שכבת המדיה
   פוסטר → canvas → וידאו-מקור.
   הפוסטר תמיד שם. ה-canvas עולה עליו רק כשהפריים הראשון צויר.
   ========================================================================== */
.tbs-hero__media { position: absolute; inset: 0; background: #02070d; }

.tbs-hero__media .tbs-hero__poster,
.tbs-hero__media .tbs-hero__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--tbs-hero-focus);
}

.tbs-hero__poster {
  z-index: 1;
  transition: opacity 500ms var(--tbs-ease-out);
}
/* ברגע שהקנבס צייר פריים — הפוסטר יורד. שתי שכבות גלויות בו-זמנית הן
   מה שיצר את "המסך המפוצל" במובייל כשההתאמה שלהן לא הסכימה. */
.tbs-hero.is-ready .tbs-hero__poster { opacity: 0; }

.tbs-hero__canvas {
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms var(--tbs-ease-out);
}
.tbs-hero.is-ready .tbs-hero__canvas { opacity: 1; }

/* ==========================================================================
   שכבת קריאות
   ========================================================================== */
.tbs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg,
      rgb(2 7 13 / 0.72) 0%,
      rgb(2 7 13 / 0.18) 22%,
      rgb(2 7 13 / 0.10) 42%,
      rgb(2 7 13 / 0.62) 78%,
      rgb(2 7 13 / 0.88) 100%),
    radial-gradient(130% 65% at 50% 112%, rgb(2 7 13 / 0.7), transparent 68%);
}

/* ==========================================================================
   הכותרת
   ========================================================================== */
.tbs-hero__content {
  position: relative;
  z-index: 4;
  inline-size: min(92vw, 1500px);
  padding-block-end: clamp(6rem, 16vh, 11rem);
  text-align: center;
  color: var(--tbs-white);
}

.tbs-hero__title {
  position: relative;
  display: grid;
  /* גדול ודק — כמו הרפרנס. 8.5rem = 136px בקצה העליון. */
  font-size: clamp(2.1rem, 5.6vw, 8.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgb(2 7 13 / 0.6);
}

/* ברירת מחדל — ללא JS: שלושת המשפטים זה מתחת לזה, כולם קריאים */
.tbs-hero__title { gap: 0.14em; }
.tbs-hero__line  { grid-area: auto; font-size: 0.6em; }

/* עם JS — מוערמים באותו מקום, אחד פעיל בכל רגע */
html.tbs-anim .tbs-hero__title { gap: 0; }
html.tbs-anim .tbs-hero__line {
  grid-area: 1 / 1;
  align-self: end;
  font-size: 1em;
  opacity: 1;
}
html.tbs-anim .tbs-hero__line:not(.is-active) { visibility: hidden; }

html.tbs-anim .tbs-hero__word {
  display: inline-block;
  white-space: nowrap;
}
html.tbs-anim .tbs-hero__char {
  opacity: 0;
  transition: opacity 260ms linear;
  will-change: opacity;
}
html.tbs-anim .tbs-hero__char.is-lit { opacity: 1; }

/* ==========================================================================
   HUD תחתון — overline, מחוון התקדמות, רמז גלילה
   ========================================================================== */
.tbs-hero__hud {
  position: absolute;
  inset-block-end: clamp(1.2rem, 3.2vh, 2.4rem);
  inset-inline: var(--tbs-gutter);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--tbs-s-5);
  color: rgb(255 255 255 / 0.5);
}

.tbs-hero__overline { color: rgb(255 255 255 / 0.55); flex: none; margin: 0; }
.tbs-hero__overline::before { background: var(--tbs-yellow); opacity: 1; }

/* מחוון דק אחד במקום שלושה טיקים — קרוב יותר לשפה של הרפרנס */
.tbs-hero__bar {
  position: relative;
  flex: 1;
  block-size: 1px;
  background: rgb(255 255 255 / 0.16);
  overflow: hidden;
}
.tbs-hero__bar span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  background: var(--tbs-yellow);
  transform: scaleX(var(--tbs-hero-progress, 0));
  transform-origin: inline-start;
}

.tbs-hero__scrollcue {
  direction: ltr;
  flex: none;
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-mono);
  letter-spacing: var(--tbs-ls-mono);
  animation: tbs-cue 2.6s var(--tbs-ease-io) infinite;
}
@keyframes tbs-cue { 0%,100% { opacity: 0.3; } 50% { opacity: 0.85; } }

/* הרמז נעלם ברגע שגוללים — הוא מיותר משם והתנגש בכפתור הצף */
.tbs-hero.is-scrolled .tbs-hero__scrollcue {
  opacity: 0;
  animation: none;
  transition: opacity 300ms var(--tbs-ease-out);
  pointer-events: none;
}

/* ==========================================================================
   מובייל
   גם כאן יש scrub — רצף פריימים לא מבצע seek ולכן חלק גם ב-iOS.
   רק סט פריימים קטן וקל יותר, ו-contain במקום cover.
   ========================================================================== */
@media (max-width: 780px) {
  /* קרופ ל-9:19.5 מתוך מקור 16:9 מקרב יותר מדי ומאבד את הקומפוזיציה.
     מכיוון שקצות הפריים שחורים ממש, contain נראה כמו מסגרת קולנועית
     מכוונת ולא כמו פסים — הרקע והפריים מתמזגים. */
  /* contain לבד הכניס את כל הפריים ה-16:9 לתוך מסך פורטרט, והמשאית
     יצאה קטנה ורחוקה — בערך 26% מגובה המסך. הגדלה של פי 2 מעל ה-contain
     מכפילה את גודלה, וחותכת בעיקר את השחור בצדדים.
     המוקד האופקי עוקב אחרי המשאית (--tbs-hero-track), אחרת בתחילת הרצף
     היא נמצאת רחוק בצד והחיתוך היה מוציא אותה מהפריים.
     --tbs-hero-zoom הוא ה*מקסימום*: המשאית מתקרבת לאורך הרצף, ולכן
     data-frames-scale מקטין את ההגדלה בהדרגה עד כ-1.5 בסוף. בלי זה
     הפריימים האחרונים היו חותכים את המכלית משני הצדדים. */
  .tbs-hero {
    --tbs-hero-focus: 50% 40%;
    --tbs-hero-fit: contain;
    --tbs-hero-zoom: 2;
    --tbs-hero-track: 1;
  }
  .tbs-hero__poster { object-fit: cover; object-position: 52% 40%; }
  .tbs-hero__sizer { block-size: calc(var(--tbs-vh) * var(--tbs-hero-units-mobile, 380)); }
  .tbs-hero__content { inline-size: 92vw; padding-block-end: clamp(5.5rem, 15vh, 8rem); }
  .tbs-hero__title { line-height: 1.08; letter-spacing: -0.015em; }
  .tbs-hero__scrollcue { display: none; }

}

@media (prefers-reduced-motion: reduce) {
  .tbs-hero__canvas { transition: none; }
  .tbs-hero__scrollcue { animation: none; }

  /* בלי אנימציה אין רצף שחושף את שלושת המשפטים — מציגים אותם יחד */
  html.tbs-anim .tbs-hero__title { display: grid; gap: 0.14em; }
  html.tbs-anim .tbs-hero__line,
  html.tbs-anim .tbs-hero__line:not(.is-active) {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    font-size: 0.6em;
  }
  html.tbs-anim .tbs-hero__char { opacity: 1 !important; transition: none; }

  /* אין scrub — נשארים על הפוסטר */
  .tbs-hero__canvas { display: none; }
}

/* ==========================================================================
   מצב אדיטור אלמנטור — הקלאס מוחל בצד שרת בלבד.
   סקשן נעוץ ארוך אינו עריך, ולכן שם הוא נפרש לגובה מסך אחד
   וכל שלושת המשפטים מוצגים. ה-frontend לא מושפע.
   ========================================================================== */
.tbs-hero.tbs-editor-preview .tbs-hero__sizer { block-size: auto; }
.tbs-hero.tbs-editor-preview .tbs-hero__stage {
  position: relative;
  block-size: clamp(420px, 70vh, 760px);
}
.tbs-hero.tbs-editor-preview .tbs-hero__title { display: grid; gap: 0.14em; }
.tbs-hero.tbs-editor-preview .tbs-hero__line {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  font-size: 0.55em;
}
.tbs-hero.tbs-editor-preview .tbs-hero__canvas { display: none; }


/* ===== css/sections/panel.css ===== */
/* ==========================================================================
   panel.css — המשטח הבהיר והמפרידים

   שלושת הפרקים האמצעיים יושבים על משטח בהיר, ושני מפרידים עושים את
   המעבר אל הכהה וממנו — ולכן אין נקודה שבה אפשר להצביע ולומר
   "כאן נגמר סקשן וכאן מתחיל הבא".

   ⚠️ למה כל פרק נושא את המשטח שלו ולא סקשן עוטף אחד:
   הגרסה הקודמת דרשה להוסיף ידנית את הקלאס tbs-panel לסקשן באלמנטור.
   בפועל הקלאס לא נוסף, וכל האזור נשאר כהה עם טקסט כהה על כהה. משטח
   שכל ווידג'ט מביא בעצמו לא תלוי בשום שלב הרכבה — הוא פשוט עובד.

   ⚠️ למה המפרידים הם אלמנטים בזרימה ולא ::before/::after:
   פסאודו עם היסט שלילי מחוץ לגבולות הסקשן נחתך ע"י ה-overflow של
   העוטף באלמנטור ונעלם. אלמנט עם גובה משלו לא תלוי בזה.

   צורת הקצה מהונדסת ולא גל רך: מדף בשני האגפים ומגרעת מרובעת מעוגלת
   באמצע. זו השפה של הרפרנס — טכנית, לא אורגנית.
   ========================================================================== */

/* המשטח הבהיר. כל אחד משלושת הפרקים האמצעיים נושא אותו בעצמו.
   .tbs-panel נשמר כאליאס, למי שכן עוטף אותם בסקשן עם הקלאס. */
.tbs-on-panel,
.tbs-panel {
  position: relative;
  z-index: var(--tbs-z-content);
  /* הצבע מגיע מ---tbs-panel-bg בשורש, ולכן הפרקים והמפרידים לא יכולים
     להיפרד לצבעים שונים. הגדרת רקע לסקשן באלמנטור מגיעה בספציפיות
     גבוהה יותר ודורסת את השורה הזאת כמצופה. */
  background-color: var(--tbs-panel-bg);
  color: var(--tbs-ink);

  /* full-bleed: הצל נמתח לכל הרוחב וה-clip חותך רק אנכית.
     שתי בעיות נפתרות בכלל אחד:
       1. סקשן "boxed" באלמנטור היה מגביל את המשטח ל-1140px והשאיר
          פסים כהים בצדדים. הצל עובר את גבולות הקונטיינר.
       2. עיגול תת-פיקסלי בין שני פרקים סמוכים יצר חוט כהה בתפר.
          שני הפיקסלים האנכיים אוטמים אותו.
     הפרקים לא סמוכים ב-DOM של אלמנטור, ולכן סלקטור אחים לא היה עוזר. */
  box-shadow: 0 0 0 100vmax var(--tbs-panel-bg);
  clip-path: inset(-2px -100vmax);
}

/* ==========================================================================
   המפריד
   הרקע שקוף — הכהה של מערכת הרקע נראה דרכו. הצורה בצבע הלוח הבהיר.
   ========================================================================== */
.tbs-divider {
  position: relative;
  z-index: var(--tbs-z-content);
  display: block;
  block-size: var(--tbs-divider-h, clamp(44px, 5.6vw, 88px));
  line-height: 0;
  margin: 0;              /* מבטל margin שאלמנטור עשוי להוסיף */
  pointer-events: none;
}

.tbs-divider svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.tbs-divider path { fill: var(--tbs-panel-bg); }

/* צמוד ללוח, בלי חוט כהה שנחשף בין השניים */
.tbs-divider--to-light { margin-block-end: -1px; }
.tbs-divider--to-dark  { margin-block-start: -1px; }

/* ==========================================================================
   ריווח — הפרק הראשון צמוד למפריד העולה, האחרון מרווח לפני היורד.
   מוגדר על הפרקים עצמם, ולכן לא תלוי במבנה עוטפים.
   ========================================================================== */
.tbs-statement.tbs-on-panel { padding-block-start: clamp(1.5rem, 4vh, 3.5rem); }
.tbs-audience.tbs-on-panel  { padding-block-end: var(--tbs-chapter-pad-l); }

/* אם בכל זאת עוטפים בסקשן עם הקלאס — overflow חייב להישאר גלוי */
.tbs-panel.elementor-section,
.tbs-panel.e-con { overflow: visible; }


/* ===== css/sections/statement.css ===== */
/* ==========================================================================
   statement.css — הצהרת פתיחה
   הפרק הראשון אחרי ה-hero. יושב ישר מתחת ל-notch ולכן בלי padding עליון.
   ========================================================================== */

.tbs-statement {
  padding-block-end: var(--tbs-chapter-pad-l);
}

.tbs-statement__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    'head  media'
    'body  media';
  align-items: start;
  column-gap: clamp(2rem, 5vw, 5.5rem);
  row-gap: clamp(1.25rem, 3vh, 2.25rem);
}

.tbs-statement__head { grid-area: head; }
.tbs-statement__body { grid-area: body; display: grid; gap: var(--tbs-s-5); }
.tbs-statement__media { grid-area: media; aspect-ratio: 4 / 3; align-self: stretch; }

.tbs-statement__head .tbs-overline { margin-block-end: var(--tbs-s-4); }
.tbs-statement__title { max-width: 16ch; }

.tbs-statement__body strong {
  font-weight: 900;
  color: var(--tbs-ink);
}

/* קו קטן שמחבר את הפרק אל קו הדלק */
.tbs-statement__head::before {
  content: '';
  display: block;
  inline-size: clamp(28px, 4vw, 56px);
  block-size: 2px;
  background: var(--tbs-green);
  margin-block-end: var(--tbs-s-5);
}

@media (max-width: 900px) {
  .tbs-statement__wrap {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'media' 'body';
    row-gap: var(--tbs-s-6);
  }
  .tbs-statement__media { aspect-ratio: 16 / 10; }
  .tbs-statement__title { max-width: none; }
}


/* ===== css/sections/pillars.css ===== */
/* ==========================================================================
   pillars.css — CAPABILITIES: לוח נייבי בתוך הפרק הבהיר.

   למה כך: הפרק שמתחת (WHO IT'S FOR) הוא רשת סימטרית של שלושה כרטיסים עם
   תמונות גדולות. אם גם כאן הפריסה זהה, שני הפרקים נראים אותו דבר. לכן כאן
   הכל הפוך במכוון:
     · משטח כהה על גבי הרקע הבהיר — לא אותו משטח
     · פריסה א-סימטרית (הצהרה | רשימה) — לא שלוש עמודות שוות
     · שורות עם קו מפריד ותמונת-לוויין צרה — לא כרטיסים
   ========================================================================== */

.tbs-pillars { padding-block: var(--tbs-chapter-pad); }

/* ---------- הלוח ---------- */

.tbs-pillars__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4.5vw, 5rem);
  padding: clamp(1.75rem, 4vw, 4rem);
  border-radius: clamp(18px, 2.4vw, 30px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(13, 74, 137, 0.55) 0%, transparent 62%),
    linear-gradient(200deg, #062b52 0%, var(--tbs-navy-deep) 46%, #021324 100%);
  color: var(--tbs-ink);
  overflow: hidden;
}

/* קו הדגשה דק לאורך הקצה העליון — סימן של משטח מוגבה, לא מסגרת. */
.tbs-pillars__panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: clamp(1.75rem, 4vw, 4rem);
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--tbs-green-bright) 22%, var(--tbs-yellow) 78%, transparent);
  opacity: 0.75;
}

/* ---------- ההצהרה ---------- */

/* flex ולא grid: הלוקאפ נצמד לתחתית העמודה דרך margin אוטומטי, ולכן הוא
   מיושר לשורה השלישית של הרשימה במקום להשאיר חלל של 67px מתחתיו. */
.tbs-pillars__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--tbs-s-4);
}
/* ⚠️ ה-overline הוא inline-flex שהופך ל-flex כפריט פלקס, ואז נמתח לכל רוחב
   העמודה. זה בדיוק המקור לתקלה שבה הכיתוב "נזרק" שמאלה. flex-start כאן
   מצמיד את התיבה לתוכן שלה. */
.tbs-pillars__aside > .tbs-overline { align-self: flex-start; }
.tbs-pillars__aside .tbs-h2 { max-width: 18ch; }
.tbs-pillars__aside .tbs-lead {
  max-width: 44ch;
  color: var(--tbs-ink-muted);
}

.tbs-pillars__lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  margin-block-start: auto;
  padding-block-start: var(--tbs-s-5);
  border-block-start: 1px solid var(--tbs-hairline);
}
.tbs-pillars__logosep {
  flex: none;
  inline-size: 1px;
  block-size: 26px;
  background-color: var(--tbs-line-strong);
}
/* ⚠️ specificity כפול: `.elementor img { width:auto; height:auto }` נטען
   אחרי הפלאגין ומרסק את הלוגואים לגודל הקובץ (דור אלון: 240×363). */
.tbs-pillars__logo.tbs-pillars__logo {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  object-fit: contain;
}
.tbs-pillars__logo--nehemia.tbs-pillars__logo--nehemia { block-size: clamp(26px, 2.6vw, 34px); }
.tbs-pillars__logo--dor.tbs-pillars__logo--dor { block-size: clamp(28px, 2.9vw, 38px); }

/* ---------- הרשימה ---------- */

.tbs-pillars__list {
  display: grid;
  /* ההצהרה גבוהה מהרשימה. space-between פורש את שלוש השורות על כל גובה
     העמודה, כך שהמפרידים מתחלקים שווה ולא נשאר חלל מתחת לשורה השלישית. */
  align-content: space-between;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tbs-pillar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  border-block-start: 1px solid var(--tbs-hairline);
}
.tbs-pillar:first-child { border-block-start: 0; }

/* פס הדגשה שנפתח מהקצה הפנימי — במקום רקע שמשתנה, שקורא כלחיץ. */
.tbs-pillar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * clamp(1.75rem, 4vw, 4rem));
  inline-size: 3px;
  background-color: var(--tbs-yellow);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out);
}

.tbs-pillar__index {
  flex: none;
  min-inline-size: 2.4ch;
  font-family: var(--tbs-font-mono);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--tbs-green-bright);
  transition: color var(--tbs-dur-base) var(--tbs-ease-out);
}
/* דפדפנים בלי text-stroke: מספר ירוק מלא, לא מספר שקוף ובלתי נראה. */
@supports not ((-webkit-text-stroke: 1px red)) {
  .tbs-pillar__index { color: var(--tbs-green-bright); }
}

.tbs-pillar__body { display: grid; gap: var(--tbs-s-2); }
.tbs-pillar__title { color: var(--tbs-ink); font-size: var(--tbs-fs-h3); }
.tbs-pillar__text {
  color: var(--tbs-ink-muted);
  font-size: var(--tbs-fs-small);
  max-width: 40ch;
}

.tbs-pillar__media {
  flex: none;
  inline-size: clamp(84px, 10vw, 148px);
  aspect-ratio: 4 / 3;
  border-radius: var(--tbs-r-sm);
  overflow: hidden;
}
.tbs-pillar__media img {
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tbs-pillar:hover::after { transform: scaleY(1); }
  .tbs-pillar:hover .tbs-pillar__index { color: var(--tbs-green-bright); }
  .tbs-pillar:hover .tbs-pillar__media img { transform: scale(1.06); }
}

/* ---------- מובייל ---------- */

@media (max-width: 900px) {
  .tbs-pillars__panel { grid-template-columns: 1fr; }
  .tbs-pillars__aside .tbs-h2,
  .tbs-pillars__aside .tbs-lead { max-width: none; }
  .tbs-pillars__lockup { padding-block-start: var(--tbs-s-4); }

  /* ⭐ השורה נשארת שורה גם ברוחב טלפון: מספר · טקסט · תמונת-לוויין.
     הגרסה שפרשה את התמונה לרוחב מלא הפכה כל שורה לכרטיס בגובה 300px —
     כלומר בדיוק אותה תצוגה של הפרק שמתחת, מה שהיה מבטל את כל הפואנטה. */
  /* start ולא center: התמונה והמספר נקשרים לשורת הכותרת. במרכוז הכותרת
     "צפה" מעל התמונה והשורה נראית רופפת. */
  .tbs-pillar {
    align-items: start;
    gap: var(--tbs-s-3);
    padding-block: var(--tbs-s-5);
  }
  .tbs-pillar__index { font-size: 1.25rem; min-inline-size: 2.1ch; }
  .tbs-pillar__title { font-size: 1.125rem; }
  .tbs-pillar__text { max-width: none; font-size: 0.875rem; }
  .tbs-pillar__media { inline-size: 76px; }
  .tbs-pillar::after { inset-inline-start: calc(-1 * clamp(1.75rem, 4vw, 4rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .tbs-pillar::after,
  .tbs-pillar__index,
  .tbs-pillar__media img { transition: none; }
  .tbs-pillar:hover .tbs-pillar__media img { transform: none; }
}


/* ===== css/sections/audience.css ===== */
/* ==========================================================================
   audience.css — למי מתאים השירות (3 כרטיסים)
   ========================================================================== */

.tbs-audience { padding-block: var(--tbs-chapter-pad) var(--tbs-chapter-pad-l); }

.tbs-audience__head {
  display: grid;
  gap: var(--tbs-s-4);
  margin-block-end: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 46ch;
}

.tbs-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}

.tbs-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--tbs-r-card);
  background: rgb(255 255 255 / 0.62);
  box-shadow:
    inset 0 0 0 1px var(--tbs-hairline),
    0 22px 48px -34px rgb(6 32 56 / 0.5);
  overflow: hidden;
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out),
              box-shadow var(--tbs-dur-base) var(--tbs-ease-out);
}

/* פידבק לחיצה — הדבר היחיד שקיים במגע, ולכן הוא לא תלוי ב-hover */
.tbs-card:active { transform: scale(0.988); }

.tbs-card__media { aspect-ratio: 4 / 3; border-radius: 0; flex: none; }
.tbs-card__media img { transition: transform var(--tbs-dur-base) var(--tbs-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .tbs-card:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 0 0 1px var(--tbs-hairline-strong),
      0 34px 62px -36px rgb(6 32 56 / 0.55);
  }
  .tbs-card:hover:active { transform: translateY(-2px) scale(0.99); }
  .tbs-card:hover .tbs-card__media img { transform: scale(1.04); }
}

.tbs-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--tbs-s-3);
  padding: clamp(1.25rem, 2vw, 1.85rem);
  flex: 1;
}

.tbs-card__index {
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-mono);
  letter-spacing: var(--tbs-ls-mono);
  font-weight: 700;
  color: var(--tbs-green-deep);
}
.tbs-card__title { color: var(--tbs-ink); }
.tbs-card__text {
  color: var(--tbs-ink-muted);
  font-size: var(--tbs-fs-small);
  line-height: 1.68;
  flex: 1;
}

.tbs-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tbs-s-2);
  align-self: flex-start;
  margin-block-start: var(--tbs-s-2);
  font-weight: 700;
  font-size: var(--tbs-fs-small);
  color: var(--tbs-navy);
  padding-block-end: 3px;
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out);
}

/* הקו התחתון הוא פסאודו שנמתח מקצה ההתחלה — transform ולא box-shadow,
   וב-RTL הוא צומח ימינה→שמאלה בכיוון הקריאה. */
.tbs-card__cta::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--tbs-yellow);
  transform: scaleX(1);
  transform-origin: inline-start;
  transition: transform var(--tbs-dur-base) var(--tbs-ease-out),
              background-color var(--tbs-dur-fast) var(--tbs-ease-out);
}
.tbs-card__cta { position: relative; }

/* אזור נגיעה של 44px בלי לגעת בפריסה — פסאודו שקוף שמרחיב את השטח הלחיץ.
   הקו התחתון נשאר צמוד לטקסט; רק אזור המגע גדל. */
.tbs-card__cta::before {
  content: '';
  position: absolute;
  inset: -10px -8px;
}
.tbs-card__cta svg { inline-size: 15px; block-size: 15px; transition: transform var(--tbs-dur-fast) var(--tbs-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .tbs-card__cta:hover { color: var(--tbs-green-deep); }
  .tbs-card__cta:hover::after { background: var(--tbs-green); }
  [dir='rtl'] .tbs-card__cta:hover svg { transform: translateX(-4px); }
}

@media (max-width: 1000px) {
  .tbs-audience__grid { grid-template-columns: 1fr; gap: var(--tbs-s-5); }
  .tbs-card { flex-direction: row; align-items: stretch; }
  .tbs-card__media { aspect-ratio: auto; inline-size: 38%; min-block-size: 100%; }
  .tbs-card__body { inline-size: 62%; }
}
@media (max-width: 640px) {
  .tbs-card { flex-direction: column; }
  /* min-block-size נשאר מהברייקפוינט הקודם ומבטל את ה-aspect-ratio — חייבים לאפס */
  .tbs-card__media { inline-size: 100%; aspect-ratio: 16 / 10; min-block-size: 0; }
  .tbs-card__body { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* שומרים על שינויי צבע — הם עוזרים להבנה. מסירים תנועה בלבד. */
  .tbs-card, .tbs-card__media img, .tbs-card__cta::after { transition: none; }
  .tbs-card:active, .tbs-card:hover { transform: none; }
  .tbs-card:hover .tbs-card__media img { transform: none; }
}


/* ===== css/sections/fleet.css ===== */
/* ==========================================================================
   fleet.css — הצי / איך אנחנו מספקים את השירות
   הפרק שבו הרקע חוזר לכהה. תמונת רקע מלאה בפרלקסה עדינה.
   ========================================================================== */

.tbs-fleet {
  position: relative;
  padding-block: var(--tbs-chapter-pad-l);
  overflow: clip;
  isolation: isolate;
}

.tbs-fleet__bg {
  position: absolute;
  inset: -12% 0 -12% 0;
  z-index: -1;
  margin: 0;
}
figure.tbs-fleet__bg img,
.tbs-fleet__bg > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  opacity: 0.22;
  transform: translate3d(0, var(--tbs-parallax, 0px), 0);
  will-change: transform;
}
.tbs-fleet__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--tbs-backdrop) 0%,
      var(--tbs-backdrop) 14%,
      rgb(7 31 56 / 0.58) 34%,
      rgb(7 31 56 / 0.62) 64%,
      var(--tbs-backdrop) 88%,
      var(--tbs-backdrop) 100%);
}

/* עמודה ממורכזת. הבלוק עצמו כבר היה במרכז, אבל הפריטים שבתוכו היו
   מיושרים ל-start — כלומר נצמדו לקצה אחד שלו, מה שנראה כמו טקסט שנשפך
   הצידה במקום כמו הצהרה שעומדת במרכז הפרק. */
.tbs-fleet__wrap {
  display: grid;
  gap: var(--tbs-s-5);
  justify-items: center;
  text-align: center;
  /* ⚠️ .tbs-wrap נושא את שולי העמוד (--tbs-gutter) *בתוך* התיבה. 62ch נטו
     היו משאירים לתוכן 62ch פחות פעמיים גוטר — 414px במקום 558 — והכותרת
     נשברה לשלוש שורות. מוסיפים את השוליים לרוחב המקסימלי. */
  max-width: calc(62ch + var(--tbs-gutter) * 2);
  margin-inline: auto;
}
/* 19ch התאים לכותרת מיושרת לקצה; ממורכזת היא נשברה לעמודה צרה של שלוש
   שורות.
   ⚠️ text-wrap: wrap מבטל כאן את ה-balance ש-.tbs-h2 מקבל ב-base.css.
   balance משווה את אורכי השורות, ולכן העדיף שלוש שורות קצרות על פני
   השבירה הטבעית לשתיים — וגם כיווץ את התיבה לרוחב השורה הארוכה ביותר. */
.tbs-fleet__title {
  max-width: 24ch;
  text-wrap: wrap;
}
.tbs-fleet__lead { color: var(--tbs-text-muted); }

/* ה-overline הוא inline-flex ולכן נמתח כפריט גריד; בלי זה הוא היה
   מתיישר לקצה במקום להתמרכז מעל הכותרת. אותו תיקון כמו בפרק הסוגר. */
.tbs-fleet__wrap .tbs-overline { justify-self: center; }

.tbs-fleet__kicker {
  margin-block-start: var(--tbs-s-4);
  font-size: var(--tbs-fs-h3);
  font-weight: 700;
  color: var(--tbs-white);
  max-width: 22ch;
  line-height: 1.32;
}

.tbs-fleet__cta { margin-block-start: var(--tbs-s-2); }

@media (max-width: 780px) {
  .tbs-fleet__bg img { opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
  .tbs-fleet__bg img { transform: none; }
}


/* ===== css/sections/contact.css ===== */
/* ==========================================================================
   contact.css — טופס ליד
   ========================================================================== */

.tbs-contact { padding-block: var(--tbs-chapter-pad); }

.tbs-contact__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.tbs-contact__intro { display: grid; gap: var(--tbs-s-4); }
.tbs-contact__intro .tbs-h2 { max-width: 12ch; }

.tbs-contact__direct {
  display: grid;
  gap: var(--tbs-s-4);
  margin-block-start: var(--tbs-s-4);
  padding-block-start: var(--tbs-s-5);
  border-block-start: 1px solid var(--tbs-hairline);
}
.tbs-contact__direct li { display: grid; gap: 3px; }
.tbs-contact__label {
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-mono);
  letter-spacing: var(--tbs-ls-mono);
  text-transform: uppercase;
  color: rgb(234 241 248 / 0.55);
}
.tbs-contact__value {
  position: relative;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tbs-ink);
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out);
  justify-self: start;
}
/* אזור נגיעה של 44px בלי להזיז את הפריסה */
.tbs-contact__value::before {
  content: '';
  position: absolute;
  inset: -9px -10px;
}
@media (hover: hover) and (pointer: fine) {
  .tbs-contact__value:hover { color: var(--tbs-yellow); }
}
.tbs-contact__value:active { color: var(--tbs-yellow); }

/* --- הטופס --- */
.tbs-form {
  display: grid;
  gap: var(--tbs-s-4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--tbs-r-card);
  background: rgb(255 255 255 / 0.035);
  box-shadow: inset 0 0 0 1px var(--tbs-hairline);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tbs-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tbs-s-4);
}

.tbs-field { position: relative; display: grid; gap: var(--tbs-s-2); }
.tbs-field__label {
  font-size: var(--tbs-fs-small);
  font-weight: 500;
  color: var(--tbs-ink-muted);
}
.tbs-field__label em { color: var(--tbs-yellow); font-style: normal; }

.tbs-field__input {
  inline-size: 100%;
  padding: 0.9em 1em;
  font: inherit;
  /* ⚠️ 16px הוא רצפה, לא בחירה עיצובית: קלט קטן מזה גורם ל-iOS Safari
     לבצע זום אוטומטי על העמוד ברגע הפוקוס, וזה שובר את הפריסה. */
  font-size: max(16px, var(--tbs-fs-small));
  color: var(--tbs-ink);
  background: rgb(4 18 31 / 0.45);
  border: 1px solid var(--tbs-hairline);
  border-radius: var(--tbs-r-sm);
  transition: border-color var(--tbs-dur-fast) var(--tbs-ease-out),
              background-color var(--tbs-dur-fast) var(--tbs-ease-out),
              box-shadow var(--tbs-dur-fast) var(--tbs-ease-out);
}
.tbs-field__input:hover { border-color: var(--tbs-hairline-strong); }
.tbs-field__input::placeholder { color: var(--tbs-ink-faint); }
.tbs-field__input:focus {
  outline: none;
  border-color: var(--tbs-yellow);
  background: rgb(4 18 31 / 0.62);
  box-shadow: 0 0 0 3px rgb(246 219 42 / 0.16);
}
.tbs-field__input--area { resize: vertical; min-block-size: 5.5rem; }

.tbs-field.is-invalid .tbs-field__input { border-color: #ff7a6b; }

/* השגיאה יוצאת מהזרימה ויושבת בתוך המרווח שמתחת לשדה.
   שמירת מקום קבועה הייתה מונעת את הקפיצה אבל מבזבזת ~17px לכל שדה;
   absolute נותנת גם אפס קפיצה וגם אפס בזבוז. */
.tbs-field__error {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-block-start: 3px;
  font-size: 0.8125rem;
  line-height: 1.15;
  color: #ff9c90;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity var(--tbs-dur-fast) var(--tbs-ease-out),
              transform var(--tbs-dur-fast) var(--tbs-ease-out);
}
.tbs-field.is-invalid .tbs-field__error { opacity: 1; transform: none; }

/* הכפתור נמתח לכל רוחב הטופס. כפתור מכווץ בסוף טופס נקרא כהערה ולא
   כסיום התהליך, והוא גם יעד נגיעה קטן מדי במובייל.
   ⚠️ specificity כפול + inline-size מפורש: אלמנטור והתבנית מגדירים
   width: auto על [type="submit"] ונטענים אחרי הפלאגין, ו-justify-self
   לבדו היה נבלם שם. */
.tbs-form__submit.tbs-form__submit {
  justify-self: stretch;
  inline-size: 100%;
  margin-block-start: var(--tbs-s-2);
}
.tbs-form__submit[disabled] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--tbs-dur-fast) var(--tbs-ease-out);
}

.tbs-form__status {
  font-size: var(--tbs-fs-small);
  color: var(--tbs-ink-muted);
  min-block-size: 1.2em;
}
.tbs-form__status.is-ok { color: var(--tbs-green-bright); font-weight: 700; }
.tbs-form__status.is-err { color: #ff9c90; font-weight: 700; }

@media (max-width: 900px) {
  .tbs-contact__wrap { grid-template-columns: 1fr; }
  /* עמודה אחת: השגיאה יושבת במרווח שמתחת לשדה, ולכן המרווח גדל
     כדי שהיא לא תיצמד ללייבל של השדה הבא. */
  .tbs-form__row { grid-template-columns: 1fr; gap: var(--tbs-s-6); }
  .tbs-form { gap: var(--tbs-s-6); }
  .tbs-contact__intro .tbs-h2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* שינויי צבע נשארים — הם מעבירים מידע. תנועה יורדת. */
  .tbs-field__error { transform: none; transition: opacity var(--tbs-dur-fast) linear; }
  .tbs-field__input, .tbs-contact__value { transition: none; }
}

/* ה-honeypot מוסתר, אך גם לו גופן 16px כדי שאף דפדפן לא יתפוס אותו
   כשדה שמצדיק זום. */
.tbs-visually-hidden input { font-size: 16px; }


/* ===== css/sections/footer.css ===== */
/* ==========================================================================
   footer.css — CTA סוגר + פוטר
   ========================================================================== */

.tbs-closing {
  padding-block: var(--tbs-chapter-pad-l) var(--tbs-chapter-pad);
  text-align: center;
}
.tbs-closing__wrap { display: grid; gap: var(--tbs-s-4); justify-items: center; }
/* חריג יחיד ל-justify-self: start שב-base — הפרק הזה ממורכז בכוונה */
.tbs-closing__wrap .tbs-overline { justify-self: center; }

.tbs-closing__title {
  font-size: var(--tbs-fs-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: var(--tbs-ls-display);
  color: var(--tbs-white);
}
.tbs-closing__sub {
  font-size: var(--tbs-fs-lead);
  color: var(--tbs-text-muted);
}
.tbs-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tbs-s-3);
  justify-content: center;
  margin-block-start: var(--tbs-s-4);
}

/* ==========================================================================
   פוטר
   ========================================================================== */
.tbs-footer {
  position: relative;
  z-index: var(--tbs-z-content);
  color: var(--tbs-text);
  padding-block-start: var(--tbs-s-9);
}

.tbs-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block-end: var(--tbs-s-8);
  border-block-end: 1px solid var(--tbs-line);
}

.tbs-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tbs-s-3); }
/* ⚠️ ספציפיות מוכפלת — ראו ההסבר ב-header.css.
   כאן זה היה גלוי לעין: הלוגו של דור אלון רונדר 240x363, גובה טבעי מלא. */
.tbs-footer__brand img { inline-size: auto; }
.tbs-footer__logo--nehemia.tbs-footer__logo--nehemia { block-size: 33px; inline-size: auto; }
.tbs-footer__logo--dor.tbs-footer__logo--dor         { block-size: 38px; inline-size: auto; }
.tbs-footer__divider { inline-size: 1px; block-size: 28px; background: rgb(234 241 248 / 0.26); }
.tbs-footer__tagline {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--tbs-text-faint);
  margin-block-start: var(--tbs-s-1);
}

.tbs-footer__col dt {
  font-family: var(--tbs-font-mono);
  font-size: var(--tbs-fs-mono);
  letter-spacing: var(--tbs-ls-mono);
  text-transform: uppercase;
  color: rgb(234 241 248 / 0.52);
  margin-block-end: var(--tbs-s-3);
}
.tbs-footer__col dd {
  margin: 0 0 var(--tbs-s-2);
  font-size: var(--tbs-fs-small);
  color: var(--tbs-text-muted);
}
/* קישורי הפוטר קצרים מדי למגע — מרחיבים את אזור הנגיעה ל-44px
   בלי לשנות את הריווח הוויזואלי. */
.tbs-footer__col a, .tbs-footer__credit a { position: relative; }
.tbs-footer__col a::before, .tbs-footer__credit a::before {
  content: '';
  position: absolute;
  inset: -13px -10px;
}
/* צבע מפורש ולא הסתמכות על ירושה — כך פרטי הקשר זהים לשאר הפוטר
   גם אם התבנית תנסה לצבוע קישורים. הריחוף נשאר צהוב. */
.tbs-footer__col a,
.tbs-footer__credit a {
  color: var(--tbs-text-muted);
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out);
}
.tbs-footer__col a:active { color: var(--tbs-yellow); }
@media (hover: hover) and (pointer: fine) {
  .tbs-footer__col a:hover { color: var(--tbs-yellow); }
}

.tbs-footer__social { display: flex; gap: var(--tbs-s-3); }
.tbs-footer__social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--tbs-r-pill);
  color: var(--tbs-text-muted);
  box-shadow: inset 0 0 0 1px var(--tbs-line-strong);
  transition: color var(--tbs-dur-fast) var(--tbs-ease-out),
              background-color var(--tbs-dur-fast) var(--tbs-ease-out),
              box-shadow var(--tbs-dur-fast) var(--tbs-ease-out),
              transform var(--tbs-dur-press) var(--tbs-ease-out);
}
.tbs-footer__social a:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .tbs-footer__social a:hover {
    color: var(--tbs-navy-deep);
    background: var(--tbs-yellow);
    box-shadow: none;
    transform: translateY(-2px);
  }
}
.tbs-footer__social svg { inline-size: 19px; block-size: 19px; }

.tbs-footer__bar { padding-block: var(--tbs-s-5) calc(var(--tbs-s-6) + env(safe-area-inset-bottom)); }
.tbs-footer__barinner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tbs-s-3) var(--tbs-s-5);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--tbs-text-faint);
}
.tbs-footer__credit a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tbs-footer__credit a:hover { color: var(--tbs-yellow); }
}
.tbs-footer__credit a:active { color: var(--tbs-yellow); }

@media (max-width: 1000px) {
  .tbs-footer__inner { grid-template-columns: 1fr 1fr; }
  .tbs-footer__brand { grid-column: 1 / -1; }
  .tbs-footer__social { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .tbs-footer__inner { grid-template-columns: 1fr; }
  .tbs-closing__actions .tbs-btn { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tbs-footer__social a, .tbs-footer__col a { transition: color var(--tbs-dur-fast) linear; }
  .tbs-footer__social a:active, .tbs-footer__social a:hover { transform: none; }
}