/* =========================================================
   FARMAN REAL ESTATE — Design System
   ========================================================= */

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* Brand colors */
  --dark:          #0D2E2E;   /* primary dark teal */
  --dark-hover:    #183D3D;
  --teal:          #28B5A2;   /* accent turquoise */
  --teal-dark:     #1E9080;
  --teal-light:    #E8F7F5;

  --color-bg:      #F4EFE3;   /* Coconut Milk (Pantone 11-0608 TCX) */
  --color-bg-alt:  #EBE4D4;
  --color-surface: #FFFFFF;
  --color-text:    #1A1A1A;
  --color-muted:   #6B7280;
  --color-border:  #E5EAEA;

  /* Type */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-logo:    "Josefin Sans", "Inter", sans-serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-body: 1rem;
  --size-lead: 1.125rem;
  --size-h3:   clamp(1.25rem, 2vw, 1.5rem);
  --size-h2:   clamp(1.75rem, 3.5vw, 2.5rem);
  --size-h1:   clamp(2.25rem, 5vw, 3.5rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Layout */
  --container: 1280px;
  --pad: 1.5rem;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  /* Transitions */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t: 220ms var(--ease);
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding: var(--space-12) 0; }
.section-alt { background: var(--color-bg-alt); }

.section-head { margin-bottom: var(--space-6); }
.section-head h2 { font-size: var(--size-h2); color: var(--dark); }
.section-head p  { color: var(--color-muted); margin-top: var(--space-1); }
.section-head.center { text-align: center; }

.label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-1);
  display: block;
}

/* =========================================================
   LOGO
   ========================================================= */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
}
/* Keep logo images at their natural aspect ratio — the flex column above
   would otherwise stretch them to full container width (align-items:stretch). */
.logo img {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}
.logo-farman {
  font-family: var(--font-logo);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--dark);
}
.logo-farman .accent { color: var(--teal); }
.logo-sub {
  font-family: var(--font-logo);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--teal);
}
/* Light logo version (footer) */
.logo-light .logo-farman { color: #fff; }
.logo-light .logo-sub    { color: var(--teal); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--size-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t), border-color var(--t);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary  { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-dark     { background: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--dark-hover); }
.btn-outline  { border: 1.5px solid var(--dark); color: var(--dark); }
.btn-outline:hover { background: var(--dark); color: #fff; }
.btn-ghost    { color: var(--teal); }
.btn-ghost:hover { text-decoration: underline; }
.btn-lg { padding: 1rem 2rem; font-size: var(--size-body); }
.btn-block { width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(13,46,46,.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
}
.site-nav ul {
  display: flex;
  gap: var(--space-4);
}
.site-nav a {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--dark);
  transition: color var(--t);
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.site-nav a:hover,
.site-nav a.active { color: var(--teal); }
.site-nav a:hover::after,
.site-nav a.active::after { transform: scaleX(1); }

.header-cta { display: inline-flex; }

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero {
  position: relative;
  height: clamp(480px, 72vh, 820px);
  overflow: hidden;
  background: var(--dark);
}
.hero-slides {
  position: absolute; inset: 0;
  display: flex;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,46,46,.25) 0%,
    rgba(13,46,46,.55) 100%
  );
}
/* Placeholder slide backgrounds */
.hero-slide:nth-child(1) { background: linear-gradient(135deg, #0D2E2E 0%, #183D3D 40%, #28B5A2 100%); }
.hero-slide:nth-child(2) { background: linear-gradient(135deg, #1A3D2B 0%, #0D2E2E 60%, #2AB5A2 100%); }
.hero-slide:nth-child(3) { background: linear-gradient(135deg, #0a1f2e 0%, #0D2E2E 50%, #1A8B7D 100%); }
.hero-slide:nth-child(4) { background: linear-gradient(135deg, #162B30 0%, #0D3530 60%, #28B5A2 100%); }

/* Replace placeholders with real images: */
/* .hero-slide:nth-child(N) { background-image: url('img/heroN.jpg'); background-size: cover; background-position: center; } */

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  padding-block: var(--space-12);
}
.hero-eyebrow {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-2);
}
.hero h1 {
  font-size: var(--size-h1);
  font-weight: 700;
  max-width: 16ch;
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.hero-sub {
  font-size: var(--size-lead);
  color: rgba(255,255,255,.85);
  max-width: 48ch;
}

/* Slider dots */
.hero-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.hero-dot.active {
  background: var(--teal);
  transform: scale(1.3);
}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.search-wrap {
  background: var(--color-bg);
  box-shadow: 0 8px 40px rgba(13,46,46,.15);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-3);
  margin-top: calc(-1 * var(--space-8));
  position: relative;
  z-index: 10;
}
.search-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}
.search-tab {
  padding: 0.5rem 1.5rem;
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t), border-color var(--t);
}
.search-tab.active {
  color: var(--teal);
  border-color: var(--teal);
}
.search-form {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  align-items: end;
}
.search-field { display: flex; flex-direction: column; gap: 4px; }
.search-field label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.search-field select,
.search-field input {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.875rem;
  font-size: var(--size-sm);
  background: var(--color-bg);
  color: var(--dark);
  transition: border-color var(--t);
  outline: none;
}
.search-field select:focus,
.search-field input:focus { border-color: var(--teal); }

/* =========================================================
   PROPERTY CARD
   ========================================================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
}
.card {
  box-shadow: 0 6px 24px rgba(13,46,46,.05);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(13,46,46,.14);
}
.card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.card-img .ph { aspect-ratio: 16/10; border-radius: 0; }
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card-img img { transition: transform 700ms var(--ease); }
.card:hover .card-img img { transform: scale(1.07); }

.card-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--dark);
  color: #fff;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-sm);
}
.card-badge.sale { background: var(--teal); }
.card-badge.featured { background: #D97706; }

.card-fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px; height: 36px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
  color: var(--dark);
}
.card-fav:hover, .card-fav.active {
  background: var(--teal);
  color: #fff;
}
.card-fav svg { width: 16px; height: 16px; }

.card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}
.card-loc {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc {
  font-size: var(--size-sm);
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.card-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--size-xs);
  color: var(--color-muted);
  font-weight: 500;
}
.card-meta-item svg { width: 14px; height: 14px; color: var(--teal); }
.card-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  margin-top: var(--space-1);
}
.card-price .currency {
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--color-muted);
  margin-left: 2px;
}
.card-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}
.card-footer a {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t);
}
.card-footer a:hover { gap: 8px; }

/* Placeholder */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #0D2E2E 0%, #183D3D 60%, #28B5A2 100%);
  color: rgba(255,255,255,.4);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-portrait { aspect-ratio: 3/4; }
.ph-square   { aspect-ratio: 1/1; }
.ph-wide     { aspect-ratio: 16/9; }

/* =========================================================
   LISTINGS GRID
   ========================================================= */
.grid-listings {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

/* =========================================================
   FILTER SIDEBAR
   ========================================================= */
.sidebar-layout {
  display: grid;
  gap: var(--space-6);
}
.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-3);
  align-self: start;
  position: sticky;
  top: 92px;
  /* Constrain to the viewport so a tall filter list still sticks/follows
     the scroll instead of running past the fold. Scrolls internally if needed. */
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.filter-panel::-webkit-scrollbar { width: 7px; }
.filter-panel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.filter-panel::-webkit-scrollbar-track { background: transparent; }
.filter-panel h3 {
  font-size: var(--size-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: var(--space-3);
}
.filter-group {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) 0;
}
.filter-group h4 {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: var(--space-1);
}
.filter-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--size-sm);
  padding: 3px 0;
  cursor: pointer;
  color: var(--color-text);
}
.filter-group input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--teal);
}
.filter-range {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.filter-range input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.75rem;
  font-size: var(--size-sm);
  background: var(--color-surface);
  -moz-appearance: textfield;
  appearance: textfield;
}
.filter-range input::-webkit-outer-spin-button,
.filter-range input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-range input:focus { border-color: var(--teal); outline: none; }
/* Consent checkbox row — keep label text on one flowing line */
.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: var(--size-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
.consent-row input { margin-top: 2px; accent-color: var(--teal); width: 16px; height: 16px; }
.consent-row span { display: block; }

/* Toolbar */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.toolbar-count { font-size: var(--size-sm); color: var(--color-muted); }
.toolbar-count strong { color: var(--dark); }
.toolbar-controls { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.toolbar-controls select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--size-sm);
}

/* Favourites toggle in toolbar */
.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fav-toggle svg { width: 15px; height: 15px; }
.fav-toggle.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.fav-toggle .fav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--teal-light);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
}
.fav-toggle.active .fav-count { background: rgba(255,255,255,.25); color: #fff; }

/* Empty state (no filter matches / no favourites) */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) var(--space-3);
  color: var(--color-muted);
}
.empty-state .empty-icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
}
.empty-state .empty-icon svg { width: 32px; height: 32px; color: var(--teal); }
.empty-state h3 { font-size: var(--size-h3); color: var(--dark); margin-bottom: var(--space-1); }
.empty-state p { max-width: 42ch; margin: 0 auto var(--space-4); }

/* =========================================================
   DETAIL PAGE
   ========================================================= */
.gallery-main  { aspect-ratio: 16/9; }
.gallery-thumb { aspect-ratio: 4/3; }
.detail-gallery-grid {
  display: grid;
  gap: 6px;
}

.detail-header { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.detail-loc {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-1);
}
.detail-title-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}
.detail-title {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--dark);
  max-width: 28ch;
  overflow-wrap: break-word;
  word-break: break-word;
}
.detail-price-block { text-align: right; }
.detail-price {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--dark);
}
.detail-price-label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.facts-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-block: var(--space-4);
}
.fact {
  background: var(--color-bg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 4px;
}
.fact-label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.fact-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--dark);
}

.detail-layout {
  display: grid;
  gap: var(--space-6);
}
.detail-content h2 {
  font-size: var(--size-h3);
  color: var(--dark);
  margin: var(--space-4) 0 var(--space-2);
}
.detail-content h2:first-child { margin-top: 0; }
.detail-content p {
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem var(--space-3);
}
.feature-list li {
  font-size: var(--size-sm);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex; gap: 0.5rem; align-items: center;
}
.feature-list li::before { content: "✓"; color: var(--teal); font-weight: 700; }

/* Rich description formatting */
.detail-content h2 { font-weight: 600; }
.detail-content h3 { font-size: 1.05rem; color: var(--dark); margin: var(--space-3) 0 var(--space-1); }
.detail-content ul { margin: 0 0 var(--space-3) 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.detail-content ul li { list-style: disc; color: var(--color-text); line-height: 1.65; }
.detail-content ul li strong { color: var(--dark); }
.detail-content .feature-list li { list-style: none; }

/* Specification table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
  font-size: var(--size-sm);
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.spec-table th {
  font-weight: 500;
  color: var(--color-muted);
  width: 42%;
  white-space: nowrap;
}
.spec-table td {
  font-weight: 600;
  color: var(--dark);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* Agent card */
.agent-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  position: sticky;
  top: 92px;
}
.agent-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.agent-photo .ph { aspect-ratio: 1/1; width: 80px; height: 80px; border-radius: 50%; }
.agent-name { font-size: 1.125rem; font-weight: 700; color: var(--dark); }
.agent-role {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-2);
}
.agent-contact-line {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: var(--size-sm);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}
.agent-contact-line svg { width: 15px; height: 15px; color: var(--teal); flex-shrink: 0; }
.agent-contact-line a:hover { color: var(--teal); }
.agent-form {
  margin-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.agent-form > p:first-child {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--dark);
}
.agent-form input,
.agent-form textarea,
.agent-form select {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  padding: 0.8rem 0.95rem;
  font-size: var(--size-sm);
  color: var(--color-text);
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.agent-form input::placeholder,
.agent-form textarea::placeholder { color: #9A9A96; opacity: 1; }
.agent-form input:focus,
.agent-form textarea:focus,
.agent-form select:focus {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(13,46,46,0.07);
}
.agent-form textarea { min-height: 90px; resize: vertical; }
/* Apple-style primary submit on the enquiry form */
.agent-form .btn-primary {
  background: var(--dark);
  border-radius: 6px;
  padding: 0.9rem 2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.agent-form .btn-primary:hover { background: var(--teal); transform: translateY(-1px); }
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #25D366;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  font-size: var(--size-sm);
  font-weight: 600;
  width: 100%;
  transition: background var(--t);
}
.whatsapp-btn:hover { background: #1EB85C; }
.whatsapp-btn svg { width: 18px; height: 18px; }

/* Map placeholder */
.map-ph {
  height: 400px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--color-border) 39px, var(--color-border) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--color-border) 39px, var(--color-border) 40px),
    var(--teal-light);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--size-sm);
  text-align: center;
}
.map-pin-icon {
  width: 40px; height: 40px;
  background: var(--teal);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(40,181,162,.4);
}

/* =========================================================
   ABOUT / TEAM
   ========================================================= */
.values-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.value-card {
  background: var(--color-surface);
  border-radius: var(--r-md);
  padding: var(--space-4);
  box-shadow: 0 6px 24px rgba(13,46,46,.05);
  transition: transform var(--t), box-shadow var(--t);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13,46,46,.1); }
.value-card h3 {
  color: var(--dark);
  margin-bottom: var(--space-1);
}
.value-card p { color: var(--color-muted); font-size: var(--size-sm); }

.team-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--t);
}
.team-card:hover { box-shadow: 0 12px 32px rgba(13,46,46,.1); }
.team-card-photo { aspect-ratio: 3/4; max-height: 360px; overflow: hidden; display: block; }
.team-card-photo .ph { aspect-ratio: 3/4; }
.team-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card-body { padding: var(--space-3); }
.team-card-body h3 { font-size: 1.25rem; color: var(--dark); margin-bottom: 4px; }
.team-card-role {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-2);
}
.team-card-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-2);
}
.team-card-contacts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--size-sm);
  color: var(--color-muted);
  transition: color var(--t);
}
.team-card-contacts a:hover { color: var(--teal); }
.team-card-contacts svg { width: 14px; height: 14px; }

/* Two-col */
.two-col {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.two-col h2 { font-size: var(--size-h2); color: var(--dark); margin-bottom: var(--space-2); }
.two-col p { color: var(--color-muted); margin-bottom: var(--space-2); }

/* Articles */
.articles-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.article-card {
  box-shadow: 0 6px 24px rgba(13,46,46,.05);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t);
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13,46,46,.1); }
.article-body { padding: var(--space-3); flex: 1; }
.article-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}
.article-body p { font-size: var(--size-sm); color: var(--color-muted); }

/* Stats */
.stats-bar {
  background: var(--dark);
  color: #fff;
  padding: var(--space-8) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  text-align: center;
}
.stat-num {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

/* CTA Band */
.cta-band {
  background: var(--teal);
  padding: var(--space-8) 0;
  color: #fff;
  text-align: center;
}
.cta-band h2 { font-size: var(--size-h2); margin-bottom: var(--space-2); }
.cta-band p  { max-width: 52ch; margin: 0 auto var(--space-4); opacity: .9; }
.cta-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.cta-band .btn-white {
  background: #fff;
  color: var(--dark);
  font-weight: 700;
}
.cta-band .btn-white:hover { background: var(--teal-light); }

/* Contact form */
.contact-layout { display: grid; gap: var(--space-6); }
.contact-info h3 { font-size: var(--size-h3); color: var(--dark); margin-bottom: var(--space-3); }
.contact-block { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.contact-block:last-child { border-bottom: 0; }
.contact-block p { font-size: var(--size-sm); color: var(--color-muted); }
.contact-block a { color: var(--teal); }
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.contact-form label {
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #4A4A48;
  display: block;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  padding: 0.8rem 0.95rem;
  font-size: var(--size-sm);
  color: var(--color-text);
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9A9A96;
  opacity: 1;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(13,46,46,0.07);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; gap: var(--space-3); }
.contact-form .consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-xs);
  color: var(--color-muted);
}
.contact-form .consent-row input {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--dark);
}
.contact-form .consent-row span { line-height: 1.4; }
.contact-form .btn-submit {
  background: var(--dark);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 1rem 2rem;
  font-size: var(--size-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.contact-form .btn-submit:hover { background: var(--teal); transform: translateY(-1px); }

/* Breadcrumbs */
.crumbs {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.crumbs a:hover { color: var(--teal); }
.crumbs .sep { opacity: .4; }

/* Page header */
.page-header {
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 { font-size: var(--size-h1); color: var(--dark); }

/* Section immediately after a page-header: tighter gap, no double-spacing */
.page-header + .section { padding-top: var(--space-4); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.75);
  padding: var(--space-8) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-brand p {
  font-size: var(--size-sm);
  margin-top: var(--space-2);
  max-width: 30ch;
  line-height: 1.7;
}
.footer-col h4 {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-2);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a {
  font-size: var(--size-sm);
  transition: color var(--t);
}
.footer-col a:hover { color: #fff; }
.footer-social-links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.footer-social-links a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-xs);
  font-weight: 700;
  transition: border-color var(--t), background var(--t);
}
.footer-social-links a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.footer-bottom {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--size-xs);
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}
.footer-bottom a:hover { color: #fff; }

/* WhatsApp float button */
.wa-float {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 200;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform var(--t), box-shadow var(--t);
  color: #fff;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37,211,102,.6);
}
.wa-float svg { width: 28px; height: 28px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .site-nav,
  .header-cta { display: none; }
  .burger { display: flex; }

  .site-nav.open {
    display: block;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
  }
  .site-nav.open ul {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (min-width: 640px) {
  .search-form { grid-template-columns: 1fr 1fr; }
  .stats-grid  { grid-template-columns: repeat(4, 1fr); }
  .field-row   { grid-template-columns: 1fr 1fr; }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .search-form         { grid-template-columns: 1fr 1fr 1fr auto; }
  .grid-listings       { grid-template-columns: repeat(2, 1fr); }
  .values-grid         { grid-template-columns: repeat(3, 1fr); }
  .two-col             { grid-template-columns: 11fr 9fr; }
  .articles-grid       { grid-template-columns: repeat(3, 1fr); }
  .footer-grid         { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .detail-gallery-grid { grid-template-columns: 2fr 1fr; gap: 6px; }
  .gallery-main        { grid-row: 1 / span 2; }
  .facts-strip         { grid-template-columns: repeat(4, 1fr); }
  .team-grid           { grid-template-columns: repeat(2, 1fr); }
  .contact-layout      { grid-template-columns: 1fr 1.5fr; }
}

@media (min-width: 1024px) {
  .grid-listings   { grid-template-columns: repeat(3, 1fr); }
  .sidebar-layout  { grid-template-columns: 280px 1fr; }
  .detail-layout   { grid-template-columns: 1fr 380px; gap: var(--space-8); }
  .team-grid       { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   LISTING DETAIL — Mobile (< 768px)
   ========================================================= */
@media (max-width: 767px) {

  /* ── Container — ensure horizontal breathing room ── */
  .container { padding-inline: 1rem; }

  /* ── Section spacing ── */
  .section { padding: var(--space-4) 0; }
  .page-header { padding: var(--space-3) 0 var(--space-2); }
  .page-header h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .page-header + .section { padding-top: var(--space-3); }

  /* ── Breadcrumbs — single line, truncate ── */
  .crumbs {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: var(--space-2);
    font-size: .65rem;
  }
  .crumbs span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ── Detail header — use longhand only so container padding-inline is NOT zeroed ── */
  .detail-header {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  /* ── Location tag ── */
  .detail-loc {
    font-size: .65rem;
    letter-spacing: .1em;
    margin-bottom: .5rem;
  }

  /* ── Title — smaller + full width + wrap safely ── */
  .detail-title {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    max-width: 100%;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Title row — stack vertically on mobile ── */
  .detail-title-row {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  /* ── Price block — left-aligned below title ── */
  .detail-price-block { text-align: left; }
  .detail-price {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    line-height: 1.3;
  }
  .detail-price-label {
    font-size: .65rem;
    letter-spacing: .1em;
    margin-bottom: .25rem;
  }
  .price-fx-secondary { font-size: .8rem; }

  /* ── Facts strip — tighter cells ── */
  .facts-strip { margin-block: var(--space-2); }
  .fact { padding: .9rem 1rem; }
  .fact-value { font-size: 1.1rem; }
  .fact-label { font-size: .62rem; letter-spacing: .1em; }

  /* ── Body copy ── */
  .detail-content p  { font-size: .9rem; line-height: 1.7; }
  .detail-content h2 { font-size: 1.1rem; margin: var(--space-3) 0 var(--space-1); }
  .detail-content h3 { font-size: .95rem; }
  .detail-content ul li { font-size: .9rem; }

  /* ── Agent card — not sticky on mobile (too tall) ── */
  .agent-card { position: static; padding: var(--space-3); }

  /* ── Map — shorter on mobile ── */
  #listing-map { height: 260px !important; }

  /* ── Gallery — tighter gap ── */
  .gallery-4 { gap: 3px; }

  /* ── Currency panel — fixed so it never clips off-edge ── */
  .fx-panel {
    position: fixed;
    top: 68px;
    left: .75rem;
    right: .75rem;
    width: auto;
    border-radius: 14px;
  }
}

/* Collapsible filter sidebar below the desktop breakpoint */
@media (max-width: 1023px) {
  .listing-toolbar [data-filter-toggle] { display: inline-flex !important; }
  .filter-panel {
    position: static;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-color: transparent;
    transition: max-height .35s var(--ease), opacity .25s var(--ease),
                padding .35s var(--ease), border-color .35s var(--ease);
  }
  .filter-panel.open {
    max-height: 1400px;
    opacity: 1;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    border-color: var(--color-border);
  }
}

/* =========================================================
   SCROLL REVEAL — sanftes Fade/Slide-in beim Scrollen
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
/* =========================================================
   LIVE CURRENCY CONVERTER — Premium Design
   USD = fixed base · Secondary = live converted price
   ========================================================= */

.fx-wrap { position:relative; display:inline-flex; align-items:center; }

/* ── Header Trigger Button ── */
.fx-trigger {
  display:flex; align-items:center; gap:6px;
  padding:.38rem .85rem .38rem .65rem; border-radius:99px;
  border:1.5px solid rgba(13,46,46,.12);
  background:rgba(244,239,227,.6);
  font-size:var(--size-sm); font-weight:600; color:var(--dark);
  cursor:pointer; transition:all .22s; white-space:nowrap;
  box-shadow:none;
  backdrop-filter:blur(4px);
}
.fx-trigger:hover {
  border-color:rgba(40,181,162,.4);
  background:rgba(244,239,227,.9);
  color:var(--teal-dark);
}
.fx-flag  { font-size:1.1rem; line-height:1; }
.fx-label { font-size:.8rem; font-weight:600; letter-spacing:.03em; color:var(--dark); opacity:.75; }
.fx-chevron { opacity:.45; flex-shrink:0; margin-left:1px; }

/* ── Backdrop ── */
.fx-overlay {
  display:none; position:fixed; inset:0; z-index:299;
  background:rgba(13,46,46,.4); backdrop-filter:blur(3px);
}
.fx-overlay.open { display:block; animation:fxFadeIn .2s ease; }

/* ── Converter Panel ── */
.fx-panel {
  display:none; position:absolute; top:calc(100% + 12px); right:0;
  width:360px; background:var(--color-surface);
  border:1.5px solid var(--color-border); border-radius:18px;
  box-shadow:0 24px 64px rgba(13,46,46,.2), 0 4px 16px rgba(0,0,0,.07);
  z-index:300; overflow:hidden;
  /* Force correct font — buttons don't inherit font-family in all browsers */
  font-family: var(--font-body);
}
.fx-panel.open { display:block; animation:fxSlideUp .28s cubic-bezier(.16,1,.3,1); }

/* Panel Header */
.fx-panel-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:1.1rem 1.2rem .9rem; border-bottom:1px solid var(--color-border);
  background:linear-gradient(135deg, var(--dark) 0%, #183D3D 100%);
}
.fx-panel-title {
  font-size:.9rem; font-weight:700; color:#fff; margin-bottom:3px;
  font-family:var(--font-body); letter-spacing:.01em;
}
.fx-panel-sub {
  font-size:.72rem; color:rgba(255,255,255,.6); line-height:1.4;
}
.fx-panel-sub strong { color:var(--teal); }
.fx-panel-close {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; flex-shrink:0; margin-top:-2px;
  color:rgba(255,255,255,.6); cursor:pointer; transition:all .15s;
}
.fx-panel-close:hover { background:rgba(255,255,255,.15); color:#fff; }

/* Currency Grid — 4 columns, 2 rows */
.fx-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:7px; padding:12px;
}

/* Each currency button */
.fx-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:.7rem .3rem .6rem;
  border-radius:12px; cursor:pointer;
  border:1.5px solid var(--color-border);
  background:var(--color-bg);
  transition:all .18s ease; text-align:center;
  /* Buttons don't inherit font in Safari/Chrome — force it */
  font-family: inherit;
}
.fx-card:hover {
  border-color:var(--teal); background:var(--teal-light);
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(40,181,162,.18);
}
.fx-card.active {
  border-color:var(--teal); background:var(--dark);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(13,46,46,.3);
}
.fx-card-flag { font-size:1.65rem; line-height:1; margin-bottom:1px; }
.fx-card-code {
  font-size:.72rem; font-weight:800; letter-spacing:.05em;
  color:var(--dark); line-height:1;
}
.fx-card.active .fx-card-code { color:var(--teal); }
.fx-card-name {
  font-size:.56rem; color:var(--color-muted); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.fx-card.active .fx-card-name { color:rgba(255,255,255,.55); }
.fx-card-rate {
  font-size:.56rem; color:var(--teal-dark); font-weight:600;
  background:var(--teal-light); border-radius:4px; padding:1px 4px;
  margin-top:2px;
}
.fx-card.active .fx-card-rate { background:rgba(40,181,162,.2); color:var(--teal); }

/* Panel Footer */
.fx-panel-footer {
  display:flex; align-items:center; gap:5px; justify-content:center;
  font-size:.64rem; color:var(--color-muted);
  padding:.55rem 1rem .7rem;
  border-top:1px solid var(--color-border);
}

/* ── Price display on cards & detail page ── */
.price-fx-wrap  { display:flex; flex-direction:column; gap:2px; }
.price-usd      { font-weight:700; }
.price-fx-secondary {
  font-size:.78em; color:var(--teal-dark); font-weight:600;
  letter-spacing:.01em;
}

/* ── Animations ── */
@keyframes fxFadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes fxSlideUp  { from { opacity:0; transform:translateY(18px) scale(.97) } to { opacity:1; transform:none } }

/* ── Mobile ── */
@media (max-width:640px) {
  /* Fixed panel so it never clips off either side */
  .fx-panel {
    position: fixed;
    top: 70px;           /* below header */
    left: .75rem;
    right: .75rem;
    width: auto;
    border-radius: 16px;
  }
  /* Slightly tighter grid on small screens */
  .fx-grid { grid-template-columns: repeat(4,1fr); gap:6px; padding:10px; }
  .fx-card  { padding:.6rem .2rem .5rem; }
  .fx-card-flag { font-size:1.4rem; }
  .fx-card-name { display:none; }   /* still hide name — no room */
  .fx-card-rate { display:none; }   /* still hide rate on mobile */
  .fx-label { display:none; }       /* hide "Convert" text next to flag in header */
}

/* ── Mobile header: compact currency + language buttons so logo stays visible ── */
@media (max-width: 480px) {
  .header-inner { gap: var(--space-2); }

  /* Currency trigger: flag only, no code text */
  .fx-trigger {
    padding: .3rem .5rem;
    gap: 3px;
  }
  .fx-trigger .fx-code { display: none; }   /* hide "EUR" text */
  .fx-trigger svg { display: none; }        /* hide chevron */

  /* Language button: flag + code, no chevron */
  #farman-lang-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
  #farman-lang-btn svg { display: none; }   /* hide chevron */
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   ✦ 2026 EDITORIAL / APPLE REDESIGN — theme override
   Appended last → wins by source order. Original layout
   rules stay intact; only look & feel is re-themed.
   No IDs/classes renamed → every JS function keeps working.
   ========================================================= */
:root{
  --color-bg:      #EDEAE3;   /* warm sand paper */
  --color-bg-alt:  #E5E1D7;
  --color-surface: #FFFFFF;
  --color-text:    #17160F;   /* ink */
  --color-muted:   #6E6B60;   /* warm stone */
  --color-border:  rgba(23,22,15,.10);
  --dark:          #12302C;   /* deep petrol (kept close to brand) */
  --dark-hover:    #0C201D;
  --teal:          #1F7A6E;   /* muted petrol accent — no neon */
  --teal-dark:     #17605A;
  --teal-light:    #E7EFED;
  --font-body:     -apple-system,"SF Pro Text",BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:         "Baskerville","Baskerville Old Face","Hoefler Text",Georgia,"Times New Roman",serif;
  --r-sm: 10px; --r-md: 18px; --r-lg: 26px;
  --ease:   cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.16,1,.3,1);
}

body{ font-family:var(--font-body); color:var(--color-text); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; letter-spacing:-.004em; }

/* Serif display type */
h1,h2,h3,.section-head h2,.card-title{
  font-family:var(--serif); font-weight:500; letter-spacing:-.012em; }

.label{ color:var(--color-muted); letter-spacing:.18em; font-weight:600; }

/* ── Frosted glass header ── */
.site-header{
  background:rgba(237,234,227,.84);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(23,22,15,.08);
  box-shadow:none; }
.header-inner{ min-height:68px; }
.logo{ justify-content:center; }
.logo img{ height:46px !important; width:auto !important; display:block;
  image-rendering:auto; -webkit-font-smoothing:antialiased; }
@media(max-width:640px){ .logo img{ height:38px !important; } }
.site-nav a{ color:var(--color-text); font-weight:500; letter-spacing:-.01em; }
.site-nav a::after{ background:var(--dark); }
.site-nav a:hover,.site-nav a.active{ color:var(--dark); }

/* ── Buttons: pill + spring press ── */
.btn{ border-radius:99px; font-weight:600; letter-spacing:-.01em; font-family:var(--font-body);
  transition:transform .3s var(--spring),background var(--t),color var(--t),border-color var(--t); }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--dark); color:#fff; }
.btn-primary:hover{ background:var(--dark-hover); }
.btn-outline{ border:1.5px solid rgba(23,22,15,.22); color:var(--color-text); }
.btn-outline:hover{ background:var(--dark); border-color:var(--dark); color:#fff; }

/* ── NEW hero — integrated stage ──
   The image IS the stage; the serif type is set ON it (what the old
   design did right), with the new editorial typography. Everything
   above the fold; the search bar floats over the image's bottom edge. */
.hero-ed{ padding:0; background:var(--color-bg); text-align:center; }
.hero-ed-visual{ position:relative; border-radius:0; overflow:hidden;
  height:clamp(430px,calc(100vh - 250px),680px); text-align:center; box-shadow:none; }
.hero-ed-visual img{ width:100%; height:100%; object-fit:cover; object-position:center 62%;
  display:block; }
/* Warm cinematic scrim — dark enough for type, light enough for the house */
.hero-ed-overlay{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; padding-bottom:2.5rem;
  background:linear-gradient(to top, rgba(12,24,21,.66) 0%, rgba(12,24,21,.28) 45%, rgba(12,24,21,.34) 100%); }
.hero-ed-eyebrow{ font-size:.66rem; text-transform:uppercase; letter-spacing:.26em;
  color:rgba(244,239,231,.78); font-weight:600; margin:0 0 1rem; }
.hero-ed-title{ font-family:var(--serif); font-weight:500; line-height:1.05;
  font-size:clamp(2.2rem,5vw,4.1rem); letter-spacing:-.018em; max-width:20ch;
  margin:0 auto 1rem; color:#F6F2EA;
  text-shadow:0 2px 24px rgba(10,18,16,.45); }
.hero-ed-title em{ font-style:italic; }
.hero-ed-sub{ font-size:clamp(.95rem,1.35vw,1.18rem); line-height:1.5; color:rgba(244,239,231,.82);
  max-width:46ch; margin:0 auto; text-shadow:0 1px 12px rgba(10,18,16,.4); }
.hero-ed-cap{ display:none; }
@media(max-width:640px){
  .hero-ed-visual{ height:clamp(400px,calc(100vh - 330px),560px); }
  .hero-ed-title{ font-size:clamp(2.05rem,8.8vw,2.6rem); }
  .hero-ed-overlay{ padding:0 4vw 3rem; }
}


/* ── Search: ONE quiet command bar (Apple-style) ──
   No boxed inputs. Segmented control, hairline-separated fields,
   a single ink pill. HTML/IDs untouched — pure reskin. */
.search-wrap{ margin-top:-3.4rem; position:relative; z-index:10; border-radius:22px;
  background:var(--color-surface); border:1px solid var(--color-border);
  box-shadow:0 1px 2px rgba(23,22,15,.05),0 26px 50px -34px rgba(23,22,15,.35);
  padding:1.1rem 1.25rem 1.25rem; }
@media(max-width:819px){ .search-wrap{ margin-top:-2.6rem; } }

/* iOS segmented control */
.search-tabs{ display:inline-flex; gap:2px; border-bottom:none; margin-bottom:1.1rem;
  background:rgba(23,22,15,.055); border-radius:99px; padding:3px; }
.search-tab{ padding:.42rem 1.3rem; border-radius:99px; border-bottom:none; margin-bottom:0;
  font-size:.85rem; font-weight:600; color:var(--color-muted);
  transition:background .25s var(--spring),color .2s,box-shadow .25s; }
.search-tab.active{ background:#fff; color:var(--color-text); border-color:transparent;
  box-shadow:0 1px 3px rgba(23,22,15,.12),0 4px 10px -4px rgba(23,22,15,.18); }

/* Fields: no boxes — quiet zones divided by hairlines */
.search-form{ align-items:stretch; }
.search-field{ gap:2px; justify-content:center; }
.search-field label{ font-size:.66rem; letter-spacing:.14em; color:var(--color-muted); font-weight:600; }
.search-field select,.search-field input{
  border:none; border-radius:0; background:transparent; padding:.3rem 1.6rem .3rem 0;
  font-size:1.05rem; font-weight:500; color:var(--color-text); font-family:var(--font-body);
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6B60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center; }
.search-field select:focus,.search-field input:focus{ border:none; outline:none; }
.search-form .btn-dark{ border-radius:99px; padding:.95rem 2.1rem; align-self:center; }

/* Desktop: one horizontal line, hairlines between fields */
@media(min-width:820px){
  .search-form{ grid-template-columns:1.3fr 1fr 1fr auto; gap:0; }
  .search-field{ padding:0 1.6rem; border-left:1px solid var(--color-border); }
  .search-field:first-child{ border-left:none; padding-left:.2rem; }
  .search-form .btn-dark{ margin-left:1.4rem; }
}
/* Mobile: calm stack, full-width button */
@media(max-width:819px){
  .search-tabs{ display:flex; width:100%; }
  .search-tab{ flex:1; text-align:center; }
  .search-field{ padding:.65rem 0; border-bottom:1px solid var(--color-border); }
  .search-form .btn-dark{ width:100%; margin-top:.9rem; padding:1rem; }
}

/* Header rhythm: Convert pill matches WhatsApp pill height */
.fx-trigger{ padding:.55rem 1rem .55rem .8rem; }
.header-cta{ padding:.6rem 1.35rem; }

/* ── Property cards: soft, rounded, serif titles, spring ── */
.card{ border-radius:var(--r-md); border:1px solid var(--color-border);
  box-shadow:0 1px 2px rgba(23,22,15,.04),0 22px 45px -32px rgba(23,22,15,.35);
  transition:transform .4s var(--spring),box-shadow .4s var(--spring); }
.card:hover{ transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(23,22,15,.05),0 34px 60px -30px rgba(23,22,15,.42); }
.card:active{ transform:scale(.985); }
.card-title{ font-family:var(--serif); font-weight:500; letter-spacing:-.012em; }
.card-badge{ background:rgba(23,22,15,.82); border-radius:99px; font-weight:600;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.card-badge.sale{ background:var(--dark); }
.card-badge.featured{ background:#8a6a3a; }
.card-price{ font-family:var(--font-body); font-weight:700; letter-spacing:-.02em; color:var(--color-text); }
.card-meta-item svg{ color:var(--dark); }
.card-loc{ color:var(--color-muted); letter-spacing:.02em; }

/* ── Section headings ── */
.section-head h2{ font-size:clamp(1.9rem,3.5vw,2.7rem); color:var(--color-text); }
.section-alt{ background:var(--color-bg-alt); }
.two-col img{ border-radius:var(--r-lg) !important; }

/* ── Spring reveal motion ── */
.reveal{ transition:opacity .9s var(--spring),transform .9s var(--spring); transform:translateY(26px); }
.reveal-stagger > *{ transition:opacity .8s var(--spring),transform .8s var(--spring); transform:translateY(26px); }

/* ── Currency pill: neutral ink ── */
.fx-trigger{ border-color:rgba(23,22,15,.14); background:rgba(255,255,255,.5); color:var(--color-text); }
.fx-trigger:hover{ border-color:rgba(23,22,15,.3); background:rgba(255,255,255,.85); color:var(--dark); }
.fx-flag{ display:inline-flex; align-items:center; }

/* Panel title in serif — professional, matches the site voice */
.fx-panel-title{ font-family:var(--serif) !important; font-weight:500 !important;
  font-size:1.05rem !important; letter-spacing:-.01em; }

/* ── Mobile: header trigger stays legible + a clean tap-to-select menu ── */
@media(max-width:640px){
  /* Keep the label visible — globe icon + "Currency", never naked arrows */
  .fx-label{ display:inline !important; font-size:.82rem; }
  .fx-trigger{ padding:.42rem .7rem .42rem .6rem; gap:5px; }

  /* Turn the flag grid into a vertical selection menu */
  .fx-grid{ grid-template-columns:1fr !important; gap:0 !important; padding:6px !important; }
  .fx-card{ flex-direction:row !important; align-items:center !important;
    justify-content:flex-start !important; gap:.75rem !important;
    padding:.85rem .9rem !important; border-radius:12px !important; text-align:left !important;
    position:relative; }
  .fx-card + .fx-card{ border-top:1px solid var(--color-border); }
  .fx-card-flag{ display:block !important; font-size:1.5rem !important; margin:0 !important; }
  .fx-card-code{ font-size:.95rem !important; font-weight:700 !important; }
  .fx-card-name{ display:block !important; font-size:.8rem !important; opacity:.7;
    margin-left:0 !important; }
  /* code + name stack next to the flag */
  .fx-card-code, .fx-card-name{ align-self:flex-start; }
  .fx-card-rate{ display:block !important; margin-left:auto !important;
    font-size:.8rem !important; white-space:nowrap; opacity:.8; }
  /* Checkmark for the active currency */
  .fx-card.active::after{ content:"✓"; position:absolute; right:.9rem;
    color:var(--teal); font-weight:700; }
  .fx-card.active .fx-card-rate{ display:none !important; }
}
@media(max-width:480px){
  /* Override the old rule that hid label + chevron — keep it readable */
  .fx-trigger .fx-code{ display:inline; }
  .fx-trigger svg.fx-chevron{ display:block; }
}

/* ── Favourite heart: hover ≠ active ──
   The old rule made :hover look identical to .active, so un-favouriting
   seemed broken while the cursor still hovered. Now: active = a filled
   heart (unmistakable), hover = only a subtle lift. */
.card-fav{ background:rgba(255,255,255,.94); color:var(--color-text);
  box-shadow:0 2px 10px rgba(23,22,15,.14);
  transition:transform .25s var(--spring), background var(--t), color var(--t); }
.card-fav svg{ fill:none; stroke:currentColor; }
.card-fav:hover{ background:#fff; color:var(--color-text); }   /* subtle only */
.card-fav:active{ transform:scale(.86); }                      /* press feedback */
.card-fav.active,
.card-fav.active:hover{ background:#fff; color:#C4444E; }       /* saved = red */
.card-fav.active svg{ fill:currentColor; stroke:currentColor; } /* FILLED heart */
@media(max-width:640px){ .card-fav{ width:40px; height:40px; } .card-fav svg{ width:18px; height:18px; } }

/* Detail-page "Save" button: same clarity, its own shape */
.btn-outline.card-fav.active{ background:var(--dark); border-color:var(--dark); color:#fff; }
.btn-outline.card-fav.active svg{ fill:#fff; stroke:#fff; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — crafted, not templated  (anti-slop · soft-skill)
   Full pill · spring press physics · soft diffused depth ·
   quiet confident hover-lift. No gradient / neon / glass / glow.
   Colours untouched — this only elevates geometry + motion + depth.
   ═══════════════════════════════════════════════════════════════ */
:root{ --spring:cubic-bezier(.16,1,.3,1); }

.btn{
  border-radius:999px !important;      /* full pill, not the 4px slop tell */
  padding:.82rem 1.6rem;
  gap:.6rem;
  border:1.5px solid transparent;
  transition:transform .38s var(--spring), background .25s ease, color .2s ease,
             border-color .25s ease, box-shadow .38s var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.965); }          /* physical press */

/* Icon inside a button — subtle kinetic tension on hover (no gimmick) */
.btn svg{ transition:transform .38s var(--spring); }
.btn:hover svg{ transform:translateX(2px); }

/* Filled buttons (teal primary + dark) — soft layered depth, lift on hover */
.btn-primary, .btn-dark, .header-cta{
  box-shadow:0 1px 2px rgba(13,46,46,.18), 0 12px 26px -14px rgba(13,46,46,.5);
}
.btn-primary:hover, .btn-dark:hover, .header-cta:hover{
  transform:translateY(-1.5px);
  box-shadow:0 2px 5px rgba(13,46,46,.22), 0 18px 34px -16px rgba(13,46,46,.58);
}
.btn-primary:active, .btn-dark:active, .header-cta:active{ transform:scale(.965); }

/* Outline / white — no heavy shadow, same press + lift */
.btn-outline, .btn-white{ box-shadow:none; }
.btn-outline:hover, .btn-white:hover{ transform:translateY(-1.5px); }
.btn-outline:active, .btn-white:active{ transform:scale(.965); }

@media(prefers-reduced-motion:reduce){
  .btn, .btn svg{ transition:none; }
  .btn:hover, .btn:active, .btn:hover svg{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   HIGH-CLASS DETAILING  (editorial luxury · Steve-simple)
   Few perfect details, not more effects. Reject 21st.dev's flashy
   card gimmicks (glow/glare/gradient/tilt) — those ARE the slop.
   ═══════════════════════════════════════════════════════════════ */

/* 1 · Film-grain — the physical "fine-paper" feel over the whole frame.
      Barely perceptible (~3.5%), fixed, never blocks a click. */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.038; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* 2 · Listing card — from generic to gallery piece */
.card{ border-radius:20px; border-color:var(--line,rgba(23,22,15,.09));
  box-shadow:0 1px 2px rgba(13,46,46,.05), 0 20px 42px -28px rgba(13,46,46,.32); }
.card:hover{ transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(13,46,46,.06), 0 34px 60px -30px rgba(13,46,46,.4); }
.card-img img{ transition:transform 900ms cubic-bezier(.16,1,.3,1) !important; }
.card:hover .card-img img{ transform:scale(1.05) !important; }

/* Location → quiet gallery eyebrow */
.card-loc{ font-size:.68rem !important; text-transform:uppercase; letter-spacing:.17em;
  font-weight:600; color:var(--stone,#8B8578) !important; }

/* Price → serif, like a gallery price card (the single luxury tell) */
.card-price{ font-family:var(--serif) !important; font-weight:500 !important;
  font-size:1.28rem !important; letter-spacing:-.005em !important;
  color:var(--color-text) !important;
  margin-top:.35rem; padding-top:.7rem; border-top:1px solid var(--line,rgba(23,22,15,.08)); }
.card-price .currency{ font-size:.72rem; color:var(--color-muted); font-family:var(--font-body);
  letter-spacing:.06em; margin-right:.15rem; }

/* Badges → quiet. Featured = frosted glass, not loud amber */
.card-badge{ border-radius:999px; letter-spacing:.13em; font-size:.62rem;
  padding:.34rem .8rem; box-shadow:0 2px 12px rgba(13,46,46,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.card-badge.featured{ background:rgba(255,255,255,.8); color:var(--dark); }
.card-badge.sale{ background:rgba(13,46,46,.86); color:#fff; }

/* Footer arrow — refined slide */
.card-footer a{ font-weight:600; letter-spacing:.01em; }
.card-footer a:hover{ gap:10px; }

/* 3 · Section eyebrows sitewide → small-caps, finely tracked */
.section-head .label, .label{ text-transform:uppercase; letter-spacing:.2em;
  font-size:.68rem; font-weight:600; color:var(--stone,#8B8578); }

/* ═══════════════════════════════════════════════════════════════
   APPLE-LIKE SIGNATURE EFFECTS  (simple, light-driven, high-class)
   ═══════════════════════════════════════════════════════════════ */

/* 1 · Logo light-sheen — once on load, replays on hover.
      A soft highlight sweeps across the wordmark like light catching
      an engraving. Masked to the logo shape so only the letters glint. */
.logo{ position:relative; display:inline-flex; }
.logo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url(assets/logo.png) no-repeat left center;
          mask:url(assets/logo.png) no-repeat left center;
  -webkit-mask-size:contain; mask-size:contain;
  background:linear-gradient(100deg, transparent 46%, rgba(255,255,255,.96) 50%, transparent 54%);
  background-repeat:no-repeat; background-size:250% 100%; background-position:200% 0;
  opacity:0; animation:logo-sheen 5.5s cubic-bezier(.45,.05,.55,.95) .7s 1;
}
.logo:hover::after{ animation:logo-sheen 3.6s cubic-bezier(.45,.05,.55,.95) 0s 1; }
@keyframes logo-sheen{
  0%{ background-position:200% 0; opacity:0; }
  15%{ opacity:1; } 85%{ opacity:1; }
  100%{ background-position:-130% 0; opacity:0; }
}

/* 2 · Scroll reveals resolve out of a soft blur (Apple product-page feel) */
.reveal{ filter:blur(7px);
  transition:opacity .9s var(--spring), transform .9s var(--spring), filter .9s var(--spring); }
.reveal.in{ filter:blur(0); }
.reveal-stagger > *{ filter:blur(7px);
  transition:opacity .8s var(--spring), transform .8s var(--spring), filter .8s var(--spring); }
.reveal-stagger.in > *{ filter:blur(0); }

@media(prefers-reduced-motion:reduce){
  .logo::after{ animation:none; }
  .reveal, .reveal-stagger > *{ filter:none; }
}

/* ═══════════════════════════════════════════════════════════════
   CURRENCY MENU — Apple / finance-terminal redesign
   No emoji flags · frosted glass · monospace rate figures · quiet select
   ═══════════════════════════════════════════════════════════════ */
.fx-card-flag{ display:none !important; }   /* emoji flags = cheap tell → gone */

/* Frosted-glass panel (Apple popover) */
.fx-panel{
  background:rgba(248,246,241,.93) !important;
  -webkit-backdrop-filter:blur(30px) saturate(140%); backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:22px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 40px 90px -30px rgba(13,46,46,.5) !important;
  overflow:hidden;
}
.fx-panel-header{ background:transparent !important; color:var(--ink,#17160F) !important;
  padding:1.1rem 1.2rem .85rem !important; border-bottom:1px solid rgba(23,22,15,.08) !important; }
.fx-panel-title{ color:var(--dark) !important; }
.fx-panel-sub{ color:var(--color-muted) !important; }
.fx-panel-sub strong{ color:var(--dark) !important; }
.fx-panel-close{ background:transparent !important; color:var(--color-muted) !important; }
.fx-panel-close:hover{ background:rgba(23,22,15,.06) !important; color:var(--dark) !important; }
.fx-panel-footer{ color:var(--color-muted) !important; }

/* Cards — code as hero, name muted, no chip clutter */
.fx-card{ background:transparent !important; border:1px solid transparent !important;
  border-radius:13px !important;
  transition:background .2s ease, border-color .2s ease !important; }
.fx-card:hover{ background:rgba(23,22,15,.045) !important; transform:none !important;
  box-shadow:none !important; }
.fx-card.active{ background:rgba(13,46,46,.05) !important; border-color:rgba(13,46,46,.2) !important; }
.fx-card-code{ font-weight:600 !important; letter-spacing:.02em; color:var(--ink,#17160F) !important;
  font-size:.95rem !important; }
.fx-card.active .fx-card-code{ color:var(--dark) !important; }
.fx-card-name{ display:block !important; font-size:.68rem !important; font-weight:500 !important;
  color:var(--color-muted) !important; }
.fx-card.active .fx-card-name{ color:var(--color-muted) !important; }

/* Rate → quiet monospace figure (finance-terminal / tech vibe) */
.fx-card-rate{ background:transparent !important; padding:0 !important; margin-top:.4rem !important;
  font-family:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"Roboto Mono",monospace !important;
  font-size:.74rem !important; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  color:var(--stone,#8B8578) !important; }
.fx-card.active .fx-card-rate{ background:transparent !important; color:var(--dark) !important; }

/* Desktop grid: vertical cards + a fine active-dot (mobile keeps its row layout) */
@media(min-width:641px){
  .fx-grid{ gap:4px !important; padding:8px !important; }
  .fx-card{ position:relative; flex-direction:column !important; align-items:flex-start !important;
    gap:2px !important; padding:.7rem .8rem !important; text-align:left !important; }
  .fx-card.active::after{ content:"" !important; position:absolute; top:.65rem; right:.65rem;
    width:6px; height:6px; border-radius:50%; background:var(--dark) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FACT GRID + STATS BAND — from spreadsheet to editorial
   ═══════════════════════════════════════════════════════════════ */

/* 1 · Detail-page facts — no boxes, serif values, quiet labels */
.facts-strip{
  background:transparent !important; border:none !important; border-radius:0 !important;
  overflow:visible !important; gap:0 !important;
  border-top:1px solid var(--line,rgba(23,22,15,.1)) !important;
  border-bottom:1px solid var(--line,rgba(23,22,15,.1)) !important;
  margin-block:var(--space-5) !important;
}
.fact{ background:transparent !important; padding:1.15rem 1.4rem 1.15rem 0 !important;
  border-top:1px solid var(--line,rgba(23,22,15,.07)); }
.fact-label{ font-size:.63rem !important; letter-spacing:.17em !important; font-weight:600 !important;
  color:var(--stone,#8B8578) !important; }
.fact-label svg{ opacity:.45; width:12px !important; height:12px !important; }
.fact-value{ font-family:var(--serif) !important; font-weight:500 !important;
  font-size:1.5rem !important; letter-spacing:-.01em !important; color:var(--dark) !important;
  margin-top:.15rem; }

/* 2 · Stats band — serif cream numerals, no clip-art icons, hairline ledger */
.stat-num{ font-family:var(--serif) !important; font-weight:500 !important;
  color:#F4EFE3 !important; letter-spacing:-.015em !important; }
.stat-label{ color:rgba(244,239,231,.58) !important; letter-spacing:.19em !important;
  font-size:.66rem !important; font-weight:600 !important; margin-top:.5rem; }
.stat-label svg{ display:none !important; }         /* remove the clip-art icons */
@media(min-width:768px){
  .stats-grid > * + *{ border-left:1px solid rgba(244,239,231,.13); }
}

/* Detail layout — agent card sticks, empty left column no longer stretches */
@media(min-width:768px){
  .detail-layout{ align-items:start; }
  .detail-layout > aside{ position:sticky; top:88px; align-self:start; }
}

/* ═══ Enquiry band — full-width, editorial (form moved out of the sidebar) ═══ */
.enquiry-band{ background:var(--color-surface); border-block:1px solid var(--line,rgba(23,22,15,.1));
  padding:clamp(2.5rem,6vw,4.5rem) 0; margin-top:var(--space-6); }
.enquiry-inner{ max-width:620px; margin:0 auto; text-align:center; }
.enquiry-eyebrow{ font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; font-weight:600;
  color:var(--stone,#8B8578); margin-bottom:.6rem; }
.enquiry-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.5vw,2.6rem);
  letter-spacing:-.015em; color:var(--dark); margin:0 0 .6rem !important; }
.enquiry-lede{ color:var(--color-muted); font-size:1rem; line-height:1.55; max-width:44ch;
  margin:0 auto clamp(1.6rem,3vw,2.2rem); }
.enquiry-inner .agent-form{ text-align:left; }

/* Form fields — quiet, refined (no heavy boxes) */
.agent-form input, .agent-form textarea{
  border:1px solid var(--line,rgba(23,22,15,.14)) !important; border-radius:12px !important;
  background:var(--color-bg,#FDFBF7) !important; padding:.85rem 1rem !important;
  font-size:.95rem !important; transition:border-color .2s, box-shadow .2s !important; }
.agent-form input:focus, .agent-form textarea:focus{
  border-color:var(--dark) !important; box-shadow:0 0 0 3px rgba(13,46,46,.07) !important; outline:none !important; }
.agent-form textarea{ min-height:120px; }

/* Sidebar agent card sits neat at top now that it's short */
@media(min-width:768px){ .detail-layout > aside{ position:sticky; top:88px; align-self:start; } }

/* Favourite heart — spins as it turns red (delight on save) */
@keyframes heart-spin{
  0%{ transform:rotate(0) scale(1); }
  55%{ transform:rotate(360deg) scale(1.4); }
  100%{ transform:rotate(360deg) scale(1); }
}
.card-fav.active svg{ animation:heart-spin .65s cubic-bezier(.16,1,.3,1); }
@media(prefers-reduced-motion:reduce){ .card-fav.active svg{ animation:none; } }

/* ═══ Mortgage band — full-width, calc centered (out of the sidebar) ═══ */
.mortgage-band{ padding:clamp(2.5rem,6vw,4rem) 0 0; }
.mortgage-inner{ max-width:460px; margin:0 auto; text-align:center; }
.mortgage-inner #farman-mortgage{ margin-top:1.6rem !important; text-align:left;
  border:1px solid var(--line,rgba(23,22,15,.12)) !important; border-radius:18px !important;
  box-shadow:0 1px 2px rgba(13,46,46,.05), 0 22px 45px -30px rgba(13,46,46,.32) !important;
  padding:1.4rem !important; }
#mc-monthly-usd{ font-family:var(--serif) !important; font-weight:500 !important; font-size:1.7rem !important;
  letter-spacing:-.01em; }

/* Detail Save/Share action buttons — clean icon pills */
.det-action{ gap:.5rem !important; padding:.7rem 1rem !important; }
.det-action svg{ flex:0 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   DETAIL PAGE — one coordinated language
   Petrol everywhere (the bright green was the clash) · one form style
   ═══════════════════════════════════════════════════════════════ */

/* WhatsApp buttons → petrol pill, matching the header CTA */
.whatsapp-btn{ background:var(--dark) !important; color:#fff !important;
  border-radius:999px !important; padding:.9rem 1.5rem !important; font-weight:600;
  box-shadow:0 1px 2px rgba(13,46,46,.18), 0 12px 26px -14px rgba(13,46,46,.5) !important;
  transition:transform .35s var(--spring), background .25s, box-shadow .35s var(--spring) !important; }
.whatsapp-btn:hover{ background:var(--dark-hover,#183D3D) !important; transform:translateY(-1.5px);
  box-shadow:0 2px 5px rgba(13,46,46,.22), 0 18px 34px -16px rgba(13,46,46,.58) !important; }
.whatsapp-btn:active{ transform:scale(.97); }

/* Floating WhatsApp bubble → petrol too (consistent, not grass-green) */
.wa-float{ background:var(--dark) !important;
  box-shadow:0 10px 30px -8px rgba(13,46,46,.5) !important; }
.wa-float:hover{ background:var(--dark-hover,#183D3D) !important; }

/* Mortgage calc → editorial frame + same focus ring as the enquiry form */
#farman-mortgage{ border:1px solid var(--line,rgba(23,22,15,.09)) !important; border-radius:20px !important;
  box-shadow:0 1px 2px rgba(13,46,46,.05), 0 20px 42px -28px rgba(13,46,46,.28) !important; padding:1.4rem !important; }
#farman-mortgage input:focus, #farman-mortgage select:focus{
  border-color:var(--dark) !important; box-shadow:0 0 0 3px rgba(13,46,46,.07) !important; outline:none !important; }

/* Agent card — quieter, coordinated */
.agent-name{ font-family:var(--serif) !important; font-weight:500 !important; }
.agent-role{ color:var(--stone,#8B8578) !important; letter-spacing:.14em; }

/* ═══ Detail page — single-column content, then ONE combined contact band ═══ */
.detail-content-solo{ max-width:none; }   /* full container width, one column */

.contact-band{ background:var(--color-surface);
  border-block:1px solid var(--line,rgba(23,22,15,.1));
  padding:clamp(2.5rem,6vw,4.5rem) 0; margin-top:var(--space-6); }
.contact-band .enquiry-eyebrow{ text-align:center; }
.contact-band .enquiry-title{ text-align:center; margin:0 auto clamp(1.8rem,4vw,2.6rem) !important; }

.contact-grid{ display:grid; grid-template-columns:340px 1fr;
  gap:clamp(2rem,4vw,3.5rem); align-items:start; max-width:1000px; margin:0 auto; }
.contact-agent .agent-card{ position:static !important; margin:0; }
.contact-agent > div{ margin-top:var(--space-2); }
.contact-form{ text-align:left; }
.contact-form .enquiry-lede{ text-align:left; margin:0 0 1.4rem; max-width:none; }

@media(max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:1.8rem; max-width:560px; }
  .contact-band .enquiry-title{ text-align:center; }
}

/* ═══ Mortgage — cool toggle button, calc expands on click ═══ */
.mortgage-band{ text-align:center; }
.mortgage-toggle{ display:inline-flex; align-items:center; gap:.7rem; margin:0 auto;
  background:var(--dark); color:#fff; border:none; cursor:pointer;
  padding:1rem 1.9rem; border-radius:999px; font-size:.95rem; font-weight:600; font-family:var(--font-body);
  box-shadow:0 1px 2px rgba(13,46,46,.18), 0 14px 30px -14px rgba(13,46,46,.55);
  transition:transform .35s var(--spring), background .25s, box-shadow .35s var(--spring); }
.mortgage-toggle:hover{ background:var(--dark-hover,#183D3D); transform:translateY(-1.5px);
  box-shadow:0 2px 5px rgba(13,46,46,.22), 0 20px 38px -16px rgba(13,46,46,.6); }
.mortgage-toggle:active{ transform:scale(.97); }
.mortgage-chevron{ transition:transform .45s var(--spring); opacity:.85; }
.mortgage-toggle.open .mortgage-chevron{ transform:rotate(180deg); }
.mortgage-collapse{ max-height:0; overflow:hidden; opacity:0; max-width:620px; margin:0 auto;
  transition:max-height .55s var(--spring), opacity .4s ease, margin-top .4s ease; }
.mortgage-collapse.open{ max-height:1500px; opacity:1; margin-top:var(--space-4); }

/* ═══ Contact — ONE unit (agent + form), not two boxes ═══ */
.contact-grid{ background:var(--card,#fff); border:1px solid var(--line,rgba(23,22,15,.1));
  border-radius:24px; padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:0 1px 2px rgba(13,46,46,.05), 0 30px 60px -34px rgba(13,46,46,.3); }
.contact-agent .agent-card{ background:transparent !important; border:none !important;
  box-shadow:none !important; padding:0 !important; }
.contact-agent{ border-right:1px solid var(--line,rgba(23,22,15,.09));
  padding-right:clamp(1.5rem,3vw,2.5rem); }
.contact-form{ background:transparent !important; border:none !important; box-shadow:none !important; }
@media(max-width:820px){
  .contact-agent{ border-right:none; border-bottom:1px solid var(--line,rgba(23,22,15,.09));
    padding-right:0; padding-bottom:1.6rem; }
}

/* Phone field (intl-tel-input) — leave room for flag + dial code so the
   placeholder/number never sits under "+254". Overrides the generic form padding. */
.agent-form .iti{ width:100%; display:block; }
.agent-form .iti input[type=tel]{ padding-left:96px !important; }
@media(max-width:480px){ .agent-form .iti input[type=tel]{ padding-left:92px !important; } }

/* ═══ Phone field — elegant, consistent with the other fields ═══ */
.agent-form .iti{ width:100%; display:block; box-sizing:border-box;
  border:1px solid var(--line,rgba(23,22,15,.14)) !important; border-radius:12px !important;
  background:var(--color-bg,#FDFBF7) !important;
  transition:border-color .2s ease, box-shadow .2s ease; }
.agent-form .iti:focus-within{ border-color:var(--dark) !important;
  box-shadow:0 0 0 3px rgba(13,46,46,.07) !important; }
.agent-form .iti input[type=tel]{
  border:none !important; background:transparent !important; box-shadow:none !important;
  width:100%; padding:.9rem 1rem .9rem 112px !important; }
.agent-form .iti__flag-container{ padding:0 !important; }
.agent-form .iti__selected-flag{ padding:0 1.1rem !important; background:transparent !important;
  border-right:1px solid var(--line,rgba(23,22,15,.13)); border-radius:12px 0 0 12px; }
.agent-form .iti__selected-dial-code{ margin-left:.55rem !important; color:var(--color-text); }

/* ═══════════════════════════════════════════════════════════
   MODERN PROPERTY GALLERY — cinematic full-bleed swipe carousel
   + scroll-snap thumbnail strip. Replaces the old 4-image mosaic.
   Mobile: swipe the big images directly ("entspannt wischen").
   ═══════════════════════════════════════════════════════════ */
.gallery-modern { margin-bottom: 2rem; }

.gm-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,46,46,.05), 0 30px 60px -35px rgba(13,46,46,.35);
}

.gm-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  aspect-ratio: 16 / 9;
  background: #e9e6df;
}
.gm-track::-webkit-scrollbar { display: none; }

.gm-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  height: 100%;
  cursor: zoom-in;
}
.gm-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gm-counter {
  position: absolute; left: 16px; bottom: 16px; pointer-events: none;
  background: rgba(13,46,46,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: .4rem .8rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}

.gm-viewall {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--dark, #0D2E2E); border: none; border-radius: 999px;
  padding: .6rem 1.05rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(13,46,46,.18);
  transition: transform .3s var(--spring, cubic-bezier(.16,1,.3,1));
}
.gm-viewall:hover { transform: translateY(-2px); }
.gm-viewall:active { transform: translateY(0) scale(.97); }
.gm-viewall svg { opacity: .72; }

.gm-strip {
  display: flex; gap: 8px; margin-top: 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0;
}
.gm-strip::-webkit-scrollbar { display: none; }
.gm-thumb {
  flex: 0 0 auto; width: 104px; height: 70px; border-radius: 11px; overflow: hidden;
  border: none; padding: 0; cursor: pointer; scroll-snap-align: start;
  opacity: .62; background: #e9e6df; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.gm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-thumb:hover { opacity: 1; }
.gm-thumb.active { opacity: 1; box-shadow: inset 0 0 0 2px var(--dark, #0D2E2E); }

@media (max-width: 640px) {
  .gm-stage { border-radius: 16px; }
  .gm-track { aspect-ratio: 4 / 3; }
  .gm-thumb { width: 84px; height: 60px; }
  .gm-counter, .gm-viewall { bottom: 12px; }
  .gm-counter { left: 12px; }
  .gm-viewall { right: 12px; font-size: .78rem; padding: .5rem .9rem; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION + MAIN NAV — adapted to the refined petrol
   design. Kills the bright-teal clash: links rest in petrol,
   teal appears only as a hover accent; icons muted to stone.
   ═══════════════════════════════════════════════════════════ */
.contact-block a { color: var(--dark); font-weight: 500; transition: color .2s ease; }
.contact-block a:hover { color: var(--teal); }

.c-link { color: var(--dark); font-weight: 500; transition: color .2s ease; }
.c-link:hover { color: var(--teal); }
.consent-row .c-link { text-decoration: underline; text-underline-offset: 2px; }

/* softer, more modern input radius to match the design system */
.contact-form input,
.contact-form textarea,
.contact-form select { border-radius: 10px; }

/* Refined editorial nav: petrol ink, gentle tracking, thin teal hover underline */
.site-nav a {
  color: var(--dark);
  font-weight: 500;
  letter-spacing: .012em;
  font-size: .95rem;
}
.site-nav a:hover,
.site-nav a.active { color: var(--dark); }
.site-nav a::after { background: var(--teal); height: 1.5px; }