/* נטע, דן ריזינגר. מלון דניאל, 1972. קוד פתוח, חינם, דו לשוני.
   הורד מ-reisinger.hafontia.com. שלושה משקלים, כמו שחיים מגביל.
   בא במקום סקולר וואן, שיש לו משקל אחד ולכן אין בו היררכיה במשקל. */
@font-face{font-family:'Neta';src:url('fonts/neta-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neta';src:url('fonts/neta-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neta';src:url('fonts/neta-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* מדרשת ירושלים של זהב. שפת עיצוב: חצר של חג.
   בהיר, חם, ירושלמי. אפס ספריות חיצוניות. */

:root{
  --ink:#143A3A;
  --teal:#1F8A8A;
  --teal-d:#156969;
  --gold:#E0A94E;
  --gold-d:#C98F31;
  --gold-text:#8F6418; /* הזהב לטקסט. C98F31 נותן 2.82:1 על לבן
                          ו-2.58:1 על הקרם, ונכשל ב-1.4.3 */
  --copper:#B24F33;            /* 4.74:1 על הקרם. היה C85A3C ונתן 3.86:1 */
  --cream:#FBF4EA;
  --cream2:#F3E7D4;
  --sand:#EFE1C8;
  --white:#fff;
  --wa:#128C7E;                /* 4.14:1 ללבן. הבהיר נתן 1.98:1 */
  --soft:rgba(20,58,58,.74);
  --faint:rgba(20,58,58,.78);  /* 4.73:1 על הקרם ב-.7, אבל רק 4.36:1 על
                                  ה-sand בעמוד הפליירים. .78 עובר בשניהם */
  --head:'Neta','Secular One',sans-serif;
  --body:'Alef',sans-serif;
  --heritage:'Frank Ruhl Libre',Georgia,serif;
  /* סולם טיפוגרפי: חמישה גדלים לאתר כולו, שיעור 25.
     כל ערך מזדמן התגלגל לאחד מהם. ההפרש בין שכנים גדול מארבעה
     פיקסלים, כי הפרש של פיקסל אינו היררכיה, העין לא רואה אותו. */
  --fs-note:14px;
  --fs-note-site:14px;
  --fs-body-site:18px;
  --fs-lead-site:22px;
  --fs-body:18px;
  --fs-lead:22px;
  --fs-sec:clamp(28px,3.6vw,40px);
  --fs-hero:clamp(38px,6.4vw,74px);
  --r:16px;
  --r2:22px;
  --sh:0 10px 30px rgba(20,58,58,.09);
  --sh2:0 20px 50px rgba(20,58,58,.14);
}
*{box-sizing:border-box}

/* מחוון פוקוס אחד לכל האתר. הדיו נותן 11.3:1 על הקרם,
   והזהב שהיה כאן קודם נתן 1.9:1 ולכן לא נראה כלל. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}

/* דילוג על הניווט החוזר. נראה רק כשהוא מקבל פוקוס. */
/* right:-9999px בעמוד מימין לשמאל דוחף את הגוף החוצה ויוצר גלילה
   אופקית. החבאה בחיתוך לא יוצרת רוחב בכלל. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:0;right:0;width:auto;height:auto;
  clip-path:none;z-index:200;background:var(--ink);color:var(--cream);
  padding:13px 22px;border-radius:0 0 12px 0;font-weight:700;
  text-decoration:none}
main:focus{outline:none}
html{scroll-behavior:smooth;scroll-padding-top:86px} /* ההדר הדביק 70px,
  ובלי זה מה שמקבל פוקוס בחזרה ב-Shift+Tab מסתתר מתחתיו. 2.4.11 */
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-body);line-height:1.35;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2{font-family:var(--head);font-weight:700;line-height:1.05;margin:0}
h3,h4{font-family:var(--head);font-weight:500;line-height:1.1;margin:0}
p{margin:0 0 .9em}
a{color:var(--teal-d)}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
section{padding:66px 0}
.kicker{font-size:var(--fs-note);font-weight:700;color:var(--copper);margin-bottom:10px;
  letter-spacing:.02em}
.kicker.gold{color:var(--gold)}
h1{font-size:clamp(38px,6.4vw,74px)}
h2{font-size:clamp(28px,3.8vw,42px);margin-bottom:12px}
.lede{font-size:var(--fs-lead);color:var(--soft);max-width:54ch;margin-top:16px}
.sub{font-size:var(--fs-lead);color:var(--soft);max-width:62ch;margin-bottom:26px}
.note{font-size:var(--fs-note);color:var(--faint)}
.tiny{font-size:var(--fs-note)}

/* ------------------------------------------------------------------ הדר */
.bar{position:sticky;top:0;z-index:60;background:rgba(251,244,234,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--cream2)}
.bar .wrap{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.bmark{width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--cream) 0 22%, transparent 23%),
    conic-gradient(var(--gold) 0 25%, var(--teal) 0 50%, var(--copper) 0 75%, var(--gold-d) 0);
  box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--gold)}
.bname{font-family:var(--head);font-size:var(--fs-body);line-height:1.1}
.bname i{display:block;font-style:normal;font-family:var(--body);
  font-size:var(--fs-note);color:var(--faint);letter-spacing:.06em;margin-top:2px}
.bar nav{display:flex;gap:15px;margin-right:auto;white-space:nowrap;min-width:0}
.bar nav a{text-decoration:none;color:var(--soft);font-size:var(--fs-body);padding:4px 0;
  border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a.on{color:var(--ink);border-color:var(--gold)}
.burg{display:none;width:46px;height:46px;flex:0 0 auto;margin-right:auto;
  background:none;border:1.5px solid var(--cream2);border-radius:13px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;transition:border-color .2s}
.burg:hover{border-color:var(--gold)}
.burg span{display:block;width:21px;height:2px;border-radius:2px;
  background:var(--ink);transition:transform .25s,opacity .2s}
.burg[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burg[aria-expanded="true"] span:nth-child(2){opacity:0}
.burg[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.baract{display:flex;align-items:center;gap:12px;flex:0 0 auto;white-space:nowrap}
.baract .tel{font-weight:700;text-decoration:none;color:var(--ink);font-size:var(--fs-body)}

.cta{display:inline-block;background:var(--copper);color:var(--white);
  text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px;
  border:0;cursor:pointer;font-family:var(--body);font-size:var(--fs-body);
  box-shadow:0 6px 18px rgba(200,90,60,.28);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,90,60,.36)}
.cta.big{padding:16px 32px;font-size:var(--fs-lead)}
.ghost{display:inline-block;background:transparent;color:var(--ink);
  text-decoration:none;font-weight:700;padding:11px 21px;border-radius:999px;
  border:1.5px solid var(--ink);font-size:var(--fs-body);transition:background .2s,color .2s;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* יעד מגע */
.ghost:hover{background:var(--ink);color:var(--cream)}
.ghost.big{padding:15px 30px;font-size:var(--fs-lead)}
.ghost.light{border-color:var(--gold);color:var(--gold)}
.ghost.light:hover{background:var(--gold);color:var(--ink)}
.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px;align-items:center}

.float-wa{position:fixed;inset:auto 22px 26px auto;z-index:70;width:58px;height:58px;
  border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 26px rgba(18,140,126,.42);
  transition:transform .2s}
.float-wa:hover{transform:scale(1.07)}
.mobar{display:none}

/* ------------------------------------------------------------------ שער */
.hero{position:relative;padding:92px 0 76px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:
    radial-gradient(ellipse at 20% 22%, rgba(31,138,138,.14), transparent 55%),
    radial-gradient(ellipse at 84% 62%, rgba(224,169,78,.22), transparent 58%),
    radial-gradient(ellipse at 52% 100%, rgba(200,90,60,.10), transparent 60%);
  animation:drift 26s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-size:var(--fs-note);font-weight:700;color:var(--copper);margin-bottom:14px}
.hero h1{max-width:13ch}
.heb{margin-top:28px;font-family:var(--heritage);color:var(--faint);font-size:var(--fs-body)}

/* --------------------------------------------------------- לא צריך חג */
.noholiday{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
/* הזוהר התחיל באמצע המקטע, ולכן נוצר פס אופקי חד בדיוק בגובה
   הכותרת. עכשיו הוא פורש על כל המקטע ועולה מלמטה, בלי קצה. */
.noholiday:before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 85% at 50% 118%,
    rgba(224,169,78,.20), transparent 62%)}
.noholiday .wrap{position:relative}
.noholiday h2{color:var(--gold);font-size:clamp(32px,4.6vw,52px)}
.noholiday .kicker{color:var(--gold)}
.noholiday .sub{color:rgba(251,244,234,.84)}
/* חיים: ״יש הבדל בגודל שיוצר היררכיה, או שכל הכרטיסים זהים
   ושטוחים״. הגובה נשאר קבוע והרוחב משתנה, כדי לא לחזור על הכישלון
   של הפסיפס שבו גובה משתנה מתח את השורה. */
.proofs{display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin:34px 0 8px}
.proofs .pf:first-child{grid-column:span 2}
@media(max-width:860px){.proofs{grid-template-columns:repeat(2,1fr)}
  .proofs .pf:first-child{grid-column:span 2}}
@media(max-width:560px){.proofs{grid-template-columns:1fr}
  .proofs .pf:first-child{grid-column:auto}}
.pf{background:rgba(251,244,234,.07);border:1px solid rgba(224,169,78,.3);
  border-radius:var(--r);padding:22px 24px}
.pf b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);color:var(--gold);
  display:block;margin-bottom:8px}
.pf p{margin:0;color:rgba(251,244,234,.86);font-size:var(--fs-body)}
.noholiday .ghost{border-color:var(--cream);color:var(--cream)}
.noholiday .ghost:hover{background:var(--cream);color:var(--ink)}

/* ------------------------------------------------------------ ביטחון */
.trust{padding:0;margin:-26px 0 0;position:relative;z-index:2}
/* חמישה פריטים. ב-215 פיקסל הם נשברו ל-4 ועוד יתום בשורה שנייה,
   ולכן הסף ירד כדי שכולם ייכנסו לשורה אחת, ומתחת לזה שתי עמודות. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0;
  background:var(--white);border:1px solid var(--cream2);border-radius:var(--r2);
  overflow:hidden;box-shadow:var(--sh)}
.tgrid .t{padding:19px 18px;border-left:1px solid var(--cream2)}
.tgrid .t:last-child{border-left:0}
@media(max-width:900px){
  .tgrid{grid-template-columns:1fr 1fr}
  .tgrid .t{border-top:1px solid var(--cream2)}
  .tgrid .t:nth-child(2n){border-left:0}}
.tgrid b{display:block;font-family:var(--head);font-weight:500;font-size:var(--fs-lead);
  margin-bottom:5px;color:var(--teal-d)}
.tgrid span{font-size:var(--fs-body);color:var(--soft);line-height:1.4;display:block}

/* --------------------------------------------------------------- עכשיו */
.now{background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%)}
.nowgrid{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}
.nowflyer{background:var(--white);border:1px solid var(--cream2);border-radius:var(--r2);
  padding:14px;box-shadow:var(--sh2);position:sticky;top:92px}
.nowflyer img{display:block;border-radius:12px;width:100%;height:auto}
.nowflyer span{display:block;font-size:var(--fs-body);color:var(--soft);margin:12px 2px 10px}
.nowflyer.miss{padding:30px;text-align:center}
.nowflyer.miss b{display:block;color:var(--copper);font-family:var(--head);font-size:var(--fs-lead)}

/* ------------------------------------------------------------- כרטיסים */

/* ---------------------------------------------------------------- גלגל */
/* ======================================================================
   פסיפס השנה. כל תחנה היא אריח עם הפלייר שלה, גוון לפי העונה,
   וכמה זמן נשאר עד אליה. התחנה הקרובה מסומנת בזהב.
   ====================================================================== */
/* ניסיתי כאן רשת לא אחידה בשש עמודות, והיא יצאה בלגן: האריח הגדול
   מתח את השורה והשאר נשארו עם שטח לבן. חזרה לרשת האחידה, עם יותר
   אוויר. ההיררכיה תבוא מסימון התחנה הקרובה ולא מגודל האריח. */
.yearmap{display:grid;gap:20px;margin-bottom:46px;
  grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.yearmap{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:560px){.yearmap{grid-template-columns:repeat(2,1fr);gap:12px}}
.yearmap a.tile{position:relative;display:block;overflow:hidden;text-decoration:none;
  color:var(--ink);border-radius:14px 14px 16px 16px;
  background:var(--white);border:1px solid var(--cream2);
  box-shadow:0 8px 22px rgba(20,58,58,.07);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
  animation:tilein .6s both;animation-delay:calc(var(--i) * .045s)}
@keyframes tilein{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.yearmap a.tile{animation:none}}
.yearmap a.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,58,58,.16)}
.yearmap .shot{display:block;height:104px;overflow:hidden;position:relative;
  background:var(--cream2)}
.yearmap .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 6s ease;filter:saturate(.95)}
.yearmap a.tile:hover .shot img{transform:scale(1.09)}
.yearmap .shot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,var(--tint) 100%)}
.yearmap .shot.none{background:
  radial-gradient(circle at 50% 30%, rgba(255,255,255,.34), transparent 62%),
  var(--tint)}
.yearmap .shot.none:before{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 2px,
      transparent 2px 13px);
  opacity:.5}
.yearmap .txt{display:block;padding:13px 15px 4px;position:relative}
.yearmap a.tile b{display:block;font-family:var(--head);font-weight:400;font-size:var(--fs-lead);
  line-height:1.1;margin-bottom:3px}
.yearmap a.tile i{font-style:normal;font-size:var(--fs-note);color:var(--faint)}
.yearmap .when{display:block;padding:0 15px 13px;font-size:var(--fs-note);font-weight:700;
  color:var(--gold-text)}

/* ארבע עונות, ארבעה גוונים. הצבע מספר באיזה חלק בשנה אנחנו */
.yearmap .autumn{--tint:rgba(200,90,60,.22)}
.yearmap .winter{--tint:rgba(31,138,138,.24)}
.yearmap .spring{--tint:rgba(224,169,78,.26)}
.yearmap .summer{--tint:rgba(93,160,84,.24)}
.yearmap a.tile:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2;
  background:var(--tint);opacity:.9}

/* התחנה הקרובה */
.yearmap .near{border-color:var(--gold);box-shadow:0 0 0 2px rgba(224,169,78,.35),
  0 14px 34px rgba(201,143,49,.22)}
.yearmap .near .when{color:var(--copper)}
.yearmap .near:after{content:"הכי קרוב";position:absolute;inset:9px 9px auto auto;
  z-index:3;background:var(--gold);color:var(--ink);font-size:var(--fs-note);
  font-weight:700;padding:3px 10px;border-radius:999px}

.mini{font-family:var(--head);font-size:var(--fs-lead);color:var(--copper);margin-bottom:12px}
.sds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin-bottom:30px}
.sd{display:block;background:var(--sand);border:1px solid var(--gold-d);
  border-radius:var(--r);padding:15px 17px;text-decoration:none;color:var(--ink);
  transition:background .2s}
.sd:hover{background:var(--cream2)}
.sd b{display:block;font-family:var(--head);font-weight:400;font-size:var(--fs-lead)}
.sd i{font-style:normal;font-size:var(--fs-note);color:var(--faint)}
.sd.core{background:var(--white);border-style:solid;border-color:var(--teal)}

/* ----------------------------------------------------------- קטגוריות */
.katgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.kat{display:block;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);padding:28px 30px;text-decoration:none;color:var(--ink);
  box-shadow:var(--sh);transition:transform .22s}
.kat:hover{transform:translateY(-5px)}
.kat b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);display:block;
  margin-bottom:10px;color:var(--teal-d)}
.kat p{font-size:var(--fs-body);color:var(--soft)}
.kat span{font-weight:700;color:var(--copper)}

/* ------------------------------------------------------------- מורשת */
.heritage{background:var(--ink);color:var(--cream)}
.heritage .hbox{font-family:var(--heritage);max-width:66ch}
.heritage h2{font-family:var(--heritage);font-weight:700;color:var(--gold);
  margin-bottom:18px}
.heritage p{font-size:var(--fs-lead);line-height:1.4;color:rgba(251,244,234,.9)}
.heritage .thread{color:var(--gold);font-size:var(--fs-lead)}
.moresha{background:var(--ink);color:var(--cream);font-family:var(--heritage);
  min-height:70vh;display:flex;align-items:center}
.moresha h1{font-family:var(--heritage);font-weight:700;color:var(--gold)}
.moresha .intro{font-size:var(--fs-lead);line-height:1.4;margin-top:22px}
.moresha p{color:rgba(251,244,234,.88)}
.moresha .note{color:rgba(251,244,234,.62);font-size:var(--fs-note)}

/* -------------------------------------------------------------- הוכחה */
/* ארבע המלצות ברשת של שלוש השאירו אחת יתומה בשורה שנייה. שתיים
   בשורה נותנות 2x2, והתצלום והכותרת מקבלים רוחב אמיתי. */
.recs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  margin-bottom:28px;align-items:start}
@media(max-width:720px){.recs{grid-template-columns:1fr}}
.rec{margin:0;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);padding:24px 26px;box-shadow:var(--sh);
  border-top:4px solid var(--gold)}
.recpic{display:block;margin:-20px -22px 16px;overflow:hidden;
  border-radius:var(--r2) var(--r2) 0 0;background:var(--cream2)}
/* תצלום לאורך שנחתך ל-16:10 מהמרכז מאבד את הראש. העוגן למעלה,
   כי בתצלום של אדם מה שחשוב יושב בשליש העליון. */
.recpic img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:50% 22%}
/* התוצאה היא הכותרת של הכרטיס, והציטוט הוא ההוכחה שמתחתיה.
   הפוך מזה, הגולש קורא ארבעה ציטוטים ולא לומד מהם כלום. */
.rec .outcome{display:block;font-family:var(--head);font-weight:700;
  font-size:var(--fs-lead);line-height:1.08;margin:0 0 11px;color:var(--ink)}
.rec blockquote{margin:0 0 14px;font-size:var(--fs-body);line-height:1.4;font-family:var(--heritage)}
.rec blockquote:before{content:"„";font-size:var(--fs-lead);color:var(--gold);
  line-height:0;vertical-align:-8px;margin-left:4px}
.rec figcaption{font-size:var(--fs-note);color:var(--soft);font-weight:700}
.rec figcaption i{display:block;font-style:normal;font-weight:400}
.rec figcaption span{display:block;font-weight:400;color:var(--faint);margin-top:3px}
.rec.wide blockquote{font-size:var(--fs-lead)}
.clients{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:10px}
.clients li{background:var(--white);border:1px solid var(--cream2);
  padding:9px 16px;border-radius:999px;font-size:var(--fs-body);color:var(--soft)}
.clients.wide li{font-size:var(--fs-body);padding:11px 20px}

/* ------------------------------------------------------ איך זה עובד
   שלושה צעדים, ולא כרטיסים. הקו המקוטע שמחבר ביניהם הוא מה שהופך
   רשימה למסע, והוא יורד במובייל כי שם הם ממילא זה מתחת לזה. */
.how .steps{list-style:none;padding:0;margin:0 0 20px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how .steps li{position:relative;background:var(--white);
  border:1px solid var(--cream2);border-radius:var(--r2);
  padding:34px 26px 26px;box-shadow:var(--sh)}
.how .steps b{position:absolute;top:-17px;right:26px;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--ink);box-shadow:var(--sh);
  font-family:var(--head);font-weight:700;font-size:var(--fs-lead-site)}
.how .steps h3{margin:0 0 9px;font-size:var(--fs-lead)}
.how .steps p{margin:0;color:var(--soft);font-size:var(--fs-body)}
.how .steps li:not(:last-child):after{content:"";position:absolute;
  top:2px;left:-18px;width:18px;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 10px)}
.how .note{margin:0 0 22px}
@media(max-width:860px){
  .how .steps{grid-template-columns:1fr;gap:26px}
  .how .steps li:not(:last-child):after{content:none}
}

/* ---------------------------------------------------------------- גפן */
.gefen{padding-top:0}
.gbox{background:linear-gradient(120deg,var(--teal) 0%,var(--teal-d) 100%);
  color:var(--white);border-radius:var(--r2);padding:38px 40px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  box-shadow:var(--sh2)}
.gbox h2{color:var(--white)}
.gbox .kicker{color:var(--gold)}
.gbox p{color:rgba(255,255,255,.9);margin:0;max-width:56ch}
.gbox .cta{background:var(--gold);color:var(--ink);box-shadow:none;white-space:nowrap}

/* ----------------------------------------------------------- שאלות */
.qs{display:grid;gap:10px;max-width:860px}
.q{background:var(--white);border:1px solid var(--cream2);border-radius:var(--r);
  padding:4px 22px;box-shadow:var(--sh)}
.q summary{cursor:pointer;font-family:var(--head);font-size:var(--fs-lead);padding:16px 0;
  list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary:before{content:"+";color:var(--copper);font-size:var(--fs-lead);margin-left:12px}
.q[open] summary:before{content:"−"}
.q p{color:var(--soft);font-size:var(--fs-body);padding-bottom:10px;margin:0}

/* ------------------------------------------------------ עמודים פנימיים */
.crumbs{background:var(--cream2);padding:11px 0;font-size:var(--fs-body);color:var(--soft)}
.crumbs a{color:var(--teal-d);text-decoration:none}
.phead{padding:52px 0 38px}
.phead h1{font-size:clamp(34px,5.4vw,60px)}
/* באנר הוויזואל בראש עמוד החג. חיים, שיעור עשרים ושלוש:
   ויזואל, ואז טקסט, ואז הנעה. העמוד נפתח במה שרואים. */
.phead.withpic .wrap{display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(22px,3.4vw,46px);align-items:center}
.pvis{display:grid;grid-template-columns:1.35fr 1fr;
  grid-template-rows:1fr 1fr;gap:10px;height:clamp(230px,27vw,320px)}
.pvis figure{margin:0;overflow:hidden;border-radius:var(--r);
  background:var(--cream2);box-shadow:var(--sh)}
.pvis figure:first-child{grid-row:span 2}
.pvis figure:only-child{grid-column:span 2;grid-row:span 2}
.pvis img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.phead.withpic:hover .pvis figure:first-child img{transform:scale(1.04)}
@media(max-width:860px){
  .phead.withpic .wrap{grid-template-columns:1fr}
  .pvis{order:-1;height:190px;margin-bottom:6px}
}
.stwrap{display:grid;grid-template-columns:286px 1fr;gap:30px;align-items:start}
.sflyer{background:var(--white);border:1px solid var(--cream2);border-radius:var(--r2);
  padding:13px;box-shadow:var(--sh2);position:sticky;top:92px;text-align:center}
.sflyer img{display:block;border-radius:11px;margin-bottom:12px}
.hap{background:var(--sand);border-radius:var(--r2);padding:26px 30px;margin-top:30px}
.hap b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);display:block;
  margin-bottom:6px;color:var(--copper)}
.hap p{margin:0;color:var(--soft)}
.nothere{margin-top:36px;background:var(--white);border:1px solid var(--gold-d);
  border-radius:var(--r2);padding:30px;text-align:center}
.nothere b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);display:block;
  margin-bottom:6px}
.nothere p{color:var(--soft)}

.whero{padding-bottom:40px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.wpic{border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh2);aspect-ratio:3/2}
.wpic img{width:100%;height:100%;object-fit:cover;display:block;
  animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.09)}}
.wpic.typo{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));color:rgba(255,255,255,.85);
  font-family:var(--head);font-size:var(--fs-lead);text-align:center;padding:30px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;
  margin-top:26px}
.facts div{background:var(--white);border:1px solid var(--cream2);
  border-radius:12px;padding:12px 14px}
.facts b{display:block;font-size:var(--fs-note);color:var(--faint);font-family:var(--body);
  font-weight:700;margin-bottom:3px}
.facts span{font-family:var(--head);font-size:var(--fs-lead)}
.facts .miss span{color:var(--copper);font-size:var(--fs-body)}
.long{font-size:var(--fs-lead);line-height:1.4}
.extra{background:var(--sand);border-radius:var(--r);padding:16px 20px;
  font-size:var(--fs-body)}
.stations{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px;
  max-width:800px}
.stations li{counter-increment:s;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r);padding:16px 20px 16px 20px;position:relative;
  padding-right:60px;font-size:var(--fs-body);box-shadow:var(--sh)}
.stations li:before{content:counter(s);position:absolute;right:18px;top:14px;
  width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--ink);
  font-family:var(--head);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-body)}
.vals{background:var(--sand)}
.vtags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.vtags span{background:var(--white);border:1px solid var(--gold);padding:9px 18px;
  border-radius:999px;font-family:var(--head);font-size:var(--fs-lead)}

.panel{background:var(--white);border:1px solid var(--cream2);border-radius:var(--r2);
  padding:30px 34px;margin-bottom:20px;box-shadow:var(--sh)}
.panel h2{margin-bottom:4px}
.panel .sub{margin-bottom:14px;color:var(--copper);font-weight:700;font-size:var(--fs-lead)}
.panel ul{color:var(--soft);padding-right:20px}
.kahal{columns:2;gap:24px;padding-right:20px;color:var(--soft)}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin-bottom:34px}
.nums div{background:var(--white);border:1px solid var(--cream2);border-radius:var(--r);
  padding:20px;text-align:center}
.nums b{display:block;font-family:var(--head);font-size:var(--fs-lead);color:var(--teal-d)}
.nums span{font-size:var(--fs-body);color:var(--soft)}
.steps{display:grid;gap:13px;margin-bottom:26px}
.step{background:var(--white);border:1px solid var(--cream2);border-right:4px solid var(--teal);
  border-radius:var(--r);padding:20px 24px}
.step b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);display:block;
  margin-bottom:5px}
.step p{margin:0;color:var(--soft)}
.warn{background:var(--white);border:1px solid var(--copper);
  border-radius:var(--r);padding:20px 24px;margin:22px 0}
.warn b{display:block;color:var(--copper);font-family:var(--head);font-weight:400;
  font-size:var(--fs-lead);margin-bottom:5px}
.warn p{margin:0;color:var(--soft);font-size:var(--fs-body)}

.sday{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start;
  background:var(--white);border:1px solid var(--cream2);border-radius:var(--r2);
  padding:28px;margin-bottom:22px;box-shadow:var(--sh)}
.sdpic img{border-radius:var(--r);display:block;width:100%}
.sdpic .typo{aspect-ratio:3/4;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;background:var(--sand);color:var(--faint);
  font-family:var(--head);font-size:var(--fs-lead)}
.sday ul{color:var(--soft);padding-right:20px}

.flgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:20px}
.fl{margin:0;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);
  transition:transform .22s}
.fl:hover{transform:translateY(-4px)}
.fl.new{border-color:var(--gold);border-width:2px}
.fl img{display:block;width:100%;height:auto}
.fl figcaption{padding:15px 17px}
.fl figcaption b{display:block;font-family:var(--head);font-weight:400;font-size:var(--fs-lead)}
.fl figcaption i{display:block;font-style:normal;font-size:var(--fs-note);color:var(--faint);
  margin-bottom:10px}
.fl .ghost{padding:9px 15px;font-size:var(--fs-body);min-height:30px}

.frm{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:var(--white);
  border:1px solid var(--cream2);border-radius:var(--r2);padding:28px;
  box-shadow:var(--sh)}
.frm label{display:block;font-size:var(--fs-note);font-weight:700;color:var(--soft)}
.frm .full{grid-column:1/-1}
.frm input,.frm textarea{width:100%;margin-top:6px;padding:13px 15px;
  border:1px solid var(--cream2);border-radius:11px;font-family:var(--body);
  font-size:var(--fs-body);background:var(--cream);color:var(--ink)}
.frm input:focus,.frm textarea:focus{outline:2px solid var(--ink);
  outline-offset:1px;background:var(--white)}
.frm button{grid-column:1/-1;justify-self:start}
.frm .note{grid-column:1/-1;margin:0}

/* ------------------------------------------------------------- סיום */
.endcta{background:linear-gradient(135deg,var(--copper) 0%,#A8472E 100%);
  color:var(--white);text-align:center}
.endcta h2{color:var(--white)}
.endcta p{color:rgba(255,255,255,.95);font-size:var(--fs-lead)}
.endcta .btns{justify-content:center}
.endcta .cta{background:var(--white);color:var(--copper);box-shadow:none}
.endcta .ghost{border-color:rgba(255,255,255,.75);color:var(--white)}
.endcta .ghost:hover{background:var(--white);color:var(--copper)}

footer{background:var(--ink);color:var(--cream);padding:52px 0 32px}
footer h4{font-family:var(--head);color:var(--gold);font-size:var(--fs-body);margin-bottom:11px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:6px}
footer a{color:rgba(251,244,234,.86);text-decoration:none}
footer a:hover{color:var(--gold)}
footer p{color:rgba(251,244,234,.84);font-size:var(--fs-body)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
/* גילוי על החומר החזותי, בכל עמוד. הצבע חייב להיות מהקרם
   ולא מ---faint, כי הפוטר כהה ו---faint הוא דיו על דיו. */
.disc{color:rgba(251,244,234,.72);margin:26px 0 0;max-width:72ch;
  font-size:var(--fs-note);line-height:1.4}
.credit{border-top:1px solid rgba(251,244,234,.18);margin-top:30px;padding-top:16px;
  font-size:var(--fs-note);color:rgba(251,244,234,.6)}
.credit a{color:var(--gold)}

/* ------------------------------------------------------------- תנועה */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}

/* ------------------------------------------ המעבר בין מקטע למקטע
   שלושה עשר מקטעים שכולם נכנסו באותה דהייה הרגישו כמו רשימה ולא
   כמו מסע. עכשיו המקטע עצמו כבר לא זז, הוא רק נותן את האות, והתוכן
   שבתוכו נוחת בזה אחר זה: קודם הכותרת, אחריה מה שמתחתיה, ואז
   הכרטיסים אחד אחרי השני. חיים, שיעור 34: לא חד אלא רך, ולא
   מתמשך אלא אחיד. התנועה קורית פעם אחת לכל מקטע ונעצרת.
   בלי scroll-snap, כי זה אתר מכירה ולא מגילה, ומי שרוצה רק את
   הטלפון לא ייתפס באמצע מקטע. */
main > section.rv{opacity:1;transform:none;transition:none}
main > section.rv > .wrap > *{opacity:0;transform:translateY(20px);
  transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1)}
main > section.rv.in > .wrap > *{opacity:1;transform:none}
main > section.rv.in > .wrap > *:nth-child(2){transition-delay:.07s}
main > section.rv.in > .wrap > *:nth-child(3){transition-delay:.14s}
main > section.rv.in > .wrap > *:nth-child(n+4){transition-delay:.2s}

/* הכרטיסים שברשתות נוחתים אחרי הכותרת, בגלים של שישים אלפיות. */
main > section.rv > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *{opacity:0;transform:translateY(24px);
  transition:opacity .66s cubic-bezier(.2,.7,.3,1),transform .66s cubic-bezier(.2,.7,.3,1)}
main > section.rv.in > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *{opacity:1;transform:none;transition-delay:.24s}
main > section.rv.in > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *:nth-child(2){transition-delay:.3s}
main > section.rv.in > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *:nth-child(3){transition-delay:.36s}
main > section.rv.in > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *:nth-child(4){transition-delay:.42s}
main > section.rv.in > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
  .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *:nth-child(n+5){transition-delay:.48s}

/* שתי החדרים הכהים הם פעימות המסע, ולכן הם היחידים שמקבלים עומק.
   הזוהר והתצלום נעים לאט מהתוכן, וקו זהב דק נמתח בקצה העליון
   כשהחדר נפתח. --px מגיע מ-site.js, ובלעדיו הערך אפס. */
.noholiday:before{transform:translate3d(0,var(--px,0),0)}
.heritage .hpic{transform:translate3d(0,var(--px,0),0)}
.noholiday,.heritage{position:relative}
.noholiday:after,.heritage:after{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1) .1s}
.noholiday.in:after,.heritage.in:after{transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .wpic img,.hero:before{animation:none}
  main > section.rv > .wrap > *,
  main > section.rv > .wrap :is(.katgrid,.fgrid,.tgrid,.nowgrid,.wgrid,
    .pgrid,.ftiles,.proofs,.qlist,.gbox,.steps) > *{opacity:1;transform:none;transition:none}
  .noholiday:before,.heritage .hpic{transform:none}
  .noholiday:after,.heritage:after{transform:none;transition:none}
}


.fcta{display:inline-block;margin:4px 0 14px;padding:11px 20px;
  border-radius:999px;background:var(--gold);color:var(--ink);
  text-decoration:none;font-weight:700;font-size:var(--fs-body);
  transition:background .2s,transform .2s}
.fcta:hover{background:var(--gold-d);transform:translateY(-2px)}

/* ----------------------------------- ועוד שלושה שלא תלויים בתאריך
   המקטע הזה הגיע מ-shaar.html, שם ה-CSS שלו כלוא ב-.stage. מחוץ לשער
   הוא נשאר בלי שום עיצוב, ולכן הכיתוב נדבק לכותרת. זה השחזור. */
.always{padding:66px 0;background:var(--cream)}
.always-head{max-width:1140px;margin:0 auto 30px;padding:0 22px}
.always-head h2 em{font-style:normal;color:var(--gold-text)}
.always-head p{color:var(--soft);max-width:62ch;margin:10px 0 0}
.always-grid{max-width:1140px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
  align-items:stretch}
.always-grid .acard{grid-column:span 1}
.always-grid .acard:first-child{grid-column:span 2}
.acard{margin:0;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);
  transition:transform .25s,box-shadow .25s}
.acard:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.acard img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center 28%}
.acard{display:block;text-decoration:none;color:var(--ink)}
.acard .cap{display:block;padding:16px 18px 19px}
.acard .cap b{display:block;font-family:var(--head);font-weight:400;
  font-size:var(--fs-lead);line-height:1.08;margin-bottom:5px}
.acard .cap small{display:block;font-size:var(--fs-body);color:var(--faint);
  line-height:1.4}
.acard .cap.her b{color:var(--teal-d)}
.acard .cap.her small{font-family:var(--heritage);line-height:1.5}
.always-foot{max-width:1140px;margin:26px auto 0;padding:0 22px}
@media(max-width:900px){.always-grid{grid-template-columns:1fr 1fr}
  .always-grid .acard:first-child{grid-column:span 2}}
@media(max-width:620px){.always-grid{grid-template-columns:1fr}
  .always-grid .acard:first-child{grid-column:auto}
  .always{padding:48px 0}}


/* ------------------------------------------------- עמוד ההפקות */
.hapblock{margin:0 0 34px;background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);box-shadow:var(--sh);overflow:hidden}
.hapgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(18px,3vw,38px);
  align-items:center;padding:clamp(22px,3vw,34px)}
.hapblock h2{margin-bottom:8px}
.hapblock .sub{margin-bottom:10px;font-weight:700;color:var(--copper)}
.hapic{margin:0;border-radius:var(--r);overflow:hidden;background:var(--cream2)}
.hapic img{display:block;width:100%;height:auto}
@media(max-width:860px){.hapgrid{grid-template-columns:1fr}
  .hapic{order:-1;max-width:420px}}

/* משפחות שחוזרות בכל תחנה. שורת צ'יפים, לא כרטיסים, כדי שלא
   תתחרה בארבעת הכרטיסים שמעליה. */
.fams{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin:14px 0 24px}
.fam{display:block;text-decoration:none;color:var(--ink);
  background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.fam:hover{transform:translateY(-4px);box-shadow:var(--sh2);
  border-color:var(--gold)}
.fam b{display:block;font-family:var(--head);font-weight:500;
  font-size:var(--fs-lead);line-height:1.08}
.fam i{display:inline-block;font-style:normal;font-size:var(--fs-note);
  font-weight:700;color:var(--copper);margin:4px 0 2px}
.fam span{display:block;font-size:var(--fs-note);color:var(--faint);
  line-height:1.4}
.fam.big{background:var(--sand);border-color:var(--gold-d)}
.always-foot .mini{margin:6px 0 2px}

.galgal-cta{margin:26px 0 8px;justify-content:center;display:flex}

/* ------------------------------------------- מה שמדאיג אתכם
   הצ'קליסט של חיים לדפי נחיתה: ״קיים אזור שמטפל בהתנגדויות או
   בחששות נפוצים״. מנוסח בקול של הרכזת, לא בקול של המוכר. */
.fears{background:var(--sand)}
.fears .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin:26px 0 28px}
.fear{background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);padding:22px 24px;box-shadow:var(--sh)}
.fear b{display:block;font-family:var(--head);font-weight:500;
  font-size:var(--fs-lead);line-height:1.15;color:var(--teal-d);
  margin-bottom:9px}
.fear p{margin:0;color:var(--soft)}
.fears .btns{justify-content:center;display:flex}
@media(max-width:620px){.fear{padding:18px 18px}}

/* קיצורי הדרך של המובייל. בדסקטופ התפריט פתוח ואין בהם צורך. */
.quick{display:none}
@media(max-width:980px){
  .quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:14px 16px 2px;background:var(--cream)}
  .quick::-webkit-scrollbar{display:none}
  .quick a{flex:0 0 auto;text-decoration:none;background:var(--white);
    border:1px solid var(--cream2);border-radius:999px;
    padding:11px 17px;min-height:44px;display:flex;align-items:center;
    font-weight:700;font-size:var(--fs-note);color:var(--ink);
    box-shadow:var(--sh)}
  .quick a:active{background:var(--sand)}
}

/* ------------------------------------------------------------- מובייל */
@media(max-width:980px){
  .burg{display:flex}
  /* ההדר נשאר שורה אחת. המגירה צפה מתחתיו ולא דוחפת אותו למטה. */
  .bar{position:sticky}
  .bar .wrap{flex-wrap:nowrap;gap:10px}
  /* ההדר של הנייד לא הכיל את עצמו. שם המותג, הטלפון וההמבורגר
     דורשים יחד 442 פיקסלים, שלושתם flex:0 0 auto ולכן אף אחד לא
     מתכווץ, וההמבורגר שהוא האחרון נדחף אל מחוץ למסך. התוצאה: בטלפון
     אין תפריט בכלל, והעמוד נגרר הצידה. הטלפון יורד מההדר כי פס
     הפעולה הקבוע שבתחתית כבר מחזיק חיוג, ווצפ ובדיקת זמינות. */
  .bar .baract{display:none}
  .bar .brand{flex:0 1 auto;min-width:0}
  .bar nav{display:none;position:absolute;inset:100% 0 auto 0;
    flex-direction:column;gap:0;margin:0;padding:0 22px 10px;
    background:rgba(251,244,234,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--cream2);box-shadow:var(--sh)}
  .bar nav.open{display:flex}
  .bar nav a{padding:14px 2px;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid var(--cream2);border-top:0}
  .bar nav a:hover,.bar nav a.on{border-color:transparent;
    border-bottom-color:var(--cream2);color:var(--gold-text)}
  .nowgrid,.stwrap,.wgrid,.sday{grid-template-columns:1fr}
  .nowflyer,.sflyer{position:static;max-width:330px}
  .gbox{grid-template-columns:1fr}
  .kahal{columns:1}
}
@media(max-width:620px){
  body{font-size:var(--fs-body)}
  section{padding:48px 0}
  .baract .cta{display:none}
  .float-wa{bottom:80px;width:52px;height:52px}
  /* minmax(0,...) חובה כאן. בלעדיו עמודת הגריד לא יורדת מתחת
     לרוחב הטקסט, הסרגל יוצא מהמסך, וכל העמוד נגלל הצידה. */
  .mobar{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);
    gap:8px;box-sizing:border-box;max-width:100%;
    position:fixed;inset:auto 0 0 0;z-index:65;padding:9px 12px;
    background:rgba(251,244,234,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--cream2)}
  .mobar a{text-align:center;padding:13px 4px;border-radius:999px;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-decoration:none;font-weight:700;font-size:var(--fs-body);
    border:1.5px solid var(--ink);color:var(--ink);min-height:46px}
  .mobar a.w{background:var(--wa);border-color:var(--wa);color:#fff}
  .mobar a.c{background:var(--copper);border-color:var(--copper);color:#fff}
  footer{padding-bottom:90px}
  .tgrid{grid-template-columns:1fr}
  .tgrid .t{border-left:0;border-bottom:1px solid var(--cream2)}
  .frm{grid-template-columns:1fr;padding:20px}
  
}

/* ------------------------------------------------- רקע חי במסך הפתיחה */
.herobg{position:absolute;inset:0;overflow:hidden;z-index:0}
.herobg .posterimg,.herobg .hvid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.herobg .hvid{opacity:0;transition:opacity 1.2s ease}
.scene{overflow:hidden}
.herobg .hvid.ready{opacity:1}
.herobg .posterimg{filter:saturate(.82)}
.herobg .veil{position:absolute;inset:0;
  background:linear-gradient(255deg,rgba(251,244,234,.62) 0%,
    rgba(251,244,234,.93) 46%,var(--cream) 80%)}
.hero h1{text-shadow:0 2px 20px rgba(251,244,234,.75)}
@media(max-width:620px){
  .herobg .hvid{display:none}
  .herobg .veil{background:linear-gradient(180deg,rgba(251,244,234,.72) 0%,
    rgba(251,244,234,.93) 46%,var(--cream) 82%)}
}

/* -------------------------------------------------- דיוקן באזור המורשת */
.hgrid{display:grid;grid-template-columns:1fr 280px;gap:46px;align-items:center}
/* תמונת המקור היא 340 על 520 בלבד, חתוכה מתוך פלייר. בתצוגה
   רחבה היא נמתחת ומתרחת. התקרה כאן מונעת מתיחה. הפתרון האמיתי
   הוא תצלום ברזולוציה גבוהה מכפיר. */
.hpic{margin:0 auto;text-align:center;max-width:250px}
/* height:auto חובה. בלעדיו תכונת ה-height שב-HTML נשארת בתוקף,
   והתצלום נדחס מיחס 0.65 ליחס 0.48. פנים שנדחסות ברבע נראות
   מרוחות, וזו לא בעיית רזולוציה אלא עיוות. */
.hpic img{border-radius:var(--r2);display:block;width:100%;height:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.35);filter:sepia(.12)}
.hpic figcaption{font-family:var(--heritage);color:var(--gold);font-size:var(--fs-body);
  margin-top:13px}
@media(max-width:980px){.hgrid{grid-template-columns:1fr}.hpic{max-width:230px}}

/* מובייל: יעדי מגע של 44 פיקסל, טקסט קריא, וכפתור צף אחד.
   חיים, אפיון למובייל: משטח לחיצה של סנטימטר על סנטימטר לכל לחיץ. */
@media(max-width:620px){
  footer li{margin-bottom:0}
  footer li a{display:block;padding:11px 0;min-height:44px}
  .credit a,.tiny a{display:inline-flex;align-items:center;
    min-height:44px;padding:0 10px;margin:2px 0}
  .tiny{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
  footer p a{display:inline-flex;align-items:center;min-height:44px}
  /* סרגל הפעולות התחתון כבר מחזיק ווצפ, ולכן הכפתור הצף מיותר
     ורק מכסה תוכן. */
  .float-wa{display:none}
  .mobar a{min-height:48px;display:flex;align-items:center;
    justify-content:center;font-size:var(--fs-note);padding:12px 2px;
    letter-spacing:0}
  .mobar .sm{display:none}
  /* מתחת ל-400 פיקסל התווית המלאה לא נכנסת, ואז השלישי נחתך. */
  @media(max-width:400px){
    .mobar{gap:6px;padding:9px 8px}
    .mobar .lg{display:none}
    .mobar .sm{display:inline}
    .mobar a{padding:12px 0}
  }
  /* טקסט שנועד לקריאה לא יורד מתחת לחמישה עשר */
  .tgrid span,.c .sell,.c .val,.rec blockquote,.rec figcaption,
  .fl .ghost,.frm label,.clients li,.moresha .note,.nums span,
  .stations li,.facts .miss span,.after a i,.flhead i{font-size:var(--fs-note)}
  .yearmap a.tile i,.c .st,.c .badge,.c .meta i,.crd .hook,.crd .mt,
  .fl figcaption i,.credit,.tiny{font-size:var(--fs-note)}
  .cell .face.fly{display:none}
}

/* מתי מגיעה התחנה הבאה */
.now h2 .when{font-family:var(--body);font-size:var(--fs-lead);font-weight:700;
  color:var(--copper);background:var(--white);border:1px solid var(--cream2);
  padding:5px 15px;border-radius:999px;vertical-align:middle;margin-right:10px;
  box-shadow:var(--sh)}
.after{margin-top:30px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.after b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);color:var(--soft)}
.after a{display:inline-flex;gap:8px;align-items:baseline;background:var(--white);
  border:1px solid var(--cream2);border-radius:999px;padding:9px 18px;
  text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--sh);
  transition:transform .2s,border-color .2s}
.after a:hover{transform:translateY(-2px);border-color:var(--gold)}
.after a i{font-style:normal;font-weight:400;font-size:var(--fs-note);color:var(--faint)}

.hap.sd2{background:var(--white);border:1px solid var(--gold-d)}
.hap.sd2 b{color:var(--teal-d)}
.hap.sd2 .ghost{margin-top:14px;padding:8px 17px;font-size:var(--fs-body)}

/* גלריית פליירים במקטע "מה מגיע" ובעמוד תחנה */
.nowflyers{background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);padding:16px;box-shadow:var(--sh2);position:sticky;top:92px}
.ftiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ftiles figure{margin:0}
.ftiles img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--cream2)}
.ftiles .ghost{display:block;text-align:center;margin-top:7px;padding:6px 10px;
  font-size:var(--fs-note)}
.nowflyers > span{display:block;font-size:var(--fs-body);color:var(--soft);margin:14px 2px 12px}
.nowflyers.miss{padding:30px;text-align:center}
.nowflyers.miss b{display:block;color:var(--copper);font-family:var(--head);font-size:var(--fs-lead)}
.sflyers{display:grid;grid-template-columns:1fr 1fr;gap:11px;
  background:var(--white);border:1px solid var(--cream2);
  border-radius:var(--r2);padding:15px;box-shadow:var(--sh2);
  position:sticky;top:92px;align-content:start}
.sflyers figure{margin:0}
.sflyers img{display:block;width:100%;height:auto;border-radius:9px;
  border:1px solid var(--cream2)}
.sflyers .ghost{display:block;text-align:center;margin-top:6px;padding:8px;
  font-size:var(--fs-note);min-height:30px}
.sflyers .note{grid-column:1/-1;margin:4px 0 0;font-size:var(--fs-note)}
.flhead{font-family:var(--head);font-size:var(--fs-lead);color:var(--teal-d);
  margin:34px 0 14px;display:flex;gap:10px;align-items:baseline}
.flhead i{font-style:normal;font-size:var(--fs-note);color:var(--faint);font-family:var(--body)}
@media(max-width:980px){
  .nowflyers,.sflyers{position:static}
  .ftiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ------------------------------------------ הכרטיס שהפלייר מניע אותו */

/* הפלייר בתחתית עמוד הסדנה */
.flysec{background:var(--sand);text-align:center}
.flysec img{display:block;margin:0 auto 22px;max-width:420px;width:100%;
  height:auto;border-radius:var(--r2);box-shadow:var(--sh2);
  border:1px solid var(--cream2)}
.flysec .sub{margin-left:auto;margin-right:auto}
.extra.val{background:rgba(31,138,138,.1);border-right:3px solid var(--teal)}

/* ======================================================================
   כרטיס הקטלוג
   הקשת הירושלמית שבשער חוזרת כאן כצורת התמונה. מספר ענק ברקע,
   פס זהב שנפתח בריחוף, וקומפוזיציה לא סימטרית: הראשון רחב.
   flex ממורכז ולא grid, כדי שלא יישאר כרטיס יתום בשורה האחרונה.
   ====================================================================== */
.cards{display:block}

.c{position:relative;flex:1 1 282px;max-width:340px;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:
    linear-gradient(180deg,var(--white) 0%,var(--white) 62%,#FFFDF9 100%);
  border:1px solid var(--cream2);border-radius:4px 4px 18px 18px;
  padding:16px 16px 0;overflow:hidden;
  box-shadow:0 2px 6px rgba(20,58,58,.05),0 14px 34px rgba(20,58,58,.07);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.c:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--copper),var(--teal));
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.c:hover{transform:translateY(-7px);
  box-shadow:0 4px 10px rgba(20,58,58,.07),0 26px 54px rgba(20,58,58,.14)}
.c:hover:before{transform:scaleX(1)}
.c:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* המספר כאלמנט ויזואלי, לא כמידע */
.c .idx{position:absolute;inset:auto auto 86px 10px;z-index:0;
  font-family:var(--head);font-size:84px;line-height:1;
  color:rgba(20,58,58,.045);pointer-events:none;letter-spacing:-.04em}

/* הקשת. אותה צורה שחוזרת בשמי השער */
.c .arch{display:block;position:relative;overflow:hidden;
  border-radius:150px 150px 10px 10px / 92px 92px 10px 10px;
  background:var(--cream2);aspect-ratio:4/3;
  border:1px solid rgba(201,143,49,.28)}
.c .arch img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 7s cubic-bezier(.2,.7,.3,1)}
.c:hover .arch img{transform:scale(1.08)}
.c .arch.fly img{object-position:top center}
.c .arch.fly:after{content:"";position:absolute;inset:auto 0 0 0;height:40px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.75))}
.c .arch .flag{position:absolute;inset:auto 0 9px 0;z-index:2;text-align:center;
  font-size:var(--fs-note);color:var(--teal-d);font-weight:700;letter-spacing:.03em}
.c .arch.typo{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;
  background:
    radial-gradient(circle at 50% 28%, rgba(224,169,78,.28), transparent 62%),
    linear-gradient(165deg,var(--teal) 0%,var(--teal-d) 100%)}
.c .arch .mark{font-family:var(--heritage);font-weight:700;font-size:62px;
  color:rgba(255,255,255,.9);line-height:1}
.c .arch .wait{font-style:normal;font-size:var(--fs-note);color:rgba(255,255,255,.78)}

.c .body{position:relative;z-index:1;display:flex;flex-direction:column;
  flex:1;padding:16px 4px 0}
.c .st{display:block;font-family:var(--heritage);font-size:var(--fs-note);
  letter-spacing:.14em;color:var(--gold-text);margin-bottom:7px;
  text-transform:none}
.c .st:after{content:"";display:block;width:26px;height:1px;
  background:var(--gold);margin-top:7px}
.c .badge{display:inline-block;align-self:flex-start;background:var(--gold);
  color:var(--ink);font-size:var(--fs-note);font-weight:700;padding:3px 11px;
  border-radius:999px;margin:9px 0 4px}
.c b{font-family:var(--head);font-weight:400;font-size:var(--fs-lead);line-height:1.13;
  margin:7px 0 8px;display:block}
.c .sell{display:block;font-size:var(--fs-body);color:var(--soft);line-height:1.4;
  margin-bottom:11px}
.c .val{font-size:var(--fs-note);color:var(--teal-d);line-height:1.4;margin:0 0 11px;
  padding-right:11px;border-right:2px solid rgba(31,138,138,.35)}
.c .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-bottom:13px}
.c .meta i{font-style:normal;font-size:var(--fs-note);background:var(--cream);
  border:1px solid var(--cream2);padding:4px 11px;border-radius:999px;
  color:var(--soft)}
.c .go{display:flex;align-items:center;gap:9px;padding:13px 0;
  border-top:1px solid var(--cream2);font-weight:700;font-size:var(--fs-body);
  color:var(--copper)}
.c .go svg{transition:transform .3s}
.c:hover .go svg{transform:translateX(-5px)}

/* הכרטיס המוביל: רחב, והתמונה לצד הטקסט */
.c.feat{display:flex;width:100%;max-width:none;margin:0 0 24px;
  flex-direction:row;gap:24px;padding:18px 18px 0;align-items:stretch}
.c.feat .arch{flex:0 0 38%;aspect-ratio:4/3;align-self:center;
  max-height:300px;
  border-radius:150px 150px 10px 10px / 110px 110px 10px 10px}
.c.feat .arch.fly{aspect-ratio:3/4;max-height:340px}
.c.feat .arch.fly img{height:100%;object-fit:contain;background:var(--white)}
.c.feat .body{padding-top:6px}
.c.feat b{font-size:var(--fs-lead)}
.c.feat .sell{font-size:var(--fs-body)}
.c.feat .idx{font-size:108px;bottom:auto;top:-14px;left:16px}

@media(max-width:700px){
  .c.feat{flex-direction:column;gap:0;padding:16px 16px 0}
  .c.feat .arch{flex:none;aspect-ratio:4/3;
    border-radius:150px 150px 10px 10px / 92px 92px 10px 10px}
  .c.feat b{font-size:var(--fs-lead)}
  .c.feat .idx{font-size:84px;top:auto;bottom:86px;left:10px}
}
@media(max-width:620px){
  .c{flex:1 1 100%;max-width:420px}
}

/* ======================================================================
   קיר Masonry.
   חיים, שיעור 31: ״אם בחרתי כרטיסים, יש הבדל בגודל שיוצר היררכיה,
   או שכל הכרטיסים זהים ושטוחים?״. הכרטיס המוביל רחב מעל הקיר,
   ובתוך הקיר הגובה נקבע מהתוכן, כך שפלייר גבוה נשאר שלם.
   ====================================================================== */
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;width:100%}
.wall > .c{flex:1 1 282px;max-width:340px}
/* נכנס רק כשהסקריפט רץ. בלי JavaScript נשארת פריסת flex תקינה. */
.wall.packed{display:block;position:relative}
.wall.packed > .c{position:absolute;margin:0;max-width:none;
  transition:top .45s cubic-bezier(.2,.7,.3,1),
             right .45s cubic-bezier(.2,.7,.3,1)}
.wall.packed > .c .arch.fly{aspect-ratio:auto}
.wall.packed > .c .arch.fly img{height:auto}

/* אור נייד. מיקרו אינטראקציה שנותנת פידבק על כרטיס לחיץ,
   ולא אנימציה דקורטיבית. חיים, שיעור 34. */
.c .lite{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  border-radius:inherit;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(224,169,78,.28), rgba(224,169,78,.09) 44%, transparent 70%)}
.c:hover .lite{opacity:1}
@media (hover:none){.c .lite{display:none}}
@media (prefers-reduced-motion:reduce){
  .wall.packed > .c{transition:none}}

.sflyers .flhd{grid-column:1/-1;margin:0 0 2px;font-family:var(--head);
  font-size:var(--fs-body);color:var(--teal-d)}
/* המקווקו נשאר סימן אחד בלבד: מה שאפשר להוריד. */
.sflyers .morefl{grid-column:1/-1;display:block;text-align:center;
  background:var(--cream);border:1px dashed var(--gold-d);border-radius:10px;
  padding:9px;font-weight:700;font-size:var(--fs-note);color:var(--copper);
  text-decoration:none}
.sflyers .morefl:hover{background:var(--sand)}

/* ======================================================================
   כרטיס הפוסטר. רצועת ״מה מגיע״ בלבד.
   הסגנון שאושר ב-השוואה-פליירים.html. בריחוף הכרטיס מתהפך
   ומציג את הפלייר המלא, כך שהפלייר לא נחתך לתוך הכרטיס.
   ====================================================================== */
.posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:22px}
.cell{position:relative;aspect-ratio:1/1.2;display:block;text-decoration:none;
  color:#fff}
.cell .face{position:absolute;inset:0;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),
             transform .55s cubic-bezier(.16,1,.3,1)}
.cell .face.fly{opacity:0;transform:scale(.97);pointer-events:none;
  background:#fff;border:1px solid rgba(20,33,42,.14);border-radius:14px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.cell .face.fly img{width:100%;height:100%;object-fit:contain}
.cell.flip:hover .face.fly,.cell.flip:focus-visible .face.fly{opacity:1;transform:scale(1)}
/* בלי פנים אחוריות אין מה להפוך. בלי התנאי הזה כרטיס שאין לו
   פלייר פשוט נעלם בריחוף, וזה מה שקרה. */
.cell.flip:hover .face.crd,.cell.flip:focus-visible .face.crd{opacity:0;
  transform:scale(1.02);pointer-events:none}
.cell:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

.crd{overflow:hidden;isolation:isolate;text-align:right;
  background:var(--tc,#95622C);
  border-radius:46% 46% 16px 16px / 27% 27% 2.2% 2.2%;
  display:flex;flex-direction:column;
  box-shadow:0 18px 40px -26px rgba(20,33,42,.6);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,
             border-radius .6s cubic-bezier(.16,1,.3,1),opacity .55s}
.cell:hover .crd{transform:translateY(-9px);
  box-shadow:0 34px 70px -30px rgba(20,33,42,.72);
  border-radius:46% 46% 16px 16px / 20% 20% 2.2% 2.2%}
.crd .ph{position:relative;flex:0 0 54%;overflow:hidden;
  background:var(--tc);display:block}
.crd .ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.14) contrast(1.06) brightness(1.04);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.cell:hover .crd .ph img{transform:scale(1.08)}
.crd .ph:after{content:"";position:absolute;inset:auto 0 -1px 0;height:38%;
  background:linear-gradient(to top,var(--tc),transparent)}
.crd .in{position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(.75rem,1.5vw,1.2rem);gap:.3rem}
.crd .in:before{content:"";position:absolute;inset:0;opacity:.2;
  pointer-events:none;
  background-image:radial-gradient(circle at 22% 26%,#fff 1.4px,transparent 1.6px),
    radial-gradient(circle at 72% 70%,#fff 1.4px,transparent 1.6px);
  background-size:26px 26px,34px 34px}
.crd .hook{position:relative;align-self:flex-start;font-weight:700;
  font-size:var(--fs-note);letter-spacing:.04em;line-height:1.25;color:#1C1206;
  background:#EBDB93;padding:.34em .8em;border-radius:999px;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.6);max-width:100%}
.crd b{position:relative;font-family:var(--head);font-weight:400;
  font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.04;display:block;
  text-shadow:0 3px 0 rgba(0,0,0,.18),0 10px 26px rgba(0,0,0,.35)}
.crd .mt{position:relative;display:flex;gap:.5rem;align-items:center;
  font-size:var(--fs-note);margin-top:.45rem;flex-wrap:wrap;padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.26)}
.crd .mt > span{opacity:.92}
.crd .gf{letter-spacing:.06em;color:var(--tc);background:#fff;
  padding:.2em .7em;border-radius:999px;font-weight:700;opacity:1}
/* בלי תמונה מאושרת: הצבע לוקח הכל, והמספר נושא את השטח */
.crd.nophoto .gh{position:absolute;inset:-.06em auto auto .04em;
  font-family:var(--head);font-size:9rem;line-height:.8;
  color:rgba(255,255,255,.14);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cell .face,.crd,.crd .ph img{transition:none}}
@media (hover:none){
  .cell .face.fly{display:none}}
/* פלייר כוויזואל בכרטיס פוסטר: נצמד למעלה כדי שהכותרת שלו תיראה */
.crd .ph.top img{object-position:top center}

/* עמוד הסדנה, גרסה א */
.takeaway{background:var(--sand)}
.takeaway .big{font-family:var(--head);font-size:clamp(24px,3.4vw,34px);
  line-height:1.18;margin:4px 0 0}
.flysec h2{margin-bottom:6px}

/* פלייר בעמוד הימים המיוחדים: גובה מרוסן, אחרת הוא מותח את כל המקטע */
.sday{grid-template-columns:230px 1fr}
.sdpic img{max-height:330px;width:auto;max-width:100%;margin:0 auto;display:block}
.sdpic{text-align:center}
.flysec img{max-height:460px;width:auto}
@media(max-width:980px){
  .sday{grid-template-columns:1fr}
  .sdpic img{max-height:280px}
}


/* ------------------------------------------- העדפת תנועה מופחתת
   המערכת של הגולש מבקשת פחות תנועה, ולכן אין הנפשות ואין גלילה רכה. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  main > section.rv > .wrap > *{opacity:1!important;transform:none!important}
  *,*:before,*:after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ------------------------------------------------- טופס: חובה ומשוב */
.frm .req{font-style:normal;font-size:var(--fs-note);color:var(--faint);font-weight:400}
.frmsay{min-height:1.4em;margin:10px 0 0;font-size:var(--fs-note);font-weight:700}
.frmsay.ok{color:var(--teal-d)}
.frmsay.bad{color:var(--copper)}
.frmsay .ghost{margin-top:8px}