/* The Blackkey front door. Lacquer black, brass, tesserae. One listing carries the page. */

body[data-area='home'] { background: var(--ground); overflow-x: hidden; display: block; }
.lp { --pad: clamp(16px, 5vw, 72px); color: var(--ink); }
.lp h1, .lp h2, .lp h3 { text-wrap: balance; }

/* ---------- nav with the product switch ---------- */
.lp-nav { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; height: 72px; padding: 0 var(--pad); transition: background var(--t) ease, border-color var(--t) ease; border-bottom: 1px solid transparent; }
.lp-nav.solid { background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--line); }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; justify-self: start; }
.lp-brand em { font-style: normal; color: var(--brass); }
.lp-brand .mark { width: 30px; height: 18px; }
.lp-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
.lp-switch-pill { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: var(--gold); transition: transform 480ms var(--ease); }
.side-agent .lp-switch-pill { transform: translateX(100%); }
.lp-switch button { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 750; font-size: 14.5px; cursor: pointer; transition: color var(--t) var(--ease); white-space: nowrap; }
.lp-switch button .icon { width: 17px; height: 17px; }
.lp-switch button.on { color: #140f04; }
.lp-switch button:not(.on):hover { color: var(--ink); }
.lp-switch button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.lp-nav-r { justify-self: end; display: flex; align-items: center; gap: 10px; }

/* the brass call to action */
.lp-gold { background: var(--gold); border-color: var(--gold); color: #140f04; font-weight: 750; gap: 10px; }
.lp-gold:hover:not(:disabled) { background: var(--gold-hi); border-color: var(--gold-hi); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8); }
.lp-gold .icon { transition: transform var(--t) var(--ease); }
.lp-gold:hover .icon { transform: translateX(3px); }

/* ---------- hero: copy that turns with the switch, the listing on the right ---------- */
.lp-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-ctas .btn { height: 52px; padding: 0 24px; font-size: 15.5px; }


/* ---------- the journey ---------- */

/* ---------- the family ---------- */

/* ---------- clean photos, your logo ---------- */

/* ---------- the plan ---------- */
.lp-plan { padding: clamp(64px, 9vw, 130px) var(--pad); border-top: 1px solid var(--line); display: grid; place-items: center; }
.lp-plan-card { width: min(760px, 100%); display: grid; gap: 20px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--panel); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line-2)); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95); }
.lp-plan-head { display: grid; gap: 10px; }
.lp-plan-mark .mark { width: 44px; height: 26px; }
.lp-plan-head h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.035em; }
.lp-plan-head p { color: var(--ink-2); font-size: 17px; }
.lp-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-po { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); }
.lp-po-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: 14.5px; }
.lp-po-name .icon { width: 18px; height: 18px; color: var(--gold-text); }
.lp-po small { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.lp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-price b { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--gold-text); }
.lp-price span { color: var(--ink-2); font-size: 16px; font-weight: 650; }
.lp-price-note { font-size: 13px; color: var(--ink-3); margin-top: -10px; }
.lp-feats { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.lp-feats li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.lp-feats .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gold-text); }
.lp-plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 8px; }
.lp-plan-foot .btn { height: 52px; padding: 0 26px; font-size: 15.5px; }
.lp-plan-foot small { color: var(--ink-3); font-size: 13px; }

/* ---------- close ---------- */
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 28px var(--pad); border-top: 1px solid var(--line); background: var(--panel); }
.lp-foot p { color: var(--ink-3); font-size: 14px; }
.lp-foot nav { margin-left: auto; display: flex; gap: 20px; }
.lp-foot nav a { color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: 14px; }
.lp-foot nav a:hover { color: var(--gold-text); }
.lp-foot small { color: var(--ink-3); }
.lp-foot .lp-legal { margin-left: 0; flex-basis: 100%; order: 9; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px 20px; }
.lp-foot .lp-legal a { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.lp-foot small { order: 10; }

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

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .lp-feats { grid-template-columns: minmax(0, 1fr); }
  .lp-prices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-nav { grid-template-columns: auto 1fr auto; height: 64px; gap: 10px; }
  .lp-nav-r .seg { display: none; }
  .lp-switch { justify-self: center; }
  .lp-switch button { padding: 0 12px; height: 36px; }
  .lp-switch button span { font-size: 0; }
  .lp-switch button span::after { font-size: 13.5px; }
  .lp-switch button[data-side='homes'] span::after { content: 'Homes'; }
  .lp-switch button[data-side='agent'] span::after { content: 'Agent'; }
  .lp-switch button .icon { display: none; }
  .lp-brand > span:last-child { display: none; }
}


/* ---------- the whole page turns with the switch ---------- */
@keyframes lp-face-in { from { opacity: 0; transform: translateY(14px); } }
.lp-page.in { animation: lp-face-in 560ms var(--ease) both; }
.lp-page { min-height: 100vh; }


/* Agent: the pixel hero from before, with the switch above it */
.lp-agent-hero .hp-copy.lp-a-copy { pointer-events: auto; top: clamp(130px, 22vh, 230px); }
.lp-a-copy h1 { max-width: 16ch; }
.lp-a-copy .lp-ctas { justify-content: center; margin-top: 30px; animation: rise 900ms var(--ease) both 460ms; }
.lp-ghost-dark { background: #0e0e0f; color: #ece8df; border-color: #333336; }
.lp-ghost-dark:hover:not(:disabled) { background: #1b1b1d; color: #fff; }
.side-agent .lp-nav:not(.solid) .lp-brand { color: #ece8df; }

@media (max-width: 760px) {
  .lp-nav { grid-template-columns: auto 1fr auto; }
  .lp-nav-r .seg { display: inline-flex; }
  .lp-nav-r .seg button { padding: 0 7px; min-width: 0; }
  .lp-signin { display: none; }
  .lp-agent-hero .hp-copy.lp-a-copy { top: 96px; }
  .lp-a-copy .lp-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* the Agent hero copy reads over the dashboard through a dark calm zone */
.lp-a-copy::before { content: ''; position: absolute; z-index: -1; inset: -64px -10vw -80px; background: radial-gradient(ellipse 62% 66% at 50% 48%, rgba(5, 5, 5, .95) 48%, rgba(5, 5, 5, .74) 70%, transparent 90%); pointer-events: none; }
/* mosaic fields stay in the brass family */
.lp-foot-lang { display: none; }
@media (max-width: 760px) {
  .lp-nav-r .seg { display: none; }
  .lp-signin { display: inline-flex; padding: 0 10px; }
  .lp-foot-lang { display: inline-flex; }
}

/* ================================================================
   Blackkey Homes side: the ss.ge front page, in lacquer and brass
   ================================================================ */
.lp.side-homes { background: var(--ground); }
.side-homes .lp-nav { background: var(--panel); border-bottom-color: var(--line); }
.side-homes .lp-nav.solid { background: color-mix(in srgb, var(--panel) 92%, transparent); }
.lp-post { display: none; gap: 6px; padding: 0 16px; border-radius: 999px; background: var(--ink); border-color: var(--ink); color: var(--ground); font-weight: 750; }
.lp-post:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
.lp-post .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.side-homes .lp-post { display: inline-flex; }
.lp-signin { gap: 6px; border-radius: 999px; }
.lp-signin .icon { width: 16px; height: 16px; }
.lp-signin.is-me { padding: 0 12px 0 4px; }
.lp-ava { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--gold); color: #140f04; font-size: 12.5px; font-weight: 800; }
.lp-theme { width: 34px; height: 34px; border-radius: 999px; }

.bh { padding-top: 72px; }
.bh-wrap { max-width: 1312px; margin: 0 auto; padding: 22px 16px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.bh-wrap > * { min-width: 0; }

/* hero: a dark mosaic stage holding the search, as ss.ge holds it over a photo */
.bh-hero { position: relative; border-radius: 22px; overflow: hidden; background: #070707; isolation: isolate; }
.bh-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; filter: grayscale(1) sepia(.55) saturate(1.3); }
.bh-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 72% 78% at 50% 46%, rgba(5, 5, 5, .94) 38%, rgba(5, 5, 5, .55) 72%, rgba(5, 5, 5, .12)); }
.bh-hero-in { padding: clamp(30px, 4.4vw, 54px) clamp(16px, 3.4vw, 44px) clamp(28px, 4vw, 48px); }
.bh-hero h1 { text-align: center; color: #ece8df; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: clamp(18px, 2.4vw, 28px); text-shadow: 0 2px 18px rgba(0, 0, 0, .9); }
html[lang='ka'] .bh-hero h1 { letter-spacing: 0; line-height: 1.15; }

/* stories: the newest homes as round thumbnails */
.bh-stories { margin-top: -10px; }
.bh-st-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.bh-st { flex: none; width: 104px; display: grid; justify-items: center; gap: 2px; text-align: center; color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.bh-st-ring { position: relative; width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; padding: 3px; background: var(--line-2); display: grid; place-items: center; overflow: hidden; transition: transform var(--t) var(--ease); }
.bh-st-ring img, .bh-st-ring .mark { display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--ground); background: var(--panel-2); }
.bh-st-ring .mark { padding: 26px 20px; }
.bh-st.is-vip .bh-st-ring { background: conic-gradient(from 200deg, #9a7630, var(--gold), #ecd29a, var(--gold), #9a7630); }
.bh-st:hover .bh-st-ring { transform: scale(1.05); }
.bh-st b { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.bh-st small { max-width: 100%; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-st-add .bh-st-ring { background: none; border: 2px dashed color-mix(in srgb, var(--gold) 70%, var(--line-2)); color: var(--gold-text); }
.bh-st-add .bh-st-ring .icon { width: 28px; height: 28px; }
.bh-st-add b { font-size: 12.5px; font-weight: 750; white-space: normal; line-height: 1.25; }
.bh-st-skel .bh-st-ring { background: var(--panel-2); }
.bh-st-skel b, .bh-st-skel small { width: 60px; height: 10px; border-radius: 4px; background: var(--panel-2); }
.bh-st-skel small { width: 44px; }
.bh-st-empty { align-self: center; display: grid; gap: 4px; padding: 0 8px; max-width: 46ch; }
.bh-st-empty b { font-size: 16px; }
.bh-st-empty span { color: var(--ink-2); font-size: 14.5px; }

/* sections */
.bh-sec[hidden] { display: none; }
.bh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.bh-head h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; letter-spacing: -.02em; }
html[lang='ka'] .bh-head h2 { letter-spacing: 0; }
.bh-head h2 .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 18%, var(--panel)); color: var(--gold-text); }
.bh-head h2 i { font-style: normal; font-weight: 600; color: var(--ink-3); font-size: 16px; }
.bh-head a { color: var(--ink); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.bh-head a:hover { text-decoration-color: var(--gold); }
.bh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bh-skel { aspect-ratio: 4 / 4.4; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }

/* popular: photo cards with the price over the picture */
.bh-pop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.bh-pc { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #101011; color: #fff; text-decoration: none; }
.bh-pc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.bh-pc:hover img { transform: scale(1.05); }
.bh-pc-in { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.bh-pc-in b { font-size: 17px; font-weight: 800; }
.bh-pc-in span { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #e6e3dc; }

/* find it easily: five photo tiles, each one a way into Homes */
.bh-easy { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 14px; }
.bh-t-big { grid-row: span 2; }
.bh-tile { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #0b0b0c; isolation: isolate; color: #fff; text-decoration: none; }
.bh-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease); }
.bh-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78)); pointer-events: none; }
.bh-tile:hover > img { transform: scale(1.05); }
.bh-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.bh-tile-in { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; }
.bh-tile h3 { color: #fff; font-size: 19px; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.bh-t-big h3 { font-size: clamp(22px, 2.2vw, 28px); }
html[lang='ka'] .bh-tile h3 { letter-spacing: 0; }
.bh-tile-go { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; transition: background var(--t-fast), color var(--t-fast); }
.bh-tile-go .icon { width: 15px; height: 15px; transition: transform var(--t-fast); }
.bh-tile:hover .bh-tile-go { background: #ece8df; color: #0a0a0a; }
.bh-tile:hover .bh-tile-go .icon { transform: translateX(2px); }

/* the post banner */
.bh-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgba(212, 172, 85, .2), transparent 55%), #0b0b0c; border: 1px solid color-mix(in srgb, var(--gold) 35%, #222); color: #ece8df; }
.bh-banner-mark .mark { width: 56px; height: 33px; }
.bh-banner h2 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; }
html[lang='ka'] .bh-banner h2 { letter-spacing: 0; }
.bh-banner p { margin-top: 4px; color: #aeaba4; font-size: 15px; }
.bh-banner .btn { height: 50px; padding: 0 22px; border-radius: 12px; gap: 8px; }

/* services */
.bh-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bh-svc-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; transition: border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.bh-svc-i:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 18px 30px -24px rgba(0, 0, 0, .5); }
.bh-svc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 16%, var(--panel)); color: var(--gold-text); }
.bh-svc-ic .icon { width: 21px; height: 21px; }
.bh-svc-i > .icon { width: 17px; height: 17px; color: var(--ink-3); }

/* link columns, ss.ge footer style */
.bh-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 10px; padding: 34px 0 44px; border-top: 1px solid var(--line); }
.bh-links h3 { margin-bottom: 14px; font-size: 14.5px; }
.bh-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bh-links a { color: var(--ink-2); font-size: 13.5px; text-decoration: none; }
.bh-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bh-col > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.bh-col > summary::-webkit-details-marker { display: none; }
.bh-col > summary .icon { display: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.side-homes .lp-foot { border-top: 1px solid var(--line); background: var(--panel); }

@media (max-width: 1100px) {
  .bh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-post span { display: none; }
  .lp-post { padding: 0 10px; }
}
@media (max-width: 760px) {
  .bh { padding-top: 64px; }
  .bh-wrap { gap: 26px; padding-top: 12px; }
  .bh-hero { border-radius: 18px; }
  .bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bh-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-easy { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 170px 170px; }
  .bh-t-big { grid-column: 1 / -1; grid-row: auto; }
  .bh-tile-go { display: none; }
  .bh-banner { grid-template-columns: 1fr; padding: 22px; }
  .bh-banner-mark { display: none; }
  /* services: a compact two-column grid of tiles instead of eight full-width rows */
  .bh-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bh-svc-i { grid-template-columns: 1fr; align-content: start; gap: 10px; min-height: 0; padding: 14px; font-size: 13.5px; line-height: 1.3; }
  .bh-svc-i > .icon { display: none; }
  .bh-svc-ic { width: 36px; height: 36px; border-radius: 10px; }
  .bh-svc-ic .icon { width: 18px; height: 18px; }
  .bh-easy { grid-template-rows: 190px 132px 132px; gap: 8px; }
  .bh-tile-in { padding: 14px; }
  .bh-tile h3 { font-size: 16px; }
  /* the link columns fold shut behind their headings */
  .bh-links { grid-template-columns: 1fr; gap: 0; padding: 8px 0 20px; }
  .bh-col { border-bottom: 1px solid var(--line); }
  .bh-col > summary { pointer-events: auto; cursor: pointer; min-height: 52px; }
  .bh-col > summary h3 { margin: 0; }
  .bh-col > summary .icon { display: block; }
  .bh-col[open] > summary .icon { transform: rotate(180deg); }
  .bh-col ul { padding-bottom: 16px; gap: 0; }
  .bh-col li a { display: flex; align-items: center; min-height: 38px; font-size: 14px; }
  .bh-st { width: 86px; }
  .bh-head h2 { font-size: 18px; min-width: 0; }
  .bh-head h2 i { display: none; }
  .bh-head a { flex: none; }
  .bh-st-ring { width: 78px; height: 78px; }

  .side-homes .lp-nav-r .lp-signin span { display: none; }
}
@media (max-width: 480px) {
  .bh-grid .kc-body { padding: 10px; }
  .bh-grid .kc-price b { font-size: 16px; }
}

/* the bar's contents sit in the same 1280px column as the page below, like myhome.ge:
   the logo starts where "ქირავდება" starts, and the account ends where the content ends */
.lp-nav { padding-inline: max(var(--pad), calc((100% - 1280px) / 2)); }
.lp-signin.is-me { max-width: 220px; min-width: 0; }
.lp-signin.is-me span:not(.lp-ava) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-nav-r { min-width: 0; }
@media (min-width: 1101px) { .lp-nav { padding-inline: max(16px, calc((100% - 1280px) / 2)); } }

/* ---------- the journey: a city of brass tiles in 3D (stays dark in both themes, like a photograph) ---------- */
.jx { background: #050505; }
.jx-track { position: relative; height: 470vh; }
.jx-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; color: #ece8df; background: radial-gradient(55% 45% at 50% 62%, rgba(212, 172, 85, .12), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(212, 172, 85, .06), transparent 70%), #050505; }

/* the city */
.jx-world { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 28%; }
.jx-cam { width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.jx-board { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.jx-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #050505; opacity: var(--dim, 0); }
.jx-strip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-b { position: absolute; width: 54px; height: 54px; transform-style: preserve-3d; background: #111113; border-radius: 2px; }
.jx-b.street { background: #0b0b0c; }
.jx-b i { position: absolute; display: block; }
.jx-b .top { inset: 0; border-radius: 2px; background: linear-gradient(135deg, #26262b, #1c1c20); transform: translateZ(var(--h)); transition: background-color 400ms ease, box-shadow 400ms ease; }
.jx-b .f1 { left: 0; top: 100%; width: 100%; height: var(--h); background: linear-gradient(#18181c, #121214); transform-origin: top; transform: rotateX(90deg); }
.jx-b .f2 { left: 100%; top: 0; width: var(--h); height: 100%; background: linear-gradient(90deg, #1d1d21, #151518); transform-origin: left; transform: rotateY(-90deg); }
/* lit windows: a building whose listing was just viewed */
.jx-b.lit .top { background: linear-gradient(135deg, #e8c77e, #b8913f); box-shadow: 0 0 22px rgba(212, 172, 85, .5); }
/* the listing: brass all the way up, a pin pulsing on its roof while Radar finds it */
.jx-b.hero .top { background: linear-gradient(135deg, #f1dca8, #d4ac55); box-shadow: 0 0 46px rgba(212, 172, 85, .6); }
.jx-b.hero .f1 { background: linear-gradient(#b8913f, #7a6230); }
.jx-b.hero .f2 { background: linear-gradient(90deg, #9a7630, #6b5524); }
.jx-b.hero .top::after { content: ''; position: absolute; inset: -34px; border-radius: 50%; border: 2px solid #e8c77e; opacity: 0; }
.jx-b.hero .top::after { animation: jx-ping 1.6s cubic-bezier(.16, 1, .3, 1) infinite; animation-play-state: running; }
.jx[style*='--pin: 0'] .jx-b.hero .top::after { animation: none; opacity: 0; }
@keyframes jx-ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.jx-sweep { position: absolute; left: -440px; top: -440px; width: 880px; height: 880px; border-radius: 50%; pointer-events: none; transform: translateZ(1px); opacity: var(--sweep, 0);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(212, 172, 85, .05) 300deg, rgba(212, 172, 85, .38) 358deg, transparent 360deg), repeating-radial-gradient(circle, transparent 0 109px, rgba(212, 172, 85, .14) 110px 111px);
  animation: jx-spin 3.4s linear infinite; }
@keyframes jx-spin { to { transform: translateZ(1px) rotate(360deg); } }

/* the cards: screen-space 3D above the city */
.jx-cards { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1200px; transform-style: preserve-3d; pointer-events: none; }
.jx-card, .jx-stats { grid-area: 1 / 1; opacity: 0; will-change: transform, opacity; }
.jx-card { width: 300px; overflow: hidden; border-radius: 18px; background: #121213; border: 1px solid #2a2a2d; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.jx-bh { border-color: #6b5524; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(212, 172, 85, .35); }
.jx-strip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid #222225; font-size: 12px; font-weight: 750; }
.jx-strip i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.jx-mh .jx-strip i { background: #26b571; } .jx-ss .jx-strip i { background: #2c61f2; } .jx-bh .jx-strip i { background: #d4ac55; }
.jx-now { display: none; }
.jx-card.is-homes .jx-was { display: none; } .jx-card.is-homes .jx-now { display: inline; }
.jx-was { color: #aeaba4; }
.jx-stamp { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(43, 179, 156, .16); color: #5fd3bf; font-style: normal; font-size: 11px; opacity: 0; transform: scale(1.7) rotate(-10deg); transition: opacity 200ms ease, transform 460ms cubic-bezier(.34, 1.56, .64, 1); }
.jx-stamp .icon { width: 12px; height: 12px; stroke-width: 3; }
.jx-card.stamped .jx-stamp { opacity: 1; transform: none; }
.jx-photo { aspect-ratio: 16 / 10; background: #0d0d0e; overflow: hidden; }
.jx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jx-info { display: grid; gap: 5px; padding: 12px 14px 14px; }
.jx-price { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.jx-price small { font-size: 12.5px; font-weight: 600; color: #8f8b83; letter-spacing: 0; }
.jx-title { margin: 0; font-size: 13.5px; font-weight: 600; }
.jx-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #aeaba4; }
.jx-facts span { display: inline-flex; align-items: center; gap: 5px; }
.jx-facts .icon { width: 14px; height: 14px; color: #7d7a74; }
.jx-stats { width: 236px; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(18, 18, 19, .94); border: 1px solid #2a2a2d; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); }
.jx-live { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 750; color: #aeaba4; }
.jx-live i { width: 8px; height: 8px; border-radius: 50%; background: #2bb39c; box-shadow: 0 0 0 4px rgba(43, 179, 156, .18); }
.jx-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jx-nums b { display: block; font-size: 32px; font-weight: 800; line-height: 1; color: #ecd29a; letter-spacing: -.02em; }
.jx-nums span { display: block; margin-top: 4px; font-size: 12px; color: #8f8b83; }
.jx-cap-s { margin: 0; font-size: 11.5px; color: #7d7a74; }
.jx-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.jx-bars i { flex: 1; height: calc(var(--v) * 10% * var(--bars, 0)); border-radius: 3px 3px 0 0; background: #d4ac55; opacity: .9; transition: height 300ms ease; }

/* the step rail on the right */
.jx-rail { position: absolute; z-index: 3; right: var(--pad); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.jx-rail i { display: block; width: 10px; height: 10px; border-radius: 2px; background: #2a2a2d; transition: background-color 300ms ease, box-shadow 300ms ease; }
.jx-rail i.done { background: #6b5524; }
.jx-rail i.on { background: #d4ac55; box-shadow: 0 0 0 4px rgba(212, 172, 85, .2); }

@media (max-width: 760px) {
  .jx-track { height: 320vh; }
  .jx-rail { top: 22px; transform: none; display: flex; }
  .jx-stats { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-sweep, .jx-b.hero .top::after { animation: none; }
  .jx-stamp, .jx-bars i, .jx-b .top { transition: none; }
}

/* ---------- the key and the two doors (same black and brass as the hero and the city above: one piece) ---------- */
.dk { background: #050505; }
.dk-track { position: relative; height: 320vh; }
.dk-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: radial-gradient(55% 45% at 50% 62%, rgba(212, 172, 85, .12), transparent 70%), #050505; }
.dk-scene { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 40%; transform-style: preserve-3d; }
/* a dark floor with a brass grid running away from you */
.dk-floor { position: absolute; left: 50%; top: 66%; width: 2600px; height: 1500px; margin-left: -1300px; transform-origin: top center; transform: rotateX(80deg);
  background: repeating-linear-gradient(90deg, rgba(212, 172, 85, .16) 0 1px, transparent 1px 90px), repeating-linear-gradient(0deg, rgba(212, 172, 85, .16) 0 1px, transparent 1px 90px);
  -webkit-mask-image: radial-gradient(50% 55% at 50% 0%, #000 0%, transparent 100%); mask-image: radial-gradient(50% 55% at 50% 0%, #000 0%, transparent 100%); }
.dk-spill { position: absolute; left: 50%; top: 66%; width: 1100px; height: 600px; margin-left: -550px; transform-origin: top center; transform: rotateX(80deg); background: radial-gradient(50% 40% at 50% 0%, rgba(232, 199, 126, .55), transparent 70%); opacity: var(--glow, 0); pointer-events: none; }

/* the key: cubes in the logo's shape */
.dk-key { position: absolute; left: 50%; top: 34%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform, opacity; }
.dk-key-in { transform-style: preserve-3d; }
.dk-cube { --s: 30px; position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); transform-style: preserve-3d; transform: translate3d(calc(var(--x) * (var(--s) + 5px)), calc(var(--y) * (var(--s) + 5px)), 0); }
.dk-cube b { position: absolute; inset: 0; border-radius: 4px; }
.dk-cube .fr { background: linear-gradient(135deg, #e8c77e, #c49a3c); transform: translateZ(calc(var(--s) / 2)); box-shadow: 0 0 24px rgba(212, 172, 85, .35); }
.dk-cube .bk { background: #8a6a24; transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.dk-cube .tp { background: #f1dca8; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.dk-cube .bt { background: #6b5524; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dk-cube .lf { background: #b8913f; transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.dk-cube .rt { background: #9a7630; transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }

/* the doors: frame with depth, a leaf that swings in, and what is behind it */
.dk-door { position: absolute; left: 50%; top: calc(66% - 400px); width: 240px; height: 400px; margin-left: -120px; display: block; transform-style: preserve-3d; color: inherit; text-decoration: none; will-change: transform, opacity; outline: none; }
.dk-door::before { content: ''; position: absolute; inset: -14px -14px 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #1c1b18, #0f0f0e); box-shadow: 0 0 0 1px #2a2620 inset, 0 40px 80px -30px rgba(0, 0, 0, .95); transform: translateZ(-2px); }
.dk-jamb { position: absolute; top: -14px; bottom: 0; width: 34px; background: linear-gradient(180deg, #121211, #0a0a09); }
.dk-jamb.l { left: -14px; transform-origin: left; transform: rotateY(90deg); }
.dk-jamb.r { right: -14px; transform-origin: right; transform: rotateY(-90deg); }
.dk-head { position: absolute; left: -14px; right: -14px; top: -14px; height: 34px; background: #151513; transform-origin: top; transform: rotateX(-90deg); }
.dk-room { position: absolute; inset: 0; overflow: hidden; background: #0a0a0a; }
.dk-room img { width: 100%; height: 100%; object-fit: cover; opacity: calc(.1 + .9 * var(--open, 0)); transform: scale(calc(1.12 - .08 * var(--open, 0))); transition: transform 600ms var(--ease); }
.dk-agent .dk-room img { object-position: 0 0; }
@media (max-width: 760px) { .dk-agent .dk-room img { object-position: 30% 0; } }
.dk-room::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 100%, rgba(232, 199, 126, calc(.35 * var(--glow, 0))), transparent 60%); }
.dk-leaf { position: absolute; inset: 0; transform-style: preserve-3d; }
.dk-agent .dk-leaf { transform-origin: left center; }
.dk-homes .dk-leaf { transform-origin: right center; }
.dk-face { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 40px; border-radius: 4px 4px 0 0; background: linear-gradient(160deg, #1a1a1d 0%, #101012 60%, #0c0c0d 100%); box-shadow: inset 0 0 0 1px #2c2c30, inset 0 0 0 10px #0d0d0f, inset 0 0 0 11px #2a2a2e; backface-visibility: hidden; }
.dk-sym { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, rgba(212, 172, 85, .16), rgba(212, 172, 85, .04)); box-shadow: inset 0 0 0 1px rgba(212, 172, 85, .45); }
.dk-sym .icon { width: 42px; height: 42px; color: #e0bd6e; stroke-width: 1.6; }
.dk-hole { width: 14px; height: 24px; border-radius: 7px 7px 3px 3px; background: radial-gradient(circle at 50% 35%, #fff2cf, #d4ac55 70%); opacity: calc(.22 + .78 * var(--hole, 0)); box-shadow: 0 0 calc(var(--hole, 0) * 26px) rgba(232, 199, 126, calc(var(--hole, 0) * .9)); }
.dk-edge { position: absolute; top: 0; bottom: 0; width: 12px; background: #1d1d20; }
.dk-agent .dk-edge { right: 0; transform-origin: right; transform: rotateY(90deg); }
.dk-homes .dk-edge { left: 0; transform-origin: left; transform: rotateY(-90deg); }
.dk-door:hover .dk-room img, .dk-door:focus-visible .dk-room img { transform: scale(1.02); }
.dk-door:focus-visible::before { box-shadow: 0 0 0 3px #d4ac55, 0 40px 80px -30px rgba(0, 0, 0, .95); }
@media (max-width: 760px) {
  .dk-track { height: 210vh; }
  .dk-door { top: calc(66% - 330px); width: 190px; height: 330px; margin-left: -95px; }
  .dk-face { gap: 28px; }
  .dk-sym { width: 66px; height: 66px; } .dk-sym .icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .dk-room img { transition: none; } }

/* the Homes / Agent switch is pinned to the exact centre of the page, so it never moves when you switch sides.
   The buttons on the right make room for it as the screen narrows instead. */
.lp-switch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lp-nav-r { grid-column: 2; }
/* short labels: the logo beside it already says Blackkey */
.lp-switch button { padding: 0 16px; gap: 7px; }
.lp-switch button span { font-size: 0; }
.lp-switch button span::after { font-size: 13.5px; }
.lp-switch button[data-side='homes'] span::after { content: 'Homes'; }
.lp-switch button[data-side='agent'] span::after { content: 'Agent'; }
@media (max-width: 1280px) { .lp-post span { display: none; } .lp-post { padding: 0 10px; } }
@media (max-width: 1100px) {
  .lp-signin:not(.is-me) span, .lp-nav .hs-me-n { display: none; }
  .lp-signin:not(.is-me) { padding: 0 10px; }
}
@media (max-width: 900px) {
  .lp-brand > span:last-child { display: none; }
  .lp-nav-r [data-lang-switch] { display: none !important; }
  .lp-switch button .icon { display: none; }
}
@media (max-width: 760px) { .lp-nav { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 900px) { .lp-foot-lang { display: inline-flex; } }
/* phones: the switch stays in the centre; the theme button moves to the footer beside the language switch */
.lp-foot-theme { display: none; }
@media (max-width: 760px) {
  .lp-nav-r .lp-theme { display: none; }
  .lp-foot-theme { display: inline-grid; }
  .lp-switch button { padding: 0 11px; height: 34px; }
}
/* the smallest phones: the switch shows just its house and briefcase */
@media (max-width: 370px) {
  .lp-switch button { width: 42px; padding: 0; }
  .lp-switch button span { display: none; }
  .lp-switch button .icon { display: block !important; width: 17px; height: 17px; }
}
@media (max-width: 760px) { .lp-nav .hs-me { padding: 0 4px; } .lp-nav .hs-me > .icon:last-child { display: none; } }
/* nothing on the page may push it wider than the screen (it would drag the centred switch with it) */
.lp-page { overflow-x: clip; }
@media (max-width: 760px) { .lp-foot nav { margin-left: 0; } .lp-foot { gap: 12px 20px; padding: 24px 16px; } }
/* phones: the same scenes, played over a shorter scroll */
@media (max-width: 760px) { .lp-agent-hero.hp-hero { height: 145vh; } }
/* tablets: the tiles get too narrow for a title and the "see homes" pill side by side; the whole tile is the link anyway */
@media (max-width: 1100px) { .bh-tile-go { display: none; } }