/* ==========================================================================
   BE CLEAN — סקשנים מורכבים
   כללי תנועה בקובץ הזה:
   1. כניסה ויציאה תמיד --ease-out. תנועה על המסך --ease-io. תנועה קבועה linear.
   2. אנימציות UI מתחת ל-300ms. רק ציר הזמן וה-marquee ארוכים, כי הם נצפים
      פעם אחת בגלילה ולא נלחצים עשרות פעמים ביום.
   3. מנפישים רק transform ו-opacity.
   4. כל hover מוגן ב-(hover:hover) כדי שלא ייתפס בנגיעה במובייל.
   5. prefers-reduced-motion מסיר תנועה ומשאיר את התוכן נגיש במלואו.
   ========================================================================== */

/* ================================ eyebrow ================================ */
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-display);font-weight:700;font-size:.79rem;letter-spacing:.04em;
  color:var(--accent);background:var(--accent-wash);border:1px solid var(--b-100);
  border-radius:var(--r-pill);padding:.34rem .82rem;margin-bottom:1rem}
.eyebrow svg{color:var(--accent);flex:none}
.band .eyebrow{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.band .eyebrow svg{color:var(--accent-bright)}
.s-head-c .eyebrow{margin-inline:auto}

/* ==========================================================================
   קיר ההמלצות — marquee של הודעות הוואטסאפ האמיתיות
   כל כרטיס הוא כפתור שפותח את צילום המסך המקורי, ולכן אין צ'יפ "ההודעה
   המקורית" שמלכלך את הכרטיס. הרמז מופיע ב-hover ובקורא מסך.
   ========================================================================== */
.wall{position:relative;overflow:hidden}
.wall::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 44% at 82% 8%, color-mix(in srgb,var(--b-200) 52%,transparent) 0%, transparent 72%),
    radial-gradient(46% 40% at 12% 94%, color-mix(in srgb,var(--b-100) 72%,transparent) 0%, transparent 72%)}
.wall > *{position:relative}

.wall-rail{width:100%;padding-block:.4rem 1.2rem;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.wall-track{display:flex;gap:1.05rem;width:max-content;padding-inline:var(--gut);
  animation:wall-drift 86s linear infinite}
/* המסלול מוכפל, ולכן הזזה של חצי מרוחבו נופלת בדיוק על אותו פריט = לופ חלק.
   RTL: הכפילות יושבת שמאלה, ולכן תנועה חיובית מכניסה פריטים משמאל,
   כלומר בכיוון הקריאה של עברית. */
@keyframes wall-drift{from{transform:translateX(0)}to{transform:translateX(50%)}}
.wall-rail:hover .wall-track,
.wall-rail:focus-within .wall-track{animation-play-state:paused}

/* ---- כרטיס הודעה ---- */
.wa{flex:0 0 clamp(268px,76vw,332px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;
  font:inherit;color:inherit;text-align:start;padding:0;
  transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .wa:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--b-300)}
}
.wa:active{transform:scale(.988)}
.wa:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.wa-top{display:flex;align-items:center;gap:.6rem;padding:.68rem .8rem;flex:none}
.wa-av{width:34px;height:34px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--b-400),var(--b-700));color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.86rem;line-height:1}
.wa-id{flex:1;min-width:0}
.wa-id .n{display:block;font-family:var(--f-display);font-weight:700;font-size:.895rem;
  line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-id .r{display:block;font-size:.735rem;color:var(--ink-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-mark{flex:none;color:#25D366}

.wa-chat{position:relative;flex:1;display:flex;flex-direction:column;gap:.5rem;
  padding:.85rem .8rem 1.1rem;background:#ECE5DD;
  border-top:1px solid color-mix(in srgb,#0B141A 10%,transparent)}
.wa-date{align-self:center;background:rgba(255,255,255,.9);border-radius:8px;flex:none;
  padding:.14rem .62rem;font-size:.69rem;color:#54656F;letter-spacing:.01em}
.wa-bubble{position:relative;align-self:flex-start;max-width:97%;background:#fff;
  border-radius:12px;border-start-start-radius:3px;
  padding:.6rem .72rem .42rem;box-shadow:0 1px 1px rgba(11,20,26,.14)}
.wa-bubble::before{content:"";position:absolute;top:0;inset-inline-start:-7px;
  width:8px;height:12px;background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-msg{display:block;font-size:.875rem;line-height:1.62;color:#111B21;text-wrap:pretty}
.wa-time{display:block;text-align:end;font-size:.655rem;color:#667781;margin-top:.22rem;
  direction:ltr;unicode-bidi:isolate}

/* רמז שהכרטיס פותח את צילום המסך. לא מוצג עד hover, וב-touch לא מוצג בכלל. */
.wa-hint{position:absolute;inset-inline:.8rem;bottom:.55rem;display:flex;align-items:center;
  justify-content:center;gap:.35rem;padding:.3rem .6rem;border-radius:var(--r-pill);
  background:rgba(11,20,26,.78);color:#fff;font-family:var(--f-display);
  font-weight:600;font-size:.7rem;opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .wa:hover .wa-hint,.wa:focus-visible .wa-hint{opacity:1;transform:none}
}

/* ---- פס שמות הלקוחות ---- */
.clients{list-style:none;margin:clamp(1.6rem,1.2rem + 1vw,2.4rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem clamp(1rem,.5rem + 2vw,2.4rem)}
.clients li{margin:0;font-family:var(--f-display);font-weight:700;font-size:.93rem;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:.45rem}
.clients li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--b-300);flex:none}
.wall-note{text-align:center;font-size:var(--t-xs);color:var(--ink-3);margin:.9rem 0 0}

@media (prefers-reduced-motion:reduce){
  .wall-rail{overflow-x:auto;scroll-snap-type:x mandatory}
  .wall-track{animation:none;width:auto}
  .wa{scroll-snap-align:start}
  .wa:hover,.wa:active{transform:none}
}

/* ==========================================================================
   אזורי שירות — פאנל ערים
   ========================================================================== */
.geo-grid{display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(1.8rem,1rem + 3vw,3.6rem);align-items:start}
@media (max-width:959px){.geo-grid{grid-template-columns:1fr}}
.geo-copy p{color:var(--ink-2)}
.geo-copy .btn{margin-top:1.4rem}
.geo-wide{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.6rem;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.geo-wide svg{flex:none;margin-top:.18em;color:var(--accent)}
.geo-wide p{font-size:var(--t-sm);color:var(--ink-3);margin:0;line-height:1.6}

.geo-panel{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);padding:.45rem}
.geo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--b-300) 46%,transparent) 1px,transparent 1px);
  background-size:18px 18px;opacity:.5}
.geo-panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 88% 4%, color-mix(in srgb,var(--b-100) 92%,transparent) 0%, transparent 70%)}
.geo-list{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2px}
/* אותה נקודת שבירה של האקורדיון שבהמשך הקובץ: מתחתיה הרשימה עמודה אחת,
   וארבע השורות הראשונות בלבד פתוחות. */
@media (max-width:767px){.geo-list{grid-template-columns:1fr}}

.geo-row{position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.8rem .85rem;border-radius:var(--r-sm);text-decoration:none;color:inherit;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  transition:background var(--dur-ui) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .geo-row:hover{background:var(--accent-wash)}
  .geo-row:hover .geo-go{transform:translateX(-4px)}
  .geo-row:hover .geo-dot::after{opacity:1}
}
.geo-row:active{transform:scale(.99)}
.geo-dot{position:relative;flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.geo-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:.65;animation:geo-pulse 2.8s var(--ease-out) infinite}
.geo-txt{min-width:0;flex:1}
.geo-txt .c{display:block;font-family:var(--f-display);font-weight:700;font-size:1.005rem;
  line-height:1.3;color:var(--ink)}
.geo-txt .z{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-go{flex:none;color:var(--accent);transition:transform var(--dur-ui) var(--ease-out)}
.geo-all{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.8rem .85rem;border-radius:var(--r-sm);text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  color:var(--accent-ink);background:var(--accent-wash);border:1px dashed var(--b-300);
  transition:background var(--dur-ui) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.geo-all svg{color:var(--accent);flex:none;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .geo-all:hover{background:var(--b-100)}
  .geo-all:hover svg{transform:translateX(-4px)}
}
.geo-all:active{transform:scale(.99)}

@keyframes geo-pulse{
  0%{transform:scale(.8);opacity:.7}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .geo-dot::after{animation:none;opacity:0}
  .geo-row:active{transform:none}
}

/* ==========================================================================
   איך מתחילים — ציר זמן שנמשך בגלילה
   ========================================================================== */
.flow-steps{--fgap:clamp(1rem,.5rem + 1.6vw,2.1rem);
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fgap)}

/* הקו הוא קטע לכל שלב, מקצה העיגול שלו ועד קצה העיגול הבא, עם 12px אוויר
   משני הצדדים. כך הוא לא עובר מעל המספרים, לא בולט מעבר לשלב הראשון
   והאחרון, ובכל זאת נמשך שלב אחר שלב. העיגול הוא 46px, ולכן 46+12=58. */
.fstep{position:relative;padding-top:3.7rem}
.fstep::before,.fstep::after{content:"";position:absolute;top:22px;height:2px;
  inset-inline-start:58px;width:calc(100% + var(--fgap) - 70px);border-radius:2px;
  pointer-events:none;z-index:0}
.fstep::before{background:var(--line)}
.fstep::after{background:linear-gradient(to left,var(--accent),var(--b-300));
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .42s var(--ease-io)}
.fstep:last-child::before,.fstep:last-child::after{content:none}
.flow-steps.is-in .fstep::after{transform:scaleX(1)}
.flow-steps.is-in .fstep:nth-child(1)::after{transition-delay:.1s}
.flow-steps.is-in .fstep:nth-child(2)::after{transition-delay:.42s}
.flow-steps.is-in .fstep:nth-child(3)::after{transition-delay:.74s}
.fstep-n{position:absolute;top:0;inset-inline-start:0;width:46px;height:46px;z-index:1;
  border-radius:var(--r-pill);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:1.08rem;line-height:1;
  background:var(--paper);border:2px solid var(--line);color:var(--ink-3);
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),
             color .3s var(--ease-out),transform .3s var(--ease-out)}
.flow-steps.is-in .fstep-n{background:var(--accent);border-color:var(--accent);color:#fff}
.flow-steps.is-in .fstep:nth-child(1) .fstep-n{transition-delay:.04s}
.flow-steps.is-in .fstep:nth-child(2) .fstep-n{transition-delay:.42s}
.flow-steps.is-in .fstep:nth-child(3) .fstep-n{transition-delay:.74s}
.flow-steps.is-in .fstep:nth-child(4) .fstep-n{transition-delay:1.06s}
.sec-stone .fstep-n,[style*="--stone"] .fstep-n{background:var(--stone)}
.fstep-meta{display:inline-flex;align-items:center;gap:.34rem;margin-bottom:.55rem;
  font-family:var(--f-display);font-weight:700;font-size:.74rem;
  color:var(--accent-ink);background:var(--accent-wash);border:1px solid var(--b-100);
  border-radius:var(--r-pill);padding:.22rem .6rem}
.fstep-meta svg{color:var(--accent);flex:none}
.fstep h3{font-size:1.08rem;margin:0 0 .34em}
.fstep p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62;margin:0}
.band .fstep-n{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.band .flow-steps.is-in .fstep-n{background:#fff;border-color:#fff;color:var(--accent-strong)}
.band .fstep p{color:var(--on-brand-2)}

@media (max-width:899px){
  .flow-steps{grid-template-columns:1fr;gap:0;--fgap:0px}
  .fstep{padding:0 0 2rem 0;padding-inline-start:4rem;min-height:3.4rem}
  .fstep:last-child{padding-bottom:0}
  .fstep::before,.fstep::after{top:58px;inset-inline-start:22px;
    width:2px;height:calc(100% - 70px);border-radius:2px}
  .fstep::after{transform:scaleY(0);transform-origin:50% 0;
    background:linear-gradient(to bottom,var(--accent),var(--b-300))}
  .flow-steps.is-in .fstep::after{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .fstep::after{transition:none;transform:none}
  .flow-steps .fstep-n{background:var(--accent);border-color:var(--accent);color:#fff;
    transition:none;transition-delay:0s!important}
}

/* ==========================================================================
   גיליון מפרט — "מה נכלל"
   ========================================================================== */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:640px){.spec{grid-template-columns:1fr}}
.spec-item{background:var(--surface);padding:1.05rem 1.1rem;display:flex;gap:.78rem;
  transition:background var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.spec-item:hover{background:var(--accent-wash)}}
.spec-ico{flex:none;width:26px;height:26px;border-radius:var(--r-pill);display:grid;
  place-items:center;background:var(--b-100);color:var(--accent-strong);margin-top:.1rem}
.spec-item h3{font-size:.99rem;margin:0 0 .2em;line-height:1.3}
.spec-item p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.58;margin:0}

/* ---- מה לא נכלל ---- */
.xlist{list-style:none;padding:0;margin:0;display:grid;gap:.68rem}
.xlist li{display:flex;gap:.72rem;margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.xlist li::before{content:"";flex:none;width:20px;height:20px;margin-top:.16em;border-radius:50%;
  color:var(--ink-3);
  background:var(--stone-2) linear-gradient(currentColor,currentColor) center/9px 2px no-repeat}

/* ==========================================================================
   בקצרה — תיבת עובדות שנשלפת היטב על ידי מנועי חיפוש ומודלי שפה
   ========================================================================== */
.snap{border-radius:var(--r-lg);background:var(--accent-wash);
  border:1px solid var(--b-100);padding:1.15rem 1.25rem}
.snap-h{display:flex;align-items:center;gap:.45rem;margin:0 0 .85rem;
  font-family:var(--f-display);font-weight:800;font-size:.86rem;letter-spacing:.03em;
  color:var(--accent-ink)}
.snap-h svg{color:var(--accent);flex:none}
.snap dl{display:grid;gap:.6rem;margin:0}
.snap-row{display:flex;gap:.8rem;align-items:baseline}
.snap dt{flex:0 0 clamp(6.2rem,27%,9.2rem);margin:0;font-family:var(--f-display);
  font-weight:700;font-size:var(--t-sm);color:var(--accent-ink)}
/* במובייל השורה נערמת לטור. flex-basis עובר אז לציר האנכי, ולכן הבסיס
   של ה-dt הפך ל*גובה* כפוי של 6.2rem עבור טקסט בגובה שורה אחת, בזמן
   שהמכולה נמדדה לפי הגובה האמיתי — וכל מונח דרס את השורה שאחריו.
   בטור צריך לאפס את הבסיס לגמרי. */
@media (max-width:519px){
  .snap-row{flex-direction:column;gap:.1rem;align-items:stretch}
  .snap dt{flex:none}
}
.snap dd{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.58}

/* ==========================================================================
   טבלת תדירות
   ========================================================================== */
.ftable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch}
.ftable{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:32rem}
.ftable caption{text-align:start;padding:.9rem 1.05rem 0;font-size:var(--t-xs);color:var(--ink-3)}
.ftable th,.ftable td{padding:.82rem 1.05rem;text-align:start;
  border-bottom:1px solid var(--line);vertical-align:top}
.ftable thead th{background:var(--stone);font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xs);color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.ftable tbody tr:last-child td,.ftable tbody tr:last-child th{border-bottom:0}
.ftable tbody th{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.ftable tbody td:first-of-type{color:var(--accent);font-weight:700}
.ftable tbody td:last-child{color:var(--ink-3);font-weight:400}
.ftable tbody tr{transition:background var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ftable tbody tr:hover{background:var(--accent-wash)}}

/* ==========================================================================
   כרטיס שירות — שכבת מידע נוספת מעל התצלום
   ========================================================================== */
.mcard-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,40,44,.5) 0%,rgba(7,40,44,.1) 42%,transparent 72%);
  opacity:.9;transition:opacity var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mcard:hover .mcard-img::after{opacity:1}}
.mcard-kicker{position:absolute;inset-inline-start:1.1rem;bottom:.9rem;z-index:1;
  font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.04em;
  color:#fff;text-shadow:0 1px 6px rgba(7,40,44,.5)}
.mcard-tags{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.85rem}
.mcard-tags span{font-size:.715rem;font-weight:600;color:var(--accent-ink);
  background:var(--accent-wash);border:1px solid var(--b-100);
  border-radius:var(--r-pill);padding:.22rem .55rem;line-height:1.4}
.mcard .card-more{padding-top:1rem}

/* כרטיס ניווט — גרסה מודגשת יותר של .card לרשתות שירות ואזור */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(to left,var(--accent),var(--b-300));
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.card:hover::before{transform:scaleX(1)}}

/* ==========================================================================
   ציטוט לקוח בתוך עמוד שירות או אזור
   ========================================================================== */
.pquote{position:relative;border-radius:var(--r-lg);padding:1.35rem 1.45rem;
  background:var(--accent-wash);border:1px solid var(--b-100)}
.pquote > svg{color:var(--b-300);margin-bottom:.5rem}
.pquote blockquote{margin:0;font-size:1.03rem;line-height:1.66;color:var(--ink)}
.pquote figcaption{margin-top:.9rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--ink-3)}
.pquote figcaption b{font-family:var(--f-display);font-size:var(--t-sm);color:var(--ink)}

/* ==========================================================================
   תפריט — תיקונים
   ========================================================================== */
/* הגשר: בלי זה העכבר חוצה פער של 0.4rem בין הקישור לרשימה, ה-hover נשבר
   והפריט הראשון נראה כאילו הוא נעלם או מסתתר מתחת לכותרת. */
.has-sub::after{content:"";position:absolute;inset-inline:0;top:100%;height:.7rem}
.has-sub>.sub{top:calc(100% + .45rem);z-index:2;transform:translateY(-6px) scale(.985);
  transform-origin:100% 0;
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-ui)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{transform:none}
.sub a{transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}
.sub a[aria-current="page"]{background:var(--accent-wash);color:var(--accent-ink)}

/* תפריט נייד — תתי פריטים באקורדיון, כמו במחשב */
.d-group{border-bottom:1px solid var(--line)}
.d-head{display:flex;align-items:stretch;gap:0}
.d-head > a{flex:1;border-bottom:0!important}
.d-toggle{flex:none;width:52px;background:none;border:0;border-bottom:0;cursor:pointer;
  color:var(--ink-2);display:grid;place-items:center;padding:0}
.d-toggle svg{transition:transform var(--dur-ui) var(--ease-out)}
.d-toggle[aria-expanded="true"] svg{transform:rotate(-90deg)}
/* ה-a בתוך הפאנל אינו ילד ישיר של ה-flex של הניווט, ולכן הוא נשאר inline
   ותתי הפריטים נשפכו אחד ליד השני עם נקודות שנפלו באמצע השורה.
   הפאנל הוא flex טור, וכל פריט הוא flex בעצמו עם הנקודה כפריט ראשון. */
.d-panel{overflow:hidden;display:flex;flex-direction:column;
  padding-block:.35rem .95rem;padding-inline-start:.35rem}
.drawer nav .d-sub{display:flex;align-items:center;gap:.7rem;
  font-size:.97rem;font-weight:600;color:var(--ink-2);
  border-bottom:0!important;padding:.72rem .35rem!important}
.drawer nav .d-sub::before{content:"";flex:none;width:6px;height:6px;
  border-radius:50%;background:var(--b-300)}
.drawer nav .d-sub[aria-current="page"]{color:var(--accent)}
.drawer nav .d-sub[aria-current="page"]::before{background:var(--accent)}
/* אותה שורה מסכמת גם בתפריט הנייד: שתי שורות טקסט במקום נקודה ופריט בודד. */
.drawer nav .d-sub-all{flex-direction:column;align-items:flex-start;gap:.12rem;min-width:0;
  margin-top:.5rem;padding-top:.8rem!important;border-top:1px solid var(--line)}
.drawer nav .d-sub-all::before{display:none}
.d-sub-all-t{display:inline-flex;align-items:center;gap:.38rem;color:var(--ink);font-weight:700}
.d-sub-all-s{font-size:.85rem;font-weight:500;line-height:1.45;color:var(--ink-3)}
.d-sub-all svg{flex:none}

/* ==========================================================================
   כפתורי סגירה
   התו × אינו קיים בתת-הגופן העברי שאנחנו טוענים, והוא נראה כריבוע ריק.
   לכן ה-X מצויר ב-CSS ולא נשען על גליף.
   ========================================================================== */
.drawer-close,.lightbox-close,.a11y-close{position:relative;font-size:0;color:transparent;
  line-height:0;overflow:hidden}
.drawer-close::before,.drawer-close::after,
.lightbox-close::before,.lightbox-close::after,
.a11y-close::before,.a11y-close::after{
  content:"";position:absolute;top:50%;left:50%;width:15px;height:2px;border-radius:2px;
  background:currentColor;color:var(--ink)}
.drawer-close::before,.lightbox-close::before,.a11y-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close::after,.lightbox-close::after,.a11y-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-close::before,.drawer-close::after,
.a11y-close::before,.a11y-close::after{background:var(--ink)}
.lightbox-close::before,.lightbox-close::after{background:#fff;width:17px}
.drawer-close,.a11y-close{display:grid;place-items:center}
.lightbox-close{display:grid;place-items:center}

/* ---- כיול למצב כהה: ההילות נבנו מגוני מותג בהירים וקבועים ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wall::before{opacity:.2}
  :root:not([data-theme="light"]) .geo-panel::after{opacity:.28}
  :root:not([data-theme="light"]) .geo-panel::before{opacity:.32}
}
:root[data-theme="dark"] .wall::before{opacity:.2}
:root[data-theme="dark"] .geo-panel::after{opacity:.28}
:root[data-theme="dark"] .geo-panel::before{opacity:.32}

/* ---- הטבלה במובייל ----
   טבלה של שלוש עמודות לא נכנסת ל-390px. הפתרון הקודם היה min-width:32rem
   עם גלילה אופקית, אבל אז ה-caption וכותרות העמודות נחתכו מחוץ למסך
   והקורא לא ידע שיש מה לגלול. כאן הטבלה נערמת לכרטיס לכל שורה, ושם
   העמודה מגיע מ-data-label לפני כל תא. אין גלילה אופקית ואין מה לחתוך.
   המבנה הסמנטי של הטבלה נשמר — רק התצוגה משתנה. */
@media (max-width:639px){
  .ftable-wrap{overflow-x:visible}
  .ftable{min-width:0;display:block}
  .ftable caption{display:block;padding:.9rem 1.05rem .2rem}
  .ftable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ftable tbody{display:block}
  .ftable tbody tr{display:block;padding:.9rem 1.05rem;border-bottom:1px solid var(--line)}
  .ftable tbody tr:last-child{border-bottom:0}
  .ftable tbody th,.ftable tbody td{display:block;padding:0;border:0}
  .ftable tbody th[data-label]::before,
  .ftable tbody td[data-label]::before{content:attr(data-label);display:block;
    font-family:var(--f-display);font-weight:700;font-size:var(--t-xs);
    color:var(--ink-3);letter-spacing:.02em;margin-bottom:.1rem}
  .ftable tbody th{font-size:var(--t-sm)}
  .ftable tbody td{margin-top:.6rem}
  /* התא הראשון הוא כותרת השורה, ולכן הוא לא צריך את שם העמודה מעליו. */
  .ftable tbody th[scope="row"]::before{content:none}
  .ftable tbody th[scope="row"]{font-size:1rem;color:var(--accent-ink)}
}

/* ==========================================================================
   "אנחנו מגיעים כשאף אחד לא נמצא" — פס הלילה
   --------------------------------------------------------------------------
   הסקשן היה קודם feat: טקסט בעמודה אחת ותצלום בקופסה בעמודה השנייה —
   בדיוק המבנה של הסקשן שלפניו. שתי חלוקות זהות בזו אחר זו, והשנייה
   נקראה כהד חלש של הראשונה. שלוש החלטות:
   1. התצלום יוצא מהקופסה והופך לרקע של הפס. זה גם שובר את החזרה וגם
      עושה את הטענה של הסקשן מילולית: המשרד ריק וחשוך.
   2. הפסקה הארוכה נפרסת לשלוש נקודות זמן. התוכן כאן הוא רצף בזמן,
      ורצף בזמן צריך להיות סרוק ולא פסקה.
   3. מפרידים בקו שיער ולא בכרטיסים. כרטיס מרמז על היררכיה או על
      לחיצה, ואין כאן לא זה ולא זה.
   התנועה היא data-reveal הקיים בלבד, בהשהיות של 70ms שכבר מוגדרות
   ב-components.css. אין כאן keyframes חדשים ואין מה לכבות בנפרד:
   prefers-reduced-motion ו-a11y-no-motion מטפלים בזה במקום אחד.
   ========================================================================== */
/* התצלום כאן כהה ויש בו דמות במרכז. באטימות של ההירו (.22) הדמות
   משכה את העין מהכותרת והפס איבד את הטורקיז שהוא סימן הזיהוי שלו,
   ולכן הוא מרוסן יותר ומוזז למעלה: טקסטורה של לילה, לא תצלום נושא. */
.band-night .hero-media img{opacity:.13;object-position:center 30%}
/* הפס נושא תצלום, ולכן הוא מקבל אוויר מעט מעל הממוצע בראשו, אבל לא
   ברגלו: שם כבר יושבת העקומה ומוסיפה גובה משל עצמה. */
.band-night .sec{padding-block:var(--sec) calc(var(--sec) * .55)}
.night-head{max-width:52rem;margin-inline:auto;text-align:center}
.night-head p{max-width:46rem;margin-inline:auto;margin-bottom:0}

.shift-row{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,.8rem + 2.2vw,2.8rem);
  margin-top:clamp(2.2rem,1.6rem + 2vw,3.2rem)}
/* הקו יושב על הפריט ולא על המכולה, ולכן הוא מופיע רק *בין* הנקודות
   ונעלם מעצמו כשהן נערמות לטור. */
.shift + .shift{border-inline-start:1px solid rgba(255,255,255,.2);
  padding-inline-start:clamp(1.4rem,.8rem + 2.2vw,2.8rem)}
.shift-time{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.5rem;
  font-family:var(--f-display);font-weight:800;font-size:1.02rem;
  letter-spacing:.01em;color:#fff}
.shift-time svg{color:var(--accent-bright);flex:none}
.shift p{color:var(--on-brand-2);font-size:var(--t-sm);line-height:1.62;margin:0}

/* .cta-actions הוא flex רק בתוך .cta-band, ולכן בלי ההצהרה הזאת
   הכפתורים כאן נצמדים לימין במקום להתיישר עם הכותרת שמעליהם. */
.night-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  margin-top:clamp(2rem,1.5rem + 1.6vw,2.9rem)}

@media (max-width:767px){
  .shift-row{grid-template-columns:1fr;gap:0}
  .night-head,.night-head p{text-align:start}
  /* בטלפון הכותרת מיושרת להתחלה, ולכן גם הכפתורים. מרכוז שלהם מול
     טקסט מיושר לימין נראה כמו טעות ולא כמו החלטה. */
  .night-cta{justify-content:flex-start}
  /* בטור המפריד עובר לקו אופקי, ולכן הריווח עובר מהצד לגובה. */
  .shift + .shift{border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid rgba(255,255,255,.2);
    margin-top:1.1rem;padding-top:1.1rem}
}

/* ==========================================================================
   "עוד ערים" — קיצור רשימת אזורי השירות בטלפון
   --------------------------------------------------------------------------
   במחשב אין כאן שום דבר: העוטפים הם display:contents, כלומר כל השורות
   הן ילדים ישירים של הרשת בדיוק כמו קודם, והכפתור מוסתר.
   בטלפון העוטף הופך לרצועת grid שעוברת מ-0fr ל-1fr — אותו מנגנון של
   האקורדיון בעמוד, ולכן גם אותה תנועה ואותה התנהגות בקורא מסך.
   ========================================================================== */
.geo-rest,.geo-rest-in{display:contents}
.geo-more{display:none}

@media (max-width:767px){
  .geo-rest{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .34s var(--ease-out)}
  .geo-rest-in{display:flex;flex-direction:column;gap:2px;
    overflow:hidden;min-height:0;visibility:hidden;opacity:0;
    transition:visibility 0s linear .34s,opacity .22s var(--ease-out)}
  .geo-list.is-open > .geo-rest{grid-template-rows:1fr}
  .geo-list.is-open > .geo-rest > .geo-rest-in{visibility:visible;opacity:1;
    transition-delay:0s,.06s}
  /* כל שורה שנפתחת עולה בתורה, ולא כולן יחד. */
  .geo-list.is-open > .geo-rest .geo-row{animation:bc-rise .34s var(--ease-out) backwards}
  .geo-list.is-open > .geo-rest .geo-row:nth-child(1){animation-delay:.04s}
  .geo-list.is-open > .geo-rest .geo-row:nth-child(2){animation-delay:.09s}
  .geo-list.is-open > .geo-rest .geo-row:nth-child(3){animation-delay:.14s}
  .geo-list.is-open > .geo-rest .geo-row:nth-child(4){animation-delay:.19s}
  .geo-list.is-open > .geo-rest .geo-row:nth-child(5){animation-delay:.24s}

  .geo-more{display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;margin-top:2px;padding:.82rem .85rem;cursor:pointer;
    font-family:var(--f-display);font-weight:700;font-size:.95rem;
    color:var(--accent-ink);background:color-mix(in srgb,var(--surface) 78%,transparent);
    border:1px solid var(--line);border-radius:var(--r-sm);
    transition:background var(--dur-ui) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .geo-more:active{transform:scale(.99)}
  .geo-more-ind{position:relative;width:15px;height:15px;flex:none}
  .geo-more-ind::before,.geo-more-ind::after{content:"";position:absolute;
    background:var(--accent);border-radius:2px;
    transition:transform var(--dur-ui) var(--ease-out),opacity var(--dur-ui) var(--ease-out)}
  .geo-more-ind::before{inset-inline:0;top:6.5px;height:2px}
  .geo-more-ind::after{inset-block:0;inset-inline-start:6.5px;width:2px}
  .geo-more[aria-expanded="true"] .geo-more-ind::after{transform:rotate(90deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .geo-rest,.geo-rest-in{transition:none}
  .geo-list.is-open > .geo-rest .geo-row{animation:none}
  .geo-more:active{transform:none}
}

/* ==========================================================================
   "הצגת עוד" ברשת כרטיסים (mrest / mbtn)
   ========================================================================== */
.mrest,.mrest-in{display:contents}
.mbtn{display:none}
@media (max-width:767px){
  .mrest{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .36s var(--ease-out)}
  .mrest-in{display:flex;flex-direction:column;gap:clamp(1rem,.7rem + 1vw,1.5rem);
    overflow:hidden;min-height:0;visibility:hidden;opacity:0;
    transition:visibility 0s linear .36s,opacity .24s var(--ease-out)}
  .mrest.is-open{grid-template-rows:1fr}
  .mrest.is-open > .mrest-in{visibility:visible;opacity:1;transition-delay:0s,.06s}
  .mrest.is-open > .mrest-in > *{animation:bc-rise .38s var(--ease-out) backwards}
  .mrest.is-open > .mrest-in > :nth-child(1){animation-delay:.04s}
  .mrest.is-open > .mrest-in > :nth-child(2){animation-delay:.1s}
  .mrest.is-open > .mrest-in > :nth-child(3){animation-delay:.16s}
  .mrest.is-open > .mrest-in > :nth-child(4){animation-delay:.22s}
  .mrest.is-open > .mrest-in > :nth-child(5){animation-delay:.28s}

  .mbtn{display:flex;align-items:center;justify-content:center;gap:.55rem;
    width:100%;padding:.95rem 1rem;cursor:pointer;
    font-family:var(--f-display);font-weight:700;font-size:1rem;
    color:var(--accent-ink);background:var(--accent-wash);
    border:1px dashed var(--b-300);border-radius:var(--r-pill);
    transition:background var(--dur-ui) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .mbtn:active{transform:scale(.99)}
  .mbtn-ind{position:relative;width:16px;height:16px;flex:none}
  .mbtn-ind::before,.mbtn-ind::after{content:"";position:absolute;
    background:var(--accent);border-radius:2px;
    transition:transform var(--dur-ui) var(--ease-out),opacity var(--dur-ui) var(--ease-out)}
  .mbtn-ind::before{inset-inline:0;top:7px;height:2px}
  .mbtn-ind::after{inset-block:0;inset-inline-start:7px;width:2px}
  .mbtn[aria-expanded="true"] .mbtn-ind::after{transform:rotate(90deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .mrest,.mrest-in{transition:none}
  .mrest.is-open > .mrest-in > *{animation:none}
  .mbtn:active{transform:none}
}