/* ============================================================
   JENI HALL REAL ESTATE — LUXURY DESIGN SYSTEM
   styles.css · v2.0

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   1.  Design Tokens (CSS Variables)
       1a. Color Palette
       1b. Typography
       1c. Spacing Scale
       1d. Border Radius
       1e. Shadows & Elevation
       1f. Motion
       1g. Z-Index Scale

   2.  Reset & Base

   3.  Typography Scale
       3a. Display / Headings
       3b. Body & UI Text
       3c. Utility Text Classes

   4.  Layout Primitives
       4a. .lx-container  (section wrapper)
       4b. .lx-section    (vertical rhythm)
       4c. .lx-grid       (column helpers)

   5.  Component Library
       5a. Buttons        (.btn-primary, .btn-secondary, .btn-ghost, .btn-outline)
       5b. Cards          (.lx-card)
       5c. Stat Blocks    (.lx-stat)
       5d. Testimonial    (.lx-testimonial)
       5e. CTA Section    (.lx-cta)
       5f. Section Header (.lx-section-header)
       5g. Divider / Rule

   6.  Site Navigation
   7.  Hero
   8.  Stats Bar
   9.  Communities
   10. About
   11. Why Jeni
   12. Listings
   13. Lifestyle
   14. Testimonials (Section)
   15. Newsletter
   16. Contact
   17. Footer
   18. Animations & Reveals
   19. Mobile (≤ 900 px)
   20. Journey Strip
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

  /* ── 1a. Color Palette ───────────────────────────────────── */

  /* Brand primaries */
  --color-navy:          #1B3040;   /* deep slate navy — CTAs, headings on light */
  --color-navy-mid:      #2E4A5C;   /* mid navy — hover states */
  --color-navy-light:    #55778C;   /* slate blue — body links, accents */
  --color-navy-pale:     #95A9B3;   /* muted slate — secondary text, stat bg */

  /* Gold / warm tones */
  --color-gold:          #B8965A;   /* true gold — primary accent */
  --color-gold-light:    #D4B483;   /* warm highlight gold */
  --color-gold-pale:     #F0E8DA;   /* cream — CTA section bg, newsletter */
  --color-gold-whisper:  #FAF6F0;   /* near-white warm — off-white sections */

  /* Neutrals */
  --color-white:         #FFFFFF;
  --color-off-white:     #F8F7F5;   /* page sections bg */
  --color-gray-100:      #EFEFED;
  --color-gray-200:      #DEDCDA;
  --color-gray-400:      #9A9896;
  --color-gray-700:      #4A4845;
  --color-black:         #111110;

  /* Semantic aliases — change palette by editing these only */
  --c-bg:                var(--color-white);
  --c-bg-alt:            var(--color-off-white);
  --c-bg-dark:           var(--color-navy);
  --c-bg-mid:            var(--color-navy-pale);
  --c-bg-warm:           var(--color-gold-pale);
  --c-text:              var(--color-black);
  --c-text-muted:        var(--color-gray-700);
  --c-text-subtle:       var(--color-gray-400);
  --c-text-inverse:      var(--color-white);
  --c-accent:            var(--color-gold);
  --c-accent-light:      var(--color-gold-light);
  --c-link:              var(--color-navy-light);
  --c-link-hover:        var(--color-gold);
  --c-border:            var(--color-gray-100);
  --c-border-mid:        var(--color-gray-200);

  /* ── 1b. Typography ─────────────────────────────────────── */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', 'Nunito Sans', 'Gill Sans', Helvetica, sans-serif;

  /* Legacy aliases — keeps existing markup working */
  --font-serif:    var(--font-display);
  --font-sans:     var(--font-body);

  /* Type scale — calibrated for luxury editorial feel */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  15px;    /* slightly larger base for readability */
  --text-md:    16px;
  --text-lg:    19px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   clamp(30px, 3.8vw, 46px);
  --text-4xl:   clamp(38px, 5vw, 62px);
  --text-hero:  clamp(52px, 7vw, 96px);

  /* Leading — display tight, body loose, luxury editorial */
  --leading-tight:  1.08;
  --leading-snug:   1.28;
  --leading-normal: 1.65;
  --leading-loose:  1.95;

  /* Tracking — refined, not overworked */
  --tracking-wide:   0.10em;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.32em;

  /* ── 1c. Spacing Scale ───────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* Section vertical padding — generous for premium feel */
  --section-py:         80px;
  --section-py-sm:       64px;
  --section-py-lg:      110px;

  /* Max content width */
  --container-max: 1200px;
  --container-px:   48px;

  /* ── 1d. Border Radius ───────────────────────────────────── */
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --radius-xl:    16px;
  --radius-full: 9999px;

  /* ── 1e. Shadows & Elevation ─────────────────────────────── */
  --shadow-xs:  0 1px  4px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px  8px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 56px rgba(0,0,0,0.16);
  --shadow-gold: 0 8px 32px rgba(184,150,90,0.22);

  /* ── 1f. Motion ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── 1g. Z-Index Scale ───────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 200;
  --z-sticky:   500;
  --z-nav:     1000;
  --z-modal:   2000;

  /* ── Brand aliases (client design system spec) ───────────── */
  /* These six are the canonical tokens for all new page work.  */
  /* They map onto the existing palette so both systems coexist. */
  --color-primary:        #3E6276;   /* logo blue — primary buttons, key UI */
  --color-background:     #E3E8ED;   /* light section background (alt rows)  */
  --color-text-body:      #2F2F2F;   /* paragraph / body copy                */
  --color-text-heading:   #1F2A30;   /* all headline elements                */
  --color-accent:         #D9C7B6;   /* borders, hover states, highlights    */
  /* --color-white already defined above as #FFFFFF              */

  /* Semantic aliases updated to use brand tokens */
  --c-primary:            var(--color-primary);
  --c-primary-hover:      color-mix(in srgb, var(--color-primary) 85%, black);
  --c-bg-brand:           var(--color-background);
  --c-text-body:          var(--color-text-body);
  --c-text-heading:       var(--color-text-heading);
  --c-accent-brand:       var(--color-accent);

  /* ── Third-party brand colors (social media) ─────────────── */
  /* Isolated here so the rest of the codebase stays hex-free.  */
  --color-social-fb:      #1877F2;
  --color-social-ig:      radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  --color-social-li:      #0A66C2;
  --color-google-star:    #FBBC04;

  /* ── Listing / lifestyle card gradient stops ──────────────── */
  /* Named by purpose so changing one slot updates everywhere.   */
  --color-listing-bg-1-end:     #0D1F2D;   /* navy deep end */
  --color-listing-bg-2-start:   #253420;   /* forest green */
  --color-listing-bg-2-end:     #152014;
  --color-listing-bg-3-start:   #3A2820;   /* warm terracotta */
  --color-listing-bg-3-end:     #281A14;
  --color-ls-waterfront-start:  #1E3A4A;
  --color-ls-waterfront-end:    #102A38;
  --color-ls-golf-start:        #1E2D20;
  --color-ls-golf-end:          #121E14;
  --color-ls-estate-start:      #2D2038;
  --color-ls-estate-end:        #1E1428;

  /* ── Legacy variable bridge ──────────────────────────────── */
  /* Keeps any inline styles or older page HTML working unchanged */
  --navy:        var(--color-navy);
  --navy-dark:   var(--color-navy);
  --slate:       var(--color-navy-light);
  --slate-light: var(--color-navy-pale);
  --gold:        var(--color-gold);
  --gold-light:  var(--color-gold-light);
  --gold-pale:   var(--color-gold-pale);
  --white:       var(--color-white);
  --off-white:   var(--color-off-white);
  --gray-light:  var(--color-gray-100);
  --gray:        var(--color-gray-200);
  --gray-mid:    var(--color-gray-400);
  --gray-dark:   var(--color-gray-700);
  --black:       var(--color-black);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-body);     /* --color-text-body: #2F2F2F */
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  cursor: pointer;
  font-family: inherit;
}


/* ============================================================
   3. TYPOGRAPHY SCALE
   ============================================================ */

/* 3a. Display / Headings */

.lx-display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 400; /* Playfair Display looks best at regular weight */
  letter-spacing: -0.01em;
  color: var(--color-text-heading);  /* --color-text-heading: #1F2A30 */
}

.lx-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: 400;
  color: var(--color-text-heading);
}

.lx-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: 400;
  color: var(--color-text-heading);
}

.lx-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 400;
  color: var(--color-text-heading);
}

.lx-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 400;
  color: var(--color-text-heading);
}

/* 3b. Body & UI Text */

.lx-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  font-weight: 300;
}

.lx-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  font-weight: 400;
}

.lx-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* 3c. Utility Text */

.lx-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.lx-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.lx-italic {
  font-family: var(--font-display);
  font-style: italic;
}


/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

/* 4a. Section Container — max-width + horizontal padding */
.lx-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* 4b. Section — vertical rhythm wrapper */
.lx-section {
  padding-block: var(--section-py);
}

.lx-section--sm   { padding-block: var(--section-py-sm); }
.lx-section--lg   { padding-block: var(--section-py-lg); }
/* Section background alternation — white / --color-background */
.lx-section--alt  { background: var(--color-background); }  /* #E3E8ED */
.lx-section--dark { background: var(--c-bg-dark); }
.lx-section--mid  { background: var(--c-bg-mid); }
.lx-section--warm { background: var(--c-bg-warm); }

/* 4c. Grid helpers */
.lx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.lx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }


/* ============================================================
   5. COMPONENT LIBRARY
   ============================================================ */

/* ── 5a. Buttons ───────────────────────────────────────────── */

/*
  Usage guide:
    <a class="btn-primary" href="#">Schedule a Call</a>
    <a class="btn-secondary" href="#">View Listings</a>
    <a class="btn-ghost" href="#">Learn More</a>
    <a class="btn-outline" href="#">See All Reviews</a>

  Size modifiers:
    Add .btn--sm for smaller padding.
    Add .btn--lg for larger padding.

  On dark backgrounds use .btn-ghost or .btn-outline.
  On light backgrounds use .btn-primary or .btn-secondary.
*/

/* Shared button foundation */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  padding: 16px 40px;
  transition:
    background var(--duration-base) var(--ease-out),
    color      var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform  var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border-radius: var(--radius-none); /* editorial sharp corners */
}

/* Primary — uses --color-primary brand token (#3E6276) */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-navy-mid);
  border-color: var(--color-navy-mid);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary — Navy fill */
.btn-secondary {
  background: var(--c-bg-dark);
  color: var(--c-text-inverse);
  border-color: var(--c-bg-dark);
}
.btn-secondary:hover {
  background: var(--color-navy-mid);
  border-color: var(--color-navy-mid);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-secondary:active { transform: translateY(0); }

/* Ghost — Transparent, white border. Use on dark/image backgrounds */
.btn-ghost {
  background: transparent;
  color: var(--c-text-inverse);
  border-color: rgba(255,255,255,0.55);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.9);
}

/* Outline — Transparent, slate border. Use on light backgrounds */
.btn-outline {
  background: transparent;
  color: var(--c-link);
  border-color: var(--c-link);
}
.btn-outline:hover {
  background: var(--c-bg-dark);
  color: var(--c-text-inverse);
  border-color: var(--c-bg-dark);
}

/* Size modifiers */
.btn--sm { padding: 10px 24px; font-size: 9px; }
.btn--lg { padding: 20px 56px; font-size: 11px; }
.btn--full { width: 100%; }

/* Legacy class aliases — keeps existing HTML markup working */
.btn-navy  { background: var(--c-bg-dark)  !important; border-color: var(--c-bg-dark)  !important; color: var(--color-white) !important; }
.btn-navy:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
/* btn-gold now routes through --color-primary for brand consistency */
.btn-gold  { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-white) !important; }
.btn-gold:hover { background: var(--color-navy-mid) !important; border-color: var(--color-navy-mid) !important; }


/* ── 5b. Cards (.lx-card) ──────────────────────────────────── */

/*
  Usage guide:
    <div class="lx-card">
      <div class="lx-card__media">…image or slot…</div>
      <div class="lx-card__body">
        <p class="lx-eyebrow">For Sale</p>
        <h3 class="lx-card__title">123 Oak Lane</h3>
        <p class="lx-card__sub">Alpharetta, GA</p>
        <div class="lx-card__meta">…</div>
      </div>
    </div>

  Variants:
    .lx-card--flat   — no shadow (use inside grid on colored bg)
    .lx-card--dark   — dark bg version
*/

.lx-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}
.lx-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

.lx-card--flat { box-shadow: none; }
.lx-card--flat:hover { box-shadow: var(--shadow-md); }

.lx-card--dark {
  background: var(--c-bg-dark);
  border-color: rgba(255,255,255,0.08);
  color: var(--c-text-inverse);
}

.lx-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-gray-200);
}
.lx-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.06) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}
.lx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.lx-card:hover .lx-card__media img { transform: scale(1.025); }

.lx-card__body {
  padding: 22px 22px 26px;
}

.lx-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--c-link);
}

.lx-card__sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(0,0,0,0.5);
  margin-bottom: 14px;
}

.lx-card__meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  padding-top: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--c-border);
}

.lx-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  color: #fff;
  border-radius: 1px;
  z-index: 2;
  opacity: 0.95;
}
.lx-card__badge--gold { background: var(--c-accent); }
.lx-card__badge--navy { background: var(--c-bg-dark); }


/* ── 5c. Stat Block (.lx-stat) ─────────────────────────────── */

/*
  Usage guide:
    <div class="lx-stat">
      <div class="lx-stat__number">30+</div>
      <div class="lx-stat__label">Years of Experience</div>
    </div>

  Place inside a grid, e.g. .lx-grid-4, or inside .stats-inner.
  Variants: .lx-stat--light (dark bg), .lx-stat--gold (warm bg).
*/

.lx-stat { text-align: center; }

.lx-stat__number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.lx-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* On the mid-blue stats bar */
.lx-stat--light .lx-stat__number { color: var(--c-text-inverse); }
.lx-stat--light .lx-stat__label  { color: rgba(255,255,255,0.75); }

/* On a warm/gold background */
.lx-stat--gold .lx-stat__number { color: var(--c-bg-dark); }
.lx-stat--gold .lx-stat__label  { color: var(--c-accent); }


/* ── 5d. Testimonial Card (.lx-testimonial) ────────────────── */

/*
  Usage guide:
    <div class="lx-testimonial">
      <div class="lx-testimonial__stars">★★★★★</div>
      <blockquote class="lx-testimonial__quote">
        "Jeni made the entire process seamless…"
      </blockquote>
      <cite class="lx-testimonial__author">Sarah & David M.</cite>
      <span class="lx-testimonial__detail">Alpharetta, GA</span>
    </div>
*/

.lx-testimonial {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  padding: var(--space-10) var(--space-8);
  position: relative;
}

/* Decorative quote mark */
.lx-testimonial::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--c-accent-light);
  opacity: 0.35;
  position: absolute;
  top: 14px;
  left: 26px;
  pointer-events: none;
}

.lx-testimonial__stars {
  color: var(--c-accent-light);
  font-size: var(--text-sm);
  letter-spacing: 3px;
  margin-bottom: var(--space-2);
}

.lx-testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  line-height: var(--leading-loose);
  color: var(--c-text-inverse);
  margin-block: var(--space-6) var(--space-5);
  font-weight: 400;
}

.lx-testimonial__author {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent-light);
  font-style: normal;
}

.lx-testimonial__detail {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  margin-top: var(--space-1);
  letter-spacing: 0.05em;
}

/* Light variant — for testimonial cards on a white/light bg */
.lx-testimonial--light {
  background: var(--c-bg);
  border-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}
.lx-testimonial--light .lx-testimonial__quote  { color: var(--c-text); }
.lx-testimonial--light .lx-testimonial__author { color: var(--c-accent); }
.lx-testimonial--light::before                 { color: var(--c-accent); }


/* ── 5e. CTA Section (.lx-cta) ─────────────────────────────── */

/*
  Usage guide:
    <section class="lx-cta lx-cta--gold">
      <div class="lx-container lx-cta__inner">
        <p class="lx-eyebrow">Ready to Begin?</p>
        <h2 class="lx-cta__title">Find Your North Atlanta Dream Home</h2>
        <p class="lx-cta__body">…</p>
        <div class="lx-cta__actions">
          <a class="btn-primary" href="#">Schedule a Consultation</a>
          <a class="btn-ghost" href="#">Browse Listings</a>
        </div>
      </div>
    </section>

  Variants:
    .lx-cta--gold  — warm cream background, dark text
    .lx-cta--navy  — dark navy background, light text
    .lx-cta--mid   — slate blue background, light text
*/

.lx-cta {
  padding-block: var(--section-py);
  text-align: center;
}

.lx-cta--gold {
  background: var(--c-bg-warm);
  border-top: 1px solid rgba(184,150,90,0.2);
  border-bottom: 1px solid rgba(184,150,90,0.2);
}

.lx-cta--navy { background: var(--c-bg-dark); }
.lx-cta--mid  { background: var(--c-bg-mid); }

.lx-cta__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.lx-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--c-bg-dark);
}
.lx-cta--navy .lx-cta__title,
.lx-cta--mid  .lx-cta__title {
  color: var(--c-text-inverse);
}

.lx-cta__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--c-text-muted);
  max-width: 540px;
}
.lx-cta--navy .lx-cta__body,
.lx-cta--mid  .lx-cta__body {
  color: rgba(255,255,255,0.65);
}

.lx-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-4);
}


/* ── 5f. Section Header (.lx-section-header) ───────────────── */

/*
  Usage guide:
    <header class="lx-section-header">
      <p class="lx-eyebrow">North Atlanta Communities</p>
      <h2 class="lx-section-header__title">Browse by <em>Community</em></h2>
      <div class="lx-rule"></div>
      <p class="lx-section-header__desc">…</p>
    </header>

  Centered variant: add .lx-section-header--center
*/

.lx-section-header {
  margin-bottom: var(--space-12);
}

.lx-section-header--center {
  text-align: center;
}
.lx-section-header--center .lx-rule {
  margin-inline: auto;
}

.lx-section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--c-link);
  margin-block: var(--space-3) var(--space-4);
}

.lx-section-header__title em {
  font-style: italic;
  color: var(--c-accent);
}

.lx-section-header__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--c-text-muted);
  max-width: 560px;
}

/* On dark backgrounds */
.lx-section-header--inverse .lx-section-header__title { color: var(--c-text-inverse); }
.lx-section-header--inverse .lx-section-header__desc  { color: rgba(255,255,255,0.65); }
.lx-section-header--inverse .lx-eyebrow               { color: var(--c-accent-light); }


/* ── 5g. Divider / Rule ────────────────────────────────────── */

.lx-rule {
  width: 48px;
  height: 2px;
  background: var(--c-accent);
  border: none;
  margin-bottom: var(--space-6);
}

.lx-rule--wide  { width: 80px; }
.lx-rule--full  { width: 100%; }
.lx-rule--light { background: rgba(255,255,255,0.25); }


/* ============================================================
   6. SITE NAVIGATION
   Single source of truth. No nav styles anywhere else.
   JS class hooks: #mainNav.is-scrolled, #mobileMenu.is-open,
   body.nav-open, #navToggle (hidden/shown via media query).
   ============================================================ */

/* ── 6a. Main bar ───────────────────────────────────────────── */

#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 var(--container-px);
  height: 88px;                          /* desktop resting height */
  background: var(--color-white);
  border-bottom: 1px solid var(--c-border);
  /* No box-shadow at rest — appears on scroll via .is-scrolled */
  box-shadow: none;
  transition:
    height     var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

/* Scroll-shrink state — added by nav.js */
#mainNav.is-scrolled {
  height: 68px;
  box-shadow: var(--shadow-md);
}

/* ── 6b. Logo group (left) ──────────────────────────────────── */

.nav-logos {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-width: 0;
}

.nav-logo-jeni {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: height var(--duration-slow) var(--ease-out);
}
#mainNav.is-scrolled .nav-logo-jeni { height: 48px; }

.nav-logo-divider {
  width: 1px;
  height: 56px;
  background: var(--c-border-mid);
  flex-shrink: 0;
  transition: height var(--duration-slow) var(--ease-out);
}
#mainNav.is-scrolled .nav-logo-divider { height: 40px; }

.nav-logo-bhhs {
  height: 64px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: height var(--duration-slow) var(--ease-out);
}
#mainNav.is-scrolled .nav-logo-bhhs { height: 48px; }

/* ── 6c. Desktop nav links (centre) ─────────────────────────── */

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav-links > li { position: relative; display: flex; align-items: center; }

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base);
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 1;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--color-primary); outline: none; }

/* Secondary nav items — explicitly identical to primary */
.nav-link--secondary a {
  color: var(--color-text-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  opacity: 1;
}
.nav-link--secondary a:hover { color: var(--color-primary); opacity: 1; }

/* ── 6d. Dropdown (desktop Search Homes) ────────────────────── */

.nav-dropdown-menu {
  display: none;                       /* shown by :hover + :focus-within */
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: var(--space-1);
  z-index: var(--z-dropdown);
}

/* CSS-driven: show on hover OR keyboard focus-within */
.nav-dropdown:hover    .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

.nav-dropdown-panel {
  background: var(--color-white);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
}

.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-link);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-dropdown-panel a:last-child { border-bottom: none; }
.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: var(--color-off-white);
  color: var(--c-accent);
  outline: none;
}
.nav-dropdown-panel a i { color: var(--c-accent); font-size: 11px; }

/* Chevron icon inside trigger link */
.nav-dropdown-chevron { font-size: 8px; }

/* ── 6e. Right rail (social + phone) ────────────────────────── */

.nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* nav-social kept for mobile menu only — hidden in desktop nav */
.nav-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  color: white;
  font-size: 13px;
  text-decoration: none;
  transition: opacity var(--duration-base), transform var(--duration-base);
}
.nav-social-icon:hover { opacity: 0.85; transform: scale(1.08); }
.nav-social-icon--fb { background: var(--color-social-fb); }
.nav-social-icon--ig { background: var(--color-social-ig); }
.nav-social-icon--li { background: var(--color-social-li); }

.nav-phone-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base);
}
.nav-phone-link:hover { color: var(--color-text-heading); }

/* ── 6f. Hamburger toggle (mobile only) ─────────────────────── */

#navToggle {
  display: none;           /* hidden on desktop; shown via media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  flex-shrink: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
}

.nav-hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-link);
  border-radius: 2px;
  transition: background var(--duration-base);
}
#navToggle:hover .nav-hamburger-bar { background: var(--c-accent); }

/* ── 6g. Mobile menu overlay ─────────────────────────────────── */

/*
  State model (managed entirely by nav.js class toggles):
    Hidden:  #mobileMenu            — display:none
    Visible: #mobileMenu.is-open    — display:flex
    Body lock: body.nav-open        — position:fixed, overflow:hidden
*/

#mobileMenu {
  display: none;                       /* default hidden */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;                      /* dvh for mobile browser chrome */
  background: var(--c-bg-dark);
  z-index: var(--z-modal);
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Animate in */
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

#mobileMenu.is-open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

/* Body scroll lock */
body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* top is set dynamically by nav.js to preserve scroll position */
}

/* Menu header row */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.mobile-menu-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

#navClose {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 28px;
  line-height: 1;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  transition: color var(--duration-base);
}
#navClose:hover { color: white; }

/* Menu nav list */
.mobile-menu-nav {
  padding: var(--space-6);
  flex: 1;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-list li {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.mobile-menu-list a {
  display: block;
  padding: 17px var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color var(--duration-base), padding-left var(--duration-base);
}
.mobile-menu-list a:hover,
.mobile-menu-list a:focus-visible {
  color: var(--c-accent-light);
  padding-left: var(--space-3);
  outline: none;
}

/* Accent link (e.g. Reviews — gold) */
.mobile-menu-list a.is-accent { color: var(--c-accent-light); }

/* Menu footer: phone + social */
.mobile-menu-footer {
  padding: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.mobile-menu-phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-accent-light);
  text-decoration: none;
  margin-bottom: var(--space-5);
  transition: color var(--duration-base);
}
.mobile-menu-phone:hover { color: white; }
.mobile-menu-phone i     { font-size: 16px; }

.mobile-menu-social {
  display: flex;
  gap: var(--space-3);
}

.mobile-menu-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: white;
  font-size: 16px;
  text-decoration: none;
  transition: opacity var(--duration-base), transform var(--duration-base);
}
.mobile-menu-social-icon:hover { opacity: 0.85; transform: scale(1.08); }
.mobile-menu-social-icon--fb { background: var(--color-social-fb); }
.mobile-menu-social-icon--ig { background: var(--color-social-ig); }
.mobile-menu-social-icon--li { background: var(--color-social-li); }

/* ── 6h. Radio pill (contact form filter — kept here as it's site-wide UI) */

.radio-pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--c-border-mid);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-link);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--duration-base), color var(--duration-base), background var(--duration-base);
}
.radio-pill:hover         { border-color: var(--c-accent); color: var(--c-accent); }
.radio-pill-active        { background: var(--c-accent); border-color: var(--c-accent); color: white !important; }

/* ── 6i. Mobile breakpoint ───────────────────────────────────── */

@media (max-width: 900px) {

  #mainNav {
    height: 68px;
    padding: 0 var(--space-4);
  }

  /* Hide desktop links and right rail */
  .nav-links  { display: none; }
  .nav-right  { display: none; }

  /* Show hamburger */
  #navToggle  { display: flex; }

  /* Scale logos down */
  .nav-logo-jeni    { height: 40px; }
  .nav-logo-divider { height: 40px; }
  .nav-logo-bhhs    { height: 40px; max-width: 90px; }
}



/* ============================================================
   7. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 88px;             /* matches fixed nav height; bg image fills from top edge */
  margin-top: 0;
  background: transparent;
}

@media (max-width: 900px) {
  .hero { padding-top: 76px; margin-top: 0; }   /* matches mobile nav height */
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('jeni_hall_hero_background.jpg');
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero {
    min-height: 700px;
    padding-top: 88px;
  }
  .hero-bg {
    background-size: cover;
    background-position: center 68%;
  }
  .hero-inner {
    padding: 0 24px 72px;
  }
  .hero-search {
    max-width: 100%;
  }
  .hero-actions {
    width: 100%;
    gap: 12px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost-light {
    width: 100%;
    justify-content: center;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 25, 35, 0.42) 0%,
    rgba(15, 25, 35, 0.22) 35%,
    rgba(15, 25, 35, 0.52) 100%
  );
  z-index: 1;
}

/* Fine grain for depth */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.18;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px) 96px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(217, 199, 182, 0.72);
  margin-bottom: var(--space-5);
  display: block;
  opacity: 0;
  animation: heroFadeUp 1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1.06;
  color: var(--color-white);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-8);
  max-width: 18ch;
  opacity: 0;
  animation: heroFadeUp 1.1s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero-rule {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: heroFadeUp 0.9s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.35vw, 16px);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.85;
  max-width: 48ch;
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: heroFadeUp 1s 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 1s 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* kvCORE search widget */
.hero-search {
  width: 100%;
  max-width: 640px;
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: heroFadeUp 1s 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.28);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 3;
}
.hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}


/* ============================================================
   7b. CREDIBILITY MARQUEE STRIP
   ─────────────────────────────────────────────────────────────
   Sits between hero and the three nav cards.
   Pure CSS animation — JS only for hover-pause.
   To swap in logo files later, replace the .strip-item__text
   span with an <img> and remove the text; the sizing and
   padding will hold without any CSS changes needed.
   ============================================================ */

.cred-strip {
  background: var(--color-white);
  border-top:    1px solid rgba(31, 42, 48, 0.07);
  border-bottom: 1px solid rgba(31, 42, 48, 0.07);
  height: 64px;
  overflow: hidden;
  position: relative;
  /* Soft fade masks at left and right edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Pause on hover — toggled by JS adding .is-paused */
.cred-strip.is-paused .cred-strip__track { animation-play-state: paused; }

.cred-strip__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* Scroll one full set width — set defined in JS on load,
     falls back to 50% which works because we duplicate the set */
  animation: credScroll 42s linear infinite;
}

/* One complete set of items (duplicated in HTML for seamless loop) */
.cred-strip__set {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 36px;
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Centred dot separator before each item */
.strip-item::before {
  content: '\00B7';          /* middle dot · */
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
  opacity: 0.6;
}

/* Optional: logo image treatment */
.strip-item__logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.3s;
  flex-shrink: 0;
}
.cred-strip:hover .strip-item__logo { opacity: 0.75; }

/* Text label */
.strip-item__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-heading);
  opacity: 0.42;
  transition: opacity 0.3s;
}
.cred-strip:hover .strip-item__text { opacity: 0.6; }

/* Icon before text (optional, used on some items) */
.strip-item__icon {
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0.65;
  flex-shrink: 0;
}

/* Keyframe — scrolls exactly one full set to the left */
@keyframes credScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced motion — stop animation, show items statically */
@media (prefers-reduced-motion: reduce) {
  .cred-strip__track { animation: none; }
  .cred-strip {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }
  .cred-strip__set:last-child { display: none; } /* hide duplicate */
}

/* Mobile — slightly shorter, same behaviour */
@media (max-width: 900px) {
  .cred-strip { height: 56px; }
  .strip-item { padding: 0 28px; gap: 12px; }
  .strip-item__text { font-size: 12px; letter-spacing: 0.05em; }
}


/* ============================================================
   8. THREE NAV CARDS  (Buy / Sell / Contact)
   ============================================================ */

.nav-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 64vh;
  min-height: 480px;
}

.nav-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  cursor: pointer;
}

.nav-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.75s var(--ease-out), filter 0.4s;
  filter: brightness(0.55);
}
.nav-card:hover .nav-card__bg {
  transform: scale(1.06);
  filter: brightness(0.45);
}

/* Background images — swap for real photos */
.nav-card__bg--buy     { background-image: url('Communities/alpharetta.jpeg'); }
.nav-card__bg--sell    { background-image: url('Communities/milton.jpeg'); background-position: center 30%; }
.nav-card__bg--contact { background-image: url('Communities/roswell.jpeg'); }

.nav-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,30,42,0.85) 0%, transparent 55%);
  transition: opacity 0.4s;
}
.nav-card:hover .nav-card__overlay { opacity: 0.75; }

/* Vertical accent line left edge */
.nav-card:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: rgba(255,255,255,0.12);
  z-index: 2;
}

.nav-card__body {
  position: relative;
  z-index: 3;
  padding: 0 44px 52px;
  width: 100%;
}

.nav-card__eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
  opacity: 0.8;
}

.nav-card__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

.nav-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 4px;
  transition: color 0.25s, border-color 0.25s, gap 0.25s;
}
.nav-card:hover .nav-card__cta {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: var(--space-4);
}
.nav-card__cta i { font-size: 9px; }



/* ── Private Listings tile — button acting as nav-card ──────── */
.nav-card--btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.nav-card--btn .nav-card__bg { transition: transform 0.75s var(--ease-out), filter 0.4s; }
.nav-card--btn:hover .nav-card__bg { transform: scale(1.06); filter: brightness(0.45); }
.nav-card--btn:hover .nav-card__overlay { opacity: 0.75; }
.nav-card--btn:hover .nav-card__cta {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: var(--space-4);
}
.nav-card--btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}

/* Private Listings tile background */
.nav-card__bg--private {
  background-image: url('Communities/johns-creek.jpeg');
  background-position: center 40%;
}

/* Gold eyebrow accent for Private tile */
.nav-card--btn .nav-card__eyebrow {
  color: var(--color-gold);
  opacity: 1;
}

/* ── Featured nav card — Private Listings emphasis ───────────── */
.nav-card--featured {
  z-index: 2;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.18);
}
.nav-card--featured .nav-card__overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.55)
  );
}

/* ── Post-hero intent row — clickable ────────────────────────── */
.post-hero-intent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 16px;
  text-align: center;
  margin: 48px 0 24px;
}
.post-hero-intent__item {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gray-400, #9A9896);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease;
}
.post-hero-intent__item:hover,
.post-hero-intent__item:focus-visible {
  color: var(--color-text-heading, #1F2A30);
}
.post-hero-intent__item:focus-visible {
  outline: 2px solid var(--color-gold, #B8965A);
  outline-offset: 3px;
}
.post-hero-intent__sep {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--color-gray-400, #9A9896);
  opacity: 0.5;
  pointer-events: none;
}

/* ── "Private Listings" nav button (desktop & mobile) ───────── */
.nav-link-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-base);
  text-decoration: none;
}
.nav-link-btn:hover,
.nav-link-btn:focus-visible {
  color: var(--color-gold);
  outline: none;
}
.nav-link-btn--private i {
  font-size: 8px;
  opacity: 0.6;
  margin-left: 1px;
}
.nav-link-btn--private:hover i { opacity: 1; }

/* Mobile variant */
.nav-link-btn--mobile {
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-white);
  width: 100%;
  padding: 4px 0;
}
.nav-link-btn--mobile i { font-size: 14px; }
.nav-link-btn--mobile:hover { color: var(--color-gold); }

/* ============================================================
   9. ABOUT / AGENT INTRODUCTION
   ============================================================ */

.about-split {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* photo slightly narrower — content leads */
  align-items: start;               /* top-align both columns */
}

/* Left: photo panel — sized by image, not by content column */
.about-split__photo {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 0;                       /* no artificial padding — image fills naturally */
}

.about-split__img {
  width: 100%;
  height: auto;                     /* natural aspect ratio — no fixed height */
  max-height: none;
  object-fit: cover;
  object-position: center top;      /* keep face in frame */
  display: block;
}

/* Placeholder when no photo loaded */
.about-split__placeholder {
  width: 100%;
  min-height: 400px;
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-heading);
  opacity: 0.2;
  font-size: 64px;
}

/* Right: text panel — drives the section height */
.about-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 64px 48px 48px;    /* tighter vertical, right-weighted for readability */
  background: var(--color-white);
}

/* Section-level override — About sits tighter than global lx-section rhythm */
.about-section.lx-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.about-split__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  display: block;
}

.about-split__h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
}
.about-split__h2 em {
  font-style: italic;
  color: var(--color-primary);
}

/* Jeni Hall name — upright Playfair, no italic, clearly legible */
.name-display {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

/* Prevents italic Playfair J from reading as T inside testimonial quotes */
.name-highlight {
  font-style: normal;
  font-weight: 500;
}

/* Credibility subtitle under name */
.about-split__subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

/* Inline credential strip */
.about-split__credentials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.about-cred-item {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-body);
  opacity: 0.6;
  letter-spacing: 0.03em;
}
.about-cred-dot {
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

.about-split__rule {
  width: 44px;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: var(--space-8);
  border: none;
}

.about-split__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--color-text-heading);
  line-height: 1.65;
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-6);
  margin-bottom: var(--space-8);
  opacity: 0.85;
}

.about-split__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}
.about-split__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-split__creds {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.about-split__cred {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  color: var(--color-text-heading);
  padding: 6px 14px;
}

.about-split__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.about-split__logo-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-background);
}
.about-split__logo-row img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.about-split__logo-divider {
  width: 1px;
  height: 32px;
  background: var(--color-background);
}

/* Stat badge on photo — contained within the photo column */
.about-split__badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 20px 24px;
  text-align: center;
  z-index: 2;
}
.about-split__badge-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  display: block;
}
.about-split__badge-lbl {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 6px;
  display: block;
}


/* ============================================================
   10. STATS / TRUST BAR
   ============================================================ */

.trust-band {
  background: var(--color-text-heading);
  padding: 72px var(--container-px);
}

.trust-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);  /* gap colour */
}

.trust-band__item {
  background: var(--color-text-heading);
  padding: 56px 40px;
  text-align: center;
}

.trust-band__number {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 68px);
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-5);
}

.trust-band__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  display: block;
  margin-bottom: var(--space-3);
}

.trust-band__desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.7;
}


/* ============================================================
   11. FEATURED AREAS  (Communities)
   ============================================================ */

.areas {
  padding: 128px var(--container-px);
  background: var(--color-white);
}

.areas__head {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 64px;
  gap: var(--space-8);
}

.areas__head-left { max-width: 480px; }

.areas__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-4);
}

.areas__h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}
.areas__h2 em { font-style: italic; color: var(--color-primary); }

.areas__view-all {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: opacity 0.2s, gap 0.2s;
  flex-shrink: 0;
}
.areas__view-all:hover { opacity: 0.7; gap: var(--space-4); }

/* 2×2 grid on desktop */
.areas__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 56vh);
  min-height: 800px;
  gap: 3px;
}

.area-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

.area-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.75);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.area-card:hover .area-card__bg {
  transform: scale(1.05);
  filter: brightness(0.88);
}

.area-card__bg--alpharetta {
  background-image: url('/images/communities/alpharetta-luxury.jpg');
  background-position: center 60%;
}
.area-card__bg--milton {
  background-image: url('/images/communities/milton-equestrian.jpg');
  background-position: center 35%;
  filter: brightness(0.88);
}
.area-card__bg--roswell {
  background-image: url('/images/communities/roswell-historic.jpg');
  background-position: center 50%;
  filter: brightness(0.88);
}
.area-card__bg--johns {
  background-image: url('/images/communities/johns-creek-golf.jpg');
  background-position: center 35%;
}

.area-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  transition: opacity 0.4s ease;
}
.area-card:hover .area-card__overlay { opacity: 0.75; }

.area-card__body {
  position: relative;
  z-index: 2;
  padding: 40px 44px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.area-card__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 41px);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.area-card__tag {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.06em;
}

.area-card__arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  transition: background 0.45s ease, border-color 0.45s ease,
              color 0.45s ease, transform 0.45s ease;
  flex-shrink: 0;
}
.area-card:hover .area-card__arrow {
  background: rgba(62, 98, 118, 0.55);
  border-color: rgba(62, 98, 118, 0.7);
  color: var(--color-white);
  transform: translateX(3px);
}


/* ============================================================
   12. FEATURED LISTINGS
   ============================================================ */

.listings-section {
  padding: 128px var(--container-px);
  background: var(--color-background);
}

.listings-section__head {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 64px;
  gap: var(--space-8);
}

.listings-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}
.listings-section__h2 em { font-style: italic; color: var(--color-primary); }

.listings-section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-4);
}

.listings-section__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-body);
  opacity: 0.52;
  margin-top: 8px;
  line-height: 1.6;
  max-width: 44ch;
}

/* The grid is JS-populated — these styles control the cards */
.listings-section__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* --- Featured listing tile luxury polish --- */
.listings-section__grid .lx-card,
.listings-section__grid .listing-card,
.listings-section__grid .featured-card {
  border: 1px solid rgba(27, 48, 64, 0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.045);
  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out);
}
.listings-section__grid .lx-card:hover,
.listings-section__grid .listing-card:hover,
.listings-section__grid .featured-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 42px rgba(0,0,0,0.10);
  border-color: rgba(184,150,90,0.26);
}
.listings-section__grid .lx-card__media,
.listings-section__grid .listing-card__image,
.listings-section__grid .featured-card__image {
  position: relative;
  overflow: hidden;
}
.listings-section__grid .lx-card__media::after,
.listings-section__grid .listing-card__image::after,
.listings-section__grid .featured-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.00) 42%);
  pointer-events: none;
}
.listings-section__grid .lx-card__media img,
.listings-section__grid .listing-card__image img,
.listings-section__grid .featured-card__image img {
  transition: transform var(--duration-slower) var(--ease-out);
}
.listings-section__grid .lx-card:hover .lx-card__media img,
.listings-section__grid .listing-card:hover .listing-card__image img,
.listings-section__grid .featured-card:hover .featured-card__image img {
  transform: scale(1.03);
}
.listings-section__grid .lx-card__badge,
.listings-section__grid .listing-card__badge,
.listings-section__grid .featured-card__badge {
  top: 16px;
  left: 16px;
  padding: 4px 10px;
  font-size: 8px;
  letter-spacing: 0.18em;
  background: rgba(184,150,90,0.92);
  color: #fff;
  backdrop-filter: blur(4px);
}
.listings-section__grid .lx-card__body,
.listings-section__grid .listing-card__body,
.listings-section__grid .featured-card__body {
  padding: 24px 24px 26px;
}
.listings-section__grid .lx-card__title,
.listings-section__grid .listing-card__price,
.listings-section__grid .featured-card__price {
  font-family: var(--font-display);
  font-size: clamp(34px, 2.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--color-text-heading);
}
.listings-section__grid .listing-card__address,
.listings-section__grid .featured-card__address {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.listings-section__grid .lx-card__sub,
.listings-section__grid .listing-card__city,
.listings-section__grid .featured-card__city {
  font-size: 12px;
  color: var(--color-text-body);
  opacity: 0.48;
  margin-bottom: 18px;
}
.listings-section__grid .lx-card__meta,
.listings-section__grid .listing-card__meta,
.listings-section__grid .featured-card__meta,
.listings-section__grid .listing-card__stats,
.listings-section__grid .featured-card__stats {
  padding-top: 14px;
  margin-top: 18px;
  border-top: 1px solid rgba(27,48,64,0.07);
  gap: 18px;
  font-size: 11px;
  color: var(--color-text-body);
  opacity: 0.58;
}
.listings-section__grid .listing-card__meta i,
.listings-section__grid .featured-card__meta i,
.listings-section__grid .listing-card__stats i,
.listings-section__grid .featured-card__stats i {
  opacity: 0.55;
}
@media (max-width: 900px) {
  .listings-section__grid .lx-card__body,
  .listings-section__grid .listing-card__body,
  .listings-section__grid .featured-card__body {
    padding: 20px 20px 22px;
  }
  .listings-section__grid .lx-card__title,
  .listings-section__grid .listing-card__price,
  .listings-section__grid .featured-card__price {
    font-size: 32px;
  }
}

/* Individual listing card */
.lx-listing-card {
  background: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow 0.4s ease;
  cursor: pointer;
  position: relative;
}
.lx-listing-card:hover {
  box-shadow: 0 20px 56px rgba(31, 42, 48, 0.13);
  z-index: 1;
}

.lx-listing-card__img {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: var(--color-text-heading);
}
.lx-listing-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.lx-listing-card:hover .lx-listing-card__img img { transform: scale(1.04); }

.lx-listing-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.12);
  font-size: 48px;
  background: linear-gradient(135deg, var(--color-text-heading), var(--color-primary));
}

.lx-listing-card__status {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 6px 14px;
  color: var(--color-white);
}

.lx-listing-card__body {
  padding: 32px 32px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 1. Price — dominant, serif, first visual anchor */
.lx-listing-card__price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--space-4);
}

/* 2. Address — clear but subordinate to price */
.lx-listing-card__address {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}

/* 3. City — quietest element, recedes intentionally */
.lx-listing-card__city {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-body);
  opacity: 0.42;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
}

.lx-listing-card__meta {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-background);
  margin-top: auto;
}

.lx-listing-card__meta-item {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-body);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: 0.03em;
}
.lx-listing-card__meta-item i {
  color: var(--color-accent);
  font-size: 10px;
}

.listings-section__cta {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
  padding-top: 72px;
}

/* MLS attribution — shown only on supplemental (non-Jeni) listing cards */
.lx-listing-card__attribution {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--color-text-body);
  opacity: 0.38;
  letter-spacing: 0.04em;
  padding-top: var(--space-3);
  line-height: 1.5;
}

/* ── Luxury Featured Card System (.lx-lux-card) ──────────────────────────────
   Image-first layout with gradient overlay + CTA on hover.
   Replaces the old .lx-listing-card body-below design.
   Grid uses .listings-section__grid (unchanged) for 3-col layout.
   ───────────────────────────────────────────────────────────────────────── */

.lx-lux-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(27, 48, 64, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  cursor: pointer;
}
.lx-lux-card:hover {
  box-shadow: 0 12px 48px rgba(27, 48, 64, 0.16);
  transform: translateY(-2px);
  z-index: 1;
}

/* ── Full-bleed image area ── */
.lx-lux-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-dark);
  flex-shrink: 0;
}
.lx-lux-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.lx-lux-card:hover .lx-lux-card__media img {
  transform: scale(1.04);
}

.lx-lux-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.12);
  font-size: 52px;
  background: linear-gradient(150deg, var(--c-bg-dark) 0%, var(--color-navy-mid) 100%);
}

/* ── Status badge (top-left) ── */
.lx-lux-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: 3px;
}

/* ── Hover overlay with CTA ── */
.lx-lux-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(27, 48, 64, 0) 0%,
    rgba(27, 48, 64, 0.72) 100%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lx-lux-card:hover .lx-lux-card__overlay {
  opacity: 1;
}

.lx-lux-card__cta {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 10px 22px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.lx-lux-card:hover .lx-lux-card__cta {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.85);
}

/* ── Info panel below image ── */
.lx-lux-card__info {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lx-lux-card__price {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: var(--c-bg-dark);
  letter-spacing: -0.025em;
  line-height: 1;
}

.lx-lux-card__location {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.lx-lux-card__specs {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}

.lx-lux-card__spec {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--c-text-muted);
  opacity: 0.6;
  letter-spacing: 0.02em;
}
.lx-lux-card__spec i {
  color: var(--c-accent);
  font-size: 9px;
}

/* ── Card quick-action buttons (lead trigger row) ── */
.lx-lux-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.lx-lux-card__action-btn {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: var(--c-bg-dark);
  color: var(--color-white);
  border-radius: 2px;
  line-height: 1;
}
.lx-lux-card__action-btn:hover {
  background: var(--c-accent);
}
.lx-lux-card__action-btn--ghost {
  background: transparent;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border-mid);
}
.lx-lux-card__action-btn--ghost:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-bg-dark);
  color: var(--c-bg-dark);
}

/* ── Grid override for lux cards: looser gap, better breathing room ── */
.listings-section__grid:has(.lx-lux-card) {
  gap: 24px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .listings-section__grid:has(.lx-lux-card) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .listings-section__grid:has(.lx-lux-card) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lx-lux-card__info { padding: 20px 20px 24px; }
}

/* IDX compliance footer beneath the listings grid */
.listings-idx-compliance {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-body);
  opacity: 0.38;
  letter-spacing: 0.03em;
  line-height: 1.7;
  margin-top: var(--space-5);
}
.listings-idx-compliance a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
}


/* ============================================================
   13. TESTIMONIALS
   ============================================================ */

.testimonials-section {
  padding: 160px var(--container-px);
  background: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative large quote mark */
.testimonials-section::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 320px;
  line-height: 0.7;
  color: var(--color-background);
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.testimonials-section__inner {
  max-width: 860px;
  margin-inline: auto;
  position: relative;
}

.testimonials-section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-8);
}

/* Google rating credibility label */
.testimonials-rating-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.testimonials-rating-stars {
  color: var(--color-google-star);
  font-size: 14px;
  letter-spacing: 2px;
}
.testimonials-rating-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-heading);
  opacity: 0.5;
}

/* Single large featured quote */
.testimonial-featured {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: 1.72;
  margin-bottom: var(--space-6);
  max-width: 800px;
  margin-inline: auto;
}

.testimonial-featured__author {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.75;
  display: block;
  margin-bottom: var(--space-12);
}

/* Three-up mini testimonials below */
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-background);
  margin-top: 72px;
  text-align: left;
}

.testimonial-cell {
  background: var(--color-white);
  padding: 48px 40px;
}

.testimonial-cell__stars {
  color: var(--color-accent);
  font-size: 13px;
  letter-spacing: 3px;
  display: block;
  margin-bottom: var(--space-6);
}

.testimonial-cell__text {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 17px);
  font-style: italic;
  color: var(--color-text-heading);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.testimonial-cell__author {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.75;
}

.testimonials-section__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: 64px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-body);
  opacity: 0.6;
}
.testimonials-section__footer .stars {
  color: var(--color-google-star);
  letter-spacing: 2px;
}
.testimonials-section__footer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.testimonials-section__footer a:hover { opacity: 0.7; }


/* ============================================================
   14. SELLER CTA BAND
   ============================================================ */

.seller-band {
  padding: 160px var(--container-px);
  background: var(--color-text-heading);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow */
.seller-band::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(62,98,118,0.25) 0%, transparent 60%);
  pointer-events: none;
}

.seller-band__inner {
  max-width: 680px;
  margin-inline: auto;
  position: relative;
}

.seller-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-6);
}

.seller-band__h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.seller-band__h2 em {
  font-style: italic;
  color: var(--color-accent);
}

.seller-band__sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 16px);
  color: rgba(255,255,255,0.52);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-12);
}

.seller-band__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   15. CONTACT / FINAL CTA
   ============================================================ */

.contact-section {
  padding: 96px var(--container-px);    /* reduced from 120px */
  background: var(--color-white);
  scroll-margin-top: 88px; /* matches fixed #mainNav desktop height */
}

.contact-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;                            /* reduced from 96px */
  align-items: start;
}

.contact-section__left {}

.contact-section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-5);
}

.contact-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}
.contact-section__h2 em { font-style: italic; color: var(--color-primary); }

.contact-section__rule {
  width: 44px;
  height: 1px;
  background: var(--color-accent);
  border: none;
  margin-bottom: var(--space-8);
}

.contact-section__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);        /* reduced from space-10 — trustline follows */
}

/* Trust microcopy line */
.contact-section__trustline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  margin: 12px 0 20px;
}

.contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-8);        /* reduced from space-10 */
}

.contact-details__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-background);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.contact-details__item i {
  color: var(--color-primary);
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.contact-details__item a {
  color: var(--color-text-heading);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-details__item a:hover { color: var(--color-primary); }

/* Contact form */
.contact-form-new { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-form-new input,
.contact-form-new select,
.contact-form-new textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-heading);
  background: var(--color-white);
  border: 1px solid var(--color-background);
  border-bottom: 1px solid var(--color-accent);
  outline: none;
  appearance: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.contact-form-new input:focus,
.contact-form-new select:focus,
.contact-form-new textarea:focus {
  border-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.contact-form-new textarea { min-height: 130px; resize: vertical; }
.contact-form-new select { background-image: none; color: var(--color-text-body); }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}


/* ============================================================
   16. NEWSLETTER
   ============================================================ */

.newsletter-band {
  padding: 80px var(--container-px);
  background: var(--color-background);
  border-top: 1px solid rgba(62,98,118,0.1);
}

.newsletter-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.newsletter-band__copy {}

.newsletter-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-4);
}

.newsletter-band__h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.newsletter-band__h2 em { font-style: italic; color: var(--color-primary); }

.newsletter-band__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  margin-top: var(--space-4);
}

.newsletter-band__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.newsletter-band__row {
  display: flex;
  gap: var(--space-3);
}

.newsletter-band__form input {
  flex: 1;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-heading);
  background: var(--color-white);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--color-accent);
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.newsletter-band__form input:focus {
  border-color: var(--color-primary);
}


/* ============================================================
   17. FOOTER
   ============================================================ */

/* Thin accent divider above footer */
.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.35;
}

/* Geographic authority line in footer contact column */
.footer-geo-authority {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

footer {
  background: var(--color-text-heading);
  color: rgba(255,255,255,0.55);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 96px var(--container-px) 80px;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 72px;
  align-items: start;
}

/* Logo display utilities
   logo-dark  → original colours, used on light backgrounds (nav, about)
   logo-light → inverted to white, used on dark backgrounds (footer)       */
.logo-dark {
  /* No filter — display the transparent PNG in its original brand colours */
  opacity: 1;
}

.logo-light {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: var(--space-5);
}

.footer-logo__img {
  /* Legacy selector kept for safety — now superseded by .logo-light */
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-5);
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.75;
  margin-top: var(--space-2);
}

.footer-nav h5 {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-nav a {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--color-accent); }

.footer-contact h5 {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.footer-contact p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 2;
  color: rgba(255,255,255,0.45);
}
.footer-contact a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact a:hover { color: var(--color-accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 28px var(--container-px);
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-legal {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  line-height: 1.7;
  flex: 1;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
  align-items: center;
}

/* Luxury minimal social icons — no brand colors, refined border treatment */
.footer-social-icon {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  text-decoration: none;
  transition:
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
  border-radius: 0;               /* sharp corners — editorial */
}
.footer-social-icon:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(217, 199, 182, 0.08);
}


/* ============================================================
   18. ANIMATIONS & REVEALS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dedicated hero animation — softer rise, longer travel for cinematic feel */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Element-level reveal (cards, individual items) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Section-level reveal — whole sections fade up as one unit */
.section-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ============================================================
   19. BUTTON OVERRIDES FOR HOMEPAGE
   (These complement §5a — matching the new dark-bg sections)
   ============================================================ */

/* Primary solid — used on light bg */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 15px 36px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-solid:hover {
  background: var(--color-text-heading);
  border-color: var(--color-text-heading);
}

/* Ghost — used on dark bg (hero, seller band) */
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 15px 36px;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hero-scoped secondary CTA softening */
.hero .btn-ghost-light {
  opacity: 0.88;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02);
}
.hero .btn-ghost-light:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.80);
}
.btn-ghost-light:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

/* Outline — used on light bg */
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 15px 36px;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-outline-dark:hover {
  background: var(--color-primary);
  color: var(--color-white);
}


/* ============================================================
   20. MOBILE  (≤ 900px)
   ============================================================ */

@media (max-width: 900px) {

  /* Prevent overflow */
  html, body { overflow-x: hidden; }

  /* NAV */
  #mainNav { height: 68px; padding: 0 var(--space-4); }
  .nav-links { display: none; }
  .nav-right  { display: none; }
  #navToggle  { display: flex; }
  .nav-logo-jeni    { height: 40px; }
  .nav-logo-divider { height: 40px; }
  .nav-logo-bhhs    { height: 40px; max-width: 90px; }

  /* HERO */
  
  .hero-inner { padding: 0 24px 72px; }
  .hero-title { font-size: clamp(40px, 10vw, 60px); }
  .hero-scroll { display: none; }

  /* NAV CARDS */
  .nav-cards { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .nav-card  { min-height: 44vh; }
  .nav-card:not(:first-child)::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .nav-card__body { padding: 0 28px 40px; }

  /* ABOUT */
  .about-split { grid-template-columns: 1fr; }
  .about-split__photo { min-height: 0; height: 72vw; max-height: 480px; padding: 0; }
  .about-split__content { padding: 56px 24px; }
  .about-split__badge { display: none; }

  /* TRUST BAND */
  .trust-band { padding: 56px 24px; }
  .trust-band__inner { grid-template-columns: 1fr 1fr; }

  /* AREAS */
  .areas { padding: 80px 24px; }
  .areas__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .areas__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 50vw);
    min-height: 0;
  }

  /* LISTINGS */
  .listings-section { padding: 80px 24px; }
  .listings-section__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .listings-section__grid { grid-template-columns: 1fr; gap: 3px; }

  /* TESTIMONIALS */
  .testimonials-section { padding: 88px 24px; }
  .testimonials-section::before { font-size: 180px; }
  .testimonial-row { grid-template-columns: 1fr; }

  /* SELLER BAND */
  .seller-band { padding: 100px 24px; }
  .seller-band__actions { flex-direction: column; align-items: center; }

  /* CONTACT */
  .contact-section { padding: 80px 24px; }
  .contact-section__inner { grid-template-columns: 1fr; gap: 56px; }
  .form-row-2 { grid-template-columns: 1fr; }

  /* NEWSLETTER */
  .newsletter-band { padding: 64px 24px; }
  .newsletter-band__inner { grid-template-columns: 1fr; gap: 40px; }
  .newsletter-band__row { flex-direction: column; }

  /* FOOTER */
  .footer-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 40px; }
  .footer-bottom { padding: 24px; flex-direction: column; gap: 20px; text-align: center; }
}


/* ============================================================
   FEATURED LISTING CARDS — .jh-fc
   Built by renderFeaturedGrid() in index.html / JHRender in listings.js.
   Premium luxury polish pass.
   ============================================================ */

/* ── Card container ──────────────────────────────────────────── */
.jh-fc {
  background: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  /* Resting: almost imperceptible — cards breathe */
  box-shadow: 0 1px 4px rgba(31,42,48,0.05), 0 0 1px rgba(31,42,48,0.03);
  transition:
    box-shadow var(--duration-slow) var(--ease-out),
    transform  var(--duration-slow) var(--ease-out);
}
.jh-fc:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
  z-index: 1;
}

/* ── Image area ──────────────────────────────────────────────── */
.jh-fc__img {
  aspect-ratio: 16/11;
  position: relative;
  overflow: hidden;
  background: var(--color-text-heading);
  flex-shrink: 0;
}
/* Gradient overlay: bottom-up depth */
.jh-fc__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.06) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}
.jh-fc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slower) var(--ease-out);
}
.jh-fc:hover .jh-fc__photo { transform: scale(1.025); }

/* Placeholder */
.jh-fc__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(255,255,255,0.08);
  background: linear-gradient(150deg, var(--color-text-heading) 0%, #0d1e2a 100%);
}

/* ── Status badge ────────────────────────────────────────────── */
.jh-fc__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  color: #fff;
  opacity: 0.95;
  border-radius: 1px;
  z-index: 3;
}

/* ── Card body ───────────────────────────────────────────────── */
.jh-fc__body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Price — visual anchor, first thing the eye reads */
.jh-fc__price {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.1vw, 28px);
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Address */
.jh-fc__address {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(0,0,0,0.7);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin-bottom: 3px;
}

/* City / community */
.jh-fc__community {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 14px;
}

/* Stat row */
.jh-fc__meta {
  display: flex;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 14px;
  flex-wrap: wrap;
}

.jh-fc__meta-item {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.01em;
  text-transform: none;
}
.jh-fc__meta-item i {
  color: var(--color-accent);
  font-size: 8px;
  opacity: 0.9;
}

/* Attribution — refined, legible, integrated into luxury design */
.jh-fc__attr {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text-body);
  opacity: 0.55;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(31,42,48,0.06);
  line-height: 1.55;
}
/* Jeni's own listing — warmer tone, slightly more prominent */
.jh-fc__attr--jeni {
  color: var(--color-primary);
  opacity: 0.72;
  font-weight: 500;
}
.jh-fc__attr--jeni i {
  font-size: 9px;
  margin-right: 3px;
  color: var(--color-accent);
  opacity: 1;
}
.jh-fc__attr-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 9px;
  opacity: 0.7;
  margin-right: 3px;
}

/* ── Jeni Hall listing badge — corner of image ── */
.jh-fc__jeni-tag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: #fff;
  background: rgba(62,98,118,0.88); /* --color-primary at 88% */
  backdrop-filter: blur(6px);
  border-radius: 1px;
  z-index: 3;
  pointer-events: none;
}

/* Subtle left-border accent on Jeni's own cards */
.jh-fc--jeni {
  border-left: 2px solid rgba(62,98,118,0.22);
}

/* ── Section conversion block ────────────────────────────────── */
.listings-section__head-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.listings-section__view-all {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
  opacity: 0.75;
  white-space: nowrap;
}
.listings-section__view-all:hover { opacity: 1; gap: 12px; }
.listings-section__view-all i { font-size: 10px; }

.listings-section__convert {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: 72px;
  border-top: 1px solid rgba(31,42,48,0.09);
  padding-top: 56px;
}
.listings-section__convert-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}
.listings-section__convert-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
  margin-bottom: 8px;
}
.listings-section__convert-copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-body);
  opacity: 0.7;
  max-width: 52ch;
  margin: 0;
}
.listings-section__convert-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 780px) {
  .listings-section__convert-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .listings-section__convert-actions {
    justify-content: flex-start;
  }
  .listings-section__head-actions {
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OUR LISTINGS SECTION — .ol-section / .ol-card
   Dedicated design system for the homepage "Our Listings" showcase.
   Image-first, editorial, quiet luxury. Separate from .jh-fc so changes
   to the general card system don't affect this section and vice versa.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────────────────── */
.ol-section {
  background: var(--color-off-white);   /* #F8F7F5 — warm off-white, softer than grey */
  padding: 100px var(--container-px) 80px;
}
.ol-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ── Section head ───────────────────────────────────────────────────────── */
.ol-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}
.ol-section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
  margin-bottom: 12px;
}
.ol-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}
.ol-section__h2 em { font-style: italic; color: var(--color-primary); }
.ol-section__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-body);
  opacity: 0.52;
  line-height: 1.65;
  max-width: 48ch;
  margin: 0;
}
.ol-section__view-all {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0.68;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: opacity var(--duration-base) var(--ease-out),
              gap     var(--duration-base) var(--ease-out);
}
.ol-section__view-all:hover { opacity: 1; gap: 13px; }
.ol-section__view-all i { font-size: 9px; }

/* ── Card grid ──────────────────────────────────────────────────────────── */
.ol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;             /* breathing room between cards */
  margin-bottom: 0;
}
.ol-grid__loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  font-size: 26px;
  color: var(--color-accent);
}
.ol-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
}
.ol-grid__empty-h {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text-heading);
  margin-bottom: 10px;
}
.ol-grid__empty-p {
  font-size: 14px;
  color: var(--color-text-body);
  opacity: 0.55;
  line-height: 1.7;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.ol-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  /* Resting: near-zero shadow — cards sit flush with warm bg */
  box-shadow: 0 1px 3px rgba(27,48,64,0.06);
  transition:
    transform  var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}
.ol-card:hover {
  transform: translateY(-5px) scale(1.005);
  box-shadow: 0 20px 52px rgba(0,0,0,0.10);
  z-index: 1;
}

/* Jeni's own listing — subtle left-border accent */
.ol-card--jeni {
  border-left: 2px solid rgba(62,98,118,0.18);
}

/* ── Card image zone ────────────────────────────────────────────────────── */
.ol-card__media {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--color-text-heading);
  flex-shrink: 0;
}
/* Cinematic bottom-fade overlay */
.ol-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.26) 0%,
    rgba(0,0,0,0.06) 42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 1;
}
.ol-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 680ms var(--ease-out);
}
.ol-card:hover .ol-card__photo { transform: scale(1.03); }
.ol-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,0.07);
  background: linear-gradient(150deg, var(--color-text-heading) 0%, #0d1e2a 100%);
}

/* Chip strip — top-left of image */
.ol-card__chips {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

/* Status chip */
.ol-card__status-chip {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 9px;
  color: #fff;
  opacity: 0.95;
  border-radius: 1px;
  display: inline-block;
}

/* Jeni badge chip — only rendered for her listings */
.ol-card__jeni-badge {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  color: #fff;
  background: rgba(62,98,118,0.85);   /* --color-primary translucent */
  backdrop-filter: blur(4px);
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ol-card__jeni-badge i { font-size: 7px; opacity: 0.9; }

/* ── Card body ──────────────────────────────────────────────────────────── */
.ol-card__body {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  flex: 1;
}

/* Price — visual anchor */
.ol-card__price {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 8px;
}

/* Address */
.ol-card__address {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-heading);
  opacity: 0.82;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0 0 3px;
}

/* Location / community */
.ol-card__location {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-body);
  opacity: 0.45;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

/* Property stats row */
.ol-card__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(27,48,64,0.07);
  margin-top: auto;
  margin-bottom: 12px;
}
.ol-card__stat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-body);
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}
.ol-card__stat i {
  font-size: 9px;
  color: var(--color-accent);
  opacity: 1;
}

/* Attribution — refined, legible, non-intrusive */
.ol-card__attr {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-body);
  opacity: 0.5;
  line-height: 1.6;
  margin-top: 10px;
}
.ol-card__attr-row {
  display: block;
}
.ol-card__attr-row b {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 3px;
}
/* Jeni attribution — slightly warmer, slightly more visible */
.ol-card__attr--jeni {
  color: var(--color-primary);
  opacity: 0.65;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.ol-card__attr--jeni i { font-size: 9px; margin-top: 2px; flex-shrink: 0; }

/* "View Details" affordance — visible on hover */
.ol-card__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0;
  margin-top: 14px;
  transition: opacity var(--duration-base) var(--ease-out),
              gap    var(--duration-base) var(--ease-out);
}
.ol-card__cta i { font-size: 9px; }
.ol-card:hover .ol-card__cta { opacity: 0.7; gap: 9px; }

/* Secondary soft action — "Ask About This Home" */
.ol-card__ask {
  display: none;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--c-border-mid);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-link);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 2px;
  margin-top: 14px;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  position: relative;
  z-index: 2;                             /* sits above card <a> */
}
.ol-card:hover .ol-card__ask { display: flex; }
.ol-card__ask:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
@media (max-width: 560px) {
  .ol-card__ask { display: flex; }       /* always visible on touch */
}

/* ── Reveal animation (staggered via JS transitionDelay) ────────────────── */
.ol-card-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.ol-card-reveal--visible {
  opacity: 1;
  transform: none;
}

/* ── Private access note — soft cue below grid ──────────────────────────── */
.ol-access-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-body);
  opacity: 0.48;
  text-align: center;
  margin-top: 32px;
  line-height: 1.6;
}
.ol-access-note__link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ol-access-note__link:hover { opacity: 0.7; }

/* ── Two-panel CTA strip ────────────────────────────────────────────────── */
.ol-cta-strip {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  margin-top: 48px;
  border: 1px solid rgba(27,48,64,0.09);
  background: #fff;
}
.ol-cta-strip__divider {
  background: rgba(27,48,64,0.09);
  align-self: stretch;
}
.ol-cta-panel {
  padding: 44px 48px;
}
.ol-cta-panel__eyebrow {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.5;
  margin: 0 0 10px;
  display: block;
}
.ol-cta-panel__h {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.ol-cta-panel__copy {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-body);
  opacity: 0.6;
  line-height: 1.7;
  max-width: 44ch;
  margin: 0 0 24px;
}
.ol-cta-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--duration-base) var(--ease-out),
              color     var(--duration-base) var(--ease-out);
}
.ol-cta-panel__btn:hover {
  background: var(--color-primary);
  color: #fff;
}
/* Tour button — filled by default */
.ol-cta-panel__btn--tour {
  background: var(--color-primary);
  color: #fff;
}
.ol-cta-panel__btn--tour:hover {
  background: var(--color-navy-mid, #2E4A5C);
  border-color: var(--color-navy-mid, #2E4A5C);
}

/* ── Compliance line ────────────────────────────────────────────────────── */
.ol-compliance {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-body);
  opacity: 0.3;
  text-align: center;
  margin-top: 36px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.ol-compliance a { color: inherit; text-decoration: underline; }
.ol-compliance a:hover { opacity: 0.6; }

/* ── Smart session banner ───────────────────────────────────────────────── */
.ol-smart-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--color-off-white, #F8F7F5);
  border: 1px solid rgba(62,98,118,0.18);
  border-left: 3px solid var(--color-primary);
  padding: 16px 20px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.ol-smart-banner--visible {
  opacity: 1;
  transform: none;
}
.ol-smart-banner--hiding {
  opacity: 0;
  transform: translateY(-4px);
}
.ol-smart-banner__text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-body);
  flex: 1;
  min-width: 200px;
}
.ol-smart-banner__cta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: none;
  border: 1.5px solid var(--color-primary);
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--duration-base) var(--ease-out),
              color     var(--duration-base) var(--ease-out);
  white-space: nowrap;
}
.ol-smart-banner__cta:hover {
  background: var(--color-primary);
  color: #fff;
}
.ol-smart-banner__close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-body);
  opacity: 0.35;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: opacity var(--duration-base) var(--ease-out);
  margin-left: auto;
}
.ol-smart-banner__close:hover { opacity: 0.7; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ol-grid { grid-template-columns: repeat(2, 1fr); }
  .ol-section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ol-section__view-all { align-self: flex-start; }
  .ol-cta-strip { grid-template-columns: 1fr; }
  .ol-cta-strip__divider { width: auto; height: 1px; }
  .ol-cta-panel { padding: 32px 32px; }
}
@media (max-width: 560px) {
  .ol-grid { grid-template-columns: 1fr; }
  .ol-section { padding: 72px 24px 60px; }
  .ol-card__price { font-size: 22px; }
  .ol-cta-panel { padding: 28px 24px; }
}


/* Loading / empty states for featured grid */
.jh-listings-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
  color: var(--color-text-body);
  opacity: 0.4;
}
.jh-listings-loading__spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(62,98,118,0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: jhFcSpin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes jhFcSpin { to { transform: rotate(360deg); } }
.jh-listings-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
}
.jh-listings-empty i {
  font-size: 36px;
  color: var(--color-accent);
  opacity: 0.35;
  display: block;
  margin-bottom: 18px;
}
.jh-listings-empty p {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text-heading);
  margin-bottom: 20px;
}
.jh-listings-empty a {
  display: inline-block;
  padding: 13px 32px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.jh-listings-empty a:hover { background: var(--color-text-heading); }

/* ── Mobile responsive ── */
@media (max-width: 900px) {
  .listings-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .listings-section__grid { grid-template-columns: 1fr; }
}

/* ── BHHS Compliance — footer legal block ── */
.footer-agent-identity {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.8;
  color: rgba(255,255,255,0.38);
  margin-top: 16px;
}
.footer-legal-block {
  max-width: 900px;
  margin: 24px auto 0;
  text-align: center;
}
.footer-disclaimer {
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body);
}

/* ── iHomefinder Quick Search Widget — hero section ── */
.hero-ihf-search {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   POPULAR SEARCHES SECTION — .pop-search
   Inserted between cred-strip and .nav-cards
   ============================================================ */

.pop-search {
  background: var(--color-off-white, #F8F7F5);
  padding: 88px var(--container-px, 48px);
  border-bottom: 1px solid var(--c-border, #EFEFED);
}

.pop-search__inner {
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
}

.pop-search__head {
  text-align: center;
  margin-bottom: 56px;
}

.pop-search__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary, #3E6276);
  margin-bottom: 16px;
}

.pop-search__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--color-text-heading, #1F2A30);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.pop-search__h2 em {
  font-style: italic;
  color: var(--color-primary, #3E6276);
}

.pop-search__sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-muted, #4A4845);
  max-width: 520px;
  margin-inline: auto;
}

/* 3-col grid → 2-col → 1-col */
.pop-search__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.pop-search__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-white, #fff);
  padding: 28px 32px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.pop-search__card:hover {
  border-color: var(--color-primary, #3E6276);
  box-shadow: 0 8px 32px rgba(62, 98, 118, 0.10);
  transform: translateY(-2px);
  z-index: 1;
}

.pop-search__card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pop-search__card-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading, #1F2A30);
  letter-spacing: 0.01em;
}

.pop-search__card-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--c-text-subtle, #9A9896);
  letter-spacing: 0.02em;
}

.pop-search__card-arrow {
  font-size: 13px;
  color: var(--color-primary, #3E6276);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.pop-search__card:hover .pop-search__card-arrow {
  transform: translateX(4px);
}

@media (max-width: 860px) {
  .pop-search { padding: 64px 24px; }
  .pop-search__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .pop-search__grid { grid-template-columns: 1fr; }
  .pop-search__head { margin-bottom: 36px; }
}

/* ── Recently Sold homepage section ── */
.recently-sold {
  background: var(--color-background, #E3E8ED);
  padding: 96px var(--container-px, 48px);
}
.recently-sold__inner {
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
}
.recently-sold__head {
  margin-bottom: 56px;
}
.recently-sold__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-body, #4A4845);
  margin-top: 12px;
  opacity: 0.75;
}
@media (max-width: 900px) {
  .recently-sold { padding: 64px 24px; }
}

/* ── Seller Conversion Section ── */
.seller-conversion {
  background: var(--color-text-heading, #1F2A30);
  padding: 112px var(--container-px, 48px);
  text-align: center;
}
.seller-conversion__inner {
  max-width: 680px;
  margin-inline: auto;
}
.seller-conversion__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent, #D9C7B6);
  margin-bottom: 20px;
}
.seller-conversion__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 400;
  color: var(--color-white, #fff);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.seller-conversion__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 40px;
}
.seller-conversion__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 860px) {
  .seller-conversion { padding: 80px 24px; }
}

/* ── SEO intro block (index.html) ─────────────────────────────────────────── */
.seo-intro { background: var(--color-off-white,#F8F7F5); padding: 28px 48px; border-bottom: 1px solid var(--color-gray-100,#EFEFED); }
.seo-intro__inner { max-width: 1200px; margin-inline: auto; }
.seo-intro__text { font-family: var(--font-body,'Inter',sans-serif); font-size: 14px; line-height: 1.85; color: var(--color-gray-700,#4A4845); margin: 0 0 14px; }
.seo-intro__links { font-family: var(--font-body,'Inter',sans-serif); font-size: 12px; line-height: 1.7; color: var(--color-gray-400,#9A9896); margin: 0; }
.seo-intro__links a { color: var(--color-primary,#3E6276); text-decoration: underline; text-underline-offset: 3px; margin: 0 4px; }
.seo-intro__heading { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-heading); margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   WHY JENI HALL — value pillars
   ══════════════════════════════════════════════════════════════════════════ */
.why-jeni {
  background: var(--color-off-white);
  padding: var(--space-32) var(--space-12);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.why-jeni__inner {
  max-width: 1200px;
  margin-inline: auto;
}
.why-jeni__head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto var(--space-20);
}
.why-jeni__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.why-jeni__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
}
.why-jeni__h2 em {
  font-style: italic;
  color: var(--color-gold);
}
.why-jeni__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--c-text-muted);
  max-width: 660px;
  margin-inline: auto;
}
.why-jeni__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}
.why-jeni__card {
  background: var(--color-white);
  border: 1px solid var(--c-border);
  padding: var(--space-10) var(--space-8);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.why-jeni__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.why-jeni__card-icon {
  width: 44px;
  height: 44px;
  background: var(--color-gold-pale);
  border: 1px solid rgba(184,150,90,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 16px;
  margin-bottom: var(--space-6);
}
.why-jeni__card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}
.why-jeni__card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-muted);
}
.why-jeni__cta-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURED PROPERTIES
   ══════════════════════════════════════════════════════════════════════════ */
.fp-section {
  background: var(--color-white);
  padding: var(--space-32) var(--space-12);
}
.fp-section__inner {
  max-width: 1200px;
  margin-inline: auto;
}
.fp-section__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-20);
}
.fp-section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.fp-section__h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.fp-section__h2 em {
  font-style: italic;
  color: var(--color-gold);
}
.fp-section__sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--c-text-muted);
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.fp-card {
  background: var(--color-white);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.fp-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.fp-card__media {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.fp-card__media-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.fp-card:hover .fp-card__media-bg {
  transform: scale(1.04);
}
/* Elegant gradient placeholders — swap for real images when available */
.fp-card__media-bg--1 {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 50%, var(--color-navy-pale) 100%);
  background-image: url('/images/communities/alpharetta-luxury.jpg'),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.fp-card__media-bg--2 {
  background: linear-gradient(135deg, #1a2a1e 0%, #2d4a35 50%, #4a7055 100%);
  background-image: url('/images/communities/milton-equestrian.jpg'),
    linear-gradient(135deg, #1a2a1e 0%, #2d4a35 100%);
}
.fp-card__media-bg--3 {
  background: linear-gradient(135deg, #2a1a10 0%, #4a3020 50%, #7a5040 100%);
  background-image: url('/images/communities/johns-creek.jpg'),
    linear-gradient(135deg, #2a1a10 0%, #4a3020 100%);
}
.fp-card__label {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-gold);
  padding: 5px 12px;
}
.fp-card__body {
  padding: var(--space-8) var(--space-8) var(--space-10);
}
.fp-card__location {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-text-subtle);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fp-card__location i { color: var(--color-gold); font-size: 10px; }
.fp-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.fp-card__meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--c-text-subtle);
  margin-bottom: var(--space-6);
  letter-spacing: 0.04em;
}
.fp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-navy-light);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-navy-pale);
  padding: 0 0 3px;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.fp-card__cta:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.fp-section__cta-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE TESTIMONIALS — premium 3-card (distinct from #7 existing section)
   ══════════════════════════════════════════════════════════════════════════ */
.hp-testimonials {
  background: var(--color-navy);
  padding: var(--space-32) var(--space-12);
}
.hp-testimonials__inner {
  max-width: 1200px;
  margin-inline: auto;
}
.hp-testimonials__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-16);
}
.hp-testimonials__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.hp-testimonials__h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.hp-testimonials__h2 em {
  font-style: italic;
  color: var(--color-gold);
}
.hp-testimonials__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: rgba(255,255,255,0.60);
}
.hp-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.hp-test-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  padding: var(--space-10) var(--space-10);
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  margin: 0;
}
.hp-test-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(184,150,90,0.35);
}
.hp-test-card__stars {
  display: block;
  color: var(--color-gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: var(--space-6);
}
.hp-test-card__quote {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.90);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}
.hp-test-card__author {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.hp-testimonials__trust-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — new homepage sections
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .why-jeni__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .why-jeni,
  .fp-section,
  .hp-testimonials      { padding: var(--space-20) var(--space-6); }
  .why-jeni__grid       { grid-template-columns: repeat(2, 1fr); }
  .fp-grid              { grid-template-columns: repeat(2, 1fr); }
  .hp-test-grid         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-jeni__grid       { grid-template-columns: 1fr; }
  .fp-grid              { grid-template-columns: 1fr; }
  .hp-test-grid         { grid-template-columns: 1fr; }
  .why-jeni__cta-row,
  .fp-section__cta-row  { flex-direction: column; align-items: center; }
  .fp-card__media       { height: 200px; }
}

/* ── areas__view-all as button (for search_access gating) ── */
button.areas__view-all {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
/* ── pop-search__card as button ── */
button.pop-search__card {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTING DETAIL PAGE — .ld-* conversion layer
   Sits outside Kestrel's render tree. Does not touch IDX data.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Top CTA bar ────────────────────────────────────────────────────────── */
.ld-cta-bar {
  background: #fff;
  border-bottom: 1px solid rgba(27,48,64,0.08);
  padding: 16px var(--container-px, 48px);
  position: sticky;
  top: 88px;           /* clears fixed nav */
  z-index: 50;
}
.ld-cta-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ld-cta-bar__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-body);
  opacity: 0.45;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── CTA button group ───────────────────────────────────────────────────── */
.ld-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Private access panel ───────────────────────────────────────────────── */
.ld-access {
  background: var(--color-background, #E3E8ED);
  border-top: 1px solid var(--c-border-mid, #D5D9DC);
  border-bottom: 1px solid var(--c-border-mid, #D5D9DC);
  padding: 64px var(--container-px, 48px);
  margin-top: 0;
}
.ld-access__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ld-access__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.6;
  margin: 0 0 14px;
  display: block;
}
.ld-access__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 14px;
}
.ld-access__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-body);
  opacity: 0.65;
  line-height: 1.75;
  max-width: 56ch;
  margin: 0 auto 28px;
}

/* ── Similar opportunities ──────────────────────────────────────────────── */
.ld-similar {
  padding: 56px var(--container-px, 48px);
  background: #fff;
  border-bottom: 1px solid rgba(27,48,64,0.07);
}
.ld-similar__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ld-similar__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.ld-similar__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-body);
  opacity: 0.6;
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 auto 24px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ld-cta-bar { position: static; padding: 14px 20px; }
  .ld-cta-bar__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ld-cta { flex-direction: column; width: 100%; }
  .ld-cta .btn-primary,
  .ld-cta .btn-outline,
  .ld-cta .btn-ghost { width: 100%; justify-content: center; }
  .ld-access { padding: 48px 24px; }
  .ld-similar { padding: 44px 24px; }
}