/* ================= header / nav =================
   The header floats over the brand band at the top of every page, so it is
   transparent (white text) until the page scrolls, then it becomes a solid bar. */
.site-header{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.site-header.is-stuck{background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--line);box-shadow:var(--sh-1)}
@media (prefers-reduced-transparency:reduce){.site-header.is-stuck{background:var(--paper);backdrop-filter:none}}
.hdr{display:flex;align-items:center;gap:1.4rem;height:86px}
@media (max-width:1023px){.hdr{height:74px}}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0;text-decoration:none}
.brand img{height:38px;width:auto;transition:filter var(--dur) var(--ease)}
/* two logo files, no filter tricks: white over the band, colour once stuck */
.brand img{height:38px;width:auto}
/* הלוגו הוגדל לפי בקשת הלקוח: 50px במחשב, 46px בטלפון (ההדר שם 74px). */
@media (max-width:1023px){.brand img{height:46px}}
@media (min-width:1024px){.brand img{height:50px}}
.logo-on-paper{display:none}
.site-header.is-stuck .logo-on-band{display:none}
.site-header.is-stuck .logo-on-paper{display:block}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:.1rem}
.nav a{font-family:var(--f-display);font-weight:600;font-size:.955rem;color:#fff;
  text-decoration:none;padding:.55rem .72rem;border-radius:var(--r-pill);white-space:nowrap;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav a[aria-current="page"]{background:rgba(255,255,255,.18);color:#fff}
.site-header.is-stuck .nav a{color:var(--ink-2)}
.site-header.is-stuck .nav a:hover{background:var(--stone);color:var(--ink)}
.site-header.is-stuck .nav a[aria-current="page"]{background:var(--b-50);color:var(--accent)}
.hdr-cta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.hdr-tel{font-family:var(--f-display);font-weight:700;color:#fff;text-decoration:none;
  font-size:.955rem;padding:.55rem .7rem;border-radius:var(--r-pill);white-space:nowrap;
  direction:ltr;unicode-bidi:isolate}
.hdr-tel:hover{background:rgba(255,255,255,.16);color:#fff}
.site-header.is-stuck .hdr-tel{color:var(--ink)}
.site-header.is-stuck .hdr-tel:hover{background:var(--stone);color:var(--ink)}
.hdr .btn{padding:.8em 1.4em;font-size:.93rem}
.site-header:not(.is-stuck) .hdr .btn-primary{background:#fff;color:var(--accent-strong);
  box-shadow:0 8px 22px rgba(7,40,44,.25)}
.site-header:not(.is-stuck) .hdr .btn-primary:hover{background:var(--b-50)}
.burger{display:none;margin-inline-start:auto;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  border-radius:var(--r-pill);cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.site-header.is-stuck .burger{border-color:var(--line);background:var(--surface)}
.site-header.is-stuck .burger span{background:var(--ink)}
/* dropdown */
.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-inline-start:.42em;
  border-inline-end:1.8px solid currentColor;border-block-end:1.8px solid currentColor;
  transform:translateY(-.14em) rotate(45deg);transition:transform var(--dur) var(--ease)}
.has-sub:hover>a::after,.has-sub:focus-within>a::after{transform:translateY(.02em) rotate(225deg)}
.sub{position:absolute;inset-inline-start:0;top:calc(100% + .4rem);min-width:252px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:.45rem;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{margin:0}
.sub a{display:block;padding:.6rem .8rem;font-size:.93rem;font-weight:600;color:var(--ink-2);border-radius:var(--r-sm)}
.sub a:hover{background:var(--accent-wash);color:var(--accent-ink)}
/* "כל אזורי השירות בארץ" — שורה מסכמת בתחתית תפריט האזורים, כמו בפוטר.
   שתי שורות טקסט, ולכן העוגן הוא flex טור ולא block כמו שאר הפריטים. */
.sub-all{margin-top:.3rem;padding-top:.35rem;border-top:1px solid var(--line)}
.sub .sub-all a{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.sub-all-t{display:inline-flex;align-items:center;gap:.38rem;color:var(--ink);font-weight:700}
.sub-all-s{font-size:.8rem;font-weight:500;line-height:1.45;color:var(--ink-3)}
.sub .sub-all a:hover .sub-all-t,.sub .sub-all a:hover .sub-all-s{color:var(--accent-ink)}
.sub-all svg{flex:none;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover){.sub .sub-all a:hover svg{transform:translateX(-3px)}}

/* drawer */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:70;background:var(--paper);
  transform:translateX(-100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--gut);border-bottom:1px solid var(--line);min-height:64px}
.drawer-close{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;font-size:1.4rem;line-height:1;color:var(--ink)}
.drawer nav{padding:1rem var(--gut) 2rem;display:flex;flex-direction:column}
.drawer nav a{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--ink);
  text-decoration:none;padding:1.02rem .2rem;border-bottom:1px solid var(--line)}
.drawer nav a[aria-current="page"]{color:var(--accent)}
.drawer-foot{margin-top:auto;padding:1.4rem var(--gut) 2rem;display:grid;gap:.6rem;
  border-top:1px solid var(--line);background:var(--stone)}
@media (max-width:1023px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
}

/* ================= footer ================= */
.site-footer{background:var(--footer);color:#C9D1D2;padding-block:clamp(3rem,2rem + 3.6vw,4.6rem) 0;margin-top:0}
.site-footer h3{color:#fff;font-size:1rem;font-weight:700;margin-bottom:1.05rem;letter-spacing:0}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(1.8rem,1rem + 3vw,3.4rem)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr;gap:2rem}}
.ftr-grid ul{list-style:none;margin:0;padding:0}
.ftr-grid li{margin-bottom:.58rem}
.ftr-grid a{color:#C9D1D2;text-decoration:none;font-size:.945rem;transition:color var(--dur) var(--ease)}
.ftr-grid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr-about p{font-size:.945rem;line-height:1.72;color:#A7B1B3;max-width:38ch}
.ftr-brand img{height:42px;width:auto;margin-bottom:1.1rem;opacity:.95}
/* הקישור לעמוד האב בסוף הרשימה. לבן ומודגש כדי שייקרא כיעד ולא
   כעוד עיר ברשימה, עם רווח שמפריד אותו מהערים שמעליו. */
.ftr-grid .ftr-all{margin-top:.95rem}
.ftr-grid .ftr-all a{display:flex;flex-direction:column;gap:.16rem}
.ftr-grid .ftr-all a:hover{text-decoration:none}
.ftr-all-t{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:600}
.ftr-grid .ftr-all a:hover .ftr-all-t{text-decoration:underline;text-underline-offset:3px}
.ftr-all-s{font-size:.83rem;line-height:1.5;color:#A7B1B3}
.ftr-grid .ftr-all svg{flex:none;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover){.ftr-grid .ftr-all a:hover svg{transform:translateX(-4px)}}
.ftr-contact a{display:flex;align-items:center;gap:.55rem;font-weight:600;color:#fff}
.ftr-contact .ltr{direction:ltr;unicode-bidi:isolate}
.ftr-bottom{margin-top:clamp(2.4rem,1.6rem + 2.4vw,3.4rem);border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.4rem 1.7rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;
  align-items:center;justify-content:space-between;font-size:.865rem;color:#8E9899}
.ftr-bottom a{color:#8E9899;text-decoration:none}
.ftr-bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr-credit a{font-weight:700;color:#C9D1D2}

/* floating mobile call bar */
.callbar{position:fixed;inset-inline:0;bottom:0;z-index:55;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  box-shadow:0 -2px 18px rgba(19,26,27,.14);padding-bottom:env(safe-area-inset-bottom)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .5rem;font-family:var(--f-display);font-weight:700;font-size:.97rem;
  text-decoration:none;background:var(--surface);color:var(--ink)}
.callbar a.is-primary{background:var(--accent);color:#fff}
.callbar svg{width:19px;height:19px;flex-shrink:0}
@media (max-width:767px){
  .callbar{display:grid}
  body{padding-bottom:58px}
}

/* The header floats above the first brand band, so it is taken out of flow
   and every page's first section reserves its height. */
:root{--hdr:86px}
@media (max-width:1023px){:root{--hdr:74px}}
.site-header{position:fixed;inset-inline:0;top:0}
.hero,.page-hero{padding-top:calc(var(--hdr) + clamp(2rem,1.4rem + 2.6vw,3.4rem))}
[id]{scroll-margin-top:calc(var(--hdr) + 1rem)}

/* ==========================================================================
   12. הגנה על רצועות grid ו-flex מפני תוכן רחב
   --------------------------------------------------------------------------
   רצועת 1fr היא בפועל minmax(auto,1fr), ולפריט flex יש min-width:auto.
   המשמעות: פריט שה-min-content שלו רחב — טבלה עם min-width, מילה ארוכה,
   תמונה בלי max-width — מרחיב את הרצועה מעבר לרוחב המכולה, והגלישה
   מטפסת עד ל-html וגוררת גלילה אופקית של *כל* העמוד. זה מה שקרה בעמודי
   השירות והאזורים: .ftable עם min-width:32rem דחף את .rich ל-514px בתוך
   מסך של 390px, וכל שורת טקסט בעמוד יצאה מהמסך.
   איפוס המינימום מחזיר את השליטה למכולה. התוכן שבאמת רחב מקבל גלילה
   משל עצמו במקום לגרור את העמוד (.ftable-wrap).
   ========================================================================== */
.split > *,
.rich > *,
.rich-block > *,
.geo-grid > *,
.cta-band > *,
.feat > *,
.grid > *,
.steps > *,
.flow-steps > *,
.spec > *,
.ftr-grid > *,
.bc-form-grid > *,
.bc-form--bar > *,
.snap-row > *,
.shift-row > *,
.tst-rail > *,
.trust-row > *,
.geo-rest-in > *,
.mrest-in > *,
.rv-track > *,
.wall-rail > *{min-width:0}
.rich,.sticky-col,.feat-copy,.cta-copy,.geo-copy{min-width:0}

/* הגלילה האופקית של הטבלה חייבת min-width:0 כדי לעבוד בתוך flex/grid:
   בלעדיו הסקרולר "נפתח" לרוחב התוכן במקום לגלול אותו. */
.ftable-wrap{min-width:0;max-width:100%}

/* רשת אחרונה: אף מדיה או קוד מוטבע לא יוצא מהמכולה שלו. */
img,svg,video,canvas,iframe,table{max-width:100%}