.finder-page {
  --finder-orange: #f0a35b;
  --finder-blue: #8eb2df;
  --finder-teal: #72c9c1;
  background: #080a08;
}

.finder-intro {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: end;
  border-bottom: 1px solid var(--panel-line);
  background: linear-gradient(125deg, #11170e 0 48%, #0b1117 100%);
}

.finder-intro .section-kicker,
.finder-intro h1 { margin-bottom: 0; }

.finder-intro h1 { margin-top: 18px; }

.finder-intro-copy {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid #465341;
  border-left: 5px solid var(--finder-blue);
  border-radius: 7px;
  background: #0a0e0ccc;
}

.finder-intro-copy > p:first-child {
  margin-top: 0;
  font-size: 1.08rem;
  line-height: 1.75;
}

.finder-scope {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #39443a;
  color: var(--muted);
}

.finder-scope strong { color: var(--finder-teal); }

.finder-workspace {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(410px, 1.12fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  background: #0d110d;
  border-bottom: 1px solid var(--panel-line);
}

.finder-search-card,
.finder-map-card {
  min-width: 0;
  margin: 0;
  border: 1px solid #475342;
  border-radius: 8px;
  background: linear-gradient(145deg, #141a13, #090c09 76%);
  box-shadow: 0 18px 44px #00000035;
  overflow: hidden;
}

.finder-search-card { border-top: 6px solid var(--green); }
.finder-map-card { border-top: 6px solid var(--finder-orange); }
.finder-map-card[data-selection] { border-top-color: var(--map-accent, var(--finder-orange)); }

.finder-card-heading,
.finder-map-heading { padding: clamp(24px, 3vw, 34px); }

.finder-card-heading h2,
.finder-map-heading h2,
.district-directory h2,
.finder-sources h2 {
  margin: 12px 0 0;
  font: 700 clamp(1.55rem, 2.4vw, 2.35rem)/1.2 var(--heading);
  letter-spacing: -.03em;
}

.finder-card-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--muted);
}

.finder-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .36fr);
  gap: 16px;
  padding: 0 clamp(24px, 3vw, 34px) clamp(24px, 3vw, 34px);
}

.finder-field { min-width: 0; }

.finder-field label {
  display: block;
  margin-bottom: 8px;
  color: #dfe7da;
  font-size: .875rem;
  font-weight: 700;
}

.finder-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #667560;
  border-radius: 5px;
  background: #050705;
  color: var(--ink);
  font: inherit;
}

.finder-field input::placeholder { color: #96a18f; opacity: 1; }
.finder-field input:hover { border-color: #8ba07d; }
.finder-field input:focus { border-color: var(--green); outline: 3px solid #b0d95730; }
.finder-field input[aria-invalid="true"] { border-color: #ffb195; }

.finder-submit {
  grid-column: 1 / -1;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  border-radius: 5px;
  font-size: 1rem;
}

.finder-submit[disabled] { opacity: .72; cursor: progress; }

.finder-privacy {
  margin: 0;
  padding: 18px clamp(24px, 3vw, 34px);
  border-top: 1px solid #354032;
  color: var(--muted);
  background: #080b08;
  font-size: .82rem;
  line-height: 1.6;
}

.finder-privacy span { color: var(--finder-teal); margin-right: 7px; }
.finder-privacy a { color: var(--green); font-weight: 650; }

.finder-result {
  margin: clamp(20px, 3vw, 34px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid #4d5a48;
  border-left: 5px solid var(--finder-blue);
  border-radius: 6px;
  background: #0c1117;
}

.finder-result[data-state="loading"] { border-left-color: var(--finder-blue); }
.finder-result[data-state="success"] { border-left-color: var(--green); background: #10180c; }
.finder-result[data-state="warning"] { border-left-color: var(--finder-orange); background: #1a120b; }
.finder-result[data-state="error"] { border-left-color: #ff9c8b; background: #190d0b; }

.finder-result-label {
  margin: 0 0 14px;
  color: var(--finder-blue);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.finder-result[data-state="success"] .finder-result-label { color: var(--green); }
.finder-result[data-state="warning"] .finder-result-label { color: var(--finder-orange); }
.finder-result[data-state="error"] .finder-result-label { color: #ffb5a8; }

.finder-result h3 {
  margin: 0;
  font: 700 clamp(1.35rem, 2.1vw, 1.9rem)/1.25 var(--heading);
}

.finder-result p { line-height: 1.65; }
.finder-result-address { color: var(--muted); }
.finder-result-district { margin: 20px 0; padding: 14px 16px; border: 1px solid #56664d; border-radius: 4px; background: #070a07; }
.finder-result-district strong { display: block; color: var(--green); font-size: 1.08rem; }
.finder-result-district span { display: block; margin-top: 4px; color: var(--muted); font-size: .9rem; }
.finder-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.finder-result-actions a { min-height: 44px; }
.finder-result-actions button { min-height: 44px; }

.finder-street-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.finder-street-choices .button {
  min-height: 44px;
  border-color: var(--finder-orange);
}

.finder-result-steps {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.finder-result-steps li { display: flex; align-items: center; gap: 12px; color: #dce3d8; }
.finder-result-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #64776f;
  border-radius: 50%;
  color: var(--finder-teal);
  font-size: .8rem;
  font-weight: 700;
}

.finder-contact-list { margin: 18px 0 0; padding: 0; list-style: none; }
.finder-contact-list li + li { margin-top: 7px; }
.finder-contact-list a { color: var(--green); }

.finder-map-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#map-title { scroll-margin-top: 110px; }
#map-title:focus-visible {
  border-radius: 3px;
  outline: 3px solid var(--map-accent, var(--finder-orange));
  outline-offset: 6px;
}

.finder-map-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #5b6656;
  border-radius: 999px;
  color: var(--muted);
  background: #080b08;
  font-size: .75rem;
  text-align: center;
}

.finder-map-badge[data-active="true"] { border-color: var(--map-accent, var(--finder-orange)); color: #fff; }

.finder-map-stage {
  position: relative;
  margin: 0 clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid #5b6258;
  border-radius: 6px;
  background: #d8dad4;
  aspect-ratio: 2 / 3;
}

.finder-map-stage img,
.finder-map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.finder-map-stage img { object-fit: cover; filter: contrast(.95) saturate(.55) brightness(.88); }
.finder-map-stage svg { overflow: visible; }
.finder-district-area {
  fill: var(--map-accent, var(--finder-orange));
  fill-opacity: .23;
  stroke: var(--map-accent, var(--finder-orange));
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.finder-city-outline { fill: transparent; stroke: #b0d957; stroke-width: 5; vector-effect: non-scaling-stroke; }
.finder-segment-area { fill: url(#segment-pattern); stroke: #c45f16; stroke-width: 7; stroke-dasharray: 18 11; vector-effect: non-scaling-stroke; }
.finder-segment-point { fill: #f0a35b; stroke: #522609; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.finder-marker-ring { fill: #ffffff2e; stroke: #fff; stroke-width: 5; vector-effect: non-scaling-stroke; }
.finder-marker-core { fill: #f0a35b; stroke: #351608; stroke-width: 3; vector-effect: non-scaling-stroke; }
.finder-marker-cross { stroke: #fff; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.finder-map-card figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 18px clamp(20px, 3vw, 30px) 10px;
  color: var(--muted);
  font-size: .78rem;
}

.finder-map-card figcaption span { display: inline-flex; align-items: center; gap: 7px; }
.finder-map-card figcaption span[data-visible="false"] { opacity: .55; }
.finder-map-card figcaption span[data-visible="true"] { color: #eef2eb; font-weight: 650; }
.finder-map-card figcaption i { display: inline-block; width: 18px; height: 12px; }
.legend-city { border: 2px solid var(--green); background: transparent; }
.legend-district { border: 3px solid var(--map-accent, var(--finder-orange)); background: var(--map-accent, var(--finder-orange)); opacity: .8; }
.legend-segment { border: 2px dashed var(--finder-orange); background: #f0a35b55; }
.legend-address { border: 3px solid white; border-radius: 50%; background: var(--finder-orange); }

.finder-map-note {
  margin: 0;
  padding: 10px clamp(20px, 3vw, 30px) clamp(24px, 3vw, 30px);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.finder-map-return {
  min-height: 44px;
  margin: 0 clamp(20px, 3vw, 30px) clamp(24px, 3vw, 30px);
  padding: 10px 14px;
  border: 1px solid var(--map-accent, var(--finder-orange));
  border-radius: 4px;
  color: #fff;
  background: #080b08;
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
}

.finder-map-return:hover { background: #151a13; }
.finder-map-return:focus-visible { outline: 3px solid var(--map-accent, var(--finder-orange)); outline-offset: 3px; }

.finder-map-attribution {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 30px) clamp(24px, 3vw, 30px);
  color: #9fa99a;
  font-size: .72rem;
  line-height: 1.55;
}

.finder-map-attribution a { color: #c8daa9; text-underline-offset: 3px; }

.district-directory {
  border-bottom: 1px solid var(--panel-line);
  background: #080a08;
}

.district-directory-head {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, .75fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 34px;
}

.district-directory-head > p { margin: 0; color: var(--muted); line-height: 1.7; }

.district-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.district-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 22px;
  border: 1px solid #3e493b;
  border-top: 4px solid var(--district-accent);
  border-radius: 6px;
  background: linear-gradient(150deg, #111823, #090c09 76%);
}

.district-card:nth-child(3n + 2) { background: linear-gradient(150deg, #14200e, #090c09 76%); }
.district-card:nth-child(3n + 3) { background: linear-gradient(150deg, #0e211f, #090c09 76%); }
.district-card[data-partial="true"] { --district-accent: var(--finder-orange); background: linear-gradient(150deg, #21150c, #090c09 76%); }
.district-card[data-current="true"] { box-shadow: 0 0 0 2px var(--green); }
.district-card.is-selected { outline: 4px solid var(--district-accent); outline-offset: 3px; }

.district-card-code { color: var(--district-accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.district-card h3 { margin: 18px 0 6px; font: 700 1.18rem/1.3 var(--heading); }
.district-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.district-card-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; padding-top: 22px; }
.district-card a { color: var(--district-accent); font-size: .85rem; font-weight: 650; text-underline-offset: 4px; }
.district-current-note { display: inline-flex; margin-top: 12px; color: var(--green); font-size: .78rem; font-weight: 700; }
.district-selected-note { display: inline-flex; margin-top: 12px; color: var(--district-accent); font-size: .78rem; font-weight: 750; }
.district-selected-note[hidden] { display: none; }

.district-card-map-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid var(--district-accent);
  border-radius: 4px;
  color: #fff;
  background: #050705;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.district-card-map-button:hover { background: #171d15; }
.district-card-map-button[aria-pressed="true"] { color: #050705; background: var(--district-accent); }
.district-card-map-button:focus-visible { outline: 3px solid var(--district-accent); outline-offset: 3px; }

.finder-noscript {
  padding: 20px;
  border: 1px solid var(--finder-orange);
  background: #1a120b;
}

.finder-sources { background: #0d110d; }
.finder-sources-head { margin-bottom: 30px; }
.finder-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.finder-source-grid article {
  padding: 26px;
  border: 1px solid #44503f;
  border-left: 5px solid var(--finder-blue);
  border-radius: 6px;
  background: #090c09;
}
.finder-source-grid article:nth-child(2) { border-left-color: var(--green); }
.finder-source-grid article:nth-child(3) { border-left-color: var(--finder-orange); }
.finder-source-grid article > span { color: var(--muted); font-size: .72rem; letter-spacing: .12em; }
.finder-source-grid h3 { margin: 14px 0 10px; font: 700 1.14rem/1.3 var(--heading); }
.finder-source-grid p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.finder-source-grid a { color: var(--green); text-underline-offset: 4px; }

@media (max-width: 1280px) {
  .finder-workspace { grid-template-columns: minmax(330px, .85fr) minmax(360px, 1fr); }
  .district-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .finder-intro,
  .finder-workspace,
  .district-directory-head { grid-template-columns: 1fr; }
  .finder-workspace { gap: 28px; }
  .finder-map-card { max-width: 660px; width: 100%; justify-self: center; }
}

@media (max-width: 620px) {
  .finder-intro-copy { padding: 22px 18px; }
  .finder-form { grid-template-columns: 1fr; padding-inline: 18px; }
  .finder-field-house,
  .finder-submit { grid-column: 1; }
  .finder-card-heading,
  .finder-map-heading { padding: 22px 18px; }
  .finder-map-heading { flex-direction: column; }
  .finder-map-stage { margin-inline: 14px; }
  .finder-map-return { margin-inline: 14px; }
  .finder-result { margin: 20px 18px; padding: 20px 18px; }
  .finder-privacy { padding-inline: 18px; }
  .district-directory-grid,
  .finder-source-grid { grid-template-columns: 1fr; }
  .district-card { min-height: 185px; }
}

@media (prefers-reduced-motion: reduce) {
  .finder-marker-ring { animation: none; }
}

@media (forced-colors: active) {
  .finder-map-stage img { filter: grayscale(1); }
  .finder-district-area,
  .finder-city-outline,
  .finder-segment-area,
  .finder-segment-point,
  .finder-marker-ring,
  .finder-marker-core,
  .finder-marker-cross { forced-color-adjust: auto; }
  .district-card[data-current="true"] { outline: 3px solid Highlight; }
  .district-card.is-selected,
  .district-card-map-button:focus-visible,
  #map-title:focus-visible { outline: 3px solid Highlight; }
}