/* Cluff website UI kit — layout-only styles (composes DS components & tokens) */
.kit { font-family: var(--font-sans); color: var(--text-primary); background: var(--color-bg); }
.kit img { display: block; }

/* Top utility bar — affiliation + contact */
.kit-topbar { background: var(--ink-950); color: var(--slate-400); font-size: 11px; letter-spacing: 0.06em; }
.kit-topbar__in { max-width: var(--container-wide); margin-inline: auto; padding: 9px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kit-topbar__group { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.kit-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.kit-topbar__affil { text-transform: uppercase; letter-spacing: 0.16em; color: var(--slate-500); }
.kit-topbar a { color: var(--slate-400); text-decoration: none; }
.kit-topbar a:hover { color: var(--periwinkle-200); }
.kit-socials { display: flex; gap: var(--space-4); }

/* Primary nav — luxury: letterspaced uppercase, generous height */
.kit-nav { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.kit-nav__in { max-width: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter); height: 92px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.kit-logo { height: 48px; width: auto; }
.kit-navlinks { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.kit-navlinks a { font-size: 12px; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; padding: 8px 0; border-bottom: 1px solid transparent; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.kit-navlinks a:hover, .kit-navlinks a[aria-current] { color: var(--slate-700); border-color: var(--slate-500); }
.kit-nav__actions { display: flex; align-items: center; gap: var(--space-4); }
.kit-nav__phone { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; color: var(--ink-800); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.kit-nav__phone:hover { color: var(--slate-700); }
.kit-burger { display: none; }

/* Hero — cinematic, full-height */
.kit-hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.kit-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,42,.86) 0%, rgba(18,23,42,.28) 42%, rgba(18,23,42,.44) 100%); }
.kit-hero__in { position: relative; z-index: 1; width: 100%; max-width: var(--container-max); margin-inline: auto; padding: var(--space-9) var(--gutter) var(--space-8); }
.kit-hero__eyebrow { color: var(--periwinkle-200); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: 0.24em; text-transform: uppercase; }
.kit-hero__title { font-family: var(--font-serif); font-size: var(--text-display-xl); line-height: 1.02; letter-spacing: var(--tracking-display); color: var(--white); max-width: 15ch; margin: var(--space-5) 0 var(--space-4); font-weight: var(--weight-regular); }
.kit-hero__sub { color: var(--periwinkle-200); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); max-width: 44ch; margin: 0 0 var(--space-6); }
.kit-hero__search { max-width: 940px; }

/* Trust / affiliation strip */
.kit-trustbar { background: var(--ink-800); color: var(--periwinkle-100); }
.kit-trustbar__in { max-width: var(--container-max); margin-inline: auto; padding: var(--space-5) var(--gutter); display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; text-align: center; }
.kit-trustbar__item { display: flex; flex-direction: column; gap: 3px; }
.kit-trustbar__v { font-family: var(--font-serif); font-size: var(--text-h3); color: var(--white); line-height: 1; }
.kit-trustbar__l { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); }
.kit-trustbar__rule { width: 1px; height: 40px; background: rgba(215,223,242,.16); }

/* Sections */
.kit-section { padding-block: var(--section-y); }
.kit-section--tight { padding-block: var(--section-y-tight); }
.kit-section--ink { background: var(--ink-800); color: var(--periwinkle-100); }
.kit-section--stone { background: var(--mist-50); }
.kit-in { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.kit-in--content { max-width: var(--container-content); }
.kit-eyebrow { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.kit-section--ink .kit-eyebrow { color: var(--slate-400); }
.kit-h2 { font-family: var(--font-serif); font-size: var(--text-display-md); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-regular); margin: var(--space-3) 0 0; }
.kit-section--ink .kit-h2, .kit-section--ink h3 { color: var(--white); }
.kit-lede { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 60ch; margin-top: var(--space-4); }
.kit-section--ink .kit-lede { color: var(--slate-300); }
.kit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); flex-wrap: wrap; }
.kit-head__text { max-width: 640px; }

/* Grids */
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kit-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.kit-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

/* Section heading — centred editorial variant */
.kit-head--center { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.kit-head--center .kit-head__text { max-width: 640px; }
.kit-rule { width: 48px; height: 2px; background: var(--slate-500); margin: 0 0 var(--space-4); }
.kit-head--center .kit-rule { margin-inline: auto; }

/* Featured collection — asymmetric hero listing + stack */
.kit-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
.kit-feature__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-5); }
.kit-feature__hero { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.kit-feature__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.kit-feature__hero:hover img { transform: scale(1.04); }
.kit-feature__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,42,.9), rgba(18,23,42,.05) 60%); }
.kit-feature__cap { position: relative; z-index: 1; padding: var(--space-6); display: flex; flex-direction: column; gap: 6px; width: 100%; }
.kit-feature__price { font-family: var(--font-serif); font-size: var(--text-h2); color: #fff; }
.kit-feature__addr { font-size: var(--text-body); color: var(--periwinkle-100); }
.kit-feature__attrs { display: flex; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--slate-300); margin-top: 4px; }
.kit-feature__row { position: relative; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.kit-feature__row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.kit-feature__row:hover img { transform: scale(1.04); }
.kit-feature__row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,42,.88), transparent 70%); }

/* Market-insight / article cards */
.kit-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.kit-article { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.kit-article__media { aspect-ratio: 3/2; border-radius: var(--radius-md); overflow: hidden; background: var(--mist-100); }
.kit-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.kit-article:hover .kit-article__media img { transform: scale(1.04); }
.kit-article__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-accent); }
.kit-article h3 { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: var(--weight-medium); margin: 0; line-height: var(--leading-snug); }
.kit-article p { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; }
.kit-article__more { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--slate-700); display: inline-flex; align-items: center; gap: 6px; }

/* Lifestyle collection grid */
.kit-collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.kit-collections .ds-collection { min-height: 200px; }
.kit-collections .ds-collection:first-child { grid-column: span 2; }

/* Reviews grid */
.kit-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kit-reviews__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.kit-reviews__score { display: flex; align-items: center; gap: var(--space-3); }
.kit-reviews__num { font-family: var(--font-serif); font-size: var(--text-display-md); line-height: 1; color: var(--white); }

/* Newsletter band */
.kit-newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }

/* Sold gallery + market snapshot */
.kit-sold { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kit-marketgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }

/* Communities index */
.kit-commgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kit-guide { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.kit-guide:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.kit-guide__media { aspect-ratio: 3/2; overflow: hidden; }
.kit-guide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.kit-guide:hover .kit-guide__media img { transform: scale(1.04); }
.kit-guide__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.kit-guide__name { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: var(--weight-medium); }
.kit-guide__desc { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.kit-guide__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.kit-guide__tag { font-size: 11px; letter-spacing: .06em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.kit-guide__tag .ds-icon { color: var(--slate-500); }

/* Resources / FAQ */
.kit-reslist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.kit-faq { display: flex; flex-direction: column; max-width: 760px; margin-inline: auto; }
.kit-faq__item { border-bottom: 1px solid var(--border-subtle); }
.kit-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: var(--space-5) 0; font-family: var(--font-serif); font-size: var(--text-h4); color: var(--text-primary); }
.kit-faq__q .ds-icon { flex: none; color: var(--slate-700); transition: transform var(--duration-fast) var(--ease-standard); }
.kit-faq__item[data-open="true"] .ds-icon { transform: rotate(45deg); }
.kit-faq__a { font-size: var(--text-body); color: var(--text-secondary); line-height: var(--leading-relaxed); padding: 0 0 var(--space-5); max-width: 64ch; }

/* Marketing-plan steps (sellers) */
.kit-plan { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; }
.kit-plan__item { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-plan__n { font-family: var(--font-serif); font-size: var(--text-h2); color: var(--slate-600); line-height: 1; }
.kit-plan__item h3 { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: var(--weight-medium); margin: 0; }
.kit-plan__item p { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; }
.kit-section--ink .kit-plan__item p { color: var(--slate-300); }

/* Process timeline (buyers) */
.kit-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); position: relative; }
.kit-process__step { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-process__n { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--border-default); color: var(--slate-700); }
.kit-process__step h3 { font-family: var(--font-serif); font-size: var(--text-h5); font-weight: var(--weight-medium); margin: 0; }
.kit-process__step p { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; }
.kit-section--ink .kit-process__n { background: var(--ink-700); border-color: var(--border-inverse); color: var(--slate-400); }
.kit-section--ink .kit-process__step p { color: var(--slate-300); }

/* Two-column media + copy (reusable) */
.kit-mediarow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.kit-mediarow--reverse .kit-mediarow__media { order: 2; }
.kit-mediarow__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.kit-mediarow__media img { width: 100%; height: 100%; object-fit: cover; }

/* Value props */
.kit-value { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.kit-value__ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--periwinkle-100); color: var(--slate-700); }
.kit-value h3 { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: var(--weight-medium); margin: 0; }
.kit-value p { font-size: var(--text-body-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; }

/* Split (about / CTA) */
.kit-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.kit-split__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; }
.kit-split__media img { width: 100%; height: 100%; object-fit: cover; }
.kit-stats-row { display: flex; gap: var(--space-8); margin-top: var(--space-6); flex-wrap: wrap; }

/* CTA path cards */
.kit-paths { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.kit-path { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); min-height: 220px; padding: var(--space-6); border-radius: var(--radius-md); overflow: hidden; color: var(--white); text-decoration: none; }
.kit-path img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-path::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,42,.88), rgba(18,23,42,.28)); }
.kit-path > * { position: relative; z-index: 1; }
.kit-path h3 { font-family: var(--font-serif); font-size: var(--text-h3); color: #fff; margin: 0; font-weight: var(--weight-medium); }
.kit-path span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--periwinkle-200); }
.kit-path:hover img { transform: scale(1.04); }
.kit-path img { transition: transform var(--duration-slower) var(--ease-out); }

/* Footer */
.kit-footer { background: var(--ink-900); color: var(--slate-400); padding-block: var(--space-8) var(--space-6); }
.kit-footer__grid { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.kit-footer h4 { font-family: var(--font-sans); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--slate-500); margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); }
.kit-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kit-footer a { color: var(--slate-300); text-decoration: none; font-size: var(--text-body-sm); }
.kit-footer a:hover { color: var(--periwinkle-200); }
.kit-footer__logo { height: 50px; margin-bottom: var(--space-4); }
.kit-footer__legal { max-width: var(--container-max); margin: var(--space-7) auto 0; padding: var(--space-5) var(--gutter) 0; border-top: 1px solid rgba(215,223,242,.12); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-caption); }

/* Search results screen */
.kit-results { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); max-width: var(--container-wide); margin-inline: auto; padding: var(--space-6) var(--gutter) var(--space-8); }
.kit-filters { display: flex; flex-direction: column; gap: var(--space-5); align-self: start; position: sticky; top: 96px; }
.kit-filters__group { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.kit-filters__group h4 { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); margin: 0; }
.kit-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kit-results__main { display: flex; flex-direction: column; gap: var(--space-5); }
.kit-results__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.kit-results__count { font-size: var(--text-body-sm); color: var(--text-muted); }
.kit-results__count strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.kit-listings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.kit-map { background: var(--mist-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-body-sm); position: relative; overflow: hidden; }
.kit-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.kit-map span { position: relative; z-index: 1; background: rgba(255,255,255,.9); padding: 6px 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px; }

/* Page header (interior pages) */
.kit-pagehead { position: relative; color: #fff; padding: var(--space-8) 0; overflow: hidden; }
.kit-pagehead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-pagehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,42,.85), rgba(18,23,42,.55)); }
.kit-pagehead__in { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.kit-pagehead h1 { font-family: var(--font-serif); font-size: var(--text-display-lg); font-weight: var(--weight-regular); color: #fff; margin: var(--space-3) 0 0; letter-spacing: var(--tracking-tight); }

/* Valuation / contact */
.kit-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.kit-form { display: flex; flex-direction: column; gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-7); box-shadow: var(--shadow-sm); }
.kit-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.kit-steps { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
.kit-step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--text-muted); }
.kit-step__n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--mist-100); color: var(--text-muted); }
.kit-step--active .kit-step__n { background: var(--ink-800); color: var(--periwinkle-100); }
.kit-step--active { color: var(--text-primary); font-weight: var(--weight-medium); }
.kit-trust { display: flex; flex-direction: column; gap: var(--space-5); }
.kit-trust__item { display: flex; gap: var(--space-3); }
.kit-trust__ic { flex: none; color: var(--slate-700); margin-top: 2px; }

/* ——— Listing-detail screen ——— */
.kit-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 8px; max-width: var(--container-wide); margin-inline: auto; padding: var(--space-5) var(--gutter) 0; aspect-ratio: 16 / 6.4; }
.kit-gallery a { position: relative; overflow: hidden; border-radius: var(--radius-sm); display: block; }
.kit-gallery a:first-child { grid-row: span 2; }
.kit-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.kit-gallery a:hover img { transform: scale(1.04); }
.kit-gallery__more { position: absolute; inset: 0; background: var(--overlay-scrim); display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: var(--text-body-sm); font-weight: var(--weight-medium); }

.kit-detail { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8); max-width: var(--container-wide); margin-inline: auto; padding: var(--space-7) var(--gutter) var(--space-9); align-items: start; }
.kit-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.kit-detail__price { font-family: var(--font-serif); font-size: var(--text-display-md); line-height: 1; letter-spacing: var(--tracking-tight); }
.kit-detail__addr { font-size: var(--text-body-lg); color: var(--text-primary); margin-top: var(--space-2); }
.kit-detail__meta { font-size: var(--text-body-sm); color: var(--text-muted); margin-top: 4px; }
.kit-detail__actions { display: flex; gap: var(--space-3); }
.kit-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-6) 0; }
.kit-fact { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.kit-fact__v { font-family: var(--font-serif); font-size: var(--text-h3); }
.kit-fact__l { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.kit-detail h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--weight-regular); margin: var(--space-7) 0 var(--space-4); }
.kit-detail__body p { color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 62ch; margin-bottom: var(--space-4); }
.kit-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); margin-top: var(--space-4); }
.kit-feat { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); color: var(--text-primary); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.kit-feat .ds-icon { color: var(--slate-700); flex: none; }

.kit-agent { position: sticky; top: 108px; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.kit-agent__top { display: flex; align-items: center; gap: var(--space-4); }
.kit-agent__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.kit-agent__name { font-family: var(--font-serif); font-size: var(--text-h4); }
.kit-agent__role { font-size: var(--text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.kit-agent__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-agent__ref { font-size: var(--text-caption); color: var(--text-muted); text-align: center; }
.kit-detail__mapfull { min-height: 260px; margin-top: var(--space-4); }

/* Demo screen switcher */
.kit-switch { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; background: var(--ink-900); border-radius: var(--radius-pill); padding: 6px; display: flex; gap: 4px; box-shadow: var(--shadow-xl); }
.kit-switch button { border: 0; background: transparent; color: var(--slate-300); font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-medium); padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; }
.kit-switch button[aria-pressed="true"] { background: var(--slate-500); color: var(--ink-900); }

@media (max-width: 980px) {
  .kit-navlinks { display: none; }
  .kit-burger { display: inline-flex; }
  .kit-results, .kit-listings, .kit-grid-3, .kit-grid-4, .kit-paths, .kit-split, .kit-form-split, .kit-feature, .kit-articles, .kit-footer__grid, .kit-detail, .kit-features, .kit-collections, .kit-reviews, .kit-newsletter, .kit-sold, .kit-marketgrid, .kit-commgrid, .kit-reslist, .kit-plan, .kit-process, .kit-mediarow { grid-template-columns: 1fr; }
  .kit-feature__stack { grid-template-rows: auto auto; }
  .kit-collections .ds-collection:first-child { grid-column: auto; }
  .kit-marketgrid { grid-template-columns: 1fr 1fr; }
  .kit-mediarow--reverse .kit-mediarow__media { order: 0; }
  .kit-gallery { grid-template-columns: 1fr 1fr; aspect-ratio: auto; grid-auto-rows: 140px; }
  .kit-gallery a:first-child { grid-row: span 2; grid-column: span 2; }
  .kit-facts { grid-template-columns: repeat(2, 1fr); }
  .kit-agent { position: static; }
  .kit-results { grid-template-columns: 1fr; }
  .kit-filters { position: static; }
}