/* גופן Heebo (SIL Open Font License), מתארח אצלנו: שני קבצים בלבד (עברית 12KB, לטינית 30KB),
   משקלים 400 עד 800. נותן מראה אחד בכל מכשיר במקום Segoe UI / Arial Hebrew / Noto.
   font-display: swap, כך שהטקסט מוצג מיד בגופן המערכת ומתחלף כשהקובץ מגיע. */
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   אלום ארביב — שלב 0
   HTML+CSS נקי, RTL, אפס תלויות חיצוניות (בלי Google Fonts, בלי CDN)

   הפלטה נגזרה מהצילומים האמיתיים של העבודות:
   פרופיל אנתרציט + אבן גלילית חמה + אלומיניום מוברש + נגיעת ברונזה.
   ========================================================================== */

:root {
  /* גרפיט — צבע הפרופיל עצמו */
  --graphite-900: #16191b;
  --graphite-800: #1f2426;
  --graphite-700: #2f3538;
  --graphite-600: #454d51;
  --graphite-400: #7d878d;

  /* אלומיניום */
  --alu-300: #aeb6bb;
  --alu-200: #c9d0d4;
  --alu-100: #e4e8ea;

  /* טאופ — גזור מ-#979389, צבע פאנל התוכן של האתר הקודם */
  --sand-100: #f1ede4;
  --sand-200: #e6e3db;
  --sand-300: #dcd9d1;
  --taupe:    #979389;   /* הגוון המקורי של הבאנר באתר הקודם */
  /* טורקיז — הצבע של האתר הקודם (#0692A3, 16 מופעים ב-HTML המקורי).
     הלוגו משתמש ב-#2abaa8, אותה משפחה בדיוק. */
  --brand-500: #0792a3;   /* הצבע המדויק של האתר הקודם (#0792a3 ב-style.css שלו). 4.75:1 על גרפיט */
  --brand-600: #05707e;   /* לטקסט על בהיר — #0792a3 נכשל שם (3.72:1). 5.79:1 על לבן, 4.96:1 על חול */
  --brand-700: #045a66;
  --brand-400: #19b5c6;   /* אותו גוון כחול-ציאן של האתר הישן, מוסט לבהיר לטקסט על כהה (7.1:1 על גרפיט) */
  --brand-300: #6fd6e3;

  /* כרום — אותיות הלוגו */
  --chrome-100: #f0f3f5;
  --chrome-300: #c2ccd2;
  --chrome-500: #8d99a1;

  --ink:      #14181a;
  --ink-soft: #4a5257;
  --ink-mute: #666f74;
  --line:     #dcd9d1;
  --bg:       #f7f8f9;
  --card:     #ffffff;

  --wa:    #1f7a4d;
  --focus-ink: #14181a;   /* טבעת הפוקוס הפנימית. ראו :focus-visible */

  --shadow-sm: 0 1px 2px rgba(22, 25, 27, .06), 0 2px 8px rgba(22, 25, 27, .06);
  --shadow-md: 0 6px 18px rgba(22, 25, 27, .12), 0 16px 40px rgba(22, 25, 27, .10);

  --radius: 4px;          /* פינות חדות — אלומיניום, לא אפליקציה */
  --wrap: 1180px;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;

  --font: "Heebo", "Segoe UI", "Arial Hebrew", Arial, "Noto Sans Hebrew", system-ui, sans-serif;


  /* ---- לוח האלומיניום של הבאנר ----
     מסונתז ע"י tools/build_banner.py מתוך content/banner/strip-orig.png,
     קובץ הפס המקורי של האתר הישן. אינו הגדלה של המקור: הסחיפה וההברשה
     נמדדו כפרופילים חד-ממדיים ומצוירים מחדש ב-2000x768.
     אריח אחד לשני הפסים, מוכפל במשוקף כדי שהריצוף האנכי יהיה בלי תפר.
     קצוות הסחיפה הורמו ל-140: מתחת לזה הכיתוב הכהה נופל מתחת ל-AA
     (ב-110 הוא קיבל 3.25:1; ב-140 הוא מקבל 4.9:1),
     ובפס המקורי לא היה טקסט על המתכת. */
  --plate-ink:  #16191b;
  --plate-teal: #023c44;  /* מפרידים וקו תחתון. 3.6:1 על הקצה הכהה */

  /* אלומיניום מוברש — CSS בלבד, אפס תמונות */
  --brushed:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.045) 0 1px,
      rgba(0,0,0,.045)       1px 2px,
      rgba(255,255,255,.02)  2px 4px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable;
       scroll-padding-block-end: 7.5rem; /* מקום לעיגולים הצפים, שלא יסתירו פוקוס */ }
/* כרטיס האמון חוצה את הבאנר. אותו משתנה קובע גם את הריפוד של הבאנר, כך שנשארים 32px אוויר קבועים מתחת לכפתורים */
:root { --trust-overlap: 74px; }
@media (max-width: 860px) { :root { --trust-overlap: 40px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17px — קהל היעד כולל בעלי בתים מבוגרים */
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  text-align: right;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  line-height: 1.22;
  font-weight: 700;
  color: var(--graphite-900);
  letter-spacing: normal;    /* עברית לא נהנית מ-tracking שלילי */
}
h1 { font-size: clamp(1.85rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3.3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2.1vw, 1.25rem); }

p { margin: 0 0 var(--s4); max-width: 68ch; }
/* טקסט מיושר לשני הצדדים פוגע בקריאות בעברית — לא משתמשים */

a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--graphite-900); }

:focus-visible {           /* פוקוס גלוי — דרישת נגישות */
  /* סמן דו-גוני: טבעת כהה עם טבעת לבנה סביבה. התקן דורש 3:1 מול
     הרקע, והאתר מציב פוקוס גם על מתכת בהירה, גם על פוטר שחור וגם על
     צילום. נבדק על כל 256 גווני האפור: הזוג כהה+לבן לא יורד מ-4.00:1
     על אף רקע. האדום של המותג לבדו נתן 1.22:1 על המתכת, והזוג
     אדום+לבן נפל ל-2.36:1 על אפור 159 — שזה בדיוק גוון המתכת. */
  outline: 3px solid var(--focus-ink);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
}

/* טלפונים, מיילים ומספרים — כיוון LTR גם בתוך עברית */
/* בלי inline-block: הוא מנע שבירת שורה וכפה עקיפה בגודל הגופן
   על המייל הארוך בכרטיס צרו קשר. isolate מספיק לבידוד הכיוון. */
/* overflow-wrap: המייל הוא 21 תווים רצופים בלי רווח, ובהגדלת גופן
   ל-200% הוא הרחיב את הפוטר מעבר לרוחב המסך וייצר גלילה אופקית.
   anywhere מאפשר לו להישבר רק כשאין ברירה. */
.ltr { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); }

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

.skip-link {
  position: absolute; inset-inline-start: 0; top: -100px;
  z-index: 200; background: var(--graphite-900); color: #fff;
  padding: var(--s3) var(--s5); font-weight: 700;
}
.skip-link:focus { top: 0; }

.section { padding-block: var(--s8); }
.section--sand { background: var(--card); border-block: 1px solid var(--line); }

.section__head { margin-bottom: var(--s6); }
.section__head p { color: var(--ink-soft); font-size: 1.075rem; }

/* בלוק שאין לו תווית קטנה מעל הכותרת — כמו האודות — מאבד את הקו
   הטורקיז הקצר שפותח את שני הסקשנים האחרים, והקצב הוויזואלי נשבר.
   הקו נוסף מעל הכותרת עצמה. אותו רוחב ואותו צבע כמו ב-.eyebrow, כדי
   שיהיה מדובר באותו מוטיב ולא בשניים דומים. */
.section__head > h2:first-child::before {
  content: "";
  display: block;
  width: 28px; height: 2px;
  margin-bottom: var(--s3);
  background: var(--brand-500);
}

/* קו ברונזה קצר לפני כותרת — מוטיב חוזר */
.eyebrow {
  display: block; margin-bottom: var(--s3);
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  color: var(--brand-600);   /* לא brand-500: הוא נכשל בניגודיות על לבן */
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 28px; height: 2px; margin-inline-end: var(--s2);
  background: var(--brand-500);
}


/* ---------- אייקוני קו ---------- */
.ic {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.ic--sm { width: 19px; height: 19px; }
.ic--flip { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: .85rem 1.7rem; min-height: 48px; flex-wrap: wrap; max-width: 100%; text-align: center;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 20px; height: 20px; stroke-width: 1.8; }
/* גרפיט ולא טורקיז: כפתור טורקיז גדול צועק ומתנגש בלוגו.
   הטורקיז נשאר למבטאים דקים בלבד. */
.btn--primary { background: var(--graphite-900); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
/* כפתור לשימוש על רקע כהה: לבן מלא. גרפיט על תמונה כהה נבלע —
   וזה היה נתיב ההמרה הראשי. */
.btn--oncolor { background: #fff; color: var(--graphite-900); }
.btn--oncolor:hover { background: var(--sand-100); color: var(--graphite-900); }
.btn--outline {
  background: #fff; color: var(--graphite-800); border-color: var(--alu-200);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover { border-color: var(--graphite-700); color: var(--graphite-900); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #145c39; color: #fff; }

/* ---------- לוח האלומיניום עם הברגים ----------
   הרקע והבורג הם הפס האמיתי מהאתר הקודם, לא ציור. --------------- */
.metal {
  position: relative;
  color: var(--plate-ink);
  background-color: #c9c9c9;
  background-image: url("../img/banner/metal.png?v=e6b2cace");
  background-size: 100% 16.49vw;     /* הרוחב נמתח, הגובה בגודלו המקורי */
  background-repeat: repeat-y;    /* הרצועה משוקפת ולכן אין תפר */
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(0,0,0,.34);
}
/* בפס התחתון אותו קובץ בדיוק, כמו במקור — רק ההדגשה מתהפכת.
   background-size: 130% מגדיל את האריח וחותך את שני הקצוות הכהים:
   הטקסט כאן רגיל ודורש 4.5:1, ובקצוות הסחיפה יורדת מתחת לזה. */
.metal--flip {
  background-size: 115% 16.49vw;
  background-position: 50% 0;
  border-top: 1px solid rgba(0,0,0,.34);
  border-bottom: 1px solid rgba(255,255,255,.5);
}

.metal a { color: var(--plate-ink); text-decoration-color: rgba(22,25,27,.45); }
/* plate-teal על המתכת המשוקפת נותן 3.47:1 ב-hover. הצבע נשאר
   כמו במצב הרגיל (5.05:1) וההדגשה עוברת לקו התחתון. */
.metal a:hover { color: var(--plate-ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.metal .ic { color: var(--plate-teal); }

/* שלושה ברגים צמודים לשפה התחתונה, כמו בצילום.
   הגודל יחסי לגובה הלוח: בצילום הבורג הוא 15% מגובה הבאנר (38 מתוך 253).
   קודם שמתי 38px קבוע, והלוח שלנו נמוך יותר — יצא ענק.
   המיקומים האופקיים נמדדו בצילום (36%, 67%, 94%) ומשוקפים,
   כי הלוגו אצלנו מימין ובמקור היה משמאל. */
.metal::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/banner/screw.png?v=481bac59"),
                    url("../img/banner/screw.png?v=481bac59"),
                    url("../img/banner/screw.png?v=481bac59");
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position:
   35.98% calc(100% - 11px),
   67.66% calc(100% - 11px),
   94.40% calc(100% - 11px);
  pointer-events: none;
  z-index: 2;
}

/* הכותרת נשארת גם במסכים צרים — רק בלי הריווח הרחב. ‎.3em מנפחים
   אותה ב-35%, וזה מה שמנע ממנה להיכנס. בלעדיו היא נכנסת עד 460
   פיקסלים רוחב.
   מתחת ל-460 היא מוסתרת, ולא בגלל הקוד: המלבן הכסוף שם הוא 118
   פיקסלים, והמחרוזת דורשת 138 בגופן המינימלי הקריא (9.9px).
   להקטין אותה עוד היה נותן 8.5 פיקסלים — קטן מכדי לקרוא. */
@media (max-width: 680px) {
  .banner__tag { letter-spacing: .1em; }
}
@media (max-width: 460px) {
  .banner__tag { display: none; }
}
@media (max-width: 720px) {
  .metal::before { background-size: 17px 17px; background-position:
  35.7% calc(100% - 8px), 68.1% calc(100% - 8px), 95.4% calc(100% - 8px); }
}

/* ==========================================================================
   Header — פס אלומיניום מוברש כהה
   ========================================================================== */
/* ---------- הפס הלבן — פרטי קשר + תפריט ----------
   פס המתכת שנשא את התפריט נמחק לפי בקשת בעל העסק. התפריט עבר לכאן,
   והוא כפתור בכל גודל מסך — לא רק בנייד כמו קודם. --------------- */
.topbar {
  position: relative;          /* עוגן לתפריט הנפתח */
  background: #fff; color: var(--ink);
  font-size: .9375rem; padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.topbar a { color: var(--ink); text-decoration: none; font-weight: 700; }
.topbar a:hover { color: var(--brand-700); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--s2); }
.topbar__sep { color: var(--brand-600); font-weight: 700; }
.topbar__note {
  color: var(--brand-700); font-weight: 700;
  display: inline-flex; align-items: center; gap: var(--s2);
}

/* הכפתור נצמד לשמאל, הפרטים נשארים מקובצים מימין — כמו בסימון.
   ה-nav הוא העוגן של התפריט הנפתח, כדי שייפתח בדיוק מתחת לכפתור
   ולא נצמד לקצה המסך. */
.nav { position: relative; margin-inline-start: auto; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: .4rem .9rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
.nav__toggle:hover { border-color: var(--graphite-600); }
.nav__toggle .ic { width: 20px; height: 20px; }

/* התפריט נפתח מתחת לפס, בכל רוחב מסך */
.nav__list {
  position: absolute; inset-inline: auto 0; top: 100%;
  z-index: 120; min-width: 220px;
  display: flex; flex-direction: column; align-items: stretch;
  margin: 0; padding: var(--s2); list-style: none;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.nav__list[hidden] { display: none; }
.nav__list a {
  display: block; padding: var(--s3) var(--s4);
  color: var(--ink); text-decoration: none; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.nav__list li:last-child a { border-bottom: 0; }
.nav__list a:hover { background: var(--bg); color: var(--brand-700); }
.nav__list a[aria-current="page"] {
  color: var(--brand-700);
  box-shadow: inset -3px 0 0 var(--brand-600);   /* ב-RTL זהו הקצה הימני */
}

@media (max-width: 860px) {
  .nav__toggle { min-height: 48px; }
  .topbar .wrap { gap: var(--s2) var(--s4); }
}

/* פס עליון בנייד: שתי עמודות במקום שלוש שורות (כ-90px במקום 140px). התוכן לא משתנה. */
@media (max-width: 600px) {
  .topbar { padding-block: var(--s2); font-size: .875rem; }
  .topbar .wrap { display: grid; grid-template-columns: 1fr auto; row-gap: 0; column-gap: var(--s3); }
  .topbar__sep { display: none; }
  .topbar__item, .topbar__note { grid-column: 1; }
  .nav { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* ==========================================================================
   Banner — לוח המתכת והצילום הם גוש אחד, כמו באתר החי.
   נמדד בצילום האתר: הבאנר 1314x908 (יחס 1.447:1), והמתכת יורדת עד
   27.5% מהגובה בצד הלוגו ועד 9.5% באמצע. הקו המשונן הוא הגבול
   התחתון של המתכת — ולכן המתכת עמוקה מתחת ללוגו. קודם בניתי
   מלבן בגובה אחיד והזיגזג התחיל מתחתיו, וזה מה שנראה שונה.
   ========================================================================== */
.hero {
  /* כל מה שבתוך הבאנר נמדד ביחידות container — cqw, אחוז מרוחב
     הבאנר עצמו. קודם חלק נמדד באחוזי *גובה* וחלק ב-vw: הגובה נשבר
     כשהריצפה של 520px נכנסה לתוקף מתחת ל-892 פיקסלים, ו-vw כולל את
     רוחב פס הגלילה ולכן היה גדול ב-1.2% מרוחב הבאנר בפועל. משתי
     הסיבות האלה הפס, הלוגו והברגים לא גדלו וקטנו יחד עם הדף.
     היחידות נתמכות בכל הדפדפנים מאז 2023.

     המידות, כולן באחוזים מרוחב הבאנר, כפי שנמדדו בצילום האתר
     האמיתי content/banner/live.png (1314 על 766):
       קו החתך      18.49 / 6.85 / 11.95
       הברגים       מרכזים 36.23 / 67.35 / 93.61, קוטר 2.74
       הלוגו        רוחב 22.84, פינה 3.04 ו-2.36
       גובה האריח   16.49  (132 שורות של המקור) */
  container-type: inline-size;
  /* עומק הלוח הוא המשתנה היחיד, וכל שאר המידות נגזרות ממנו ביחס
     שנמדד בצילום. הנוסחה רציפה: אין שבירת מסך ואין קפיצה.
     קודם הייתה שבירה ב-720: מתחתיה הלוח היה 34% מהרוחב והלוגו 38%,
     מעליה 18.49% ו-22.84%. זו הקפיצה שנראתה "ענק לפעמים".

     התקרה 11.5rem היא 184 פיקסלים — בדיוק הגובה שהיה לפס באתר
     המקורי. שם הדף היה ברוחב קבוע של 1000 ולכן הפס לא גדל לעולם;
     אצלנו הוא פרוס לכל הרוחב, ובלי תקרה הוא הגיע ל-296 פיקסלים
     במסך של 1600 ול-355 ב-1920. במסך צר הוא יורד ל-34% מהרוחב,
     אחרת הלוגו לא קריא. ה-rem: מי שמגדיל טקסט מקבל פס שגדל איתו. */
  --plate-k: 34;   /* אחוז מרוחב הבאנר; בנייד קטן יותר, ראו בהמשך */
  --plate: min(calc(var(--plate-k) * 1cqw), 11.5rem);
  --edge: polygon(
      0    var(--plate),
     29%   var(--plate),
     51%   calc(var(--plate) * .3705),
     79%   calc(var(--plate) * .3705),
     86%   calc(var(--plate) * .6463),
    100%   calc(var(--plate) * .6463),
    100%  100%,
      0   100%);
  position: relative;
  /* יחס 1.7154:1 מהצילום. הריצפה 520px נחוצה כדי שהטקסט ייכנס
     במסכים צרים; משם והלאה הבאנר גבוה מהמקור, אבל הפס עצמו שומר
     על מידותיו כי הוא נמדד ברוחב. aspect-ratio יחד עם min-height
     הרחיב את *הרוחב* מעבר למסך ויצר גלילה אופקית. */
  width: 100%;
  /* היחס 1.7154 נמדד בצילום, אבל האתר הישן היה ברוחב קבוע 1000 ולכן
     הבאנר שם היה 583 פיקסלים תמיד. אצלנו הוא פרוס לכל הרוחב, ובלי
     תקרה הוא הגיע ל-840 פיקסלים במסך 1440 — 93% מגובה המסך, בלי
     שום רמז שיש משהו מתחת. התקרה 700 משאירה את המקטע הבא מציץ.
     במסכים נמוכים הבאנר ממילא נקבע לפי גובה התוכן ולא לפי הנוסחה. */
  min-height: clamp(520px, 58.3vw, 700px);
  /* במסך נמוך (מחשב נייד 1366x768) הבאנר לא יוצא מתחת לקו הקיפול. התקרה 700 נשמרת. */
  min-height: clamp(520px, min(58.3vw, calc(100svh - 4rem)), 700px);
  display: flex; align-items: flex-end;
  /* הריפוד העליון שומר מקום ללוח: 18.49 אחוז מהרוחב, בדיוק עומק
     החתך. בלי זה הכותרת עלתה על המתכת ברוחבים שבהם היא נשברת
     לשורה נוספת — "לפעמים כן ולפעמים לא". ב-vw ולא ב-cqw כי אלמנט
     לא יכול למדוד את עצמו; ההפרש הוא רוחב פס הגלילה בלבד. */
  padding-block: calc(min(calc(var(--plate-k) * 1vw), 11.5rem) + var(--s6))
                 calc(var(--trust-overlap) + var(--s6));
  background-color: #c9c9c9;
  color: #fff;
  overflow: hidden;
}
/* לוח המתכת. הוא יושב על שכבה משלו ולא על .hero, כי אלמנט לא יכול
   למדוד את עצמו ב-cqw — רק ילדיו יכולים. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/banner/metal.png?v=e6b2cace");
  background-size: 100% 16.49cqw;
  background-repeat: repeat-y;
  pointer-events: none;
}
/* גובה ה-SVG נקבע ב-cqw, ולכן נקודות ה-polyline הן אחוזים ממנו
   ולא מגובה הבאנר: 18.49/20, 6.85/20 ו-11.95/20. */
.hero__edge {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  width: 100%; height: calc(var(--plate) * 1.0817);
  pointer-events: none;
  /* הקו נחתך לצד המתכת בלבד. בלי זה מחצית מעוביו נמרחה על הצילום,
     והקצה נראה רך — בפס התחתון הוא נחתך ממילא ולכן נראה חד יותר. */
  clip-path: polygon(
      0    0,
    100%   0,
    100%  59.75%,
     86%  59.75%,
     79%  34.25%,
     51%  34.25%,
     29%  92.45%,
      0   92.45%);
}
.hero__bg {
  position: absolute; inset: 0;
  clip-path: var(--edge);
}
/* הצילום הוא <img> בתוך <picture> ולא רקע CSS. רקע מתגלה רק אחרי
   שה-CSS ירד ופוענח, ולכן הבקשה אליו יצאה אחרונה. <img> מתגלה כבר
   בסריקת ה-HTML, והדפדפן בוחר לבד: hero-m.webp בטלפון, hero.webp
   במסך רחב, hero.jpg רק בדפדפן בלי WebP. ה-object-position חייב
   להיות זהה ל-HERO_POS ב-build_gallery.py, שלפיו נחתכת גרסת הטלפון. */
.hero__bg picture,
.hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
}
.hero__bg img { object-fit: cover; object-position: 50% 30%; }
.hero__scrim {
  position: absolute; inset: 0;
  clip-path: var(--edge);
  /* --text-d: מרחק ראש גוש הטקסט מתחתית הבאנר (נמדד: 475px ב-320, 439 ב-390,
     316 ב-600). ההחשכה חזקה רק מאחורי הטקסט ודועכת מעליו, כך שהתמונה נראית.
     בעמודי הפנים אין טקסט בבאנר, ולכן ההחשכה שם עדינה. */
  --text-d: 450px;
  background:
    linear-gradient(to top, rgba(16,19,21,.80) 0%, rgba(16,19,21,.68) calc(var(--text-d) * .6),
                            rgba(16,19,21,.68) var(--text-d), rgba(16,19,21,.10) calc(var(--text-d) + 130px),
                            rgba(16,19,21,.06) 100%);
}
@media (max-width: 380px) { .hero__scrim { --text-d: 485px; } }
@media (min-width: 521px) and (max-width: 899.98px) { .hero__scrim { --text-d: 360px; } }
/* טלפון: התמונה נקייה, בלי החשכה בכלל (בקשת בעל העסק: שיראו את התמונה).
   הטקסט יושב על לוחית כהה שקופה למחצה, כך שהקריאות נשמרת על כל חלק בתמונה. */
@media (max-width: 600px) {
  .hero__scrim { background: none; }
  .hero:not(.hero--plain) .wrap {
    width: calc(100% - 1.5rem);
    padding: var(--s4);
    /* בלי לוח כהה גם בטלפון (בקשת בעל העסק, 05/10), כמו בדסקטופ. הלוח היה:
       background: rgba(16,19,21,.62); border-radius: 10px; */
  }
  .hero:not(.hero--plain) .eyebrow,
  .hero:not(.hero--plain) h1,
  .hero:not(.hero--plain) .hero__lead {
    text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 20px rgba(0,0,0,.65);
  }
  .hero:not(.hero--plain) .eyebrow { font-weight: 800; }
  .hero:not(.hero--plain) .hero__lead { font-weight: 600; }
}
/* דסקטופ: הטקסט מימין (RTL), ולכן מוחשך רק הצד הימני והתחתון */
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(to left, rgba(16,19,21,.80) 0%, rgba(16,19,21,.70) 52%,
                              rgba(16,19,21,.18) 80%, rgba(16,19,21,.06) 100%),
      linear-gradient(to top, rgba(16,19,21,.50) 0%, rgba(16,19,21,0) 45%);
  }
}
.hero--plain .hero__scrim { background: linear-gradient(to top, rgba(16,19,21,.14), rgba(16,19,21,.06)); }

/* דף הבית בדסקטופ: התמונה על כל רוחב הבאנר, מוארת ובלי טשטוש, והטקסט על לוח
   כהה משלו (כמו בטלפון). בעל העסק ביקש תמונה בהירה וגדולה, בלי החשכה על התמונה.
   58%: חלונות שחורים, מעקה ושפת הבריכה (נבדק בשבעה רוחבים, סוכן עיצוב 20). */
@media (min-width: 601px) {
  .hero:not(.hero--plain) { min-height: clamp(760px, calc(100svh + 180px), 1240px); align-items: center; }
  .hero:not(.hero--plain) .hero__bg img { object-position: 50% 40%; }
  .hero:not(.hero--plain) .hero__scrim { background: none; }
  .hero:not(.hero--plain) .wrap {
    flex: 0 1 auto; width: auto;
    max-width: min(44rem, calc(100% - 2rem));
    margin-inline-start: max(1rem, calc((100% - var(--wrap)) / 2 + 1rem));
    margin-inline-end: auto;
    padding: 1.75rem 2rem 2rem;
    /* בדיקה לבקשת בעל העסק (05/10): בלי לוח כהה מאחורי הכותרות. הלוח היה
       background: rgba(16,19,21,.66); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
       (6.0:1). בלעדיו הניגודיות נמדדה 1.3-2.9:1, מתחת לתקן, ולכן נוסף צל טקסט. */
  }
  .hero:not(.hero--plain) .eyebrow,
  .hero:not(.hero--plain) h1,
  .hero:not(.hero--plain) .hero__lead {
    text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 20px rgba(0,0,0,.65);
  }
  /* הטקסט הקטן בלי לוח: מעט גדול ועבה יותר (בקשת בעל העסק, 05/10) */
  .hero:not(.hero--plain) .eyebrow { font-size: 1.0625rem; font-weight: 800; letter-spacing: .06em; }
  .hero:not(.hero--plain) .hero__lead { font-size: clamp(1.2rem, 2.3vw, 1.4rem); font-weight: 600; }
  .hero:not(.hero--plain) h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
}

/* הלוגו יושב על המתכת, בחלק העמוק שמעל הקו */
.banner__brand {
  position: absolute; z-index: 3;
  /* נמדד בצילום האתר האמיתי: הסמל תופס שם x 40..362 מתוך 1314,
     ו-y 31..199. הכותרת שמתחתיו מסתיימת ב-232. */
  /* ממורכז אנכית בשטח השמאלי של הפס, לא נצמד לפינה: הגוש תופס את
     כל עומק הלוח ומרכז את תוכנו. קודם הוא היה מעוגן לראש והסמל
     נראה דחוק לפינה. */
  /* הסמל תמיד בתוך המלבן הכסוף — המישור העמוק של הלוח, שרץ מ-0 עד
     29% מהרוחב ובעומק --plate. זה ה"גריד" שאליו הכול מתיישר, והוא
     נגזר מהרוחב, ולכן הסמל גדל וקטן איתו אוטומטית.
     ברוחב מסך צר המלבן הזה צר מהסמל, ולכן --brand-w בוחר את הקטן
     מבין שני האילוצים. בלי זה הפינה הימנית-תחתונה של הכותרת חרגה
     אל תוך הצילום. */
  /* --region הוא המלבן שבתוכו הסמל חי. בדסקטופ הוא המישור העמוק
     של הלוח, 29% מהרוחב. במסך צר המישור הזה מתכווץ ל-113 פיקסלים
     והסמל היה יורד ל-92 — קטן ואבוד. שם נכנס האיבר השני ומרחיב
     אותו, והסמל נשאר על המתכת כי הפינה הימנית-תחתונה עדיין מעל
     קו החתך (נבדק: תחתית 107 מול חתך 117). */
  --region: max(29cqw, calc(var(--plate) * 1.05));
  --brand-w: min(calc(var(--plate) * 1.283), calc(var(--region) - var(--plate) * .16));
  inset-inline-end: calc((var(--region) - var(--brand-w)) / 2);
  top: 0; height: var(--plate);
  justify-content: center;
  /* רוחב ולא גובה: הגוש ממוקם absolute ורוחבו נגזר מהתוכן, ולכן גובה
     באחוזים על התמונה נחסם ע"י הרוחב הטבעי שלה והסמל יצא קטן ב-40%.
     22.84% ולא 24.51% שנמדדו בצילום: קובץ הלוגו שלנו ביחס 1.786
     והסמל בצילום ביחס 1.917, ולכן ברוחב זהה הוא גבוה ב-7% וחורג
     מתחת לשפת המתכת. הרוחב נגזר מהגובה המקורי — 12.79% מרוחב הבאנר. */
  /* נגזר מהלוח ולא מהרוחב: בצילום הסמל גבוה 12.79% מהרוחב והלוח
     18.49%, כלומר הסמל הוא 0.6917 מגובה הלוח — וברוחב, כפול היחס
     1.786 של הקובץ, 1.2355. ככה הוא נכנס בלוח בכל גודל. */
  width: var(--brand-w);
  display: flex; flex-direction: column;
  align-items: flex-start; gap: .25rem;
  text-decoration: none;
}
/* בצילום האתר האמיתי הסמל תופס 322 פיקסלים מתוך 1314 — 24.51% מהרוחב.
   ה-<picture> הוא inline, ולכן width:100% על התמונה נפתר מולו ולא מול
   הגוש, והסמל נשאר ברוחב הטבעי שלו. הוא חייב להיות block ברוחב מלא. */
.banner__brand picture { display: block; width: 100%; }
.banner__logo { width: 100%; height: auto; display: block; }
.banner__tag {
  /* נגזרת מ**רוחב הסמל** ולא מהלוח, כדי שתקטן ותגדל יחד איתו
     ולעולם לא תהיה רחבה ממנו. המקדם .0692 מגיע מרוחב המחרוזת:
     17 תווים, כל אחד כ-.55em ועוד .3em ריווח = 14.45em, ולכן
     גופן של brand-w/14.45 נותן כותרת ברוחב הסמל בדיוק. */
  /* הרצפה נגזרת מרוחב הלוח ולא מ-rem: --plate חסום ב-11.5rem ולכן
     אינו גדל עם הגופן, ורצפת rem קבועה הייתה מגלישה את הכיתוב
     אל מחוץ ללוח בהגדלת טקסט ל-200%. נמדד: x=-49 ברוחב 620. */
  font-size: min(calc(var(--brand-w) * .0692), 1.4rem);
  max-width: 100%; overflow: hidden;
  font-weight: 700; color: #1b1f22;
  letter-spacing: .3em; line-height: 1; white-space: nowrap;
}
/* שלושה ברגים, מרכזים נמדדו בצילום האתר האמיתי: (476,136), (885,37)
   ו-(1230,108) מתוך 1314 רוחב — 36.2%, 67.4% ו-93.6%. הקוטר 36
   פיקסלים = 2.74% מהרוחב. background-position באחוזים נפתר מול
   (מיכל − תמונה), ולכן האחוז אינו המרכז; חושב הפוך. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("../img/banner/screw.png?v=481bac59"),
                    url("../img/banner/screw.png?v=481bac59"),
                    url("../img/banner/screw.png?v=481bac59");
  background-repeat: no-repeat;
  /* background-position באחוזים נפתר מול (מיכל − תמונה), ולכן
     האחוז אינו מרכז הבורג. חושב הפוך מהמרכזים שנמדדו. */
  --screw: calc(var(--plate) * .1482);
  background-size: var(--screw) auto, var(--screw) auto, var(--screw) auto;
  background-position:
    35.84% calc(var(--plate) * .5598 - var(--screw) / 2),
    67.84% calc(var(--plate) * .1525 - var(--screw) / 2),
    94.84% calc(var(--plate) * .4446 - var(--screw) / 2);
}

.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero .eyebrow::before { background: var(--brand-400); }
.hero h1 { color: #fff; max-width: 24ch; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero__lead {
  font-size: clamp(1.075rem, 2.3vw, 1.28rem);
  color: #fff; max-width: 54ch; margin-bottom: var(--s6);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* בעמודי הפנים אותו באנר, בלי בלוק הכותרת והכפתורים */
.hero--plain {
  padding-block: 0;
  /* באנר נמוך יותר בעמודי הפנים: הכותרת והטלפון נראים מעל קו הקיפול גם במחשב נייד.
     הלוח, הלוגו, הברגים והזיגזג זהים לדף הבית (--plate נעצר ב-184px ממילא). */
  min-height: clamp(240px, 32vw, 420px);
}

/* בנייד הקו המשונן לא עובד — הלוח צר מדי והלוגו נדרס על הכותרת.
   שם המתכת היא פס ישר בגובה קבוע, והטקסט מתחיל מתחתיו. */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* פס אמון מתחת ל-hero */
.trustbar {
  background-color: var(--graphite-800); color: var(--alu-100);
  background-image: var(--brushed);
  border-bottom: 3px solid var(--brand-500);
}
.trustbar ul {
  display: grid; gap: var(--s3) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin: 0; padding-block: var(--s5); padding-inline: 0; list-style: none;
}
.trustbar li { display: flex; align-items: baseline; gap: var(--s2); font-size: .975rem; }
.trustbar strong { color: #fff; }
.trustbar .tick { color: var(--brand-400); flex: none; }
.trustbar .ic { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- Trust: כרטיס לבן צף שחוצה את תחתית התמונה ---------- */
.trust { background: var(--bg); }
.trust > .wrap { position: relative; z-index: 5; }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--card);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(22,25,27,.10), 0 2px 8px rgba(22,25,27,.06);
  margin-top: calc(var(--trust-overlap) * -1);          /* החציה על התמונה */
  padding: var(--s6) var(--s4);
}
.trust__item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s3);
  padding-inline: var(--s4);
  /* קווי הפרדה דקים בין העמודות, כמו ברפרנס */
  border-inline-start: 1px solid var(--line);
}
.trust__item:first-child { border-inline-start: 0; }
.trust__icon {
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--graphite-800);
}
.trust__icon .ic { width: 46px; height: 46px; stroke-width: 1.15; }
.trust__item h3 { margin: 0; font-size: 1.02rem; }
.trust__item p  { margin: 0; font-size: .9rem; color: var(--ink-mute); max-width: 30ch; }

/* קובייה שנושאת כותרת בלבד, בלי שורת התיאור האפורה. בלי זה הכותרת
   נצמדת לראש הקובייה ומשאירה מתחתיה חלל ריק, בזמן שהשכנות מלאות.
   הכותרת תופסת את הגובה שנותר ומתמרכזת בו — בערך בקו של הטקסט
   האפור בשאר הקוביות. */
.trust__item--solo > div {
  flex: 1;
  display: grid;
  place-items: center;
}
.trust__item--solo h3 { font-size: 1.22rem; }

@media (max-width: 960px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { border-inline-start: 0; border-top: 1px solid var(--line); padding-block: var(--s4); }
  .trust__item:nth-child(-n+2) { border-top: 0; }
  .trust__item:nth-child(even) { border-inline-start: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item:nth-child(even) { border-inline-start: 0; }
  .trust__item:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Services — רשת פאנלים עם קווי הפרדה דקים
   ========================================================================== */
.services {
  display: grid; gap: 1px;
  /* 12 מסלולים: כל כרטיס תופס 3/4/6/12, והשורה האחרונה נמתחת לפי השארית,
     כך שמספר כרטיסים כלשהו (כולל 17) לא משאיר תאים ריקים */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  /* לבן, לא --line: אחרת תאים ריקים בשורה האחרונה נראים כבלוקים אפורים */
  background: #fff;
  border: 1px solid var(--line);
}
.service {
  /* הקווים נוצרים מ-box-shadow ולא מרקע המכל, כדי שתאים ריקים יישארו לבנים */
  box-shadow: 0 0 0 1px var(--line);
  background: #fff; padding: var(--s5);
  display: flex; gap: var(--s3); align-items: flex-start;
  transition: background-color .15s;
}
.service { grid-column: span 12; }            /* עמודה אחת בנייד */

/* נייד: הלוח הכסוף והלוגו קטנים (22% מהרוחב במקום 34%) והפס התחתון נמוך יותר,
   כדי שהמתכת לא תשתלט על המסך ויישאר מקום לתמונה */
@media (max-width: 600px) {
  .hero { --plate-k: 22; }
}

/* 2 עמודות; כרטיס יתום תופס את כל השורה */
@media (min-width: 600px) and (max-width: 899.98px) {
  .service { grid-column: span 6; }
  .service:nth-child(2n+1):last-child { grid-column: 1 / -1; }
}

/* 3 עמודות; שארית 1 = רוחב מלא, שארית 2 = חצי-חצי */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .service { grid-column: span 4; }
  .service:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .service:nth-child(3n+1):nth-last-child(2),
  .service:nth-child(3n+1):nth-last-child(2) + .service { grid-column: span 6; }
}

/* 4 עמודות; שארית 1/2/3 ממלאת את השורה */
@media (min-width: 1200px) {
  .service { grid-column: span 3; }
  .service:nth-child(4n+1):last-child { grid-column: 1 / -1; }
  .service:nth-child(4n+1):nth-last-child(2),
  .service:nth-child(4n+1):nth-last-child(2) + .service { grid-column: span 6; }
  .service:nth-child(4n+1):nth-last-child(3),
  .service:nth-child(4n+1):nth-last-child(3) ~ .service { grid-column: span 4; }
}
.service:hover { background: var(--sand-100); }
.service:hover .service__icon { background: var(--card); color: var(--graphite-900); }
.service__icon {
  flex: none; width: 40px; height: 40px; margin-top: 2px;
  display: grid; place-items: center;
  color: var(--brand-600);
  background: var(--sand-100);
  border-radius: 4px;
}
.service__icon .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.service h3 { margin: 0 0 var(--s1); font-size: 1.075rem; }
/* ink-mute על לבן הוא 5.13:1, אבל ב-hover הרקע הופך ל-sand-100
   והיחס יורד ל-4.39:1. התקן חל על כל המצבים, ולכן הגוון הכהה. */
.service p  { margin: 0; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- אודות: קהלי היעד ---------- */
/* border-inline-start הוא הצד הימני ב-RTL, ולכן הפס נמצא בתחילת השורה
   ולא בסופה. השם והתיאור הם block ו-inline באותו li, כך שקורא מסך
   קורא אותם כפריט אחד רצוף. */
.about__subhead {
  margin: var(--s6) 0 var(--s3);
  font-size: 1.075rem;
}
.about__audiences {
  margin: 0 0 var(--s5); padding: 0; list-style: none;
  display: grid; gap: var(--s4);
}
.about__audiences li {
  padding-inline-start: var(--s4);
  border-inline-start: 3px solid var(--brand-500);
}
.about__audiences strong {
  display: block; margin-bottom: var(--s1);
  color: var(--graphite-900);
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.gallery__item { margin: 0; }
/* גם תמונה ללא כפתור (התצוגה המקדימה בדף הבית) חייבת יחס אחיד,
   אחרת צילומי פורטרט שוברים את שורות הרשת. */
.gallery__item > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--graphite-800);
}
.gallery__btn {
  display: block; width: 100%; padding: 0; position: relative;
  background: var(--graphite-800); border: 0; cursor: pointer; overflow: hidden;
  transition: box-shadow .15s;
}
/* <picture> הוא inline; בלי block רוחב התמונה נפתר מולו ולא מול הכפתור */
.gallery__btn picture { display: block; }
/* aspect-ratio 4/3 חייב להיות זהה ל-THUMB_RATIO ב-build_gallery.py,
   שלפיו הממוזערות כבר נחתכות. שינוי כאן בלי שם יחתוך אותן פעמיים. */
.gallery__btn img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .3s, opacity .2s;
}
.gallery__btn:hover { box-shadow: var(--shadow-md); }
.gallery__btn:hover img { transform: scale(1.045); opacity: .92; }
.gallery__btn::after {
  content: ""; position: absolute; inset: 0;
  border: 3px solid transparent; transition: border-color .15s;
}
.gallery__btn:hover::after { border-color: var(--brand-500); }

/* ---------- לשוניות הגלריה — נוצרות מתיקיות ב-content/gallery ---------- */
.gal-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s3);
}
.gal-tab {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: .5rem 1.1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: .975rem;
  color: var(--ink-soft); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.gal-tab:hover { border-color: var(--brand-500); color: var(--graphite-900); }
.gal-tab.is-active {
  background: var(--graphite-900); border-color: var(--graphite-900); color: #fff;
}
.gal-tab__n {
  font-size: .8125rem; font-weight: 600;
  /* על sand-100 הגוון העמום נותן 4.39:1 — מתחת ל-4.5 */
  color: var(--ink-soft); background: var(--sand-100);
  border-radius: 999px; padding: .05rem .5rem;
}
.gal-tab.is-active .gal-tab__n { color: var(--graphite-900); background: var(--brand-400); }

.gal-cat__title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: var(--s2); }
.gal-cat__desc  { color: var(--ink-soft); margin-bottom: var(--s5); }
.gal-cat + .gal-cat { margin-top: var(--s7); }
/* hidden לא מנצח את display של הלשונית, ולכן במפורש */
.gal-tab[hidden] { display: none; }
.gal-cat--all + .gal-cat { margin-top: 0; }
@media (max-width: 600px) {
  /* חמש לשוניות נשברו לחמש שורות. שתי עמודות, ו"הצג הכול" ברוחב מלא */
  .gal-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .gal-tab { justify-content: space-between; padding: .5rem .75rem; text-align: start; }
  .gal-tab--all { grid-column: 1 / -1; }
}

/* ---------- Lightbox ---------- */
.lightbox { touch-action: pan-y;
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(12, 14, 16, .95);
  padding: var(--s5);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.lightbox__img { max-width: 100%; max-height: 74vh; width: auto; margin-inline: auto; background: var(--graphite-900); }
.lightbox__caption { color: var(--alu-200); font-size: .9375rem; margin-top: var(--s3); }
.lightbox__bar {
  /* שתי הרצועות הצדדיות פרושות על מלוא הגובה, ו---next מאוחר יותר
     ב-DOM. בלי z-index הוא נצבע מעל ה-✕, ולחיצה עליו קידמה תמונה
     במקום לסגור. נמדד ב-elementFromPoint. */
  z-index: 3;
  position: absolute; top: var(--s4); inset-inline: var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.lightbox__count { color: var(--alu-200); font-size: .9375rem; }
.lb-btn {
  min-width: 48px; min-height: 48px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff;
  border: 2px solid rgba(255,255,255,.3); border-radius: var(--radius);
  font: inherit; font-size: 1.35rem; font-weight: 700; cursor: pointer;
}
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lightbox__nav {
  /* מתחילות מתחת לסרגל, כדי שלא ידרסו אותו ולא יחסמו לחיצת רקע לסגירה */
  position: absolute; inset-block: 80px 0; display: grid; place-items: center;
  padding-inline: var(--s3); border: 0; background: none; cursor: pointer;
}
/* ב-RTL inline-start הוא ימין. "הקודם" יושב בימין, כמו סדר התמונות
   ברשת וכמו מיפוי המקשים ב-site.js (חץ ימינה = הקודם). */
.lightbox__nav--prev { inset-inline-start: 0; }
.lightbox__nav--next { inset-inline-end: 0; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   Contact
   ========================================================================== */
/* חמישה כרטיסים ברוחב שווה. השורה האחרונה ממורכזת, כדי שלא יישאר חור
   בצד ולא יימתח כרטיס בלי סיבה (3+2 במחשב, אחד מתחת לשני בטלפון). */
.contact-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4);
}
.contact-card {
  flex: 1 1 300px; max-width: 360px;
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--brand-500);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.contact-card h3 { margin: 0 0 var(--s2); font-size: 1rem; color: var(--ink-mute); }
.contact-card .big {
  font-size: 1.4rem; font-weight: 800; color: var(--graphite-900);
  text-decoration: none; display: inline-block;
}
.contact-card a.big:hover { color: var(--brand-600); text-decoration: underline; }
.contact-card p { margin: var(--s2) 0 0; font-size: .9375rem; color: var(--ink-mute); }
/* טלפון ווואטסאפ הם אותו מספר: כרטיס אחד ושני כפתורים. המספר עצמו
   אינו קישור, כדי שלא יהיו שני קישורי חיוג צמודים (קורא מסך מקריא פעמיים). */
.contact-card__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.contact-card__actions .btn { padding: .6rem 1.1rem; min-height: 44px; font-size: .95rem; }
/* פקס אינו שווה־ערך לנייד: המספר קטן יותר. הפס העליון זהה לשאר
   הכרטיסים, לבקשת בעל העסק (27/10/2026). */
.contact-card--minor .big { font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); }

/* שאלות ותשובות: ארבעה כרטיסים, עמודה אחת בנייד */
.faq { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.faq__item {
  padding: var(--s5); background: var(--card);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--brand-500);
}
.faq__item h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.faq__item p { margin: 0; color: var(--ink-soft); }

.cta {
  background: var(--sand-100);
  color: var(--ink); text-align: center; padding-block: var(--s8);
  border-block: 1px solid var(--line);
  border-top: 3px solid var(--brand-500);
}
.cta h2 { color: var(--graphite-900); }
.cta p { color: var(--ink-soft); margin-inline: auto; margin-bottom: var(--s6); }
/* שעות הפעילות צמודות לכפתורי הפנייה. העסק סגור מ-16:30 וחלק ניכר
   מהגלישה לאתרי בית קורה בערב — בלי השורה הזו הגולש מחייג, לא נענה,
   ועובר לעסק הבא. */
.cta__hours { margin: var(--s4) 0 0; font-size: .9375rem; opacity: .85; }

.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* ==========================================================================
   Footer + פעולות מהירות
   ========================================================================== */
.footer {
  /* גוף הפוטר נשאר כהה — לוח האלומיניום הוא פס התחתית, כמו באתר הקודם */
  background-color: var(--graphite-900);
  background-image: var(--brushed);
  color: var(--chrome-300);
  border-top: 4px solid var(--brand-500);
  padding-block: var(--s7) 0; font-size: .9375rem;
}
.footer a { color: var(--brand-400); }
.footer a:hover { color: #fff; text-decoration-thickness: 2px; }
.footer__grid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(235px, 300px));
  justify-content: space-between;
  padding-bottom: var(--s5);
}
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--s3); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { margin-bottom: var(--s2); }
/* פס התחתית — לוח האלומיניום. יושב מחוץ ל-.wrap כדי שיימתח לרוחב המסך
   והברגים יישבו בפינות, בדיוק כמו הפס העליון. */
/* בעמוד הנגישות אין עמודות בפוטר — רק פס התחתית */
.footer--slim { padding-top: var(--s4); }
/* פס התחתית — אותו לוח, עם החתך בקצה העליון.
   באתר המקורי SB_Bottom_Container הציג את אותו PNG בדיוק, בכיוון
   שלו ולא משוקף, ולכן החתך כאן הפוך לזה שבבאנר: העמוק באמצע-שמאל.
   הגובה 15.2vw הוא היחס שבקובץ המקור — 152 פיקסלים לכל 1000 רוחב. */
.footer__bottom {
  /* הילה בהירה מתחת לאותיות. הניגודיות המחושבת עוברת (5.3:1), אבל
     הטקסט יושב על מרקם מוברש רועש וההילה היא מה שמפריד אותו ממנו. */
  font-size: .9375rem; font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  position: relative;
  /* 9.5rem = 152 פיקסלים, בדיוק גובה הפס בקובץ המקור. */
  /* --fb: גובה הפס כפי שהוא במקור. החתך נגזר ממנו ולא מגובה האלמנט, כך שכשהטקסט
     נשבר לשורה נוספת החתך לא מעמיק ולא בולע את השורה. הריפוד העליון שומר לו מקום. */
  --fb: max(112px, min(15.2vw, 9.5rem));
  min-height: var(--fb);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--fb) * .52 + var(--s2)) var(--s5);
  clip-path: polygon(
      0    calc(var(--fb) * .25),
     15.8% calc(var(--fb) * .25),
     21.2% calc(var(--fb) * .5197),
     49.6% calc(var(--fb) * .5197),
     62.6% calc(var(--fb) * .0197),
    100%   calc(var(--fb) * .0197),
    100%  100%,
      0   100%);
  border-top: 0;      /* הקצה נוצר עכשיו מהחתך, לא ממסגרת */
}
/* נייד: פס תחתון נמוך יותר (84px במקום 112px) */
@media (max-width: 600px) {
  .footer__bottom { --fb: max(84px, min(15.2vw, 9.5rem)); }
}
/* הברגים צמודים לחתך, במרכזים שנמדדו בקובץ המקור:
   (62,66), (628,44) ו-(922,40) מתוך פס של 1000x152. */
.footer__bottom.metal::before {
  background-size: 3% auto, 3% auto, 3% auto;
  background-position: 4.85% calc(var(--fb) * .4342 - 1.5vw),
                       63.2% calc(var(--fb) * .2895 - 1.5vw),
                       93.51% calc(var(--fb) * .2632 - 1.5vw);
}
/* קו השיפוע לאורך החתך של הפס התחתון */
.footer__edge {
  position: absolute; inset: 0 0 auto; z-index: 1;
  width: 100%; height: var(--fb); pointer-events: none;
}
/* כאן ולא בשבירה הכללית: לסלקטור הזה specificity גבוהה יותר,
   ולכן כלל .metal::before בתוך המדיה לא היה מנצח אותו. */
@media (max-width: 720px) {
  .footer__bottom.metal::before { background-size: 15px 15px; }
}
.footer__bottom .wrap {
  /* מקום לשני העיגולים הצפים, שלא יכסו את שורת הזכויות */
  padding-inline-end: 4.5rem;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between; align-items: center;
}

/* שורת הפרטים על הפס הכסוף, כמו באתר הישן: כתובת | נייד | פקס | אימייל,
   עם מפריד טורקיז כהה, ומתחתיה שורת הזכויות. */
.footer__bottom .footer__strip {
  display: block; text-align: center;
  padding-inline: 4.5rem;   /* שני הצדדים סימטריים: מקום לעיגולים הצפים משמאל */
}
.footer__bottom .footer__strip { width: 100%; }
.footer__contact, .footer__legal { max-width: none; }
.footer__contact { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.footer__legal { margin: .15rem 0 0; font-size: .8125rem; font-weight: 600; }
.footer__item { white-space: nowrap; }
/* קישורים על המתכת בצבע כהה, לא בטורקיז הבהיר של הפוטר הכהה (ניגודיות) */
.footer__bottom a { color: var(--plate-ink); text-decoration-color: rgba(22,25,27,.55); }
.footer__bottom a:hover { color: var(--plate-ink); text-decoration-thickness: 2px; }
.footer__sep { color: var(--plate-teal); font-weight: 700; margin-inline: .65em; }
.footer__legal a { color: var(--plate-ink); }
@media (max-width: 600px) {
  .footer__bottom .footer__strip { padding-inline: var(--s4) 4.25rem; }
  .footer__contact { font-size: .8125rem; line-height: 1.55; }
  .footer__legal { font-size: .75rem; }
  .footer__loc { display: none; }   /* בנייד נשארת רק שורת הזכויות */
}

/* דסקטופ: עיגולים בפינה. מובייל: סרגל תחתון קבוע שלא מכסה טקסט. */
/* שני עיגולים בפינה, בכל גודל מסך. קודם הם הפכו מתחת ל-1024px
   לרצועה ברוחב מלא בגובה 72px — בעל העסק ביקש משהו קטן ועקבי.
   שמות הכפתורים נשארים לקוראי מסך ב-.visually-hidden שבתוך כל אחד. */
.floating {
  position: fixed; z-index: 90;
  /* בצד שמאל (inline-end ב-RTL): שם שורות בעברית נגמרות, ולכן העיגולים לא מכסים את תחילת הטקסט */
  inset-block-end: var(--s4); inset-inline-end: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; text-decoration: none; box-shadow: var(--shadow-md);
}
.fab__icon .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.fab__label { display: none; }
.fab--wa  { background: var(--wa); }
.fab--tel { background: var(--graphite-800); }
.fab:hover { filter: brightness(1.12); color: #fff; }

/* העיגולים צפים ולא תופסים מקום בזרימה — אין צורך בריפוד תחתון */
@media (max-width: 720px) {
  .floating { inset-block-end: var(--s3); inset-inline-end: var(--s3); }
  .fab { width: 48px; height: 48px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .floating, .nav__toggle, .cta, .lightbox,
  .hero__bg, .hero__scrim, .banner__brand { display: none !important; }
  /* בלי זה ההדפסה יצאה עם הסקרים הכהה ומרקם המתכת, בלי הצילום */
  .hero { background: none !important; min-height: 0 !important; padding-block: 0 !important; }
  .hero::before, .hero::after { display: none !important; }
  .hero h1, .hero__lead, .hero .eyebrow { color: #000 !important; text-shadow: none !important; }
  body { font-size: 11pt; padding-block-end: 0; }
  .hero__edge, .hero__actions, .footer__edge { display: none !important; }
  .trust__grid { margin-top: 0 !important; box-shadow: none; }
  .footer, .footer a, .footer h3, .footer__bottom { color: #000 !important; background: none !important; text-shadow: none; }
  .footer__bottom { clip-path: none; }
}

/* דפדפן בלי container units (iOS 15, אייפדים ישנים): בלי זה --plate נפסל והצילום מכסה את המתכת */
@supports not (width: 1cqw) {
  .hero { --plate: min(calc(var(--plate-k) * 1vw), 11.5rem); }
  .hero::before { background-size: 100% 16.49vw; }
}