/* =====================================================================
   מ.ח הנדסה, מערכת הירו אחידה (v1)
   עיקרון: תמונה משמאל, תוכן מימין, בכל הדפים (נכון ל-RTL).
   מיקום פיזי (left/right) כדי להימנע מאי-בהירות של RTL-flex.
   נטען אחרון ומנצח את ה-CSS הישן של כל דף.
   ===================================================================== */

:root{
  --hero-h: clamp(500px, 60vh, 640px);
  --hero-maxw: 1480px;
  --hero-pad-x: clamp(20px, 5vw, 56px);
  --hero-copy-w: min(540px, 44vw);
  --cream: #fff9f8;
  --ink: #0b1622;
  --muted: #5c6570;
  --red: #c50c21;
}

/* ============================ DESKTOP ============================ */
@media (min-width: 881px){

  /* ---- מיכל ההירו (section) ---- */
  .hero,
  .services-hero,
  .review-hero{
    position: relative !important;
    min-height: var(--hero-h) !important;
    overflow: hidden !important;
    background: var(--cream) !important;
    isolation: isolate;
  }
  /* בדף הבית ה-section מכיל גם את רצועת השירותים, לא לגעת בה */
  .hero > .service-strip{ position: relative; z-index: 3; }

  /* ---- התמונה: תמיד משמאל (62%) ---- */
  /* דפים עם תמונת רקע ב-:before (אודות / יצירת קשר / חוות דעת) */
  .hero:before,
  .contact-hero:before,
  .review-hero:before{
    inset: 0 auto 0 0 !important;
    right: auto !important;
    left: 0 !important;
    width: 62% !important;
    z-index: -2 !important;
  }
  /* שכבת ההבהרה: נקי בצד ימין (התוכן), התמונה נראית בצד שמאל */
  .hero:after,
  .contact-hero:after,
  .review-hero:after{
    inset: 0 !important;
    background:
      linear-gradient(to left, var(--cream) 0%, var(--cream) 33%, rgba(255,249,248,.55) 52%, rgba(255,249,248,0) 76%),
      linear-gradient(to top, var(--cream) 0%, rgba(255,249,248,0) 30%) !important;
    z-index: -1 !important;
  }

  /* דפים עם אלמנט תמונה (בית / תחומי עיסוק / גלריה) */
  .hero-visual,
  .services-hero .hero-art,
  .hero .hero-art{
    position: absolute !important;
    inset: 0 !important;
    right: auto !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 62% !important;
    height: 100% !important;
    overflow: visible;
    z-index: 0 !important;
  }
  /* התמונה עצמה ממלאת, והקצה הימני שלה נמוג אל הרקע */
  .hero-visual > .hero-truck,
  .services-hero .hero-art img,
  .hero .hero-art img{
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 48% !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%) !important;
    transform: none !important;  /* ביטול ה-scaleX הישן */
  }
  /* ביטול שכבות :after ישנות על אלמנט התמונה (נמנע הבהרה בצד הלא נכון) */
  .services-hero .hero-art:after,
  .hero .hero-art:after{
    background: linear-gradient(to left, var(--cream) 0%, rgba(255,249,248,0) 46%) !important;
    inset: 0 !important;
  }
  .hero-visual:after{ display:none !important; }

  /* רצועת שמש עדינה על התמונה */
  .hero-visual .sunlight{
    background: radial-gradient(circle at 40% 34%, rgba(255,224,170,.28), transparent 42%) !important;
  }

  /* ---- עטיפת התוכן: ממורכזת לרוחב מרבי, התוכן נצמד ימינה ---- */
  .hero-layout,
  .services-hero .hero-inner,
  .hero .hero-inner,
  .review-hero-inner{
    position: relative !important;
    z-index: 2 !important;
    width: min(var(--hero-maxw), 100%) !important;
    max-width: var(--hero-maxw) !important;
    margin-inline: auto !important;
    min-height: var(--hero-h) !important;
    height: auto !important;
    padding: clamp(48px,7vh,92px) var(--hero-pad-x) !important;
    display: flex !important;
    align-items: center !important;
    direction: ltr !important;            /* מיקום פיזי, ללא תלות ב-RTL */
    gap: clamp(24px,3vw,56px);
  }

  /* בלוק התוכן נצמד לקצה הימני של העטיפה הממורכזת */
  .hero-copy,
  .review-hero-copy{
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: var(--hero-copy-w) !important;
    max-width: 560px !important;
    margin-left: auto !important;         /* ltr: דוחף ימינה */
    margin-right: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    padding: 0 !important;
  }
  /* דף הבית: תוכן מעט רחב יותר (שני CTA גדולים + שורת אמון) */
  .hero .hero-copy{ width: min(560px, 46vw) !important; max-width: 580px !important; }

  /* תחומי עיסוק: אין div עוטף לתוכן, פלקס-עמודה שמיישר את כל הילדים ימינה
     (עובד גם על ה-eyebrow שהוא inline-flex, שבו auto-margin לא תופס) */
  .services-hero .hero-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;   /* ltr: הצד הימני */
    justify-content: center !important;
    direction: ltr !important;
    gap: clamp(12px, 1.6vh, 20px) !important;
  }
  .services-hero .hero-inner > *{
    width: min(540px, 46vw) !important;
    max-width: 560px !important;
    margin: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }
  /* אלמנטים "קטנים" שעוטפים את תוכנם (לא נמתחים ל-540) */
  .services-hero .hero-inner > .crumb,
  .services-hero .hero-inner > .eyebrow,
  .services-hero .hero-inner > .hero-buttons,
  .services-hero .hero-inner > .hero-note{
    width: fit-content !important;
    max-width: 100% !important;
  }
}

/* ===================== טיפוגרפיה וכפתורים (כל הרזולוציות) ===================== */

/* תגית עליונה (eyebrow / kicker), אחידה */
.hero .eyebrow,
.services-hero .eyebrow,
.review-hero .eyebrow,
.hero .kicker,
.contact-hero .kicker,
.hero-copy .crumb + .eyebrow{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border: 1px solid #f0cdd1 !important;
  background: #fff !important;
  color: #7a1420 !important;
  padding: 8px 15px !important;
  border-radius: 40px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(197,12,33,.08) !important;
  margin: 0 0 4px !important;
}
.hero .eyebrow .spark,
.hero .eyebrow .eyebrow-icon,
.services-hero .eyebrow i{ color: var(--red) !important; font-style: normal; }

/* פירורי לחם */
.crumb{
  font-size: 12.5px !important;
  color: #8a929b !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.crumb a{ color: #8a929b !important; }
.crumb a:hover{ color: var(--red) !important; }

/* כותרת ראשית */
.hero h1,
.services-hero h1,
.review-hero h1{
  font-size: clamp(38px, 4.4vw, 66px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -2px !important;
  color: var(--ink) !important;
  margin: 16px 0 18px !important;
}
/* שורת ההדגשה באדום */
.hero h1 em,
.services-hero h1 em,
.hero-copy h1 em,
.review-hero h1 span{
  color: var(--red) !important;
  font-style: normal !important;
  display: block;
}

/* פסקת פתיח */
.hero-lead,
.hero .hero-copy > p,
.hero-copy > p,
.services-hero .hero-inner > p,
.review-hero-copy > p{
  color: var(--muted) !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.75 !important;
  margin: 0 0 26px !important;
  max-width: 48ch;
}

/* ---- כפתורים: מערכת אחידה ---- */
/* כפתורים פשוטים (כל הדפים פרט לשני ה-CTA הגדולים בבית) */
.btn,
.btn-red, .btn-outline, .btn-white,
.btn.red, .btn.line{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 26px !important;
  border-radius: 40px !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  line-height: 1.1 !important;
  border: 1px solid transparent !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
/* ראשי (אדום) */
.cta-primary,
.btn-red, .btn.red{
  background: linear-gradient(120deg, #e0001a, #9a0a1c) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(170,8,37,.22) !important;
}
/* משני (קו מתאר) */
.cta-secondary,
.btn-outline, .btn-white, .btn.line{
  background: #fff !important;
  border: 1px solid #e6c2c7 !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 22px rgba(123,20,30,.07) !important;
}
/* ריחוף */
.btn:hover, .btn-red:hover, .btn.red:hover, .cta-primary:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 34px rgba(170,8,37,.28) !important;
}
.btn-outline:hover, .btn-white:hover, .btn.line:hover, .cta-secondary:hover{
  transform: translateY(-3px) !important;
  border-color: var(--red) !important;
  box-shadow: 0 16px 30px rgba(123,20,30,.12) !important;
}
/* נגישות, פוקוס ברור */
.btn:focus-visible, .btn-red:focus-visible, .btn-outline:focus-visible,
.btn-white:focus-visible, .btn.red:focus-visible, .btn.line:focus-visible,
.cta-primary:focus-visible, .cta-secondary:focus-visible,
.crumb a:focus-visible{
  outline: 3px solid var(--red) !important;
  outline-offset: 3px !important;
}

/* שני ה-CTA הגדולים בעמוד הבית, שמירה על מבנה דו-שורתי, ליטוש בלבד */
.cta-primary, .cta-secondary{
  border-radius: 40px !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

/* מרווחי אזור הכפתורים */
.hero-actions, .hero-buttons, .actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

/* שורת אמון (בית) */
.trust-row{ margin-top: 28px !important; gap: 12px 24px !important; }
.trust-row i{ color: var(--red) !important; }

/* מיני-גלריה (בית), לצד התמונה (שמאל) */
@media (min-width: 881px){
  .mini-gallery{
    right: auto !important;
    left: 14px !important;
    top: auto !important;
    bottom: 18px !important;
    z-index: 4 !important;
  }
  /* אנוטציית "המשאית שלנו בשטח", ממוקמת מעל התמונה בצד שמאל, החץ אל המשאיות */
  .photo-note{
    display: flex !important;
    right: auto !important;
    left: clamp(26px, 4vw, 74px) !important;
    top: 18px !important;
    bottom: auto !important;
    z-index: 6 !important;
    transform: rotate(-6deg) !important;
  }
}

/* ============================ MOBILE ============================ */
@media (max-width: 880px){
  .hero, .services-hero, .review-hero{
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--cream) !important;
  }

  /* תמונת רקע (:before), רצועה עליונה ברוחב מלא */
  .hero:before, .contact-hero:before, .review-hero:before{
    inset: 0 0 auto 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important;
    width: 100% !important;
    height: clamp(210px, 38vh, 300px) !important;
    z-index: 0 !important;
  }
  .hero:after, .contact-hero:after, .review-hero:after{
    inset: 0 !important;
    background: linear-gradient(to top, var(--cream) 46%, rgba(255,249,248,.2) 72%, transparent 100%) !important;
    z-index: 0 !important;
  }

  /* אלמנט תמונה (בית/שירותים/גלריה), רצועה עליונה */
  .hero-visual, .services-hero .hero-art, .hero .hero-art{
    position: relative !important;
    inset: auto !important;
    left: auto !important; right: auto !important;
    width: 100% !important;
    height: clamp(210px, 38vh, 300px) !important;
    order: 1 !important;
  }
  .hero-visual > .hero-truck,
  .services-hero .hero-art img, .hero .hero-art img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: 50% 48% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%) !important;
    transform: none !important;
  }

  /* עטיפת תוכן, מתחת לתמונה, רוחב מלא, מיושר לימין */
  .hero-layout, .services-hero .hero-inner, .hero .hero-inner, .review-hero-inner{
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 20px 34px !important;
    direction: rtl !important;
    gap: 0 !important;
  }
  .hero-copy, .review-hero-copy{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    order: 2 !important;
  }
  .services-hero .hero-inner{
    direction: ltr !important;
    align-items: flex-end !important;   /* ltr: ימין */
    gap: 12px !important;
  }
  .services-hero .hero-inner > *{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }
  .services-hero .hero-inner > .crumb,
  .services-hero .hero-inner > .eyebrow,
  .services-hero .hero-inner > .hero-note{ width: fit-content !important; }
  .mini-gallery, .photo-note{ display: none !important; }
  .hero-actions, .hero-buttons, .actions{ width: 100% !important; }
  .btn, .btn-red, .btn-outline, .btn-white, .btn.red, .btn.line{ flex: 1 1 auto !important; }

  /* דפים עם תמונת רקע (:before): התוכן יורד מתחת לרצועת התמונה */
  .mh-about .hero-inner,
  .mh-contact .hero-inner,
  .mh-reviews .review-hero-inner{
    padding-top: clamp(230px, 42vh, 322px) !important;
  }
}

/* ======== תיקון: תמונת ההירו בבית פרוסה עד הקצה השמאלי ========
   כלל ישן (.hero-visual > img.hero-truck) דיהה את הצד השמאלי של התמונה
   (שריד מהעיצוב שבו התמונה הייתה בימין). מבטלים אותו בספציפיות גבוהה יותר:
   התמונה מלאה משמאל, ודוהה רק בקצה הימני אל תוך רקע התוכן. */
@media (min-width: 881px){
  .hero .hero-visual > img.hero-truck,
  .hero-visual > img.hero-truck{
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 72%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 72%, transparent 100%) !important;
  }
}

/* ======== דף הבית: התמונה נצמדת לקצה השמאלי של המסך ========
   ב-home ה-.hero-visual מקונן בתוך .hero-layout הממורכז (max 1480px),
   לכן left:0 שלו מתחיל מקצה המכולה ולא מקצה המסך. מחשבים את ההיסט
   כדי להצמיד לקצה ה-viewport ולפרוס 62vw (כמו בשאר הדפים). */
@media (min-width: 881px){
  .mh-home .hero-visual{
    left: calc((min(var(--hero-maxw), 100vw) - 100vw) / 2) !important;
    width: 62vw !important;
  }
}

/* ======== דף הבית, מובייל בלבד: דהייה גם בצדדים (שמאל + ימין) ========
   במובייל התמונה דוהה למעלה/למטה בלבד והצדדים חדים. מוסיפים שכבת מסכה
   שנייה שדוהה לצדדים, ומחברים בחיתוך (intersect) כדי שתתמזג רך בכל הקצוות. */
@media (max-width: 880px){
  .mh-home .hero-visual .hero-truck{
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
  }
}

/* ======== תחומי עיסוק (services-hero): תיקון היערמות במובייל ========
   .services-hero היה display:flex גם במובייל, אז התמונה והטקסט נשארו
   זה-לצד-זה. הופכים ל-block: תמונה כרצועה למעלה, טקסט מתחת ברוחב מלא. */
@media (max-width: 880px){
  .services-hero{ display:block !important; }
  .services-hero .hero-inner,
  .mh-services .hero-inner{ padding:26px 20px 10px !important; }
  .services-hero h1{ font-size:clamp(31px,8vw,43px) !important; letter-spacing:-1px !important; line-height:1.12 !important; }
}

/* ======== דף הבית (דסקטופ): יישור תוכן ההירו לקו הלוגו/ההדר ========
   התוכן היה מוזח ~48px פנימה מקו הלוגו. מצמידים את הקצה הימני של
   התוכן לאותו קו (הלוגו יושב ~15px מהקצה הימני של הקונטיינר 1480). */
@media (min-width: 1021px){
  .mh-home .hero-copy{
    left: auto !important;
    right: 15px !important;
  }
}