/* old css */
  .modal-subscription {
    position: absolute;
    background-color: #ffffff;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    top: -174px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.4s ease;
    margin-bottom: 30px;
    right: 0;
    display: none;
    z-index: 1;
    padding: 0px 10px;
  }

  /* Bottom Arrow */
  .modal-subscription::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
  }

  .close-modal {
    color: red;
    font-size: 22px;
    text-align: right;
    cursor: pointer;
  }

  .img-thumb-pagi img {
    height: 136px;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .star {
    color: #f1c40f !important;
    font-size: 24px;
    margin: 3px 0;
    font-weight: 300 !important;
  }

  .inputBg {
    background: #314B4C !important;
    color: #fff !important;
  }

  .inputBg::placeholder {
    color: #f2f2f2 !important;
  }

  /* radio button */

  .radio-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .radio-group input[type="radio"] {
    display: none;
  }

  .radio-group label {
    padding: 3px 10px;
    border: 2px solid #007bff;
    border-radius: 5px;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: sans-serif;
    font-size: 13px;
  }

  .radio-group input[type="radio"]:checked+label {
    background-color: #007bff;
    color: #fff;
  }

  .review-badge {
    font-weight: 300;
    font-size: 12px;
    background: #319b60;
    padding: 0px 10px;
    border-radius: 10px;
  }

  .feature-item::before {
    color: #FFF !important;
  }

  /* old css */

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

  :root {
    --bg: #061121;
    --bg-color:          #061121;
    --panel: rgba(6,17,33,0.70);
    --panel-2: rgba(14,30,55,0.85);
    --border: rgba(235,216,176,0.18);
    --border-soft: rgba(235,216,176,0.10);
    --text: #eaf1f7;
    --muted: #cbd5e1;
    --blue: #ebd8b0;
    --blue-hover: #dfc89d;
    --danger: #ef4444;
    
    --primary-text:      #eaf1f7;
    --secondary-text:    #cbd5e1;
    --accent-color:      #ebd8b0;
    --gold-primary:      #ebd8b0;
    --gold-hover:        #dfc89d;
    --gold-active:       #c5ad83;
  }

  /* ================= RESET ================= */
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: 'Outfit', sans-serif !important;
    background-color: #061121 !important;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(43,93,153,0.15) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(235,216,176,0.10) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--primary-text) !important;
    position: relative;
  }

  /* ================= LAYOUT ================= */
  .page {
    max-width: 1200px;
    margin: 0 auto;
    /* top padding clears the fixed navbar (padding doesn't margin-collapse) */
    padding: 120px 16px 28px;
  }

  .grid {
    display: grid;
    grid-template-columns: 1.7fr 0.9fr;
    gap: 24px;
  }

  @media (max-width: 1024px) {
    .grid {
      /* minmax(0, 1fr) — NOT plain 1fr — so a wide hero photo can't blow the
         column past the viewport and push the card off-screen on mobile */
      grid-template-columns: minmax(0, 1fr);
    }
    /* Grid/flex children default to min-width:auto, which lets big content
       (the hero image) expand the track. Force them to be allowed to shrink. */
    .grid > *,
    .card,
    .box {
      min-width: 0;
    }
  }

  /* ================= CARD ================= */
  .card {
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.15) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.12) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
    border: 1px solid rgba(235, 216, 176, 0.22) !important;
    border-radius: 22px;
    padding: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        3px 5px 0 rgba(195, 145, 35, 0.35),
        4px 7px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(235, 216, 176, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 18px rgba(235, 216, 176, 0.15) !important;
    z-index: 1;
    isolation: isolate;
  }

  .card::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(235, 216, 176, 0.1);
    border-radius: 16px;
    pointer-events: none;
    z-index: 3;
  }

  .card > *:not(.card-stars):not(.card-shimmer):not(.mouse-light) {
    position: relative;
    z-index: 5;
  }

  /* Shimmer / Galaxy / Light effects */
  .card-stars {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.20) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(235, 216, 176, 0.20) 1px, transparent 1px) !important;
    background-size: 70px 70px, 105px 105px, 84px 84px;
    animation: galaxyRotate 80s infinite linear;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
  }

  .card-shimmer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0) 100%
      );
    transform: rotate(45deg);
    animation: luxuryCardShimmer 6s infinite linear;
    pointer-events: none;
    z-index: 2;
  }

  .mouse-light {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(235, 216, 176, 0.15) 0%, rgba(235, 216, 176, 0) 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .card:hover .mouse-light, .box:hover .mouse-light {
    opacity: 1;
  }

  @keyframes galaxyRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes luxuryCardShimmer {
    0% { transform: rotate(45deg) translateY(120%); }
    50% { transform: rotate(45deg) translateY(-120%); }
    100% { transform: rotate(45deg) translateY(-120%); }
  }

  /* ================= IMAGE ================= */
  .hero {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    /* Premium gold hairline border + blue glow (matches the listing card) */
    border-top: 1px solid rgba(235, 216, 176, 0.55);
    border-left: 1px solid rgba(235, 216, 176, 0.38);
    border-right: 1px solid rgba(235, 216, 176, 0.14);
    border-bottom: 1px solid rgba(235, 216, 176, 0.10);
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.48),
      0 0 26px rgba(43, 93, 153, 0.30),
      0 0 18px rgba(235, 216, 176, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

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

  /* Transparent gradient overlay — clear photo, slight top tint,
     fading into a dark navy-blue at the bottom (same principle as the cards) */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(
        to bottom,
        rgba(43, 93, 153, 0.00) 50%,
        rgba(43, 93, 153, 0.26) 80%,
        rgba(22, 50, 92, 0.50) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(6, 17, 33, 0.34) 0%,
        rgba(6, 17, 33, 0.08) 14%,
        rgba(6, 17, 33, 0.00) 38%,
        rgba(6, 17, 33, 0.00) 60%,
        rgba(6, 17, 33, 0.45) 82%,
        rgba(6, 17, 33, 0.82) 100%
      );
  }

  /* ===== Hero prev/next arrows ( < > ) ===== */
  .hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(235, 216, 176, 0.35);
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease, transform .15s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  }

  .hero:hover .hero-nav {
    opacity: 1;
  }

  .hero-nav:hover {
    background: rgba(43, 93, 153, 0.85);
  }

  .hero-nav:active {
    transform: translateY(-50%) scale(0.92);
  }

  .hero-prev {
    left: 14px;
  }

  .hero-next {
    right: 14px;
  }

  /* ===== View all photos pill ===== */
  .hero-view-all {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(235, 216, 176, 0.40);
    border-radius: 999px;
    background: rgba(6, 17, 33, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  }

  .hero-view-all i {
    font-size: 14px;
  }

  .hero-view-all:hover {
    background: rgba(43, 93, 153, 0.90);
  }

  .hero-view-all:active {
    transform: scale(0.96);
  }

  /* On touch devices keep the arrows visible (no hover state) */
  @media (hover: none) {
    .hero:hover .hero-nav,
    .hero-nav {
      opacity: 1;
    }
  }

  /* ================= TITLE ================= */
  .title-row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    color: #FFF;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
  }

  .price {
    font-size: 26px;
    font-weight: 700;
  }

  /* ================= META ================= */
  .meta {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--muted);
    margin: 0px 0 10px;
  }

  .meta span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* ================= SECTION ================= */
  .section {
    border-top: 1px solid var(--border-soft);
    padding-top: 18px;
    margin-top: 18px;
  }

  .section h3 {
    font-size: 15px;
    margin: 0 0 10px;
  }

  /* ================= DESCRIPTION ================= */
  .desc {
    font-size: 14px;
    line-height: 1.6;
    color: #d6e2ec;
  }

  /* ================= ACCORDION ================= */
  .accordion details {
    border-top: 1px solid var(--border-soft);
    padding: 14px 0;
  }

  .accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }

  .accordion summary::-webkit-details-marker {
    display: none;
  }

  .accordion summary span {
    transition: transform 0.25s ease;
  }

  .accordion details[open] summary span {
    transform: rotate(180deg);
  }

  .accordion ul {
    margin: 12px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
  }

  .accordion li {
    list-style: none;
    font-size: 14px;
    color: #dbe7f1;
  }

  /* ================= PHOTOS ================= */
  .photos {
    display: flex;
    gap: 12px;
    margin-top: 12px;
  }

  .photo {
    width: 130px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
  }

  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  /* ================= RIGHT PANEL ================= */
  .sticky {
    position: sticky;
    top: 20px;
  }

  .box {
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.15) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.12) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
    border: 1px solid rgba(235, 216, 176, 0.22) !important;
    border-radius: 18px;
    padding: 18px !important;
    margin-bottom: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        3px 5px 0 rgba(195, 145, 35, 0.35),
        4px 7px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(235, 216, 176, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 18px rgba(235, 216, 176, 0.15) !important;
    z-index: 1;
    isolation: isolate;
  }

  .box::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(235, 216, 176, 0.1);
    border-radius: 14px;
    pointer-events: none;
    z-index: 3;
  }

  .box > *:not(.card-stars):not(.card-shimmer):not(.mouse-light) {
    position: relative;
    z-index: 5;
  }

  .box h4 {
    margin: 0 0 6px;
    font-size: 18px;
  }

  .box p {
    font-size: 14px;
    color: var(--muted);
  }

  .box ul {
    padding-left: 18px;
    margin: 12px 0;
  }

  .box li {
    font-size: 14px;
    margin: 6px 0;
  }

  /* ── File Attachments row ─────────────────────────────────
     Filename shrinks and wraps inside its own column; the
     Download pill never shrinks, so the two can't overlap. */
  .attachments-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .attachments-row .icon-item {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.5;
  }

  .attachments-row .attachments-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 9px 18px;
    border-radius: 30px;
    background: rgba(6, 17, 33, 0.6);
    border: 1px solid rgba(235, 216, 176, 0.4);
    color: #ebd8b0 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
  }

  .attachments-row .attachments-item:hover {
    background: rgba(235, 216, 176, 0.12);
    border-color: rgba(235, 216, 176, 0.8);
    color: #ebd8b0 !important;
  }

  .attachments-row .attachments-item i {
    font-size: 13px;
    color: #ebd8b0 !important;
  }

  /* No-file Download: disabled look + hover tooltip */
  .attachments-tooltip-wrap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    outline: none;
  }

  .attachments-item-disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .attachments-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: 260px;
    background: linear-gradient(160deg, rgba(14, 30, 55, 0.98) 0%, rgba(6, 17, 33, 0.98) 100%);
    border: 1px solid rgba(235, 216, 176, 0.4);
    color: #ebd8b0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(235, 216, 176, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
    pointer-events: none;
    white-space: normal;
    text-align: left;
  }

  .attachments-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 24px;
    border: 6px solid transparent;
    border-top-color: rgba(235, 216, 176, 0.4);
  }

  .attachments-tooltip-wrap:hover .attachments-tooltip,
  .attachments-tooltip-wrap:focus-within .attachments-tooltip,
  .attachments-tooltip-wrap.show-tooltip .attachments-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ================= BUTTONS ================= */
  .btn-primary {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px;
    background: linear-gradient(135deg, #ebd8b0, #c5ad83);
    color: #061121 !important;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease, transform 0.15s ease;
    box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
  }

  .btn-primary i,
  .hsb-ai-generate-btn i {
    color: #061121 !important;
  }

  .btn-primary a {
    color: #061121 !important;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, #dfc89d, #a89065);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(235, 216, 176, 0.4);
  }

  .btn-secondary {
    width: 100%;
    border-radius: 999px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-soft);
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /* 
   * Premium Independent Button Shimmer Effect
   * Adds an automated light-sweep crossing primary/secondary buttons.
   * Utilizes skew and gradient overlays without interfering with user pointer events.
   */
  .btn-primary::before,
  .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    /* 3.5s duration with easing provides a premium, staggered visual rhythm */
    animation: btnShimmer 3.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
  }

  /* 
   * Shimmer Sweep Animation
   * Sweeps across the button face from 0% to 30%, then rests off-screen until 100%.
   * This creates a natural 2.5-second delay between light sweeps.
   */
  @keyframes btnShimmer {
    0% {
      left: -150%;
    }
    30% {
      left: 150%;
    }
    100% {
      left: 150%;
    }
  }

  /* ================= FOOT INFO ================= */
  .foot {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
  }

  .report {
    color: var(--danger);
    cursor: pointer;
  }

  /* ================= FOOTER NOTE ================= */
  .note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
  }

  .btnHoverEffect {
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  .btnHoverEffect2 {
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  .btnHoverEffect:hover {
    border-color: var(--blue-hover);
    box-shadow: 0px 0px 150px 1px var(--blue-hover);
    transition: all 0.3s ease-in-out;
  }

  .btnHoverEffect2:hover {
    border-color: var(--danger);
    box-shadow: 0px 0px 150px 1px var(--danger);
    transition: all 0.3s ease-in-out;
  }

  .video {
    position: relative;
    padding-top: 56.25%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
  }

  .video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  /* ===== MAP ===== */
  .map {
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    transition: height 0.3s ease;
    position: relative;
  }

  .map.expanded {
    height: 450px !important;
  }

  @media (max-width: 768px) {
    .map {
      height: 200px !important;
    }

    .map.expanded {
      height: 400px !important;
    }
  }

  .map iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ================= PHOTO SLIDER ================= */
  .hsb-photo-slider-root {
    position: relative;
    margin-top: 12px;
  }

  .hsb-photo-slider-viewport {
    overflow: hidden;
    width: 100%;
  }

  .hsb-photo-slider-track {
    display: flex;
    gap: 12px;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .hsb-photo-slider-track .photo {
    flex: 0 0 130px;
  }

  /* NAV BUTTONS */
  .hsb-photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: rgba(15, 26, 38, 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
  }

  .hsb-photo-nav:hover {
    background: rgba(59, 130, 246, 0.85);
    border-color: var(--blue);
  }

  .hsb-photo-prev {
    left: -10px;
  }

  .hsb-photo-next {
    right: -10px;
  }

  /* MOBILE */
  @media (max-width: 640px) {
    .hsb-photo-nav {
      width: 34px;
      height: 34px;
    }
  }

  .boxShowd {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  /* review section css */
  .property-header {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .rating-summary {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .overall-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--blue);
  }

  .rating-details {
    display: flex;
    flex-direction: column;
  }

  .stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .star {
    color: #fbbf24;
    font-size: 1.25rem;
  }

  .star.empty {
    /* !important because .star above forces gold with !important, which
       painted every empty star gold - a 0-review listing showed five. */
    color: var(--border) !important;
  }

  .review-count {
    color: white;
    font-size: 1rem;
    font-weight: 500;
  }

  .reviews-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.8rem;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
  }

  .section-title {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .write-review-btn {
    background: var(--blue);
    color: #061121;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .write-review-btn:hover {
    background: var(--blue-hover);
  }

  .filter-sort {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .filter-btn {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn:hover {
    border-color: var(--blue);
  }

  .filter-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #061121;
    font-weight: 600;
  }

  .review-card {
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
  }

  .review-card:hover {
    border-color: var(--border);
  }

  .review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .reviewer-info {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.4rem;
    color: #FFF;
  }

  .reviewer-details {
    display: flex;
    flex-direction: column;
  }

  .reviewer-name {
    font-weight: 600;
    margin-bottom: 0.15rem;
    font-size: 1.05rem;
  }

  .review-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    color: var(--muted);
  }

  .verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .review-rating {
    display: flex;
    gap: 0.2rem;
  }

  .review-content {
    margin-bottom: 1rem;
  }

  .review-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
  }

  .review-text {
    color: var(--muted);
    line-height: 1.6;
    font-size: 1.05rem;
  }

  .review-categories {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .category-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
  }

  .category-label {
    color: var(--muted);
  }

  .category-rating {
    color: var(--text);
    font-weight: 600;
  }

  .review-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
  }

  .action-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
  }

  .action-btn:hover {
    color: var(--text);
  }

  .action-btn.active {
    color: var(--blue);
  }

  /* Full-width Customer Reviews section (moved out of the narrow sidebar) */
  .reviews-fullwidth {
    margin-top: 24px;
  }

  .reviews-fullwidth > h4 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .reviews-fullwidth .property-header {
    padding: 2.25rem;
  }

  .reviews-fullwidth .rating-summary {
    justify-content: flex-start;
    gap: 2.5rem;
  }

  .reviews-fullwidth .rating-number {
    font-size: 3.5rem;
    line-height: 1;
  }

  .reviews-fullwidth .star {
    font-size: 1.5rem;
  }

  .reviews-fullwidth .review-count {
    font-size: 1.05rem;
  }

  .reviews-fullwidth .reviews-section {
    padding: 1.75rem 2rem;
  }

  .reviews-fullwidth .section-title {
    font-size: 1.6rem;
  }

  .reviews-fullwidth .write-review-btn {
    font-size: 1rem;
    padding: 0.7rem 1.6rem;
  }

  .reviews-fullwidth .filter-btn {
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
  }

  .reviews-fullwidth .review-text {
    font-size: 1.05rem;
  }

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

    .property-header,
    .reviews-section {
      padding: 1.5rem;
    }

    .rating-summary {
      flex-direction: column;
      align-items: flex-start;
    }

    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .review-header {
      flex-direction: column;
      gap: 0.75rem;
    }

    .review-text {
      font-size: 1.3rem;
      line-height: 1.7;
    }

    .reviewer-name {
      font-size: 1.35rem;
    }

    .review-meta {
      font-size: 1.15rem;
    }

    .review-title {
      font-size: 1.4rem;
    }

    .review-count {
      font-size: 1.15rem;
    }

    .star {
      font-size: 1.5rem;
    }

    /* keep the full-width reviews comfortable on small screens */
    .reviews-fullwidth .property-header {
      padding: 1.25rem;
    }

    .reviews-fullwidth .reviews-section {
      padding: 1.25rem;
    }

    .reviews-fullwidth .rating-summary {
      gap: 1rem;
    }

    .reviews-fullwidth .rating-number {
      font-size: 3rem;
    }

    .reviews-fullwidth > h4 {
      font-size: 1.8rem;
    }

    .reviews-fullwidth .section-title {
      font-size: 1.65rem;
    }

    .reviews-fullwidth .filter-btn {
      font-size: 1.2rem;
      padding: 0.7rem 1.2rem;
    }

    .reviews-fullwidth .write-review-btn {
      width: 100%;
      font-size: 1.25rem;
      padding: 0.9rem 1.5rem;
    }
  }


  .review-form-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
  }

  .review-form-modal.active {
    display: block;
  }

  .review-form-container {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;

    max-width: 700px;
    width: min(100%, 700px);
    max-height: 90vh;
    overflow-y: auto;
  }


  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
  }

  .form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFF;
  }

  .close-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
  }

  .close-btn:hover {
    background: var(--panel-2);
    color: var(--text);
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 13px;
  }

  .form-sublabel {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-top: 0.25rem;
  }

  .star-rating-input {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .star-input {
    font-size: 2rem;
    color: var(--border);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
  }

  .star-input:hover,
  .star-input.active {
    color: #fbbf24;
    transform: scale(1.1);
  }

  .form-input {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
  }

  .form-input:focus {
    outline: none;
    border-color: var(--blue);
  }

  .form-input::placeholder {
    color: var(--muted);
    opacity: 0.6;
  }

  textarea.form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
  }

  .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
  }

  .btn-cancel {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-cancel:hover {
    border-color: var(--danger);
    color: var(--danger);
  }

  .btn-submit {
    flex: 2;
    background: var(--blue);
    border: none;
    color: white;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-submit:hover {
    background: var(--blue-hover);
  }

  .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .char-count {
    text-align: right;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.5rem;
  }

  /* Responsive Improvements */
  @media (max-width: 900px) {
    .grid {
      /* minmax(0, 1fr) — NOT plain 1fr — otherwise the hero photo's intrinsic
         width blows the column past the viewport and the card runs off-screen */
      grid-template-columns: minmax(0, 1fr);
    }

    /* Belt and suspenders: nothing in the top card may exceed the viewport */
    .grid > *,
    .hero-top,
    .hero-top .hero,
    .hero-info,
    .card {
      min-width: 0;
      max-width: 100%;
    }

    .page {
      /* top padding clears the fixed navbar */
      padding: 120px 20px 28px;
    }

    .title-row {
      flex-direction: column;
      gap: 8px;
    }

    /* Align text-right elements to left on mobile */
    .text-right {
      text-align: left !important;
      margin-top: 10px;
    }

    /* Allow meta tags to wrap properly */
    .meta {
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 20px;
    }

    .hero {
      height: auto;
      aspect-ratio: 16/9;
    }

    /* Video Section Fixes */
    .video {
      display: block;
      padding-top: 0;
      height: auto;
    }

    .video>div {
      width: 100% !important;
      height: 0 !important;
      padding-bottom: 56.25%;
      /* 16:9 Aspect Ratio */
      position: relative;
      margin-bottom: 20px;
    }

    .video2 {
      display: flex;
      flex-direction: column;
    }

    /* Modal Subscription */
    .modal-subscription {
      width: 95%;
      left: 2.5%;
      right: auto;
      top: -150px;
    }
  }

  @media (max-width: 500px) {

    .filter-sort {
      flex-direction: column;
    }

    .filter-btn {
      width: 100%;
    }

    .review-header {
      flex-direction: column;
      gap: 10px;
    }

    .reviewer-info {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ================= AI MARKET INTELLIGENCE START ================= */
  /* 
   * AI Deep Market Intelligence Section Container
   * Styled to match the exact 3D glassmorphism details of the property info boxes (.box).
   * Features the same HSL gold-blue gradients, 18px border radius, and 3D offset drop shadows.
   */
  .hsb-ai-container {
    margin-top: 60px !important;
    padding: 24px;
    background:
        radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.15) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.12) 0%, transparent 55%),
        linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(235, 216, 176, 0.22) !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow:
        3px 5px 0 rgba(195, 145, 35, 0.35),
        4px 7px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(235, 216, 176, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 18px rgba(235, 216, 176, 0.15) !important;
    z-index: 1;
    isolation: isolate;
  }

  .hsb-ai-container::after {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    border: 1px solid rgba(235, 216, 176, 0.1) !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    z-index: 0;
  }

  .hsb-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    gap: 20px;
  }

  .hsb-ai-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hsb-ai-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #dfc89d 50%, #ebd8b0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hsb-ai-title i {
    font-size: 22px;
    color: #ebd8b0;
    -webkit-text-fill-color: initial;
    text-shadow: 0 0 10px rgba(235, 216, 176, 0.6);
  }

  .hsb-ai-generate-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ebd8b0, #c5ad83) !important;
    border: 1px solid rgba(235, 216, 176, 0.4) !important;
    border-radius: 50px !important;
    color: #061121 !important;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(235, 216, 176, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    white-space: nowrap;
    min-height: 42px;
  }

  .hsb-ai-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(235, 216, 176, 0.6), inset 0 0 12px rgba(235, 216, 176, 0.4) !important;
    border-color: rgba(235, 216, 176, 0.8) !important;
  }

  /* Shimmer Effect for Buttons & Cards */
  .hsb-ai-card,
  .hsb-ai-generate-btn,
  .hsb-ai-tab-btn {
    position: relative;
    overflow: hidden;
  }

  .hsb-ai-card::before,
  .hsb-ai-generate-btn::before,
  .hsb-ai-tab-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    animation: hsb-ai-shimmer 3s infinite linear;
    pointer-events: none;
    z-index: 1;
  }

  /* Spinner Logic */
  .hsb-ai-generate-btn .fa-spin {
    display: none;
  }

  .hsb-ai-generate-btn.loading .fa-spin {
    display: flex;
  }

  .hsb-ai-generate-btn.loading .fa-wand-magic-sparkles {
    display: none;
  }

  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  gap: 20px;
  }

  .hsb-ai-progress-text {
    font-size: 16px;
    color: #94a3b8;
    height: 24px;
    text-align: center;
    font-weight: 500;
  }

  .hsb-ai-loading-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    gap: 20px;
    z-index: 2;
    position: relative;
  }

  .hsb-ai-progress-text {
    font-size: 16px;
    color: #ebd8b0;
    height: 24px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(235, 216, 176, 0.4);
  }

  .hsb-ai-skeleton-card {
    background: linear-gradient(145deg, #131b26 0%, #070c12 100%);
    border: 1px solid rgba(235, 216, 176, 0.15);
    border-radius: 18px;
    height: 140px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }

  .hsb-ai-skeleton-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(235, 216, 176, 0.1), transparent);
    transform: translateX(-100%);
    animation: hsb-ai-shimmer 2s infinite linear;
  }

  @keyframes hsb-ai-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  /* RESULTS GRID & TABS */
  .hsb-ai-tabs {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    /* Fix overlap with refresh button */
    margin-bottom: 25px;
    padding-bottom: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
    position: relative;
    z-index: 2;
  }

  .hsb-ai-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .hsb-ai-tabs::-webkit-scrollbar-thumb {
    background: rgba(235, 216, 176, 0.2);
    border-radius: 4px;
  }

  .hsb-ai-tab-btn {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  .hsb-ai-tab-btn:hover {
    color: #fff;
    border-color: rgba(235, 216, 176, 0.3);
    background: rgba(255, 255, 255, 0.06);
  }

  .hsb-ai-tab-btn.active {
    background: linear-gradient(135deg, #ebd8b0, #c5ad83) !important;
    border: 1px solid rgba(235, 216, 176, 0.6) !important;
    color: #061121 !important;
    box-shadow: 0 0 15px rgba(235, 216, 176, 0.4), inset 0 0 10px rgba(235, 216, 176, 0.2) !important;
    text-shadow: none;
  }

  .hsb-ai-results {
    display: none;
    grid-template-columns: 1fr;
    /* Single column for focus */
    gap: 20px;
    z-index: 2;
    position: relative;
  }

  .hsb-ai-pane {
    display: none;
    animation: hsb-ai-fade-in 0.4s ease forwards;
  }

  .hsb-ai-pane.active {
    display: block;
  }

  @keyframes hsb-ai-fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hsb-ai-card {
    background: linear-gradient(145deg, #131b26 0%, #070c12 100%) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(235, 216, 176, 0.25) !important;
    border-radius: 18px !important;
    padding: 20px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(235, 216, 176, 0.15), inset 0 0 15px rgba(235, 216, 176, 0.05) !important;
  }

  .hsb-ai-card::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(235, 216, 176, 0.08);
    border-radius: 14px;
    pointer-events: none;
  }

  .hsb-ai-card:hover {
    transform: translateY(-2px);
    border-color: rgba(235, 216, 176, 0.5) !important;
    box-shadow: 0 0 45px rgba(235, 216, 176, 0.3), inset 0 0 25px rgba(235, 216, 176, 0.1) !important;
  }

  .hsb-ai-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #ebd8b0 !important;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(235, 216, 176, 0.3);
  }

  .hsb-ai-card-title i {
    color: #ebd8b0;
  }

  /* FINANCIAL SECTION */
  .hsb-ai-val-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
  }

  .hsb-ai-est-val {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
  }

  .hsb-ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .hsb-ai-badge-emerald {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
  }

  .hsb-ai-badge-rose {
    background: rgba(244, 63, 94, 0.1);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
  }

  .hsb-ai-badge-sky {
    background: rgba(235, 216, 176, 0.1);
    color: #ebd8b0;
    border: 1px solid rgba(235, 216, 176, 0.35);
    box-shadow: 0 0 10px rgba(235, 216, 176, 0.25);
  }

  .hsb-ai-chart-container {
    height: 150px;
    margin: 10px 0;
    width: 100%;
    position: relative;
  }

  /* QUALITY OF LIFE */
  .hsb-ai-score-ring {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
  }

  .hsb-ai-score-big {
    font-size: 36px;
    font-weight: 800;
    color: #ebd8b0;
  }

  .hsb-ai-dev-card {
    background: rgba(255, 255, 255, 0.05);
    /* Slightly brighter background */
    padding: 12px;
    border-radius: 12px;
    margin-top: 10px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .hsb-ai-dev-card strong {
    color: #fff !important;
    /* Force white for titles */
    display: block;
    margin-top: 8px;
    font-size: 14px;
  }

  .hsb-ai-dev-card p {
    color: #cbd5e1 !important;
    /* High contrast gray/white */
    line-height: 1.5;
    margin-top: 5px !important;
  }

  .hsb-ai-dev-impact {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-right: 5px;
  }

  /* SMART COMPARISON */
  .hsb-ai-why-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hsb-ai-why-list li {
    font-size: 13px;
    color: #ccd6f6;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }

  .hsb-ai-why-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #ebd8b0;
  }

  .hsb-ai-portal-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
  }

  .hsb-ai-portal-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .hsb-ai-portal-btn:hover {
    background: rgba(235, 216, 176, 0.15);
    border-color: rgba(235, 216, 176, 0.4);
    color: #fff;
  }

  /* ENVIRONMENTAL */
  .hsb-ai-env-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hsb-ai-env-stat {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
  }

  .hsb-ai-env-stat:hover {
    background: rgba(235, 216, 176, 0.05);
    border-color: rgba(235, 216, 176, 0.25);
  }

  .hsb-ai-env-label {
    font-size: 11px;
    color: #ebd8b0;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .hsb-ai-env-val {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .hsb-ai-error {
    display: none;
    text-align: center;
    padding: 20px;
    color: #f43f5e;
    font-size: 14px;
    background: rgba(244, 63, 94, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(244, 63, 94, 0.1);
  }

  @media (max-width: 768px) {
    .hsb-ai-container {
      padding: 16px !important;
      margin-top: 30px !important;
      overflow: hidden !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .hsb-ai-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .hsb-ai-actions {
      width: 100%;
      flex-direction: column;
      gap: 10px;
    }

    .hsb-ai-title {
      font-size: 18px;
    }

    .hsb-ai-generate-btn {
      width: 100%;
      justify-content: center;
    }

    .hsb-ai-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      margin-bottom: 16px;
    }

    .hsb-ai-tab-btn {
      flex-shrink: 0;
    }

    .hsb-ai-results {
      grid-template-columns: 1fr;
      width: 100%;
    }

    .hsb-ai-card {
      padding: 16px;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .hsb-ai-est-val {
      font-size: 24px;
      word-break: break-word;
    }

    #ai-growth-meta {
      flex-direction: column;
      gap: 4px;
    }
  }

  /* ================= AI MARKET INTELLIGENCE END ================= */

  /* ================= FULLSCREEN PHOTO LIGHTBOX ================= */
  .hero img {
    cursor: zoom-in;
  }

  /* Amazon-style hover magnifier: zoom into the region under the cursor */
  .hero img {
    transition: transform 0.18s ease-out;
    will-change: transform;
  }

  .hero.is-zooming img {
    transform: scale(2.4);
  }

  .hsb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 10, 20, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    touch-action: none;
  }

  .hsb-lightbox.is-open {
    display: flex;
  }

  /* When promoted to the native fullscreen element, fill the whole screen so
     the photo maximizes the available viewing area (portrait or landscape). */
  .hsb-lightbox:fullscreen,
  .hsb-lightbox:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.hsb-lb-lock {
    overflow: hidden;
  }

  .hsb-lb-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
  }

  .hsb-lb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
  }

  .hsb-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(235, 216, 176, 0.55);
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ebd8b0;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    transition: background .2s, transform .2s, box-shadow .2s;
  }

  .hsb-lb-close:hover {
    background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%);
    color: #061121;
    border-color: rgba(235, 216, 176, 0.9);
    box-shadow: 0 6px 20px rgba(235, 216, 176, 0.4);
  }

  .hsb-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(235, 216, 176, 0.55);
    border-radius: 50%;
    background: rgba(6, 17, 33, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ebd8b0;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    transition: background .2s, transform .2s, box-shadow .2s;
  }

  .hsb-lb-nav:hover {
    background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%);
    color: #061121;
    border-color: rgba(235, 216, 176, 0.9);
    box-shadow: 0 6px 20px rgba(235, 216, 176, 0.4);
  }

  .hsb-lb-prev {
    left: 18px;
  }

  .hsb-lb-next {
    right: 18px;
  }

  .hsb-lb-nav.is-hidden,
  .hsb-lb-counter.is-hidden {
    display: none;
  }

  .hsb-lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
  }

  /* Phones in portrait (narrow) and landscape (short) both get an edge-to-edge,
     full-bleed photo so no viewing area is wasted on padding/margins. */
  @media (max-width: 768px), (max-height: 600px) and (orientation: landscape) {
    .hsb-lb-stage {
      padding: 0;
    }

    .hsb-lb-img {
      border-radius: 0;
      width: 100%;
      height: 100%;
    }

    .hsb-lb-nav {
      width: 44px;
      height: 44px;
      font-size: 18px;
    }

    .hsb-lb-prev {
      left: 8px;
    }

    .hsb-lb-next {
      right: 8px;
    }

    .hsb-lb-close {
      top: 12px;
      right: 12px;
    }
  }

  /* ================= FULLSCREEN PHOTO LIGHTBOX END ================= */

  /* =================================================================
     COMPACT DASHBOARD REDESIGN (property details UI refresh)
     Pure presentational layer — no markup/backend logic changed.
     ================================================================= */

  /* Tighter page so the layout reads as one compact dashboard */
  .page {
    max-width: 1240px;
    padding: 108px 16px 28px;
  }

  .grid {
    gap: 20px;
    align-items: start;
  }

  /* Cleaner, flatter cards that match the reference mock (drop the
     heavy gold offset shadow + dashed inner ring for a crisp look) */
  .card,
  .box {
    border: 1px solid rgba(235, 216, 176, 0.20) !important;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .card {
    border-radius: 18px;
    padding: 18px;
  }

  .card::after,
  .box::after {
    display: none !important;
  }

  /* ---------- HERO + INFO (two-column top) ---------- */
  .hero-top {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: stretch;
  }

  .hero-top .hero {
    /* 340px is the floor, not the ceiling: object-fit crops portrait and
       landscape alike, and stretching to the info column's height keeps the
       left side of the top block from ending in a dead band */
    height: 100%;
    min-height: 340px;
  }

  .hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hero-info .title-row {
    margin-top: 0;
    align-items: flex-start;
    gap: 14px;
  }

  .hero-info .title {
    font-size: 20px;
    line-height: 1.25;
  }

  .hero-info .price {
    font-size: 24px;
    color: var(--gold-primary);
    white-space: nowrap;
  }

  .hero-info .text-right {
    margin: 0;
  }

  .hero-info .meta {
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    color: #fff;
    font-size: 14px;
  }

  .hero-info .meta-address {
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
  }

  /* ---------- SAVE PROPERTY ROW ----------
     Full width under the two-column top block: heart, the CTA pill, and the
     copy that says what saving actually gets you. */
  .hero-save {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
  }

  .hero-save-ic {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(235, 216, 176, 0.22);
    color: var(--gold-primary);
    font-size: 22px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
  }

  .hero-save-ic:hover,
  .hero-save-ic:focus-visible {
    background: rgba(235, 216, 176, 0.12);
    border-color: var(--gold-primary);
    transform: translateY(-1px);
    outline: none;
  }

  .hero-save-btn {
    flex: 0 0 auto;
    min-width: 250px;
    border: none;
    border-radius: 999px;
    padding: 17px 30px;
    background: linear-gradient(135deg, #ebd8b0, #c5ad83);
    color: #061121;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2);
    transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
  }

  .hero-save-btn:hover,
  .hero-save-btn:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(235, 216, 176, 0.28);
    outline: none;
  }

  /* ---------- SAVED STATE (js/hsb-favourites.js) ----------
     .is-saved is set on every Save control for the listing at once: the
     heart goes solid red and the label reads "Saved". Clicking again removes
     the save and the outlined heart comes back. */
  .hero-save-ic.is-saved {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.55);
  }

  /* !important because css/styles.css colours every <i> on the site
     `#f2f2f2 !important`; without it the saved heart stays white. */
  .hero-save-ic.is-saved [data-fav-icon],
  .fav-action.is-saved [data-fav-icon] {
    color: var(--danger) !important;
  }

  .hero-save-ic.is-saved:hover,
  .hero-save-ic.is-saved:focus-visible {
    background: rgba(239, 68, 68, 0.16);
    border-color: var(--danger);
  }

  .fav-action.is-saved {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.45);
  }

  /* A short beat on the heart when it is clicked -- added by the script on
     click only, never on page load. */
  [data-fav-icon].fav-pop {
    animation: hsbFavPop .35s ease-out;
  }

  @keyframes hsbFavPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-fav-icon].fav-pop {
      animation: none;
    }
  }

  .hero-save-copy {
    min-width: 0;
  }

  .hero-save-copy p {
    margin: 0;
    color: var(--gold-primary);
    font-size: 14px;
    line-height: 1.45;
  }

  .hero-save-copy span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
  }

  @media (max-width: 900px) {
    .hero-save {
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-save-copy {
      flex: 1 1 100%;
    }
  }

  @media (max-width: 480px) {
    .hero-save-btn {
      flex: 1 1 auto;
      min-width: 0;
      padding: 15px 20px;
    }
  }

  /* ---------- FEATURE BADGE ROW ---------- */
  .feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
  }

  .feat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(235, 216, 176, 0.16);
    white-space: nowrap;
  }

  .feat-badge i {
    font-size: 12px;
    color: var(--gold-primary);
  }

  .feat-badge.fb-available {
    color: #b8f7cf;
    border-color: rgba(93, 255, 154, 0.30);
  }

  .feat-badge.fb-available i {
    color: #5dff9a;
  }

  .feat-badge.fb-sold {
    color: #ffc9c9;
    border-color: rgba(253, 109, 109, 0.30);
  }

  .feat-badge.fb-sold i {
    color: #fd6d6d;
  }

  .feat-badge.fb-pending i {
    color: orange;
  }

  .feat-badge.fb-ai i {
    color: #c4b5fd;
  }

  /* ---------- LISTED BY (listing party) ----------
     One component, driven entirely by the $lp array. Sits between the address
     and the feature badges so the responsible party is identified before any
     long-form detail. */
  .listed-by {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(235, 216, 176, 0.22);
  }

  /* Header row: the eyebrow anchors left, the role/status chips fill the space
     to its right that would otherwise sit empty on short identities. */
  .lb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }

  .lb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold-primary);
  }

  .lb-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .lb-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(235, 216, 176, 0.14);
    border: 1px solid rgba(235, 216, 176, 0.30);
    color: var(--gold-primary);
    font-weight: 700;
    font-size: 15px;
  }

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

  /* min-width:0 lets the identity column shrink instead of forcing the row
     wider than the card on narrow screens. */
  .lb-identity {
    flex: 1 1 180px;
    min-width: 0;
  }

  .lb-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text);
    overflow-wrap: anywhere;
  }

  .lb-check {
    flex: 0 0 auto;
    font-size: 13px;
    color: #5dff9a;
  }

  .lb-org {
    margin-top: 2px;
    font-size: 13px;
    color: var(--secondary-text);
    overflow-wrap: anywhere;
  }

  .lb-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }

  .lb-role,
  .lb-inst,
  .lb-pending {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(235, 216, 176, 0.12);
    border: 1px solid rgba(235, 216, 176, 0.40);
    color: var(--gold-primary);
    white-space: nowrap;
  }

  .lb-inst {
    background: rgba(253, 109, 109, 0.12);
    border-color: rgba(253, 109, 109, 0.40);
    color: #ffc9c9;
  }

  .lb-pending {
    background: rgba(255, 165, 0, 0.12);
    border-color: rgba(255, 165, 0, 0.38);
    color: #ffd28a;
  }

  /* Neutral, not a warning: the listing's reference number at its source,
     shown so a buyer can check it against the MLS. */
  .lb-feedref {
    background: rgba(235, 216, 176, 0.10);
    border-color: rgba(235, 216, 176, 0.36);
    color: #ebd8b0;
  }

  /* Stands in for the CTA button when there is nobody to route a chat to. */
  .lb-note {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    line-height: 1.45;
  }

  .lb-note i {
    color: #ebd8b0;
    margin-top: 2px;
  }

  /* Actions share one row and split the full width, so no ragged gap is left
     beside a short identity. */
  .lb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .lb-cta-btn,
  .lb-profile-btn {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease, background .18s ease;
  }

  /* The basis values decide the wrap point: side by side they need 180+120+gap,
     so a container narrower than ~310px breaks them onto separate rows, where
     flex-grow then stretches each one to the full width. No dead gap either way. */
  .lb-cta-btn {
    flex: 3 1 180px;
    border: none;
    background: linear-gradient(135deg, #d4af37 0%, #ebd8b0 100%);
    color: #0b1120;
  }

  .lb-profile-btn {
    flex: 1 1 120px;
    border: 1px solid rgba(235, 216, 176, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-primary);
    text-decoration: none;
  }

  .lb-profile-btn:hover {
    background: rgba(235, 216, 176, 0.12);
    color: var(--gold-primary);
  }

  .lb-cta-btn:hover {
    filter: brightness(1.08);
  }

  .lb-cta-btn[disabled] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(235, 216, 176, 0.22);
    color: var(--secondary-text);
    cursor: not-allowed;
  }

  .lb-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--secondary-text);
  }

  /* ---------- OWNER CLAIM (inside LISTED BY) ----------
     "Is this yours?" put to the reader, under the listing party's own details.
     A thin divider separates it so it never reads as part of the attribution
     above, and it sits BELOW .lb-actions so the agent's contact and profile
     buttons stay the first thing under the agent's name. */
  .lb-claim {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(235, 216, 176, 0.18);
  }

  .lb-claim-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--primary-text);
  }

  .lb-claim-text {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--secondary-text);
  }

  .lb-claim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid rgba(235, 216, 176, 0.45);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
  }

  .lb-claim-btn:hover {
    background: rgba(235, 216, 176, 0.12);
    border-color: rgba(235, 216, 176, 0.7);
  }

  .lb-claim-pending {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid rgba(255, 165, 0, 0.30);
  }

  .lb-claim-pending[hidden],
  .lb-claim-btn[hidden] {
    display: none;
  }

  .lb-claim-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 165, 0, 0.12);
    border: 1px solid rgba(255, 165, 0, 0.38);
    color: #ffd28a;
  }

  .lb-claim-pending p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--secondary-text);
  }

  /* ---------- OWNER CLAIM MODALS ----------
     One overlay, two cards: the sign-in gate and the claim form. Built in the
     page's existing dark + gold language (see .hsb-lightbox / talkToOwnerModal). */
  .hbc-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 14, 0.82);
    backdrop-filter: blur(5px);
    overflow-y: auto;
  }

  .hbc-overlay.is-open {
    display: flex;
  }

  .hbc-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 34px 28px 28px;
    border-radius: 20px;
    background: linear-gradient(160deg, #0f1a2c 0%, #0a1322 100%);
    border: 1px solid rgba(235, 216, 176, 0.55);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    color: var(--primary-text);
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 216, 176, 0.3) transparent;
  }

  .hbc-card::-webkit-scrollbar {
    width: 6px;
  }
  .hbc-card::-webkit-scrollbar-track {
    background: transparent;
  }
  .hbc-card::-webkit-scrollbar-thumb {
    background: rgba(235, 216, 176, 0.3);
    border-radius: 6px;
  }
  .hbc-card::-webkit-scrollbar-thumb:hover {
    background: rgba(235, 216, 176, 0.5);
  }

  .hbc-card.hbc-wide {
    max-width: 820px;
    padding: 26px 28px 22px;
    text-align: left;
  }

  @media (min-height: 520px) and (min-width: 681px) {
    .hbc-card.hbc-wide {
      overflow-y: hidden;
    }
  }

  .hbc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }

  .hbc-close:hover {
    color: var(--primary-text);
    background: rgba(255, 255, 255, 0.08);
  }

  .hbc-gate {
    text-align: center;
  }

  .hbc-gate-ic {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 2px solid var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--gold-primary);
  }

  .hbc-h {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary-text);
  }

  .hbc-p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--secondary-text);
  }

  .hbc-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }

  .hbc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .18s ease, background .18s ease;
  }

  .hbc-gate-actions .hbc-btn {
    flex: 1 1 140px;
    padding: 13px 16px;
    font-size: 14px;
  }

  .hbc-btn-gold {
    border: none;
    background: linear-gradient(135deg, #d4af37 0%, #ebd8b0 100%);
    color: #0b1120;
  }

  .hbc-btn-gold:hover {
    filter: brightness(1.08);
    color: #0b1120;
  }

  .hbc-btn-line {
    border: 1px solid rgba(235, 216, 176, 0.6);
    background: transparent;
    color: var(--primary-text);
  }

  .hbc-btn-line:hover {
    background: rgba(235, 216, 176, 0.10);
    color: var(--primary-text);
  }

  .hbc-addr {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-primary);
  }

  .hbc-fee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 0;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(235, 216, 176, 0.08);
    border: 1px solid rgba(235, 216, 176, 0.28);
    font-size: 13px;
    color: var(--primary-text);
  }

  .hbc-fee b {
    color: var(--gold-primary);
    font-size: 16px;
  }

  /* 2-COLUMN GRID */
  .hbc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    margin-top: 14px;
  }

  .hbc-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .hbc-field {
    margin-top: 0;
  }

  .hbc-field-note {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .hbc-field-note .hbc-note {
    flex: 1;
    min-height: 96px;
    height: 100%;
    resize: none;
  }

  .hbc-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--primary-text);
  }

  .hbc-label small {
    font-weight: 400;
    color: var(--secondary-text);
  }

  .hbc-select,
  .hbc-note {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color .18s ease, background .18s ease;
  }

  .hbc-select:focus,
  .hbc-note:focus {
    outline: none;
    border-color: rgba(235, 216, 176, 0.6);
    background: rgba(255, 255, 255, 0.08);
  }

  .hbc-select option {
    background: #0f1a2c;
    color: #ffffff;
  }

  .hbc-drop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px dashed rgba(235, 216, 176, 0.45);
    background: rgba(255, 255, 255, 0.03);
    color: var(--secondary-text);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }

  .hbc-drop:hover {
    background: rgba(235, 216, 176, 0.08);
    border-color: rgba(235, 216, 176, 0.7);
    color: var(--primary-text);
  }

  .hbc-drop i {
    color: var(--gold-primary);
    font-size: 14px;
    flex-shrink: 0;
  }

  .hbc-drop span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hbc-drop.has-file {
    border-style: solid;
    border-color: rgba(93, 255, 154, 0.5);
    background: rgba(93, 255, 154, 0.06);
    color: var(--primary-text);
  }

  .hbc-drop.has-file i {
    color: #5dff9a;
  }

  .hbc-drop input {
    display: none;
  }

  /* BEAUTIFUL CUSTOM CHECKBOX */
  .hbc-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 13px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(235, 216, 176, 0.18);
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .hbc-check:hover {
    background: rgba(235, 216, 176, 0.05);
    border-color: rgba(235, 216, 176, 0.38);
  }

  .hbc-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
  }

  .hbc-check-box {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 5px;
    background: rgba(10, 19, 34, 0.9);
    border: 1.5px solid rgba(235, 216, 176, 0.45);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hbc-check-box svg {
    width: 11px;
    height: 9px;
    transform: scale(0);
    opacity: 0;
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .15s ease;
  }

  .hbc-check-input:checked + .hbc-check-box {
    background: linear-gradient(135deg, #d4af37 0%, #ebd8b0 100%);
    border-color: #ebd8b0;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }

  .hbc-check-input:checked + .hbc-check-box svg {
    transform: scale(1);
    opacity: 1;
  }

  .hbc-check-input:focus-visible + .hbc-check-box {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }

  .hbc-check:has(.hbc-check-input:checked) {
    background: rgba(235, 216, 176, 0.05);
    border-color: rgba(235, 216, 176, 0.4);
  }

  .hbc-check-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.45;
    color: var(--secondary-text);
    transition: color .2s ease;
  }

  .hbc-check:has(.hbc-check-input:checked) .hbc-check-text {
    color: var(--primary-text);
  }

  .hbc-err {
    display: none;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    font-size: 12px;
    color: #fca5a5;
  }

  .hbc-err.is-on {
    display: block;
  }

  .hbc-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
  }

  .hbc-form-actions .hbc-btn {
    flex: 0 1 auto;
    min-width: 130px;
    padding: 10px 18px;
  }

  @media (max-width: 680px) {
    .hbc-card.hbc-wide {
      max-width: 500px;
      padding: 24px 20px 20px;
    }
    .hbc-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .hbc-field-note .hbc-note {
      min-height: 72px;
    }
    .hbc-form-actions {
      flex-direction: column-reverse;
    }
    .hbc-form-actions .hbc-btn {
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .hbc-card {
      padding: 30px 18px 22px;
    }
  }

  /* ---------- CLAIM THIS LISTING ----------
     Sits directly under LISTED BY, and only on a syndicated row. The card above
     it has just said the listing came off a feed and that nobody on HOUSBE is
     behind it; this is the answer for the one person reading that who IS behind
     it. On a HOUSBE-listed property there is already an accountable owner, and
     asking "do you own this?" there would be an invitation to impersonate them.

     Deliberately a SEPARATE card rather than a third row inside .listed-by:
     everything in that card is a statement about the listing, and this is a
     question put to the reader. Merging them would let a claim prompt read as
     part of the attribution. */
  .claim-listing {
    margin-top: 12px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(235, 216, 176, 0.22);
  }

  .claim-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    /* Uppercase, and so set in CSS rather than typed that way into the heading:
       a screen reader is given the sentence, not the shouting. */
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.35;
    color: var(--primary-text);
  }

  .claim-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--secondary-text);
  }

  /* One per row, full width. The two roles are a genuine either/or -- an agent
     is not an owner -- so they are never set side by side where a hurried eye
     could read them as one control with a modifier. */
  .claim-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
  }

  .claim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease, background .18s ease, color .18s ease;
  }

  /* Gold for the agent, outline for the owner -- the same pair, and the same
     two colours, that .lb-cta-btn / .lb-profile-btn already use on the card
     above, so the page has one visual grammar for "primary" and "secondary"
     rather than a second one invented here. The ranking is by volume, not by
     importance: most syndicated rows name a listing agent, so that is the path
     most readers of this panel will want. */
  .claim-btn-agent {
    border: none;
    background: linear-gradient(135deg, #d4af37 0%, #ebd8b0 100%);
    color: #0b1120;
  }

  .claim-btn-agent:hover {
    filter: brightness(1.08);
    color: #0b1120;
  }

  .claim-btn-owner {
    border: 1px solid rgba(235, 216, 176, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-primary);
  }

  .claim-btn-owner:hover {
    background: rgba(235, 216, 176, 0.12);
    color: var(--gold-primary);
  }

  .claim-foot {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--secondary-text);
  }

  .claim-foot a {
    color: var(--gold-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  .claim-foot a:hover {
    text-decoration: underline;
  }


  /* ---------- PROPERTY INFO CARDS (inc/property_info.php) ----------
     Compact fact cards instead of the old full-width rows: two equal columns
     once the Property Info container is 640px wide, one below that. The
     column count follows the CONTAINER, not the viewport, because the same
     component sits in two places -- the wide desktop section and the narrow
     phone card under the price -- so .pi-wrap is the measured box.

     These are static facts. No hover lift, no pointer, no focus stop, no
     chevron, no decoration: nothing that suggests a card opens something.
     Text wraps rather than clipping, so the longest subtype and enlarged text
     (the site's A+ control) grow the card instead of being cut off.

     Every text rule sets its own family/size/weight/line-height/margins
     because css/styles.css restyles bare elements site-wide. */
  .pi-wrap {
    --pi-card: #10223D;
    --pi-border: #304764;
    --pi-text: #FFFFFF;
    --pi-muted: #B7C5DD;
    container-type: inline-size;
    margin-top: 14px;
  }

  /* Section heading with the short gold accent bar, as in the brief's
     mockup. On Description and Property Info, which share one panel there. */
  .section > h3.pd-head {
    position: relative;
    margin: 0;
    padding: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
  }

  .section > h3.pd-head::after,
  .pdm-info .pdm-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: #F4CE69;
  }

  .section > h3.pd-head + .desc {
    margin-top: 14px;
  }

  .pi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  @container (min-width: 640px) {
    .pi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Browsers without container queries (Safari < 16) measure the viewport
     instead: two columns only where the desktop section is certainly wide. */
  @supports not (container-type: inline-size) {
    @media (min-width: 1200px) {
      .pi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }

  .pi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 96px;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    border-radius: 14px;
    background: var(--pi-card);
    border: 1px solid var(--pi-border);
    box-shadow: none;
    cursor: default;
  }

  /* Ownership Type, when a listing has one: a seventh fact after the six, as a
     full row so the three-row grid above it keeps its pairs. */
  .pi-card--wide {
    grid-column: 1 / -1;
  }

  .pi-card .info-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    transition: none;
  }

  .pi-card .info-ico i {
    font-size: 16px;
  }

  .pi-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }

  .pi-label,
  .pi-value,
  .pi-sub {
    display: block;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .pi-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pi-muted);
  }

  .pi-value {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pi-text);
  }

  .pi-value--none {
    font-size: 17px;
    font-weight: 600;
    color: var(--pi-muted);
  }

  .pi-sub {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pi-muted);
  }

  .info-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f0e0ba 0%, #c5ad83 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .info-ico i {
    font-size: 16px;
    color: #061121;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.25));
  }

  /* Per-row icon tile colors — vivid glossy chip, matching the reference list */
  .info-ico.ico-purple {
    background: linear-gradient(145deg, #c49bff 0%, #7c3aed 100%);
    box-shadow:
      0 4px 14px rgba(124, 58, 237, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 10px rgba(0, 0, 0, 0.20);
  }
  .info-ico.ico-purple i { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

  .info-ico.ico-blue {
    background: linear-gradient(145deg, #7fb4ff 0%, #2563eb 100%);
    box-shadow:
      0 4px 14px rgba(37, 99, 235, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 10px rgba(0, 0, 0, 0.20);
  }
  .info-ico.ico-blue i { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

  .info-ico.ico-green {
    background: linear-gradient(145deg, #6ee7b7 0%, #059669 100%);
    box-shadow:
      0 4px 14px rgba(5, 150, 105, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 10px rgba(0, 0, 0, 0.20);
  }
  .info-ico.ico-green i { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

  .info-ico.ico-orange {
    background: linear-gradient(145deg, #ffb86b 0%, #ea580c 100%);
    box-shadow:
      0 4px 14px rgba(234, 88, 12, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 10px rgba(0, 0, 0, 0.20);
  }
  .info-ico.ico-orange i { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

  /* ---------- PROPERTY INFO ON PHONES (.pdm-info) ----------
     On a phone, Property Info sits directly under the price row as a card
     (the client's mockup) instead of far down the page. Same facts and same
     card component as that section -- $pd_facts is built once, in the
     hero-info block -- one column at phone width, with the living area as
     one full-width line under it.

     900px is where .hero-top stacks the photo above the info column, i.e.
     where this page turns into its one-column layout. Above it the card is
     not displayed and the original section stays exactly where it was; at
     and below it the card shows and that section (.pd-info-section) is
     hidden, so the rows are never on screen twice.

     Every text rule sets its own family/size/weight/line-height/margins
     because css/styles.css restyles bare h3/p site-wide, and nothing here
     relies on filter/backdrop-filter (the footer's iOS guard removes both). */
  .pdm-info {
    display: none;
  }

  @media (max-width: 900px) {
    .pd-info-section {
      display: none;
    }

    .hero-info .pdm-info {
      display: block;
      margin: 4px 0 2px;
      padding: 12px 10px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(235, 216, 176, 0.22);
      font-family: 'Outfit', sans-serif;
      text-align: left;
    }

    .pdm-info .pdm-title {
      position: relative;
      margin: 0 0 14px 2px;
      padding: 0 0 8px;
      border: 0;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0;
      text-transform: none;
      color: #fff;
    }

    .pdm-info .pi-wrap {
      margin-top: 0;
    }

    .pdm-info .pdm-area {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 2px;
      padding: 0;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
      color: #94a3b8;
      overflow-wrap: break-word;
    }

    .pdm-info .pi-wrap + .pdm-area {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border-soft);
    }

    .pdm-info .pdm-area i {
      flex: 0 0 auto;
      font-size: 13px;
      color: var(--gold-primary);
    }

    .pdm-info .pdm-area span {
      min-width: 0;
    }

    .pdm-info .pdm-area b {
      font-weight: 700;
      color: #fff;
    }
  }

  /* ---------- SECTIONS: tighter vertical rhythm ---------- */
  .section {
    padding-top: 14px;
    margin-top: 14px;
  }

  /* ---------- ACCORDION as compact cards (Schools / Landmark side-by-side) ---------- */
  .accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }

  .accordion details {
    border-top: none;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
  }

  .accordion details:first-child {
    grid-column: 1 / -1;
  }

  .accordion ul {
    grid-template-columns: 1fr;
  }

  /* ---------- RIGHT SIDEBAR ---------- */
  .sticky .box {
    margin-bottom: 14px;
    padding: 16px !important;
  }

  .sticky .box h4 {
    font-size: 16px;
  }

  .task-check-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 12px 0 !important;
  }

  .task-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
  }

  /* Gold, not the green this used to be: the ticks belong to the card's own
     accent — the same gold as the Start a Task button under them — and green
     reads as a status ("done") on a list of things nobody has done yet. */
  .task-check-list li i {
    color: var(--gold-primary);
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
    .hero-top {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-top .hero,
    .hero-info {
      min-width: 0;
    }

    .hero-top .hero {
      height: 240px;
      min-height: 0;
      /* The phone rule for .hero sets aspect-ratio: 16/9; with this fixed
         240px height that forced the width to 427px, wider than the 374px
         card at a 390px viewport, so the photo's right edge and the
         "View all photos" button were clipped. Let the height win. */
      aspect-ratio: auto;
    }

    .accordion {
      grid-template-columns: 1fr;
    }
  }

  /* Mobile: near-full-bleed — shrink the page side gutters to a slim 8px
     so the property card spans almost the entire viewport width, with a
     tighter card radius to match */
  @media (max-width: 768px) {
    .page {
      padding-left: 8px;
      padding-right: 8px;
    }

    .card,
    .box {
      border-radius: 12px;
    }

    /* Hero photo bleeds to the card edges (cancels the card's 18px padding) */
    .hero-top .hero {
      margin: -18px -18px 0;
      width: auto;
      max-width: none;
      border-radius: 12px 12px 0 0;
      border-left: none;
      border-right: none;
    }
  }

  /* ---------- CUSTOMER REVIEWS (reference mock layout) ---------- */
  .reviews-fullwidth > h4 {
    font-size: 20px;
    margin-bottom: 14px;
  }

  /* Flatten the inner panel — cards sit directly on the section */
  .reviews-fullwidth .reviews-section {
    background: transparent;
    border: none;
    padding: 0;
  }

  /* Summary row: score | breakdown bars | CTA */
  .rv-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 2px 4px 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 18px;
  }

  .rv-score {
    text-align: left;
  }

  .rv-stars-big {
    gap: 4px;
    margin-bottom: 6px;
  }

  .rv-stars-big .star {
    font-size: 30px;
    line-height: 1;
  }

  .rv-stars-big .star.half {
    background: linear-gradient(90deg, #fbbf24 50%, rgba(235, 216, 176, 0.25) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .rv-stars-big .star.empty {
    color: rgba(235, 216, 176, 0.25) !important;
  }

  .rv-outof {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }

  /* Breakdown bars */
  .rv-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }

  .rv-bar-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
  }

  .rv-bar-stars {
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
  }

  .rv-bar-stars .on {
    color: #fbbf24;
  }

  .rv-bar-stars .off {
    color: rgba(235, 216, 176, 0.22);
  }

  .rv-bar-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }

  .rv-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ebd8b0, #fbbf24);
  }

  .rv-bar-pct {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
  }

  /* CTA column */
  .rv-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .reviews-fullwidth .rv-cta .write-review-btn {
    border-radius: 999px;
    padding: 0.95rem 2.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 220px;
    background: linear-gradient(135deg, #ebd8b0, #c5ad83);
    color: #061121;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(197, 173, 131, 0.35);
  }

  .rv-total {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
  }

  /* Review cards: 2-column grid */
  .reviews-fullwidth #filter-review {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  .reviews-fullwidth #filter-review > p {
    grid-column: 1 / -1;
  }

  .reviews-fullwidth .review-card {
    margin-bottom: 0;
    padding: 16px 18px;
    border-radius: 14px;
  }

  /* Card internals: avatar + name/date row, stars underneath, then text */
  .reviews-fullwidth .review-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }

  .reviews-fullwidth .reviewer-avatar {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }

  .reviews-fullwidth .reviewer-name {
    font-size: 1rem;
  }

  .reviews-fullwidth .review-meta {
    font-size: 0.85rem;
  }

  .reviews-fullwidth .review-rating .star {
    font-size: 17px;
  }

  .reviews-fullwidth .review-content {
    margin-bottom: 0;
  }

  .reviews-fullwidth .review-text {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #fff;
  }

  /* Pagination replaces the old "View all review" link */
  .reviews-fullwidth .tf-btn {
    display: none !important;
  }

  .rv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }

  .rv-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .rv-page-btn:hover:not(:disabled) {
    border-color: var(--gold-primary);
  }

  .rv-page-btn.active {
    background: linear-gradient(135deg, #ebd8b0, #c5ad83);
    border-color: transparent;
    color: #061121;
  }

  .rv-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  @media (max-width: 900px) {
    .rv-summary {
      grid-template-columns: 1fr;
      gap: 18px;
      justify-items: start;
    }

    .rv-bars {
      margin: 0;
    }

    .rv-cta {
      align-items: flex-start;
    }

    .reviews-fullwidth #filter-review {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- REVIEW MODAL FIX (escape backdrop-filter trap) ---------- */
  .review-form-modal {
    z-index: 2147483200 !important;
    display: none;
    place-items: center;
    padding: 20px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow-y: auto;
  }

  .review-form-modal.active {
    display: grid;
  }

  /* Centered by the grid above — drop the absolute offset so it can't
     get clipped, and make the panel fully opaque (no bleed-through) */
  .review-form-modal .review-form-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: auto;
    background: linear-gradient(160deg, #0e1e37 0%, #061121 100%) !important;
    border: 1px solid rgba(235, 216, 176, 0.35) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    width: min(100%, 560px);
    max-height: calc(100vh - 40px);
  }

  /* Clickable star rating */
  #ratingStars {
    align-items: center;
    gap: 0.35rem;
  }

  #ratingStars .star-input {
    color: rgba(235, 216, 176, 0.28);
  }

  #ratingStars .star-input.active,
  #ratingStars .star-input.hovered {
    color: #fbbf24;
  }

  .star-rating-label {
    margin-left: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    align-self: center;
  }

  /* ================= SHARE MODAL ================= */
  /* Portalled to <body> by JS - the footer's backdrop-filter makes a stacking
     context that paints over fixed overlays on mobile otherwise. */
  .hsb-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 8, 17, 0.74);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .hsb-share-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .hsb-share-panel {
    position: relative;
    width: min(100%, 540px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px 26px 24px;
    border-radius: 22px;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(235, 216, 176, .10) 0%, transparent 55%),
      linear-gradient(160deg, #12233d 0%, #061121 100%);
    border: 1px solid rgba(235, 216, 176, 0.28);
    box-shadow:
      0 32px 80px rgba(0, 0, 0, .75),
      inset 0 1px 0 rgba(255, 255, 255, .09);
    transform: translateY(16px) scale(.97);
    transition: transform .22s ease;
  }

  .hsb-share-overlay.is-open .hsb-share-panel {
    transform: none;
  }

  /* Hairline of gold across the top edge */
  .hsb-share-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(235, 216, 176, .75), transparent);
  }

  .hsb-share-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
  }

  .hsb-share-head h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .01em;
    background: linear-gradient(92deg, #fbf1d9 0%, #ebd8b0 55%, #c5ad83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-primary);
  }

  .hsb-share-head p {
    margin: 6px 0 0;
    font-size: .9rem;
    line-height: 1.45;
    color: #b7c4d4;
  }

  .hsb-share-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }

  .hsb-share-close:hover,
  .hsb-share-close:focus-visible {
    background: rgba(235, 216, 176, .16);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    outline: none;
  }

  .hsb-share-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    margin-bottom: 22px;
    border-radius: 14px;
    border: 1px solid rgba(235, 216, 176, .16);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  }

  .hsb-share-preview img {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 11px;
    border: 1px solid rgba(235, 216, 176, .22);
    background: rgba(255, 255, 255, .06);
  }

  .hsb-share-preview .hsb-share-pv-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    color: #f2f6fa;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hsb-share-preview .hsb-share-pv-meta {
    margin-top: 5px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gold-primary);
  }

  /* "Share via" rule above the platform grid */
  .hsb-share-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a5ba;
  }

  .hsb-share-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(235, 216, 176, .28), transparent);
  }

  .hsb-share-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
  }

  .hsb-share-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 6px 12px;
    border-radius: 15px;
    border: 1px solid rgba(235, 216, 176, .14);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
    /* Labels must stay legible against the panel - this is the readable size, don't shrink it */
    color: #e6edf5;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  .hsb-share-opt:hover,
  .hsb-share-opt:focus-visible {
    border-color: rgba(235, 216, 176, .55);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .9);
    outline: none;
  }

  .hsb-share-opt i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    color: #fff;
    background: var(--hsb-brand, rgba(255, 255, 255, .1));
    box-shadow:
      0 6px 16px -6px var(--hsb-brand, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .hsb-share-opt:hover i,
  .hsb-share-opt:focus-visible i {
    transform: scale(1.06);
    box-shadow:
      0 10px 22px -6px var(--hsb-brand, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .35);
  }

  .hsb-share-opt[data-share="x"] i {
    border: 1px solid rgba(255, 255, 255, .28);
  }

  .hsb-share-opt[data-share="email"] i,
  .hsb-share-opt[data-share="sms"] i {
    color: #0b1626;
  }

  .hsb-share-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 7px 7px 16px;
    border-radius: 14px;
    border: 1px solid rgba(235, 216, 176, .22);
    background: rgba(0, 0, 0, .28);
    transition: border-color .18s ease;
  }

  .hsb-share-link-row:focus-within {
    border-color: rgba(235, 216, 176, .55);
  }

  .hsb-share-link-row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #d6e0ec;
    font: inherit;
    font-size: .88rem;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    outline: none;
  }

  .hsb-share-link-row button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #f4e6c6 0%, #ebd8b0 55%, #d9c197 100%);
    color: #0b1626;
    font: inherit;
    font-size: .87rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(235, 216, 176, .9);
    transition: filter .18s ease, box-shadow .18s ease;
  }

  .hsb-share-link-row button:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 24px -8px rgba(235, 216, 176, .95);
  }

  .hsb-share-native {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 12px;
    padding: 13px;
    border-radius: 13px;
    border: 1px solid rgba(235, 216, 176, .22);
    background: rgba(255, 255, 255, .03);
    color: #dbe4ee;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }

  .hsb-share-native:hover,
  .hsb-share-native:focus-visible {
    background: rgba(235, 216, 176, .12);
    border-color: var(--gold-primary);
    color: #fff;
    outline: none;
  }

  .hsb-share-toast {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(8px);
    padding: 8px 16px;
    border-radius: 8px;
    background: #fff;
    color: #0b7a3b;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  .hsb-share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  @media (max-width: 480px) {
    .hsb-share-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .hsb-share-panel {
      padding: 20px 16px 18px;
    }

    .hsb-share-opt {
      padding: 12px 2px 10px;
      gap: 8px;
      font-size: .72rem;
    }

    .hsb-share-opt i {
      width: 42px;
      height: 42px;
      font-size: 1.05rem;
    }

    .hsb-share-head h3 {
      font-size: 1.15rem;
    }

    .hsb-share-link-row button {
      padding: 11px 15px;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .hsb-share-overlay,
    .hsb-share-panel,
    .hsb-share-opt,
    .hsb-share-toast {
      transition: none;
    }
  }