/* Header property search.

   Written against the design tokens rather than Tailwind utilities on purpose.
   This site is served as a static mirror of a production build, so the
   stylesheet is whatever Tailwind compiled that day — any utility the original
   pages never used simply has no rule behind it. Twelve of the classes this
   component first used were missing, including the ones positioning the panel,
   which left it rendering behind the fixed header and looking like a dead
   button. Owning the CSS removes that whole class of failure. */

.tlc-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: 1px solid;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tlc-search-btn svg { width: 0.875rem; height: 0.875rem; }
.tlc-search-btn .label { display: none; }
@media (min-width: 640px) { .tlc-search-btn .label { display: inline; } }

.tlc-search-btn--light { border-color: color-mix(in srgb, var(--color-bone-500) 50%, transparent); color: var(--color-bone-500); }
.tlc-search-btn--light:hover { background: var(--color-bone-500); color: var(--color-hide-500); }
.tlc-search-btn--dark { border-color: color-mix(in srgb, var(--color-hide-500) 30%, transparent); color: var(--color-hide-500); }
.tlc-search-btn--dark:hover { background: var(--color-hide-500); color: var(--color-bone-500); }

/* The panel clears the fixed header, which is roughly 4.25rem tall. */
.tlc-search {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 45;
  /* Set from JS to the header's measured height — a hardcoded value was wrong
     the moment the header changed size between breakpoints, which left the
     panel heading tucked underneath it. */
  padding-top: calc(var(--tlc-header-h, 5rem) + 1.5rem);
  background: var(--color-bone-500);
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 15%, transparent);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.45);
  max-height: 100vh;
  overflow-y: auto;
}
.tlc-search[hidden] { display: none; }

.tlc-search__inner { margin-inline: auto; max-width: 86rem; padding: 0 1.25rem 2rem; }
@media (min-width: 640px) { .tlc-search__inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .tlc-search__inner { padding-inline: 3rem; } }

.tlc-search__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.tlc-search__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-slab, Georgia, serif);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.15;
  color: var(--color-hide-500);
}
.tlc-search__close {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 25%, transparent);
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hide-500);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.tlc-search__close:hover { background: var(--color-hide-500); color: var(--color-bone-500); }

.tlc-search__filters {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tlc-search__filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tlc-search__filters { grid-template-columns: repeat(5, 1fr); } }
.tlc-search__field { display: flex; flex-direction: column; gap: 0.375rem; }
@media (min-width: 1024px) { .tlc-search__field--wide { grid-column: span 2; } }

.tlc-search__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-tan-600);
}
.tlc-search input, .tlc-search select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 25%, transparent);
  background: var(--color-bone-600);
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink-500);
  border-radius: 0;
}
.tlc-search input::placeholder { color: color-mix(in srgb, var(--color-ink-400) 60%, transparent); }
.tlc-search input:focus, .tlc-search select:focus {
  outline: 2px solid var(--color-iron-500);
  outline-offset: 1px;
  border-color: var(--color-hide-500);
}

.tlc-search__row { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tlc-search__inline { display: flex; align-items: center; gap: 0.5rem; }
.tlc-search__inline input { width: 6rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.tlc-search__reset {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-hide-500); text-decoration: underline; text-underline-offset: 4px;
}
.tlc-search__reset:hover { color: var(--color-tan-600); }
.tlc-search__count {
  margin-left: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--color-ink-400);
}

.tlc-search__results {
  margin-top: 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tlc-search__results { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tlc-search__results { grid-template-columns: repeat(3, 1fr); } }

.tlc-search__empty {
  margin-top: 2rem;
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
  padding: 2rem;
}
.tlc-search__empty[hidden] { display: none; }
.tlc-search__empty h3 {
  margin: 0; font-family: var(--font-slab, Georgia, serif);
  font-size: 1.375rem; color: var(--color-hide-500);
}
.tlc-search__empty p { margin: 0.75rem 0 0; max-width: 36rem; line-height: 1.65; color: var(--color-ink-400); }
.tlc-search__cta {
  display: inline-flex; margin-top: 1.25rem; padding: 0.75rem 1.5rem;
  background: var(--color-iron-500); color: var(--color-bone-500);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
}
.tlc-search__cta:hover { background: var(--color-iron-600, #6d251c); }

@media (prefers-reduced-motion: reduce) {
  .tlc-search-btn, .tlc-search__close { transition: none; }
}

/* --- Header while the panel is open ---------------------------------------

   The panel sits below the header in the stack, so the header stays on top of
   it. On the home page that header is transparent with light type, sized for
   the dark hero behind it — against the bone panel the logo, the nav links and
   the menu button all disappear. So for as long as the panel is open the header
   is given its solid treatment, the same one every inner page already uses.

   These rules are unlayered; Tailwind's utilities live inside @layer, which
   loses to unlayered CSS regardless of specificity. No !important needed. */

html[data-search-open] header {
  background: var(--color-bone-500);
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 15%, transparent);
  backdrop-filter: none;
}
html[data-search-open] header a,
html[data-search-open] header button {
  color: var(--color-hide-500);
}
/* The hamburger bars are bg-current, so the button colour above carries them. */

html[data-search-open] header .tlc-search-btn {
  border-color: color-mix(in srgb, var(--color-hide-500) 30%, transparent);
}
html[data-search-open] header .tlc-search-btn:hover {
  background: var(--color-hide-500);
  color: var(--color-bone-500);
}

/* The hero CTA carries a light border for the same reason the type is light. */
html[data-search-open] header a[href*="valuation-review"] {
  border-color: color-mix(in srgb, var(--color-hide-500) 35%, transparent);
}
html[data-search-open] header a[href*="valuation-review"]:hover {
  background: var(--color-hide-500);
  color: var(--color-bone-500);
}

/* Stop the page behind scrolling while the panel is open. */
html[data-search-open], html[data-search-open] body { overflow: hidden; }

/* --- Site assistant -------------------------------------------------------
   The launcher ships in the mirrored markup; its panel was a React component
   that the static build never rendered, so the button pointed at nothing. */

.tlc-chat {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100vh - 8rem));
  background: var(--color-bone-500);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 18%, transparent);
  box-shadow: 0 22px 48px -22px rgb(0 0 0 / 0.5);
}
.tlc-chat[hidden] { display: none; }
@media (min-width: 640px) { .tlc-chat { right: 1.5rem; bottom: 6rem; } }

.tlc-chat__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 1rem; background: var(--color-hide-500); flex: none;
}
.tlc-chat__name {
  margin: 0; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-bone-500);
}
.tlc-chat__close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 0.25rem; color: var(--color-bone-500);
}
.tlc-chat__close:hover { color: var(--color-tan-400, #c09761); }

.tlc-chat__log {
  flex: 1 1 auto; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.tlc-chat__msg {
  max-width: 88%; padding: 0.625rem 0.75rem;
  font-size: 0.875rem; line-height: 1.55;
}
.tlc-chat__msg--bot {
  align-self: flex-start; background: var(--color-bone-600);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
  color: var(--color-ink-500);
}
.tlc-chat__msg--me {
  align-self: flex-end; background: var(--color-hide-500); color: var(--color-bone-500);
}
.tlc-chat__msg a { color: var(--color-iron-500); text-decoration: underline; text-underline-offset: 2px; }
.tlc-chat__msg--me a { color: var(--color-bone-500); }
.tlc-chat__list { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.tlc-chat__list li { margin-bottom: 0.3rem; }
.tlc-chat__aside {
  margin: 0.625rem 0 0; padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
  font-size: 0.75rem; color: var(--color-ink-400);
}

.tlc-chat__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1rem 0.5rem; flex: none; }
.tlc-chat__chip {
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 22%, transparent);
  background: transparent; cursor: pointer;
  padding: 0.3rem 0.55rem; font: inherit; font-size: 0.75rem;
  color: var(--color-hide-500);
}
.tlc-chat__chip:hover { background: var(--color-hide-500); color: var(--color-bone-500); }

.tlc-chat__form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent); flex: none; }
.tlc-chat__form input {
  flex: 1 1 auto; border: 1px solid color-mix(in srgb, var(--color-hide-500) 25%, transparent);
  background: var(--color-bone-600); padding: 0.5rem 0.625rem; font: inherit; font-size: 0.875rem;
  color: var(--color-ink-500); border-radius: 0;
}
.tlc-chat__form input:focus { outline: 2px solid var(--color-iron-500); outline-offset: 1px; }
.tlc-chat__send {
  flex: none; border: 0; cursor: pointer; padding: 0 0.75rem;
  background: var(--color-iron-500); color: var(--color-bone-500);
}
.tlc-chat__send:hover { background: var(--color-iron-600, #6d251c); }
.tlc-chat__foot { margin: 0; padding: 0 1rem 0.75rem; font-size: 0.6875rem; line-height: 1.5; color: var(--color-ink-400); flex: none; }
.tlc-chat__foot a { color: var(--color-iron-500); }
.tlc-chat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Hero video -----------------------------------------------------------
   Production mounts this from a client component. The static mirror had only
   the poster frame, which is why the hero looked frozen. */
.tlc-hero-video {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 900ms ease;
  pointer-events: none;
}
.tlc-hero-video[data-ready] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tlc-hero-video { display: none; } }

/* --- Header on scroll -----------------------------------------------------
   The home page header is transparent for the dark hero behind it. Production
   swapped it to the solid treatment once you scrolled past; that was a React
   scroll listener, so the mirror kept light type over light sections and the
   nav became unreadable. Same tokens as the search-open state. */
html[data-scrolled] header:not([data-solid]) {
  background: color-mix(in srgb, var(--color-bone-500) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 15%, transparent);
  backdrop-filter: blur(4px);
}
html[data-scrolled] header:not([data-solid]) a,
html[data-scrolled] header:not([data-solid]) button { color: var(--color-hide-500); }
html[data-scrolled] header:not([data-solid]) .tlc-search-btn {
  border-color: color-mix(in srgb, var(--color-hide-500) 30%, transparent);
}
html[data-scrolled] header:not([data-solid]) .tlc-search-btn:hover {
  background: var(--color-hide-500); color: var(--color-bone-500);
}
html[data-scrolled] header:not([data-solid]) a[href*="valuation-review"] {
  border-color: color-mix(in srgb, var(--color-hide-500) 35%, transparent);
}
html[data-scrolled] header:not([data-solid]) a[href*="valuation-review"]:hover {
  background: var(--color-hide-500); color: var(--color-bone-500);
}

/* --- Divisions band ------------------------------------------------------- */
.tlc-div { background: var(--color-bone-400); border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent); }
.tlc-div__inner { margin-inline: auto; max-width: 86rem; padding: 2.5rem 1.25rem; }
@media (min-width: 640px) { .tlc-div__inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .tlc-div__inner { padding-inline: 3rem; } }
.tlc-div__eyebrow {
  margin: 0 0 1.25rem; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-tan-600);
}
.tlc-div__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: color-mix(in srgb, var(--color-hide-500) 12%, transparent); }
@media (min-width: 768px) { .tlc-div__list { grid-template-columns: repeat(2, 1fr); } }
.tlc-div__list a {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  background: var(--color-bone-500); padding: 1.125rem 1.25rem;
  text-decoration: none; transition: background-color 0.2s;
}
.tlc-div__list a:hover { background: var(--color-bone-600); }
.tlc-div__name { font-family: var(--font-slab, Georgia, serif); font-size: 1.125rem; color: var(--color-hide-500); }
.tlc-div__desc { flex: 1 1 14rem; font-size: 0.8125rem; color: var(--color-ink-400); }
.tlc-div__go { color: var(--color-iron-500); }

/* --- Insight cards --------------------------------------------------------- */
.tlc-guide { display: grid; gap: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 15%, transparent); padding-top: 1.25rem; }
@media (min-width: 640px) { .tlc-guide { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: start; } }
.tlc-guide__art { display: block; overflow: hidden; line-height: 0; }
.tlc-guide__art svg,
.tlc-guide__img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.tlc-guide__body > *:first-child { margin-top: 0; }

/* --- Lead capture ---------------------------------------------------------- */
.tlc-lead { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.tlc-lead[hidden] { display: none; }
html[data-lead-active], html[data-lead-active] body { overflow: hidden; }
.tlc-lead__backdrop { position: absolute; inset: 0; background: rgb(38 33 25 / 0.62); }
.tlc-lead__card {
  position: relative; width: min(34rem, 100%); max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--color-bone-500);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 20%, transparent);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.6);
  padding: 1.75rem 1.5rem 1.5rem;
}
@media (min-width: 640px) { .tlc-lead__card { padding: 2.25rem 2rem 1.75rem; } }
.tlc-lead__x { position: absolute; top: 0.5rem; right: 0.625rem; border: 0; background: transparent; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--color-ink-400); }
.tlc-lead__x:hover { color: var(--color-hide-500); }
.tlc-lead__eyebrow { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-tan-600); }
.tlc-lead__title { margin: 0.75rem 0 0; font-family: var(--font-slab, Georgia, serif); font-size: clamp(1.25rem, 3.4vw, 1.625rem); line-height: 1.2; color: var(--color-hide-500); }
.tlc-lead__sub { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-400); }
.tlc-lead__form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tlc-lead__row { display: grid; gap: 0.75rem; }
@media (min-width: 520px) { .tlc-lead__row { grid-template-columns: 1fr 1fr; } }
.tlc-lead__field { display: flex; flex-direction: column; gap: 0.3rem; }
.tlc-lead__field > span { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-tan-600); }
.tlc-lead__field input, .tlc-lead__field select {
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 25%, transparent);
  background: var(--color-bone-600); padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9375rem;
  color: var(--color-ink-500); border-radius: 0; width: 100%;
}
.tlc-lead__field input:focus, .tlc-lead__field select:focus { outline: 2px solid var(--color-iron-500); outline-offset: 1px; }
.tlc-lead__consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-ink-400); }
.tlc-lead__consent input { margin-top: 0.15rem; flex: none; }
.tlc-lead__error { margin: 0; font-size: 0.8125rem; color: #b3261e; }
.tlc-lead__error[hidden] { display: none; }
.tlc-lead__submit { margin-top: 0.25rem; border: 0; cursor: pointer; background: var(--color-iron-500); color: var(--color-bone-500); padding: 0.8rem 1rem; font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.tlc-lead__submit:hover { background: var(--color-iron-600, #6d251c); }
.tlc-lead__submit:disabled { opacity: 0.6; cursor: default; }
.tlc-lead__fine { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-ink-400); }
.tlc-lead__fine a, .tlc-lead__done a { color: var(--color-iron-500); }
.tlc-lead__done h3 { margin: 0; font-family: var(--font-slab, Georgia, serif); font-size: 1.375rem; color: var(--color-hide-500); }
.tlc-lead__done p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-400); }
.tlc-lead__done[hidden] { display: none; }

/* --- Live listing cards ---------------------------------------------------
   Own classes, not Tailwind utilities. The production stylesheet is a compiled
   build: a class it never used has no rule behind it, and a card styled on
   utilities that silently do nothing is exactly how the earlier squared-off,
   flat version happened.

   The refresh John asked for is rounded corners, a lighter card surface and a
   pill for the ownership flag. What does not move is the attribution block —
   size, contrast and position are fixed by Rules 18.2.12 and 18.3.4. */

.tlc-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--color-bone-600);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 9%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-hide-500) 6%, transparent);
  text-decoration: none;
  transition: transform 220ms var(--ease-out-soft, cubic-bezier(.22,.61,.36,1)),
              box-shadow 220ms ease, border-color 220ms ease;
}
.tlc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-tan-500) 42%, transparent);
  box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--color-hide-500) 42%, transparent);
}
.tlc-card:focus-visible {
  outline: 2px solid var(--color-iron-500); outline-offset: 3px;
}
/* Ours reads as ours without shouting: a warmer rule, not a second colourway.
   Rule 18.3.14 — the display must not mislead, and every card here carries
   identical attribution whoever holds the listing. */
.tlc-card--own { border-color: color-mix(in srgb, var(--color-iron-500) 30%, transparent); }

.tlc-card__media { position: relative; overflow: hidden; }
.tlc-card__media img, .tlc-card__media .tlc-nophoto {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 600ms var(--ease-out-soft, cubic-bezier(.22,.61,.36,1));
}
.tlc-card:hover .tlc-card__media img { transform: scale(1.035); }

/* The bubble. Sits inset rather than wedged into the corner, and carries a
   translucent ground so it reads over a bright photograph or a dark one. */
.tlc-card__flag {
  position: absolute; left: 0.75rem; top: 0.75rem; margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-iron-500) 92%, transparent);
  color: var(--color-bone-500);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.tlc-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.375rem 1.375rem 1.5rem; }
.tlc-card__meta {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-tan-600);
}
.tlc-card__price {
  margin: 0.6rem 0 0;
  font-family: var(--font-slab, Georgia, serif);
  font-size: 1.625rem; line-height: 1; color: var(--color-hide-500);
}
.tlc-card__addr { margin: 0.7rem 0 0; font-size: 1.0625rem; line-height: 1.35; color: var(--color-hide-500); }
.tlc-card__place { margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--color-ink-400); }
.tlc-card__facts {
  margin: 0.7rem 0 0; flex: 1;
  font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-400);
}
/* 18.2.12 + 18.3.4, at the required size. Never shrink this. */
.tlc-card__courtesy {
  margin: 1.125rem 0 0; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent);
  font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-500);
}

.tlc-nophoto {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bone-400);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-ink-400) 65%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .tlc-card, .tlc-card__media img { transition: none; }
  .tlc-card:hover { transform: none; }
  .tlc-card:hover .tlc-card__media img { transform: none; }
}

.tlc-more { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--color-ink-400); }
.tlc-more__btn {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-iron-500); text-decoration: underline; text-underline-offset: 3px;
}

/* Our own grid, so it does not depend on which Tailwind column utilities the
   production build happened to compile. */
.tlc-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px)  { .tlc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tlc-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Quick filter on the listings page ------------------------------------
   County, acreage, price and property type only. Rule 18.2.4 permits selecting
   listings on objective criteria of exactly this kind, and nothing here lets a
   visitor sort areas by who lives in them. */
.tlc-quick {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.875rem;
  margin: 0 0 1.75rem; padding: 1rem 1.125rem;
  background: var(--color-bone-400);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
}
.tlc-quick__f { display: flex; flex-direction: column; gap: 0.3rem; }
.tlc-quick__f > span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-tan-600);
}
/* Selects and number inputs have different intrinsic heights, which left the
   row on ragged baselines. Fixing the height makes them line up. */
.tlc-quick select, .tlc-quick input {
  box-sizing: border-box; height: 2.375rem;
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 25%, transparent);
  background: var(--color-bone-600); padding: 0 0.6rem;
  font: inherit; font-size: 0.875rem; color: var(--color-ink-500); border-radius: 0;
  appearance: auto;
}
.tlc-quick__reset { height: 2.375rem; padding: 0 0.25rem; align-self: flex-end; }
.tlc-quick input { width: 6.5rem; }
.tlc-quick select:focus, .tlc-quick input:focus { outline: 2px solid var(--color-iron-500); outline-offset: 1px; }
.tlc-quick__reset {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-hide-500); text-decoration: underline; text-underline-offset: 3px;
}
.tlc-quick__count { margin: 0 0 0.6rem auto; align-self: flex-end; font-size: 0.8125rem; color: var(--color-ink-400); }

/* --- Listing detail -------------------------------------------------------- */
.tlc-gallery { display: grid; gap: 0.6rem; }
.tlc-hero-shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-bone-400); border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent); }
.tlc-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.tlc-thumb { flex: none; width: 5.5rem; height: 4rem; padding: 0; cursor: pointer; overflow: hidden; background: none; border: 1px solid color-mix(in srgb, var(--color-hide-500) 18%, transparent); }
.tlc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tlc-thumb.is-on { border-color: var(--color-iron-500); border-width: 2px; }

/* The strip holds however many facts a listing actually has. Land listings
   carry no bedrooms, baths or year built, so a fixed five-column grid left two
   empty cells showing the container's separator colour as a grey slab. Flexing
   the items means they share whatever row they need and nothing shows through. */
.tlc-stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  margin-top: 1.75rem;
  background: color-mix(in srgb, var(--color-hide-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
}
.tlc-stat {
  flex: 1 1 9rem; min-width: 9rem;
  background: var(--color-bone-500); padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.tlc-stat__v { font-family: var(--font-slab, Georgia, serif); font-size: 1.125rem; color: var(--color-hide-500); }
.tlc-stat__l { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-tan-600); }

.tlc-sec { margin-top: 2.25rem; }
.tlc-sec:first-child { margin-top: 0; }
.tlc-sec__h { margin: 0 0 0.9rem; font-family: var(--font-slab, Georgia, serif); font-size: 1.375rem; color: var(--color-hide-500); }
.tlc-defs { margin: 0; }
.tlc-def { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent); }
.tlc-def dt { flex: none; max-width: 45%; font-size: 0.875rem; color: var(--color-ink-400); }
.tlc-def dd { margin: 0; text-align: right; font-size: 0.9375rem; color: var(--color-ink-500); }
.tlc-remarks p { margin: 0 0 0.9rem; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in srgb, var(--color-ink-500) 90%, transparent); }
.tlc-ask { display: inline-flex; margin-top: 1.5rem; padding: 0.8rem 1.4rem; background: var(--color-iron-500); color: var(--color-bone-500); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.tlc-ask:hover { background: var(--color-iron-600, #6d251c); }

/* --- Generated page layout ------------------------------------------------
   The header is fixed and about 123px tall. The Tailwind utilities these pages
   used for clearance — pt-[4.75rem], pt-16, sm:pt-20 — are not in the compiled
   stylesheet, so there was no top padding at all and the first heading sat
   underneath the header. Own class, own rule, no dependency on which utilities
   happened to be compiled. */
.tlc-main { padding-top: 8rem; }
@media (min-width: 640px) { .tlc-main { padding-top: 8.5rem; } }
.tlc-band { padding-top: 1rem; padding-bottom: 3rem; }
.tlc-band-light { padding-top: 2.5rem; padding-bottom: 3rem; }

/* --- Owner dashboard panel (/ranch-management) -----------------------------
   An illustration of the management dashboard, drawn in the site's own
   palette rather than the mockup's blues so it reads as this firm's product.
   Own classes throughout: see the note above the listing card rules. */

.tlc-dash__frame {
  margin: 3.5rem 0 0;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--color-bone-600);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
  box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--color-hide-500) 55%, transparent);
}

.tlc-dash__chrome {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--color-hide-500); color: var(--color-bone-500);
}
.tlc-dash__prop {
  margin: 0; font-family: var(--font-slab, Georgia, serif);
  font-size: 1.25rem; line-height: 1.2;
}
.tlc-dash__sub {
  margin: 0.3rem 0 0; font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-bone-500) 78%, transparent);
}
.tlc-dash__sync {
  margin: 0; font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-bone-500) 72%, transparent);
}
.tlc-dash__sync b { color: var(--color-bone-500); font-weight: 600; }

.tlc-dash__alert {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.8rem 1.4rem;
  background: color-mix(in srgb, var(--color-tan-400) 26%, var(--color-bone-600));
  border-bottom: 1px solid color-mix(in srgb, var(--color-tan-500) 30%, transparent);
  font-size: 0.875rem; line-height: 1.5; color: var(--color-ink-500);
}
.tlc-dash__pri {
  flex: none; border-radius: 999px;
  padding: 0.15rem 0.55rem;
  background: var(--color-tan-600); color: var(--color-bone-500);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.1em;
}

.tlc-dash__kpis {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: color-mix(in srgb, var(--color-hide-500) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent);
}
@media (min-width: 780px) { .tlc-dash__kpis { grid-template-columns: repeat(4, 1fr); } }
.tlc-dash__kpi { background: var(--color-bone-600); padding: 1rem 1.25rem 1.1rem; }
.tlc-dash__kpi-lab {
  margin: 0; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-tan-600);
}
.tlc-dash__kpi-val {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1; color: var(--color-hide-500);
  font-variant-numeric: lining-nums tabular-nums;
}
.tlc-dash__kpi-val span {
  margin-left: 0.2rem; font-size: 0.875rem; font-weight: 400;
  color: var(--color-ink-400);
}
.tlc-dash__kpi-val.ok   { color: #1f7a4d; }
.tlc-dash__kpi-val.warn { color: var(--color-tan-600); }
.tlc-dash__kpi-note { margin: 0.45rem 0 0; font-size: 0.75rem; color: var(--color-ink-400); }

.tlc-dash__split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tlc-dash__split { grid-template-columns: 1.45fr 1fr; } }

.tlc-dash__map {
  position: relative; display: flex; align-items: center;
  background: #EFF2EC; min-height: 15rem;
}
/* "meet", not "slice": the gate markers sit on the boundary itself, so a
   crop takes them off the map. */
.tlc-dash__map svg { display: block; width: 100%; height: auto; }
.tlc-dash__badge {
  position: absolute; left: 0.85rem; top: 0.85rem;
  border-radius: 999px; padding: 0.25rem 0.7rem;
  background: color-mix(in srgb, var(--color-bone-600) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 14%, transparent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-hide-500);
}

.tlc-dash__water {
  padding: 1.25rem 1.4rem 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent);
}
@media (min-width: 900px) {
  .tlc-dash__water {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent);
  }
}
.tlc-dash__panel-h {
  margin: 0 0 0.75rem; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-tan-600);
}
.tlc-dash__wrow {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-hide-500) 14%, transparent);
}
.tlc-dash__wrow:last-child { border-bottom: 0; }
.tlc-dash__wname {
  width: 9.5rem; flex: none;
  font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-500);
}
.tlc-dash__wname em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.6875rem; color: var(--color-ink-400);
}
.tlc-dash__bar {
  flex: 1; height: 0.5rem; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--color-hide-500) 10%, transparent);
}
.tlc-dash__bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-hide-500); }
.tlc-dash__bar i.low  { background: var(--color-tan-500); }
.tlc-dash__bar i.crit { background: var(--color-iron-500); }
.tlc-dash__pct { width: 2.6rem; flex: none; text-align: right; font-size: 0.8125rem; font-weight: 700; color: var(--color-ink-500); }

/* Not decoration. The figures are invented; the page has to say so. */
.tlc-dash__note {
  margin: 0; padding: 0.7rem 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--color-hide-500) 10%, transparent);
  background: var(--color-bone-400);
  font-size: 0.75rem; line-height: 1.5; color: var(--color-ink-400);
}

/* --- Home page offerings ---------------------------------------------------
   Two cards, not three: the wildlife work is part of ranch management. Own
   grid because lg:grid-cols-2 is not in the compiled stylesheet, and a column
   utility that resolves to nothing leaves the cards stacked full-width. */
.tlc-pillars {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  margin-top: 3.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-hide-500) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 15%, transparent);
}
@media (min-width: 1024px) { .tlc-pillars { grid-template-columns: repeat(2, 1fr); } }

.tlc-pillar {
  display: flex; flex-direction: column;
  background: var(--color-bone-500);
  padding: 2rem;
  transition: background-color 200ms ease;
}
@media (min-width: 640px) { .tlc-pillar { padding: 2.5rem; } }
.tlc-pillar:hover { background: var(--color-bone-600); }

.tlc-pillar__hit { display: block; text-decoration: none; color: inherit; }
.tlc-pillar__inc {
  margin: 1rem 0 0;
  font-size: 0.8125rem; line-height: 1.5;
  color: color-mix(in srgb, var(--color-ink-500) 70%, transparent);
}
.tlc-pillar__inc a {
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 30%, transparent);
  padding-bottom: 0.05rem; text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.tlc-pillar__inc a:hover { color: var(--color-tan-600); border-color: var(--color-tan-600); }

/* auto margin, so the call to action sits on the same line in both cards
   whether or not that card carries an "Includes …" note. */
.tlc-pillar__go {
  margin-top: auto; padding-top: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 600;
  color: var(--color-hide-500); text-decoration: none;
}
.tlc-pillar__go > span:first-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-hide-500) 35%, transparent);
  padding-bottom: 0.125rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.tlc-pillar__go:hover > span:first-child { color: var(--color-tan-600); border-color: var(--color-tan-600); }

/* --- Home hero clearance ---------------------------------------------------
   The hero bottom-justifies its copy inside a minimum height, so the block
   grows upward as the copy gets longer. The header is fixed and 122px tall at
   desktop widths; without this the eyebrow ends up sitting on top of the nav.
   Replaces pt-32, which was the whole of the original clearance. */
.tlc-hero-copy { padding-top: 8rem; }
@media (min-width: 1024px) { .tlc-hero-copy { padding-top: 11rem; } }

/* --- Contact form states -----------------------------------------------------
   Sending, failed and sent, for the three forms forms.js takes over. Own
   classes, for the same reason as everything else in this file. */
.tlc-form-status { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-ink-400); }
.tlc-form-status:empty { display: none; }
.tlc-form-status--error { color: var(--color-alert-500, #b3261e); }
.tlc-form-status a, .tlc-form-done a {
  color: var(--color-iron-500); text-decoration: underline; text-underline-offset: 3px;
}
.tlc-form-done {
  padding: 1.75rem; border-radius: 0.75rem;
  background: var(--color-bone-600);
  border: 1px solid color-mix(in srgb, var(--color-hide-500) 12%, transparent);
}
.tlc-form-done:focus { outline: none; }
.tlc-form-done h3 { margin: 0; font-family: var(--font-slab, Georgia, serif); font-size: 1.375rem; color: var(--color-hide-500); }
.tlc-form-done p { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-400); }