/* =====================================================================
   Northing Property · real estate components for the Signal style
   The instruments (market panel, search plot, repayments, estimate,
   yield, agent match), honest results tables, drawn listing images in
   documentary frames, the floor plan, forms on paper, and the phone menu.
   Uses Signal's tokens and classes; the style's own CSS stays untouched
   in ../../styles/signal/template/css/.
   ===================================================================== */

/* ---------------------------------------------------------------- drawn homes: colours for plans and site drawings */
.work-estate { --w-bg: #f3f5f8; --w-surf: #ffffff; --w-soft: #e6eaf1; --w-ink: #131a2c; --w-mute: #5d6680; --w-line: #d3d8e3; --w-acc: #0e6e8c; --w-acc2: #b07400; --w-on-acc: #ffffff; }
:root[data-theme="dark"] .work-estate.follows { --w-bg: #161d2f; --w-surf: #1b2338; --w-soft: #222b44; --w-ink: #e8ecf6; --w-mute: #98a2bd; --w-line: #2c3654; --w-acc: #4fb8d8; --w-acc2: #f0b43c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .work-estate.follows { --w-bg: #161d2f; --w-surf: #1b2338; --w-soft: #222b44; --w-ink: #e8ecf6; --w-mute: #98a2bd; --w-line: #2c3654; --w-acc: #4fb8d8; --w-acc2: #f0b43c; } }
.w-bg { fill: var(--w-bg); } .w-surf { fill: var(--w-surf); } .w-soft { fill: var(--w-soft); } .w-ink { fill: var(--w-ink); } .w-mute { fill: var(--w-mute); }
.w-line { fill: var(--w-line); } .w-acc { fill: var(--w-acc); } .w-on-acc { fill: var(--w-on-acc); }
.ws-ink { stroke: var(--w-ink); fill: none; } .ws-mute { stroke: var(--w-mute); fill: none; } .ws-line { stroke: var(--w-line); fill: none; } .ws-acc { stroke: var(--w-acc); fill: none; }
.w-t { font-family: var(--body); } .w-m { font-family: var(--mono); }
.fp-gap { stroke: var(--w-surf); }
.fp-light { fill: #ffcf6e; opacity: 0.6; }
.fp-f { fill: none; stroke-width: 1.1; }
.fp-rug { opacity: 0.6; }
.pic { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-m); overflow: hidden; background: var(--w-bg, #f3f5f8); }
.pic svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.r-house, .r-frames { transition: filter 0.4s; }

/* ---------------------------------------------------------------- header: current page and the phone menu */
.top { position: sticky; }
.top nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top nav .btn { padding: 9px 14px; font-size: 15px; }
.top nav .btn-primary { color: var(--accent-ink); }
.top nav .btn-primary:hover { color: var(--accent-ink); }
.menu-btn { display: none; flex: none; height: 34px; padding: 0 12px; align-items: center; gap: 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--body); cursor: pointer; }
.menu-btn i { position: relative; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s var(--plug); }
.menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
.sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px max(var(--gutter), env(safe-area-inset-left, 0px)) 18px; display: grid; }
.sheet[hidden] { display: none; }
.sheet a { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 700 20px var(--display); letter-spacing: -0.01em; }
.sheet a span { font: 400 13px var(--mono); color: var(--muted); }
.sheet a[aria-current="page"] { color: var(--accent); }
.sheet .btn { margin-top: 14px; justify-content: center; font: 600 16px var(--body); color: var(--accent-ink); border-bottom: 0; }

/* ---------------------------------------------------------------- page heads */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.page-head { padding-block: 48px 8px; }
.page-head h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; max-width: 18ch; }
.page-head .lede { margin-top: 16px; font-size: var(--fs-lede); color: var(--muted); max-width: 40em; }
.hero h1 { max-width: 14ch; }
.kicker { font: 600 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: block; }
.sample-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px dashed var(--line); font: 500 12px/1.6 var(--body); color: var(--muted); vertical-align: 3px; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- the instruments: shared pieces on the light table */
.lt .seg { background: rgba(0, 0, 0, 0.3); border-color: #26304a; }
.lt .seg button { color: var(--table-muted); padding: 5px 11px; font-size: 13px; }
.lt .seg button[aria-pressed="true"] { background: var(--table-glass); color: var(--table-ink); box-shadow: 0 0 0 1.5px var(--glow) inset; }
.lt .seg button:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }
.lt :focus-visible { outline-color: var(--glow); }
.lt-readouts.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lt-readouts b small { font: 500 12px var(--body); color: var(--table-muted); margin-left: 4px; letter-spacing: 0; }
.lt-readouts .up { color: #7fe0a8; }
.lt-readouts .down { color: #ffb0a0; }
.lt-note { line-height: 1.5; }
.lt-note b { color: var(--table-ink); font-weight: 600; }
.lt .btn-lime:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lt-sub { font: 500 12px var(--mono); color: var(--table-muted); }

/* sliders and toggles on the table (as in Ledgerline) */
.calc { display: grid; gap: 16px; padding: 14px 4px 4px; }
.calc label { display: grid; gap: 8px; font-size: 13px; color: var(--table-muted); }
.calc .lr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc output { font: 700 18px var(--display); color: var(--table-ink); font-variant-numeric: tabular-nums; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lime) var(--p, 50%), #26304a var(--p, 50%)); outline-offset: 6px; margin: 6px 0; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--table-ink); border: 3px solid var(--table); box-shadow: 0 0 0 1.5px var(--lime); cursor: grab; }
.calc input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--table-ink); border: 3px solid var(--table); box-shadow: 0 0 0 1.5px var(--lime); }
.calc .two { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggles button { border: 1px solid #26304a; background: rgba(0, 0, 0, 0.25); color: var(--table-muted); border-radius: 8px; padding: 7px 11px; font: 600 13px var(--body); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.toggles button[aria-pressed="true"] { background: var(--table-glass); color: var(--table-ink); box-shadow: 0 0 0 1.5px var(--glow) inset; }
.lt select, .lt input[type=number], .lt input[type=text], .lt input[type=email], .lt input[type=tel], .lt textarea { font: 15px var(--body); color: var(--table-ink); background: color-mix(in srgb, var(--table) 70%, black); border: 1px solid #26304a; border-radius: 8px; padding: 9px 11px; min-width: 0; width: 100%; }
.lt select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b96b4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.lt select:focus-visible, .lt input:focus-visible, .lt textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }
.lt-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: var(--s-3); }
.lt-fields label { display: grid; gap: 5px; font: 500 11.5px var(--mono); color: var(--table-muted); }
.extra-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.chip-x { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 8px; background: var(--table-glass); box-shadow: 0 0 0 1.5px var(--glow) inset; font: 600 13px var(--body); color: var(--table-ink); font-variant-numeric: tabular-nums; }
.chip-x.new { animation: plug var(--d-plug) var(--plug); }
.chip-x button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--table-ink); cursor: pointer; font-size: 13px; line-height: 20px; padding: 0; }
.chip-x button:hover { background: rgba(255, 255, 255, 0.22); }
.chip-x i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; }

/* ---------------------------------------------------------------- the market panel */
.mk-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: var(--s-3); align-items: stretch; }
.mk-map { position: relative; min-height: 300px; }
.mk-map .tile { cursor: pointer; border: 0; color: var(--table-ink); text-align: left; justify-content: center; gap: 1px; padding: 3px 6px; font: inherit; }
.mk-map .tile .t1 { font-size: 10.5px; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-map .tile .t2 { font: 500 10px var(--mono); }
.mk-map .tile[aria-pressed="true"] { background: color-mix(in srgb, var(--glow) 22%, var(--table-glass)); box-shadow: 0 0 0 2px var(--glow) inset, 0 10px 24px -10px rgba(143, 227, 255, 0.45); }
.mk-map .tile.cmp::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.mk-map.narrow .tile { padding: 3px 4px; }
.mk-map.narrow .tile .t1 { font-size: 9.8px; letter-spacing: -0.02em; text-overflow: clip; }
.mk-map.narrow .tile .t2 { font-size: 9.5px; }
.mk-map .tile:hover { background: color-mix(in srgb, var(--glow) 12%, var(--table-glass)); }
.mk-map .tile.dim { opacity: 0.4; }
.mk-chart { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-width: 0; padding: 10px 12px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 1px #1d2741 inset; }
.mk-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mk-chart .gl { stroke: #1f2a45; stroke-width: 1; }
.mk-chart .ax { font: 10.5px var(--mono); fill: var(--table-muted); }
.mk-chart .ln { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; transition: d 0.6s ease-out; }
.mk-chart .pt { stroke: var(--table); stroke-width: 2; }
.mk-chart .now { stroke: var(--lime); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.85; transition: transform 0.9s linear; }
.mk-chart .now-dot { transition: cx 0.9s linear, cy 0.9s linear; }
html.calm .mk-chart .now, html.calm .mk-chart .now-dot, html.calm .mk-chart .ln { transition: none; }
.legend-t { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; }
.legend-t .lt-sub { margin-right: auto; }

/* ---------------------------------------------------------------- the search plot (buy) */
.sc-wrap { position: relative; margin-top: var(--s-3); border-radius: 10px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 1px #1d2741 inset; padding: 8px 10px 4px; }
.sc { display: block; width: 100%; height: auto; overflow: visible; }
.sc .gl { stroke: #1f2a45; }
.sc .ax { font: 10.5px var(--mono); fill: var(--table-muted); }
.sc-dot circle { fill: var(--table-glass); stroke: var(--glow); stroke-width: 2; transition: r 0.35s var(--plug), opacity 0.3s, fill 0.3s; }
.sc-dot.off circle { opacity: 0.18; stroke: var(--table-muted); }
.sc-dot text { font: 600 12px var(--body); fill: var(--table-ink); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.sc-dot .tagbg { fill: #0a0f1d; stroke: #26304a; opacity: 0; transition: opacity 0.2s; }
.sc-dot:hover text, .sc-dot:focus text, .sc-dot.hot text, .sc-dot:hover .tagbg, .sc-dot:focus .tagbg, .sc-dot.hot .tagbg { opacity: 1; }
.sc-dot:hover circle, .sc-dot:focus circle, .sc-dot.hot circle { fill: var(--glow); }
.sc-dot:focus { outline: none; }
.sc-dot:focus-visible circle { stroke: var(--lime); stroke-width: 3; }
.saved { font: 500 12px var(--mono); color: var(--lime); }

/* the indicative range against recent sales (sell) */
.est { margin-top: var(--s-3); padding: 14px 12px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 1px #1d2741 inset; }
.est-scale { position: relative; height: 34px; border-radius: 6px; background: repeating-linear-gradient(90deg, #1f2a45 0 1px, transparent 1px 10%); }
.est-band { position: absolute; top: 6px; bottom: 6px; border-radius: 5px; background: color-mix(in srgb, var(--glow) 26%, transparent); box-shadow: 0 0 0 1.5px var(--glow) inset; transition: left var(--d-bar) var(--ease), width var(--d-bar) var(--ease); }
.est-mid { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: var(--table-ink); transition: left var(--d-bar) var(--ease); }
.est-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 2px var(--table); }
.est-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font: 500 11px var(--mono); color: var(--table-muted); }
html.calm .est-band, html.calm .est-mid { transition: none; }

/* ---------------------------------------------------------------- results: an honest table (desktop) and a list (phones) */
.res-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-top: 8px; }
.res-bar p { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.res table { min-width: 900px; }
.res td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.res td.addr a { color: var(--ink); font-weight: 600; text-decoration: none; }
.res td.addr a:hover { color: var(--accent); text-decoration: underline; }
.res td.addr { min-width: 200px; }
.res td.addr small { display: block; }
.res td:last-child { min-width: 120px; }
.res td.num-r small { min-width: 110px; }
.res .pic { width: 104px; border-radius: 6px; }
.res th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.res th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.res th button::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.3; }
.res th[aria-sort="ascending"] button::after { border-top: 0; border-bottom: 5px solid currentColor; opacity: 1; }
.res th[aria-sort="descending"] button::after { opacity: 1; }
.res tr.hot td { background: var(--accent-soft); }
.num-r { text-align: right; }
.r-list { display: none; gap: 12px; margin-top: 20px; }
.r-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); text-decoration: none; }
.r-card .pic { border-radius: 8px; }
.r-card b { display: block; font: 700 17px/1.2 var(--display); }
.r-card .p { font: 800 18px/1.2 var(--display); font-variant-numeric: tabular-nums; margin-top: 4px; }
.r-card small { display: block; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.empty-row { padding: 28px 16px; color: var(--muted); }

/* ---------------------------------------------------------------- listing cards (home, similar homes) */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.lcard { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.lcard:hover { border-color: var(--accent); }
.lcard .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); padding: 4px 4px 0; }
.lcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; padding: 0 4px; }
.lcard .p { font: 800 24px/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; padding: 0 4px; }
.lcard dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 4px 0; border-top: 1px solid var(--line); margin: 2px 4px 0; }
.lcard dt { font-size: 11.5px; color: var(--muted); }
.lcard dd { margin: 0; font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
.lcard .open { font-size: 13.5px; color: var(--muted); padding: 0 4px; }
.lcard .open::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 0; }

/* ---------------------------------------------------------------- property page */
.ph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
.ph.ph-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ph.ph-75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gal { display: grid; gap: 10px; }
.gal .pic { aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.thumbs button { display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 13px var(--body); cursor: pointer; text-align: left; }
.thumbs .pic { border-radius: 6px; border: 2px solid transparent; }
.thumbs button[aria-pressed="true"] { color: var(--ink); }
.thumbs button[aria-pressed="true"] .pic { border-color: var(--accent); }
.thumbs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.facts-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.facts-line b { color: var(--ink); font: 700 18px var(--display); margin-right: 4px; }
.price-big { font: 800 clamp(28px, 3vw, 36px)/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 14px; }
.price-big small { display: block; font: 500 15px var(--body); color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.plan-card { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.plan-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.plan-tools label { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; font-size: 14px; color: var(--muted); }
.plan-tools input[type=range] { flex: 1; accent-color: var(--accent); }
.plan-tools output { font: 600 14px var(--body); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 5ch; }
.plan-draw { padding: 8px 12px 0; }
.plan-draw svg { display: block; width: 100%; height: auto; max-height: 600px; }
.plan-cap { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; padding: 10px 14px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-cap b { color: var(--ink); }
.plan-cap .key { white-space: nowrap; }
.plan-cap .key::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background: #ffcf6e; margin-right: 6px; vertical-align: -1px; }
.opens td .btn { padding: 8px 12px; font-size: 14px; }
.cmp th[scope="row"] { min-width: 190px; }
.cmp-diff.up { color: var(--ok); }
.cmp-diff.down { color: var(--muted); }

/* ---------------------------------------------------------------- forms on paper */
.lform { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.lform h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.lform label, .lform .fs { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.lform label small, .lform legend small { font-weight: 400; color: var(--muted); }
.lform input:not([type=checkbox]):not([type=radio]), .lform select, .lform textarea { font: 400 16px var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 12px; min-width: 0; width: 100%; }
.lform select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6680' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.lform textarea { min-height: 110px; resize: vertical; }
.lform input:focus-visible, .lform select:focus-visible, .lform textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.lform .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lform fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.lform legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.opt span { padding: 8px 13px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); font: 500 15px var(--body); color: var(--ink); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.opt input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.lform .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; color: var(--muted); }
.lform .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.lform .fine { font-size: 13px; font-weight: 400; color: var(--muted); }
.lform .btn { justify-content: center; }
.lform .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.done { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r-m); background: var(--accent-soft); border-left: 3px solid var(--accent); }
.done[hidden] { display: none; }
.done b { font: 700 18px var(--display); }
.done p { color: var(--ink); font-size: 15px; }
.done:focus { outline: none; }
.done:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* steps of the appraisal request, numbered on 2px rules */
.prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: s; margin-bottom: 6px; }
.prog li { list-style: none; counter-increment: s; border-top: 2px solid var(--line); padding-top: 8px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prog li::before { content: counter(s) " "; font-weight: 700; color: var(--muted); }
.prog li.is-done, .prog li[aria-current] { border-top-color: var(--ink); color: var(--ink); }
.prog li[aria-current] { font-weight: 600; }
.prog { padding: 0; margin-top: 0; }
.steps-form [data-step] { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.steps-form [data-step] > legend { font: 700 22px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; padding: 0; }
.steps-form [data-step] > legend:focus { outline: none; }
.review { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); font-weight: 400; font-size: 14.5px; }
.review dt { color: var(--muted); }
.review dd { margin: 0; }

/* ---------------------------------------------------------------- agents */
.agents { display: grid; gap: 0; margin-top: var(--s-6); }
.agent-row { display: grid; grid-template-columns: 76px minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 20px 28px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.agent-row.hot { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.mono-tile { width: 76px; height: 76px; border-radius: var(--r-m); border: 1.5px solid var(--ink); display: grid; place-items: center; position: relative; overflow: hidden; }
.mono-tile b { font: 800 26px var(--display); letter-spacing: -0.02em; position: relative; }
.mono-tile i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 40%); background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 11px); opacity: 0.28; }
.agent-row h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.agent-row .role { color: var(--muted); font-size: 15px; margin-top: 2px; }
.agent-row p { color: var(--muted); margin-top: 10px; font-size: 16px; }
.agent-row .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 15px; }
.agent-row .proof { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.agent-row .proof b { font-size: 28px; }
.agent-row .proof span { font-size: 13.5px; }
.chips-s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips-s span { padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font: 600 12.5px/1.6 var(--body); }

/* ---------------------------------------------------------------- contact */
.hours { margin-top: 0; }
.hours td, .hours th { font-size: 15px; }
.info-rows { display: grid; gap: 0; }
.info-rows div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.info-rows dt { color: var(--muted); font-size: 15px; }
.info-rows dd { margin: 0; }
.hero-form .lt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); }
.hero-form .lt h2 { color: var(--table-ink); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.hero-form .opts span { background: rgba(0, 0, 0, 0.25); border-color: #26304a; color: var(--table-muted); }
.hero-form .opt input:checked + span { background: var(--table-glass); color: var(--table-ink); border-color: var(--glow); }
.hero-form .opt input:focus-visible + span { outline-color: var(--glow); }
.closing .lt .done, .hero-form .lt .done { background: var(--table-glass); border-left-color: var(--lime); }
.closing .lt .done b, .closing .lt .done p, .hero-form .lt .done b, .hero-form .lt .done p { color: var(--table-ink); }
.form textarea { font: 15px var(--body); color: var(--table-ink); background: color-mix(in srgb, var(--table) 70%, black); border: 1px solid #26304a; border-radius: 8px; padding: 11px 12px; min-height: 96px; resize: vertical; }

/* ---------------------------------------------------------------- footer */
.foot .legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .mk-body { grid-template-columns: minmax(0, 1fr); }
  .ph, .ph.ph-even, .ph.ph-75 { grid-template-columns: minmax(0, 1fr); }
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-row { grid-template-columns: 76px minmax(0, 1fr); }
  .agent-row .proof { grid-column: 2; }
}
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .top nav .nav-link, .top nav .btn { display: none; }
}
@media (max-width: 760px) {
  .res .table-scroll { display: none; }
  .r-list { display: grid; }
  .lt-readouts.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .lt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lform { padding: 18px; }
  .lform .row2, .calc .two { grid-template-columns: minmax(0, 1fr); }
  .prog { gap: 6px; }
  .prog li { font-size: 12px; }
  .agent-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .agent-row .proof { grid-column: 1 / -1; }
  .mono-tile { width: 56px; height: 56px; }
  .mono-tile b { font-size: 20px; }
  .info-rows div { grid-template-columns: minmax(0, 1fr); }
  .r-card { grid-template-columns: 96px minmax(0, 1fr); }
  .thumbs { grid-template-columns: repeat(5, minmax(56px, 1fr)); }
  .thumbs button span:last-child { font-size: 11.5px; }
  .mk-map { min-height: 0; }
  .lt { padding: 12px; }
  .page-head { padding-top: 32px; }
}
#comps .cmp td.us { min-width: 0; }
#comps .cmp table { min-width: 860px; }
.ph .ctas .btn { white-space: normal; text-align: center; }