:root{
      /* === Joivy Design System mapping using palette tokens found in app/globals-without-fonts.css ===
         Note: Joivy palette defines RGB tuples like --slate-700: 116 129 137;
         We wrap them with rgb(var(--token)) for compatibility and provide sane fallbacks. */
      --jds-color-primary: rgb(var(--teal-700, 1 89 98));
      --jds-color-primary-contrast: #ffffff;
      --jds-color-secondary: rgb(var(--teal-500, 45 166 178));
      --jds-color-bg: rgb(var(--slate-50, 248 250 252));
      --jds-color-surface: rgb(var(--gray-50, 249 250 251));
      --jds-color-text: rgb(var(--slate-800, 51 65 85));
      --jds-color-muted: rgb(var(--slate-600, 71 85 105));

      --jds-radius-lg: 1rem;             /* 16px */
      --jds-radius-md: .75rem;
      --jds-radius-sm: .5rem;
      --jds-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
      --jds-shadow-md: 0 6px 18px rgba(0,0,0,.08);
      --jds-space-1: .25rem; /* 4px */
      --jds-space-2: .5rem;  /* 8px */
      --jds-space-3: .75rem; /* 12px */
      --jds-space-4: 1rem;   /* 16px */
      --jds-space-6: 1.5rem; /* 24px */
      --jds-space-8: 2rem;   /* 32px */
      --jds-font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
      --jds-font-serif: 'Unbounded', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    }

    html{scroll-behavior:smooth}
    body{font-family:var(--jds-font-sans); color:var(--jds-color-text); background:var(--jds-color-bg)}

    /* DS-aligned components */
    .btn-jds{background:var(--jds-color-primary);color:var(--jds-color-primary-contrast);border:none;border-radius:var(--jds-radius-md);padding:.625rem 1rem;box-shadow:var(--jds-shadow-sm)}
    .btn-jds:hover{filter:brightness(0.95)}
    .btn-outline-jds{color:var(--jds-color-primary);border:1px solid var(--jds-color-primary);background:transparent;border-radius:var(--jds-radius-md)}

    .card-jds{border:0;border-radius:var(--jds-radius-lg);box-shadow:var(--jds-shadow-md);background:var(--jds-color-surface)}
    .chip{display:inline-block;padding:.25rem .5rem;border-radius:9999px;background:#e6f2f4;color:#0a3f45;font-size:.85rem}

  .navbar-brand{font-weight:700}
  .navbar-brand img{height:65px;width:auto;display:block}
    .nav-link{font-weight:500;padding-left:1em}
    .hero{position:relative;overflow:hidden;border-bottom-left-radius:var(--jds-radius-lg);border-bottom-right-radius:var(--jds-radius-lg)}
    .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35));}
    .hero img{width:100%;height:68vh;object-fit:cover;display:block;}
    .hero .hero-content{position:absolute;inset:0;z-index:1;display:flex;align-items:center;}
    .hero h1,.hero p{color:#fff}

    .section{padding:clamp(2rem,4vw,4rem) 0}
    .section-title{font-weight:800;letter-spacing:.2px}

    .gallery-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:var(--jds-radius-md)}

    /* Showcase Carousel Styles */
    .showcase-carousel {
      position: relative;
      padding: clamp(1.5rem, 2.5vw, 3rem);
      overflow: hidden;
    }

    .showcase-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(110px, 18%) 1fr minmax(110px, 18%);
      align-items: center;
      gap: clamp(1rem, 2vw, 2.25rem);
    }

    .showcase-main {
      border-radius: 1.75rem;
      overflow: hidden;
      background: #0f172a;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    }

    .showcase-main .carousel-inner {
      border-radius: inherit;
    }

    .showcase-img {
      width: 100%;
      height: clamp(320px, 45vw, 520px);
      object-fit: cover;
      display: block;
      transition: transform 0.85s cubic-bezier(0.19, 1, 0.22, 1), filter 0.45s ease;
    }

    .carousel-item.active .showcase-img {
      transform: scale(1.015);
    }

    .showcase-figure {
      position: relative;
      margin: 0;
    }

    .showcase-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1rem 1.5rem;
      background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.85) 100%);
      color: #fff;
    }

    .showcase-caption .caption-text {
      font-size: 0.95rem;
      letter-spacing: 0.01em;
    }

    .showcase-preview {
      position: relative;
      border-radius: 1.25rem;
      overflow: hidden;
     /* min-height: clamp(160px, 22vw, 360px);*/
      opacity: 0.55;
      cursor: pointer;
      transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    }

    .showcase-preview::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.45));
      transition: opacity 0.35s ease;
    }

    .showcase-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .showcase-preview:hover {
      opacity: 0.92;
      transform: translateY(-6px) scale(1.03);
    }

    .showcase-preview:hover::after {
      opacity: 0.25;
    }

    .showcase-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 999px;
      background: #fff;
      color: var(--jds-color-text);
      box-shadow: 0 15px 30px rgba(15, 23, 42, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      z-index: 5;
    }

    .showcase-nav svg {
      width: 1.2rem;
      height: 1.2rem;
    }

    .showcase-nav:hover {
      transform: translateY(-50%) scale(1.08);
      box-shadow: 0 18px 35px rgba(9, 9, 15, 0.25);
    }

    .showcase-nav:focus-visible {
      outline: 2px solid var(--jds-color-primary);
      outline-offset: 4px;
    }

    .showcase-nav-prev {
      left: clamp(0.35rem, 1.5vw, 1.5rem);
    }

    .showcase-nav-next {
      right: clamp(0.35rem, 1.5vw, 1.5rem);
    }

    .showcase-meta {
      margin-top: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
    }

    .showcase-progress {
      flex: 1;
      height: 4px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.1);
      overflow: hidden;
    }

    .showcase-progress-bar {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--jds-color-primary);
      transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .showcase-indicators {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin: 0;
    }

    .showcase-indicators button {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: none;
      background: rgba(15, 23, 42, 0.3);
      opacity: 0.7;
      transition: all 0.3s ease;
    }

    .showcase-indicators button.active {
      width: 28px;
      background: var(--jds-color-secondary);
      opacity: 1;
    }

    .showcase-indicators button:focus-visible {
      outline: 2px solid var(--jds-color-primary);
      outline-offset: 2px;
    }

    @media (max-width: 1024px) {
      .showcase-shell {
        grid-template-columns: 1fr;
      }

      .showcase-preview {
        display: none;
      }

      .showcase-nav {
        position: static;
        transform: none;
        width: 2.75rem;
        height: 2.75rem;
      }

      .showcase-meta {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 768px) {
      .showcase-carousel {
        padding: 1rem;
      }

      .showcase-img {
        height: 300px;
      }

      .showcase-indicators {
        justify-content: flex-start;
      }
    }

    /* Ensure apartment images fit width of card while preserving aspect ratio */
    #apartments .card-jds img{width:100%;height:auto;display:block;object-fit:cover}
    
    /* Apartment overlay badge */
    .card-jds .position-relative{display:block;position:relative}
    .apt-overlay-badge{position:absolute;top:0.75rem;right:0.75rem;background:rgba(255,255,255,0.95);color:var(--jds-color-text);padding:0.375rem 0.625rem;border-radius:var(--jds-radius-sm);font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:0.25rem;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:10}
    .apt-overlay-badge svg{vertical-align:middle;margin-top:-1px}
    
    /* Accessibility helpers */
    .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#000;color:#fff;z-index:10000}
    :focus{outline:2px solid #222;outline-offset:2px}

    /* Landing page cards and hero */
    .property-card {transition:transform 0.3s ease, box-shadow 0.3s ease;height:100%;border:0;overflow:hidden}
    .property-card:hover {transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15)}
    .property-card-img {height:280px;object-fit:cover;transition:transform 0.5s ease}
    .property-card:hover .property-card-img {transform:scale(1.08)}
    .property-card-body {padding:1.75rem}
    .property-badge {position:absolute;top:1rem;right:1rem;background:rgba(1,89,98,0.95);color:#fff;padding:0.4rem 0.9rem;border-radius:2rem;font-size:0.8rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;z-index:2}
    .property-location {color:var(--jds-color-muted);font-size:0.95rem;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.4rem}
    .property-title {font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--jds-color-text)}
    .property-description {color:var(--jds-color-muted);line-height:1.6;margin-bottom:1.5rem}
    .property-features {display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem}
    .feature-chip {background:#e6f2f4;color:#0a3f45;padding:0.35rem 0.75rem;border-radius:1rem;font-size:0.8rem;font-weight:500}
    .hero-overlay {position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.4),rgba(0,0,0,0.6));z-index:1}
    .hero-content {position:relative;z-index:2}
    .hero-subtitle {font-size:1.15rem;opacity:0.95;margin-bottom:1.5rem;max-width:600px}
    .brand-logo {height:50px;width:auto;display:block}
    .section-muted {background:var(--jds-color-bg)}
    .footer-logo {height:40px;width:auto;display:block;filter:brightness(0) invert(1)}
    @media (max-width: 768px){
      .property-card-img {height:220px}
      .hero h1 {font-size:2rem}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
    }