<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Active Listings — CALI Real Estate</title>
  <meta name="description" content="Active Orange County real estate listings from CALI Real Estate." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,400;1,700;1,900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
  <style>
    /* Detailed listing block — used on this page */
    .listing-detail {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 48px;
      padding: 64px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
    .listing-detail:last-child { border-bottom: none; }
    .listing-detail__gallery {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px;
    }
    .listing-detail__gallery img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .listing-detail__gallery > :nth-child(1) {
      grid-column: 1 / 2; grid-row: 1 / 3;
      aspect-ratio: auto;
    }
    .listing-detail__hero {
      aspect-ratio: 16 / 9;
      width: 100%;
    }
    .listing-detail__hero img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .listing-detail__tag {
      display: inline-block;
      background: var(--gold-warm); color: var(--green-dark);
      font-size: 10px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; padding: 7px 14px;
      margin-bottom: 16px;
    }
    .listing-detail__addr {
      font-family: var(--serif); font-weight: 700; line-height: 1;
      font-size: clamp(32px, 4vw, 44px); color: var(--green-dark);
      letter-spacing: -1px; margin-bottom: 8px;
    }
    .listing-detail__city {
      font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--smoke); margin-bottom: 24px;
    }
    .listing-detail__price {
      font-family: var(--serif); font-size: 36px; font-weight: 700;
      color: var(--gold-warm); margin-bottom: 24px;
    }
    .listing-detail__specs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      margin-bottom: 28px;
    }
    .listing-detail__specs > div {
      background: var(--paper);
      padding: 18px 20px;
    }
    .listing-detail__specs strong {
      display: block;
      font-family: var(--serif); font-size: 22px;
      color: var(--green-dark); margin-bottom: 4px; line-height: 1;
    }
    .listing-detail__specs span {
      font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--smoke);
    }
    .listing-detail__copy p {
      font-size: 14.5px; line-height: 1.7; color: var(--ink);
      margin-bottom: 16px;
    }
    .listing-detail__cta-row {
      display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
    }
    @media (max-width: 880px) {
      .listing-detail { grid-template-columns: 1fr; gap: 32px; }
    }
  </style>
</head>
<body data-screen-label="02 Listings">

  <nav class="nav" id="nav">
    <div class="container nav__inner">
      <a href="index.html" class="nav__logo"><img src="assets/cali-logo-dark.png" alt="CALI Real Estate" /></a>
      <ul class="nav__links">
        <li><a href="index.html">Home</a></li>
        <li><a href="listings.html" class="is-active">Listings</a></li>
        <li><a href="buyers.html">Buyers</a></li>
        <li><a href="sellers.html">Sellers</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <a href="tel:+17144183100" class="nav__cta"><span>Call</span><strong>714.418.3100</strong></a>
      <button class="nav__toggle" onclick="document.getElementById('nav').classList.toggle('nav--open')" aria-label="Menu"><span></span><span></span><span></span></button>
    </div>
  </nav>

  <!-- Page hero -->
  <section class="page-hero">
    <div class="container container--narrow">
      <span class="eyebrow">Currently on Market</span>
      <div style="height: 12px;"></div>
      <h1 class="h-display">Active office <em>listings.</em></h1>
    </div>
  </section>

  <section class="section--paper" style="padding-top: 0; padding-bottom: var(--section-pad);">
    <div class="container">

      <!-- ─── SADDLEBACK ─── -->
      <div class="listing-detail" id="saddleback">
        <div>
          <div class="listing-detail__hero">
            <img src="assets/hero.jpg" alt="3435 S Saddleback Ct" />
          </div>
          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px;">
            <img src="assets/photo-backyard.jpg" alt="Resort backyard" style="aspect-ratio: 4/3; object-fit: cover; width: 100%;" />
            <img src="assets/photo-kitchen.jpg" alt="Chef's kitchen" style="aspect-ratio: 4/3; object-fit: cover; width: 100%;" />
            <img src="assets/photo-aerial.jpg" alt="Cul-de-sac aerial" style="aspect-ratio: 4/3; object-fit: cover; width: 100%;" />
          </div>
        </div>
        <div class="listing-detail__copy">
          <div class="listing-detail__tag">Just Listed</div>
          <div class="listing-detail__addr">3435 S. Saddleback Ct</div>
          <div class="listing-detail__city">Armstrong Ranch · Santa Ana, CA 92704 · MLS# OC26110901</div>
          <div class="listing-detail__price">$2,149,000</div>
          <div class="listing-detail__specs">
            <div><strong>5</strong><span>Bedrooms</span></div>
            <div><strong>4.5</strong><span>Bathrooms</span></div>
            <div><strong>4,206</strong><span>Sq Ft Living</span></div>
            <div><strong>6,459</strong><span>Sq Ft Lot</span></div>
          </div>
          <p>Armstrong Ranch is one of Orange County's most sought-after gated communities — beautifully manicured grounds, a residents-only pool and spa, and 24-hour security at the gate. 3435 S. Saddleback sits on one of its most coveted streets: a quiet cul-de-sac that delivers everyday privacy and a safer setting for the whole family.</p>
          <p>Built in 2004, the three-story floorplan: 1st floor opens to the living room, dining, great room, and chef's kitchen — plus a bedroom with ensuite, separate laundry, gym/bonus room, and 2-car attached garage. 2nd floor: 4 bedrooms incl. an expansive primary suite. 3rd floor: bonus room / game room / home office.</p>
          <div class="listing-detail__cta-row">
            <a href="#" class="btn btn--primary">View on OneHome →</a>
            <a href="contact.html" class="btn btn--outline">Schedule a Tour</a>
          </div>
        </div>
      </div>

      <!-- ─── ARIES ─── -->
      <div class="listing-detail" id="aries">
        <div>
          <div class="listing-detail__hero">
            <img src="assets/listing-aries.jpg" alt="3366 Aries Ct" />
          </div>
        </div>
        <div class="listing-detail__copy">
          <div class="listing-detail__addr">3366 Aries Ct</div>
          <div class="listing-detail__city">Santa Ana, CA · MLS# OC26083492</div>
          <div class="listing-detail__price">$1,279,000</div>
          <div class="listing-detail__specs">
            <div><strong>4</strong><span>Bedrooms</span></div>
            <div><strong>2.5</strong><span>Bathrooms</span></div>
            <div><strong>2,242</strong><span>Sq Ft Living</span></div>
            <div><strong>7,040</strong><span>Sq Ft Lot</span></div>
          </div>
          <p>A two-story turnkey family home with classic curb appeal — well-maintained landscaping, an attached two-car garage, and a thoughtful floorplan ideal for a growing family. A move-in-ready opportunity in a quiet Santa Ana pocket.</p>
          <div class="listing-detail__cta-row">
            <a href="#" class="btn btn--primary">View on OneHome →</a>
            <a href="contact.html" class="btn btn--outline">Schedule a Tour</a>
          </div>
        </div>
      </div>

      <!-- ─── GILBERT ─── -->
      <div class="listing-detail" id="gilbert">
        <div>
          <div class="listing-detail__hero">
            <img src="assets/listing-gilbert.jpg" alt="13100 Gilbert St #60" />
          </div>
        </div>
        <div class="listing-detail__copy">
          <div class="listing-detail__addr">13100 Gilbert St, #60</div>
          <div class="listing-detail__city">Garden Grove, CA · MLS# OC26104617</div>
          <div class="listing-detail__price">$524,900</div>
          <div class="listing-detail__specs">
            <div><strong>2</strong><span>Bedrooms</span></div>
            <div><strong>1.5</strong><span>Bathrooms</span></div>
            <div><strong>984</strong><span>Sq Ft Living</span></div>
            <div><strong>Upper</strong><span>Corner Unit</span></div>
          </div>
          <p>A corner upper-unit condo in a tranquil, well-kept community with koi ponds, fountains, and mature landscaping. Bright and private — a smart first home or investment opportunity under $550K.</p>
          <div class="listing-detail__cta-row">
            <a href="#" class="btn btn--primary">View on OneHome →</a>
            <a href="contact.html" class="btn btn--outline">Schedule a Tour</a>
          </div>
        </div>
      </div>

      <!-- ─── BRIARGLEN ─── -->
      <div class="listing-detail" id="briarglen">
        <div>
          <div class="listing-detail__hero">
            <img src="assets/listing-briarglen.jpg" alt="12635 Briarglen Loop, Unit K" />
          </div>
        </div>
        <div class="listing-detail__copy">
          <div class="listing-detail__addr">12635 Briarglen Loop, Unit K</div>
          <div class="listing-detail__city">Stanton, CA · MLS# OC26108786</div>
          <div class="listing-detail__price">$459,900</div>
          <div class="listing-detail__specs">
            <div><strong>1</strong><span>Bedroom</span></div>
            <div><strong>1</strong><span>Bathroom</span></div>
            <div><strong>672</strong><span>Sq Ft Living</span></div>
            <div><strong>Ground</strong><span>Level Unit</span></div>
          </div>
          <p>Ground-level unit inside a 24-hour guard-gated community with lush, tree-lined walkways and mature landscaping. A rare entry-level price point in a secure, well-maintained complex — ideal for a first-time buyer or investor.</p>
          <div class="listing-detail__cta-row">
            <a href="#" class="btn btn--primary">View on OneHome →</a>
            <a href="contact.html" class="btn btn--outline">Schedule a Tour</a>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- IDX search placeholder -->
  <section class="section section--green" style="text-align: center;">
    <div class="container container--narrow">
      <span class="eyebrow">Looking for more?</span>
      <div style="height: 12px;"></div>
      <h2 class="h-section">Search every home in <em>OC.</em></h2>
      <p class="lede" style="margin: 20px auto 32px; color: rgba(255,255,255,0.78);">Our buyer portal pulls from the same MLS feed agents use — set custom filters, save searches, and get alerts when new homes match your criteria.</p>
      <a href="buyers.html" class="btn btn--gold">Open MLS Search →</a>
    </div>
  </section>

  <div id="site-foot"></div>
  <script src="footer.js"></script>
</body>
</html>
