.hp-preview, .hp-preview *, .hp-preview *::before, .hp-preview *::after { box-sizing: border-box; }
   .hp-preview { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #23262B; background: #fff; -webkit-font-smoothing: antialiased; }
   .hp-preview a { color: #FC4A0A; text-decoration: none; }
   .hp-preview a:hover { color: #d63e08; }
   .hp-preview button { font-family: inherit; }
   .hp-preview img { max-width: 100%; }
   .hp-preview ::selection { background: #FFD9C7; }
   /* Design shows a thin visible scrollbar on desktop horizontal-scroll
      rows (not hidden) and only hides it on mobile, where swipe is used
      instead - see the mobile-only override further down. */
   .hp-preview .hp-scroll { scrollbar-width: thin; scrollbar-color: #e6ddd4 transparent; }
   .hp-preview .hp-scroll::-webkit-scrollbar { height: 6px; }
   .hp-preview .hp-scroll::-webkit-scrollbar-track { background: transparent; }
   .hp-preview .hp-scroll::-webkit-scrollbar-thumb { background: #e6ddd4; border-radius: 6px; }

   /* ---------- Layout shell ---------- */
   .hp-preview .hp-shell { max-width: 1280px; margin: 0 auto; overflow: hidden; }

   /* ---------- Header ---------- */
   .hp-preview .hp-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid #f0eae3; }
   .hp-preview .hp-header-inner { display: flex; align-items: center; gap: 36px; padding: 14px 40px; }
   .hp-preview .hp-logo-img { height: 38px; width: auto; display: block; }
   .hp-preview .hp-nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 600; color: #3a3f47; }
   .hp-preview .hp-nav a.active { color: #FC4A0A; }
   .hp-preview .hp-header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
   .hp-preview .hp-post-btn { position: relative; overflow: hidden; border: 1.5px solid #FC4A0A; color: #FC4A0A; background: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; animation: hpBtnPulseOutline 2.4s ease-in-out infinite; }
   .hp-preview .hp-post-btn:hover { color: #FC4A0A; background: #FFF2EC; }
   .hp-preview .hp-post-btn .hp-free-badge { background: #FC4A0A; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 5px; margin-left: 4px; }
   .hp-preview .hp-post-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(252,74,10,.2), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; }
   @keyframes hpBtnPulseOutline { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,74,10,.35); } 50% { box-shadow: 0 0 0 7px rgba(252,74,10,0); } }
   .hp-preview .hp-avatar { width: 38px; height: 38px; border-radius: 50%; background: #FFF2EC; color: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; overflow: hidden; border: 1px solid #f6dccb; cursor: pointer; padding: 0; transition: .2s ease; }
   .hp-preview .hp-avatar:hover { background: #FC4A0A; color: #fff; border-color: #FC4A0A; }
   .hp-preview .hp-avatar img { width: 100%; height: 100%; object-fit: cover; }
   .hp-preview .hp-profile-trigger { position: relative; display: flex; align-items: center; }
   /* Logged-in header trigger as a bordered chip/card (avatar + name +
      account-type label) instead of a bare button, matching the real
      site's .user-account-chip in header.blade.php. */
   .hp-preview .hp-profile-chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #ece3d9; border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer; font-family: inherit; box-shadow: 0 6px 16px -10px rgba(58,40,20,.35); transition: .2s ease; }
   .hp-preview .hp-profile-chip:hover { border-color: #f6dccb; box-shadow: 0 8px 20px -10px rgba(58,40,20,.45); }
   .hp-preview .hp-profile-chip-avatar { width: 40px; height: 40px; border-radius: 50%; background: #FFF2EC; color: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; flex-shrink: 0; }
   .hp-preview .hp-profile-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
   .hp-preview .hp-profile-chip-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; text-align: left; }
   .hp-preview .hp-profile-chip-name { font-size: 14px; font-weight: 700; color: #23262B; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .hp-preview .hp-profile-chip-type { font-size: 11.5px; font-weight: 600; color: #9a9089; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

   /* Profile dropdown (shown when logged in) */
   .hp-preview .hp-profile-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid #eee3d9; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.3); min-width: 200px; padding: 8px; z-index: 60; }
   .hp-preview .hp-profile-menu.open { display: block; }
   .hp-preview .hp-profile-menu a, .hp-preview .hp-profile-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; font-weight: 600; color: #3a3f47; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: inherit; }
   .hp-preview .hp-profile-menu a:hover, .hp-preview .hp-profile-menu button:hover { background: #FFF2EC; color: #c0410a; }
   .hp-preview .hp-profile-menu .hp-profile-logout { color: #c0410a; border-top: 1px solid #f5efe8; margin-top: 4px; padding-top: 12px; display: flex; align-items: center; gap: 8px; }
   .hp-preview .hp-profile-logout:disabled { color: #b3a99f; cursor: default; }
   .hp-preview .hp-btn-spinner { width: 13px; height: 13px; border: 2px solid #f0dfd3; border-top-color: #c0410a; border-radius: 50%; animation: hpSpin .7s linear infinite; flex-shrink: 0; }
   .hp-preview .hp-profile-logout:disabled .hp-btn-spinner { border-top-color: #b3a99f; }
   @keyframes hpSpin { to { transform: rotate(360deg); } }

   /* ==========================================================
      REAL AUTH MODAL SYSTEM - the markup/classes/ids and the JS behavior
      ported from the live site's template.blade.php + custom.css stay
      exactly as-is (that's the proven, business-critical registration
      flow), but the visual styling below is this page's own design
      language - Plus Jakarta Sans (inherited from .hp-preview, no
      font-family override needed here) and the same warm cream/orange
      palette used everywhere else on this page, instead of the old
      site's Konnect font and #ff5a00 styling. ========================== */

   .property-selector-overlay { position: fixed; inset: 0; background: rgba(35,38,43,.6); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 0; visibility: hidden; transition: .3s ease; }
   /* Google's .pac-container defaults to z-index:1000, which renders behind
      the modal overlay (z-index:99999) above - the suggestions still work,
      they're just invisible without this. */
   .pac-container { z-index: 999999 !important; }
   .property-selector-overlay.show { opacity: 1; visibility: visible; }
   .property-selector { width: 460px; max-width: 92vw; background: #fff; border-radius: 22px; padding: 36px 32px; position: relative; border: 1px solid #f2ebe3; box-shadow: 0 24px 60px -28px rgba(58,40,20,.35); }
   .property-close-btn { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 28px; color: #9a9089; z-index: 5; }
   .property-selector-overlay .mobile-header { display: none; }
   .mobile-card { background: transparent; padding: 0; }
   .mobile-card h2 { font-family: 'Newsreader', serif; font-size: 24px; line-height: 1.3; font-weight: 500; color: #23262B; margin-bottom: 22px; }
   .property-options { display: flex; flex-direction: column; gap: 12px; }
   .property-item input { display: none; }
   .property-item label { height: 56px; border: 1px solid #ece3d9; border-radius: 11px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: #23262B; background: #faf7f3; transition: .25s; }
   .property-item label:before { content: ""; width: 18px; height: 18px; border: 1px solid #cfc3b6; border-radius: 50%; margin-right: 12px; flex-shrink: 0; }
   .property-item input:checked + label { background: #FC4A0A; border-color: #FC4A0A; color: #fff; box-shadow: 0 10px 22px -10px rgba(252,74,10,.6); }
   .property-item input:checked + label:before { background: #fff; border-color: #fff; }
   .continue-btn { width: 100%; height: 52px; margin-top: 18px; border: none; border-radius: 11px; background: #FC4A0A; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); }
   .onboarding-terms { margin-top: 12px; margin-bottom: 0; text-align: center; font-size: 12px; line-height: 18px; color: #7b8089; }
   .onboarding-link { color: #FC4A0A; text-decoration: none; font-weight: 600; }
   .onboarding-link:hover { text-decoration: underline; }
   .name-input-wrapper { margin-top: 10px; }
   .name-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #ece3d9; border-radius: 11px; background: #faf7f3; font-size: 15px; font-weight: 600; color: #23262B; outline: none; }
   .name-input:focus { border-color: #FC4A0A; }
   .login-error-name-message { margin-top: 8px; font-size: 12px; color: #e53935; }
   .otp-subtitle { font-size: 14px; color: #7b8089; margin-bottom: 24px; line-height: 1.5; }
   .otp-input-wrapper { display: flex; gap: 12px; margin-bottom: 24px; }
   .otp-input { width: 56px; height: 56px; border: 1px solid #ece3d9; border-radius: 11px; text-align: center; font-size: 22px; font-weight: 700; background: #faf7f3; color: #23262B; }
   .otp-input:focus { border-color: #FC4A0A; outline: none; }
   .otp-resend-section { margin-bottom: 20px; font-size: 14px; color: #5f6570; }
   .otp-resend-btn { color: #FC4A0A; font-weight: 700; text-decoration: none; cursor: pointer; }
   .popup-terms-text { margin-top: 12px; text-align: center; font-size: 12px; line-height: 1.5; color: #7b8089; }
   .popup-terms-text a { color: #FC4A0A; text-decoration: none; }
   .login-phone-wrapper { display: flex; align-items: center; width: 100%; border: 1px solid #ece3d9; border-radius: 11px; overflow: hidden; background: #faf7f3; margin-top: 10px; }
   .country-code { min-width: 70px; height: 52px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ece3d9; font-weight: 700; color: #23262B; }
   .login-phone-input { flex: 1; border: none; outline: none; height: 52px; padding: 0 15px; font-size: 15px; font-weight: 600; background: transparent; color: #23262B; }
   .mobile-terms-text { margin-top: 16px; text-align: center; font-size: 12px; line-height: 18px; color: #7b8089; }
   .mobile-terms-text a { color: #FC4A0A; text-decoration: none; font-weight: 700; }
   .login-phone-error { display: none; margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: #FDEBEC; color: #FF2D55; font-size: 13px; font-weight: 500; }
   .login-phone-wrapper.error { border: 1px solid #FF2D55; box-shadow: 0 0 0 1px rgba(255,45,85,.15); }
   #otpModalOverlay .otp-success-message { width: 280px; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 5px; background: linear-gradient(to right, rgba(212,247,234,1), rgba(255,255,255,0)); border-radius: 30px; }
   .otp-success-icon { flex: 0 0 auto; }
   .location-search-wrapper { display: flex; align-items: center; gap: 10px; border: 1px solid #ece3d9; border-radius: 11px; padding: 0 14px; margin-top: 10px; background: #faf7f3; }
   .location-search-input { flex: 1; border: none; outline: none; height: 52px; font-size: 15px; font-weight: 600; color: #23262B; background: transparent; }
   .login-modal-title { font-family: 'Newsreader', serif; font-size: 24px; font-weight: 500; color: #23262B; margin: 0 0 12px; }
   .location-modal-description { font-size: 14px; color: #5f6570; line-height: 1.5; margin: 0 0 6px; }
   .login-continue-btn-a { width: 100%; height: 52px; margin-top: 18px; border: none; border-radius: 11px; background: #FC4A0A; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); }
   .login-modal-form { margin: 0; }
   .toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #23262B; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .3s ease; z-index: 999999; max-width: 90vw; text-align: center; }
   .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


   .hp-preview .hp-header-mobile { display: none; }
   .hp-preview .hp-header-mobile-inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
   .hp-preview .hp-logo-img-mobile { height: 30px; width: auto; display: block; }
   .hp-preview .hp-header-actions-mobile { margin-left: auto; display: flex; align-items: center; gap: 10px; }
   .hp-preview .hp-avatar-mobile { width: 38px; height: 38px; border-radius: 50%; background: #FC4A0A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; }
   .hp-preview .hp-avatar-mobile.hp-avatar-mobile-guest { background: #FFF2EC; color: #FC4A0A; border: 1px solid #f6dccb; }
   .hp-preview .hp-avatar-mobile .bi-person-fill { font-size: 19px; }

   /* ---------- Hero ---------- */
   .hp-preview .hp-hero { position: relative; padding: 0; background: linear-gradient(120deg,#FFF4EE 0%,#FFEDE3 40%,#fff 100%); }
   .hp-preview .hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
   .hp-preview .hp-hero-copy { padding: 64px 48px 120px; }
   .hp-preview .hp-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #f2e4d8; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #c0410a; }
   .hp-preview .hp-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ea44f; }
   .hp-preview .hp-hero-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 58px; line-height: 1.04; letter-spacing: -0.5px; margin: 22px 0 0; color: #23262B; }
   .hp-preview .hp-hero-accent { color: #FC4A0A; font-style: italic; }
   .hp-preview .hp-hero-sub { font-size: 17px; line-height: 1.6; color: #5f6570; max-width: 460px; margin: 20px 0 0; }
   .hp-preview .hp-hero-stats { display: flex; gap: 30px; margin-top: 34px; }
   .hp-preview .hp-hero-stat-num { font-family: 'Newsreader', serif; font-size: 30px; font-weight: 600; color: #23262B; }
   .hp-preview .hp-hero-stat-label { font-size: 13px; color: #7b8089; font-weight: 500; }
   .hp-preview .hp-hero-stat-divider { width: 1px; background: #ecdfd3; }
   .hp-preview .hp-hero-visual { position: relative; min-height: 440px; background: url('/front/assets/images/hp-preview/hero-image.webp') center / cover no-repeat; display: flex; align-items: center; justify-content: center; }

   /* Search card - the hero above bleeds full width, but the search card
      itself still lines up with the same 1280px container every section
      below it uses, so it doesn't stretch edge-to-edge on wide screens. */
   .hp-preview .hp-hero-search-wrap { max-width: 1280px; margin: 0 auto; position: relative; }
   .hp-preview .hp-search-card { position: relative; margin: -72px 48px 0; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(58,40,20,.35); border: 1px solid #f2ebe3; padding: 8px 8px 22px; z-index: 5; }
   .hp-preview .hp-search-tabs-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 0; flex-wrap: wrap; gap: 10px; }
   .hp-preview .hp-search-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
   .hp-preview .hp-tab-btn { font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 10px 18px; border: none; border-radius: 10px; background: transparent; color: #6f757e; cursor: pointer; }
   .hp-preview .hp-tab-btn.active { font-weight: 700; background: #FFF2EC; color: #c0410a; }
   .hp-preview .hp-search-right { display: flex; align-items: center; gap: 14px; }
   .hp-preview .hp-pid-btn { display: inline-flex; align-items: center; gap: 6px; background: #FFF2EC; color: #c0410a; border: 1px solid #f6dccb; font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
   .hp-preview .hp-verified-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #5f6570; cursor: pointer; }
   .hp-preview .hp-search-fields { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; padding: 16px 18px 0; }
   .hp-preview .hp-field-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9a9089; text-transform: uppercase; margin-bottom: 6px; }
   .hp-preview .hp-custom-select { position: relative; }
   .hp-preview .hp-field-select-btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; background: #faf7f3; border: 1px solid #ece3d9; border-radius: 11px; padding: 13px 15px; font-family: inherit; font-size: 15px; font-weight: 600; color: #23262B; cursor: pointer; gap: 8px; }
   .hp-preview .hp-select-arrow { color: #b3a99f; flex: 0 0 auto; }
   .hp-preview .hp-select-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin-top: 0; background: #fff; border: 1px solid #eee3d9; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); overflow: hidden; z-index: 20; max-height: 260px; overflow-y: auto; }
   .hp-preview .hp-select-dropdown.open { display: block; }
   .hp-preview .hp-select-option { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #3a3f47; cursor: pointer; border-bottom: 1px solid #f5efe8; }
   .hp-preview .hp-select-option:last-child { border-bottom: none; }
   .hp-preview .hp-select-option:hover { background: #faf7f3; }
   .hp-preview .hp-field-location { display: flex; align-items: center; gap: 10px; background: #faf7f3; border: 1px solid #ece3d9; border-radius: 11px; padding: 13px 15px; }
   .hp-preview .hp-field-location input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; font-weight: 600; color: #23262B; width: 100%; }
   /* Location pin with a radar-style pulse behind it, like a "your
      location" marker on a map, instead of a plain radio-button dot. */
   .hp-preview .hp-location-pin { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
   .hp-preview .hp-location-pin i { position: relative; z-index: 2; color: #FC4A0A; font-size: 16px; line-height: 1; }
   .hp-preview .hp-location-pin::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(252,74,10,.4); animation: hpLocationPulse 1.8s ease-out infinite; }
   @keyframes hpLocationPulse {
      0% { transform: scale(.6); opacity: .8; }
      70%, 100% { transform: scale(2.4); opacity: 0; }
   }
   .hp-preview .hp-search-btn { height: 48px; width: 100%; background: #FC4A0A; color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 15px; padding: 0 30px; border-radius: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px -10px rgba(252,74,10,.7); }
   .hp-preview .hp-search-btn:hover { background: #e04409; }
   .hp-preview .hp-search-btn:disabled { opacity: .7; cursor: default; }
   .hp-preview .hp-recent-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; font-size: 13px; color: #8a8079; flex-wrap: wrap; }
   .hp-preview .hp-recent-row-label { font-weight: 600; }
   .hp-preview .hp-recent-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #eee3d9; border-radius: 999px; padding: 5px 12px; font-weight: 600; color: #5f6570; cursor: pointer; text-decoration: none; }

   /* ---------- Where do you want to live? ---------- */
   .hp-preview .hp-cities-section { padding: 64px 48px 0; }
   .hp-preview .hp-section-head-center { text-align: center; margin-bottom: 34px; }
   .hp-preview .hp-section-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 36px; margin: 0; letter-spacing: -0.3px; }
   .hp-preview .hp-section-sub { color: #7b8089; font-size: 15.5px; margin: 10px 0 0; }
   .hp-preview .hp-cities-track { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; }
   .hp-preview .hp-city-card { flex: 0 0 220px; border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 12px 30px -22px rgba(0,0,0,.4); display: block; }
   .hp-preview .hp-city-card-img { height: 150px; width: 100%; object-fit: cover; display: block; }
   .hp-preview .hp-city-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 16px 14px; background: linear-gradient(transparent, rgba(20,12,6,.82)); }
   .hp-preview .hp-city-card-name { color: #fff; font-weight: 700; font-size: 15px; }
   .hp-preview .hp-city-card-count { color: #f3d9c8; font-size: 12px; font-weight: 500; margin-top: 2px; min-height: 15px; }

   /* ---------- Exclusive rental properties ---------- */
   .hp-preview .hp-listings-section { padding: 56px 48px 0; }
   .hp-preview .hp-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 12px; }
   .hp-preview .hp-see-all { font-weight: 700; font-size: 14px; }
   .hp-preview .hp-listings-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; }
   .hp-preview .hp-prop-card { flex: 0 0 300px; border: 1px solid #f0eae3; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -26px rgba(0,0,0,.4); }
   .hp-preview .hp-prop-img-wrap { position: relative; height: 190px; }
   .hp-preview .hp-prop-img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .hp-preview .hp-prop-tag { position: absolute; top: 12px; left: 12px; background: #fff; color: #c0410a; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
   .hp-preview .hp-prop-save { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); cursor: pointer; font-size: 15px; color: #c9bfb4; display: flex; align-items: center; justify-content: center; }
   .hp-preview .hp-prop-save.active { color: #FC4A0A; }
   .hp-preview .hp-prop-photos { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
   .hp-preview .hp-prop-body { padding: 15px 16px 18px; }
   .hp-preview .hp-prop-price-row { display: flex; align-items: center; justify-content: space-between; }
   .hp-preview .hp-prop-price { font-size: 20px; font-weight: 800; color: #23262B; }
   .hp-preview .hp-prop-price-suffix { font-size: 12px; font-weight: 600; color: #8a8079; }
   .hp-preview .hp-prop-verified { display: inline-flex; align-items: center; gap: 4px; background: #e9f7ee; color: #1f9d55; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
   .hp-preview .hp-prop-pid { font-size: 11px; color: #a59a8f; font-weight: 600; margin-top: 4px; }
   .hp-preview .hp-prop-title { font-size: 15px; font-weight: 700; margin-top: 8px; color: #23262B; }
   .hp-preview .hp-prop-location { font-size: 13px; color: #7b8089; margin-top: 3px; }
   .hp-preview .hp-prop-specs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
   .hp-preview .hp-prop-spec { font-size: 11.5px; font-weight: 600; color: #5f6570; background: #f8f4ef; border: 1px solid #eee3d9; padding: 4px 9px; border-radius: 7px; }
   .hp-preview .hp-prop-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid #f2ece5; gap: 10px; }
   .hp-preview .hp-prop-listed { font-size: 12px; color: #8a8079; font-weight: 600; white-space: nowrap; }
   .hp-preview .hp-prop-contact { background: #23262B; color: #fff; border: none; font-weight: 700; font-size: 12.5px; padding: 8px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap; }
   .hp-preview .hp-prop-contact:hover { color: #fff; background: #34383f; }
   .hp-preview .hp-scroll-nav { display: flex; align-items: center; gap: 10px; }
   .hp-preview .hp-scroll-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ece3d9; background: #fff; color: #23262B; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
   .hp-preview .hp-prop-actions { display: flex; align-items: center; gap: 8px; }
   .hp-preview .hp-prop-call { background: #FFF1E9; color: #c0410a; border: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
   .hp-preview .hp-prop-whatsapp { width: 34px; height: 34px; border-radius: 50%; border: none; background: #25D366; color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

   /* ---------- Explore by property type / What's your budget? ---------- */
   .hp-preview .hp-browse-section { padding: 64px 48px 0; }
   .hp-preview .hp-browse-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; }
   .hp-preview .hp-browse-sub { color: #7b8089; font-size: 15px; margin: 0 0 22px; }
   .hp-preview .hp-city-chips { display: flex; gap: 9px; margin-bottom: 22px; flex-wrap: wrap; }
   .hp-preview .hp-city-chip { font-family: inherit; font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 1px solid #ece3d9; background: #fff; color: #5f6570; cursor: pointer; white-space: nowrap; }
   .hp-preview .hp-city-chip.active { font-weight: 700; border-color: #FC4A0A; background: #FC4A0A; color: #fff; }
   .hp-preview .hp-type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
   .hp-preview .hp-type-tile { border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; height: 200px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; box-shadow: 0 12px 30px -24px rgba(0,0,0,.4); text-decoration: none; }
   .hp-preview .hp-type-tile-title { font-weight: 700; font-size: 17px; color: #23262B; max-width: 70%; }
   .hp-preview .hp-type-tile-ph { align-self: flex-end; background: url('/front/assets/images/hp-preview/flats-apartments.png') center / cover no-repeat; border-radius: 12px; width: 88px; height: 88px; }

   /* Services (Rent Agreement / Police Verification / Explore Locality) */
   .hp-preview .hp-services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; }
   .hp-preview .hp-service-card { position: relative; height: 170px; border-radius: 16px; overflow: hidden; border: 1px solid #f2ece5; cursor: pointer; box-shadow: 0 12px 30px -26px rgba(0,0,0,.35); text-decoration: none; display: block; }
   .hp-preview .hp-service-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; }
   .hp-preview .hp-service-card-fade { position: absolute; inset: 0; background: linear-gradient(100deg,#fff 22%,rgba(255,255,255,0) 62%); }
   .hp-preview .hp-service-card-title { position: relative; padding: 24px 0 0 26px; font-weight: 800; font-size: 18px; line-height: 1.3; color: #23262B; max-width: 130px; }
   .hp-preview .hp-budget-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
   .hp-preview .hp-budget-tile { border-radius: 16px; padding: 26px 20px; cursor: pointer; text-decoration: none; display: block; }
   .hp-preview .hp-budget-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #6b6157; text-transform: uppercase; }
   .hp-preview .hp-budget-amt { font-family: 'Newsreader', serif; font-size: 40px; font-weight: 600; color: #23262B; margin-top: 2px; }
   .hp-preview .hp-budget-count { font-size: 12.5px; color: #6b6157; font-weight: 600; margin-top: 4px; }

   /* ---------- Personal assistance ---------- */
   .hp-preview .hp-assist-section { padding: 64px 48px 0; }
   .hp-preview .hp-assist-card { background: #221f1c; border-radius: 22px; padding: 48px 44px; color: #fff; position: relative; overflow: hidden; }
   .hp-preview .hp-assist-glow { position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(252,74,10,.35),transparent 70%); pointer-events: none; }
   .hp-preview .hp-assist-top { position: relative; }
   .hp-preview .hp-assist-label { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #FC7A46; }
   .hp-preview .hp-assist-heading { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 12px 0 0; max-width: 520px; line-height: 1.15; }
   .hp-preview .hp-assist-accent { color: #FC7A46; font-style: italic; }
   /* Sits top-right next to the heading on desktop (card has its own
      48px/44px padding, so this aligns flush with it); on mobile it drops
      below the steps as a full-width button, matching the design's own
      two different layouts for this button rather than one compromise. */
   .hp-preview .hp-assist-btn { position: absolute; top: 0; right: 0; background: #FC4A0A; color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
   .hp-preview .hp-assist-btn:hover { color: #fff; background: #e04409; }
   .hp-preview .hp-assist-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 38px; position: relative; }
   .hp-preview .hp-assist-step { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 15px; padding: 22px 20px; }
   .hp-preview .hp-assist-num { width: 40px; height: 40px; border-radius: 11px; background: #FC4A0A; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
   .hp-preview .hp-assist-step-title { font-weight: 700; font-size: 17px; margin: 16px 0 8px; }
   .hp-preview .hp-assist-step-body { font-size: 13.5px; line-height: 1.55; color: #b9b3ac; margin: 0; }
   .hp-preview .hp-assist-step-body span { color: #FC7A46; font-weight: 600; }

   /* ---------- Post property CTA ---------- */
   .hp-preview .hp-postcta-section { padding: 56px 48px 0; }
   .hp-preview .hp-postcta-card { background: linear-gradient(110deg,#FFEDE3,#FFF6F0); border: 1px solid #f6dccb; border-radius: 22px; padding: 40px 44px; display: flex; align-items: center; gap: 40px; }
   .hp-preview .hp-postcta-photo { width: 180px; height: 130px; flex: 0 0 180px; border-radius: 14px; object-fit: cover; }
   .hp-preview .hp-postcta-copy { flex: 1; }
   .hp-preview .hp-postcta-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 32px; margin: 0; letter-spacing: -0.3px; line-height: 1.15; }
   .hp-preview .hp-postcta-sub { color: #5f6570; font-size: 15px; margin: 10px 0 0; max-width: 560px; }
   .hp-preview .hp-postcta-actions { display: flex; gap: 12px; }
   .hp-preview .hp-postcta-btn { position: relative; overflow: hidden; background: #FC4A0A; color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; animation: hpBtnPulse 2.4s ease-in-out infinite; }
   .hp-preview .hp-postcta-btn:hover { color: #fff; background: #e04409; }
   .hp-preview .hp-postcta-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; }
   @keyframes hpBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,74,10,.45); } 50% { box-shadow: 0 0 0 9px rgba(252,74,10,0); } }
   @keyframes hpBtnShimmer { 0% { left: -60%; } 45%, 100% { left: 130%; } }
   .hp-preview .hp-postcta-whatsapp { position: relative; overflow: hidden; background: #fff; color: #23262B; border: 1.5px solid #e6d8cc; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; animation: hpWhatsappPulse 2.4s ease-in-out infinite; }
   .hp-preview .hp-postcta-whatsapp i { color: #25D366; font-size: 18px; }
   .hp-preview .hp-postcta-whatsapp::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(37,211,102,.3), transparent); transform: skewX(-20deg); animation: hpBtnShimmer 3.4s ease-in-out infinite; animation-delay: 1.7s; }
   @keyframes hpWhatsappPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,0); } }
   .hp-preview .hp-postcta-mobile-title, .hp-preview .hp-postcta-mobile-sub { display: none; }

   /* ---------- Tools & calculators ---------- */
   .hp-preview .hp-tools-section { padding: 64px 48px 0; }
   .hp-preview .hp-tools-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; }
   .hp-preview .hp-tools-sub { color: #7b8089; font-size: 15px; margin: 0 0 24px; }
   .hp-preview .hp-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
   .hp-preview .hp-tool-card { border: 1px solid #f0eae3; border-radius: 16px; padding: 26px 24px; cursor: pointer; background: #fff; box-shadow: 0 12px 30px -26px rgba(0,0,0,.4); text-decoration: none; display: block; }
   .hp-preview .hp-tool-icon { width: 48px; height: 48px; border-radius: 13px; background: #FFF2EC; display: flex; align-items: center; justify-content: center; font-size: 22px; }
   .hp-preview .hp-tool-title { font-weight: 700; font-size: 18px; margin: 16px 0 6px; color: #c0410a; }
   .hp-preview .hp-tool-body { font-size: 14px; color: #6f757e; line-height: 1.5; }
   .hp-preview .hp-tool-cta { font-weight: 700; font-size: 13.5px; color: #FC4A0A; margin-top: 14px; }
   .hp-preview .hp-tool-arrow { display: none; }

   /* ---------- App download ---------- */
   .hp-preview .hp-app-section { padding: 64px 48px 0; }
   .hp-preview .hp-app-card { background: #221f1c; border-radius: 22px; padding: 46px 44px; display: flex; align-items: center; gap: 30px; position: relative; overflow: hidden; color: #fff; }
   .hp-preview .hp-app-glow { position: absolute; left: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle,rgba(252,74,10,.3),transparent 70%); pointer-events: none; }
   .hp-preview .hp-app-copy { flex: 1; position: relative; }
   .hp-preview .hp-app-badge { display: inline-block; background: #FC4A0A; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .04em; }
   .hp-preview .hp-app-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 32px; margin: 16px 0 0; }
   .hp-preview .hp-app-sub { color: #b9b3ac; font-size: 15px; margin: 10px 0 0; max-width: 520px; line-height: 1.6; }
   .hp-preview .hp-app-stores { display: flex; gap: 12px; margin-top: 22px; }
   .hp-preview .hp-app-store-btn { background: #000; border: 1px solid #3a3631; border-radius: 11px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
   .hp-preview .hp-app-store-btn i { font-size: 17px; }
   .hp-preview .hp-app-mockup { width: 240px; height: 200px; flex: 0 0 240px; border-radius: 16px; object-fit: contain; position: relative; z-index: 1; }

   /* ---------- Popular cities / SEO links ---------- */
   .hp-preview .hp-seo-section { padding: 64px 48px 0; }
   .hp-preview .hp-seo-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; }
   .hp-preview .hp-seo-sub { color: #7b8089; font-size: 15px; margin: 0 0 22px; }
   .hp-preview .hp-seo-tabs { display: flex; gap: 26px; border-bottom: 1px solid #f0eae3; margin-bottom: 26px; overflow-x: auto; }
   .hp-preview .hp-seo-tab { font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 0 2px 12px; border: none; background: transparent; color: #6f757e; border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; }
   .hp-preview .hp-seo-tab.active { font-weight: 700; color: #FC4A0A; border-bottom-color: #FC4A0A; }
   .hp-preview .hp-seo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
   .hp-preview .hp-seo-col-head { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
   /* All real links for the city/category show here (no cap), so the
      column scrolls internally instead of blowing out the section height. */
   .hp-preview .hp-seo-links { display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow-y: auto; padding-right: 6px; }
   .hp-preview .hp-seo-links::-webkit-scrollbar { width: 6px; }
   .hp-preview .hp-seo-links::-webkit-scrollbar-thumb { background: #e6ddd4; border-radius: 6px; }
   .hp-preview .hp-seo-links a { font-size: 13.5px; color: #6f757e; }
   .hp-preview .hp-seo-flat-grid { display: none; }

   /* ---------- Tenant videos (decorative - no real video source) ---------- */
   .hp-preview .hp-video-section { padding: 64px 48px 0; text-align: center; }
   .hp-preview .hp-video-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.3px; }
   .hp-preview .hp-video-title span { color: #FC4A0A; font-style: italic; }
   .hp-preview .hp-video-sub { color: #7b8089; font-size: 15px; margin: 0 0 26px; }
   .hp-preview .hp-video-frame { position: relative; max-width: 820px; margin: 0 auto; height: 420px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(135deg,#2a2622,#2a2622 10px,#332f2a 10px,#332f2a 20px); display: flex; align-items: center; justify-content: center; }
   .hp-preview .hp-video-play { width: 76px; height: 76px; border-radius: 50%; background: #FC4A0A; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; box-shadow: 0 14px 30px -10px rgba(252,74,10,.7); }

   /* ---------- Testimonials ---------- */
   .hp-preview .hp-testi-section { padding: 64px 48px 0; }
   .hp-preview .hp-testi-head { text-align: center; margin-bottom: 32px; }
   .hp-preview .hp-testi-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 34px; margin: 0; letter-spacing: -0.3px; }
   .hp-preview .hp-testi-title span { color: #FC4A0A; font-style: italic; }
   .hp-preview .hp-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
   .hp-preview .hp-testi-card { border: 1px solid #f0eae3; border-radius: 16px; padding: 26px 24px; background: #fff; box-shadow: 0 14px 34px -28px rgba(0,0,0,.4); }
   .hp-preview .hp-testi-stars { color: #FFB020; font-size: 16px; letter-spacing: 2px; }
   .hp-preview .hp-testi-quote { font-size: 15px; line-height: 1.65; color: #3a3f47; margin: 16px 0 20px; }
   .hp-preview .hp-testi-person { display: flex; align-items: center; gap: 12px; }
   .hp-preview .hp-testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: repeating-linear-gradient(135deg,#e6ddd2,#e6ddd2 6px,#eee5da 6px,#eee5da 12px); flex: 0 0 44px; }
   .hp-preview .hp-testi-name { font-weight: 700; font-size: 14.5px; }
   .hp-preview .hp-testi-role { font-size: 12.5px; color: #8a8079; }

   /* ---------- Footer ---------- */
   .hp-preview .hp-footer { margin-top: 72px; background: #1b1917; color: #c7c1ba; padding: 56px 48px 30px; }
   .hp-preview .hp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; }
   /* The real footer.png asset is white-on-transparent, made to sit
      directly on this dark footer - no white background pill needed
      (that was inherited from the design's own inline style, which
      assumed a different, dark-on-white logo asset). */
   .hp-preview .hp-footer-logo { height: 40px; width: auto; }
   .hp-preview .hp-footer-tagline { font-size: 14px; line-height: 1.6; margin: 18px 0 0; color: #9a938c; max-width: 280px; }
   .hp-preview .hp-footer-socials { display: flex; gap: 10px; margin-top: 18px; }
   .hp-preview .hp-footer-social { width: 36px; height: 36px; border-radius: 9px; background: #2c2926; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: #c7c1ba; }
   .hp-preview .hp-footer-col-head { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 16px; }
   .hp-preview .hp-footer-links { display: flex; flex-direction: column; gap: 11px; }
   .hp-preview .hp-footer-links a { font-size: 13.5px; color: #9a938c; }
   /* On desktop these three columns need to act as direct items of the
      outer 5-column .hp-footer-grid (matching its grid-template-columns);
      display:contents lets the wrapper disappear from layout while still
      existing in the DOM for the mobile 2-column grid below. */
   .hp-preview .hp-footer-cols-wrap { display: contents; }
   .hp-preview .hp-footer-contact { font-size: 13.5px; line-height: 1.9; color: #9a938c; }
   .hp-preview .hp-footer-contact i { width: 15px; margin-right: 6px; color: #c7856a; }
   .hp-preview .hp-footer-apps { display: flex; gap: 10px; margin-top: 16px; }
   .hp-preview .hp-footer-app-btn { background: #2c2926; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: #c7c1ba; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
   .hp-preview .hp-footer-app-btn i { font-size: 14px; }
   .hp-preview .hp-footer-bottom { border-top: 1px solid #2c2926; margin-top: 40px; padding-top: 22px; text-align: center; font-size: 12.5px; color: #7d766f; }

   /* ---------- Mobile bottom nav ---------- */
   .hp-preview .hp-bottom-nav { display: none; }

   /* ================= MOBILE (≤767px), values from the design's
      mobile mockup rather than scaled-down desktop values ================= */