/* ==================================================================
   ELI · 2026-09-23
   הפתיחה בעיצוב החדש — כותרת עריכותית גדולה בצד שמאל

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

.hero--v2 .wrap.hero__inner{
  max-width:1280px;
  padding-inline:20px;
}

.hero--v2 .hero__inner--v2{
  direction:ltr;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  inline-size:100%;
  padding-block-end:clamp(30px, 6vh, 74px);
}

.heroV{
  direction:rtl;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.2vh, 26px);
}

/* ---------- הכותרת ---------- */

.heroV__hl{
  margin:0;
  font-family:var(--font-display, 'Karantina', sans-serif);
  font-weight:700;
  line-height:.86;
  letter-spacing:0;
  font-size:clamp(56px, 15vw, 64px);
  text-wrap:balance;
  text-shadow:0 6px 40px rgba(0,0,0,.5);
}

.heroV__line{
  display:block;
  color:var(--c-plate, #F5EFE7);
}

.heroV__line--accent{ color:var(--c-orange, #F14B1C); }

/* ---------- הפסקה ---------- */

.heroV__lead{
  margin:0;
  max-width:520px;
  color:var(--c-plate, #F5EFE7);
  font-size:clamp(14px, 3.6vw, 15px);
  font-weight:var(--w-medium, 500);
  line-height:1.7;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* ---------- הכפתור ---------- */

.heroV__cta{
  --cta-cut:9px;

  display:inline-flex;
  align-items:stretch;
  block-size:44px;
  text-decoration:none;
  overflow:hidden;
  background:linear-gradient(135deg, #FF6A33 0%, var(--c-orange, #F14B1C) 52%, #D33E12 100%);
  clip-path:polygon(
    var(--cta-cut) 0,
    100% 0,
    100% calc(100% - var(--cta-cut)),
    calc(100% - var(--cta-cut)) 100%,
    0 100%,
    0 var(--cta-cut)
  );
  transition:transform .25s cubic-bezier(.2,.7,.3,1),
             filter .25s ease,
             box-shadow .25s ease;
}

.heroV__cta-label{
  display:flex;
  align-items:center;
  padding-inline:clamp(18px, 4.4vw, 26px);
  color:#FFFFFF;
  font-weight:var(--w-black, 900);
  font-size:clamp(.88rem, 3.4vw, .95rem);
  white-space:nowrap;
}

/* קוביית החץ — אחרונה בקוד, ולכן ב-RTL היא נוחתת בצד שמאל */
.heroV__cta-arrow{
  display:grid;
  place-items:center;
  inline-size:44px;
  flex:0 0 44px;
  background:var(--c-plate, #F5EFE7);
  color:var(--c-ink, #231F20);
}

.heroV__cta-arrow svg{
  inline-size:17px;
  block-size:17px;
  animation:beast-cta-nudge 2.4s ease-in-out infinite;
}

@keyframes beast-cta-nudge{
  0%, 100% { transform:translateX(0); }
  50%      { transform:translateX(-3px); }
}

.heroV__cta:hover,
.heroV__cta:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 10px 30px rgba(241,75,28,.36);
}

.heroV__cta:active{
  transform:translateY(0);
  box-shadow:none;
}

.heroV__cta:focus-visible{
  outline:2px solid var(--c-plate, #F5EFE7);
  outline-offset:3px;
}

/* ---------- חיפוי: שכבה עליונה קלה מתחת להדר ---------- */

/* הפסבדו-אלמנט זקוק לעוגן מיקום */
.hero--v2 .hero__media{ position:relative; }

.hero--v2 .hero__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(35,31,32,.62) 0%,
    rgba(35,31,32,.18) 22%,
    rgba(35,31,32,0)   42%);
}

/* ---------- טאבלט ---------- */

@media (min-width:601px){
  .heroV__hl{ font-size:clamp(64px, 10vw, 80px); }
}

/* ---------- מחשב: הגוש עובר שמאלה והטקסט מיושר לימין בתוכו ---------- */

@media (min-width:1001px){

  .hero--v2 .wrap.hero__inner{ padding-inline:32px; }

  .hero--v2 .hero__inner--v2{
    justify-content:flex-start;
    align-items:center;
    padding-block-end:0;
  }

  .heroV{
    align-items:flex-start;
    text-align:right;
    max-width:620px;
    gap:clamp(18px, 2vw, 30px);
  }

  .heroV__hl{ font-size:clamp(110px, 9.4vw, 140px); }

  .heroV__lead{ font-size:clamp(16px, 1.15vw, 18px); }

  .heroV__cta{ block-size:48px; }
  .heroV__cta-arrow{ inline-size:48px; flex-basis:48px; }

  /*
   * חיפוי מהצד השמאלי — הטקסט יושב שם, והקורקינט
   * שבצד ימין נשאר חשוף ועשיר. הערכים מתונים בכוונה
   * כדי שהתמונה לא תישטח לשחור.
   */
  /* הפסבדו-אלמנט זקוק לעוגן מיקום */
.hero--v2 .hero__media{ position:relative; }

.hero--v2 .hero__media::before{
    background:
      linear-gradient(to right,
        rgba(35,31,32,.90) 0%,
        rgba(35,31,32,.74) 26%,
        rgba(35,31,32,.38) 50%,
        rgba(35,31,32,.06) 72%,
        rgba(35,31,32,0)   100%),
      linear-gradient(to bottom,
        rgba(35,31,32,.55) 0%,
        rgba(35,31,32,.10) 20%,
        rgba(35,31,32,0)   38%);
  }
}

@media (prefers-reduced-motion: reduce){
  .heroV__cta,
  .heroV__cta-arrow svg{ animation:none; transition:none; }
  .heroV__cta:hover{ transform:none; }
}


/* ==================================================================
   hero-fullscreen

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

   גובה הרצועה חי במשתנה אחד, כדי שהחפיפה והריפוד
   שמפנה לה מקום לא יוכלו להיפרד.
   ================================================================== */

:root{ --stats-h:clamp(128px, 13vw, 160px); }

@media (max-width:380px){
  :root{ --stats-h:120px; }
}

.hero--v2{
  min-height:calc(100svh - var(--head-actual, 0px));
}

.stat{ min-block-size:var(--stats-h); }

.stats{ margin-block-start:calc(-1 * var(--stats-h)); }

/* התוכן מפנה מקום לרצועה שמונחת עליו */
.hero--v2 .hero__inner--v2{
  padding-block-end:calc(var(--stats-h) + clamp(18px, 3vh, 40px));
}

/* ---------- מחשב: הגוש בצד שמאל, הטקסט בתוכו ממורכז ---------- */

@media (min-width:1001px){

  .heroV{
    align-items:center;
    text-align:center;
  }

  .heroV__lead{ margin-inline:auto; }

  /*
   * הגוש ממורכז אנכית, ולכן ריפוד תחתון בגובה הרצועה
   * מעלה אותו בדיוק בחצי ממנו ומרכז אותו בחלל הפנוי.
   */
  .hero--v2 .hero__inner--v2{
    padding-block-end:var(--stats-h);
  }
}


/* ==================================================================
   hero-mobile-full + cta-one

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

/* ---------- 1. התמונה על כל המסך בנייד ---------- */

@media (max-width:1000px){

  .home .hero--v2{
    margin-block-start:calc(-1 * var(--head-actual, 0px));
    min-height:100svh;
  }

  .home .hero--v2 .hero__inner--v2{
    padding-block-start:var(--head-actual, 0px);
  }

  /* הראש שקוף מעל התמונה, עם הדרגה שמשאירה את הכיתוב קריא */
  .home .site-top{
    background:linear-gradient(to bottom,
      rgba(10,8,7,.88) 0%,
      rgba(10,8,7,.55) 62%,
      rgba(10,8,7,0)  100%);
    transition:background .28s ease;
  }

  .home .site-top .topbar{
    background:transparent;
    color:#FFFFFF;
    transition:background .28s ease, color .28s ease;
  }

  .home .site-top .site-header{
    background:transparent;
    transition:background .28s ease;
  }

  /* מרגע הגלילה הראשונה הראש חוזר לרקע האטום שלו */
  html.is-scrolled .home .site-top{ background:transparent; }

  html.is-scrolled .home .site-top .topbar{
    background:#FFFFFF;
    color:var(--c-ink, #231F20);
  }

  html.is-scrolled .home .site-top .site-header{
    background:var(--c-graphite, #231F20);
  }
}

/* ---------- 2. כפתור אחד, זהה בכל רוחב מסך ---------- */

.heroV__cta{
  --cta-cut:9px;
  block-size:46px;
}

.heroV__cta-label{
  padding-inline:26px;
  font-size:.95rem;
  letter-spacing:0;
}

.heroV__cta-arrow{
  inline-size:46px;
  flex:0 0 46px;
}

.heroV__cta-arrow svg{
  inline-size:18px;
  block-size:18px;
}

@media (min-width:1001px){
  .heroV__cta{ block-size:46px; }
  .heroV__cta-arrow{ inline-size:46px; flex-basis:46px; }
}


/* ==================================================================
   hero-full-bleed — 2026-09-23

   התמונה פרושה על כל המסך, מהקצה העליון (מתחת לראש השקוף) ועד
   רצועת הסטטיסטיקות, והטקסט יושב מעליה.

   תיקון: .hero__media קיבל קודם position:relative, מה שהוציא אותו
   משכבת הרקע והעמיד אותו ליד הטקסט במקום מאחוריו. כאן הוא חוזר
   להיות שכבה מוחלטת שממלאת את כל הפתיחה.
   ================================================================== */

.hero--v2{
  position:relative;
  display:flex;
  align-items:stretch;
}

.hero--v2 .hero__media{
  position:absolute !important;
  inset:0;
  z-index:0;
}

.hero--v2 .hero__media img,
.hero--v2 .hero__media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero--v2 .hero__inner--v2{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  margin-inline:auto;
}

/* מחשב: אותה התנהגות כמו בנייד — הפתיחה עולה אל מתחת לראש, והראש שקוף עד הגלילה */
@media (min-width:1001px){

  .home .hero--v2{
    margin-block-start:calc(-1 * var(--head-actual, 0px));
    min-height:100svh;
  }

  .home .hero--v2 .hero__inner--v2{
    padding-block-start:var(--head-actual, 0px);
  }

  .home .site-top{
    background:linear-gradient(to bottom,
      rgba(10,8,7,.80) 0%,
      rgba(10,8,7,.45) 62%,
      rgba(10,8,7,0)  100%);
    transition:background .28s ease;
  }

  .home .site-top .topbar{
    background:transparent;
    color:#FFFFFF;
    transition:background .28s ease, color .28s ease;
  }

  .home .site-top .site-header{
    background:transparent;
    transition:background .28s ease;
  }

  html.is-scrolled .home .site-top{ background:transparent; }

  html.is-scrolled .home .site-top .topbar{
    background:#FFFFFF;
    color:var(--c-ink, #231F20);
  }

  html.is-scrolled .home .site-top .site-header{
    background:var(--c-graphite, #231F20);
  }
}

/* ==================================================================
   desktop-air — 2026-10-04

   יותר אוויר בפתיחה במחשב:
   1. רצועת הסטטיסטיקות מוקטנת ב-65% (משתנה אחד: --stats-scale)
   2. הלוגו בצד ימין, כפתורי הקטגוריות באותה שורה מיושרים אליו —
      טקסט בלבד, ובריחוף מופיע הכפתור ונפתחת רשימת הסינון
   3. כותרת הפתיחה עוברת לצד ימין, מיושרת לקצה הלוגו
   4. כפתור החנות באותה קטימה כמו שאר הכפתורים באתר (5px)
   ================================================================== */

/* ---------- 4. קטימה זהה לשאר האתר, בכל רוחב ---------- */
.heroV__cta{ --cta-cut:5px; }

@media (min-width:1001px){

  /* ---------- 1. סטטיסטיקות ב-35% מהגודל הקודם ---------- */
  :root{
    --stats-scale:.35;
    --stats-h:calc(clamp(128px, 13vw, 160px) * var(--stats-scale));
  }

  .stats__band{ --cut:calc(clamp(9px, 1vw, 14px) * var(--stats-scale)); }

  .stat,
  .stat:not(.stat--1){
    padding-block:calc(clamp(12px, 1.5vw, 20px) * var(--stats-scale));
    padding-inline-start:calc(clamp(8px, 1.2vw, 18px) * var(--stats-scale));
    padding-inline-end:calc(var(--cut) + clamp(8px, 1.2vw, 18px) * var(--stats-scale));
    gap:calc(clamp(4px, .6vw, 9px) * var(--stats-scale));
  }

  .stat--4,
  .stat:last-child{
    padding-inline-end:calc(clamp(8px, 1.2vw, 18px) * var(--stats-scale));
  }

  .stat__row{ gap:calc(clamp(7px, 1vw, 14px) * var(--stats-scale)); }
  .stat__val{ font-size:calc(clamp(30px, 4.2vw, 60px) * var(--stats-scale)); }
  .stat__svg{
    inline-size:calc(clamp(24px, 2.6vw, 38px) * var(--stats-scale));
    block-size:calc(clamp(24px, 2.6vw, 38px) * var(--stats-scale));
  }
  /* רצפה של 10px כדי שהכיתוב יישאר קריא */
  .stat__lab{ font-size:max(10px, calc(clamp(9px, 1.1vw, 16px) * var(--stats-scale))); }


  /* ---------- 2. הדר: לוגו ימין, קטגוריות באותה שורה ---------- */

  /*
   * .site-header__bar הופך לשקוף לגריד (display:contents) והילדים שלו —
   * המבורגר, לוגו, חיפוש וסל — יושבים יחד עם שורת הקטגוריות על גריד אחד.
   * ב-RTL העמודה הראשונה היא הימנית: לוגו | קטגוריות | חיפוש+סל | המבורגר.
   */
  .site-header{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto auto;
    grid-template-rows:var(--header-h) auto;
    grid-template-areas:
      "logo nav actions toggle"
      "search search search search";
    align-items:center;
    column-gap:clamp(20px, 2.4vw, 44px);
    padding-inline:max(var(--gutter, 20px), calc((100% - 1580px) / 2));
  }

  .site-header__bar{ display:contents; }

  .site-header__bar > .site-logo{ grid-area:logo; justify-self:start; }
  .site-header__bar > .header-actions{ grid-area:actions; justify-self:end; }
  .site-header__bar > .nav-toggle{ grid-area:toggle; justify-self:end; }

  .site-header .site-search{ grid-area:search; }
  .site-header .site-search[hidden]{ display:none; }

  .site-header .pill-nav{
    grid-area:nav;
    min-inline-size:0;
    padding:0;
  }

  .site-header .pill-nav > .wrap{
    max-inline-size:none;
    margin:0;
    padding:0;
  }

  .site-header .pill-nav__list{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
    min-block-size:0;
    gap:clamp(2px, .5vw, 8px);
  }

  /* טקסט בלבד במנוחה — הכפתור מופיע בריחוף */
  .site-header .pill-nav__list a{
    padding:8px clamp(10px, 1vw, 15px);
    font-size:clamp(.82rem, .72rem + .2vw, .92rem);
    --edge-color:transparent;
    --fill-color:transparent;
  }

  .site-header .pill-nav__list > li:hover > a,
  .site-header .pill-nav__list > li:focus-within > a,
  .site-header .pill-nav__list a:focus-visible{
    --edge-color:#fff;
    --fill-color:var(--c-graphite);
  }

  /* המעבדה: כתום כטקסט, ובריחוף הכפתור הכתום */
  .site-header .pill-nav__list .menu-item--lab > a{
    color:var(--c-orange);
    --edge-color:transparent;
    --fill-color:transparent;
  }

  .site-header .pill-nav__list .menu-item--lab:hover > a,
  .site-header .pill-nav__list .menu-item--lab:focus-within > a{
    color:#fff;
    --edge-color:var(--c-orange);
    --fill-color:var(--c-orange);
  }

  /* הקטגוריה הפעילה נשארת כתומה, גם בלי כפתור */
  .site-header .pill-nav__list .current-menu-item > a{
    color:var(--c-orange);
    --edge-color:transparent;
    --fill-color:transparent;
  }

  .site-header .pill-nav__list .current-menu-item:hover > a{
    --edge-color:var(--c-orange);
    --fill-color:var(--c-graphite);
  }


  /* ---------- 3. כותרת הפתיחה בצד ימין, מיושרת לקצה הלוגו ---------- */

  .hero--v2 .wrap.hero__inner.hero__inner--v2{
    inline-size:calc(100% - 2 * var(--gutter, 20px));
    max-inline-size:1580px;
    padding-inline:0;
    margin-inline:auto;
    justify-content:flex-end;   /* העוטף ltr, ולכן flex-end הוא ימין */
  }

  .heroV{
    align-items:flex-start;     /* בגוש rtl, תחילת הציר הוא הצד הימני */
    text-align:right;
  }

  .heroV__lead{ margin-inline:0; }

  /* החיפוי מתהפך: כהה מצד ימין, מאחורי הטקסט */
  .hero--v2 .hero__media::before{
    background:
      linear-gradient(to left,
        rgba(35,31,32,.90) 0%,
        rgba(35,31,32,.74) 26%,
        rgba(35,31,32,.38) 50%,
        rgba(35,31,32,.06) 72%,
        rgba(35,31,32,0)   100%),
      linear-gradient(to bottom,
        rgba(35,31,32,.55) 0%,
        rgba(35,31,32,.10) 20%,
        rgba(35,31,32,0)   38%);
  }
}

@media (min-width:1500px){
  .site-header{ padding-inline:max(var(--gutter, 20px), calc((100% - 1720px) / 2)); }
  .hero--v2 .wrap.hero__inner.hero__inner--v2{ max-inline-size:1720px; }
}

/* ==================================================================
   desktop-air-2 — 2026-10-04 (סבב שני)

   1. הטקסט בפתיחה חוזר לצד שמאל, בבולד
   2. לוגו קטן ב-15% ומזוז קצת לאמצע, והקטגוריות אחריו
   3. סטטיסטיקות +20% (0.35 → 0.42), והפתיחה בדיוק בגובה המסך כדי שהרצועה תיראה בלי גלילה
   4. כותרות הסקשנים באתר: לצד ימין, גדולות יותר, קופסה קרמית עם קטימה רכה יותר
   ================================================================== */

@media (min-width:1001px){

  /* ---------- 3. סטטיסטיקות ---------- */
  :root{ --stats-scale:.42; }

  .home .hero--v2{
    block-size:max(100svh, 560px);
    min-block-size:max(100svh, 560px);
  }

  /* ---------- 1. הפתיחה בצד שמאל, בולד ---------- */
  .hero--v2 .wrap.hero__inner.hero__inner--v2{ justify-content:flex-start; }

  .heroV{
    align-items:center;
    text-align:center;
  }

  .heroV__lead{ margin-inline:auto; font-weight:800; }

  .heroV__hl{ -webkit-text-stroke:1.5px currentColor; paint-order:stroke fill; }
  .heroV__line{ -webkit-text-stroke:1.5px currentColor; }

  .hero--v2 .hero__media::before{
    background:
      linear-gradient(to right,
        rgba(35,31,32,.90) 0%,
        rgba(35,31,32,.74) 26%,
        rgba(35,31,32,.38) 50%,
        rgba(35,31,32,.06) 72%,
        rgba(35,31,32,0)   100%),
      linear-gradient(to bottom,
        rgba(35,31,32,.55) 0%,
        rgba(35,31,32,.10) 20%,
        rgba(35,31,32,0)   38%);
  }

  /* ---------- 2. לוגו וקטגוריות ---------- */
  .site-header .site-logo{ margin-inline-start:clamp(28px, 3.6vw, 64px); }

  .site-header .site-logo__mark,
  .site-header .site-logo img{
    height:calc((var(--header-h) - 32px) * .85);
    max-width:calc(min(52vw, 320px) * .85);
  }

  .site-header .pill-nav{ margin-inline-start:clamp(12px, 1.8vw, 32px); }

  /* ---------- 4. כותרות הסקשנים ---------- */
  .section__head,
  .section__head--center{
    justify-content:flex-start;   /* RTL: תחילת השורה = ימין */
    text-align:right;
  }

  .section__head:has(.section__link){ justify-content:space-between; }

  .section-title__text{ font-size:calc(var(--t-section) * 1.22); }

  .section__head--tight .section-title__text{
    font-size:calc(clamp(.85rem, 2.6vw, 1.3rem) * 1.22);
  }

  /* קטימה רכה יותר בקופסה הקרמית. הצורה מוגדרת מחדש כי המשתנה המקונן נפתר בשורש */
  .section-title{
    --plate-cut:5px;
    --plate-shape:polygon(
      5px 0,
      100% 0,
      100% calc(100% - 5px),
      calc(100% - 5px) 100%,
      0 100%,
      0 5px
    );
  }
}

/* ==================================================================
   desktop-air-3 — 2026-10-04 (סבב שלישי)

   1. סטטיסטיקות בעוד 20%: 0.42 → 0.504
   2. כפתור הפתיחה כולו קרם, עם שני חצים (המופיעים ב-hero-v2.php)
   3. שורת הקטגוריות ממורכזת במרכז ההדר
   ================================================================== */

/* ---------- 2. כפתור קרמי עם שני חצים, בכל רוחב ---------- */
.heroV__cta{
  background:var(--c-plate, #F5EFE7);
  box-shadow:none;
}

.heroV__cta-label{
  color:var(--c-ink, #231F20);
}

.heroV__cta-arrow{
  background:transparent;
  color:var(--c-ink, #231F20);
  inline-size:auto;
  flex:0 0 auto;
  padding-inline:2px 18px;
}

.heroV__cta-arrow svg{
  inline-size:26px;
  block-size:20px;
}

.heroV__cta:hover,
.heroV__cta:focus-visible{
  filter:none;
  background:#FFFFFF;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}

@media (min-width:1001px){

  /* ---------- 1. ---------- */
  :root{ --stats-scale:.504; }

  /* ---------- 3. שורה ממורכזת: עמודה מרכזית אחת, ובצדיה שתי עמודות שוות ---------- */
  .site-header{
    grid-template-columns:minmax(auto, 1fr) auto minmax(auto, 1fr);
    grid-template-areas:
      "logo nav side"
      "search search search";
  }

  .site-header__bar > .header-actions,
  .site-header__bar > .nav-toggle{ grid-area:side; justify-self:end; }

  /* ההמבורגר בקצה השמאלי, והחיפוש והסל מיושבים לידו */
  .site-header__bar > .header-actions{
    margin-inline-end:calc(46px + clamp(8px, 1vw, 16px));
  }

  .site-header .pill-nav{ margin-inline-start:0; }

  .site-header .pill-nav__list{ justify-content:center; }
}


/* ==================================================================
   ELI 2026-10-08 — במחשב בלי כפתור ההמבורגר (כל הקטגוריות כבר בשורה).
   החיפוש והסל נצמדים לקצה. בטאבלט ובמובייל — בלי שינוי.
   ================================================================== */
@media (min-width:1001px){
  .site-header__bar > .nav-toggle{ display:none; }
  .site-header__bar > .header-actions{ margin-inline-end:0; }
}


/* ==================================================================
   hero-rider — 2026-10-13

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

   object-position מחזיק את הפנים בתוך המסך: במחשב החיתוך נלקח
   בעיקר מלמטה כדי שהקסדה לא תיחתך במסכים רחבים ונמוכים, ובנייד
   החלון הצר זז שמאלה אל הרוכב במקום להישאר במרכז הפריים.
   ================================================================== */

.home .hero--v2 .hero__media video{ object-position:21% 30%; }

@media (min-width:1001px){

  .home .hero--v2 .hero__media video{ object-position:30% 30%; }

  .home .hero--v2 .wrap.hero__inner.hero__inner--v2{
    justify-content:flex-end;   /* העוטף ltr, ולכן flex-end הוא ימין */
  }

  .home .hero--v2 .heroV{
    align-items:flex-start;     /* בגוש rtl, תחילת הציר הוא הצד הימני */
    text-align:right;
  }

  .home .hero--v2 .heroV__lead{ margin-inline:0; }

  .home .hero--v2 .hero__media::before{
    background:
      linear-gradient(to left,
        rgba(35,31,32,.90) 0%,
        rgba(35,31,32,.74) 26%,
        rgba(35,31,32,.38) 50%,
        rgba(35,31,32,.06) 72%,
        rgba(35,31,32,0)   100%),
      linear-gradient(to bottom,
        rgba(35,31,32,.55) 0%,
        rgba(35,31,32,.10) 20%,
        rgba(35,31,32,0)   38%);
  }
}


/* ==================================================================
   hero-swap — 2026-10-13

   1. הכותרת קטנה בהרבה: "אנחנו מוכרים / מתקנים" + שורה כתומה "כל דבר שמתגלגל"
   2. שני סרטונים בהצלבה (רוכב ↔ מעבדה)
   3. המילה המתחלפת נכתבת אות אחרי אות עם סמן כיתוב מהבהב
   ================================================================== */

/* ---------- סרטונים ---------- */

.hero--v2 .hero__media video.heroVid{
  opacity:0;
  transition:opacity .8s ease;
}

.hero--v2 .hero__media video.heroVid.is-on{
  opacity:calc(1 - .34 * var(--hero-shade, .55));
}

/* הקידוד של סרטון המעבדה נקבע כאן בנפרד, כדי שאפשר לכוונן אותו בלי לגעת ברוכב */
.home .hero--v2 .hero__media video.heroVid--lab{ object-position:50% 35%; }

@media (min-width:1001px){
  .home .hero--v2 .hero__media video.heroVid--lab{ object-position:50% 35%; }
}

/* ---------- הכותרת קטנה ---------- */

.hero--v2 .heroV__hl{
  font-size:clamp(34px, 9.4vw, 40px);
  line-height:.98;
}

@media (min-width:601px){
  .hero--v2 .heroV__hl{ font-size:clamp(42px, 6.2vw, 52px); }
}

@media (min-width:1001px){
  .hero--v2 .heroV__hl{ font-size:clamp(56px, 4.9vw, 72px); }

  /* בגודל הזה הקו העבה של 1.5px היה מטשטש את האותיות */
  .hero--v2 .heroV__hl,
  .hero--v2 .heroV__line{ -webkit-text-stroke:.8px currentColor; }
}

/* ---------- המילה המתחלפת ---------- */

/*
 * הרוחב קבוע למילה הארוכה מבין השתיים (העורכים הנסתרים באותו תא),
 * כך שהשורה לא קופצת כשהמילה נכתבת, גם במובייל ששם הכותרת ממורכזת.
 */
.heroV__swap{
  display:inline-grid;
  vertical-align:baseline;
}

.heroV__sizer{
  grid-area:1 / 1;
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}

.heroV__word{
  grid-area:1 / 1;
  justify-self:start;   /* RTL: המילה נכתבת מהצד הימני לשמאל בדיוק כמו בקריאה */
  position:relative;
  white-space:nowrap;
}

/* סמן הכיתוב: מוחלט מחוץ לזרימה, כדי שלא יזיז את השורה */
.heroV__word::after{
  content:'';
  position:absolute;
  inset-block:.1em .06em;
  inset-inline-end:-.16em;
  inline-size:.07em;
  background:var(--c-orange, #F14B1C);
  opacity:0;
}

.heroV__swap.is-typing .heroV__word::after{
  opacity:1;
  animation:heroV-caret .7s steps(1) infinite;
}

@keyframes heroV-caret{
  50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero--v2 .hero__media video.heroVid{ transition:none; }
  .heroV__swap.is-typing .heroV__word::after{ animation:none; }
}

/* ==================================================================
   hero-air — 2026-10-13
   1. הטקסט במחשב זז מקצה הימין אל האמצע (משתנה אחד: --hero-text-inset)
   2. שני כפתורים בשורה: לחנות + למעבדה (קופץ ל-#service)
   ================================================================== */

.heroV__ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:inherit;
  gap:12px;
}

.heroV__cta--ghost{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--c-plate, #F5EFE7);
}

.heroV__cta--ghost .heroV__cta-label{
  color:var(--c-plate, #F5EFE7);
}

.heroV__cta--ghost:hover,
.heroV__cta--ghost:focus-visible{
  background:var(--c-plate, #F5EFE7);
  box-shadow:inset 0 0 0 1.5px var(--c-plate, #F5EFE7), 0 10px 30px rgba(0,0,0,.28);
}

.heroV__cta--ghost:hover .heroV__cta-label,
.heroV__cta--ghost:focus-visible .heroV__cta-label{
  color:var(--c-ink, #231F20);
}

#service{ scroll-margin-top:calc(var(--head-actual, 80px) + 8px); }

:root{ --hero-text-inset:clamp(56px, 9vw, 190px); }

@media (min-width:1001px){
  /* העוטף ltr, ולכן padding-right דוחף את הטקסט מהקצה הימני לכיוון האמצע */
  .home .hero--v2 .wrap.hero__inner.hero__inner--v2{
    padding-right:var(--hero-text-inset);
    box-sizing:border-box;
  }

  .heroV{ gap:clamp(22px, 2.6vh, 34px); }
}

/* ==================================================================
   hero-contrast — 2026-10-13

   השכבה הקודמת (--hero-shade:.20) הייתה חלשה מדי, ובמובייל הטקסט יושב בתחתית עם כמעט הצללה.
   במחשב הטקסט זז אל האמצע, אל אזור שההדהדה של השכבה כבר בהיר, ולכן השכבה נהיית רחבה יותר.
   ================================================================== */

/* מובייל וטאבלט: הצללה חזקה מלמטה, באותו אזור שהטקסט יושב בו */
@media (max-width:1000px){
  .home .hero--v2 .hero__media::before{
    background:
      linear-gradient(to top,
        rgba(10,8,7,.92) 0%,
        rgba(10,8,7,.86) 30%,
        rgba(10,8,7,.62) 52%,
        rgba(10,8,7,.22) 72%,
        rgba(10,8,7,0)   88%),
      linear-gradient(to bottom,
        rgba(10,8,7,.55) 0%,
        rgba(10,8,7,0)   26%);
  }

  .hero--v2 .heroV__lead{ font-weight:700; }
}

/* מחשב: השכבה מתרחבת אל האמצע כדי שתכסה את הטקסט המזוז */
@media (min-width:1001px){
  .home .hero--v2 .hero__media::before{
    background:
      linear-gradient(to left,
        rgba(10,8,7,.92) 0%,
        rgba(10,8,7,.84) 34%,
        rgba(10,8,7,.66) 52%,
        rgba(10,8,7,.30) 70%,
        rgba(10,8,7,0)   88%),
      linear-gradient(to bottom,
        rgba(35,31,32,.55) 0%,
        rgba(35,31,32,.10) 20%,
        rgba(35,31,32,0)   38%);
  }
}

/* הצללת טקסט צרה וחדה מעל הרחבה, לכל המסכים */
.hero--v2 .heroV__hl{ text-shadow:0 2px 10px rgba(0,0,0,.55), 0 6px 40px rgba(0,0,0,.5); }
.hero--v2 .heroV__lead{ text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.6); }

/* ==================================================================
   hero-lab-crop — 2026-10-13 (נבדק בדפדפן)
   בסרטון המעבדה המתקן יושב בשליש השמאלי של הפריים.
   מחשב: מושכים שמאלה ולמעלה כדי שהראש והידיים ייכנסו שלמים.
   מובייל: מרכז החיתוך על העמוד והגלגל, כדי שהפנים לא ימלאו את כל המסך.
   ================================================================== */
.home .hero--v2 .hero__media video.heroVid--lab{ object-position:42% 50%; }

@media (min-width:1001px){
  .home .hero--v2 .hero__media video.heroVid--lab{ object-position:22% 25%; }
}
/* ELI 2026-10-15: גלילה חלקה לעוגנים (כפתור המעבדה) */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }