/* ═══════════════════════════════════════════════════════════
   wow.css · שכבת העיצוב של האתר החדש
   נטענת אחרי styles.css ודורסת אותה. כשמאושר, ממזגים פנימה.
   ═══════════════════════════════════════════════════════════ */

:root{
  --brass:#B98B2E;          /* טבעת הזכוכית המגדלת */
  --wood:#6B4226;           /* עץ המסגרת */
  --wood-light:#8C5A36;
  --glow:rgba(240,206,146,.85);
  --shadow-deep:0 40px 90px -20px rgba(47,89,85,.35);
}

/* ---------- גרעין חם על כל האתר ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- פס התקדמות גלילה ---------- */
.progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:60;
  background:linear-gradient(to left,var(--orange),var(--terra));
  transform-origin:right center;transform:scaleX(0);
  transition:transform .1s linear;
}

/* ---------- חשיפה בגלילה ---------- */
/* ⚠️ ההסתרה מותנית ב-html.js. בלי זה, דפדפן בלי JS או שגיאה בסקריפט
   משאירים את כל העמוד שקוף. הדגל נקבע בסקריפט זעיר ב-head. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ═══════════ הירו ═══════════ */
.hero{
  position:relative;background:var(--cream);
  padding-block:60px 84px;overflow:hidden;isolation:isolate;
}
@media(min-width:900px){.hero{padding-block:88px 120px}}

/* נייר משבצות עדין, רמז לתכנון בקנה מידה */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:
    linear-gradient(to left,rgba(47,89,85,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(47,89,85,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 30% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 65% at 30% 40%,#000 20%,transparent 78%);
}
/* הילה חמה מאחורי המסגרת */
.hero::after{
  content:"";position:absolute;z-index:-1;
  inset-block-start:-16%;inset-inline-end:-12%;
  width:78vw;max-width:900px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,rgba(240,206,146,.35) 42%,transparent 68%);
  filter:blur(10px);
}

.hero-grid{display:grid;gap:48px;align-items:center;position:relative}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:13.5px;letter-spacing:.05em;
  color:var(--teal);margin-block-end:22px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  padding:7px 16px 7px 14px;border-radius:999px;backdrop-filter:blur(4px);
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(246,148,54,.7);animation:pulse 2.6s infinite
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(246,148,54,.6)}
  70%{box-shadow:0 0 0 12px rgba(246,148,54,0)}
  100%{box-shadow:0 0 0 0 rgba(246,148,54,0)}
}
@media (prefers-reduced-motion:reduce){.eyebrow::before{animation:none}}

.hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:800;margin-block-end:22px;letter-spacing:-.015em}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{font-style:normal;color:var(--teal);position:relative;display:inline-block}

/* קו יד מצויר מתחת למילה, נמשך כשההירו נטען */
.scribble{
  position:absolute;inset-inline:-6px;inset-block-end:-.22em;height:.34em;
  overflow:visible;pointer-events:none;
}
.scribble path{
  fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:draw 1.1s .55s cubic-bezier(.6,.1,.3,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.scribble path{animation:none;stroke-dashoffset:0}}

.hero-sub{font-size:clamp(18px,2.3vw,21px);color:var(--ink-soft);max-width:36ch;margin-block-end:30px}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.hero-price{
  display:inline-flex;align-items:baseline;gap:7px;font-weight:700;color:var(--teal-deep);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;margin:0;font-size:15.5px;box-shadow:0 6px 18px rgba(47,89,85,.08);
}
.hero-price b{font-size:21px}
.btn-line{margin-block-start:14px}

/* שורת המספרים */
.stats{
  display:flex;gap:14px;flex-wrap:wrap;margin-block-start:38px;
  padding-block-start:30px;border-block-start:1px solid var(--line);
}
.stat{min-width:132px}
/* flex ולא block: הפלוס חייב לשבת באותה שורה עם המספר */
.stat b{display:flex;align-items:baseline;gap:1px;white-space:nowrap;font-size:clamp(26px,3.4vw,34px);font-weight:800;color:var(--teal);line-height:1.1;font-variant-numeric:tabular-nums}
.stat b i{font-style:normal;color:var(--orange)}
.stat>span{display:block;font-size:14px;color:var(--ink-soft);margin-block-start:3px}

/* ---------- המסגרת הצפה ---------- */
.hero-shot{
  position:relative;perspective:1100px;
  --mx:0;--my:0;   /* מיקום העכבר, 1- עד 1 */
}
.frame3d{
  position:relative;border-radius:22px;overflow:hidden;cursor:zoom-in;
  transform:rotateY(calc(var(--mx) * -7deg)) rotateX(calc(var(--my) * 7deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease;
  box-shadow:var(--shadow-deep);
  animation:float 7s ease-in-out infinite;
}
.hero-shot:hover .frame3d{transition:transform .12s ease-out}
@keyframes float{
  0%,100%{translate:0 0}
  50%{translate:0 -12px}
}
@media (prefers-reduced-motion:reduce){
  .frame3d{animation:none;transform:none!important}
}
.frame3d img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .55s cubic-bezier(.2,.7,.3,1)}

/* ברק שעובר על הזכוכית לפי תנועת העכבר */
.frame3d::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    calc(115deg + var(--mx) * 26deg),
    transparent 34%,
    rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.06) 56%,
    transparent 68%);
  opacity:calc(.35 + var(--mx) * .28);
  transition:opacity .3s ease;
}



/* ═══════════ סרט העבודות ═══════════ */
.ribbon{padding-block:74px;overflow:hidden}
.ribbon .head{margin-inline:auto;text-align:center;margin-block-end:38px}
/* ⚠️ ב-RTL קופסה רחבה מהמכל גולשת שמאלה, ואז translateX שלילי מוציא את הסרט מהמסך.
   הפתרון: מכל ltr לפסים בלבד. הכותרת והטקסט סביבם נשארים rtl. */
.rails{direction:ltr}
.track{display:flex;gap:18px;width:max-content;will-change:transform}
.track-a{animation:slide 58s linear infinite}
.track-b{animation:slide 58s linear infinite reverse;margin-block-start:18px}
.ribbon:hover .track{animation-play-state:paused}
/* כשהסרט נשלט בגלילה (מובייל), האנימציה הרציפה חייבת לרדת, אחרת השתיים נלחמות */
.rails.by-scroll .track{animation:none;transition:transform .12s linear}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}
.track figure{margin:0;flex:none;width:230px}
@media(min-width:760px){.track figure{width:290px}}
.track img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  border:5px solid rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.track figure:hover img{transform:scale(1.05) rotate(-1deg)}
.ribbon-note{text-align:center;margin-block-start:34px;font-size:15.5px;color:#C4D6D2}

/* ═══════════ מה זה היה קודם ═══════════ */
.morph{display:grid;gap:22px}
@media(min-width:760px){.morph{grid-template-columns:repeat(3,1fr)}}
.card-flip{perspective:1000px;height:330px;cursor:pointer}
.card-inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.3,.8,.3,1);
}
.card-flip:hover .card-inner,.card-flip.on .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:26px;text-align:center;
}
.card-face.front{background:#fff}
.card-face.back{background:var(--teal);color:#fff;border-color:var(--teal);transform:rotateY(180deg)}
.card-face svg{width:112px;height:112px}
.card-face .lbl{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft)}
.card-face.back .lbl{color:var(--amber)}
.card-face h3{font-size:22px;margin:0}
.card-face.back h3{color:#fff}
.card-face.front svg{color:var(--ink-soft)}
.card-face.back svg{color:var(--amber)}
.card-face p{font-size:15px;color:var(--ink-soft);margin:0;max-width:26ch}
.card-face.back p{color:#CFE0DC}
@media (hover:hover){.card-face .flip-hint{display:none}}
.flip-hint{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--terra);
  font-weight:700;margin-block-start:4px;
}
.morph-note{text-align:center;margin-block-start:32px;color:var(--ink-soft);font-size:16px}

/* ═══════════ זום בגלילה ═══════════ */
.zoomer{position:relative;height:230vh}
.zoom-sticky{
  position:sticky;inset-block-start:0;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.zoom-img{
  width:min(78vw,620px);aspect-ratio:1;border-radius:20px;object-fit:cover;
  box-shadow:var(--shadow-deep);
  transform:scale(var(--z,1));transform-origin:52% 58%;
  transition:transform .12s linear;
}
.zoom-caps{position:absolute;inset-block-end:8vh;inset-inline:0;text-align:center;padding-inline:24px}
.zoom-cap{
  position:absolute;inset-inline:0;opacity:0;transition:opacity .45s ease;
  font-size:clamp(20px,3.2vw,30px);font-weight:700;color:var(--teal-deep);
  text-shadow:0 2px 20px rgba(255,255,255,.9);
}
.zoom-cap.on{opacity:1}

/* ═══════════ כרטיסי הערכות ═══════════ */
.kit{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.kit:hover{transform:translateY(-7px);box-shadow:0 24px 50px -16px rgba(47,89,85,.3)}
.kit-img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.kit{overflow:hidden}
.kit:hover .kit-img{transform:scale(1.055)}

/* ═══════════ שלושת השלבים, עם קו מקשר ═══════════ */
@media(min-width:760px){
  .steps{position:relative}
  .steps::before{
    content:"";position:absolute;inset-block-start:9px;inset-inline:12% 12%;height:2px;
    background:repeating-linear-gradient(to left,var(--orange) 0 7px,transparent 7px 15px);
    opacity:.55;
  }
  .step{position:relative}
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:0;margin-block-end:16px;
  box-shadow:0 0 0 7px var(--cream);
}
.bg-white .step-num{box-shadow:0 0 0 7px #fff}

/* ═══════════ כפתור צף במובייל ═══════════ */
.dock{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:55;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-block-start:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 -8px 30px rgba(0,0,0,.08);
}
.dock.up{transform:none}
.dock b{font-size:16px;color:var(--teal-deep)}
.dock small{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400}
.dock .btn{font-size:16px;padding:13px 26px;box-shadow:none}
@media(max-width:760px){.dock{display:flex}body{padding-block-end:74px}}

/* ═══════════ מסגרת עץ לתמונות תוכן ═══════════ */
.framed{
  padding:14px;background:linear-gradient(150deg,var(--wood-light),var(--wood));
  border-radius:16px;box-shadow:0 22px 50px -18px rgba(47,89,85,.45);
}
.framed img{border-radius:6px;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}


/* ═══════════ מובייל ═══════════ */
/* הזכוכית המגדלת והרמז הם אינטראקציית עכבר. במגע הם רק מפריעים. */
@media(max-width:760px){
  .hero{padding-block:44px 64px}
  /* ⚠️ הגופן מתאים לרוחב העמודה. 32px שובר כל משפט לשתי שורות ב-375 */
  .hero h1{font-size:clamp(28px,7.6vw,34px)}
  .hero::after{width:120vw;opacity:.55}
  .hero::before{opacity:.35}
  .hero-grid{gap:34px}
  /* הטיה שנשלטת בגלילה צריכה החלקה קצרה, אחרת היא מרגישה גומייה */
  .frame3d{transition:transform .25s ease-out}
  .stats{gap:10px;margin-block-start:28px;padding-block-start:22px}
  .stat{min-width:0;flex:1 1 90px}
  .stat b{font-size:26px}
  .stat>span{font-size:12.5px;line-height:1.35}
  .hero-cta{gap:12px}
  .hero .btn{width:100%;text-align:center}
  .ribbon{padding-block:56px}
  .track figure{width:190px}
  .card-flip{height:248px}
  .card-face svg{width:88px;height:88px}
  .morph{gap:16px}
  /* הזום בגלילה נשאר גם במובייל, אבל קצר: 175vh במקום 230 וזום עדין יותר */
  .zoomer{height:175vh}
  .zoom-sticky{height:100svh;padding-inline:20px}
  .zoom-img{width:100%;border-radius:16px}
  .zoom-caps{inset-block-end:0;padding:44px 22px 26px;background:linear-gradient(to top,var(--white) 46%,rgba(255,255,255,.85) 74%,transparent)}
  .zoom-cap{font-size:20px}
  .framed{padding:9px}
}
@media(max-width:420px){
  .track figure{width:158px}
  .dock b{font-size:15px}
  .dock .btn{padding:12px 20px;font-size:15px}
}


/* משוב מגע. בלי זה כפתור בטלפון מרגיש כמו תמונה */
.btn:active{transform:scale(.975)}
.nav-cta:active,.kit-link:active,.dock .btn:active{opacity:.78}

/* פרלקסה עדינה. ה-JS כותב translate3d, ולכן אסור להוסיף כאן transform משלנו */
.par{will-change:transform}

/* אותו רכיב, נוסח לפי סוג המכשיר. לא לכתוב "העבירו עכבר" למי שאין לו עכבר */
.on-touch{display:none}
@media (hover:none){.on-hover{display:none}.on-touch{display:inline}}

/* ארבעה מודולים במקום שלושה שלבים */
@media(min-width:760px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.steps.four{grid-template-columns:repeat(4,1fr)}}

/* ═══════════ שכבת העמודים העשירים ═══════════ */
/* נבנתה אחרי שעברנו על העמוד שקרויזר בנו לנאוה, כדי לעמוד באותה רמה ולעבור אותה */


/* קו מכחול כתום מתחת למילה. עבה יותר מהקו של ההירו */
.brush{position:relative;display:inline-block}
.brush::after{
  content:"";position:absolute;inset-inline:-4px;inset-block-end:-.14em;
  block-size:.16em;border-radius:99px;background:var(--orange);opacity:.85;
}




/* כרטיס עם אייקון קו, מרכזי */
.icards{display:grid;gap:20px}
@media(min-width:640px){.icards{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.icards.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.icards.three{grid-template-columns:repeat(3,1fr)}}
.icard{
  background:#fff;border-radius:26px;padding:32px 24px 28px;text-align:center;
  box-shadow:0 20px 44px -28px rgba(47,89,85,.45);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.icard svg{inline-size:60px;block-size:60px;color:var(--orange);flex:none}
.icard h3{font-size:21px;color:var(--teal);margin:0}
.icard p{font-size:16.5px;color:var(--ink-soft);margin:0}

/* קשת, הצורה של גג בית בובות. יושבת מאחורי תמונת ההירו */
.arch{position:relative}
.arch::before{
  content:"";position:absolute;z-index:-1;
  inset-block-start:-5%;inset-inline-start:-7%;inline-size:114%;block-size:110%;
  border:2.5px solid var(--orange);opacity:.7;
  border-radius:50% 50% 18px 18px;
}
@media(max-width:600px){.arch::before{inline-size:110%;inset-inline-start:-5%}}

/* ── תמונה במסגרת מוסטת. הד למסגרות שהיא עובדת בהן ── */
.photo{position:relative;display:block}
.photo::before{content:"";position:absolute;inset:0;border:2px solid var(--orange);border-radius:24px;transform:translate(-14px,14px);opacity:.6}
.photo img{position:relative;display:block;inline-size:100%;border-radius:24px;box-shadow:0 22px 48px -24px rgba(47,89,85,.5)}
.photo.tall img{aspect-ratio:4/5;object-fit:cover}
.photo.wide img{aspect-ratio:16/10;object-fit:cover}
@media(max-width:600px){.photo::before{transform:translate(-9px,9px)}}


/* ── כרטיס ממוספר. מספר במקום אייקון שצויר ביד ── */
.icard{padding:26px 22px 24px;gap:8px;text-align:start;align-items:stretch}
.icard .num{
  font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--orange);
  display:flex;align-items:center;gap:10px;margin-block-end:2px;
}
.icard .num::after{content:"";flex:1;block-size:2px;background:var(--line)}
.icard h3{font-size:20px}
.icard p{font-size:16px}


/* ── אמירה טיפוגרפית. מחליפה סקציה שהייתה תלויה בתמונה שלא עבדה ── */
.statement{
  font-size:clamp(26px,5.6vw,44px);font-weight:800;line-height:1.28;
  color:var(--teal-deep);margin:0;text-wrap:balance;
}
.statement em{display:block;font-style:normal;color:var(--terra);margin-block-start:10px}
.dark .statement{color:#fff}

/* ── תווית סקציה. הייתה כתב יד מסובב, וזה נראה עקום. עכשיו זו התווית של האתר ──
   אותו רכיב כמו .eyebrow ב-styles.css, כדי שלאתר תהיה שפה אחת ולא שתיים */
.script{
  display:inline-flex;align-items:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.07em;
  color:var(--terra);transform:none;margin-block-end:16px;line-height:1.4;
}
.script::before{content:"";inline-size:28px;block-size:2px;background:var(--orange);flex:none}
.dark .script{color:var(--amber)}


/* ═══════════ סקציות שמובלות על ידי תמונה ═══════════ */

/* גלריית עבודות. עמודות masonry, כי לעבודות שלה יש יחסי גובה שונים */
.gal{columns:2;column-gap:14px}
@media(min-width:760px){.gal{columns:3;column-gap:20px}}
@media(min-width:1100px){.gal{columns:4;column-gap:20px}}
.gal figure{break-inside:avoid;margin:0 0 14px}
@media(min-width:760px){.gal figure{margin-block-end:20px}}
.gal img{
  inline-size:100%;display:block;border-radius:14px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.gal figure:hover img{transform:scale(1.03)}
.gal-note{text-align:center;margin-block-start:30px;font-size:16px;color:#C4D6D2}

/* זוג מאקרו. שתי תמונות שמראות את קנה המידה */
.macro{display:grid;gap:18px}
@media(min-width:760px){.macro{grid-template-columns:1fr 1fr;gap:26px}}
.macro figure{margin:0}
.macro img{inline-size:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block}
@media(min-width:760px){.macro img{aspect-ratio:1}}
.macro figcaption{margin-block-start:12px;font-size:16px;color:var(--ink-soft)}
.dark .macro figcaption{color:#C4D6D2}

/* רצועת תמונה רחבה עם כיתוב */
.band{position:relative;border-radius:20px;overflow:hidden}
.band img{inline-size:100%;aspect-ratio:16/9;object-fit:cover;display:block}
@media(max-width:700px){.band img{aspect-ratio:4/3}}
.band figcaption{
  position:absolute;inset-inline:0;inset-block-end:0;padding:56px 22px 20px;
  color:#fff;font-size:clamp(16px,3.6vw,20px);font-weight:600;
  background:linear-gradient(to top,rgba(20,18,14,.82),transparent);
}


/* ═══════════ רכיבי עמוד מכירה ═══════════ */


/* המסלול. ציר עם ארבע תחנות */
.journey{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.journey li{position:relative;padding:0 30px 30px 0;border-inline-start:0}
.journey li::before{content:"";position:absolute;inset-inline-start:auto;inset-inline-end:9px;
  inset-block:6px 0;inline-size:2px;background:var(--line)}
.journey li:last-child::before{inset-block-end:auto;block-size:0}
.journey li::after{content:"";position:absolute;inset-inline-end:2px;inset-block-start:6px;
  inline-size:16px;block-size:16px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 5px var(--paper-ring,#fff)}
.bg-cream .journey li::after{box-shadow:0 0 0 5px var(--cream)}
.journey .j-tag{display:block;font-size:13px;font-weight:800;letter-spacing:.07em;
  color:var(--terra);margin-block-end:6px}
.journey p{margin:0;font-size:17px;color:var(--ink-soft);max-width:58ch}
@media(min-width:900px){
  .journey{grid-template-columns:repeat(4,1fr);gap:0}
  .journey li{padding:34px 0 0 24px}
  .journey li::before{inset:9px 0 auto auto;inline-size:100%;block-size:2px}
  .journey li:last-child::before{inline-size:0}
  .journey li::after{inset-block-start:2px;inset-inline-end:0}
}

/* למי מתאים, שתי עמודות */
.fit{display:grid;gap:18px}
@media(min-width:760px){.fit{grid-template-columns:1fr 1fr;gap:24px}}
.fit-col{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.fit-col h3{font-size:20px;margin:0 0 16px;color:var(--teal)}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fit-col li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.fit-col li::before{flex:none;inline-size:22px;block-size:22px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:800;margin-block-start:2px}
.fit-col.yes li::before{content:"✓";background:#E8F0E5;color:#2F5121}
.fit-col.no li::before{content:"×";background:#F3EEE4;color:#8A7B62}

/* ציטוט מודגש בתוך טקסט */
.pull{margin:32px 0 0;padding:24px 24px 22px;background:var(--cream);
  border-inline-start:4px solid var(--orange);border-radius:0 16px 16px 0}
.bg-cream .pull{background:#fff}
.pull p{font-size:19px;font-weight:600;margin:0 0 12px;line-height:1.6}
.pull cite{font-style:normal;font-size:15px;font-weight:700;color:var(--teal)}

/* ארבעה צעדים קצרים לפני הטופס */
.steps-lite{list-style:none;counter-reset:s;margin:0 0 30px;padding:0;display:grid;gap:14px}
.steps-lite li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:center;font-size:17px}
.steps-lite li::before{content:counter(s);inline-size:32px;block-size:32px;border-radius:50%;
  background:var(--teal);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}


/* ═══════════════════════════════════════════════════════════
   טיפוגרפיה. סקאלה אחת לכל האתר, שבעה גדלים ולא יותר.
   ⚠️ אסור font-size מקומי בעמוד. אם צריך גודל, הוא נוסף כאן.
   ═══════════════════════════════════════════════════════════ */
:root{
  --t-display:clamp(32px,5.2vw,54px);
  --t-h2:clamp(26px,3.6vw,38px);
  --t-h3:20px;
  --t-lead:clamp(18px,2.1vw,21px);
  --t-body:17.5px;
  --t-small:15px;
  --t-label:13px;
}

/* צבע לפי תפקיד, ולא לפי מצב רוח:
   ink לכותרות ולגוף · muted לטקסט משני · teal לתוויות ולמבנה
   terra לפעולה ולמספרים · orange לקווים דקים בלבד, אף פעם לא לטקסט */

body{font-size:var(--t-body)}
.hero h1{font-size:var(--t-display);letter-spacing:-.015em;line-height:1.12}
.hero h1 em{color:var(--teal)}
h2{font-size:var(--t-h2);line-height:1.2;color:var(--ink)}
h3,.icard h3,.fit-col h3{font-size:var(--t-h3);line-height:1.3;color:var(--ink);font-weight:700}
.hero-sub,.head p,.lead{font-size:var(--t-lead);color:var(--ink-soft);line-height:1.6}
.dark h2,.dark h3{color:#fff}
.dark .head p,.dark p{color:#CFE0DC}

/* התווית: אותו גודל ואותו צבע בכל האתר */
.script{font-size:var(--t-label);color:var(--teal);letter-spacing:.08em}
.dark .script{color:var(--amber)}

/* מספרים ופעולה */
.icard .num{font-size:var(--t-label);color:var(--terra)}
.steps-lite li::before{font-size:var(--t-label)}

/* גוף ומשני */
.icard p,.fit-col li,.journey p,.quote p,.spec dd{font-size:var(--t-body)}
.gal-note,.macro figcaption,.form-note,.btn-line,.j-tag,.quote cite,.pull cite,.spec dt{font-size:var(--t-small)}
.j-tag{letter-spacing:.07em}

/* אמירות גדולות: שתיים בלבד בעמוד, ושתיהן על אותה מדרגה */
.statement,.brush{font-size:var(--t-h2);font-weight:800;line-height:1.2}
.brush{color:var(--ink)}
.statement{color:var(--ink)}
.statement em{color:var(--terra)}
.pull p{font-size:var(--t-lead);font-weight:600;color:var(--ink)}


/* ⚠️ styles.css הביא איתו גדלים משלו (24, 19, 17, 16.5, 16, 15.5).
   כאן הם נצמדים לסקאלה, אחרת יש בעמוד ארבעה עשר גדלים במקום שבעה. */
details summary{font-size:var(--t-h3)}
details p,.gains li,.field input,.field select,.box-item p,.quote p{font-size:var(--t-body)}
.field label,.form-note,footer,footer p,.err{font-size:var(--t-small)}
.form-ok h3{font-size:var(--t-h3)}

/* על רקע כהה: גוון בהיר אחד, לא שלושה */
.dark .head p,.dark p,.gal-note,.dark .macro figcaption,footer{color:#C4D6D2}

/* אחרוני הגדלים החורגים, כולם ירשו סלקטור ספציפי יותר */
.head h2{font-size:var(--t-h2)}
.btn{font-size:var(--t-lead)}
.steps-lite li{font-size:var(--t-body)}
.band figcaption{font-size:var(--t-body)}


/* ═══════════ ההירו במובייל ═══════════
   ⚠️ טקסט מיושר לימין עם שורות באורכים עולים יוצר מדרגות שנראות כמו פירמידה.
   במסך צר ההירו מתמרכז, ואז הרג נקי משני הצדדים. */
@media(max-width:760px){
  .hero{padding-block:34px 58px}
  .hero .wrap{padding-inline:26px}
  .hero-grid{gap:32px;text-align:center}
  .hero .script{margin-inline:auto;margin-block-end:18px}
  .hero h1{margin-block-end:18px;line-height:1.18}
  .hero-sub{max-width:30ch;margin-inline:auto;margin-block-end:28px}
  .hero-cta{justify-content:center}
  .btn-line{max-width:30ch;margin-inline:auto;margin-block-start:16px;line-height:1.5}
  /* הקשת גלשה מעבר לריפוד ונחתכה. במסך צר היא יורדת */
  .arch::before{display:none}
  .frame3d{border-radius:18px}
  .hero-shot{margin-block-start:6px}
}

/* אוויר בין הסקציות במובייל. 88 היה צפוף לעמוד ארוך */
@media(max-width:760px){
  section{padding-block:64px}
  .offer-sec{padding-block:22px}
  .head{margin-block-end:34px}
}

/* ── כרטיס המחזור. היה טבלה של שש משבצות שוות, ועכשיו יש בו מוקד אחד ── */
.ticket{
  background:#fff;border:1px solid var(--line);border-block-start:3px solid var(--orange);
  border-radius:22px;padding:28px 26px;display:grid;gap:24px;
  box-shadow:0 20px 46px -28px rgba(47,89,85,.5);
}
@media(min-width:860px){.ticket{grid-template-columns:1fr auto;align-items:center;gap:40px;padding:32px 34px}}
.ticket-date{font-size:var(--t-h2);font-weight:800;line-height:1.1;color:var(--ink);margin:0 0 10px}
.ticket-meta{font-size:var(--t-body);color:var(--ink-soft);margin:0;line-height:1.7;max-width:52ch}
.ticket-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media(max-width:859px){.ticket{text-align:center}.ticket .script{margin-inline:auto}
  .ticket-meta{margin-inline:auto}.ticket-side{align-items:stretch}.ticket-side .btn{text-align:center}}
.seats{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:#FBEBD8;color:var(--terra);font-weight:700;font-size:var(--t-small);
  padding:9px 18px;border-radius:999px;white-space:nowrap;
}
@media(max-width:859px){.seats{align-self:center}}
.seats::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--terra);flex:none}


/* ═══════════════════════════════════════════════════════════
   מרווחים. סקאלה אחת, בדיוק כמו הטיפוגרפיה.
   ⚠️ נמדד לפני: h2 נגעה בפסקה (0px), בלוק כותרת 16px מהתוכן,
   וכותרת כרטיס 8px. זה מה שנקרא צפוף.
   ═══════════════════════════════════════════════════════════ */
:root{
  --s-pair:10px;   /* תווית לכותרת. הן יחידה אחת */
  --s-tight:12px;  /* כותרת כרטיס לטקסט שלה */
  --s-text:20px;   /* h2 לפסקה */
  --s-block:40px;  /* בלוק כותרת לתוכן הסקציה */
  --s-sec:64px;    /* ריפוד סקציה במובייל */
}
@media(min-width:900px){:root{--s-block:52px;--s-sec:96px}}

/* התווית והכותרת נקראות כזוג */
.script{margin-block-end:var(--s-pair)}

/* כותרת לפסקה שמיד אחריה. זה היה אפס */
h2 + p,h2 + ul,h2 + ol,h2 + blockquote,h2 + div{margin-block-start:var(--s-text)}
.head h2 + p{margin-block-start:14px}

/* בלוק הכותרת לתוכן */
section .head{margin-block-end:var(--s-block)}
section .head.center{margin-block-end:var(--s-block)}

/* בתוך כרטיס */
.icard h3,.fit-col h3{margin-block-end:var(--s-tight)}
.journey .j-tag{margin-block-end:var(--s-pair)}

/* ריפוד סקציה */
section{padding-block:var(--s-sec)}
.offer-sec{padding-block:0}

/* רווח בין פסקאות בגוף. 1.1em היה צפוף בטקסט ארוך */
.wrap p + p{margin-block-start:0}
p{margin-block-end:1.25em}

/* ⚠️ שלושת החריגים שנמדדו אחרי הסבב הראשון:
   .icard הוא flex עם gap, ולכן margin על h3 מצטבר על ה-gap ונותן 20 במקום 12.
   ל-.head שנגמרת ב-h2 המרווח לא קורס ויוצא 22. וההירו קיבל 18 מכלל המובייל. */
.icard{gap:12px}
.icard h3,.icard p,.icard .num{margin:0}
section .head > :last-child{margin-block-end:0}
@media(max-width:760px){.hero .script{margin-block-end:var(--s-pair)}}


/* ═══════════ עומק: קרקע שלישית, הרמה, וחפיפה ═══════════
   שני רקעים בלבד (לבן וכרם) עשו עמוד שטוח. נוספה קרקע חול חמימה,
   הרמה אמיתית בשתי שכבות צל, וכרטיס שחופף את ההירו. */
:root{--sand:#F3E9D8;--sand-line:#E2D2B6}
.bg-sand{background:var(--sand)}
.bg-sand .fit-col,.bg-sand .icard,.bg-sand .form-card{border-color:var(--sand-line)}

/* הרמה בשתי שכבות: צל סביבתי רחב פלוס צל קרוב */
.icard,.fit-col,.ticket,.form-card,.note-card{
  box-shadow:0 1px 2px rgba(47,89,85,.06), 0 18px 40px -22px rgba(47,89,85,.4);
}

/* כרטיס המחזור עולה על ההירו. זה מה שיוצר שכבה */
.ticket{margin-block-start:-46px;position:relative;z-index:2}
@media(min-width:900px){.ticket{margin-block-start:-58px}}
.ticket-sec{padding-block:0 var(--s-sec)}

/* צילומי מסך של הודעות. עמודות, בלי סיבוב, עם מסגרת לבנה */
.notes{columns:1;column-gap:16px}
@media(min-width:560px){.notes{columns:2}}
@media(min-width:1000px){.notes{columns:3;column-gap:20px}}
.note-card{break-inside:avoid;margin:0 0 16px;background:#fff;border:1px solid var(--sand-line);
  border-radius:16px;padding:10px;overflow:hidden}
@media(min-width:1000px){.note-card{margin-block-end:20px}}
.note-card img{inline-size:100%;display:block;border-radius:10px}
.notes-note{text-align:center;margin-block-start:26px;color:var(--ink-soft)}


/* ⚠️ .quotes בנוי לשש המלצות בשלוש עמודות. עם שתיים הן נראות אבודות
   ומשאירות עמודה ריקה. duo נותן שתי עמודות רחבות וטקסט גדול יותר. */
.quotes.duo{columns:auto;display:grid;gap:20px;max-width:960px;margin-inline:auto}
@media(min-width:820px){.quotes.duo{grid-template-columns:1fr 1fr;gap:26px}}
.quotes.duo .quote{margin:0;padding:32px 30px 28px}
.quotes.duo .quote p{font-size:var(--t-lead);line-height:1.7}

/* ⚠️ צילום מסך של טלפון בשלוש עמודות יוצא ברוחב 330 והטקסט בתוכו לא נקרא.
   שתי עמודות ומכל צר נותנים כפול, וזה כבר קריא. */
.notes{columns:1;max-width:900px;margin-inline:auto}
@media(min-width:700px){.notes{columns:2;column-gap:22px}}
@media(min-width:1000px){.notes{columns:2;column-gap:26px}}


/* ═══════════════════════════════════════════════════════════
   הפחתה. העמוד נעשה רועש כי אחרי כל הערה הוספתי משהו.
   קרקע אחת, מבטא אחד, ופחות סימנים.
   ═══════════════════════════════════════════════════════════ */

/* התווית בלי הקו הכתום. היו אחד עשר סימנים כתומים בעמוד */
.script::before{display:none}
.script{color:var(--teal-soft,#4A756F);font-weight:700}

/* תגית המקומות, שקטה */
.seats{background:transparent;border:1.5px solid var(--line);color:var(--terra)}
.seats::before{background:var(--terra)}

/* אמירה גדולה בלי קו מכחול */
.lede-big{font-size:var(--t-h2);font-weight:800;line-height:1.2;color:var(--ink)}

/* קרקע אחת, ולכן הרווח בין הסקציות הוא מה שמפריד. הוא צריך להיות נדיב */
:root{--s-sec:76px}
@media(min-width:900px){:root{--s-sec:112px}}

/* כרטיסים לבנים על כרם. זו כל ההפרדה שצריך */
.icard,.fit-col,.form-card,.ticket{background:#fff}

/* הצל מרוכך. שתי שכבות היו כבדות על עמוד שקט */
.icard,.fit-col,.ticket,.form-card{box-shadow:0 12px 30px -20px rgba(47,89,85,.42)}


/* ═══════════════════════════════════════════════════════════
   מבנה בלי צבע. עמוד שכולו כרם נעשה שטוח, והחלפת רקעים עשתה רועש.
   ההפרדה נבנית משלושה דברים: קו שיער בין סקציות, שינוי רוחב הטקסט,
   ושלוש נקודות ציון שמפסיקות את הכרם.
   ═══════════════════════════════════════════════════════════ */


/* 2. שינוי מידה: סקציות שיחה צרות, סקציות רשת רחבות.
      הרוחב המשתנה מורגש גם כשהצבע לא משתנה */
.measure-talk .wrap{max-width:760px}

/* 3. שלוש נקודות ציון: כרטיס המחזור, רצועת התמונה, והגלריה הכהה */
.band{box-shadow:0 26px 60px -30px rgba(31,61,58,.55)}

/* כרטיסים על כרם צריכים קו עדין, אחרת הם מרחפים */
.icard,.fit-col,.form-card{border:1px solid var(--line)}

/* ═══════════ סקציות כהות. דפוס הבית מאברי, עידן ושרון ═══════════
   שלוש נקודות עוגן כהות לאורך העמוד. הן המבנה, ולכן אין צורך
   בהחלפת רקעים בהירים ולא בדוגמאות רקע. */
.dark{background:var(--teal-deep)}
.dark .icard,.dark .fit-col,.dark .form-card{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none;
}
.dark .fit-col h3,.dark .icard h3{color:#fff}
.dark .fit-col li,.dark .icard p{color:#CFE0DC}
.dark .fit-col.yes li::before{background:rgba(183,214,164,.18);color:#B7D6A4}
.dark .fit-col.no li::before{background:rgba(255,255,255,.08);color:#A79C89}
.dark .field label{color:#CFE0DC}
.dark .field input,.dark .field select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.dark .field input:focus,.dark .field select:focus{border-color:var(--amber)}
.dark .form-note{color:#A8C6C1}
.dark .steps-lite li{color:#EAF2F0}
.dark .steps-lite li::before{background:var(--amber);color:var(--teal-deep)}
.dark .form-ok h3{color:#fff}

/* הגלריה נשארת על הירוק הבינוני, כדי ששלוש הכהות לא יהיו זהות */
#works.dark{background:var(--teal)}

/* מרווח סקציה לפי הכלל בסקיל: 80 במובייל, 120 בדסקטופ */
:root{--s-sec:80px}
@media(min-width:900px){:root{--s-sec:120px}}

/* רשימת הרווחים על רקע כהה */
.dark .gains li{color:#CFE0DC}
.dark .gains li::before{background:var(--amber)}
.dark .photo::before{border-color:var(--amber);opacity:.5}
/* ארבע נקודות כהות פרוסות לאורך, כדי שלא תהיה ריצה ארוכה של כרם */