:root {
  --city-ink: #182640;
  --city-navy: #001368;
  --city-blue: #0c29ab;
  --city-coral: #f27863;
  --city-sky: #e9efff;
  --city-paper: #fbfcff;
  --city-line: #dce4f1;
  --city-muted: #64728b;
  --city-green: #22745b;
}

* { box-sizing: border-box; }
body.city-body { margin: 0; background: #f5f7fb; color: var(--city-ink); }
.city-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.city-skip { position: fixed; z-index: 100; top: 12px; left: 18px; padding: 11px 14px; border-radius: 8px; background: var(--city-blue); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; transform: translateY(calc(-100% - 20px)); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
.city-skip:focus, .city-skip:focus-visible { transform: translateY(0); opacity: 1; outline: 3px solid var(--city-coral); outline-offset: 2px; }
.city-eyebrow { margin: 0; color: var(--city-blue); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; line-height: 1.4; }
.city-eyebrow span { margin-left: 10px; color: #7e8aa0; letter-spacing: 1px; }
.city-hero { overflow: hidden; background: linear-gradient(135deg, #f6f8ff 0%, #e9efff 50%, #fff7f2 100%); border-bottom: 1px solid #d8e1f1; }
.city-hero-inner { display: grid; grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr); min-height: 575px; align-items: center; gap: 40px; padding-top: 70px; padding-bottom: 68px; }
.city-hero-copy { max-width: 620px; position: relative; z-index: 2; }
.city-hero-copy h1 { max-width: 630px; margin: 18px 0 22px; color: var(--city-navy); font-size: clamp(42px, 5vw, 76px); line-height: .99; letter-spacing: -3.6px; }
.city-hero-copy h1 em { color: var(--city-blue); font-style: normal; }
.city-hero-lead { max-width: 580px; margin: 0; color: #52617a; font-size: 17px; line-height: 1.65; }
.city-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
.city-button { display: inline-flex; min-height: 48px; align-items: center; gap: 14px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none; }
.city-button-primary { background: var(--city-blue); color: #fff; box-shadow: 0 10px 22px rgba(12, 41, 171, .18); }
.city-button-primary:hover, .city-button-primary:focus-visible { background: var(--city-navy); }
.city-text-link { color: var(--city-blue); font-size: 13px; font-weight: 800; text-decoration: none; }
.city-text-link:hover, .city-text-link:focus-visible { text-decoration: underline; }
.city-button:focus-visible, .city-text-link:focus-visible, .city-hero a:focus-visible, .city-partner-cta a:focus-visible { outline: 3px solid var(--city-coral); outline-offset: 3px; }
.city-hero-illustration { position: relative; min-height: 405px; border: 1px solid rgba(12, 41, 171, .16); border-radius: 26px; background: rgba(255, 255, 255, .57); box-shadow: 0 28px 70px rgba(36, 58, 121, .13); transform: rotate(1.7deg); }
.city-hero-illustration::before { position: absolute; inset: 24px; border: 1px solid rgba(12, 41, 171, .12); border-radius: 18px; background-image: linear-gradient(rgba(12, 41, 171, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 41, 171, .08) 1px, transparent 1px); background-size: 34px 34px; content: ""; }
.city-hero-skyline { position: absolute; right: 34px; bottom: 42px; left: 33px; display: flex; align-items: flex-end; gap: 10px; height: 115px; opacity: .28; }
.city-hero-skyline i { display: block; width: 11%; border: 1px solid var(--city-blue); border-bottom: 0; background: rgba(12, 41, 171, .08); }
.city-hero-skyline i:nth-child(1) { height: 46%; } .city-hero-skyline i:nth-child(2) { height: 73%; } .city-hero-skyline i:nth-child(3) { height: 100%; } .city-hero-skyline i:nth-child(4) { height: 60%; } .city-hero-skyline i:nth-child(5) { height: 82%; }
.city-hero-road { position: absolute; z-index: 1; background: rgba(255, 255, 255, .87); border: 1px solid rgba(12, 41, 171, .11); box-shadow: 0 0 0 6px rgba(255, 255, 255, .3); }
.city-hero-road-one { top: 52%; right: -8%; left: -8%; height: 42px; transform: rotate(-8deg); }
.city-hero-road-two { top: 25%; bottom: -5%; left: 50%; width: 36px; transform: rotate(24deg); }
.city-hero-road-three { top: 48%; right: -5%; bottom: 3%; width: 28px; transform: rotate(-52deg); }
.city-hero-lot { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 118px; height: 93px; padding: 10px 12px; border: 1px solid var(--city-blue); background: rgba(246, 248, 255, .91); color: var(--city-blue); box-shadow: 5px 6px 0 rgba(12, 41, 171, .08); }
.city-hero-lot span { font-size: 9px; font-weight: 800; letter-spacing: 1px; } .city-hero-lot b { font-size: 12px; line-height: 1.05; letter-spacing: .3px; }
.city-hero-lot-one { top: 53px; left: 55px; transform: rotate(-5deg); } .city-hero-lot-two { top: 87px; right: 45px; border-color: var(--city-coral); color: #c94b38; transform: rotate(7deg); } .city-hero-lot-three { right: 48px; bottom: 45px; transform: rotate(-3deg); }
.city-hero-house { position: absolute; z-index: 3; bottom: 72px; left: 198px; width: 98px; height: 82px; border: 2px solid var(--city-navy); background: #fff; box-shadow: 8px 8px 0 rgba(0, 19, 104, .09); }
.city-hero-house::before { position: absolute; top: -36px; left: -13px; width: 76px; height: 76px; border-top: 2px solid var(--city-navy); border-left: 2px solid var(--city-navy); background: #fff; content: ""; transform: rotate(45deg); }
.city-hero-house span { position: absolute; z-index: 1; right: 16px; bottom: 0; left: 16px; height: 38px; border: 2px solid var(--city-navy); border-bottom: 0; background: #e9efff; } .city-hero-house i { position: absolute; z-index: 2; right: 7px; bottom: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--city-coral); }
.city-hero-pin { position: absolute; z-index: 4; top: 198px; left: 285px; padding: 9px 11px; border-radius: 5px 5px 5px 0; background: var(--city-navy); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 1px; line-height: 1.35; transform: rotate(-5deg); }
.city-hero-pin::after { position: absolute; bottom: -7px; left: 0; border-top: 8px solid var(--city-navy); border-right: 8px solid transparent; content: ""; }
.city-preview-note { border-bottom: 1px solid #e1e6ef; background: #fff; }
.city-preview-note-inner { display: flex; align-items: center; gap: 15px; padding-top: 16px; padding-bottom: 16px; }
.city-note-mark { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: #e8edff; color: var(--city-blue); font: 800 12px var(--font-display); }
.city-preview-note p { max-width: 900px; margin: 0; color: #69768c; font-size: 12px; line-height: 1.55; } .city-preview-note strong { color: var(--city-ink); }
.city-explorer { padding-top: 92px; padding-bottom: 92px; }
.city-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 31px; }
.city-section-heading h2 { max-width: 640px; margin: 12px 0 0; color: var(--city-navy); font-size: clamp(29px, 3.3vw, 45px); line-height: 1.04; letter-spacing: -1.8px; }
.city-section-heading > p { max-width: 330px; margin: 0 0 4px; color: var(--city-muted); font-size: 13px; line-height: 1.65; }
.city-lens-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px; border: 1px solid var(--city-line); border-radius: 11px; background: #fff; }
.city-toolbar-label { padding: 0 8px 0 5px; color: #7c889c; font-size: 12px; font-weight: 700; }
.city-lens-toolbar button, .city-view-switch button { border: 1px solid transparent; border-radius: 7px; background: transparent; color: #58667c; cursor: pointer; font: 700 12px var(--font-body); }
.city-lens-toolbar button { min-height: 38px; padding: 0 13px; } .city-lens-toolbar button:hover, .city-lens-toolbar button:focus-visible, .city-lens-toolbar button.is-active { border-color: #cad5ef; background: #f0f4ff; color: var(--city-blue); outline: none; }
.city-lens-toolbar button:focus-visible, .city-view-switch button:focus-visible, .city-district-list button:focus-visible, .city-district-block:focus-visible, .city-lot:focus-visible { outline: 3px solid var(--city-coral); outline-offset: 2px; }
  .city-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 13px; }
  .city-market-picker { display: flex; min-height: 38px; align-items: center; gap: 8px; color: #738096; font-size: 11px; font-weight: 750; }
  .city-market-picker select { min-width: 165px; min-height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--city-line); border-radius: 7px; background: #fff; color: var(--city-navy); font: 750 11px var(--font-body); }
  .city-market-picker select:focus-visible { outline: 3px solid var(--city-coral); outline-offset: 2px; }
.city-status { min-height: 20px; margin: 0; color: #738096; font-size: 12px; }
.city-view-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--city-line); border-radius: 8px; background: #fff; }
.city-view-switch button { min-height: 32px; padding: 0 10px; } .city-view-switch button.is-active { background: var(--city-navy); color: #fff; } .city-view-switch button:hover:not(.is-active), .city-view-switch button:focus-visible { background: #f0f4ff; color: var(--city-blue); outline: none; }
.city-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.city-district-sidebar { padding: 22px 17px; border: 1px solid var(--city-line); border-radius: 13px; background: #fff; }
.city-sidebar-heading { padding: 0 7px 14px; border-bottom: 1px solid #edf0f5; } .city-sidebar-heading h3 { margin: 9px 0 0; color: var(--city-navy); font-size: 16px; line-height: 1.2; letter-spacing: -.5px; }
.city-district-list { display: grid; gap: 4px; padding-top: 10px; } .city-district-list button { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; width: 100%; min-height: 53px; padding: 9px 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--city-ink); text-align: left; cursor: pointer; }
.city-district-list button:hover, .city-district-list button:focus-visible, .city-district-list button.is-active { border-color: #d7e0f5; background: #f3f6ff; outline: none; } .city-district-list button.is-active { box-shadow: inset 3px 0 var(--city-blue); }
.district-number { padding-top: 2px; color: #8995a8; font-size: 9px; font-weight: 800; letter-spacing: .7px; } .city-district-list strong, .city-district-list small { display: block; } .city-district-list strong { font-size: 11px; line-height: 1.2; } .city-district-list small { margin-top: 4px; color: #8a95a7; font-size: 9px; line-height: 1.3; }
.city-sidebar-footnote { margin: 19px 7px 0; padding-top: 14px; border-top: 1px solid #edf0f5; color: #8894a7; font-size: 10px; line-height: 1.5; } .city-sidebar-footnote span { color: var(--city-blue); font-size: 13px; }
.city-stage { min-width: 0; }
.city-map-view { min-height: 520px; padding: 24px; border: 1px solid #cfd9eb; border-radius: 14px; background: #e8edfa; box-shadow: 0 12px 30px rgba(27, 52, 111, .08); }
.city-map-view::before { display: block; height: 9px; margin: -24px -24px 20px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--city-blue) 0 31%, #f2b44e 31% 57%, var(--city-coral) 57% 74%, #56a98e 74%); content: ""; }
.city-map-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 17px; } .city-map-kicker { color: #7786a7; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; } .city-map-heading h3 { margin: 8px 0 0; color: var(--city-navy); font-size: 23px; letter-spacing: -.8px; } .city-map-compass { color: #8390ad; font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; } .city-map-compass i { display: inline-grid; width: 22px; height: 22px; margin-top: 2px; place-items: center; border: 1px solid #aebbd4; border-radius: 50%; color: var(--city-blue); font-size: 14px; font-style: normal; }
.city-map-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, minmax(51px, 1fr)); gap: 9px; min-height: 355px; padding: 16px; border: 1px solid rgba(91, 113, 165, .25); background-color: #dce4f5; background-image: linear-gradient(34deg, transparent 47%, rgba(255,255,255,.75) 48%, rgba(255,255,255,.75) 52%, transparent 53%), linear-gradient(145deg, transparent 47%, rgba(255,255,255,.75) 48%, rgba(255,255,255,.75) 52%, transparent 53%); background-size: 170px 170px; }
.city-district-block { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 12px; border: 1px solid rgba(12, 41, 171, .27); border-radius: 3px; background: #f6f8ff; color: var(--city-blue); cursor: pointer; text-align: left; box-shadow: 3px 4px 0 rgba(37, 60, 124, .08); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.city-district-block:hover, .city-district-block:focus-visible, .city-district-block.is-active { z-index: 1; border-color: var(--city-blue); background: #fff; outline: none; transform: translateY(-3px); box-shadow: 5px 7px 0 rgba(12, 41, 171, .13); }
.city-district-block > span { font-size: 9px; font-weight: 800; letter-spacing: 1px; } .city-district-block strong { font-size: 14px; line-height: 1.05; letter-spacing: -.4px; } .city-district-block small { max-width: 100%; overflow: hidden; color: #8190ab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.district-move-in-mile { grid-column: 1 / span 4; grid-row: 1 / span 3; } .district-fresh-start-quarter { grid-column: 5 / span 4; grid-row: 1 / span 3; border-color: rgba(201, 75, 56, .28); background: #fff8f4; color: #b84232; } .district-home-comfort-row { grid-column: 9 / span 4; grid-row: 1 / span 3; border-color: rgba(34, 116, 91, .28); background: #f2fbf7; color: #1d6b54; } .district-landlord-lane { grid-column: 1 / span 4; grid-row: 4 / span 3; border-color: rgba(12, 41, 171, .23); background: #eef2fc; } .district-student-commons { grid-column: 5 / span 4; grid-row: 4 / span 3; border-color: rgba(189, 133, 32, .3); background: #fff9e9; color: #946719; } .district-local-services-exchange { grid-column: 9 / span 4; grid-row: 4 / span 3; border-color: rgba(99, 112, 139, .3); background: #f7f8fb; color: #52617a; }
.city-map-legend { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 16px; color: #78859d; font-size: 10px; } .city-map-legend span { display: inline-flex; align-items: center; gap: 6px; } .city-map-legend i { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--city-blue); } .legend-house { border-radius: 50%; background: var(--city-coral); } .legend-shop { background: var(--city-blue); } .legend-open { background: #fff; border-style: dashed !important; }
.city-list-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .city-list-card { padding: 19px; border: 1px solid var(--city-line); border-radius: 11px; background: #fff; } .city-list-card button { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; padding: 0; border: 0; background: none; color: var(--city-navy); cursor: pointer; text-align: left; } .city-list-card button:focus-visible { outline: 3px solid var(--city-coral); outline-offset: 4px; } .city-list-card h3 { margin: 8px 0 7px; font-size: 18px; letter-spacing: -.5px; } .city-list-card p { margin: 0; color: var(--city-muted); font-size: 12px; line-height: 1.5; } .city-list-card .list-arrow { color: var(--city-blue); font-size: 19px; }
.city-district-detail { margin-top: 16px; padding: 26px; border: 1px solid var(--city-line); border-radius: 14px; background: #fff; } .city-district-detail > h3 { margin: 10px 0 7px; color: var(--city-navy); font-size: 26px; letter-spacing: -1px; } .city-district-detail > p:not(.city-eyebrow) { max-width: 610px; margin: 0; color: var(--city-muted); font-size: 13px; line-height: 1.6; }
.city-detail-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 16px; padding: 13px 0; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; color: #7a879d; font-size: 11px; } .city-detail-stats strong { color: var(--city-navy); font-size: 15px; } .city-lot-selection { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.city-lot { display: block; min-height: 100px; padding: 12px; border: 1px solid #d9e1ee; border-radius: 7px; background: #f8faff; color: var(--city-ink); cursor: pointer; text-align: left; text-decoration: none; } .city-lot:hover, .city-lot:focus-visible, .city-lot.is-selected { border-color: var(--city-blue); background: #eef2ff; outline: none; } .city-lot.is-selected { box-shadow: inset 3px 0 var(--city-blue); } .city-lot-home { border-color: #f1c3b9; background: #fff8f5; } .city-lot-home:hover, .city-lot-home:focus-visible, .city-lot-home.is-selected { border-color: var(--city-coral); background: #fff2ee; box-shadow: inset 3px 0 var(--city-coral); } .city-lot-open { border-style: dashed; background: #fff; color: var(--city-blue); } .lot-label { display: block; margin-bottom: 10px; color: #7f8da5; font-size: 8px; font-weight: 800; letter-spacing: .8px; } .city-lot strong, .city-lot small { display: block; } .city-lot strong { font-size: 11px; line-height: 1.25; } .city-lot small { margin-top: 6px; color: #7d8aa0; font-size: 9px; line-height: 1.3; }
.city-partner-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .city-partner-card { padding: 17px; border: 1px solid #d8e0ef; border-radius: 9px; background: #f8faff; } .city-partner-card-soft { background: #f5fbfa; border-color: #d0e7df; } .partner-card-top { display: flex; align-items: center; gap: 9px; } .partner-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: var(--city-coral); color: #fff; font: 800 13px var(--font-display); } .partner-icon-blue { background: var(--city-blue); } .partner-label { color: #75839b; font-size: 8px; font-weight: 800; letter-spacing: .55px; line-height: 1.25; } .partner-billboard { margin-left: auto; max-width: 76px; overflow: hidden; border: 1px solid #c7d2eb; border-radius: 3px; padding: 4px 5px; background: #fff; color: var(--city-blue); font-size: 8px; font-weight: 850; letter-spacing: .35px; text-overflow: ellipsis; white-space: nowrap; } .city-partner-card h4 { margin: 14px 0 6px; color: var(--city-navy); font-size: 17px; letter-spacing: -.5px; } .city-partner-card p { margin: 0; color: var(--city-muted); font-size: 11px; line-height: 1.55; } .partner-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; } .partner-card-meta span { padding: 5px 7px; border-radius: 4px; background: #e9efff; color: var(--city-blue); font-size: 9px; font-weight: 800; } .city-partner-card-soft .partner-card-meta span { background: #e2f4ed; color: #1f6e57; } .partner-card-action { display: inline-flex; gap: 8px; color: var(--city-blue); font-size: 11px; font-weight: 800; text-decoration: none; } .partner-card-action:hover, .partner-card-action:focus-visible { text-decoration: underline; outline: none; }
.city-explainer { padding: 82px 0 90px; background: #fff; border-top: 1px solid #e3e8f0; } .city-section-heading-narrow { max-width: 1020px; } .city-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--city-line); } .city-principles article { min-height: 225px; padding: 25px 28px 20px 0; border-right: 1px solid var(--city-line); } .city-principles article + article { padding-left: 28px; } .city-principles article:last-child { border-right: 0; } .principle-number { color: var(--city-coral); font-size: 10px; font-weight: 800; letter-spacing: 1px; } .city-principles h3 { margin: 42px 0 9px; color: var(--city-navy); font-size: 19px; letter-spacing: -.5px; } .city-principles p { max-width: 300px; margin: 0; color: var(--city-muted); font-size: 12px; line-height: 1.65; }
.city-partner-cta { padding: 82px 0; background: var(--city-navy); color: #fff; } .city-partner-cta .city-eyebrow { color: #91a9ff; } .city-partner-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 65px; align-items: center; } .city-partner-cta h2 { max-width: 620px; margin: 15px 0 14px; font-size: clamp(30px, 4vw, 50px); line-height: 1.05; letter-spacing: -2px; } .city-partner-cta-inner > div > p:last-child { max-width: 565px; margin: 0; color: #c1c9e0; font-size: 14px; line-height: 1.65; } .city-cta-card { position: relative; padding: 26px; border: 1px solid rgba(255,255,255,.23); border-radius: 12px; background: rgba(255,255,255,.08); } .city-cta-card strong { display: block; max-width: 230px; margin-bottom: 9px; font-size: 18px; line-height: 1.25; } .city-cta-card p { max-width: 250px; margin: 0 0 21px; color: #c1c9e0; font-size: 11px; line-height: 1.55; } .city-cta-card a { color: #fff; font-size: 11px; font-weight: 800; text-decoration: none; } .city-cta-card a:hover, .city-cta-card a:focus-visible { color: #aabaff; outline: none; } .city-cta-stamp { position: absolute; top: 20px; right: 20px; display: grid; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #b6c2ff; font-size: 8px; font-weight: 800; letter-spacing: .8px; line-height: 1.2; text-align: center; transform: rotate(8deg); }
@media (max-width: 1050px) { .city-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(390px, 1fr); gap: 25px; } .city-hero-copy h1 { font-size: clamp(40px, 5.1vw, 60px); } .city-hero-illustration { min-height: 360px; } .city-hero-lot-one { left: 30px; } .city-hero-house { left: 150px; } .city-hero-pin { left: 235px; } }
@media (max-width: 850px) { .city-shell { width: min(100% - 34px, 680px); } .city-hero-inner { display: block; min-height: auto; padding-top: 58px; } .city-hero-copy { max-width: 620px; } .city-hero-illustration { max-width: 620px; min-height: 350px; margin: 50px auto 0; } .city-workspace { grid-template-columns: 1fr; } .city-district-sidebar { order: 0; } .city-district-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-sidebar-footnote { display: none; } .city-stage { order: 1; } .city-hero-copy h1 { font-size: clamp(42px, 8vw, 60px); } }
  @media (max-width: 620px) { .city-shell { width: min(100% - 28px, 520px); } .city-hero-inner { padding-top: 45px; padding-bottom: 45px; } .city-hero-copy h1 { margin-top: 15px; font-size: 43px; letter-spacing: -2.5px; } .city-hero-lead { font-size: 15px; } .city-hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; } .city-hero-illustration { min-height: 280px; margin-top: 38px; } .city-hero-illustration::before { inset: 14px; background-size: 24px 24px; } .city-hero-lot { width: 86px; height: 68px; padding: 7px; } .city-hero-lot b { font-size: 9px; } .city-hero-lot-one { top: 38px; left: 22px; } .city-hero-lot-two { top: 60px; right: 21px; } .city-hero-lot-three { right: 25px; bottom: 35px; } .city-hero-house { bottom: 52px; left: 105px; width: 74px; height: 60px; } .city-hero-house::before { top: -27px; left: -9px; width: 58px; height: 58px; } .city-hero-house span { right: 11px; bottom: 0; left: 11px; height: 29px; } .city-hero-pin { top: 137px; left: 160px; padding: 6px 7px; font-size: 6px; } .city-preview-note-inner { align-items: flex-start; } .city-preview-note p { font-size: 11px; } .city-explorer { padding-top: 59px; padding-bottom: 60px; } .city-section-heading { display: block; margin-bottom: 25px; } .city-section-heading > p { margin-top: 17px; } .city-lens-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-toolbar-label { grid-column: 1 / -1; padding: 4px 8px; } .city-lens-toolbar button { padding: 0 8px; font-size: 11px; } .city-view-toolbar { align-items: stretch; flex-direction: column; } .city-market-picker select { flex: 1; } .city-view-switch { align-self: stretch; } .city-view-switch button { flex: 1; } .city-district-list { display: block; } .city-district-list button { min-height: 47px; } .city-map-view { min-height: 0; padding: 16px; } .city-map-view::before { margin: -16px -16px 16px; } .city-map-grid { display: block; min-height: 0; padding: 9px; background-size: 110px 110px; } .city-district-block { min-height: 99px; margin: 8px 0; } .city-map-legend { gap: 9px; line-height: 1.4; } .city-district-detail { padding: 20px; } .city-lot-selection, .city-partner-cards, .city-list-view { grid-template-columns: 1fr; } .city-lot { min-height: 85px; } .city-explainer { padding: 60px 0; } .city-principles { display: block; } .city-principles article, .city-principles article + article { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--city-line); } .city-principles article:last-child { border-bottom: 0; } .city-principles h3 { margin-top: 25px; } .city-partner-cta { padding: 60px 0; } .city-partner-cta-inner { display: block; } .city-cta-card { margin-top: 35px; } }
@media (prefers-reduced-motion: reduce) { .city-hero-illustration, .city-district-block { transform: none; transition: none; } }

/* Keep small map labels readable and keyboard focus visible at WCAG contrast. */
.partner-card-top { flex-wrap: wrap; }
.partner-label { max-width: 100%; color: #53627a; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.city-partner-review-note { font-size: 11px !important; }
.district-number,
.city-district-list button small,
.city-sidebar-footnote,
.city-map-kicker,
.city-map-compass,
.city-district-block small,
.city-map-legend,
.city-detail-stats,
.lot-label,
.city-lot small,
.partner-label,
.city-map-mode-note {
  color: #53627a;
}

.city-skip:focus,
.city-skip:focus-visible,
.city-button:focus-visible,
.city-text-link:focus-visible,
.city-hero a:focus-visible,
.city-partner-cta a:focus-visible,
.city-lens-toolbar button:focus-visible,
.city-view-switch button:focus-visible,
.city-district-list button:focus-visible,
.city-district-block:focus-visible,
.city-lot:focus-visible,
.city-market-picker select:focus-visible,
.city-list-card button:focus-visible,
.city-area-filter button:focus-visible {
  outline: 3px solid #1446b8;
  outline-offset: 3px;
}

.city-partner-cta a:focus-visible {
  outline-color: #fff;
}

.city-partner-review-note {
  display: block;
  margin: 10px 0 12px !important;
  color: #53627a !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

.city-directory-retry {
  min-height: 42px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid #1446b8;
  border-radius: 7px;
  background: #fff;
  color: #1446b8;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.city-directory-retry:focus-visible {
  outline: 3px solid #1446b8;
  outline-offset: 3px;
}

/* 2.5D city enhancement: lightweight depth and atmosphere over the accessible map. */
.city-map-mode-note { margin: 5px 0 0; color: #8491aa; font-size: 10px; line-height: 1.4; }
.city-map-grid-2p5d { position: relative; isolation: isolate; overflow: hidden; perspective: 900px; background-color: #d9e4f3; background-image: linear-gradient(34deg, transparent 47%, rgba(255,255,255,.78) 48%, rgba(255,255,255,.78) 52%, transparent 53%), linear-gradient(145deg, transparent 47%, rgba(255,255,255,.78) 48%, rgba(255,255,255,.78) 52%, transparent 53%), linear-gradient(180deg, rgba(255,255,255,.32), transparent 55%); }
.city-map-grid-2p5d::before { position: absolute; z-index: -1; right: -10%; bottom: 20%; left: -10%; height: 17%; border-top: 1px solid rgba(68, 94, 143, .14); border-bottom: 1px solid rgba(68, 94, 143, .12); background: rgba(255,255,255,.46); box-shadow: 0 -9px 0 rgba(255,255,255,.23), 0 9px 0 rgba(103,127,171,.08); content: ""; transform: rotate(-7deg); }
.city-map-grid-2p5d::after { position: absolute; z-index: -1; top: -24px; right: 8%; width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 0 0 16px rgba(255,255,255,.12), 0 0 0 34px rgba(255,255,255,.08); content: ""; }
.city-map-grid-2p5d .city-district-block { min-height: 0; align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; border-radius: 10px; background: #f6f8ff; box-shadow: 0 9px 0 rgba(38, 61, 114, .12), 0 14px 19px rgba(38, 61, 114, .11); transform-style: preserve-3d; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.city-map-grid-2p5d .city-district-block::before { position: absolute; z-index: 0; right: 3px; bottom: -7px; left: 3px; height: 14px; border-radius: 0 0 8px 8px; background: rgba(29, 49, 96, .13); content: ""; transform: skewX(-34deg); transform-origin: top; }
.city-map-grid-2p5d .city-district-block:hover, .city-map-grid-2p5d .city-district-block:focus-visible, .city-map-grid-2p5d .city-district-block.is-active { z-index: 2; background: #fff; outline: none; transform: translateY(-5px) rotateX(1deg); box-shadow: 0 11px 0 rgba(38, 61, 114, .14), 0 18px 22px rgba(12, 41, 171, .16); }
.city-map-grid-2p5d .city-scene { position: relative; display: block; width: 100%; flex: 0 0 103px; height: 103px; overflow: hidden; border-bottom: 1px solid rgba(58, 82, 132, .18); background: linear-gradient(155deg, #e9efff 0%, #cad8f4 68%, #b2c5e7 100%); transform-style: preserve-3d; }
.city-map-grid-2p5d .city-scene::before { position: absolute; right: -15%; bottom: -57%; left: -15%; height: 94%; border-top: 1px solid rgba(255,255,255,.7); background: repeating-linear-gradient(28deg, rgba(255,255,255,.55) 0 2px, transparent 2px 22px), linear-gradient(180deg, rgba(255,255,255,.56), rgba(124,153,199,.25)); content: ""; opacity: .9; transform: rotateX(61deg) rotateZ(-7deg); transform-origin: center bottom; }
.city-map-grid-2p5d .city-scene::after { position: absolute; top: 11px; right: 13px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 7px rgba(255,255,255,.12); content: ""; }
.city-scene-blue { background: linear-gradient(155deg, #ecf2ff 0%, #c3d4fa 68%, #aabfe9 100%) !important; }
.city-scene-coral { background: linear-gradient(155deg, #fff4ee 0%, #f4c8b8 68%, #e7a998 100%) !important; }
.city-scene-navy { background: linear-gradient(155deg, #e8edff 0%, #bbc8eb 68%, #9baed5 100%) !important; }
.city-scene-gold { background: linear-gradient(155deg, #fff8dc 0%, #f2d98f 68%, #ddbd6f 100%) !important; }
.city-scene-green { background: linear-gradient(155deg, #edfaf4 0%, #bbdfd2 68%, #97c6b5 100%) !important; }
.city-scene-slate { background: linear-gradient(155deg, #f0f3f8 0%, #d2dbe9 68%, #b7c6db 100%) !important; }
.city-map-grid-2p5d .city-block-copy { position: relative; z-index: 4; display: block; min-height: 56px; padding: 8px 10px 9px; background: rgba(255,255,255,.92); color: var(--city-blue); }
.city-map-grid-2p5d .city-block-copy > span { display: block; padding: 0; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.city-map-grid-2p5d .city-block-copy strong { display: block; margin-top: 3px; font-size: 13px; line-height: 1.03; letter-spacing: -.3px; }
.city-map-grid-2p5d .city-block-copy small { display: block; max-width: 100%; margin-top: 5px; overflow: hidden; color: #8190ab; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.city-map-grid-2p5d .district-fresh-start-quarter .city-block-copy { color: #b84232; }
.city-map-grid-2p5d .district-home-comfort-row .city-block-copy { color: #1d6b54; }
.city-map-grid-2p5d .district-student-commons .city-block-copy { color: #946719; }
.city-map-grid-2p5d .district-local-services-exchange .city-block-copy { color: #52617a; }
.city-building { position: absolute; z-index: 2; bottom: 23px; display: block; width: 39px; height: 53px; border: 1px solid rgba(24, 38, 64, .42); border-bottom-width: 2px; background: linear-gradient(90deg, rgba(255,255,255,.55) 0 17%, transparent 17% 82%, rgba(24,38,64,.12) 82%), repeating-linear-gradient(180deg, rgba(255,255,255,.78) 0 7px, rgba(116,141,184,.3) 7px 10px); box-shadow: 6px 4px 0 rgba(42, 66, 118, .16); transform: skewY(-3deg); }
.city-building::before { position: absolute; top: -15px; left: -3px; width: 42px; height: 16px; border: 1px solid rgba(24,38,64,.34); border-bottom: 0; background: rgba(255,255,255,.75); clip-path: polygon(7% 100%, 100% 100%, 82% 0, 0 0); content: ""; }
.city-building::after { position: absolute; right: 6px; bottom: 0; left: 6px; height: 20px; border: 1px solid rgba(24,38,64,.2); background: linear-gradient(90deg, rgba(255,255,255,.78) 0 29%, transparent 29% 71%, rgba(255,255,255,.78) 71%); content: ""; }
.city-building-primary { left: 25%; height: 52px; }
.city-building-secondary { right: 18%; width: 29px; height: 38px; opacity: .86; transform: scale(.9) skewY(-3deg); }
.city-building-secondary::before { width: 32px; }
.city-scene-coral .city-building { border-color: rgba(124, 60, 50, .42); background-color: #fff7f1; }
.city-scene-gold .city-building { border-color: rgba(122, 91, 29, .42); background-color: #fffbea; }
.city-scene-green .city-building { border-color: rgba(29, 98, 77, .42); background-color: #f2fcf8; }
.city-scene-slate .city-building { border-color: rgba(82, 97, 122, .42); background-color: #f8faff; }
.city-billboard { position: absolute; z-index: 3; bottom: 35px; left: 12%; display: grid; width: 27px; height: 21px; place-items: center; border: 1px solid var(--city-blue); border-radius: 2px; background: #fff; box-shadow: 2px 2px 0 rgba(12,41,171,.15); color: var(--city-blue); font-style: normal; transform: rotate(-4deg); }
.city-billboard::before { position: absolute; top: 19px; left: 12px; width: 1px; height: 17px; background: rgba(24,38,64,.6); content: ""; }
.city-billboard b { font: 800 8px var(--font-display); }
.city-tree { position: absolute; z-index: 3; bottom: 21px; display: block; width: 18px; height: 22px; }
.city-tree::before { position: absolute; top: 0; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #4a9277; box-shadow: -5px 5px 0 #5da285, 5px 5px 0 #398167; content: ""; }
.city-tree::after { position: absolute; bottom: 0; left: 8px; width: 3px; height: 10px; background: #806b55; content: ""; }
.city-tree-one { left: 9%; }
.city-tree-two { right: 8%; bottom: 18px; transform: scale(.74); transform-origin: bottom; }
.city-scene-gold .city-tree::before { background: #72975c; box-shadow: -5px 5px 0 #8daa68, 5px 5px 0 #5c8451; }
.city-car { position: absolute; z-index: 4; bottom: 13px; left: 47%; display: block; width: 30px; height: 10px; border-radius: 5px 7px 3px 3px; background: var(--city-coral); box-shadow: inset 0 -3px rgba(24,38,64,.15), 2px 2px 0 rgba(30,54,105,.15); animation: city-drive 9s ease-in-out infinite alternate; }
.city-car::before { position: absolute; top: -5px; left: 7px; width: 15px; height: 7px; border-radius: 8px 8px 0 0; background: inherit; content: ""; }
.city-car::after { position: absolute; bottom: -3px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #273756; box-shadow: 15px 0 #273756; content: ""; }
.city-scene-blue .city-car { background: var(--city-blue); }
.city-scene-green .city-car { background: #3a8d72; }
.city-scene-gold .city-car { background: #d59b2a; }
.city-scene-slate .city-car { background: #6f7e99; }
.city-person { position: absolute; z-index: 4; bottom: 15px; right: 32%; display: block; width: 5px; height: 14px; border-radius: 3px 3px 1px 1px; background: var(--city-navy); animation: city-walk 5s ease-in-out infinite alternate; }
.city-person::before { position: absolute; top: -5px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #d48f72; content: ""; }
.city-person::after { position: absolute; bottom: 0; left: -2px; width: 9px; height: 1px; background: var(--city-navy); content: ""; }
.city-map-legend .legend-life { border-radius: 50%; background: #4a9277; box-shadow: 4px 0 0 #d59b2a; }
@media (max-width: 620px) { .city-district-sidebar { display: none; } .city-map-legend { line-height: 1.55; } .city-partner-card .partner-card-top { flex-wrap: wrap; } .city-partner-card .partner-billboard { margin-left: 0; } }
@keyframes city-drive { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes city-walk { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@media (max-width: 620px) {
  .city-map-grid-2p5d .city-district-block { min-height: 0; margin: 8px 0; }
  .city-map-grid-2p5d .city-scene { height: 83px; }
  .city-map-grid-2p5d .city-block-copy { min-height: 52px; padding: 7px 9px 8px; }
  .city-map-grid-2p5d .city-block-copy strong { font-size: 12px; }
  .city-map-grid-2p5d .city-building { bottom: 20px; transform: scale(.88) skewY(-3deg); transform-origin: bottom; }
  .city-map-grid-2p5d .city-building-secondary { transform: scale(.77) skewY(-3deg); }
  .city-map-grid-2p5d .city-billboard { bottom: 30px; transform: scale(.9) rotate(-4deg); transform-origin: bottom left; }
  .city-map-grid-2p5d .city-tree { bottom: 18px; transform: scale(.82); transform-origin: bottom; }
  .city-map-grid-2p5d .city-tree-two { transform: scale(.64); }
}
@media (prefers-reduced-motion: reduce) {
  .city-map-grid-2p5d .city-district-block { transform: none; transition: none; }
  .city-map-grid-2p5d .city-car, .city-map-grid-2p5d .city-person { animation: none; }
}
.partner-sponsored-badge { flex: 0 0 auto; padding: 5px 7px; border-radius: 4px; background: #b63f30; color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .25px; line-height: 1; }

/* Advertiser-selected palette is deliberately limited to approved, readable tones. */
.city-partner-tone-blue { --partner-accent: #2447c0; --partner-surface: #f8faff; --partner-line: #d8e0ef; --partner-tint: #e6ecfb; --partner-chip: #e9efff; }
.city-partner-tone-coral { --partner-accent: #a83d2d; --partner-surface: #fff8f6; --partner-line: #efd1ca; --partner-tint: #ffe9e3; --partner-chip: #ffe9e3; }
.city-partner-tone-green { --partner-accent: #1f6e57; --partner-surface: #f5fbf8; --partner-line: #d0e7df; --partner-tint: #e2f4ed; --partner-chip: #e2f4ed; }
.city-partner-tone-gold { --partner-accent: #765507; --partner-surface: #fffbef; --partner-line: #eadba9; --partner-tint: #fff2c7; --partner-chip: #fff2c7; }
.city-partner-tone-slate { --partner-accent: #52617a; --partner-surface: #f7f8fb; --partner-line: #dbe1e9; --partner-tint: #e9edf3; --partner-chip: #e9edf3; }
.city-partner-card[class*="city-partner-tone-"] { border-color: var(--partner-line); background: var(--partner-surface); }
.city-partner-card[class*="city-partner-tone-"] .partner-icon { background: var(--partner-accent); }
.city-partner-card[class*="city-partner-tone-"] .partner-billboard { border-color: var(--partner-line); color: var(--partner-accent); }
.city-partner-card[class*="city-partner-tone-"] .partner-card-meta span { background: var(--partner-chip); color: var(--partner-accent); }
.city-partner-card[class*="city-partner-tone-"] .partner-card-action { color: var(--partner-accent); }
.city-partner-hero-card[class*="city-partner-tone-"] { border-color: var(--partner-line); background: linear-gradient(145deg, var(--partner-surface), var(--partner-tint)); }
.city-partner-hero-card[class*="city-partner-tone-"] .city-partner-building b { border-color: var(--partner-accent); }
.city-partner-hero-card[class*="city-partner-tone-"] .city-partner-building-sign { color: var(--partner-accent); }
.city-billboard-tone-blue { border-color: #2447c0; color: #2447c0; }
.city-billboard-tone-coral { border-color: #a83d2d; color: #a83d2d; }
.city-billboard-tone-green { border-color: #1f6e57; color: #1f6e57; }
.city-billboard-tone-gold { border-color: #765507; color: #765507; }
.city-billboard-tone-slate { border-color: #52617a; color: #52617a; }
.city-partner-card .city-partner-headline { margin: 10px 0 5px; color: var(--city-navy); font-size: 12px; line-height: 1.4; }
.city-partner-hero-copy .city-partner-headline { max-width: 650px; margin: 17px 0 0; color: var(--city-navy); font-size: clamp(18px, 2.4vw, 23px); font-weight: 800; line-height: 1.3; }
.city-area-filter { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto; gap: 10px; align-items: end; margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--city-line); border-radius: 10px; background: #f8faff; }
.city-area-filter label { display: grid; gap: 6px; color: #52617a; font-size: 11px; font-weight: 800; }
.city-area-filter label span { margin-left: 5px; color: #8995a8; font-size: 10px; font-weight: 500; }
.city-area-filter input { width: 100%; min-height: 38px; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ccd6e5; border-radius: 7px; background: #fff; color: var(--city-navy); font: 600 12px var(--font-body); }
.city-area-filter input:focus-visible { outline: 3px solid #dfe5ff; border-color: var(--city-blue); }
.city-area-filter button { min-height: 38px; padding: 0 12px; border: 1px solid #cad5ef; border-radius: 7px; background: #fff; color: var(--city-blue); font: 800 10px var(--font-body); cursor: pointer; }
.city-area-filter .city-area-apply { border-color: var(--city-blue); background: var(--city-blue); color: #fff; }
.city-area-filter button:focus-visible { outline: 3px solid var(--city-coral); outline-offset: 2px; }
.city-area-filter p { grid-column: 1 / -1; margin: -2px 0 0; color: #738096; font-size: 10px; line-height: 1.45; }
.city-area-filter [hidden] { display: none; }
.city-rental-context { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #ead9b2; border-radius: 9px; background: #fffaf0; }
.city-rental-context[hidden] { display: none; }
.city-rental-context h3 { margin: 0 0 4px; color: var(--city-navy); font-size: 12px; }
.city-rental-context p { margin: 0; color: #65728a; font-size: 10px; line-height: 1.5; }
.city-rental-context a { flex: 0 0 auto; color: var(--city-blue); font-size: 10px; font-weight: 800; text-decoration: none; }
.city-rental-context a:hover, .city-rental-context a:focus-visible { text-decoration: underline; outline: 2px solid #dfe5ff; outline-offset: 3px; }
html.city-rental-context-mode .city-district-sidebar,
html.city-rental-context-mode .city-view-switch,
html.city-rental-context-mode #city-map-view,
html.city-rental-context-mode #city-district-detail { display: none !important; }
html.city-rental-context-mode #city-rental-context[hidden] { display: flex !important; }
html.city-rental-context-mode #city-list-view[hidden] { display: grid !important; }
html.city-rental-context-mode #city-list-view > .city-directory-message { grid-column: 1 / -1; }
.city-directory-message { padding: 24px; border: 1px solid var(--city-line); border-radius: 10px; background: #fff; color: var(--city-muted); }
.city-list-view > .city-directory-message { grid-column: 1 / -1; }
.city-directory-message h3 { margin: 0 0 8px; color: var(--city-navy); font-size: 18px; }
.city-directory-message p { margin: 0; font-size: 12px; line-height: 1.6; }
.city-directory-message a { color: var(--city-blue); font-weight: 750; text-underline-offset: 3px; }
@media (max-width: 620px) { .city-area-filter { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } .city-area-filter label, .city-area-filter p { grid-column: 1 / -1; } .city-area-filter button { min-width: 0; } .city-rental-context { align-items: flex-start; flex-direction: column; gap: 8px; } }
.city-body [hidden] { display: none !important; }
.city-need-picker{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:13px;font-weight:700;color:var(--city-navy)}
.city-need-picker select{max-width:100%;min-width:220px;padding:12px;border:1px solid var(--city-line);border-radius:9px;background:#fff;font:inherit;color:inherit}
.city-demo-tours{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:18px;margin:18px 0;background:#fff3de;border:1px solid #ead8b5;border-radius:12px;font-size:13px}
.city-demo-tours[hidden]{display:none}.city-demo-tours button,.city-map-controls button,.city-demo-dialog button{font:inherit;padding:9px 12px;background:#fff;border:1px solid #c7d0e6;border-radius:8px;color:#173782;cursor:pointer}
.city-map-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:0 18px 16px;font-size:13px}.city-map-controls button{min-width:38px}.city-map-controls button:disabled{opacity:.4;cursor:default}
#city-map-viewport{overflow:auto;max-height:560px;overscroll-behavior:contain;border-radius:12px;margin:0 12px 16px;scrollbar-width:thin}
#city-map-grid{box-sizing:border-box;margin:0;max-width:none;transition:width .15s ease,min-height .15s ease}
.city-demo-dialog{box-sizing:border-box;max-width:540px;width:calc(100% - 32px);padding:30px;border:1px solid #c7d0e6;border-radius:18px;color:#182c57;font:15px/1.6 var(--font-body);max-height:calc(100dvh - 32px);overflow:auto}.city-demo-dialog::backdrop{background:rgb(10 23 57 / .45)}
.city-demo-dialog h2{font:700 28px/1.2 var(--font-display)}
.city-body :is(.city-district-block,.city-map-controls button,.city-demo-tours button,#city-map-viewport,.city-partner-card,.city-need-picker select):focus-visible{outline:3px solid #3456ce;outline-offset:3px}
@media(max-width:620px){.city-need-picker{align-items:stretch;flex-direction:column}.city-need-picker select{width:100%;min-width:0}#city-map-grid.city-map-grid-2p5d{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:16px;padding:18px}#city-map-grid .city-district-block{grid-column:1 / -1;grid-row:auto;width:100%;min-width:0;margin:0;min-height:130px}#city-map-grid .city-block-copy small{font-size:11px}.city-map-controls{padding:0 12px 14px}#city-map-viewport{max-height:480px}}
@media(prefers-reduced-motion:reduce){#city-map-grid{transition:none}}

.city-commercial-disclosure{font-size:13px;line-height:1.6;max-width:85ch}.city-commercial-disclosure a{text-decoration:underline;text-underline-offset:3px}