/* ============================================================================
   ניאו אילת — גיליון הסגנון הראשי
   ----------------------------------------------------------------------------
   מבנה הקובץ (שכבה אחת בלבד — אין כאן "תיקונים" שנכתבים על גבי הגדרות קודמות):

     01. טוקנים
     02. איפוס ובסיס
     03. טיפוגרפיה משותפת
     04. כפתורים וקישורים
     05. הבר העליון
     06. תפריט הצד
     07. Hero
     08. רצועת היתרונות
     09. גלריה
     10. חדרים
     11. חצר ומתקנים
     12. מחירים ותנאים
     13. סרטון סיור
     14. גלריית תמונות + Lightbox
     15. מיקום
     16. שאלות ותשובות
     17. יצירת קשר
     18. פוטר
     19. CTA צף במובייל
     20. אנימציות
     21. טאבלט ומטה  (≤ 991.98px)
     22. מובייל      (≤ 767.98px)
     23. העדפת תנועה מופחתת

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


/* ============================================================================
   01. טוקנים
   ============================================================================ */
:root {
  /* פלטת המותג */
  --ink: #173a3b;
  --ink-deep: #0b292b;
  --sea: #2f7474;
  --aqua: #8fbdb4;
  --sand: #e9d7b7;
  --cream: #f8f4eb;
  --paper: #fffdf8;
  --coral: #df765c;
  --coral-dark: #c85f48;
  --line: rgba(23, 58, 59, .16);

  /* רדיוסים */
  --radius-sm: .6rem;
  --radius-md: 1.5rem;
  --radius-lg: 3.5rem;

  /* סקאלת טיפוגרפיה רספונסיבית */
  --text-xs: clamp(.875rem, .84rem + .12vw, .96rem);
  --text-sm: clamp(1rem, .94rem + .2vw, 1.1rem);
  --text-base: clamp(1.08rem, 1rem + .24vw, 1.22rem);

  /* גובה הבר העליון והיסט העיגון — משתנים יחד במובייל.
     ההיסט הוא הגובה ועוד .75rem אוויר, כדי שכותרת סקשן לא תיצמד לבר. */
  --header-height: 5.5rem;
  --scroll-offset: 6.25rem;

  /* ריפוד הצד של המעטפת. כל מה שצריך להתיישר עם עמודת התוכן נשען עליו —
     כולל רכיבים ממוקמים אבסולוטית, שלא מושפעים מ-padding של ההורה. */
  --shell-pad: clamp(1.25rem, 4vw, 4.5rem);

  /* דריסות Bootstrap */
  --bs-body-font-family: "Assistant", sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-primary: var(--ink);
  --bs-border-radius: var(--radius-sm);
}


/* ============================================================================
   02. איפוס ובסיס
   ============================================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}

/* בזמן גלילה מונפשת מ-script.js — מכבים את הגלילה החלקה של הדפדפן
   כדי ששתי המנועות לא יילחמו על אותה גלילה */
html.is-programmatic-scroll { scroll-behavior: auto !important; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Assistant", sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
}

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

main section[id] { scroll-margin-top: var(--scroll-offset); }

.site-shell { max-width: 1460px; padding-inline: var(--shell-pad); }
.section { padding-block: clamp(6rem, 10vw, 10rem); }


/* ============================================================================
   03. טיפוגרפיה משותפת
   ============================================================================ */
h1, h2, h3, p { margin-top: 0; }
p { line-height: 1.75; }
small { font-size: var(--text-xs); }

h2 {
  margin-bottom: 0;
  color: var(--ink-deep);
  font-size: clamp(2.8rem, 6.2vw, 6.4rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.045em;
}
h2::first-line { font-weight: 600; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: var(--sea);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.eyebrow.light { color: rgba(255,255,255,.8); }

.section-heading { margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.section-heading p:last-child { margin-bottom: 0; color: rgba(23,58,59,.7); font-size: var(--text-base); line-height: 1.8; }
.section-heading.centered { max-width: 790px; margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }


/* ============================================================================
   04. כפתורים וקישורים
   ============================================================================ */
.button {
  display: inline-flex;
  min-height: 3.75rem;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem 1.8rem;
  border: 0;
  border-radius: 4rem;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--coral); color: #fff; }
.button-primary:hover { background: var(--coral-dark); color: #fff; }

.text-link { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--text-sm); font-weight: 600; }
.text-link i { transition: transform .25s ease; }
.text-link:hover i { transform: translateX(-.3rem); }
.light-link { color: #fff; }


/* ============================================================================
   05. הבר העליון
   ----------------------------------------------------------------------------
   הבר בנוי כבמה יחסית עם שלושה עוגנים אבסולוטיים: כפתור התפריט בקצה הימני,
   הלוגו במרכז אופטי מדויק (inset:0 + margin:auto), וכפתור ההזמנה בקצה השמאלי.
   מיקום אבסולוטי ולא grid — כדי שרוחב הלוגו לא יזיז את שני הכפתורים.
   ============================================================================ */
.site-header {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  left: 0;
  color: #fff;
  background: rgba(11, 41, 43, .9);
  box-shadow: 0 .5rem 2rem rgba(7, 29, 30, .18);
  backdrop-filter: blur(16px);
}
.navbar { min-height: var(--header-height); border-bottom: 1px solid rgba(255,255,255,.16); }

.topbar-grid { position: relative; height: var(--header-height); direction: rtl; }
.topbar-grid > .brand { position: absolute; inset: 0; width: max-content; height: max-content; margin: auto; }
/* ההיסט הוא var(--shell-pad) ולא 0: מיקום אבסולוטי נמדד מקופסת ה-padding
   של ההורה ולכן מתעלם מה-padding שלו, ובלעדיו הכפתורים נצמדים לקצה המסך. */
.topbar-grid > .menu-toggle {
  position: absolute;
  top: 0;
  right: var(--shell-pad);
  bottom: 0;
  left: auto;
  box-sizing: border-box;
  width: auto;
  height: 3.4rem;
  margin-block: auto;
  padding: .75rem 1.15rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 3rem;
  background: rgba(255,255,255,.08);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.topbar-grid > .menu-toggle:hover { background: #fff; color: var(--ink-deep); transform: translateY(-2px); }

.menu-toggle { display: inline-flex; align-items: center; gap: .8rem; font-size: 1rem; font-weight: 700; }
.menu-toggle i { font-size: 1.15rem; }

/* הלוגו — משמש בשלושה הקשרים: בר עליון, תפריט צד ופוטר */
.brand { display: inline-flex; align-items: center; gap: .75rem; }
/* עיגול ה-N. שני היחסים נגזרים מ---mark-size לפי קובצי הלוגו:
   טבעת = 3.8% מהקוטר, וגובה האות = 44% ממנו. גובה גדולה ב-Assistant הוא
   כ-0.7em, ולכן font-size = .44 / .7 ≈ .63 מהקוטר.
   כל הקשר מגדיר רק --mark-size, והשאר נגזר. */
.brand-mark {
  --mark-size: 2.75rem;
  display: grid;
  width: var(--mark-size);
  height: var(--mark-size);
  place-items: center;
  border: calc(var(--mark-size) * .038) solid currentColor;
  border-radius: 50%;
  font-size: calc(var(--mark-size) * .63);
  font-weight: 700;
  line-height: 1;
}
.brand strong, .brand small { display: block; line-height: 1; }
.brand strong { font-size: 1.35rem; font-weight: 700; letter-spacing: .12em; }
.brand small { margin-top: .3rem; font-size: var(--text-xs); font-weight: 300; letter-spacing: .02em; opacity: .7; }

/* בבר העליון הלוגו גדול וקריא יותר משתי הגרסאות האחרות */
.topbar-grid .brand { text-rendering: geometricPrecision; }
/* עיגול ה-N בחול, בהתאמה ל-favicon. ה-border יורש currentColor מכלל הבסיס,
   ולכן צביעת color לבדה מטפלת גם באות וגם בטבעת. */
.topbar-grid .brand-mark { color: var(--sand); }
.topbar-grid .brand strong { font-size: 1.5rem; line-height: 1; letter-spacing: 0; }
.topbar-grid .brand small { margin-top: .35rem; color: rgba(255,255,255,.92); font-size: .95rem; font-weight: 400; line-height: 1.05; letter-spacing: 0; opacity: 1; }


/* ============================================================================
   06. תפריט הצד
   ============================================================================ */
.menu-panel { position: fixed; z-index: 150; inset: 0; visibility: hidden; pointer-events: none; }
.menu-panel.is-open { visibility: visible; pointer-events: auto; }
.menu-is-open { overflow: hidden; }

.menu-backdrop { position: absolute; inset: 0; background: rgba(6, 28, 29, .68); opacity: 0; backdrop-filter: blur(4px); transition: opacity .35s ease; }
.menu-panel.is-open .menu-backdrop { opacity: 1; }

/* נפתח מימין — כיוון הקריאה של העמוד */
.menu-panel-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(92vw, 31rem);
  overflow-y: auto;
  padding: 2rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -2rem 0 5rem rgba(6, 28, 29, .22);
  transform: translateX(105%);
  transition: transform .45s cubic-bezier(.22,.8,.25,1);
}
.menu-panel.is-open .menu-panel-content { transform: translateX(0); }

.menu-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.menu-brand { color: var(--ink-deep); }
.menu-close { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.3rem; transition: transform .25s ease, background .25s ease; }
.menu-close:hover { background: var(--cream); transform: rotate(90deg); }

.menu-links { display: grid; margin-block: 2rem; }
.menu-links a { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .8rem; min-height: 4.25rem; border-bottom: 1px solid var(--line); font-size: clamp(1.18rem, 2.4vw, 1.45rem); font-weight: 600; transition: padding .25s ease, color .25s ease; }
.menu-links a:hover { padding-inline: .5rem; color: var(--coral); }
.menu-links a span { color: var(--sea); font-size: var(--text-xs); font-weight: 700; }
.menu-links a i { font-size: .9rem; }

.menu-panel-contact { padding: 1.4rem; border-radius: 1.2rem; background: var(--cream); }
.menu-panel-contact p { margin: 0 0 .75rem; color: var(--sea); font-size: var(--text-sm); font-weight: 700; }
.menu-panel-contact a { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; font-size: var(--text-sm); font-weight: 600; }
.menu-panel-contact a:last-child { width: max-content; padding-bottom: .25rem; border-bottom: 2px solid var(--coral); color: var(--coral); }


/* ============================================================================
   07. Hero
   ============================================================================ */
.hero { position: relative; display: flex; min-height: 100svh; align-items: center; overflow: hidden; color: #fff; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-position: 50% 52%; animation: heroReveal 1.1s ease both; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(6,33,35,.15) 0%, rgba(6,33,35,.78) 72%, rgba(6,33,35,.92) 100%),
    linear-gradient(0deg, rgba(6,33,35,.38), transparent 55%);
}
.hero-content { position: relative; z-index: 2; width: 100%; padding-top: 10rem; padding-bottom: 9rem; }
/* הסלוגן הגדול הוא אלמנט עיצובי, לא כותרת מבנית — ה-h1 הוא השורה
   התיאורית מעליו. הכלל מבוסס-מחלקה כדי שלא ייתפס על ידי h1 כלשהו ב-Hero. */
.hero-title { max-width: 900px; margin-bottom: 1.75rem; font-size: clamp(4.2rem, 9.2vw, 9rem); font-weight: 300; line-height: .82; letter-spacing: -.06em; }
.hero-title em { color: var(--sand); font-style: normal; font-weight: 600; }
.hero-copy { max-width: 600px; margin-bottom: 2.5rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 300; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 2rem; }

.hero-note { position: absolute; z-index: 2; left: clamp(1.5rem, 4vw, 4.5rem); bottom: 2.5rem; display: flex; align-items: baseline; gap: 1rem; writing-mode: vertical-rl; }
.hero-note span { font-size: 1.5rem; font-weight: 300; letter-spacing: .35em; }
.hero-note small { font-size: .65rem; letter-spacing: .14em; opacity: .65; }


/* ============================================================================
   08. רצועת היתרונות — נשלפת אל תוך ה-Hero במרג'ין שלילי
   ============================================================================ */
.benefits { position: relative; z-index: 5; margin-top: -2.7rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: var(--radius-md); background: var(--cream); box-shadow: 0 2rem 5rem rgba(13,54,54,.14); }
.benefits article { display: flex; align-items: center; gap: 1rem; padding: 1.8rem clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line); }
.benefits article:last-child { border-left: 0; }
.benefits i { color: var(--coral); font-size: 1.35rem; }
.benefits strong, .benefits span { display: block; }
.benefits strong { font-size: var(--text-sm); }
.benefits span { color: rgba(23,58,59,.65); font-size: var(--text-xs); }


/* ============================================================================
   09. גלריה
   ============================================================================ */
.gallery-grid { display: grid; grid-template-columns: 1.35fr .85fr .7fr; grid-template-rows: 18rem 18rem; gap: 1.25rem; }
.gallery-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.gallery-grid img { width: 100%; height: 100%; transition: transform .6s ease; }
.gallery-grid figure:hover img { transform: scale(1.025); }
.gallery-grid figcaption { position: absolute; right: 1.2rem; bottom: 1rem; padding: .5rem .85rem; border-radius: 2rem; background: rgba(255,253,248,.88); font-size: var(--text-xs); backdrop-filter: blur(8px); }
.gallery-main, .gallery-tall { grid-row: 1 / 3; }
.gallery-small { grid-column: 3; }
.gallery-tall img { object-position: 52% center; }  /* מוקד חיתוך לפי תמונת המקור */

.gallery-quote { display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem; border-radius: var(--radius-md); background: var(--ink); color: #fff; }
.gallery-quote i { color: var(--sand); font-size: 1.5rem; }
.gallery-quote p { margin: 0; font-size: 1.3rem; font-weight: 300; line-height: 1.3; }


/* ============================================================================
   10. חדרים
   ============================================================================ */
.rooms-section { background: var(--cream); }
.rooms-list { display: grid; gap: 2rem; }
.room-card { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 31rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); }
.room-card.reverse { grid-template-columns: .65fr 1.35fr; }
.room-card.reverse .room-image { order: 2; }
.room-card.compact { grid-template-columns: .95fr 1.05fr; margin-inline: 8%; }

.room-image { position: relative; min-height: 26rem; overflow: hidden; }
.room-image img { width: 100%; height: 100%; transition: transform .7s ease; }
.room-card:hover .room-image img { transform: scale(1.025); }
.room-image > span { position: absolute; top: 1.5rem; right: 1.5rem; display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 50%; background: rgba(255,253,248,.9); color: var(--ink); font-weight: 600; backdrop-filter: blur(8px); }

.room-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.room-content h3 { margin-bottom: 1.25rem; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 300; letter-spacing: -.04em; }
.room-content > p:not(.eyebrow) { color: rgba(23,58,59,.7); font-size: var(--text-base); line-height: 1.7; }
.room-content ul { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.room-content li { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 2rem; font-size: var(--text-xs); }
.room-content li i { margin-left: .35rem; color: var(--coral); }

/* מוקדי חיתוך לפי תמונות המקור */
.rooms-list .room-card:nth-child(1) .room-image img,
.rooms-list .room-card:nth-child(2) .room-image img { object-position: center 45%; }
.rooms-list .room-card:nth-child(3) .room-image img { object-position: 58% center; }


/* ============================================================================
   11. חצר ומתקנים
   ============================================================================ */
.amenities-section { position: relative; overflow: hidden; background: var(--ink-deep); color: #fff; }
.amenities-section h2 { color: #fff; }
.amenities-section .eyebrow { color: var(--sand); }
/* טבעות העיטור נגזרות מ---aqua ולא מליטרל, כדי שהטוקן יהיה מקור האמת */
.amenities-shape {
  position: absolute;
  top: -11rem;
  left: -10rem;
  width: 38rem;
  height: 38rem;
  border: 1px solid color-mix(in srgb, var(--aqua) 18%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem color-mix(in srgb, var(--aqua) 4%, transparent),
    0 0 0 10rem color-mix(in srgb, var(--aqua) 2.5%, transparent);
}

.amenities-collage { position: relative; min-height: 42rem; }
.amenities-wide { width: 88%; height: 32rem; border-radius: 12rem 12rem var(--radius-md) var(--radius-md); }
.amenities-float { position: absolute; left: 0; bottom: 0; width: 45%; height: auto; aspect-ratio: 3 / 2; border: .75rem solid var(--ink-deep); border-radius: var(--radius-md); object-position: center; }
.sun-label { position: absolute; right: 5%; bottom: 4.5rem; display: grid; width: 7.5rem; height: 7.5rem; place-items: center; border-radius: 50%; background: var(--sand); color: var(--ink); font-size: var(--text-xs); transform: rotate(-8deg); }
.sun-label i { display: block; margin-bottom: -.6rem; font-size: 1.4rem; }

.lead-copy { margin: 2rem 0 2.5rem; color: rgba(255,255,255,.72); font-size: var(--text-base); line-height: 1.8; }

/* הרשת מציירת את קווי ההפרדה דרך ה-gap מעל רקע בהיר */
.amenities-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(255,255,255,.14); }
.amenities-list span { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; background: var(--ink-deep); }
.amenities-list i { width: 1.2rem; color: var(--sand); text-align: center; }


/* ============================================================================
   12. מחירים ותנאים
   ============================================================================ */
.pricing-section { background: var(--paper); }
.pricing-intro { max-width: 31rem; margin: 2rem 0 1rem; color: rgba(23,58,59,.72); font-size: var(--text-base); line-height: 1.8; }
.fine-print { font-size: var(--text-xs); opacity: .55; }

.price-table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.price-table article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.8rem 2rem; border-bottom: 1px solid var(--line); }
.price-table article:last-child { border-bottom: 0; }
.price-table article.featured { background: var(--cream); }
.price-table article div > span, .price-table article div > small { display: block; }
.price-table article div > span { font-size: 1.15rem; font-weight: 700; }
.price-table article div > small { margin-top: .25rem; color: rgba(23,58,59,.6); font-size: var(--text-xs); }
.price-table article p { display: grid; grid-template-columns: auto auto; align-items: end; margin: 0; text-align: left; }
.price-table article p small { grid-column: 1 / 3; font-size: var(--text-xs); opacity: .6; }
.price-table article p strong { font-size: 2rem; line-height: 1; }
.price-table article p span { margin-right: .35rem; font-size: var(--text-xs); opacity: .6; }

.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.terms p { display: flex; gap: .75rem; margin: 0; padding: 1.1rem; border-radius: 1rem; background: rgba(233,215,183,.26); font-size: var(--text-xs); }
.terms i { margin-top: .15rem; color: var(--coral); }
.terms strong, .terms span { display: block; }
.terms strong { margin-bottom: .25rem; font-size: var(--text-xs); }


/* ============================================================================
   13. סרטון סיור
   ----------------------------------------------------------------------------
   שכבה כהה שמפרידה בין המחירים לגלריה, ששניהם בהירים.
   המסגרת נשענת על aspect-ratio ולא על ריפוד־אחוזים — היחס נשמר בכל רוחב
   בלי פריצה, וגם ה-iframe שנכנס אחרי הלחיצה יורש אותו.
   ============================================================================ */
.video-section { background: var(--ink-deep); color: rgba(255,255,255,.8); }
.video-section h2 { color: #fff; }
.video-section .eyebrow { color: var(--sand); }

.video-frame {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.35);
}
.video-frame > iframe,
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-frame > iframe { border: 0; }

.video-facade {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-facade img {
  width: 100%;
  height: 100%;
  transition: transform .6s ease, filter .4s ease;
  filter: brightness(.72);
}
.video-facade:hover img,
.video-facade:focus-visible img { transform: scale(1.04); filter: brightness(.6); }
.video-facade:focus-visible { outline: 3px solid var(--sand); outline-offset: -3px; }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: clamp(4.5rem, 9vw, 6.5rem);
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.4);
  transition: transform .3s ease, background .3s ease;
  transform: translate(-50%, -50%);
}
/* האייקון משולש ולכן נראה מוסט שמאלה במרכז אופטי — מחזירים אותו */
.video-play i { margin-inline-start: .18em; }
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play { background: var(--coral-dark); transform: translate(-50%, -50%) scale(1.08); }

.video-note { margin: 1.75rem 0 0; color: rgba(255,255,255,.6); font-size: var(--text-xs); text-align: center; }
.video-note a { border-bottom: 1px solid var(--sand); color: var(--sand); }


/* ============================================================================
   14. גלריית תמונות + Lightbox
   ----------------------------------------------------------------------------
   הרצועה היא scroll-snap מקורי — דפדוף באצבע במובייל מגיע מהדפדפן עצמו,
   בלי ספריה ובלי מאזיני touch. החיצים בדסקטופ רק קוראים ל-scrollBy.
   ה-Lightbox הוא <dialog> מקורי: לכידת פוקוס, Esc וחסימת הרקע בחינם.
   ============================================================================ */
.photo-rail-wrap { position: relative; }

.photo-rail {
  display: flex;
  direction: rtl;                 /* מקובע ולא בירושה — חישוב החיצים ב-JS נשען עליו */
  gap: 1rem;
  margin: 0;
  padding: .5rem var(--shell-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--shell-pad);
  scrollbar-width: none;          /* הפס מוחלף במחוון ההתקדמות שמתחת */
  list-style: none;
}
.photo-rail::-webkit-scrollbar { display: none; }
.photo-rail:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
.photo-rail > li { flex: 0 0 auto; scroll-snap-align: start; }

.photo-item {
  position: relative;
  display: block;
  width: clamp(17rem, 30vw, 26rem);
  padding: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--cream);
  cursor: pointer;
}
.photo-item img { width: 100%; height: 100%; transition: transform .6s ease; }
.photo-item:hover img,
.photo-item:focus-visible img { transform: scale(1.05); }
.photo-item:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }

.photo-zoom {
  position: absolute;
  inset-inline-end: .9rem;
  bottom: .9rem;
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,253,248,.9);
  color: var(--ink-deep);
  font-size: .82rem;
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(.4rem);
}
.photo-item:hover .photo-zoom,
.photo-item:focus-visible .photo-zoom { opacity: 1; transform: translateY(0); }

.rail-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-deep);
  box-shadow: 0 .6rem 1.8rem rgba(11,41,43,.22);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
  transform: translateY(-50%);
}
.rail-nav:hover { background: var(--ink-deep); color: #fff; }
.rail-prev { inset-inline-start: clamp(.5rem, 1.5vw, 1.5rem); }
.rail-next { inset-inline-end: clamp(.5rem, 1.5vw, 1.5rem); }
.rail-nav[disabled] { pointer-events: none; opacity: 0; }

/* במסכי מגע אין ריחוף — הדפדוף הוא באצבע, והחיצים רק מפריעים */
@media (hover: none) {
  .rail-nav { display: none; }
  .photo-zoom { opacity: 1; transform: none; }
}

.rail-progress {
  position: relative;
  height: 2px;
  margin: 1.75rem var(--shell-pad) 0;
  border-radius: 2px;
  background: var(--line);
}
.rail-progress-thumb {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--sea);
  transition: inset-inline-start .1s linear;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 28, 29, .97);
  color: #fff;
}
.lightbox::backdrop { background: rgba(6, 28, 29, .9); }

.lightbox-figure {
  display: grid;
  height: 100%;
  margin: 0;
  padding: clamp(4.5rem, 9vw, 6.5rem) clamp(1rem, 7vw, 7rem) clamp(3.5rem, 6vw, 4.5rem);
  align-content: center;
  justify-items: center;
  gap: 1.25rem;
}
/* דריסת ה-cover הגלובלי — בתצוגה מוגדלת רוצים את התמונה במלואה */
.lightbox-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox-figure figcaption {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: rgba(255,255,255,.8);
  font-size: var(--text-sm);
  text-align: center;
}
.lightbox-counter { color: rgba(255,255,255,.55); font-size: var(--text-xs); letter-spacing: .08em; }
.lightbox-counter b { color: var(--sand); font-weight: 700; }

.lightbox-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.lightbox-btn:hover { background: #fff; color: var(--ink-deep); }
.lightbox-close { top: 1.25rem; inset-inline-end: 1.25rem; }
.lightbox-prev { top: 50%; inset-inline-start: clamp(.75rem, 2vw, 2rem); transform: translateY(-50%); }
.lightbox-next { top: 50%; inset-inline-end: clamp(.75rem, 2vw, 2rem); transform: translateY(-50%); }
.lightbox-prev:hover,
.lightbox-next:hover { transform: translateY(-50%); }


/* ============================================================================
   15. מיקום
   ============================================================================ */
.location-section { padding-top: 0; }
.location-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 38rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--sea); color: #fff; }

/* צבע הרקע משמש כ-placeholder עד שה-iframe של גוגל נטען */
.location-map { position: relative; min-height: 38rem; background: #e8e2d7; }
.location-map iframe { display: block; width: 100%; height: 100%; min-height: 38rem; border: 0; filter: saturate(.82) contrast(.98); }

.location-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5.5rem); }
.location-content h2 { color: #fff; font-size: clamp(2.8rem, 4.5vw, 5rem); }
.location-content > p:not(.eyebrow) { margin: 2rem 0; color: rgba(255,255,255,.76); font-size: var(--text-base); line-height: 1.75; }
.distance-list { display: flex; gap: 1.5rem; margin-bottom: 2rem; padding-block: 1.5rem; border-block: 1px solid rgba(255,255,255,.2); }
.distance-list span { font-size: var(--text-xs); }
.distance-list strong { display: block; font-size: 1.6rem; font-weight: 300; }


/* ============================================================================
   16. שאלות ותשובות
   ----------------------------------------------------------------------------
   אקורדיון על <details>/<summary> מקוריים — נפתח, נגיש ומתפקד גם בלי JS.
   התכונה name="faq" גורמת לפתיחה של אחד לסגור את השאר (אקורדיון בלעדי).
   ============================================================================ */
.faq-list { max-width: 58rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  color: var(--ink-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;               /* מסתיר את המשולש של הדפדפן */
  transition: color .2s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--coral); }
.faq-list summary:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; }

/* סימן + שמסתובב ל-× בפתיחה */
.faq-list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  background: currentColor;
  transition: transform .3s ease;
  /* שני קווים המרכיבים פלוס */
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
}
.faq-list details[open] summary { color: var(--coral); }
.faq-list details[open] summary::after { transform: rotate(135deg); }

.faq-answer { padding-bottom: 1.6rem; }
.faq-answer p { max-width: 52rem; margin: 0; color: rgba(23,58,59,.75); font-size: var(--text-sm); }
.faq-answer a { border-bottom: 1px solid var(--coral); color: var(--coral); font-weight: 600; }


/* ============================================================================
   17. יצירת קשר
   ============================================================================ */
.contact-section { background: var(--cream); }
.contact-wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.contact-copy h2 { font-size: clamp(3.5rem, 6vw, 6rem); }
.contact-copy > p:not(.eyebrow) { max-width: 28rem; margin: 2rem 0; color: rgba(23,58,59,.7); font-size: var(--text-base); line-height: 1.75; }
.contact-direct { display: flex; flex-direction: column; gap: .65rem; }
.contact-direct a { display: flex; align-items: center; gap: .7rem; font-size: var(--text-sm); font-weight: 600; }
.contact-direct i { color: var(--coral); }

.contact-form { padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--radius-md); background: var(--paper); box-shadow: 0 2rem 6rem rgba(23,58,59,.09); }
.contact-form label { display: block; margin-bottom: 1.15rem; font-size: var(--text-xs); font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: .45rem;
  padding: .95rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: .3rem .3rem 0 0;
  outline: 0;
  background: rgba(233,215,183,.18);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  transition: border-color .2s ease, background .2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--coral); background: rgba(233,215,183,.3); }
.contact-form textarea { resize: vertical; }
.contact-form .button { width: 100%; margin-top: .5rem; }


/* ============================================================================
   18. פוטר
   ----------------------------------------------------------------------------
   דסקטופ: שלוש עמודות זו לצד זו.
   טאבלט ומטה: "אודות" ברוחב מלא למעלה, ניווט ויצירת קשר כשתי עמודות מתחתיו.
   ============================================================================ */
.site-footer { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7rem) 2rem; background: var(--ink-deep); color: rgba(255,255,255,.8); }
.site-footer::before {
  content: "";
  position: absolute;
  top: -18rem;
  left: -12rem;
  width: 42rem;
  height: 42rem;
  border: 1px solid rgba(233,215,183,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(233,215,183,.035), 0 0 0 10rem rgba(233,215,183,.02);
}
.site-footer .site-shell { position: relative; }  /* מעל עיטור ה-::before */

.footer-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-cta .eyebrow { margin-bottom: 1rem; }
.footer-cta h2 { color: #fff; font-size: clamp(3.5rem, 7vw, 7rem); }
.footer-cta-button { display: flex; min-width: 14rem; min-height: 4.3rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-radius: 4rem; background: var(--coral); color: #fff; font-size: var(--text-sm); font-weight: 700; transition: transform .25s ease, background .25s ease; }
.footer-cta-button:hover { background: var(--coral-dark); color: #fff; transform: translateY(-3px); }

.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .9fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 6vw, 5rem); direction: rtl; align-items: start; }
.footer-grid > * { min-width: 0; }  /* מאפשר לכתובת המייל הארוכה להישבר בתוך העמודה */
.footer-grid h3 { margin-bottom: 1.35rem; color: var(--sand); font-size: 1.15rem; font-weight: 700; }

.footer-about { text-align: right; }
.footer-about > p { max-width: 27rem; margin: 1.5rem 0; color: rgba(255,255,255,.66); font-size: var(--text-sm); }
.footer-brand { color: #fff; }
.footer-brand .brand-mark { color: var(--sand); }

.social-links { display: flex; gap: .65rem; }
.social-links a { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; font-size: 1.05rem; transition: background .25s ease, color .25s ease, transform .25s ease; }
.social-links a:hover { background: var(--sand); color: var(--ink-deep); transform: translateY(-3px); }

.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.footer-nav a { padding-bottom: .15rem; border-bottom: 1px solid transparent; font-size: var(--text-sm); }
.footer-nav a:hover { border-color: var(--sand); color: #fff; }

.footer-contact { display: flex; flex-direction: column; gap: .85rem; }
.footer-contact a,
.footer-contact p { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: var(--text-sm); }
.footer-contact i { width: 1.15rem; margin-top: .25rem; color: var(--sand); text-align: center; }
.footer-contact a span,
.footer-contact p span { min-width: 0; overflow-wrap: anywhere; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18); }
.footer-bottom p,
.footer-bottom a { margin: 0; font-size: var(--text-xs); }
.footer-bottom a { display: inline-flex; align-items: center; gap: .6rem; }


/* ============================================================================
   19. CTA צף
   ----------------------------------------------------------------------------
   הפעולה היחידה שזמינה בכל גלילה. שתי צורות לאותו רכיב:
   בדסקטופ קפסולה מרחפת בפינה שלא חוסמת תוכן, ובמובייל רצועה לרוחב —
   שם אצבע צריכה יעד גדול, ורצועה תחתונה היא הדפוס המוכר.
   ============================================================================ */
.float-cta {
  position: fixed;
  z-index: 60;
  inset-inline-start: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.5rem .85rem 1.15rem;
  border-radius: 4rem;
  background: var(--coral);
  color: #fff;
  box-shadow: 0 1rem 2.5rem rgba(11,41,43,.32);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.float-cta:hover {
  background: var(--coral-dark);
  color: #fff;
  box-shadow: 0 1.4rem 3rem rgba(11,41,43,.4);
  transform: translateY(-3px);
}
.float-cta i { font-size: 1.75rem; }
.float-cta-text { display: flex; flex-direction: column; line-height: 1.15; }
.float-cta-text strong { font-size: var(--text-sm); font-weight: 700; }
.float-cta-text small { font-size: var(--text-xs); opacity: .82; }


/* ============================================================================
   20. אנימציות
   ============================================================================ */
@keyframes heroReveal {
  from { transform: scale(1.05); opacity: .5; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes anchorArrive {
  from { opacity: .72; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* הבהוב עדין של הסקשן שאליו הגיעו דרך עוגן */
section:target .section-heading,
section:target .contact-wrap,
section:target .location-card,
section:target .hero-content { animation: anchorArrive .8s cubic-bezier(.2,.75,.25,1) both; }


/* ============================================================================
   21. טאבלט ומטה (≤ 991.98px)
   ============================================================================ */
@media (max-width: 991.98px) {
  /* Hero */
  .hero-note { display: none; }

  /* יתרונות — שתי עמודות, קווי ההפרדה משתנים בהתאם */
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefits article:nth-child(2) { border-left: 0; }
  .benefits article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  /* גלריה */
  .gallery-grid { grid-template-columns: 1.2fr .8fr; grid-template-rows: 17rem 17rem 13rem; }
  .gallery-small { grid-column: 1; grid-row: 3; }
  .gallery-quote { grid-column: 2; grid-row: 3; }

  /* חדרים */
  .room-card,
  .room-card.reverse,
  .room-card.compact { grid-template-columns: 1fr 1fr; margin-inline: 0; }

  /* חצר ומתקנים */
  .amenities-collage { min-height: 37rem; }
  .amenities-wide { height: 29rem; }

  /* גלריית תמונות */
  .photo-item { width: clamp(15rem, 42vw, 22rem); }

  /* מיקום ויצירת קשר — עמודה אחת */
  .location-card { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }

  /* פוטר */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.75rem 1.5rem; }
  .footer-about { grid-column: 1 / -1; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
  .footer-nav { grid-column: 1; }
  .footer-contact { grid-column: 2; }
}


/* ============================================================================
   22. מובייל (≤ 767.98px)
   ============================================================================ */
@media (max-width: 767.98px) {
  /* בר עליון נמוך יותר וריפוד צד צר יותר — שניהם דרך הטוקנים,
     כך שכל מה שנשען עליהם מתעדכן יחד */
  :root { --header-height: 5rem; --scroll-offset: 5.4rem; --shell-pad: 1.15rem; }

  /* בסיס — ה-padding התחתון מפנה מקום ל-CTA הצף */
  body { padding-bottom: 4.75rem; }
  .section { padding-block: 5.5rem; }
  h2 { font-size: clamp(2.7rem, 14vw, 4.1rem); }
  .section-heading { margin-bottom: 3rem; }

  /* בר עליון */
  .topbar-grid > .menu-toggle { height: 2.9rem; padding: .65rem .85rem; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* נשאר לקוראי מסך */
  .brand-mark { --mark-size: 2.35rem; }
  .brand strong { font-size: 1.15rem; }
  .brand small { font-size: .58rem; }
  .topbar-grid .brand { gap: .65rem; }
  .topbar-grid .brand-mark { --mark-size: 2.7rem; }
  .topbar-grid .brand strong { font-size: 1.3rem; }
  .topbar-grid .brand small { margin-top: .25rem; font-size: .78rem; line-height: 1; }

  /* תפריט הצד */
  .menu-panel-content { width: 66.6667vw; padding: 1rem; }
  .menu-panel-head .menu-brand small { font-size: .78rem; }
  .menu-links { margin-block: 1.4rem; }
  .menu-links a { grid-template-columns: 1.75rem 1fr auto; gap: .55rem; min-height: 3.65rem; font-size: 1rem; }
  .menu-panel-contact { padding: 1rem; }

  /* Hero — הצללה מלמטה במקום מהצד, והתוכן נצמד לתחתית */
  .hero { min-height: 46rem; }
  .hero-shade { background: linear-gradient(0deg, rgba(6,33,35,.88), rgba(6,33,35,.18) 85%); }
  .hero-content { align-self: flex-end; padding-top: 8.5rem; padding-bottom: 7rem; }
  .hero-title { font-size: clamp(3.8rem, 19vw, 5.5rem); line-height: .85; }
  .hero-copy { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }

  /* יתרונות */
  .benefits { margin-top: -2rem; }
  .benefits article { padding: 1.1rem .8rem; }
  .benefits article i { font-size: 1rem; }
  .benefits span { font-size: .875rem; }

  /* גלריה — תמונה ראשית רחבה ושלושה תאים מתחתיה */
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 19rem 13rem 13rem; gap: .65rem; }
  .gallery-main { grid-column: 1 / 3; grid-row: 1; }
  .gallery-tall { grid-column: 1; grid-row: 2 / 4; }
  .gallery-small { grid-column: 2; grid-row: 2; }
  .gallery-quote { grid-column: 2; grid-row: 3; padding: 1rem; }
  .gallery-quote p { font-size: 1rem; }
  .gallery-grid figure { border-radius: .8rem; }
  .gallery-grid figcaption { font-size: .875rem; }

  /* חדרים — תמונה מעל תוכן */
  .room-card,
  .room-card.reverse,
  .room-card.compact { grid-template-columns: 1fr; min-height: 0; border-radius: 1.6rem; }
  .room-card.reverse .room-image { order: 0; }
  .room-image { min-height: 16rem; }
  .room-content { padding: 2rem 1.5rem 2.5rem; }
  .room-content h3 { font-size: 2.3rem; }
  .room-content li { font-size: .9rem; }

  /* חצר ומתקנים */
  .amenities-section { padding-top: 4.5rem; }
  .amenities-collage { min-height: 26rem; }
  .amenities-wide { width: 90%; height: 21rem; border-radius: 6rem 6rem 1rem 1rem; }
  .amenities-float { width: 48%; border-width: .45rem; }
  .sun-label { right: 0; bottom: 2rem; width: 5.5rem; height: 5.5rem; }
  .amenities-list { font-size: .82rem; }

  /* מחירים */
  .fine-print { font-size: .9rem; }
  .price-table article { padding: 1.4rem 1.1rem; }
  .price-table article p strong { font-size: 1.55rem; }
  .price-table article div > small,
  .price-table article p small,
  .price-table article p span { font-size: .9rem; }
  .terms { grid-template-columns: 1fr; }
  .terms p { font-size: .9rem; }

  /* גלריית תמונות — כמעט מסך מלא, כשקצה התמונה הבאה מציץ ורומז שאפשר לגלול */
  .photo-rail { gap: .65rem; }
  .photo-item { width: 82vw; border-radius: 1.1rem; }
  .lightbox-btn { width: 2.9rem; height: 2.9rem; font-size: .95rem; }
  .lightbox-figure figcaption { flex-direction: column; gap: .4rem; }

  /* מיקום */
  .location-card { border-radius: 1.6rem; }
  .location-map,
  .location-map iframe { min-height: 25rem; }
  .location-content { padding: 2.5rem 1.5rem; }
  .distance-list { gap: .8rem; }
  .distance-list span { font-size: .9rem; }

  /* יצירת קשר */
  .contact-section { padding-bottom: 4rem; }
  .contact-form { padding: 1.25rem; }
  .contact-form label { font-size: .9rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* פוטר */
  .footer-cta { align-items: flex-start; flex-direction: column; }
  .footer-cta h2 { font-size: clamp(3.2rem, 15vw, 4.6rem); }
  .footer-cta-button { width: 100%; }
  .footer-grid { gap: 2.5rem 1.25rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }

  /* CTA צף — כאן הוא רצועה לרוחב המסך ולא קפסולה בפינה */
  .float-cta {
    inset-inline: .75rem;
    bottom: .65rem;
    justify-content: center;
    padding: .8rem 1.15rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 1rem;
  }
  .float-cta i { font-size: 1.65rem; }
}


/* ============================================================================
   23. העדפת תנועה מופחתת
   ----------------------------------------------------------------------------
   חייב להישאר הבלוק האחרון בקובץ: הוא דורס scroll-behavior מסעיף 02,
   ובלי !important זה עובד רק מכוח הסדר.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  section:target .section-heading,
  section:target .contact-wrap,
  section:target .location-card,
  section:target .hero-content { animation: none; }

  .menu-backdrop,
  .menu-panel-content { transition: none; }
}