/* ==========================================================================
   Tal Kopel Real Estate — Design System
   ========================================================================== */

:root {
  --color-bg: #faf9f6;
  --color-bg-alt: #f2f0ea;
  --color-surface: #ffffff;
  --color-text: #1b1c1e;
  --color-text-muted: #6b6a66;
  --color-text-soft: #8a8983;
  --color-navy: #21201d;
  --color-navy-deep: #131210;
  --color-gold: #a99872;
  --color-gold-soft: #d3c6a0;
  --color-border: #e6e3da;
  --color-border-strong: #d8d4c8;

  --font-heading: 'Cormorant Garamond', 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-w: 1240px;
  --container-pad: 24px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 88px;
  --space-2xl: 128px;

  --radius-sm: 2px;
  --radius-md: 4px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.35s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: 0.01em; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Typography scale ---------- */
h1, .h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.lede {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}
.btn-primary:hover { background: var(--color-navy-deep); border-color: var(--color-navy-deep); }

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-outline:hover { background: var(--color-navy); color: #fff; }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
.btn-outline-light:hover { background: #fff; color: var(--color-navy); border-color: #fff; }

.btn-gold {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}
.btn-gold:hover { background: #8a7955; border-color: #8a7955; }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 22px; font-size: 0.75rem; }

/* ---------- Header / Nav ----------
   Onyx Glass: a permanent dark frosted bar (ported from the approved
   mock/ prototype) -- background opacity/height/padding change on scroll
   or on non-hero (header-solid) pages, but the tint stays dark and nav
   text stays light at all times, so none of it needs a separate
   transparent/solid color switch anymore. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 14px 0;

  background: linear-gradient(180deg, rgba(14, 15, 17, 0.6), rgba(14, 15, 17, 0.42));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.6);

  transition: background var(--transition), box-shadow var(--transition),
    padding var(--transition), height var(--transition), border-color var(--transition);
}
.site-header.is-scrolled,
.site-header.header-solid {
  height: 64px;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.88), rgba(11, 12, 14, 0.8));
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.65);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  /* Logical properties: the logo is always the first flex child (the
     inline-start side -- left in English, right in Hebrew), so tightening
     only padding-inline-start pulls the logo closer to its corner while
     the nav/hamburger side (inline-end) keeps its original padding and
     doesn't move. */
  padding-inline-start: 8px;
  padding-inline-end: 28px;
}
.logo {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.logo::before {
  content: '';
  position: absolute;
  inset: -16px -26px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 72%);
  z-index: 0;
  border-radius: 50%;
}
.logo img {
  position: relative;
  z-index: 1;
  height: 116px;
  width: auto;
  max-width: 440px;
  object-fit: contain;
  display: block;
  transition: height var(--transition);
}
.site-header.is-scrolled .logo img,
.site-header.header-solid .logo img { height: 96px; }
.logo small {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 4px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f2efe7;
  position: relative;
  padding: 6px 0;
  transition: color var(--transition);
}
/* The header is a permanent dark glass bar now, so the "Contact" link's
   .btn-outline border/text need a light treatment at all times, not just
   over the transparent/hero state. */
.site-nav a.btn.btn-outline {
  color: #f2efe7;
  border-color: rgba(255, 255, 255, 0.45);
}
.site-nav a.btn.btn-outline:hover {
  background: #fff;
  color: var(--color-navy);
  border-color: #fff;
}
/* Proportions only — hover colors/fill come from .site-nav a.btn.btn-outline:hover above. */
.site-nav a.btn.btn-outline.btn-sm {
  padding: 8px 18px;
  border-width: 1px;
  border-radius: 1px;
}
.site-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--transition);
}
.site-nav a:not(.btn):hover::after,
.site-nav a.is-active::after { right: 0; }
.site-nav a.is-active { color: var(--color-gold-soft) !important; }

/* ---------- Language switcher ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: var(--space-sm);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-link {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.6;
  transition: opacity var(--transition), color var(--transition);
}
.lang-link:hover { opacity: 1; }
.lang-link.is-active { opacity: 1; color: var(--color-gold-soft); }

/* ---------- Currency switcher ---------- */
/* Same shape as .lang-switch/.lang-link just above (flex + gap +
   padding-inline-start/border-inline-start, all logical properties), so it
   mirrors correctly under [dir="rtl"] automatically with no separate RTL
   rule needed -- verified against the language switcher, which already
   relies on exactly this. .currency-link is a <button>, not an <a> (it
   changes display state, not the page), so it needs its own reset instead
   of inheriting from .site-nav a -- including its own ::after underline,
   since the shared .site-nav a:not(.btn)::after rule that gives .lang-link
   its active-state underline only ever matches <a> elements, never a
   <button>. Same padding (6px 0) as .site-nav a too, so the underline
   sits the same distance below the text as it does for EN/HE. */
.currency-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: var(--space-sm);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
.currency-link {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f2efe7;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  opacity: 0.6;
  position: relative;
  transition: opacity var(--transition), color var(--transition);
}
.currency-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--transition);
}
.currency-link:hover:not(:disabled) { opacity: 1; }
.currency-link:hover:not(:disabled)::after,
.currency-link.is-active::after { right: 0; }
.currency-link.is-active { opacity: 1; color: var(--color-gold-soft); }
.currency-link:disabled { opacity: 0.3; cursor: not-allowed; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 22px;
  position: relative;
  z-index: 1100;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background: #f2efe7;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.nav-toggle span { top: 10px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-open .nav-toggle span { background: transparent !important; }
.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); background: #f2efe7 !important; }
.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); background: #f2efe7 !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--color-navy);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Base gradient is the original, unchanged. The radial layer on top is
     localized to the logo's corner only (soft ellipse, fully transparent
     well before it reaches the nav or headline) -- it doesn't darken the
     rest of the photo. */
  background:
    radial-gradient(480px 300px at top left, rgba(8,15,28,0.62) 0%, rgba(8,15,28,0.28) 42%, rgba(8,15,28,0) 72%),
    linear-gradient(180deg, rgba(11,21,38,0.55) 0%, rgba(11,21,38,0.45) 45%, rgba(11,21,38,0.85) 100%);
}
[dir="rtl"] .hero-media::after {
  background:
    radial-gradient(480px 300px at top right, rgba(8,15,28,0.62) 0%, rgba(8,15,28,0.28) 42%, rgba(8,15,28,0) 72%),
    linear-gradient(180deg, rgba(11,21,38,0.55) 0%, rgba(11,21,38,0.45) 45%, rgba(11,21,38,0.85) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding-top: 60px;
}
.hero-content .eyebrow { color: var(--color-gold-soft); }
.hero-content h1 { color: #fff; margin-bottom: var(--space-md); }
.hero-content p { color: rgba(255,255,255,0.85); max-width: 520px; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  position: relative;
  padding: 200px 0 90px;
  color: #fff;
  background: var(--color-navy);
  background-size: cover;
  background-position: center;
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,21,38,0.72), rgba(11,21,38,0.72));
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; }
.page-banner .eyebrow { color: var(--color-gold-soft); }
.breadcrumb {
  margin-top: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: var(--color-gold-soft); }

/* ---------- Sections ---------- */
section { padding: var(--space-2xl) 0; }
.section-tight { padding: var(--space-xl) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-navy { background: var(--color-navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lede { color: rgba(255,255,255,0.72); }

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-xl);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); align-items: start; }

/* ---------- Value / feature blocks ---------- */
.feature {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.feature-icon {
  width: 44px; height: 44px;
  margin-bottom: var(--space-md);
  color: var(--color-gold);
}
.feature-icon svg { width: 100%; height: 100%; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--color-text-muted); }

/* ---------- Property cards ---------- */
.property-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.property-card:hover {
  box-shadow: 0 24px 48px -24px rgba(18,33,61,0.28);
  transform: translateY(-4px);
}
.property-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.property-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.property-card:hover .property-card-media img { transform: scale(1.06); }
.property-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,0.92);
  color: var(--color-navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}
.property-tag.for-rent { background: var(--color-navy); color: #fff; }
.property-card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.property-price { font-family: 'Montserrat', 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--color-navy); }
.property-title { font-size: 1.05rem; font-weight: 600; }
.property-location {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 6px;
}
.property-location svg,
.property-specs svg,
.detail-location svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.property-specs {
  display: flex;
  gap: var(--space-md);
  padding: 12px 0;
  margin: 4px 0 6px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.property-specs span { display: flex; align-items: center; gap: 6px; }
.property-desc { color: var(--color-text-muted); font-size: 0.92rem; flex: 1; }
.property-card-footer { margin-top: 8px; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  padding: 10px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 30px;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--color-navy); color: var(--color-navy); }
.filter-btn.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* ---------- Advanced filter panel (collapsed by default) ---------- */
.filter-panel { display: none; }
.filter-panel.is-open { display: block; }

/* ---------- Map view (collapsed by default) ---------- */
.map-view { display: none; }
.map-view.is-open { display: block; }

/* ---------- Schedule-a-viewing form (collapsed by default) ---------- */
.schedule-form { display: none; }
.schedule-form.is-open { display: block; }

/* ---------- Services ---------- */
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover { box-shadow: 0 20px 40px -28px rgba(18,33,61,0.3); border-color: var(--color-border-strong); }
.service-index {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}
.service-icon { width: 40px; height: 40px; color: var(--color-navy); margin-bottom: var(--space-md); }
.service-icon svg { width: 100%; height: 100%; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------- Quote / testimonial ---------- */
.quote-block { max-width: 780px; margin: 0 auto; text-align: center; }
.quote-block blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 var(--space-md);
}
.quote-cite { font-size: 0.85rem; color: var(--color-text-muted); letter-spacing: 0.03em; }
.quote-cite span { color: var(--color-gold); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background-image: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
}
.cta-banner h2 { color: #fff; margin-bottom: var(--space-sm); }
.cta-banner p { color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto var(--space-lg); }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- About page specifics ---------- */
.about-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
/* Swap the image/text columns on desktop only -- grid honors `order` and
   auto-mirrors under [dir="rtl"], so this single rule puts the image on the
   right in English and on the left in Hebrew (text stays on the reading-
   start side in both). Reset to source order at the mobile breakpoint below
   so the stacked layout (image above text) is unchanged. */
.about-page-photo { order: 2; }
.about-text { order: 1; }
.values-list { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-lg); }
.value-item { display: flex; gap: 14px; align-items: flex-start; }
.value-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-gold);
  margin-top: 9px;
  flex-shrink: 0;
}
.value-item h4 { font-size: 1rem; margin-bottom: 4px; }
.value-item p { color: var(--color-text-muted); font-size: 0.9rem; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-xl); border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.stat-item .stat-num { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--color-navy); }
.stat-item .stat-label { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* ---------- Property detail page ---------- */
.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.detail-gallery-main { aspect-ratio: 16 / 11; overflow: hidden; cursor: pointer; }
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-thumbs { display: grid; grid-template-rows: repeat(2, 1fr); gap: 12px; }
.detail-gallery-thumbs > div { overflow: hidden; cursor: pointer; position: relative; }
.detail-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.detail-gallery-thumbs > div:hover img { transform: scale(1.05); }
.gallery-more-overlay {
  position: absolute; inset: 0;
  background: rgba(11,21,38,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; letter-spacing: 0.05em;
  font-size: 0.9rem;
}

/* ---------- Desktop gallery layout (min-width: 861px only -- one pixel
   above the existing mobile breakpoint below, @media (max-width: 860px),
   so this can never affect mobile, which already looks right and stays
   completely untouched here) ----------
   Two arrangements; scripts/generate-data.js's galleryLayoutClass() picks
   one per property, at build time, from the primary (first) image's own
   real aspect ratio (see its own comment for the exact rule) and
   adds/omits the "layout-a" class on .detail-gallery accordingly. Layout B
   is the strongly-preferred default; Layout A is only a fallback for
   primary photos genuinely too wide/panoramic for Layout B's own primary
   box to show well.

   Layout B (default -- no "layout-a" class, exactly today's existing
   layout): primary image on one side, secondary pair stacked on the
   other. .detail-gallery-thumbs' aspect-ratio below is the actual fix for
   the original visible-gap problem: with the main image fixed at 16:11
   and the grid's 2fr:1fr column split, the stacked pair's width is always
   exactly half the main image's width -- so giving the pair's *container*
   an 8:11 ratio (half of 16:11's own width side) makes its total rendered
   height always come out exactly equal to the main image's height, for
   any source photos, instead of "however tall the two photos naturally
   render," which is what could leave a gap before. */
@media (min-width: 861px) {
  .detail-gallery-thumbs { aspect-ratio: 8 / 11; }

  /* Layout A (fallback only): primary image spans the full width on top,
     secondary pair side by side underneath (3:2 each, ordinary photo
     proportions). Structurally the same idea as the existing mobile
     stacked arrangement below, just with these desktop-appropriate fixed
     ratios instead of mobile's own sizing.
     The primary box is a wide 21:9 "banner" crop -- wider than Layout B's
     own 16:11 primary box, which is the whole point: Layout A only ever
     gets chosen (see generate-data.js) for photos wide enough that this
     wider box actually shows more of them. The wider ratio is also a
     shorter box for the same width, so this doubles as the height cap
     that keeps a wide hero photo from dominating the page; max-height is
     an extra hard ceiling for very wide viewports where 21:9 alone would
     still render tall in absolute pixels. */
  .detail-gallery.layout-a { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .detail-gallery.layout-a .detail-gallery-main { aspect-ratio: 21 / 9; max-height: 520px; }
  .detail-gallery.layout-a .detail-gallery-thumbs {
    aspect-ratio: unset;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }
  .detail-gallery.layout-a .detail-gallery-thumbs > div { aspect-ratio: 3 / 2; }
}

.gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 2000;
  background: rgba(11,21,38,0.96);
  display: none;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox-media { max-width: 90vw; max-height: 80vh; }
.gallery-lightbox-media img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--transition);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.gallery-lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; }
.gallery-lightbox-close svg { width: 20px; height: 20px; }
.gallery-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.gallery-lightbox-nav svg { width: 24px; height: 24px; }
.gallery-lightbox-prev { left: 24px; }
.gallery-lightbox-next { right: 24px; }
.gallery-lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.detail-header-row {
  display: flex;
  justify-content: space-between;
  /* center (not flex-start) so the price lines up with the title, not with
     the small status tag sitting above it -- flex-wrap below is untouched,
     so narrow viewports still stack the price on its own full-width line
     exactly as before. */
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.detail-location {
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 0.95rem;
}
.detail-price { font-family: 'Montserrat', 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif; font-size: 2.1rem; font-weight: 600; color: var(--color-navy); white-space: nowrap; }

.detail-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.detail-spec-item { text-align: center; }
.detail-spec-item .spec-icon { width: 26px; height: 26px; margin: 0 auto 10px; color: var(--color-gold); }
.detail-spec-item .spec-icon svg { width: 100%; height: 100%; }
.detail-spec-item .spec-val { font-weight: 700; font-size: 1.1rem; }
.detail-spec-item .spec-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.detail-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin-top: var(--space-md); }
.detail-features li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--color-text); }
.detail-features li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-sidebar {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  position: sticky;
  top: 110px;
}
.detail-sidebar h3 { margin-bottom: 6px; }
.detail-sidebar p { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-md); }
.agent-card { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-strong); }
.agent-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.agent-card .agent-name { font-weight: 600; font-size: 0.95rem; }
.agent-card .agent-role { font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
input, textarea, select {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(18,33,61,0.08);
}
textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 0.8rem; color: var(--color-text-soft); margin-top: var(--space-sm); }
.form-success {
  display: none;
  background: #f0f5f0;
  border: 1px solid #cfe0cf;
  color: #33503a;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}
.form-success.is-visible { display: block; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); align-items: start; }
.contact-info-card {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
}
.contact-info-card h3 { color: #fff; margin-bottom: var(--space-sm); }
.contact-info-card > p { color: rgba(255,255,255,0.72); margin-bottom: var(--space-lg); font-size: 0.92rem; }
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.contact-info-item:first-of-type { border-top: none; }
.contact-info-item .icon { width: 20px; height: 20px; color: var(--color-gold-soft); flex-shrink: 0; }
.contact-info-item .icon svg { width: 100%; height: 100%; }
.contact-info-item .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
.contact-info-item .value { font-weight: 600; }
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: var(--space-lg);
  background: #2eae66;
  color: #fff;
  padding: 15px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  transition: background var(--transition);
}
.whatsapp-btn:hover { background: #25954f; }
.whatsapp-btn svg { width: 20px; height: 20px; }

.map-frame {
  margin-top: var(--space-xl);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 21/7;
  filter: grayscale(0.5) contrast(1.05);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 404 page ---------- */
.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.not-found .container { max-width: 620px; }
.not-found .eyebrow { display: block; }
.not-found-code {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 1;
  color: var(--color-gold);
  margin: var(--space-sm) 0;
}
.not-found h1 { margin-bottom: var(--space-sm); }
.not-found .lede { max-width: 480px; margin: 0 auto var(--space-lg); }
.not-found-actions { display: flex; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-deep); color: rgba(255,255,255,0.7); padding: var(--space-xl) 0 var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-lg); padding-bottom: var(--space-xl); }
.footer-logo { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin-bottom: var(--space-sm); display: block; }
.footer-about { font-size: 0.88rem; max-width: 280px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-md); font-family: var(--font-body); font-weight: 600; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 0.9rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--color-gold-soft); }
.footer-social { display: flex; gap: 12px; margin-top: var(--space-md); }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}
.footer-social a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.no-scroll { overflow: hidden; }
.empty-state { text-align: center; padding: var(--space-2xl) 0; color: var(--color-text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
}

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 1050;
    background: linear-gradient(180deg, rgba(11, 12, 14, 0.88), rgba(11, 12, 14, 0.8));
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
  }
  .nav-open .site-nav { transform: translateX(0); }
  .site-nav a { color: #f2efe7 !important; font-size: 1.1rem; }
  /* .currency-link is a <button>, so the .site-nav a rule just above
     doesn't reach it -- same mobile sizing given explicitly instead. */
  .currency-link { color: #f2efe7; font-size: 0.95rem; }
  .nav-toggle { display: block; }

  /* Logo sized to match desktop's own logo-height:header-height ratio
     (116px:80px normal, 96px:64px scrolled) instead of an arbitrary mobile
     value -- desktop's logo file has ~42.5% of its canvas as transparent
     padding around the visible mark (measured from the PNG's own alpha
     channel), so its declared height is already ~1.45-1.5x the header's
     own height, with only the invisible padding poking past the header
     edges. Reproducing that exact ratio here gives the mobile logo the
     same real visual presence/proportions as desktop (not a copy of its
     pixel size), while the visible mark itself still lands with 12-19px
     of clearance from both header edges -- same geometry as desktop, just
     scaled to this header's height, so nothing visible is clipped or
     touches the header's top/bottom. */
  .site-header { height: 88px; padding: 10px 0; }
  .site-header.is-scrolled, .site-header.header-solid { height: 74px; }
  .logo img { height: 128px; }
  .site-header.is-scrolled .logo img,
  .site-header.header-solid .logo img { height: 111px; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 16/10; }
  /* About page's own photo only (.about-media alone is shared with
     services.html's process photo, left untouched above) -- the shared
     16/10 box is short and wide, which made this portrait photo shrink
     down to a small pillarboxed strip under object-fit: contain. A taller,
     portrait-shaped box (close to the source photo's own ~4:5 proportions)
     with object-fit: cover fills that box edge to edge instead, and the
     margin-top gives it room below the section top instead of sitting
     flush against it. */
  .about-media.about-page-photo { aspect-ratio: 4/5; margin-top: var(--space-md); }
  .about-media.about-page-photo img { object-fit: cover; }
  .about-page-photo, .about-text { order: initial; }
  .values-list { grid-template-columns: 1fr; }
  .detail-features { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: 1fr; width: 100%; }
  .detail-gallery-thumbs { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
  .detail-specs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  section { padding: var(--space-xl) 0; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero { min-height: 100vh; }
  .hero-actions .btn { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .page-banner { padding: 150px 0 60px; }
}

@media (max-width: 860px) {
  .lang-switch { border-inline-start: none; padding-inline-start: 0; }
  .currency-switch { border-inline-start: none; padding-inline-start: 0; }
}

/* ==========================================================================
   RTL support (Hebrew) — targeted overrides only. Everything else in this
   stylesheet already uses flex/grid + gap, which mirrors correctly under
   [dir="rtl"] automatically; these are the few spots with a hardcoded
   physical left/right that don't.
   ========================================================================== */
[dir="rtl"] .property-tag { left: auto; right: 16px; }

[dir="rtl"] .nav-toggle span,
[dir="rtl"] .nav-toggle span::before,
[dir="rtl"] .nav-toggle span::after { left: auto; right: 0; }

[dir="rtl"] .site-nav a:not(.btn)::after { left: 100%; right: 0; }
[dir="rtl"] .site-nav a:not(.btn):hover::after,
[dir="rtl"] .site-nav a.is-active::after { left: 0; right: 0; }

/* Phone number is pure digits/symbols, no Hebrew — left as plain text in
   an RTL context, the space-separated groups ("+972 54 467 0100") get
   reordered by the bidi algorithm. Force a single LTR embedding so the
   groups render in their real left-to-right order. */
[dir="rtl"] [data-setting="phone"] { direction: ltr; unicode-bidi: embed; }

/* Hebrew hero polish — subtle refinements requested for the Hebrew hero only;
   English hero is untouched. */
[dir="rtl"] .hero-content h1 { line-height: 1.05; }
[dir="rtl"] .hero-content .eyebrow {
  font-weight: 700;
  font-size: 0.86rem;
  position: relative;
  top: 5px;
}
[dir="rtl"] .hero-content p { margin-bottom: calc(var(--space-lg) + 12px); }
[dir="rtl"] .hero-actions .btn-outline-light { border-width: 2px; }

/* Optical size compensation — Frank Ruhl Libre and Assistant have a
   meaningfully shorter cap-height than Cormorant Garamond/Inter at the same
   declared font-size (measured ~78% via canvas text metrics), so Hebrew
   text at identical px values reads visibly smaller. These nudge the size
   up (not to full parity, to avoid re-wrapping the hero headline or
   crowding the nav) so both languages carry the same visual weight. */
[dir="rtl"] .hero-content h1 { font-size: clamp(2.68rem, 5.6vw, 4.7rem); }
[dir="rtl"] .site-nav a { font-size: 0.89rem; }