/* ============================================================
   bendylife · סטודיו נשימה · מורן אור
   מערכת עיצוב: אור, חול, יער

   פלטה מאושרת
     SAND      #F2EDE4   רקע
     FOREST    #2E4A45   אקסנט טקסטואלי, כותרות משניות
     SAGE      #7F9C8C   אלמנטים גרפיים, מילויים
     GOLD      #D8B26E   כפתורים ו-CTA בלבד (לעולם לא טקסט קטן)
     CHARCOAL  #2F2F2F   טקסט גוף

   הערה על שמות המשתנים: --ink* הם הרקעים ו--paper* הם הטקסט.
   השמות היסטוריים והפוכים אינטואיטיבית, אבל ה-HTML מפנה אליהם
   ב-inline styles ולכן אסור לשנות אותם. --ember = FOREST.
   ============================================================ */

:root{
  /* ---- הפלטה הגולמית ---- */
  --sand:      #F2EDE4;
  --forest:    #2E4A45;
  --sage:      #7F9C8C;
  --gold:      #D8B26E;
  --gold-dp:   #C39A52;
  --charcoal:  #2F2F2F;

  /* ---- רקעים (מבהיר לעמוק) ----
     גוון שמנת, לא בז'. עידו ביקש רקע בהיר יותר בכל האתר */
  --ink:       #FDFBF7;   /* שמנת, הרקע הראשי */
  --ink-2:     #FAF7F1;   /* שמנת עמוקה קמעה */
  --ink-3:     #F6F2EA;   /* רצועה שלישית */
  --ink-4:     #EBE5D9;

  /* ---- טקסט ---- */
  --paper:     #2F2F2F;   /* CHARCOAL */
  --paper-2:   #4C5A55;   /* אפור-מרווה עמוק, טקסט משני */
  --paper-3:   #5C6964;   /* מרוסן, מטא ופרטים */

  /* ---- אקסנטים ---- */
  --ember:     #2E4A45;   /* FOREST */
  --ember-lo:  #7F9C8C;   /* SAGE */
  --sage-wash: #E3EAE4;

  /* ---- ערוצי RGB לשקיפויות ---- */
  --ink-rgb:    253 251 246;
  --paper-rgb:  47 47 47;
  --forest-rgb: 46 74 69;
  --sage-rgb:   127 156 140;
  --gold-rgb:   216 178 110;

  /* ---- קווים ---- */
  --line:      rgb(var(--forest-rgb) / .14);
  --line-2:    rgb(var(--forest-rgb) / .28);
  --line-3:    rgb(var(--forest-rgb) / .46);

  /* ---- מידות ---- */
  --max:       1320px;
  --gut:       clamp(20px, 5vw, 72px);
  /* המרחק מקצה התוכן ועד קצה החלון. משמש כדי לתת ללוח ההירו לדמם החוצה */
  --bleed-i:   calc(max(0px, (100vw - var(--max)) / 2) + var(--gut));

  --r-xs:      3px;
  --r-sm:      5px;
  --r-md:      8px;
  --r-lg:      14px;

  /* ---- צללים: תמיד סביבתי רחב + מגע קרוב ---- */
  --sh-1: 0 1px 2px rgb(var(--forest-rgb) / .05), 0 8px 20px -14px rgb(var(--forest-rgb) / .18);
  --sh-2: 0 2px 5px rgb(var(--forest-rgb) / .05), 0 26px 50px -30px rgb(var(--forest-rgb) / .26);
  --sh-3: 0 4px 9px rgb(var(--forest-rgb) / .06), 0 48px 90px -46px rgb(var(--forest-rgb) / .34);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Assistant', system-ui, sans-serif;
  font-weight:300;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* גרעין נייר עדין מעל הכל. שומר על החול מלהיראות דיגיטלי מדי */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.022;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--sage-wash); color:var(--forest); }

:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   טיפוגרפיה
   ============================================================ */

h1,h2,h3,h4,h5{
  font-family:'Heebo', system-ui, sans-serif;
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

/* הכותרת הראשית של כל עמוד: פחם, המשקל הכבד ביותר של העמוד */
h1{ color:var(--paper); }
/* כותרות משניות: יער. זה צבע המותג המוביל */
h2{ color:var(--ember); }
h3,h4,h5{ color:var(--paper); }

.d1{ font-size:clamp(3.1rem, 10.6vw, 9.4rem); font-weight:200; letter-spacing:-.035em; line-height:.98; }
.d2{ font-size:clamp(2.35rem, 5.9vw, 5.1rem); font-weight:250; letter-spacing:-.03em; line-height:1.04; }
.d3{ font-size:clamp(1.85rem, 3.4vw, 2.95rem); font-weight:300; letter-spacing:-.024em; line-height:1.12; }
.d4{ font-size:clamp(1.28rem, 1.9vw, 1.68rem); font-weight:400; letter-spacing:-.012em; line-height:1.28; }

.lead{
  font-size:clamp(1.1rem, 1.5vw, 1.34rem);
  line-height:1.62;
  color:var(--paper-2);
  font-weight:300;
  max-width:54ch;
}

p{ margin:0 0 1.1em; max-width:62ch; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.muted{ color:var(--paper-3); }

/* תווית קטנה עם ריווח, בסגנון קרדיטים */
.eyebrow{
  font-family:'Heebo', sans-serif;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ember);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(20px,2.4vw,30px);
  line-height:1.4;
}
.eyebrow::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(to left, var(--line-2), rgb(var(--sage-rgb) / .18) 55%, transparent);
  max-width:190px;
}
.eyebrow--plain::after{ display:none; }

/* מספור בסגנון תסריט */
.num{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
/* המספר בראש כרטיס בעמוד הקורס: מקבל קו זהב מתחתיו */
.card .num{
  padding-block-end:9px;
  border-block-end:2px solid var(--gold);
}

/* ============================================================
   מבנה ורצועות
   ============================================================ */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
}

section{ position:relative; }

.band{ padding-block:clamp(78px, 11.5vh, 164px); }
.band--tight{ padding-block:clamp(54px, 7.5vh, 100px); }

/* מעברי הגוון בין הרצועות: הפרש קטן פלוס שערה, כדי שייקרא כנשימה ולא כקופסה */
.band--ink2{
  background:var(--ink-2);
  box-shadow:inset 0 1px 0 rgb(var(--forest-rgb) / .07), inset 0 -1px 0 rgb(var(--forest-rgb) / .07);
}
/* בלי נשיפת מרווה. הגוון הירקרק הוריד את הרצועה לאפור דהוי */
.band--ink3{
  background:var(--ink-3);
  box-shadow:inset 0 1px 0 rgb(var(--forest-rgb) / .09), inset 0 -1px 0 rgb(var(--forest-rgb) / .09);
}

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   ניווט
   ============================================================ */

.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:100;
  padding-block:19px;
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s, box-shadow .45s;
  border-block-end:1px solid transparent;
}
/* נשיפת אור מתחת לתפריט, כדי שהקישורים ייקראו גם מעל תצלום */
.nav::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:210%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--ink-rgb) / .94) 0%,
    rgb(var(--ink-rgb) / .84) 30%,
    rgb(var(--ink-rgb) / .46) 62%,
    rgb(var(--ink-rgb) / 0) 100%);
  transition:opacity .45s var(--ease);
}
.nav.is-stuck{
  background:rgb(var(--ink-rgb) / .90);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  padding-block:12px;
  border-block-end-color:var(--line);
  box-shadow:0 12px 30px -26px rgb(var(--forest-rgb) / .5);
}
.nav.is-stuck::before{ opacity:0; }

.nav__in{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* ---- הוורדמארק ---- */
.mark{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size:1.24rem;
  letter-spacing:-.028em;
  direction:ltr;
  display:inline-flex;
  align-items:baseline;
  gap:0;
  line-height:1;
  color:var(--paper);
  transition:color .3s;
}
.mark b{
  font-weight:700;
  color:var(--paper);
  transition:color .3s;
}
/* "Life" בסריף נטוי אמיתי. Cormorant ראשון בתור, כך שאם הוא
   יתווסף אי פעם ל-<link> בראש ה-HTML הוורדמארק ישתדרג לבד.
   עד אז Georgia נותנת איטליק אמיתי, בלי אף בקשת רשת נוספת */
.mark i{
  font-family:'Cormorant','Playfair Display',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.14em;
  letter-spacing:-.01em;
  color:var(--forest);
  margin-inline-start:.06em;
}
.mark small{
  font-family:'Heebo', sans-serif;
  font-size:.57rem;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--paper-3);
  direction:rtl;
  margin-inline-start:12px;
  padding-inline-start:12px;
  border-inline-start:1px solid var(--line-2);
  white-space:nowrap;
}
.nav .mark:hover{ color:var(--forest); }

.menu{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.3vw,36px);
  list-style:none;
  margin:0;
  padding:0;
  font-size:.94rem;
  font-weight:400;
}
.menu a{
  position:relative;
  padding-block:7px;
  color:var(--paper-2);
  transition:color .3s;
}
.menu a::after{
  content:'';
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:width .4s var(--ease-out);
}
.menu a:hover{ color:var(--forest); }
.menu a:hover::after{ width:100%; }
.menu a[aria-current]{ color:var(--forest); font-weight:500; }
.menu a[aria-current]::after{ width:100%; background:var(--forest); }

/* ---- כפתור ה-CTA בתפריט ----
   נכתב כ-.menu .btn--nav ולא כ-.btn--nav, כדי לגבור על .menu a
   ששולט בצבע ובריפוד של כל קישור בתפריט */
.menu .btn--nav{
  min-height:0;
  padding:10px 21px;
  font-size:.87rem;
  font-weight:500;
  color:var(--paper);
  white-space:nowrap;
  box-shadow:0 1px 2px rgb(var(--forest-rgb) / .06), 0 10px 20px -14px rgb(var(--gold-rgb) / .9);
}
.menu .btn--nav::after{ display:none; }   /* בלי הקו התחתון של התפריט */
.menu .btn--nav:hover{ color:var(--ink); transform:translateY(-1px); }
.nav.is-stuck .menu .btn--nav{ padding-block:9px; }

.burger{
  display:none;
  background:none;
  border:0;
  padding:11px;
  cursor:pointer;
  color:var(--forest);
}
.burger span{
  display:block;
  width:24px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  margin:6px 0;
  transition:transform .38s var(--ease-out), opacity .25s;
}
.nav.is-open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2){ opacity:0; }
.nav.is-open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:860px){
  .burger{ display:block; }
  .menu{
    position:fixed;
    inset:0;
    background:
      radial-gradient(90% 60% at 100% 0%, rgb(var(--sage-rgb) / .16), transparent 62%),
      radial-gradient(80% 50% at 0% 100%, rgb(var(--gold-rgb) / .14), transparent 60%),
      var(--ink);
    flex-direction:column;
    justify-content:center;
    gap:6px;
    font-size:clamp(1.7rem,7vw,2.3rem);
    font-family:'Heebo',sans-serif;
    font-weight:250;
    letter-spacing:-.02em;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .6s var(--ease-out);
  }
  .nav.is-open .menu{ clip-path:inset(0 0 0 0); }
  .menu a{ color:var(--paper); }
  .menu a::after{ height:2px; }
  .menu li{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .nav.is-open .menu li{ opacity:1; transform:none; }
  .nav.is-open .menu li:nth-child(1){ transition-delay:.12s; }
  .nav.is-open .menu li:nth-child(2){ transition-delay:.18s; }
  .nav.is-open .menu li:nth-child(3){ transition-delay:.24s; }
  .nav.is-open .menu li:nth-child(4){ transition-delay:.30s; }
  .nav.is-open .menu li:nth-child(5){ transition-delay:.36s; }
  .nav__in{ position:relative; z-index:2; }
  .burger{ position:relative; z-index:3; }
  .mark small{ display:none; }
  /* ב-overlay הפריטים ענקיים. הכפתור מקבל רוחב תוכן, ממורכז,
     עם אוויר מעליו, כדי שייקרא ככפתור ולא כפריט תפריט שהשתבש */
  .menu li:last-child{ align-self:center; margin-block-start:clamp(22px,5vw,34px); }
  .menu .btn--nav{ padding:15px 34px; font-size:1rem; }
}
/* מ-1040 ומטה מוותרים על תת-הכיתוב של הלוגו, כדי שהתפריט
   פלוס הכפתור לא ידחקו אותו */
@media (max-width:1040px){
  .mark small{ display:none; }
}

/* ============================================================
   מסגרות תמונה
   ============================================================ */

.frame{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--ink-3);
  border-radius:var(--r-sm);
  isolation:isolate;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--ease), filter 1.3s var(--ease);
  filter:saturate(.97) contrast(1.015) brightness(1.015);
}
/* טבעת פנימית דקה: נותנת לתצלום קצה מוגדר על החול */
.frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgb(var(--forest-rgb) / .09);
}
a:hover .frame img,
.frame:hover img{ transform:scale(1.04); }

/* מצב "אין עדיין תמונה" */
.frame.is-empty img{ display:none; }
.frame.is-empty{
  background:
    linear-gradient(140deg, rgb(var(--sage-rgb) / .3), transparent 58%),
    repeating-linear-gradient(45deg, rgb(var(--forest-rgb) / .04) 0 1px, transparent 1px 12px),
    var(--ink-3);
}
.frame.is-empty::before{
  content:'';
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  translate:-50% -50%;
  width:40px; height:40px;
  border:1px solid var(--line-2);
  border-radius:50%;
  opacity:.55;
}
.frame.is-empty::after{
  content:attr(data-slot) ' · ' attr(data-ratio);
  position:absolute;
  inset:auto auto 14px 14px;
  font-family:'Syne',sans-serif;
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--paper-2);
  direction:ltr;
  background:rgb(var(--ink-rgb) / .86);
  padding:5px 9px;
  border-radius:var(--r-xs);
  box-shadow:none;
}

.r-portrait{ aspect-ratio:4/5; }
.r-square { aspect-ratio:1/1; }
.r-wide   { aspect-ratio:16/9; }
.r-cine   { aspect-ratio:21/9; }
.r-tall   { aspect-ratio:3/4; }

/* ============================================================
   כפתורים
   GOLD הוא צבע הפעולה. הוא לא מופיע בשום מקום אחר כמילוי מלא.
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:15px 34px;
  font-family:'Heebo',sans-serif;
  font-size:.96rem;
  font-weight:500;
  letter-spacing:.005em;
  border:1px solid var(--gold);
  border-radius:var(--r-sm);
  background:var(--gold);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 1px 2px rgb(var(--forest-rgb) / .06), 0 14px 26px -18px rgb(var(--gold-rgb) / .9);
  transition:color .38s var(--ease), border-color .38s var(--ease),
             box-shadow .38s var(--ease), transform .38s var(--ease-out);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--forest);
  translate:0 101%;
  transition:translate .48s var(--ease-out);
  z-index:1;
}
.btn:hover{
  color:var(--ink);
  border-color:var(--forest);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgb(var(--forest-rgb) / .08), 0 20px 34px -20px rgb(var(--forest-rgb) / .55);
}
.btn:hover::before{ translate:0 0; }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent;
  color:var(--forest);
  border-color:var(--line-3);
  box-shadow:none;
}
.btn--ghost::before{ background:var(--forest); }
.btn--ghost:hover{
  color:var(--ink);
  border-color:var(--forest);
  box-shadow:0 18px 30px -22px rgb(var(--forest-rgb) / .5);
}

.btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* קישור טקסט עם חץ */
.arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Heebo',sans-serif;
  font-size:.94rem;
  font-weight:500;
  color:var(--ember);
  padding-block:5px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .35s, gap .35s var(--ease-out);
}
.arrow::after{ content:'←'; font-size:1.05em; transition:translate .35s var(--ease-out); }
.arrow:hover{ box-shadow:inset 0 -1px 0 var(--gold); gap:16px; }
.arrow:hover::after{ translate:-4px 0; }

/* ============================================================
   הירו וכותרי העמודים: פיצול

   כל התצלומים כאן הם פוזות אנכיות. עמידות ידיים, הקשתות, גשרים.
   כל שכבה שנפרשת מעליהם חותכת גוף אנושי לשניים, וכל יחס רחב
   מוחק ראשים. לכן:

   התצלום בעמודה אחת, הטקסט בעמודה השנייה על חול אטום.
   אפס אוברליי, אפס מסק, אפס גרדיאנט מעל תצלום. התמונה שלמה
   ב-100% משטחה, והטקסט קריא ב-100% כי הוא על רקע אטום.

   העמודה של התצלום גבוהה יותר מרוחבה, ולכן object-fit חותך
   רק את הצדדים הריקים ושומר את מלוא הגובה. הראש והגו שלמים.
   התצלום מתחיל מתחת לתפריט, כדי שגם התפריט לא ידרוש צעיף.
   ============================================================ */

.hero,
.phero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-block-start:clamp(74px, 9vh, 102px);
  overflow:hidden;
}
/* גם ההירו הראשי וגם ההירו הפנימי מתנהגים אותו דבר: עמודת תצלום
   ביחס טבעי, ממורכזת, ולידה עמודת טקסט על חול. אף תצלום לא נמתח
   לגובה של חלון שלם, כי זה מה שחתך את הדמויות */
.hero,
.phero{
  align-items:center;
}

/* ---- עמודת התצלום ---- */
.hero__media,
.phero__bg{
  position:relative;
  inset:auto;
  z-index:0;
  grid-column:2;   /* ב-RTL זו העמודה השמאלית. מדממת אל קצה החלון */
  grid-row:1;
  min-width:0;
  overflow:hidden;
}
/* ⚠️ כלל ברזל: יחס החלון זהה ליחס הקובץ, לכל תמונה בנפרד.
   עידו מסגר כל תצלום ידנית כדי שהדמות לא תיחתך, ולכן כל יחס
   אחיד שנכפה מלמעלה הורס את המסגור שלו. החיתוך כאן הוא אפס.
   אם מחליפים תמונה, חובה לעדכן גם את היחס למטה. */
.hero__media,
.phero__bg{
  aspect-ratio:3/2;          /* ברירת מחדל, נדרסת לפי הקובץ */
  align-self:center;
}
.hero__media:has([data-slot*="hero-main"])         { aspect-ratio:1698 / 833; }
.hero__media:has([data-slot*="course-hero"])       { aspect-ratio:1027 / 941; }
.phero__bg:has([data-slot*="story-hero"])          { aspect-ratio:1698 / 833; }
.phero__bg:has([data-slot*="classes-hero"])        { aspect-ratio:1226 / 905; }
.phero__bg:has([data-slot*="pelvis-wide"])         { aspect-ratio:1240 / 1268; }
.phero__bg:has([data-slot*="back-wide"])           { aspect-ratio:1536 / 1024; }
.phero__bg:has([data-slot*="deepening-wide"])      { aspect-ratio:1240 / 1268; }
.phero__bg:has([data-slot*="vinyasa-wide"])        { aspect-ratio:1536 / 1024; }

.hero__media .frame,
.phero__bg .frame{
  width:100%;
  height:100%;
  border-radius:0;
  background:var(--ink-2);
}
/* שום דבר לא מונח מעל התצלום. גם לא טבעת של פיקסל */
.hero__media .frame::after,
.phero__bg .frame::after{ display:none; }
.hero__media .frame img,
.phero__bg .frame img,
.hero__media .frame:hover img,
.phero__bg .frame:hover img{
  transform:none;
  transition:none;
  filter:saturate(1) contrast(1.01) brightness(1.01);
}

/* ---- קדר ----
   הקבצים נחתכו מראש ב-build-media.js לפי מיקוד שנבדק בעין, ולכן
   כאן אין צורך בהיסטים לכל תמונה. החלון והקובץ באותו יחס.
   היסט אנכי קל למעלה, כי הראשים תמיד בחלק העליון של הפריים,
   וכך גם אם תקרת הגובה חותכת משהו זה יהיה הרצפה ולא הראש */
.hero__media .frame img,
.phero__bg .frame img{ object-position:50% 42%; }

/* ---- עמודת הטקסט: חול אטום ---- */
.hero__in,
.phero .wrap{
  grid-column:1;
  grid-row:1;
  align-self:center;
  position:relative;
  z-index:2;
  max-width:none;
  margin:0;
  min-width:0;
  /* בצד החיצוני מיישרים לקו התוכן של שאר העמוד, בצד הפנימי אוויר */
  padding-inline:var(--bleed-i) clamp(30px, 4.6vw, 84px);
  padding-block:clamp(40px,6vh,72px);
}

.hero__panel,
.phero .hero__panel{
  position:static;
  max-width:34ch;
  padding:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
}
.hero__panel::before,
.phero .hero__panel::before{ content:none; display:none; }

/* ---- לוקאפ ההירו, לפי המוקאפ שעידו אישר ----
   וורדמארק גדול, כותרת קצרה, שורת תחומים, ושורת מיקום. בלי פסקה */
.hero__mark{
  display:block;
  font-family:'Syne', sans-serif;
  font-size:clamp(2.1rem, 3.4vw, 3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  direction:ltr;
  text-align:start;
  margin-block:0 clamp(16px,1.9vw,26px);
}
/* התווית מעל הוורדמארק צמודה אליו, זו יחידה אחת */
.hero__panel .eyebrow{ margin-block-end:clamp(10px,1.1vw,15px); }
/* אותו טיפול בדיוק כמו הוורדמארק בבר העליון: סריף נטוי אמיתי */
.hero__mark b{ font-weight:700; color:var(--paper); }
.hero__mark i{
  font-family:'Cormorant','Playfair Display',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.14em;
  letter-spacing:-.01em;
  color:var(--forest);
  margin-inline-start:.06em;
}

.hero__disc{
  font-family:'Heebo', sans-serif;
  font-size:clamp(.82rem, 1.05vw, .96rem);
  font-weight:400;
  letter-spacing:.16em;
  color:var(--ember);
  margin-block:0 clamp(14px,1.6vw,20px);
  max-width:none;
}

.hero .d1{
  margin-block:0 clamp(12px,1.5vw,18px);
  font-size:clamp(1.9rem, 3.1vw, 3.2rem);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:1.14;
}
.hero__sub{
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  font-weight:300;
  line-height:1.62;
  color:var(--paper-2);
  max-width:34ch;
  margin-block-end:clamp(24px,2.8vw,34px);
}
/* האמירה שפותחת את הכרטיס: גדולה יותר, ביער, וממנה נגזר הקצב */
.hero__sub strong{
  display:block;
  font-family:'Heebo',sans-serif;
  font-weight:400;
  font-size:clamp(1.12rem, 1.45vw, 1.38rem);
  line-height:1.42;
  letter-spacing:-.015em;
  color:var(--ember);
  margin-block-end:clamp(12px,1.3vw,17px);
}
.hero__sub span{
  display:block;
  font-size:clamp(.9rem, 1.02vw, 1rem);
  line-height:1.6;
  color:var(--paper-3);
}
.hero .btn{ padding-inline:clamp(18px,1.9vw,26px); }

.phero h1{ font-size:clamp(2.1rem, 3.6vw, 3.5rem); }
.phero .lead{ max-width:34ch; font-size:clamp(1rem,1.2vw,1.14rem); }
.phero .hero__panel .eyebrow{ margin-block-end:clamp(16px,1.8vw,22px); }

/* מונה גלילה: יושב בתחתית עמודת הטקסט, על חול. לא על התצלום */
.scroller{
  position:absolute;
  inset-block-end:clamp(20px,3vh,34px);
  inset-inline-start:var(--bleed-i);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  font-family:'Syne',sans-serif;
  font-weight:600;
  font-size:.58rem;
  letter-spacing:.26em;
  color:var(--paper-3);
  direction:ltr;
  text-transform:uppercase;
}
/* קו סטטי. בלי לולאה. הלקוח לא רוצה שום דבר שזז מעצמו */
.scroller i{
  display:block;
  width:1px;
  height:48px;
  background:linear-gradient(var(--forest), rgb(var(--forest-rgb) / 0));
}

/* ============================================================
   לוח הזכוכית. עמוד הבית בלבד.

   עידו מסגר מחדש את media/hero-main.jpg במיוחד בשביל הלוח:
   הדמות בשליש השמאלי עד המרכז, וכל מה שמימין לה קיר, שיח
   ורצפה. מדידת פיקסלים מאשרת: גוון עור מופיע בין 0.30 ל-0.65
   מרוחב הפריים, ומ-0.65 והלאה יש אפס. הלוח יושב באזור הזה
   בלבד ולכן לא נוגע בה.

   התיחום נעשה ב-:has() לפי שם הקובץ, ולכן הוא חל רק על
   התצלום שנבנה בשבילו. כל שאר העמודים נשארים בפיצול.
   בדפדפן בלי :has() העמוד נופל בחזרה לפיצול, שגם הוא תקין.
   ============================================================ */
@media (min-width:901px){
 /* ⚠️ הגובה נקבע מיחס התצלום ולא מגובה המסך. כשקבעתי גובה לפי svh
    החלון יצא רחב מהתמונה, החיתוך אכל מהגובה, והידיים של מורן נחתכו.
    עכשיו החלון והקובץ באותו יחס בדיוק ולכן החיתוך אפס. */
 .hero:has(.frame[data-slot*="hero-main"]){
  display:block;
  position:relative;
  min-height:0;
  padding-block-start:0;
 }
 .hero:has(.frame[data-slot*="hero-main"]) .hero__media{
  position:static;
  width:100%;
  aspect-ratio:1698 / 833;   /* היחס המדויק של hreo.jpg */
  max-height:none;
  align-self:auto;
 }
 /* כשהחלון צר מ-16:9 נחתך מעט מהרוחב. עיגון לימין דואג שהחיתוך
    ייפול תמיד בשוליים השמאליים, שהם קיר ועצים מטושטשים, ולעולם
    לא באזור הנקי שעידו מסגר בימין בשביל הלוח */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__media .frame img{
  object-position:100% 50%;
 }
 /* הכרטיס מרחף מעל התצלום, ממורכז אנכית, עם אוויר מכל צד */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__in{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  width:100%;
  padding-inline:clamp(30px, 6vw, 130px) var(--gut);
  padding-block:clamp(60px,7vw,96px);
 }
 /* ---- כרטיס הזכוכית ----
    מלבן מוגדר שמרחף מעל התצלום: פינות מעוגלות, מסגרת דקה, צל,
    ורקע חצי שקוף שמטשטש את מה שמאחוריו. אפשר לראות את הקיר
    והשיחים דרכו. זה מה שהופך אותו לזכוכית ולא לשטח לבן */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{
  position:relative;
  /* רוחב קבוע. בלי זה פריט הפלקס מתכווץ לרוחב המילה הארוכה ביותר
     והכרטיס יוצא צר וגבוה */
  flex:0 0 auto;
  width:clamp(320px, 33vw, 520px);
  max-width:100%;
  padding:clamp(30px,2.8vw,48px) clamp(26px,2.5vw,42px);
  background:rgb(var(--ink-rgb) / .70);
  backdrop-filter:blur(30px) saturate(1.4);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgb(255 255 255 / .55);
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 6px rgb(var(--forest-rgb) / .07),
    0 34px 76px -36px rgb(var(--forest-rgb) / .42);
 }
 /* דפדפן בלי backdrop-filter מקבל רקע אטום יותר, כדי שהטקסט ייקרא */
 @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{
    background:rgb(var(--ink-rgb) / .93);
  }
 }
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel::before{ content:none; display:none; }
 /* היררכיה: סטודיו נשימה הוא הגדול, ומתחתיו הוורדמארק. הכל ממורכז */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{ text-align:center; }
 .hero:has(.frame[data-slot*="hero-main"]) .d1{
  font-size:clamp(2.2rem, 3.3vw, 3.5rem);
  font-weight:250;
  line-height:1.06;
  margin-block:0 clamp(12px,1.3vw,18px);
 }
 .hero:has(.frame[data-slot*="hero-main"]) .hero__mark{
  font-size:clamp(1.35rem, 1.95vw, 2.05rem);
  text-align:center;
  margin-block:0 clamp(18px,2vw,26px);
  padding-block-end:clamp(16px,1.8vw,24px);
  border-block-end:1px solid var(--line-2);
 }
 /* שתי דרגות: האמירה גדולה ובצבע המותג, והפרטים קטנים ומרוסנים */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__sub{
  max-width:none;
  margin-block-end:clamp(22px,2.5vw,32px);
 }
 .hero:has(.frame[data-slot*="hero-main"]) .btns{ justify-content:center; }
 .hero:has(.frame[data-slot*="hero-main"]) .btns{ gap:10px; }
 .hero:has(.frame[data-slot*="hero-main"]) .scroller{ display:none; }
}

/* ============================================================
   מתחת ל-900: אותו עיקרון, מוערם. תצלום למעלה, טקסט מתחת.
   אפס חפיפה.
   ============================================================ */
@media (max-width:900px){
  .hero,
  .phero{
    display:block;
    min-height:0;
    padding-block-start:clamp(70px,9vh,92px);
  }
  .hero__media,
  .phero__bg{
    width:100%;
    align-self:auto;
  }
  /* במובייל אין חיתוך בכלל. החלון תמיד ביחס של הקובץ עצמו,
     ולכן הפריים המלא נראה והדמות שלמה מכף רגל ועד ראש.
     חיתוך לפורטרט הוא מה שחתך אותה קודם */
  /* היחסים לכל תמונה נקבעים למעלה וחלים גם כאן. רק מבטלים תקרות */
  .hero__media,
  .phero__bg{ max-height:none; }
  /* קריאות במובייל: אף טקסט לא יורד מתחת ל-12px, ויעדי מגע 44px */
  .eyebrow{ font-size:.78rem; letter-spacing:.2em; }
  .arrow{ min-height:44px; align-items:center; }
  .item__meta{ font-size:.88rem; }
  /* אותה היררכיה כמו בדסקטופ: שם הסטודיו גדול, הוורדמארק מתחתיו */
  /* אותה יחידה ממורכזת כמו בדסקטופ. בלי זה כל שורה מתיישרת אחרת */
  .hero .hero__panel{ text-align:center; }
  .hero .d1{ font-size:clamp(2rem, 8.4vw, 2.9rem); font-weight:250; margin-block-end:10px; }
  .hero__mark{ font-size:clamp(1.2rem, 5.2vw, 1.7rem); text-align:center; margin-block:0 18px; padding-block-end:16px; border-block-end:1px solid var(--line-2); }
  .hero .hero__sub{ max-width:none; margin-inline:auto; }
  .hero .btns{ justify-content:center; }
  .hero__media .frame img,
  .phero__bg .frame img{ object-position:50% 50%; }

  .hero__in,
  .phero .wrap{
    padding-inline:var(--gut);
    padding-block:clamp(28px,6vw,44px) clamp(6px,2vw,14px);
  }
  .hero__panel,
  .phero .hero__panel{ max-width:none; }
  .hero__sub{ max-width:38ch; }
  .phero .lead{ max-width:44ch; }
  .scroller{ display:none; }
}

/* ============================================================
   כרטיסי השיעורים
   ============================================================ */

.cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(30px, 3.6vw, 60px) clamp(26px, 3.2vw, 54px);
}

.item{
  display:block;
  position:relative;
  transition:transform .5s var(--ease-out);
}
.item .frame{
  aspect-ratio:4/5;
  margin-block-end:clamp(16px,1.9vw,24px);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:box-shadow .55s var(--ease), transform .55s var(--ease-out);
}
/* וילון אור חמים שעולה מתחתית התצלום בריחוף */
.item .frame::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to top,
    rgb(var(--forest-rgb) / .34) 0%,
    rgb(var(--forest-rgb) / .10) 26%,
    rgb(var(--forest-rgb) / 0) 52%);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.item:hover{ transform:translateY(-5px); }
.item:hover .frame{ box-shadow:var(--sh-2); }
.item:hover .frame::before{ opacity:1; }

.item__num{
  position:absolute;
  inset-block-start:14px;
  inset-inline-start:14px;
  z-index:2;
  background:rgb(var(--ink-rgb) / .9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--forest);
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.1em;
  padding:6px 11px;
  border-radius:100px;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.item:hover .item__num{ background:var(--gold); color:var(--paper); }

.item__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.item h3{
  font-size:clamp(1.45rem,2.35vw,2.05rem);
  font-weight:300;
  letter-spacing:-.026em;
  color:var(--paper);
  transition:color .35s;
}
.item:hover h3{ color:var(--ember); }
.item__go{
  font-size:1.25rem;
  color:var(--ember);
  flex:none;
  transition:translate .42s var(--ease-out);
}
.item:hover .item__go{ translate:-8px 0; }

.item__meta{
  margin-block-start:11px;
  padding-block-start:11px;
  border-block-start:1px solid var(--line);
  font-size:.84rem;
  color:var(--paper-3);
  display:flex;
  flex-wrap:wrap;
  gap:5px 14px;
}
.item__meta span{ position:relative; }
.item__meta span + span{ padding-inline-start:15px; }
.item__meta span + span::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.6em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ember-lo);
}
.item__desc{
  margin-block-start:13px;
  font-size:1rem;
  line-height:1.62;
  color:var(--paper-2);
  max-width:44ch;
}

/* שורת "מכאן ממשיכים" */
.cards--row .item .frame{ aspect-ratio:16/11; }
.cards--row .item h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); }

/* הכרטיס הרחב, לקורס הדגל. מישור מורם שעובד על כל הרצועות */
.item--wide{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,3.2vw,54px);
  align-items:center;
  padding:clamp(16px,1.9vw,26px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    linear-gradient(142deg, rgb(255 255 255 / .78), rgb(255 255 255 / .3) 62%),
    linear-gradient(142deg, rgb(var(--sage-rgb) / .1), rgb(var(--gold-rgb) / .07));
  box-shadow:var(--sh-1);
  transition:box-shadow .55s var(--ease), transform .5s var(--ease-out), border-color .5s;
}
.item--wide:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-5px); }
.item--wide .frame{ aspect-ratio:16/11; margin:0; }
.item--wide h3{ font-size:clamp(1.7rem,3.1vw,2.8rem); }
.item--wide .item__desc{ font-size:1.05rem; max-width:48ch; }
.item--wide .item__meta{ border-block-start-color:var(--line-2); }

@media (max-width:820px){
  .cards{ grid-template-columns:1fr; gap:40px; }
  .item--wide{ grid-template-columns:1fr; align-items:start; }
  .item--wide .frame{ aspect-ratio:16/10; margin-block-end:20px; }
}

/* ============================================================
   רשתות ובלוקים
   ============================================================ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5.2vw,92px);
  align-items:center;
}
.split--tilt{ grid-template-columns:1.04fr .96fr; align-items:end; }
@media (max-width:880px){
  .split, .split--tilt{ grid-template-columns:1fr; gap:40px; align-items:start; }
}

.cols3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(244px,1fr));
  gap:clamp(26px,3vw,50px) clamp(24px,2.8vw,48px);
}

.card{
  position:relative;
  border-block-start:1px solid var(--line-2);
  padding-block-start:24px;
  transition:border-color .45s var(--ease);
}
.card::before{
  content:'';
  position:absolute;
  inset-block-start:-1px;
  inset-inline-start:0;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width .55s var(--ease-out);
}
.card:hover::before{ width:46px; }
.card h4{ margin-block-end:12px; color:var(--paper); }
.card p{ color:var(--paper-2); font-size:.98rem; margin-bottom:0; }

/* ציטוט ענק */
.pull{
  position:relative;
  font-family:'Heebo',sans-serif;
  font-weight:250;
  font-size:clamp(1.85rem,4.8vw,3.9rem);
  line-height:1.13;
  letter-spacing:-.035em;
  color:var(--paper);
  max-width:19ch;
  margin:0;
  text-wrap:balance;
}
.pull::before{
  content:'';
  display:block;
  width:52px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  margin-block-end:clamp(22px,2.8vw,34px);
}
.pull em{ font-style:normal; color:var(--ember); }
[style*="text-align:center"] .pull::before{ margin-inline:auto; }
.pull__by{
  display:block;
  margin-block-start:26px;
  font-family:'Heebo',sans-serif;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-3);
}

/* רשימת נקודות */
.marks{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.6vw,19px); }
.marks li{
  position:relative;
  padding-inline-start:28px;
  color:var(--paper-2);
  font-size:1.02rem;
  line-height:1.62;
}
.marks li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.62em;
  width:11px;
  height:11px;
  border-radius:50%;
  border:2px solid var(--gold);
}

/* טבלת פרטים */
.facts{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(20px,2.6vw,44px);
  margin:0;
  border-block-start:1px solid var(--line-2);
}
.facts dt{
  font-family:'Heebo',sans-serif;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember);
  padding-block:16px;
  border-block-end:1px solid var(--line);
  white-space:nowrap;
  align-self:center;
}
.facts dd{
  margin:0;
  padding-block:16px;
  border-block-end:1px solid var(--line);
  color:var(--paper-2);
  font-size:1rem;
  line-height:1.55;
  align-self:center;
}
@media (max-width:620px){
  .facts{ grid-template-columns:1fr; }
  .facts dt{ padding-block:16px 0; border:0; }
  .facts dd{ padding-block:4px 16px; }
}

/* מחירון */
.price{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 22px;
  align-items:baseline;
  padding:14px clamp(8px,1.2vw,14px);
  margin-inline:calc(-1 * clamp(8px,1.2vw,14px));
  border-block-end:1px solid var(--line);
  border-radius:var(--r-xs);
  transition:background .3s var(--ease);
}
.price:first-of-type{ border-block-start:1px solid var(--line); }
.price:hover{ background:rgb(var(--sage-rgb) / .1); }
.price b{ font-weight:500; color:var(--paper); font-size:1.02rem; }
.price i{ font-style:normal; display:block; font-size:.85rem; color:var(--paper-3); line-height:1.5; margin-block-start:2px; }
.price em{
  font-style:normal;
  font-family:'Heebo',sans-serif;
  font-weight:400;
  font-size:1.22rem;
  color:var(--ember);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* גלריה: פסיפס עריכתי */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.gallery .frame:nth-child(3n+1){ aspect-ratio:3/4; }
.gallery .frame:nth-child(3n+2){ aspect-ratio:1/1; }
.gallery .frame:nth-child(3n+3){ aspect-ratio:4/5; }

@media (min-width:900px){
  .gallery{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:clamp(158px,15.5vw,244px);
    gap:clamp(10px,1vw,14px);
  }
  /* :nth-child(n) כדי לגבור על יחסי הממדים של ברירת המחדל בסלקטיביות זהה */
  .gallery .frame:nth-child(n){ aspect-ratio:auto; height:100%; }
  .gallery .frame:nth-child(1){ grid-column:span 4; grid-row:span 2; }
  .gallery .frame:nth-child(2){ grid-column:span 4; }
  .gallery .frame:nth-child(3){ grid-column:span 4; }
  .gallery .frame:nth-child(4){ grid-column:span 3; }
  .gallery .frame:nth-child(5){ grid-column:span 3; }
  .gallery .frame:nth-child(6){ grid-column:span 2; }
}

/* ============================================================
   CTA
   ============================================================ */

.cta{
  position:relative;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 88% at 50% 0%,   rgb(var(--gold-rgb) / .20), transparent 62%),
    radial-gradient(95% 80% at 100% 100%, rgb(var(--sage-rgb) / .26), transparent 64%),
    radial-gradient(85% 70% at 0% 100%,   rgb(var(--sage-rgb) / .14), transparent 60%),
    var(--ink-2);
  box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.cta .eyebrow{ justify-content:center; }
.cta .d2{ margin-block-end:clamp(18px,2.2vw,26px); }
.cta .lead{ margin-inline:auto; margin-block-end:clamp(30px,3.6vw,44px); }
.cta .btns{ justify-content:center; }

/* ============================================================
   פוטר
   ============================================================ */

.foot{
  position:relative;
  background:var(--ink-3);
  box-shadow:inset 0 1px 0 var(--line-2);
  padding-block:clamp(52px,7vh,88px) 32px;
  font-size:.94rem;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(30px,4vw,64px);
  padding-block-end:42px;
  border-block-end:1px solid var(--line);
}
@media (max-width:780px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; gap:34px; } }

.foot .mark{ font-size:1.3rem; }
.foot h5{
  font-family:'Heebo',sans-serif;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 18px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{
  color:var(--paper-2);
  display:inline-block;
  transition:color .3s, transform .35s var(--ease-out);
}
.foot ul a:hover{ color:var(--forest); transform:translateX(-4px); }
.foot__base{
  padding-block-start:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  justify-content:space-between;
  color:var(--paper-3);
  font-size:.82rem;
  letter-spacing:.01em;
}

/* וואטסאפ צף */
.wa{
  position:fixed;
  inset-block-end:22px;
  inset-inline-start:22px;
  z-index:90;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold);
  color:var(--paper);
  display:grid;
  place-items:center;
  box-shadow:0 3px 8px rgb(var(--forest-rgb) / .12), 0 16px 34px -14px rgb(var(--gold-rgb) / .95);
  transition:transform .4s var(--ease-out), background .35s, color .35s, box-shadow .4s;
}
.wa:hover{
  transform:translateY(-4px) scale(1.05);
  background:var(--forest);
  color:var(--ink);
  box-shadow:0 3px 8px rgb(var(--forest-rgb) / .16), 0 22px 40px -16px rgb(var(--forest-rgb) / .7);
}
.wa svg{ width:26px; height:26px; }

/* ============================================================
   אנימציית כניסה
   ============================================================ */

.rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rise.in{ opacity:1; transform:none; }
.rise[data-d="1"]{ transition-delay:.08s; }
.rise[data-d="2"]{ transition-delay:.16s; }
.rise[data-d="3"]{ transition-delay:.24s; }
.rise[data-d="4"]{ transition-delay:.32s; }
.rise[data-d="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
*{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ============================================================
   קריאות במובייל. הבלוק הזה חייב להיות אחרון בקובץ, כי .facts dt
   ו-.pull__by מוגדרים אחרי מדיה קוורי המובייל הראשי ולכן גברו עליו.
   אף טקסט לא יורד מתחת ל-12px.
   ============================================================ */
@media (max-width:900px){
  .facts dt{ font-size:.78rem; letter-spacing:.14em; }
  .pull__by{ font-size:.8rem; letter-spacing:.14em; }
  .foot__base{ font-size:.82rem; }
  .mark small{ font-size:.62rem; }
}