* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Heebo', sans-serif; color: #12142c; background: #fff; overflow-x: hidden; }
a { color: #12142c; text-decoration: none; }
a:hover { color: #4a4d68; }
img { max-width: 100%; display: block; }
::selection { background: #12142c; color: #fff; }

:root {
  --navy: #12142c;
  --navy-hover: #2d328a;
  --text-body: #565968;
  --text-body-alt: #63665f;
  --text-muted: #6b6e7d;
  --text-faint: #9a9d9e;
  --border: #ececec;
  --border-strong: #d8d8dc;
  --max-width: 1320px;
  /* קו היישור היחיד של העמוד. כל סקשן — הדר, הירו, דירות, באנר, קרוסלה,
     יצירת קשר ופוטר — מתחיל ונגמר בדיוק כאן.
     ה-max מוסיף תקרה: עד 1560px רוחב המסך השוליים גדלים בהדרגה, ומעליה הם
     גדלים כדי שהתוכן יישאר 1560px ולא יימתח לרוחב המסך. בלי זה, במסך 1920
     הכותרות והטופס מתפזרים והמרווחים ביניהם נפערים. */
  --page-inset: max(clamp(20px, 4.2vw, 68px), (100vw - 1560px) / 2);
  /* המרווח בין שתי הדירות בלבד. לא כפוף לתקרה של --page-inset, כי הוא פנימי
     ואף אלמנט אחר בעמוד לא מיושר אליו. */
  --panel-gutter: clamp(28px, 3.6vw, 64px);
}

.section { max-width: none; margin: 0; padding: 20px var(--page-inset) 110px; }
.eyebrow, .eyebrow-text-light { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.eyebrow p { color: var(--text-muted); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
.eyebrow--light p { color: rgba(255,255,255,0.85); }
.eyebrow__line { width: 22px; height: 1px; background: var(--navy); }
.eyebrow__line--light { background: rgba(255,255,255,0.6); width: 26px; }
.eyebrow-text-light { color: rgba(255,255,255,0.8); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px; }
.section-title { font-size: clamp(28px, 3.2vw, 42px); margin: 0; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }

.btn-pill { font-size: 14.5px; font-weight: 600; padding: 16px 30px; border-radius: 999px; display: inline-block; transition: background 0.25s ease, transform 0.25s ease; border: none; cursor: pointer; }
.btn-pill--light { background: #fff; color: var(--navy); }
.btn-pill--light:hover { background: #d8dae2; color: var(--navy); transform: translateY(-2px); }
.btn-pill--dark { background: var(--navy); color: #fff; }
.btn-pill--dark:hover { background: var(--navy-hover); color: #fff; transform: translateY(-2px); }
.btn-underline { color: #fff; font-size: 14.5px; font-weight: 600; padding: 17px 6px; border-bottom: 1px solid rgba(255,255,255,0.5); transition: border-color 0.25s ease; }
.btn-underline:hover { color: #fff; border-color: #fff; }
.btn-lang { border: 1px solid rgba(255,255,255,0.45); background: transparent; color: #fff; font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.btn-lang:hover { border-color: #fff; }

/* Hero */
.hero { position: relative; height: 92vh; min-height: 660px; overflow: hidden; background: #0c0e1e; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; animation: kenBurns 18s ease-out both; }
/* ההחשכה הצידית חייבת לעקוב אחרי צד הטקסט: בעברית הטקסט מימין, באנגלית משמאל.
   זווית קבועה תחשיך תמיד את אותו צד פיזי ותשאיר את הכותרת על מים בהירים. */
.hero__gradient { position: absolute; inset: 0; --side-angle: 100deg; background: linear-gradient(180deg, rgba(6,7,20,0.72) 0%, rgba(6,7,20,0.26) 30%, rgba(6,7,20,0.2) 55%, rgba(6,7,20,0.85) 100%), linear-gradient(var(--side-angle), rgba(6,7,20,0.62) 0%, rgba(6,7,20,0) 52%); }
[dir="rtl"] .hero__gradient { --side-angle: 260deg; }
@keyframes kenBurns { from { transform: scale(1.06); } to { transform: scale(1.16); } }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.site-header--scrolled { background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(6,7,20,0.1); }
.site-header--scrolled .site-header__row { padding-top: 24px; padding-bottom: 24px; }
.site-header--scrolled .logo { height: 55px; width: 210px; filter: brightness(0); }
.site-header--scrolled .nav-links a { color: var(--navy); }
.site-header--scrolled .btn-lang { border-color: rgba(18,20,44,0.35); color: var(--navy); }
.site-header--scrolled .btn-lang:hover { border-color: var(--navy); }
.site-header--scrolled .hamburger { border-color: rgba(18,20,44,0.35); }
.site-header--scrolled .hamburger span { background: var(--navy); }
.site-header--scrolled .site-header__actions .btn-pill { background: var(--navy); color: #fff; }
.site-header--scrolled .site-header__actions .btn-pill:hover { background: var(--navy-hover); }
.site-header__row { max-width: none; margin: 0; padding: 30px var(--page-inset); display: flex; align-items: center; justify-content: space-between; gap: 20px; direction: ltr; transition: padding 0.3s ease; }
.logo { height: 60px; width: 230px; filter: brightness(0) invert(1); transition: height 0.3s ease, width 0.3s ease; }
.nav-links { display: flex; align-items: center; gap: 36px; }
[dir="rtl"] nav.nav-links { flex-direction: row-reverse; }
.nav-links a { font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); }
a.nav-links.btn-pill { padding: 12px 22px; font-size: 13px; white-space: nowrap; }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.hamburger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); background: transparent; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; gap: 4px; }
.hamburger span { width: 16px; height: 1.5px; background: #fff; }
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(6,7,20,0.4); z-index: 60; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: 0; height: 100%; width: min(78vw, 320px); background: rgba(12,14,30,0.8); backdrop-filter: blur(14px); z-index: 61; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(6,7,20,0.35); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__header { display: flex; align-items: center; justify-content: flex-end; padding: 24px 24px 8px; }
.mobile-menu__close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 17px; line-height: 1; }
.mobile-menu__nav { display: flex; flex-direction: column; padding: 12px 28px; overflow-y: auto; gap: 6px; }
.mobile-menu__nav a { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.92); padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu__nav a:last-child { border-bottom: none; }

.hero__content { position: relative; z-index: 5; max-width: none; margin: 0; height: 100%; padding: 112px var(--page-inset) 0; display: flex; flex-direction: column; justify-content: center; }
.hero__title { font-family: 'Heebo', sans-serif; font-size: clamp(34px, 6.5vw, 68px); line-height: 1.05; color: #fff; margin: 0 0 20px; font-weight: 600; letter-spacing: -0.01em; max-width: 760px; opacity: 0; animation: fadeUp 0.9s ease 0.3s both; }
.hero__subtitle { color: rgba(255,255,255,0.82); font-size: 16.5px; line-height: 1.75; max-width: 520px; margin: 0 0 40px; opacity: 0; animation: fadeUp 0.9s ease 0.48s both; }
.hero__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.9s ease 0.64s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   סקשן הפיצול — שתי הדירות זו לצד זו
   הרשת נמתחת מקצה לקצה של המסך עם קו הפרדה יחיד באמצע, כדי שהעמוד
   ייקרא כשני חצאים ולא כשני כרטיסים שצפים על רקע לבן.
   ============================================================ */
.split-section { padding: 96px 0 110px; }
/* הכותרת מיושרת לאותו קו של הטקסט בפאנל הראשון, ולא לרוחב התוכן של שאר
   העמוד — אחרת נוצר הפרש של ~30px שנקרא כשגיאת יישור ולא ככוונה. */
.split-head { margin: 0 0 54px; padding: 0 var(--page-inset); }
/* subgrid: כל פאנל יורש את שורות הרשת מהאב, כך שהתמונה, הכותרת, התיאור,
   המפרט והמחיר מיושרים אופקית בין שתי הדירות — גם כשהטקסטים באורך שונה.
   זו הסיבה שילדי הפאנל הם ישירים ואין עטיפת body: subgrid מיישר רק ילדים ישירים. */
/* 8 שורות: תמונה ראשית, רצועת תמונות, שורה קטנה, כותרת, תיאור, מפרט, נקודות, מחיר */
/* רק קו תחתון. קו עליון היה נחתך בדיוק מעל שתי התמונות הראשיות ונקרא כשריטה
   על התמונה ולא כהפרדה בין סקשנים. */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); border-block-end: 1px solid var(--border); }
.split-panel { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; padding-bottom: 46px; opacity: 0; transform: translateY(26px); transition: opacity 0.85s ease, transform 0.85s ease; }
/* margin (ולא padding) על כל ילדי הפאנל — כולל התמונה הראשית: כך התמונה,
   רצועת התמונות, הכותרת, המפרט והמחיר יושבים כולם על אותו קו אנכי, והקווים
   האופקיים לא נוגעים בקו ההפרדה בין שתי הדירות. */
.split-panel > * { margin-inline: var(--page-inset); }
/* הקצה הפנימי (זה שנוגע בקו ההפרדה) מקבל שוליים צרים משלו. עם --page-inset
   משני הצדדים נפער בין שתי הדירות מרווח של 360px במסך רחב, שגזל את הרוחב
   מהתמונות והשאיר אותן כמעט ריבועיות. שאר העמוד לא מיושר לקו הפנימי הזה,
   לכן צמצומו לא שובר שום יישור חיצוני. */
@media (min-width: 901px) {
  .split-panel:first-child > * { margin-inline-end: var(--panel-gutter); }
  .split-panel:last-child > * { margin-inline-start: var(--panel-gutter); }
}
.split-grid.is-visible .split-panel { opacity: 1; transform: translateY(0); }
/* השהיה מדורגת: העין קוראת קודם את הפאנל הראשון ואז את השני,
   במקום לקבל את שני הצדדים באותו רגע. */
.split-grid.is-visible .split-panel:nth-child(2) { transition-delay: 0.18s; }
.split-panel + .split-panel { border-inline-start: 1px solid var(--border); }

/* יחס רוחבי קבוע, בלי max-height. הצמד aspect-ratio + max-height גורם לדפדפן
   לצמצם את *הרוחב* כשתקרת הגובה נכנסת לפעולה, והתמונה מפסיקה למלא את הפאנל —
   לכן התקרה מגיעה מ---page-inset (שמגביל את רוחב התוכן) ולא מגובה מקסימלי. */
.split-panel__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.split-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.split-panel:hover .split-panel__media img { transform: scale(1.05); }
.split-panel__badge { position: absolute; top: 20px; inset-inline-start: 20px; background: rgba(12,14,30,0.78); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 15px; border-radius: 3px; }

/* רצועת התמונות מיושרת לטקסט ולא לרוחב המלא — כך היא נקראת כחלק מהתוכן
   ולא נוגעת בקו ההפרדה בין שתי הדירות. */
.thumb-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block: 12px 0; }
/* אותו יחס כמו התמונה הראשית: הרצועה נקראת כארבע גרסאות של אותה תמונה
   ולא כאלמנט אחר. */
.thumb { position: relative; padding: 0; border: none; border-radius: 3px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 16/10; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.68; transition: opacity 0.3s ease, transform 0.5s ease; }
.thumb:hover img { opacity: 1; transform: scale(1.06); }
.thumb.is-active img { opacity: 1; }
.thumb.is-active::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--navy); border-radius: 3px; }
.thumb:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.split-panel__eyebrow { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-block: 34px 14px; }
.split-panel__title { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.15; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; margin-block: 0 16px; }
.split-panel__desc { color: var(--text-body); font-size: 15.5px; line-height: 1.75; margin-block: 0; max-width: 54ch; }

.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; margin-block: 32px 28px; padding-block: 24px; border-block: 1px solid var(--border); }
.spec { margin: 0; }
.spec dt { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 7px; }
.spec dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--navy); }

.highlight-list { list-style: none; margin-block: 0 34px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 22px; }
.highlight-list li { position: relative; padding-inline-start: 18px; font-size: 14px; line-height: 1.5; color: var(--text-body-alt); }
.highlight-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); opacity: 0.45; }

.split-panel__footer { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--border); }
.split-panel__price-label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 5px; }
.split-panel__price-value { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; color: var(--navy); margin: 0; }
.split-panel__cta { white-space: nowrap; }

/* CTA banner */
/* מרווח קטן מהרגיל: הבאנר והקרוסלה מתחתיו הם אותו סקשן (פרויקט הלגונה),
   ופער של 110px כמו בין סקשנים זרים היה מנתק ביניהם. */
.cta-banner { position: relative; margin: 0 0 44px; height: 62vh; min-height: 460px; overflow: hidden; }
/* תמונה סטטית אחת. הרקע כאן יושב מתחת לכותרת ולכפתור, ולכן הוא אווירה ולא
   מידע — התמונות המידעיות של הפרויקט חיות בקרוסלה שמתחת, בצבע מלא ועם כיתוב. */
.cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}
/* אותו היגיון כמו בהירו — ההחשכה מתהפכת יחד עם כיוון הקריאה. */
.cta-banner__gradient { position: absolute; inset: 0; --side-angle: 90deg; background: linear-gradient(var(--side-angle), rgba(6,7,20,0.88) 0%, rgba(6,7,20,0.5) 55%, rgba(6,7,20,0.35) 100%); }
[dir="rtl"] .cta-banner__gradient { --side-angle: 270deg; }
.cta-banner__content { position: relative; z-index: 2; max-width: none; margin: 0; height: 100%; display: flex; align-items: center; padding: 0 var(--page-inset); }
.cta-banner__inner { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; }
.cta-banner__title { font-size: clamp(30px, 5vw, 50px); line-height: 1.12; color: #fff; margin: 0 0 18px; font-weight: 600; }
.cta-banner__subtitle { color: rgba(255,255,255,0.82); font-size: 15.5px; line-height: 1.75; margin: 0 0 32px; }

/* ============================================================
   קרוסלת מתקני הפרויקט
   גלילה עם scroll-snap (עובדת בהחלקה במגע בלי קוד נוסף) + חצים לדסקטופ.
   ============================================================ */
/* רצועת תמונות, לא טקסט: היא נמתחת לרוחב המסך כמו סקשן הדירות והבאנר שמעליה,
   עם אותו inset בדיוק — אחרת היא נראית צרה מהשכנים שלה וזה נקרא כשגיאה.
   הגבלת 1320px נשמרת לסקשנים שהם טקסט (הדר, יצירת קשר). */
.project-gallery { max-width: none; margin: 0; padding: 0 var(--page-inset) 110px; }
.project-gallery__head { margin-bottom: 26px; }
.carousel { position: relative; }
/* flex עם `flex: 0 0` ולא grid: ב-grid העמודות מתכווצות כדי להיכנס למיכל,
   ואז אין גלישה ואין מה לגלול.
   במסך רחב שלוש התמונות נכנסות במלואן — אין גלילה, והחצים מכבים את עצמם
   (syncNav מנטרל אותם כשאין לאן לגלול). "הצצה" של תמונה חתוכה במסך שיש בו
   מקום לכולן נקראת כתקלה, לא ככוונה. רק כשהמסך מצטמצם זו נעשית קרוסלה.
   כשיתווספו תמונות רביעית ואילך, הגלילה תחזור מעצמה גם במסך רחב. */
.carousel__track { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 calc((100% - 2 * 18px) / 3); scroll-snap-align: start; }
.carousel__slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.carousel__caption { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--navy); }

.carousel__nav { position: absolute; top: calc(50% - 24px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: 0 6px 20px rgba(6,7,20,0.12); transition: background 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; }
.carousel__nav:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.carousel__nav:disabled { opacity: 0; pointer-events: none; }
.carousel__nav--prev { inset-inline-start: -14px; }
.carousel__nav--next { inset-inline-end: -14px; }
.carousel__arrow { font-size: 19px; line-height: 1; }
/* החצים נכתבו לכיוון קריאה מימין לשמאל; באנגלית הם מתהפכים. */
[dir="ltr"] .carousel__arrow { display: inline-block; transform: scaleX(-1); }

/* Contact */
/* תקרה משלה: בלעדיה הטופס והתמונה נדחפים לשני קצוות הסקשן ונפער ביניהם
   מרחב ריק שקורא כניתוק, במיוחד כי הטופס עצמו מוגבל ל-480px. */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; max-width: 1080px; }
.contact-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0 0 16px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; overflow-wrap: break-word; }
.contact-note { font-size: 17px; line-height: 1.6; color: var(--text-body); margin: 0 0 26px; max-width: 420px; }
.thanks-view { padding: 40px 0; max-width: 420px; }
.thanks-view h3 { font-size: 22px; margin: 0 0 12px; color: var(--navy); font-weight: 700; }
.thanks-view p { color: var(--text-body-alt); font-size: 15px; margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 26px; max-width: 480px; }
.form-field { position: relative; padding-top: 22px; }
.form-field label { position: absolute; inset-inline-start: 0; top: 22px; font-size: 15px; color: var(--text-faint); transition: all 0.25s ease; pointer-events: none; }
.form-field.is-active label { top: 0; font-size: 11px; color: var(--navy); }
.form-field--select label { position: static; font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.form-field input { width: 100%; padding: 0 0 10px; border: none; outline: none; border-bottom: 1px dashed #b8bac2; font-size: 16px; background: transparent; color: var(--navy); font-family: 'Heebo', sans-serif; }
.form-field input:focus { border-bottom: 1px solid var(--border-strong); }

.custom-select { position: relative; }
.custom-select__trigger { width: 100%; text-align: inherit; padding: 0 24px 10px 0; border: none; outline: none; border-bottom: 1px dashed #b8bac2; font-size: 16px; background: transparent; color: var(--navy); font-family: 'Heebo', sans-serif; cursor: pointer; position: relative; transition: border-color 0.2s ease; }
.custom-select__trigger:focus { border-bottom: 1px solid var(--border-strong); }
.custom-select__trigger::after { content: ''; position: absolute; inset-inline-end: 4px; top: 45%; width: 7px; height: 7px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: translateY(-60%) rotate(45deg); transition: transform 0.25s ease; }
.custom-select.is-open .custom-select__trigger::after { transform: translateY(-20%) rotate(225deg); }
.custom-select__options { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(6,7,20,0.16); border: 1px solid var(--border); z-index: 30; max-height: 240px; overflow-y: auto; }
.custom-select__option { padding: 11px 14px; border-radius: 6px; font-size: 15px; color: var(--navy); cursor: pointer; transition: background 0.15s ease; }
.custom-select__option:hover { background: #f3f3f6; }
.custom-select__option.is-selected { background: var(--navy); color: #fff; }
.contact-info-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 28px 44px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); max-width: 620px; }
.contact-info-label { font-size: 12px; color: var(--text-faint); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.contact-info-value { font-size: 14px; font-weight: 600; margin: 0; color: var(--navy); white-space: nowrap; }
.social-icons { display: flex; align-items: center; gap: 12px; }
.social-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.social-icon:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.contact-photo { position: relative; max-width: 460px; width: 100%; margin: 34px auto 0; }
.contact-badge { position: absolute; top: -26px; inset-inline-start: -26px; width: 96px; height: 96px; z-index: 2; animation: spinBadge 16s linear infinite; }
.contact-badge text { direction: ltr; }
@keyframes spinBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.contact-photo__frame { border-radius: 6px; overflow: hidden; aspect-ratio: 3/4; }
.contact-photo__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 32px var(--page-inset); }
.footer__row { max-width: none; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__copyright { color: var(--text-faint); font-size: 13px; margin: 0; }
.footer__top-link { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--navy); }
.footer__top-link:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Responsive */

/* הטווח שנפל בין הכיסאות: שתי הדירות עדיין זו לצד זו, אבל כל פאנל כבר צר
   מכדי להחזיק 4 עמודות מפרט — "חניה פרטית מקורה" קיבל 91px ונשבר לשלוש שורות.
   מתחת ל-900 הפאנלים נערמים ומקבלים את מלוא הרוחב, ואז 4 עמודות שוב תקינות. */
@media (min-width: 901px) and (max-width: 1350px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlight-list { grid-template-columns: 1fr; }
  .split-panel__footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  /* במובייל אין מה ליישר — הדירות זו מתחת לזו. מבטלים את ה-subgrid, אחרת שני
     הפאנלים היו נתבעים לאותן שורות ונערמים אחד על השני. */
  .split-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .split-panel { display: flex !important; flex-direction: column; grid-row: auto !important; }
  .split-panel__footer { align-self: stretch; margin-top: auto; flex-direction: row; align-items: center; }
  .split-panel + .split-panel { border-inline-start: none !important; border-top: 1px solid var(--border); padding-top: 46px; }
  .split-grid.is-visible .split-panel:nth-child(2) { transition-delay: 0s !important; }
  /* גובה התמונה נגזר מ-aspect-ratio גם במובייל — אין כאן override. */
  .split-section { padding-top: 76px; }
  /* הרוחב נקבע על השקופית עצמה (flex-basis) ולא על המסלול — המסלול הוא flex.
     החצים נשארים גם במובייל: בלי מגע ובלי חצים אין שום דרך להזיז את הקרוסלה,
     והם גם הסימן היחיד לגולש שיש עוד תמונות. */
  .carousel__slide { flex-basis: calc((100% - 18px) / 1.35) !important; }
  .carousel__nav { width: 40px; height: 40px; }
  .carousel__nav--prev { inset-inline-start: 6px; }
  .carousel__nav--next { inset-inline-end: 6px; }
}
@media (max-width: 540px) {
  .logo { height: 38px !important; width: 148px !important; }
  .site-header__row { padding: 20px !important; }
  .section { padding-inline: 20px !important; }
  .split-head { padding-inline: 20px !important; }
  .split-panel > * { margin-inline: 20px !important; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .highlight-list { grid-template-columns: 1fr !important; }
  .split-panel__footer { flex-direction: column !important; align-items: flex-start !important; }
  .split-panel__cta { width: 100%; text-align: center; }
  .contact-badge { display: none !important; }
  .contact-grid { gap: 40px !important; }
  .contact-photo { max-width: 280px !important; }
  .contact-info-grid { grid-template-columns: repeat(2, auto) !important; }
}