/* נוצר על ידי tools/fetch-fonts.mjs — לא לערוך ביד.
   build.mjs משרשר את הקובץ הזה לראש site.css, כך שיש בקשת סגנון אחת. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/barlow-400-latin.81419bf5.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}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-500-latin.8e986e86.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}
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-600-latin.a1e2a2d7.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}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-condensed-500-latin.24f826a7.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}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-condensed-600-latin.ba451349.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}
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-condensed-700-latin.e1180918.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}
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/heebo-400-700-he.de808528.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: 'Noto Sans Hebrew'; font-style: normal; font-weight: 500 700; font-stretch: 62.5% 100%; font-display: swap; src: url(../assets/fonts/noto-sans-hebrew-500-700-he.ed981f7f.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}

/* ==========================================================================
   V.R. Concrete Technology — ולדימיר רטנר
   גיליון סגנון יחיד. אין כאן קובץ טוקנים נפרד: כל המשתנים בראש הקובץ.

   שלושה כללים לתחזוקה:
   1. כל כלל לוקח מדרגה מסולם ה-‎--fs-*‎. לא כותבים מספר גולמי.
   2. עברית בלי letter-spacing ובלי uppercase. ריווח אותיות שמור למחלקה .lat
      (מחרוזות לטיניות/מספרים בלבד) — ריווח אותיות בעברית פוגע בקריאוּת.
   3. כל כלל ‎:hover‎ יושב בבלוק ‎@media (hover: hover)‎ בסוף הקובץ.
   ========================================================================== */

:root{
  /* ---- גופנים ---------------------------------------------------------
     תצוגה: Barlow Condensed ללטינית, Noto Sans Hebrew לעברית — גופן משתנה
     עם ציר רוחב, ולכן ‎font-stretch‎ באמת מצר גם את העברית.
     גוף: Barlow ללטינית, Heebo לעברית. */
  --font-display:'Barlow Condensed','Noto Sans Hebrew',system-ui,sans-serif;
  --font-body:'Barlow','Heebo',system-ui,sans-serif;
  --display-stretch:82%;

  /* ---- צבע ------------------------------------------------------------ */
  --ink:#1d1f20;              /* טקסט ראשי */
  --graphite:#26282a;         /* מקטעים כהים */
  --paper:#f7f7f8;            /* טקסט על כהה */
  --bg:#f2f2f3;               /* רקע הדף */
  --surface:#e9e9ea;          /* רקע מוגבה */
  /* טקסט משני. שני ערכים בלבד, שנמדדו מול הרקעים שבשימוש:
     --text-2 = 6.2:1 על רקע הדף ו-5.9:1 על משטח מוגבה,
     --text-3 = 5.1:1 ו-4.9:1. כל אלפא חלשה מ-.66 יורדת מתחת ל-4.5:1
     ואסורה לטקסט. לא להמציא ערך שלישי. */
  --text-2:rgba(29,31,32,.72);
  --text-3:rgba(29,31,32,.66);
  --divider:rgba(29,31,32,.16);
  --divider-strong:rgba(29,31,32,.28);

  /* כחול־פלדה. --accent הוא צבע קישוט (מסגרות, קווים) ולא עובר יחסי
     ניגודיות לטקסט; --accent-ink הוא הגרסה שנושאת טקסט וכתמי מילוי.
     לבן על ‎--accent-ink‎ = 6.9:1, ‎--accent-ink‎ על הרקע = 6.2:1. */
  --accent:#5980a6;
  --accent-ink:#3c5c7c;
  --accent-deep:#2c455d;
  --accent-tint:#e7f0f9;      /* רקע צ'יפים */
  --accent-line:#b9cee2;      /* מסגרת צ'יפים */
  --accent-lift:#b5d9fd;      /* על גבי כהה — 10:1 מול ‎--graphite‎ */

  --focus:#1b4c7a;

  /* ---- צל -------------------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(29,31,32,.10);
  --shadow-md:0 3px 10px rgba(29,31,32,.12),0 1px 2px rgba(29,31,32,.06);
  --shadow-lg:0 14px 38px rgba(29,31,32,.16),0 3px 8px rgba(29,31,32,.07);

  /* ---- תנועה ----------------------------------------------------------- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);   /* עקומת יריעה — נכנסת ויוצאת בה */

  /* ---- פריסה ----------------------------------------------------------- */
  --wrap:1280px;
  --gut:clamp(20px,4vw,52px);
  --sec-y:clamp(64px,7.5vw,116px);

  /* ---- סולם הטיפוגרפיה — מדרגת הטלפון --------------------------------
     הכול ב-rem כדי שפקד גודל הטקסט בתפריט הנגישות, שמשנה את ‎font-size‎
     של ‎html‎, יזיז את כל הדף יחד. 0.875rem = 14px הוא הרצפה. */
  --fs-micro:0.875rem;
  --fs-meta:0.9375rem;
  --fs-small:1rem;
  --fs-body:1.0625rem;
  --fs-lead:1.125rem;
  --fs-nav:1.0625rem;
  --fs-h4:1.25rem;
  --fs-h3:1.4375rem;
  --fs-h2:1.875rem;
  --fs-h1:2.375rem;
  --fs-display:2.375rem;   /* ב-44px "בעיה בבטון באתר?" גולש במסך 360px */

  /* 1.03 היה מתחת לרצפה: הטווח האנכי של Noto Sans Hebrew הוא 0.947em,
     כך שנשארו 3px בין תג יורד לבין ל׳ בשורה הבאה — התנגשות בכל כותרת
     שנשברת לשתי שורות, כלומר בכל כותרת בטלפון. */
  --lh-tight:1.14;
  --lh-head:1.12;
  --lh-snug:1.4;
  --lh-body:1.65;
  --lh-read:1.8;    /* גוף מאמר */
}

@media (min-width:48rem){
  :root{
    --fs-micro:0.875rem; --fs-meta:0.9375rem; --fs-small:1.0625rem;
    --fs-body:1.125rem;  --fs-lead:1.1875rem; --fs-nav:1.125rem;  --fs-h4:1.375rem;
    --fs-h3:1.5625rem;   --fs-h2:2.25rem;     --fs-h1:3rem;
    --fs-display:3.75rem;
  }
}
@media (min-width:62rem){
  :root{
    --fs-small:1.0625rem; --fs-body:1.125rem;  --fs-lead:1.3125rem;
    --fs-nav:1.1875rem;   --fs-h4:1.4375rem;   --fs-h3:1.75rem;     --fs-h2:2.625rem;
    --fs-h1:3.375rem;     --fs-display:4.375rem;
  }
}

/* ==========================================================================
   בסיס
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* המרווח נמדד בזמן ריצה ל־‎--chrome-h‎, כדי שעוגן לא ייחתך מתחת לסרגל */
  scroll-padding-top:calc(var(--chrome-h,68px) + 1.25rem);
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-stretch:var(--display-stretch);
  font-weight:600;
  line-height:var(--lh-head);
  letter-spacing:0;        /* כלל 2: אין ריווח אותיות בעברית */
  margin:0;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-ink);text-decoration:none}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-tint);color:var(--ink)}

.wrap{max-width:var(--wrap);margin-inline:auto}
/* שבירה קשיחה מונעת מ-text-wrap:balance לאזן, ובטלפון היא יצרה שורה
   ראשונה קצרה ואז שורה שנשברת בעצמה. */
.brk{display:none}
@media (min-width:48rem){.brk{display:inline}}
.muted{color:var(--text-3)}

/* מחרוזת לטינית בלבד: כאן ריווח אותיות ואותיות רישיות מותרים */
.lat{font-feature-settings:"tnum" 1;letter-spacing:.08em}
.num{font-variant-numeric:tabular-nums;letter-spacing:0}
/* מספר עם סימן נלווה ("45+") בתוך שורה בעברית: בלי בידוד, האלגוריתם
   הדו־כיווני מעיף את הסימן לצד השני. isolate שומר על סדר המחרוזת. */
[dir="ltr"].num{unicode-bidi:isolate}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;inset-inline-start:1rem;top:-100%;z-index:200;
  background:var(--graphite);color:var(--paper);
  padding:.75rem 1.25rem;border-radius:3px;font-size:var(--fs-small);
  transition:top .18s var(--ease-out);
}
.skip:focus{top:1rem;color:var(--paper)}

/* ==========================================================================
   כפתורים
   ========================================================================== */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-small);line-height:1.25;
  padding:.85em 1.5em;border-radius:3px;border:1px solid transparent;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background .22s var(--ease-out),border-color .22s var(--ease-out),
             box-shadow .22s var(--ease-out),transform .12s var(--ease-out),color .22s var(--ease-out);
}
.button svg{flex:none}

/* ברירת המחדל של הדפדפן היא מלבן אפור שמהבהב — הוא נורה במקביל ל-scale
   של הכפתורים ויצר תגובה כפולה, ובכל שאר המקומות היה המשוב היחיד. */
a,button,[role="button"],summary{-webkit-tap-highlight-color:transparent}
.button:active{transform:scale(.97)}
.button--sm:active{transform:scale(.95)}   /* מטרה קטנה צריכה יותר תזוזה, לא פחות */
.button--solid{background:var(--accent-ink);color:#fff;box-shadow:var(--shadow-md)}
.button--sm{font-size:var(--fs-meta);padding:.7em 1.15em;box-shadow:none}
.button--line{border-color:var(--divider-strong);color:var(--ink);background:transparent}
.button--ondark{
  border-color:rgba(247,247,248,.5);background:rgba(247,247,248,.08);
  color:var(--paper);backdrop-filter:blur(6px);
}

/* ==========================================================================
   סרגל התקדמות + כותרת עליונה
   הכותרת היא שכבת חומר שקוף־למחצה שהתוכן נגלל מתחתיה (apple-design §12).
   ========================================================================== */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;pointer-events:none}
/* scaleX ולא width: רוחב הוא תכונת פריסה, וסרגל ההתקדמות מתעדכן בכל פריים */
.progress__bar{height:100%;width:100%;background:var(--accent-ink);transform:scaleX(0);transform-origin:right center;will-change:transform}

/* מעל הפתיח הכהה, פס בהיר הוא הצורה החזקה ביותר על המסך והעין נוחתת
   עליו ראשונה — על הלוגו והתפריט, במקום על הכותרת. הוא נשאר שקוף עד
   שהגלילה מתחילה. */
.header{
  position:sticky;top:0;z-index:70;
  background:rgba(242,242,243,.78);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
/* קצה גלילה במקום קו מפריד קבוע: הקו מופיע רק כשיש תוכן מתחתיו */
.header.is-stuck{
  background:rgba(242,242,243,.92);
  box-shadow:0 1px 0 var(--divider),0 10px 30px rgba(29,31,32,.07);
}
.header__in{display:flex;align-items:center;gap:clamp(16px,3vw,36px);padding:.85rem var(--gut)}
/* נעילת הלוגו: הסימן כתמונה, הכיתוב כטקסט חי. בלוגו הקודם, בגובה 44px,
   שורת השם יצאה בגובה אות של 8px ותת-השורה 6px — שני שלישים מהרוחב היו
   מריחה בכל עמוד. טקסט נשאר חד בכל גודל, נבחר, וגדל עם פקד הנגישות.
   ובלי מעבר על height: זו תכונת פריסה, והמעבר גרר סידור מחדש 300ms בכל
   חציית סף, שהפעיל את ה-ResizeObserver וכתב מחדש ‎--chrome-h‎ על השורש. */
.header__logo{display:flex;align-items:center;flex:none;color:var(--ink)}
/* הגובה הוא המידה הקובעת — הרוחב נגזר ממנה. 46px נותן גובה אות של
   10.8px בשם, וזה מה שהכיתוב החי נתן כאן קודם. */
.header__logo img{height:46px;width:auto;flex:none;display:block}

.nav{
  display:flex;gap:clamp(16px,2.2vw,30px);margin-inline-start:auto;
  font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-size:var(--fs-nav);font-weight:600;
}
.nav a{
  color:var(--ink);padding-block:.15em;
  border-bottom:2px solid transparent;
  transition:color .22s var(--ease-out),border-color .22s var(--ease-out);
}
.nav a[aria-current="page"],.nav a.is-active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.header__cta{flex:none}

/* --- מגירת ניווט לנייד --------------------------------------------------
   נפתחת מהכפתור שפתח אותה ויוצאת באותו מסלול (apple-design §7). */
.navtoggle{
  display:none;flex:none;align-items:center;justify-content:center;gap:.5em;
  margin-inline-start:auto;
  background:transparent;border:1px solid var(--divider-strong);border-radius:3px;
  padding:.55rem .8rem;font-size:var(--fs-meta);font-weight:500;cursor:pointer;
  transition:transform .12s var(--ease-out),background .2s var(--ease-out);
}
.navtoggle:active{transform:scale(.96)}
.navtoggle svg{transition:transform .3s var(--ease-out)}
.navtoggle[aria-expanded="true"] svg{transform:rotate(90deg)}

/* חשוב: לא לקבוע display על .navdrawer עצמו. גיליון הדפדפן נותן
   dialog:not([open]){display:none}, וכלל של המחבר גובר עליו — ולכן
   הדו־שיח היה נפרס בתוך הדף גם כשהוא סגור. הפריסה חלה רק ב-[open]. */
.navdrawer{
  position:fixed;inset:0;z-index:90;
  border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;
  background:transparent;
}
.navdrawer[open]{display:grid;grid-template-rows:1fr auto}
.navdrawer::backdrop{background:rgba(20,22,24,.45);backdrop-filter:blur(4px)}
.navdrawer__scrim{grid-row:1;background:transparent}
.navdrawer__panel{
  grid-row:2;position:relative;
  background:var(--paper);
  padding:1.5rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom));
  border-top:3px solid var(--accent);
  box-shadow:var(--shadow-lg);
  transform-origin:bottom center;
}
.navdrawer__list{display:flex;flex-direction:column;gap:.15rem;margin:0 0 1.25rem;padding:0;list-style:none}
.navdrawer__list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .25rem;border-bottom:1px solid var(--divider);
  font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-weight:600;font-size:var(--fs-h3);color:var(--ink);
}
/* התו הזה ממוראה בהקשר ימין־לשמאל: כדי שהחץ יצביע שמאלה (״קדימה״
   בעברית) צריך לכתוב אותו כשהוא מצביע ימינה. */
.navdrawer__list a::after{content:"›";color:var(--accent);font-size:1.2em;line-height:1}
.navdrawer__foot{display:flex;flex-direction:column;gap:.6rem}
.navdrawer__close{
  position:absolute;top:auto;bottom:calc(100% + .75rem);inset-inline-end:var(--gut);
  width:2.75rem;height:2.75rem;border-radius:50%;border:0;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-md);
  font-size:var(--fs-h4);line-height:1;cursor:pointer;
}
/* כניסה ויציאה על אותו מסלול */
/* ‎::backdrop‎ הוא תיבה אחות בשכבה העליונה ואינו יורש את השקיפות של
   ה-dialog. קודם הוא הופיע בפריים אחד — המסך נחטף לאפל, ורק אז היריעה
   הגיעה. הדהייה חייבת לשבת עליו ישירות. */
@media (prefers-reduced-motion:no-preference){
  .navdrawer[open]::backdrop{animation:scrim-in .34s var(--ease-out)}
  .navdrawer.is-closing::backdrop{animation:scrim-in .26s var(--ease-drawer) reverse}
  .navdrawer[open] .navdrawer__panel{animation:panel-in .34s var(--ease-drawer)}
  .navdrawer.is-closing .navdrawer__panel{animation:panel-in .28s var(--ease-drawer) reverse}
  @keyframes scrim-in{from{opacity:0}to{opacity:1}}
  @keyframes panel-in{from{transform:translateY(100%)}to{transform:none}}
}

/* ==========================================================================
   פתיח
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:min(780px,90vh);padding:clamp(56px,7vw,104px) var(--gut);overflow:hidden;
}
.hero__media{position:absolute;inset:-8% 0;z-index:-3;overflow:hidden}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(1.05) brightness(.9);
}
/* שתי שכבות כהות: אלכסונית לצד הקריאה, ואנכית לרגל התמונה */
/* ‎to left‎ הוא כיוון פיזי ואינו מתהפך ב-RTL, ולכן הקצה הבהיר של המסך ישב
   בדיוק מתחת לטקסט העברי: הכותרת יצאה 3.66:1. הערכים כאן נמדדו מול
   האחוזון ה-95 של הבהירות בתצלום עצמו, לכל אלמנט טקסט בנפרד, והגרוע
   ביותר הוא 5.05:1 — וגם הממוצע קל יותר מקודמו. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(to right,rgba(18,20,22,.70),rgba(18,20,22,.62) 55%,rgba(18,20,22,.76));
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(18,20,22,.58),transparent 44%);
}
.hero__in{
  width:100%;display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(28px,5vw,72px);flex-wrap:wrap;
}
.hero__text{max-width:min(38rem,100%)}
.kicker{
  display:flex;align-items:center;gap:.9em;margin-bottom:1.4rem;
  font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-size:var(--fs-small);font-weight:600;color:rgba(242,242,243,.9);
}
.kicker::before{content:"";width:2.6em;height:2px;background:var(--accent-lift);flex:none}
.hero h1{
  font-size:var(--fs-display);line-height:var(--lh-tight);
  margin-bottom:1rem;color:var(--paper);
}
.hero__lede{
  font-size:var(--fs-lead);line-height:1.6;max-width:52ch;
  margin-bottom:1.8rem;color:rgba(242,242,243,.88);
}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.hero__note{font-size:var(--fs-meta);color:rgba(242,242,243,.80)}
.hero__stats{display:flex;flex-direction:column;min-width:15rem}
.stat{border-top:1px solid rgba(242,242,243,.34);padding:.85rem 0}
.stat:last-child{border-bottom:1px solid rgba(242,242,243,.34)}
.stat__n{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h2);line-height:1;color:var(--paper);
}
.stat__l{font-size:var(--fs-meta);color:rgba(242,242,243,.86)}

/* ==========================================================================
   רצועת עובדות
   ========================================================================== */
.facts{border-bottom:1px solid var(--divider);background:var(--bg)}
.facts__in{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-inline:var(--gut);border-inline:1px solid var(--divider);
}
.facts__cell{padding:1.4rem;border-inline-start:1px solid var(--divider)}
.facts__cell:first-child{border-inline-start:0}
.facts__cell>div:last-child{font-size:var(--fs-small)}

.label{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-meta);color:var(--accent-ink);margin-bottom:.25rem;
}

/* ==========================================================================
   כותרת מקטע
   ========================================================================== */
.section{padding:var(--sec-y) var(--gut);background:var(--bg)}
.section--surface{background:var(--surface);border-block:1px solid var(--divider)}
.section--dark{background:var(--graphite);color:var(--paper)}
.head{
  display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;
  border-bottom:1px solid var(--divider);padding-bottom:1.1rem;margin-bottom:2.75rem;
}
.section--dark .head{border-bottom-color:rgba(247,247,248,.22)}
.head__n{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-small);color:var(--accent-ink);flex:none;
}
.section--dark .head__n{color:var(--accent-lift)}
.head h2{font-size:var(--fs-h2)}
.section--dark .head h2{color:var(--paper)}
.head__aside{
  margin-inline-start:auto;font-size:var(--fs-small);max-width:40ch;
  text-align:end;color:var(--text-3);line-height:var(--lh-snug);
}

/* ==========================================================================
   כרטיסי תסמינים
   ========================================================================== */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1.25rem}
@media (min-width:62rem){.grid-cards{grid-template-columns:repeat(3,1fr)}}
.symptom{
  padding:1.75rem 1.6rem;border:1px solid var(--divider);border-radius:3px;
  background:linear-gradient(180deg,rgba(233,233,234,.72),rgba(233,233,234,0) 72%);
  transition:border-color .3s var(--ease-out),box-shadow .32s var(--ease-out),transform .32s var(--ease-out);
}
.symptom__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.symptom__top svg{color:var(--accent-ink)}
.symptom__id{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-micro);color:var(--text-3);
}
.symptom h3{font-size:var(--fs-h3);margin-bottom:.4rem}
.symptom p{font-size:var(--fs-small);line-height:var(--lh-body);color:rgba(29,31,32,.78)}

/* ==========================================================================
   שירותים
   ========================================================================== */
.services{display:grid;grid-template-columns:20rem 1fr;gap:clamp(28px,5vw,72px)}
.services__aside{position:sticky;top:calc(var(--chrome-h,68px) + 1.5rem);align-self:start}
.services__aside p{
  font-size:var(--fs-small);line-height:var(--lh-body);
  color:rgba(247,247,248,.76);margin:0 0 1.5rem;max-width:32ch;
}
.step{
  display:flex;gap:clamp(18px,3vw,44px);padding:clamp(24px,3vw,40px) 0;
  border-top:1px solid rgba(247,247,248,.22);flex-wrap:wrap;
}
.step:last-child{border-bottom:1px solid rgba(247,247,248,.22)}
.step__n{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:700;
  font-size:var(--fs-h1);line-height:.85;color:var(--accent-lift);flex:none;
}
.step__body{flex:1;min-width:16rem}
.step h3{font-size:var(--fs-h3);margin-bottom:.5rem;color:var(--paper)}
.step p{
  font-size:var(--fs-small);line-height:var(--lh-body);
  color:rgba(247,247,248,.8);margin-bottom:1rem;max-width:58ch;
}
.step ul{
  list-style:none;padding:0;margin:0;display:flex;gap:.5rem 1.75rem;flex-wrap:wrap;
  font-size:var(--fs-meta);color:rgba(247,247,248,.76);
}
.step li{display:flex;gap:.5rem}
.step li::before{content:"—";color:var(--accent-lift)}
.step__dia{flex:none;align-self:center}

/* טבלת השירותים — כרטיסים בטלפון, טבלה אמיתית ממסך רחב */
.svc-table{width:100%;border-collapse:collapse;margin-top:2.5rem}
.svc-table thead{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.svc-table tr{
  display:block;border:1px solid rgba(247,247,248,.22);border-radius:3px;
  padding:1.1rem 1.2rem;margin-bottom:.85rem;
}
.svc-table td{display:block;font-size:var(--fs-meta);color:rgba(247,247,248,.78);padding:0}
.svc-table td::before{
  content:attr(data-label);display:block;
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-micro);color:var(--accent-lift);margin-top:.7rem;
}
.svc-table td:first-child{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h4);color:var(--paper);
}
.svc-table td:first-child::before{display:none}

/* ==========================================================================
   פרויקטים / מהשטח
   ========================================================================== */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
}
/* ארבעה פרויקטים: שלוש עמודות משאירות שורה שנייה עם פריט בודד וחור
   לצדו. שתי עמודות נותנות 2x2 מאוזן, ותצלום גדול יותר בכל כרטיס. */
@media (min-width:62rem){.gallery{grid-template-columns:repeat(3,1fr)}}
.shot{margin:0}
.shot__frame{overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md);border-radius:3px}
.shot__frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{
  font-size:var(--fs-small);line-height:var(--lh-snug);margin-top:1rem;
  padding-inline-start:.9rem;border-inline-start:2px solid var(--accent);
  color:var(--text-2);
}
.shot figcaption strong{
  display:block;margin-bottom:.2rem;
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h4);color:var(--ink);
}
.more-projects{
  margin-top:clamp(32px,4vw,56px);padding-top:1.5rem;border-top:1px solid var(--divider);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1.25rem 2.5rem;
}
.more-projects h3{font-size:var(--fs-h4);margin-bottom:.25rem}
/* הכותרת המודגשת ברשימה. הייתה style בשורה; עכשיו זו בחירה מרשימה
   סגורה בפאנל, ולכן היא צריכה מחלקה. */
.more-projects h3.accent{color:var(--accent-ink)}
.more-projects p{font-size:var(--fs-meta);color:var(--text-2);line-height:var(--lh-snug)}

/* ==========================================================================
   אודות
   ========================================================================== */
.about{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.about__media{display:flex;flex-direction:column;gap:1rem}
.about__frame{
  overflow:hidden;background:var(--bg);box-shadow:var(--shadow-lg);border-radius:3px;
  position:relative;
}
.about__frame img{width:100%;display:block}
/* הכיתוב יושב על התצלום מתחת למסך כהה, כדי שלא ייקרא כמלבן מודבק */
.about__cap{
  position:absolute;inset-inline:0;bottom:0;padding:2.5rem 1.1rem .9rem;
  background:linear-gradient(to top,rgba(18,20,22,.86),rgba(18,20,22,0));
  color:var(--paper);font-size:var(--fs-meta);line-height:var(--lh-snug);
}
.about__cap b{display:block;font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:var(--fs-h4)}
.about__lede{font-size:var(--fs-lead);line-height:1.6;margin-bottom:1rem}
.about__body p{font-size:var(--fs-small);line-height:var(--lh-body);color:rgba(29,31,32,.8);margin-bottom:1rem}

/* שורות אישורים — תווית מעל ערך בטלפון, שתי עמודות ממסך רחב */
.creds{list-style:none;margin:1.75rem 0;padding:0;border-top:1px solid var(--divider)}
.creds li{
  display:grid;gap:.1rem .9rem;padding:.8rem 0;border-bottom:1px solid var(--divider);
}
.creds dt,.creds b{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-meta);color:var(--accent-ink);
}
.creds span{font-size:var(--fs-small);color:rgba(29,31,32,.86)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}
.chip{
  font-size:var(--fs-meta);padding:.45rem .8rem;border-radius:3px;
  background:var(--accent-tint);color:var(--accent-deep);border:1px solid var(--accent-line);
}

/* ==========================================================================
   הוקרה — מצב ריק כן, בלי ביקורות מומצאות
   ========================================================================== */
.recog{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
.recog__img{border:1px solid var(--divider);background:#fff;padding:.6rem;border-radius:3px;box-shadow:var(--shadow-sm)}
.recog blockquote{
  margin:0 0 1.25rem;padding-inline-start:1.1rem;border-inline-start:3px solid var(--accent);
  font-size:var(--fs-lead);line-height:1.55;
}
.recog figcaption{font-size:var(--fs-meta);color:var(--text-3);line-height:var(--lh-snug)}
.empty-state{
  margin-top:2rem;padding:1.5rem;border:1px dashed var(--divider-strong);border-radius:3px;
  background:rgba(233,233,234,.5);
}
.empty-state h3{font-size:var(--fs-h4);margin-bottom:.35rem}
.empty-state p{font-size:var(--fs-meta);color:var(--text-2);line-height:var(--lh-snug)}

/* ==========================================================================
   שאלות ותשובות
   ========================================================================== */
.qa{border-top:1px solid var(--divider)}
.qa__item{border-bottom:1px solid var(--divider)}
.qa__btn{
  width:100%;background:none;border:0;padding:1.4rem .25rem;cursor:pointer;
  display:flex;align-items:center;gap:1rem;text-align:start;
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);
  transition:color .22s var(--ease-out);
}
.qa__tag{
  font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-weight:600;font-size:var(--fs-micro);
  color:var(--accent-ink);flex:none;
}
.qa__q{flex:1}
.qa__plus{
  flex:none;width:1.5rem;height:1.5rem;position:relative;color:var(--accent-ink);
  transition:transform .3s var(--ease-out);
}
.qa__plus::before,.qa__plus::after{
  content:"";position:absolute;inset-inline:0;top:50%;height:2px;background:currentColor;
  transform:translateY(-50%);
}
/* סיבוב 180° על סימן פלוס הוא בדיוק כלום — לפלוס יש סימטריה של 90°.
   כאן הקו האנכי נסחרר ל-0° ומתמזג באופקי: מעבר שרואים. */
.qa__plus::after{transform:translateY(-50%) rotate(90deg);transition:transform .26s var(--ease-out)}
.qa__btn[aria-expanded="true"] .qa__plus::after{transform:translateY(-50%) rotate(0deg)}
.qa__panel{max-width:58ch}
/* קריסת גובה אמיתית: קודם הפאנל הופיע ב-display:block בעוד כל מה שמתחתיו
   קופץ 120px בפריים אחד. סימטרי בפתיחה ובסגירה. */
.qa__panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .26s var(--ease-out),opacity .18s var(--ease-out);
}
.qa__inner{overflow:hidden;min-height:0}
.qa__inner > :last-child{padding-bottom:1.5rem}
.qa__panel.is-open{grid-template-rows:1fr;opacity:1;transition-delay:0s,.06s}
.qa__panel p{font-size:var(--fs-small);line-height:var(--lh-read);color:rgba(29,31,32,.82)}
.qa__panel p+p{margin-top:.75rem}

/* ==========================================================================
   כרטיסי מאמרים
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(17.5rem,100%),1fr));gap:1.25rem}
.post{
  display:flex;flex-direction:column;border:1px solid var(--divider);border-radius:3px;
  background:var(--bg);color:var(--ink);overflow:hidden;
  transition:border-color .3s var(--ease-out),box-shadow .32s var(--ease-out),transform .32s var(--ease-out);
}
.post__frame{overflow:hidden;background:var(--surface)}
.post__frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s var(--ease-out)}
.post__body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post__meta{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-micro);color:var(--accent-ink);
}
.post h3{font-size:var(--fs-h4)}
.post p{font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--text-2)}
.post__more{
  margin-top:auto;padding-top:.5rem;font-size:var(--fs-meta);color:var(--accent-ink);
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
}

/* ==========================================================================
   מאמר בודד
   ========================================================================== */
.article{padding:clamp(40px,5vw,72px) var(--gut) var(--sec-y)}
/* 1ch נמדד על הספרה של Barlow ושווה 1.23 תווים עבריים, ולכן 46rem נתן
   94 תווים לשורה — שליש מעל הטווח הנוח. */
.article__wrap{max-width:36rem;margin-inline:auto}
.crumbs{font-size:var(--fs-meta);margin-bottom:1.5rem;color:var(--text-3)}
.crumbs a{color:var(--text-3)}
.article h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-bottom:1rem}
.article__meta{
  display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--fs-meta);
  padding-bottom:1.25rem;border-bottom:1px solid var(--divider);margin-bottom:2rem;
  color:var(--text-3);
}
.article__lede{font-size:var(--fs-lead);line-height:1.6;margin-bottom:2rem}
.article__hero{overflow:hidden;box-shadow:var(--shadow-md);border-radius:3px;margin-bottom:.6rem}
.article__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article figure>figcaption{
  font-size:var(--fs-meta);margin-top:.6rem;margin-bottom:2rem;
  color:var(--text-3);line-height:var(--lh-snug);
}
.article__body h2{font-size:var(--fs-h2);margin:2.75rem 0 .7rem}
.article__body h3{font-size:var(--fs-h3);margin:2rem 0 .5rem}
.article__body p{font-size:var(--fs-small);line-height:var(--lh-read);margin-bottom:1rem;color:rgba(29,31,32,.86)}
.article__body ul,.article__body ol{
  font-size:var(--fs-small);line-height:var(--lh-read);
  padding-inline-start:1.35rem;margin:0 0 1.4rem;color:rgba(29,31,32,.86);
}
.article__body li{margin-bottom:.4rem}
.article__body figure{margin:2rem 0}
.article__body figure>img{width:100%;border-radius:3px;box-shadow:var(--shadow-md)}
.pull{
  margin:2.25rem 0;padding:1.4rem 1.6rem;background:var(--surface);border-radius:3px;
  border-inline-start:3px solid var(--accent);
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h4);line-height:1.35;
}
.callout{
  margin:2.5rem 0 0;padding:1.75rem;border:1px solid var(--divider);border-radius:3px;
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(233,233,234,.72),rgba(233,233,234,0) 72%);
}
.callout__t{flex:1;min-width:15rem}
.callout h3{font-size:var(--fs-h3);margin-bottom:.25rem}
.callout p{font-size:var(--fs-meta);color:var(--text-2);line-height:var(--lh-snug)}
.nextread{
  margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--divider);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.nextread .label{margin:0}
/* הסתייגות בסוף מאמר ובעמוד המקרים. ‎.article__body p‎ חזק יותר
   מבורר של מחלקה אחת, ולכן הבורר הכפול. */
.disclaimer,.article__body .disclaimer{
  margin-top:2rem;padding-top:1rem;border-top:1px solid var(--divider);
  font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--text-2);
}
.nextread a{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;font-size:var(--fs-h4)}

/* ==========================================================================
   מסמכים משפטיים
   ========================================================================== */
.legaldoc{padding:clamp(40px,5vw,72px) var(--gut) var(--sec-y)}
.legaldoc__wrap{max-width:34rem;margin-inline:auto}
.legaldoc h1{font-size:var(--fs-h1);margin-bottom:.5rem}
.legaldoc h2{font-size:var(--fs-h3);margin:2rem 0 .5rem}
.legaldoc p,.legaldoc li{font-size:var(--fs-small);line-height:var(--lh-read);color:rgba(29,31,32,.86)}
.legaldoc p{margin-bottom:.85rem}
.legaldoc ul,.legaldoc ol{padding-inline-start:1.35rem;margin:0 0 1.25rem}
.legaldoc li{margin-bottom:.35rem}
.legaldoc__updated{
  margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--divider);
  font-size:var(--fs-meta);color:var(--text-3);
}
.legalnav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.legalnav a{
  font-size:var(--fs-meta);padding:.45rem .85rem;border:1px solid var(--divider);border-radius:3px;
}
.legalnav a[aria-current="page"]{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}

/* ==========================================================================
   יצירת קשר
   ========================================================================== */
.contact{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));
  border:1px solid var(--divider);border-radius:3px;box-shadow:var(--shadow-md);background:var(--bg);
  overflow:hidden;
}
.contact__main{padding:clamp(26px,3.4vw,52px)}
.contact__main h2{font-size:var(--fs-h2);margin-bottom:.6rem}
.contact__main>p{font-size:var(--fs-small);line-height:var(--lh-body);margin-bottom:1.75rem;max-width:44ch;color:rgba(29,31,32,.8)}
.phone{
  display:inline-block;
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:700;
  font-size:var(--fs-h1);line-height:1;color:var(--ink);margin-bottom:.35rem;
  transition:color .22s var(--ease-out);
}
.contact__sig{font-size:var(--fs-meta);margin-bottom:1.75rem;color:var(--text-3)}
.flow{border-top:1px solid var(--divider);list-style:none;margin:0;padding:0}
.flow li{display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--divider);font-size:var(--fs-small)}
.flow li:last-child{border-bottom:0}
.flow b{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-micro);color:var(--accent-ink);flex:none;width:1.6rem;
}
.contact__form{padding:clamp(26px,3.4vw,52px);border-inline-start:1px solid var(--divider);background:var(--surface)}
.contact__form h3{font-size:var(--fs-h3);margin-bottom:.3rem}
.contact__form>p{font-size:var(--fs-meta);line-height:var(--lh-snug);margin-bottom:1.4rem;color:var(--text-2)}
form{display:flex;flex-direction:column;gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{
  font-size:var(--fs-meta);font-weight:500;
  font-family:var(--font-display);font-stretch:var(--display-stretch);
}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:var(--fs-small);
  min-height:2.9rem;padding:.7rem .8rem;
  border:1px solid var(--divider-strong);border-radius:3px;
  background:var(--bg);color:var(--ink);
  transition:border-color .2s var(--ease-out);
}
.field textarea{min-height:7rem;resize:vertical;line-height:var(--lh-snug)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--focus)}
.formnote{font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--text-3)}
/* תיבת האישור: התווית כולה היא שטח המגע, ולכן התיבה עצמה יכולה להישאר
   בגודל הטקסט. ‎--text-2‎ נמדד 5.9:1 על ‎--surface‎. */
.consent{display:flex;gap:.6rem;align-items:flex-start}
.consent input{flex:none;width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:var(--accent-ink)}
.consent label{font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--text-2);cursor:pointer}
.consent a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
/* קישור בתוך פסקה חייב להיבדל ממנה גם בלי צבע (ת״י 5568 / WCAG 1.4.1):
   הכחול־אפור של האתר רחוק מהטקסט רק 1.56:1 בבהירות, ולכן קו תחתון. */
.legaldoc p a,.legaldoc li a,.article__body p a,.article__body li a,.qa__inner a,.disclaimer a,.more-projects p a{
  text-decoration:underline;text-underline-offset:2px
}

/* ==========================================================================
   כותרת תחתונה
   ========================================================================== */
.footer{
  background:var(--graphite);color:rgba(247,247,248,.78);
  padding:clamp(40px,5vw,68px) var(--gut) 2rem;
}
.footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:2rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(247,247,248,.22);
}
.footer__brand{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h3);color:var(--paper);margin-bottom:.35rem;
}
.footer h2{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-micro);color:var(--accent-lift);margin-bottom:.6rem;
}
.footer p,.footer a{font-size:var(--fs-meta);line-height:var(--lh-snug)}
.footer__links{display:flex;flex-direction:column;gap:.4rem;list-style:none;margin:0;padding:0}
.footer a{color:rgba(247,247,248,.84)}

/* כפתורי הרשתות. 2.75rem = 44px, מטרת המגע המינימלית, ולכן אין כאן
   כלל נפרד לנייד. */
.footer__social{display:flex;gap:.6rem;margin-top:1rem}
.socbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(247,247,248,.26);
  color:rgba(247,247,248,.84);
  transition:background .22s var(--ease-out),border-color .22s var(--ease-out),
             color .22s var(--ease-out),transform .12s var(--ease-out);
}
.socbtn svg{width:1.2rem;height:1.2rem}
.footer__legal{
  padding-top:1.5rem;display:flex;gap:1rem 1.5rem;flex-wrap:wrap;
  font-size:var(--fs-micro);color:rgba(247,247,248,.6);
}
.footer__legal nav{display:flex;gap:1rem;flex-wrap:wrap;margin-inline-start:auto}
.footer__legal a{font-size:var(--fs-micro);color:rgba(247,247,248,.6)}

/* ==========================================================================
   פקדים צפים — חיוג ונגישות
   ========================================================================== */
.callbar{
  position:fixed;bottom:1rem;inset-inline:1rem;z-index:60;display:none;
  box-shadow:var(--shadow-lg);
  /* יושב מתחת לכפתור החיוג של הפתיח — אותה קריאה לפעולה פעמיים על מסך
     אחד. נכנס רק אחרי שכפתור הפתיח יצא, ויוצא באותו מסלול. */
  transform:translateY(calc(100% + 1.5rem));
  transition:transform .32s var(--ease-drawer);
}
.callbar.is-in{transform:none}

.a11y-fab{
  position:fixed;bottom:1rem;inset-inline-start:1rem;z-index:65;
  width:3rem;height:3rem;border-radius:50%;
  border:1px solid var(--divider-strong);background:var(--paper);color:var(--ink);
  box-shadow:var(--shadow-md);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--ease-out),background .2s var(--ease-out);
}
.a11y-fab:active{transform:scale(.92)}
.a11y-panel{
  position:fixed;bottom:4.25rem;inset-inline-start:1rem;z-index:66;
  width:min(19rem,calc(100vw - 2rem));
  background:var(--paper);border:1px solid var(--divider);border-radius:6px;
  box-shadow:var(--shadow-lg);padding:1rem;
  transform-origin:bottom left;   /* גדל מהכפתור שפתח אותו */
}
html[dir="rtl"] .a11y-panel{transform-origin:bottom right}
.a11y-panel h2{
  font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
  font-size:var(--fs-h4);margin-bottom:.75rem;
}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem 0}
.a11y-row+.a11y-row{border-top:1px solid var(--divider)}
.a11y-row span{font-size:var(--fs-meta)}
.a11y-steps{display:flex;gap:.35rem;align-items:center}
.a11y-btn{
  min-width:2.1rem;height:2.1rem;padding:0 .5rem;
  border:1px solid var(--divider-strong);border-radius:3px;background:var(--bg);
  font-size:var(--fs-meta);cursor:pointer;
  transition:background .18s var(--ease-out),transform .1s var(--ease-out);
}
.a11y-btn:active{transform:scale(.92)}
.a11y-btn[aria-pressed="true"]{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
.a11y-reset{width:100%;margin-top:.75rem}
@media (prefers-reduced-motion:no-preference){
  .a11y-panel{transition:opacity .22s var(--ease-out),transform .26s var(--ease-out),display .26s allow-discrete}
  .a11y-panel[hidden]{display:none;opacity:0;transform:scale(.92) translateY(8px)}
  @starting-style{.a11y-panel{opacity:0;transform:scale(.92) translateY(8px)}}
}

/* הודעת העוגיות — בצד הנגדי לכפתור הנגישות, כדי שלא יסתירו זה את זה */
.cookienote{
  position:fixed;bottom:1rem;inset-inline-end:1rem;z-index:64;
  width:min(26rem,calc(100vw - 2rem));
  display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--divider-strong);border-radius:6px;
  box-shadow:var(--shadow-lg);padding:.9rem 1rem;
}
/* ה-display:flex שלמעלה גובר על ברירת המחדל של הדפדפן ל-[hidden], ובלי זה ההודעה לא נסגרת */
.cookienote[hidden]{display:none}
.cookienote p{flex:1 1 14rem;font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--ink)}
.cookienote a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.cookienote .button{flex:none}

/* ==========================================================================
   חשיפה בגלילה
   ========================================================================== */
/* מהיר יותר: 700ms + השהיה של 320ms הגיעו ל-1120ms לפריט. קצב של דוח,
   לא של עמוד נחיתה. גזירת ה-clip-path הוסרה — היא אינה מואצת בחומרה
   ומציירת מחדש כל פריים במשך 900ms, על תמונות ברוחב מלא. */
[data-reveal].is-hidden{opacity:0;transform:translateY(12px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .34s var(--ease-out),transform .4s var(--ease-out);
}

/* ==========================================================================
   התאמות מסך
   ========================================================================== */
@media (max-width:70rem){
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .facts__cell:nth-child(odd){border-inline-start:0}
  .facts__cell:nth-child(-n+2){border-block-end:1px solid var(--divider)}
  .services{grid-template-columns:1fr}
  .services__aside{position:static}
  .about{grid-template-columns:1fr}
  .about__media{max-width:24rem}
  .recog{grid-template-columns:1fr}
  .recog__img{max-width:15rem}
}
@media (min-width:48rem){
  /* טבלת השירותים הופכת לטבלה אמיתית */
  .svc-table thead{position:static;width:auto;height:auto;clip:auto}
  .svc-table thead th{
    text-align:start;padding:0 1rem .7rem 0;
    border-bottom:1px solid rgba(247,247,248,.28);
    font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:600;
    font-size:var(--fs-micro);color:var(--accent-lift);
  }
  .svc-table tr{display:table-row;border:0;padding:0;margin:0}
  .svc-table td{
    display:table-cell;padding:1rem 1rem 1rem 0;vertical-align:top;
    border-bottom:1px solid rgba(247,247,248,.18);
  }
  .svc-table td::before{display:none}
  .svc-table td:first-child{width:22%}
  .creds li{grid-template-columns:max-content minmax(0,1fr);align-items:baseline}
}
@media (max-width:60rem){
  .nav{display:none}
  .navtoggle{display:inline-flex}
  .header__cta{display:none}
}
@media (max-width:53.75rem){
  /* לצד כפתור התפריט הלוגו מתכווץ, אבל לא מתחת ל-40: שם גובה האות בשם
     יורד אל מתחת ל-9px ומפסיק להיקרא. */
  .header__logo img{height:40px}
  .hero{min-height:auto;padding-block:clamp(48px,10vw,72px)}
  /* המסך האלכסוני נבנה לפריסה רחבה, שבה הטקסט יושב בצד אחד. בטלפון
     הטקסט תופס את כל הרוחב, ולכן הקצה הכהה ביותר חנק את כל התצלום.
     כאן המסך אנכי: הראש נשאר קריא והתצלום נושם בחלקו העליון. */
  .hero::before{background:linear-gradient(to bottom,rgba(18,20,22,.34),rgba(18,20,22,.70) 32%,rgba(18,20,22,.82))}
  /* הערכים נמדדו מול הפיקסל הבהיר ביותר שיכול לשבת מתחת לטקסט (זרוע
     המשאבה הצהובה): הכיתוב העליון יוצא 5.4:1 והשאר גבוה יותר. */
  .hero::after{background:none}
  /* שלוש עמודות ב-350px נותנות 103px לתווית, ו"תואר שני בהנדסה" נשבר
     לשורות של מילה. שתיים נותנות ~160px. */
  .hero__stats{display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:0 1.25rem}
  .hero__stats .stat{border-bottom:0!important;padding:.75rem 0}
  .head__aside{margin-inline-start:0;text-align:start}
  /* הדיאגרמות עוטפות לשורה משלהן ונוחתות ממורכזות — קישוט קטן שצף לבדו
     באמצע מקטע כהה, שלוש פעמים. */
  .step__dia{display:none}
  .contact__form{border-inline-start:0;border-top:1px solid var(--divider)}
}
@media (max-width:40rem){
  body{padding-bottom:5rem}
  .callbar{display:flex;bottom:calc(1rem + var(--note-h,0px))}
  .a11y-fab{bottom:calc(5.25rem + var(--note-h,0px))}
  .a11y-panel{bottom:calc(9.5rem + var(--note-h,0px))}
  /* בטלפון ההודעה היא רצועה מלאה בתחתית; החיוג והנגישות עולים מעליה */
  .cookienote{bottom:0;inset-inline:0;width:auto;border-radius:0;border-inline:0;border-bottom:0;padding:.85rem 1rem}
  .facts__in{grid-template-columns:1fr;border-inline:0}
  .facts__cell{border-inline-start:0;border-block-end:1px solid var(--divider)}
  .facts__cell:last-child{border-block-end:0}
  .footer__legal nav{margin-inline-start:0}
}

/* ==========================================================================
   העדפות מערכת
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
  }
  [data-reveal].is-hidden{opacity:1;transform:none}

  /* "הפחתת תנועה" אינה "בלי משוב": הזזה היא מה שמפריע, לא שינוי שקיפות.
     יריעה שמופיעה ונעלמת בפריים אחד היא המקרה המבלבל ביותר, ולכן כאן
     היא מקבלת הצלבה קצרה במקום כלום. */
  .navdrawer[open]::backdrop{animation:scrim-in .16s linear!important}
  .navdrawer[open] .navdrawer__panel{animation:fade-in .16s linear!important;transform:none!important}
  .navdrawer.is-closing .navdrawer__panel{animation:fade-in .14s linear reverse!important}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  .qa__panel{transition:opacity .15s linear!important}
  .callbar{transform:none!important;opacity:0;transition:opacity .2s linear!important}
  .callbar.is-in{opacity:1}
}
@media (prefers-reduced-transparency:reduce){
  .header,.header.is-stuck{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .button--ondark{background:rgba(247,247,248,.14);backdrop-filter:none}
  .navdrawer::backdrop{backdrop-filter:none;background:rgba(20,22,24,.72)}
}
@media (prefers-contrast:more){
  :root{--divider:rgba(29,31,32,.42);--divider-strong:rgba(29,31,32,.62)}
  .symptom,.post,.contact,.callout{border-width:2px}
}

/* ==========================================================================
   התאמות מתפריט הנגישות
   ========================================================================== */
html.readable,html.readable body{font-family:Arial,Helvetica,sans-serif!important}
/* כל אלמנט תצוגה מצהיר ‎font-family‎ משלו, ולכן רשימה חלקית המירה רק חלק
   מהעמוד ו"גופן קריא" נראה שבור. */
html.readable h1,html.readable h2,html.readable h3,html.readable h4,
html.readable h5,html.readable h6,
html.readable .nav,html.readable .label,html.readable .step__n,html.readable .phone,
html.readable .kicker,html.readable .head__n,html.readable .post__meta,
html.readable .symptom__id,html.readable .qa__btn,html.readable .qa__tag,
html.readable .footer__brand,html.readable .footer h2,html.readable .svc-table td,
html.readable .svc-table th,html.readable .svc-table td::before,
html.readable .creds b,html.readable .flow b,html.readable .about__cap b,
html.readable .pull,html.readable .field label,html.readable .navdrawer__list a,
html.readable .nextread a,html.readable .post__more,
html.readable .shot figcaption strong,html.readable .a11y-panel h2{
  font-family:Arial,Helvetica,sans-serif!important;font-stretch:normal!important;
}
html.underline a{text-decoration:underline;text-underline-offset:3px}
html.stopmotion *,html.stopmotion *::before,html.stopmotion *::after{
  animation:none!important;transition:none!important;
}
html.stopmotion [data-reveal]{opacity:1!important;transform:none!important}
html.stopmotion .callbar{transform:none!important}

html.hc{
  --bg:#fff;--surface:#fff;--ink:#000;--paper:#fff;--graphite:#000;
  --divider:#000;--divider-strong:#000;
  /* הטקסט המשני חייב לעלות גם הוא לשחור מלא, אחרת "ניגודיות גבוהה"
     משאירה חצי מהעמוד באפור. */
  --text-2:#000;--text-3:#000;
  --accent:#00348f;--accent-ink:#00348f;--accent-deep:#00348f;
  --accent-tint:#fff;--accent-line:#000;--accent-lift:#ffe600;--focus:#00348f;
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;
}
/* הפתיח מאבד את התצלום, ולכן הרקע נקבע כאן ולא בגרדיאנט */
html.hc .hero{background:#000}
html.hc .hero::before,html.hc .hero::after{background:none}
html.hc .hero h1,html.hc .hero__lede,html.hc .kicker,
html.hc .hero__note,html.hc .stat__n,html.hc .stat__l{color:#fff}
html.hc .stat{border-color:#fff}
html.hc .kicker::before{background:#ffe600}
html.hc .step p,html.hc .step ul,html.hc .services__aside p,
html.hc .svc-table td,html.hc .footer p,html.hc .footer a,
html.hc .footer__legal,html.hc .footer__legal a{color:#fff}
html.hc body{background:#fff;color:#000}
html.hc .header,html.hc .header.is-stuck{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:2px solid #000}
html.hc .hero::before,html.hc .hero::after{background:rgba(0,0,0,.9)}
html.hc .hero__media{display:none}
html.hc .section--dark,html.hc .footer{background:#000;color:#fff}
html.hc .section--dark *,html.hc .footer *{color:#fff}
html.hc .section--dark .head__n,html.hc .footer h2,html.hc .step__n,
html.hc .step li::before{color:#ffe600}
html.hc .symptom,html.hc .post,html.hc .contact,html.hc .callout,
html.hc .chip,html.hc .empty-state,html.hc .a11y-panel,html.hc .navdrawer__panel,html.hc .cookienote{
  border:2px solid #000;background:#fff;
}
html.hc .button--solid{background:#00348f;color:#fff;border-color:#00348f}
html.hc .button--ondark{background:#000;color:#fff;border-color:#fff}
html.hc .about__cap{background:#000;position:static;padding:.75rem}
html.hc .shot figcaption,html.hc .recog blockquote,html.hc .pull{border-inline-start-color:#000}

/* ==========================================================================
   שטח נגיעה — במכשירי מגע בלבד
   קישור טקסט בגובה 18px הוא מטרה בלתי אפשרית לאגודל. כאן שטח הנגיעה גדל
   בלי לשנות את הגודל הנראה של הטקסט, ורק היכן שהקישור עומד בפני עצמו:
   קישור בתוך פסקה נשאר כפי שהוא, אחרת הפסקה מתפרקת.
   ========================================================================== */
/* משוב מגע. כל כללי ה-‎:hover‎ יושבים ב-‎(hover: hover)‎ ולכן בטלפון אף אחד
   מהם לא נורה — הקישורים, הכרטיסים וכל תפריט הניווט לא החזירו כלום.
   שקיפות ולא scale על טקסט: הקטנת שורה בעברית יוצרת ריצוד בעיבוד תת-פיקסלי. */
@media (hover: none){
  .navdrawer__list a:active,.navdrawer__close:active,.qa__btn:active,
  .post:active,.phone:active,.footer a:active,.legalnav a:active,
  .header__logo:active,.crumbs a:active,.nextread a:active{
    opacity:.6;transition:opacity .06s linear;
  }
  .navdrawer__list a,.navdrawer__close,.qa__btn,.post,.phone,
  .footer a,.legalnav a,.header__logo,.crumbs a,.nextread a{
    transition:opacity .2s var(--ease-out);
  }
  .navdrawer__close:active{transform:scale(.92)}
  .post:active{transform:scale(.985)}
  /* טשטוש על כל המסך מעל טשטוש הכותרת — היקר ביותר שיש, ומרוויח מעט
     מאוד מאחורי עמעום של 58%. */
  .navdrawer::backdrop{backdrop-filter:none;background:rgba(20,22,24,.58)}
}

@media (any-pointer: coarse){
  .footer__links a,
  .footer__legal a,
  .legalnav a,
  .crumbs a,
  .nextread a,
  .head__aside a,
  .contact__sig a,
  .more-projects a,
  .post__more{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer__links{gap:0}
  .a11y-panel a{display:inline-flex;align-items:center;min-height:44px}
  /* הכפתורים בתפריט הנגישות: 2.1rem הוא מתחת לסף */
  .a11y-btn{min-height:2.75rem;min-width:2.75rem}
  .phone{padding-block:.2em}
}

/* ==========================================================================
   ריחוף — כלל 3: כל ‎:hover‎ נמצא כאן, ורק במכשירים עם עכבר
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--accent-deep)}
  .nav a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
  .button--solid:hover{background:var(--accent-deep);color:#fff;box-shadow:var(--shadow-lg);transform:translateY(-1px)}
  .button--line:hover{border-color:var(--accent);background:var(--accent-tint)}
  .button--ondark:hover{background:rgba(247,247,248,.18);border-color:rgba(247,247,248,.8);color:var(--paper)}
  .navtoggle:hover{background:rgba(29,31,32,.06)}
  .post:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px);color:var(--ink)}
  .post:hover .post__frame img{transform:scale(1.02)}
  .qa__btn:hover{color:var(--accent-ink)}
  .phone:hover{color:var(--accent-ink)}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent)}
  .a11y-btn:hover{background:var(--surface)}
  .a11y-fab:hover{background:var(--surface)}
  .footer a:hover{color:var(--accent-lift)}
  .socbtn:hover{
    background:rgba(247,247,248,.12);border-color:rgba(247,247,248,.62);
    color:var(--paper);transform:translateY(-1px);
  }
  .legalnav a:hover{border-color:var(--accent)}
  .navdrawer__list a:hover{color:var(--accent-ink)}
}