/* ==========================================================================
   Renovo Real Estate — listing-site components
   Loaded after styles.css, which supplies the brand tokens and base.

   Design position: editorial restraint, photography-forward. The chrome
   recedes so the property leads (Apple HIG "deference"). Navy is the
   structural ink; gold is punctuation — hairlines, eyebrows, active marks —
   never a large field, and never body text on white.

   Accessibility notes carried through this file:
   - Brand gold (#f58220) on white is ~2.9:1 and FAILS WCAG AA for text.
     Use --gold-ink for any gold-colored text. Plain --gold is for graphic
     accents and for text on the navy ground, where it has ample contrast.
   - Interactive targets are >= 44px in at least one axis (HIG minimum).
   - Focus is always visible; motion respects prefers-reduced-motion.
   ========================================================================== */

:root {
  /* Darkened gold that clears AA on white for text use. */
  --gold-ink: #9a4a06;

  /* Vertical rhythm */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6.5rem;

  --radius: 6px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(5, 42, 72, .06), 0 12px 32px rgba(5, 42, 72, .08);
  --shadow-card-hover: 0 2px 4px rgba(5, 42, 72, .08), 0 24px 56px rgba(5, 42, 72, .16);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Focus: visible everywhere, never removed ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — keyboard users land here first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ==========================================================================
   NAV — transparent over the hero photo, solid on inner pages
   ========================================================================== */
.site-nav.over-hero {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom: none;
  /* Scrim so white nav text stays legible over any photograph. */
  background-image: linear-gradient(to bottom, rgba(5, 42, 72, .55), rgba(5, 42, 72, 0));
  padding-bottom: 2.5rem;
}
.site-nav.over-hero a { color: #fff; }
.site-nav.over-hero a:hover { color: var(--gold); }
.site-nav.over-hero .logo img {
  /* The wordmark is dark-on-transparent; invert it against the photo. */
  filter: brightness(0) invert(1);
}

.site-nav ul li a {
  /* HIG: comfortable target without visually enlarging the link. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==========================================================================
   HERO — full-bleed photograph, scrim, headline, and the two paths
   ========================================================================== */
.re-hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-dark);
  isolation: isolate;
}
/* Stacking is deliberately POSITIVE and starts at 1 (media 1 / scrim 2 /
   content 3). Negative z-index children get painted under the parent's own
   background colour, which silently hides the photograph; z-index:0 proved
   unreliable too. Every layer here is explicit and non-zero. */
.re-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Scrim: heavy through the whole band where type sits, easing off only at the
   very top so the photograph still reads. Hero photos differ per property, so
   this is tuned to hold contrast over a BRIGHT image (sky, snow, pale siding),
   not just a dark one — a scrim that only works on one photo isn't a system. */
.re-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* Left-anchored scrim: the copy is left-aligned, so anchor the darkness
       where the words are and let the photograph stay open on the right.
       This is what carries contrast over a bright, busy image. */
    linear-gradient(to right,
      rgba(5, 42, 72, .88)  0%,
      rgba(5, 42, 72, .72) 32%,
      rgba(5, 42, 72, .28) 60%,
      rgba(5, 42, 72, 0)   82%),
    /* Vertical scrim: grounds the base and softens the top edge. */
    linear-gradient(to top,
      rgba(5, 42, 72, .82)  0%,
      rgba(5, 42, 72, .52) 40%,
      rgba(5, 42, 72, .20) 72%,
      rgba(5, 42, 72, .30) 100%);
}
.re-hero .container {
  position: relative;
  z-index: 3;
  padding-top: 8rem;
  padding-bottom: var(--space-lg);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
}
.eyebrow.on-light { color: var(--gold-ink); }
.eyebrow.on-light::before { background: var(--gold); }

/* Text-shadow is belt-and-braces on top of the scrim: it costs nothing and
   keeps type legible if a future property photo is brighter than expected. */
.re-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 1.25rem;
  max-width: 16em;
  text-shadow: 0 2px 12px rgba(3, 22, 38, .5);
}
.re-hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .96);
  max-width: 34em;
  margin: 0 0 var(--space-md);
  text-shadow: 0 1px 8px rgba(3, 22, 38, .45);
}
/* The gold eyebrow is the most fragile element over a photo — brighten it
   toward the tint and give it its own shadow. */
.re-hero .eyebrow {
  color: #ffb066;
  text-shadow: 0 1px 6px rgba(3, 22, 38, .6);
}
.re-hero .eyebrow::before { background: #ffb066; }

/* ---------- The two paths, sitting in the hero ---------- */
.hero-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-path {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: 0 1.6rem;
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.hero-path--primary {
  background: var(--gold);
  color: #1c1103;
}
.hero-path--primary:hover {
  background: #ff9238;
  color: #1c1103;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 130, 32, .34);
}
.hero-path--ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
}
.hero-path--ghost:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  transform: translateY(-2px);
}
.hero-path .arrow { transition: transform .18s var(--ease); }
.hero-path:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-head {
  max-width: 44em;
  margin-bottom: var(--space-md);
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--navy-dark);
  margin: 0 0 .75rem;
}
.section-head p {
  font-size: 1.06rem;
  color: var(--text-soft);
  margin: 0;
}
.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ==========================================================================
   PATH CARDS — Developments vs. As-Is Homes
   The primary navigational decision on the site, so it gets real estate.
   ========================================================================== */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* Layers are media 1 / scrim 2 / content 3 — all strictly positive.
   z-index:0 behaved inconsistently here against the card's own painting,
   so nothing is left on 0 or auto. */
.path-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .5s var(--ease);
}
.path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(5, 42, 72, .93) 6%, rgba(5, 42, 72, .55) 52%, rgba(5, 42, 72, .22) 100%);
}
.path-card > *:not(img) { position: relative; z-index: 3; }
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  color: #fff;
}
.path-card:hover img { transform: scale(1.04); }
.path-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 .5rem;
}
.path-card p {
  color: rgba(255, 255, 255, .88);
  margin: 0 0 1rem;
  font-size: .98rem;
  max-width: 30em;
}
.path-card .go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.path-card .count {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   LISTING CARDS — the canonical brokerage card:
   photo -> status -> price -> beds/baths/sqft -> address
   ========================================================================== */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}
.listing-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
  color: var(--text);
}
.listing-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  overflow: hidden;
}
.listing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.listing-card:hover .listing-card__media img { transform: scale(1.04); }

.badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--navy-dark);
  box-shadow: 0 2px 8px rgba(5, 42, 72, .18);
}
.badge--available { background: var(--navy); color: #fff; }
.badge--pending   { background: #8a5a00; color: #fff; }
.badge--sold      { background: #4a4a4a; color: #fff; }
.badge--soon      { background: rgba(255, 255, 255, .95); color: var(--navy-dark); }

.listing-card__body { padding: 1.35rem 1.4rem 1.5rem; }

.listing-card__price {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.2;
  margin: 0 0 .6rem;
}
.listing-card__price .bid {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-ink);
}

/* beds / baths / sqft — the Minnesota convention (bds, ba, sqft) */
.spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-size: .93rem;
  color: var(--text);
}
.spec-row .spec {
  /* Keep a value and its label together; never break "1,850 sqft" across lines. */
  white-space: nowrap;
}
.spec-row .spec strong { font-weight: 700; color: var(--text-dark); }
.spec-row .spec span { color: var(--text-soft); }
/* The separator has to live at the END of the preceding item, not the start of
   the following one. On ::before it belongs to the next item and rides with it
   when that item wraps, so the new line opens with an orphaned dot. */
.spec-row .spec:not(:last-child)::after {
  content: "·";
  margin-left: .55rem;
  color: var(--text-soft);
  opacity: .6;
}
/* Wordy specs (a development's "8 twin-home lots") are allowed to wrap. */
.spec-row.spec-row--wordy .spec { white-space: normal; }

.listing-card__address {
  font-size: .96rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.45;
}
.listing-card__terms {
  margin: .9rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--text-soft);
}

/* ==========================================================================
   TRUST STRIP — who they're buying from
   ========================================================================== */
.trust-strip {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.trust-item h3 {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 .5rem;
}
.trust-item p {
  margin: 0;
  font-size: .97rem;
  color: var(--text-soft);
}
.trust-item .rule {
  width: 34px;
  height: 3px;
  background: var(--gold);
  margin-bottom: .9rem;
  border-radius: 2px;
}

/* ==========================================================================
   EMPTY STATE — honest when a category has nothing in it yet
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.empty-state h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--navy-dark);
  margin: 0 0 .5rem;
}
.empty-state p { margin: 0 auto; max-width: 34em; color: var(--text-soft); }

/* ==========================================================================
   Motion: one orchestrated entrance, then stillness.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal .7s var(--ease) forwards;
  }
  .reveal:nth-child(1) { animation-delay: .05s; }
  .reveal:nth-child(2) { animation-delay: .15s; }
  .reveal:nth-child(3) { animation-delay: .25s; }
  .reveal:nth-child(4) { animation-delay: .35s; }
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Wordmark
   ==========================================================================
   The shared logo asset reads "Renovo Capital", so this site sets its own
   name in type until a Renovo Real Estate mark exists. */
.wordmark {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  /* HIG: the logo is a link home, so it needs a real target. */
  min-height: 44px;
}
.wordmark .mark-sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: block;
  margin-top: .3rem;
  opacity: .82;
}
.site-nav.over-hero .wordmark { color: #fff; }
.wordmark--dark { color: var(--navy-dark); }

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.page-hero .eyebrow {
  color: #ffb066;
  margin-bottom: .75rem;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band .section-head { margin-bottom: 1.5rem; }
.cta-band .section-head h2 { color: #fff; }
.cta-band .section-head p { color: rgba(255, 255, 255, .9); }

/* Flex centering rather than text-align, so the button and the address stay
   centered regardless of the 38em cap styles.css puts on paragraphs. */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.btn--gold {
  background: var(--gold);
  color: #1c1103;
}
.cta-mail {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  /* HIG: a tappable target is at least 44px tall. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: border-color .18s var(--ease);
}
.cta-mail:hover,
.cta-mail:focus-visible { border-bottom-color: #fff; }

/* Card blurbs come from a property's `summary`, which is written for the
   detail page. Clamp it so one long summary can't unbalance the grid. */
.listing-card__terms {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* An empty state sitting below a populated grid, rather than replacing it. */
.empty-state--inline { margin-top: 1.75rem; }

/* ==========================================================================
   Property detail
   ========================================================================== */
.detail-top { padding: 3rem 0 1.75rem; }
.detail-breadcrumb {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.detail-breadcrumb a { color: var(--gold-ink); text-decoration: none; }
.detail-breadcrumb a:hover { text-decoration: underline; }
.detail-top h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  margin: 0;
  color: var(--navy-dark);
}
.detail-top .lead { margin: .85rem 0 0; max-width: 34em; }
.detail-address {
  margin: .75rem 0 0;
  color: var(--text-soft);
  font-size: 1rem;
}

.detail-gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.detail-gallery__lead {
  aspect-ratio: 3 / 2;
  /* Cap it so the photo never pushes the facts and terms off the first
     screen on a wide display. */
  max-height: 62vh;
}
/* Sized by column count rather than a fixed row count, so a listing with two
   photos and one with a dozen both lay out sensibly. */
.detail-gallery__rest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .6rem;
  margin-top: .6rem;
}
.detail-gallery__rest img { aspect-ratio: 4 / 3; }

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.detail-main h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 2.25rem 0 .85rem;
  color: var(--navy-dark);
}
.detail-main h2:first-child { margin-top: 0; }
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: .6rem;
  color: var(--text);
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.detail-facts {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  background: #fff;
  /* Stays alongside the copy on a long page; harmless where it doesn't fit. */
  position: sticky;
  top: 1.5rem;
}
.detail-facts__price {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 .9rem;
}
.detail-facts__price .bid { color: var(--gold-ink); }
/* The facts card is ~300px wide. Wordy specs ("1 home under construction")
   wrap badly inline there and strand a separator at the end of a line, so
   stack them and drop the dots. */
.detail-facts .spec-row {
  margin-bottom: .9rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}
.detail-facts .spec-row .spec:not(:last-child)::after { content: none; }
.detail-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .5rem;
  font-size: .95rem;
}
.detail-facts__row span { color: var(--text-soft); }
.detail-facts__cta {
  display: block;
  text-align: center;
  margin-top: 1.35rem;
}
.detail-facts__note {
  margin: .9rem 0 0;
  font-size: .88rem;
  color: var(--text-soft);
  text-align: center;
}

.detail-docs {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.detail-docs__list { margin: 0; padding: 0; list-style: none; }
.detail-docs__list li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dark);
}
.detail-docs__list li:first-child { border-top: 1px solid var(--line); }
.detail-docs__gate {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.detail-docs__gate p { font-size: .95rem; margin: 0 0 .8rem; }
.detail-docs__level { color: var(--navy-dark); }
.detail-docs__gate .btn { display: block; text-align: center; }
.detail-docs__size { color: var(--text-soft); font-size: .85rem; white-space: nowrap; }

/* Before acceptance the acknowledgment has to be readable, not tucked into a
   sidebar: counsel's build requirement is that all eight terms are legible on
   screen — including on a phone — above the button. So the gate state drops the
   two-column layout entirely and the terms run the full width of the section. */
.detail-docs--gate { grid-template-columns: 1fr; gap: 2rem; }
.detail-docs--gate .detail-docs__gate { padding: 2rem; }

.detail-docs__ca h3 {
  margin: 1.2rem 0 .8rem;
  font-family: var(--serif);
  color: var(--navy-dark);
}
.detail-docs__terms {
  margin: 0 0 1.5rem;
  padding-left: 1.3rem;
  max-width: 68ch;
}
.detail-docs__terms li {
  margin-bottom: .9rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-dark);
}
.detail-docs__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detail-docs__fields label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  color: var(--text-soft);
  flex: 1 1 16rem;
}
.detail-docs__fields input {
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--text-dark);
}
.detail-docs__fields input:focus-visible,
.detail-docs__agree input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.detail-docs__agree {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1.2rem;
  font-size: .95rem;
  color: var(--text-dark);
  cursor: pointer;
}
.detail-docs__agree input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; }
.detail-docs__ca .btn { display: inline-block; }
.detail-docs__error {
  margin: .9rem 0 0;
  color: #a3261f;
  font-size: .9rem;
}

@media (max-width: 600px) {
  .detail-docs--gate .detail-docs__gate { padding: 1.25rem; }
  .detail-docs__terms { padding-left: 1.1rem; }
}

@media (max-width: 900px) {
  .detail-body,
  .detail-docs { grid-template-columns: 1fr; gap: 2rem; }
  .detail-facts { position: static; }
  .detail-gallery__rest { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* A home listing. The offer bar is the price and the key numbers; every
   section after it is the same list, in the same order, on every house. */
.detail-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.detail-offer > div { padding: 1.5rem 1.6rem 1.7rem; }
.detail-offer > div + div { border-left: 1px solid var(--line); }
.detail-offer h2 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}
.detail-offer__price {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 1rem;
}
.detail-offer__price .bid { color: var(--gold-ink); }
.detail-offer__notes {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 1.15rem 0 .55rem;
}
.detail-offer__cta {
  display: block;
  text-align: center;
  margin-top: 1.35rem;
}

.detail-section { max-width: 42rem; margin-top: 2.75rem; }
.detail-section h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  margin: 0 0 .9rem;
  color: var(--navy-dark);
}
.detail-section p { margin: 0 0 .85rem; }
.detail-rows { margin: 0; }
.detail-rows > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: .75rem 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.detail-rows > div:last-child { border-bottom: 1px solid var(--line); }
.detail-rows dt {
  margin: 0;
  color: var(--text-soft);
  font-size: .92rem;
}
.detail-rows dd { margin: 0; color: var(--text-dark); }
.detail-missing { color: var(--text-soft); font-style: italic; }
.detail-note {
  margin: 1.15rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 42rem;
}
.detail-disclosure {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.7rem;
}
.detail-disclosure h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 1.35rem 0 .55rem;
  color: var(--navy-dark);
}
.detail-links { margin: 0; padding: 0; list-style: none; }
.detail-links li {
  padding: .55rem 0;
  border-top: 1px solid var(--line);
}
.detail-links li:last-child { border-bottom: 1px solid var(--line); }
.detail-links a,
.detail-rows a { color: var(--gold-ink); }

@media (max-width: 800px) {
  .detail-offer { grid-template-columns: 1fr; }
  .detail-offer > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .detail-rows > div { grid-template-columns: 1fr; gap: .2rem; }
  .detail-disclosure { padding: 1.25rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer .footer-blurb { margin-top: 1rem; font-size: .9rem; }
.site-footer .footer-legal { margin-top: 2.5rem; font-size: .82rem; }

/* styles.css right-aligns both footer columns. That balanced the lending
   site's wide logo image; beside a left-aligned wordmark it reads lopsided.
   Let all three columns read from the same left edge. */
.site-footer .col-nav,
.site-footer .col-contact { text-align: left; }
/* The list items are flex rows, so their alignment comes from
   justify-content, not text-align — both have to be reset. */
.site-footer .col-nav li,
.site-footer .col-contact li { justify-content: flex-start; }
/* styles.css tones down .col-nav links but not .col-contact, leaving the
   address in raw link blue next to grey siblings. Match them. */
.site-footer .col-contact a { color: var(--text); }
.site-footer .col-nav a:hover,
.site-footer .col-contact a:hover { text-decoration: underline; }

/* Footer links are small type. On touch layouts give them a real target. */
@media (max-width: 820px) {
  .site-footer .col-nav a,
  .site-footer .col-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Utility corrections
   ========================================================================== */

/* styles.css caps every <p> at 38em for readable line length. That's right for
   body copy, but it means a .text-center paragraph inside a wider container
   centers its text inside a box that is itself flush left — the text looks
   off-center. Center the box as well. Affects the CTA band button and the
   footer copyright line. */
.text-center {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .path-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
}
@media (max-width: 820px) {
  :root { --space-xl: 4rem; --space-lg: 3rem; }
  /* On phones the nav wraps to two lines. Overlaying a wrapping nav on the
     hero makes it collide with the headline, so drop it into normal flow
     with a solid ground instead — predictable at any number of links. */
  .site-nav.over-hero {
    position: static;
    background-image: none;
    background-color: var(--navy-dark);
    padding: .75rem 0 1rem;
  }
  .site-nav .container { flex-wrap: wrap; gap: .5rem 1.25rem; }
  .site-nav ul { gap: 1.1rem; }
  .site-nav a { font-size: .78rem; }

  .re-hero { min-height: 70vh; }
  .re-hero .container { padding-top: var(--space-lg); }
  /* The left-anchored scrim exists to darken a text COLUMN. On a phone the
     text is the full width, so that gradient would blanket the whole photo —
     fall back to the vertical scrim alone. */
  .re-hero::after {
    background:
      linear-gradient(to top,
        rgba(5, 42, 72, .90)  0%,
        rgba(5, 42, 72, .74) 45%,
        rgba(5, 42, 72, .46) 75%,
        rgba(5, 42, 72, .38) 100%);
  }
  .re-hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero-paths { flex-direction: column; align-items: stretch; }
  .hero-path { justify-content: center; }
  .path-card { min-height: 280px; }
}

@media print {
  .site-nav, .hero-paths, .cta-band { display: none; }
}