/* ============================================
   Heritage Grounds Properties — Design System
   ============================================ */

:root {
  --green-900: #163a2c;
  --green-700: #1F4E3D;
  --green-600: #276956;
  --green-100: #e6efe9;
  --gold-500: #C9A227;
  --gold-100: #faf3d9;
  --terracotta: #B5651D;
  --cream: #FAF7F2;
  --white: #FFFFFF;
  --ink: #24291f;
  --ink-soft: #5b6259;
  --line: #e3ded3;
  --danger: #b3382c;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(31, 78, 61, 0.08);
  --shadow-lg: 0 10px 34px rgba(31, 78, 61, 0.14);
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--green-700);
  margin: 0 0 .5em;
  line-height: 1.25;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }

.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green-700); color: var(--white); }
.btn-primary:hover { background: var(--green-900); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold-500); color: var(--green-900); }
.btn-gold:hover { background: #b8931f; }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-outline-dark { background: transparent; border-color: var(--green-700); color: var(--green-700); }
.btn-outline-dark:hover { background: var(--green-100); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.logo img { height: 40px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  font-weight: 600; font-size: 15px; color: var(--ink);
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: var(--green-700); border-color: var(--gold-500); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--green-700); display: block; }
/* 1 Aug 2026 bug fix — see the matching docblock in layouts/app.blade.php.
   Hidden on desktop; only shown inside the mobile hamburger dropdown
   (below, under the 860px media query). */
.nav-mobile-auth { display: none; }

/* Header avatar / account dropdown (28 Jul 2026) — "you should see your
   profile avatar and under it be able to switch back to dashboard." */
.user-menu { position: relative; }
.user-avatar-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-700); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.user-avatar-btn:hover .user-avatar { transform: scale(1.06); box-shadow: 0 4px 12px rgba(31,78,61,.25); }
.user-menu-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); min-width: 210px; padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 200;
}
.user-menu-dropdown.open { opacity: 1; visibility: visible; transform: none; }
.user-menu-name { font-weight: 700; font-size: 14px; padding: 6px 10px 0; color: var(--ink); }
.user-menu-role { font-size: 12px; color: var(--ink-soft); padding: 0 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-dropdown a, .user-menu-dropdown button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--green-100); color: var(--green-700); }
.user-menu-dropdown form { margin: 0; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: flex-start;
    padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none;
  }
  .nav-links.open { display: flex; }
  /* 1 Aug 2026 bug fix (owner-reported: "for mobile view, there is no
     login button") — was: `.header-cta .btn-outline-dark { display: none; }`,
     which hid ONLY the Login button and left Register visible right next
     to it, an asymmetric rule with no fallback since the hamburger menu
     didn't carry its own auth links. Now hides the whole CTA pair on
     mobile (decluttering the top bar, as the original rule intended) and
     shows both as real links inside the hamburger dropdown instead — see
     .nav-mobile-auth above and the matching li's in layouts/app.blade.php.
     Scoped to the guest buttons only (.header-cta > a.btn) — NOT the whole
     .header-cta container, which also holds .user-menu (the logged-in
     user's avatar dropdown) that must stay visible on mobile too. */
  .header-cta > a.btn { display: none; }
  .nav-mobile-auth { display: list-item; width: 100%; }
  .nav-mobile-auth a { display: block; padding: 10px 0; }
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--green-900), var(--green-700) 60%, var(--green-600));
  color: var(--white);
  padding: 84px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 20%, rgba(201,162,39,.25), transparent 45%);
  /* Purely decorative — without this, this overlay paints on top of
     .hero .container (it's generated after .container in DOM order, so
     it wins the paint order at the same z-index:auto stacking level)
     and silently blocks every click on the hero: "Browse Listings",
     "Become an Agent", and the whole search bar. Found 28 Jul 2026 after
     an owner report that those buttons "don't work" on the homepage. */
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-inner { max-width: 660px; }
.hero .eyebrow { color: var(--gold-500); }
.hero h1 { color: var(--white); font-size: 42px; margin-bottom: 18px; }
.hero p.lead { color: #eaf1ed; font-size: 18px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* Search bar */
.search-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr auto;
  gap: 14px;
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) { .search-card { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}

/* 28 Jul 2026 — Chrome/Edge paint autofilled fields with their own blue
   tint and a heavier border, overriding our design (this is what made
   the login email/password boxes look "bad" — a browser autofill quirk,
   not our actual field styling once input[type="password"] above was
   fixed to be included in the first place). The huge inset box-shadow
   trick repaints the field background before autofill's own color can
   show through; the 5000s transition delay stops the color flashing in
   on load. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  box-shadow: 0 0 0 1000px var(--white) inset;
  transition: background-color 5000s ease-in-out 0s, border-color .15s ease;
  border-color: var(--line);
}

/* Feature cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.feature-card .icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 14px;
}
.feature-card h3 { font-size: 18px; }
.feature-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

/* Listing cards */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .listing-grid { grid-template-columns: 1fr; } }

.listing-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow .15s ease, transform .15s ease;
}
.listing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.listing-media { position: relative; aspect-ratio: 4/3; background: var(--green-100); overflow: hidden; }
.listing-media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--white); color: var(--green-700);
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  box-shadow: var(--shadow);
}
.badge-verified {
  position: absolute; top: 12px; right: 12px;
  background: var(--green-700); color: var(--white);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  display: flex; align-items: center; gap: 4px;
}
/* 28 Jul 2026 owner directive — paid "Feature this listing" boost badge.
   Sits just under the type/listing-type badge (top-left) so it never
   collides with the verified/pending badge (top-right). */
.badge-featured {
  position: absolute; top: 46px; left: 12px;
  background: #C9A227; color: #1F1B12;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  box-shadow: var(--shadow);
}
/* Like + share (28 Jul 2026 owner directive) — bottom-right of the card
   media, so they never collide with the verified/pending badge top-right. */
.card-actions {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: flex; gap: 6px;
}
.like-btn, .share-btn {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.92); color: var(--green-700);
  border: none; border-radius: 999px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.like-btn:hover, .share-btn:hover { transform: scale(1.06); background: var(--white); }
.like-btn .heart { color: var(--danger, #b3382c); font-size: 15px; line-height: 1; }
.like-btn.liked { background: var(--white); }
.share-btn { font-size: 14px; padding: 6px 9px; }
.share-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5;
  background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-width: 140px; overflow: hidden;
}
.share-menu a, .share-menu button {
  padding: 10px 14px; font-size: 13px; text-align: left; color: var(--ink, #24291F);
  text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit;
}
.share-menu a:hover, .share-menu button:hover { background: var(--green-100); }

/* 28 Jul 2026 owner directive — "show of interest" waitlist button, so a
   pool of prospects exists for when a currently-rented unit/property
   frees up. Text pill, same family as .like-btn/.share-btn but wider. */
.interest-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.92); color: var(--green-700);
  border: 1px solid var(--green-700); border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.interest-btn:hover { transform: scale(1.04); }
.interest-btn.interested { background: var(--green-700); color: var(--white); }

.badge-pending {
  position: absolute; top: 12px; right: 12px;
  background: var(--gold-100); color: #7a5f0f;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
/* 30 Jul 2026 fix — owner: "even if the house is fully rented it should
   not be removed from the listed. it should just show fully rented."
   Bottom-left of the card media, the one corner not already used by the
   type/featured badges (top-left), verified/pending badge (top-right),
   or like/share buttons (bottom-right). */
.badge-taken {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: #24291F; color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
.listing-body { padding: 18px; }
.listing-price { font-family: Georgia, serif; font-size: 20px; color: var(--green-700); font-weight: 700; margin-bottom: 4px; }
.listing-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.listing-loc { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.listing-meta { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 10px; }

/* Filter bar */
.filter-bar {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; margin-bottom: 32px;
  align-items: end;
}
@media (max-width: 900px) { .filter-bar { grid-template-columns: 1fr 1fr; } }

.results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--ink-soft); font-size: 14.5px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 54px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-700); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 17px;
}
.step h3 { font-size: 17px; }
.step p { color: var(--ink-soft); font-size: 14.5px; }

/* CTA banner */
.cta-banner {
  background: var(--green-700);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: var(--white); margin-bottom: 6px; }
.cta-banner p { color: #dcebe4; margin: 0; }

/* Cards / panels */
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }
.field { margin-bottom: 16px; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.help-text { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.required::after { content: " *"; color: var(--danger); }

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; padding: 22px 0; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.trust-strip span { display: flex; align-items: center; gap: 8px; }

/* Footer */
.site-footer { background: var(--green-900); color: #cfe0d7; padding: 56px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 36px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: var(--white); font-size: 15px; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #bcd2c6; font-size: 14px; }
.site-footer a:hover { color: var(--gold-500); }
.site-footer p { color: #a9c2b6; font-size: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: #9fb7ab;
}

/* Page hero (inner pages) */
.page-hero { background: var(--green-100); padding: 46px 0; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: 8px; }
.breadcrumb { font-size: 13.5px; color: var(--ink-soft); }
.breadcrumb a { color: var(--green-700); font-weight: 600; }

/* Detail page */
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } }
.detail-gallery-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--green-100); margin-bottom: 10px; }
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.detail-gallery-thumbs img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
.detail-gallery-thumbs img.active { border-color: var(--gold-500); }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
@media (max-width: 600px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
.spec-item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-align: center; }
.spec-item .val { font-family: Georgia, serif; font-weight: 700; color: var(--green-700); font-size: 18px; }
.spec-item .lbl { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.doc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-chip { background: var(--green-100); color: var(--green-700); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.sticky-side { position: sticky; top: 96px; }
.agent-card { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.agent-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--green-700); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: Georgia, serif; }

/* Misc */
.divider { height: 1px; background: var(--line); margin: 40px 0; }
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { background: var(--green-100); color: var(--green-700); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }

.alert-success {
  background: var(--green-100); color: var(--green-900); border: 1px solid var(--green-600);
  border-radius: 8px; padding: 14px 16px; font-size: 14.5px; margin-bottom: 18px;
}

/* ============================================
   Motion & imagery (28 Jul 2026) — "make it
   beautiful" pass. Kept lightweight: CSS
   keyframes + one small IntersectionObserver
   script (see app.blade.php), no build step,
   no new dependencies.
   ============================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1.is-visible { transition-delay: .08s; }
.reveal-delay-2.is-visible { transition-delay: .16s; }
.reveal-delay-3.is-visible { transition-delay: .24s; }
.reveal-delay-4.is-visible { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img, .kb-zoom { animation: none !important; }
}

/* Hero photography — subtle slow zoom (Ken Burns) behind the gradient
   overlay that already exists on .hero. Falls back gracefully to the
   pure gradient if the image is slow/unavailable since it's layered
   behind .hero::after and the existing background. */
.hero { isolation: isolate; }
.hero-media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .28;
  animation: kenBurns 18s ease-in-out infinite alternate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(22,58,44,.92), rgba(31,78,61,.88) 60%, rgba(39,105,86,.85));
}
.hero-inner { animation: fadeInUp .7s ease both; }
.hero-inner .hero-actions { animation: fadeInUp .7s ease .15s both; }
.search-card { animation: fadeInUp .6s ease .2s both; }

/* Feature / listing / step micro-interactions */
.feature-card, .step, .spec-item, .agent-card { transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-card .icon { transition: transform .25s ease; }
.feature-card:hover .icon { transform: scale(1.12) rotate(-4deg); }
.spec-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-primary, .btn-gold { position: relative; overflow: hidden; }

/* Image loading polish for property photography (listing cards, gallery). */
.listing-media img, .detail-gallery-main img { transition: transform .5s ease; }
.listing-card:hover .listing-media img { transform: scale(1.06); }
.detail-gallery-main:hover img { transform: scale(1.03); }

/* "Coming soon" overlay — used by placeholder listings until real
   photos/listings replace them (see admin "Sample Listings" tool). */
.coming-soon-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,58,44,.15), rgba(22,58,44,.82));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-family: Georgia, serif; font-weight: 700; font-size: 15px;
  letter-spacing: .03em; text-align: center; padding: 12px;
}
.coming-soon-overlay span {
  background: var(--gold-500); color: var(--green-900);
  padding: 6px 14px; border-radius: 999px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; box-shadow: var(--shadow);
}