/* Chicago Condo Expert — site preview styles */
:root {
  --paper: #f5f1e8;
  --card: #fffdf7;
  --ink: #102033;
  --ink-2: #3b4a5c;
  --muted: #6d7685;
  --line: #e3dccd;
  --navy: #0a1c33;
  --navy-2: #12304f;
  --lake: #1d6a96;
  --lake-soft: #d9e8f0;
  --accent: #d9913f;
  --accent-soft: #f6e3c8;
  --tower-top: #9fd0ea;
  --tower-bottom: #2f7fae;
  --lake-0: rgba(29, 106, 150, 0);
  --lake-1: rgba(29, 106, 150, .22);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 32, 51, .05), 0 8px 24px rgba(16, 32, 51, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: var(--lake); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.narrow { width: min(760px, 100% - 32px); margin: 0 auto; }

/* preview ribbon */
.ribbon { background: var(--accent); color: #2b1a05; font: 600 12px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; text-align: center; padding: 8px 16px; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 28, 51, .92); backdrop-filter: blur(10px);
  color: #e9eef4; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; font: 600 19px/1 var(--serif); letter-spacing: -.01em;  white-space: nowrap; flex: none; }
.logo:hover { text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.logo em { font-style: normal; color: var(--accent); }
.nav { display: flex; gap: 18px; font-size: 14.5px; white-space: nowrap; }
.nav a { color: #c9d4e0; }
.nav a:hover, .nav a.on { color: #fff; text-decoration: none; }
.agent-chip { margin-left: auto; font-size: 12.5px; color: #aab8c8; text-align: right; line-height: 1.3; }
.agent-chip b { color: #fff; font-weight: 600; }
/* the brokerage name at the logo size (IDFPR 1450.715(b)(2)) */
.agent-chip .brk { display: block; color: #fff; font: 600 19px/1.15 var(--serif); white-space: nowrap; }
.agent-chip .who { display: block; margin-top: 2px; }

/* hero */
.hero { background: radial-gradient(1200px 500px at 70% 0%, #1d4a73 0%, rgba(29, 74, 115, 0) 60%),
  linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #eef3f8; overflow: hidden; }
.hero .wrap { padding: 72px 0 0; }
.eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font: 500 clamp(36px, 5.4vw, 64px)/1.04 var(--serif); letter-spacing: -.025em; margin: 18px 0 18px;
  max-width: 19ch; }
.hero h1 i { font-style: italic; color: #f3c98f; }
.hero .lede { font-size: clamp(17px, 1.6vw, 19px); color: #c3d0dd; max-width: 60ch; margin: 0 0 30px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600;
  font-size: 15px; transition: transform .15s ease, background .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: #241505; }
.btn.ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.btn.dark { background: var(--navy); color: #fff; }
.hero-sky { margin-top: 40px; }

/* skyline */
.skyline { display: block; width: 100%; height: auto; }
.skyline .t { fill: url(#tower); transform-box: fill-box; transform-origin: bottom; animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--d); }
.skyline .t.soon { fill: rgba(159, 208, 234, .28); }
.skyline a .t:hover { fill: var(--accent); }
.skyline .t.hl { fill: var(--accent); }
.skyline .refl { fill: url(#sky-water); }
.skyline .refl.hl { fill: rgba(217, 145, 63, .35); }
.skyline .horizon { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.skyline .seg line { stroke: rgba(255, 255, 255, .3); }
.skyline .seg text, .skyline .axis { fill: #9fb2c6; font: 600 11px var(--mono); letter-spacing: .12em; }
.skyline .seg text { text-anchor: middle; }
.skyline .axis { font-size: 10px; fill: #6f87a0; }
.skyline.compact { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); border-radius: var(--radius); }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .skyline .t { animation: none; } }

/* stat strip */
.strip-stats { background: var(--navy-2); color: #dfe8f1; border-top: 1px solid rgba(255, 255, 255, .06); }
.strip-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.strip-stats div { padding: 26px 20px; border-left: 1px solid rgba(255, 255, 255, .08); }
.strip-stats div:first-child { border-left: 0; padding-left: 0; }
.strip-stats b { display: block; font: 500 34px/1.1 var(--serif); color: #fff; }
.strip-stats span { font-size: 13.5px; color: #9fb2c6; }

/* sections */
section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
h2 { font: 500 clamp(28px, 3.2vw, 40px)/1.12 var(--serif); letter-spacing: -.02em; margin: 10px 0 0; }
h3 { font: 600 19px/1.3 var(--serif); margin: 0 0 6px; }
.sec-head p { margin: 0; color: var(--ink-2); max-width: 54ch; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 168px; }
.kpi .label { font: 600 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi .num { font: 500 44px/1 var(--serif); letter-spacing: -.02em; margin: 14px 0 8px; color: var(--ink); }
.kpi .num small { font: 500 15px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.kpi .ci { font-size: 13px; color: var(--ink-2); margin-top: auto; }
.kpi .ci b { font-weight: 600; }
.kpi .na { font: italic 400 17px/1.4 var(--serif); color: var(--muted); margin: 16px 0 8px; }
.kpi .delta { display: inline-block; font: 600 12.5px var(--mono); padding: 3px 8px; border-radius: 999px;
  background: #e3f1e8; color: #23683e; margin-bottom: 8px; width: fit-content; }
.kpi .delta.neg { background: #f7e2df; color: #9b2c1f; }

/* area cards */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.area-card { position: relative; border-radius: 20px; overflow: hidden; background: var(--navy); color: #eaf0f6; padding: 30px;
  min-height: 280px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.area-card:hover { text-decoration: none; transform: translateY(-2px); transition: transform .2s ease; }
.area-card h3 { font: 500 30px/1.1 var(--serif); color: #fff; margin: 12px 0 8px; }
.area-card p { color: #b8c7d6; margin: 0 0 20px; max-width: 40ch; }
.area-card .meta { margin-top: auto; display: flex; gap: 28px; font-size: 14px; color: #9fb2c6; }
.area-card .meta b { display: block; font: 500 26px/1.1 var(--serif); color: #fff; }
.area-card.soon { background: linear-gradient(135deg, #1b3350, #2a4a6b); }
.tag { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px;
  border-radius: 999px; background: rgba(217, 145, 63, .18); color: #f3c98f; width: fit-content; }
.tag.live { background: rgba(110, 200, 150, .16); color: #9fe0b8; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust div { border-top: 2px solid var(--ink); padding-top: 18px; }
.trust p { color: var(--ink-2); margin: 0; }
.num-badge { font: 600 12px var(--mono); color: var(--accent); letter-spacing: .1em; }

/* panels */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.grid-2b { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.pill-note { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent-soft); color: #7a4a12; padding: 5px 9px; border-radius: 999px; }

/* charts */
.index .grid { stroke: var(--line); }
.index .tick { fill: var(--muted); font: 11px var(--mono); }
.index .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.index .pt { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.index .end { fill: var(--ink); font: 600 15px var(--serif); }
.strip text { font: 12.5px var(--sans); fill: var(--ink-2); }
.strip .v { font: 12px var(--mono); fill: var(--muted); }
.strip line { stroke: #b9c7d3; stroke-width: 2.5; stroke-linecap: round; }
.strip circle { fill: #7f97ab; }
.strip .hl text { fill: var(--ink); font-weight: 700; }
.strip .hl line { stroke: var(--accent); }
.strip .hl circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.strip .ref { stroke: var(--ink); stroke-dasharray: 3 4; stroke-width: 1.2; }
.strip .ref-label { font: 11px var(--mono); fill: var(--muted); }
.map { display: block; width: 100%; height: auto; background: #faf7f0; border-radius: var(--radius); border: 1px solid var(--line); }
.map .street { fill: none; stroke: #b6a98f; stroke-width: 2; stroke-dasharray: 6 5; }
.map .street-label, .map .lake-label, .map .north { font: 600 10.5px var(--mono); letter-spacing: .14em; fill: #9a8d74; }
.map .lake-label { fill: #4f87a8; writing-mode: vertical-rl; }
.map .dot { fill: rgba(29, 106, 150, .78); stroke: #fff; stroke-width: 1.5; transition: fill .15s; }
.map .dot.coop { fill: rgba(122, 92, 160, .75); }
.map a:hover .dot, .map .dot.hl { fill: var(--accent); }
.map .hl-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .55; }

/* table */
.table-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  font: 15px var(--sans); color: var(--ink); }
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
table.bt { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
.bt th { text-align: left; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 14px 14px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
.bt th.num, .bt td.num { text-align: right; }
.bt th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); }
.bt th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
.bt td { padding: 13px 14px; border-bottom: 1px solid #efe9dc; vertical-align: middle; }
.bt tr:last-child td { border-bottom: 0; }
.bt tbody tr:hover { background: #fbf6ea; }
.bt td.addr a { color: var(--ink); font-weight: 600; }
.bt .dash { color: #b9b1a0; cursor: help; }
.bt .type { font: 600 10.5px var(--mono); letter-spacing: .06em; color: #7a5ca0; background: #efe8f6; padding: 3px 7px; border-radius: 6px; margin-left: 6px; }

/* building page */
.b-hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #e9eff5; padding: 44px 0 36px; }
.crumbs { font-size: 13.5px; color: #9fb2c6; margin-bottom: 16px; }
.crumbs a { color: #c9d4e0; }
.b-hero h1 { font: 500 clamp(34px, 4.6vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; margin: 0 0 16px; color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #dbe5ee;
  border: 1px solid rgba(255, 255, 255, .1); }
.b-hero .grid-2 { align-items: end; }
.size-table { width: 100%; border-collapse: collapse; }
.size-table th { text-align: left; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 0 0 10px; }
.size-table td { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.size-table td b { font: 500 20px var(--serif); }
.size-table .r { text-align: right; }
.size-table .sub { display: block; font-size: 12px; color: var(--muted); }
.big-stat { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.big-stat .num { font: 500 40px/1 var(--serif); }
.q-list { counter-reset: q; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.q-list li { counter-increment: q; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line); color: var(--ink-2); }
.q-list li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 600 12px var(--mono); color: var(--accent); }
.cta { background: radial-gradient(800px 300px at 90% 0%, #24527d 0%, rgba(36, 82, 125, 0) 70%), var(--navy); color: #e7eef5;
  border-radius: 22px; padding: 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.cta h2 { color: #fff; margin-top: 0; }
.cta p { color: #b8c7d6; margin: 10px 0 0; }
.agent-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 22px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #f3c98f);
  display: grid; place-items: center; font: 600 20px var(--serif); color: #2b1a05; margin-bottom: 12px; }
.agent-card b { color: #fff; font-size: 17px; }
.agent-card span.brk { color: #fff; font-size: 17px; font-weight: 600; margin-top: 1px; }
.agent-card span { display: block; font-size: 13.5px; color: #9fb2c6; }
.peers { display: flex; flex-wrap: wrap; gap: 8px; }
.peers a { font-size: 13.5px; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.peers a:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }

/* prose */
.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: var(--ink-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose td, .prose th { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; }

/* footer */
footer { background: #07152a; color: #93a6ba; padding: 48px 0 40px; font-size: 13.5px; margin-top: 40px; }
footer .cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
footer b { color: #e5ecf3; }
footer a { color: #c9d4e0; }
footer .legal { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 28px; padding-top: 20px; font-size: 12.5px; line-height: 1.6; }
footer .trace { font: 11px var(--mono); color: #5f7389; margin-top: 10px; }

/* responsive */
@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .areas, .grid-2, .grid-2b, .cta, .trust, footer .cols { grid-template-columns: 1fr; }
  .q-list { grid-template-columns: 1fr; }
  .strip-stats .wrap { grid-template-columns: 1fr 1fr; }
  .strip-stats div:nth-child(3) { border-left: 0; padding-left: 0; }
  .nav { display: none; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr; }
  .top { position: static; }
  .top .wrap { flex-wrap: wrap; height: auto; gap: 4px 12px; padding: 10px 0 9px; }
  .logo { font-size: 17px; }
  .agent-chip { margin-left: 0; width: 100%; text-align: left; }
  .agent-chip .brk { font-size: 17px; }
  .hero .wrap { padding-top: 48px; }
  section { padding: 52px 0; }
  .cta { padding: 28px 22px; }
}

/* unit mix */
.mixbar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--line); }
.mixbar .seg { display: block; min-width: 3px; }
.s1 { background: #9fd0ea; } .s2 { background: #2f7fae; } .s3 { background: #d9913f; } .s4 { background: #7a5ca0; }
.unk { background: repeating-linear-gradient(45deg, #d8d1c2 0 5px, #e8e2d6 5px 10px); }
.mixlegend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.mixlegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.mixlegend b { color: var(--ink); font-weight: 600; margin-right: 4px; }
table.types { min-width: 680px; }
.bt td.ref { color: var(--muted); }

/* maps */
.cce-map { position: relative; width: 100%; height: 100%; background: #0d2440; }
.cce-map .map-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px; }
.cce-map.map-ready .map-fallback { display: none; }
.map-tools { position: absolute; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; }
.map-tools button { font: 600 12.5px var(--sans); color: #eaf0f6; background: rgba(10, 28, 51, .78); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 8px 13px; cursor: pointer; backdrop-filter: blur(6px); }
.map-tools button:hover { background: rgba(217, 145, 63, .9); color: #241505; }
.maplibregl-ctrl-attrib { font-size: 10.5px; line-height: 1.35; }
/* the building page's 'This building' key sits top left: the full attribution wraps short of it */
.b-map .maplibregl-ctrl-top-right { left: 130px; }
.cce-pop .maplibregl-popup-content { border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(10, 28, 51, .25); font: 13.5px/1.45 var(--sans); }
.pop-addr { font: 600 16px var(--serif); color: var(--ink); }
.pop-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pop-kpi { display: flex; gap: 14px; margin-top: 10px; }
.pop-kpi b { display: block; font: 500 19px var(--serif); color: var(--ink); }
.pop-kpi span { font-size: 11px; color: var(--muted); }
.pop-mix { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.pop-link { display: inline-block; margin-top: 10px; font-weight: 600; }
.pop-soon { margin-top: 8px; font-size: 12.5px; color: #7a4a12; }

/* hero map */
.hero-map { position: relative; height: min(76vh, 760px); min-height: 540px; overflow: hidden; background: var(--navy); }
.hero-map .cce-map { position: absolute; inset: 0; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(7, 21, 42, .88) 0%, rgba(7, 21, 42, .55) 32%, rgba(7, 21, 42, 0) 58%); }
.hero-copy { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: min(calc(max(16px, (100% - 1160px) / 2) + 540px), 100%);
  padding: 56px 20px 0 max(16px, calc((100% - 1160px) / 2)); color: #eef3f8; }

.hero-copy h1 { font: 500 clamp(36px, 5vw, 60px)/1.04 var(--serif); letter-spacing: -.025em; margin: 16px 0; }
.hero-copy h1 i { font-style: italic; color: #f3c98f; }
.hero-copy .lede { color: #c9d6e2; font-size: 18px; margin: 0 0 26px; }
.legend-chips { display: flex; gap: 14px; margin-top: 22px; font-size: 13px; color: #c3d0dd; flex-wrap: wrap; }
.lg { display: inline-block; width: 10px; height: 16px; border-radius: 2px; margin-right: 7px; vertical-align: -3px; }
.lg.live { background: #e0953f; } .lg.soon { background: #7fb8dc; }
.hero-map .map-tools { left: max(16px, calc((100% - 1160px) / 2)); bottom: 24px; }
.sky-strip { background: var(--navy-2); padding: 28px 0 8px; }
.sky-strip .eyebrow { margin-bottom: 6px; }

/* explorer */
.explorer { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 20px; align-items: start; }
.explorer .ex-map { order: -1; }   /* map on the left, the list on the right, on every area page (user 2026-10-14) */
.ex-list { max-height: 720px; overflow-y: auto; padding-right: 6px; }
.ex-map { position: sticky; top: 84px; height: 720px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.ex-map .map-tools, .b-map .map-tools { left: 14px; bottom: 14px; }
/* the toolbar wraps before the zoom / turn buttons on the right instead of running under them (user 2026-10-19:
   "Rotate" covered the turn buttons); the strip itself lets drags through to the map */
.hero-map .map-tools, .ex-map .map-tools, .b-map .map-tools, .hs-map .map-tools { right: 54px; pointer-events: none; }
.map-tools > * { pointer-events: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.filters button { font: 500 12.5px var(--sans); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); cursor: pointer; }
.filters button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.filters .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.ex-street { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.ex-street span { color: var(--accent); margin-left: 4px; }
.bcard { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; margin-bottom: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); transition: border-color .15s, transform .15s; }
.bcard:hover, .bcard.is-hover { text-decoration: none; border-color: var(--accent); transform: translateX(2px); }
.bcard .sil { height: 34px; display: flex; align-items: flex-end; }
.bcard .sil::before { content: ""; display: block; width: 14px; height: calc(8px + 26px * var(--h)); border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #9fd0ea, #2f7fae); }
.bcard.is-hover .sil::before { background: linear-gradient(180deg, #ffd28a, #d9913f); }
.bc-main b { display: block; font-size: 14.5px; }
.bc-main span { font-size: 12.5px; color: var(--muted); }
.bc-kpi { text-align: right; }
.bc-kpi b { display: block; font: 500 18px var(--serif); }
.bc-kpi span { font-size: 11px; color: var(--muted); }
.bcard.hidden { display: none; }
.b-map { position: relative; height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.nearby .bcard { margin-bottom: 8px; }
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .ex-map { position: relative; top: 0; height: 460px; order: -1; }
  .ex-list { max-height: none; }
  .hero-shade { background: linear-gradient(180deg, rgba(7, 21, 42, .9) 0%, rgba(7, 21, 42, .5) 55%, rgba(7, 21, 42, .1) 100%); }
  .hero-map { height: 760px; }
}

/* ticker */
.ticker { background: #07152a; color: #c9d4e0; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 500 12.5px var(--mono); }
.tk-track { display: flex; width: max-content; animation: tk 90s linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
.ticker a { color: #c9d4e0; padding: 9px 18px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .06); }
.ticker a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .04); }
.ticker b { color: #f3c98f; font-weight: 600; margin-right: 6px; }
.ticker i { font-style: normal; color: #6f87a0; font-size: 11px; }
@keyframes tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }

/* stack plan */
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-toggle button { font: 600 12.5px var(--sans); padding: 8px 14px; border: 0; background: var(--card); color: var(--ink-2); cursor: pointer; }
.seg-toggle button.on { background: var(--navy); color: #fff; }
.stack-wrap { overflow-x: hidden; }
.stack { display: block; width: 100%; height: auto; margin: 0 auto; }   /* own size when it fits (max-width per plan), shrinks to fit otherwise */
.stack .ln { font: 600 12px var(--mono); fill: var(--ink); }
.stack .lsub { font: 10.5px var(--mono); fill: var(--muted); }
.stack .lsub.water { fill: #1d6a96; }
.stack .cell { transition: fill .25s; stroke: rgba(255, 255, 255, .7); stroke-width: .6; }
.stack-panel[data-mode="beds"] .b0 { fill: #9fd0ea; }
.stack-panel[data-mode="beds"] .b1 { fill: #2f7fae; }
.stack-panel[data-mode="beds"] .b2 { fill: #d9913f; }
.stack-panel[data-mode="beds"] .b3 { fill: #7a5ca0; }
.stack-panel[data-mode="beds"] .bu { fill: #e3dccd; }
.stack-panel[data-mode="facing"] .f-e { fill: #1d6a96; }
.stack-panel[data-mode="facing"] .f-w { fill: #c9b79a; }
.stack-panel[data-mode="facing"] .f-ns { fill: #8fb9cf; }
.stack-panel[data-mode="facing"] .f-x { fill: #e3dccd; }
.stack .cell:hover { stroke: var(--ink); stroke-width: 1.5; }
.stack-panel[data-mode="beds"] .leg-facing, .stack-panel[data-mode="facing"] .leg-beds { display: none; }
.mixlegend .fe { background: #1d6a96; } .mixlegend .fw { background: #c9b79a; } .mixlegend .fns { background: #8fb9cf; }

/* scatter */
.scatter { display: block; width: 100%; height: auto; }
.scatter .grid { stroke: var(--line); }
.scatter .tick { font: 11px var(--mono); fill: var(--muted); }
.scatter .axis-l { font: 600 11px var(--mono); fill: var(--ink-2); letter-spacing: .04em; }
.scatter .pt { fill: rgba(29, 106, 150, .55); stroke: #1d6a96; stroke-width: 1.2; }
.scatter a:hover .pt { fill: var(--accent); stroke: #9a5a12; }
.scatter .pl { font: 11px var(--sans); fill: var(--ink-2); }

.bt td.addr { white-space: nowrap; }
table.bt { min-width: 1040px; }

.cce-hover, .cce-hover * { pointer-events: none !important; }   /* maplibre re-enables it on .maplibregl-popup-content */
.cce-hover .maplibregl-popup-tip { display: none; }
.stack .cell.odd { stroke: #102033; stroke-width: 1.6; stroke-dasharray: 3 2; }
.mixlegend .oddk { background: #fff; border: 1.6px dashed #102033; box-sizing: border-box; }
.disc-short { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin: 8px 0 0; }
.disc-short b { color: var(--ink-2); }

/* map: hover tooltip + inspector (2026-10-13 redesign) */
.cce-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap; opacity: 0;
  transition: opacity .12s ease; background: rgba(8, 20, 38, .9); color: #eef3f8; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 6px 12px; font: 500 12.5px var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  backdrop-filter: blur(6px); will-change: transform; }
.cce-tip.on { opacity: 1; }
.cce-tip b { font-weight: 600; }
.cce-tip span { font: 500 12px var(--mono); color: #f3c98f; margin-left: 9px; }
.cce-key { position: absolute; z-index: 3; top: 10px; left: 10px; pointer-events: none; display: flex; align-items: center;
  gap: 7px; background: rgba(8, 20, 38, .82); color: #fff; font: 600 12px var(--sans); padding: 4px 10px 4px 8px;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cce-key i { width: 11px; height: 11px; border-radius: 3px; }
.cce-turn button { font: 600 17px/1 var(--sans); color: #102033; }
.cce-ins { position: absolute; z-index: 5; top: 14px; right: 14px; width: 310px; max-height: calc(100% - 28px); overflow: auto;
  background: rgba(255, 253, 247, .84); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: 0 22px 60px rgba(7, 21, 42, .38);
  padding: 18px 18px 16px; color: var(--ink); opacity: 0; pointer-events: none; transform: translateX(26px) scale(.98);
  transition: opacity .28s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.cce-ins.open { opacity: 1; pointer-events: auto; transform: none; }
.ins-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(16, 32, 51, .07); color: var(--ink); font-size: 18px; line-height: 30px; }
.ins-x:hover { background: rgba(16, 32, 51, .14); }
.ins-eyebrow { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ins-addr { font: 500 23px/1.15 var(--serif); letter-spacing: -.01em; margin: 6px 34px 10px 0; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.ins-chips span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(16, 32, 51, .06); color: var(--ink-2); }
.ins-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.ins-kpi div { background: rgba(255, 255, 255, .7); border: 1px solid rgba(16, 32, 51, .07); border-radius: 12px; padding: 9px 10px; }
.ins-kpi span { display: block; font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ins-kpi b { display: block; font: 500 19px var(--serif); margin-top: 3px; }
.ins-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; gap: 2px; }
.ins-bar i { display: block; }
.ins-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 11.5px; color: var(--ink-2); }
.ins-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ins-mix { margin-bottom: 12px; }
.ins-note { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.ins-act { display: flex; gap: 8px; }
.ins-go { flex: 1; text-align: center; background: var(--navy); color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 12px; border-radius: 999px; }
.ins-go:hover { text-decoration: none; background: var(--accent); color: #241505; }
.ins-fly { border: 1px solid rgba(16, 32, 51, .15); background: transparent; border-radius: 999px; padding: 9px 14px; font: 600 13px var(--sans);
  color: var(--ink); cursor: pointer; }
.ins-fly:hover { border-color: var(--accent); }
@media (max-width: 700px) {
  .cce-ins { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 62%; transform: translateY(30px); }
}

/* hero: scroll cue, page scroll not captured by the map */
html { scroll-behavior: smooth; }
.scroll-cue { position: absolute; z-index: 3; right: 64px; bottom: 44px; color: #eef3f8; font: 600 12.5px var(--sans);
  background: rgba(8, 20, 38, .72); border: 1px solid rgba(255, 255, 255, .18); padding: 8px 16px; border-radius: 999px;
  backdrop-filter: blur(6px); letter-spacing: .02em; }
.scroll-cue:hover { text-decoration: none; background: rgba(217, 145, 63, .92); color: #241505; }
.scroll-cue span { display: inline-block; margin-left: 6px; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } html { scroll-behavior: auto; } }
.maplibregl-cooperative-gesture-screen { font: 500 15px var(--sans); }
@media (max-width: 700px) { .scroll-cue { bottom: 120px; right: 16px; } }

.cce-hint { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  transition: opacity .2s; background: rgba(8, 20, 38, .82); color: #fff; font: 600 13px var(--sans); padding: 9px 16px; border-radius: 999px; }
.cce-hint.on { opacity: 1; }
.cce-map.wheel-on { box-shadow: inset 0 0 0 2px rgba(217, 145, 63, .7); }
@media (max-width: 900px) { .hero-copy { width: 100%; bottom: auto; padding-bottom: 20px; } }

.ins-g { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(16, 32, 51, .08); font-size: 11.5px; color: var(--muted); }
.ins-g a { margin-left: 9px; font-weight: 600; }
.g-links { margin-top: 10px; font-size: 13px; color: #9fb2c6; }
.g-links a { color: #f3c98f; margin-left: 12px; font-weight: 600; }
.b-map .map-tools { z-index: 4; }
/* compact inspector on the small building-page map */
.b-map .cce-ins { top: auto; bottom: 56px; left: 10px; right: 10px; width: auto; padding: 12px 14px; border-radius: 14px;
  transform: translateY(14px); }
.b-map .cce-ins.open { transform: none; }
.b-map .ins-kpi, .b-map .ins-mix, .b-map .ins-note, .b-map .ins-eyebrow { display: none; }
.b-map .ins-addr { font-size: 18px; margin: 0 30px 6px 0; }
.b-map .ins-chips { margin-bottom: 8px; }
.b-map .ins-g { margin-top: 8px; padding-top: 6px; }
.b-map .ins-x { top: 8px; right: 8px; width: 26px; height: 26px; line-height: 26px; }

/* colour-by control + legend */
.color-by { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); margin-right: 4px;
  background: rgba(10, 28, 51, .78); backdrop-filter: blur(6px); }
.map-tools .color-by button { border: 0; border-radius: 0; background: transparent; padding: 8px 11px; }
.map-tools .color-by button.on { background: #f3c98f; color: #241505; }
.map-legend { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: min(560px, calc(100% - 28px));
  background: rgba(8, 20, 38, .74); color: #dfe8f1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 7px 12px;
  font: 500 11.5px var(--sans); backdrop-filter: blur(6px); pointer-events: none; }
.map-legend b { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #f3c98f; margin-right: 4px; width: 100%; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 2px 0 6px; }
.map-legend .lg-ramp { display: inline-block; width: 140px; height: 9px; border-radius: 999px; }
.map-legend .lg-lab { font: 500 11px var(--mono); color: #b8c7d6; }
.hero-map .map-legend { left: max(16px, calc((100% - 1160px) / 2)); bottom: 70px; }
.ex-map .map-legend, .b-map .map-legend { left: 14px; bottom: 58px; max-width: calc(100% - 84px); }  /* clear of the zoom / pitch buttons */
.b-map .map-legend { display: none; }
.b-map .color-by button { padding: 8px 9px; }

/* unit types observed in MLS records (unit_obs_h1): counts of distinct units, not a building mix */
.obs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 2px; }
.obs > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.obs b.num { font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.obs span { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.obs i { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.obs .muted-cell { border-style: dashed; }
.obs .muted-cell b.num { color: var(--ink-2); }

/* an area whose building pages are live before its market figures (Lakeview East until the 2026-10-31 build) */
.panel.pending { border-style: dashed; background: transparent; box-shadow: none; }
.panel.pending p { max-width: 75ch; }

/* three areas in the header: below 1100 px the method / about links move to the footer only; the agent and
   brokerage name always stay in the header (advertising rule) */
@media (max-width: 1100px) { .nav a[href$="method.html"], .nav a[href$="about.html"], .nav a[href$="tools.html"] { display: none; } }

/* neighborhoods menu (seven areas no longer fit the header) */
.nav .dd { position: relative; }
.nav .dd-menu { display: none; position: absolute; top: 100%; left: -14px; z-index: 50; min-width: 240px; padding: 8px 0;
  background: #0f2236; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.nav .dd:hover .dd-menu, .nav .dd:focus-within .dd-menu { display: block; }
.nav .dd-menu a { display: block; padding: 8px 16px; white-space: nowrap; }
.nav .dd-menu a:hover { background: rgba(255,255,255,.06); }
.nav .dd-menu i { font-style: normal; font-size: 12px; color: #8ea3b8; margin-left: 6px; }

/* ---- home hero, option A (user 2026-10-14): copy on solid navy at the left, the map on the right, nothing over the map */
.hero-split { display: grid; grid-template-columns: minmax(360px, 40%) 1fr; min-height: min(78vh, 760px); background: var(--navy); padding: 0; }
.hs-copy { color: #eef3f8; padding: 64px 40px 48px max(16px, calc((100vw - 1160px) / 2)); display: flex; flex-direction: column; justify-content: center; }
.hs-copy h1 { font: 500 clamp(34px, 4.2vw, 56px)/1.05 var(--serif); letter-spacing: -.025em; margin: 16px 0; color: #fff; }
.hs-copy h1 i { font-style: italic; color: #f3c98f; }
.hs-copy .lede { color: #c9d6e2; font-size: 17.5px; margin: 0 0 26px; max-width: 44ch; }
.hs-facts { color: #9fb2c6; font-size: 14px; margin: 14px 0 22px; }
.hs-facts b { color: #fff; font-weight: 600; }
.hs-map { position: relative; min-height: 520px; }
.hs-map .cce-map { position: absolute; inset: 0; }
.hs-map .map-tools { left: 16px; bottom: 16px; }
.hs-map .map-legend { left: 16px; bottom: 62px; max-width: calc(100% - 84px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* building search */
.bsearch { position: relative; max-width: 520px; }
.bsearch input { width: 100%; box-sizing: border-box; font: 500 16px var(--sans); padding: 15px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22); background: #fffdf7; color: var(--ink); }
.bsearch input:focus { outline: 3px solid rgba(243, 201, 143, .55); }
.bsearch-out { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fffdf7; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); overflow: hidden; display: none; }
.bsearch-out.on { display: block; }
.bsearch-out a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; color: var(--ink); border-top: 1px solid var(--line); }
.bsearch-out a:first-child { border-top: 0; }
.bsearch-out a:hover, .bsearch-out a.sel { background: var(--accent-soft); text-decoration: none; }
.bsearch-out a span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.bsearch-out .none { padding: 12px 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hs-copy { padding: 40px 16px 28px; }
  .hs-map { min-height: 420px; }
}

/* ---- sections (user 2026-10-14): every section opens with label + title + one line; alternate bands set them apart */
section.band { background: #ece5d6; }
.sec-head.std { margin-bottom: 26px; }
.sec-head.std h2 { margin-top: 10px; }
.region { font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 26px 0 12px; }
.region:first-of-type { margin-top: 4px; }
.area-card .meta { margin-top: 18px; }
/* building page: section contents on cards, the section itself carries the title */
.toc { position: sticky; top: 64px; z-index: 9; background: rgba(245, 241, 232, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.toc .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.toc a { font: 600 13px var(--sans); color: var(--ink-2); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.toc a:hover { background: #e6dfcf; text-decoration: none; }
.toc a.on { background: var(--navy); color: #fff; }
section[id] { scroll-margin-top: 118px; }
.bpage > section:nth-of-type(even) { background: #ece5d6; }
.bpage > section { padding: 56px 0; }
.stack-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* monthly email sign-up, coming soon */
.subscribe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; margin-top: 28px;
  background: var(--navy); color: #e9eff5; border-radius: var(--radius); padding: 30px 32px; }
.subscribe h3 { font: 500 24px/1.2 var(--serif); color: #fff; margin: 10px 0 8px; }
.subscribe p { color: #b8c7d6; margin: 0; }
.sub-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sub-form input { font: 500 15px var(--sans); padding: 13px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; }
.sub-form button { font: 600 14px var(--sans); padding: 0 18px; border-radius: 10px; border: 0; background: #6b7a8c; color: #e9eff5; cursor: not-allowed; }
.sub-form .note { grid-column: 1 / -1; color: #8ea3b8; font-size: 12.5px; margin: 2px 0 0; }
.sub-slot { grid-column: 1 / -1; min-height: 48px; }
.sub-form .sub-open { width: 100%; min-height: 48px; background: var(--accent); color: #241505; cursor: pointer; font-size: 15px; }
.sub-form .sub-open:hover { background: #e6a457; }
.sub-form .sub-open:disabled { background: #6b7a8c; color: #e9eff5; cursor: progress; }
.sub-slot iframe { border-radius: 10px; }
@media (max-width: 900px) { .subscribe { grid-template-columns: 1fr; } }
/* home neighborhood cards: compact, four to a row, so the block stays short as neighborhoods are added */
#areas .areas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
#areas .area-card { padding: 20px 22px; min-height: 0; border-radius: 16px; }
#areas .area-card h3 { font-size: 22px; margin: 10px 0 0; }
#areas .area-card .meta { gap: 20px; margin-top: 16px; }
#areas .area-card .meta b { font-size: 20px; }

/* ---- home refinements (user 2026-10-14) */
/* hero copy in layers: headline, one line, three points, search, three figures */
.hs-copy .lede { font-size: 18px; margin-bottom: 18px; }
.hs-points { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; max-width: 46ch; }
.hs-points li { padding-left: 18px; position: relative; line-height: 1.4; }
.hs-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.hs-points b { display: block; color: #fff; font-weight: 600; font-size: 15.5px; }
.hs-points span { color: #9fb2c6; font-size: 14px; }
.hs-facts { display: flex; gap: 30px; margin: 22px 0 24px; color: #9fb2c6; font-size: 13px; }
.hs-facts b { display: block; font: 500 26px/1.1 var(--serif); color: #fff; }
/* section heads: label, title, then the line under it (left-aligned, one measure) */
.sec-head.std { display: block; margin-bottom: 30px; }
.sec-head.std p { margin: 12px 0 0; max-width: 62ch; font-size: 16.5px; color: var(--ink-2); }
/* region heads: sentence case with counts */
.region { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.region h3 { font: 500 21px/1.2 var(--serif); margin: 0; color: var(--ink); letter-spacing: 0; text-transform: none; }
.region span { color: var(--muted); font-size: 13.5px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #c9d6e2; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8fa6bd; }
.pill.live { background: rgba(110, 200, 150, .16); color: #b6ecc9; }
.pill.live::before { background: #6fd39a; }
/* how we measure: three rules with their numbers, then sources and what is not here */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rules > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; }
.rules b { display: block; font: 500 46px/1 var(--serif); color: var(--accent); letter-spacing: -.02em; }
.rules h3 { font: 600 16.5px/1.3 var(--sans); margin: 10px 0 8px; color: var(--ink); }
.rules p { margin: 0; color: var(--ink-2); font-size: 15px; }
.rules-foot { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 24px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.rules-foot p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }
/* about: who, three ways to help, contact */
.about { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: stretch; }
.about-card { background: var(--navy); color: #e9eff5; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.about-card b { display: block; color: #fff; font: 500 22px/1.2 var(--serif); }
.about-card span { display: block; color: #9fb2c6; font-size: 14px; margin-top: 3px; }
.about-card span.brk { color: #fff; font: 500 22px/1.2 var(--serif); margin-top: 2px; }
.about-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) {
  .rules, .helps, .rules-foot, .about { grid-template-columns: 1fr; }
}
.region { font: 400 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hs-copy h1 { font-size: clamp(32px, 3.6vw, 50px); }
.hero-split { grid-template-columns: minmax(420px, 45%) 1fr; }
.hs-copy { padding-right: 48px; }

/* calculators */
.calc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.calc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.calc-type { font-size: 14px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.calc-type select { font: 500 14px var(--sans); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.calc-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.calc-in label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.calc-in input { font: 500 15px var(--sans); padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; width: 100%; box-sizing: border-box; }
.calc-in input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.calc-in .cur { position: relative; display: block; }
.calc-in .cur::before { content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.calc-in .cur input { padding-left: 24px; }
.calc[data-tab="own"] .inv { display: none; }
.calc-out { background: var(--navy); color: #dfe8f1; border-radius: 12px; padding: 20px 22px; }
.co-big span { display: block; font-size: 13px; color: #9fb2c6; }
.co-big b { display: block; font: 500 40px/1.1 var(--serif); color: #fff; margin: 4px 0 14px; }
.co-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.co-row b { color: #fff; font-weight: 600; white-space: nowrap; }
.co-row.sep { margin-top: 8px; border-top-color: rgba(255,255,255,.25); }
.co-hint { color: #8ea3b8; font-size: 12.5px; margin: 12px 0 0; }
.calc-note { margin-top: 14px; }
@media (max-width: 900px) { .calc-body { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .calc-in { grid-template-columns: 1fr; } }
.co-hint a { color: #f3c98f; }
.agent-card a, .about-card a:not(.btn), footer a { color: #f3c98f; }
.contact-btns { gap: 10px; }
.yt { font-size: 13.5px; font-weight: 600; }

/* Work with John: three service cards with icon, a promise, three points and a direct email link */
.helps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.help-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px;
  display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.help-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,32,51,.06), 0 14px 30px rgba(16,32,51,.1); }
.hc-head { display: flex; align-items: center; gap: 10px; }
.hc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; }
.hc-icon svg { width: 21px; height: 21px; fill: none; stroke: #9a5a17; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-tag { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.help-card h3 { font: 500 21px/1.25 var(--serif); color: var(--ink); margin: 14px 0 12px; }
.help-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.help-card li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.help-card li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px;
  border-left: 2px solid var(--lake); border-bottom: 2px solid var(--lake); transform: rotate(-45deg); }
.hc-link { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 14.5px; color: var(--lake); }
.hc-link:hover { text-decoration: none; color: var(--accent); }
@media (max-width: 1100px) { .about { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .helps { grid-template-columns: 1fr; } }
.avatar.photo { width: 76px; height: 76px; padding: 0; overflow: hidden; background: #24527d; border: 2px solid rgba(243, 201, 143, .6); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-lede { font-size: 18px; color: var(--ink); }
/* comparison charts: each other building's row opens its page */
.strip .hit { fill: transparent; }
.strip a .row.link { cursor: pointer; }
.strip a:hover .row.link .hit { fill: rgba(217, 145, 63, .10); }
.strip a:hover .row.link text { fill: var(--lake); text-decoration: underline; }

/* comparison tables fit the page (user 2026-10-14): headers may wrap to two lines, tighter cells, no forced
   minimum width; horizontal scrolling only on narrow screens */
table.bt { min-width: 0; font-size: 14px; }
.bt th { white-space: normal; line-height: 1.25; padding: 12px 9px; vertical-align: bottom; }
.bt td { padding: 12px 9px; }
.bt th:first-child, .bt td:first-child { padding-left: 16px; }
.bt th:last-child, .bt td:last-child { padding-right: 16px; }
.bt th.num { max-width: 92px; }
@media (max-width: 760px) { table.bt { min-width: 720px; } }

/* About: the licensee name with the brokerage name at the same size */
.who-h span { display: block; color: var(--ink-2); font-weight: 400; }

/* building page: one-paragraph summary in the hero, and the facts list (2026-10-16) */
.b-summary { color: #d5dee8; font-size: 16.5px; line-height: 1.55; max-width: 60ch; margin: 18px 0 0; }
dl.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 8px 0 0; }
dl.facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
dl.facts dt { font-weight: 600; color: var(--ink); }
dl.facts dd { margin: 0; color: var(--ink-2); }
dl.facts .muted { font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) { dl.facts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { dl.facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* building names (2026-10-16): the name as the title, the address under it; names in lists */
.b-addr { color: #c3d0dd; font: 500 20px/1.3 var(--sans, inherit); margin: 4px 0 2px; }
.bname { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
td.addr .bname { margin-top: 2px; }
.ins-sub { display: block; font-size: 12px; font-weight: 400; opacity: .75; margin-top: 2px; }

/* building page: getting around (2026-10-17) */
.transit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; margin-top: 8px; }
.t-head { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.t-stations { list-style: none; margin: 0; padding: 0; }
.t-stations li { padding: 10px 0 10px 0; border-bottom: 1px solid var(--line); }
.t-lines { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: -1px; }
.t-lines i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.t-walk { font-size: 14px; color: var(--ink-2); }
.t-bus { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.t-bus span { display: inline-block; min-width: 34px; text-align: center; padding: 4px 8px; border-radius: 6px; background: #eef2f6; color: var(--ink); font: 600 13.5px/1 var(--mono); }
.t-bus .more { background: none; font-weight: 400; color: var(--ink-2); }
@media (max-width: 900px) { .transit { grid-template-columns: 1fr; gap: 20px; } }

/* map legend: CTA 'L' station marker (2026-10-17) */
.lg-l { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; white-space: nowrap; }
.lg-l i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2.5px solid #c60c30; }

/* map tooltip never wider than the map (narrow maps, phones); it wraps instead (2026-10-17) */
.cce-tip { max-width: calc(100% - 12px); white-space: normal; }

/* building page: a typical unit's monthly cost (2026-10-17) */
.panel.costs { margin-bottom: 18px; }
table.bt.costs { min-width: 0; }

/* ======== phones and small tablets (2026-10-17, user: the mobile layout) — last in the file so it wins ======== */
.strip-near { display: none; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }            /* an earlier desktop rule set a 420 px first column */
  .hs-copy { padding: 36px 16px 24px; }
  .hs-map { min-height: 400px; }
  .strip-full.has-near { display: none; }
  .strip-near { display: block; }
}
@media (max-width: 640px) {
  section { padding: 40px 0; }
  .panel { padding: 16px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi .num { font-size: 30px; margin: 10px 0 6px; }
  .kpi .label { font-size: 10.5px; }
  .kpi-activity { grid-column: 1 / -1; }
  .kpis > .kpi:nth-child(odd):has(+ .kpi-activity) { grid-column: 1 / -1; }   /* no card left alone in a row */
  .kpi .num small { font-size: 12.5px; }
  .obs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .obs b.num { font-size: 22px; }
  .transit { gap: 16px; }
  /* tables as cards */
  .tbl-wrap { overflow-x: visible; }
  table.bt.cards-sm, table.bt.cards-sm.types, table.bt.cards-sm.costs { min-width: 0 !important; }
  table.bt.cards-sm thead { display: none; }
  table.bt.cards-sm, table.bt.cards-sm tbody, table.bt.cards-sm tr, table.bt.cards-sm td { display: block; width: auto; }
  table.bt.cards-sm tr { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
  table.bt.cards-sm td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 0; border: 0; text-align: right; }
  table.bt.cards-sm td::before { content: attr(data-label); flex: none; max-width: 55%; text-align: left;
    font: 600 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  table.bt.cards-sm td:first-child { display: block; text-align: left; font-size: 16px; padding-bottom: 6px; }
  table.bt.cards-sm td:first-child::before { display: none; }
  table.bt.cards-sm td:empty, table.bt.cards-sm td[data-label=""] { display: none; }
  /* maps: smaller controls, no tour / rotate on a phone */
  .map-tools { gap: 4px; }
  .map-tools button { font-size: 11.5px; padding: 6px 9px; }
  .map-tools [data-act="orbit"], .map-tools [data-act="tour"] { display: none; }
  .map-legend { font-size: 11px; }
  .b-map { height: 360px; }
}
@media (max-width: 520px) {
  .toc { top: 0; }                                        /* the header does not stick on phones */
}

/* area screener on phones (2026-10-17): closed until asked; compact two-column cards without empty figures */
.screener-open { display: none; }
@media (max-width: 640px) {
  .screener-open { display: inline-flex; margin: 4px 0 14px; }
  .screener { display: none; }
  .screener.open { display: block; }
  table.bt.cards-sm td.na { display: none; }
  #bt.cards-sm tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  #bt.cards-sm td:first-child { grid-column: 1 / -1; }
  #bt.cards-sm td::before { font-size: 9.5px; }
}