/* Public A-Plan interface: type, touch targets and the supplied slate palette. */
:root {
  color: #06141b;
  background: #f3f5f4;
  --blue: #253745;
  --deep: #11212d;
  --light: #eef1f1;
  --line: #b8c1c3;
  --muted: #4a5c6a;
  --green: #27694f;
  --red: #a73d46;
}
body { color: #06141b; background: #f3f5f4; font-size: 16px; line-height: 1.5; }
button, input, select, textarea { line-height: 1.35; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #4a5c6a; outline-offset: 3px; }
h1 { font-size: clamp(25px, 2vw, 34px); line-height: 1.16; }
h2 { font-size: 24px; line-height: 1.25; }
h3, .card-title { font-size: 18px; line-height: 1.3; }
.small, .help, .note, .empty { font-size: 14px; line-height: 1.5; }
.help, .muted, .field__label, .summary-row { color: #4a5c6a; }
.container { width: min(100% - 40px, 1560px); }
.topbar, .footer { background: #fff; border-color: #ccd0cf; }
.topbar__inner { min-height: 78px; }
.brand__mark { background: #11212d; box-shadow: none; }
.brand__name { color: #06141b; font-size: 23px; }
.brand__tag { color: #4a5c6a; font-size: 12px; }
.topbar .brand { min-width: 185px; }
.site-menu > summary, .icon-button { width: 44px; height: 44px; color: #11212d; background: #fff; border-color: #9ba8ab; }
.site-menu__panel button { min-height: 44px; font-size: 14px; }
.site-menu__panel button:hover { color: #06141b; background: #eef1f1; }
.topbar .step { min-height: 48px; color: #4a5c6a; }
.topbar .step__num { width: 34px; height: 34px; border-color: #9ba8ab; }
.topbar .step__label { font-size: 12px; }
.topbar .step__sub { font-size: 11px; color: #4a5c6a; }
.step.is-active, .step.is-done { color: #11212d; }
.step.is-active .step__num { color: #fff; background: #11212d; border-color: #11212d; box-shadow: none; }
.step.is-done .step__num { background: #ccd0cf; border-color: #9ba8ab; }
.step.is-skipped .step__num, .step.is-skipped.is-active .step__num { background: #fff1f1; border-color: #d7a3a6; color: #962f3b; }
.pill, .info-pill { color: #253745; background: #eef1f1; border-color: #ccd0cf; font-size: 13px; }
.page-head p { color: #4a5c6a; font-size: 16px; }
.page-head--project { align-items: center; }
.page-head--project h1 { margin: 0; }
.location-title { margin: 0 0 14px; }
.location-intro { margin: -6px 0 16px; color: #4a5c6a; font-size: 16px; line-height: 1.45; }
.main { padding-block: 20px 28px; }
.panel { border-color: #ccd0cf; border-radius: 18px; box-shadow: 0 7px 20px #06141b0a; }
.field__label { font-size: 14px; margin-bottom: 7px; }
.control { min-height: 48px; padding: 11px 13px; border-color: #849398; background: #fff; color: #06141b; font-size: 16px; }
.control::placeholder { color: #4a5c6a; }
.segmented { background: #eef1f1; }
.segmented button { min-height: 44px; padding: 7px 10px; color: #253745; font-size: 14px; }
.segmented button.is-active { color: #06141b; background: #fff; box-shadow: 0 2px 8px #06141b20; }
.mini-btn { width: 44px; height: 44px; flex: 0 0 44px; color: #11212d; border-color: #9ba8ab; }
.range-line input[type=number] { min-height: 44px; min-width: 0; flex: 1; border: 1px solid #849398; border-radius: 10px; text-align: center; font-size: 16px; }
.range-value { font-size: 21px; }
.btn { min-height: 48px; padding: 11px 18px; color: #11212d; border-color: #9ba8ab; font-size: 15px; }
.btn--primary { background: #11212d; border-color: #11212d; color: #fff; box-shadow: 0 6px 16px #11212d24; }
.btn--primary:hover { background: #253745; border-color: #253745; }
.btn--light { color: #11212d; background: #eef1f1; border-color: #9ba8ab; }
.btn--small { min-height: 44px; font-size: 14px; }
.btn:disabled { opacity: .55; }
.footer__inner { min-height: 74px; }
.footer-progress { color: #4a5c6a; font-size: 13px; }
.footer-progress i { background: #ccd0cf; }
.footer-progress i::before { background: #11212d; }
.chip, .package-nav button, .admin-nav button { min-height: 44px; font-size: 14px; }
.package-nav { display: grid; align-content: start; gap: 5px; }
.package-picker { display: block; padding: 5px 3px 15px; margin-bottom: 7px; border-bottom: 1px solid #ccd0cf; }
.package-picker .field__label { font-weight: 800; color: #11212d; }
.package-picker .control { min-height: 48px; padding-inline: 9px; font-size: 14px; }
.package-nav button { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: #4a5c6a; }
.package-nav button.has-selection { color: #11212d; }
.package-nav button.has-selection > span:last-child { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #ccd0cf; font-size: 13px; }
.package-nav button.is-active { background: #253745; color: #fff; }
.package-nav button.is-active > span:last-child { color: #11212d; }
.chip { color: #253745; background: #fff; border-color: #9ba8ab; }
.chip.is-active, .package-nav button.is-active { color: #06141b; background: #ccd0cf; border-color: #4a5c6a; }
.filters { padding: 20px; gap: 14px; }
.filters label { color: #253745; font-size: 14px; }
.note { color: #253745; background: #eef1f1; border-color: #ccd0cf; }
.project-panel { padding: 16px; }
.project-instruction { margin: -4px 0 12px; }
.project-panel .admin-toolbar { flex-wrap: wrap; }
.project-card { border-color: #ccd0cf; }
.project-card.is-selected { border-color: #253745; box-shadow: 0 0 0 2px #25374536; }
.project-card .aplan-image, .stage-grid--project .project-card .aplan-image { height: clamp(195px, 23vh, 255px); }
.project-card__content, .stage-grid--project .project-card__content { padding: 13px 15px; }
.project-card__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 11px; }
.project-card__line strong { color: #06141b; font-size: 16px; line-height: 1.25; }
.project-card__meta, .stage-grid--project .project-card__meta { color: #4a5c6a; font-size: 13px; margin: 0; }
.project-card__price, .stage-grid--project .project-card__price { margin-left: auto; color: #11212d; font-size: 15px; font-weight: 800; white-space: nowrap; }
.selected-project__identity h2 { font-size: 19px; }
.selected-project__details .stat span { color: #4a5c6a; font-size: 13px; }
.selected-project__details .stat strong { color: #06141b; font-size: 15px; }
.package-level, .option-card, .program { min-height: 56px; border-color: #9ba8ab; }
.package-level small, .option-card small { color: #4a5c6a; font-size: 13px; }
.package-level strong, .option-card strong, .program strong { color: #06141b; font-size: 15px; }
.package-level b, .option-card b, .program b { color: #253745; font-size: 14px; }
.package-level.is-selected, .option-card.is-selected, .program.is-selected { border-color: #253745; background: #eef1f1; }
.option-card__recommended { display: inline-block; margin-top: 8px; padding: 3px 7px; border-radius: 7px; background: #ccd0cf; color: #11212d; font-size: 12px; font-weight: 750; }
.package-work .aplan-image { height: clamp(265px, 34vh, 430px); }
.package-work .aplan-image > img { height: 100%; }
.summary-hero, .cost-hero { color: #fff; background: linear-gradient(135deg, #11212d, #253745); }
.summary-hero span, .summary-hero small, .cost-hero small { color: #e6ebea; font-size: 13px; }
.summary-row { font-size: 14px; border-color: #ccd0cf; }
.summary-row b { color: #06141b; font-size: 14px; }
.price-main { color: #11212d; }
.payment-box { color: #11212d; background: #eef1f1; }
.zero-down { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid #9ba8ab; border-radius: 12px; color: #11212d; font-size: 14px; font-weight: 700; cursor: pointer; }
.zero-down input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: #11212d; }
.mortgage-help { display: block; margin: 9px 0 14px; }
.cost-row { font-size: 14px; border-color: #ccd0cf; }
.cost-row small { color: #4a5c6a; font-size: 13px; }
.lead-form { gap: 12px; }
.lead-consents { color: #253745; font-size: 14px; line-height: 1.5; }
.lead-consents label { padding: 6px 0; }
.lead-consents input, .select-recipient input { width: 20px; height: 20px; vertical-align: middle; accent-color: #11212d; }
.select-recipient { min-height: 48px; color: #11212d; background: #eef1f1; border-color: #9ba8ab; font-size: 14px; }
.developer__badge { color: #11212d; background: #ccd0cf; font-size: 12px; }
.developer ul { color: #4a5c6a; font-size: 14px; }
.skipped-banner, .skipped-panel__step { font-size: 14px; }
.skipped-banner button { min-height: 36px; border: 0; background: transparent; color: #8d3038; font-weight: 750; text-decoration: underline; }
.map-controls button { width: 44px; height: 44px; color: #11212d; border-color: #9ba8ab; }
.plot-area { padding: 13px; border: 1px solid #ccd0cf; border-radius: 13px; background: #f8f9f9; }
.stage-grid--location { height: auto; min-height: calc(100dvh - 220px); grid-template-rows: auto minmax(430px, 1fr); }
.stage-grid--location > .panel.panel-pad:first-child { overflow: visible; }
.stage-grid--location > .panel-pad .plot-ownership { grid-column: 1 / -1; }
.plot-ownership .field__label { font-size: 14px !important; }
.ownership-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid #9ba8ab; border-radius: 12px; background: #fff; color: #11212d; font-size: 15px; font-weight: 750; text-align: left; }
.ownership-toggle.is-active { border-color: #253745; background: #eef1f1; }
.ownership-toggle__mark { display: grid; place-items: center; width: 23px; height: 23px; flex: none; border: 2px solid #4a5c6a; border-radius: 6px; color: #fff; font-size: 14px; }
.ownership-toggle.is-active .ownership-toggle__mark { border-color: #11212d; background: #11212d; }
.plot-ownership .help { display: block; margin: 9px 0 0; }
.plot-area__value { color: #11212d; font-size: 19px; font-weight: 800; margin: 4px 0 2px; }
.plot-area input[type=range] { display: block; width: 100%; height: 44px; margin: 0; accent-color: #11212d; cursor: pointer; }
.plot-area input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
.plot-area__scale { display: flex; justify-content: space-between; color: #4a5c6a; font-size: 13px; }
.stage-grid--location > .panel-pad .plot-area { grid-column: 1 / -1; }
.map-meta { color: #253745; font-size: 12px; }
.map-place { cursor: pointer; }
.map .map-territory, .map .map-boundary, .map .map-road { pointer-events: none; }
.map .zone-shape { fill: #4a5c6a38; stroke: #fff; }
.map .zone-shape:hover { fill: #25374566; }
.map .zone-shape.is-selected { fill: #2537458c; stroke: #11212d; }
.map .map-place circle { fill: #fff; stroke: #11212d; }
.map .map-place text, .map .map-label { fill: #11212d; }
.map-selection-pin { fill: #11212d; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; r: var(--map-marker-radius, .55); }
@media (max-width: 1200px) {
  .stage-grid--location { grid-template-columns: 250px minmax(0, 1fr) 250px; }
  .stage-grid--project { grid-template-columns: 235px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .stage-grid--location { grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: minmax(490px, 1fr) auto; height: auto; }
  .stage-grid--location > .panel-pad { grid-column: 1; grid-row: 1; }
  .stage-grid--location > .map-panel { grid-column: 2; grid-row: 1; min-height: 490px; }
  .stage-grid--location > .location-summary { grid-column: 1/-1; grid-row: 2; }
  .stage-grid--project { height: auto; min-height: 0; }
  .stage-grid--project > .project-panel { min-height: 620px; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 24px); }
  .topbar__inner { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px 10px; padding-block: 9px 5px; }
  .site-menu { grid-column: 1; grid-row: 1; }
  .topbar .brand { grid-column: 2; grid-row: 1; min-width: 0; }
  .topbar .brand__mark { width: 38px; height: 38px; }
  .topbar .brand__name { font-size: 20px; }
  .topbar .stepbar { grid-column: 1/-1; grid-row: 2; width: 100%; gap: 3px; }
  .topbar .step { justify-content: center; min-height: 48px; padding: 3px; }
  .topbar .step__label, .topbar .step__sub { display: none; }
  .topbar .step__num { width: 34px; height: 34px; font-size: 13px; }
  .topbar .top-actions { grid-column: 3; grid-row: 1; margin: 0; }
  .topbar .top-actions .icon-button { width: 44px; height: 44px; }
  .topbar .top-actions .pill { display: none; }
  .main { padding-top: 16px; }
  .page-head--project .info-pill { display: none; }
  .stage-grid--location { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .stage-grid--location > .panel-pad { order: 0; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; height: auto; overflow: visible; }
  .stage-grid--location > .panel-pad .field { display: block; margin-bottom: 19px; }
  .stage-grid--location > .panel-pad .field__label { font-size: 14px; margin-bottom: 7px; }
  .stage-grid--location > .panel-pad .control { min-height: 48px; font-size: 16px; }
  .stage-grid--location > .panel-pad .segmented button { min-height: 48px; font-size: 14px; }
  .stage-grid--location > .map-panel { order: 1; width: 100%; height: min(65vh, 520px); min-height: 390px; overflow: hidden; }
  .stage-grid--location > .location-summary { order: 2; width: 100%; height: auto; overflow: visible; }
  .stage-grid--project { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .stage-grid--project > .filters { order: 0; overflow: visible; }
  .stage-grid--project > .selected-project { order: 1; }
  .stage-grid--project > .project-panel { order: 2; min-height: 0; overflow: visible; }
  .stage-grid--project .project-grid { grid-template-columns: 1fr; overflow: visible; }
  .stage-grid--project .project-card .aplan-image { height: clamp(205px, 45vw, 300px); }
  .project-card__line { gap: 6px 10px; }
  .stage-grid--package { display: flex; flex-direction: column; }
  .stage-grid--package > .package-nav { order: 0; }
  .stage-grid--package > .package-content { order: 1; }
  .stage-grid--package > .summary { order: 2; }
  .package-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .package-nav .package-picker { grid-column: 1 / -1; }
  .package-nav button { min-width: 0; white-space: normal; }
  .package-work { grid-template-columns: 1fr; }
  .stage-grid--cost, .stage-grid--search { grid-template-columns: 1fr; }
  .results-grid, .result-bottom, .lead-form { grid-template-columns: 1fr; }
  .lead-submit { display: block; }
  .lead-submit .btn { width: 100%; margin-top: 14px; white-space: normal; }
  .footer__inner { min-height: 72px; padding-block: 10px; }
  .footer-progress { display: none; }
  .footer-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); width: 100%; }
  .footer-actions .btn { width: 100%; white-space: normal; }
}
@media (max-width: 420px) {
  .stage-grid--project .project-card .aplan-image { height: 205px; }
  .selected-project { display: block; }
  .stage-grid--project > .selected-project { display: block; }
  .selected-project__identity, .selected-project__plan, .selected-project__details { margin-bottom: 14px; }
  .selected-project__details .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-grid--location > .map-panel { height: 410px; }
  .stage-grid--location > .location-summary .summary-row b { text-align: right; }
  .package-levels, .program-row, .payment-stats, .two-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .search-orbit, .search-orbit__center, .spinner { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print {
  body { color: #000; background: #fff; }
  .stage-grid--project, .stage-grid--location { height: auto; }
}

/* The project, location and estimate screens share a steadier, more vivid slate-blue scale. */
:root { --blue: #176b88; --deep: #102b3b; --line: #a9bdc8; }
body { background: #eef4f7; }
.brand__mark, .btn--primary, .step.is-active .step__num { background: #176b88; border-color: #176b88; }
.btn--primary:hover { background: #105a75; border-color: #105a75; }
.step.is-done .step__num { color: #fff; background: #1782b4; border-color: #1782b4; }
.step.is-just-completed .step__num { animation: completed-check .65s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes completed-check { 0% { transform: scale(.4) rotate(-35deg); opacity: .2; } 65% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.summary-hero, .cost-hero { background: linear-gradient(135deg,#103950,#1780ac); }
.chip.is-active, .program.is-selected, .option-card.is-selected { background: #dceff7; border-color: #2785a9; }
.map .map-lake { fill: #9ecfe6; }.map .map-river { stroke: #85c8e5; }
.map .zone-shape.is-selected { fill: #1a799b85; stroke: #176b88; }
.map .map-place circle { stroke: #176b88; }
.map-street { fill: none; stroke: #f6bd7a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: visibleStroke; }
.map-street--primary, .map-street--secondary { stroke: #e99b50; stroke-width: 2.5; }
.map-street--tertiary { stroke: #e8ae72; stroke-width: 2; }
.map-street-label { fill: #875128; font-size: var(--map-label-size, .5px); paint-order: stroke; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-settlement { cursor: pointer; }.map-settlement circle { fill: #fff; stroke: #176b88; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.map .map-settlement.is-priced circle, .map .map-place.is-priced circle { fill: #167db0; stroke: #0f4c6e; }
.map-price-legend { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0; }
.map-price-legend span { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #167db0; border: 1px solid #0f4c6e; }
.map-settlement text { fill: #17485c; font-size: var(--map-label-size, .5px); paint-order: stroke; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map[data-zoom="district"] .map-urban { display: none; }
.map-builtup-area { fill: #d8d9d188; stroke: #bbc3ba; stroke-width: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-detail-water { fill: none; stroke: #80c5e6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-detail-water--river { stroke: #60b3dc; stroke-width: 2.2; }
.map-water-label { fill: #3a91bb; font-size: var(--map-label-size, .5px); paint-order: stroke; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-detail-road { fill: none; stroke: #e2c18f; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-detail-road--motorway, .map-detail-road--trunk { stroke: #db936a; stroke-width: 2.7; }
.map-detail-road--primary, .map-detail-road--secondary { stroke: #e3a970; stroke-width: 2.1; }
.map-detail-road--tertiary, .map-detail-road--unclassified { stroke: #d9bc94; stroke-width: 1.5; }
.map-detail-road--residential, .map-detail-road--living_street { stroke: #eee9dd; stroke-width: 1.1; }
.stage-grid--location .map .zone-shape, .stage-grid--location .map .zone-shape.is-selected { fill: transparent; stroke: #6a98b2; stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: visibleFill; }
.stage-grid--location .map .zone-shape.is-selected { stroke: #167db0; stroke-width: 1.8; }
.map-selection-pin { pointer-events: none; }
.map-selection-pin path { fill: #167db0; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-selection-pin circle { fill: #fff; stroke: #0f4c6e; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.stage-grid--location { height: calc(100dvh - 235px); min-height: 540px; grid-template-rows: minmax(0,1fr); }
.stage-grid--location > .panel-pad, .stage-grid--location > .location-summary { min-height: 0; overflow-y: auto; }
.stage-grid--location > .map-panel { min-height: 0; height: 100%; }
.stage-grid--location .location-search { margin-bottom: 8px; }
.location-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; }
.location-picker > summary::-webkit-details-marker { display: none; }
.location-picker > summary::after { content: '⌄'; font-size: 20px; line-height: 1; color: #176b88; }
.location-picker[open] > summary { border-color: #2785a9; background: #e8f5fa; }
.location-picker__menu { padding: 10px; margin-top: 6px; background: #fff; border: 1px solid #a9bdc8; border-radius: 12px; box-shadow: 0 8px 22px #1b5d7826; }
.location-picker__results { display: grid; max-height: 275px; overflow-y: auto; overscroll-behavior: contain; }
.location-picker__item { display: block; width: 100%; padding: 7px 9px; border: 0; border-bottom: 1px solid #edf2f4; background: #fff; color: #173f51; text-align: left; }
.location-picker__item:hover, .location-picker__item.is-selected { background: #e5f3f9; }
.location-picker__item b, .location-picker__item small { display: block; }
.location-picker__item small { color: #627b88; font-size: 11px; }
.location-picker__empty { padding: 12px; color: #627b88; font-size: 13px; }
.stage-grid--location > .location-summary .summary-row span { flex: 0 0 42%; }
.stage-grid--location > .location-summary .summary-row b { flex: 1; }
.map[data-zoom="district"] .map-place__price { display: none; }
.map .map-territory { fill: #f8f8f2; stroke: #647c86; stroke-width: 2; vector-effect: non-scaling-stroke; }
.stage-grid--location .map-panel { background: #d9e0e4; }

.stage-grid--project { display: grid; grid-template-columns: minmax(0,1fr) 300px; grid-template-rows: auto minmax(0,1fr); height: calc(100dvh - 200px); min-height: 650px; }
.stage-grid--project > .filters { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; overflow: visible; padding: 12px 18px; }
.stage-grid--project > .filters .card-title { margin: 0 10px 0 0; }
.filters .filter-group { display: flex; align-items: center; gap: 8px; }
.filters .filter-group > label { white-space: nowrap; }
.filters .filter-area { flex: 1; min-width: 220px; display: block; }
.filter-area__range { position: relative; height: 26px; width: 100%; }
.filter-area__track { position: absolute; left: 0; right: 0; top: 11px; height: 5px; border-radius: 9px; background: linear-gradient(to right, #cfdee5 0 var(--range-from), #167db0 var(--range-from) var(--range-to), #cfdee5 var(--range-to) 100%); }
.filter-area__range input { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; cursor: pointer; }
.filter-area__range input[data-filter-number="minArea"] { z-index: 2; }
.filter-area__range input[data-filter-number="maxArea"] { z-index: 3; }
.filter-area__range input::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.filter-area__range input::-moz-range-track { height: 5px; background: transparent; }
.filter-area__range input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6px; border: 2px solid #fff; border-radius: 50%; background: #167db0; box-shadow: 0 0 0 1px #0f4c6e; -webkit-appearance: none; pointer-events: auto; }
.filter-area__range input::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #167db0; box-shadow: 0 0 0 1px #0f4c6e; pointer-events: auto; }
.filter-area__range input:focus-visible { outline: 2px solid #167db0; outline-offset: 4px; }
.filter-area__limits { display: flex; justify-content: space-between; font-size: 11px; color: #617d8b; }
.stage-grid--project > .project-panel { grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; }
.stage-grid--project > .selected-project { grid-column: 2; grid-row: 2; display: block; padding: 17px; min-height: 0; overflow-y: auto; }
.selected-project__identity, .selected-project__plan, .selected-project__details { margin-bottom: 14px; }
.stage-grid--project .selected-project .aplan-image:not(.aplan-image--plan) { height: 150px; }
.stage-grid--project .selected-project .aplan-image--plan, .stage-grid--project .selected-project .floorplan { height: 185px; }
.selected-project__details { grid-column: auto; }
.selected-project__details .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.selected-project__plan .help { display: block; font-size: 11px; }
.project-card { position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #164f6840; border-color: #258bb3; }
.project-card__media { display: block; position: relative; height: clamp(195px,23vh,255px); overflow: hidden; }
.project-card__image { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity .2s ease, transform .25s ease; }
.project-card__image--1 { opacity: 1; }
.project-card__image--3 { object-fit: contain; background: #eef4f7; }
.project-card:has(.project-card__zone--2:hover) .project-card__image--1, .project-card:has(.project-card__zone--3:hover) .project-card__image--1 { opacity: 0; }
.project-card:has(.project-card__zone--2:hover) .project-card__image--2, .project-card:has(.project-card__zone--3:hover) .project-card__image--3 { opacity: 1; }
.project-card__zones { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); }
.project-card__zone { border-bottom: 3px solid transparent; }
.project-card__zone:hover { border-bottom-color: #2c9ed0; }
.project-card__hint { position: absolute; z-index: 1; left: 9px; bottom: 8px; padding: 3px 7px; background: #102b3bc9; color: #fff; border-radius: 6px; font-size: 11px; opacity: 0; transition: opacity .18s; }
.project-card:hover .project-card__hint { opacity: 1; }
.plan-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.plan-preview:focus-visible { outline: 3px solid #1782b4; outline-offset: 3px; }
.plan-popover-layer { position: fixed; z-index: 100; inset: 0; background: transparent; cursor: zoom-out; }
.plan-popover { position: fixed; overflow: hidden; border: 1px solid #99b5c5; border-radius: 10px; background: #eef5fc; box-shadow: 0 6px 22px #163d5740; transition: left .26s ease, top .26s ease, width .26s ease, height .26s ease, box-shadow .26s ease; }
.plan-popover-layer.is-open .plan-popover { box-shadow: 0 14px 38px #163d5752; }
.plan-popover .aplan-image--plan { display: block; width: 100%; height: 100%; margin: 0; }
.plan-popover .aplan-image--plan img { width: 100%; height: 100%; object-fit: contain; }

.stage-grid--package { grid-template-columns: 305px minmax(0,1fr) 390px; }
.package-work { display: block; }
.package-work > div { width: 100%; text-align: left; }
.stage-grid--package > .summary .aplan-image { width: 100%; height: 205px; flex: none; }
.stage-grid--package > .summary .aplan-image img { width: 100%; height: 100%; object-fit: cover; }
.stage-grid--package > .summary { gap: 8px; padding: 18px; }
.stage-grid--package > .summary .summary-row { padding: 6px 0; line-height: 1.2; }
.stage-grid--package > .summary .note { margin-top: 5px; }
.cost-row:has(.bar span[style="width:0%"]) .bar { opacity: .25; }

@media (max-width: 980px) {
  .stage-grid--location { height: 660px; min-height: 0; }
  .stage-grid--project { grid-template-columns: minmax(0,1fr) 260px; min-height: 650px; }
  .stage-grid--package { display: flex; flex-direction: column; }
}
@media (min-width: 981px) and (max-width: 1200px) { .stage-grid--package { grid-template-columns: 260px minmax(0,1fr) 330px; } }
@media (max-width: 760px) {
  .stage-grid--location { height: auto; }
  .stage-grid--location > .map-panel { height: min(65vh,520px); min-height: 390px; }
  .stage-grid--project { display: flex; height: auto; min-height: 0; flex-direction: column; }
  .stage-grid--project > .filters { order: 0; display: flex; flex-direction: column; align-items: stretch; }
  .stage-grid--project > .project-panel { order: 1; overflow: visible; }
  .stage-grid--project > .selected-project { order: 2; overflow: visible; }
  .project-card__media { height: clamp(205px,45vw,300px); }
  .plan-popover { max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) { .step.is-just-completed .step__num { animation: none; } }

/* One response pattern for controls, without changing their layout size. */
:where(button:not(:disabled), .site-menu > summary) { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
@media (hover: hover) {
  :where(button:not(:disabled), .site-menu > summary):hover { transform: translateY(-2px); filter: brightness(1.045); }
}
:where(button:not(:disabled), .site-menu > summary):active { transform: translateY(0); filter: brightness(.94); }

/* The city search opens below the field, over the sidebar content. */
.stage-grid--location > .panel.panel-pad:first-child { overflow: visible; }
.location-picker { position: relative; z-index: 5; }
.location-picker[open] { z-index: 30; }
.location-picker > summary { min-width: 0; }
.location-picker[open] > summary::after { transform: rotate(180deg); }
.location-picker__menu { position: absolute; top: calc(100% + 2px); left: 0; width: min(340px, calc(100vw - 32px)); max-width: none; margin: 0; z-index: 30; }
.location-picker__results { max-height: min(280px, 45vh); overflow-y: auto; }
.location-picker__item { min-height: 46px; }

/* Communal services are one expandable branch of the estimate. */
.cost-branch { border-bottom: 1px solid #ccd0cf; }
.cost-branch > summary { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 0; list-style: none; cursor: pointer; color: #102b3b; }
.cost-branch > summary::-webkit-details-marker { display: none; }
.cost-branch__title { font-size: 15px; font-weight: 800; }
.cost-branch__count { margin-left: auto; color: #4a5c6a; font-size: 13px; }
.cost-branch__chevron { color: #176b88; font-size: 20px; transition: transform .18s ease; }
.cost-branch:not([open]) .cost-branch__chevron { transform: rotate(-90deg); }
.cost-branch__children { margin: 0 0 8px 8px; padding-left: 18px; border-left: 2px solid #8bc8e1; }
.cost-branch__children .cost-row { position: relative; padding: 10px 0; }
.cost-branch__children .cost-row::before { content: ''; position: absolute; left: -18px; top: 50%; width: 12px; border-top: 2px solid #8bc8e1; }
.cost-branch__children .cost-row:last-child { border-bottom: 0; }

/* Cards follow the hovered side or corner while keeping their grid footprint. */
.developer { transform: perspective(900px) translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotateX(var(--card-rotate-x, 0deg)) rotateY(var(--card-rotate-y, 0deg)); transform-style: preserve-3d; transition: transform .16s ease-out, box-shadow .2s ease, border-color .2s ease; }
.developer:hover, .developer:focus-within { border-color: #258bb3; box-shadow: 0 14px 28px #164f6830; }
@media (max-width: 650px) { .cost-branch__children .cost-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px; } .cost-branch__children .bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .developer, .developer:hover, :where(button:not(:disabled), .site-menu > summary):hover { transform: none; } }