/* ===== שתי ערכות על אותו עמוד =====
   ברירת מחדל: פורצלן, נייטרלים קרירים והזהב כאקסנט החם היחיד.
   ?theme=warm מחזיר את ערכת הקרם, למקרה שהיא תעדיף אותה.
   שתיהן על אותם טוקנים בדיוק, כך שכל שינוי עתידי חל על שתיהן ואין סחיפה. */
/* ===== שני משטחים בלבד =====
   לבן + קרם, ועליהם ברונזה אחת. הבעיה קודם לא הייתה הגוונים אלא שהיו
   חמישה משטחים: לבן, קרם, מוקה, כהה והכי כהה. ברפרנסים שלה יש שניים. */
:root{
  --cream:#FFFFFF; --cream-deep:#F8F3EC;
  --ink:#2A2622; --ink-soft:#6E655C;
  --line:#EBE3D8;
  --gold:#B08A5A; --gold-tx:#8A6634; --gold-soft:#F0E6D8;
  /* ⚠️ --gold על לבן נותן 3.17 בלבד, והתקן דורש 4.5. כל כפתור שיש עליו
     כיתוב לבן יושב על --gold-btn (5.21), ולא על --gold. רוחלי דיווחה על
     זה 27.8.2026 כ"טקסט לבן על רקע בהיר". */
  --gold-btn:#8A6634; --gold-btn-dp:#71512A;
  --ember:#D94620; --sage:#A9B79C;
  /* שמות ישנים נשארים כדי ששום כלל לא יישבר בשקט */
  --mocha:var(--gold); --mocha-dp:var(--gold-tx);
  --panel:var(--cream-deep); --panel-deep:var(--cream-deep);
  --slate:var(--gold); --slate-dp:var(--gold-tx);
  --on-panel:var(--ink); --on-panel-2:var(--ink-soft); --on-footer:var(--ink-soft);
  --on-slate:var(--ink-soft); --on-hero:#E8E2DA; --ico:var(--gold);
  --card-tx:#544C44; --ph:#F6F1E9; --ph-a:#F0E8DC;
  --scrim:42,38,34;
  --display:'Heebo',sans-serif; --sans:'Heebo',sans-serif;
  --t:.35s cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
/* תקרת 16:9 יושבת על התוכן ולא על העמוד, כדי שצבעי הסקציות ימשיכו עד הקצה */
:root{--shell:max(1232px, calc(100vh * 16 / 9))}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.sec{padding:82px 0}
/* letter-spacing יורד כשהגופן גדל, אחרת הכיתוב נמתח לרוחב חצי שורה */
.eyebrow{font-size:14px;letter-spacing:.22em;color:var(--gold-tx);font-weight:700;margin-bottom:12px}
h2{font-family:var(--display);font-size:clamp(30px,4.4vw,44px);font-weight:500;line-height:1.2;margin-bottom:14px}
.lead{color:var(--ink-soft);font-size:16.5px;max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;font-weight:600;font-size:15px;transition:var(--t);cursor:pointer;border:none;font-family:inherit}
.btn-gold{background:var(--gold-btn);color:#fff}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn-gold:hover{background:var(--gold-btn-dp);color:#fff}
.btn-out{border:1px solid var(--gold);color:var(--ink)}
.btn-out:hover{background:var(--gold-tx);border-color:var(--gold-tx);color:#fff}
.btn-mocha{background:var(--gold-btn);color:#fff}
.btn-mocha:hover{background:var(--gold-btn-dp)}

/* ===== ראש העמוד: לוגו גדול, אחריו אייקונים, אחריהם כתובת וטלפון =====
   הלוגו יצא מסרגל הניווט — עם לוגו גדול ממש מעליו, שני לוגואים במרחק
   כמה פיקסלים זה כפילות. הרפרנסים שלה בנויים בדיוק ככה. */
.mast{background:var(--cream);padding:16px 0 18px}
.mast .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.mast__soc{display:flex;gap:10px;align-items:center}
.mast__soc .ico{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--cream-deep);
  border:1px solid var(--line);transition:var(--t)}
.mast__soc .ico svg{width:17px;height:17px;fill:var(--gold-tx);transition:var(--t)}
.mast__soc .ico:hover{background:var(--gold-tx);border-color:var(--gold-tx)}
.mast__soc .ico:hover svg{fill:#fff}
.mast__info{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 0;font-size:14.5px;font-weight:700;color:var(--ink)}
.mast__info>*{padding:0 15px;border-inline-start:1px solid var(--line);white-space:nowrap}
.mast__info>*:first-child{border:0}
.mast__info a:hover{color:var(--gold-tx)}
@media(max-width:600px){
  .mast{padding:20px 0 16px}
  .mast__info{font-size:13.5px;gap:4px 18px}
  .mast__info>*{padding:0;border:0}
}
nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
/* בדסקטופ הלוגו הגדול יושב ממש מעל, אז כאן הוא מיותר. בטלפון הסרגל
   הדביק נשאר בלי שום זיהוי בלעדיו, וההמבורגר לבד נראה כמו תקלה. */
.nav__mini{display:block}
.nav__mini img{height:50px;width:auto}
nav img{height:46px;width:auto}
.nlinks{display:flex;gap:26px;font-size:15px;font-weight:500;align-items:center}
.nlinks>li{position:relative;list-style:none}
.nlinks>li>a{position:relative;padding:26px 0;display:inline-flex;align-items:center;gap:6px}
.nlinks>li>a::after{content:'';position:absolute;bottom:20px;inset-inline-start:0;width:100%;height:1.5px;
  background:var(--ember);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t)}
.nlinks>li:hover>a::after,.nlinks>li:focus-within>a::after{transform:scaleX(1);transform-origin:0 50%}
/* גבולות פיזיים ולא לוגיים: border-inline-end ב-RTL הוא השמאלי, והחץ הצביע הצידה */
.caret{width:8px;height:8px;border-right:1.6px solid var(--mocha);border-bottom:1.6px solid var(--mocha);
  transform:rotate(45deg);margin-bottom:3px;transition:var(--t)}
.nlinks>li:hover .caret{transform:rotate(225deg);margin-bottom:-2px}

/* מגה־תפריט הטיפולים */
/* inline-start = ימין ב-RTL: התפריט נפתח שמאלה מהפריט, אחרת הוא גולש מהמסך */
.mega{position:absolute;top:100%;inset-inline-start:0;max-width:calc(100vw - 40px);
  background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--gold);box-shadow:0 24px 60px rgba(var(--scrim),.13);
  padding:26px 30px;display:grid;grid-template-columns:repeat(3,minmax(178px,1fr));gap:8px 34px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--t)}
.nlinks>li:hover .mega,.nlinks>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
/* .gl ולא h4 — כותרות תפריט לפני ה-H1 שוברות את היררכיית הכותרות לקורא מסך */
.mega .gl{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;color:var(--gold);
  font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega a{display:block;padding:7px 0;font-size:14.5px;font-weight:400;color:var(--ink);
  border-inline-start:2px solid transparent;padding-inline-start:0;transition:var(--t)}
.mega a:hover{color:var(--mocha-dp);padding-inline-start:7px;border-inline-start-color:var(--ember)}
.mega a small{display:block;font-size:12px;color:var(--ink-soft);margin-top:1px}

.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:0}
.ham span{width:25px;height:2px;background:var(--ink);border-radius:2px;transition:var(--t)}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* מגירת מובייל */
.scrim{position:fixed;inset:0;background:rgba(var(--scrim),.5);opacity:0;visibility:hidden;
  transition:var(--t);z-index:95}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(87vw,360px);background:#fff;z-index:96;
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.dhead img{height:38px}
.dclose{background:none;border:0;font-size:30px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 6px}
/* flex-grow ולא margin-top:auto על ה-dfoot — עם תוכן שגולש, ה-auto מיקם אותו מעל הקישורים */
.dnav{flex:1 0 auto;padding:8px 0 18px}
.dnav a,.dtog{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 22px;font-size:16.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--cream-deep);
  background:none;border-inline:0;border-top:0;text-align:start;font-family:var(--sans);cursor:pointer}
.dtog .caret{border-color:var(--mocha)}
.dtog[aria-expanded="true"] .caret{transform:rotate(225deg);margin-bottom:-2px}
.dsub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--cream)}
.dsub.on{max-height:900px}
.dsub .gl{font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700;padding:14px 22px 4px;margin:0}
.dsub a{padding:11px 22px 11px 22px;font-size:15px;font-weight:400;border-bottom:0;color:var(--mocha-dp)}
.dfoot{flex:0 0 auto;padding:20px 22px calc(26px + env(safe-area-inset-bottom,0px));
  background:var(--cream-deep);border-top:1px solid var(--line)}
.dfoot .btn{width:100%;justify-content:center;display:flex;margin-bottom:10px}
.dfoot .soc2{display:flex;gap:12px;justify-content:center;margin-top:16px}
.dfoot .soc2 a{width:36px;height:36px;border-radius:50%;background:var(--ink);
  display:inline-flex;align-items:center;justify-content:center}
.dfoot .soc2 svg{width:16px;height:16px;fill:#fff}
.dfoot .hrs{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:14px;line-height:1.7}
/* פס ההתקשרות והכפתורים הצפים חוסמים את סוף התפריט — מורידים אותם כל עוד הוא פתוח */
body.navopen .a11y,body.navopen .wa{display:none}

/* הירו בהיר. התמונה מדוהה לשקיפות בקצוות, כך שהרקע שלה הוא ממש רקע
   הסקציה — לא צבע שדומה לו. */
.hero{background:var(--cream-deep);border-block:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:.86fr 1.24fr;gap:24px;align-items:center;
  padding-top:44px;padding-bottom:44px}
.hero .in{color:var(--ink)}
.hero .kick{font-size:12.5px;letter-spacing:.26em;color:var(--gold-tx);font-weight:700;text-shadow:none}
.hero h1{font-family:var(--display);font-size:clamp(34px,4.8vw,54px);font-weight:300;
  line-height:1.14;margin:14px 0 16px;color:var(--ink)}
.hero p{font-size:16.5px;color:var(--ink-soft);max-width:46ch;line-height:1.8}
.hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* נמדד: בשורה אחת ב-390px צריך <=13px, אחרת זה נשבר לשתי שורות */
.hero .hproof,.hproof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:20px;
  font-size:14px;color:var(--ink-soft);line-height:1.6}
.hproof span{position:relative;padding-inline-start:15px;white-space:nowrap}
.hproof span::before{content:'';position:absolute;inset-inline-start:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero .pic{margin:0}
.hero .pic img{width:112%;max-width:none;height:auto;display:block;margin-inline-start:-6%}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:6px;padding-top:22px;padding-bottom:24px}
  .hero .pic{order:-1}
  .hero .pic img{width:108%;margin-inline-start:-4%;max-width:none}
  .hero h1{font-size:clamp(27px,7.4vw,34px);margin:9px 0 10px}
  .hero p{font-size:15px;line-height:1.7}
.hero .kick{font-size:11px;letter-spacing:.2em}
  /* בטלפון הטקסט ממורכז, אבל max-width על הפסקה משאיר אותה צמודה לימין
     גם כשהיישור מרוכז — לכן גם margin-inline:auto */
  .hero .in{text-align:center}
  .hero p{margin-inline:auto;max-width:34ch}
  .hero .cta{justify-content:center}
  .hero .hproof{justify-content:center;font-size:12.5px;margin-top:14px;max-width:none}
  .hero .cta{gap:8px;margin-top:16px}
  .hero .cta .btn{flex:1 1 0;min-width:0;padding:10px 8px;font-size:12px;gap:5px;font-weight:600}
  .hero .cta .btn svg{width:12px;height:12px}
}
/* אות רפאים ענקית ברקע — טקסט טהור, בלי תמונה ובלי בייטים */
.ghosted{position:relative;overflow:hidden}
.ghosted>.wrap{position:relative;z-index:1}
/* מילוי מלא ולא -webkit-text-stroke: קו מתאר על משקל דק מצייר את שני צידי
   הקו והספרות יוצאות כקווים כפולים מצטלבים. מסה טונאלית אחת נקייה במקום. */
.ghost{position:absolute;pointer-events:none;user-select:none;z-index:0;
  font-family:var(--display);font-weight:600;line-height:.78;letter-spacing:-.03em;
  font-size:clamp(96px,15vw,205px);color:var(--line);
  inset-inline-end:7%;top:24px}
@media(max-width:1000px){.ghost{inset-inline-end:2%;font-size:120px}}
@media(max-width:760px){.ghost{display:none}}

/* רשת אייקונים במקום תמונות. קווי הרשת נוצרים מ-gap על רקע --line —
   כך יש קו שיער אחד בין תאים ולא גבול כפול. */
.h2-sm{font-size:clamp(22px,2.7vw,30px);line-height:1.3}
.sec-title{font-family:var(--display);font-size:clamp(30px,4.6vw,46px);font-weight:500;
  line-height:1.15;text-align:center;margin-bottom:6px}
.sec-title+.tgrid{margin-top:64px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:38px;
  background:var(--line);border:1px solid var(--line)}
.tcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:34px 18px;background:var(--cream);transition:background var(--t)}
.tcard:hover{background:var(--gold-soft)}
/* האייקונים הם קבצי SVG חיצוניים, לא inline. הצבע אפוי בתוך הקובץ — currentColor
   לא נפתר דרך <img> — ולכן ה-hover משנה שקיפות ולא צבע קו. */
.tcard img{width:82px;height:82px;flex:none;display:block;
  transition:opacity var(--t),transform var(--t)}
.tcard:hover img{opacity:.78;transform:translateY(-2px)}
/* פריט אחרון ברשת של 13 — נותן לו את כל השורה במקום להשאיר תא ריק */
/* ⚠️ מותחים את הכרטיס האחרון רק כשהוא באמת נשאר לבד בשורה. הכלל נכתב
   כשהיו 13 טיפולים, ואז האחרון היה יתום. אחרי שהוסר כרטיס כפול נשארו
   12 — שזה בדיוק ארבע שורות של שלושה — והמתיחה יצרה חור בשורה הרביעית.
   nth-child(3n+1) על האחרון = השארית היא אחד, כלומר יתום אמיתי. */
.tcard:last-child:nth-child(3n+1){grid-column:1/-1}
.tcard b{font-size:16px;font-weight:600;color:var(--ink);display:block;line-height:1.35}
.tcard span{font-size:13px;color:var(--ink-soft);line-height:1.5}
@media(max-width:760px){.tgrid{grid-template-columns:1fr 1fr}.tcard{padding:26px 12px;gap:11px}
  .tcard img{width:66px;height:66px}.tcard b{font-size:14.5px}.tcard span{display:none}}
.tnote{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-soft)}
.basec{background:var(--cream-deep)}
.bagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.bapair{background:#fff;border:1px solid var(--line)}
.bapair .imgs{display:grid;grid-template-columns:1fr 1fr}
.bapair figure{margin:0;position:relative;background:var(--ph)}
.bapair img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* התווית יושבת על התמונה ולא מתחתיה — אחרת שתי שורות טקסט לכל כרטיס */
.bapair figcaption{position:absolute;inset-block-end:8px;inset-inline-start:8px;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:11.5px;font-weight:600;
  padding:3px 9px;letter-spacing:.02em}
.bapair figure+figure{border-inline-start:1px solid var(--line)}
.bapair .lbl{padding:13px 16px;font-weight:600;font-size:15px;border-top:1px solid var(--line)}

#about{background:var(--cream-deep)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;
  max-width:var(--shell);margin-inline:auto}
.about .pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%;min-height:440px}
.about .txt{background:var(--cream-deep);color:var(--ink);padding:64px 48px;display:flex;flex-direction:column;justify-content:center}
.about .yr{font-size:78px;font-weight:200;line-height:1;color:var(--gold-tx);margin-bottom:8px}
.about h2{color:var(--ink);margin-bottom:16px}
.about p{color:var(--ink-soft);font-size:16px;margin-bottom:14px}
.aq{margin:6px 0 14px;padding-inline-start:16px;border-inline-start:2px solid var(--gold);
  font-size:15.5px;line-height:1.85;color:var(--ink);font-style:normal}
.amore{margin-top:22px;align-self:flex-start}
.about .sig{font-family:var(--display);font-size:24px;font-weight:300;color:var(--gold-tx);margin-top:10px}

/* ===== רצועת המותגים: שורה שנוסעת, בלי הבהוב =====
   כלום לא זז אלא אם JS הדליק data-motion="on", ואותו קוד בדיוק הוא היחיד
   שחושף את כפתור העצירה. בלי JS אין תנועה ולכן גם אין כפתור מת. */
.rkb,.rkb *,.rkb *::before,.rkb *::after{box-sizing:border-box}
.rkb{
  --rkb-cap:clamp(34px,5.4vw,56px);   /* גובה אופטי ייחוס */
  --rkb-r0:2.68;                      /* היחס הכי מרובע מבין הסימנים האופקיים */
  --rkb-cycle:26s;
  --rkb-rest:.58;                     /* עמעום במנוחה — לוגואים בלבד */
  --rkb-rest-text:.72;                /* טקסט אמיתי: רצפה גבוהה יותר, אחרת נופלים מ-4.5:1 */
  --rkb-x:1;                          /* הסימן הפיזי של inline-end */
  background:var(--cream-deep);color:var(--ink);
  padding-block:clamp(56px,8vw,90px);overflow-x:clip}
/* שני כללים נפרדים ולא רשימה: מנוע שלא מכיר :dir() זורק רשימה שלמה */
[dir="rtl"] .rkb{--rkb-x:-1}
.rkb:dir(rtl){--rkb-x:-1}
@media(max-width:640px){.rkb{--rkb-cycle:20s}}

.rkb__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px;
  padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,5vw,48px)}
.rkb__headtext{flex:1 1 22rem;min-inline-size:0}
.rkb__lead{margin-top:.6em;max-width:44ch;font-size:15.5px;line-height:1.8;color:var(--mocha-dp)}
.rkb__note{margin-top:clamp(26px,4vw,36px);text-align:center;font-size:12.5px;color:var(--mocha-dp)}
.rkb__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* כפתור ההשהיה — WCAG 2.2.2 דורש שהתנועה תהיה עצירה, לא שהפקד יצעק.
   לכן הוא יושב בשורת הקרדיט בתחתית כטקסט קטן: נוכח, נגיש במקלדת, ולא מתחרה
   בשום דבר. הטקסט הנראה זהה לשם הנגיש, אז אין פער SC 2.5.3. */
.rkb__toggle{font:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:2px 0;
  margin-inline-start:6px;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;opacity:.85;transition:var(--t)}
.rkb__toggle[hidden]{display:none}
.rkb__toggle:hover{opacity:1;color:var(--ink)}
.rkb__toggle:focus-visible{outline:2px solid var(--mocha-dp);outline-offset:3px;border-radius:2px}

/* מסכת דהייה בקצוות — בלעדיה הלוגו נחתך בחדות בשוליים ונראה שבור.
   max-width קריטי: אם המסילה רחבה מסט אחד, רואים את אותם שלושה לוגואים
   פעמיים בו-זמנית והלולאה נחשפת. */
.rkb__rail{position:relative;overflow:hidden;margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.rkb__strip{--rkb-n:3;list-style:none;margin:0;padding:0;width:max-content;
  display:flex;align-items:center;gap:clamp(46px,7vw,100px);
  padding-inline:clamp(23px,3.5vw,50px)}
/* שטח אופטי שווה, לא גובה שווה: h=cap·k, w=cap·k·ar, k=√(r0/ar).
   בגובה שווה לוגו 5.8:1 היה יוצא פי שניים רחב מבלוק 2.4:1 */
.rkb__cell{--ar:2.44;--kf:1;--k:var(--kf);
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:calc(var(--rkb-cap) * var(--k));width:calc(var(--rkb-cap) * var(--k) * var(--ar))}
@supports (width:calc(1px * sqrt(4))){
  .rkb__cell{--k:clamp(.62,sqrt(var(--rkb-r0) / var(--ar)),1.12)}}
.rkb__mark{position:relative;z-index:1;opacity:1}
/* aspect-ratio מ---ar נותן לתמונה את הקופסה הנכונה לפני הפענוח: אפס קפיצת פריסה */
.rkb__mark--img{display:block;height:100%;width:auto;aspect-ratio:var(--ar);
  max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) contrast(.94)}
.rkb__mark--img[data-tone="brand"]{filter:none}
/* סימן שאין לו קובץ ברזולוציה ראויה נכתב באות ולא מנופח מ-16 פיקסל */
.rkb__cell--type{width:auto}
.rkb__mark--type{display:flex;align-items:center;height:100%;white-space:nowrap;
  font-family:var(--sans);font-weight:600;line-height:1;
  font-size:calc(var(--rkb-cap) * var(--k) * .46);letter-spacing:.08em;
  color:var(--ink);padding-inline-start:.08em}
@media(hover:hover){.rkb__cell:hover .rkb__mark--img{filter:none}}

/* הטכנולוגיות: שם בלי הסבר לא אומר כלום — אף לקוחה לא יודעת מה זה Dye-VL.
   לצידם המכונה האמיתית שלה, חתוכה מצילום הקליניקה ולא תמונה שנוצרה. */
.rkb__tech{display:grid;grid-template-columns:minmax(0,460px);justify-content:center;gap:clamp(26px,4vw,44px);
  align-items:center;margin-top:clamp(34px,5vw,50px);padding-top:clamp(30px,4vw,42px);
  border-top:1px solid var(--line)}
.rkb__dev{margin:0;background:#fff;border:1px solid var(--line);padding:9px}
.rkb__dev img{width:100%;height:clamp(240px,26vw,330px);object-fit:cover;object-position:center 38%}
.rkb__dev figcaption{display:flex;justify-content:center;padding:14px 4px 4px}
.rkb__dev figcaption .btn{padding:10px 22px;font-size:13.5px}
.rkb__list{list-style:none;margin:0;padding:0}
/* גריד ולא flex: רק גריד נותן עמודה אחת אמיתית שכל השמות נצמדים אליה.
   בלי dir="ltr" על השם — שם לטיני בהקשר RTL מסתדר לבד לפי הביד״י, ואילו
   dir מפורש היה מיישר אותו שמאלה בתוך התא בזמן שהעבריים ימינה. */
.rkb__li{display:grid;grid-template-columns:10em 1fr;gap:3px 20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.rkb__li:last-child{border-bottom:0}
.rkb__li b{text-align:start;unicode-bidi:isolate;font-weight:600;font-size:15.5px;color:var(--ink)}
.rkb__li span{font-size:14.5px;color:var(--mocha-dp);line-height:1.7;text-wrap:pretty}
@media(max-width:900px){
  .rkb__tech{grid-template-columns:1fr}
  .rkb__li{grid-template-columns:1fr;gap:2px}
}

/* ---- שכבת התנועה. נדלקת רק דרך data-motion="on" ---- */
.rkb__strip[data-motion="on"] .rkb__cell{
  transition:opacity .7s var(--t),transform .7s var(--t);
  transition-delay:calc(var(--i,0) * 90ms)}
/* הכניסה מגיעה מצד ההתחלה — ימין בעברית — ולכן ההיפוך מול --rkb-x */
.rkb__strip[data-motion="on"][data-reveal="armed"] .rkb__cell{
  opacity:0;transform:translate3d(calc(var(--rkb-x) * -10px),14px,0)}
/* המסילה נוסעת פיזית. -50% בדיוק כי ה-JS משכפל את הסט פעם אחת,
   כך שברגע שהעותק הראשון יצא, השני יושב בדיוק במקומו והתפר בלתי נראה. */
.rkb__strip[data-motion="on"]{animation:rkb-run var(--rkb-cycle) linear infinite;
  will-change:transform}
.rkb__strip[data-motion="on"]:not([data-inview]){animation-play-state:paused}
@keyframes rkb-run{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--rkb-x) * -50%),0,0)}}
.rkb__rail:hover .rkb__strip[data-motion="on"]{animation-play-state:paused}
@media(forced-colors:active){
  .rkb__strip .rkb__mark{animation:none!important;opacity:1!important;
    transform:none!important;filter:none!important}
  }
@media print{
  .rkb{background:none}.rkb__toggle,  .rkb__strip .rkb__cell,.rkb__strip .rkb__mark{opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important}
  .rkb__mark--img{filter:none!important}}

.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.rev{background:var(--cream-deep);border:1px solid var(--line);padding:26px}
/* ⚠️ היה #E7B84B — 1.85 על לבן ו-1.68 על הקרם. כוכב שנושא את הדירוג
   הוא אובייקט גרפי משמעותי וחייב 3:1. #AD7F0A נותן 3.61 ו-3.27. */
.stars{color:#AD7F0A;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.rev p{font-size:15px;color:var(--card-tx);margin-bottom:16px}
.rev .who{display:flex;align-items:center;gap:11px;font-size:14px}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--mocha);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.gbadge{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:13.5px;color:var(--ink-soft)}

/* ===== איפה זה קורה ===== */
.place{background:var(--cream-deep)}
.pwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch;margin-top:38px}
.pshots{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.pshots figure{margin:0;position:relative;overflow:hidden;background:var(--line)}
.pshots figure:first-child,.pshots figure.wide{grid-column:1/-1}
.pshots img{width:100%;height:200px;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pshots figure:first-child img{height:300px;object-position:center 32%}
/* פס נמוך ורחב לסגירת הבלוק — פרט ולא סצנה, אז הוא לא צריך גובה */
.pshots figure.wide img{height:150px;object-position:center 55%}
.pshots figure:hover img{transform:scale(1.05)}

.pside{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
/* רשת עדינה שתקרא כאזור-מפה עוד לפני שנטענה */
.pmap{position:relative;flex:1 1 auto;min-height:300px;display:flex;align-items:center;justify-content:center;
  background:var(--cream);
  background-image:linear-gradient(var(--cream-deep) 1px,transparent 1px),
    linear-gradient(90deg,var(--cream-deep) 1px,transparent 1px);
  background-size:34px 34px}
.pmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* טעינה-בלחיצה: גוגל לא מקבל את המבקרת עד שהיא בוחרת בזה. תיקון 13 */
.pmapbtn{background:none;border:0;cursor:pointer;font-family:inherit;padding:30px 26px;text-align:center;
  color:var(--mocha-dp);display:flex;flex-direction:column;align-items:center;gap:10px}
.pmapbtn .pin{width:46px;height:46px;border-radius:50%;background:var(--mocha);
  display:flex;align-items:center;justify-content:center;transition:var(--t);
  box-shadow:0 6px 18px rgba(94,74,62,.22)}
.pmapbtn .pin svg{width:21px;height:21px;fill:#fff}
.pmapbtn:hover .pin{background:var(--mocha-dp);transform:translateY(-2px)}
.pmapbtn b{font-size:16.5px;font-weight:600}
.pmapbtn small{font-size:12.5px;color:var(--ink-soft);line-height:1.65;max-width:30ch}
.paddr{padding:22px 26px;border-top:1px solid var(--line);text-align:center}
/* שתי השורות באותו גודל ואותו גוון — לא שחור */
.paddr .st{font-family:var(--display);font-size:19px;font-weight:600;color:var(--mocha-dp);line-height:1.5}
.paddr .btn{margin-top:16px}
.pnote{margin-top:22px;font-size:13.5px;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start}
.pnote b{color:var(--mocha-dp);font-weight:600}

.contact{background:var(--cream-deep);color:var(--ink);border-top:1px solid var(--line)}
/* --gold-tx נועד לרקע בהיר; על כהה הוא נבלע, אז חוזרים לזהב המלא */
.contact .eyebrow{color:var(--gold)}
.cwrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact h2{color:var(--ink)}
.contact .lead{color:#b3a89d}
.finfo{margin-top:30px}
.finfo .row{display:flex;gap:13px;align-items:center;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px}
/* SVG ולא תווי יוניקוד: ☎ ו-⌖ מצוירים אחרת בכל מערכת הפעלה, וחלקם נופלים לאמוג'י */
.finfo .ic{width:19px;height:19px;flex:none;fill:var(--gold)}
.hours{margin-top:26px;font-size:14.5px}
.hours .h{display:flex;justify-content:space-between;padding:6px 0;color:var(--on-panel);max-width:300px}
/* טווח שעות הוא רצף LTR — בלי זה ה-bidi מציג "18:00–9:00" */
.hours .h span,.hrs time{direction:ltr;unicode-bidi:isolate}
.hours .h b{font-weight:500;color:var(--ink)}
form{background:#fff;padding:34px;color:var(--ink)}
form h3{font-family:var(--display);font-size:26px;font-weight:500;margin-bottom:6px}
form .sub{font-size:14px;color:var(--ink-soft);margin-bottom:20px}
form input[type="tel"]{direction:rtl;text-align:right}
form input,form textarea{width:100%;padding:12px 15px;border:1px solid var(--line);
  margin-bottom:12px;font-family:inherit;font-size:15px;background:#fdfbf8}
form textarea{min-height:96px;resize:vertical}
form input:focus,form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
form button{width:100%}
.consent{font-size:12.5px;color:var(--ink-soft);margin-top:12px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

footer{background:#fff;border-top:1px solid var(--line);color:var(--ink-soft);font-size:14.5px;padding:56px 0 0}
.fgrid{display:grid;grid-template-columns:1.15fr 1.5fr 1fr 1fr;gap:34px}
.fcols{columns:2;column-gap:24px}
.fcols li{break-inside:avoid}
footer h4{color:var(--ink);font-size:15.5px;margin-bottom:14px;font-weight:600}
footer li{list-style:none;padding:4px 0}
footer a:hover{color:var(--gold)}
footer .logo{height:56px;margin-bottom:14px}
.fbot{border-top:1px solid var(--line);margin-top:44px;padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.fbot a{text-decoration:underline}

/* הכפתורים הצפים בגווני האתר ולא בירוק וואטסאפ ובכחול נגישות.
   הירוק והכחול הם צבעי מותג של חברות אחרות — הם צועקים בעמוד נקי. */
.wa,.a11y{position:fixed;bottom:22px;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:100;
  background:var(--cream);border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(42,38,34,.10);transition:var(--t);cursor:pointer}
.wa{inset-inline-end:22px}
.a11y{inset-inline-start:22px}
.wa svg,.a11y svg{width:25px;height:25px;fill:var(--gold-tx);transition:var(--t)}
.wa:hover,.a11y:hover{background:var(--gold-tx);border-color:var(--gold-tx);
  box-shadow:0 6px 20px rgba(42,38,34,.16)}
.wa:hover svg,.a11y:hover svg{fill:#fff}
.a11y:focus-visible,.wa:focus-visible{outline:2px solid var(--gold-tx);outline-offset:3px}
/* סרגל ההדגמה — פיגום, לא כרום של האתר. לא עובר לוורדפרס. */
.ribbon{background:var(--sage);color:#1e2a1c;font-size:13.5px;padding:8px 16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;text-align:center}
@media(max-width:600px){.ribbon{font-size:12.5px}}

@media(max-width:1150px){
  .nlinks{gap:19px;font-size:14.2px}
  .mega{grid-template-columns:repeat(3,minmax(155px,1fr));gap:8px 24px;padding:22px 24px}
}
@media(max-width:1000px){
  .about{grid-template-columns:1fr}
  .about .pic img{min-height:340px}
  .cwrap{grid-template-columns:1fr;gap:36px}
  .pwrap{grid-template-columns:1fr;gap:24px}
  .pmap{min-height:260px}
  .fgrid{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr 1fr}
}
/* התפריט עובר להמבורגר לפני שהוא נדחס — לא רק בטלפון */
@media(max-width:940px){
  .nlinks,.ncta{display:none}
  .ham{display:flex}
  nav .wrap{height:66px}
  nav img{height:42px}
}
@media(max-width:760px){
  .sec{padding:56px 0}
  .hero{min-height:auto}
  .hero .wrap{padding-top:54px;padding-bottom:58px}
  .hero .in{max-width:none}

  /* הטיפולים נשארים בשתי עמודות בטלפון — שלוש־עשרה שורות בעמודה אחת זו גלילה
     ארוכה מדי, והכרטיס בטלפון קומפקטי ממילא (בלי תת-כותרת) */
  .bagrid,.rgrid{grid-template-columns:1fr}
  .pshots img{height:165px}
  .pshots figure:first-child img{height:250px}
  /* שתי עמודות בפוטר — עמודה אחת הפכה אותו לגלילה אינסופית בטלפון */
  .fgrid{grid-template-columns:1fr 1fr;gap:30px 20px}
  .fgrid>div:first-child{grid-column:1/-1}
  /* רשימת הטיפולים על כל הרוחב, אחרת שני טורים בתוך חצי מסך נדחסים */
  .fwide{grid-column:1/-1}
  .topbar .wrap{justify-content:center;font-size:12.5px;gap:10px}
  .about .txt{padding:40px 26px}
  .rkb__strip{gap:26px 30px}
  .rkb__toggle{margin-inline-start:0}
  .wa,.a11y{width:46px;height:46px;bottom:16px}
  .a11y{inset-inline-start:16px}
  .wa{inset-inline-end:16px}

}
/* יעדי מגע לאצבע — האתר הזה נמכר על נגישות, אז גם בטלפון */
@media(hover:none),(max-width:760px){
  .topbar .soc .ico{width:38px;height:38px}
  .topbar .soc .ico svg{width:19px;height:19px}
  .topbar .soc>a:not(.ico){padding:5px 2px}
  .fgrid a{display:inline-block;padding:6px 0}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .topbar{font-size:12px}
  .btn{padding:13px 22px;font-size:14.5px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
