/* 08 · Keystone & Co — real estate. White, slate and emerald; Bricolage Grotesque. A film of the house,
   numbers that roll, listings that reshuffle, a chart that grows, a feature with depth. */
.v-ks { --bg: #ffffff; --bg2: #f0f3f5; --fg: #1c2a39; --mut: #5f6f80; --acc: #0f7a50; --edge: #dbe2e8; background: var(--bg); color: var(--fg); font-family: "Bricolage Grotesque", var(--sans); --btn-r: 8px; --fx-bar-color: var(--acc); --fx-bar: var(--acc); --fx-chart-ink: var(--fg); --fx-chart-text: var(--mut); --fx-chart-grid: var(--edge); --fx-parallax-ink: #ffffff; }
.v-ks .ks-hero { min-height: 92svh; display: grid; align-content: end; color: #fff; background: #1c2a39; }
.v-ks .ks-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.v-ks .ks-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(28 42 57 / 0.1), rgb(28 42 57 / 0.72) 100%); pointer-events: none; }
.v-ks .ks-hero__in { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 100px) clamp(40px, 5vw, 72px); }
.v-ks h2 { font: 800 clamp(44px, 6.6vw, 104px)/0.96 "Bricolage Grotesque", var(--sans); letter-spacing: -0.035em; max-width: 14ch; }
.v-ks h2 em { font-style: normal; color: #7ee2b8; }
.v-ks .ks-hero .lede { margin-top: 20px; color: rgb(255 255 255 / 0.86); }
.v-ks .btn { background: var(--acc); color: #fff; }
.v-ks .ks-body { padding-block: clamp(56px, 7vw, 100px); }
.v-ks .stat b { font-family: "Bricolage Grotesque", var(--sans); color: var(--acc); }
.v-ks .ks-listings { margin-top: clamp(56px, 7vw, 96px); }
.v-ks [data-fx-filters] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.v-ks .ks-chip { font: 700 12px/1 "Bricolage Grotesque", var(--sans); letter-spacing: 0.06em; text-transform: uppercase; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--fg); }
.v-ks .ks-chip[aria-pressed="true"] { background: var(--fg); color: #fff; }
.v-ks .ks-result { margin-left: auto; color: var(--mut); font-size: 14px; }
.v-ks [data-fx-grid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.v-ks .ks-card { border: 1px solid var(--edge); border-radius: 14px; overflow: clip; background: var(--bg2); }
.v-ks .ks-card .ph { aspect-ratio: 4 / 3; }
.v-ks .ks-price { font: 800 22px/1 "Bricolage Grotesque", var(--sans); color: var(--acc); padding: 16px 16px 0; }
.v-ks .ks-card h3 { font: 700 18px/1.2 "Bricolage Grotesque", var(--sans); padding: 6px 16px 0; }
.v-ks .ks-card p:last-child { color: var(--mut); font-size: 14px; padding: 4px 16px 16px; }
.v-ks .ks-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.v-ks .ks-chart { aspect-ratio: 4 / 3; display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.v-ks .ks-chart__cap b { display: block; font: 700 20px/1.2 "Bricolage Grotesque", var(--sans); }
.v-ks .ks-chart__cap span { color: var(--mut); font-size: 14px; }
.v-ks .ks-chart text { font: 600 12px var(--sans); fill: var(--mut); }
.v-ks .ks-chart [data-fx-grid] line { stroke: var(--edge); }
.v-ks .ks-feature { border-radius: 18px; overflow: clip; }
.v-ks .ks-feature h3 { font: 700 clamp(20px, 2vw, 28px)/1.1 "Bricolage Grotesque", var(--sans); color: #fff; align-self: end; justify-self: start; margin: 22px; padding: 10px 14px; background: rgb(28 42 57 / 0.7); border-radius: 8px; }
.v-ks .fxlist { color: var(--mut); }
@media (max-width: 900px) { .v-ks .ks-split { grid-template-columns: 1fr; } }