/* Realty Quest — desktop web. Tokens are copied verbatim from the app's
   theme so the site and the app read as one product. See WEBSITE-DESIGN.md. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand greens */
  --rq-ink: #032323;
  --rq-forest-900: #04302B;
  --rq-forest-800: #053D37;
  --rq-forest-700: #0A5A4E;
  --rq-forest-600: #0E6B5B;
  --rq-emerald-500: #188D71;
  --rq-emerald-400: #46AA82;
  --rq-emerald-300: #7CC5A6;
  --rq-emerald-200: #B4DECB;
  --rq-emerald-100: #DCEFE5;
  --rq-emerald-50: #F1F9F5;

  /* warm sand — the logo's cast shadow */
  --rq-sand-600: #B6B09B;
  --rq-sand-400: #D6D1C1;
  --rq-sand-200: #E6E3D8;
  --rq-sand-100: #F3F1EA;

  /* neutrals */
  --rq-slate-900: #12201D;
  --rq-slate-700: #33453F;
  --rq-slate-500: #5F736C;
  --rq-slate-400: #869691;
  --rq-slate-300: #C2CDC9;
  --rq-slate-200: #DEE5E2;
  --rq-slate-100: #EFF3F1;
  --rq-slate-50: #F7F9F8;
  --rq-white: #FFFFFF;

  /* status */
  --rq-success: #1B7F4C;  --rq-success-soft: #DCF3E5;  --rq-success-text: #16693F;
  --rq-warning: #B5741A;  --rq-warning-soft: #FBEEDA;  --rq-warning-text: #8F5A12;
  --rq-danger: #B33A32;   --rq-danger-soft: #FBE4E2;   --rq-danger-500: #D24A40;
  --rq-info: #2B6C9E;     --rq-info-soft: #DEEDF8;
  --rq-featured: #A97C22; --rq-featured-soft: #FAF0DA; --rq-featured-text: #8A6316;
  --rq-whatsapp: #25D366; --rq-whatsapp-hover: #128C7E;

  /* gradients */
  /* Ends at forest-600, not emerald-400: white label text over the tail of the
   gradient measured 2.86:1 and failed AA. Forest-600 gives 6.42:1. */
  --rq-grad-brand: linear-gradient(135deg, #053D37 0%, #0E6B5B 100%);
  --rq-grad-brand-deep: linear-gradient(135deg, #032323 0%, #0A5A4E 100%);
  --rq-grad-brand-soft: linear-gradient(135deg, #F1F9F5 0%, #FFFFFF 100%);
  --rq-grad-scrim-up: linear-gradient(to top, rgba(3,35,35,.75), transparent);
  --rq-grad-featured: linear-gradient(135deg, #D2A03C 0%, #A97C22 100%);
  --rq-scrim: rgba(3, 35, 35, 0.55);

  /* type */
  --rq-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --rq-font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* spacing */
  --rq-space-1: 2px;  --rq-space-2: 4px;  --rq-space-3: 8px;  --rq-space-4: 12px;
  --rq-space-5: 16px; --rq-space-6: 20px; --rq-space-7: 24px; --rq-space-8: 32px;
  --rq-space-9: 40px; --rq-space-10: 56px; --rq-space-11: 72px; --rq-space-12: 96px;

  /* radii */
  --rq-radius-sm: 6px; --rq-radius-md: 10px; --rq-radius-lg: 14px;
  --rq-radius-xl: 20px; --rq-radius-xxl: 28px; --rq-radius-pill: 999px;

  /* elevation */
  --rq-shadow-low: 0 1px 2px rgba(3,35,35,.06);
  --rq-shadow-medium: 0 3px 10px rgba(3,35,35,.09);
  --rq-shadow-high: 0 8px 20px rgba(3,35,35,.14);
  --rq-shadow-hover: 0 6px 16px rgba(3,35,35,.10);
  --rq-shadow-popover: 0 12px 32px rgba(3,35,35,.16), 0 0 0 1px rgba(3,35,35,.04);
  --rq-shadow-header: 0 1px 0 rgba(3,35,35,.06);

  /* z */
  --rq-z-sticky: 10; --rq-z-header: 20;
  /* A sticky page control must sit BELOW the overlay, or it keeps taking taps
     through a dialog: the enquiry bar was on 150 against a lightbox on 110 and
     swallowed its Previous/Next buttons, which are the only way to see photos
     2 and 3 on a phone. Popovers (typeahead, menus) still need to beat sticky
     page furniture, so they sit between it and the overlay. */
  --rq-z-stickybar: 30; --rq-z-popover: 60;
  --rq-z-overlay: 100; --rq-z-modal: 110; --rq-z-toast: 200;

  /* motion */
  --rq-dur-instant: 120ms; --rq-dur-fast: 180ms; --rq-dur-normal: 260ms; --rq-dur-slow: 420ms;
  --rq-ease: cubic-bezier(0.2, 0, 0, 1);
  --rq-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --rq-page-max: 1440px;
  --rq-content-max: 1360px;
  --rq-page-margin: 40px;
  --rq-gutter: 24px;
  --rq-header-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* Derived from the header, which is 72px on desktop, 119px stacked on a phone
   and 55px in landscape. A fixed number could only ever suit one of them. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--rq-header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--rq-font-body);
  font-size: 15px; line-height: 24px;
  color: var(--rq-slate-700);
  background: var(--rq-slate-50);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--rq-font-display); color: var(--rq-ink); margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: var(--rq-forest-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* 2px ink = 15.66:1 on the page ground. Emerald is the glow, never the
   indicator — on its own it measures 2.86:1 and fails WCAG 1.4.11. */
/* On a dark ground the ink outline measures 1.1:1 and simply is not there.
   .rq-on-dark flips it to white, and the ring is painted with outline rather
   than box-shadow so a component's own shadow cannot swallow it. */
.rq-on-dark :focus-visible,
.rq-on-dark:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(3, 35, 35, .55);
}
:focus-visible {
  outline: 2px solid var(--rq-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(70, 170, 130, .35);
  border-radius: var(--rq-radius-sm);
}

.rq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rq-white); padding: 12px 20px; border-radius: 0 0 var(--rq-radius-md) 0;
  box-shadow: var(--rq-shadow-high); font-weight: 600;
}
.rq-skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ type kit */
.t-display-xl { font-family: var(--rq-font-display); font-weight: 700; font-size: 44px; line-height: 52px; letter-spacing: -.8px; color: var(--rq-ink); }
.t-display-l  { font-family: var(--rq-font-display); font-weight: 700; font-size: 34px; line-height: 42px; letter-spacing: -.6px; color: var(--rq-ink); }
.t-display-m  { font-family: var(--rq-font-display); font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -.4px; color: var(--rq-ink); }
.t-heading-l  { font-family: var(--rq-font-display); font-weight: 600; font-size: 22px; line-height: 30px; letter-spacing: -.2px; color: var(--rq-ink); }
.t-heading-m  { font-family: var(--rq-font-display); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: -.1px; color: var(--rq-ink); }
.t-heading-s  { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--rq-ink); }
.t-body-l     { font-size: 17px; line-height: 28px; }
.t-body       { font-size: 15px; line-height: 24px; }
.t-body-s     { font-size: 13.5px; line-height: 20px; }
.t-label      { font-weight: 600; font-size: 14px; line-height: 20px; }
.t-label-s    { font-weight: 500; font-size: 12.5px; line-height: 16px; }
.t-overline   { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.t-price-xl   { font-family: var(--rq-font-display); font-weight: 700; font-size: 40px; line-height: 46px; letter-spacing: -1px; color: var(--rq-ink); font-variant-numeric: tabular-nums; }
.t-price-l    { font-family: var(--rq-font-display); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.5px; color: var(--rq-ink); font-variant-numeric: tabular-nums; }
.t-price-m    { font-family: var(--rq-font-display); font-weight: 700; font-size: 20px; line-height: 26px; letter-spacing: -.3px; color: var(--rq-ink); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--rq-slate-500); }
.t-prose { max-width: 68ch; }
.tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- layout */
.rq-page { max-width: var(--rq-page-max); margin: 0 auto; padding: 0 var(--rq-page-margin); }
.rq-shell { min-height: 100vh; display: flex; flex-direction: column; }
.rq-main { flex: 1; padding-block: var(--rq-space-8) var(--rq-space-11); }
.rq-section + .rq-section { margin-top: var(--rq-space-10); }
.rq-stack > * + * { margin-top: var(--rq-space-5); }
.rq-row { display: flex; align-items: center; gap: var(--rq-space-4); }
.rq-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-space-5); flex-wrap: wrap; }
.rq-spacer { flex: 0 1 auto; }

/* --------------------------------------------------------------- header */
.rq-header {
  position: sticky; top: 0; z-index: var(--rq-z-header);
  background: var(--rq-white); border-bottom: 1px solid var(--rq-slate-200);
}
.rq-header.is-scrolled { box-shadow: var(--rq-shadow-header); }
.rq-header-inner { display: flex; align-items: center; gap: var(--rq-space-7); height: var(--rq-header-h); }
.rq-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.rq-brand:hover { text-decoration: none; }
/* The brand mark is a transparent PNG served at 2x. object-fit keeps it square
   whatever box it lands in. */
.rq-mark { display: block; flex: none; object-fit: contain; }
.rq-logo-full { max-width: 62%; height: auto; }

.rq-wordmark { line-height: 1; }
.rq-wordmark .r1 { font-family: var(--rq-font-display); font-weight: 700; font-size: 17px; letter-spacing: .4px; color: var(--rq-ink); display: block; }
.rq-wordmark .r2 { font-weight: 600; font-size: 9.5px; letter-spacing: 4px; color: var(--rq-forest-700); text-transform: uppercase; display: block; margin-top: 1px; }

.rq-seg { display: inline-flex; background: var(--rq-slate-100); border-radius: var(--rq-radius-pill); padding: 3px; flex: none; }
.rq-seg button {
  border: 0; background: transparent; padding: 7px 18px; border-radius: var(--rq-radius-pill);
  font-weight: 600; font-size: 14px; color: var(--rq-slate-700); cursor: pointer;
  transition: background var(--rq-dur-fast) var(--rq-ease), color var(--rq-dur-fast) var(--rq-ease);
}
.rq-seg button[aria-pressed="true"] { background: var(--rq-white); color: var(--rq-forest-700); box-shadow: var(--rq-shadow-low); }

.rq-searchwrap { position: relative; flex: 1 1 420px; max-width: 520px; min-width: 240px; }
.rq-typeahead {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--rq-z-popover);
  background: var(--rq-white); border-radius: var(--rq-radius-md); box-shadow: var(--rq-shadow-popover);
  overflow: hidden; max-height: 320px; overflow-y: auto;
}
.rq-typeahead button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 10px 14px; cursor: pointer; font-size: 14px;
}
.rq-typeahead button:hover, .rq-typeahead button.is-active { background: var(--rq-emerald-50); }
.rq-typeahead .sub { color: var(--rq-slate-500); font-size: 12.5px; }
.ta-empty { padding: 14px 16px; font-size: 13.5px; color: var(--rq-slate-700); margin: 0; }
.ta-empty kbd {
  font: inherit; font-weight: 600; background: var(--rq-slate-100);
  border: 1px solid var(--rq-slate-200); border-radius: 4px; padding: 1px 6px;
}

.rq-navlink {
  position: relative; padding: 8px 4px; font-weight: 600; font-size: 14px; color: var(--rq-slate-700);
  display: inline-flex; align-items: center; gap: 7px;
}
.rq-navlink:hover { color: var(--rq-forest-700); text-decoration: none; }
.rq-navlink[aria-current="page"] { color: var(--rq-forest-700); }
.rq-navlink[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px;
  background: var(--rq-forest-700); border-radius: 2px;
}

/* --------------------------------------------------------------- footer */
.rq-footer { background: var(--rq-forest-800); color: #CBDBD5; margin-top: var(--rq-space-11); }
.rq-footer a { color: #CBDBD5; }
.rq-footer a:hover { color: var(--rq-white); }
.rq-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--rq-space-8); padding: var(--rq-space-10) 0 var(--rq-space-8); }
.rq-footer h4 { color: var(--rq-white); font-size: 14px; margin-bottom: var(--rq-space-4); font-family: var(--rq-font-body); font-weight: 600; }
.rq-footer li + li { margin-top: 10px; }
.rq-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: var(--rq-space-5) 0; display: flex; justify-content: space-between; font-size: 13px; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--rq-radius-pill);
  font-family: var(--rq-font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  padding: 11px 22px; cursor: pointer; white-space: nowrap;
  transition: background var(--rq-dur-instant) var(--rq-ease), border-color var(--rq-dur-instant) var(--rq-ease),
              color var(--rq-dur-instant) var(--rq-ease), box-shadow var(--rq-dur-instant) var(--rq-ease),
              transform var(--rq-dur-instant) var(--rq-ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--rq-grad-brand); color: var(--rq-white); box-shadow: var(--rq-shadow-medium); }
.btn-primary:hover:not([disabled]) { background: var(--rq-forest-600); }
.btn-secondary { background: var(--rq-white); color: var(--rq-forest-700); border-color: var(--rq-slate-300); }
.btn-secondary:hover:not([disabled]) { border-color: var(--rq-forest-700); background: var(--rq-emerald-50); }
.btn-tertiary { background: transparent; color: var(--rq-forest-700); padding-inline: 12px; }
.btn-tertiary:hover:not([disabled]) { background: var(--rq-emerald-50); }
.btn-danger { background: var(--rq-danger); color: var(--rq-white); }
.btn-danger:hover:not([disabled]) { background: var(--rq-danger-500); }
.btn-whatsapp { background: var(--rq-whatsapp); color: #06331B; }
.btn-whatsapp:hover:not([disabled]) { background: var(--rq-whatsapp-hover); color: var(--rq-white); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-icon {
  padding: 0; width: 40px; height: 40px; border-radius: var(--rq-radius-pill);
  background: var(--rq-white); border-color: var(--rq-slate-200); color: var(--rq-slate-700);
}
.btn-icon:hover { border-color: var(--rq-slate-300); background: var(--rq-slate-50); }

.btn .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rq-spin .7s linear infinite; }
@keyframes rq-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--rq-white); border: 1px solid var(--rq-slate-200);
  border-radius: var(--rq-radius-lg); box-shadow: var(--rq-shadow-low);
}
.card-pad { padding: var(--rq-space-7); }
.card-pad-lg { padding: var(--rq-space-8); }
.card-brand { background: var(--rq-emerald-50); border-color: var(--rq-emerald-200); }
.card-sand { background: var(--rq-sand-200); border-color: var(--rq-sand-400); }

/* --------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rq-slate-200); background: var(--rq-white);
  border-radius: var(--rq-radius-pill); padding: 7px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--rq-slate-700); cursor: pointer;
  transition: all var(--rq-dur-fast) var(--rq-ease);
}
.chip:hover { border-color: var(--rq-slate-300); background: var(--rq-slate-50); }
.chip[aria-pressed="true"] { background: var(--rq-emerald-50); border-color: var(--rq-forest-700); color: var(--rq-forest-700); font-weight: 600; }
.chip-static { cursor: default; }
.chip-static:hover { border-color: var(--rq-slate-200); background: var(--rq-white); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--rq-radius-pill); padding: 4px 11px;
  font-weight: 600; font-size: 12px; line-height: 16px;
}
.badge-live { background: var(--rq-success-soft); color: var(--rq-success-text); }
.badge-pending { background: var(--rq-warning-soft); color: var(--rq-warning-text); }
.badge-rejected { background: var(--rq-danger-soft); color: var(--rq-danger); }
.badge-draft { background: var(--rq-slate-100); color: var(--rq-slate-700); }
.badge-archived { background: var(--rq-slate-100); color: var(--rq-slate-500); }
.badge-sold, .badge-rented { background: var(--rq-info-soft); color: var(--rq-info); }
.badge-featured { background: var(--rq-featured-soft); color: var(--rq-featured-text); }
.badge-owner { background: var(--rq-emerald-100); color: var(--rq-forest-700); }
.badge-count { background: var(--rq-danger); color: var(--rq-white); min-width: 20px; height: 20px; justify-content: center; padding: 0 6px; font-size: 11px; }

/* --------------------------------------------------------------- inputs */
.field { display: block; }
.field + .field { margin-top: var(--rq-space-6); }
.field-label { display: block; font-weight: 600; font-size: 14px; color: var(--rq-ink); margin-bottom: var(--rq-space-3); }
.field-label .req { color: var(--rq-danger); }
.field-hint { margin-top: 6px; font-size: 13.5px; color: var(--rq-slate-500); }
.field-error { margin-top: 6px; font-size: 13.5px; color: var(--rq-danger); display: flex; align-items: center; gap: 6px; }

.input, .select, .textarea {
  width: 100%; background: var(--rq-white);
  border: 1.5px solid var(--rq-slate-200); border-radius: var(--rq-radius-md);
  padding: 11px 14px; font-size: 15px; color: var(--rq-ink);
  transition: border-color var(--rq-dur-instant) var(--rq-ease);
}
.input::placeholder, .textarea::placeholder { color: var(--rq-slate-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--rq-slate-300); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--rq-forest-700); outline: 3px solid var(--rq-emerald-400); outline-offset: 1px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--rq-danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--rq-slate-100); color: var(--rq-slate-500); cursor: not-allowed; }
.textarea { min-height: 132px; resize: vertical; line-height: 24px; }
.select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F736C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
.input-affix { position: relative; }
.input-affix .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--rq-slate-500); pointer-events: none; }
.input-affix .prefix + .input { padding-left: 30px; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 44px; height: 26px; border-radius: 999px; background: var(--rq-slate-300); position: relative; transition: background var(--rq-dur-fast) var(--rq-ease); flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--rq-white); box-shadow: var(--rq-shadow-low); transition: transform var(--rq-dur-fast) var(--rq-ease); }
.switch input:checked + .track { background: var(--rq-forest-700); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--rq-emerald-400); outline-offset: 2px; }

.counter { display: inline-flex; align-items: center; border: 1.5px solid var(--rq-slate-200); border-radius: var(--rq-radius-md); overflow: hidden; background: var(--rq-white); }
.counter button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--rq-forest-700); font-size: 20px; }
.counter button:hover:not(:disabled) { background: var(--rq-emerald-50); }
.counter button:disabled { color: var(--rq-slate-400); cursor: not-allowed; }
.counter .val { min-width: 56px; text-align: center; font-weight: 700; font-family: var(--rq-font-display); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- banners */
.banner { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--rq-radius-md); border: 1px solid; font-size: 14px; line-height: 22px; }
.banner-info { background: var(--rq-info-soft); border-color: #BBD8EE; color: #1E4E74; }
.banner-success { background: var(--rq-success-soft); border-color: #B6E3C9; color: var(--rq-success-text); }
.banner-warning { background: var(--rq-warning-soft); border-color: #EFD6A8; color: var(--rq-warning-text); }
.banner-danger { background: var(--rq-danger-soft); border-color: #F2C4C0; color: var(--rq-danger); }
.banner strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------- illustrations */
.scene { position: relative; overflow: hidden; background: var(--rq-sand-100); border-radius: inherit; }
.scene::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(3,35,35,.08); border-radius: inherit; pointer-events: none; }
.scene svg { width: 100%; height: 100%; display: block; object-fit: cover; }
/* The caption sits on hand-drawn artwork whose ground is often near-white,
   where white-on-shadow measured 1.2:1. A text-shadow is not contrast, so the
   caption gets its own solid pill — the same treatment the "+N more" badge
   already uses and passes with. 15.1:1 on the ink ground. */
.scene-cap {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: #FFFFFF; background: rgba(3, 35, 35, .84);
  padding: 4px 10px; border-radius: 999px; backdrop-filter: saturate(140%) blur(2px);
}
.scene-scrim { position: absolute; inset: 0; background: var(--rq-grad-scrim-up); z-index: 1; pointer-events: none; }

/* -------------------------------------------------------- listing card */
.lcard { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--rq-dur-fast) var(--rq-ease), transform var(--rq-dur-fast) var(--rq-ease); }
.lcard:hover { box-shadow: var(--rq-shadow-hover); transform: translateY(-2px); }
.lcard .media { position: relative; aspect-ratio: 4/3; background: var(--rq-sand-100); }
.lcard .media .scene { position: absolute; inset: 0; border-radius: 0; }
.lcard .body { padding: var(--rq-space-5) var(--rq-space-6) var(--rq-space-6); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lcard .title { font-family: var(--rq-font-display); font-weight: 600; font-size: 16px; line-height: 23px; color: var(--rq-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard .specs { display: flex; gap: 14px; color: var(--rq-slate-500); font-size: 13.5px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rq-slate-100); }
.lcard .specs span { display: inline-flex; align-items: center; gap: 5px; }
.lcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lcard .fav { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); }
.lcard .flags { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.lcard-row { flex-direction: row; }
.lcard-row .media { width: 300px; aspect-ratio: 4/3; flex: none; }
.lcard-row .body { padding: var(--rq-space-6) var(--rq-space-7); }

.lgrid { display: grid; gap: var(--rq-gutter); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.llist { display: flex; flex-direction: column; gap: var(--rq-space-5); }

/* ------------------------------------------------------- browse layout */
.browse { display: grid; grid-template-columns: 320px 1fr; gap: var(--rq-space-8); align-items: start; }
.filters { position: sticky; top: calc(var(--rq-header-h) + 24px); max-height: calc(100vh - var(--rq-header-h) - 48px); overflow-y: auto; }
.filters-group + .filters-group { margin-top: var(--rq-space-7); padding-top: var(--rq-space-7); border-top: 1px solid var(--rq-slate-200); }
.filters-group h3 { font-size: 14px; font-family: var(--rq-font-body); font-weight: 600; margin-bottom: var(--rq-space-4); }
.chipwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tworow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.viewtabs { display: inline-flex; border: 1px solid var(--rq-slate-200); border-radius: var(--rq-radius-pill); overflow: hidden; background: var(--rq-white); }
.viewtabs button { border: 0; background: transparent; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--rq-slate-700); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.viewtabs button[aria-pressed="true"] { background: var(--rq-forest-700); color: var(--rq-white); }

/* ------------------------------------------------------- detail layout */
.detail { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--rq-space-8); align-items: start; }
.detail-aside { position: sticky; top: calc(var(--rq-header-h) + 24px); }
/* Three cells: .g0 spans both rows, two stack beside it. Rendering more than
   three tiles puts them in an implicit row outside the clipped box. */
/* 16/9, not 16/10: the extra 58px of artwork pushed the price and the title
   below a 900px fold on a 1440 laptop. */
.gallery { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 10px; border-radius: var(--rq-radius-lg); overflow: hidden; aspect-ratio: 16/9; max-height: 540px; margin-bottom: var(--rq-space-6); }
.gallery:empty { display: none; }
/* Three cells in the desktop grid, so anything past the third would land in an
   implicit row outside the clipped box. On a phone the gallery is a swipeable
   strip and shows them all — see the phone block. */
.gallery .gitem:nth-child(n+4) { display: none; }
.gallery-wrap { position: relative; }
.gcount { display: none; }          /* phones only — see the mobile block */
/* An owner preview carries a status banner the public page does not, so the
   gallery gives that height back rather than pushing the title to the fold. */
.gallery-compact { max-height: 420px; }
.gallery .g0 { grid-row: span 2; }
.gallery .gitem { position: relative; background: var(--rq-sand-100); cursor: pointer; border: 0; padding: 0; overflow: hidden; }
.gallery .gitem .scene { position: absolute; inset: 0; border-radius: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: var(--rq-space-5); }
.fact { text-align: center; padding: var(--rq-space-5) var(--rq-space-3); }
.fact .v { font-family: var(--rq-font-display); font-weight: 700; font-size: 22px; color: var(--rq-ink); }
.fact .k { font-size: 12.5px; color: var(--rq-slate-500); margin-top: 2px; }
.amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px 20px; }
.amen li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.amen .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--rq-emerald-100); display: grid; place-items: center; flex: none; }
.costs { display: flex; flex-direction: column; gap: 10px; }
.costs .line { display: flex; justify-content: space-between; font-size: 14.5px; }
.costs .total { border-top: 1px solid var(--rq-sand-600); padding-top: 10px; font-weight: 700; }

/* ------------------------------------------------------------- tables */
/* A data table is the one thing allowed to be wider than its column. It
   scrolls inside its own box — without this the row actions sat 43px past a
   1024 viewport and could only be reached by scrolling the whole document. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap:focus-visible { outline: 2px solid var(--rq-ink); outline-offset: 2px; }
.tablewrap > .tbl { min-width: 720px; }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--rq-white); border: 1px solid var(--rq-slate-200); border-radius: var(--rq-radius-lg); overflow: hidden; }
.tbl th { background: var(--rq-slate-100); text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: var(--rq-slate-700); padding: 12px 16px; white-space: nowrap; }
.tbl td { padding: 16px; border-top: 1px solid var(--rq-slate-200); vertical-align: middle; font-size: 14px; }
.tbl tbody tr:hover { background: var(--rq-slate-50); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }

/* ------------------------------------------------------ workspace rail */
.ws { display: grid; grid-template-columns: 240px 1fr; gap: var(--rq-space-8); align-items: start; }
.wsrail { position: sticky; top: calc(var(--rq-header-h) + 24px); }
.wsrail a { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: var(--rq-radius-md); color: var(--rq-slate-700); font-weight: 500; font-size: 14.5px; }
.wsrail a:hover { background: var(--rq-slate-100); text-decoration: none; }
.wsrail a[aria-current="page"] { background: var(--rq-emerald-50); color: var(--rq-forest-700); font-weight: 600; }
.wsrail .sec { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rq-slate-500); padding: 0 14px; margin: var(--rq-space-6) 0 var(--rq-space-3); }

/* --------------------------------------------------------- lead inbox */
.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 0; border: 1px solid var(--rq-slate-200); border-radius: var(--rq-radius-lg); overflow: hidden; background: var(--rq-white); min-height: 560px; }
.inbox-list { border-right: 1px solid var(--rq-slate-200); overflow-y: auto; max-height: 72vh; }
.inbox-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rq-slate-100); background: transparent; padding: 16px 18px; cursor: pointer; }
.inbox-item:hover { background: var(--rq-slate-50); }
.inbox-item[aria-current="true"] { background: var(--rq-emerald-50); box-shadow: inset 3px 0 0 var(--rq-forest-700); }
.inbox-detail { padding: var(--rq-space-8); }

/* ------------------------------------------------------------ wizard */
.wiz { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: var(--rq-space-9); align-items: start; }
.wizsteps { position: sticky; top: calc(var(--rq-header-h) + 24px); }
.wizstep { display: flex; gap: 12px; padding: 11px 12px; border-radius: var(--rq-radius-md); border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.wizstep:hover { background: var(--rq-slate-100); }
.wizstep[aria-current="step"] { background: var(--rq-emerald-50); }
.wizstep .n { width: 26px; height: 26px; border-radius: 50%; background: var(--rq-slate-200); color: var(--rq-slate-700); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; }
.wizstep[aria-current="step"] .n { background: var(--rq-forest-700); color: #fff; }
.wizstep.done .n { background: var(--rq-emerald-100); color: var(--rq-forest-700); }
.wizstep .lbl { font-size: 14px; font-weight: 600; color: var(--rq-ink); }
.wizstep .sub { font-size: 12.5px; color: var(--rq-slate-500); }

/* ------------------------------------------------------------- states */
.skel { background: linear-gradient(90deg, var(--rq-slate-100) 25%, #E7EDEA 50%, var(--rq-slate-100) 75%); background-size: 200% 100%; animation: rq-shim 1.4s ease-in-out infinite; border-radius: var(--rq-radius-md); }
@keyframes rq-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-card { height: 320px; border-radius: var(--rq-radius-lg); }
.skel-line { height: 14px; margin-bottom: 9px; }

.state { text-align: center; padding: var(--rq-space-11) var(--rq-space-7); max-width: 520px; margin: 0 auto; }
/* Direct child only. icon() stamps class="ico" on every SVG it renders, so a
   descendant selector here also caught the icon inside the state's own action
   button and blew it up to 76px with a circle behind it. */
.state > .ico { width: 76px; height: 76px; border-radius: 50%; background: var(--rq-emerald-50); display: grid; place-items: center; margin: 0 auto var(--rq-space-6); }
.state h3 { margin-bottom: var(--rq-space-3); }
.state p { color: var(--rq-slate-500); margin-bottom: var(--rq-space-6); }

.locked { position: relative; }
.locked .veil { position: absolute; inset: 0; background: rgba(247,249,248,.86); backdrop-filter: blur(3px); display: grid; place-items: center; border-radius: inherit; z-index: 4; }
.locked .veil .inner { text-align: center; max-width: 340px; padding: var(--rq-space-7); }

/* -------------------------------------------------------------- modal */
.modal-back { position: fixed; inset: 0; background: var(--rq-scrim); z-index: var(--rq-z-overlay); display: grid; place-items: center; padding: var(--rq-space-8); animation: rq-fade var(--rq-dur-normal) var(--rq-ease-out); }
.modal { background: var(--rq-white); border-radius: var(--rq-radius-xl); box-shadow: var(--rq-shadow-high); width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; z-index: var(--rq-z-modal); animation: rq-pop var(--rq-dur-normal) var(--rq-ease-out); }
.modal-wide { max-width: 1040px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--rq-space-7) var(--rq-space-8); border-bottom: 1px solid var(--rq-slate-200); position: sticky; top: 0; background: var(--rq-white); border-radius: var(--rq-radius-xl) var(--rq-radius-xl) 0 0; }
.modal-body { padding: var(--rq-space-8); }
.modal-foot { padding: var(--rq-space-6) var(--rq-space-8); border-top: 1px solid var(--rq-slate-200); display: flex; justify-content: flex-end; gap: 12px; }
@keyframes rq-fade { from { opacity: 0; } }
@keyframes rq-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* -------------------------------------------------------------- toast */
.toasts { position: fixed; right: var(--rq-space-8); bottom: var(--rq-space-8); z-index: var(--rq-z-toast); display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 11px; background: var(--rq-ink); color: #fff; padding: 13px 20px; border-radius: var(--rq-radius-md); box-shadow: var(--rq-shadow-high); font-size: 14px; animation: rq-slide var(--rq-dur-normal) var(--rq-ease-out); max-width: 420px; }
.toast-success { background: var(--rq-success); }
.toast-error { background: var(--rq-danger); }
@keyframes rq-slide { from { opacity: 0; transform: translateX(16px); } }

/* --------------------------------------------------------------- misc */
.divider { height: 1px; background: var(--rq-slate-200); border: 0; margin: var(--rq-space-7) 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rq-emerald-100); color: var(--rq-forest-700); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.bar { height: 8px; border-radius: 999px; background: var(--rq-slate-200); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--rq-emerald-400); border-radius: 999px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14.5px; }
.kv dt { color: var(--rq-slate-500); }
.kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--rq-ink); }

/* ------------------------------------------------------------ photos */
/* Uploaded photographs share the frame the illustrated scenes use, so a
   listing that mixes the two does not look like two different products. */
.photo { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--rq-slate-100); }
/* Photographs sit in the same absolutely-positioned frame the scenes use, so
   a gallery or card that mixes the two keeps one set of dimensions. */
.gallery .gitem .photo, .lcard .media .photo { position: absolute; inset: 0; }

.gallery .gitem { position: relative; }
.gallery .more {
  position: absolute; inset: auto 10px 10px auto; z-index: 3;
  background: rgba(8, 28, 24, .82); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
}

/* --------------------------------------------------------- upload UI */
.dropzone {
  border: 2px dashed var(--rq-slate-200); border-radius: var(--rq-radius-lg);
  background: var(--rq-slate-50, #F7F9F8); padding: 34px 20px; text-align: center;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.over { border-color: var(--rq-forest-700); background: var(--rq-emerald-50); }
.dropzone[data-full="1"] { cursor: not-allowed; opacity: .6; }
.dropzone[data-full="1"]:hover { border-color: var(--rq-slate-200); background: var(--rq-slate-50, #F7F9F8); }
.dz-ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rq-emerald-50); color: var(--rq-forest-700);
}

.uplist { list-style: none; margin: 16px 0 0; padding: 0; }
.uprow {
  display: flex; align-items: center; gap: var(--rq-space-4);
  padding: 10px 14px; border: 1px solid var(--rq-slate-200);
  border-radius: var(--rq-radius-md); margin-bottom: 8px; background: var(--rq-white);
}
.uprow .upname {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uprow .upbar {
  flex: 0 0 160px; height: 6px; border-radius: 3px;
  background: var(--rq-slate-200); overflow: hidden;
}
.uprow .upbar i { display: block; height: 100%; background: var(--rq-emerald-500); transition: width .3s ease; }
.uprow .upstate { flex: 0 0 132px; text-align: right; font-size: 12.5px; color: var(--rq-slate-500); }
.uprow.failed { border-color: var(--rq-danger); background: var(--rq-danger-soft); }
.uprow.failed .upstate { color: var(--rq-danger); flex: 1 1 auto; text-align: left; }
.uprow.failed .upbar { display: none; }

/* --------------------------------------------------------- photo grid */
.phgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--rq-space-4);
}
.phtile {
  position: relative; border: 2px solid var(--rq-slate-200); border-radius: var(--rq-radius-md);
  overflow: hidden; background: var(--rq-white);
}
.phtile.is-cover { border-color: var(--rq-forest-700); }
.phtile.dragging { opacity: .45; }
.phtile.dropinto { border-color: var(--rq-emerald-500); box-shadow: 0 0 0 3px rgba(70, 170, 130, .3); }
.phtile .phimg { aspect-ratio: 4/3; overflow: hidden; cursor: grab; }
.phcover {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: var(--rq-forest-700); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.phcap {
  width: 100%; border: 0; border-top: 1px solid var(--rq-slate-200);
  padding: 7px 10px; font-size: 12.5px; font-family: inherit; color: var(--rq-ink);
  background: var(--rq-white);
}
.phcap::placeholder { color: var(--rq-slate-400); }
.phcap:focus { outline-offset: -2px; background: var(--rq-emerald-50); }

.phbar {
  display: flex; align-items: center; gap: 2px; padding: 5px 6px;
  border-top: 1px solid var(--rq-slate-200); background: var(--rq-white);
}
.phbtn {
  border: 0; background: transparent; color: var(--rq-slate-700); cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--rq-radius-sm);
  display: inline-grid; place-items: center;
}
.phbtn:hover:not(:disabled) { background: var(--rq-emerald-50); color: var(--rq-forest-700); }
.phbtn.danger:hover { background: var(--rq-danger-soft); color: var(--rq-danger); }
.phbtn:disabled { opacity: .3; cursor: default; }

.scenepick > summary {
  cursor: pointer; padding: 12px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.scenepick > summary::-webkit-details-marker { display: none; }
.scenepick > summary::before { content: "\25B8"; color: var(--rq-slate-500); transition: transform .12s; }
.scenepick[open] > summary::before { transform: rotate(90deg); }
.scenechip {
  border: 2px solid var(--rq-slate-200); border-radius: 12px; overflow: hidden;
  background: none; padding: 0; cursor: pointer; aspect-ratio: 4/3; position: relative; display: block;
}
.scenechip.on { border-color: var(--rq-forest-700); }
.scenechip .tick {
  position: absolute; top: 8px; right: 8px; z-index: 3; background: var(--rq-forest-700);
  color: #fff; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
}

/* ------------------------------------------------------- row actions */
.rowactions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.menuwrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--rq-z-popover);
  min-width: 232px; background: var(--rq-white); border-radius: var(--rq-radius-md);
  box-shadow: var(--rq-shadow-popover); overflow: hidden; padding: 4px 0; text-align: left;
}
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--rq-ink);
}
.menu button:hover { background: var(--rq-emerald-50); color: var(--rq-forest-700); }
.menu button.danger { color: var(--rq-danger); }
.menu button.danger:hover { background: var(--rq-danger-soft); }
.menu-sep { border: 0; border-top: 1px solid var(--rq-slate-200); margin: 4px 0; }

/* --------------------------------------------------------- publish gate */
.gatecard {
  border-left: 4px solid var(--rq-warning); background: var(--rq-warning-soft);
  margin-bottom: var(--rq-space-6);
}
.gate-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(181, 116, 26, .16); color: var(--rq-warning-text);
}
.gatecard .t-muted { color: var(--rq-warning-text); }

.banner-muted { background: var(--rq-slate-100, #EEF2F0); color: var(--rq-slate-700); }

/* -------------------------------------------------------------- map */
.mappin { position: absolute; transform: translate(-50%, -100%); z-index: 2; }
.mappin:hover, .mappin:focus-visible { z-index: 5; }
.mappin-price {
  display: inline-block; background: var(--rq-forest-700); color: #fff;
  padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  box-shadow: var(--rq-shadow-medium); white-space: nowrap;
}
.mappin:hover .mappin-price { background: var(--rq-ink); }

/* The filter drawer's toggle only exists below the lg breakpoint. */
.filterbtn { display: none; }
.stickycta { display: none; }


/* The wizard's save indicator has to be honest about three states, because
   a live listing is no longer autosaved. */
.savechip { color: var(--rq-slate-500); }
.savechip[data-state="dirty"] { color: var(--rq-warning-text); font-weight: 600; }
.savechip[data-state="saved"] { color: var(--rq-success-text); }
.savechip[data-state="error"] { color: var(--rq-danger); font-weight: 600; }

.bandhint {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  background: rgba(255,255,255,.1); border-radius: var(--rq-radius-md);
  padding: 10px 13px; color: #EAF3EF; font-size: 12.5px; line-height: 1.5;
}
.bandhint strong { color: #fff; }


/* ------------------------------------------------------- phone chrome */
/* Hidden on desktop; the breakpoints below switch them on. */
.rq-burger { display: none; }
.rq-mobilenav { display: none; }
.rq-searchrow { display: none; }

/* -------------------------------------------------------- breakpoints
   Strictly descending, one block per stop, every property declared once.
   Two rounds of review defects came from a later block silently re-setting a
   grid an earlier one had just changed, so the order here is load-bearing. */

@media (max-width: 1439px) {
  :root { --rq-page-margin: 32px; }
  .browse { grid-template-columns: 288px 1fr; gap: var(--rq-space-7); }
  .detail { grid-template-columns: minmax(0,1fr) 340px; }
}

/* lg -> md. The 288px filter rail costs more width than it earns, so it
   becomes a drawer and the results grid takes the whole column. The header
   sheds its labels: it used to run 82px past a 1024 viewport. */
/* The desktop header needs about 810px. Between 768 and 900 it overflowed by
   up to 42px, because the mobile layer stopped at 767 and left a dead zone.
   The phone header takes over from 900 down. */
@media (max-width: 900px) {
  /* Anything that shows a hamburger is being touched, so the 44px floor and the
     16px input floor apply from here down, not only below 768. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .btn-icon { min-width: 44px; width: 44px; height: 44px; }
  .chip { min-height: 44px; }
  .input, .select, .textarea { font-size: 16px; min-height: 44px; }
  .rq-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 11px 0; }
  .rq-brand { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  nav[aria-label="Breadcrumb"] a { display: inline-block; padding: 12px 4px; min-height: 44px; }
  .modal-foot .btn, .modal .btn { min-height: 44px; }
  .viewtabs button { min-height: 44px; }
  .rq-seg button { min-height: 44px; }

  .rq-burger { display: inline-grid !important; place-items: center; order: -1;
    width: 44px; height: 44px; margin-left: -8px; border: 0; background: transparent;
    color: var(--rq-ink); border-radius: var(--rq-radius-sm); cursor: pointer; }
  .rq-burger:hover { background: var(--rq-slate-100); }
  .rq-seg, .rq-navlink, .rq-headcta, .rq-spacer { display: none !important; }
  .rq-mobilenav { display: block; }
  .rq-mobilenav[hidden] { display: none; }
  .wsrail { display: none; }
}

@media (max-width: 1279px) {
  :root { --rq-page-margin: 24px; }

  .browse { grid-template-columns: minmax(0, 1fr); }
  /* Presence, not a transform transition. An interrupted slide left the panel
     parked off-screen with a running animation that even an inline style
     could not override — a drawer that fails open is worse than one that
     does not slide. */
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 88vw);
    z-index: var(--rq-z-modal); overflow-y: auto; border-radius: 0;
    max-height: none; box-shadow: var(--rq-shadow-popover); visibility: hidden;
  }
  .filters[data-open="1"] { visibility: visible; }
  .filters-scrim { position: fixed; inset: 0; background: rgba(3,35,35,.45); z-index: calc(var(--rq-z-modal) - 1); }
  .filterbtn { display: inline-flex !important; }

  .detail { grid-template-columns: minmax(0,1fr) 320px; }
  .ws { grid-template-columns: 200px 1fr; }
  .rq-footer-inner { grid-template-columns: 1fr 1fr; }

  .rq-header-inner { gap: var(--rq-space-4); }
  .rq-navlink span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rq-navlink { padding: 8px; }
  .rq-cta-label { display: none; }
  .rq-searchwrap { flex: 1 1 200px; min-width: 160px; }
  .rq-seg button { padding: 7px 12px; }
}

/* Below 1080 the 320px contact rail squeezes the description too hard, so it
   drops under the main column and the enquiry CTA becomes a sticky bar. The
   gallery is capped: full-bleed it pushed the price and title past the fold. */
@media (max-width: 1079px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; max-height: none; }
  .gallery { aspect-ratio: auto; height: 38vh; min-height: 260px; max-height: 380px; }
  .stickycta {
    position: sticky; bottom: 0; z-index: var(--rq-z-popover);
    display: flex !important; gap: 10px; align-items: center;
    background: var(--rq-white); border-top: 1px solid var(--rq-slate-200);
    padding: 12px var(--rq-page-margin); margin: 24px calc(var(--rq-page-margin) * -1) 0;
    box-shadow: 0 -6px 20px rgba(3,35,35,.08);
    max-width: 100vw; box-sizing: border-box;
  }
  .stickycta .btn { flex: 1; }
}

@media (max-width: 1023px) {
  .ws, .wiz, .inbox { grid-template-columns: minmax(0, 1fr); }
  .phgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .uprow .upbar { flex-basis: 90px; }
  .uprow .upstate { flex-basis: 104px; }
  .wsrail, .wizsteps { position: static; max-height: none; }
  .rq-footer-inner { grid-template-columns: 1fr 1fr; }
  .lcard-row { flex-direction: column; }
  .lcard-row .media { width: 100%; }
  .gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .gallery .g0 { grid-row: auto; }
  .gallery .gitem:nth-child(n+2) { display: none; }
}

/* ============================================================== PHONE
   Everything below 768px. The site was built as a desktop redesign of the
   app, so none of this existed: the header ran off the edge, the card grid
   demanded 300px columns inside a 343px page, and the wizard, tables and
   detail rail all kept their desktop geometry. Phones are most of the
   South African property market's traffic, so this is not an edge case. */

@media (max-width: 767px) {
  :root {
    --rq-page-margin: 16px;
    --rq-gutter: 14px;
    /* Two stacked rows: the logo bar and the search row beneath it. This was
       declared 58px, which was never true and was referenced nowhere. */
    --rq-header-h: 119px;
  }

  /* ---- header: logo, search, burger. Nothing else fits. ----
     The burger is styled once, in the 900px block above. A second copy lived
     here at 42x42 and, being later at equal specificity, silently beat the
     44px rule at exactly the widths that needed it most. */
  .rq-header-inner { gap: var(--rq-space-3); }
  .rq-seg, .rq-navlink, .rq-headcta, .rq-spacer { display: none !important; }
  .rq-searchwrap { order: 9; flex: 1 1 100%; min-width: 0; max-width: none; margin-bottom: 10px; }
  .rq-header-inner { height: auto; flex-wrap: wrap; padding-top: 8px; }
  .rq-wordmark .r1 { font-size: 15px; }
  .rq-wordmark .r2 { font-size: 10px; letter-spacing: 2.5px; }
  .rq-typeahead { left: 0; right: 0; }

  /* ---- the menu itself ---- */
  .rq-mobilenav {
    display: block; position: fixed; inset: 0 0 0 auto;
    width: min(320px, 86vw); background: var(--rq-white);
    z-index: var(--rq-z-modal); overflow-y: auto;
    box-shadow: var(--rq-shadow-popover);
  }
  .rq-mobilenav[hidden] { display: none; }
  .rq-mobilenav-scrim {
    position: fixed; inset: 0; background: rgba(3,35,35,.5);
    z-index: calc(var(--rq-z-modal) - 1);
  }
  .rq-mobilenav-inner { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .rq-mobilenav a, .rq-mobilenav button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 10px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--rq-ink);
    text-align: left; border-radius: var(--rq-radius-sm); min-height: 46px;
  }
  .rq-mobilenav a:hover, .rq-mobilenav button:hover { background: var(--rq-emerald-50); text-decoration: none; }
  .rq-mobilenav .btn { justify-content: center; color: #fff; }
  .rq-mobileuser {
    display: flex; align-items: center; gap: 12px; padding: 4px 10px 16px;
    border-bottom: 1px solid var(--rq-slate-200); margin-bottom: 10px;
  }
  .rq-mobileuser .t-body-s { word-break: break-all; }

  /* ---- type comes down; 44px display text is a desktop luxury ---- */
  .t-display-xl { font-size: 28px; line-height: 34px; letter-spacing: -.4px; }
  .t-display-l  { font-size: 24px; line-height: 31px; letter-spacing: -.3px; }
  .t-display-m  { font-size: 21px; line-height: 28px; }
  .t-heading-l  { font-size: 18px; line-height: 25px; }
  .t-price-xl   { font-size: 26px; line-height: 32px; }
  .t-body-l     { font-size: 15px; line-height: 24px; }

  /* ---- layout: one column, everywhere ---- */
  .lgrid { grid-template-columns: minmax(0, 1fr); }
  /* minmax(0,…) not 1fr: a 1fr track will not shrink below its widest child's
     min-content, and the schematic map SVG dragged the listing page 60px past
     a 375px screen because of it. */
  .browse, .detail, .ws, .wiz, .inbox { grid-template-columns: minmax(0, 1fr); }
  .rq-footer-inner { grid-template-columns: 1fr; gap: var(--rq-space-6); padding: var(--rq-space-8) 0; }
  .rq-main { padding: var(--rq-space-6) 0 var(--rq-space-8); }
  .card-pad-lg { padding: var(--rq-space-6); }
  .card-pad { padding: var(--rq-space-5); }

  /* ---- the hero is 64px/56px of padding on desktop ---- */
  .rq-hero { padding: 32px 20px !important; border-radius: var(--rq-radius-lg) !important; margin-bottom: 32px !important; }

  /* ---- browse controls stack and the view tabs scroll ---- */
  .viewtabs { width: 100%; }
  .viewtabs button { flex: 1; justify-content: center; padding: 10px 8px; min-height: 44px; }
  .viewtabs button span { display: none; }
  .filters { width: 100%; max-width: none; }
  .select, .input { min-height: 44px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  /* A 122px select clipped "Western Cape". Give the two-up rows their width back. */
  .tworow { grid-template-columns: 1fr; }
  .field .select { width: 100%; }
  .textarea { font-size: 16px; }

  /* ---- detail ---- */
  /* height:auto matters: the 1080 breakpoint pins a 38vh height, and with an
     aspect-ratio set the browser then derives WIDTH from that height —
     308px tall x 4/3 = 411px wide inside a 351px column. Width first. */
  /* B1: the tablet rule hides photos 2 and 3, and the lightbox was the only
     way to them. On a phone the gallery becomes a swipeable strip instead, with
     the next photo peeking so it is obvious there is more. */
  .gallery {
    display: flex; gap: 8px; aspect-ratio: auto; height: auto;
    min-height: 0; max-height: none; width: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-radius: var(--rq-radius-lg); position: relative;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery .gitem {
    display: block !important; flex: 0 0 88%; scroll-snap-align: center;
    aspect-ratio: 4/3; border-radius: var(--rq-radius-md);
  }
  /* Every photo is in the strip, so the desktop "+N more" overlay would be
     both wrong and covering a real image. The badge says the count instead. */
  .gallery .more { display: none; }
  .gallery .g0 { grid-row: auto; }
  .gcount {
    display: block; position: absolute; top: 10px; right: 10px; z-index: 4;
    background: rgba(3,35,35,.82); color: #fff; font-size: 13px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px; pointer-events: none;
  }
  /* the strip scrolls, so the container cannot be the positioning context */
  .gallery-wrap { position: relative; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: var(--rq-space-3); }
  .fact { padding: var(--rq-space-4) var(--rq-space-2); }
  .amen { grid-template-columns: 1fr; gap: 10px; }
  .detail-aside .card { padding: var(--rq-space-5); }

  /* ---- the wizard's rail becomes a scrolling strip of steps ---- */
  .wizsteps {
    display: flex; gap: 8px; overflow-x: auto; padding: 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .wizsteps::-webkit-scrollbar { display: none; }
  .wizstep { flex: 0 0 auto; }
  .wizstep .sub, .wizsteps .t-body-s { display: none; }
  .wizstep .lbl { font-size: 13px; }
  .phgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Twenty illustrated scenes in one column is the longest scroll in the
     product, in the middle of the publish flow. Two up halves it. */
  .scenepick .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ---- the leads inbox is two panes side by side on desktop ---- */
  .inbox-list { border-right: 0; border-bottom: 1px solid var(--rq-slate-200); max-height: 42vh; }
  .inbox-detail { padding: var(--rq-space-5); }

  /* ---- a dialog on a phone is a sheet ---- */
  .modal-back { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; width: 100%; max-height: 92vh;
    border-radius: var(--rq-radius-xl) var(--rq-radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-foot { flex-direction: column-reverse; gap: 8px; }
  .modal-foot .btn { width: 100%; }

  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }

  /* ---- touch targets ---- */
  .btn { min-height: 44px; max-width: 100%; }
  .btn-lg { padding-left: 18px; padding-right: 18px; }
  .btn-sm { min-height: 38px; }
  .chip { min-height: 38px; }
  .phbtn { width: 38px; height: 38px; }
  .rq-footer li + li { margin-top: 14px; }

  /* ---- odds and ends that assume width ---- */
  /* .rq-row is a plain flex row with no wrap, so any pair of buttons ran off
     the edge. On a phone a row of actions wraps, and the hero's pair goes
     full width because they are the primary call to action. */
  .rq-row { flex-wrap: wrap; }
  /* The global `svg { display: block }` puts each chevron on its own line, so
     the breadcrumb stacked into three rows. Lay it out as a wrapping row. */
  nav[aria-label="Breadcrumb"] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  }
  nav[aria-label="Breadcrumb"] svg { display: inline-block; flex: none; }
  .rq-row-between { gap: var(--rq-space-3); }
  .rq-hero .rq-row { gap: 10px; }
  .rq-hero .rq-row > .btn { flex: 1 1 100%; justify-content: center; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { text-align: left; margin-bottom: 10px; }
  .costs .line { font-size: 14px; }
  .mappin-price { font-size: 11px; padding: 4px 8px; }
  .uprow { flex-wrap: wrap; }
  .uprow .upname { flex: 1 1 100%; }
  .uprow .upbar { flex: 1 1 auto; }
  .uprow .upstate { flex: 0 0 auto; }
  .tablewrap > .tbl { min-width: 560px; }
  /* ---- M13: the bar was sticky inside its own grid row, so it vanished for
     the bottom two thirds of the page. Fixed to the viewport instead. ---- */
  .stickycta {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    z-index: var(--rq-z-stickybar);
    padding: 10px var(--rq-page-margin) calc(10px + env(safe-area-inset-bottom));
  }
  /* Room for it, so the footer and the last section are not trapped under it. */
  body:has(.stickycta) .rq-footer { padding-bottom: 84px; }
  /* B1: and it must get out of the way entirely while a dialog is open. */
  body:has(.modal-back) .stickycta { display: none !important; }

  /* ---- M14: the toast was wider than its own container and sat on top of
     the CTA. Constrain it, and lift it clear of the bar. ---- */
  .toasts {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  body:has(.stickycta) .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* The container is inset 12px but the child carried its own offset and a
     full-width basis, so it rendered 4px past the viewport. */
  .toasts { left: 12px; right: 12px; width: auto; max-width: calc(100vw - 24px); }
  .toast { max-width: 100%; width: auto; margin: 0; box-sizing: border-box; }

  /* ---- M17: 44px is the floor for anything you tap ---- */
  .btn { min-height: 44px; max-width: 100%; }
  .btn-sm { min-height: 44px; }
  .btn-icon { min-width: 44px; width: 44px; height: 44px; }
  .chip { min-height: 44px; }
  .switch .track { width: 52px; height: 30px; }
  .switch .track::after { width: 24px; height: 24px; }
  .switch input:checked + .track::after { transform: translateX(22px); }
  /* padding set once, in the 900px block; 6px here undid the 44px floor. */

  /* ---- M10: the workspace rail is the hamburger menu again, 420px of it ---- */
  .wsrail { display: none; }

  /* ---- M8: the leads inbox stops being a master/detail pair ---- */
  .inbox-list { max-height: none; overflow-y: visible; }
  /* ---- M7: a long email must wrap rather than be sliced ---- */
  .inbox-detail, .inbox-item { overflow-wrap: anywhere; word-break: break-word; }
  /* A bare text link inside the lead detail is still a tap target. */
  .inbox-detail a[data-link] { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---- M9: a table cannot fit a 320px phone. Even with the numeric columns
     dropped it still wanted 420px, and the row's only action sat 100px off the
     right edge behind a scroll nobody would discover. Each row becomes a card
     instead, so nothing scrolls sideways and Manage is always reachable. ---- */
  .tablewrap { overflow-x: visible; }
  .tablewrap > .tbl { min-width: 0; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tr {
    border: 1px solid var(--rq-slate-200); border-radius: var(--rq-radius-md);
    padding: 14px; margin-bottom: 12px; background: var(--rq-white); box-sizing: border-box;
  }
  .tbl td { border: 0; padding: 4px 0; text-align: left !important; }
  .tbl td.num { text-align: left !important; }
  .tbl td.num:not(:last-child)::before {
    content: attr(data-label) " "; color: var(--rq-slate-500); font-size: 12.5px;
  }
  .rowactions { justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-top: 8px; }
  .rowactions .btn { flex: 1 1 auto; justify-content: center; }
  .menu { right: auto; left: 0; }

  /* ---- M12: a 16px slider cannot pick 1 of 100 ---- */
  input[type="range"] { height: 34px; }

  /* ---- M3: keep map pins inside the map and tappable ---- */
  /* A taller map gives fourteen pins somewhere to go, and the pill gets a real
     touch height rather than 32px. */
  .mapbox { aspect-ratio: 1/1 !important; }
  .mappin-price { font-size: 11.5px; padding: 11px 10px; }
  .mappin { max-width: 44vw; }

  /* ---- M4: the filter drawer needs a way out that is always on screen ---- */
  .filters { padding-bottom: 76px; }
  .filterfoot {
    position: fixed; left: 0; bottom: 0; width: min(360px, 88vw);
    display: flex !important; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--rq-white); border-top: 1px solid var(--rq-slate-200);
    z-index: calc(var(--rq-z-modal) + 1);
  }
  .filterfoot .btn { flex: 1; }

  .modal { padding-bottom: env(safe-area-inset-bottom); }

  /* The billing slider and its readout sit side by side; at 375px the readout's
     210px floor squeezed the slider to nothing, so they stack. */
  .slotreadout { min-width: 0 !important; text-align: left !important; width: 100%; }
  .slotreadout + * , .rq-row:has(> .slotreadout) { flex-wrap: wrap; }
  input[type="range"] { flex: 1 1 100% !important; min-width: 0; }
}

/* Small phones: 320-379. The iPhone SE and a lot of Android stock. */
@media (max-width: 379px) {
  :root { --rq-page-margin: 12px; }
  .t-display-xl { font-size: 25px; line-height: 31px; }
  .t-display-l  { font-size: 22px; line-height: 29px; }
  .rq-wordmark { display: none; }          /* the mark alone still identifies it */
  .facts { grid-template-columns: 1fr 1fr; }
  .phgrid { grid-template-columns: 1fr; }
  .chip { font-size: 12.5px; }
  /* A 64px pin cannot be kept inside a 294px map by insetting alone. */
  .mappin-price { font-size: 10.5px; padding: 11px 7px; }
}

/* Landscape phone: 375px of height, and 188px of it was chrome. The search
   goes back inline beside the logo, and the sticky bar slims down. */
@media (max-width: 900px) and (max-height: 480px) {
  .rq-header-inner { flex-wrap: nowrap; height: 54px; padding-top: 0; }
  .rq-searchwrap { order: 0; flex: 1 1 auto; margin-bottom: 0; max-width: none; }
  .stickycta { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .stickycta .btn { min-height: 38px; }
  .modal { max-height: 94vh; }
  /* Cap the stage so Previous/Next are on screen rather than 209px below it. */
  /* 52vh left the dialog 28px short of holding its own nav row. 32vh clears
     it with room; the image letterboxes rather than cropping. */
  #lbstage { max-height: 32vh; aspect-ratio: auto !important; height: 32vh; }
  #lbstage .scene, #lbstage .photo { height: 100%; width: 100%; object-fit: contain; }
  #lbstage svg { height: 100%; width: 100%; }
  .rq-mobilenav-inner { padding-top: 10px; }
  .rq-mobilenav a, .rq-mobilenav button { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
}