/* The public site (website app). Built from the mockups in new_stuff/:
   the navbar (navbar_red.html), the results page (new_card_bs.html) and the
   listing page (property_details.html), on the navbar's red brand. */

/* =========================================================
   TOKENS
   ========================================================= */
:root {
    --brand: #dc1b2e;
    --brand-600: #b01423;
    --brand-50: #fdeeef;
    --brand-100: #f8c8cd;
    --brand-300: #f08b95;

    --ink: #1b262b;
    --muted: #5d6b72;
    --line: #dde3e6;
    --line-strong: #c3ced3;
    --bg: #f3f5f6;
    --surface: #fff;

    --drop: #b42318;
    --drop-50: #fdeceb;
    --gold: #6f5300;
    --gold-50: #fcf0c6;
    --wa: #25d366;
    --wa-600: #1da851;
    --ok: #1b6e40;
    --ok-50: #e3f3ea;

    --radius-card: 12px;
    --radius-ctl: 8px;
    --shadow-pop: 0 16px 40px rgba(16, 40, 45, .16);
    --nav-h: 68px;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.min-w-0 { min-width: 0; }
a { color: var(--brand-600); }

.btn { font-weight: 600; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-brand {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 220, 27, 46;
}
.btn-outline-brand {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
    --bs-btn-focus-shadow-rgb: 220, 27, 46;
}
.btn-outline-ink {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong); --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--bg); --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--line); --bs-btn-active-border-color: var(--ink);
    --bs-btn-focus-shadow-rgb: 27, 38, 43;
}
.btn-whatsapp {
    --bs-btn-color: #fff; --bs-btn-bg: var(--wa); --bs-btn-border-color: var(--wa);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--wa-600); --bs-btn-hover-border-color: var(--wa-600);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--wa-600); --bs-btn-active-border-color: var(--wa-600);
    --bs-btn-focus-shadow-rgb: 37, 211, 102;
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus, .form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb { background: var(--brand); }
.form-label { font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* Bots fill in every field; people never see this one. */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }


/* =========================================================
   NAVBAR (navbar_red.html)
   ========================================================= */
/* =========================================================
      UTILITY BAR (desktop only)
   ========================================================= */
.util-bar {
    background: var(--brand-600);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
}
.util-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.util-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.util-bar a:hover { color: #fff; }
.util-select {
    appearance: none;
    border: 0; border-radius: 4px;
    background: transparent; color: inherit;
    font: inherit; font-weight: 600;
    padding: 2px 18px 2px 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffffcc' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center;
    cursor: pointer;
}
.util-select:hover, .util-select:focus { background-color: rgba(255, 255, 255, .1); outline: none; }
.util-select option { color: var(--ink); }

/* =========================================================
   LOGO
   ========================================================= */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-logo:hover { color: var(--ink); }
/* The mark (partials/brand_mark.html): SELECT on red, ESTATES on blue,
   INTERNATIONAL spaced out beneath. Everything is in em: font-size sizes it. */
.brand-mark { display: inline-flex; flex-direction: column; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; line-height: 1; }
.brand-row { display: flex; }
.brand-row b { padding: .46em .54em .38em; color: #fff; font-weight: 800; font-size: 1em; letter-spacing: .06em; }
.brand-red { background: #d62828; }
.brand-blue { background: #1e4fa3; }
.brand-sub { margin-top: .4em; padding-left: .08em; color: var(--muted); font-weight: 600; font-size: .654em; letter-spacing: .42em; white-space: nowrap; }
.brand-logo:hover .brand-row b { filter: brightness(1.08); }
/* The logo and, behind a thin rule, the country the visitor is in
   (website/countries.py): a button opening a menu of both countries. */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; align-self: stretch; }
.brand-country-menu { display: flex; align-self: stretch; }
.brand-country {
    display: flex; align-items: center; gap: 6px; align-self: center;
    min-height: 40px; margin: 0; padding: 0 4px 0 12px;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; background: none;
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem;
    letter-spacing: .12em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.brand-country .bi { font-size: .62em; color: var(--muted); letter-spacing: 0; transition: transform .2s; }
.brand-country:hover, .brand-country[aria-expanded="true"] { color: var(--brand); }
.brand-country:hover .bi, .brand-country[aria-expanded="true"] .bi { color: var(--brand); }
.brand-country[aria-expanded="true"] .bi { transform: rotate(180deg); }
.brand-country:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.brand-country-list { min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.brand-country-list .dropdown-header { padding: 6px 10px 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.brand-country-list .dropdown-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 8px; color: var(--ink); font-weight: 600;
}
.brand-country-list .dropdown-item:hover { background: var(--bg); color: var(--brand); }
.brand-country-list .dropdown-item.is-current { color: var(--brand); }
@media (max-width: 1199.98px) {
    .site-nav .brand-mark { font-size: 14px; }
    .brand { gap: 10px; }
    .brand-country { font-size: .92rem; padding-left: 10px; }
}
/* Phones: the logo and the country share the bar with two buttons. */
@media (max-width: 575.98px) {
    .site-nav .brand { gap: 8px; }
    .site-nav .brand-mark { font-size: 12px; }
    .site-nav .brand-country { font-size: .8rem; padding-left: 8px; letter-spacing: .08em; gap: 4px; }
    .site-nav > .container { gap: 8px; }
}
@media (max-width: 359.98px) {
    .site-nav .brand-mark { font-size: 10.5px; }
    .site-nav .brand-country { font-size: .72rem; }
}

/* The utility bar's parts: currency | country | language. */
.util-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .3); margin: 0 4px; }
.util-bar .bi-globe2 { font-size: .85rem; opacity: .85; margin-right: -4px; }

/* The country switch in the phone drawer: two halves. */
.drawer-country { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg); }
.drawer-country-opt { padding: 8px 10px; border-radius: 8px; text-align: center; font-weight: 700; color: var(--muted); text-decoration: none; }
.drawer-country-opt.is-current { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(16, 40, 45, .12); }

/* Both countries, in the footer. */
.footer-countries { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-countries a { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.footer-countries a.is-current { border-color: var(--brand); background: var(--brand); color: #fff; }

/* =========================================================
   MAIN NAV
   ========================================================= */
.site-nav {
    position: sticky; top: 0; z-index: 1030;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.site-nav .container { display: flex; align-items: center; gap: 24px; min-height: var(--nav-h); }

.nav-list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; }
/* A menu's name (partials/nav_head.html): a link to its page with an arrow
   button beside it that opens the menu, or -- a menu with no page -- a
   button. .is-open on the item while its menu shows (site.js). */
.nav-trigger {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 12px;
    border: 0; background: none;
    color: var(--ink);
    font-weight: 700; font-size: .95rem;
    text-decoration: none; white-space: nowrap;
}
.nav-trigger:has(+ .nav-toggle) { padding-right: 2px; }
.nav-trigger .bi-chevron-down, .nav-toggle .bi-chevron-down { font-size: .7rem; color: var(--muted); transition: transform .2s; }
.nav-trigger::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--brand);
    transform: scaleX(0); transition: transform .2s;
}
.nav-trigger:has(+ .nav-toggle)::after { right: -16px; }
.nav-trigger:hover { color: var(--brand); }
.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px 0 4px;
    border: 0; background: none; color: var(--muted);
}
.nav-toggle:hover .bi-chevron-down { color: var(--brand); }
.nav-item.is-open .nav-trigger { color: var(--brand); }
.nav-item.is-open .nav-trigger::after { transform: scaleX(1); }
.nav-item.is-open .bi-chevron-down { transform: rotate(180deg); color: var(--brand); }
.nav-trigger:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; border-radius: 10px; }
.nav-list.secondary .nav-trigger { font-weight: 600; color: var(--muted); }
.nav-list.secondary .nav-trigger:hover, .nav-list.secondary .nav-item.is-open .nav-trigger { color: var(--brand); }
.nav-divider { width: 1px; height: 22px; background: var(--line); align-self: center; margin: 0 8px; }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
    position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: none; color: var(--ink);
    font-size: 1.15rem;
    text-decoration: none;
}
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.icon-btn .badge-dot {
    position: absolute; top: 4px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; border: 2px solid #fff;
    background: var(--ink); color: #fff;
    font-size: .64rem; font-weight: 700; line-height: 13px; text-align: center;
}
.nav-actions .btn { border-radius: var(--radius-ctl); padding: 8px 14px; font-size: .9rem; }

/* =========================================================
   MEGA PANELS
   ========================================================= */
.mega { display: none; }
/* The menus sit in the nav's flex container: fill it, don't shrink to the content */
.mega .row { flex: 1 1 auto; min-width: 0; }
.mega.show { display: block; }

.mega-heading {
    margin: 0 0 10px;
    font-size: .82rem; font-weight: 700;
    color: var(--muted);
}
.mega-links { margin: 0; padding: 0; list-style: none; }
.mega-links a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 6px 0;
    color: var(--ink); font-weight: 500; font-size: .93rem;
    text-decoration: none;
}
.mega-links a:hover { color: var(--brand); }
.mega-links a:hover .lk { text-decoration: underline; text-underline-offset: 3px; }
.mega-links .ct { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mega-links .bi { color: var(--muted); margin-right: 8px; width: 16px; display: inline-block; text-align: center; }
.mega-links a:hover .bi { color: var(--brand); }
.mega-all {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    color: var(--brand); font-weight: 700; font-size: .9rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.mega-all:hover { color: var(--brand-600); }

/* Project rows with thumbnail */
.project {
    display: flex; align-items: center; gap: 12px;
    padding: 7px; margin: 0 -7px;
    border-radius: 10px;
    color: var(--ink); text-decoration: none;
}
.project:hover { background: var(--bg); color: var(--ink); }
.project img, .project-thumb { width: 64px; height: 48px; border-radius: 7px; object-fit: cover; background: #e2e8ea; flex-shrink: 0; }
.project-name { font-weight: 700; font-size: .93rem; line-height: 1.2; }
.project-meta { color: var(--muted); font-size: .8rem; }
.project:hover .project-name { color: var(--brand); }

/* Promo / feature boxes */
.promo {
    height: 100%;
    padding: 20px;
    border-radius: var(--radius-card);
    background: var(--brand-50);
}
.promo-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: 4px; }
.promo-text { color: #3c4d54; font-size: .9rem; margin-bottom: 14px; }
.promo .btn { border-radius: var(--radius-ctl); }
.promo-dark { background: var(--brand-600); color: #fff; }
.promo-dark .promo-text { color: rgba(255, 255, 255, .8); }
.promo-dark .form-select { border-color: transparent; font-size: .9rem; }
.promo-dark .btn-light { color: var(--brand-600); font-weight: 700; }
.promo-kicker { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; color: var(--brand-100); margin-bottom: 8px; }
.promo:not(.promo-dark) .promo-kicker, .panel .promo-kicker { color: var(--brand); }

/* Price index mini chart (Invest menu) */
.index-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.index-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.index-label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.index-change { color: #1b6e40; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.index-change.is-down { color: var(--drop); }
.index-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.index-value small { font-size: .8rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.spark { width: 100%; height: 48px; display: block; margin-top: 6px; }
.spark-area { fill: var(--brand-50); }
.spark-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.idx-chip {
    padding: 4px 10px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: #fff; color: var(--ink);
    font-size: .8rem; font-weight: 600;
}
.idx-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.index-note { margin: 10px 0 6px; color: var(--muted); font-size: .78rem; }
.promo-foot { margin-top: 12px; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.promo-foot a { color: #fff; }

/* Dubai banners on the Dubai photo (Buy and Invest menus): words on a dark
   foot, the skyline clear above. As tall as the menu's columns beside it. */
.promo-stack { display: flex; flex-direction: column; gap: 12px; }
.promo-stack .dubai-banner { flex: 1; }
.dubai-banner {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 100%; min-height: 200px;
    padding: 18px 20px;
    border-radius: var(--radius-card);
    background: #10161a var(--band-img) center / cover no-repeat;
    color: #fff; text-decoration: none;
}
.dubai-banner::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .05) 100%);
    transition: background-color .15s;
}
.dubai-banner:hover { color: #fff; }
.dubai-banner:hover::before { background-color: rgba(0, 0, 0, .15); }
.dubai-banner .promo-kicker { color: #f3d27a; margin-bottom: 4px; }
.dubai-banner .promo-text { color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
.dubai-banner-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; }
.dubai-banner:hover .dubai-banner-go { text-decoration: underline; text-underline-offset: 3px; }


/* =========================================================
   DESKTOP LAYOUT  (≥ 992px)
   ========================================================= */
@media (min-width: 992px) {
    .nav-menu { display: flex; align-items: stretch; align-self: stretch; flex: 1; gap: 4px; }
    .nav-list { align-self: stretch; }

    .mega-full {
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 24px 40px rgba(16, 40, 45, .12);
        padding: 28px 0 32px;
        max-height: calc(100vh - var(--nav-h) - 20px);
        overflow-y: auto;
    }
    .nav-item.compact { position: relative; }
    .mega-compact {
        position: absolute; top: 100%; left: -8px;
        width: 340px;
        padding: 18px 20px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: 0 24px 40px rgba(16, 40, 45, .14);
    }
    .mega.show { animation: megaIn .16s ease-out; }
    @keyframes megaIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    .nav-scrim {
        position: fixed; inset: 0; z-index: 1020;
        background: rgba(14, 20, 22, .28);
        opacity: 0; pointer-events: none;
        transition: opacity .18s;
    }
    .nav-scrim.show { opacity: 1; }
    .mobile-only { display: none !important; }
}

/* =========================================================
   MOBILE LAYOUT  (< 992px): offcanvas drawer + accordions
   ========================================================= */
@media (max-width: 991.98px) {
    .site-nav .container { min-height: 60px; gap: 12px; }
    .nav-menu .offcanvas-body { padding: 8px 0 24px; }
    .nav-list { flex-direction: column; }
    /* A row: the name, which goes to its page, and the arrow, which opens
       the menu under them. A name with no page opens it itself. */
    .nav-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
    .nav-item > .mega, .nav-item > button.nav-trigger { grid-column: 1 / -1; }
    .nav-trigger { justify-content: space-between; width: 100%; min-height: 56px; padding: 0 20px; font-size: 1.05rem; }
    .nav-trigger:has(+ .nav-toggle) { padding-right: 12px; }
    .nav-trigger::after { display: none; }
    .nav-toggle { width: 60px; padding: 0; border-left: 1px solid var(--line); color: var(--ink); }
    .nav-trigger .bi-chevron-down, .nav-toggle .bi-chevron-down { font-size: .9rem; }
    .nav-item.is-open { background: var(--bg); }
    .nav-list.secondary .nav-trigger { font-size: 1rem; }
    .nav-divider { display: none; }
    .mega { padding: 0 20px 18px; }
    .mega .container { padding: 0; }
    .mega .row { --bs-gutter-y: 1.25rem; }
    .promo { padding: 16px; }
    .desktop-only { display: none !important; }
    .nav-scrim { display: none; }
}
.drawer-foot { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-foot .util-row { display: flex; gap: 8px; }
.drawer-foot .form-select { font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* =========================================================
   RESULTS (new_card_bs.html)
   ========================================================= */
/* =========================================================
   SEARCH / FILTER PANEL
   ========================================================= */
.search-panel {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 16px 0 12px;
}
@media (min-width: 992px) {
    .search-panel { position: sticky; top: 0; z-index: 1020; }
}

.search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

/* Segmented control (replaces the old .radio-group) */
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    width: fit-content;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    margin: 0;
    padding: 7px 14px;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.segmented label:hover { color: var(--ink); }
.segmented input:checked + label {
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(16, 40, 45, .14);
}
.segmented input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 1px; }
.segmented.purpose label { padding: 9px 20px; font-size: .95rem; }

/* Location search with chips */
.location-box {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 6px 12px 6px 40px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: text;
}
.location-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.location-box > .bi-search {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}
.location-box input {
    flex: 1;
    min-width: 160px;
    border: 0;
    outline: 0;
    padding: 4px 0;
    background: transparent;
    font-size: .95rem;
    color: var(--ink);
}
#locChips { display: contents; }
.min-w-0 { min-width: 0; }
.loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 9px;
    border-radius: 6px;
    background: var(--brand-50);
    color: var(--brand-600);
    font-weight: 600;
    font-size: .84rem;
}
.loc-chip button {
    border: 0; background: none; color: inherit;
    padding: 0 3px; line-height: 1; border-radius: 4px;
}
.loc-chip button:hover { background: var(--brand-100); }

.loc-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 1030;
    display: none;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
}
.loc-suggest.show { display: block; }
.loc-suggest li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.loc-suggest li.active, .loc-suggest li:hover { background: var(--bg); }
.loc-suggest .loc-sub { color: var(--muted); font-size: .85rem; }
.loc-suggest .loc-count { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.loc-suggest .loc-empty { color: var(--muted); cursor: default; }
.loc-suggest .loc-empty:hover { background: none; }

/* Filter dropdown buttons */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-ctl);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}
.filter-btn:hover { border-color: var(--brand); }
.filter-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.filter-btn.is-active { background: var(--brand-50); border-color: var(--brand); color: var(--brand-600); }
.filter-btn .count-badge {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    background: var(--brand); color: #fff;
    font-size: .72rem;
}
.filter-btn .count-badge:empty { display: none; }

.filter-menu {
    min-width: 290px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
}
.filter-menu .menu-label, .offcanvas .menu-label {
    margin-bottom: 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--muted);
}
.menu-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line);
}
.link-reset {
    border: 0; background: none; padding: 0;
    color: var(--muted); font-weight: 600; font-size: .9rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.link-reset:hover { color: var(--ink); }

.pill-set { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-toggle {
    padding: 5px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: .88rem;
    transition: background-color .15s, border-color .15s, color .15s;
}
.pill-toggle:hover { border-color: var(--brand); }
.pill-toggle[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.type-list .form-check { padding: 6px 0 6px 1.8em; margin: 0; }
.type-list .form-check-label { cursor: pointer; width: 100%; }

/* While htmx fetches the next results (partials/results_root.html) */
#listings, .results-sub { transition: opacity .15s; }
#results-root.htmx-request #listings, #results-root.htmx-request .results-sub { opacity: .45; pointer-events: none; }

/* Property type: a column per main type (residential, land, commercial) */
.type-menu { width: min(660px, calc(100vw - 24px)); }
.type-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 767.98px) {
    .type-menu { padding: 14px 12px; }
    .type-groups { gap: 0 10px; }
    .type-groups .menu-label { font-size: .78rem; }
    .type-groups .form-check { padding: 5px 0 5px 1.6em; }
    .type-groups .form-check-label { font-size: .84rem; line-height: 1.25; hyphens: auto; }
}

/* =========================================================
   RESULTS TOOLBAR
   ========================================================= */
.results-title { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.results-sub { color: var(--muted); font-size: .9rem; }
.sort-select { width: auto; font-weight: 600; font-size: .9rem; border-color: var(--line-strong); }

.quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.quick-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600; font-size: .86rem;
}
@media (max-width: 575.98px) {
    .quick-row { flex-wrap: nowrap; overflow-x: auto; margin-right: -12px; padding-right: 12px; scrollbar-width: none; }
    .quick-row::-webkit-scrollbar { display: none; }
    .quick-chip { flex-shrink: 0; }
}
.quick-chip .bi { color: var(--muted); }
.quick-chip:hover { border-color: var(--brand); }
.quick-chip[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand); color: var(--brand-600); }
.quick-chip[aria-pressed="true"] .bi { color: var(--brand); }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.active-filters:empty { display: none; }
.active-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 6px;
    background: var(--ink); color: #fff;
    font-size: .82rem; font-weight: 600;
}
.active-chip button {
    border: 0; background: none; color: inherit;
    padding: 0 4px; line-height: 1; opacity: .75;
}
.active-chip button:hover { opacity: 1; }

/* =========================================================
   PROPERTY CARD
   The whole card is a link via .card-link::after; interactive
   bits (gallery arrows, dots, action buttons) sit above it.
   ========================================================= */
.property-card {
    position: relative;
    isolation: isolate;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    transition: border-color .18s, box-shadow .18s;
}
.property-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 28px rgba(16, 40, 45, .10); }
.property-card:has(.card-link:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }

.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: inherit; }
.card-link:focus { outline: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.property-card:hover .card-title { color: var(--brand); }

/* Gallery */
.gallery {
    position: relative;
    height: 100%;
    min-height: 270px;
    background: #e2e8ea;
}
.gallery::before {
    /* shows if an image fails to load */
    content: "\F42A";
    font-family: 'bootstrap-icons';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 2rem; color: #b5c1c6;
}
.gallery img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.gallery::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .38));
    pointer-events: none;
}
@media (max-width: 767.98px) {
    .gallery { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
}

.gallery-btn {
    position: absolute; top: 50%; z-index: 3;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}
.gallery-btn:hover { background: #fff; }
.gallery-btn.prev { left: 10px; }
.gallery-btn.next { right: 10px; }
.property-card:hover .gallery-btn, .gallery-btn:focus-visible { opacity: 1; }
.gallery-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) {
    .gallery-btn { opacity: 1; width: 30px; height: 30px; }
}

.gallery-nav {
    position: absolute; bottom: 12px; left: 50%; z-index: 3;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 5px;
}
.dot {
    width: 7px; height: 7px;
    padding: 0; border: 0; border-radius: 4px;
    background: rgba(255, 255, 255, .55);
    transition: width .2s, background-color .2s;
}
.dot.active { width: 18px; background: #fff; }

.img-badges {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: flex; gap: 6px;
    pointer-events: none;
}
.img-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(27, 38, 43, .74);
    color: #fff;
    font-size: .76rem; font-weight: 700;
}
.img-badge.sole { background: var(--gold-50); color: var(--gold); }
.photo-count {
    position: absolute; right: 12px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff; font-size: .8rem; font-weight: 600;
    pointer-events: none;
}

/* Content */
.card-content { display: flex; flex-direction: column; height: 100%; padding: 16px 18px 14px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.card-title { margin: 0 0 3px; font-size: 1.2rem; font-weight: 700; line-height: 1.25; transition: color .15s; }
.card-location { color: var(--muted); font-size: .88rem; }

.property-card .price-block { flex-shrink: 0; text-align: right; }
.property-card .price { font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.property-card .price.is-drop { color: var(--drop); }
.property-card .price-period { color: var(--muted); font-size: .85rem; font-weight: 600; }
.property-card .price-old { color: var(--muted); font-size: .85rem; }
.property-card .price-old s { text-decoration-thickness: 1px; }
.property-card .drop-pct {
    margin-left: 4px; padding: 1px 5px;
    border-radius: 4px;
    background: var(--drop-50); color: var(--drop);
    font-size: .74rem; font-weight: 700;
}

.property-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 10px; }
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .77rem; font-weight: 700; line-height: 1.3;
}
.tag-offplan { background: #eceffd; color: #3542b0; }
.tag-ready { background: #e3f3ea; color: #1b6e40; }
.tag-resale { background: #eef1f3; color: #43535b; }
.tag-date { border: 1px solid var(--line); color: var(--muted); }
.tag-drop { background: var(--drop-50); color: var(--drop); }
.tag-plan { background: var(--brand-50); color: var(--brand-600); }

.specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 10px; font-size: .95rem; }
.spec { display: inline-flex; align-items: center; gap: 6px; }
.spec svg, .spec .bi { color: var(--muted); flex-shrink: 0; }
.spec small { color: var(--muted); font-size: .8rem; }
.spec-type { font-weight: 700; }

.property-card .description {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .93rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--line);
}
.agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--brand-50); color: var(--brand-600);
    font-weight: 700; font-size: .8rem;
}
.agent-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.agent-meta { color: var(--muted); font-size: .77rem; }

.card-actions { position: relative; z-index: 2; display: flex; gap: 6px; }
.card-actions .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600; font-size: .88rem;
}
.btn-fav { border: 1px solid var(--line-strong); background: #fff; color: var(--muted); }
.btn-fav:hover { color: var(--drop); border-color: var(--drop); background: #fff; }
.btn-fav.is-saved { color: var(--drop); border-color: #f1bdb8; background: var(--drop-50); }
@media (max-width: 575.98px) {
    .card-actions .btn-label { display: none; }
    .card-head { flex-direction: column; gap: 6px; }
    .price-block { text-align: left; }
}

/* Empty state */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-card);
}
.empty-state .bi { font-size: 2rem; color: var(--muted); }

/* Pagination */
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-hover-color: var(--brand); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--brand-100); }

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    height: fit-content;
}
.sidebar .sidebar-title { font-weight: 700; font-size: .98rem; margin-bottom: 2px; }
.sidebar .sidebar-text { color: var(--muted); font-size: .86rem; margin-bottom: 12px; }
.sidebar-links { height: fit-content; }
.links-title {
    margin: 22px 0 6px;
    padding-bottom: 6px;
    font-size: .98rem;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.links { padding: 0; margin: 0; list-style: none; }
.links li { padding: 4px 0; }
.links a { color: #3c4a50; font-weight: 500; font-size: .92rem; text-decoration: none; }
.links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Offcanvas */
.offcanvas .offcanvas-title { font-weight: 800; }
.offcanvas .filter-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.offcanvas .filter-section:first-child { padding-top: 0; }
/* =========================================================
   LISTING PAGE (property_details.html)
   ========================================================= */
.link-quiet {
    flex-shrink: 0;
    border: 0; background: none; padding: 0;
    color: var(--brand); font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.link-quiet:hover { color: var(--brand-600); }

/* =========================================================
   TOP BAR
   ========================================================= */
.detail-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}
@media (min-width: 992px) {
    .detail-bar { position: sticky; top: 0; z-index: 1020; }
}
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink); font-weight: 700; font-size: .92rem;
    text-decoration: none; white-space: nowrap;
    padding: 6px 10px 6px 4px; border-radius: var(--radius-ctl);
}
.back-link:hover { background: var(--bg); color: var(--ink); }
.breadcrumb { margin: 0; font-size: .86rem; --bs-breadcrumb-divider-color: var(--line-strong); --bs-breadcrumb-item-active-color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.bar-actions .btn { font-size: .88rem; padding: 6px 12px; border-radius: var(--radius-ctl); }
.btn-save.is-saved { color: var(--drop); border-color: #f1bdb8; background: var(--drop-50); }

/* =========================================================
   GALLERY MOSAIC
   ========================================================= */
.mosaic {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 460px;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.tile {
    position: relative;
    padding: 0; border: 0;
    background: #e2e8ea;
    overflow: hidden;
    cursor: zoom-in;
}
.tile::before {
    content: "\F42A";
    font-family: 'bootstrap-icons';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 2rem; color: #b5c1c6;
}
.tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.tile:hover img { transform: scale(1.03); }
.tile:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; z-index: 1; }
.tile-main { grid-row: 1 / span 2; }

.mosaic-badges {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: flex; gap: 6px;
    pointer-events: none;
}
.img-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(27, 38, 43, .74);
    color: #fff;
    font-size: .8rem; font-weight: 700;
}
.img-badge.sole { background: var(--gold-50); color: var(--gold); }
.show-all {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border: 0; border-radius: var(--radius-ctl);
    background: #fff; color: var(--ink);
    font-weight: 700; font-size: .88rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.show-all:hover { background: var(--bg); }

@media (max-width: 991.98px) {
    .mosaic { grid-template-columns: 2fr 1fr; height: 400px; }
    .tile:nth-child(n+4) { display: none; }
}
@media (max-width: 767.98px) {
    .mosaic { display: block; height: auto; aspect-ratio: 4 / 3; border-radius: 0; margin: 0 calc(var(--bs-gutter-x) * -.5); }
    .tile { display: none; }
    .tile-main { display: block; position: absolute; inset: 0; width: 100%; }
}

/* =========================================================
   PANELS + TYPOGRAPHY
   ========================================================= */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 24px;
    margin-bottom: 16px;
}
@media (max-width: 575.98px) { .panel { padding: 18px; } }
.panel-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.panel-sub { color: var(--muted); font-size: .9rem; margin-top: -10px; margin-bottom: 16px; }

/* Title block */
.listing-title { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; }
@media (max-width: 575.98px) { .listing-title { font-size: 1.5rem; } }
.listing-location { color: var(--muted); font-size: .95rem; }
.listing-location a { color: inherit; }

.detail-page .price-block { text-align: right; flex-shrink: 0; }
.detail-page .price { font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.detail-page .price.is-drop { color: var(--drop); }
.detail-page .price-old { color: var(--muted); font-size: .95rem; }
.detail-page .drop-pct {
    margin-left: 4px; padding: 1px 6px;
    border-radius: 4px;
    background: var(--drop-50); color: var(--drop);
    font-size: .8rem; font-weight: 700;
}
.detail-page .price-meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
@media (max-width: 767.98px) {
    .title-row { flex-direction: column; }
    .detail-page .price-block { text-align: left; }
}

.detail-page .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .8rem; font-weight: 700; line-height: 1.3;
}
.tag-offplan { background: #eceffd; color: #3542b0; }
.tag-ready { background: #e3f3ea; color: #1b6e40; }
.tag-date { border: 1px solid var(--line); color: var(--muted); }
.tag-drop { background: var(--drop-50); color: var(--drop); }
.tag-plan { background: var(--brand-50); color: var(--brand-600); }

/* Key facts strip */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin-top: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.fact {
    padding: 12px 14px;
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.fact-value { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 1.05rem; }
.fact-value svg, .fact-value .bi { color: var(--muted); flex-shrink: 0; }
.fact-label { color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* Description */
.detail-page .description { color: #34434a; line-height: 1.65; max-width: 68ch; }
.detail-page .description p:last-child { margin-bottom: 0; }
.detail-page .description.is-clamped {
    max-height: 9.9em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
            mask-image: linear-gradient(#000 60%, transparent);
}

/* Details list */
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    margin: 0;
}
@media (max-width: 575.98px) { .details-grid { grid-template-columns: 1fr; } }
.details-grid > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}
.details-grid dt { font-weight: 500; color: var(--muted); }
.details-grid dd { margin: 0; font-weight: 700; text-align: right; }

/* Amenities */
.amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px 24px;
    margin: 0; padding: 0; list-style: none;
}
.amenities li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.amenities .bi {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--bg); color: var(--brand);
    font-size: 1.05rem;
}
.amenities li.is-extra { display: none; }
.amenities.is-open li.is-extra { display: flex; }

/* Payment plan */
.plan-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 3px; margin-bottom: 18px; }
.plan-bar span:nth-child(1) { background: var(--brand); }
.plan-bar span:nth-child(2) { background: #4f8f97; }
.plan-bar span:nth-child(3) { background: var(--brand-100); }
.plan-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 575.98px) { .plan-steps { grid-template-columns: 1fr; } }
.plan-step { position: relative; padding-left: 16px; }
.plan-step::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 4px; border-radius: 2px;
}
.plan-step:nth-child(1)::before { background: var(--brand); }
.plan-step:nth-child(2)::before { background: #4f8f97; }
.plan-step:nth-child(3)::before { background: var(--brand-100); }
.plan-pct { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.plan-when { font-weight: 700; margin-top: 6px; }
.plan-amount { color: var(--muted); font-size: .88rem; }

/* Location */
.map-wrap {
    position: relative;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #e2e8ea;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.nearby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (max-width: 575.98px) { .nearby { grid-template-columns: 1fr; } }
.nearby li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}
.nearby .bi { color: var(--muted); font-size: 1.05rem; width: 20px; text-align: center; }
.nearby .dist { margin-left: auto; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Price history */
.history { margin: 0; padding: 0; list-style: none; }
.history li {
    display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}
.history li:last-child { border-bottom: 0; }
.history .h-date { color: var(--muted); }
.history .h-price { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Mortgage calculator */
.calc-result {
    background: var(--brand-50);
    border-radius: 10px;
    padding: 18px;
    height: 100%;
}
.calc-monthly { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-600); line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-rows > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: .9rem; border-top: 1px solid var(--brand-100); }
.calc-rows > div:first-child { border-top: 0; }
.calc-rows strong { font-variant-numeric: tabular-nums; }
.input-group-text { background: var(--bg); color: var(--muted); font-weight: 600; }

/* =========================================================
   SIDEBAR: AGENT CARD
   ========================================================= */
@media (min-width: 992px) {
    .sidebar-sticky { position: sticky; top: 76px; }
}
.agent-card .avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--brand-50); color: var(--brand-600);
    font-weight: 800; font-size: 1.05rem;
}
.agent-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.agent-meta { color: var(--muted); font-size: .85rem; }
.agent-stats { display: flex; gap: 16px; margin: 14px 0 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.agent-stats strong { display: block; color: var(--ink); font-size: 1rem; }
.agent-card .btn { padding: 9px 12px; border-radius: var(--radius-ctl); }
.enquiry .form-control { font-size: .93rem; }
.ref-line { color: var(--muted); font-size: .82rem; }
.sent-state { text-align: center; padding: 18px 6px 6px; }
.sent-state .bi { font-size: 2rem; color: var(--brand); }

/* =========================================================
   SIMILAR PROPERTIES (compact clickable cards)
   ========================================================= */
.mini-card {
    position: relative;
    isolation: isolate;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    transition: border-color .18s, box-shadow .18s;
}
.mini-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 28px rgba(16, 40, 45, .10); }
.mini-card:has(.card-link:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: inherit; }
.card-link:focus { outline: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mini-card:hover .mini-title { color: var(--brand); }
.mini-img { position: relative; aspect-ratio: 16 / 10; background: #e2e8ea; }
.mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-body { padding: 14px 16px 16px; }
.mini-price { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini-title { font-weight: 700; margin: 2px 0; transition: color .15s; }
.mini-loc { color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.mini-specs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .88rem; color: var(--muted); }
.mini-specs span { display: inline-flex; align-items: center; gap: 5px; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb { background: #0e1416; color: #fff; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.lb-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-title { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.lb-stage {
    position: relative; flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 0; padding: 0 64px;
}
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; }
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff;
    font-size: 1.2rem;
}
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 575.98px) {
    .lb-stage { padding: 0; }
    .lb-btn { width: 38px; height: 38px; background: rgba(0, 0, 0, .45); }
}
.lb-thumbs { display: flex; gap: 8px; padding: 12px 16px 16px; overflow-x: auto; scrollbar-width: thin; }
.lb-thumb {
    flex: 0 0 auto;
    width: 84px; height: 58px;
    padding: 0; border: 2px solid transparent; border-radius: 6px;
    overflow: hidden; background: #1f2a2e;
    opacity: .55; transition: opacity .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.active { opacity: 1; border-color: #fff; }
.lb .btn-close { filter: invert(1); opacity: .8; }

/* =========================================================
   MOBILE CONTACT BAR
   ========================================================= */
.contact-bar {
    /* Under the navbar (1030): the menu drawer opens over it. */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    display: flex; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(16, 40, 45, .08);
}
.contact-bar .btn { flex: 1; padding: 10px; border-radius: var(--radius-ctl); }
@media (max-width: 991.98px) { body:has(.contact-bar, .pl-dock) { padding-bottom: 76px; } }
/* =========================================================
   LOGO
   ========================================================= */
/* "Ücretsiz değerleme" would otherwise break onto two lines; it fits on one. */
.nav-actions .btn { white-space: nowrap; }

/* Seven menus fit the bar in English; Turkish words are longer, so below the
   widest container the bar packs tighter. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .site-nav .container { gap: 14px; }
    .nav-trigger { padding: 0 8px; }
    .nav-trigger::after { left: 8px; right: 8px; }
    .nav-divider { margin: 0 4px; }
}

/* Flash messages */
.site-messages { margin-top: 16px; }
.site-messages .alert { border-radius: var(--radius-card); }

/* Purpose switch as links (results page) */
.segmented a {
    padding: 7px 14px;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none;
}
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(16, 40, 45, .14); }
.segmented.purpose a { padding: 9px 20px; font-size: .95rem; }
.segmented input:checked + label { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(16, 40, 45, .14); }
.loc-suggest li a { color: inherit; text-decoration: none; display: flex; justify-content: space-between; width: 100%; gap: 10px; }
.location-box .loc-chip a { color: inherit; text-decoration: none; padding: 0 3px; }

.breadcrumb-bar { padding-top: 14px; }
.breadcrumb { margin: 0; font-size: .86rem; --bs-breadcrumb-divider-color: var(--line-strong); --bs-breadcrumb-item-active-color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

.photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #b5c1c6; font-size: 2rem; }

/* =========================================================
   HOME
   ========================================================= */
.hero {
    position: relative;
    padding: 72px 0 64px;
    /* Darkened on the left, where the heading and search sit; the villas
       on the right stay bright. */
    background:
        linear-gradient(90deg, rgba(27, 38, 43, .78), rgba(27, 38, 43, .45) 50%, rgba(27, 38, 43, .05)),
        url('hero.webp') 65% center / cover no-repeat,
        var(--ink);
    color: #fff;
}
@media (max-width: 767.98px) {
    .hero {
        background:
            linear-gradient(rgba(27, 38, 43, .62), rgba(27, 38, 43, .62)),
            url('hero-sm.webp') 70% center / cover no-repeat,
            var(--ink);
    }
}
.hero h1 { font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.9rem, 4.5vw, 3rem); max-width: 18ch; }
.hero p.lead { color: rgba(255, 255, 255, .85); max-width: 46ch; }
.hero-search {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px; padding: 10px;
    max-width: 720px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.hero-search .segmented { flex-shrink: 0; }
.hero-search .form-select { flex: 1 1 200px; min-height: 46px; border-color: var(--line-strong); }
.hero-search .btn { min-height: 46px; padding: 0 22px; }
/* The Dubai button: as tall as the search box, on its line but at the far
   right; charcoal with a thin gold line and a soft white glow, "Dubai" in
   the logo's Genos */
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 24px; }
.hero-actions .hero-search { flex: 1 1 520px; margin-top: 0; }
.hero-dubai {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; padding: 0 34px; min-width: 260px;
    border: 1px solid rgba(214, 178, 106, .75); border-radius: 14px;
    background: linear-gradient(135deg, #24211d 0%, #141311 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 26px 4px rgba(255, 255, 255, .45), 0 20px 50px rgba(0, 0, 0, .35);
    color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s, background-color .15s;
}
.hero-dubai-city {
    margin: 0 -.14em 0 .1em; /* the letter-spacing's trailing gap, so Turkish "'yi" sits close */
    color: #d6b26a; font-family: 'Genos', sans-serif; font-size: 1.9em; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; vertical-align: -.08em;
}
.hero-dubai:hover, .hero-dubai:focus-visible { border-color: #e9cc8a; background: linear-gradient(135deg, #2e2a24 0%, #1a1815 100%); color: #fff; }
@media (max-width: 767.98px) {
    .hero-dubai { flex: 1 1 100%; margin-left: 0; min-height: 60px; }
}
.section-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.city-tile {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
    color: var(--ink); font-weight: 700; text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.city-tile:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(16, 40, 45, .08); color: var(--brand); }
.city-tile .ct { color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    .city-tile { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; }
}
.promo-band { background: var(--brand-600); color: #fff; border-radius: var(--radius-card); padding: 28px; }
.promo-band p { color: rgba(255, 255, 255, .82); }

/* Home: popular projects as pills, a round photo beside each name; the
   last one is "See all" (off plan) */
.project-pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 576px) { .project-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .project-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .project-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.project-pill {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 6px 18px 6px 6px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.project-pill .project-thumb {
    position: relative; display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%; background: #e2e8ea; color: var(--muted); font-size: 1.2rem;
}
.project-pill .project-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-pill .project-name { font-weight: 700; line-height: 1.25; }
.project-pill .project-meta { color: var(--muted); font-size: .85rem; font-weight: 600; }
.project-pill:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(16, 40, 45, .08); color: var(--ink); }
.project-pill:hover .project-name { color: var(--brand); }
.project-pill-all { border-color: var(--brand); color: var(--brand); }
.project-pill-all .project-thumb { display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 1.3rem; }
.project-pill-all .project-name { color: var(--brand); }
.project-pill-all:hover { background: var(--brand-50); color: var(--brand); }

/* Home: a banner on a photo -- dark on the left behind the words, opening
   to the clear photo on the right */
.image-band {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
    min-height: 300px; padding: 40px 36px;
    border-radius: var(--radius-card);
    background: #10161a var(--band-img) center / cover no-repeat;
    color: #fff;
}
.image-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .72) 30%, rgba(0, 0, 0, .25) 58%, rgba(0, 0, 0, 0) 78%);
}
.image-band-text { max-width: 440px; align-self: center; }
.image-band-text p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
.image-band .promo-kicker { color: #f3d27a; }
.image-band-cta { box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
@media (max-width: 575.98px) {
    .image-band { min-height: 340px; padding: 28px 20px; }
    .image-band::before { background: linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .2) 100%); }
    .image-band-text { align-self: flex-start; }
}

/* Home: developers' logos, each on its accent colour; not links */
.developer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .developer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .developer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 992px) { .developer-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.developer-logo {
    display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px;
    border-radius: var(--radius-card); background: var(--accent, #10161a);
    box-shadow: inset 0 0 0 1px rgba(16, 40, 45, .06); /* white accents on the light page */
}
.developer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 575.98px) { .developer-logo { height: 76px; padding: 12px; } }

/* Home: careers */
.careers-band { padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.careers-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 1.4rem; flex-shrink: 0; }

/* Forms in dialogs: a choice as a full-width row, and a note between parts */
.choice-row {
    display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-ctl);
    background: #fff; font-weight: 600; cursor: pointer;
}
.choice-row .bi { color: var(--line-strong); font-size: 1.15rem; }
.btn-check:checked + .choice-row { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); }
.btn-check:checked + .choice-row .bi { color: var(--brand); }
.btn-check:focus-visible + .choice-row { outline: 2px solid var(--brand); outline-offset: 2px; }
.form-section-note { margin: 6px 0 12px; padding: 10px 12px; border-radius: var(--radius-ctl); background: var(--bg); font-size: .9rem; }
.done-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e3f3ea; color: #1b6e40; font-size: 1.6rem; }
.benefits { margin: 8px 0 12px; padding-left: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.benefits li { display: flex; gap: 8px; padding: 2px 0; }
.benefits .bi { color: #1b6e40; }
.alert-search { padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius-ctl); background: var(--bg); }
.alert-search-title { font-weight: 700; }
.alert-search .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alert-search .chip-list span { padding: 2px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { margin-top: 56px; padding: 40px 0 28px; background: var(--ink); color: rgba(255, 255, 255, .72); font-size: .92rem; }
.site-footer h2 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-logo { display: inline-flex; }
.site-footer .brand-mark { font-size: 15px; }
.site-footer .brand-sub { color: rgba(255, 255, 255, .62); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; }
.footer-link-btn { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .82); font: inherit; text-decoration: none; cursor: pointer; }
.footer-link-btn:hover { color: #fff; text-decoration: underline; }

/* =========================================================
   COOKIE BAR (partials/consent.html, shown by track.js)
   ========================================================= */
.consent-bar {
    position: fixed; z-index: 1080; left: 16px; right: 16px; bottom: 16px;
    max-width: 760px; margin: 0 auto; padding: 12px 14px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
.consent-bar[hidden] { display: none; }
.consent-text { flex: 1 1 320px; margin: 0; font-size: .86rem; line-height: 1.45; }
.consent-text .bi { color: var(--brand); margin-right: 4px; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }

/* =========================================================
   ACCOUNT + FORMS
   ========================================================= */
.auth-card { max-width: 440px; margin: 40px auto; }
.auth-card .panel-title { font-size: 1.5rem; }
.account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.val-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.val-row:last-child { border-bottom: 0; }
.val-row:hover .val-title { color: var(--brand); }
.val-title { font-weight: 700; }
.val-sub { color: var(--muted); font-size: .85rem; }
.val-estimate { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.estimate-big { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-600); line-height: 1.1; }

/* The valuation quiz (website/valuation.html, valuation_quiz.js). Without
   the script (no .quiz-js) every step shows, one under the other. */
.quiz-progress { margin-bottom: 18px; }
.quiz-progress-text { color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: 6px; min-height: 1.2em; }
.quiz-progress-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.quiz-progress-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .25s; }
.quiz:not(.quiz-js) .quiz-progress { display: none; }
.quiz-step + .quiz-step { margin-top: 28px; }
.quiz.quiz-js .quiz-step { display: none; margin-top: 0; }
.quiz.quiz-js .quiz-step.is-current { display: block; animation: quizIn .2s ease-out; }
@keyframes quizIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.quiz-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; }
.quiz-sub { color: var(--muted); margin: -8px 0 14px; }
.quiz-field { margin-top: 18px; }
.quiz-field legend.form-label { font-size: 1rem; float: none; }
.quiz-cards { display: grid; gap: 10px; }
.quiz-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quiz-cards--types { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.quiz-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 128px; padding: 16px 12px;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-card);
    background: #fff; color: var(--ink);
    font-weight: 700; text-align: center; line-height: 1.25;
    cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.quiz-card .bi { font-size: 2rem; color: var(--muted); }
.quiz-card:hover { border-color: var(--brand); }
.quiz-card--small { min-height: 92px; gap: 6px; font-size: .9rem; font-weight: 600; }
.quiz-card--small .bi { font-size: 1.5rem; }
.btn-check:checked + .quiz-card { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.btn-check:checked + .quiz-card .bi { color: var(--brand); }
.btn-check:focus-visible + .quiz-card { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .quiz-cards--3 { grid-template-columns: 1fr; }
    .quiz-cards--3 .quiz-card { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 14px 16px; }
    .quiz-cards--types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quiz-map { height: 380px; border-radius: var(--radius-card); border: 1px solid var(--line); background: #e2e8ea; z-index: 0; }
@media (max-width: 575.98px) { .quiz-map { height: 300px; } }
.quiz:not(.quiz-js) .quiz-map, .quiz:not(.quiz-js) [data-quiz-locate] { display: none; }
.quiz-pin { color: var(--brand); font-size: 36px; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.quiz-disclaimer { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--bg); }
.quiz-disclaimer.has-error { border-color: var(--drop); }
.quiz-disclaimer-title { font-weight: 800; margin-bottom: 8px; }
.quiz-disclaimer .form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; cursor: pointer; }
.quiz-disclaimer .form-check-label { padding-left: 6px; font-size: .92rem; color: #3c4d54; cursor: pointer; }
.quiz-error { display: block; }
.quiz-error[hidden] { display: none; }
.quiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.quiz:not(.quiz-js) .quiz-nav [data-quiz-back], .quiz:not(.quiz-js) .quiz-nav [data-quiz-next] { display: none; }

/* A visitor's finished quiz: a made-up report, blurred, behind a sign-up gate */
.locked { position: relative; min-height: 640px; }
.locked-paper { filter: blur(9px); opacity: .75; pointer-events: none; user-select: none; }
.locked-gate {
    position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
    width: min(520px, calc(100% - 24px));
    padding: 30px 28px; text-align: center;
    background: var(--surface); border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(16, 40, 45, .22);
}
.locked-gate .lock-icon {
    display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px;
    border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 1.5rem;
}
.locked-gate h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.locked-subject { font-weight: 700; color: var(--brand-600); margin-bottom: 12px; }
@media (max-width: 575.98px) { .locked-gate { top: 40px; padding: 24px 18px; } }

/* A visitor's report page (account/valuation.html) */
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.spinner-row { display: flex; align-items: center; gap: 12px; color: var(--muted); }

/* Filters are real checkboxes and radios (.btn-check) styled as the
   mockup's pills, chips and segments, so they work without JavaScript. */
.btn-check:checked + .pill-toggle { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-check:focus-visible + .pill-toggle,
.btn-check:focus-visible + .quick-chip { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-check:checked + .quick-chip { background: var(--brand-50); border-color: var(--brand); color: var(--brand-600); }
.btn-check:checked + .quick-chip .bi { color: var(--brand); }
.pill-toggle, .quick-chip { cursor: pointer; margin: 0; }
.active-chip a { color: inherit; padding: 0 4px; opacity: .75; text-decoration: none; }
.active-chip a:hover { opacity: 1; }
.link-reset { text-decoration: underline; text-underline-offset: 3px; }
/* A photo that will not load leaves the grey tile, not its alt text. */
img.is-broken { opacity: 0; }

/* =========================================================
   INFORMATION PAGES (website/pages.py: Sell's hub, Our fees, ...)
   ========================================================= */
.info-crumbs { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 0; }

.info-hero {
    background:
        radial-gradient(900px 360px at 100% 0, var(--brand-50), transparent 70%),
        var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 48px 0 52px;
}
.info-hero-compact { padding: 40px 0 44px; }
.info-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 12px;
    color: var(--brand); font-weight: 800; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .06em;
}
.info-kicker-light { color: var(--brand-100); }
.info-title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 14px; max-width: 22ch; }
.info-lead { font-size: 1.1rem; color: #3c4d54; max-width: 60ch; }
.info-lead p { margin-bottom: .6em; }
.info-lead p:last-child { margin-bottom: 0; }

.info-body { padding-top: 32px; padding-bottom: 48px; }
.info-section-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.015em; }
.info-group-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin: 8px 0 14px; }

/* The big number (Our fees) */
.rate-card {
    position: relative; overflow: hidden;
    padding: 30px 30px 26px;
    border-radius: 18px;
    background: var(--brand-600); color: #fff;
    box-shadow: 0 24px 50px rgba(176, 20, 35, .25);
}
.rate-card::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.rate-label { font-weight: 700; font-size: .9rem; color: var(--brand-100); text-transform: uppercase; letter-spacing: .06em; }
.rate-figure { font-size: clamp(3.6rem, 2.6rem + 4vw, 5.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.rate-sub { font-size: 1.05rem; color: rgba(255, 255, 255, .85); }
.rate-points { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
.rate-points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rate-points li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.rate-points li::before { content: "\F26E"; font-family: "bootstrap-icons"; color: #fff; opacity: .85; }
.rate-points p { margin: 0; }

/* The fee sum */
.fee-calc .panel-title .bi { color: var(--brand); margin-right: 4px; }
.fee-calc .input-group-text { background: var(--bg); font-weight: 700; }
.fee-calc .form-control { font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 14px; }
.fee-result { padding: 14px 16px; border-radius: var(--radius-ctl); background: var(--brand-50); }
.fee-result.is-net { background: var(--bg); }
.fee-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.fee-rate { font-weight: 600; }
.fee-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fee-result:not(.is-net) .fee-value { color: var(--brand-600); }
.fee-note { color: var(--muted); font-size: .85rem; margin: 0; }

/* What the fee covers */
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 575.98px) { .included { grid-template-columns: 1fr; } }
.included li { display: flex; gap: 12px; }
.included li > .bi {
    flex-shrink: 0; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--brand-50); color: var(--brand); font-size: 1.1rem;
}
.included strong { display: block; font-size: .98rem; margin-bottom: 2px; }
.included span { color: var(--muted); font-size: .9rem; }

/* "Not sure what it's worth?" */
.pricing-help {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
    margin: 28px 0 40px; padding: 26px 28px;
    border: 1px solid var(--line); border-radius: var(--radius-card);
    background: var(--surface);
}
.pricing-help-text { flex: 1 1 380px; }
.pricing-help-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.pricing-help-text p { color: var(--muted); margin: 0; }
.pricing-help-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* A section's pages as cards */
.info-more .row.g-4 { margin-top: 0; }
.info-card {
    display: flex; align-items: flex-start; gap: 14px; height: 100%;
    padding: 18px;
    border: 1px solid var(--line); border-radius: var(--radius-card);
    background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.info-card:hover { border-color: var(--brand-100); box-shadow: 0 10px 26px rgba(16, 40, 45, .08); transform: translateY(-1px); color: var(--ink); }
.info-card.is-draft { border-style: dashed; background: transparent; opacity: .75; }
.info-card-icon {
    flex-shrink: 0; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--brand-50); color: var(--brand); font-size: 1.2rem;
}
.info-card-body { flex: 1; min-width: 0; }
.info-card-title { display: block; font-weight: 700; line-height: 1.25; margin-bottom: 3px; }
a.info-card:hover .info-card-title { color: var(--brand); }
.info-card-text { display: block; color: var(--muted); font-size: .88rem; }
.info-card-arrow { color: var(--line-strong); margin-top: 2px; transition: color .15s, transform .15s; }
a.info-card:hover .info-card-arrow { color: var(--brand); transform: translateX(2px); }

/* A section's questions */
.info-faq { margin-top: 40px; scroll-margin-top: 90px; }
.info-accordion { --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius-card); --bs-accordion-inner-border-radius: var(--radius-card); --bs-accordion-active-bg: var(--brand-50); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--brand-100); }
.info-accordion .accordion-button { font-weight: 700; }
.info-accordion .accordion-body { color: #3c4d54; }
.info-accordion .accordion-body p:last-of-type { margin-bottom: 8px; }

/* "Let's sell your home" */
.sell-cta { background: var(--ink); color: #fff; padding: 56px 0; scroll-margin-top: 70px; }
.sell-cta-title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.sell-cta-text { color: rgba(255, 255, 255, .78); font-size: 1.02rem; max-width: 54ch; }
.sell-cta-text a { color: #fff; }
.sell-cta-options { display: grid; gap: 10px; margin-top: 20px; max-width: 460px; }
.sell-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--radius-ctl);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    color: #fff; text-decoration: none;
}
.sell-option:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sell-option > .bi { font-size: 1.3rem; color: var(--brand-300); }
.sell-option strong { display: block; }
.sell-option small { display: block; color: rgba(255, 255, 255, .65); }
.sell-cta .panel { color: var(--ink); }
.sell-cta #enquiry { scroll-margin-top: 90px; }

/* A banner that leads to another page: the valuation page's "Prefer a
   visit?", the appraisal page's "Want a number right now?" */
.visit-banner {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 24px; margin-bottom: 16px;
    border-radius: var(--radius-card);
    background: var(--brand-600); color: #fff; text-decoration: none;
    box-shadow: 0 16px 34px rgba(176, 20, 35, .2);
    transition: transform .15s, box-shadow .15s;
}
.visit-banner:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px rgba(176, 20, 35, .26); }
.visit-banner-dark { background: var(--ink); box-shadow: 0 16px 34px rgba(16, 40, 45, .18); }
.visit-banner-dark:hover { box-shadow: 0 20px 40px rgba(16, 40, 45, .24); }
.visit-banner-icon {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
    border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 1.3rem;
}
.visit-banner-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.visit-banner-text { color: rgba(255, 255, 255, .8); font-size: .92rem; }
.visit-banner .btn-light { color: var(--ink); font-weight: 700; }
.visit-banner:not(.visit-banner-dark) .btn-light { color: var(--brand-600); }

/* Book an in-person appraisal */
.appraisal-sub { font-size: 1rem; font-weight: 800; margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; position: relative; padding-left: 46px; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-600); font-weight: 800;
}
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: .9rem; }

/* Sole agency: the same home at three prices, or one */
.price-split {
    margin: 0; padding: 24px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); box-shadow: 0 24px 50px rgba(16, 40, 45, .1);
}
.price-split-head { font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.price-split-list { list-style: none; margin: 0 0 16px; padding: 0; }
.price-split-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.price-split-list s { text-decoration-color: var(--drop); }
.price-split-sole { position: relative; padding: 18px; border-radius: var(--radius-ctl); background: var(--brand-50); }
.price-split-sole .img-badge { position: static; display: inline-flex; margin-bottom: 8px; }
.price-split-price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-split-note { color: var(--brand-600); font-weight: 700; font-size: .9rem; }
.price-split figcaption { margin-top: 10px; font-size: .75rem; color: var(--muted); text-align: right; }

.benefit { height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.benefit > .bi {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px;
    border-radius: 11px; background: var(--brand-50); color: var(--brand); font-size: 1.2rem;
}
.benefit h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; }
.benefit p { color: var(--muted); font-size: .92rem; margin: 0; }

.compare { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; }
.compare-row > div { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; }
.compare-row:first-child > div { border-top: 0; }
.compare-head > div { font-weight: 800; font-size: .9rem; }
.compare-label { font-weight: 700; }
.compare-sole { background: var(--brand-50); }
.compare-sole .bi { color: var(--brand); }
.compare-row > div:last-child { color: var(--muted); }
.compare-row > div:last-child .bi { color: var(--line-strong); }
@media (max-width: 767.98px) {
    .compare-row { grid-template-columns: 1fr 1fr; }
    .compare-row > .compare-label, .compare-head > div:first-child { grid-column: 1 / -1; padding-bottom: 0; }
    .compare-head > div:first-child { display: none; }
    .compare-row > .compare-label + div, .compare-row > .compare-label + div + div { border-top: 0; }
}

/* =========================================================
   GUIDES AND ABOUT PAGES (pages/article.html and what it holds)
   ========================================================= */
.info-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .88rem; font-weight: 600; }
.info-meta .bi { color: var(--brand); margin-right: 4px; }

/* The key figures, beside the title */
.key-facts {
    padding: 22px 22px 8px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); box-shadow: 0 24px 50px rgba(16, 40, 45, .1);
}
.key-facts-head { font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.key-facts-grid { display: grid; grid-template-columns: 1fr 1fr; }
.kf { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.kf:nth-child(odd) { padding-right: 16px; }
.kf:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.kf:nth-child(-n+2) { border-top: 0; }
.kf-figure { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.kf-label { font-weight: 700; font-size: .92rem; margin-top: 2px; }
.kf-text { color: var(--muted); font-size: .82rem; margin-top: 2px; }
@media (max-width: 399.98px) {
    .key-facts-grid { grid-template-columns: 1fr; }
    .kf:nth-child(n) { padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); }
    .kf:first-child { border-top: 0; }
}

/* The short answer, first thing under the hero */
.short-answer {
    padding: 20px 24px; margin-bottom: 8px;
    border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius-card);
    background: var(--surface);
}
.short-answer-title { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--brand); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.short-answer-text { font-size: 1.02rem; color: #2f3e44; }
.short-answer-text p:last-child { margin-bottom: 0; }

.guide-section { margin-top: 44px; scroll-margin-top: 90px; }
.info-section-sub { color: var(--muted); max-width: 70ch; margin: -4px 0 18px; }
.info-section-sub a, .panel-foot a { font-weight: 600; }
.panel-foot { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.panel h3.panel-title:not(:first-child) { margin-top: 28px; }

/* Tables: a row each on wide screens, a card each on phones (guides.js
   gives every cell its column's name). */
.table-wrap { overflow-x: auto; margin: 0 -2px; }
.info-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.info-table th, .info-table td { padding: 11px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.info-table thead th { border-top: 0; background: var(--bg); color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.info-table thead th:first-child { border-radius: var(--radius-ctl) 0 0 var(--radius-ctl); }
.info-table thead th:last-child { border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; }
.info-table tbody th { font-weight: 700; min-width: 140px; }
.info-table td { color: #3c4d54; }
.info-table .is-key { background: var(--brand-50); }
.info-table thead th.is-key { color: var(--brand-600); }
@media (max-width: 767.98px) {
    .info-table thead { display: none; }
    .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }
    .info-table tr { padding: 12px 0; border-top: 1px solid var(--line); }
    .info-table tbody tr:first-child { border-top: 0; padding-top: 0; }
    .info-table th, .info-table td { padding: 2px 0; border: 0; }
    .info-table tbody th { font-size: 1rem; margin-bottom: 4px; }
    .info-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
    .info-table td[data-label=""]::before { display: none; }
}

/* A note in a panel, or under one */
.info-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 16px 0 0; padding: 12px 14px;
    border-radius: var(--radius-ctl); background: var(--gold-50); color: #4b3a05; font-size: .92rem;
}
.info-note > .bi { color: var(--gold); font-size: 1.05rem; line-height: 1.4; }
.info-note p { margin: 0; }
.info-note a { color: inherit; font-weight: 700; }

/* The three kinds of buyer, side by side */
.buyer-groups { margin: 18px 0 0; }
.buyer-groups-title { font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.buyer-groups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .buyer-groups-grid { grid-template-columns: 1fr; } }
.buyer-group { --accent: var(--ink); --accent-50: var(--bg); padding: 16px 18px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); }
.buyer-group.is-trnc, .matrix .is-trnc { --accent: var(--ok); --accent-50: var(--ok-50); }
.buyer-group.is-tr, .matrix .is-tr { --accent: var(--gold); --accent-50: var(--gold-50); }
.buyer-group.is-intl, .matrix .is-intl { --accent: var(--brand-600); --accent-50: var(--brand-50); }
.buyer-group-name { color: var(--accent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.buyer-group-head { font-size: 1.08rem; font-weight: 800; margin: 2px 0 2px; }
.buyer-group-text { color: var(--muted); font-size: .9rem; margin: 0; }

/* Who can buy what: a column per kind of buyer */
.matrix thead th.is-trnc, .matrix thead th.is-tr, .matrix thead th.is-intl { background: var(--accent-50); color: var(--accent); }
.matrix-sub { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .78rem; opacity: .85; white-space: normal; }
.matrix td strong { display: block; color: var(--ink); }
.matrix td small { display: block; color: var(--muted); font-size: .82rem; }
.slots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; color: var(--accent, var(--brand)); font-size: .9rem; }
.matrix td.is-trnc .slots, .matrix td.is-tr .slots, .matrix td.is-intl .slots { color: var(--accent); }
.same-for-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .88rem; }
.same-for-all strong { margin-right: 4px; }
.same-for-all span { padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; }

/* Steps as numbered cards */
.guide-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .guide-steps { grid-template-columns: 1fr; } }
.guide-steps > li {
    counter-increment: step; position: relative;
    padding: 18px 18px 16px 66px;
    border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.guide-steps > li::before {
    content: counter(step); position: absolute; left: 18px; top: 16px;
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-600); font-weight: 800;
}
.guide-steps h3 { font-size: 1.02rem; font-weight: 800; margin: 4px 0 4px; }
.guide-steps p { color: var(--muted); font-size: .92rem; margin: 0; }
.guide-steps p a { font-weight: 600; }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.step-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: #3c4d54; }
.step-chip .bi { color: var(--brand); }
.after-steps { margin-top: 14px; }

/* The page's tool, on a band of its own */
.tool-band { padding: 48px 0; background: var(--surface); border-block: 1px solid var(--line); scroll-margin-top: 70px; }
.tool {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
    margin-top: 6px; padding: 26px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); box-shadow: 0 20px 44px rgba(16, 40, 45, .08);
}
.tool.is-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tool.is-single { display: block; }
@media (max-width: 991.98px) { .tool, .tool.is-wide { grid-template-columns: 1fr; padding: 20px; } }
.tool-field { margin-bottom: 16px; }
.tool-field:last-child { margin-bottom: 0; }
.tool-field > .form-label { display: block; }
.tool-field .segmented { flex-wrap: wrap; width: auto; max-width: 100%; }
.tool-hint { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.tool-group-label { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }
.tool-group-label:first-child { margin-top: 0; }
.tool-out { padding: 20px; border-radius: var(--radius-card); background: var(--bg); min-width: 0; }
.tool-out-title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.tool-out-title .bi { color: var(--brand); }
.tool-out p:last-child { margin-bottom: 0; }
.tool-note { color: var(--muted); font-size: .8rem; margin: 14px 0 0; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-select .quick-chip { cursor: pointer; }

/* A verdict: yes, careful, no */
.verdict { padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.verdict-title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.verdict p { margin: 0; color: #3c4d54; }
.verdict.is-ok { background: var(--ok-50); border-color: #bfe0cc; }
.verdict.is-ok .verdict-title { color: var(--ok); }
.verdict.is-warn { background: var(--gold-50); border-color: #ecd98f; }
.verdict.is-warn .verdict-title { color: var(--gold); }
.verdict.is-no { background: var(--drop-50); border-color: #f2c3be; }
.verdict.is-no .verdict-title { color: var(--drop); }

/* Figures a tool works out */
.tool-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tool-stats + .tool-group-label { margin-top: 18px; }
.tool-stat { padding: 14px 16px; border-radius: var(--radius-ctl); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tool-stat-label { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tool-stat-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: 2px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-stat-value.is-text { font-size: 1rem; line-height: 1.35; }
.tool-stat-sub { color: var(--muted); font-size: .84rem; }
.tool-stat.is-key { background: var(--brand-50); border-color: var(--brand-100); }
.tool-stat.is-key .tool-stat-value { color: var(--brand-600); }

/* A checklist you tick */
.check-group + .check-group { margin-top: 18px; }
.check-group h3 { font-size: .82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.check-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 9px 12px; margin: 0 0 6px;
    border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface);
    cursor: pointer; font-size: .93rem;
}
.check-item .form-check-input { flex-shrink: 0; margin-top: 2px; }
.check-item.is-done { background: var(--ok-50); border-color: #bfe0cc; }
.check-item.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.must { font-style: normal; flex-shrink: 0; margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--drop-50); color: var(--drop); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.6; }
.meter { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 10px 0; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .2s; }
.verdict.is-ok .meter > i { background: var(--ok); }
.verdict.is-warn .meter > i { background: #c99a17; }
.verdict.is-no .meter > i { background: var(--drop); }
@media (min-width: 992px) { .tool-sticky { position: sticky; top: 90px; align-self: start; } }

/* A plan, date by date */
.tool-timeline { list-style: none; margin: 0; padding: 0; }
.tool-timeline li { position: relative; padding: 0 0 16px 24px; }
.tool-timeline li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.tool-timeline li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--brand-100); }
.tool-timeline li:last-child { padding-bottom: 0; }
.tool-timeline li:last-child::after { display: none; }
.tool-timeline li.is-end::before { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-50); }
.tl-when { font-size: .8rem; font-weight: 800; color: var(--brand-600); }
.tool-timeline li.is-end .tl-when { color: var(--ok); }
.tl-what { font-weight: 700; }
.tl-why { color: var(--muted); font-size: .88rem; }

/* Area finder: the best matches */
.match { padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); }
.match.is-top { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.match-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.match-name { font-weight: 800; }
.match-score { flex-shrink: 0; font-size: .8rem; font-weight: 800; color: var(--brand-600); }
.match p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.price-level { font-weight: 800; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.price-level .off { color: var(--line-strong); }

/* Rents as ranges on one scale */
.rent-bars { display: grid; gap: 10px; }
.rent-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; font-size: .9rem; }
.rent-bar-track { position: relative; height: 30px; border-radius: var(--radius-ctl); background: var(--bg); }
.rent-bar-fill { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 575.98px) { .rent-bar { grid-template-columns: 1fr; gap: 4px; } }

/* Why buy with us */
.why-select { margin-top: 48px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); scroll-margin-top: 90px; }
@media (max-width: 575.98px) { .why-select { padding: 20px; } }
.why-sub { color: var(--muted); }
.select-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.select-facts strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-600); line-height: 1.1; }
.select-facts span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.why-select .benefit { background: var(--bg); border-color: transparent; }
.why-select .pricing-help { margin: 24px 0 0; background: var(--ink); border-color: var(--ink); color: #fff; }
.why-select .pricing-help-text p { color: rgba(255, 255, 255, .75); }
.pricing-help-title .bi { color: var(--brand-300); margin-right: 6px; }

/* Our side and the other side */
.pros-cons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 767.98px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons-col { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.pros-cons-col.is-ours { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.pros-cons-col h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 2px; }
.pros-cons-col h4 { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.pros-cons-sub { color: var(--muted); font-size: .9rem; margin: 0; }
.pros-cons-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.pros-cons-col li { display: flex; gap: 8px; align-items: baseline; }
.pros-cons-col li .bi-check-circle-fill { color: var(--ok); }
.pros-cons-col li .bi-exclamation-circle-fill { color: var(--gold); }
.pros-cons-col li .bi-x-circle-fill { color: var(--drop); }
.flag { display: inline-flex; gap: 6px; align-items: baseline; }
.flag .bi-check-circle-fill { color: var(--ok); }
.flag .bi-exclamation-triangle-fill { color: var(--gold); }

/* Long reading (The truth about title deeds) */
.prose { max-width: 74ch; }
.prose h3 { font-size: 1.15rem; font-weight: 800; margin: 26px 0 8px; }
.prose p, .prose li { color: #33434a; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 6px; }
.src-link {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 2px;
    padding: 0 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
    color: var(--muted); font-size: .74rem; font-weight: 700; text-decoration: none; white-space: nowrap; vertical-align: 1px;
}
.src-link:hover { color: var(--brand-600); border-color: var(--brand-100); }
.land-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.land-history li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border-radius: var(--radius-ctl); background: var(--surface); border: 1px solid var(--line); }
.land-history li.is-key { border-color: var(--brand-100); background: var(--brand-50); }
.land-history-year { font-weight: 800; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.land-history p { margin: 0; color: #33434a; }
@media (max-width: 575.98px) { .land-history li { grid-template-columns: 1fr; gap: 2px; } }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .qa-grid { grid-template-columns: 1fr; } }
.qa-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.qa-card-q { font-weight: 700; margin: 0 0 8px; }
.qa-card-verdict { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 800; margin-bottom: 8px; }
.qa-card p:last-child { color: var(--muted); font-size: .92rem; margin: 0; }
.finding { margin-top: 16px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--ink); color: rgba(255, 255, 255, .82); }
.finding h3 { color: #fff; font-size: 1.1rem; font-weight: 800; }
.finding .src-link { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }
.finding p:last-child { margin-bottom: 0; }
.numbered-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: card; }
@media (max-width: 767.98px) { .numbered-cards { grid-template-columns: 1fr; } }
.numbered-cards > div { counter-increment: card; padding: 18px 18px 18px 58px; position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.numbered-cards > div::before { content: counter(card); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: .85rem; }
.numbered-cards strong { display: block; margin-bottom: 2px; }
.numbered-cards p { margin: 0; color: var(--muted); font-size: .92rem; }
.big-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .big-figures { grid-template-columns: 1fr; } }
.big-figure { padding: 16px 18px; border-radius: var(--radius-ctl); background: var(--bg); }
.big-figure-label { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.big-figure-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.refs { padding-left: 1.4rem; display: grid; gap: 8px; font-size: .9rem; }
.refs a { font-weight: 600; }
.refs span { display: block; color: var(--muted); font-size: .8rem; }

/* The other pages, and the small print */
.info-faq + .info-more, .info-faq ~ .info-more { margin-top: 48px; }
.info-disclaimer { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.info-disclaimer p { margin: 0 0 4px; }

/* The way in, at the foot */
.talk-cta .btn-outline-light { --bs-btn-hover-color: var(--ink); }

/* About: facts, what we built, what we promise */
.facts-table tbody th { width: 34%; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tech-card { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.tech-card.is-key { border-color: var(--brand-100); background: var(--brand-50); }
.tech-card > .bi { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-size: 1.15rem; }
.tech-card.is-key > .bi { background: var(--surface); }
.tech-card h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; }
.tech-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.tech-card .mega-all { margin-top: 10px; }
.tech-badge { display: inline-block; margin-bottom: 8px; padding: 1px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .promise-grid { grid-template-columns: 1fr; } }
.promise { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.promise > .bi { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok-50); color: var(--ok); font-size: 1.1rem; }
.promise strong { display: block; margin-bottom: 3px; }
.promise p { margin: 0; color: var(--muted); font-size: .92rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: "\F26E"; font-family: "bootstrap-icons"; color: var(--ok); flex-shrink: 0; }
.ticks li p { margin: 0; }

/* Team */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.person { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.person-avatar { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 1.4rem; }
.person-avatar.is-team { background: var(--ink); color: #fff; }
.person-role { color: var(--brand); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.person h3 { font-size: 1.1rem; font-weight: 800; margin: 2px 0 6px; }
.person p { color: #3c4d54; font-size: .92rem; margin: 0 0 10px; }
.person-meta { color: var(--muted); font-size: .84rem; margin-bottom: 14px; }
.person-meta div + div { margin-top: 2px; }
.person .btn { margin-top: auto; align-self: flex-start; }

/* Offices and ways to reach us */
.office-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.office { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); scroll-margin-top: 90px; }
.office-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.office-head > .bi { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50); color: var(--brand); font-size: 1.2rem; flex-shrink: 0; }
.office-head h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.office-head span { color: var(--muted); font-size: .86rem; }
.office dl { margin: 0 0 14px; display: grid; gap: 8px; }
.office dt { font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.office dd { margin: 0; font-size: .93rem; }
.office-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.office-map a {
    display: inline-flex; align-items: center; gap: 6px; padding: .25rem .6rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-ctl);
    color: var(--ink); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.office-map a::before { content: "\F3E8"; font-family: "bootstrap-icons"; color: var(--brand); }
.office-map a:hover { border-color: var(--ink); }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.review { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.review-stars { color: #e3a008; letter-spacing: 2px; margin-bottom: 8px; }
.review blockquote { margin: 0 0 12px; font-size: 1rem; color: #2f3e44; }
.review figcaption { color: var(--muted); font-size: .86rem; font-weight: 600; }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; font-weight: 700; }

/* Careers */
.roles { display: grid; gap: 8px; }
.role { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.role-body { flex: 1 1 380px; }
.role-title { font-weight: 800; }
.role-where { color: var(--brand-600); font-size: .82rem; font-weight: 700; }
.role p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 767.98px) { .ladder { grid-template-columns: 1fr 1fr; } }
.ladder-step { padding: 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); text-align: left; color: var(--ink); }
.ladder-step strong { display: block; font-size: .92rem; }
.ladder-step span { display: block; color: var(--muted); font-size: .78rem; }
.ladder-step[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-50); }
.ladder-step[aria-pressed="true"] strong { color: var(--brand-600); }
.form-sent { padding: 28px 20px; text-align: center; }
.form-sent h3 { font-size: 1.2rem; font-weight: 800; margin: 12px 0 4px; }
.form-sent p { color: var(--muted); margin: 0; }

/* Printing a tool's list: only the tool. */
@media print {
    body.print-tool .util-bar, body.print-tool .site-nav, body.print-tool .nav-scrim, body.print-tool .site-footer,
    body.print-tool #content > :not(.tool-band), body.print-tool .cms-fab, body.print-tool .cms-bar,
    body.print-tool .no-print { display: none !important; }
    body.print-tool .tool-band { border: 0; padding: 0; }
    body.print-tool .tool { box-shadow: none; border: 0; padding: 0; grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) { .matrix td[data-label]::before { color: var(--accent, var(--muted)); } }

/* =========================================================
   PHONES (< 768px): the pages' own parts, made to fit a hand
   ========================================================= */
@media (max-width: 767.98px) {
    /* The home's newest listings: a row to swipe through, not a long stack. */
    .home-strip {
        display: flex; gap: 12px;
        margin: 0 calc(var(--bs-gutter-x) * -.5); padding: 2px calc(var(--bs-gutter-x) * .5) 8px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(var(--bs-gutter-x) * .5);
        scrollbar-width: none;
    }
    .home-strip::-webkit-scrollbar { display: none; }
    .home-strip > .property-card { flex: 0 0 86%; margin-bottom: 0; scroll-snap-align: start; }

    /* An information page's buttons: full width, one under the other. */
    .info-hero .btn-lg { flex: 1 1 100%; justify-content: center; }

    /* The listings' filters: the three menus share a row, the rest the next. */
    .search-row .segmented.purpose { width: 100%; }
    .search-row .segmented.purpose a, .search-row .segmented.purpose label { flex: 1; text-align: center; }
    .filter-row > .dropdown { flex: 1 1 calc((100% - 16px) / 3); min-width: 0; }
    .filter-row > .dropdown > .filter-btn { width: 100%; justify-content: space-between; gap: 4px; padding: 7px 10px; font-size: .86rem; overflow: hidden; }
    .filter-row:not(:has(> .segmented)) > .filter-btn { flex: 1 1 auto; justify-content: center; }
    .filter-row > .segmented { flex: 1 1 auto; }
    .filter-row > .segmented label { flex: 1; text-align: center; }
    .filter-row > .filter-btn { flex: 0 0 auto; }

    /* The footer's links fold under their headings (site.js). */
    .site-footer .row > .footer-group { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .12); margin-top: 0; }
    .site-footer .footer-group h2 { margin: 0; }
    .footer-group:not(.is-open) > ul { display: none; }
    .footer-group > ul { padding-bottom: 12px; }
    .footer-toggle {
        display: flex; justify-content: space-between; align-items: center; width: 100%;
        padding: 14px 0; border: 0; background: none;
        color: #fff; font: inherit; font-weight: 700; text-align: left;
    }
    .footer-toggle .bi { transition: transform .2s; }
    .footer-group.is-open .footer-toggle .bi { transform: rotate(180deg); }
}
/* On bigger screens the footer's headings are just headings. */
@media (min-width: 768px) {
    .footer-toggle { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; }
    .footer-toggle .bi { display: none; }
}