/* ==========================================================================
   EstateFlow Design System
   ========================================================================== */

:root {
  --ef-bg: #FAFAF8;
  --ef-bg-alt: #F3F2EE;
  --ef-ink: #14171A;
  --ef-ink-soft: #4A4F55;
  --ef-line: #E6E4DE;
  --ef-white: #FFFFFF;
  --ef-brand: #1F5F4C;        /* deep emerald — trust + premium, not generic real-estate blue */
  --ef-brand-light: #E8F0EC;
  --ef-brand-dark: #143F33;
  --ef-accent: #D98A3D;       /* warm terracotta accent for CTAs/badges */
  --ef-sale: #1F5F4C;
  --ef-rent: #B4592A;

  --ef-radius-sm: 8px;
  --ef-radius-md: 14px;
  --ef-radius-lg: 22px;
  --ef-shadow-sm: 0 1px 3px rgba(20,23,26,0.06);
  --ef-shadow-md: 0 12px 32px rgba(20,23,26,0.08);
  --ef-shadow-lg: 0 24px 64px rgba(20,23,26,0.14);

  --ef-container: 1240px;
  --ef-header-h: 84px;
  --ef-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ef-dur: 0.6s;

  --ef-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ef-font);
  color: var(--ef-ink);
  background: var(--ef-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.4em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.ef-container { max-width: var(--ef-container); margin: 0 auto; padding: 0 24px; }
.ef-section { padding: 96px 0; }
.ef-section--tight { padding: 56px 0; }
.ef-eyebrow { color: var(--ef-brand); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; margin-bottom: 12px; display: inline-block; }
.ef-section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.ef-section-head h2 { font-size: clamp(28px, 3.6vw, 44px); }
.ef-section-head p { color: var(--ef-ink-soft); font-size: 17px; }

/* Buttons ------------------------------------------------------------- */
.ef-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: transform 0.35s var(--ef-ease), box-shadow 0.35s var(--ef-ease), background 0.25s ease;
  white-space: nowrap;
}
.ef-btn--primary { background: var(--ef-brand); color: var(--ef-white); }
.ef-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--ef-shadow-md); background: var(--ef-brand-dark); }
.ef-btn--accent { background: var(--ef-accent); color: var(--ef-white); }
.ef-btn--accent:hover { transform: translateY(-2px); box-shadow: var(--ef-shadow-md); }
.ef-btn--ghost { background: transparent; border-color: var(--ef-line); color: var(--ef-ink); }
.ef-btn--ghost:hover { border-color: var(--ef-ink); }
.ef-btn--light { background: var(--ef-white); color: var(--ef-ink); }
.ef-btn--sm { padding: 9px 18px; font-size: 13px; }
.ef-btn--block { width: 100%; }

/* Header ---------------------------------------------------------------- */
.ef-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--ef-header-h); display: flex; align-items: center;
  background: transparent; transition: background 0.4s var(--ef-ease), box-shadow 0.4s var(--ef-ease), height 0.4s var(--ef-ease);
}
.ef-header.is-scrolled { background: rgba(250,250,248,0.92); backdrop-filter: blur(14px); box-shadow: var(--ef-shadow-sm); height: 72px; }
.ef-header .ef-container { display: flex; align-items: center; justify-content: space-between; }
.ef-logo { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.ef-logo span { color: var(--ef-brand); }
.ef-nav { display: flex; gap: 32px; align-items: center; }
.ef-nav a { font-weight: 500; font-size: 15px; position: relative; }
.ef-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--ef-brand); transition: width 0.3s var(--ef-ease); }
.ef-nav a:hover::after { width: 100%; }
.ef-header-actions { display: flex; align-items: center; gap: 14px; }
.ef-menu-toggle { display: none; background: none; border: none; }

/* Hero -------------------------------------------------------------------- */
.ef-hero {
  position: relative; padding: calc(var(--ef-header-h) + 72px) 0 64px; overflow: hidden;
  background: linear-gradient(180deg, var(--ef-brand-light) 0%, var(--ef-bg) 65%);
}
.ef-hero__grid { position: absolute; inset: 0; opacity: 0.35; background-image: linear-gradient(var(--ef-line) 1px, transparent 1px), linear-gradient(90deg, var(--ef-line) 1px, transparent 1px); background-size: 64px 64px; animation: ef-grid-drift 40s linear infinite; pointer-events: none; }
@keyframes ef-grid-drift { from { background-position: 0 0; } to { background-position: 128px 128px; } }
.ef-hero__content { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }
.ef-hero h1 { font-size: clamp(36px, 6vw, 68px); }
.ef-hero h1 .ef-reveal-line { display: block; overflow: hidden; }
.ef-hero h1 .ef-reveal-line span { display: block; transform: translateY(110%); animation: ef-line-up 0.9s var(--ef-ease) forwards; }
.ef-hero h1 .ef-reveal-line:nth-child(2) span { animation-delay: 0.12s; }
@keyframes ef-line-up { to { transform: translateY(0); } }
.ef-hero p.ef-hero-sub { font-size: 18px; color: var(--ef-ink-soft); margin: 20px auto 40px; opacity: 0; animation: ef-fade-up 0.8s var(--ef-ease) 0.5s forwards; }
@keyframes ef-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.ef-hero-pills { position: absolute; inset: 0; pointer-events: none; }
.ef-hero-pill { position: absolute; background: var(--ef-white); border: 1px solid var(--ef-line); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; box-shadow: var(--ef-shadow-sm); animation: ef-float 6s ease-in-out infinite; opacity: 0; animation: ef-float 6s ease-in-out infinite, ef-pill-in 0.8s var(--ef-ease) forwards; }
.ef-hero-pill--1 { top: 12%; left: 6%; animation-delay: 0.9s, 0.9s; }
.ef-hero-pill--2 { top: 22%; right: 8%; animation-delay: 1.1s, 1.1s; }
.ef-hero-pill--3 { bottom: 16%; left: 12%; animation-delay: 1.3s, 1.3s; }
@keyframes ef-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ef-pill-in { to { opacity: 1; } }

/* Search box -------------------------------------------------------------- */
.ef-search {
  background: var(--ef-white); border-radius: var(--ef-radius-lg); box-shadow: var(--ef-shadow-lg);
  padding: 20px; max-width: 920px; margin: 0 auto; opacity: 0;
  animation: ef-fade-up 0.8s var(--ef-ease) 0.7s forwards; position: relative;
}
.ef-search-tabs { display: flex; gap: 4px; background: var(--ef-bg-alt); border-radius: 999px; padding: 4px; width: fit-content; margin-bottom: 16px; }
.ef-search-tabs button { border: none; background: transparent; padding: 8px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ef-ink-soft); transition: all 0.25s ease; }
.ef-search-tabs button.is-active { background: var(--ef-brand); color: var(--ef-white); }
.ef-search-fields { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.8fr auto; gap: 12px; align-items: end; text-align: left; }
.ef-search-fields label { display: block; font-size: 12px; font-weight: 600; color: var(--ef-ink-soft); margin-bottom: 6px; }
.ef-search-fields input, .ef-search-fields select { width: 100%; border: 1px solid var(--ef-line); border-radius: var(--ef-radius-sm); padding: 12px 14px; font-size: 14px; background: var(--ef-bg); }
.ef-search-fields input:focus, .ef-search-fields select:focus { outline: none; border-color: var(--ef-brand); }

/* Category / discovery cards ------------------------------------------ */
.ef-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ef-cat-card { position: relative; border-radius: var(--ef-radius-md); overflow: hidden; aspect-ratio: 4/5; background: var(--ef-bg-alt); box-shadow: var(--ef-shadow-sm); transition: transform 0.45s var(--ef-ease), box-shadow 0.45s var(--ef-ease); opacity: 0; transform: translateY(24px); }
.ef-cat-card.is-visible { opacity: 1; transform: translateY(0); }
.ef-cat-card:hover { transform: translateY(-6px); box-shadow: var(--ef-shadow-lg); }
.ef-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ef-ease); }
.ef-cat-card:hover img { transform: scale(1.08); }
.ef-cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,26,0) 40%, rgba(20,23,26,0.82) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--ef-white); }
.ef-cat-card__count { font-size: 12px; opacity: 0.8; margin-bottom: 4px; }
.ef-cat-card__title { font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.ef-cat-card__arrow { transition: transform 0.35s var(--ef-ease); }
.ef-cat-card:hover .ef-cat-card__arrow { transform: translateX(6px); }

/* Property cards ------------------------------------------------------ */
.ef-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ef-property-card { background: var(--ef-white); border: 1px solid var(--ef-line); border-radius: var(--ef-radius-md); overflow: hidden; transition: transform 0.4s var(--ef-ease), box-shadow 0.4s var(--ef-ease); opacity: 0; transform: translateY(24px); }
.ef-property-card.is-visible { opacity: 1; transform: translateY(0); }
.ef-property-card:hover { transform: translateY(-6px); box-shadow: var(--ef-shadow-lg); }
.ef-property-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ef-property-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ef-ease); }
.ef-property-card:hover .ef-property-card__media img { transform: scale(1.07); }
.ef-badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ef-white); text-transform: uppercase; letter-spacing: 0.03em; }
.ef-badge--sale { background: var(--ef-sale); }
.ef-badge--rent { background: var(--ef-rent); }
.ef-badge--featured { top: 14px; right: 14px; left: auto; background: var(--ef-accent); }
.ef-fav-btn { position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.ef-fav-btn:hover { transform: scale(1.1); }
.ef-fav-btn.is-active svg { fill: var(--ef-accent); stroke: var(--ef-accent); }
.ef-property-card__body { padding: 20px; }
.ef-property-card__price { font-size: 21px; font-weight: 800; color: var(--ef-brand); margin-bottom: 4px; }
.ef-property-card__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.ef-property-card__loc { color: var(--ef-ink-soft); font-size: 14px; margin-bottom: 14px; }
.ef-property-card__meta { display: flex; gap: 14px; font-size: 13px; color: var(--ef-ink-soft); border-top: 1px solid var(--ef-line); padding-top: 14px; margin-bottom: 16px; }
.ef-property-card__footer { display: flex; align-items: center; justify-content: space-between; }
.ef-property-card__dealer { font-size: 12px; color: var(--ef-ink-soft); }

/* Stats ----------------------------------------------------------------- */
.ef-stats { background: var(--ef-brand); color: var(--ef-white); border-radius: var(--ef-radius-lg); padding: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.ef-stat__num { font-size: clamp(32px, 4vw, 48px); font-weight: 800; }
.ef-stat__label { opacity: 0.8; font-size: 14px; margin-top: 6px; }

/* Testimonials ------------------------------------------------------- */
.ef-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ef-testimonial { background: var(--ef-white); border: 1px solid var(--ef-line); border-radius: var(--ef-radius-md); padding: 28px; }
.ef-testimonial p { font-size: 15px; color: var(--ef-ink-soft); }
.ef-testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-weight: 600; font-size: 14px; }
.ef-testimonial__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* CTA banner ------------------------------------------------------------ */
.ef-cta-banner { background: var(--ef-ink); color: var(--ef-white); border-radius: var(--ef-radius-lg); padding: 72px; text-align: center; }
.ef-cta-banner h2 { font-size: clamp(28px, 4vw, 42px); }
.ef-cta-banner p { color: rgba(255,255,255,0.7); margin-bottom: 28px; }

/* Footer ------------------------------------------------------------------ */
.ef-footer { background: var(--ef-bg-alt); border-top: 1px solid var(--ef-line); padding: 64px 0 32px; margin-top: 96px; }
.ef-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.ef-footer h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ef-ink-soft); }
.ef-footer ul li { margin-bottom: 10px; }
.ef-footer-bottom { border-top: 1px solid var(--ef-line); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ef-ink-soft); }

/* Archive / filters ------------------------------------------------------- */
.ef-archive-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; padding-top: calc(var(--ef-header-h) + 32px); }
.ef-filters { position: sticky; top: calc(var(--ef-header-h) + 20px); background: var(--ef-white); border: 1px solid var(--ef-line); border-radius: var(--ef-radius-md); padding: 24px; }
.ef-filters h3 { font-size: 15px; margin-bottom: 16px; }
.ef-filter-group { margin-bottom: 20px; }
.ef-filter-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ef-filter-group input, .ef-filter-group select { width: 100%; border: 1px solid var(--ef-line); border-radius: var(--ef-radius-sm); padding: 10px 12px; font-size: 14px; }
.ef-results-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ef-view-toggle { display: flex; gap: 6px; }
.ef-view-toggle button { border: 1px solid var(--ef-line); background: var(--ef-white); border-radius: var(--ef-radius-sm); padding: 8px 14px; font-size: 13px; }
.ef-view-toggle button.is-active { background: var(--ef-brand); color: var(--ef-white); border-color: var(--ef-brand); }
.ef-card-grid.ef-list-view { grid-template-columns: 1fr; }
.ef-card-grid.ef-list-view .ef-property-card { display: grid; grid-template-columns: 320px 1fr; }
.ef-card-grid.ef-list-view .ef-property-card__media { aspect-ratio: auto; height: 100%; }
.ef-no-results { text-align: center; padding: 64px 0; color: var(--ef-ink-soft); }

/* Single property ---------------------------------------------------------- */
.ef-single-property { padding-top: calc(var(--ef-header-h) + 32px); }
.ef-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; border-radius: var(--ef-radius-lg); overflow: hidden; height: 520px; }
.ef-gallery img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.ef-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.ef-property-header { display: flex; justify-content: space-between; align-items: flex-start; margin: 32px 0; }
.ef-property-header__price { font-size: 34px; font-weight: 800; color: var(--ef-brand); }
.ef-quick-facts { display: flex; gap: 32px; padding: 24px 0; border-top: 1px solid var(--ef-line); border-bottom: 1px solid var(--ef-line); margin-bottom: 32px; }
.ef-quick-facts div { font-size: 20px; font-weight: 700; }
.ef-quick-facts span { display: block; font-size: 13px; color: var(--ef-ink-soft); font-weight: 400; margin-top: 2px; }
.ef-single-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.ef-amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ef-amenity-grid li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ef-dealer-card { position: sticky; top: calc(var(--ef-header-h) + 20px); background: var(--ef-white); border: 1px solid var(--ef-line); border-radius: var(--ef-radius-md); padding: 24px; box-shadow: var(--ef-shadow-sm); }
.ef-dealer-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ef-dealer-card__top img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ef-cta-stack { display: grid; gap: 10px; margin-top: 16px; }
.ef-counter-tick { font-variant-numeric: tabular-nums; }

/* Dealer profile ------------------------------------------------------------- */
.ef-dealer-hero { padding: calc(var(--ef-header-h) + 48px) 0 48px; text-align: center; background: var(--ef-brand-light); }
.ef-dealer-hero img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 4px solid var(--ef-white); box-shadow: var(--ef-shadow-md); }

/* Breadcrumbs --------------------------------------------------------------- */
.ef-breadcrumbs ol { display: flex; gap: 6px; font-size: 13px; color: var(--ef-ink-soft); flex-wrap: wrap; }
.ef-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; }

/* Scroll reveal base --------------------------------------------------------- */
.ef-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ef-ease), transform 0.7s var(--ef-ease); }
.ef-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .ef-hero h1 .ef-reveal-line span { transform: translateY(0); }
  .ef-reveal, .ef-cat-card, .ef-property-card { opacity: 1; transform: none; }
}

/* Mobile filter drawer ----------------------------------------------------------- */
.ef-filter-drawer-toggle { display: none; }
.ef-filter-backdrop { display: none; }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ef-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ef-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ef-stats, .ef-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .ef-single-layout { grid-template-columns: 1fr; }
  .ef-dealer-card { position: static; }
  .ef-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .ef-nav, .ef-header-actions .ef-btn--ghost { display: none; }
  .ef-menu-toggle { display: block; }
  .ef-search-fields { grid-template-columns: 1fr; }
  .ef-cat-grid, .ef-card-grid, .ef-stats, .ef-testimonial-grid { grid-template-columns: 1fr; }
  .ef-gallery { grid-template-columns: 1fr; height: auto; }
  .ef-gallery__side { display: none; }
  .ef-archive-layout { grid-template-columns: 1fr; }
  .ef-filters { position: fixed; inset: auto 0 0 0; top: auto; max-height: 82vh; overflow-y: auto; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.35s var(--ef-ease); z-index: 200; }
  .ef-filters.is-open { transform: translateY(0); }
  .ef-filter-drawer-toggle { display: inline-flex; }
  .ef-filter-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(20,23,26,0.4); z-index: 199; }
  .ef-single-layout { grid-template-columns: 1fr; }
  .ef-quick-facts { flex-wrap: wrap; gap: 16px; }
  .ef-property-header { flex-direction: column; gap: 16px; }
}