@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap');

:root {
  --navy: #101820;
  --navy-2: #17232d;
  --blue: #1c4a73;
  --blue-dark: #173d5f;
  --light-blue: #eaf1f7;
  --paper: #f5f5f2;
  --white: #fff;
  --gray: #aeb4b9;
  --gray-2: #d9dddf;
  --gray-3: #737d84;
  --text: #182027;
  --accent: #c25e00;
  --green: #1f7a53;
  --line: rgba(24, 32, 39, 0.14);
  --content: 1200px;
  --radius: 6px;
  --shadow: 0 16px 48px rgba(16, 24, 32, 0.08);

  /* ----- הקצב של דף הבית -----
     קו אחד לרוחב ושלושה מרווחים לאורך. כל סקשן בדף משתמש בהם ואף אחד לא
     מגדיר מספר משלו, כדי שלא ייווצר שוב מצב שבו חמישה סקשנים סמוכים
     נושאים חמישה ריפודים שונים.

       --gutter      השוליים מקצה המסך. .container נגזר ממנו, ולכן הוא
                     הקו היחיד שכל תוכן בעמוד מיושר אליו — כולל הסקשנים
                     שנפרשים על כל הרוחב ואין להם מכל.
       --section-pad ריפוד עליון ותחתון של סקשן תוכן. סימטרי תמיד, ולכן
                     כל תפר בין שני סקשנים הוא בדיוק פעמיים הערך הזה.
       --stage-pad   אותו דבר עבור שלושת הסקשנים שהם במה על תמונה מלאה
                     (Hero, פרויקטים, Peace Homes). נמוך יותר, כי שם
                     הגובה נקבע ממילא ב-min-height ולא מהריפוד.
       --rule-gap    המרווח משני צדי קו הפרדה פנימי. שווה למעלה ולמטה:
                     ריפוד, קו, ואז ריפוד אחר בגודל אחר הוא בדיוק מה
                     שהוציא את העמוד מאיזון.

     שלושת המרווחים נכתבים ב-clamp ולא כמספר קבוע עם שכבות @media, כמו
     בדף הפרויקט: הריווח גדל עם רוחב החלון ברצף, ואותו ערך תקף מ-320px
     ועד מסך רחב. הצורה היא "בסיס + שיפוע" ולא vw נקי, כי vw נקי נשאר
     תקוע על המינימום עד בערך 960px ואז מזנק, כלומר לפטופ מקבל את ריווח
     הנייד. */
  --gutter: 24px;
  --section-pad: clamp(64px, 5.55vw + 32px, 112px);
  --stage-pad: clamp(48px, 3.3vw + 18px, 72px);
  --rule-gap: clamp(28px, 2vw + 12px, 44px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--white);
  font-family: 'Arimo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(28, 74, 115, 0.38);
  outline-offset: 3px;
}

::selection {
  color: var(--white);
  background: var(--blue);
}

.container {
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  margin-inline: auto;
}

/* ----- הגוונים של דף הבית -----
   לדף יש שלושה גוונים בלבד ברמת הסקשן, ושום סקשן לא ממציא גוון רביעי:

     --white   סקשן עורכי: קומפוזיציה אחת של טקסט ותמונה, בלי רשת כרטיסים.
     --paper   סקשן שנושא כרטיסים או פאנל. הכרטיס עצמו תמיד --white עם קו
               שיער של --line, ולכן הוא צריך משטח שאינו לבן כדי להיראות.
     --navy    רגע שבו העמוד מחליף פרק: הפתיחה, הבמה של הפרויקטים והשותף,
               והסגירה. תמיד עם color: var(--white).

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

     Hero        navy      פתיחה
     TrustTabs   paper     פאנל
     AboutIntro  white     עורכי
     WhyDubai    paper     כרטיסים
     OffPlan     white     עורכי
     Process     navy  ┐
     Projects    navy  ├── פרק אחד כהה. Process שטוח, ושני האחרים במות על
     PeaceHomes  navy  ┘   תמונה, ולכן התפרים ביניהם נקראים מהתמונה ולא מהצבע.
     Testimonials white   עורכי
     FaqSection  paper    רשימה
     CTABand     navy     סגירה

   --light-blue אינו גוון סקשן. הוא מילוי הדגשה של אלמנט פנימי בלבד
   (סיכום, אייקון, שדה), ולכן סקשן שלם בגוון הזה קרא כגוון בהיר רביעי
   וקר מול --paper החמים, ושבר את הסירוגין. */
.section {
  padding: var(--section-pad) 0;
}

/* התווית הקטנה שמעל כותרת סקשן. הייתה לה נקודה כתומה ב-::before, והיא
   הוסרה: הכותרת עצמה מסמנת את תחילת הסקשן, והנקודה רק חזרה על כך.
   inline-flex נשאר כדי ש-margin-bottom יחול על span. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-heading {
  max-width: 690px;
  margin-bottom: 52px;
}

.section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(36px, 4.2vw, 62px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.section-heading p {
  max-width: 660px;
  margin: 22px 0 0;
  color: #566068;
  font-size: 18px;
  line-height: 1.65;
}

.section-heading--inverse h2,
.section-heading--inverse p {
  color: var(--white);
}

.section-heading--inverse .eyebrow {
  color: #b9cddd;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  color: var(--white);
  background: var(--blue);
}

.button--primary:hover {
  background: var(--blue-dark);
}

.button--outline {
  color: var(--navy);
  border-color: rgba(16, 24, 32, 0.4);
  background: transparent;
}

.button--outline:hover {
  color: var(--white);
  border-color: var(--navy);
  background: var(--navy);
}

.button--outline-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.46);
  background: transparent;
}

.button--outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.button--light {
  color: var(--navy);
  background: var(--white);
}

.button--text {
  min-height: auto;
  padding: 8px 0 7px;
  color: var(--blue);
  border-bottom-color: var(--blue);
  border-radius: 0;
}

.button--text:hover {
  transform: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
}

/* הלוגו הוא צורה מלאה ולא קו מתאר, והדיו שלו מגיע מ-currentColor. לכן
   .brand--inverse למטה מחליף אותו לגרסה הלבנה בלי קובץ נוסף. הגובה הוא
   המידה היחידה שנקבעת: הרוחב נגזר מיחס הצורה שב-viewBox. */
.brand__mark {
  width: auto;
  height: 56px;
  flex: none;
}

.brand--inverse {
  color: var(--white);
}

/* בפוטר אין מגבלת גובה כמו בהדר, והלוגו הוא הפריט הראשון בעמודה, ולכן
   הוא מקבל שם גודל מלא יותר. */
.footer-brand .brand__mark {
  height: 76px;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  color: var(--white);
  transition: height 220ms ease, color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

/* אין קו תחתון: ההפרדה מהתוכן נעשית בצל בלבד. קו על ההדר השקוף חתך את
   הווידאו של ה-Hero לשני חלקים, וברגע שהוא ירד שם הוא מיותר גם כאן. */
.site-header.is-scrolled {
  height: 68px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 26px rgba(16, 24, 32, 0.06);
}

.site-header__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.site-header.is-scrolled .brand--inverse {
  color: var(--navy);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 31px);
  margin-inline: auto;
}

.desktop-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: currentColor;
  content: '';
  transition: width 180ms ease;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ה-CTA מחליף ערכת צבע בין ההדר השקוף למצולל, ולכן שני המצבים מגדירים גם
   צבע טקסט וגם רקע ב-hover. בלי זה .button--primary:hover היה מחליף רק את
   הרקע לכחול כהה בעוד הטקסט נשאר נייבי — כמעט בלתי קריא לפני הגלילה. */
.header-cta {
  min-height: 44px;
  padding-inline: 18px;
  color: var(--navy);
  border-color: var(--white);
  background: var(--white);
}

.header-cta:hover {
  color: var(--white);
  border-color: var(--white);
  background: var(--navy);
}

.is-scrolled .header-cta {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
}

.is-scrolled .header-cta:hover {
  color: var(--white);
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.mobile-actions,
.mobile-menu {
  display: none;
}

.whatsapp-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 17px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

.whatsapp-button--compact {
  width: 44px;
  min-height: 44px;
  padding: 0;
}

/* ----- Hero -----
   שכבה אחת ולא חלוקה לעמודת טקסט ועמודת תמונה: הווידאו ממלא את כל רוחב
   הסקשן, ומעליו גוש טקסט אחד שיושב בצד ההתחלה — ימין בעברית — על אותו
   קו של כל כותרת אחרת בעמוד. הריפוד האופקי הוא ה-gutter של שאר האתר,
   והמכל הפנימי מוגבל ל---content, ולכן היישור לרשת נובע מהמבנה עצמו
   ולא מ-margin מחושב. */
.hero {
  position: relative;
  display: grid;
  min-height: 810px;
  align-content: center;
  padding: 150px var(--gutter) 116px;
  color: var(--white);
  background: var(--navy);
  isolation: isolate;
}

/* ----- שכבת המדיה של שתי הבמות -----
   Hero ו-Peace Homes הם אותו רכיב מבחינת הרקע: מכל absolute על כל הסקשן,
   ובתוכו וידאו או תמונה שממלאים אותו. שניהם מוגדרים כאן פעם אחת, כדי
   שתיקון בהתנהגות הרקע לא יצטרך להיעשות פעמיים. מה שנשאר לכל סקשן בנפרד
   הוא רק הגרדיאנט שמעל המדיה, שם הם באמת נבדלים. */
.hero__media,
.peace-homes__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--navy);
}

.hero__media img,
.hero__video,
.peace-homes__media img,
.peace-homes__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.hero__video,
.peace-homes__video {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .peace-homes__video {
    display: none;
  }
}

/* השכבה הראשונה מכהה את צד הטקסט (ימין) ומשחררת את השמאלי שבו נשאר
   הקאדר גלוי, והשנייה מחזירה כהות לקצה העליון — מתחת להדר השקוף —
   ולתחתון, בתפר אל הסקשן הבא. */
.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.15) 62%, rgba(0, 0, 0, 0.65) 100%);
  content: '';
  pointer-events: none;
}

/* המכל תופס את רוחב הרשת (--content) וממורכז בתוכה, ולכן קצה ההתחלה שלו
   נופל בדיוק על קו ה-.container של שאר האתר. אורכי השורה עצמם נקבעים
   על הכותרת והפסקה בנפרד — הן נגמרות הרבה לפני קצה הרשת, וכך נשאר חצי
   הקאדר השמאלי פתוח לתמונה. */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 27px;
  color: #c0d1df;
  font-size: 13px;
  font-weight: 500;
}

.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(50px, 5.2vw, 82px);
  font-weight: 700;
  letter-spacing: -0.047em;
  line-height: 0.99;
}

.hero__lead {
  max-width: 600px;
  margin: 30px 0 0;
  color: #cbd4db;
  font-size: 18px;
  line-height: 1.65;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* הקו שוכב בתחתית הבמה במקום להסתובב ב-90° בצידה. הנקודה הכתומה יושבת
   בקצה ה-inline-end, כלומר בצד DUBAI בעברית — היא מסמנת את היעד. */
.hero__route {
  position: absolute;
  z-index: 2;
  bottom: 44px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: translateX(-50%);
}

.hero__route i {
  position: relative;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.hero__route i::after {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: '';
  inset-inline-end: 0;
}

/* ---------- סקשן האמון ----------
   הטאבים הם שורת כותרות על קו שיער, לא ארבעה כפתורים בתוך קופסה אפורה.
   מה שנושא את המצב הפעיל: ספרה כתומה, טקסט נייבי ופס כתום שיושב על הקו.
   הלוח שמתחת ממשיך מאותו קו — הקו הוא הגבול העליון שלו — ולכן השורה
   והלוח נקראים כרכיב אחד ולא כשתי קופסאות זו על גב זו. */
/* הריפוד מגיע מ-.section ולא מכאן, ואין קו תחתון: זה היה הסקשן היחיד בעמוד
   שסגר את עצמו בקו, ולכן התפר שלו נראה אחרת מכל שאר התפרים. ההחלפה
   ל-AboutIntro הלבן היא הגבול. */
.trust-tabs {
  background: var(--paper);
}

.trust-tabs .section-heading {
  margin-bottom: 34px;
}

.trust-tabs__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.trust-tabs__list {
  display: flex;
  /* הפס הפעיל יושב על קו השורה עצמו ולא מתחתיו */
  margin-bottom: -1px;
}

.trust-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 22px 15px;
  border: 0;
  background: transparent;
  color: var(--gray-3);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: start;
  transition: color 0.22s ease;
}

.trust-tabs__tab-label {
  text-align: start;
}

/* הטאב הראשון מיושר לשולי המכל, כמו הכותרת שמעליו */
.trust-tabs__tab:first-child {
  padding-inline-start: 0;
}

.trust-tabs__tab::after {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--gray-2);
  content: '';
  transform: scaleX(0);
  transition: transform 0.28s ease, background 0.28s ease;
}

.trust-tabs__tab-index {
  /* ספרות נשארות LTR כדי ש-01 לא יתהפך */
  direction: ltr;
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.22s ease;
}

.trust-tabs__tab:hover {
  color: var(--navy);
}

/* חצי פס ב-hover: רמז שלחיצה תשלים את המעבר */
.trust-tabs__tab:hover::after {
  transform: scaleX(0.42);
}

.trust-tabs__tab[aria-selected='true'] {
  color: var(--navy);
}

.trust-tabs__tab[aria-selected='true'] .trust-tabs__tab-index {
  color: var(--accent);
}

.trust-tabs__tab[aria-selected='true']::after,
.trust-tabs__tab[aria-selected='true']:hover::after {
  background: var(--accent);
  transform: scaleX(1);
}

.trust-tabs__counter {
  padding-bottom: 15px;
  color: var(--gray);
  direction: ltr;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.trust-tabs__counter b {
  color: var(--navy);
}

.trust-tabs__panel {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1.06fr 0.94fr;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--white);
}

.trust-tabs__panel:focus-visible {
  outline-offset: -3px;
}

/* הלוח כולו לא זז בהחלפה — רק התוכן והתמונה נכנסים, וזה מספיק */
@keyframes trust-tab-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes trust-tab-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* כל ארבעת הגופים נערמים בתא אחד, ולכן התא מקבל את גובה הגבוה שבהם והלוח
   שומר על אותו גובה בכל הטאבים. min-width: 0 כדי שתוכן רחב לא ימתח את
   העמודה מעבר ל-1.06fr. */
.trust-tabs__bodies {
  display: grid;
  min-width: 0;
}

.trust-tabs__bodies > * {
  grid-area: 1 / 1;
}

.trust-tabs__body {
  padding: 44px 44px 38px;
  animation: trust-tab-rise 0.42s ease both;
}

/* הגוף הנסתר ממשיך לתפוס מקום בפריסה — זה כל תפקידו כאן */
.trust-tabs__body[aria-hidden='true'] {
  visibility: hidden;
}

.trust-tabs__body h3 {
  margin: 0;
  color: var(--navy);
  font-size: 28px;
  letter-spacing: -0.028em;
  line-height: 1.24;
}

.trust-tabs__lead {
  margin: 14px 0 0;
  max-width: 52ch;
  color: #59646b;
  font-size: 15px;
}

/* שורות על קווי שיער עם נקודה כתומה קטנה. לא וי ירוק בריבוע אפור:
   זה ברירת המחדל של כל אתר ולא אומר דבר. */
.trust-tabs__points {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.trust-tabs__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: #3f4a52;
  font-size: 14.5px;
  line-height: 1.5;
}

.trust-tabs__points li::before {
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  content: '';
}

/* התמונה ממולאת ב-stretch של הגריד לגובה שורת הטקסט, ולכן אין לה גובה
   משלה כאן. min-height נדרש רק כשהלוח נערם לעמודה אחת (ראו מדיה) */
.trust-tabs__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  animation: trust-tab-fade 0.55s ease both;
}

.trust-tabs__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
}

/* פס תחתון על רוחב הלוח: המספרים בצד אחד והמשך הקריאה בשני */
.trust-tabs__footers {
  display: grid;
  grid-column: 1 / -1;
}

.trust-tabs__footers > * {
  grid-area: 1 / 1;
}

.trust-tabs__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 44px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* הקישור בפס נסתר אינו נגיש למקלדת: visibility: hidden מוציא אותו גם
   מסדר הטאבים וגם מעץ הנגישות, ומשאיר רק את התרומה שלו לגובה */
.trust-tabs__footer[aria-hidden='true'] {
  visibility: hidden;
}

.trust-tabs__stats {
  display: flex;
  margin: 0;
}

.trust-tabs__stats div + div {
  margin-inline-start: 32px;
  padding-inline-start: 32px;
  border-inline-start: 1px solid var(--line);
}

.trust-tabs__stats dt {
  /* מספרים נשארים בכיוון LTR כדי ש-200+ לא יתהפך ל-+200 */
  direction: ltr;
  color: var(--navy);
  text-align: right;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.trust-tabs__stats dd {
  margin: 5px 0 0;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.4;
}

.trust-tabs__link {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(28, 74, 115, 0.32);
  border-radius: 4px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.trust-tabs__link svg {
  flex: none;
  transition: transform 0.2s ease;
}

.trust-tabs__link:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.trust-tabs__link:hover svg {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .trust-tabs__body,
  .trust-tabs__media {
    animation: none;
  }
}

.intro {
  overflow: hidden;
}

.intro__grid {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  align-items: center;
  gap: 100px;
}

.intro .section-heading {
  margin-bottom: 30px;
}

.intro__copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  color: #505b63;
}

.intro__copy p {
  margin: 0;
}

.intro__content .button--text {
  margin-top: 30px;
}

.intro__visual {
  position: relative;
}

/* אותה מוסכמה של property-focus__media: תמונה חתוכה למסגרת, הצללה בתחתית,
   והתווית הלבנה מרחפת מעליה. כך שתי התמונות הגדולות של דף הבית מתנהגות
   אותו דבר במקום שכל אחת תמציא מסגרת משלה. */
.intro__image {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

.intro__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(16, 24, 32, 0.46));
  content: '';
}

.intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__caption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.intro__caption i {
  width: 36px;
  height: 1px;
  background: var(--accent);
}

/* יושב בין WhyDubai ל-Process, ושניהם היו --paper לפניו ואחריו. לבן כאן הוא
   מה שמחזיר את הסירוגין לחצי הבהיר של העמוד. */
.property-types {
  background: var(--white);
}

/* פאנל מפוצל אחד ברוחב מלא, לא כרטיס ברשת, ולכן הוא לוקח את --paper של
   הסקשן שאיבד אותו. אין בעמוד רשת כרטיסים על משטח לבן, ולכן הוא לא מתנגש
   עם הכלל שכרטיס הוא תמיד לבן. */
.property-focus {
  display: grid;
  overflow: hidden;
  grid-template-columns: 0.95fr 1.05fr;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: var(--radius);
  background: var(--paper);
  transition: box-shadow 220ms ease;
}

.property-focus:hover {
  box-shadow: var(--shadow);
}

.property-focus__media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}

.property-focus__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(16, 24, 32, 0.42));
  content: '';
}

.property-focus__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.property-focus:hover img {
  transform: scale(1.025);
}

.property-focus__media span {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 20px;
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.property-focus__body {
  padding: 44px;
}

.property-focus__body h3 {
  margin: 0;
  color: var(--navy);
  font-size: 27px;
  letter-spacing: -0.025em;
}

.property-focus__body > p {
  margin: 14px 0 0;
  color: #59646b;
  font-size: 15px;
}

.property-focus__body ul {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.property-focus__body li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.property-focus__body li svg {
  flex: none;
  margin-top: 2px;
  color: var(--green);
}

.property-focus__body li b {
  display: block;
  color: var(--navy);
  font-size: 14px;
}

.property-focus__body li span {
  display: block;
  margin-top: 3px;
  color: #59646b;
  font-size: 13px;
  line-height: 1.5;
}

.property-focus__body small {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 14px;
  color: #6e553e;
  border: 1px solid #ead8c7;
  border-radius: 4px;
  background: #faf5ef;
  font-size: 12px;
  line-height: 1.5;
}

.property-focus__body small svg {
  flex: none;
  margin-top: 2px;
}

.property-focus__body a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

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

   flex ולא grid, בדיוק כמו ב-Hero, כי הפאנל מיישר את עצמו לקו של
   .container דרך אחוזים. אחוזים בריפוד נמדדים מול בלוק המכיל, ובגריד זה
   היה תא הגריד ברוחב 55% ולא הסקשן — כלומר החישוב היה יוצא שלילי והיישור
   נופל לרצפה של --gutter. כפריט flex הבלוק המכיל הוא הסקשן המלא. */
.peace-homes {
  position: relative;
  display: flex;
  isolation: isolate;
  min-height: 700px;
  color: var(--white);
  background: var(--navy);
}

.peace-homes::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 34%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.15) 62%, rgba(0, 0, 0, 0.6) 100%);
  content: '';
  pointer-events: none;
}

.peace-homes__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 55%;
  justify-content: center;
  flex-direction: column;
  /* אותו היסט כמו ב-Hero ומאותה סיבה: הסקשן נפרש על כל רוחב המסך ואין בו
     .container, ולכן הוא מיישר את עצמו לקו של המכל במפורש. */
  padding: var(--stage-pad) max(var(--gutter), calc((100% - var(--content)) / 2)) var(--stage-pad) 7vw;
}

/* עמודת המסמכים. עד כאן היה הבלוק טור טקסט אחד ברוחב 55% מעל רקע שנפרש
   על כל הסקשן, והחצי השני היה שטח ריק שהגרדיאנט רק הכהה. העמודה הזו
   ממלאת אותו והופכת את הסקשן לשתי עמודות אמיתיות: הטענה מימין, הראיה
   מולה. הרקע נשאר absolute מתחת לשתיהן, ולכן גם כאן נדרשים position
   ו-z-index כמו בתוכן שממול, אחרת העמודה נופלת מתחת לשכבת ההכהיה.

   הריפוד הוא תמונת ראי של זה שבתוכן: שם היסט המכל יושב בצד ימין, כאן
   בצד שמאל, ושתי העמודות מיושרות לשני הקווים שכל שאר העמוד מיושר אליהם.
   ה-7vw שנשאר בצד הפנימי של התוכן הוא המרווח שבין השתיים. */
.peace-homes__proof {
  position: relative;
  z-index: 2;
  display: flex;
  width: 45%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--stage-pad) 0 var(--stage-pad) max(var(--gutter), calc((100% - var(--content)) / 2));
  /* ההכהיה של הסקשן חזקה בצד הטקסט ונחלשת לכיוון הצד הזה, כדי שהרנדר
     יישאר גלוי. הצל הוא מה שמחזיק את הקריאוּת של הכיתוב הקטן שיושב מעליו
     בלי להכהות שוב את התמונה — ובפרט מעל פריים בהיר של הווידאו. */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}

.peace-homes__certificate {
  width: min(100%, 330px);
  margin: 0;
}

/* יחס A4 לאורך, כי זה היחס של המסמך עצמו. הוא מוגדר על המסגרת ולא על
   התמונה, ולכן הוא נשמר גם כשהמסגרת עדיין ריקה — והחלפת ה-placeholder
   בתעודה האמיתית לא תזיז את גובה הסקשן. */
.certificate-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border-radius: 3px;
}

a.certificate-frame {
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.certificate-frame:hover,
a.certificate-frame:focus-visible {
  box-shadow: 0 30px 72px rgba(0, 0, 0, 0.55);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  a.certificate-frame,
  a.certificate-frame:hover,
  a.certificate-frame:focus-visible {
    transform: none;
    transition: none;
  }
}

/* contain ולא cover: מסמך שנחתך בקצוות הוא מסמך שאי אפשר לקרוא, וזו כל
   מטרתו כאן. */
.certificate-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* הסימן שאפשר ללחוץ ולפתוח בגודל מלא. הוא גלוי תמיד ולא נחשף ב-hover
   בלבד, כי במגע אין hover — ובלעדיו התעודה נראית כתמונה סטטית. */
.certificate-frame__zoom {
  position: absolute;
  display: grid;
  width: 36px;
  height: 36px;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.7);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

a.certificate-frame:hover .certificate-frame__zoom,
a.certificate-frame:focus-visible .certificate-frame__zoom {
  opacity: 1;
}

/* המסגרת הריקה נשארת שקופה ומקווקוות ולא מחקה נייר לבן: מקום שמור למסמך
   צריך להיראות כמקום שמור, ולא כמסמך שכבר קיים. */
.certificate-frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  color: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(255, 255, 255, 0.34);
  /* כהה ולא בהיר: המסגרת יושבת מעל תמונה, ושכבה לבנה שקופה רק הבהירה
     את מה שכבר בהיר מתחתיה והשאירה את הכיתוב תלוי באוויר. */
  background: rgba(16, 24, 32, 0.52);
  backdrop-filter: blur(2px);
  text-align: center;
}

.certificate-frame__eyebrow {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: 0.2em;
}

.certificate-frame--empty b {
  margin-top: 8px;
  color: var(--white);
  font-size: 17px;
}

.certificate-frame--empty .placeheld {
  margin-top: 26px;
  font-size: 12.5px;
  /* הטקסט ארוך והמסגרת צרה, ולכן דווקא כאן nowrap הוא מה שהיה גולש */
  white-space: normal;
}

.peace-homes__certificate figcaption {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

/* מספרי הרישוי בדובאי, בגרסה צרה שנכנסת מתחת לתעודה. הטבלה שהייתה בסקשן
   ההוכחות בנויה לארבע עמודות על רקע בהיר, ולכאן לא מתאימים לא הרוחב שלה
   ולא הצבעים; במקומה שורה לכל שדה, תווית מימין וערך מולה. */
/* הקו וההפרדה עברו מהרשימה אל הכותרת שמעליה, כדי שהכותרת תיפול מתחת לקו
   ותיקרא כשייכת לרשימה — ולא כשורה אחרונה של הכיתוב שמתחת לתעודה. */
.peace-homes__licence-title {
  width: min(100%, 330px);
  margin: 26px 0 14px;
  padding-top: 22px;
  color: rgba(255, 255, 255, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.peace-homes__licence {
  display: grid;
  width: min(100%, 330px);
  margin: 0;
  gap: 9px;
}

.peace-homes__licence div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
}

.peace-homes__licence dt {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

/* הערכים לועזיים ומספריים ונקראים משמאל לימין. direction על האלמנט עצמו
   ולא .ltr הגלובלי, כי זה מגיע עם text-align: left שהיה מנטרל את היישור
   לקצה שנקבע כאן: start של ה-dd הוא הקצה השמאלי שלו, כלומר הצד החיצוני,
   ושם נופל קו היישור של הערכים. */
.peace-homes__licence dd {
  margin: 0;
  direction: ltr;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 700;
  text-align: start;
}

.peace-homes__logo {
  width: auto;
  max-width: 240px;
  height: 60px;
  margin-bottom: 34px;
  object-fit: contain;
  object-position: right center;
}

.peace-homes h2 {
  margin: 0;
  font-size: clamp(38px, 3.9vw, 58px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.peace-homes__content > p {
  max-width: 590px;
  margin: 23px 0 0;
  color: #bdc9d1;
  font-size: 17px;
}

/* שתי שורות של תנאים מסחריים, מעל התחייבות המחיר ובאותה מסגרת קווים:
   מספר גדול ותווית מתחתיו, באותו מוטיב של המספרים בבלוק האמון. */
.peace-homes__stats {
  display: flex;
  max-width: 580px;
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.peace-homes__stats div + div {
  margin-inline-start: 36px;
  padding-inline-start: 36px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

.peace-homes__stats dt {
  /* מספרים בכיוון LTR כדי ש-0 ₪ לא יתהפך ל-₪ 0 */
  direction: ltr;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-align: right;
}

.peace-homes__stats dd {
  margin: 6px 0 0;
  color: #bdc9d1;
  font-size: 13px;
  line-height: 1.4;
}

.price-promise {
  display: flex;
  max-width: 580px;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* השורות צמודות זו לזו, ולכן קו השיער ביניהן משותף ואין רווח כפול */
.peace-homes__stats + .price-promise {
  margin-top: 22px;
}

.price-promise svg {
  flex: 0 0 auto;
  color: #df8a3c;
}

.price-promise div {
  display: flex;
  flex-direction: column;
}

.price-promise span {
  color: #d4dee5;
  font-size: 13px;
}

.price-promise strong {
  margin-top: 3px;
  font-size: 20px;
}

.peace-homes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* בדסקטופ שני הכפתורים יושבים באותה שורה. הסף הוא 1100 ולא רוחב קטן יותר
   כי עמודת התוכן היא 55% מהסקשן: מתחת לזה שתי התוויות הארוכות כבר לא
   נכנסות זו לצד זו, ועדיף שהן ישברו לשתי שורות מאשר שהטקסט עצמו יישבר
   בתוך הכפתור. */
@media (min-width: 1100px) {
  .peace-homes__actions {
    flex-wrap: nowrap;
  }

  .peace-homes__actions .button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.process {
  color: var(--white);
  background: var(--navy);
}

.process__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 100px;
}

.process__intro {
  position: sticky;
  top: 112px;
  align-self: start;
}

.process__intro .section-heading {
  margin-bottom: 24px;
}

.process__intro > p {
  max-width: 420px;
  margin: 0 0 30px;
  color: #aebbc4;
}

/* מונה השלבים: קופסה בכיוון LTR בתוך פסקה RTL, כדי ש-"01 / 06" יישאר בסדר
   הקריאה הנכון שלו ועדיין ייצמד לצד הימני של הטור. */
.process__count {
  display: flex;
  width: max-content;
  align-items: baseline;
  gap: 7px;
  margin-top: 70px;
  direction: ltr;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.process__count strong {
  color: #dd8a41;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.process__count span {
  color: #8797a2;
}

.process__route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #8797a2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.process__route i {
  position: relative;
  width: 140px;
  height: 1px;
  background: #6f7e88;
}

.process__route i::before,
.process__route i::after {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: '';
}

/* הנקודה בצד ישראל דולקת תמיד, זו נקודת המוצא. */
.process__route i::before {
  right: 0;
}

/* הנקודה בצד דובאי נדלקת רק כשהתהליך הושלם. */
.process__route i::after {
  left: 0;
  background: #55636d;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.process__route--done i::after {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(221, 138, 65, 0.55);
}

.process__route-fill {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #dd8a41;
  transform: scaleX(0);
  transform-origin: right center;
}

/* ---------- סרגל ההתקדמות של שלבי התהליך ---------- */

.process-track {
  position: relative;
}

.process-track__rail {
  position: absolute;
  z-index: 0;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-50%);
  pointer-events: none;
}

.process-track__rail > span {
  display: block;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #dd8a41, var(--accent));
  box-shadow: 0 0 14px rgba(221, 138, 65, 0.4);
}

.process-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}

.process-list li {
  display: grid;
  min-height: 147px;
  grid-template-columns: 70px 1fr;
  align-items: start;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.process-list > li > span {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #7d8b95;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.process-list li.is-passed > span {
  color: #dd8a41;
}

/* הנקודה יושבת מעל הסרגל וברקע כהה מלא, כדי שהמילוי ייעצר בדיוק עליה. */
.process-list__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: var(--navy);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.process-list li.is-passed .process-list__dot {
  border-color: var(--accent);
  background: #dd8a41;
}

.process-list li[aria-current='step'] .process-list__dot {
  box-shadow: 0 0 0 5px rgba(221, 138, 65, 0.16);
}

/* המילוי עצמו נגזר מהגלילה ולכן נשאר; רק הריכוך של המעברים מבוטל. */
@media (prefers-reduced-motion: reduce) {
  .process-list > li > span,
  .process-list__dot,
  .process__route i::after {
    transition: none;
  }
}

.process-list h3 {
  margin: 0;
  font-size: 24px;
}

.process-list p {
  max-width: 530px;
  margin: 8px 0 0;
  color: #9dabb5;
  font-size: 14px;
}

.projects {
  background: var(--navy);
}

/* ---------- סליידר פרויקטים נבחרים ---------- */

.project-slider {
  /* מספר הכרטיסים שנראים במסילה בו-זמנית. חייב להיות שווה למספר הפרויקטים
     בשיווק, אחרת חלון התצוגה מכיל את אותו פרויקט פעמיים ושני עותקים מסומנים
     כפעילים. אם מספר הפרויקטים משתנה, יש לעדכן כאן. */
  --rail-cards: 3;
  --card-gap: 16px;
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-height: clamp(680px, 90vh, 880px);
  padding: var(--stage-pad) 0;
  background: var(--navy);
  gap: var(--rule-gap);
  isolation: isolate;
}

/* שכבת הרקע, סוויפר נפרד שמוצלב עם התוכן דרך מודול ה-Controller */
.project-slider__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--navy);
}

.project-slider__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* זום איטי שמתחיל מחדש בכל שקופית שנכנסת */
.project-slider__media .swiper-slide-active img {
  animation: slider-zoom 9s ease-out both;
}

@keyframes slider-zoom {
  from {
    transform: scale(1.07);
  }
}

.project-slider__scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to left, rgba(16, 24, 32, 0.94) 0%, rgba(16, 24, 32, 0.82) 26%, rgba(16, 24, 32, 0.34) 56%, rgba(16, 24, 32, 0.12) 74%, rgba(16, 24, 32, 0.4) 100%),
    linear-gradient(to top, rgba(16, 24, 32, 0.62) 0%, rgba(16, 24, 32, 0) 45%),
    linear-gradient(to bottom, rgba(16, 24, 32, 0.78) 0%, rgba(16, 24, 32, 0) 38%);
}

/* ----- כותרת הסקשן, בתוך הסליידר ----- */

/* הריפוד מתחת לכותרת שווה ל-gap של הסליידר, ולכן קו ההפרדה יושב בדיוק
   באמצע בין הכותרת לתוכן שמתחתיה ולא קרוב יותר לאחד מהם. */
.project-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: var(--rule-gap);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.project-slider__head h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.project-slider__head-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  transition: border-color 200ms ease, color 200ms ease, gap 200ms ease;
}

.project-slider__head-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  gap: 14px;
}

.project-slider__body {
  display: grid;
  flex: 1;
  align-items: center;
  gap: 40px;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  min-height: 0;
}

/* ----- הצד עם התוכן ----- */

.project-slider__content {
  width: 100%;
}

.project-slider__content .swiper-slide {
  height: auto;
}

.project-slider__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: #dfe6ec;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.project-slider__eyebrow svg {
  color: var(--accent);
}

.project-slider__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  color: var(--white);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  unicode-bidi: isolate;
}

.project-slider__lead {
  max-width: 460px;
  margin: 0 0 22px;
  color: #cdd6dd;
  font-size: 15px;
  line-height: 1.6;
}

.project-slider__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.project-slider__whatsapp {
  display: inline-grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  place-items: center;
  transition: background-color 200ms ease, transform 200ms ease;
}

.project-slider__whatsapp:hover {
  background: #a94f00;
  transform: translateY(-2px);
}

.project-slider__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 40px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.project-slider__cta:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

/* שני הפקדים שיושבים על התמונה, ולכן חלקה לבנה ולא כתומה כמו בשאר האתר */
.project-slider__whatsapp:focus-visible,
.project-slider__cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* ----- מסילת הכרטיסים ----- */

/* המסילה מסתיימת בדיוק בגבול הקונטיינר, והכרטיסים מחושבים כך שנכנס מספר שלם
   שלהם, אף כרטיס לא נחתך. הריפוד האנכי נותן מקום להרמה ולצל של הכרטיס הפעיל,
   שאחרת היו נחתכים על ידי ה-overflow. */
.project-slider__rail {
  overflow: hidden;
  padding-block: 18px 26px;
  margin-block: -18px -26px;
}

.project-slider__track {
  display: flex;
  gap: var(--card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.project-slider__track > li {
  flex: 0 0 calc((100% - (var(--rail-cards) - 1) * var(--card-gap)) / var(--rail-cards));
}

.project-slider__rail button {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 250px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--navy-2);
  cursor: pointer;
  text-align: start;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.project-slider__rail button::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  background: linear-gradient(to top, rgba(11, 17, 23, 0.86) 4%, rgba(11, 17, 23, 0.1) 52%, rgba(11, 17, 23, 0.22) 100%);
  content: '';
  transition: box-shadow 320ms ease, background 320ms ease;
}

/* ----- הפרויקט המוצג מסומן במסילה ----- */

/* הכרטיסים הלא-פעילים נסוגים אחורה, כך שהמוצג בולט */
.project-slider__track > li:not(.is-active) img {
  filter: grayscale(0.55) brightness(0.62);
}

.project-slider__track > li:not(.is-active) button::after {
  background: linear-gradient(to top, rgba(11, 17, 23, 0.9) 4%, rgba(11, 17, 23, 0.42) 52%, rgba(11, 17, 23, 0.5) 100%);
}

.project-slider__track > li:not(.is-active) button:hover img,
.project-slider__track > li:not(.is-active) button:focus-visible img {
  filter: none;
}

.project-slider__track > li.is-active button {
  transform: translateY(-10px);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.48);
}

.project-slider__track > li.is-active button::after {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.project-slider__track > li.is-active .project-slider__card-area {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.project-slider__card-area i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: card-pulse 2.2s ease-in-out infinite;
}

@keyframes card-pulse {
  50% {
    opacity: 0.25;
  }
}

.project-slider__rail button:hover,
.project-slider__rail button:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
}

/* טבעת המיקוד הכתומה של כל הפקדים שנושאים ניווט בסליידרים. שלושתם היו
   מגדירים אותה בנפרד, ולכן היא כאן פעם אחת. */
.project-slider__rail button:focus-visible,
.project-slider__nav button:focus-visible,
.testimonials__nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project-slider__rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease, filter 420ms ease;
}

.project-slider__rail button:hover img {
  transform: scale(1.07);
}

.project-slider__card-body {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: block;
}

.project-slider__card-area {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  color: #c3ccd3;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-slider__rail strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
  unicode-bidi: isolate;
}

/* ----- ניווט ומונה ----- */

.project-slider__footer {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* מחוון מיקום, מתמלא לפי הפרויקט הנוכחי מתוך הסך הכול */
.project-slider__progress {
  --slider-progress: 0;
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.project-slider__progress span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--slider-progress));
  transform-origin: right center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-slider__nav {
  display: flex;
  gap: 12px;
}

.project-slider__nav button {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.project-slider__nav button:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

.project-slider__nav button:active {
  transform: scale(0.94);
}

.project-slider__counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--white);
  line-height: 1;
}

.project-slider__counter b {
  display: block;
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.05em;
  clip-path: inset(-0.4em -0.15em 0 -0.15em);
}

.project-slider__counter b span {
  display: block;
  animation: counter-up 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes counter-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.project-slider__counter i {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.project-slider__counter > span {
  color: #9dabb5;
  font-size: 15px;
  font-weight: 500;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .project-slider__media .swiper-slide-active img,
  .project-slider__counter b span,
  .project-slider__card-area i,
  .project-slider__rail img,
  .project-slider__rail button {
    animation: none;
    transition-duration: 1ms;
  }

  .project-slider__progress span {
    transition-duration: 1ms;
  }

  .project-carousel__dots button::after {
    transition-duration: 1ms;
  }
}

/* ---------- סקשן הפרויקטים במובייל: קרוסלת כרטיסים ---------- */

/* הרכיב ProjectsMobile מרונדר במקום הסליידר רק מתחת ל-720px, ולכן הכללים
   כאן לא עטופים במדיה קווארי: מעל הרוחב הזה הוא כלל אינו נמצא ב-DOM. */

.project-carousel {
  /* ריפוד הבמה, ועוד תוספת בתחתית שמפנה מקום לסרגל ה-CTA הדביק של המובייל */
  padding: var(--stage-pad) 0 calc(var(--stage-pad) + 44px);
}

.project-carousel__head h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(28px, 7.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.project-carousel__head p {
  margin: 12px 0 0;
  color: #cdd6dd;
  font-size: 14px;
  line-height: 1.55;
}

/* הרצועה יוצאת מהמכל אל שולי המסך במרג׳ין שלילי, והריפוד מחזיר את
   הכרטיס הראשון לקו של הכותרת. בלי זה הכרטיס האחרון היה נגמר 24px לפני
   קצה המסך, וההצצה לכרטיס הבא הייתה נראית כמו חיתוך ולא כהמשך. */
.project-carousel__track {
  display: flex;
  overflow-x: auto;
  margin: 26px calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter);
  gap: 14px;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.project-carousel__track::-webkit-scrollbar {
  display: none;
}

/* הרוחב מותיר בכוונה כ-50px לכרטיס הבא בטלפון. ההצצה הזו היא כל
   האינדיקציה שצריך לכך שיש כאן עוד, ולכן אין ברצועה חצים או מונה.
   האחוז נמדד מול תיבת התוכן של הרצועה, כלומר בלי 48px הריפוד, ולכן
   הוא גבוה ממה שנראה. בלי תקרה בפיקסלים: היא הייתה מנפחת את ההצצה
   לרוחב טאבלט במקום להגדיל את הכרטיס. */
.project-carousel__track > li {
  display: flex;
  flex: 0 0 92%;
  scroll-snap-align: start;
}

.project-card {
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

/* התמונה היא האובייקט המרכזי של הכרטיס ולא רקע: יחס קבוע, בצבע מלא,
   בלי סקרים מעליה. זה ההבדל המרכזי מול הסליידר, שבו הרנדר הרחב נחתך
   לוויופורט המובייל והוכהה ב-85%, כך שנראה ממנו פס צר וכהה.

   היחס נגזר מהמקום שנשאר ולא מהעדפה ויזואלית: בטלפון של 390px הכרטיס
   יוצא ברוחב 322px, וגוף הכרטיס לבדו תופס 343px. בין הכותרת הקבועה
   (68px) לסרגל ה-CTA התחתון (76px) נשאר פחות מזה יחד עם תמונה גבוהה,
   ולכן הכפתורים נפלו מתחת לקפל. ב-12/5 התמונה 133px והכרטיס כולו 479px.

   min-height: 0 הוא לא ניקיון אלא התנאי שמפעיל את aspect-ratio כאן:
   קבצי הכרטיסים הם 900x1200 לגובה, וכ-flex item בעמודה גובה המינימום
   האוטומטי הוא גובה התוכן — כלומר 427px של התמונה עצמה, שגובר על היחס
   ומבטל אותו לגמרי. בלי השורה הזו שינוי היחס כאן פשוט לא עושה כלום. */
.project-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
  flex: none;
  aspect-ratio: 12 / 5;
  background: var(--navy-2);
}

.project-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__badge {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 24, 32, 0.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* עמודה גמישה, כדי ששורת הפעולה תישאר בתחתית הכרטיס גם כשההערה מתחתיו
   נופלת לשורה אחת. בלי זה הכפתורים היו יושבים בגובה שונה בכל כרטיס
   ברצועה, וזה בולט בדיוק ברגע שבו הכרטיס הבא מציץ לצידו. */
.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 20px;
}

.project-card__area {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #b9c4cc;
  font-size: 12.5px;
}

.project-card__area svg {
  flex: none;
  color: var(--accent);
}

.project-card h3 {
  /* שם הפרויקט באנגלית בתוך הקשר עברי, בלי לשבור את סדר השורה */
  margin: 8px 0 0;
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  unicode-bidi: isolate;
}

/* שתי שורות מספיקות כדי למסגר את הפרויקט; הפירוט המלא נמצא בעמוד שלו.
   הקיצור גם מיישר את גובה שלושת הכרטיסים, שהתיאורים שלהם באורך שונה. */
.project-card__lead {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  color: #cdd6dd;
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* הנתונים שקונה מסנן לפיהם. בסליידר הם קיימים ב-projectsData אבל לא
   רונדרו כלל, ובמקומם הופיעה רק פסקת המתקנים. */
.project-card__facts {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.project-card__facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.project-card__facts dt {
  flex: none;
  color: #9aa7b0;
  font-size: 12.5px;
}

.project-card__facts dd {
  margin: 0;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.project-card__note {
  margin: 12px 0 0;
  color: #a8b4bd;
  font-size: 12.5px;
  line-height: 1.5;
}

.project-card__actions {
  display: flex;
  margin-top: auto;
  padding-top: 18px;
  gap: 10px;
}

.project-card__cta,
.project-card__whatsapp {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 700;
}

.project-card__cta {
  flex: 1 1 auto;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--white);
  color: var(--navy);
}

/* אייקון בלבד, ולכן ריבוע ולא כפתור שרוחבו נגזר ממילה: 48x48 הוא גם
   המינימום של יעד מגע וגם בדיוק הגובה של הכפתור הראשי לצידו, כך שהשניים
   יושבים על אותו קו. הרוחב שהמילה "וואטסאפ" תפסה עובר ל"לפרטי הפרויקט",
   שהוא הפעולה הראשית. */
.project-card__whatsapp {
  width: 48px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
}

/* שורה אחת בתחתית: המיקום ברצועה בצד אחד, המעבר לכל הפרויקטים בשני.
   בסליידר של הדסקטופ יש כאן חצים, פס התקדמות ומונה — ברצועה שנגללת
   באצבע כל אלה מיותרים, וההצצה לכרטיס הבא כבר עושה את העבודה. */
.project-carousel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 16px;
}

.project-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* שטח הנגיעה הוא 24px מלאים, והנקודה עצמה מצוירת ב-::after. נקודה בגודל
   7px לבדה נופלת הרבה מתחת למינימום של יעד מגע. */
.project-carousel__dots button {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
}

.project-carousel__dots button::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  content: '';
  transition: background-color 200ms ease, width 200ms ease;
}

.project-carousel__dots button.is-active::after {
  width: 20px;
  border-radius: 999px;
  background: var(--accent);
}

.project-carousel__all {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  gap: 8px;
}

/* ---------- כתובת משרד ---------- */

/* אותו רכיב מופיע בשני הקשרים: ככרטיס לבן בסקשן המשרדים, וכרשומה שקופה
   על הנייבי בתחתית בלוק ההמרה. הטיפוגרפיה כאן זהה לזו של .dubai-card —
   תווית זעירה, כותרת 19px ופסקה 15px — כי זו אותה יחידת תוכן בשפה של
   דף הבית. הגוונים הכחלחלים החד-פעמיים שהיו כאן (#c8d6df, #52636f,
   #7d8f9b) הוחלפו בטוקנים של המערכת. */
.office-entry__country {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.office-entry h3 {
  margin: 13px 0 9px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* אותה פסקה כמו ב-.dubai-card, כי זו אותה יחידת תוכן בשפה של דף הבית */
.office-entry > p,
.dubai-card p {
  margin: 0;
  color: #566068;
  font-size: 15px;
  line-height: 1.6;
}

.office-entry dl {
  display: grid;
  gap: 11px;
  margin: 22px 0 0;
}

.office-entry dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.office-entry dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.office-entry dt {
  color: var(--gray-3);
  font-size: 12px;
}

.office-entry dd {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.testimonials {
  overflow: hidden;
}

/* הכותרת והחיצים יושבים באותה שורה, כדי שהשליטה בסליידר תהיה צמודה לתוכן */
.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.testimonials__head .section-heading {
  margin-bottom: 0;
}

.testimonials__nav {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  margin-bottom: 34px;
}

.testimonials__nav button {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.testimonials__nav button:hover {
  border-color: var(--navy);
  background: rgba(0, 0, 0, 0.04);
}

.testimonials__nav button:active {
  transform: scale(0.94);
}

.testimonials__nav button.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.testimonial-scroll {
  /* המסילה חורגת מעבר לרוחב הקונטיינר, כך שהכרטיס הבא נחתך בקצה ולא נעלם */
  padding-bottom: 46px;
}

.testimonial-scroll .swiper-slide {
  height: auto;
}

.testimonial-scroll .swiper-pagination {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.testimonial-scroll .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  opacity: 1;
  background: var(--line);
  transition: width 200ms ease, background-color 200ms ease;
}

.testimonial-scroll .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 4px;
  background: var(--accent);
}

.testimonial-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.testimonial-card__thumb {
  position: relative;
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #66808f;
  background: linear-gradient(140deg, #dce6eb, #c5d2d9);
}

/* התמונה ממחישה את שלב העסקה שהעדות מדברת עליו ואינה דיוקן של הלקוח
   (ההסבר המלא לצד testimonials ב-homeContent.js). היחס קבוע כדי שכל
   הכרטיסים במסילה יתחילו את הציטוט באותו גובה. */
.testimonial-card__thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 40 / 27;
  object-fit: cover;
}

.testimonial-card__thumb span {
  font-size: 11px;
  font-weight: 600;
}

.testimonial-card__thumb button {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--white);
  border: 0;
  border-radius: 50%;
  background: var(--blue);
}

.testimonial-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px;
}

.testimonial-card blockquote {
  min-height: 150px;
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}

.testimonial-card footer {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.testimonial-card footer b {
  font-size: 14px;
}

.faq {
  background: var(--paper);
}

.faq__grid {
  display: grid;
  grid-template-columns: 0.66fr 1.34fr;
  gap: 68px;
  align-items: start;
}

.faq__intro {
  position: sticky;
  top: 105px;
  align-self: start;
}

/* הכותרת יושבת בעמודה צרה, ולכן היא קטנה מברירת המחדל של המערכת:
   בגודל המלא היא נשברה לחמש שורות ויצרה בדיוק את הרווח המיותר. */
.faq__intro .section-heading {
  margin-bottom: 16px;
}

.faq__intro .section-heading h2 {
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.1;
}

.faq__intro > p {
  max-width: 400px;
  margin: 0 0 26px;
  color: var(--gray-3);
  font-size: 15px;
}

.faq__disclaimer {
  display: block;
  margin: var(--rule-gap) auto 0;
  padding-top: var(--rule-gap);
  color: var(--gray-3);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

/* הכותרת היא עטיפה סמנטית בלבד; כל העיצוב יושב על הכפתור שבתוכה.
   הסלקטור כולל את ההורה כדי לגבור על .guide-article h3 בדף השאלות,
   שהוסיף לכל שורה סגורה מרווח של 34px מלמעלה ו-12px מלמטה. */
.faq-item > .faq-item__heading {
  margin: 0;
  font: inherit;
}

.faq-item__question {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  text-align: inherit;
  transition: color 160ms ease;
}

.faq-item__question:hover {
  color: var(--blue);
}

.faq-item__label {
  line-height: 1.4;
}

.faq-item__icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  place-items: center;
  border: 1px solid #c8cfd3;
  border-radius: 50%;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item__question:hover .faq-item__icon {
  border-color: var(--blue);
}

.faq-item.is-open .faq-item__icon {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
  transform: rotate(180deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 320ms;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.faq-item__panel > .faq-item__answer {
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}

.faq-item.is-open .faq-item__panel > .faq-item__answer {
  opacity: 1;
  transition: opacity 260ms ease 80ms;
}

.faq-item__answer {
  max-width: 700px;
  padding: 0;
  color: #59656c;
  font-size: 14.5px;
  line-height: 1.65;
}

.faq-item__answer-inner {
  padding-bottom: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__panel,
  .faq-item__panel > .faq-item__answer,
  .faq-item__icon {
    transition-duration: 1ms;
  }
}

.faq-item__answer p {
  margin: 0;
}

/* מסגרת הטופס. נותרה בשימוש טופס יצירת הקשר שבדף /contact. */
.qualification-form {
  padding: 44px;
  border: 1px solid #cedae2;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 60px rgba(16, 24, 32, 0.07);
}

.contact-fields {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-fields legend {
  width: 100%;
  margin: 0 0 18px;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-fields label {
  display: grid;
  gap: 7px;
  color: #44515a;
  font-size: 12px;
  font-weight: 600;
}

.contact-fields label small {
  color: var(--gray-3);
  font-weight: 400;
}

.contact-fields input {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid #cbd2d6;
  border-radius: 4px;
  background: #fbfcfc;
  direction: rtl;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.contact-fields input:hover,
.contact-fields label:hover input {
  border-color: #9fb3c1;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(16, 24, 32, 0.06);
}

.contact-fields input:focus,
.contact-fields input:focus:hover {
  border-color: var(--blue);
  background: var(--white);
  outline: 3px solid rgba(28, 74, 115, 0.13);
  box-shadow: none;
}

.contact-fields label:hover > span {
  color: var(--blue);
}

.contact-fields label > span {
  transition: color 160ms ease;
}

.submit-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--white);
  border: 0;
  border-radius: 4px;
  background: var(--blue);
  font-weight: 700;
  transition: background 180ms ease;
}

.submit-button:hover {
  background: var(--blue-dark);
}

.submit-button:disabled {
  background: #b9c5cd;
  cursor: not-allowed;
}

.form-microcopy {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  color: #71808a;
  font-size: 10px;
  text-align: center;
}

.form-microcopy svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.form-success {
  display: flex;
  min-height: 520px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.form-success svg {
  color: var(--green);
}

.form-success h3 {
  margin: 22px 0 7px;
  font-size: 30px;
}

.form-success p {
  max-width: 400px;
  margin: 0;
  color: var(--gray-3);
}

.form-success button {
  margin-top: 24px;
  padding: 10px 16px;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: transparent;
}

/* הזהב של הלוגו, המשתנה היחיד שהפוטר מוסיף. הוא לא נכנס ל-:root כי אין
   לו שימוש מחוץ לבלוק הזה: כאן הוא מסמן את ראשי העמודות ואת הריחוף,
   ובכך קושר את תחתית העמוד לסמל שיושב מעליה. */
.site-footer {
  --footer-gold: #b7a78b;
  --footer-text: #98a8b2;
  --footer-line: rgba(255, 255, 255, 0.1);

  padding: 85px 0 24px;
  color: var(--white);
  background: var(--navy);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.8fr 0.8fr 1.2fr;
  gap: 38px;
  padding-bottom: 48px;
}

.footer-brand > p {
  max-width: 250px;
  margin: 22px 0;
  color: var(--footer-text);
  font-size: 13px;
}

/* ---------- הרשתות החברתיות ---------- */

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.footer-social__link {
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--footer-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  place-items: center;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* הריחוף ממלא את העיגול בזהב של הלוגו ומרים אותו בשני פיקסלים. ההרמה
   היא מה שמבדיל בין ריחוף לבין מצב פעיל: שינוי צבע לבדו יכול להיקרא
   כ"הקישור הזה מסומן", ותנועה נקראת תמיד כתגובה למצביע. */
.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--navy);
  border-color: var(--footer-gold);
  background: var(--footer-gold);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .footer-social__link:hover,
  .footer-social__link:focus-visible {
    transform: none;
  }
}

/* ---------- עמודות הקישורים ---------- */

.footer-column,
.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-column h3,
.footer-contact h3 {
  margin: 0 0 13px;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* קו קצר בזהב מתחת לכל כותרת עמודה. הוא נגמר אחרי 22px ולא לאורך
   העמודה, כדי לסמן היכן העמודה מתחילה בלי לצייר עוד רשת קווים. */
.footer-column h3::after,
.footer-contact h3::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 9px;
  background: var(--footer-gold);
  content: '';
}

.footer-column a {
  margin: 0 0 11px;
  color: var(--footer-text);
  font-size: 12px;
  transition: color 0.16s ease;
}

.footer-column a:hover {
  color: var(--white);
}

.footer-contact ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--footer-text);
  font-size: 11.5px;
}

.footer-contact svg {
  flex: 0 0 auto;
  color: #b4c9d8;
}

/* ---------- האותיות הקטנות ---------- */

.footer-fineprint {
  display: grid;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #8a9aa5;
  font-size: 10px;
}

/* כל פרט רישוי בתווית משלו. ברשימה רציפה מופרדת ברווחים ארבעת המספרים
   נקראים כמחרוזת אחת ארוכה, ולא כארבע עובדות נפרדות. */
.footer-legal-meta span {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.5;
}

.footer-disclaimer {
  max-width: 760px;
  margin: 0;
  color: #73838e;
  font-size: 10px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding-top: 20px;
  color: #71818c;
  border-top: 1px solid var(--footer-line);
  font-size: 10px;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-bottom a {
  transition: color 0.16s ease;
}

.footer-bottom a:hover {
  color: var(--white);
}

.footer-bottom > a {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* נושא שש כרטיסיות לבנות, ולכן --paper ולא --white. קודם היה --light-blue,
   שהיה הגוון הבהיר היחיד בעמוד שהופיע פעם אחת בלבד. */
.why-dubai {
  background: var(--paper);
}

.dubai-figures {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius);
  background: var(--navy);
}

.dubai-figure {
  padding: 44px 34px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.dubai-figure:first-child {
  border-inline-start: 0;
}

.dubai-figure dt {
  /* מספרים נשארים בכיוון LTR כדי ש-0% לא יתהפך ל-%0 */
  direction: ltr;
  margin: 0;
  color: var(--white);
  text-align: right;
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.dubai-figure dd {
  margin: 10px 0 0;
  color: #9dabb5;
  font-size: 12.5px;
  line-height: 1.45;
}

.dubai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

/* אותו כרטיס בדיוק משמש את סקשן "למה דובאי" ואת רשת המשרדים בדפים
   הפנימיים — אותו ריפוד, אותו קו שיער ואותה הרמה בריחוף. שתי הרשתות
   מוגדרות בנפרד (.dubai-grid / .offices-grid), אבל הכרטיס עצמו מוגדר
   כאן פעם אחת. */
.dubai-card,
.offices-grid .office-entry {
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 180ms ease, transform 180ms ease;
}

.dubai-card:hover,
.offices-grid .office-entry:hover {
  border-color: rgba(28, 74, 115, 0.35);
  transform: translateY(-2px);
}

.dubai-card__icon {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  border-radius: 4px;
  background: rgba(28, 74, 115, 0.08);
}

.dubai-card h3 {
  margin: 18px 0 10px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cta-band {
  color: var(--white);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(28, 74, 115, 0.45) 0%, rgba(16, 24, 32, 0) 62%),
    var(--navy);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}

.cta-band .eyebrow {
  color: #b9cddd;
}

.cta-band__intro h2 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.cta-band__intro > p {
  max-width: 460px;
  margin: 22px 0 0;
  color: #aebbc4;
  font-size: 17px;
  line-height: 1.65;
}

.cta-band__points {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* שורת נקודה על רקע נייבי. אותה שורה בדיוק מופיעה בבלוק Peace Homes,
   ולכן שני הסקשנים חולקים אותה כאן. */
.cta-band__points li,
.peace-homes__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #bdc9d1;
  font-size: 15px;
}

.cta-band__points svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: #df8a3c;
}

/* המרווחים בטופס נקבעים במרג'ינים ולא ב-gap, כדי לשמור על קצב שונה בין השדות לכפתורים */
.cta-form {
  display: grid;
  padding: 34px 32px 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.cta-form label + label {
  margin-top: 16px;
}

.cta-form label > span {
  display: block;
  margin-bottom: 8px;
  color: #bdc9d1;
  font-size: 13px;
  font-weight: 600;
}

.cta-form label small {
  color: #8f9ba4;
  font-size: 11.5px;
  font-weight: 400;
}

.cta-form input {
  width: 100%;
  height: 50px;
  padding-inline: 14px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  direction: rtl;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 160ms ease, background 160ms ease;
}

.cta-form input::placeholder {
  color: #8f9ba4;
}

.cta-form input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.09);
}

.cta-form .submit-button {
  height: 56px;
  margin-top: 24px;
  color: var(--navy);
  background: var(--white);
}

.cta-form .submit-button:hover {
  background: var(--light-blue);
}

.cta-form__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  color: #8f9ba4;
  font-size: 12.5px;
  line-height: 1.5;
}

.cta-form__note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* .form-success is shared with the light-background contact form.
   Inside the dark CTA card its default colors drop below WCAG contrast. */
.cta-form .form-success p {
  color: #aebbc4;
}

/* ה-min-height המשותף (520px) נועד לטופס הרב-שלבי הגבוה יותר, ובכרטיס
   הקומפקטי כאן הוא גרם לקפיצה של ~73px ברגע השליחה. הערך מותאם לגובה
   תיבת התוכן של הכרטיס כדי שהמעבר יהיה ללא הזזת פריסה.

   הערך ירד מ-449px כשכפתור הוואטסאפ ירד מהטופס: הוא נמדד מול גובה
   הכרטיס, ולכן כל שינוי בתוכן הטופס מחייב מדידה מחדש — אחרת הקפיצה
   שהוא נועד למנוע חוזרת, רק בכיוון ההפוך. */
.cta-form .form-success {
  min-height: 383px;
}

.cta-form .form-success button {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
}

/* ---------- כפתור הוואטסאפ הצף ---------- */

/* ירוק וואטסאפ ולא צבע מהפלטה של האתר. זה הצבע שהופך את הכפתור למובן
   בלי מילה לצידו, וזו כל הסיבה שהוא יכול להיות אייקון בלבד. */
.whatsapp-float {
  position: fixed;
  z-index: 95;
  bottom: 24px;
  left: 24px;
  display: grid;
  width: 54px;
  height: 54px;
  color: var(--white);
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.28);
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1fb457;
  box-shadow: 0 12px 30px rgba(16, 24, 32, 0.36);
  transform: translateY(-3px);
}

.mobile-sticky-cta {
  display: none;
}

@media (max-width: 1180px) {
  .project-slider__body {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  }

  .project-slider__rail button {
    height: 228px;
  }

  .desktop-nav {
    gap: 16px;
  }

  .desktop-nav a {
    font-size: 13px;
  }

  .intro__grid,
  .process__grid,
  .faq__grid {
    gap: 60px;
  }

  .footer-top {
    grid-template-columns: 1.3fr repeat(3, 0.8fr);
  }

  .footer-contact {
    grid-column: 1 / -1;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-contact ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .desktop-nav,
  .header-actions {
    display: none;
  }

  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .site-header.is-scrolled .mobile-actions {
    color: var(--navy);
  }

  .site-header.is-menu-open {
    color: var(--navy);
  }

  .site-header.is-menu-open .brand--inverse,
  .site-header.is-menu-open .mobile-actions {
    color: var(--navy);
  }

  .menu-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    background: transparent;
  }

  /* שני המצבים שבהם ההדר לובש רקע לבן — נגלל, או תפריט פתוח — הופכים את
     שני הפקדים לכהים. אותו כלל בדיוק, ולכן סלקטור אחד. */
  .is-scrolled .menu-button,
  .is-scrolled .whatsapp-button,
  .site-header.is-menu-open .menu-button,
  .site-header.is-menu-open .whatsapp-button {
    color: var(--navy);
    border-color: rgba(16, 24, 32, 0.2);
  }

  .mobile-menu {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    display: block;
    width: min(420px, 100%);
    height: 100vh;
    padding: 104px 24px 30px;
    color: var(--navy);
    background: var(--white);
    box-shadow: -30px 0 70px rgba(16, 24, 32, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 200ms ease, transform 250ms ease;
  }

  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mobile-menu nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu nav > a:not(.button) {
    display: flex;
    min-height: 57px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    font-size: 19px;
    font-weight: 600;
  }

  .mobile-menu__cta {
    margin-top: 24px;
  }

  .hero {
    min-height: 740px;
    padding-block: 128px 96px;
  }

  /* מכאן ומטה ארבע התוויות לא נכנסות לרוחב המכל בשורה אחת. הפתרון הקודם
     היה גלילה לרוחב, אבל שורה נגללת בלי פס גלילה נראית כמו שני טאבים
     ותו לא — אין שום סימן שיש עוד. במקום זה השורה נפתחת לרשת 2x2: כל
     ארבע האפשרויות גלויות, כל אחת שטח נגיעה מלא, ואין מה לגלות. */
  .trust-tabs__bar {
    display: block;
    border-bottom: 0;
  }

  .trust-tabs__counter {
    display: none;
  }

  /* grid-auto-rows: 1fr — תווית אחת נשברת לשתי שורות ("שותפות עם Peace
     Homes") ובלי זה השורה השנייה של הרשת גבוהה מהראשונה. ארבעה כרטיסים
     באותו גובה נקראים כארבע אפשרויות שוות, וזה בדיוק המסר. */
  .trust-tabs__list {
    display: grid;
    gap: 8px;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
  }

  /* הכרטיס נושא את המצב הפעיל בעצמו, ולכן פס התחתית של גרסת הדסקטופ יורד */
  .trust-tabs__tab {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 13.5px;
    line-height: 1.32;
    transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  }

  .trust-tabs__tab:first-child {
    padding-inline-start: 14px;
  }

  .trust-tabs__tab::after {
    display: none;
  }

  .trust-tabs__tab[aria-selected='true'] {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
  }

  /* המילוי הכהה הוא סימן המצב הפעיל כאן. הספרה הכתומה על נייבי יורדת
     מתחת ליחס הניגודיות, ולכן היא נשארת לבנה מעומעמת. */
  .trust-tabs__tab[aria-selected='true'] .trust-tabs__tab-index {
    color: rgba(255, 255, 255, 0.62);
  }

  /* הלוח כבר לא ממשיך מקו השורה, ולכן הוא מקבל מסגרת ופינות מלאות */
  .trust-tabs__panel {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(16, 24, 32, 0.12);
    border-radius: var(--radius);
  }

  /* בעמודה אחת התמונה פותחת, כדי שהלוח לא ייפתח בקיר טקסט */
  .trust-tabs__media {
    min-height: 300px;
    order: -1;
  }

  .trust-tabs__body {
    padding: 34px;
  }

  .trust-tabs__lead {
    max-width: none;
  }

  .trust-tabs__footer {
    padding: 20px 34px;
  }

  /* minmax(0,1fr) ולא 1fr: מינימום auto נותן לתמונה (aspect-ratio 4/3 ומינימום
     גובה 310px) לדחוף את המסלול ל-413px ולחרוג מהמכל, מה שגזר את הצד הימני. */
  .intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .intro__visual {
    width: 82%;
    margin-inline: auto;
  }

  /* מתחת ל-1024 התוכן והמסילה נערמים זה מעל זה. הריפוד וה-gap ממשיכים
     להגיע מהטוקנים — כאן יורדת רק תקרת הגובה. */
  .project-slider {
    min-height: 0;
  }

  .project-slider__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .project-slider__body {
    align-items: stretch;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
  }

  .project-slider__scrim {
    background:
      linear-gradient(to left, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0.62) 55%, rgba(16, 24, 32, 0.42) 100%),
      linear-gradient(to top, rgba(16, 24, 32, 0.78) 0%, rgba(16, 24, 32, 0) 55%),
      linear-gradient(to bottom, rgba(16, 24, 32, 0.85) 0%, rgba(16, 24, 32, 0) 34%);
  }

  .project-slider__lead {
    max-width: 620px;
  }

  /* מתחת ל-1024 המסילה חוזרת להיות גוללן נייטיב במקום רצועה מונפשת */
  .project-slider__rail {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .project-slider__rail::-webkit-scrollbar {
    display: none;
  }

  .project-slider__track {
    scroll-snap-type: x mandatory;
  }

  /* בגלילה נייטיב אין צורך בעותקים הכפולים של הרצועה */
  .project-slider__track > li[aria-hidden='true'] {
    display: none;
  }

  /* רוחב גמיש עם רצפה: הכרטיסים ממלאים את המסילה כשהם נכנסים בה, ורק כשהרצפה
     גוברת הם גולשים והגלילה הנייטיב נכנסת לפעולה. רוחב קבוע היה משאיר כאן
     שטח מת בקצה כשמספר הפרויקטים קטן. */
  .project-slider__track > li {
    flex-basis: max(158px, calc((100% - (var(--rail-cards) - 1) * var(--card-gap)) / var(--rail-cards)));
    scroll-snap-align: start;
  }

  .project-slider__rail button {
    height: 226px;
  }

  .property-focus__media {
    min-height: 400px;
  }

  .property-focus__body {
    padding: 34px;
  }

  .peace-homes__content {
    width: 57.5%;
  }

  .process__grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .dubai-figure {
    padding: 34px 22px;
  }

  .dubai-figure dt {
    font-size: clamp(30px, 4.4vw, 60px);
  }

  .dubai-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-band__inner {
    gap: 56px;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 68px;
  }

  /* 16px היו צרים מדי לשורת טקסט בעברית — הטקסט נגע כמעט בקצה המסך.
     20px הוא השוליים של כל העמוד במובייל. הערך יורד כאן פעם אחת על
     --gutter, ולכן גם .container וגם הסקשנים שנפרשים על כל הרוחב וגם
     רצועת הפרויקטים הנגללת מיישרים אליו יחד. */
  :root {
    --gutter: 20px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2 {
    font-size: clamp(34px, 10.5vw, 47px);
  }

  .section-heading p {
    margin-top: 16px;
    font-size: 16px;
  }

  .site-header {
    height: 68px;
  }

  .brand__mark {
    height: 46px;
  }

  /* 500px הם רצפה ולא גובה נעול: אם התוכן גדל (טקסט ארוך יותר, גודל גופן
     מוגדל בהגדרות המערכת) עדיף שהסקשן יגדל מאשר שהכפתורים ייחתכו.
     ה-padding העליון מפנה את הכותרת מתחת להדר הצף בגובה 68px, וההפרש
     בינו לבין ה-padding התחתון הוא מה שמחזיר את הגוש לאמצע האופטי.
     20px משני הצדדים הם מה שמחזיק את הטקסט מקצה המסך. */
  .hero {
    min-height: 500px;
    padding: 76px 20px 30px;
  }

  /* הטקסט פרוש על כל גובה הווידאו ולא רק על שליש ממנו, ולכן הכהות שטוחה
     ואנכית: עדשה רדיאלית ברוחב מסך צר משאירה שוליים כהים מדי סביב אותו
     גוש טקסט עצמו. */
  .hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.7) 46%, rgba(0, 0, 0, 0.74) 100%);
  }

  /* הקו יורד: בתחתית מסך צר הוא מתנגש בכפתורים שנפרשים לרוחב מלא */
  .hero__route {
    display: none;
  }

  .hero__eyebrow {
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.5;
  }

  /* גדלי הטיפוגרפיה כאן נגזרים מתקציב הגובה: הכותרת, הפסקה ושני הכפתורים
     צריכים להיכנס יחד בתוך 500px פחות ההדר. הכותרת נשארת בטווח 28-38px
     והפסקה ב-15.5px — עדיין גדלי קריאה נוחים במובייל.
     הטווח נבחר גם כדי שהשבירות הכפויות ב-h1 יחזיקו: הביטוי הארוך ביותר
     תופס 9.1em, כלומר 255px ב-320px רוחב מסך מתוך 280px פנויים.
     balance הוא רשת ביטחון אם ביטוי בכל זאת יגלוש וייאלץ להישבר. */
  .hero h1 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.15;
    text-wrap: balance;
  }

  .hero__lead {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.6;
  }

  .hero__buttons {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  /* 48px במקום 52 — עדיין מעל מינימום שטח הנגיעה של 44px */
  .hero__buttons .button {
    width: 100%;
    min-height: 48px;
  }

  .trust-tabs__tab {
    min-height: 60px;
    padding: 11px 12px;
    font-size: 13px;
  }

  .trust-tabs__tab:first-child {
    padding-inline-start: 12px;
  }

  .trust-tabs__media {
    min-height: 220px;
  }

  .trust-tabs__body {
    padding: 28px 22px;
  }

  .trust-tabs__body h3 {
    font-size: 23px;
  }

  .trust-tabs__footer {
    display: grid;
    gap: 18px;
    padding: 20px 22px;
  }

  .trust-tabs__stats dt {
    font-size: 22px;
  }

  .trust-tabs__stats dd {
    font-size: 12px;
  }

  .trust-tabs__link {
    justify-content: space-between;
    padding: 13px 18px;
  }

  .intro__grid {
    gap: 44px;
  }

  .intro__copy {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* בדסקטופ התווית מרחפת בפינה הימנית-תחתונה של התמונה. במסך צר היא
     מתנגשת עם קו הקישוט של ::after, לכן היא יוצאת מהריחוף ומקבלת שורה
     משלה מתחת לתמונה — flow רגיל, בלי position/transform. */
  .intro__visual {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  .intro__image {
    min-height: 310px;
  }

  /* התווית ירדה מהתמונה אל שורה משלה, ולכן היא חוזרת לצבע הטקסט הרגיל:
     לבן על רקע העמוד הבהיר לא נראה כלל. */
  .intro__caption {
    position: static;
    justify-content: center;
    color: inherit;
  }

  .property-focus {
    grid-template-columns: 1fr;
  }

  .property-focus__media {
    min-height: 240px;
  }

  .property-focus__body {
    padding: 26px;
  }

  .peace-homes {
    min-height: auto;
    flex-direction: column;
  }

  /* במובייל כל גובה הסקשן הוא טקסט מעל הווידאו, ולכן ההכהיה אחידה לאורך כולו
     ולא נפתחת בתחתית. */
  .peace-homes::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.84) 50%, rgba(0, 0, 0, 0.86) 100%);
  }

  .peace-homes__content {
    width: 100%;
    padding: var(--stage-pad) var(--gutter) 0;
  }

  /* שתי העמודות נערמות, ולכן ריפוד התחתית של הסקשן עובר מהתוכן אל עמודת
     המסמכים שיושבת מתחתיו — אחרת נוצר תפר כפול ביניהן. */
  .peace-homes__proof {
    width: 100%;
    padding: 36px var(--gutter) var(--stage-pad);
  }

  .peace-homes__logo {
    height: 46px;
    margin-bottom: 26px;
  }

  .peace-homes h2 {
    font-size: 44px;
  }

  /* שתי העמודות חולקות רוחב מסך אחד, ולכן המספר קטן וההפרדה מתהדקת —
     אחרת התוויות נשברות לשלוש שורות כבר ב-360 פיקסלים. */
  .peace-homes__stats dt {
    font-size: 26px;
  }

  .peace-homes__stats div + div {
    margin-inline-start: 22px;
    padding-inline-start: 22px;
  }

  .peace-homes__actions {
    display: grid;
  }

  .process__grid,
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .process__intro,
  .faq__intro {
    position: static;
  }

  /* במובייל המונה וקו המסלול ישראל–דובאי מיותרים: הרשימה עצמה כבר ממוספרת
     והשלבים נקראים ברצף אחד, כך שהאינדיקטורים רק מרחיקים את התוכן. */
  .process__count,
  .process__route {
    display: none;
  }

  .process-list li {
    min-height: auto;
    grid-template-columns: 42px 1fr;
    gap: 13px;
  }

  .process-list > li > span {
    gap: 10px;
  }

  .process-list__dot {
    width: 9px;
    height: 9px;
  }

  .process-list h3 {
    font-size: 21px;
  }

  /* כללי הסליידר ירדו מכאן. מתחת ל-720px הוא כבר לא מרונדר, ובמקומו
     נמצאת ערימת הכרטיסים שמעוצבת ב-.project-stack / .project-card. */

  /* בנייד החיצים מיותרים: הסליידר נגרר באצבע והנקודות מספיקות כאינדיקציה */
  .testimonials__head {
    display: block;
  }

  .testimonials__nav {
    display: none;
  }

  .testimonial-scroll {
    padding-bottom: 40px;
  }

  .testimonial-card blockquote {
    min-height: 170px;
    font-size: 18px;
  }

  .faq-item__question {
    min-height: 58px;
    gap: 12px;
    font-size: 15.5px;
  }

  .faq__disclaimer {
    margin-top: 34px;
  }

  .qualification-form {
    padding: 28px 18px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .contact-fields legend {
    font-size: 21px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 42px 22px;
  }

  .footer-brand,
  .footer-contact {
    grid-column: 1 / -1;
  }

  .footer-contact ul {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-bottom nav {
    gap: 10px 16px;
  }

  /* מעל סרגל ה-CTA הדביק ולא מתחתיו. הסרגל תופס 64px (48px כפתור +
     8px ריפוד מכל צד) ויושב 10px מהתחתית, ולכן 84px מותירים 10px רווח
     גם כשהוא מוצג. כשהוא מוסתר הכפתור פשוט צף מעט גבוה יותר — עדיף על
     כפתור שנעלם ומופיע לפי מצב של רכיב אחר. */
  .whatsapp-float {
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 14px;
    width: 50px;
    height: 50px;
  }

  .mobile-sticky-cta {
    position: fixed;
    z-index: 90;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(16, 24, 32, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 35px rgba(16, 24, 32, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity 200ms ease, transform 220ms ease;
  }

  .mobile-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-sticky-cta a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-sticky-cta a:last-child {
    color: var(--white);
    background: var(--blue);
  }

  .dubai-figures {
    grid-template-columns: repeat(2, 1fr);
  }

  .dubai-figure {
    padding: 28px 18px;
  }

  .dubai-figure:nth-child(odd) {
    border-inline-start: 0;
  }

  .dubai-figure:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .dubai-figure dt {
    font-size: 30px;
  }

  /* שישה כרטיסים בטור אחד יצרו גלילה ארוכה מדי לפני ה-CTA. במובייל הם הופכים
     למסילה אופקית עם הצצה לכרטיס הבא, כדי שיהיה ברור שיש המשך ולא רק כרטיס אחד. */
  .dubai-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    /* יציאה אל קצה המסך ואז ריפוד פנימי, כדי שהכרטיס הראשון יישאר על קו השוליים */
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dubai-grid::-webkit-scrollbar {
    display: none;
  }

  .dubai-card {
    flex: 0 0 82%;
    padding: 26px 22px 28px;
    scroll-snap-align: start;
  }

  .cta-band__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cta-band__intro h2 {
    font-size: clamp(30px, 8.6vw, 40px);
  }

  .cta-form {
    padding: 26px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* ה-kill-switch הגלובלי מבטל רק את משך המעבר, לא את ההזזה עצמה */
  .dubai-card:hover,
  .offices-grid .office-entry:hover {
    transform: none;
  }
}

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

/* ---------- מציין מקום ---------- */

/* תוכן שממתין לחומר אמיתי מהלקוח. מסומן חזותית כדי שלא ייקרא כעובדה. */
.placeheld {
  padding: 1px 5px;
  color: #7a6448;
  border: 1px dashed #d9c3a8;
  border-radius: 3px;
  background: #fbf6ef;
  font-size: 0.94em;
  font-style: normal;
  white-space: nowrap;
}

.footer-legal-meta .placeheld,
.footer-contact .placeheld,
.certificate-frame .placeheld {
  color: #c2ac8f;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

.ltr {
  direction: ltr;
  text-align: left;
}

/* ---------- ניווט: מצב פעיל ---------- */

.desktop-nav a.is-current::after {
  width: 100%;
}

.mobile-menu nav > a.is-current:not(.button) {
  color: var(--blue);
}

/* ---------- שורת המשך בתחתית סקשן ---------- */

/* "מה שקראת כאן מספיק כדי להבין, וזה הקישור לבדיקה לעומק" */
.section-cta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.section-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  transition: color 180ms ease, gap 180ms ease;
}

.section-cta__link:hover {
  color: var(--accent);
  gap: 18px;
}

.section-cta p {
  max-width: 520px;
  margin: 0;
  color: var(--gray-3);
  font-size: 13.5px;
}

.process .section-cta__link {
  color: #dd8a41;
}

.process .section-cta__link:hover {
  color: var(--white);
}

.process .section-cta p {
  color: #9dabb5;
}

/* ---------- פירורי לחם ---------- */

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #93a3ae;
}

.breadcrumbs a {
  color: #b9cddd;
  transition: color 160ms ease;
}

.breadcrumbs a:hover {
  color: var(--white);
}

.breadcrumbs [aria-current='page'] {
  color: var(--white);
  font-weight: 600;
}

/* ---------- כותרת עליונה של דף פנימי ---------- */

/* גובה אחיד לכל הדפים הפנימיים כדי שהמעבר בין דפים לא יקפוץ. התוכן נשאר
   צמוד לראש הבלוק, ולכן פירורי הלחם והכותרת יושבים באותה נקודה בכל דף,
   וההפרש באורך הטקסט נבלע ברווח שמתחת. */
.page-hero {
  /* ברירת המחדל של תמונת האווירה. כל דף דורס אותה דרך prop-ה image
     של PageHero, שמזריק את המשתנים האלה כסגנון על ה־section. */
  --page-hero-image: url('/images/hero-ne-group.webp');
  --page-hero-image-position: center 38%;

  position: relative;
  isolation: isolate;
  min-height: 520px;
  padding: 152px 0 76px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--navy);
}

/* שכבת אווירה: תמונה עמומה מאחורי הכותרת. */
.page-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--page-hero-image);
  background-position: var(--page-hero-image-position);
  background-size: cover;
  content: '';
  opacity: 0.38;
}

/* הצללה מעל התמונה: שומרת על ניגודיות הטקסט ועל קריאות הכותרת העליונה. */
.page-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to left, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0.68) 48%, rgba(16, 24, 32, 0.32) 100%),
    linear-gradient(180deg, rgba(16, 24, 32, 0.82) 0%, rgba(16, 24, 32, 0) 42%, rgba(16, 24, 32, 0.55) 100%);
  content: '';
}

.page-hero .eyebrow {
  color: #b9cddd;
}

.page-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(36px, 4.6vw, 66px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.03;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: #b3c0c9;
  font-size: 17px;
  line-height: 1.65;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---------- פריסת דף ארוך: סרגל צד + גוף התוכן ----------
   שני סוגי הדפים הארוכים באתר הם אותה פריסה בדיוק: המדריכים (.guide,
   שמשמש גם את דף השאלות) ודף התהליך (.proc). גוף התוכן פותח את השורה
   מימין, וסרגל דביק נדחק לסופה. כך גוף הטקסט מיושר לכותרת ה-hero שמעליו
   ול-CTA שמתחתיו, במקום לסגת פנימה ברוחב הסרגל ולייצר מדרגה באמצע הדף.

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

   הסרגל נשאר ראשון ב-DOM לטובת ניווט במקלדת, ולכן המיקום בעמודות נקבע
   במפורש ולא לפי סדר האלמנטים. */

.guide {
  padding: 88px 0 104px;
  background: var(--white);
}

.guide__grid,
.proc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 76px;
  align-items: start;
}

/* הקו יושב בצד שפונה אל גוף הטקסט, כלומר בתחילת השורה של הסרגל. שם הוא
   מפריד בין שני הטורים; בקצה הנגדי הוא רק ריחף על שולי הדף. */
.guide-toc,
.proc-rail {
  position: sticky;
  top: 104px;
  grid-column: 2;
  grid-row: 1;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--line);
}

.guide-article,
.proc-body {
  grid-column: 1;
  grid-row: 1;
}

.guide-article {
  max-width: 760px;
}

/* 822 = 62 פיקסלים של הזחת השלב + 760 של טור הטקסט. כך שורת טקסט בתוך
   שלב יוצאת באותו רוחב מדויק כמו פסקה ב-.guide-article, ולשני סוגי
   הדפים הארוכים יש אורך שורה אחד. */
.proc-body {
  max-width: 822px;
}

.guide-toc__title,
.proc-rail__title {
  display: block;
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.guide-toc ol,
.proc-rail__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* הטיפוגרפיה של שורת הסרגל משותפת. מה שנקבע לכל סוג בנפרד הוא הפריסה
   בתוך השורה: במדריכים כותרת ומונה בשני קצוות, ובדף התהליך מספר השלב
   בטור בעל רוחב קבוע והכותרת לצידו. */
.guide-toc a,
.proc-rail__item a {
  position: relative;
  padding: 8px 0;
  color: #56636b;
  font-size: 13.5px;
  line-height: 1.45;
  transition: color 160ms ease;
}

.guide-toc a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.proc-rail__item a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.guide-toc a:hover,
.proc-rail__item a:hover {
  color: var(--blue);
}

/* הסקשן שנקרא כרגע. הפס מיושר לקו האנכי של הסרגל, שנמצא 22 פיקסלים
   לפני תחילת הטקסט ועוד פיקסל של עובי הקו עצמו. */
.guide-toc a[aria-current='true'],
.proc-rail__item a[aria-current='true'] {
  color: var(--navy);
  font-weight: 600;
}

.guide-toc a[aria-current='true']::before,
.proc-rail__item a[aria-current='true']::before {
  position: absolute;
  inset-inline-start: -23px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--accent);
  content: '';
}

.guide-toc a i,
.proc-rail__item i {
  color: var(--gray);
  font-size: 11px;
  font-style: normal;
}

.guide-toc a i {
  flex: none;
}

/* מספר השלב. tabular-nums כדי ששני הספרות יישארו באותו רוחב בכל שורה. */
.proc-rail__item i {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.guide-section + .guide-section {
  margin-top: 62px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

/* בקטגוריות השאלות אין קו הפרדה נוסף: לכל שאלה כבר יש קו תחתון משלה,
   ושני קווים סמוכים יצרו רעש. ההפרדה נעשית במרווח בלבד. */
.faq-category + .faq-category {
  margin-top: 54px;
}

.guide-article h2 {
  margin: 0 0 20px;
  color: var(--navy);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  scroll-margin-top: 100px;
}

.guide-article h3 {
  margin: 34px 0 12px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.guide-article > p,
.guide-section > p {
  margin: 0 0 16px;
  color: #4e5960;
  font-size: 16.5px;
  line-height: 1.7;
}

/* ---------- רשימות בתוך מאמר ---------- */

.guide-list,
.guide-ordered {
  margin: 0 0 20px;
  padding-inline-start: 20px;
  color: #4e5960;
  font-size: 16px;
  line-height: 1.65;
}

.guide-list li,
.guide-ordered li {
  margin-bottom: 9px;
}

.guide-ordered li::marker {
  color: var(--blue);
  font-weight: 700;
}

/* רשימת בדיקה ממוספרת. סימני וי בתוך מלבנים אפורים הם ברירת המחדל
   של כל אתר, ורשימת בדיקה היא בדיוק המקום שבו סדר הפריטים משמעותי —
   לכן מספר במקום סימן, וקו מפריד במקום מסגרת סביב כל שורה. הקו האנכי
   בקצה קושר את השורות לרשימה אחת. */
.guide-checklist {
  margin: 0 0 26px;
  padding: 0 0 0 0;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--accent);
  counter-reset: guide-check;
  list-style: none;
}

.guide-checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.55;
}

.guide-checklist li:first-child {
  padding-top: 2px;
}

.guide-checklist li:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.guide-checklist li::before {
  color: var(--accent);
  content: counter(guide-check, decimal-leading-zero);
  counter-increment: guide-check;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1.9;
}

/* ---------- כרטיסי הגדרה ---------- */

/* כל מונח מקצועי שמוצג באתר מוסבר בעברית פשוטה במקום שבו הוא מופיע. */
.term-grid {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
}

.term-card {
  padding: 18px 20px;
  border: 1px solid #cddce8;
  border-radius: var(--radius);
  background: var(--light-blue);
}

.term-card dt {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.term-card dd {
  margin: 7px 0 0;
  color: #4b5e6d;
  font-size: 14.5px;
  line-height: 1.6;
}

.guide-figures {
  margin: 6px 0 26px;
  grid-template-columns: repeat(4, 1fr);
}

.guide-figures .dubai-figure {
  padding: 26px 20px;
}

.guide-figures .dubai-figure dt {
  font-size: clamp(26px, 2.6vw, 34px);
}

.guide-figures .dubai-figure dd {
  font-size: 11.5px;
}

/* ---------- תיבות הערה ---------- */

.callout {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid;
  border-radius: var(--radius);
}

.callout svg {
  flex: none;
  margin-top: 2px;
}

.callout b {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
}

.callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* מידע וסייגים */
.callout--info {
  color: #3f5262;
  border-color: #cddce8;
  background: var(--light-blue);
}

.callout--info svg,
.callout--info b {
  color: var(--blue);
}

/* אזהרה או סיכון שאסור להסתיר */
.callout--warn {
  color: #6e553e;
  border-color: #ead8c7;
  background: #faf5ef;
}

.callout--warn svg,
.callout--warn b {
  color: #a2662a;
}

/* תוכן שממתין לחומר או לאישור מהלקוח */
.callout--pending {
  color: #5c666d;
  border: 1px dashed #c6ced3;
  background: #fafbfb;
}

.callout--pending svg,
.callout--pending b {
  color: var(--gray-3);
}

/* ---------- Peace Homes: נקודות מעשיות ---------- */

.peace-homes__points {
  display: grid;
  max-width: 560px;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.peace-homes__points svg {
  flex: none;
  margin-top: 4px;
  color: #df8a3c;
}

/* ---------- עדויות הדגמה ---------- */

.testimonial-card--demo {
  border-style: dashed;
}

.testimonial-card__demo {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 4px 10px;
  color: #5c666d;
  border: 1px dashed #a9b8c1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
}

/* ---------- סקשן המשרדים ---------- */

/* --paper כמו כל סקשן שנושא כרטיסים: הכרטיס עצמו לבן עם קו שיער של
   --line, ולכן הוא צריך משטח שאינו לבן כדי להיראות. הרקע הקודם היה
   --light-blue, שאינו גוון סקשן במערכת אלא מילוי הדגשה פנימי. */
.offices {
  background: var(--paper);
}

/* בדפים הפנימיים כבר יש h1 גדול ב-PageHero מעל, ולכן הכותרת יורדת לסולם
   של .page-cta — הסולם של סקשן משני בדף פנימי — ולא לסולם התצוגה של דף
   הבית, ששם ה-h2 הוא הכותרת הראשונה שנפגשים בה. */
.offices .section-heading h2 {
  font-size: clamp(30px, 3.2vw, 46px);
}

/* אותה רשת ואותו כרטיס כמו .dubai-grid / .dubai-card — הכרטיס עצמו
   מוגדר יחד עם .dubai-card למעלה. */
.offices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* בדף יצירת הקשר הסקשן ממשיך את משטח הטופס שמעליו במקום לפתוח גוון
   שלישי בתוך עמוד קצר. הכרטיסים נשארים לבנים, ולכן הם עדיין נקראים. */
.contact-page + .offices {
  padding-top: 0;
  background: var(--light-blue);
}

/* ================================================================== */
/* דף התהליך                                                           */
/* ================================================================== */

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

   הפריסה עצמה (.proc__grid, .proc-rail, .proc-body ושורת הסרגל) מוגדרת
   יחד עם זו של המדריכים למעלה, כי היא אותה פריסה בדיוק. מה שנשאר כאן
   הוא רק מה שייחודי לדף התהליך. */

.proc {
  padding: 84px 0 104px;
  background: var(--white);
}

/* ---------- סרגל השלבים ---------- */

/* שם התקופה, מעל קבוצת השלבים שמתחתיו */
.proc-rail__phase {
  margin: 20px 0 6px;
  color: var(--gray-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.proc-rail__list > li:first-child {
  margin-top: 0;
}

.proc-rail__item a[aria-current='true'] i {
  color: var(--accent);
}

.proc-rail__note {
  margin: 26px 0 0;
  padding-top: 18px;
  color: var(--gray-3);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- תקופה ---------- */

.proc-phase + .proc-phase {
  margin-top: 96px;
}

/* בלי קו עליון: הכותרת הגדולה ותווית התקופה כבר מסמנות התחלה, והקו רק
   הוסיף מחיצה שלישית לדף שכבר מחולק במספרים ובקו האנכי של השלב.
   ההפרדה בין תקופות נעשית במרווח בלבד. */
.proc-phase__head {
  margin-bottom: 42px;
}

.proc-phase__mark {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.13em;
}

.proc-phase__head h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.proc-phase__head p {
  max-width: 760px;
  margin: 0;
  color: #56636b;
  font-size: 15.5px;
  line-height: 1.7;
}

/* ---------- שלב ---------- */

/* המספר יושב בעיגול על ראש קו אנכי שיורד לאורך השלב. הקו הוא שמחליף
   את קו ההפרדה האופקי שהיה כאן קודם: הוא אומר "אתה בתוך רצף" במקום
   "כאן נגמר משהו". */
.step {
  position: relative;
  padding-inline-start: 62px;
  scroll-margin-top: 100px;
}

.step + .step {
  margin-top: 46px;
}

.step::before {
  position: absolute;
  inset-inline-start: 21px;
  top: 50px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
  content: '';
}

/* המספר הוא העוגן של השלב, ולכן הוא מלא ולא מתאר: כשהוא היה עיגול לבן
   עם מסגרת אפורה הוא היה חלש מהכותרת שהוא מתייג, ונקרא כקישוט. */
.step__n {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: var(--navy);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.step__head {
  min-height: 43px;
  padding-top: 3px;
}

.step__head h3 {
  margin: 0 0 9px;
  color: var(--navy);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* בלי max-width משלו: הרוחב נקבע ב-.proc-body, כמו כל שאר הטקסט בדף */
.step__lead {
  margin: 0;
  color: #4e5960;
  font-size: 16.5px;
  line-height: 1.65;
}

.step__flow {
  margin-top: 28px;
}

.step__label {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

/* הרצף נשאר ol ברמת הסימון, אבל בלי מספרים גלויים: המספור היחיד שנראה
   בדף הוא מספר השלב. כשגם הרצף היה ממוספר 01–04 באותו צבע ובאותו משקל,
   אותו "03" הופיע בדף בשתי משמעויות שונות ולא היה אפשר לדעת אם מדובר
   בשלב השלישי או בפעולה השלישית בתוך שלב אחר. */
.step__seq {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step__seq li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  color: #4e5960;
  font-size: 15.5px;
  line-height: 1.6;
}

.step__seq li::before {
  align-self: start;
  width: 5px;
  height: 5px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--accent);
  content: '';
}

/* ---------- חלוקת האחריות ---------- */

/* השאלה האמיתית של הקורא בכל שלב היא "מה אני צריך לעשות ומה נעשה
   בשבילי". זה ניגוד בין שני צדדים, ולכן פאנל אחד עם קו מפריד ביניהם
   ולא שני כרטיסים נפרדים שנקראים כשתי רשימות בלתי קשורות.
   המסגרת, הרקע והקווים העליונים הורדו: שלושה קווים אופקיים בתוך שלב
   אחד קטעו את הקריאה במקום לארגן אותה. נשאר רק הקו האנכי שבין שני
   הצדדים, כי הוא היחיד שנושא משמעות — הוא הניגוד עצמו. הזהות של כל צד
   נשענת על התגית הצבעונית ועל הכותרת. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 34px;
}

.split__side {
  padding-bottom: 2px;
}

.split__side--you {
  padding-inline-end: 32px;
}

.split__side--us {
  padding-inline-start: 32px;
  border-inline-start: 1px solid var(--line);
}

.split__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.split__side--you .split__tag {
  color: var(--accent);
}

.split__side--us .split__tag {
  color: var(--gray-3);
}

.split__side h4,
.split__others h4 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.split__side ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.split__side li {
  position: relative;
  padding-inline-start: 15px;
  color: #4e5960;
  font-size: 15.5px;
  line-height: 1.6;
}

/* קו קצר במקום סימן וי: סימן וי מרמז על "בוצע", וכאן מדובר במשימה. */
.split__side li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--gray);
  content: '';
}

/* הגורמים המעורבים הם ישויות ולא פעולות, ולכן שורת תגיות לרוחב הפאנל
   ולא רשימה רביעית של תבליטים. */
.split__others {
  grid-column: 1 / -1;
  margin-top: 28px;
}

.split__others h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.split__others ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* רקע במקום מסגרת: התגיות הן שש-שבע ישויות ברצף, ומסגרת לכל אחת הוסיפה
   עשרות קווים קצרים לדף. הרקע האפור מבודד אותן בלי לצייר אותן. */
.split__others li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 3px;
  background: var(--paper);
  font-size: 13px;
}

.split__others b {
  color: var(--navy);
  font-weight: 600;
}

.split__others li span {
  color: var(--gray-3);
  font-size: 12px;
}

.split__others li span::before {
  content: '· ';
}

/* ---------- המעבר לשלב הבא ---------- */

.step .callout {
  margin: 24px 0 0;
}

/* בלי קו עליון: הקו הפך את המשפט לבלוק רביעי בעל מסגרת משלו, בעוד
   שתפקידו הוא רק לגשר אל השלב הבא. */
.step__next {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 24px 0 0;
  color: var(--gray-3);
  font-size: 14px;
  line-height: 1.6;
}

.step__next svg {
  flex: none;
  align-self: flex-start;
  margin-top: 4px;
  color: var(--gray);
}

.step__next b {
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.step__next b::after {
  margin: 0 7px;
  color: var(--gray-2);
  content: '|';
  font-weight: 400;
}

/* ---------- דף השאלות ---------- */

.faq-category {
  scroll-margin-top: 100px;
}

.faq-category .faq-list {
  margin-top: 8px;
}

/* ---------- דף יצירת קשר ---------- */

.contact-page {
  padding-bottom: 96px;
  background: var(--light-blue);
}

.contact-page__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 76px;
  align-items: start;
}

.contact-page__aside h2 {
  margin: 0 0 20px;
  color: var(--navy);
  font-size: 26px;
  letter-spacing: -0.025em;
}

.contact-page__aside h3 {
  margin: 34px 0 16px;
  color: var(--navy);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.contact-page__channels {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid #c8d6df;
  list-style: none;
}

.contact-page__channels li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3f5262;
  font-size: 14px;
}

.contact-page__channels svg {
  flex: none;
  color: var(--blue);
}

.contact-page__pending {
  margin: 16px 0 0;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.contact-page__expect {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-page__expect li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4c5e69;
  font-size: 14px;
}

.contact-page__expect svg {
  flex: none;
  margin-top: 3px;
  color: var(--green);
}

.contact-form .contact-fields {
  display: grid;
  gap: 16px;
}

.contact-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #cbd2d6;
  border-radius: 4px;
  background: #fbfcfc;
  direction: rtl;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  transition: border-color 160ms ease, background 160ms ease;
}

.contact-form textarea:focus {
  border-color: var(--blue);
  background: var(--white);
  outline: 3px solid rgba(28, 74, 115, 0.13);
}

.contact-form .submit-button {
  margin-top: 6px;
}

.contact-form .form-success {
  min-height: 420px;
}

/* ---------- דף הפרויקטים ---------- */

.projects-page {
  background: var(--paper);
}

.projects-page__note {
  max-width: 860px;
  margin-top: 48px;
  background: var(--white);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-tile {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.project-tile:hover {
  border-color: rgba(28, 74, 115, 0.35);
  box-shadow: var(--shadow);
}

.project-tile__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.project-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.project-tile:hover .project-tile__media img {
  transform: scale(1.03);
}

.project-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 20px;
}

.project-tile__area {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--gray-3);
  font-size: 12.5px;
}

.project-tile h3 {
  margin: 8px 0 3px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.project-tile h3 a {
  color: var(--navy);
  transition: color 160ms ease;
}

.project-tile h3 a:hover {
  color: var(--blue);
}

.project-tile__developer {
  margin: 0;
  color: var(--gray-3);
  font-size: 12px;
}

.project-tile__stats {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.project-tile__stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.project-tile__stats dt {
  flex: none;
  color: var(--gray-3);
  font-size: 12px;
}

.project-tile__stats dd {
  margin: 0;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.project-tile__note {
  margin: 14px 0 18px;
  color: #56636b;
  font-size: 12.5px;
  line-height: 1.5;
}

.project-tile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
}

/* ==========================================================================
   דף פרויקט פנימי

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

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

/* ---------- פתיחת הפרויקט: הסרטון ---------- */

.project-hero {
  position: relative;
  display: flex;
  min-height: min(94vh, 900px);
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--navy);
}

.project-hero__media {
  position: absolute;
  inset: 0;
}

.project-hero__media video,
.project-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* שתי שכבות הצללה ולא אחת: אנכית שמחזיקה את הכותרת בתחתית, ואלכסונית
   שמכהה את פינת ההתחלה כדי שהכותרת הקבועה של האתר תישאר קריאה. */
.project-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16, 24, 32, 0.92) 0%, rgba(16, 24, 32, 0.34) 46%, rgba(16, 24, 32, 0.52) 100%),
    linear-gradient(to bottom, rgba(16, 24, 32, 0.6) 0%, rgba(16, 24, 32, 0) 30%);
}

.project-hero__body {
  position: relative;
  padding: 168px 0 34px;
  color: var(--white);
}

.project-hero .breadcrumbs {
  margin-bottom: 26px;
}

.project-hero .breadcrumbs a,
.project-hero .breadcrumbs span,
.project-hero .breadcrumbs svg {
  color: rgba(255, 255, 255, 0.72);
}

.project-hero .breadcrumbs a:hover {
  color: var(--white);
}

.project-hero__area {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(16, 24, 32, 0.42);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 500;
}

.project-hero h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: clamp(46px, 8.4vw, 118px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}

.project-hero h1 span:last-child {
  color: rgba(255, 255, 255, 0.62);
}

.project-hero__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 22px 0 0;
  font-size: 14px;
}

.project-hero__tagline .ltr {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-hero__developer {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

/* רצועת הנתונים: שלוש העובדות שמאפשרות להחליט אם הפרויקט רלוונטי
   בלי לגלול בכלל. */
.project-hero__foot {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 24, 32, 0.5);
  backdrop-filter: blur(6px);
}

.project-hero__foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 18px;
}

.project-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}

.project-hero__stats > div {
  padding-inline: 26px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.project-hero__stats > div:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.project-hero__stats dt {
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-hero__stats dd {
  margin: 6px 0 0;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}

.project-hero__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-hero__play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 180ms ease, border-color 180ms ease;
}

.project-hero__play:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.project-hero__cue {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--white);
  place-items: center;
  transition: background 180ms ease;
}

.project-hero__cue:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- סרגל הניווט הדביק ---------- */

/* הסרגל נדבק מתחת לכותרת הקבועה של האתר (68 פיקסלים), ולא מעליה.
   שני הגבהים האלה קובעים גם את scroll-margin של הסקשנים שמתחת. */
.project-nav {
  position: sticky;
  z-index: 40;
  top: 68px;
  border-bottom: 1px solid transparent;
  background: var(--white);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.project-nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.06);
}

.project-nav__inner {
  display: flex;
  justify-content: center;
}

/* הטאבים ממורכזים. ברוחב צר הם הופכים לגלילה אופקית, ואז המרכוז
   מוותר לטובת תחילת השורה כדי שהטאב הראשון לא ייחתך. */
.project-nav__list {
  display: flex;
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
  gap: 4px;
  scrollbar-width: none;
}

.project-nav__list::-webkit-scrollbar {
  display: none;
}

.project-nav__list a {
  position: relative;
  flex: none;
  padding: 19px 14px;
  color: var(--gray-3);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 180ms ease;
}

.project-nav__list a:hover {
  color: var(--navy);
}

/* הפס התחתון הוא הסימון היחיד של הסקשן הפעיל. בלי רקע ובלי מסגרת, כדי
   שהסרגל יישאר שקוף מספיק כדי לא להתחרות בתוכן. */
.project-nav__list a::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  background: var(--accent);
  content: '';
  opacity: 0;
  transition: opacity 180ms ease;
}

.project-nav__list a[aria-current='true'] {
  color: var(--navy);
  font-weight: 600;
}

.project-nav__list a[aria-current='true']::after {
  opacity: 1;
}

/* ----- הקצב האנכי של דף הפרויקט -----
   הדף מורכב מתשעה סקשנים רצופים, ולכן הריווח בו נקבע פעם אחת כאן ולא
   סקשן-סקשן. שלושה מרווחים בלבד:
     --gap-section  בין סקשן לסקשן
     --gap-head     בין כותרת הסקשן לתוכן הראשון שלה
     --gap-block    בין בלוק לבלוק בתוך אותו סקשן
   כל בלוק בתוך סקשן משתמש בהם, ואף אחד לא מוסיף מרווח משלו.

   שלושתם נכתבים ב-clamp ולא כמספר קבוע עם שכבות @media: הריווח גדל עם
   רוחב החלון ברצף, ואותו ערך תקף מ-320px ועד מסך רחב. הצורה היא
   "בסיס + שיפוע" (4vw + 20px) ולא vw נקי, כי vw נקי נשאר תקוע על
   המינימום עד בערך 960px ואז מזנק — כלומר לפטופ מקבל את ריווח הנייד.
   הכלל הזה גם מתקן
   מצב קודם — הסקשנים כאן מופיעים בקובץ אחרי כללי ה-@media של .section,
   ובאותה ספציפיות, ולכן ה-96px גברו על ההקטנה לנייד ונשארו 96px גם שם.

   התקרה נמוכה בכוונה. ריווח גבוה מדי דוחף את תחילת הסקשן הבא אל מחוץ
   למסך, והדף נקרא כסדרת עמודים נפרדים במקום כרצף שברור שממשיך מתחת
   לקיפול. */
.project-overview,
.project-gallery,
.project-amenities,
.project-units,
.project-plans,
.project-location,
.project-investment,
.project-construction,
.project-payment,
.project-related {
  --gap-section: clamp(48px, 4vw + 20px, 80px);
  --gap-head: clamp(28px, 2vw + 12px, 40px);
  --gap-block: clamp(20px, 1.2vw + 8px, 28px);

  /* קפיצה לעוגן חייבת לעצור מתחת לכותרת האתר וגם מתחת לסרגל הדביק,
     אחרת כותרת הסקשן נחתכת. ה-scroll-padding הגלובלי מכסה רק את הכותרת. */
  padding: var(--gap-section) 0;
  scroll-margin-top: 128px;
}

.project-overview .section-heading,
.project-gallery .section-heading,
.project-amenities .section-heading,
.project-units .section-heading,
.project-plans .section-heading,
.project-location .section-heading,
.project-investment .section-heading,
.project-construction .section-heading,
.project-payment .section-heading {
  margin-bottom: var(--gap-head);
}

/* ---------- סקירה ---------- */

/* כרטיסי המאפיין סוגרים את הסקירה כרצועה רחבה עם קווי הפרדה משלה,
   ולכן הסקשן לא מוסיף עוד ריווח תחתון מעל הריווח של הסקשן הבא. */
.project-overview {
  padding-bottom: 0;
}

.project-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 76px;
  align-items: start;
}

.project-overview__main h2 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.project-overview__lead {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.68;
}

/* שני הבלוקים שנפתחים מתחת לפסקת הפתיחה של הסקירה, כל אחד על קו הפרדה
   משלו ובאותו מרווח */
.project-story,
.project-vr {
  margin-top: var(--gap-block);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--line);
}

.project-story h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.project-story p {
  max-width: 68ch;
  margin: 0;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.75;
}

.project-vr h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
}

.project-vr p {
  margin: 0 0 16px;
  color: var(--gray-3);
  font-size: 14.5px;
}

.project-vr ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-vr a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--light-blue);
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 180ms ease;
}

.project-vr a:hover {
  border-color: rgba(28, 74, 115, 0.4);
}

/* ---------- העמודה הדביקה ---------- */

/* העמודה אינה דביקה. משנוסף לה הטופס היא הגיעה לגובה של יותר ממסך
   שלם, ועמודה דביקה שגבוהה מהחלון נתקעת עם התחתית שלה מחוץ לתצוגה.
   בגובהה הנוכחי היא ממילא מקבילה לעמודת התוכן ולא נגמרת לפניה. */
.project-rail {
  display: grid;
  gap: 16px;
}

.project-rail__card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.project-rail__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--gray-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-rail dl {
  display: grid;
  margin: 0;
}

.project-rail dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.project-rail dl > div:last-child {
  border-bottom: 0;
}

.project-rail dt {
  flex: none;
  color: var(--gray-3);
  font-size: 13px;
}

.project-rail dd {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-align: end;
}

/* כרטיס המחיר עובד בשני מצבים: כשיש מחיר התחלתי לפרויקט הוא מציג אותו
   כמספר גדול, וכשאין — הוא מסביר את היעדרו במקום להשאיר שדה ריק. */
.project-rail__price {
  margin-top: 20px;
  padding: 16px;
  border: 1px dashed var(--gray-2);
  border-radius: var(--radius);
  background: var(--paper);
}

.project-rail__price b {
  color: var(--navy);
  font-size: 13px;
}

/* המספר עצמו לטיני, ולכן הוא מקבל כיוון LTR משלו כדי שהמטבע יישאר לפני
   הספרות. הבלוק נשאר מיושר להתחלה של העמודה כמו שאר הכרטיס. */
.project-rail__price-value {
  display: block;
  direction: ltr;
  text-align: start;
  margin-top: 6px;
  color: var(--navy);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.project-rail__price p {
  margin: 7px 0 0;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.project-rail__note {
  margin: 16px 0 0;
  color: var(--gray-3);
  font-size: 11.5px;
  line-height: 1.55;
}

/* ---------- שורת היזם ---------- */

/* פסקת היזם זהה בכל הפרויקטים, ולכן היא לא מקבלת כרטיס משלה אלא שורה
   בתוך אותה <dl> — כך היא יורשת את הריווח ואת הקו של שאר השורות, וכל
   מה שנשאר להגדיר כאן הוא הפסקה שנפתחת מעליה. */
.project-rail__dev {
  position: relative;
}

.project-rail__dev dd {
  display: flex;
  justify-content: flex-end;
}

.project-rail__dev dd button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
}

.project-rail__dev dd button svg {
  flex: none;
  color: var(--blue);
}

.project-rail__dev dd button:hover span:first-child {
  text-decoration: underline;
}

.project-rail__dev-note {
  position: absolute;
  z-index: 3;
  top: calc(100% - 4px);
  inset-inline: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 40px rgba(16, 24, 32, 0.16);
  text-align: start;
}

.project-rail__dev-note b {
  display: block;
  color: var(--navy);
  font-size: 14px;
}

.project-rail__dev-note small {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
}

.project-rail__dev-note p {
  margin: 10px 0 0;
  color: var(--gray-3);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- הכרטיס שמוביל לטופס ---------- */

/* הטופס המלא יושב בפס שסוגר את העמוד. כאן נשאר רק המסר והעוגן אליו,
   כי עמודה שגבוהה מטקסט הסקירה פותחת חלל ריק לצידו. */
.project-rail__cta {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--light-blue);
}

.project-rail__cta b {
  display: block;
  color: var(--navy);
  font-size: 16px;
}

.project-rail__cta p {
  margin: 8px 0 16px;
  color: var(--gray-3);
  font-size: 13px;
  line-height: 1.6;
}

.project-rail__cta .button {
  width: 100%;
  min-height: 48px;
}

/* ---------- טופס בקשת ההצעה ---------- */

/* אותו טופס מופיע פעמיים בדף הפרויקט, ולכן המבנה משותף ורק המשטח
   שמתחתיו משתנה. הוא לובש את שדות הטופס של האתר (contact-fields)
   ולא מגדיר טיפוגרפיה משלו. */
.lead-form {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lead-form .contact-fields {
  gap: 13px;
}

.lead-form legend {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.3;
}

.lead-form__intro {
  margin: 0;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.lead-form .contact-fields input {
  min-height: 44px;
  background: var(--white);
}

.lead-form .submit-button {
  min-height: 50px;
  gap: 10px;
  font-size: 14.5px;
}

.lead-form .form-microcopy {
  margin-top: 2px;
  font-size: 10.5px;
  text-align: start;
}

.lead-form--rail {
  padding: 24px;
  background: var(--light-blue);
}

/* בפס הכהה הכרטיס הוא המשטח הבהיר היחיד, וזה מה שמושך אליו את העין.
   אינפוטים כהים על רקע כהה נראים שם כבויים. */
.lead-form--cta {
  padding: 28px;
  border-color: transparent;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(6, 12, 18, 0.32);
}

.lead-form--cta legend {
  font-size: 19px;
}

.lead-form--cta .contact-fields {
  gap: 14px;
}

.lead-form--cta .submit-button {
  min-height: 54px;
}

.lead-form--sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lead-form--sent svg {
  color: var(--green);
}

.lead-form--sent b {
  color: var(--navy);
  font-size: 16px;
}

.lead-form--sent p {
  margin: 0;
  color: var(--gray-3);
  font-size: 13px;
  line-height: 1.6;
}

.lead-form--sent button {
  margin-top: 6px;
  padding: 9px 14px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- כרטיסי המאפיין ---------- */

.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 64px 0 0;
  padding: 1px;
  background: var(--line);
  list-style: none;
}

.signature-grid li {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--white);
}

.signature-grid svg {
  color: var(--blue);
}

.signature-grid b {
  margin-top: 16px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.signature-grid span {
  margin-top: 7px;
  color: var(--gray-3);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- גלריה ---------- */

/* בלוק פסיפס אחד: תמונה מובילה שנפרסת על ארבע משבצות וארבע תמונות
   לצידה. הטאבים שמעליו מחליפים את הקטגוריה שהוא מציג, ושאר התמונות
   נפתחות בצופה המלא. קטגוריה עם פחות מחמש תמונות מוותרת על התמונה
   המובילה ומתפרסת כשורה רגילה, אחרת היו נשארים בבלוק חורים. */
.gallery-mosaic {
  position: relative;
  display: grid;
  overflow: hidden;
  /* minmax(0, 1fr) ולא 1fr: המינימום האוטומטי של שורת רשת הוא
     min-content, והתמונות שבתוכה היו מנפחות את השורות מעבר ליחס
     הגובה-רוחב של הבלוק ומשבשות את הפריסה. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-radius: 10px;
  aspect-ratio: 2 / 1;
}

.gallery-mosaic--partial {
  grid-template-rows: auto;
  aspect-ratio: auto;
}

.gallery-mosaic--partial .gallery-mosaic__cell {
  aspect-ratio: 4 / 3;
}

.gallery-mosaic__cell {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
}

.gallery-mosaic__cell.is-lead {
  grid-row: span 2;
  grid-column: span 2;
}

.gallery-mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gallery-mosaic__cell:hover img {
  transform: scale(1.035);
}

/* אייקון ההגדלה יושב בפינה העליונה של התמונה המובילה, כדי לא להתנגש
   בכפתור הצפייה המלאה שיושב בפינה התחתונה של הבלוק. */
.gallery-mosaic__cell svg {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.6);
  color: var(--white);
  box-sizing: content-box;
}

.gallery-mosaic__all {
  position: absolute;
  bottom: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid rgba(16, 24, 32, 0.16);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.16);
  transition: transform 180ms ease;
}

.gallery-mosaic__all:hover {
  transform: translateY(-2px);
}

.gallery-filters {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.gallery-filters::-webkit-scrollbar {
  display: none;
}

.gallery-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.gallery-filters button small {
  color: var(--gray-3);
  font-size: 11.5px;
}

.gallery-filters button:hover {
  border-color: rgba(28, 74, 115, 0.35);
}

/* מצב "נבחר" של שלוש שורות הגלולות בדף הפרויקט — מסנני הגלריה, טאבי
   התוכניות וציר הבנייה. שלושתן אותו פקד ואותו מילוי כהה. */
.gallery-filters button.is-active,
.plans-viewer__tabs button.is-active,
.construction-timeline button.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.gallery-filters button.is-active small {
  color: rgba(255, 255, 255, 0.6);
}

/* הרשת מציגה עשר תמונות בכל פעם. בפרויקטים הגדולים יש יותר ממאה
   רנדרים, ורשת שמרנדרת את כולן מכבידה על העמוד בלי שאיש ביקש. */
.gallery-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  margin-top: var(--gap-block);
}

.gallery-more > button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 180ms ease, background 180ms ease;
}

.gallery-more > button:hover {
  border-color: rgba(28, 74, 115, 0.4);
  background: var(--paper);
}

.gallery-more svg {
  color: var(--blue);
}

.gallery-more small {
  color: var(--gray-3);
  font-size: 12px;
  font-weight: 400;
}

/* ---------- צופה התמונות ---------- */

.lightbox {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #090e13;
}

.lightbox__backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 0;
  background: transparent;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

/* המונה נקרא משמאל לימין גם בעמוד עברי: "3 / 103" ולא "103 / 3". */
.lightbox__counter {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.lightbox__caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox__close {
  display: grid;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  place-items: center;
  transition: background 180ms ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* התמונה ממלאת את התא ו-object-fit מכווץ אותה פנימה. אי אפשר להסתמך
   כאן על max-height באחוזים, כי לתמונות יש תכונת height מפורשת
   והאחוזים לא נפתרים מול תא רשת בגובה גמיש. */
/* התמונה ממוקמת אבסולוטית בתוך התא ולא כפריט רשת. לתמונות יש תכונת
   height מפורשת, ובתא רשת בגובה גמיש היא זו שקובעת את גובה השורה
   ומותחת את הצופה מעבר למסך. inset נותן לה מסגרת בגובה ידוע. */
.lightbox__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.lightbox__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 76px;
  object-fit: contain;
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.55);
  color: var(--white);
  place-items: center;
  transform: translateY(-50%);
  transition: background 180ms ease;
}

.lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.16);
}

.lightbox__arrow--prev {
  right: 20px;
}

.lightbox__arrow--next {
  left: 20px;
}

.lightbox__strip {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 16px 20px 20px;
  scrollbar-width: none;
}

.lightbox__strip::-webkit-scrollbar {
  display: none;
}

.lightbox__strip button {
  width: 92px;
  height: 62px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 4px;
  opacity: 0.42;
  transition: opacity 180ms ease, outline-color 180ms ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.lightbox__strip button:hover {
  opacity: 0.8;
}

.lightbox__strip button[data-active='true'] {
  opacity: 1;
  outline-color: var(--accent);
}

.lightbox__strip img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

/* ---------- מתקנים ---------- */

/* הסקשנים על דף הפרויקט מתחלפים לבן/נייר, וההחלפה הזו היא מה שנותן לגולש
   לראות איפה נגמר סקשן ומתחיל הבא. הכלל היה חסר בקובץ למרות ש-section--paper
   מופיע ב-JSX על ארבעה סקשנים, ולכן כל הדף היה משטח לבן אחד והמרווח בין
   הסקשנים נקרא כשטח ריק במקום כגבול. */
.section--paper {
  background: var(--paper);
}

.section--navy {
  color: var(--white);
  background:
    radial-gradient(110% 80% at 80% 0%, rgba(28, 74, 115, 0.42) 0%, rgba(16, 24, 32, 0) 60%),
    var(--navy);
}

.amenity-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}

.amenity-group h3 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.amenity-group ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amenity-group li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #c3ced7;
  font-size: 14.5px;
  line-height: 1.45;
}

.amenity-group svg {
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}

.amenity-note {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #8f9ca6;
  font-size: 12.5px;
}

/* ---------- סוגי יחידות ---------- */

.unit-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.unit-table__head,
.unit-table__row {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1.1fr 1.6fr;
  gap: 18px;
  padding: 16px 22px;
  align-items: center;
}

.unit-table__head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px 8px 0 0;
  color: var(--gray-3);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-table__row {
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.unit-table__row:last-child {
  border-bottom: 0;
}

.unit-table__row b {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.unit-table__row [data-label='שטח'] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
}

.unit-table__row [data-label='שטח'] svg {
  color: var(--blue);
}

.unit-table__row [data-label='מה כלול'],
.unit-table__row [data-label='כמות'] {
  color: var(--gray-3);
}

/* ---------- רצועת התוכניות ---------- */

.plan-strip {
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}

.plan-strip h3 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 600;
}

.plan-strip__note {
  margin: 8px 0 20px;
  color: var(--gray-3);
  font-size: 14px;
}

.plan-strip ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-strip ul li {
  display: flex;
}

.plan-strip ul button {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color 180ms ease;
}

.plan-strip ul button:hover {
  border-color: rgba(28, 74, 115, 0.4);
}

/* גובה קבוע לתמונה ולא יחס: התוכניות מגיעות בפרופורציות שונות אחרי
   קיצוץ השוליים, וגובה אחיד שומר על שורת כרטיסים ישרה. */
.plan-strip ul img {
  display: block;
  width: 100%;
  height: 168px;
  padding: 10px;
  object-fit: contain;
  background: var(--white);
}

.plan-strip ul span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}

.plan-strip ul span svg {
  flex: none;
  color: var(--blue);
}

/* ---------- תוכניות הקומה ---------- */

.plans-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}

.plans-viewer figure {
  margin: 0;
}

/* יחס הגובה־רוחב יושב על המסגרת ולא על התמונה: לתמונות יש תכונות
   width ו-height מפורשות, ותכונת height גוברת על aspect-ratio בתמונה
   עצמה ומותחת את המסגרת לגובה המקורי של הקובץ. */
.plans-viewer figure button {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.plans-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
}

/* התוכניות נושאות כיתוב מודפס משלהן בפינה התחתונה, ולכן כפתור ההגדלה
   יושב למעלה. */
.plans-viewer__zoom {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 4px;
  background: rgba(16, 24, 32, 0.78);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
}

.plans-viewer figcaption {
  margin-top: 12px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.plans-viewer__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.plans-viewer__tabs button {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 13px;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.plans-viewer__tabs button:hover {
  border-color: rgba(28, 74, 115, 0.35);
}

.building-stack {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.building-stack h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.building-stack h3 svg {
  color: var(--blue);
}

.building-stack ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* כל קומה היא שורה עם קו מפריד, כך שהרשימה נקראת כחתך של הבניין. */
.building-stack li {
  padding: 11px 0 11px 0;
  padding-inline-start: 16px;
  border-bottom: 1px dashed var(--gray-2);
  border-inline-start: 2px solid var(--gray-2);
  color: var(--text);
  font-size: 13.5px;
}

.building-stack li:last-child {
  border-bottom: 0;
}

/* ---------- מיקום ---------- */

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

.location-map {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  aspect-ratio: 21 / 9;
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* auto-fit ולא מספר עמודות קבוע: לרוב הפרויקטים יש שני כרטיסים
   ול-Sky Suites תשעה, ואותה רשת צריכה להחזיק את שניהם. */
.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: var(--gap-block);
  align-items: start;
}

.location-card {
  padding: 22px 24px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.location-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.location-card h3 svg {
  flex: none;
  color: var(--accent);
}

.location-card ul,
.location-card dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* שורה אחת לשני סוגי הכרטיסים. בכרטיס המאפיינים היא li, ובכרטיס
   המרחקים היא div שמכיל dt ו-dd — אותו גובה, אותו קו מפריד. */
.location-card li,
.location-card dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.location-card li:last-child,
.location-card dl > div:last-child {
  border-bottom: 0;
}

.location-card dt {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.location-card dt svg {
  flex: none;
  color: var(--gray);
}

.location-card dd {
  margin: 0;
  flex: none;
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.location-note {
  margin-top: var(--gap-block);
}

/* ---------- הזדמנות באזור ---------- */

/* התשואה והסייג שלה הם יחידה אחת ולכן הם באותה שורה: מספר תשואה בעמוד של
   מתווך מורשה שהסייג שלו נדחק להערת שוליים בתחתית העמוד נקרא כהבטחה. */
.area-yield {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--gap-block);
}

.area-yield__figure {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.area-yield__figure b {
  color: var(--navy);
  font-size: clamp(30px, 2.4vw + 16px, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.area-yield__figure span {
  margin-top: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.area-yield__figure small {
  margin-top: 8px;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.area-yield__note {
  flex: 1 1 340px;
  margin: 0;
}

/* הבקשה לחישוב ROE אישי. היא סוגרת את הסקשן במקום מספר, ולכן היא נראית
   כמו כרטיס ולא כמו שורת קישור שאפשר לדלג עליה. */
.area-roe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: var(--gap-block);
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.area-roe > div {
  flex: 1 1 380px;
}

.area-roe b {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.area-roe p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .area-yield__figure {
    flex-basis: 100%;
  }

  .area-roe {
    align-items: stretch;
  }
}

/* ---------- התקדמות בנייה ---------- */

.construction-timeline {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.construction-timeline::-webkit-scrollbar {
  display: none;
}

.construction-timeline button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 13.5px;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.construction-timeline button svg {
  color: var(--gray-3);
}

.construction-timeline button em {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}

.construction-timeline button.is-active svg {
  color: var(--white);
}

.construction-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  margin: 20px 0 var(--gap-block);
  align-items: start;
}

.construction-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.construction-shots button {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  aspect-ratio: 16 / 10;
}

.construction-shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.construction-shots button:hover img {
  transform: scale(1.04);
}

.construction-video {
  margin: 0;
}

.construction-video video {
  width: 100%;
  border-radius: 8px;
  background: var(--navy);
  aspect-ratio: 16 / 9;
}

.construction-video figcaption {
  margin-top: 10px;
  color: var(--gray-3);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---------- פרויקטים נוספים ---------- */

/* אותם כרטיסים של דף הפרויקטים, על מסילת Swiper. הסקשן יושב אחרי
   סגירת התוכן של דף הפרויקט ולפני פס הסיום, ולכן הוא על רקע הנייר
   ומופרד בקו ולא בעוד מרווח ריק. */
.project-related {
  border-top: 1px solid var(--line);
}

.project-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.project-related__head h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.project-related__head p {
  max-width: 56ch;
  margin: 12px 0 0;
  color: var(--gray-3);
  font-size: 15.5px;
  line-height: 1.65;
}

.project-related__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  padding-bottom: 4px;
}

.project-related__nav {
  display: flex;
  gap: 8px;
}

.project-related__nav button {
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  place-items: center;
  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.project-related__nav button:hover:not(:disabled) {
  border-color: var(--navy);
}

.project-related__nav button:disabled {
  color: var(--gray);
  cursor: default;
  opacity: 0.5;
}

.project-related__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.project-related__all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* המסילה חורגת מרוחב העמודה אל קצה המסך, כדי שהכרטיס החתוך בקצה
   יראה שיש המשך. הריווח האנכי מבטל את חיתוך הצל של הכרטיסים. */
.project-related__rail {
  margin-inline: -8px;
  padding: 8px;
}

.project-related__rail .swiper-slide {
  height: auto;
}

.project-related__rail .project-tile {
  height: 100%;
}

/* ---------- רספונסיביות של דף הפרויקט ---------- */

@media (max-width: 1180px) {
  .amenity-groups {
    grid-template-columns: repeat(2, 1fr);
  }

  .plans-grid,
  .construction-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-mosaic {
    aspect-ratio: 2.1 / 1;
  }
}

@media (max-width: 1024px) {
  .project-hero__foot-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .project-hero__stats > div {
    padding-inline: 18px;
  }

  .project-hero__tools {
    justify-content: space-between;
  }

  .signature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .unit-table {
    border: 0;
    background: transparent;
  }

  .unit-table__head {
    display: none;
  }

  /* בנייד הטבלה מתפרקת לכרטיסים, וכל תא נושא את שם העמודה שלו. */
  .unit-table__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
  }

  .unit-table__row + .unit-table__row {
    margin-top: 10px;
  }

  .unit-table__row [data-label]:not([data-label='סוג היחידה'])::before {
    display: block;
    margin-bottom: 2px;
    color: var(--gray-3);
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

@media (max-width: 720px) {
  .project-hero__body {
    padding: 128px 0 26px;
  }

  .project-hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .project-hero__stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-inline-start: 0;
  }

  .project-hero__stats > div:first-child {
    border-top: 0;
  }

  .project-hero__stats dd {
    margin: 0;
  }

  .project-nav__list {
    justify-content: flex-start;
  }

  .location-map {
    aspect-ratio: 4 / 3;
  }

  /* בנייד הפסיפס יורד לשתי עמודות: התמונה המובילה תופסת את כל הרוחב
     ומעליה שתי משבצות בכל שורה, בגודל שאפשר לזהות בו מה מצולם. */
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .gallery-mosaic__cell {
    aspect-ratio: 4 / 3;
  }

  .gallery-mosaic__cell.is-lead {
    grid-row: span 1;
    grid-column: span 2;
  }

  .signature-grid,
  .amenity-groups {
    grid-template-columns: 1fr;
  }

  .amenity-groups {
    gap: 30px;
  }

  .construction-shots {
    grid-template-columns: 1fr;
  }

  .lightbox__arrow {
    width: 40px;
    height: 40px;
  }

  .lightbox__caption {
    display: none;
  }

  .project-related__head {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .project-related__tools {
    justify-content: space-between;
  }
}

/* הדף כולו מוגש גם כשהמבקר ביקש פחות תנועה: הסרטון לא מתנגן מעצמו,
   וההגדלות בריחוף מבוטלות. */
@media (prefers-reduced-motion: reduce) {
  .gallery-mosaic__cell img,
  .construction-shots img {
    transition: none;
  }

  .gallery-mosaic__cell:hover img,
  .construction-shots button:hover img {
    transform: none;
  }
}


/* ---------- סגירת דף פנימי ---------- */

.page-cta {
  padding: 88px 0;
  color: var(--white);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(28, 74, 115, 0.45) 0%, rgba(16, 24, 32, 0) 62%),
    var(--navy);

  /* בדף הפרויקט הפס הזה הוא יעד של עוגן (#lead) מהעמודה שלצד הסקירה,
     והקפיצה חייבת לעצור מתחת לכותרת הקבועה ולסרגל הדביק. */
  scroll-margin-top: 128px;
}

/* הטקסט מצד אחד והטופס מהצד השני. align-items מחלק את הפרש הגבהים בין
   שני הצדדים במקום לזרוק אותו כולו לתחתית אחד מהם. */
.page-cta__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.page-cta .eyebrow {
  color: #b9cddd;
}

.page-cta__intro h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.page-cta__intro p {
  max-width: 480px;
  margin: 20px 0 0;
  color: #aebbc4;
  font-size: 16.5px;
  line-height: 1.65;
}

.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* הכפתור יורש את המראה של הקישור שהיה כאן קודם */
.footer-to-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  font: inherit;
  font-size: 10px;
}

/* ---------- רספונסיביות של הדפים החדשים ---------- */

@media (max-width: 1180px) {
  .guide__grid,
  .proc__grid {
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 52px;
  }

  .project-overview__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
  }

  .page-cta__inner,
  .contact-page__grid {
    gap: 52px;
  }
}

@media (max-width: 1024px) {
  .page-hero {
    min-height: 470px;
    padding: 128px 0 60px;
  }

  .guide {
    padding: 64px 0 80px;
  }

  /* הסרגל עובר לרוחב מלא ומפסיק להיות דביק, כדי לא לתפוס גובה, וחוזר
     לסדר ה-DOM — כלומר מופיע מעל התוכן, ככרטיס פתיחה. */
  .guide__grid,
  .proc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .guide-toc,
  .proc-rail {
    position: static;
    grid-column: auto;
    grid-row: auto;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
  }

  .guide-article,
  .proc-body {
    max-width: none;
    grid-column: auto;
    grid-row: auto;
  }

  /* בכרטיס אין קו אנכי להיצמד אליו, ולכן הפס עובר לצמוד לפריט עצמו */
  .guide-toc a[aria-current='true']::before,
  .proc-rail__item a[aria-current='true']::before {
    inset-inline-start: -12px;
  }

  .guide-toc ol {
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }

  .proc {
    padding: 60px 0 80px;
  }

  /* שם התקופה תופס שורה שלמה, והשלבים שאחריו נופלים לשלוש העמודות
     שמתחתיו. כך הקיבוץ שורד גם כשהרשימה שוכבת. */
  .proc-rail__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
  }

  .proc-rail__phase {
    grid-column: 1 / -1;
    margin: 16px 0 6px;
  }

  .proc-rail__note {
    margin-top: 20px;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .guide-figures {
    grid-template-columns: 1fr 1fr;
  }

  .project-overview__grid,
  .contact-page__grid,
  .page-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .project-rail {
    position: static;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__side--you {
    padding-inline-end: 0;
  }

  /* בעמודה אחת אין קו אנכי שיפריד בין הצדדים, ולכן המרווח גדל */
  .split__side--us {
    margin-top: 30px;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 720px) {
  .page-hero {
    min-height: 440px;
    padding: 112px 0 48px;
  }

  /* במובייל הטקסט תופס את כל הרוחב, ולכן ההצללה עוברת מאופקית לאנכית
     כדי שהתמונה תישאר נראית מתחת לכותרת. */
  .page-hero::after {
    background: linear-gradient(
      180deg,
      rgba(16, 24, 32, 0.88) 0%,
      rgba(16, 24, 32, 0.66) 34%,
      rgba(16, 24, 32, 0.5) 66%,
      rgba(16, 24, 32, 0.74) 100%
    );
  }

  .proc {
    padding: 46px 0 64px;
  }

  .proc-rail__list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .proc-phase + .proc-phase {
    margin-top: 56px;
  }

  .proc-phase__head {
    margin-bottom: 32px;
  }

  .proc-phase__head p {
    font-size: 15px;
  }

  /* אותה פריסה בדיוק, בקנה מידה קטן: העיגול קטן, הקו נשאר במרכזו */
  .step {
    padding-inline-start: 50px;
  }

  .step::before {
    inset-inline-start: 17px;
    top: 43px;
  }

  .step__n {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }

  .step__head {
    min-height: 35px;
  }

  .step__lead {
    font-size: 15.5px;
  }

  .step__seq li {
    gap: 12px;
    font-size: 15px;
  }

  .split__side li {
    font-size: 15px;
  }

  .page-hero__lead {
    font-size: 15.5px;
  }

  .guide {
    padding: 48px 0 64px;
  }

  .guide-toc ol {
    grid-template-columns: 1fr;
  }

  .guide-article > p,
  .guide-section > p {
    font-size: 15.5px;
  }

  .guide-section + .guide-section {
    margin-top: 44px;
    padding-top: 40px;
  }

  .faq-category + .faq-category {
    margin-top: 38px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .guide-figures {
    grid-template-columns: 1fr;
  }

  .guide-figures .dubai-figure {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-inline-start: 0;
  }

  .guide-figures .dubai-figure:first-child {
    border-top: 0;
  }

  .project-hero {
    min-height: 78vh;
  }

  .section-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: start;
  }

  .page-cta {
    padding: 64px 0;
  }

  .contact-page {
    padding-bottom: 72px;
  }

  .offices-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .placeheld {
    white-space: normal;
  }
}

/* ================================================================
   הבלוג, המאמרים ועמודי האזור
   ================================================================
   נוסף עם תשתית התוכן. הכל נשען על אותם טוקנים של המערכת ועל אותם
   רכיבים קיימים (.section, .container, .signature-grid, .project-grid,
   .faq-list), כדי שהמאמרים ייראו כמו המשך של האתר ולא כמו בלוג שהודבק
   עליו. אין כאן צבע חדש, רדיוס חדש או מרווח חדש. */

/* ---------- טבלה בתוך תוכן ארוך ---------- */

.guide-table-wrap {
  margin: var(--rule-gap) 0;
}

.guide-table-wrap figcaption {
  font-size: 14px;
  color: var(--gray-3);
  margin-bottom: 10px;
}

/* העטיפה היא זו שגוללת, לא העמוד. טבלה של ארבע עמודות בנייד דוחפת אחרת
   את כל הדף הצידה. tabindex כדי שגם גלילה במקלדת תעבוד — טבלה שגוללת
   רק בגרירה אינה נגישה. */
.guide-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guide-table-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}

.guide-table th,
.guide-table td {
  text-align: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.guide-table thead th {
  background: var(--light-blue);
  font-weight: 600;
  white-space: nowrap;
}

.guide-table tbody th {
  font-weight: 600;
  background: rgba(24, 32, 39, 0.02);
}

.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- עמוד האזורים ---------- */

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.area-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.area-card__en {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-3);
  direction: ltr;
  text-align: start;
}

.area-card h2 {
  margin: 0;
  font-size: 22px;
}

.area-card h2 a {
  color: var(--text);
  text-decoration: none;
}

.area-card h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.area-card h2 a:focus-visible::after {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.area-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-3);
}

.area-card__count {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
}

.area-card__more {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--blue);
}

.area-projects {
  background: var(--paper);
}