/* Vivulo Realty — public site (layouts/public): header, drawer, bottom nav, footer, announcement bar, page sections.
   Loaded after base.css; everything lives in the components layer so base utilities ([hidden], .mobile-only…) still win.
   Later tasks append page sections below under "=== <page> ===" headings. */
@layer components {

  /* === shell === */
  @media (min-width: 900px) { :root { --v-header-h: 64px; } }

  /* without a bottom nav, toasts sit at the bottom edge */
  body:not(:has(.bottom-nav)) { --v-toast-offset: 0px; }

  /* the skip link is .sr-only (utilities, !important); important rules in an earlier layer win over a later layer's */
  .skip-link:focus {
    position: fixed !important; z-index: 200; top: 8px; left: 8px; width: auto !important; height: auto !important;
    padding: 10px 16px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important;
    color: #fff; background: var(--v-navy-900); border-radius: var(--v-radius-md); font-weight: 600; text-decoration: none;
    outline: 2px solid var(--v-gold-300); outline-offset: 2px;
  }

  /* dark surfaces: blue-600 is ~2:1 on navy, use a light ring (gold-300 ≈ 7.8:1 on navy-800) */
  .v-announcement :focus-visible, .site-footer :focus-visible, .on-navy :focus-visible { outline-color: var(--v-gold-300); }

  /* ---------- Brand ---------- */
  .site-brand {
    display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px;
    color: var(--v-navy-900); text-decoration: none;
  }
  .site-brand:hover { text-decoration: none; }
  .site-brand__mark { width: 32px; height: 32px; border-radius: 8px; }
  .site-brand__name {
    display: inline-flex; align-items: center; gap: 6px; line-height: 1;
    font-family: var(--v-font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  }
  .site-brand__sub {
    align-self: flex-end; padding-bottom: 0.1em; font-family: var(--v-font-display); font-size: 0.8125rem;
    font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v-gold-800);
  }
  .site-brand--light { color: #fff; }
  .site-brand--light .site-brand__sub { color: var(--v-gold-300); }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 40; height: var(--v-header-h);
    background: rgb(250 249 246 / .88); border-bottom: 1px solid rgb(15 36 66 / .08);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  .site-header__bar { display: flex; align-items: center; gap: 8px; height: 100%; }
  .site-header__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }
  @media (min-width: 900px) {
    .site-header__bar { gap: 20px; }
    .site-header__tools { gap: 12px; flex: 1 1 auto; justify-content: flex-end; }
  }

  .site-nav { display: none; }
  @media (min-width: 900px) { .site-nav { display: block; } }
  .site-nav__list { display: flex; align-items: center; gap: 2px; padding: 0; margin: 0; }
  .site-nav__link {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px;
    font-size: 0.9375rem; font-weight: 500; color: var(--v-ink-700); text-decoration: none; white-space: nowrap;
    border-radius: 8px; transition: color var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
  }
  .site-nav__link:hover { color: var(--v-navy-900); background: var(--v-navy-50); text-decoration: none; }
  .site-nav__link[aria-current="page"] { color: var(--v-navy-900); font-weight: 600; }
  .site-nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px;
    border-radius: 2px; background: var(--v-gold-500);
  }
  .site-nav__split { position: relative; display: flex; align-items: center; }
  .site-nav__split > .site-nav__link { padding-right: 4px; }
  .site-nav__menu { position: static; }
  .site-nav__menu > .v-menu__list { left: 0; right: auto; min-width: 200px; }
  .site-nav__caret {
    display: grid; place-items: center; width: 26px; height: 40px; border-radius: 6px; color: var(--v-ink-500);
    transition: color var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
  }
  .site-nav__caret:hover, .site-nav__menu[open] > .site-nav__caret { color: var(--v-navy-900); background: var(--v-navy-50); }
  .site-nav__caret .i { transition: transform var(--v-dur) var(--v-ease); }
  .site-nav__menu[open] > .site-nav__caret .i { transform: rotate(180deg); }
  @media (min-width: 1200px) { .site-nav__link { padding: 0 12px; } .site-nav__split > .site-nav__link { padding-right: 4px; } }

  /* search */
  .site-search { position: relative; display: flex; align-items: center; min-width: 0; }
  .site-header .site-search { flex: 0 1 280px; min-width: 150px; }
  .site-search__icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--v-ink-500); pointer-events: none; }
  .site-search__input {
    width: 100%; min-width: 0; height: 40px; padding: 0 14px 0 38px; font-size: 16px; color: var(--v-ink-900);
    background: var(--v-surface); border: 1px solid var(--v-ink-200); border-radius: var(--v-radius-full);
    transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
  }
  .site-search__input:hover { border-color: var(--v-ink-300); }
  .site-search__input:focus { outline: 2px solid transparent; border-color: var(--v-blue-600); box-shadow: var(--v-focus); }
  .site-search__input::-webkit-search-cancel-button { cursor: pointer; }
  @media (min-width: 900px) { .site-header .site-search__input { font-size: 0.9375rem; } }
  .site-search--block .site-search__input { height: 44px; background: var(--v-ink-50); }

  /* account */
  .site-account { flex: none; }
  div.site-account { display: flex; align-items: center; gap: 4px; }
  .site-account__join { display: none; }
  @media (min-width: 600px) { .site-account__join { display: inline-flex; } }
  @media (min-width: 900px) and (max-width: 1199.98px) { .site-account__join { display: none; } }
  .site-account__toggle {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border-radius: var(--v-radius-full);
    color: var(--v-ink-800); transition: background-color var(--v-dur) var(--v-ease);
  }
  .site-account__toggle:hover, details.site-account[open] > .site-account__toggle { background: var(--v-navy-50); }
  .site-account__toggle .v-avatar { background: var(--v-navy-800); color: #fff; }
  .site-account__name { display: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--v-text-sm); font-weight: 600; }
  .site-account__caret { display: none; color: var(--v-ink-500); }
  @media (min-width: 900px) { .site-account__caret { display: block; } .site-account__toggle { padding: 0 8px 0 4px; } }
  @media (min-width: 1200px) { .site-account__name { display: block; } }
  .site-account .v-menu__label strong { color: var(--v-ink-800); font-weight: 600; }

  /* ---------- Drawer (mobile menu) ---------- */
  .site-drawer .v-dialog__head { min-height: var(--v-header-h); padding: 0 16px; }
  .site-drawer .site-drawer__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .site-drawer .site-search { margin: 0 4px 8px; }
  .site-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
  .site-drawer__link {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--v-radius-md);
    font-size: var(--v-text-md); font-weight: 600; color: var(--v-navy-900); text-decoration: none;
  }
  .site-drawer__link:hover { background: var(--v-ink-100); text-decoration: none; }
  .site-drawer__link .i { color: var(--v-ink-500); }
  .site-drawer__link[aria-current="page"] { background: var(--v-navy-50); color: var(--v-navy-800); }
  .site-drawer__link[aria-current="page"] .i { color: var(--v-gold-700); }
  .site-drawer__link--quiet { font-weight: 500; color: var(--v-ink-700); }
  .site-drawer__sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 10px 44px; margin: 0; }
  .site-drawer__sub a {
    position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
    font-size: var(--v-text-sm); font-weight: 500; color: var(--v-ink-700); text-decoration: none;
    background: var(--v-surface); border: 1px solid var(--v-ink-200); border-radius: var(--v-radius-full);
  }
  .site-drawer__sub a::after { content: ""; position: absolute; inset: -5px 0; }
  .site-drawer__sub a:hover { border-color: var(--v-ink-400); color: var(--v-ink-900); text-decoration: none; }
  .site-drawer__account { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 12px; border-top: var(--v-border); }
  div.site-drawer__account { gap: 8px; padding-inline: 4px; }
  .site-drawer__who { display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; font-size: var(--v-text-sm); color: var(--v-ink-600); min-width: 0; }
  .site-drawer__who strong { color: var(--v-ink-900); }
  .site-drawer__who .v-avatar { background: var(--v-navy-800); color: #fff; }

  /* ---------- Bottom nav (customers, below 900px) ---------- */
  .bottom-nav {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--v-bottomnav-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: rgb(255 255 255 / .94); border-top: 1px solid var(--v-ink-200);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  @media (min-width: 900px) { .bottom-nav { display: none; } }
  @media (max-width: 899.98px) { body:has(.bottom-nav) { padding-bottom: calc(var(--v-bottomnav-h) + env(safe-area-inset-bottom)); } }
  .bottom-nav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
    font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: var(--v-ink-500); text-decoration: none;
    transition: color var(--v-dur) var(--v-ease);
  }
  .bottom-nav__item:hover { text-decoration: none; color: var(--v-ink-800); }
  .bottom-nav__item .i { width: 22px; height: 22px; stroke-width: 1.75; }
  .bottom-nav__item:focus-visible { outline-offset: -4px; border-radius: 12px; }
  .bottom-nav__item[aria-current="page"] { color: var(--v-navy-800); font-weight: 600; }
  .bottom-nav__item[aria-current="page"] .i { stroke-width: 2.1; }
  .bottom-nav__item[aria-current="page"]::before {
    content: ""; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--v-gold-500);
  }

  /* ---------- Announcement bar ---------- */
  .v-announcement { position: relative; z-index: 41; background: var(--v-navy-800); color: var(--v-navy-50); }
  .v-announcement__slide { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 0.8125rem; line-height: 1.3; }
  .v-announcement__icon { width: 16px; height: 16px; color: var(--v-gold-500); }
  .v-announcement__msg { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-announcement__msg > * { display: inline; }
  .v-announcement__msg strong { color: var(--v-gold-300); font-weight: 600; }
  .v-announcement__msg a { color: inherit; text-decoration-line: underline; }
  .v-announcement__link {
    flex: none; font-weight: 600; color: var(--v-gold-300); white-space: nowrap;
    text-decoration-line: underline; text-decoration-color: rgb(232 200 122 / .45);
  }
  .v-announcement__link:hover { color: #fff; text-decoration-color: currentColor; }
  .v-announcement__close {
    position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 -8px 0 auto; padding: 0;
    color: var(--v-navy-100); background: none; border: 0; border-radius: var(--v-radius-sm);
  }
  .v-announcement__close::after { content: ""; position: absolute; inset: -6px; }
  .v-announcement__close:hover { color: #fff; background: rgb(255 255 255 / .1); }
  .v-announcement__close:focus-visible { outline-offset: -2px; }
  @media (min-width: 900px) { .v-announcement__slide { font-size: var(--v-text-sm); } }

  /* ---------- Footer ---------- */
  .site-footer { margin-top: var(--v-space-12); color: var(--v-ink-300); background: var(--v-navy-900); font-size: var(--v-text-sm); }
  .site-footer__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px 16px; padding-block: 32px 20px;
  }
  .site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
  .site-footer__brand .site-brand { align-self: flex-start; }
  .site-footer__brand p { max-width: 40ch; line-height: 1.55; }
  .site-footer__title { margin-bottom: 4px; font-size: var(--v-text-sm); font-weight: 600; letter-spacing: 0; color: #fff; }
  .site-footer__links { display: grid; padding: 0; margin: 0; }
  .site-footer a { color: var(--v-ink-200); text-decoration: none; }
  .site-footer a:hover { color: #fff; text-decoration-line: underline; }
  .site-footer__links a, .site-footer__contact a { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer__contact { display: grid; font-style: normal; }
  .site-footer__contact > * { display: flex; align-items: center; gap: 8px; min-height: 40px; }
  .site-footer__contact > span:first-child { align-items: flex-start; padding-block: 10px; line-height: 1.45; }
  .site-footer__contact .i { flex: none; color: var(--v-gold-500); }
  .site-footer__contact > span:first-child .i { margin-top: 2px; }
  .site-footer__base {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
    padding-block: 8px; border-top: 1px solid rgb(255 255 255 / .1); color: var(--v-ink-400); font-size: var(--v-text-xs);
  }
  .site-footer__social { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  @media (pointer: coarse) { .site-footer__links a, .site-footer__contact a { min-height: 44px; } }
  @media (min-width: 900px) {
    .site-footer { margin-top: var(--v-space-16); }
    .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding-block: 48px 32px; }
    .site-footer__brand { grid-column: auto; }
    .site-footer__links a, .site-footer__contact a, .site-footer__contact > * { min-height: 34px; }
  }

  /* === about === */
  .about-hero { display: grid; gap: 20px; padding-block: 24px 8px; }
  .about-hero__title { font-size: clamp(2rem, 1.45rem + 1.9vw, 2.75rem); line-height: 1.08; }
  .about-hero__lead { max-width: 52ch; margin: 12px 0 20px; font-size: var(--v-text-md); line-height: 1.6; color: var(--v-ink-600); }
  .about-hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--v-radius-lg); background: var(--v-navy-900); }
  .about-hero__media figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--v-text-xs); color: var(--v-ink-500); }
  .about-hero__media figcaption::before { content: ""; width: 16px; height: 1px; background: var(--v-gold-600); }
  @media (min-width: 900px) {
    .about-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; padding-block: 56px 16px; }
  }

  .about-section { padding-block: 32px; }
  .about-section h2 { margin-bottom: 16px; }
  @media (min-width: 900px) { .about-section { padding-block: 48px; } .about-section h2 { margin-bottom: 24px; } }

  .about-mission__body { display: grid; gap: 12px; max-width: 65ch; color: var(--v-ink-700); line-height: 1.65; }
  @media (min-width: 900px) { .about-hero__lead, .about-mission__body { font-size: 1.0625rem; } }
  @media (min-width: 900px) {
    .about-mission { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; }
    .about-mission .about-mission__title { margin: 0; }
  }

  .about-stats {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px;
    border-block: 1px solid var(--v-ink-200);
  }
  .about-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 0; }
  .about-stats__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--v-ink-200); }
  .about-stats__item:nth-child(n + 3) { border-top: 1px solid var(--v-ink-200); }
  .about-stats dd {
    font-family: var(--v-font-display); font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); font-weight: 600; line-height: 1;
    color: var(--v-navy-900); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em;
  }
  .about-stats dt { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  @media (min-width: 600px) {
    .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
    .about-stats__item { padding: 24px 0 24px 24px; border-left: 1px solid var(--v-ink-200); }
    .about-stats__item:first-child { padding-left: 0; border-left: 0; }
    .about-stats__item:nth-child(n + 3) { border-top: 0; }
  }

  .about-why { display: grid; padding: 0; margin: 0; }
  .about-why__item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--v-ink-200); }
  .about-why__item:first-child { border-top: 0; padding-top: 4px; }
  .about-why__item > .i { width: 40px; height: 40px; padding: 10px; border-radius: var(--v-radius-md); color: var(--v-gold-800); background: var(--v-gold-100); }
  .about-why__item h3 { font-size: var(--v-text-md); font-weight: 600; letter-spacing: 0; }
  .about-why__item p { margin-top: 2px; font-size: 0.9375rem; color: var(--v-ink-600); }
  @media (min-width: 900px) {
    .about-why { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
    .about-why__item { padding: 20px 0; }
    .about-why__item:nth-child(2) { border-top: 0; padding-top: 4px; }
  }

  .about-team__head { margin-bottom: 20px; }
  .about-team__head h2 { margin-bottom: 4px; }
  .about-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 0; margin: 0; }
  .about-team__photo { border-radius: var(--v-radius-lg); }
  .about-team__name { margin-top: 10px; font-weight: 600; color: var(--v-navy-900); line-height: 1.3; }
  .about-team__role { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  @media (min-width: 900px) { .about-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .about-team__head { margin-bottom: 28px; } }

  .about-cta {
    display: grid; gap: 20px; justify-items: start; padding: 28px 24px; border-radius: var(--v-radius-lg);
    color: var(--v-ink-300); background: var(--v-navy-900);
  }
  .about-cta h2 { margin: 0 0 6px; font-family: var(--v-font-display); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
  .about-cta p { max-width: 52ch; }
  .about-cta :focus-visible { outline-color: var(--v-gold-300); }
  @media (min-width: 900px) {
    .about-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 40px 48px; }
  }
  .about > .about-section:last-child { padding-bottom: 0; }

  /* === property-card === */
  /* the title link's ::after covers the card: one tab stop whose name is the title */
  .property-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--v-surface); border: 1px solid var(--v-ink-200); border-radius: var(--v-radius-lg);
    transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
  }
  @media (hover: hover) {
    .property-card:has(.property-card__link:hover) { border-color: var(--v-ink-300); box-shadow: var(--v-shadow-2); }
  }
  .property-card:has(.property-card__link:focus-visible) { outline: 2px solid var(--v-blue-600); outline-offset: 2px; }
  .property-card__link { color: inherit; text-decoration: none; }
  .property-card__link:hover { text-decoration: none; }
  .property-card__link:focus-visible { outline: none; }
  .property-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

  .property-card__media {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--v-ink-100);
    border-radius: calc(var(--v-radius-lg) - 1px) calc(var(--v-radius-lg) - 1px) 0 0;
  }
  .property-card__media > .v-badge { position: absolute; top: 12px; left: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
  .property-card__media > .property-card__featured { left: auto; right: 12px; gap: 4px; }
  .property-card__featured .i { width: 12px; height: 12px; }
  /* Task 34: listing filters (direction, legal papers) */
  .listing-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-block: 16px 0; }
  .listing-filters__field { display: grid; gap: 4px; min-width: 0; flex: 1 1 160px; max-width: 240px; }
  .estate-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 24px; margin: 0; }
  .estate-specs > div { display: grid; gap: 2px; }
  .estate-specs dt { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .estate-specs dd { margin: 0; font-weight: 600; }
  .estate-price-note { font-size: var(--v-text-sm); color: var(--v-ink-500); margin: 4px 0 0; }
  /* no photo: a faint plan-paper grid instead of a broken image */
  .property-card__placeholder {
    display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%;
    font-size: var(--v-text-sm); color: var(--v-ink-500);
    background-color: var(--v-navy-50);
    background-image: linear-gradient(rgb(26 54 93 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 54 93 / .06) 1px, transparent 1px);
    background-size: 24px 24px; background-position: center;
  }
  /* rendered for every photo; shown only when core.js marks a failed image (.is-img-missing) */
  .property-card__placeholder--fallback { display: none; }
  .property-card__media.is-img-missing > .property-card__placeholder--fallback { display: grid; }
  .property-card__placeholder .i { width: 32px; height: 32px; stroke-width: 1.5; color: var(--v-navy-600); opacity: .55; }

  .property-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 16px; }
  .property-card__price {
    font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--v-gold-700);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .property-card__title { font-size: var(--v-text-md); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--v-navy-900); }
  .property-card__loc { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .property-card__loc .i { width: 16px; height: 16px; }
  /* facts sit at the bottom so cards in a row line up; the hairline is a full-width flex item */
  .property-card__facts {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin: auto 0 0; padding: 8px 0 0;
    font-size: var(--v-text-sm); color: var(--v-ink-700); font-variant-numeric: tabular-nums;
  }
  .property-card__facts::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 8px; background: var(--v-ink-100); }
  .property-card__facts li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .property-card__facts .i { width: 16px; height: 16px; color: var(--v-ink-500); }

  /* horizontal compact variant */
  .property-card--row { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
  .property-card--row .property-card__media { flex: none; width: 112px; height: 112px; aspect-ratio: 1; border-radius: var(--v-radius-md); }
  .property-card--row .property-card__placeholder .i { width: 24px; height: 24px; }
  .property-card--row .property-card__body { padding: 0; gap: 2px; }
  .property-card--row .property-card__price { font-size: var(--v-text-md); }
  .property-card--row .property-card__title { font-size: 0.9375rem; }

  /* === home === */
  .home-hero {
    position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden;
    min-height: min(56vh, 460px); color: #fff; background: var(--v-navy-900);
  }
  .home-hero__media, .home-hero__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .home-hero__media img { object-position: 62% 50%; }
  .home-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(10 26 49 / .30) 0%, rgb(10 26 49 / .55) 38%, rgb(10 26 49 / .94) 100%);
  }
  .home-hero__inner { width: 100%; max-width: 1200px; margin-inline: auto; padding: 56px 16px 24px; }
  .home-hero__title { max-width: 18ch; font-size: clamp(2rem, 1.35rem + 2.8vw, 3.5rem); line-height: 1.06; color: #fff; }
  .home-hero__lead { max-width: 42ch; margin-top: 12px; color: rgb(255 255 255 / .84); line-height: 1.5; }

  .home-search {
    position: relative; display: flex; align-items: center; gap: 6px; max-width: 620px; margin-top: 20px; padding: 6px;
    background: var(--v-surface); border-radius: 14px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .55);
  }
  .home-search:has(.home-search__input:focus-visible) { outline: 2px solid var(--v-gold-300); outline-offset: 3px; }
  .home-search__input {
    flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 8px 0 12px; border: 0; border-radius: 10px;
    font-size: 16px; color: var(--v-ink-900); background: transparent;
  }
  .home-search__input:focus { outline: none; }
  .home-search__input::-webkit-search-cancel-button { cursor: pointer; }
  .home-search__submit { min-height: 48px; border-radius: 10px; padding-inline: 20px; }
  /* phones: icon-only submit buttons so the full placeholder fits; the label stays for screen readers */
  @media (max-width: 599.98px) {
    .home-search__submit, .listing-search__submit { width: 48px; padding: 0; }
    .listing-search__submit { width: 44px; }
    .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  }
  @media (min-width: 600px) { .home-search__submit .i, .listing-search__submit .i { display: none; } }

  .home-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .home-hero__chips .v-chip {
    color: #fff; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .32);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  @media (hover: hover) { .home-hero__chips .v-chip:hover { color: #fff; background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .7); } }

  @media (min-width: 900px) {
    .home-hero {
      align-items: center; width: calc(100% - 48px); max-width: 1152px; margin: 20px auto 0;
      min-height: clamp(440px, 62vh, 540px); border-radius: var(--v-radius-lg);
    }
    .home-hero::before { background: linear-gradient(90deg, rgb(10 26 49 / .92) 0%, rgb(10 26 49 / .7) 42%, rgb(10 26 49 / .1) 82%); }
    .home-hero__media img { object-position: 50% 50%; }
    .home-hero__inner { padding: 48px 56px; }
    .home-hero__lead { font-size: var(--v-text-lg); }
    .home-search { margin-top: 28px; padding: 8px; }
    .home-search__input, .home-search__submit { height: 52px; min-height: 52px; }
    .home-search__submit { padding-inline: 28px; font-size: var(--v-text-md); }
  }

  .home-section { padding-block: 40px 0; }
  .home-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .home-section__title { font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); letter-spacing: -0.01em; }
  .home-section__lead { margin-top: 4px; color: var(--v-ink-600); }
  .home-section__more { display: inline-flex; align-items: center; min-height: 44px; flex: none; font-weight: 600; }
  @media (min-width: 900px) { .home-section { padding-block: 64px 0; } .home-section__head { margin-bottom: 24px; } }

  /* mobile: a peeking scroller that bleeds to the screen edges; 3-column grid from 900px */
  .home-props__list.v-scroller { margin-inline: -16px; padding: 4px 16px 8px; scroll-padding-inline: 16px; }
  @media (min-width: 900px) {
    .home-props__list.v-scroller {
      grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
      margin-inline: 0; padding: 0; overflow: visible;
    }
  }

  .home-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 20px 0 0; padding: 0; }
  .home-why__item > .i { width: 44px; height: 44px; padding: 11px; border-radius: var(--v-radius-md); color: var(--v-gold-800); background: var(--v-gold-100); }
  .home-why__item h3 { text-wrap: pretty; margin-top: 12px; font-size: var(--v-text-md); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
  .home-why__item p { margin-top: 4px; font-size: var(--v-text-sm); color: var(--v-ink-600); line-height: 1.5; }
  @media (min-width: 900px) {
    .home-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; }
    .home-why__list { margin: 0; gap: 32px 40px; }
    .home-why__item p { font-size: 0.9375rem; }
  }

  .home-stats-wrap { padding-top: 40px; }
  .home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--v-ink-200); }
  .home-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 0; }
  .home-stats__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--v-ink-200); }
  .home-stats__item:nth-child(n + 3) { border-top: 1px solid var(--v-ink-200); }
  .home-stats dd {
    margin: 0; font-family: var(--v-font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1;
    color: var(--v-navy-900); font-variant-numeric: lining-nums tabular-nums;
  }
  .home-stats dt { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  @media (min-width: 600px) {
    .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-stats__item, .home-stats__item:nth-child(even) { padding: 24px 0 24px 24px; border-left: 1px solid var(--v-ink-200); }
    .home-stats__item:first-child { padding-left: 0; border-left: 0; }
    .home-stats__item:nth-child(n + 3) { border-top: 0; }
  }
  @media (min-width: 900px) { .home-stats-wrap { padding-top: 64px; } }

  /* full-width navy band that runs straight into the footer */
  .home-cta { margin-top: 40px; color: var(--v-navy-100); background: var(--v-navy-800); }
  .home-cta__inner { display: grid; gap: 20px; justify-items: start; padding-block: 36px; }
  .home-cta__title { margin-bottom: 6px; font-family: var(--v-font-display); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
  .home-cta p { max-width: 52ch; }
  .home ~ .site-footer { margin-top: 0; }
  @media (min-width: 900px) {
    .home-cta { margin-top: 64px; }
    .home-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-block: 48px; }
  }

  /* === listing === */
  .listing-head { padding-block: 20px 12px; }
  .listing-head__title { font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); letter-spacing: -0.01em; overflow-wrap: anywhere; }
  .listing-head__sub { max-width: 65ch; margin-top: 6px; color: var(--v-ink-600); }
  @media (min-width: 900px) { .listing-head { padding-block: 40px 16px; } }

  /* sticky toolbar under the header: search + status chips */
  .listing-bar {
    position: sticky; top: var(--v-header-h); z-index: 30;
    background: rgb(250 249 246 / .92); border-bottom: 1px solid rgb(15 36 66 / .08);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  .listing-bar__inner { display: flex; flex-direction: column; gap: 8px; padding-block: 8px; }
  .listing-search { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .listing-search__input {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 16px; color: var(--v-ink-900);
    background: var(--v-surface); border: 1px solid var(--v-ink-300); border-radius: var(--v-radius-md);
    transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
  }
  .listing-search__input:hover { border-color: var(--v-ink-400); }
  .listing-search__input:focus { outline: 2px solid transparent; border-color: var(--v-blue-600); box-shadow: var(--v-focus); }
  .listing-search__submit { flex: none; }
  .listing-chips {
    display: flex; gap: 8px; margin-inline: -16px; padding: 4px 16px; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .listing-chips::-webkit-scrollbar { display: none; }
  .listing-chips .v-chip { flex: none; }
  @media (min-width: 900px) {
    .listing-bar__inner { flex-direction: row; align-items: center; gap: 24px; padding-block: 12px; }
    .listing-search { flex: 0 1 480px; }
    .listing-chips { margin: 0; padding: 4px 0; }
  }

  .listing-body { padding-top: 16px; }
  /* 1 / 2 / 3 columns: pages hold 6 cards, so rows always fill on desktop */
  .listing-grid { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 600px) { .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .listing-count { margin-bottom: 12px; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .listing-body .v-pagination { margin-top: 32px; }
  .listing-empty { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
  @media (min-width: 900px) { .listing-body { padding-top: 24px; } .listing-count { margin-bottom: 16px; } }

  /* === details === */
  /* phones: the action bar replaces the bottom nav; body padding keeps the footer clear of it */
  body[data-page="details"] .bottom-nav { display: none; }
  @media (max-width: 899.98px) {
    body[data-page="details"] { padding-bottom: calc(var(--v-bottomnav-h) + env(safe-area-inset-bottom)); --v-toast-offset: var(--v-bottomnav-h); }
  }
  .details-missing { display: flex; flex-direction: column; align-items: center; padding-block: 24px; }

  /* faint plan-paper grid shared by the photo and map placeholders */
  .gallery__tile, .gallery__empty, .map-frame {
    background-color: var(--v-navy-50);
    background-image: linear-gradient(rgb(26 54 93 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 54 93 / .06) 1px, transparent 1px);
    background-size: 24px 24px; background-position: center;
  }

  /* ---------- Gallery ---------- */
  .gallery { position: relative; }
  .gallery__track.v-scroller { gap: 0; padding: 0; scroll-padding-inline: 0; }
  .gallery__tile {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 64vh; padding: 0; border: 0; border-radius: 0;
    overflow: hidden; cursor: zoom-in; color: var(--v-ink-500);
  }
  .gallery__tile > img { transition: filter var(--v-dur) var(--v-ease); }
  @media (hover: hover) { .gallery__tile:hover > img { filter: brightness(.92); } }
  .gallery__tile:focus-visible { outline-offset: -4px; outline-color: var(--v-gold-300); }
  .gallery__missing, .gallery__empty {
    display: grid; place-content: center; justify-items: center; gap: 6px; font-size: var(--v-text-sm); color: var(--v-ink-500);
  }
  .gallery__missing { display: none; position: absolute; inset: 0; }
  .gallery__missing .i, .gallery__empty .i { width: 32px; height: 32px; stroke-width: 1.5; color: var(--v-navy-600); opacity: .55; }
  .gallery__tile.is-img-missing > .gallery__missing { display: grid; }
  /* core.js hides a broken image; in the gallery it stays as a transparent hit area over the placeholder
     (important: [hidden] lives in the later utilities layer) */
  .gallery__tile.is-img-missing > img[hidden] { display: block !important; opacity: 0; }
  .gallery__empty { height: 200px; }

  .gallery__count, .gallery__pill {
    position: absolute; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
    font-size: 0.8125rem; font-weight: 600; line-height: 1; color: #fff; text-decoration: none;
    background: rgb(10 26 49 / .72); border-radius: var(--v-radius-full);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .gallery__count { right: 12px; pointer-events: none; }
  .gallery__pill { left: 12px; }
  .gallery__pill::after { content: ""; position: absolute; inset: -7px -4px; }
  .gallery__pill:hover { text-decoration: none; background: rgb(10 26 49 / .88); }
  .gallery__pill .i { color: var(--v-gold-300); }
  .gallery__pill:focus-visible { outline-color: var(--v-gold-300); }
  .gallery__all {
    position: absolute; right: 16px; bottom: 16px; z-index: 1; display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    font-size: var(--v-text-sm); font-weight: 600; color: var(--v-navy-900);
    background: var(--v-surface); border: 1px solid rgb(15 36 66 / .14); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-1);
  }
  .gallery__all:hover { background: var(--v-ink-50); }

  /* phones: prev/next appear on hover-capable devices only; touch users swipe */
  .gallery__nav {
    position: absolute; top: 50%; z-index: 1; display: none; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0;
    color: var(--v-navy-900); background: rgb(255 255 255 / .92); border: 0; border-radius: 50%; box-shadow: var(--v-shadow-1);
    opacity: 0; transition: opacity var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
  }
  .gallery__nav--prev { left: 12px; }
  .gallery__nav--next { right: 12px; }
  .gallery__nav:hover { background: #fff; }
  .gallery__nav:disabled { visibility: hidden; }
  @media (hover: hover) and (pointer: fine) {
    .gallery__nav { display: grid; }
    .gallery:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
  }
  /* windowed dots: at most 7 visible, the row slides to keep the current one in view (estate-details.js) */
  .gallery__dots {
    position: absolute; left: 50%; bottom: 24px; z-index: 1; width: calc(min(var(--n, 7), 7) * 12px - 6px); overflow: hidden;
    transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 2px rgb(10 26 49 / .45));
  }
  .gallery__dots-row { display: flex; gap: 6px; width: max-content; transition: transform var(--v-dur) var(--v-ease); }
  .gallery__dots i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .55); transition: transform var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease); }
  .gallery__dots i.is-active { background: #fff; }
  .gallery__dots i.is-edge { transform: scale(.6); }

  @media (min-width: 900px) {
    .gallery { width: calc(100% - 48px); max-width: 1152px; margin: 24px auto 0; border-radius: var(--v-radius-lg); overflow: hidden; }
    .gallery__track.v-scroller {
      grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 8px; height: clamp(380px, 40vw, 500px); overflow: hidden; scroll-snap-type: none;
    }
    .gallery__tile { aspect-ratio: auto; height: 100%; max-height: none; }
    .gallery__tile:first-child { grid-row: 1 / -1; }
    .gallery__tile:nth-child(n + 6) { display: none; }
    .gallery[data-count="1"] .gallery__track { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .gallery[data-count="2"] .gallery__track { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
    .gallery[data-count="3"] .gallery__track { grid-template-columns: 2fr 1fr; }
    .gallery[data-count="4"] .gallery__tile:nth-child(2) { grid-column: 2 / -1; }
    .gallery__count, .gallery__nav, .gallery__dots { display: none; }
    .gallery__pill { left: 16px; bottom: 16px; min-height: 36px; }
    .gallery__all { display: inline-flex; }
    .gallery__empty { height: 280px; }
  }

  /* ---------- Layout ---------- */
  /* explicit minmax(0, 1fr): an implicit auto column would grow to the scene scroller's min-content width */
  .details__layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  @media (min-width: 900px) {
    .details__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding-top: 36px; }
    .details__aside { position: sticky; top: calc(var(--v-header-h) + 24px); display: grid; gap: 16px; }
  }

  /* ---------- Header ---------- */
  .details-head { display: grid; gap: 10px; }
  .details-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; }
  .details-head__type { font-size: var(--v-text-sm); font-weight: 500; color: var(--v-ink-600); }
  .details-head__share { margin: 0 -8px 0 auto; color: var(--v-ink-700); }
  /* Playfair defaults to old-style figures: keep "360°", "Quận 1" on the baseline */
  .details-head__title, .details-section__title { font-variant-numeric: lining-nums; }
  .details-head__title { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); line-height: 1.12; overflow-wrap: anywhere; }
  .details-head__title--long { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.18; }
  .details-head__title.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .details-head__title-more { justify-self: start; min-height: 44px; margin: -10px 0 -6px; padding: 0; font-size: var(--v-text-sm); font-weight: 600; color: var(--v-blue-600); background: none; border: 0; }
  .details-head__title-more:hover { text-decoration: underline; }
  .details-head__addr { display: flex; align-items: flex-start; gap: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--v-ink-600); }
  .details-head__addr .i { margin-top: 3px; color: var(--v-ink-500); }
  .details-head__money { display: grid; gap: 4px; margin-top: 8px; }
  .details-price {
    font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--v-gold-700); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .details-head__sub { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--v-text-sm); color: var(--v-ink-600); }
  .details-head__views { display: inline-flex; align-items: center; gap: 6px; color: var(--v-ink-500); }
  /* desktop: price and ₫/m² sit in the sticky card right beside the header */
  @media (min-width: 900px) { .details-head__price, .details-head__perm2 { display: none; } .details-head__money { margin-top: 0; } }

  /* ---------- Key facts: ruled like the home/about stats ---------- */
  .details-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; border-block: 1px solid var(--v-ink-200); }
  .details-facts__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; padding: 16px 0; }
  .details-facts__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--v-ink-200); }
  .details-facts__item:nth-child(n + 3) { border-top: 1px solid var(--v-ink-200); }
  .details-facts dt { display: flex; align-items: center; gap: 6px; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .details-facts dt .i { color: var(--v-gold-700); }
  .details-facts dd {
    margin: 0; font-family: var(--v-font-display); font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); font-weight: 600; line-height: 1.05;
    color: var(--v-navy-900); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere;
  }
  .details-facts dd small { font-family: var(--v-font-ui); font-size: var(--v-text-sm); font-weight: 500; color: var(--v-ink-500); }
  .details-facts dd.details-facts__text { font-size: 1.25rem; line-height: 1.25; }
  @media (min-width: 600px) {
    .details-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .details-facts__item, .details-facts__item:nth-child(even) { padding: 18px 0 18px 20px; border-left: 1px solid var(--v-ink-200); }
    .details-facts__item:first-child { padding-left: 0; border-left: 0; }
    .details-facts__item:nth-child(n + 3) { border-top: 0; }
  }

  /* ---------- Sections ---------- */
  .details-section { margin-top: 40px; }
  .details-section__title { margin-bottom: 14px; font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing: -0.01em; }
  .details-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .details-section__head .details-section__title { margin: 0; }
  .details-section__aside { flex: none; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  @media (min-width: 900px) { .details-section { margin-top: 48px; } }

  /* rich text from the editor (estate descriptions; reusable for blog posts) */
  .prose { max-width: 68ch; font-size: 1rem; line-height: 1.7; color: var(--v-ink-700); overflow-wrap: anywhere; }
  .prose > * + * { margin-top: 0.85em; }
  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 1.5em; font-size: 1.125rem; line-height: 1.35; letter-spacing: 0; }
  .prose h1, .prose h2 { font-size: 1.25rem; }
  .prose > :first-child { margin-top: 0; }
  .prose ul, .prose ol { padding-left: 1.4em; }
  .prose li + li { margin-top: 0.35em; }
  .prose a { text-decoration-line: underline; }
  .prose img, .prose video, .prose iframe { max-width: 100%; height: auto; border-radius: var(--v-radius-md); }
  .prose blockquote { padding-left: 1em; border-left: 3px solid var(--v-gold-500); color: var(--v-ink-600); }
  .prose table { display: block; max-width: 100%; overflow-x: auto; }
  .prose td, .prose th { padding: 6px 10px; border: var(--v-border); }
  .prose pre { max-width: 100%; overflow-x: auto; }

  .details-desc.is-collapsed { max-height: calc(1.7em * 12); overflow: hidden; }
  .details-desc.is-collapsed.is-overflowing { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .details-more {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0;
    font-weight: 600; color: var(--v-navy-800); background: none; border: 0;
  }
  .details-more:hover { color: var(--v-navy-950); text-decoration: underline; }
  .details-more .i { transition: transform var(--v-dur) var(--v-ease); }
  .details-more[aria-expanded="true"] .i { transform: rotate(180deg); }

  /* ---------- 360° tour ---------- */
  .tour__stage { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; background: var(--v-navy-950); border-radius: var(--v-radius-lg); }
  .tour__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .tour__cover {
    position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; text-align: center;
    background: radial-gradient(ellipse at 50% 55%, rgb(10 26 49 / .35) 0%, rgb(10 26 49 / .78) 100%);
  }
  /* no listing photo to use as a poster: a navy stage with a faint compass ring */
  .tour__stage--plain .tour__cover {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 34%, rgb(212 168 83 / .14) 34.2% 34.6%, transparent 34.8% 52%, rgb(255 255 255 / .06) 52.2% 52.5%, transparent 52.7%),
      radial-gradient(ellipse at 50% 40%, var(--v-navy-800) 0%, var(--v-navy-950) 75%);
  }
  .tour__badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--v-text-sm); font-weight: 600; color: var(--v-gold-300); }
  .tour__start { box-shadow: 0 12px 28px -10px rgb(0 0 0 / .55); }
  .tour__hint { font-size: var(--v-text-sm); color: rgb(255 255 255 / .85); }
  .tour__pano { position: absolute; inset: 0; z-index: 2; }
  .tour__pano:focus-visible { outline: 2px solid var(--v-gold-300); outline-offset: -2px; }
  .tour__stage.is-live .tour__cover { display: none; }
  .tour__scenes { display: flex; gap: 8px; margin: 12px -16px 0; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tour__scenes::-webkit-scrollbar { display: none; }
  .tour__scene { flex: none; padding-left: 6px; }
  .tour__num {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v-ink-700); background: var(--v-ink-100);
  }
  .tour__scene[aria-pressed="true"] .tour__num { color: var(--v-navy-950); background: var(--v-gold-500); }
  @media (min-width: 600px) { .tour__stage { aspect-ratio: 16 / 9; } }
  @media (min-width: 900px) { .tour__scenes { flex-wrap: wrap; margin: 14px 0 0; padding: 0; overflow: visible; } }

  /* ---------- Map ---------- */
  .details-loc { margin: -4px 0 12px; font-size: 0.9375rem; color: var(--v-ink-600); }
  .map-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: var(--v-border); border-radius: var(--v-radius-lg); }
  .map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
  .map-frame__facade {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%;
    padding: 16px; color: var(--v-navy-900); background: none; border: 0; cursor: pointer;
  }
  .map-frame__facade:focus-visible { outline-offset: -4px; }
  .map-frame__pin { width: 44px; height: 44px; padding: 11px; border-radius: 50%; color: #fff; background: var(--v-navy-800); box-shadow: var(--v-shadow-2); }
  .map-frame__label {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 18px; font-weight: 600;
    background: var(--v-surface); border: 1px solid var(--v-ink-300); border-radius: var(--v-radius-md);
    transition: border-color var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
  }
  @media (hover: hover) { .map-frame__facade:hover .map-frame__label { border-color: var(--v-ink-400); background: var(--v-ink-50); } }
  .map-frame__note { font-size: var(--v-text-xs); color: var(--v-ink-500); }
  .map-frame--link { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 120px; padding: 24px; }
  @media (min-width: 900px) { .map-frame { aspect-ratio: 16 / 9; } }

  /* ---------- Actions: fixed bar on phones, sticky card on desktop ---------- */
  .details-actions {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "save chat book"; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .96); border-top: 1px solid var(--v-ink-200); box-shadow: 0 -10px 24px -18px rgb(15 36 66 / .35);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  .details-actions__price { grid-area: price; display: none; }
  .details-actions__save { grid-area: save; width: 44px; padding: 0; }
  .details-actions__chat { grid-area: chat; padding: 0 14px; }
  .details-actions__book { grid-area: book; min-width: 0; padding: 0 14px; }
  .details-actions__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .details-actions__more { display: none; }
  .details-actions__save .i { transition: fill var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease); }
  .details-actions__save[aria-pressed="true"] { --_bd: color-mix(in srgb, var(--v-danger-600) 35%, transparent); }
  .details-actions__save[aria-pressed="true"] .i { color: var(--v-danger-600); fill: currentColor; }
  @media (max-width: 379.98px) { .details-actions__book .i { display: none; } }
  @media (min-width: 900px) {
    .details-actions {
      position: static; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "price price" "book book" "save chat";
      gap: 10px; padding: 20px; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg);
      box-shadow: var(--v-shadow-1); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .details-actions__price { display: grid; gap: 2px; padding-bottom: 8px; }
    .details-actions__price .details-price { font-size: 1.625rem; }
    .details-actions__sub { font-size: var(--v-text-sm); color: var(--v-ink-600); }
    .details-actions__save { width: auto; padding: 0 18px; }
    .details-actions__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .details-actions__more { display: inline; }
    .details-actions__book { min-height: 52px; font-size: var(--v-text-md); }
  }

  /* ---------- Agent ---------- */
  .details-agent { display: grid; gap: 14px; margin-top: 40px; padding: 20px; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); }
  .details-agent__label { font-size: var(--v-text-sm); font-weight: 600; letter-spacing: 0; color: var(--v-ink-500); }
  .details-agent__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .details-agent__avatar { position: relative; width: 56px; height: 56px; font-size: 1.125rem; color: #fff; background: var(--v-navy-800); }
  .details-agent__name { min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--v-navy-900); overflow-wrap: anywhere; }
  .details-agent__contact { display: grid; margin: 0; }
  .details-agent__contact li + li { border-top: 1px solid var(--v-ink-100); }
  .details-agent__contact a { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--v-ink-800); font-size: 0.9375rem; }
  .details-agent__contact .i { color: var(--v-ink-500); }
  @media (min-width: 900px) {
    .details-agent { margin-top: 0; }
    .details-agent__chat { display: none; } /* the sticky card right above has "Chat with agent" */
  }

  /* ---------- Lightbox: full screen, dark, scroll-snap ---------- */
  .v-dialog.lightbox {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    color: #fff; background: var(--v-navy-950); box-shadow: none;
  }
  .v-dialog.lightbox[open] { display: block; animation: v-fade var(--v-dur) var(--v-ease); }
  .lightbox::backdrop { background: var(--v-navy-950); }
  .lightbox :focus-visible { outline-color: var(--v-gold-300); }
  .lightbox__bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px 16px;
  }
  .lightbox__count { font-size: var(--v-text-sm); font-weight: 600; color: rgb(255 255 255 / .85); }
  .lightbox__btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #fff;
    background: rgb(255 255 255 / .1); border: 0; border-radius: 50%; transition: background-color var(--v-dur) var(--v-ease);
  }
  .lightbox__btn:hover { background: rgb(255 255 255 / .2); }
  .lightbox__btn:disabled { opacity: .3; cursor: default; }
  .lightbox__nav { position: absolute; top: 50%; z-index: 2; margin-top: -22px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lightbox__track::-webkit-scrollbar { display: none; }
  .lightbox__track:focus { outline: none; }
  .lightbox__slide {
    position: relative; flex: 0 0 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 100%; margin: 0; padding: 60px 0 84px;
    scroll-snap-align: center; scroll-snap-stop: always;
  }
  .lightbox__slide img { width: 100%; height: 100%; object-fit: contain; }
  .lightbox__missing { display: none; justify-items: center; gap: 8px; font-size: var(--v-text-sm); color: rgb(255 255 255 / .6); }
  .lightbox__missing .i { width: 40px; height: 40px; stroke-width: 1.5; }
  .lightbox__slide.is-img-missing > .lightbox__missing { display: grid; }
  .lightbox__thumbs {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: safe center; gap: 8px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom)); overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .lightbox__thumbs::-webkit-scrollbar { display: none; }
  .lightbox:not(:has(.lightbox__thumbs)) .lightbox__slide { padding-bottom: 24px; } /* one photo: no strip */
  .lightbox__thumb {
    flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
    background: rgb(255 255 255 / .08); opacity: .5; transition: opacity var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
  }
  .lightbox__thumb:hover { opacity: .85; }
  .lightbox__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--v-navy-950), 0 0 0 4px var(--v-gold-300); }
  .lightbox__thumb.is-img-missing { opacity: .25; }
  @media (min-width: 900px) {
    .lightbox__slide { padding: 72px 88px 108px; }
    .lightbox__thumb { width: 80px; height: 60px; }
    .lightbox:not(:has(.lightbox__thumbs)) .lightbox__slide { padding-bottom: 40px; }
    .lightbox__bar { padding: 16px 16px 16px 24px; }
    .lightbox__nav--prev { left: 24px; }
    .lightbox__nav--next { right: 24px; }
  }

  /* ---------- Booking & sign-in dialogs ---------- */
  .book-form { display: grid; gap: 16px; }
  .book-form__for {
    padding: 10px 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--v-navy-900);
    background: var(--v-navy-50); border-radius: var(--v-radius-md); overflow-wrap: anywhere;
  }
  .login-prompt { display: grid; gap: 14px; }
  .login-prompt__list { display: grid; gap: 4px; margin: 0; }
  .login-prompt__list li { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--v-ink-700); }
  .login-prompt__list .i { color: var(--v-gold-700); }

  /* === blog === */
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .blog-card__media { aspect-ratio: 16 / 9; }
  .blog-card__media > img { z-index: 1; }
  .blog-card__placeholder {
    position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--v-navy-50);
    background-image: linear-gradient(rgb(26 54 93 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 54 93 / .06) 1px, transparent 1px);
    background-size: 24px 24px; background-position: center;
  }
  .blog-card__placeholder .i { width: 32px; height: 32px; stroke-width: 1.5; color: var(--v-navy-600); opacity: .55; }
  .blog-card__body { gap: 8px; padding: 16px 16px 18px; }
  .blog-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .blog-card__title { font-size: var(--v-text-lg); line-height: 1.35; }
  .blog-card__link { color: var(--v-navy-900); text-decoration: none; }
  .blog-card__link:hover { text-decoration: none; color: var(--v-navy-700); }
  .blog-card__link:focus-visible { outline: none; }
  .blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
  .blog-card:has(.blog-card__link:focus-visible) { box-shadow: var(--v-focus); }
  .blog-card__excerpt {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    font-size: var(--v-text-sm); line-height: 1.6; color: var(--v-ink-600); overflow-wrap: anywhere;
  }
  .blog-card__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: auto; padding-top: 4px; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .blog-card__meta > :first-child { color: var(--v-ink-700); font-weight: 500; }
  @media (hover: hover) { .blog-card:hover { border-color: var(--v-ink-300); box-shadow: var(--v-shadow-2); } }

  /* the newest post leads the first page: image beside text on wide screens */
  @media (min-width: 600px) { .blog-card--featured { grid-column: 1 / -1; } }
  @media (min-width: 900px) {
    .blog-card--featured { flex-direction: row; }
    .blog-card--featured .blog-card__media { flex: 0 0 58%; }
    .blog-card--featured .blog-card__body { justify-content: center; gap: 12px; padding: 32px 36px; }
    .blog-card--featured .blog-card__title { font-family: var(--v-font-display); font-weight: 600; font-size: var(--v-text-2xl); line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
    .blog-card--featured .blog-card__excerpt { font-size: var(--v-text-md); -webkit-line-clamp: 4; line-clamp: 4; }
    .blog-card--featured .blog-card__meta { margin-top: 4px; }
  }

  /* --- reading page --- */
  .blog-read__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 16px 48px; max-width: 800px; }
  .blog-read__main { min-width: 0; }
  @media (min-width: 900px) { .blog-read__grid { padding-block: 32px 72px; } }
  @media (min-width: 1200px) {
    .blog-read__grid { grid-template-columns: minmax(0, 760px) 300px; justify-content: center; gap: 72px; max-width: 1200px; align-items: start; }
    .blog-latest { position: sticky; top: calc(var(--v-header-h) + 24px); }
  }

  .blog-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .blog-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--v-ink-300); }
  .blog-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--v-ink-600); text-decoration: none; }
  .blog-crumbs a:hover { color: var(--v-navy-800); text-decoration: underline; }

  .blog-head { margin-top: 8px; }
  .blog-head__title {
    font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.875rem);
    line-height: 1.14; letter-spacing: -0.012em; overflow-wrap: anywhere; text-wrap: balance;
  }
  /* an article title is never cut; very long ones step down a size instead */
  .blog-head__title--long { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.2; }
  .blog-head__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; font-size: var(--v-text-sm); color: var(--v-ink-600); }
  .blog-head__item { display: inline-flex; align-items: center; gap: 6px; }
  .blog-head__item .i { width: 16px; height: 16px; color: var(--v-gold-700); }

  .blog-hero { position: relative; aspect-ratio: 16 / 9; margin: 24px -16px 0; overflow: hidden; background: var(--v-navy-50); }
  .blog-hero.is-img-missing { display: none; }
  @media (min-width: 600px) { .blog-hero { margin-inline: 0; border-radius: var(--v-radius-lg); } }

  .blog-prose { margin-top: 28px; max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: var(--v-ink-800); }
  @media (min-width: 900px) { .blog-prose { margin-top: 36px; font-size: 1.125rem; line-height: 1.8; } }
  .blog-prose > * + * { margin-top: 1.1em; }
  .blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4 { font-family: var(--v-font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--v-navy-900); text-wrap: balance; }
  .blog-prose h1, .blog-prose h2 { margin-top: 2em; font-size: 1.5em; line-height: 1.25; }
  .blog-prose h3 { margin-top: 1.8em; font-size: 1.25em; line-height: 1.3; }
  .blog-prose h4, .blog-prose h5, .blog-prose h6 { margin-top: 1.6em; font-size: 1.05em; }
  .blog-prose a { color: var(--v-blue-600); text-underline-offset: 3px; }
  .blog-prose a:hover { color: var(--v-navy-800); }
  .blog-prose img { display: block; margin-inline: auto; }
  .blog-prose figure { margin-inline: 0; }
  .blog-prose figcaption { margin-top: 8px; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .blog-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
  .blog-prose blockquote { margin-inline: 0; padding: 4px 0 4px 1.1em; border-left-width: 3px; font-family: var(--v-font-display); font-size: 1.1em; font-style: italic; line-height: 1.6; color: var(--v-navy-800); }
  .blog-prose hr { border: 0; border-top: var(--v-border); margin-block: 2em; }
  .blog-prose table { font-size: 0.9em; border-collapse: collapse; }
  .blog-prose th { background: var(--v-ink-50); text-align: left; }
  .blog-prose pre, .blog-prose code { font-size: 0.9em; }
  .blog-prose :not(pre) > code { padding: 1px 5px; background: var(--v-ink-100); border-radius: 4px; }
  .blog-prose pre { padding: 14px 16px; background: var(--v-ink-50); border: var(--v-border); border-radius: var(--v-radius-md); }

  .blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: var(--v-border); }
  .blog-share__label { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font-weight: 600; color: var(--v-navy-900); }
  .blog-share .v-btn { min-height: 44px; }

  .blog-latest__title { font-size: var(--v-text-lg); margin-bottom: 12px; }
  .blog-latest__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .blog-latest__item { position: relative; display: flex; gap: 12px; padding: 8px; margin-inline: -8px; border-radius: var(--v-radius-md); }
  @media (hover: hover) { .blog-latest__item:hover { background: var(--v-ink-50); } }
  .blog-latest__thumb { position: relative; flex: none; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--v-navy-50); border-radius: var(--v-radius-sm); align-self: flex-start; }
  .blog-latest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .blog-latest__link { font-weight: 600; font-size: var(--v-text-sm); line-height: 1.4; color: var(--v-navy-900); text-decoration: none; overflow-wrap: anywhere; }
  .blog-latest__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .blog-latest__link:hover { text-decoration: underline; }
  .blog-latest__link:focus-visible { outline: none; }
  .blog-latest__item:has(.blog-latest__link:focus-visible) { box-shadow: var(--v-focus); }
  .blog-latest__date { font-size: var(--v-text-xs); color: var(--v-ink-500); }

  /* === contact === */
  .contact-head { padding-block: 24px 20px; }
  .contact-head__title { font-size: clamp(2rem, 1.45rem + 1.9vw, 2.75rem); line-height: 1.08; }
  .contact-head__lead { max-width: 52ch; margin-top: 12px; line-height: 1.6; color: var(--v-ink-600); }
  @media (min-width: 900px) { .contact-head { padding-block: 56px 32px; } .contact-head__lead { font-size: 1.0625rem; } }

  .contact-grid { display: grid; gap: 24px; }
  @media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 56px; } }

  .contact-info__list { display: grid; margin: 0; padding: 0; }
  .contact-info__item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--v-ink-200); }
  .contact-info__item:first-child { border-top: 0; padding-top: 0; }
  .contact-info__item > .i { width: 40px; height: 40px; padding: 10px; border-radius: var(--v-radius-md); color: var(--v-gold-800); background: var(--v-gold-100); }
  .contact-info__item h3 { font-size: var(--v-text-sm); font-weight: 600; letter-spacing: 0; color: var(--v-ink-500); }
  .contact-info__item p { margin-top: 2px; line-height: 1.5; color: var(--v-navy-900); }
  .contact-info__item a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; overflow-wrap: anywhere; }
  @media (min-width: 900px) { .contact-info__item { padding: 20px 0; } .contact-info__item:first-child { padding-top: 4px; } }

  .contact-panel { padding: 20px 16px; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-1); }
  @media (min-width: 600px) { .contact-panel { padding: 28px 32px 32px; } }
  .contact-panel__title { font-size: var(--v-text-xl); }
  .contact-form { display: grid; gap: 20px; }
  .contact-form__grid { display: grid; gap: 16px; }
  @media (min-width: 600px) { .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form__wide { grid-column: 1 / -1; } }
  .contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .contact-form__note { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  @media (max-width: 599.98px) { .contact-form__foot .v-btn { width: 100%; } }

  .contact-done { display: grid; justify-items: start; gap: 8px; padding-block: 8px; }
  .contact-done:focus { outline: none; }
  .contact-done p { max-width: 46ch; color: var(--v-ink-600); }
  .contact-done .v-btn { margin-top: 12px; }
  .contact-done__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 12px; color: var(--v-success-700); background: var(--v-success-50); }
  .contact-done__icon .i { width: 24px; height: 24px; }
  .contact { padding-bottom: 8px; }

  /* === account === */
  .account { padding-block: 16px 40px; }
  .account-side { display: none; }
  .account-main { min-width: 0; }
  .account-title { margin-bottom: 16px; font-family: var(--v-font-display); font-weight: 600; font-size: var(--v-text-2xl); letter-spacing: -0.01em; }
  @media (min-width: 900px) {
    .account { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 40px 64px; }
    .account-side { display: block; position: sticky; top: calc(var(--v-header-h) + 24px); }
    .account-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .account-nav { display: grid; gap: 2px; }
  .account-nav__link {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 14px;
    border-radius: var(--v-radius-md); font-weight: 500; color: var(--v-ink-700); text-decoration: none;
    transition: background-color var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease);
  }
  .account-nav__link .i { color: var(--v-ink-500); }
  .account-nav__link:hover { color: var(--v-navy-900); background: var(--v-ink-50); }
  .account-nav__link[aria-current="page"] { color: var(--v-navy-900); font-weight: 600; background: var(--v-navy-50); }
  .account-nav__link[aria-current="page"] .i { color: var(--v-navy-800); }
  .account-nav__link .v-count { margin-left: auto; color: var(--v-ink-700); background: var(--v-ink-100); }
  .account-nav__link--quiet { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v-ink-200); border-radius: 0 0 var(--v-radius-md) var(--v-radius-md); color: var(--v-ink-500); min-height: 56px; }

  /* profile */
  .profile-head { display: flex; align-items: center; gap: 16px; padding: 20px 16px; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-1); }
  @media (min-width: 600px) { .profile-head { gap: 24px; padding: 28px 32px; } }
  .profile-head__avatar-wrap { position: relative; flex: none; }
  .profile-head__avatar { box-shadow: 0 0 0 3px var(--v-surface), 0 0 0 5px var(--v-gold-300); }
  .profile-head__camera {
    position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  }
  .profile-head__camera .i { box-sizing: content-box; width: 16px; height: 16px; padding: 7px; border: 2px solid var(--v-surface); border-radius: 50%; color: #fff; background: var(--v-navy-800); transition: background-color var(--v-dur) var(--v-ease); }
  .profile-head__camera:hover .i { background: var(--v-blue-600); }
  .profile-head__who { min-width: 0; }
  .profile-head__name { font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--v-navy-900); overflow-wrap: anywhere; }
  .profile-head__handle { margin-top: 2px; font-size: var(--v-text-sm); color: var(--v-ink-500); overflow-wrap: anywhere; }
  .profile-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; color: var(--v-ink-700); }
  .profile-head__email { min-width: 0; overflow-wrap: anywhere; }
  .profile-head__since { margin-top: 4px; font-size: var(--v-text-sm); color: var(--v-ink-500); }

  .profile-tabs { margin-top: 24px; }
  .profile-panel { padding-top: 20px; }
  .profile-panel:focus { outline: none; }
  .profile-panel:focus-visible { outline: 2px solid var(--v-blue-600); outline-offset: 4px; border-radius: 4px; }

  .profile-dl { display: grid; margin: 0; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); }
  .profile-dl > div { display: grid; gap: 2px; padding: 14px 16px; border-top: 1px solid var(--v-ink-100); }
  .profile-dl > div:first-child { border-top: 0; }
  .profile-dl dt { font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .profile-dl dd { margin: 0; color: var(--v-navy-900); font-weight: 500; overflow-wrap: anywhere; }
  @media (min-width: 600px) {
    .profile-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-dl > div { padding: 18px 24px; }
    .profile-dl > div:nth-child(2) { border-top: 0; }
    .profile-dl > div:nth-child(even) { border-left: 1px solid var(--v-ink-100); }
  }

  .profile-form { display: grid; gap: 20px; padding: 20px 16px; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); }
  @media (min-width: 600px) { .profile-form { padding: 28px 32px; } }
  .profile-form--narrow { max-width: 560px; }
  .profile-form__grid { display: grid; gap: 16px; }
  @media (min-width: 600px) { .profile-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-form__wide { grid-column: 1 / -1; } }
  .profile-form__foot { display: flex; justify-content: flex-end; padding-top: 4px; }
  @media (max-width: 599.98px) { .profile-form__foot .v-btn { width: 100%; } }
  .profile-photo { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--v-ink-100); }
  .profile-photo__body { display: grid; justify-items: start; gap: 6px; min-width: 0; }
  .profile-photo__btn { cursor: pointer; }
  .profile-photo__body:focus-within .profile-photo__btn { box-shadow: var(--v-focus); }

  .pw-rules { display: grid; gap: 2px; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--v-ink-500); }
  .pw-rules li { display: flex; align-items: center; gap: 6px; }
  .pw-rules .i { width: 14px; height: 14px; color: var(--v-ink-300); transition: color var(--v-dur) var(--v-ease); }
  .pw-rules li.is-ok { color: var(--v-success-700); }
  .pw-rules li.is-ok .i { color: var(--v-success-700); }

  .history-list { display: grid; margin: 0; padding: 0; background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); }
  .history-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--v-ink-100); font-size: var(--v-text-sm); }
  .history-row:first-child { border-top: 0; }
  .history-row[hidden] { display: none; }
  .history-row__when { font-weight: 500; color: var(--v-navy-900); font-variant-numeric: tabular-nums; }
  .history-row__ip { grid-column: 2; color: var(--v-ink-600); font-variant-numeric: tabular-nums; }
  .history-row__device { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v-ink-500); }
  @media (min-width: 900px) {
    .history-row { grid-template-columns: 96px 168px 136px minmax(0, 1fr); padding: 12px 24px; }
    .history-row > .v-badge { justify-self: start; }
    .history-row__ip, .history-row__device { grid-column: auto; }
  }
  .history-more { margin-top: 16px; }

  /* === saved homes / my tours === */
  .empty-wrap { display: flex; flex-direction: column; align-items: center; padding-block: 24px; }
  .empty-wrap[hidden], .tour-list[hidden] { display: none; }
  .empty-wrap > .v-btn { margin-top: -8px; }
  .saved__count { margin-bottom: 12px; font-size: var(--v-text-sm); color: var(--v-ink-600); }
  .saved__count strong { color: var(--v-navy-900); }
  .saved-list, .tour-list { display: grid; gap: 12px; margin: 0; padding: 0; }
  .saved-list[hidden] { display: none; }
  .saved-item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 14px;
    background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg);
    transition: opacity 200ms var(--v-ease), transform 200ms var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
  }
  @media (hover: hover) { .saved-item:hover { box-shadow: var(--v-shadow-2); } }
  .saved-item.is-leaving { opacity: 0; transform: translateX(-12px); }
  .saved-item__thumb { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--v-radius-md); background: linear-gradient(135deg, var(--v-navy-50), var(--v-gold-100)); color: var(--v-navy-800); }
  .saved-item__thumb .i { width: 28px; height: 28px; }
  .saved-item__body { min-width: 0; display: grid; gap: 4px; }
  .saved-item__title { margin: 0; font-size: var(--v-text-md); font-weight: 600; line-height: 1.35; }
  .saved-item__title a { color: var(--v-navy-900); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .saved-item__title a:hover { color: var(--v-blue-600); text-decoration: underline; }
  .saved-item__price { margin: 0; font-weight: 700; color: var(--v-navy-800); font-variant-numeric: tabular-nums; }
  .saved-item__loc, .saved-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: var(--v-text-sm); color: var(--v-ink-600); }
  .saved-item__loc { gap: 6px; flex-wrap: nowrap; }
  .saved-item__loc .i { flex: none; }
  .saved-item__meta > span:not(.v-badge) { display: inline-flex; align-items: center; gap: 4px; }
  .saved-item__remove { color: var(--v-ink-500); margin: -6px -6px 0 0; }
  .saved-item__remove:hover { color: var(--v-danger-700); background: var(--v-danger-50); }
  @media (min-width: 900px) {
    .saved-item { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 16px 20px; gap: 16px; align-items: center; }
    .saved-item__thumb { width: 96px; height: 80px; }
  }

  .tours__seg { display: flex; gap: 8px; margin-bottom: 16px; }
  .tours__seg .v-chip { min-height: 40px; padding-inline: 16px; }
  .tour-card {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px;
    background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-1);
  }
  .tour-card[hidden] { display: none; }
  .tour-card:not(:has(.tour-card__date)) { grid-template-columns: minmax(0, 1fr); }
  .tour-card__date {
    display: grid; justify-items: center; align-content: start; padding: 8px 4px; text-align: center; line-height: 1.15;
    background: var(--v-navy-50); border-radius: var(--v-radius-md); color: var(--v-navy-900); align-self: start;
  }
  .tour-card__day { font-family: var(--v-font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .tour-card__month { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--v-ink-600); }
  .tour-card__dow { font-size: 0.75rem; color: var(--v-ink-500); }
  .tour-card__time { margin-top: 4px; font-size: var(--v-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
  .tour-card__main { min-width: 0; display: grid; gap: 6px; align-content: start; }
  .tour-card__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
  .tour-card__title { flex: 1 1 200px; min-width: 0; margin: 0; font-size: var(--v-text-md); font-weight: 600; line-height: 1.35; }
  .tour-card__title a { color: var(--v-navy-900); text-decoration: none; }
  .tour-card__title a:hover { color: var(--v-blue-600); text-decoration: underline; }
  .tour-card__addr, .tour-card__agent { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin: 0; font-size: var(--v-text-sm); color: var(--v-ink-600); }
  .tour-card__addr { flex-wrap: nowrap; }
  .tour-card__addr .i, .tour-card__agent .i { margin-top: 2px; flex: none; }
  .tour-card__addr span { min-width: 0; }
  .tour-card__agent a { color: var(--v-blue-600); }
  .tour-card__note { margin: 0; font-size: var(--v-text-sm); color: var(--v-ink-700); overflow-wrap: anywhere; }
  .tour-card__note-label { font-weight: 600; color: var(--v-ink-500); }
  .tour-card__reject { margin: 2px 0 0; }
  .tour-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tour-card__actions:empty { display: none; }
  .tour-card__stars { display: inline-flex; gap: 2px; color: var(--v-ink-300); }
  .tour-card__stars .i { width: 18px; height: 18px; }
  .tour-card__stars .i.is-on { color: var(--v-gold-500); fill: currentColor; }
  @media (min-width: 600px) {
    .tour-card { grid-template-columns: 84px minmax(0, 1fr); gap: 20px; padding: 20px; }
    .tour-card__day { font-size: 2rem; }
  }

  .fb { display: grid; gap: 16px; }
  .fb__stars { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb__row { display: flex; gap: 2px; margin-top: 4px; }
  .fb__star { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--v-ink-300); border-radius: var(--v-radius-md); transition: color var(--v-dur) var(--v-ease); }
  .fb__star .i { width: 32px; height: 32px; }
  /* the checked star and every star before it are gold; hovering previews the same */
  .fb__star:has(~ input:checked), input:checked + .fb__star, .fb__star:hover, .fb__star:has(~ .fb__star:hover) { color: var(--v-gold-500); }
  .fb__star:has(~ input:checked) .i, input:checked + .fb__star .i, .fb__star:hover .i, .fb__star:has(~ .fb__star:hover) .i { fill: currentColor; }
  input[name="rating"]:focus-visible + .fb__star { box-shadow: var(--v-focus); }
}
.project-summary { display: grid; gap: 16px; max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.project-summary img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--v-radius-lg); }
.project-summary__facts { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.project-summary__facts div { min-width: 130px; }
.project-summary__facts dt { color: var(--v-ink-500); font-size: var(--v-text-sm); }
.project-summary__facts dd { margin: 0; font-weight: 600; }