/* ============================================================
   OFF-MARKET page additions on top of assets/services.css (off-market.html only).
   The request tool (form + Esri map) keeps its 2026-07 ids and JS; this restyles
   it as a light card inside the dark .term section.
   Promotion candidates for services.css: .om-sides/.om-side (same pattern as
   rent's .rt-side), .om-reads/.om-read (article cards), .om-seal (lock line).
   ============================================================ */

/* lock line under the steps */
.om-seal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(26px, 3.5vw, 40px); padding: 16px 20px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.om-seal svg { width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.om-seal p { flex: 1; min-width: 14rem; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.86); }
.om-seal a { font-size: 13.5px; font-weight: 700; color: var(--amber); text-decoration: none; padding-block: 4px; }
.om-seal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* request tool */
.om-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.om-form { background: var(--paper); color: var(--ink); border: 1px solid var(--term-line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.term .om-form label { color: var(--ink-soft); }
.om-seg { display: flex; border: 1.5px solid var(--hairline); border-radius: 10px; overflow: hidden; margin-bottom: 22px; }
.om-seg button { flex: 1; border: none; background: var(--paper); padding: 13px 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.om-seg button.active { background: var(--ink); color: var(--paper); }
.om-seg button + button { border-left: 1.5px solid var(--hairline); }
.om-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
.om-chip { font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--hairline); background: #FBFAF7; color: var(--ink); border-radius: 999px; padding: 7px 13px; transition: all .15s ease; }
.om-chip:hover { border-color: var(--amber-ink); }
.om-chip.active { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.om-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--hairline); outline: none; margin-top: 6px; }
.om-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--hairline); cursor: pointer; }
.om-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--hairline); cursor: pointer; }
.om-radiuslabel { font-size: 12px; font-weight: 700; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.om-fine { font-size: 12px; color: var(--ink-soft); margin-top: 12px; }
.om-mapwrap { position: sticky; top: calc(var(--svc-nav-h) + 84px); }
.om-map { height: min(70vh, 640px); min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--term-line); }
.om-hint { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--term-dim); margin-bottom: 12px; }
.om-hint .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.om-readout { margin-top: 12px; border: 1px solid var(--term-line); border-left: 3px solid var(--amber); border-radius: 10px; background: var(--term-panel); padding: 12px 15px; font-size: 13px; color: var(--term-dim); }
.om-readout b { color: #fff; font-variant-numeric: tabular-nums; }
.leaflet-container { font-family: 'Sora', 'Sora Fallback', sans-serif; }

/* two directions: buyer (paper) / seller (ink) */
.om-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.om-side {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink);
  background: #FBFAF7; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); transition: border-color .18s ease, transform .18s ease;
}
.om-side:hover { border-color: var(--ink); transform: translateY(-2px); }
.om-side:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 3px; }
.om-side .k { font-size: 12.5px; font-weight: 700; color: var(--amber-ink); }
.om-side h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.02em; }
.om-side p { flex: 1; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); max-width: 36em; }
.om-side .go { margin-top: 4px; font-size: 14px; font-weight: 700; }
.om-side .go span { display: inline-block; color: var(--amber-ink); }
.om-side.is-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.om-side.is-ink .k, .om-side.is-ink .go span { color: var(--amber); }
.om-side.is-ink p { color: rgba(255,255,255,.66); }
.om-side.is-ink:hover { border-color: var(--amber); }

/* quiet deals: two article cards + the atlas */
.om-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.om-read { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); background: #FBFAF7; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; transition: border-color .18s ease; }
.om-read:hover { border-color: var(--ink); }
.om-read:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 3px; }
.om-read img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--hairline); }
.om-read-b { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.om-read .k { font-size: 12px; font-weight: 700; color: var(--amber-ink); }
.om-read b { font-size: 1.02rem; line-height: 1.35; letter-spacing: -.01em; }
.om-read .m { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.om-read:hover b { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.om-read.is-atlas { background: var(--ink); color: #fff; border-color: var(--ink); padding: 24px 2px 4px; }
.om-read.is-atlas svg { width: 30px; height: 30px; margin: 0 20px; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.om-read.is-atlas .k { color: var(--amber); }
.om-read.is-atlas .m { color: rgba(255,255,255,.66); }
.om-read.is-atlas .om-read-b { flex: 1; }
.om-read.is-atlas .go { margin: 0 20px 20px; font-size: 13.5px; font-weight: 700; }
.om-read.is-atlas .go span { color: var(--amber); }

/* closing band: copy + contact left, portrait sign-off right */
.om-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.om-close > .sec-head { margin-bottom: 0; }   /* the grid gap spaces head and signature; the 26px kit margin left 26px of dead band at the end (UX audit 2026-10-13) */
.om-close .msg-btns { margin: 22px 0 18px; }
.om-close .om-back { margin-top: 22px; }

@media (max-width: 980px) {
  .om-reads { grid-template-columns: 1fr 1fr; }
  .om-read.is-atlas { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .om-tool, .om-close { grid-template-columns: 1fr; }
  .om-mapwrap { position: static; }
  .om-map { height: 420px; min-height: 0; }
}
@media (max-width: 700px) {
  .om-sides, .om-reads { grid-template-columns: 1fr; }
  .om-seg button { font-size: 13px; }
}

/* hero h1, phones (spacing extras 2026-10-20): before Sora arrives the h1 sets in the metric fallback, and at 360-414
   "Tell me the home you want. I'll go find it." took 3 lines there and 2 in Sora, so the hero jumped 35px on the swap
   (CLS 0.081 at 390). The shared 'Sora Fallback' 700-900 face (109.5%) runs about 2% wide for this 800-weight line;
   this one, for this h1 only, breaks where Sora does at 360-430 in English and Spanish. Same ascent / descent
   products as the site's faces (97 / 29), so the line boxes do not change. */
@font-face { font-family: 'Sora Fallback OM'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); font-weight: 700 900; size-adjust: 106.5%; ascent-override: 91.08%; descent-override: 27.23%; line-gap-override: 0.00%; }
#om-h1 { font-family: 'Sora', 'Sora Fallback OM', sans-serif; }