/* =========================================================
   אור איזנשטדט — אימון בשיטת סאטיה
   שפת עיצוב: "עריכתי-חם" — מבנה של יוקרה/ארט-דקו (ריווח, שקט,
   כותרת סריף קלה, קו דק אחד) בלי חומרי היוקרה (זהב/שחור/פורמליות).
   טקסט: אך ורק מה שאור כתב, בלי תוספות שיווקיות.
   ========================================================= */

/* גופנים מאוחסנים מקומית (OFL) — בלי תלות ב-Google Fonts:
   טעינה מהירה יותר, עובד גם אופליין, ובלי שליחת IP של הגולשים לשרת חיצוני. */
/* מערכת טיפוגרפית בשלוש שכבות:
   כותרות ראשיות — Secular One: סאנס ישראלי עכשווי עם נוכחות ואופי.
     משקל אחד בלבד (400), ולכן הוא לא "מתבהר" בגדלים גדולים — זה בדיוק
     מה שנותן לו את האמירה. בגלל שהוא כבד יחסית, הגדלים כאן קטנים
     מהרגיל והריווח בין השורות פתוח יותר, אחרת הכותרות משתלטות.
   ממשק — Assistant: לחצנים, כותרות משנה ותוויות. הומניסטי ונקי,
     נושם לצד הנוכחות של Secular One בלי להתחרות בה.
   גוף הטקסט — Rubik: קריא לאורך פסקאות ארוכות.
   הכל מוטבע מקומית ומצומצם לעברית+לטינית (13-23KB למשקל) — בלי
   תלות ב-Google Fonts, בלי שליחת IP של הגולשים לשרת חיצוני. */
@font-face{font-family:'Secular One';src:url('fonts/SecularOne-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Assistant';src:url('fonts/Assistant-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Assistant';src:url('fonts/Assistant-600.woff2')format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-300.woff2')format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-400.woff2')format('woff2');font-weight:400;font-display:swap}

:root{
  --cream:      #faf7f2;   /* רקע חם */
  --surface:    #f3ede2;   /* משטח שני, מעט כהה יותר */
  --white:      #ffffff;
  --ink:        #2b2116;   /* דיו חום-כהה, לא שחור */
  /* ניגודיות: הצבעים כאן נבדקו מול תקן 5568 / WCAG 2.1 AA.
     הגוון המקורי (#8a7560) יצא 4.10:1 מול הקרם — נכשל בסף 4.5 לטקסט רגיל.
     הכהיה קלה מחזירה 5.11:1 בלי לשנות את אופי הפלטה. */
  --muted:      #7a6650;   /* 5.11:1 מול הקרם */
  --line:       #e4d9c9;   /* גבול דק וחם */
  /* טרקוטה: לא מוגדר יותר כאקצנט הכללי של האתר (לבקשת שני — לא צבע רך
     מספיק, אור ביקש קו פסטלי). נשאר קיים כאן רק כי מדליית האייקון של
     וואטסאפ בעמוד "יצירת קשר" בנויה עליו במפורש — זהות צבע נקודתית
     לאותו אייקון בלבד, לא קשורה יותר לשאר האתר. */
  --terracotta: #c4613a;
  --terracotta-text: #a14f2e;
  --terracotta-deep: #a14f2e;
  /* האקצנט הכללי החדש של האתר. סאלביה (ירוק) הוחלפה בטורקיז-כחול
     שנדגם ישירות מהקיר הצבעוני מאחורי אור בתמונת הפרופיל — אותה
     שיטה נשארת בדיוק: הצבע לא צובע טקסט (זה מה שגרם לגרסת הירוק
     להיראות "לא פסטלית" בכלל — הטקסט/כפתורים הכהים בלטו יותר
     מהרקע הבהיר), הוא מופיע רק כקו (.divider, מסגרת התמונה בהירו),
     כחיווי פוקוס, וכמילוי בהיר-רך תחת המילה המודגשת בכותרת הראשית.
     כל טקסט אחר נשאר בדיו/מיוטד הרגילים של האתר. */
  /* עדכון: הדגימה הידנית הראשונה (#568f85) עדיין נטתה ירוקה מדי (G גבוה מ-B).
     נדגם מחדש ישירות מפיקסלים בבלוק הטורקיז הנקי בקיר (מאחורי הכתף הימנית
     של אור בתמונה) — B=G בערך, בלי נטייה לירוק. */
  --sage:        #2f8c8c;   /* לקווים, למסגרות, לחיווי פוקוס — נדגם מהקיר בתמונת הפרופיל, 3.7:1 מול הקרם */
  --sage-pastel: #d7eeec;   /* פסטל בהיר-רך, רק כמילוי (רקע להדגשה בכותרת) — לא לטקסט */
  --sage-deep:   #1f5c60;   /* גוון כהה מאותה משפחה — למדרגות תלת-ממד (box-shadow "step") בלבד */
  /* לחצני "יצירת קשר" (נאב + לחצן ראשי): רקע זכוכית שקוף-לבן
     (glassmorphism, עם backdrop-filter:blur) במקום מילוי כתום מלא —
     עדיין עם אותה בליטה תלת-ממדית (מנגנון ה-lift/box-shadow למטה
     נשאר זהה), רק שה"מדרגה" והזוהר מתחתיו הפכו כהים-ניטרליים
     (מבוססי דיו) במקום כתום. טקסט דיו כהה על הזכוכית הבהירה שומר
     על ניגודיות גבוהה וקריאה נוחה. */
  --cta-bg:         rgba(255,255,255,.5);
  --cta-base:       rgba(43,33,22,.18);
  --ink-on-cta:     var(--ink);
  --display: 'Secular One', 'Assistant', sans-serif;  /* כותרות ראשיות */
  --ui:      'Assistant', sans-serif;                 /* לחצנים, כותרות משנה, תוויות */
  --sans:  'Rubik', sans-serif;                       /* גוף הטקסט */
  --ease:  cubic-bezier(.22,.72,.16,1);
  --container: 1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ============ נגישות — תקן ישראלי 5568 / WCAG 2.1 AA ============ */

/* "דלג לתוכן": האלמנט הראשון שמקבל פוקוס בעמוד, מוסתר עד שגולשים
   אליו במקלדת. מאפשר למשתמשי מקלדת וקוראי מסך לדלג על התפריט. */
.skip-link{
  position:absolute; right:16px; top:-100px; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:12px 22px; border-radius:0 0 10px 10px;
  font:600 14px var(--ui); text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0}

/* חיווי פוקוס אחיד וברור לכל אלמנט אינטראקטיבי.
   :focus-visible ולא :focus — כדי שלא יוצג בלחיצת עכבר, רק בניווט מקלדת. */
:focus-visible{
  outline:3px solid var(--sage);
  outline-offset:3px;
  border-radius:4px;
}
/* בתוך אלמנטים כהים החיווי צריך להיות בהיר כדי להיראות */
.btn:focus-visible, .nav-cta:focus-visible{
  outline-color:var(--ink); outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip-link{transition:none}
}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  direction:rtl;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--container); margin:0 auto; padding:0 32px}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{font-family:var(--display); font-size:20px; font-weight:400; letter-spacing:.02em; text-decoration:none}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0}
.nav-links a{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--ink)}
}
.nav-cta{
  --lift:3px;
  border:1px solid rgba(255,255,255,.6); border-radius:10px; color:var(--ink-on-cta);
  background:var(--cta-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:10px 22px; font:600 12.5px var(--ui); letter-spacing:.06em;
  text-decoration:none;
  box-shadow:
    0 var(--lift) 0 0 var(--cta-base),
    0 calc(var(--lift) + 6px) 14px -6px rgba(43,33,22,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{background:rgba(255,255,255,.68)}
}
.nav-cta:active{
  transform:translateY(var(--lift));
  box-shadow:0 0 0 0 var(--cta-base), 0 2px 5px -2px rgba(43,33,22,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-reduced-motion:reduce){ .nav-cta:active{transform:none} }
.hamburger{display:none}

/* ---------- Section rhythm ---------- */
section{padding:120px 0}
section.tight{padding:80px 0}
.kicker{
  font:600 12px var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); line-height:1.3; margin-bottom:22px;
}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.24; margin:0;
  text-wrap:balance}   /* מונע שורה אחרונה יתומה עם מילה בודדת */
/* Secular One כבד יחסית ובעל נוכחות, ולכן הגדלים כאן קטנים מהקודם
   והריווח פתוח יותר — אחרת הכותרת "צועקת" מעל טקסט הגוף */
h2{font-size:clamp(26px,2.9vw,36px); letter-spacing:-.005em; line-height:1.3}
p{margin:0 0 20px}
.lede{font-size:19px; color:var(--ink); max-width:64ch}
.body-col{max-width:66ch}
.body-col p{color:#41352a}

/* thin single divider — the one "precious line" */
.divider{
  width:56px; height:1px; background:var(--sage); margin:0 auto 28px;
}
.divider.start{margin:0 0 28px}

/* ---------- Hero ---------- */
.hero{padding:118px 0 110px}
.hero .wrap{display:grid; grid-template-columns:1.22fr .78fr; gap:56px; align-items:flex-start}
/* גובה הטקסט מכוון בנפרד מהתמונה (לא align-items:center על כל השורה)
   כדי שהוא ישב בקו עם הראש של אור בתמונה, קצת מעל קו האמצע — לא
   באמצע גובה הכרטיס כולו, שהיה משאיר רווח ריק כי הטקסט קצר מהתמונה. */
.hero-copy{margin-top:104px}
@media (max-width:900px){ .hero-copy{margin-top:0} }
/* שבירות השורות כאן ידניות (<br>) לפי הפיסוק של המשפט, ולכן
   text-wrap:balance מכובה — אחרת הדפדפן מנסה לאזן מחדש ונלחם בהן */
.hero h1{
  font-size:clamp(22px,2.35vw,30px); letter-spacing:-.005em; line-height:1.62;
  text-wrap:normal;
}
/* ההדגשה בכותרת עברה מטקסט צבוע למילוי פסטלי מאחורי טקסט דיו רגיל —
   אותו עיקרון שהוחלט עליו לכל האתר: הצבע נשאר תמיד בהיר-רך ומופיע
   רק כרקע/קו, לא כצבע של אותיות. box-decoration-break כדי שהמילוי
   יישאר יפה גם אם המילים נשברות לשתי שורות במסכים צרים. */
.hero h1 .accent{
  font-style:normal; color:var(--ink);
  background:var(--sage-pastel); padding:0 6px; border-radius:5px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero-sub{margin-top:26px; font-size:17px; color:var(--muted); max-width:52ch}
.hero-photo{position:relative}
.hero-photo img{
  width:100%; height:560px; object-fit:cover; object-position:top center;
  border-radius:2px 40px 2px 40px;
}
.hero-photo::after{
  content:''; position:absolute; inset:18px -18px -18px 18px; z-index:-1;
  border:1px solid var(--sage); border-radius:2px 40px 2px 40px;
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  /* הטקסט קודם, לא התמונה: כשהתמונה נפתחת ראשונה על כל רוחב המסך
     היא נראית כמו כרטיס פרופיל של אפליקציית היכרויות ("טינדר") —
     בלי שום הקשר לפני שרואים אותה. הסדר הטבעי של ה-DOM (טקסט קודם)
     נשמר במובייל, והתמונה מוצגת קטנה ומוגדרת יותר אחריו. */
  .hero-photo img{height:300px; border-radius:2px 28px 2px 28px}
  .hero-photo::after{inset:14px -14px -14px 14px; border-radius:2px 28px 2px 28px}
}
@media (max-width:480px){
  .hero{padding:40px 0 72px}
  .hero-photo img{height:260px}
}

/* ---------- Reveal (scroll-in) ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
}

/* self-drawing line between sections */
.brushline{width:100%; height:2px; overflow:visible; display:block; margin:0 0 8px}
.brushline path{
  fill:none; stroke:var(--line); stroke-width:1;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.brushline.in path{stroke-dashoffset:0}

/* ---------- Generic content section ---------- */
.section-head{max-width:56ch; margin-bottom:48px}
.two-col{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start}
@media (max-width:860px){ .two-col{grid-template-columns:1fr; gap:28px} }

/* הערה: אפקט "ערימת כרטיסיות" (position:sticky שנערם) הוסר לבקשת שני —
   לא התאים לשפה החזותית של שאר האתר. הסקשנים בעמוד "למי מתאים" חזרו
   לזרימה הרגילה של section{padding:120px 0} כמו בכל עמוד אחר. */

/* ============ הפניקס — תמונת הקעקוע השטוחה ============
   התמונה המקורית של הקעקוע (לא וקטור מצויר-יד) — אותה תמונה בדיוק
   שאליה הביצוע האנימטיבי חוזר בסיום, כך שאין קפיצת סגנון בין
   "לפני" ל"אחרי". התנועה מונעת שעון פנימי (performance.now), לא גלילה
   ולא וידאו — כל גולש רואה את אותו קצב בלי קשר למהירות הגלילה שלו. */
#about{position:relative}
/* הכותרת והציפור חולקות אותו קו-מרכז אנכי, ולא רק את אותה עמודה */
#about .section-head{text-align:center}
.phoenix-stage{
  margin-top:26px; pointer-events:none; position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:430px; overflow:visible; isolation:isolate;
}
.phoenix-3d{
  width:min(100%, 400px); height:100%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:transform;
}
.phoenix-stage.drawn .phoenix-3d{opacity:1; transform:none}
/* סופית, לפי בדיקה עם שני: הציפור צריכה להסתכל לכיוון הטקסט.
   בפריסת ה-two-col ב-RTL, section-head (עם הציפור) יושב בעמודה
   הימנית ו-body-col (הטקסט) בעמודה השמאלית — כלומר הציפור צריכה
   להביט שמאלה. בפיקסלים המקור של הקובץ כבר פונה שמאלה בלי שום
   טרנספורמציה, אז לא צריך פליפ כאן. */
.phoenix-flat-img{
  width:100%; height:100%; max-height:430px; display:block;
  object-fit:contain; object-position:center;
}

#about .wrap{position:relative; z-index:1}

@media (max-width:860px){
  .phoenix-stage{min-height:320px}
  .phoenix-3d{width:min(76%,280px)}
  .phoenix-flat-img{max-height:300px}
  /* בנייד: הציפור עוברת לסוף הסקשן, אחרי כל טקסט "קצת עליי" —
     לא נשארת צמודה לכותרת כמו בדסקטופ. section-head עצמו הופך
     ל-display:contents כדי שהילדים שלו (h2 והציפור) ייכנסו כפריטי
     גריד עצמאיים לצד body-col, וסדר התצוגה נקבע לפי order. */
  #about .section-head{display:contents}
  #about .section-head h2{order:1}
  #about .body-col{order:2}
  #about .phoenix-stage{order:3; margin-top:36px}
}
/* בעבר הפניקס הוסתרה לגמרי מתחת ל-480px (חיסכון בנתונים/משקל) — אבל
   זה בפועל הסתיר אותה מכל טלפון אמיתי (כל ה-iPhone/Android נמוכים
   מ-480px רוחב CSS), אז אף אחד בנייד לא ראה ציפור בכלל. עכשיו שיש
   גרסה קלה לנייד (זוהר בלבד, בלי JS ובלי נכס נוסף) אין יותר סיבה
   להסתיר — היא מוצגת בכל רוחב מסך. */

/* גרסה קלה לנייד: בלי טיסה (משקל דאטה + מסך צר), אבל לא סטטית לגמרי —
   פעימת זוהר עדינה סביב התמונה הקבועה נותנת תחושת "יש כאן חיים"
   במחיר כמעט אפסי (opacity בלבד, בלי JS ובלי נכס וידאו נוסף) */
@media (max-width:860px){
  .phoenix-stage.drawn::before{
    content:''; position:absolute; inset:-14%; z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(47,140,140,.28) 0%, rgba(47,140,140,0) 70%);
    animation:phoenix-glow-pulse 3.6s ease-in-out infinite;
  }
}
@keyframes phoenix-glow-pulse{
  0%, 100%{opacity:.35}
  50%{opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .phoenix-stage.drawn::before{animation:none; opacity:.55}
}

/* נגישות: בלי טיסה — רק הופעה עדינה של התמונה עצמה */
@media (prefers-reduced-motion:reduce){
  .phoenix-3d{transition:opacity .3s ease; transform:none !important}
}

/* ============ הפניקס המונפש — ההופעה החד-פעמית ============
   הקעקוע קם לחיים פעם אחת, בכניסה הראשונה לסקשן "קצת עליי": התמונה
   השטוחה נמוגה (בטשטוש), הווידאו המאושר (job 485b882f) מתנגן בדיוק
   מעל אותה נקודה — לא כשכבה שטסה על פני כל המסך, אלא "מעוגן" לקעקוע
   ומתנפח החוצה (scale) בשיא הטיסה — ואז נמוג ותמונת הקיר חוזרת לתפוס
   את מקומה. הצבע והמסכה ארוזים בחצי העליון/תחתון של קובץ הווידאו
   ומורכבים מחדש ל-canvas עם שקיפות אמיתית דרך שיידר WebGL קטן
   (script.js) — כך שגם דפדפנים בלי תמיכה באלפא בפורמט וידאו כלשהו
   (ספארי כולל) מקבלים רקע שקוף אמיתי, לא מלבן לבן. */
.phoenix-flight{
  position:absolute; inset:0; z-index:2;
  display:none; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0; filter:blur(0);
  transition:opacity .7s var(--ease), filter .7s var(--ease);
}
.phoenix-flight.active{display:flex}
.phoenix-flight.visible{opacity:1}
/* יוצא לדימום מטושטש בחזרה, לא נעלם בחדות — הטשטוש מגשר בין שתי
   הצורות (הווידאו והווקטור השטוח) כך שהעין תופסת מעבר אחד רך,
   לא שני אובייקטים שונים מתחלפים */
.phoenix-flight.active:not(.visible){filter:blur(10px)}
/* מיכל המראה: הופך את כיוון הטיסה שמאלה (תואם RTL) — הציור סימטרי
   ובלי טקסט, כך שההיפוך בלתי מורגש כ"היפוך" */
.phoenix-video-mirror{
  width:min(100%, 560px); aspect-ratio:16 / 9;
  display:flex; align-items:center; justify-content:center;
  overflow:visible; transform:scaleX(-1);
}
.phoenix-video-canvas{
  width:100%; height:100%; display:block;
  object-fit:contain; object-position:center;
  will-change:transform;
}

/* בזמן ההופעה התמונה נמוגה בעדינות ואז חוזרת — באותו טשטוש-גישור,
   ובאותה נקודה/גודל בדיוק שבהם הופיע התקליט לפני שהתחיל לטוס.
   (ה-transition המלא כולל גם transform, בשביל הופעת ה"ציור-פנימה"
   הראשונית למעלה — נשמר כאן שלם כדי שהצהרה מאוחרת יותר לא תבטל אותו) */
.phoenix-3d{transition:opacity .7s var(--ease), filter .7s var(--ease), transform .8s var(--ease); filter:blur(0)}
.phoenix-stage.performing .phoenix-3d{opacity:0; filter:blur(10px)}

/* מובייל, גלישה מצומצמת בתנועה, או דפדפן בלי WebGL — רק הווקטור */
@media (max-width:860px){ .phoenix-flight{display:none !important} }
@media (prefers-reduced-motion:reduce){
  .phoenix-flight{display:none !important}
  .phoenix-stage.performing .phoenix-3d{opacity:1}
}

/* quiet list (no boxed cards — a line + a little breathing room) */
.quiet-list{list-style:none; margin:0; padding:0}
.quiet-list li{
  padding:22px 0; border-top:1px solid var(--line);
  font-size:17px; color:#41352a; display:flex; gap:18px; align-items:baseline;
}
.quiet-list li:last-child{border-bottom:1px solid var(--line)}
.quiet-list .n{font-family:var(--ui); color:var(--muted); font-size:14px; flex-shrink:0; width:22px}

/* values — small pills, sage, used sparingly */
.pillrow{display:flex; flex-wrap:wrap; gap:10px 12px}
.pill{
  border:1px solid var(--line); color:var(--muted); font-size:13px;
  padding:8px 16px; border-radius:100px; background:var(--white);
}

/* ---------- רשת הערכים — 2 עמודות עם קווי חיבור (עמוד "איך אני עובד") ----------
   הגרסה הקודמת (מעגל/אורביטה) הייתה גדולה מדי ותפסה את כל העמוד.
   כאן: 2 עמודות קומפקטיות של כפתורי-ערך, עם "מוט" מקווקו זורם בין
   כל זוג — בדיוק "רשת קשרים בין 2 העמודות" כמו שביקשת. מתחת ל-860px
   (אותה נקודת-שבירה שבה .two-col עצמו נשבר לעמודה אחת) זה מוחלף
   ברשימת הבועות הרגילה — לא שווה את זה במסך צר ובלי ריחוף עכבר. */
.pillrow.values-fallback{display:none}
.values-network{display:none}
@media (min-width:861px){
  .values-network{
    display:flex; flex-direction:column; gap:14px;
    width:100%; max-width:560px; margin:0 auto;
  }
}
.vn-row{display:flex; align-items:center}
.vn-rung{
  flex:1 1 auto; height:2px; min-width:24px; margin:0 12px;
  background:repeating-linear-gradient(90deg, var(--sage) 0 7px, transparent 7px 15px);
  background-size:44px 100%; opacity:.55;
  animation:rung-flow 2.2s linear infinite;
}
@keyframes rung-flow{to{background-position:-44px 0}}
@media (prefers-reduced-motion:reduce){ .vn-rung{animation:none} }
/* כפתור-ערך תלת-ממדי: אותו מנגנון lift/box-shadow כמו .btn/.nav-cta
   באתר (מדרגה מוצקה + צל אמביינטי + הבהרה עליונה), במשפחת הטורקיז
   במקום דיו/כתום — כך שהערכים קוראים כחלק מאותה שפת חומר. */
.vn-node{
  --lift:3px; flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--white); color:var(--ink);
  border:1px solid var(--sage-pastel); border-radius:100px;
  font:600 13px var(--ui); letter-spacing:.02em; padding:10px 10px;
  box-shadow:
    0 var(--lift) 0 0 var(--sage-deep),
    0 calc(var(--lift) + 8px) 16px -7px rgba(47,140,140,.4),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .vn-node:hover{transform:translateY(-3px)}
}
.vn-node.vn-capstone{flex:0 0 auto; width:160px; align-self:center; margin-top:2px}
@media (max-width:860px){
  .pillrow.values-fallback{display:flex; justify-content:center; max-width:640px; margin:0 auto}
}

/* full-bleed image break — the clinic photo, no text over it.
   מסיכת גרדיאנט (mask-image) על התמונה עצמה מטשטשת את הקצה העליון
   והתחתון שלה לתוך רקע הקרם של האתר — כך שהמעבר מהסקשן שמעליה/מתחתיה
   הוא דעיכה רכה ולא קו חיתוך קשה. */
/* התמונה "שייכת" לסקשן שאחריה ("למי מתאים") ולא עומדת כמפריד עצמאי
   בין שני הסקשנים — לכן פייד רק למעלה (חיבור רך מהסקשן הקודם אל
   התמונה), ולמטה היא נכנסת חדה/שטוחה, בלי padding, ישר לתוך הסקשן
   הבא. */
.imgbreak{padding:56px 0 0}
.imgbreak figure{margin:0}
.imgbreak img{
  width:100%; height:min(62vw,540px); object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 100%);
}
.imgbreak figcaption{
  text-align:center; padding:14px 0 0; font-size:13px; color:var(--muted);
}

/* ---------- CTA strip — mini "יצירת קשר" closer at the bottom of subpages ----------
   פשוט בכוונה: בלי כתמי רקע ובלי קו מפריד, רק כפתור באותו סגנון
   כמו זה שבבר הניווט — שלא ייראה כמו עוד "אלמנט עיצובי" נפרד. */
.cta-strip{padding:96px 0}

/* ---------- Contact ---------- */
/* הוסרו שני כתמי הרקע המטושטשים (טרקוטה + סאלביה) שהיו מונחים מאחורי
   הכרטיסים — לבקשת שני, נראו "מזעזעים" בנייד. הסקשן יושב עכשיו על
   רקע אחיד ושקט, כמו שאר הדפים. */
.contact{background:var(--surface); position:relative}
.contact .wrap{max-width:760px; text-align:center; position:relative; z-index:1}
.contact-pending{
  border:1px dashed var(--line); padding:28px 24px; color:var(--muted); font-size:14.5px;
  background:var(--white);
}

/* contact card — whatsapp, with the still-pending items as a quiet note underneath */
/* קופסה בתוך קופסה מחלישה את ההיררכיה: השורות עצמן כבר לבנות
   ומובלטות, ולכן המסגרת החיצונית רק הוסיפה רעש. היא הוסרה —
   השורות יושבות ישירות על רקע הסקשן ומקבלות בזכות זה יותר נוכחות. */
.contact-card{
  max-width:520px; margin:0 auto; text-align:right;
}
/* כל שורה היא פעולה, ולכן היא בנויה כשורה של פעולה ולא כטקסט מרוכז:
   אייקון בהתחלה, טקסט שתופס את המקום, וחץ בסוף שמסמן "אפשר ללחוץ".
   בלי החץ אין שום רמז ויזואלי שהכרטיס לחיץ. */
.whatsapp-link, .social-link{
  --lift:2px;
  display:flex; align-items:center; gap:16px;
  padding:20px 22px; border-radius:16px; margin-bottom:8px;
  text-decoration:none; color:var(--ink); text-align:right;
  background:linear-gradient(165deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.32) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 var(--lift) 0 0 rgba(255,255,255,.5),
    0 calc(var(--lift) + 10px) 24px -12px rgba(43,33,22,.2),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.social-link:last-of-type{margin-bottom:0}
.whatsapp-link .wa-text, .social-link .wa-text{flex:1; min-width:0}

/* החץ: נשען לכיוון הקצה, ונע מעט פנימה בריחוף — רמז שהלחיצה מובילה החוצה */
.row-go{
  display:flex; align-items:center; color:var(--muted); flex-shrink:0;
  opacity:.55; transition:transform .18s var(--ease), opacity .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .whatsapp-link:hover .row-go, .social-link:hover .row-go{
    opacity:1; transform:translateX(-4px); color:var(--ink);
  }
}
@media (prefers-reduced-motion:reduce){
  .row-go{transition:opacity .18s ease}
  .whatsapp-link:hover .row-go, .social-link:hover .row-go{transform:none}
}
/* האייקונים כ"מדליה" מובלטת: פאה עם גרדיאנט, שפה עליונה מוארת
   שמדמה אור שנופל מלמעלה, שפה תחתונה כהה שנותנת את הגובה הפיזי,
   וטבעת חיצונית דקה שמפרידה אותם מהכרטיס הלבן.
   כולם בפלטת האתר — גם האינסטגרם, שקודם השתמש בגרדיאנט המותג
   הסגול-כתום וצרם מול שאר העמוד. */
.wa-icon{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg,#d9764c 0%,var(--terracotta) 48%,#a8522c 100%);
  color:var(--white);
  box-shadow:
    0 3px 0 0 #7d3b21,                        /* הגובה */
    0 8px 16px -5px rgba(125,59,33,.45),      /* צל רך */
    inset 0 1.5px 0 rgba(255,255,255,.45),    /* ברק עליון */
    inset 0 -2px 4px rgba(93,43,23,.35),      /* עומק תחתון */
    0 0 0 1px rgba(125,59,33,.18);            /* טבעת הפרדה */
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* נצנוץ עדין בקצה העליון — מה שגורם לזה להיראות כמו חומר ולא כמו עיגול צבוע */
.wa-icon::after{
  content:''; position:absolute; inset:3px 3px 55% 3px;
  border-radius:50% 50% 40% 40%/ 60% 60% 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  pointer-events:none;
}
.wa-icon svg{position:relative; z-index:1}
/* אינסטגרם — גוון חם-כהה מתוך הפלטה, לא הגרדיאנט הסגול של המותג */
.ig-icon{
  background:linear-gradient(160deg,#a8785a 0%,#8a6247 48%,#6b4a35 100%);
  box-shadow:
    0 3px 0 0 #4f382a, 0 8px 16px -5px rgba(79,56,42,.45),
    inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(58,40,29,.35),
    0 0 0 1px rgba(79,56,42,.18);
}
/* חדר האימון — הירוק המשני של האתר, באותו טיפול */
.map-icon{
  background:linear-gradient(160deg,#5fb0af 0%,var(--sage) 48%,#1f6a6a 100%);
  box-shadow:
    0 3px 0 0 #164f4f, 0 8px 16px -5px rgba(22,79,79,.45),
    inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(15,58,58,.32),
    0 0 0 1px rgba(22,79,79,.18);
}
.wa-text{display:flex; flex-direction:column; gap:4px; text-align:right}
.wa-text strong{font-family:var(--ui); font-weight:600; font-size:16.5px}
.wa-number{font-size:13px; letter-spacing:.08em; color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .whatsapp-link:hover, .social-link:hover{
    --lift:4px;
    transform:translateY(-2px);
    background:linear-gradient(165deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 100%);
    box-shadow:
      0 var(--lift) 0 0 rgba(255,255,255,.55),
      0 calc(var(--lift) + 14px) 28px -10px rgba(47,140,140,.22),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
  .whatsapp-link:hover .wa-icon, .social-link:hover .wa-icon{transform:scale(1.06)}
}
.whatsapp-link:active, .social-link:active{
  transform:translateY(var(--lift));
  box-shadow:0 0 0 0 rgba(255,255,255,.5), 0 2px 6px -2px rgba(43,33,22,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-link, .social-link, .wa-icon{transition:box-shadow .2s ease}
  .whatsapp-link:hover, .social-link:hover, .whatsapp-link:active, .social-link:active{transform:none}
}
.contact-note{
  margin:22px 4px 0; font-size:13px; color:var(--muted); line-height:1.6; text-align:right;
}
/* השורות נכנסות בזו אחר זו, לא בבת אחת — 60ms ביניהן, מספיק כדי
   שהעין תעקוב אחרי הרצף בלי שההמתנה תורגש */
.contact-card .rv-row{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.contact-card.in .rv-row{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .contact-card .rv-row{opacity:1; transform:none; transition:none}
}

/* ---------- עמודים משפטיים (נגישות / פרטיות / תקנון) ---------- */
.legal .body-col{max-width:760px; margin:0 auto}
.legal h1{font-size:clamp(28px,3.2vw,38px); margin-bottom:6px}
.legal h2{font-size:clamp(20px,2vw,24px); margin:38px 0 12px}
.legal h3{font-size:18px; margin:26px 0 10px}
.legal p{font-size:16px; line-height:1.85}
.legal a{color:var(--ink); text-decoration-color:var(--sage); text-underline-offset:3px}
.legal-date{color:var(--muted); font-size:14px; margin-bottom:8px}
.legal-note{color:var(--muted); font-size:14px}
.legal-rule{border:0; border-top:1px solid var(--line); margin:56px 0 8px}
.legal-en{text-align:left}
.legal-en .legal-date{text-align:left}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:36px 0; text-align:center; color:var(--muted); font-size:13px}
footer a{text-decoration:underline; text-underline-offset:3px}
footer .credit{margin-top:10px; font-size:12px; letter-spacing:.04em; color:var(--muted)}
footer .credit a{color:var(--muted); text-decoration:none}
@media (hover:hover) and (pointer:fine){
  footer .credit a:hover{text-decoration:underline}
}

/* ---------- Buttons: תלת מימד רך ----------
   העומק לא נוצר מאפקט אור מזויף אלא מגובה פיזי: box-shadow ללא טשטוש
   יוצר "בסיס" כהה מתחת לפאה, ומעליו צל אמביינטי רך. בלחיצה הלחצן
   באמת יורד לגובה הבסיס (translateY) והצל מתכווץ — התחושה היא של
   כפתור שנלחץ, לא של אלמנט שמשנה צבע.
   --lift = גובה הלחצן. שינוי המשתנה הזה משנה את כל המערכת יחד. */
.btn{
  --lift:4px;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  border:0; border-radius:12px;
  padding:15px 34px;
  font:600 13px var(--ui); letter-spacing:.08em;
  text-decoration:none; cursor:pointer;
  color:var(--cream);
  background:linear-gradient(180deg, #3a2d1e 0%, var(--ink) 100%);
  box-shadow:
    0 var(--lift) 0 0 #170f07,                   /* הבסיס — הגובה עצמו */
    0 calc(var(--lift) + 8px) 18px -6px rgba(43,33,22,.42),  /* צל אמביינטי */
    inset 0 1px 0 rgba(255,255,255,.16);         /* קצה עליון מואר */
  transform:translateY(0);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), filter .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ filter:brightness(1.1) }
}
.btn:active{
  transform:translateY(var(--lift));             /* יורד עד הבסיס */
  box-shadow:
    0 0 0 0 #170f07,
    0 2px 6px -2px rgba(43,33,22,.4),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.btn.gold{
  color:var(--ink-on-cta);
  background:var(--cta-bg);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 var(--lift) 0 0 var(--cta-base),
    0 calc(var(--lift) + 8px) 18px -6px rgba(43,33,22,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.gold:active{
  box-shadow:
    0 0 0 0 var(--cta-base),
    0 2px 6px -2px rgba(43,33,22,.18),
    inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:filter .2s ease}
  .btn:active{transform:none}
}

/* ---------- Mobile nav ---------- */
/* לחצן ההמבורגר בסגנון האתר: לא עיגול ריק עם תו טקסט גנרי, אלא כפתור
   זכוכית תלת-ממדי — בדיוק אותה שפת חומר כמו .nav-cta לידו (glass +
   מנגנון lift/box-shadow), כדי שהשני כפתורי הניווט בנייד ייראו כמו
   בני-משפחה, לא כפתור "אמיתי" לצד ריבוע פלוסק שכוח. שלוש פסיקות
   שנפתחות ל-X באנימציה קלה, והכפתור עצמו נראה "לחוץ" כל עוד התפריט
   פתוח (aria-expanded), לא רק ברגע הלחיצה. */
@media (max-width:760px){
  .nav-links{display:none}
  .hamburger{
    --lift:3px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:44px; height:44px; border:1px solid rgba(255,255,255,.6); border-radius:12px; padding:0; cursor:pointer;
    background:var(--cta-bg);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:
      0 var(--lift) 0 0 var(--cta-base),
      0 calc(var(--lift) + 6px) 14px -6px rgba(43,33,22,.18),
      inset 0 1px 0 rgba(255,255,255,.7);
    transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .2s var(--ease);
  }
  .hamburger:active, .hamburger[aria-expanded="true"]{
    transform:translateY(var(--lift));
    box-shadow:0 0 0 0 var(--cta-base), 0 2px 5px -2px rgba(43,33,22,.18), inset 0 1px 0 rgba(255,255,255,.5);
  }
}
@media (max-width:760px) and (hover:hover) and (pointer:fine){
  .hamburger:hover{background:rgba(255,255,255,.68)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .hamburger:active, .hamburger[aria-expanded="true"]{transform:none}
}
.hamburger-box{position:relative; width:18px; height:13px; flex-shrink:0}
.hamburger-box span{
  position:absolute; right:0; left:0; height:2px; border-radius:2px;
  background:var(--ink);
  transition:top .24s var(--ease), transform .24s var(--ease), opacity .18s var(--ease);
}
.hamburger-box span:nth-child(1){top:0}
.hamburger-box span:nth-child(2){top:5.5px}
.hamburger-box span:nth-child(3){top:11px}
.hamburger[aria-expanded="true"] .hamburger-box span:nth-child(1){top:5.5px; transform:rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-box span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .hamburger-box span:nth-child(3){top:5.5px; transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .hamburger{transition:box-shadow .18s ease}
  .hamburger:active{transform:none}
  .hamburger-box span{transition:opacity .18s ease}
}
.mobile-menu{
  position:fixed; inset:76px 0 auto 0; background:var(--cream); border-bottom:1px solid var(--line);
  padding:8px 32px 24px; display:flex; flex-direction:column; gap:4px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:49;
}
.mobile-menu.open{opacity:1; transform:none; pointer-events:auto}
.mobile-menu a{
  padding:14px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink);
  font-size:15px; letter-spacing:.04em;
}

/* ---------- Method page: 7 elements ---------- */
.elements{display:flex; flex-wrap:wrap; gap:16px; margin-top:18px}
/* שדרוג לבקשת שני: הגרסה הקודמת הייתה שקופה-לבנה כמעט בלתי מורגשת
   במנוחה, וקיבלה תלת-ממד רק ב-hover. עכשיו יש בליטה תלת-ממדית קבועה
   (אותו מנגנון lift/step-shadow כמו שאר כפתורי האתר) וגוון טורקיז
   פסטלי עדין-עדין במקום הלבן המשעמם — לא רוויה, רק נגיעה. */
.element{
  --lift:3px; position:relative;
  padding:13px 26px; font-family:var(--ui); font-size:16px; color:var(--ink);
  border-radius:100px;
  background:rgba(215,238,236,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 var(--lift) 0 0 var(--sage-deep),
    0 calc(var(--lift) + 7px) 15px -7px rgba(47,140,140,.38),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .element:hover{
    background:rgba(215,238,236,.85);
    transform:translateY(-3px);
  }
}
@media (prefers-reduced-motion:reduce){
  .element{transition:box-shadow .2s ease, background .2s ease}
  .element:hover{transform:none}
}

/* focus visibility (keyboard) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--sage); outline-offset:3px;
}

/* =========================================================
   Premium art direction — v5
   Calm editorial scale, organic light, restrained depth.
   ========================================================= */
:root{
  --cream:#f7f2e9;
  --surface:#eee5d8;
  --white:#fffdf8;
  --ink:#282119;
  --muted:#6f604f;
  --line:rgba(73,58,43,.16);
  --sage:#287c7d;
  --sage-pastel:#d4e9e6;
  --sage-deep:#19585b;
  --clay:#b75e43;
  --violet:#756783;
  --gold:#d9b36b;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1240px;
}

body{
  background:
    radial-gradient(circle at 8% 3%, rgba(117,103,131,.08), transparent 29rem),
    radial-gradient(circle at 92% 18%, rgba(40,124,125,.09), transparent 35rem),
    var(--cream);
  font-size:17px;
}

.wrap{padding-inline:clamp(22px,4vw,52px)}
section{padding:clamp(88px,10vw,148px) 0}
section.tight{padding:clamp(72px,8vw,112px) 0}

.nav{
  background:rgba(247,242,233,.78);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  transition:background .35s ease,border-color .35s ease;
}
.nav.scrolled{background:rgba(247,242,233,.94);border-color:var(--line)}
.nav::after{
  content:"";position:absolute;right:0;bottom:-1px;height:1px;width:var(--scroll-progress,0%);
  background:linear-gradient(90deg,var(--violet),var(--sage),var(--clay));
}
.nav .wrap{height:82px}
.brand{position:relative;font-size:21px;line-height:1.15}
.brand::after{
  content:"אימון אישי בשיטת סאטיה";display:block;margin-top:4px;
  font:400 10px var(--ui);letter-spacing:.08em;color:var(--muted);
}
.nav-links{gap:clamp(24px,2.6vw,42px)}
.nav-links a{
  position:relative;font:600 13px var(--ui);letter-spacing:.035em;text-transform:none;
  padding:30px 0 27px;color:var(--muted);
}
.nav-links a::after{
  content:"";position:absolute;right:0;bottom:22px;width:100%;height:1px;
  background:var(--sage);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a[aria-current="page"],.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]::after,.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta,.btn{
  --lift:0px;border:1px solid rgba(40,33,25,.24);border-radius:999px;
  background:transparent;color:var(--ink);box-shadow:none;backdrop-filter:none;
  padding:12px 23px;font:600 13px var(--ui);letter-spacing:.025em;
  transition:color .28s ease,background .28s ease,border-color .28s ease,transform .28s var(--ease);
}
.nav-cta:hover,.btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translateY(-2px)}
.nav-cta[aria-current="page"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav-cta:active,.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink);padding:15px 30px}
.btn.primary:hover{background:var(--sage-deep);border-color:var(--sage-deep)}

.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
  font:600 12px var(--ui);letter-spacing:.12em;text-transform:none;color:var(--sage-deep);
}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.65}
h1,h2,h3{letter-spacing:-.025em}
h2{font-size:clamp(36px,4.4vw,58px);line-height:1.08}
.section-head h1{font-size:clamp(36px,4.4vw,58px);line-height:1.08}
.body-col{max-width:68ch}
.body-col p{color:#43382e;line-height:1.95}
.body-col .lede{font-size:clamp(20px,2vw,26px);line-height:1.65;color:var(--ink)}

/* Hero */
.home-hero{
  position:relative;min-height:min(850px,calc(100svh - 82px));padding:clamp(70px,9vw,126px) 0 92px;
  overflow:hidden;isolation:isolate;
}
.home-hero::before{
  content:"";position:absolute;inset:auto -12vw -45% auto;width:65vw;height:65vw;border-radius:50%;
  border:1px solid rgba(40,124,125,.14);z-index:-2;
}
.hero-ambient{
  position:absolute;left:-12%;top:3%;width:min(55vw,760px);aspect-ratio:1;border-radius:50%;z-index:-2;
  background:radial-gradient(circle at 52% 42%,rgba(212,233,230,.95),rgba(217,179,107,.13) 40%,transparent 70%);
  filter:blur(8px);transform:translate3d(0,var(--ambient-shift,0),0);
}
.home-hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:clamp(42px,6vw,90px);align-items:center;
}
.home-hero .hero-copy{margin:0;position:relative;z-index:3}
.home-hero h1{
  max-width:13ch;font-size:clamp(46px,6.1vw,82px);line-height:1.12;letter-spacing:-.045em;text-wrap:balance;
}
.home-hero h1 .accent{
  position:relative;background:none;padding:0;border-radius:0;white-space:nowrap;
}
.home-hero h1 .accent::after{
  content:"";position:absolute;right:-.06em;left:-.06em;bottom:.05em;height:.3em;z-index:-1;
  background:linear-gradient(90deg,rgba(212,233,230,.45),var(--sage-pastel));
  border-radius:50% 36% 54% 42%;transform:rotate(-1deg);
}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:42px}
.text-link{
  display:inline-flex;align-items:center;gap:10px;color:var(--muted);font:600 14px var(--ui);text-decoration:none;
}
.text-link span{transition:transform .3s var(--ease)}
.text-link:hover span{transform:translateY(4px)}
.home-hero .hero-photo{position:relative;z-index:1;justify-self:end;width:min(100%,500px)}
.home-hero .hero-photo::before{
  content:"";position:absolute;inset:-7% -10% 9% 12%;border-radius:48% 52% 43% 57%/42% 46% 54% 58%;z-index:-1;
  background:linear-gradient(145deg,rgba(40,124,125,.18),rgba(117,103,131,.13),rgba(183,94,67,.08));
  transform:rotate(4deg);
}
.home-hero .hero-photo::after{
  inset:22px -20px -20px 22px;border-color:rgba(40,124,125,.46);border-radius:46% 3px 46% 3px;
}
.home-hero .hero-photo img{
  height:min(650px,69vh);min-height:510px;border-radius:46% 3px 46% 3px;
  object-position:52% top;filter:saturate(.88) contrast(1.02);
  transform:translate3d(0,var(--portrait-shift,0),0) scale(1.015);
}
.photo-caption{
  position:absolute;left:-18px;bottom:32px;padding:10px 15px;
  background:rgba(247,242,233,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65);
  color:var(--muted);font:600 11px var(--ui);letter-spacing:.045em;
}

/* Intro for internal pages */
.page-intro{
  position:relative;padding:clamp(92px,12vw,166px) 0 clamp(72px,9vw,118px);overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-intro::after{
  content:"";position:absolute;left:-8vw;top:-15vw;width:48vw;height:48vw;border-radius:50%;
  background:radial-gradient(circle,rgba(212,233,230,.7),transparent 68%);pointer-events:none;
}
.page-intro .wrap{position:relative;z-index:1}
.page-intro h1{font-size:clamp(52px,8vw,100px);line-height:.98;max-width:10ch}
.page-intro p{max-width:42ch;margin:26px 0 0;font-size:clamp(18px,2vw,23px);color:var(--muted);line-height:1.7}
.contact-intro{text-align:center}
.contact-intro .wrap{display:flex;flex-direction:column;align-items:center}
.contact-intro .kicker{justify-content:center}
.contact-intro h1{max-width:none}

/* About + phoenix */
#about{padding-top:clamp(110px,13vw,180px)}
#about .two-col{grid-template-columns:minmax(330px,.86fr) minmax(0,1.14fr);gap:clamp(62px,8vw,118px)}
#about .section-head{
  position:sticky;top:122px;align-self:start;text-align:right;max-width:none;margin-bottom:0;
}
#about .section-head .kicker{justify-content:flex-start}
.phoenix-stage{margin-top:22px;min-height:510px}
.phoenix-3d{width:min(100%,470px);height:510px;position:relative}
.phoenix-flat-img{height:100%;max-height:510px;filter:drop-shadow(0 24px 34px rgba(67,48,31,.14))}
.phoenix-glow{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(217,179,107,.26),rgba(212,233,230,.18) 44%,transparent 70%);
  animation:phoenix-breathe 5.4s ease-in-out infinite;
}
.phoenix-stage.drawn::before{display:none}
@keyframes phoenix-breathe{50%{transform:scale(1.09);opacity:.72}}
.about-copy{padding-top:58px}
.about-copy p:not(.lede){padding-right:clamp(0px,2vw,34px);border-right:1px solid transparent}
.about-copy p:nth-child(3){border-color:rgba(40,124,125,.35)}

/* Home navigation cards */
.home-paths{background:rgba(238,229,216,.55);border-block:1px solid var(--line)}
.home-paths .section-head{margin-bottom:60px}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.path-card{
  position:relative;min-height:330px;padding:36px 34px 34px;color:var(--ink);text-decoration:none;
  border-left:1px solid var(--line);overflow:hidden;transition:background .45s ease,color .45s ease;
}
.path-card:last-child{border-left:0}
.path-card::before{
  content:"";position:absolute;inset:auto -25% -60% -25%;height:80%;border-radius:50%;
  background:var(--sage-pastel);opacity:0;transition:opacity .45s ease,transform .6s var(--ease);transform:translateY(18%);
}
.path-card:hover{background:rgba(255,253,248,.72)}
.path-card:hover::before{opacity:.72;transform:translateY(0)}
.path-index{font:600 12px var(--ui);letter-spacing:.12em;color:var(--sage-deep)}
.path-card h3{font-size:clamp(27px,2.8vw,38px);margin:64px 0 20px}
.path-card p{position:relative;max-width:29ch;color:var(--muted);line-height:1.7}
.path-arrow{position:absolute;left:32px;bottom:28px;font-size:25px;transition:transform .35s var(--ease)}
.path-card:hover .path-arrow{transform:translateX(-8px)}

/* Editorial content */
.content-page main > section:not(.cta-strip):not(.contact){position:relative}
.content-page main .two-col{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(50px,8vw,110px)}
.content-page main .section-head h2{max-width:10ch}
.mobile-title-break{display:none}
.brushline{opacity:.75}
.brushline path{stroke:rgba(40,124,125,.32)}

/* Values become a quiet constellation rather than raised controls */
#values{background:linear-gradient(180deg,transparent,rgba(212,233,230,.26),transparent)}
.values-network{max-width:720px;gap:18px}
.vn-row{gap:18px}
.vn-rung{height:1px;margin:0;background:linear-gradient(90deg,transparent,var(--sage),transparent);opacity:.3;animation:none}
.vn-node{
  --lift:0;background:rgba(255,253,248,.72);border:1px solid var(--line);border-radius:999px;
  box-shadow:none;padding:13px 18px;font-size:14px;transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.vn-node:hover{transform:translateY(-2px);border-color:rgba(40,124,125,.45);background:var(--white)}
.vn-node.vn-capstone{width:190px;margin-top:14px;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill{background:rgba(255,253,248,.7);border-color:var(--line);padding:10px 17px}

/* Who fits + clinic */
.imgbreak{padding:0 clamp(18px,4vw,60px);max-width:1500px;margin:0 auto}
.imgbreak figure{position:relative;overflow:hidden;border-radius:2px 90px 2px 90px}
.imgbreak img{
  height:min(57vw,650px);-webkit-mask-image:none;mask-image:none;
  filter:saturate(.72) sepia(.08);transition:transform 1.2s var(--ease),filter .8s ease;
}
.imgbreak.in img{transform:scale(1.015)}
.imgbreak figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(40,33,25,.22));pointer-events:none}
.imgbreak figcaption{left:26px;bottom:22px;color:var(--white);z-index:2}
.quiet-list{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.quiet-list li{
  min-height:150px;padding:30px;border-bottom:1px solid var(--line);font-size:clamp(18px,1.7vw,22px);align-items:flex-start;
  transition:background .35s ease,transform .35s var(--ease);
}
.quiet-list li:nth-child(odd){border-left:1px solid var(--line)}
.quiet-list li:hover{background:rgba(255,253,248,.7);transform:translateY(-2px)}
.quiet-list .n{font-size:11px;letter-spacing:.1em;color:var(--sage-deep)}

/* Method elements */
.elements{gap:12px;margin-top:28px}
.element{
  --lift:0;padding:12px 22px;background:rgba(212,233,230,.5);border:1px solid rgba(40,124,125,.2);
  box-shadow:none;font-size:15px;transition:background .3s ease,transform .3s var(--ease);
}
.element:hover{background:var(--sage-pastel);transform:translateY(-2px)}

/* Closing moment */
.closing-cta,.cta-strip.closing-cta{
  position:relative;padding:clamp(95px,12vw,160px) 0;text-align:center;overflow:hidden;
  background:var(--ink);color:var(--cream);
}
.closing-cta::before{
  content:"";position:absolute;width:520px;aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(40,124,125,.34),rgba(117,103,131,.14) 43%,transparent 70%);
}
.closing-cta .wrap{position:relative;z-index:1}
.closing-cta .kicker{justify-content:center;color:#b9d9d6}
.closing-cta .kicker::before{display:none}
.closing-cta h2{margin:0 0 35px;color:var(--cream)}
.closing-cta .btn.primary{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.closing-cta .btn.primary:hover{background:var(--sage-pastel);border-color:var(--sage-pastel)}

/* Contact */
.contact{padding-top:70px}
.contact-card{max-width:860px;border-radius:2px 46px 2px 46px;background:rgba(255,253,248,.62);box-shadow:0 36px 90px rgba(65,47,31,.08)}
.whatsapp-link,.social-link{padding:27px 30px;background:transparent;border-color:var(--line);box-shadow:none}
.whatsapp-link:hover,.social-link:hover{background:rgba(212,233,230,.36);transform:none;box-shadow:none}
.wa-icon{background:var(--ink);color:var(--cream);box-shadow:none}
.ig-icon{background:var(--violet)}
.email-icon{background:var(--terracotta)}
.map-icon{background:var(--sage-deep)}
.wa-text strong{font-size:17px}

/* Footer */
footer{padding:54px 0 48px;background:#211c17;color:rgba(247,242,233,.68);border-top:0}
footer .wrap:first-child{display:flex;justify-content:center;flex-wrap:wrap;gap:3px 7px}
footer a{color:var(--cream);text-decoration-color:rgba(247,242,233,.35)}
footer .credit,footer .credit a{color:rgba(247,242,233,.48)}

/* Motion */
.rv{transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 85ms)}
.hero-photo.rv{clip-path:inset(9% 0 0 0 round 46% 3px 46% 3px);transition:opacity 1s var(--ease),transform 1s var(--ease),clip-path 1.25s var(--ease)}
.hero-photo.rv.in{clip-path:inset(0 0 0 0 round 46% 3px 46% 3px)}

/* Mobile art direction */
@media (max-width:900px){
  .nav .wrap{height:72px}
  .brand{font-size:18px}.brand::after{display:none}
  .nav-cta{display:none}
  .home-hero{min-height:auto;padding:58px 0 88px}
  .home-hero .wrap{grid-template-columns:1fr;gap:52px}
  .home-hero h1{font-size:clamp(40px,11.2vw,64px);max-width:12ch;line-height:1.12}
  .home-hero .hero-photo{justify-self:center;width:min(88vw,540px)}
  .home-hero .hero-photo img{height:clamp(390px,112vw,560px);min-height:0}
  .hero-ambient{width:110vw;left:-38%;top:38%}
  .photo-caption{left:-8px;bottom:24px}
  .page-intro{padding-top:90px}
  .page-intro h1{font-size:clamp(48px,14vw,74px)}
  #about .two-col{grid-template-columns:1fr;gap:28px}
  #about .section-head{position:static;display:contents;text-align:right}
  #about .section-head .kicker{order:0}
  #about .section-head h2{order:1}
  #about .body-col{order:2;padding-top:12px}
  #about .phoenix-stage{display:none}
  .phoenix-3d{width:min(86%,390px);height:400px}
  .phoenix-flat-img{max-height:400px}
  .path-grid{grid-template-columns:1fr}
  .path-card{min-height:250px;border-left:0;border-bottom:1px solid var(--line)}
  .path-card:last-child{border-bottom:0}
  .path-card h3{margin-top:38px}
  .content-page main .two-col{grid-template-columns:1fr;gap:28px}
  .quiet-list{grid-template-columns:1fr}
  .quiet-list li:nth-child(odd){border-left:0}
}

@media (max-width:760px){
  .wrap{padding-inline:22px}
  #values .section-head h2{
    width:100%;
    max-width:none;
    margin-inline:auto;
    direction:rtl;
    text-align:center;
    white-space:nowrap;
    font-size:clamp(27px,8.6vw,38px);
  }
  #values .mobile-title-break{display:none}
  .nav .wrap{flex-direction:row-reverse}
  .hamburger{display:flex;background:transparent;border:1px solid var(--line);box-shadow:none;border-radius:999px}
  .hamburger:active,.hamburger[aria-expanded="true"]{transform:none;box-shadow:none;background:var(--ink)}
  .hamburger[aria-expanded="true"] .hamburger-box span{background:var(--cream)}
  .mobile-menu{
    inset:72px 0 0 0;height:calc(100svh - 72px);padding:30px 22px 40px;background:rgba(247,242,233,.98);
    gap:0;transform:translateY(-14px);
  }
  .mobile-menu a{padding:19px 4px;font:400 26px var(--display);letter-spacing:-.02em}
  body.menu-open{overflow:hidden}
  .home-hero .hero-sub{max-width:31ch;font-size:16px;line-height:1.75}
  .hero-actions{align-items:flex-start;gap:20px;flex-direction:column}
  .page-intro p{font-size:18px}
  .imgbreak{padding-inline:12px}
  .imgbreak figure{border-radius:2px 42px 2px 42px}
  .contact-card{border-radius:2px 28px 2px 28px}
  .whatsapp-link,.social-link{padding:21px 18px;gap:14px}
  .wa-icon{width:44px;height:44px}
}

@media (max-width:480px){
  .home-hero{padding-top:46px}
  .home-hero h1{font-size:42px}
  .home-hero .hero-photo img{height:400px}
  .phoenix-stage{min-height:340px}
  .phoenix-3d{height:340px}
  .phoenix-flat-img{max-height:340px}
  .path-card{padding:30px 24px}
  .quiet-list li{padding:25px 18px;min-height:130px}
}

@media (prefers-reduced-motion:reduce){
  .phoenix-glow{animation:none}
  .home-hero .hero-photo img,.hero-ambient{transform:none!important}
  .hero-photo.rv{clip-path:none}
}

/* =========================================================
   Phoenix journey — v6
   A close awakening moment resolves into a complete, scroll-led flight.
   ========================================================= */
.phoenix-journey{
  --journey-progress:0;
  position:relative;height:245vh;padding:0;background:#211c17;color:var(--cream);
}
.journey-sticky{
  position:sticky;top:76px;height:calc(100svh - 76px);min-height:620px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 67% 48%,rgba(52,137,135,.2),transparent 32%),
    radial-gradient(circle at 27% 35%,rgba(183,94,67,.16),transparent 34%),
    #211c17;
}
.journey-atmosphere{
  position:absolute;inset:0;z-index:-2;opacity:.72;
  background:
    linear-gradient(115deg,transparent 16%,rgba(255,255,255,.025) 16.2%,transparent 16.5%),
    radial-gradient(circle at 50% 48%,rgba(247,231,189,.12),transparent 26%);
}
.journey-atmosphere::after{
  content:"";position:absolute;inset:0;opacity:.17;mix-blend-mode:soft-light;
  background:
    repeating-radial-gradient(circle at 27% 44%,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(117deg,transparent 0 13px,rgba(255,255,255,.035) 13px 14px,transparent 14px 29px);
}
.journey-copy{position:absolute;z-index:4;right:max(5vw,32px);width:min(38vw,520px)}
.journey-copy .kicker{color:#b9d9d6}
.journey-copy-start{top:50%;transform:translateY(-50%);opacity:calc(1 - min(1,var(--journey-progress) * 2.8))}
.journey-copy-start h2{font-size:clamp(46px,5.4vw,82px);line-height:1.04;letter-spacing:-.025em}
.journey-copy-start h2 span{color:#d8b773}
.journey-copy-start p{max-width:30ch;margin-top:28px;color:rgba(250,247,242,.68);font-size:18px}
.awakening-window{
  position:absolute;z-index:2;left:7vw;top:50%;width:min(46vw,680px);aspect-ratio:16/9;
  transform:translateY(-50%) scale(calc(1 - min(.08,var(--journey-progress) * .1)));
  opacity:calc(1 - min(1,max(0,(var(--journey-progress) - .18) * 5.6)));
  overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:2px 76px 2px 76px;
  box-shadow:0 50px 120px rgba(0,0,0,.34);
}
.awakening-video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.03)}
.awakening-edge{position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(33,28,23,.42);pointer-events:none}
.journey-phoenix{
  position:absolute;z-index:3;left:50%;top:50%;width:min(37vw,540px);height:auto;
  opacity:min(1,max(0,(var(--journey-progress) - .19) * 7));
  transform:
    translate(calc(-50% + var(--phoenix-x,18vw)),calc(-50% + var(--phoenix-y,3vh)))
    rotate(var(--phoenix-rotate,-5deg)) scale(var(--phoenix-scale,.62));
  transform-origin:center;will-change:transform,opacity;
  filter:drop-shadow(0 32px 30px rgba(0,0,0,.25));
}
.journey-copy-end{
  right:max(6vw,34px);left:auto;bottom:12%;width:min(36vw,500px);text-align:right;
  opacity:min(1,max(0,(var(--journey-progress) - .63) * 4.6));
  transform:translateY(calc(28px - min(28px,var(--journey-progress) * 28px)));
}
.journey-statement{font:400 clamp(32px,4vw,58px)/1.16 var(--display);letter-spacing:-.02em;color:var(--cream)}
.journey-scroll-cue{
  position:absolute;z-index:4;right:34px;bottom:30px;color:rgba(250,247,242,.42);font:600 10px var(--ui);
  letter-spacing:.22em;writing-mode:vertical-rl;transition:opacity .3s ease;
  opacity:calc(1 - min(1,var(--journey-progress) * 4));
}
.journey-scroll-cue::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;background:rgba(250,247,242,.26)}

@media (max-width:900px){
  .phoenix-journey{height:auto;padding:82px 22px 92px}
  .journey-sticky{position:relative;top:auto;height:auto;min-height:0;overflow:hidden;padding:0}
  .journey-copy{position:relative;right:auto;left:auto;width:auto}
  .journey-copy-start{top:auto;transform:none;opacity:1}
  .journey-copy-start h2{font-size:clamp(40px,11vw,62px);max-width:10ch}
  .journey-copy-start p{display:none}
  .awakening-window{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;margin-top:42px;
    transform:none;opacity:1;border-radius:2px 44px 2px 44px;
  }
  .journey-phoenix{
    display:none;
  }
  .journey-copy-end{
    position:relative;top:auto;right:auto;left:auto;bottom:auto;width:auto;margin-top:42px;
    text-align:center;opacity:1;transform:none;
  }
  .journey-statement{font-size:clamp(30px,8vw,43px)}
  .journey-scroll-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .phoenix-journey{height:auto;padding:90px 0;min-height:720px}
  .journey-sticky{position:relative;top:auto;height:auto;min-height:620px;overflow:hidden}
  .awakening-window{display:none}
  .journey-copy-start{opacity:1}
  .journey-phoenix{opacity:1;--phoenix-x:-14vw;--phoenix-y:2vh;--phoenix-scale:.78;--phoenix-rotate:0deg}
  .journey-copy-end{opacity:1;transform:none}
  .journey-scroll-cue{display:none}
}

/* Desktop signature moment: the drawing wakes in place and the approved
   video plays over the tattoo without moving the whole asset across the page. */
@media (min-width:901px){
  .phoenix-journey{display:none}
  .phoenix-stage{min-height:560px}
  .phoenix-3d{z-index:2}
  .phoenix-awakening{
    position:absolute;z-index:3;left:50%;top:50%;width:min(620px,42vw);aspect-ratio:16/9;
    transform:translate(-50%,-50%) scale(.92);opacity:0;filter:blur(9px);
    transition:opacity .65s var(--ease),filter .65s var(--ease),transform 1.4s var(--ease);
    pointer-events:none;
  }
  .phoenix-awakening-video{width:100%;height:100%;display:block;object-fit:contain}
  .phoenix-stage.awakening .phoenix-awakening{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
  .phoenix-stage.awakening .phoenix-3d{opacity:0;filter:blur(10px);transform:scale(.96)}
  .phoenix-whisper{
    position:absolute;z-index:4;right:0;bottom:4px;margin:0;max-width:19ch;text-align:right;
    color:var(--sage-deep);font-size:14px;line-height:1.65;letter-spacing:.015em;
    opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) 1.05s,transform .8s var(--ease) 1.05s;
  }
  .phoenix-stage.awakening .phoenix-whisper{opacity:.82;transform:none}
}
@media (max-width:900px){
  .phoenix-awakening,.phoenix-whisper{display:none}
}
@media (prefers-reduced-motion:reduce){
  .phoenix-awakening,.phoenix-whisper{display:none}
}

/* Mobile navigation remains available from every point in a long page. */
@media (max-width:760px){
  html{scroll-padding-top:88px}
  body{padding-top:72px}
  .nav{
    position:fixed;inset:0 0 auto 0;width:100%;z-index:100;
    background:rgba(247,242,233,.92);border-color:var(--line);
    box-shadow:0 8px 26px rgba(48,38,27,.06);
  }
  .mobile-menu{z-index:99}
}