/* ==========================================================================
   Catalyst Commercial Real Estate
   Design system

   Palette is sampled directly from the Catalyst mark. Type pairs a wide
   institutional grotesk (plat-map title block) with a reading serif for
   market prose and a mono for parcel data. The recurring crosshair is the
   surveyor's section-corner mark.
   ========================================================================== */

:root {
  /* Sampled from the Catalyst mark: orange #F59B2C, charcoal #181718,
     grey #888989. Everything else is built to sit under them. */
  --ink:        #14181B;
  --ink-2:      #1E2429;
  --slate:      #3A4247;
  --mist:       #888989;

  --paper:      #EFEFED;
  --paper-2:    #E4E4E1;
  --white:      #FCFCFB;

  /* Brand orange reads 8.2:1 on ink but only 1.9:1 on paper, so small text
     over light backgrounds uses the deep variant instead. */
  --orange:      #F59B2C;
  --orange-mid:  #C2760F;
  --orange-deep: #94590A;

  --line:       #D2D2CE;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --shell: 1240px;
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.56;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 0.95em; max-width: var(--measure); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 100;
  font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ primitives */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: var(--orange-mid);
  flex: none;
}

/* Section-corner crosshair — the mark surveyors leave at a parcel corner.
   Used as this site's recurring structural device. */
.corner {
  position: relative;
}
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: var(--orange-mid);
  opacity: 0.85;
  transition: opacity 220ms ease;
}
.corner::before { top: -7px; left: 0; width: 1px; height: 15px; }
.corner::after  { top: 0; left: -7px; width: 15px; height: 1px; }

.lede {
  font-size: clamp(1.16rem, 1.05rem + 0.5vw, 1.42rem);
  line-height: 1.5;
  color: var(--slate);
  max-width: 54ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--orange); color: var(--ink); }

.btn--solid { background: var(--orange); color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--orange); }

.btn--dark { border-color: var(--ink); color: var(--ink); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--ink); color: var(--paper); }

.btn--brand { background: var(--orange); border-color: var(--orange); color: #14181B; }
.btn--brand:hover, .btn--brand:focus-visible { background: #E08A18; border-color: #E08A18; }

/* ---------------------------------------------------------------- header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid rgba(245, 155, 44, 0.16);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}

.wordmark {
  display: block;
  line-height: 0;
  flex: none;
}
.wordmark img {
  height: 42px;
  width: auto;
}
@media (max-width: 420px) { .wordmark img { height: 33px; } }

.footer__logo { height: 40px; width: auto; margin-bottom: 1.1rem; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
@media (max-width: 1320px) { .nav { gap: 1.2rem; } }
@media (max-width: 1180px) { .nav { gap: 0.95rem; } .nav a { font-size: 0.7rem; letter-spacing: 0.09em; } }

.nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(245, 155, 44, 0.4);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav__toggle { display: block; }
  .nav {
    position: absolute;
    inset: 84px 0 auto 0;
    background: var(--ink-2);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.6rem;
    border-bottom: 1px solid rgba(245, 155, 44, 0.2);
  }
  .nav[data-open="false"] { display: none; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.6rem, 7vw, 6.6rem) clamp(2.8rem, 5vw, 4.6rem);
  position: relative;
  overflow: hidden;
}

/* Photographic hero — downtown Great Falls, the Missouri, the 10th Street
   bridge. The scrim is heaviest on the left where the headline sits and
   lightest on the right so the sunset survives. Text contrast over the
   type area stays effectively the same as the flat ink background. */
.hero--photo {
  background-color: var(--ink);
  background-image:
    linear-gradient(100deg,
      rgba(20,24,27,0.97) 0%,
      rgba(20,24,27,0.93) 30%,
      rgba(20,24,27,0.74) 55%,
      rgba(20,24,27,0.46) 78%,
      rgba(20,24,27,0.36) 100%),
    linear-gradient(to bottom,
      rgba(20,24,27,0.55) 0%,
      rgba(20,24,27,0.12) 38%,
      rgba(20,24,27,0.30) 72%,
      rgba(20,24,27,0.82) 100%),
    url("/assets/hero-greatfalls.jpg");
  background-size: cover;
  background-position: 52% 42%;
  background-repeat: no-repeat;
}

/* The panorama is 2.9:1 — cropped to a portrait viewport it keeps almost
   nothing, so narrow screens get a squarer crop centred on downtown. */
@media (max-width: 760px) {
  .hero--photo {
    background-image:
      linear-gradient(to bottom,
        rgba(20,24,27,0.88) 0%,
        rgba(20,24,27,0.78) 26%,
        rgba(20,24,27,0.86) 58%,
        rgba(20,24,27,0.95) 100%),
      url("/assets/hero-greatfalls-mobile.jpg");
    background-position: 50% 38%;
  }
}

/* With a photograph carrying the hero, the survey grid becomes clutter.
   One signature at a time. */
.hero--photo::before { display: none; }

/* Township grid — Montana land is described in one-mile sections.
   Rendered faintly so it reads as substrate, not ornament. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(245,155,44,0.17) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,155,44,0.17) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 78% 68% at 76% 24%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 76% 24%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero .shell { position: relative; z-index: 1; }

.hero__coords {
  max-width: none;
  width: fit-content;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1.5rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 1.3rem + 5.6vw, 5.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.032em;
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--orange);
}

.hero__lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: #B6C6CB;
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Division lockup — used where a sub-brand owns the page. The parent mark
   stays in the masthead so navigation doesn't change under the reader. */
.division {
  display: block;
  height: auto;
  width: clamp(240px, 34vw, 380px);
  margin-bottom: 2rem;
}
/* The IQ mark is a wide horizontal lockup — sized by its own proportions
   rather than sharing the square-ish Commercial/Residential measure. */
.division--iq { width: clamp(260px, 38vw, 430px); }

.split__mark {
  display: block;
  width: clamp(170px, 22vw, 230px);
  height: auto;
  margin: 0 0 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245,155,44,0.3);
}

/* Interior pages get a shorter hero — the home page keeps the full statement. */
.hero--page { padding-block: clamp(2.4rem, 4.4vw, 3.9rem) clamp(2.1rem, 3.6vw, 3.2rem); }
.hero--page h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.15rem);
  max-width: 21ch;
  margin-bottom: 1.1rem;
}
.hero--page .hero__lede { margin-bottom: 0; }

/* Data strip beneath the hero */
.strip {
  background: var(--ink-2);
  border-top: 1px solid rgba(245, 155, 44, 0.18);
  color: var(--paper);
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.strip__cell {
  padding: 1.75rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.strip__cell:first-child { padding-left: 0; }
.strip__cell:last-child { border-right: 0; }
.strip__cell dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.7rem;
}
.strip__cell dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.28;
  color: var(--paper);
}

/* --------------------------------------------------------------- section */

.band { padding-block: clamp(2.8rem, 5vw, 4.6rem); }
.band--paper { background: var(--paper); }
.band--tint  { background: var(--paper-2); }
.band--ink   { background: var(--ink); color: var(--paper); }

.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink p { color: #B6C6CB; }
.band--ink .eyebrow { color: var(--orange); }
.band--ink .eyebrow::before { background: var(--orange); }

.band__head { margin-bottom: clamp(1.7rem, 3vw, 2.5rem); }
.band__head h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.85rem);
  max-width: 20ch;
  margin-bottom: 0.85rem;
}

/* ---------------------------------------------- record card (signature) */

.records {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 720px)  { .records--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .records--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px)  { .records--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .records--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.record {
  background: var(--white);
  padding: 1.9rem 1.5rem 1.7rem;
  position: relative;
  transition: background 220ms ease;
}
.record::before,
.record::after {
  content: "";
  position: absolute;
  background: var(--orange-mid);
  opacity: 0.7;
  transition: opacity 220ms ease;
}
.record::before { top: 14px; left: 22px; width: 1px;  height: 17px; }
.record::after  { top: 22px; left: 14px; width: 17px; height: 1px; }
.record:hover { background: var(--paper); }
.record:hover::before, .record:hover::after { opacity: 1; }

.record__field {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 1.2rem 0 0.7rem;
}

.record__title {
  font-size: 1.26rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.record p {
  font-size: 0.97rem;
  line-height: 1.54;
  color: var(--slate);
  margin-bottom: 1rem;
}

.record__data {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: grid;
  gap: 0.55rem;
}
.record__data > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.73rem;
}
.record__data dt { color: var(--mist); letter-spacing: 0.05em; }
.record__data dd { margin: 0; color: var(--ink); text-align: right; }

/* --------------------------------------------------------------- people */

.roster {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 620px)  { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Four across only once the columns are genuinely wide enough. Below this the
   longest role titles wrap to a third line and names fall out of alignment
   with each other, so two columns is the better layout. */
@media (min-width: 1280px) { .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.person {
  background: var(--white);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Portrait sits edge-to-edge at the top of the card. Until every broker has
   a headshot, the ones without get a designed monogram in the same tone as
   the photographed backdrop, so the roster still reads as one set. */
.person__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--paper-2);
}

.person__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #A8660A 0%, #8A5209 60%, #7A4708 100%);
}
.person__photo--placeholder span {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

.person__body { padding: 1.5rem 1.35rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.person__body .person__links { margin-top: auto; }

.person__role {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.45;
  min-height: 2.9em;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 0.7rem;
}
.person h3 { font-size: 1.16rem; margin-bottom: 0.25rem; }
.person p { font-size: 0.92rem; line-height: 1.5; color: var(--slate); margin-bottom: 1rem; }
.person__licence {
  font-family: var(--mono);
  min-height: 1em;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--mist);
  margin: 0 0 0.85rem;
}

.person__links {
  display: grid;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.person__links a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--line); width: fit-content; }
.person__links a:hover { color: var(--ink); border-bottom-color: var(--orange); }

/* --------------------------------------------- two-column contrast panel */
/* Deliberately unequal: the thin column is what's publicly knowable, the
   full column is what the library holds. The visual weight is the argument. */

.split { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .split { grid-template-columns: 0.85fr 1.15fr; } }

.split__col { background: var(--white); padding: 1.75rem 1.5rem 1.9rem; }
.split__col--full { background: var(--ink); color: var(--paper); }

.split__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.split__label--on { color: var(--orange); border-bottom-color: rgba(245,155,44,0.3); }

.split__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.split__list li {
  font-size: 0.97rem;
  line-height: 1.45;
  padding-left: 1.4rem;
  position: relative;
  color: var(--slate);
}
.split__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--orange-mid);
}
.split__col--full .split__list li { color: #C3D0D4; }
.split__col--full .split__list li::before { background: var(--orange); }

/* Absences read differently from entries. */
.split__list li.split__gap { color: #9AA3A6; }
.split__list li.split__gap::before {
  background: none;
  border-top: 1px dashed #B6BDBE;
  height: 0;
}

/* ------------------------------------------------- numbered process steps */
/* Numbers are used here because approval genuinely is a fixed sequence —
   each step gates the next. Don't reuse this pattern for unordered lists. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  counter-increment: step;
  background: var(--white);
  padding: 1.75rem 1.45rem 1.6rem;
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--orange-deep);
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.step h3 { font-size: 1.14rem; margin-bottom: 0.7rem; }
.step p { font-size: 0.96rem; line-height: 1.58; color: var(--slate); margin: 0; }

.steps__note {
  font-size: 0.94rem;
  color: var(--slate);
  margin-top: 1.6rem;
  max-width: 60ch;
}

/* ----------------------------------------------------------- prose pages */

.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 2.6rem 0 1rem; }
.prose h3 { font-size: 1.22rem; margin: 2rem 0 0.7rem; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------- reports */

.report-list { border-top: 1px solid var(--line); }
.report {
  display: grid;
  gap: 0.4rem 2rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
@media (min-width: 760px) {
  .report { grid-template-columns: 9rem 1fr auto; align-items: baseline; }
}
.report__date {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.report h3 { font-size: 1.16rem; }
.report p { font-size: 0.95rem; color: var(--slate); margin: 0.3rem 0 0; grid-column: 1 / -1; }
@media (min-width: 760px) { .report p { grid-column: 2 / 3; } }

/* ----------------------------------------------------------------- slots */

/* Reserved region for the compliant MRMLS IDX embed. */
.slot {
  border: 1px dashed var(--orange);
  background: rgba(245, 155, 44, 0.05);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.slot p { margin-inline: auto; }
.slot__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ form */

.form { display: grid; gap: 1.3rem; max-width: 34rem; }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mist);
}
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 0;
  border-color: var(--orange);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA3A6; }

/* Longer intake forms get more room than the short contact form. */
.form--wide { max-width: 46rem; gap: 0; }

.fset {
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  background: var(--white);
  padding: 1.6rem 1.5rem 1.8rem;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1.3rem;
}
.fset__legend {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--orange-deep);
  padding: 0 0.55rem;
  margin-left: -0.55rem;
}
.fset__note {
  font-size: 0.92rem;
  color: var(--slate);
  margin: -0.4rem 0 0;
  max-width: 52ch;
}

.field-row { display: grid; gap: 1.3rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.req {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--orange-deep);
  margin-left: 0.5rem;
}

.form__foot { display: grid; gap: 1rem; justify-items: start; margin-top: 0.4rem; }
.form__fine { font-size: 0.9rem; color: var(--slate); margin: 0; max-width: 46ch; }

[data-lease-details][hidden] { display: none; }
[data-lease-details] { display: grid; gap: 1.3rem; }

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--ink);
  color: var(--mist);
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem) 1.6rem;
  font-size: 0.94rem;
}
.footer__grid {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
}
.footer a { color: var(--mist); text-decoration: none; }
.footer a:hover { color: var(--paper); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer address { font-style: normal; line-height: 1.75; }

.colophon {
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- motion */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ checkboxes */
/* Declared after .field so the generic input sizing doesn't win, and scoped
   so these labels don't inherit the mono uppercase field-label treatment. */

.checks__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mist);
  display: block;
  margin-bottom: 0.8rem;
}

.field .checks { display: grid; gap: 0.7rem 1.4rem; }
@media (min-width: 560px) { .field .checks { grid-template-columns: 1fr 1fr; } }

.field .checks label.check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  font-family: var(--body);
  font-size: 0.97rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

.field .checks input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  accent-color: var(--orange-deep);
  cursor: pointer;
}
.field .checks input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- listings */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.filters__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mist);
  margin-right: 0.5rem;
}
.filters__btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.filters__btn:hover { border-color: var(--orange-mid); color: var(--ink); }
.filters__btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.filters__count {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  margin-left: auto;
}

.listings { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px)  { .listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .listings { grid-template-columns: repeat(3, 1fr); } }

.listing {
  background: var(--white);
  padding: 1.9rem 1.5rem 1.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 200ms ease;
}
.listing::before,
.listing::after {
  content: "";
  position: absolute;
  background: var(--orange-mid);
  opacity: 0.7;
  transition: opacity 200ms ease;
}
.listing::before { top: 14px; left: 22px; width: 1px;  height: 17px; }
.listing::after  { top: 22px; left: 14px; width: 17px; height: 1px; }
.listing:hover { background: var(--paper); }
.listing:hover::before, .listing:hover::after { opacity: 1; }
.listing[hidden] { display: none; }

.listing__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 1.2rem 0 0.65rem;
  color: var(--slate);
}
.listing__tag--sale  { color: var(--orange-deep); }
.listing__tag--lease { color: #2F6B57; }
.listing__tag--land  { color: #6B5A2E; }
.listing__tag--pending { color: #7A4A8C; }
.listing__loc {
  margin: -0.35rem 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.listing__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.65rem; }
.listing__blurb { font-size: 0.95rem; line-height: 1.52; color: var(--slate); margin-bottom: 1.05rem; }

.listing__data {
  margin: 0 0 1.3rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: grid;
  gap: 0.5rem;
}
.listing__data > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.73rem;
}
.listing__data dt { color: var(--mist); letter-spacing: 0.05em; }
.listing__data dd { margin: 0; color: var(--ink); text-align: right; }

.listing__links {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.listing__links a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.listing__links a:hover { border-bottom-color: var(--orange-mid); }
.listing__links a::after { content: " \2197"; letter-spacing: 0; }

.listings__empty {
  margin-top: 2rem;
  color: var(--slate);
  font-size: 1rem;
}
.listings__empty[hidden] { display: none; }

.inline-link {
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--orange-mid);
  font-size: 0.95rem;
}
.inline-link:hover { color: var(--ink); }

/* ------------------------------------------------- listing card photos */
.listing__photo {
  display: block;
  margin: -1.9rem -1.5rem 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}
.listing__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.listing:hover .listing__photo img { transform: scale(1.03); }
.listing__photo--empty { display: flex; align-items: center; justify-content: center; }
.listing__photo--empty span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.listing::before, .listing::after { z-index: 1; }
.listing__title a { color: inherit; text-decoration: none; }
.listing__title a:hover { color: var(--orange-deep); }

/* ------------------------------------------------------ property pages */
.prop-hero .hero__coords a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.prop-gallery { margin-bottom: clamp(2rem, 4vw, 3rem); }
.prop-main { display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
@media (min-width: 900px) { .prop-main { aspect-ratio: 16 / 8; } }
.prop-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 6px; }
.prop-thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
.prop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; transition: opacity 150ms; }
.prop-thumb:hover img, .prop-thumb.is-on img { opacity: 1; }
.prop-thumb.is-on { border-color: var(--orange); }
.prop-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.prop-gallery--empty { aspect-ratio: 16 / 6; display: flex; align-items: center; justify-content: center; background: var(--paper-2); }
.prop-gallery--empty p { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 0; }

.prop-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .prop-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.prop-body { min-width: 0; max-width: 68ch; }
.prop-body p { font-size: 1.05rem; line-height: 1.65; }
.prop-h { font-size: 1.35rem; margin: 0 0 1rem; }
.prop-body .prop-h:not(:first-child) { margin-top: 2.4rem; }
.prop-list { margin: 0 0 1.2rem; padding-left: 1.2rem; line-height: 1.6; }
.prop-details { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 0; }
.prop-details div { display: grid; grid-template-columns: minmax(8rem, 0.8fr) 1.6fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.prop-details dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.prop-details dd { margin: 0; font-variant-numeric: tabular-nums; }
.prop-note { font-size: 0.85rem !important; color: var(--slate); margin-top: 2rem; }

.prop-side { display: grid; gap: 1px; align-content: start; background: var(--line); border: 1px solid var(--line); min-width: 0; }
.prop-card { background: var(--white); padding: 1.5rem 1.4rem; }
.prop-card .eyebrow { margin-bottom: 0.9rem; }
.prop-card .listing__data { margin: 0; border-top: 0; padding-top: 0; }
.prop-card--ink { background: var(--ink); color: #E8E8E5; }
.prop-card--ink a:not(.btn) { color: #E8E8E5; }
.prop-card--ink .btn { margin-top: 0.6rem; }
.prop-broker { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.4rem; }
.prop-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.prop-docs a { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-deep); text-decoration: none; border-bottom: 1px solid transparent; }
.prop-docs a:hover { border-bottom-color: currentColor; }
.prop-docs span { color: var(--mist); font-size: 0.7rem; }
.listing__links a[href^="/property/"]::after { content: " \2192"; }
.listing__links a[download]::after { content: " \2193"; }
.prop-docs a[download]::after { content: " \2193"; }
.prop-req { font-size: 0.95rem; line-height: 1.5; color: var(--slate); margin: 0 0 1rem; }
.form__note { font-size: 0.95rem; color: var(--slate); margin-top: 1rem; }

/* ------------------------------------------------------- listings search */
.search-bar {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: flex-end;
  padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.search-bar[hidden] { display: none; }
.search-bar__group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.search-bar__field { display: grid; gap: 0.3rem; min-width: 0; }
.search-bar__field span, .search-bar__check {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.search-bar__field select, .search-bar__field input {
  font: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); border-radius: 0; min-width: 9rem; max-width: 100%;
}
.search-bar__field--grow { flex: 1 1 14rem; }
.search-bar__field--grow input { width: 100%; }
.search-bar__check { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.6rem; cursor: pointer; }
.search-bar :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.search-body { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.search-results { min-width: 0; order: 2; }
.search-map { order: 1; min-width: 0; }
.search-map[hidden] { display: none; }
.search-map__canvas { height: 56vh; min-height: 320px; border: 1px solid var(--line); background: var(--paper-2); }
.search-map__tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; padding: 0.7rem 0 0;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.search-map__tools label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.search-map__hint { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.85rem; }
.search-count { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.8rem; }
@media (min-width: 1100px) {
  .search-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .search-results { order: 1; }
  .search-map { order: 2; position: sticky; top: 100px; }
  .search-map__canvas { height: calc(100vh - 160px); }
  .search-results .listings { grid-template-columns: repeat(2, 1fr); }
}
.listing.is-hot { background: var(--paper); box-shadow: inset 0 0 0 2px var(--orange); }

/* map popups */
.leaflet-container { font-family: var(--body); }
.leaflet-popup-content { margin: 12px 14px; }
.pin { display: grid; gap: 0.25rem; color: var(--ink) !important; text-decoration: none; }
.pin img { width: 100%; height: auto; display: block; margin-bottom: 0.3rem; }
.pin__tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); }
.pin strong { font-family: var(--display); font-size: 1rem; }
.pin span:last-child { font-size: 0.85rem; color: var(--slate); }
.parcel__h { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 0.4rem; }
.parcel dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; margin: 0 0 0.8rem; font-size: 0.85rem; }
.parcel dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding-top: 0.15rem; }
.parcel dd { margin: 0; }
.parcel__btn { display: block; text-align: center; font-size: 0.7rem !important; padding: 0.7rem 0.8rem !important; color: var(--ink) !important; }
.parcel__src { font-size: 0.72rem; color: var(--mist); margin: 0.5rem 0 0; }

/* ============ LoopNet-style split search (listings page) ============ */
.search-app { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--paper); }
.search-top { padding: 0.9rem max(16px, 1.25rem) 0.8rem; border-bottom: 1px solid var(--line); background: var(--white); display: grid; gap: 0.6rem; }
.search-title { font-size: 1.05rem; line-height: 1.2; margin: 0; font-weight: 700; }
.search-title span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-weight: 400; margin-left: 0.6rem; }
.search-app .search-bar { margin: 0; padding: 0; border: 0; gap: 0.5rem 0.6rem; align-items: center; }
.search-app .search-bar__field { display: block; }
.search-app .search-bar__field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-app .search-bar__field select, .search-app .search-bar__field input {
  min-width: 0; padding: 0.5rem 0.7rem; font-size: 0.9rem; border-radius: 999px; border-color: #C9C9C4; }
.search-app .search-bar__field--grow { flex: 1 1 16rem; order: -1; }
.search-app .search-bar__field--grow input { padding-left: 1rem; }
.search-app .search-bar__group { gap: 0; border: 1px solid #C9C9C4; border-radius: 999px; overflow: hidden; }
.search-app .search-bar__group .filters__btn { border: 0; border-radius: 0; padding: 0.5rem 0.85rem; }
.search-app .search-bar__group .filters__btn + .filters__btn { border-left: 1px solid #C9C9C4; }

.search-app .search-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
.search-app .search-results { order: 1; padding: 0.8rem max(16px, 1rem) 2rem; min-width: 0; }
.search-results__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.search-results__head .search-count { margin: 0; }
.search-toggle { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 1rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px; cursor: pointer; }
.search-app .search-map { order: 2; position: relative; display: flex; flex-direction: column; min-height: 0; }
.search-app .search-map__canvas { flex: 1; height: 72vh; min-height: 360px; border: 0; }
.search-app .search-map__tools { position: absolute; top: 10px; right: 10px; z-index: 500; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  background: rgba(252,252,251,0.96); padding: 0.6rem 0.8rem; box-shadow: 0 1px 4px rgba(0,0,0,0.2); border-radius: 6px; }
.search-app .search-map__hint { position: absolute; bottom: 22px; left: 10px; z-index: 500; margin: 0; font-size: 0.8rem; background: rgba(252,252,251,0.92); padding: 0.3rem 0.6rem; border-radius: 4px; color: var(--slate); }

/* list cards: photo left, details right */
.search-app .listings { display: grid; grid-template-columns: 1fr !important; gap: 0.6rem; background: none; border: 0; }
.search-app .listing { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 1rem;
  padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.search-app .listing::before, .search-app .listing::after { display: none; }
.search-app .listing[hidden] { display: none; }
.search-app .listing__photo { grid-row: 1 / span 6; margin: 0; aspect-ratio: auto; height: 100%; min-height: 150px; }
.search-app .listing__tag { margin: 0.8rem 0.9rem 0.15rem 0; font-size: 0.6rem; }
.search-app .listing__title { font-size: 1.02rem; margin: 0 0.9rem 0.1rem 0; }
.search-app .listing__loc { margin: 0 0.9rem 0.35rem 0; font-size: 0.7rem; }
.search-app .listing__blurb { display: none; }
.search-app .listing__data { margin: 0 0.9rem 0.4rem 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.search-app .listing__data div { display: flex; gap: 0.35rem; }
.search-app .listing__data div:nth-child(n+4) { display: none; }
.search-app .listing__data dt { font-size: 0.68rem; }
.search-app .listing__data dd { font-size: 0.8rem; font-weight: 600; }
.search-app .listing__links { margin: auto 0.9rem 0.7rem 0; padding-top: 0.45rem; gap: 0.8rem; font-size: 0.7rem; }
.search-app .listing.is-hot { box-shadow: 0 0 0 2px var(--orange); background: var(--white); }

@media (max-width: 899px) {
  .search-app .search-map { display: none; }
  .search-app.show-map .search-map { display: flex; }
  .search-app.show-map .search-results .listings, .search-app.show-map .listings__empty { display: none !important; }
  .search-app.show-map .search-results { padding-bottom: 0.4rem; }
  .search-app .search-map__hint { display: none; }
}
@media (max-width: 520px) {
  .search-app .listing { grid-template-columns: 120px minmax(0, 1fr); }
  .search-app .listing__photo { min-height: 120px; }
  .search-app .listing__data div:nth-child(n+3) { display: none; }
  .search-title span { display: block; margin: 0.25rem 0 0; }
}
@media (min-width: 900px) {
  .search-app { height: calc(100vh - 85px); min-height: 560px; }
  .search-app .search-body { grid-template-columns: minmax(380px, 46%) minmax(0, 1fr); }
  .search-app .search-results { overflow-y: auto; border-right: 1px solid var(--line); }
  .search-app .search-map__canvas { height: 100%; }
  .search-toggle { display: none !important; }
}
@media (min-width: 1400px) { .search-app .search-body { grid-template-columns: 640px minmax(0, 1fr); } }
.search-app .listing__links a { white-space: nowrap; }
@media (min-width: 900px) {
  .search-app .search-body { align-items: stretch; }
  .search-app .search-map { position: relative; top: auto; height: 100%; }
  .search-app .search-map__canvas { height: auto; min-height: 0; flex: 1 1 auto; }
  .search-app .search-results .listings { grid-template-columns: 1fr !important; }
}

/* valuation form: cadastral property search */
.lookup { position: relative; }
.lookup__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 2px 0 0; padding: 0;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20,24,27,0.14); max-height: 22rem; overflow-y: auto; }
.lookup__list li { padding: 0.65rem 0.9rem; cursor: pointer; display: grid; gap: 0.15rem; border-bottom: 1px solid var(--paper-2); }
.lookup__list li:last-child { border-bottom: 0; }
.lookup__list li:hover, .lookup__list li.is-active { background: var(--paper); }
.lookup__list strong { font-family: var(--display); font-size: 0.95rem; font-weight: 600; }
.lookup__list span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--slate); }
.lookup__list .lookup__msg { cursor: default; color: var(--slate); font-size: 0.9rem; }
.lookup__picked { margin: 0.45rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--orange-deep); }
.lookup__help { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--slate); }

/* search intro, parcel hits, popup offers, zoning key */
.search-intro { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--slate); max-width: 95ch; }
.search-intro strong { color: var(--ink); }
.parcel-hits { display: grid; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0.8rem; background: var(--white); border: 1px solid var(--orange); border-radius: 6px; }
.parcel-hits[hidden] { display: none; }
.parcel-hits__h { margin: 0 0 0.2rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); }
.parcel-hit { display: grid; gap: 0.15rem; text-align: left; padding: 0.55rem 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font: inherit; color: var(--ink); }
.parcel-hit:hover, .parcel-hit:focus-visible { border-color: var(--orange); background: var(--white); outline: none; }
.parcel-hit strong { font-family: var(--display); font-size: 0.95rem; }
.parcel-hit span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--slate); }
.parcel__note, .parcel__listed { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--slate); }
.parcel__listed { color: var(--orange-deep); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.parcel__btn + .parcel__btn { margin-top: 0.4rem; }
.parcel__btn--alt { background: var(--white) !important; border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.zoning-key { position: absolute; left: 10px; bottom: 54px; z-index: 500; max-height: 46%; overflow-y: auto; width: 230px;
  background: rgba(252,252,251,0.97); padding: 0.6rem 0.75rem; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); font-size: 0.75rem; }
.zoning-key[hidden] { display: none; }
.zoning-key__h { margin: 0.3rem 0 0.25rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); }
.zoning-key ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.zoning-key li { display: flex; align-items: center; gap: 0.4rem; }
.zoning-key i { width: 12px; height: 12px; flex: none; border: 1px solid rgba(0,0,0,0.25); opacity: 0.8; }
.zoning-key__src { margin: 0.4rem 0 0; color: var(--mist); font-size: 0.68rem; }
@media (max-width: 899px) { .zoning-key { max-height: 38%; width: 200px; } }
.search-bar__check--pill { padding: 0.45rem 0.85rem; border: 1px solid #C9C9C4; border-radius: 999px; background: var(--white); }
.map-keys { position: absolute; left: 10px; bottom: 54px; z-index: 500; display: flex; flex-direction: column; gap: 6px; max-height: 50%; pointer-events: none; }
.map-keys .zoning-key { position: static; pointer-events: auto; max-height: none; overflow-y: auto; }
.map-keys .zoning-key[data-zoning-key] { max-height: 30vh; }
.zoning-key img { width: 16px; height: 16px; flex: none; }
.search-app .search-map__tools { gap: 0; padding: 0; overflow: hidden; }
.search-map__layers-btn { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.55rem 0.8rem; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.search-map__layers-btn::before { content: ""; width: 14px; height: 14px; background: linear-gradient(var(--orange), var(--orange)) 0 2px/14px 3px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 6px/14px 3px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 10px/14px 3px no-repeat; }
.search-map__tools-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.8rem 0.7rem; }
.search-map__tools.is-collapsed .search-map__tools-body { display: none; }
@media (max-width: 899px) {
  .search-map__tools.is-collapsed ~ .map-keys { display: none; }
  .map-keys { bottom: 30px; max-height: 40%; }
}
@media (min-width: 900px) {
  .search-app .search-bar__field select { max-width: 11.5rem; }
  .search-app .search-bar__field--grow { flex: 1 1 12rem; }
  .search-app .search-bar__group .filters__btn { padding: 0.5rem 0.7rem; }
}
.zoning-key:empty { display: none; }