@charset "UTF-8";
/* ============================================================
   Threshold — Design System
   Bootstrap 5.3 overrides + custom tokens + BEM components.
   This file is the single source of truth for the look/feel.
   Every page on the site should link to this stylesheet.

   BUILD: this is plain CSS — `yarn watch:css` only watches .scss,
   so edits here never rebuild automatically (even under bin/dev).
   Run `yarn build:css`; output is served from app/assets/builds.
   DARK MODE: :root vars flip under prefers-color-scheme (see
   manual/websites.md) — never mix a var-based color with a
   hardcoded one on the same element, or one mode breaks.
   ============================================================ */
/* ── 1. Bootstrap variable overrides + custom design tokens ── */
:root {
  /* Bootstrap overrides — set our identity at the variable level
     so Bootstrap utilities (.bg-body, .text-body, .border, etc.)
     pick up our values automatically. */
  --bs-body-bg: #f5efe3;
  --bs-body-color: #1f1d1a;
  --bs-body-font-family: "Newsreader", Georgia, serif;
  --bs-body-font-size: 1.125rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;
  --bs-emphasis-color: #1f1d1a;
  --bs-secondary-color: #4a463f;
  --bs-tertiary-color: #847d70;
  --bs-secondary-bg: #ede5d2;
  --bs-tertiary-bg: #e0d5bc;
  --bs-border-color: #d8cfb9;
  --bs-link-color: #c44d3e;
  --bs-link-hover-color: #1f1d1a;
  --bs-primary: #c44d3e;
  --bs-primary-rgb: 196, 77, 62;
  --bs-secondary: #4a463f;
  --bs-secondary-rgb: 74, 70, 63;
  /* Custom design tokens — only things Bootstrap doesn't already
     have a variable for. Reused across pages. */
  --paper: var(--bs-body-bg);
  --paper-2: #ede5d2;
  --paper-3: #e0d5bc;
  --note: #fbf2c4; /* sticky-note yellow */
  --ink: var(--bs-body-color);
  --ink-2: #4a463f;
  --ink-3: #847d70;
  --rule: var(--bs-border-color);
  --rule-soft: #e3d9c2;
  --warm: #c44d3e; /* the only "loud" color */
  --warm-soft: #e07060;
  --honey: #d49538; /* used very rarely */
  --serif: var(--bs-body-font-family);
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --hand: "Caveat", "Newsreader", cursive;
  --read-col: 720px; /* comfortable reading column width */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Headings inherit serif body family by default — good. Just
   tighten letter-spacing so they feel editorial, not generic. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
  font-weight: 500;
}

/* Bootstrap renders <a> with underlines by default. We want
   contextual styling per-component, so reset the global. */
a {
  color: inherit;
  text-decoration: none;
}

/* ── 2. Layout helpers ─────────────────────────────────── */
.read-col {
  max-width: var(--read-col);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.section + .section {
  border-top: 1px solid var(--rule);
}

/* ── 3. Tenant bar (top utility strip) ─────────────────── */
.tenant-bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
}

.tenant-bar__greeting {
  color: rgba(245, 239, 227, 0.65);
  font-style: italic;
  font-family: var(--serif);
}

.tenant-bar__link {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(245, 239, 227, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
  transition: text-decoration-color 0.2s ease;
}

.tenant-bar__link:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

.tenant-bar__link--phone {
  color: var(--warm-soft);
  font-weight: 600;
  text-decoration: none;
  border-left: 1px solid rgba(245, 239, 227, 0.2);
  padding-left: 1rem;
}

.tenant-bar__link--phone:hover {
  color: var(--warm-soft);
}

/* ── 4. Brand mark ─────────────────────────────────────── */
.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.brand:hover {
  color: var(--ink);
}

.brand__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--warm);
  border-radius: 50%;
  transform: translateY(-0.1rem);
}

/* ── 5. Site header / nav ─────────────────────────────── */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-header .nav-link {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-2);
  padding: 0.25rem 0;
  margin-left: 1.75rem;
  transition: color 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--warm);
}

/* Override Bootstrap's navbar-toggler to match our palette */
.site-header .navbar-toggler {
  border-color: var(--rule);
  padding: 0.35rem 0.5rem;
}

.site-header .navbar-toggler:focus {
  box-shadow: none;
}

/* ── 6. Hero ──────────────────────────────────────────── */
.hero {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.hero__hi {
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--warm);
  display: inline-block;
  transform: rotate(-1.5deg);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.hero__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-bottom: 1.5rem;
}

.hero__heading-em {
  font-style: italic;
  color: var(--warm);
}

.hero__lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
}

.hero__lede:last-of-type {
  margin-bottom: 0;
}

.hero__lede strong {
  color: var(--ink);
  font-weight: 500;
}

.hero__signoff {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero__signature {
  font-family: var(--hand);
  font-size: 1.4rem;
  color: var(--ink-2);
  transform: rotate(-2deg);
  line-height: 1;
}

/* ── 7. Section heading patterns (reused) ─────────────── */
.section-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.section-heading--em {
  font-style: italic;
  color: var(--warm);
}

.section-eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm);
  font-weight: 600;
  display: block;
  margin-bottom: 0.75rem;
}

/* ── 8. Place card (property listing) ─────────────────── */
.place {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: inherit;
}

.place:hover {
  color: inherit;
}

.place__photo {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}

.place__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.place:hover .place__photo-img {
  transform: scale(1.04);
}

.place__when-tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.3rem 0.65rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
}

.place__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 0;
}

.place__where {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

.place__specs {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.place__price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0;
}

.place__price-em {
  font-style: italic;
  color: var(--ink-3);
  font-weight: 400;
  font-size: 0.9rem;
}

.places-foot__link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--warm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.2s ease;
}

.places-foot__link:hover {
  color: var(--ink);
}

/* ── 8b. Rentals map (list/map toggle) ────────────────── */
.listings-map {
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* The map is themed by recoloring its style layers to the brand palette in
   JS (listings_map_controller#recolor), not by filtering the canvas — so
   markers, water, roads and labels each get their own intentional tone. */
/* Popup styled to match the editorial paper cards: cream ground, ink text,
   hard border, coral price. Tip hidden (closeButton off in JS too). */
.map-pop-popup .mapboxgl-popup-content {
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 16px 34px -16px rgba(31, 29, 26, 0.45);
  font-family: var(--sans);
}

.map-pop-popup .mapboxgl-popup-tip {
  display: none;
}

.map-pop {
  display: block;
  width: 250px;
  text-decoration: none;
  color: inherit;
}

.map-pop__img {
  width: 100%;
  aspect-ratio: 3/2; /* match the listing cards, no squish */
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--rule);
}

.map-pop__body {
  padding: 0.65rem 0.8rem 0.75rem;
}

.map-pop__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
}

.map-pop__specs {
  font-size: 0.8rem;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

.map-pop__price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--warm);
  margin-top: 0.3rem;
}

.map-pop:hover .map-pop__title {
  color: var(--warm);
}

/* Zillow-style price pins: a coral pill showing the rent, with a downward tail. */
.map-price-pin {
  position: relative;
  display: inline-block;
  background: var(--warm, #c44d3e);
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 13px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.map-price-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 0 0 3px 0;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.map-price-pin:hover,
.map-price-pin.is-active {
  background: #a83a2c;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

/* Nearby amenity pins: compact cream chips, secondary to the property pin. */
.map-amenity-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: #e8ddca;
  color: #191510;
  border: 1.5px solid #191510;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-family: var(--sans, sans-serif);
  line-height: 1;
}

.map-amenity-pin__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-amenity-pin:hover {
  background: #fff6e6;
  transform: scale(1.06);
  z-index: 2;
}

.map-amenity-popup .mapboxgl-popup-content {
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 24px -14px rgba(31, 29, 26, 0.45);
  font-family: var(--sans);
}

.map-amenity-popup .mapboxgl-popup-tip {
  display: none;
}

.map-amenity-pop {
  padding: 0.55rem 0.7rem 0.6rem;
  min-width: 7rem;
}

.map-amenity-pop__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--ink);
}

.map-amenity-pop__specs {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

/* ── 9. Person card (team member) ─────────────────────── */
.person {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.person__photo {
  aspect-ratio: 4/5;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.person__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.person:hover .person__photo-img {
  transform: scale(1.03);
}

.person__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0;
}

.person__role {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

.person__blurb {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.person__contact {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.person__contact-link {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  width: fit-content;
}

.person__contact-link:hover {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

.person__contact-link--phone {
  color: var(--ink);
  font-weight: 500;
}

/* ── 10. Note card (sticky-note callout) ───────────────── */
.note-card {
  background: var(--note);
  padding: 1.5rem 2rem;
  max-width: 540px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 4px 6px 18px -8px rgba(95, 75, 30, 0.25);
  transform: rotate(-1.2deg);
  position: relative;
  border-radius: 1px;
}

.note-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 18px;
  background: rgba(168, 137, 64, 0.25);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.note-card__label {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: block;
}

.note-card__big {
  font-family: var(--hand);
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  display: block;
}

.note-card__body {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 0;
}

.note-card__body a {
  color: var(--warm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── 11. Principle (numbered "things that work") ───────── */
.principle__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.5rem;
  color: var(--warm);
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0.75rem;
  display: block;
}

.principle__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.principle__body {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.principle__small {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 0.75rem;
  font-style: italic;
}

/* ── 12. Story (testimonial vignette) ─────────────────── */
.story {
  padding: 1.5rem 0;
  border-bottom: 1px dashed var(--rule);
}

.story:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.story:first-child {
  padding-top: 2rem;
}

.story__when {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.65rem;
  display: block;
}

.story__body {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0;
}

.story__body + .story__body {
  margin-top: 0.75rem;
}

.story__body strong {
  font-weight: 500;
}

.story__body em {
  color: var(--warm);
  font-style: italic;
}

.story__from {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  font-style: italic;
}

/* ── 13. Owner CTA ─────────────────────────────────────── */
.owner-cta {
  background: var(--paper-2);
}

.owner-cta__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.owner-cta__title-em {
  font-style: italic;
  color: var(--warm);
}

.owner-cta__body {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.owner-cta__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.5rem;
}

.owner-cta__card-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
  display: block;
}

.owner-cta__card-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.owner-cta__card-role {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-bottom: 0.85rem;
}

.owner-cta__card-link {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-2);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: color 0.2s ease;
}

.owner-cta__card-link:last-child {
  border-bottom: none;
}

.owner-cta__card-link:hover {
  color: var(--warm);
}

.owner-cta__card-link strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── 14. Site footer ──────────────────────────────────── */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.5rem;
}

.site-footer__brand-line {
  font-size: 1.6rem;
  margin-bottom: 0.85rem;
}

.site-footer__brand-blurb {
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 32ch;
  margin-bottom: 1.25rem;
}

.site-footer__signature {
  font-family: var(--hand);
  color: var(--ink-3);
  font-size: 1.2rem;
  transform: rotate(-1deg);
  display: inline-block;
}

.site-footer__heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__list li {
  padding: 0.3rem 0;
}

.site-footer__list a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.site-footer__list a:hover {
  color: var(--warm);
}

.site-footer__bottom {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
}

.site-footer__bottom a {
  color: var(--ink-3);
  transition: color 0.2s ease;
}

.site-footer__bottom a:hover {
  color: var(--ink);
}

/* Brand line + housing/NAR badges sit on one row; the row owns the spacing
   the brand line used to carry so the badges center against the wordmark. */
.site-footer__brand-row {
  margin-bottom: 0.85rem;
}

.site-footer__brand-row .site-footer__brand-line {
  margin-bottom: 0;
}

/* Only white logo assets exist (shared with the dark enterprise footer);
   invert them dark for this light footer. Dark mode resets the filter. */
.site-footer__badges img {
  height: 26px;
  filter: invert(0.72);
}

/* ── 15. Animations ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal--1 {
  animation-delay: 0.05s;
}

.reveal--2 {
  animation-delay: 0.18s;
}

.reveal--3 {
  animation-delay: 0.32s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================
   ADDITIONS — Batch 1 (Quick Links, Maintenance, FAQ)
   Components: .page-header, .quick-link, .link-group,
   .emergency-callout, .severity-option, .form-section,
   .form-required, .btn-warm, .faq-section, accordion overrides.
   ============================================================ */
/* ── 16. Page header (sub-page intro pattern) ─────────────── */
.page-header {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.page-header__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm);
  font-weight: 600;
  display: block;
  margin-bottom: 0.85rem;
}

.page-header__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.page-header__title-em {
  font-style: italic;
  color: var(--warm);
}

.page-header__intro {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 0;
}

.page-header__intro + .page-header__intro {
  margin-top: 0.85rem;
}

/* ── 17. Quick link card ────────────────────────────────────── */
.quick-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  height: 100%;
  transition: all 0.2s ease;
  position: relative;
}

.quick-link:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
}

.quick-link__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--warm);
  transition: all 0.2s ease;
}

.quick-link:hover .quick-link__icon {
  background: var(--warm);
  color: var(--paper);
  border-color: var(--warm);
}

.quick-link__icon svg {
  width: 20px;
  height: 20px;
}

.quick-link__icon--logo {
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 0;
}

.quick-link__icon--logo:hover,
.quick-link:hover .quick-link__icon--logo {
  background: transparent;
  border: none;
}

.quick-link__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.quick-link__body {
  flex: 1;
  min-width: 0;
}

.quick-link__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
  line-height: 1.25;
}

.quick-link__desc {
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.4;
  margin-bottom: 0;
}

.quick-link__arrow {
  font-family: var(--sans);
  color: var(--ink-3);
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-self: center;
}

.quick-link:hover .quick-link__arrow {
  color: var(--warm);
  transform: translateX(3px);
}

.quick-link--preferred {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.quick-link__badge {
  position: absolute;
  top: -0.55rem;
  right: 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  line-height: 1;
}

/* ── 18. Link group (grouping related quick links) ────────── */
.link-group {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.link-group:last-child {
  margin-bottom: 0;
}

.link-group__heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.link-group__sub {
  font-family: var(--sans);
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}

/* ── 19. Emergency callout ────────────────────────────────── */
.emergency-callout {
  background: #fff4e6;
  border: 1px solid var(--warm);
  border-left: 4px solid var(--warm);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
}

.emergency-callout__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--warm);
  margin-bottom: 0.4rem;
  display: block;
}

.emergency-callout__body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0;
}

.emergency-callout__phone {
  color: var(--warm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.emergency-callout__phone:hover {
  color: var(--ink);
}

/* ── 20. Severity option (radio-style cards) ──────────────── */
.severity-option {
  display: block;
  cursor: pointer;
  height: 100%;
  position: relative;
  margin-bottom: 0;
}

.severity-option__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.severity-option__label {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: all 0.18s ease;
  height: 100%;
}

.severity-option:hover .severity-option__label {
  border-color: var(--ink-3);
  background: var(--paper-2);
}

.severity-option__radio:checked + .severity-option__label {
  border-color: var(--warm);
  background: #fff4e6;
  box-shadow: inset 0 0 0 1px var(--warm);
}

.severity-option__radio:focus-visible + .severity-option__label {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
}

.severity-option__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  display: block;
}

.severity-option__hint {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: block;
  line-height: 1.4;
}

/* ── 21. Form sections + Bootstrap form overrides ─────────── */
.form-section {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px dashed var(--rule);
}

.form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.form-section__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
  color: var(--ink);
}

.form-required {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 0.35rem;
  font-size: 0.85em;
}

/* Bootstrap form-control / form-select overrides */
.form-label {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  background-color: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--paper);
  border-color: var(--warm);
  box-shadow: 0 0 0 0.2rem rgba(196, 77, 62, 0.15);
  color: var(--ink);
}

.form-control::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

.form-text {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-top: 0.35rem;
}

.form-check-input {
  border-color: var(--ink-3);
}

.form-check-input:checked {
  background-color: var(--warm);
  border-color: var(--warm);
}

.form-check-input:focus {
  border-color: var(--warm);
  box-shadow: 0 0 0 0.2rem rgba(196, 77, 62, 0.15);
}

.form-check-label {
  font-family: var(--serif);
  font-size: 0.98rem;
}

.form-section fieldset > legend {
  float: none;
  width: auto;
}

.form-section fieldset > .form-check {
  clear: left;
}

/* Submit button — extends Bootstrap's .btn */
.btn-warm {
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.75rem 2rem;
  border-radius: 2px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.btn-warm:hover,
.btn-warm:focus {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 2px 4px 0 rgba(31, 29, 26, 0.1);
}

.btn-warm:active {
  transform: translateY(0);
}

.btn-link-inline {
  background: none;
  border: none;
  padding: 0;
  color: var(--warm);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link-inline:hover {
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.55rem 1.25rem;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

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

/* ── 22. FAQ accordion (Bootstrap accordion overrides) ────── */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-color: var(--rule);
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-border-color: var(--warm);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.15rem rgba(196,77,62,0.15);
  --bs-accordion-active-color: var(--warm);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-padding-y: 1.1rem;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-btn-icon-width: 1rem;
}

.accordion-item {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.accordion-item:first-of-type {
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.accordion-item:last-of-type {
  border-radius: 0;
}

.accordion-button {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  padding-right: 2rem;
}

.accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
}

.accordion-body {
  padding-bottom: 1.25rem !important;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
}

.accordion-body p {
  margin-bottom: 0.75rem;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-body a {
  color: var(--warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accordion-body a:hover {
  color: var(--ink);
}

/* ── 23. FAQ section grouping ─────────────────────────────── */
.faq-section {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.faq-section:last-child {
  margin-bottom: 0;
}

.faq-section__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  letter-spacing: -0.012em;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.faq-section__heading-em {
  font-style: italic;
  color: var(--warm);
}

.faq-section__intro {
  color: var(--ink-3);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* ── 24. Post-form / next-steps panel ─────────────────────── */
.next-steps {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: 2.5rem;
}

.next-steps__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.next-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.next-steps__list li {
  font-size: 0.96rem;
  color: var(--ink-2);
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
}

.next-steps__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--warm);
  font-weight: 500;
}

/* ============================================================
   ADDITIONS — Batch 2 (All Properties + Single Property)
   Components: .filter-bar, .filter-chip, .breadcrumb-trail,
   .property-gallery, .property-header, .property-facts,
   .property-section, .property-features, .lease-summary,
   .tour-card, .contact-mini, .empty-state, .photo-modal.
   ============================================================ */
/* ── 25. Filter bar (Properties listing) ──────────────────── */
/* Filter trigger button */
.filter-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.filter-trigger:hover {
  background: var(--paper);
  border-color: var(--ink-3);
  color: var(--ink);
}

.filter-trigger__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  width: 1.2em;
  height: 1.2em;
  margin-left: 5px;
  line-height: 1;
}

/* Liquid glass filter modal */
@media (max-width: 575px) {
  .filter-modal .modal-dialog {
    margin: 0;
    margin-top: auto;
    max-width: 100%;
    width: 100%;
  }
  .filter-modal__content {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}
.filter-modal__content {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.25rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  color: var(--ink);
  overflow: hidden;
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-modal__title {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.filter-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s;
}

.filter-modal__close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

.filter-modal__body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filter-modal__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.filter-modal__body .form-select {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  border-radius: 0.6rem;
}

.filter-modal__body .form-select:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(var(--warm-rgb, 180, 80, 50), 0.2);
  color: var(--ink);
}

.filter-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-modal__clear {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.filter-modal__clear:hover {
  color: var(--ink);
}

.filter-modal__apply {
  min-width: 10rem;
  text-align: center;
}

#listingsGrid {
  animation: listings-fade-in 0.2s ease-out both;
}

@keyframes listings-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.filter-bar {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.filter-bar__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.filter-bar__group-label {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  flex-shrink: 0;
}

.filter-bar__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-3);
}

.filter-bar__count strong {
  color: var(--ink);
  font-weight: 500;
}

.filter-bar__clear {
  background: transparent;
  border: 0;
  color: var(--warm);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.filter-bar__clear:hover {
  color: var(--ink);
}

/* Filter chip */
.filter-chip {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 999px;
}

.filter-chip:hover {
  border-color: var(--ink-3);
  background: var(--paper-3);
  color: var(--ink);
}

.filter-chip--active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filter-chip--active:hover {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--paper);
}

/* ── 26. Empty state (no results) ──────────────────────────── */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
}

.empty-state__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

.empty-state__body {
  color: var(--ink-3);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* ── 27. Breadcrumb trail ─────────────────────────────────── */
.breadcrumb-trail {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.breadcrumb-trail a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-trail a:hover {
  color: var(--warm);
  text-decoration: underline;
}

.breadcrumb-trail__sep {
  margin: 0 0.5rem;
  color: var(--rule);
}

.breadcrumb-trail__current {
  color: var(--ink);
  font-weight: 500;
}

/* ── 28. Property gallery (Zillow-style 1-big + 4-small) ──── */
.property-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  aspect-ratio: 16/9;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
}

.property-gallery__photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-2);
  border: none;
  padding: 0;
}

.property-gallery__photo--main {
  grid-row: 1/3;
  grid-column: 1;
}

.property-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.property-gallery__photo:hover .property-gallery__img {
  transform: scale(1.03);
}

.property-gallery__more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.55rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.property-gallery__more:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 768px) {
  .property-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: 4/3;
  }
  .property-gallery__photo:not(.property-gallery__photo--main) {
    display: none;
  }
}
/* ── 29. Property header (price + address + actions) ──────── */
.property-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}

.property-header__title-block {
  flex: 1;
  min-width: 280px;
}

.property-header__price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin-bottom: 0.35rem;
}

.property-header__price-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--ink-3);
}

.property-header__address {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-bottom: 0.2rem;
}

.property-header__neighborhood {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.property-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.property-header__icon-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 2px;
}

.property-header__icon-btn:hover {
  border-color: var(--ink);
  color: var(--warm);
}

.property-header__icon-btn svg {
  width: 20px;
  height: 20px;
}

/* ── 30. Property facts strip (beds | baths | sqft | type) ── */
.property-facts {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink-2);
  margin: 0 0 0.2rem;
}

/* ── 31. Property body sections ───────────────────────────── */
.property-section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.property-section:last-child {
  border-bottom: none;
}

.property-section__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.012em;
  margin-bottom: 1rem;
}

.property-section__body {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
}

.property-section__body p + p {
  margin-top: 0.85rem;
}

/* ── 32. Feature lists (in-unit / building) ───────────────── */
.property-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
}

@media (max-width: 600px) {
  .property-features {
    grid-template-columns: 1fr;
  }
}
.property-features__group-heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin: 0.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.property-features__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.property-features__list li {
  font-size: 0.96rem;
  color: var(--ink-2);
  padding: 0.45rem 0 0.45rem 1.5rem;
  position: relative;
  border-bottom: 1px dotted var(--rule);
}

.property-features__list li:last-child {
  border-bottom: none;
}

.property-features__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--warm);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ── 33. Lease summary table ──────────────────────────────── */
.lease-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.lease-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  gap: 1rem;
}

.lease-summary__row:last-child {
  border-bottom: none;
}

.lease-summary__label {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lease-summary__value {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

.lease-summary__value-em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

/* ── 34. Tour card (sticky right column on desktop) ───────── */
.tour-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .tour-card {
    position: sticky;
    top: 1.5rem;
  }
}
.tour-card__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.tour-card__sub {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}

.tour-card .form-control,
.tour-card .form-select {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
}

.tour-card .form-label {
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.tour-card__divider {
  border: 0;
  border-top: 1px dashed var(--rule);
  margin: 1.25rem 0;
}

.tour-card__or {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.tour-card__person {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.tour-card__person-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  flex-shrink: 0;
}

.tour-card__person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}

.tour-card__person-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1.2;
}

.tour-card__person-role {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.tour-card__person-contact {
  font-family: var(--sans);
  font-size: 0.85rem;
  display: block;
  margin-top: 0.6rem;
}

.tour-card__person-contact a {
  color: var(--ink-2);
  display: block;
  padding: 0.15rem 0;
  transition: color 0.2s ease;
}

.tour-card__person-contact a:hover {
  color: var(--warm);
}

/* ── 35. Voucher highlight panel ──────────────────────────── */
.voucher-panel {
  background: #fff4e6;
  border: 1px solid var(--warm);
  border-left: 4px solid var(--warm);
  padding: 1.25rem 1.5rem;
}

.voucher-panel__heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--warm);
  margin-bottom: 0.4rem;
  display: block;
}

.voucher-panel__body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 0;
}

/* ── 36. Photo viewer pages (grid + lightbox) ──────────────── */
.tenants-photo-page {
  margin: 0;
  background: var(--paper);
}

.tenants-photo-page--show .turbo-progress-bar {
  display: none !important;
}

.photo-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.photo-page--lightbox {
  background: var(--paper);
  color: var(--ink);
}

.photo-page--lightbox a {
  color: var(--ink);
}

.photo-page__header {
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}

.photo-page__header--dark {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.photo-page__back,
.photo-page__icon-btn {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

.photo-page__back:hover,
.photo-page__icon-btn:hover {
  color: var(--warm);
  text-decoration: none;
}

.photo-page__header--dark .photo-page__back,
.photo-page__header--dark .photo-page__icon-btn {
  color: var(--ink);
  opacity: 0.95;
}

.photo-page__header--dark .photo-page__back:hover,
.photo-page__header--dark .photo-page__icon-btn:hover {
  color: var(--ink);
  opacity: 1;
}

.photo-page__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.photo-page__title {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  padding: 0.4rem 0;
  border-bottom: 2px solid var(--ink);
}

/* ── Grid layout (Image #2) ─────────────────────────────── */
.photo-page__container {
  padding: 1rem 1.25rem;
}

.photo-page__photos {
  padding-right: 1rem;
}

.photo-page__photo {
  width: 100%;
  background: var(--paper-2);
  cursor: pointer;
  overflow: hidden;
  display: block;
}

.photo-page__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform 0.4s ease;
}

.photo-page__photo:hover img {
  transform: scale(1.02);
}

.photo-page__photo--hero {
  margin-bottom: 0.75rem;
}

.photo-page__photo--hero img {
  aspect-ratio: 16/9;
  max-height: 75vh;
}

.photo-page__sidebar {
  border-left: 1px solid var(--rule);
  padding: 1.5rem 1.25rem;
  background: var(--paper);
}

.photo-page__sidebar-inner {
  position: sticky;
  top: 5rem;
}

.photo-page__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
  line-height: 1.1;
}

.photo-page__price-em {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-3);
}

.photo-page__facts {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.photo-page__facts strong {
  color: var(--ink);
  font-weight: 600;
}

.photo-page__facts-sep {
  color: var(--ink-3);
  margin: 0 0.15rem;
}

.photo-page__address {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.photo-page__address a {
  color: var(--bs-link-color);
  text-decoration: none;
}

.photo-page__address a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .photo-page__photos {
    padding-right: 0;
  }
  .photo-page__sidebar {
    border-left: none;
    border-top: 1px solid var(--rule);
    order: -1;
    padding: 1rem 1.25rem;
  }
  .photo-page__sidebar-inner {
    position: static;
  }
}
/* ── Lightbox layout (Image #3) ─────────────────────────── */
.photo-page--lightbox .photo-page__header {
  padding: 0.65rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.photo-page--lightbox .photo-page__back,
.photo-page--lightbox .photo-page__icon-btn {
  border-radius: 0.4rem;
  padding: 0.45rem 0.7rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.photo-page--lightbox .photo-page__back:hover,
.photo-page--lightbox .photo-page__icon-btn:hover {
  background: var(--paper-2);
}

.photo-page__lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 4.5rem;
  overflow: hidden;
  position: relative;
  background: var(--paper);
}

.photo-page__stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}

.photo-page__image {
  max-width: 100%;
  max-height: calc(100vh - 9.5rem);
  object-fit: contain;
  display: block;
  border-radius: 2px;
  animation: photo-page__fade-in 0.18s ease-out;
}

@keyframes photo-page__fade-in {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.photo-page__counter {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid var(--rule);
  z-index: 2;
  pointer-events: none;
}

.photo-page__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  z-index: 3;
}

.photo-page__nav--prev {
  left: 1rem;
}

.photo-page__nav--next {
  right: 1rem;
}

.photo-page__nav:hover {
  background: var(--paper-3);
  border-color: var(--rule-soft);
  color: var(--ink);
  transform: translateY(-50%) scale(1.06);
}

.photo-page__nav:active {
  transform: translateY(-50%) scale(0.96);
}

.photo-page__nav:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.photo-page__footer {
  text-align: center;
  padding: 0.9rem 1rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

@media (max-width: 768px) {
  .photo-page--lightbox .photo-page__header {
    padding: 0.5rem 0.85rem;
  }
  .photo-page__title {
    display: none;
  }
  .photo-page__lightbox-body {
    padding: 1rem 3.25rem;
  }
  .photo-page__nav {
    width: 2.4rem;
    height: 2.4rem;
  }
  .photo-page__nav--prev {
    left: 0.5rem;
  }
  .photo-page__nav--next {
    right: 0.5rem;
  }
  .photo-page__back,
  .photo-page__icon-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
  }
  .photo-page__icon-btn span {
    display: none;
  }
}
/* ── Share modal & toast (paired with photo viewer chrome) ──
   Modifier-only overrides on Bootstrap's modal/toast via their CSS
   custom properties. Markup stays vanilla Bootstrap. */
.share-modal {
  --bs-modal-bg: var(--paper);
  --bs-modal-color: var(--ink);
  --bs-modal-border-color: var(--rule);
  --bs-modal-border-radius: 2px;
  --bs-modal-header-padding: 1.1rem 1.25rem 0.85rem;
  --bs-modal-header-border-color: var(--rule);
  --bs-modal-padding: 1rem 1.25rem 1.25rem;
  --bs-modal-title-line-height: 1.25;
}

.share-modal .modal-content {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.share-modal .modal-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.012em;
}

.share-toast {
  --bs-toast-bg: var(--ink);
  --bs-toast-color: var(--paper);
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: 2px;
  --bs-toast-padding-x: 1.1rem;
  --bs-toast-padding-y: 0.7rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Genuinely custom — Bootstrap doesn't have a row-icon-with-title-and-sub primitive. */
.share-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.share-option:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
}

.share-option:active {
  background: var(--paper-3);
}

.share-option:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 1px;
}

.share-option__icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--warm);
  border-radius: 2px;
}

.share-option__label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.25;
}

.share-option__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.share-option__sub {
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ── 37. Place card extension (for listing page) ──────────── */
.place__voucher-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--warm);
  color: var(--warm);
  padding: 0.2rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── 38. CTA-emphasis button (Apply Now) ──────────────────── */
.btn-warm--primary {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--paper);
}

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

.btn-warm--block {
  display: block;
  width: 100%;
}

/* ── 39. Section CTA (closing block on listing pages) ─────── */
.section-cta {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.section-cta__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  letter-spacing: -0.012em;
  margin-bottom: 0.6rem;
}

.section-cta__heading-em {
  font-style: italic;
  color: var(--warm);
}

.section-cta__body {
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 auto 1.5rem;
}

/* ============================================================
   ADDITIONS — Batch 3 (About Us + Welcome Guide)
   Components: .stats-strip, .commitment, .where-list,
   .welcome-checklist, .reference-card, .guide-toc,
   .guide-section, .pull-quote.
   ============================================================ */
/* ── 40. Stats strip (numbers row) ────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.stats-strip__item {
  background: var(--paper-2);
  padding: 1.5rem 1rem;
  text-align: center;
}

.stats-strip__value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.stats-strip__value-em {
  font-style: italic;
  color: var(--warm);
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 0.1em;
}

.stats-strip__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ── 41. Pull quote (story section) ───────────────────────── */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-left: 3px solid var(--warm);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}

.pull-quote__attribution {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 0.85rem;
  font-weight: 500;
}

/* ── 42. Commitment card ──────────────────────────────────── */
.commitment {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--warm);
  padding: 1.5rem;
  height: 100%;
}

.commitment__eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--warm);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.commitment__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.commitment__body {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0;
}

/* ── 43. Where-we-work list ───────────────────────────────── */
.where-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.where-list__item {
  background: var(--paper);
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.where-list__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
}

.where-list__count {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}

/* ── 44. Welcome checklist ────────────────────────────────── */
.welcome-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.welcome-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease;
}

.welcome-checklist__item:last-child {
  border-bottom: none;
}

.welcome-checklist__item:hover {
  background: var(--paper-2);
}

.welcome-checklist__checkbox {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
  margin: 0.15rem 0 0 0;
  position: relative;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper);
  transition: all 0.15s ease;
}

.welcome-checklist__checkbox:checked {
  background: var(--warm);
  border-color: var(--warm);
}

.welcome-checklist__checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.welcome-checklist__checkbox:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
}

.welcome-checklist__body {
  flex: 1;
  min-width: 0;
}

.welcome-checklist__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  display: block;
  transition: all 0.2s ease;
}

.welcome-checklist__checkbox:checked ~ .welcome-checklist__body .welcome-checklist__title {
  text-decoration: line-through;
  color: var(--ink-3);
}

.welcome-checklist__hint {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink-3);
  display: block;
  line-height: 1.4;
}

/* ── 45. Reference card (key numbers/contacts) ───────────── */
.reference-card {
  background: var(--note);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 4px 6px 18px -8px rgba(95, 75, 30, 0.2);
}

.reference-card__heading {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.reference-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reference-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  gap: 1rem;
}

.reference-card__row:last-child {
  border-bottom: none;
}

.reference-card__label {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-2);
}

.reference-card__value {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.reference-card__value a {
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease;
}

.reference-card__value a:hover {
  border-bottom-color: var(--ink);
}

/* ── 46. Guide TOC (sticky on desktop) ────────────────────── */
.guide-toc {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1.25rem;
}

@media (min-width: 992px) {
  .guide-toc {
    position: sticky;
    top: 1.5rem;
  }
}
.guide-toc__heading {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.guide-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-toc__link {
  display: block;
  padding: 0.4rem 0.85rem;
  margin-left: -0.85rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}

.guide-toc__link:hover {
  color: var(--warm);
  border-left-color: var(--warm);
  background: var(--paper);
}

/* ── 47. Guide section ────────────────────────────────────── */
.guide-section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}

.guide-section:last-of-type {
  border-bottom: none;
}

.guide-section:first-of-type {
  padding-top: 0;
}

.guide-section__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  letter-spacing: -0.012em;
  margin-bottom: 0.85rem;
}

.guide-section__heading-em {
  font-style: italic;
  color: var(--warm);
}

.guide-section__intro {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.guide-section__sub-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
}

.guide-section__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.guide-section__list li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  font-size: 0.98rem;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--rule);
}

.guide-section__list li:last-child {
  border-bottom: none;
}

.guide-section__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.4rem;
  color: var(--warm);
}

.guide-section__list a {
  color: var(--warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-section__list a:hover {
  color: var(--ink);
}

/* ── 48. Print styles (welcome guide / reference) ─────────── */
@media print {
  .tenant-bar,
  .site-header,
  .site-footer,
  .guide-toc,
  .print-hide {
    display: none !important;
  }
  body {
    background: white;
    font-size: 10pt;
    line-height: 1.45;
  }
  .page-header, .guide-section, .reference-card {
    break-inside: avoid;
  }
  a {
    color: var(--ink);
    text-decoration: none;
  }
  a[href^=tel]::after,
  a[href^=mailto]::after {
    content: "";
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ============================================================
   ADDITIONS — Batch 4 (Application form)
   Components: .app-stepper, .app-step, .app-nav, .field-group,
   .conditional-details, .app-resume, .app-modal, .yes-no-pair,
   .app-cert.
   ============================================================ */
/* ── 49. Stepper (top-of-form progress) ───────────────────── */
.app-stepper {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.app-stepper__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.app-stepper__item {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 0.4rem;
}

.app-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: var(--rule);
  z-index: 0;
}

.app-stepper__item--done:not(:last-child)::after {
  background: var(--warm);
}

.app-stepper__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

.app-stepper__item--current .app-stepper__num {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--paper);
}

.app-stepper__item--done .app-stepper__num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.app-stepper__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: block;
  line-height: 1.3;
}

.app-stepper__item--current .app-stepper__label {
  color: var(--ink);
  font-weight: 600;
}

.app-stepper__item--done .app-stepper__label {
  color: var(--ink-2);
}

/* Mobile: compact progress bar instead of full stepper */
.app-stepper__compact {
  display: none;
}

@media (max-width: 768px) {
  .app-stepper__list {
    display: none;
  }
  .app-stepper__compact {
    display: block;
  }
  .app-stepper__compact-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--sans);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  .app-stepper__compact-text strong {
    color: var(--warm);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .app-stepper__compact-text em {
    color: var(--ink-3);
    font-style: normal;
  }
  .app-stepper__bar {
    height: 4px;
    background: var(--rule);
    overflow: hidden;
    border-radius: 2px;
  }
  .app-stepper__bar-fill {
    height: 100%;
    background: var(--warm);
    transition: width 0.3s ease;
  }
}
/* ── 50. App step container ───────────────────────────────── */
.app-step {
  display: none;
}

.app-step--active {
  display: block;
}

.app-step__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.012em;
  margin-bottom: 0.4rem;
}

.app-step__heading-em {
  font-style: italic;
  color: var(--warm);
}

.app-step__intro {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  max-width: 60ch;
}

/* ── 51. App navigation (Back / Save / Next) ──────────────── */
.app-nav {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}

.app-nav__save {
  color: var(--warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-nav__save:hover {
  color: var(--ink);
}

.app-nav__back {
  background: transparent;
  border: 1.5px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.55rem 1.25rem;
  border-radius: 2px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.app-nav__back:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2);
}

@media (max-width: 575.98px) {
  .app-nav .btn-warm {
    width: 100%;
  }
  .app-nav .app-nav__back {
    align-self: flex-start;
  }
  .app-nav .app-nav__save {
    order: 99;
  }
}
/* ── 52. Field group (repeating: employment / contacts) ───── */
.field-group {
  position: relative;
  padding: 1.4rem 1.4rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.field-group__label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 1rem;
  display: block;
}

.field-group__remove {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.25rem;
  text-underline-offset: 3px;
}

.field-group__remove:hover {
  color: var(--warm);
}

.field-group__add {
  background: transparent;
  border: 1.5px dashed var(--rule);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.85rem 1.5rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
  border-radius: 2px;
}

.field-group__add:hover {
  border-color: var(--warm);
  border-style: solid;
  color: var(--warm);
  background: var(--paper-2);
}

/* ── 53. Conditional details (revealed when "Yes" picked) ── */
.conditional-details {
  margin-top: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-2);
  border-left: 3px solid var(--warm);
}

.conditional-details[hidden] {
  display: none;
}

/* ── 54. Inline yes/no radio pair ─────────────────────────── */
.yes-no-pair {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.4rem;
}

.yes-no-pair .form-check {
  margin-bottom: 0;
}

.yes-no-pair--error {
  outline: 2px solid #dc3545;
  outline-offset: 6px;
  border-radius: 3px;
}

/* ── 55. SSN / encrypted hint ─────────────────────────────── */
.form-encrypt-hint {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--moss, #5d6b4f);
  font-style: italic;
  margin-left: 0.5rem;
}

.form-encrypt-hint::before {
  content: "🔒 ";
  font-style: normal;
  margin-right: 0.15rem;
}

/* ── 56. Resume entry link (top of form) ──────────────────── */
.app-flash-notice {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
  padding: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  border-left: 2px solid var(--warm);
}

.app-resume {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.app-resume__text {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0;
}

.app-resume__link {
  color: var(--warm);
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 3px;
}

.app-resume__link:hover {
  color: var(--ink);
}

/* ── 57. App modal overrides ──────────────────────────────── */
.app-modal .modal-content {
  border-radius: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.app-modal .modal-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.25rem 1.5rem;
}

.app-modal .modal-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
}

.app-modal .modal-body {
  padding: 1.5rem;
}

.app-modal .modal-body p {
  color: var(--ink-2);
}

.app-modal .btn-close {
  filter: none;
}

/* ── 58. Final-step certification block ───────────────────── */
.app-cert {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1.4rem;
  margin-top: 1.5rem;
}

.app-cert__body {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.app-cert__check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}

/* ── 59. Document upload row ──────────────────────────────── */
.upload-row {
  padding: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.upload-row:last-child {
  margin-bottom: 0;
}

.upload-row__label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
  display: block;
}

.upload-row__hint {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 0.85rem;
  display: block;
}

/* ── 60. Final-submit confirmation panel ──────────────────── */
.app-final-panel {
  background: #fff4e6;
  border: 1px solid var(--warm);
  padding: 1.4rem;
  margin-top: 1.75rem;
  border-left: 4px solid var(--warm);
}

.app-final-panel__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--warm);
  margin-bottom: 0.5rem;
  display: block;
}

.app-final-panel__body {
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.55;
}

.app-fee-explainer {
  margin-bottom: 2rem;
}

.app-fee-explainer p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 1rem;
}

.app-fee-explainer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-fee-explainer__list li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 1.5rem;
  position: relative;
}

.app-fee-explainer__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--warm);
  font-weight: 700;
}

.app-fee-explainer__hardship {
  font-size: 0.9rem;
  color: var(--ink-2);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.25rem;
}

/* ============================================================
   ADDITIONS — Tenant nav rebuild (dropdown, owner link, active)
   ============================================================ */
/* Dropdown menu — Bootstrap override matched to our palette */
.site-header .dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.4rem 0;
  margin-top: 0.55rem;
  min-width: 240px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.14);
}

.site-header .dropdown-item {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  white-space: normal;
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  background: rgba(196, 77, 62, 0.08);
  color: var(--warm);
}

.dropdown-item__sub {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}

.site-header .dropdown-item:hover .dropdown-item__sub,
.site-header .dropdown-item:focus .dropdown-item__sub {
  color: var(--warm);
  opacity: 0.75;
}

.site-header .nav-link.dropdown-toggle::after {
  margin-left: 0.35em;
  vertical-align: 0.1em;
  border-width: 4px 4px 0;
  opacity: 0.55;
}

.site-header .nav-link.active,
.site-header .dropdown-item.active {
  color: var(--warm);
  font-weight: 600;
}

/* "Apply now" button alignment */
.site-header .btn-warm {
  margin-left: 1.75rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.88rem;
}

@media (max-width: 991.98px) {
  .site-header .btn-warm {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}
/* Tenant-bar — switch to right-aligned and add owner link */
.tenant-bar .container {
  justify-content: flex-end !important;
}

.tenant-bar__sep {
  color: rgba(245, 239, 227, 0.3);
  margin: 0 0.1rem;
}

.tenant-bar__owner {
  color: rgba(245, 239, 227, 0.78);
  font-style: italic;
  font-family: var(--serif);
  text-decoration: none;
  border-left: 1px solid rgba(245, 239, 227, 0.22);
  padding-left: 1rem;
  margin-left: 0.4rem;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.tenant-bar__owner:hover {
  color: var(--paper);
}

@media (max-width: 767.98px) {
  .tenant-bar {
    font-size: 0.78rem;
  }
  .tenant-bar .container {
    justify-content: center !important;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .tenant-bar__greeting {
    display: none;
  }
  .tenant-bar__link--phone {
    border-left: none;
    padding-left: 0;
  }
  .tenant-bar__owner {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    font-size: 0.78rem;
  }
}
@media (max-width: 379.98px) {
  .tenant-bar__link--phone {
    flex-basis: 100%;
    text-align: center;
  }
}
/* ============================================================
   ADDITIONS — Contact page
   ============================================================ */
.hero--narrow {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

.contact-block {
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.contact-block:first-child {
  padding-top: 0;
}

.contact-block--last {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-block__eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm);
  display: block;
  margin-bottom: 0.6rem;
}

.contact-block__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.65rem;
  line-height: 1.2;
}

.contact-block__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--warm);
  padding-bottom: 0.05em;
  transition: color 0.15s ease;
}

.contact-block__link:hover {
  color: var(--warm);
}

.contact-block__body {
  font-size: 0.97rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

.contact-form {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 2rem 2.25rem 2.25rem;
}

@media (max-width: 575.98px) {
  .contact-form {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}
.contact-form__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.contact-form__sub {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.contact-cant {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.contact-cant li {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.contact-cant li:last-child {
  border-bottom: none;
}

.contact-cant li strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.contact-cant li a {
  color: var(--warm);
  font-weight: 500;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
}

.contact-cant li a:hover {
  opacity: 0.8;
}

/* ============================================================
   ADDITIONS — Tenant homepage audit (hero CTAs + owner callout)
   ============================================================ */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--rule);
}

.hero__cta-secondary {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero__cta-secondary:hover {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

/* Slim owner callout (replaces big owner-cta block) */
.owner-callout {
  background: var(--paper-2, #f5f0e8);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm);
  padding: 2.25rem 2.5rem 2.4rem;
  text-align: left;
}

@media (max-width: 575.98px) {
  .owner-callout {
    padding: 1.75rem 1.5rem;
  }
}
.owner-callout__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0.65rem 0 1rem;
  line-height: 1.2;
}

.owner-callout__title-em {
  font-style: italic;
  font-weight: 400;
  color: var(--warm);
}

.owner-callout__body {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

.owner-callout__body strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
   ADDITIONS — Tenant testimonials + 404
   ============================================================ */
/* Soft warm wash for featured testimonial — half-strength of warm */
:root {
  --warm-pale: #f4e4df;
}

.testimonial {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.85rem 1.85rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.testimonial::before {
  content: "“";
  position: absolute;
  top: -0.3rem;
  left: 1rem;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--warm-pale);
  font-weight: 500;
}

.testimonial__body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.25rem;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.testimonial__attribution {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.testimonial__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: block;
}

.testimonial__context {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 0.25rem;
  font-weight: 600;
}

.testimonial--featured {
  background: var(--warm-pale);
  border-color: var(--warm);
}

.testimonial--featured::before {
  color: var(--warm);
  opacity: 0.22;
}

/* 404 page — tenant version */
.notfound {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  border-bottom: 1px solid var(--rule);
}

.notfound__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(6rem, 16vw, 11rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--warm);
  margin-bottom: 0.5rem;
  display: block;
}

.notfound__num-em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.notfound__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.5vw, 2.2rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 1rem;
}

.notfound__sub {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 auto 2rem;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.notfound__hint {
  margin-top: 2.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  font-style: italic;
}

/* ============================================================
   ADDITIONS — Apply explainer panel + Tour page
   ============================================================ */
/* Apply.html — before-you-start panel */
.app-explainer {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm);
  padding: 1.75rem 2rem 1.85rem;
  margin: 0 auto 2.5rem;
  max-width: 880px;
}

@media (max-width: 575.98px) {
  .app-explainer {
    padding: 1.4rem 1.25rem;
  }
}
.app-explainer__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.app-explainer__title-em {
  font-style: italic;
  font-weight: 400;
  color: var(--warm);
}

.app-explainer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

@media (max-width: 575.98px) {
  .app-explainer__list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}
.app-explainer__list li {
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 1.25rem;
  position: relative;
}

.app-explainer__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--warm);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
}

.app-explainer__list li strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

/* Tour page — what-to-expect steps */
.tour-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

@media (max-width: 991.98px) {
  .tour-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .tour-steps {
    grid-template-columns: 1fr;
  }
}
.tour-step {
  padding: 1.5rem 1.6rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tour-step:last-child {
  border-right: none;
}

@media (max-width: 991.98px) {
  .tour-step:nth-child(2) {
    border-right: none;
  }
  .tour-step:nth-child(1), .tour-step:nth-child(2) {
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 575.98px) {
  .tour-step {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .tour-step:last-child {
    border-bottom: none;
  }
}
.tour-step__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--warm);
}

.tour-step__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.tour-step__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Tour page — leasing team intro card */
.tour-host {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 2rem 2.25rem;
}

@media (max-width: 575.98px) {
  .tour-host {
    padding: 1.5rem 1.4rem;
  }
}
.tour-host__eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm);
  margin-bottom: 0.5rem;
}

.tour-host__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.tour-host__role {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-bottom: 0.85rem;
}

.tour-host__body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1rem;
}

.tour-host__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}

.tour-host__contact a:not(.btn) {
  color: var(--warm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
}

/* Properties.html — Book a tour action row */
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.page-header__actions-or {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-3);
}

/* ============================================================
   ADDITIONS — Tour two-step flow (form-stage + slot picker)
   ============================================================ */
/* Step pill row used on both tour.html (above form) and tour-schedule.html (in header) */
.form-stage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.form-stage__step {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
}

.form-stage__step--active {
  background: var(--warm);
  color: var(--paper);
  border-color: var(--warm);
}

.form-stage__step--complete {
  background: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--rule);
  position: relative;
}

.form-stage__step--complete::before {
  content: "✓ ";
  color: var(--warm);
  margin-right: 0.15rem;
}

.form-stage__sep {
  color: var(--ink-3);
  font-weight: 400;
}

/* Schedule sidebar — recap of details from step 1 */
.schedule-sidebar {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.85rem 1.85rem 1.65rem;
}

.schedule-sidebar__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}

.schedule-sidebar__sub {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.65rem;
}

.schedule-recap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.88rem;
}

.schedule-recap dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  align-self: start;
  padding-top: 0.1em;
}

.schedule-recap dd {
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}

.schedule-recap__note {
  grid-column: 1/-1;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 0.65rem;
  margin-top: 0.5rem;
  line-height: 1.5;
}

.schedule-recap__edit {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   DARK MODE — auto, follows system preference
   Strategy: override CSS custom properties at :root level so
   every component using --paper, --ink, --warm etc. adapts
   automatically. Then a small set of targeted overrides for
   things that use rgba() values directly or need extra love.
   ============================================================ */
/* Force dark mode by adding `class="dark-mode"` to <html>. Mirrors the
   @media (prefers-color-scheme: dark) block below so any page can opt
   into dark explicitly via `<% content_for :html_class, "dark-mode" %>`. */
html.dark-mode {
  --bs-body-bg: #1a1612;
  --bs-body-color: #ede5d2;
  --bs-emphasis-color: #f5efdd;
  --bs-secondary-color: #b6ab97;
  --bs-tertiary-color: #7d7565;
  --bs-secondary-bg: #221d17;
  --bs-tertiary-bg: #2c261d;
  --bs-border-color: #2e2820;
  --bs-link-color: #dc6755;
  --bs-link-hover-color: #f5efdd;
  --bs-primary: #dc6755;
  --bs-primary-rgb: 220, 103, 85;
  --bs-secondary: #b6ab97;
  --bs-secondary-rgb: 182, 171, 151;
  --paper: #1a1612;
  --paper-2: #221d17;
  --paper-3: #2c261d;
  --ink: #ede5d2;
  --ink-2: #b6ab97;
  --ink-3: #7d7565;
  --rule: #2e2820;
  --rule-soft: #3a342a;
  --warm: #dc6755;
  --warm-soft: #ec8474;
  --warm-pale: #2e1f1c;
  /* Bootstrap component tokens — modals and toasts read these directly. */
  --bs-modal-bg: #1a1612;
  --bs-modal-color: #ede5d2;
  --bs-modal-border-color: #2e2820;
  --bs-modal-header-border-color: #2e2820;
  --bs-modal-footer-border-color: #2e2820;
  --bs-toast-bg: #221d17;
  --bs-toast-color: #ede5d2;
  --bs-toast-border-color: #2e2820;
  --bs-toast-header-bg: #221d17;
  --bs-toast-header-color: #ede5d2;
  color-scheme: dark;
}

html.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .site-header .navbar-toggler {
  border-color: var(--rule);
}

html.dark-mode .site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28237, 229, 210, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Bootstrap variables — keep utilities (.bg-body, .text-body) honest */
    --bs-body-bg: #1a1612;
    --bs-body-color: #ede5d2;
    --bs-emphasis-color: #f5efdd;
    --bs-secondary-color: #b6ab97;
    --bs-tertiary-color: #7d7565;
    --bs-secondary-bg: #221d17;
    --bs-tertiary-bg: #2c261d;
    --bs-border-color: #2e2820;
    --bs-link-color: #dc6755;
    --bs-link-hover-color: #f5efdd;
    --bs-primary: #dc6755;
    --bs-primary-rgb: 220, 103, 85;
    --bs-secondary: #b6ab97;
    --bs-secondary-rgb: 182, 171, 151;
    /* Custom tokens */
    --paper: #1a1612;
    --paper-2: #221d17;
    --paper-3: #2c261d;
    --ink: #ede5d2;
    --ink-2: #b6ab97;
    --ink-3: #7d7565;
    --rule: #2e2820;
    --rule-soft: #3a342a;
    --warm: #dc6755; /* lifted for dark contrast */
    --warm-soft: #ec8474;
    --warm-pale: #2e1f1c; /* deep warm-brown overlay */
  }
  /* Tenant-bar — was already inverted (dark on light), now matches system.
     Base styles set color:var(--paper); in dark mode --paper is the dark
     background color, so re-anchor link/text colors to --ink for contrast. */
  .tenant-bar {
    background: #0d0b08;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .tenant-bar__greeting {
    color: var(--ink-2);
  }
  .tenant-bar__link {
    color: var(--ink);
    text-decoration-color: var(--ink-3);
  }
  .tenant-bar__link:hover {
    color: var(--ink);
    text-decoration-color: var(--ink);
  }
  .tenant-bar__owner {
    color: var(--ink-2);
  }
  .tenant-bar__owner:hover {
    color: var(--ink);
  }
  .site-header .navbar-toggler {
    border-color: var(--rule);
  }
  .site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28237, 229, 210, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  /* Footer — same dark-on-dark adjustment. --paper flips dark in dark mode,
     so hover targets --ink for the light-on-dark contrast we actually want. */
  .site-footer {
    background: #0d0b08;
  }
  .site-footer a {
    color: var(--ink-2);
  }
  .site-footer a:hover {
    color: var(--ink);
  }
  .site-footer__badges img {
    filter: none;
    opacity: 0.85;
  }
  /* Reference card (welcome guide "Numbers to keep handy") — base uses
     --note (sticky yellow) which is identical in light/dark. Swap to a
     paper-tinted surface so light text reads against it. */
  .reference-card {
    background: var(--paper-2);
    border-color: var(--rule);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 4px 6px 18px -8px rgba(0, 0, 0, 0.5);
  }
  .reference-card__heading {
    color: var(--ink-2);
    border-bottom-color: var(--rule);
  }
  .reference-card__row {
    border-bottom-color: var(--rule);
  }
  .reference-card__label {
    color: var(--ink-2);
  }
  .reference-card__value {
    color: var(--ink);
  }
  .reference-card__value a {
    border-bottom-color: var(--rule);
  }
  .reference-card__value a:hover {
    border-bottom-color: var(--ink);
  }
  /* Emergency callout (maintenance form) — base uses hardcoded #fff4e6
     (light cream) which clashes with the light-cream --ink text in dark
     mode. Re-anchor to paper-2 with the warm accent rule. */
  .emergency-callout {
    background: var(--paper-2);
    border-color: var(--warm);
    border-left-color: var(--warm);
  }
  .emergency-callout__phone:hover {
    color: var(--warm-soft);
  }
  /* Site header dropdown — invert hover state */
  .site-header .dropdown-item:hover,
  .site-header .dropdown-item:focus {
    background: rgba(220, 103, 85, 0.14);
    color: var(--warm);
  }
  /* Buttons — primary still pops */
  .btn-warm {
    background: var(--warm);
    color: #1a1612; /* dark text on bright button stays readable */
  }
  .btn-warm:hover, .btn-warm:focus {
    background: var(--warm-soft);
    color: #1a1612;
  }
  /* Testimonials — featured uses warm-tinted dark panel */
  .testimonial--featured {
    background: rgba(220, 103, 85, 0.08);
    border-color: var(--warm);
  }
  .testimonial::before {
    color: rgba(220, 103, 85, 0.18);
  }
  .testimonial--featured::before {
    color: rgba(220, 103, 85, 0.4);
  }
  /* Article cards & similar containers — shadows need more punch */
  .article-card:hover {
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  }
  .place:hover, .person:hover {
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.4);
  }
  /* Hero & forms — subtle adjustments */
  .form-control, .form-select {
    background-color: var(--paper-2);
    border-color: var(--rule);
    color: var(--ink);
  }
  .form-control:focus, .form-select:focus {
    background-color: var(--paper-2);
    border-color: var(--warm);
    color: var(--ink);
    box-shadow: 0 0 0 0.2rem rgba(220, 103, 85, 0.18);
  }
  .form-control::placeholder {
    color: var(--ink-3);
    opacity: 0.7;
  }
  /* Note-card sticky — tweak from yellow paper to deeper warm */
  .note-card {
    background: #2a2018;
    box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.35);
  }
  /* Image dimming — subtle, only on large covers/photos */
  .place__photo-img,
  .person__photo-img,
  .article-card__cover img,
  .article__cover img,
  .property-header__photo img {
    filter: saturate(0.78) contrast(0.95) brightness(0.88);
  }
  /* Owner-callout — warm cream → warm dark panel */
  .owner-callout {
    background: var(--paper-2);
    border-color: var(--rule);
    border-left-color: var(--warm);
  }
  /* App explainer (apply.html) */
  .app-explainer {
    background: var(--paper-2);
    border-color: var(--rule);
    border-left-color: var(--warm);
  }
  /* 404 page */
  .notfound__num {
    color: var(--warm);
  }
  /* Form-stage step pill — active stays bright */
  .form-stage__step--active {
    background: var(--warm);
    color: #1a1612;
    border-color: var(--warm);
  }
  .form-stage__step--complete {
    background: rgba(237, 229, 210, 0.06);
  }
  /* Bootstrap .text-secondary uses --bs-secondary-color with low opacity,
     which fades into the dark surface. Re-anchor to --ink-2 for legible body
     contrast without losing the secondary-vs-primary hierarchy. */
  .text-secondary {
    color: var(--ink-2) !important;
  }
  /* FAQ intro copy — base uses --ink-3 which is too dim against --paper. */
  .faq-section__intro {
    color: var(--ink-2);
  }
  /* Final-submit confirmation panel — base uses hardcoded #fff4e6 which
     clashes with light text in dark mode. Match the emergency-callout pattern. */
  .app-final-panel {
    background: var(--paper-2);
    border-color: var(--warm);
    border-left-color: var(--warm);
  }
  /* Severity option checked state — base uses cream #fff4e6 background, so
     the title needs a dark text color to stay legible in dark mode. */
  .severity-option__radio:checked + .severity-option__label .severity-option__title {
    color: #1a1612;
  }
  /* Bootstrap alerts (flash messages) — Bootstrap's subtle/emphasis tokens are
     only remapped under [data-bs-theme="dark"], not prefers-color-scheme, so
     under our system-driven dark mode they keep light pastel surfaces. Remap
     them to our palette so flashes read against the dark canvas. */
  .alert {
    --bs-alert-bg: var(--paper-2);
    --bs-alert-color: var(--ink);
    --bs-alert-border-color: var(--rule);
    --bs-alert-link-color: var(--ink);
  }
  .alert-primary,
  .alert-danger {
    --bs-alert-border-color: var(--warm);
    --bs-alert-link-color: var(--warm-soft);
  }
  .alert-warning {
    --bs-alert-border-color: var(--honey);
    --bs-alert-link-color: var(--honey);
  }
  .alert-success {
    --bs-alert-border-color: var(--ink-2);
    --bs-alert-link-color: var(--ink);
  }
  .alert-info {
    --bs-alert-border-color: var(--ink-3);
    --bs-alert-link-color: var(--ink-2);
  }
}
/* ── Mapbox address autofill ─────────────────────────────── */
mapbox-address-autofill {
  display: block;
}

/* ── 51. Long-form article content ────────────────────────── */
.article {
  max-width: 700px;
  margin: 0 auto;
}

.article__cover {
  margin: 0 0 2.5rem;
  height: clamp(220px, 40vw, 420px);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}

.article__head {
  margin-bottom: 2rem;
}

.article__cat {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm);
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.article__cat::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1.5px;
  background: var(--warm);
}

.article__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  letter-spacing: -0.026em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1rem;
}

.article__byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-3);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.article__byline strong {
  color: var(--ink-2);
  font-weight: 600;
}

.article__byline-sep {
  color: var(--rule-2);
}

.article__body {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.article__body > p {
  margin-bottom: 1.4rem;
}

.article__body > p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3.5rem;
  float: left;
  line-height: 0.85;
  margin: 0.35rem 0.6rem 0 0;
  color: var(--warm);
}

.article__body h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}

.article__body h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 2rem 0 0.85rem;
  line-height: 1.25;
}

.article__body ul, .article__body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.article__body li {
  margin-bottom: 0.55rem;
  line-height: 1.6;
}

.article__body strong {
  color: var(--ink);
  font-weight: 500;
}

.article__body em {
  font-style: italic;
}

.article__body blockquote {
  border-left: 3px solid var(--warm);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.6;
}

.article__body code {
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
  border: 1px solid var(--rule);
}

.article__pull {
  margin: 2.5rem -2rem;
  padding: 1.75rem 2rem;
  background: var(--warm-pale);
  border-top: 2px solid var(--warm);
  border-bottom: 2px solid var(--warm);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--warm);
  font-style: italic;
  letter-spacing: -0.008em;
}

@media (max-width: 800px) {
  .article__pull {
    margin: 2rem 0;
  }
}
.article__author {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.article__author-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--rule);
}

.article__author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__author-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.article__author-bio {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* ==================== Lease document (view-only, /lease) ==================== */
/* The lease body partial is shared with the plain document DocuSeal receives;
   these styles make it sit naturally in the site. The page is deliberately
   hard to copy: unselectable, watermarked, excluded from printing. */
.lease-doc__notice {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}

.lease-doc {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}

.lease-doc__page {
  padding: 2.5rem 2.75rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 575.98px) {
  .lease-doc__page {
    padding: 1.5rem 1.1rem;
  }
}
.lease-doc__page h1 {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.lease-doc__page .version-line {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}

.lease-doc__page h2 {
  font-size: 1.05rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 0.2rem;
}

.lease-doc__page ol.sections > li {
  margin-bottom: 0.7rem;
}

.lease-doc__page ol.sections ol {
  list-style-type: lower-alpha;
  margin-top: 0.4rem;
}

.lease-doc__page ol.sections ol > li {
  margin-bottom: 0.35rem;
}

.lease-doc__page .terms-box {
  border: 1px solid var(--ink-2);
  padding: 0.7rem 1rem;
  margin: 1.1rem 0;
  max-width: 26rem;
}

.lease-doc__page .terms-box p {
  margin: 0.25rem 0;
}

.lease-doc__page .signature-block {
  margin-top: 1.8rem;
}

.lease-doc__page .signature-block .identity {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

/* DocuSeal field tags render as the blanks they become in the document */
.lease-doc__page text-field,
.lease-doc__page date-field,
.lease-doc__page signature-field {
  display: inline-block;
  border-bottom: 1px solid var(--ink-2);
  vertical-align: bottom;
}

.lease-doc__watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 4.5rem 5rem;
  align-content: space-between;
  justify-content: space-around;
  padding: 2rem 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}

.lease-doc__watermark span {
  transform: rotate(-24deg);
}

/* Printing the page is just another copy path — print the pointer, not the lease */
@media print {
  .lease-doc {
    display: none;
  }
  .lease-doc__notice::after {
    content: " This document does not print — read it at dgapartments.com/lease.";
  }
}
/* ==========================================================================
   Lease signing (sites/tenants/lease_signings/show)

   The tenant-facing signing page: the renter's-insurance gate, the "does this
   look right?" confirmation, and the embedded lease. One column, because the
   page only ever asks one thing at a time — see the view for why the gate and
   the lease are never both on screen.
   ========================================================================== */
.lease-signing {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem clamp(3rem, 8vw, 5rem);
}

.lease-signing__head {
  margin-bottom: 2rem;
}

.lease-signing__head h1 {
  margin: 0 0 0.35rem;
}

.lease-signing__address {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
  margin: 0;
}

.lease-signing h2 {
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
}

.lease-signing h3 {
  font-family: var(--sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bs-tertiary-color);
  margin: 2rem 0 0.6rem;
}

/* The one thing standing between the tenant and their lease — stated plainly,
   never in red: not being covered yet is a normal state, not an error. */
.lease-signing__blocked {
  background: var(--warm-pale);
  border-left: 3px solid var(--ink);
  padding: 0.9rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.lease-signing__ok {
  background: var(--bs-secondary-bg);
  border-left: 3px solid var(--ink);
  padding: 0.9rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
}

/* The Lemonade block is a .link-group now and takes that spacing — the same
   treatment as the public renter's-insurance page. Overriding it here is what
   made the cards sit too tight against the upload form. */
.lease-signing__upload,
.lease-signing__confirm {
  margin-bottom: 1.5rem;
}

.lease-signing__lemonade {
  margin-top: 2rem;
}

/* The two steps before signing. Numbered and boxed because the occupants
   question is the one thing the tenant has to supply, it changes the document
   they are about to sign, and as a plain caption above the lease it was read
   as a heading and scrolled past. */
.lease-signing__steps {
  list-style: none;
  counter-reset: signstep;
  margin: 1.75rem 0;
  padding: 0;
}

.lease-signing__step {
  counter-increment: signstep;
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 3.25rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-bottom: 0.85rem;
}

.lease-signing__step::before {
  content: counter(signstep);
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lease-signing__step h3 {
  margin: 0 0 0.4rem;
  /* Overrides the uppercase eyebrow treatment the other h3s use — these are
     real headings, not section labels. */
  font-family: var(--bs-body-font-family);
  font-size: 1.15rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.lease-signing__step p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.5rem;
}

.lease-signing__step .lease-signing__form {
  margin: 0.75rem 0 0;
}

.lease-signing__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.lease-signing__form input[type=file],
.lease-signing__form input[type=text],
.lease-signing__form input[type=date] {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  flex: 1 1 16rem;
  min-width: 0;
}

.lease-signing__form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  flex: 1 1 14rem;
}

/* What we read off their policy, for confirming. Definition list rather than a
   table: it is four facts, and a table implies columns to compare. */
.lease-signing__parsed {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.45rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.lease-signing__parsed dt {
  color: var(--bs-tertiary-color);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: center;
}

.lease-signing__parsed dd {
  margin: 0;
  color: var(--ink);
}

/* Correcting is deliberately the quieter path — most readings are right, and a
   correction sends the policy to a human. */
.lease-signing__fix {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.lease-signing__fix summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  letter-spacing: 0.02em;
}

.lease-signing__fix summary:hover {
  color: var(--ink);
}

/* Reading the lease is a real step, not a footnote — the embed shows page
   images that blur when zoomed, so on a phone this button IS how the document
   gets read. As an inline text link it read as an aside and was skipped. */
/* The finished state. Signing is done, but the keys are not — the money owed
   before move-in is boxed so it cannot be skimmed past. */
.lease-signing__done h2 {
  margin-bottom: 0.6rem;
}

.lease-signing__done p {
  margin: 0 0 0.9rem;
}

.lease-signing__owed {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm, #b5762f);
  padding: 1rem 1.15rem 0.35rem;
  margin: 1.25rem 0;
  background: var(--warm-pale, rgba(0, 0, 0, 0.03));
}

.lease-signing__owed h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.6rem;
}

.lease-signing__owed-table {
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 0.9rem 0;
}

.lease-signing__owed-table > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule);
}

.lease-signing__owed-table dt {
  margin: 0;
}

.lease-signing__owed-table dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.lease-signing__owed-total {
  font-weight: 700;
  border-bottom: none !important;
}

.lease-signing__movein {
  font-family: var(--sans);
  font-size: 0.95rem;
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}

.btn-quiet:hover {
  border-color: var(--ink);
}

.lease-signing__pdf {
  margin: 0.9rem 0 0;
}

.lease-signing__pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.lease-signing__pdf-icon {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
}

.lease-signing__pdf-icon svg {
  width: 100%;
  height: 100%;
}

.lease-signing__pdf .lease-signing__note {
  margin-top: 0.45rem;
}

.lease-signing__error {
  font-family: var(--sans);
  font-size: 0.95rem;
  border-left: 3px solid #b4463c;
  background: rgba(180, 70, 60, 0.06);
  padding: 0.6rem 0.85rem;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* Corrections are one-line answers, so they get one-line boxes. The base form
   sizes its inputs around the file picker (flex-basis 16rem), which turns four
   short fields into four full-width bars. */
.lease-signing__form--tight {
  gap: 0.6rem 0.9rem;
  margin: 0.75rem 0;
}

.lease-signing__form--tight label {
  flex: 0 1 11rem;
  gap: 0.2rem;
  font-size: 0.75rem;
}

.lease-signing__form--tight input[type=text],
.lease-signing__form--tight input[type=date] {
  flex: 1 1 auto;
  width: 100%;
  padding: 0.3rem 0.45rem;
  font-size: 0.88rem;
}

/* The address is the one that genuinely needs room. */
.lease-signing__form--tight label:nth-of-type(4) {
  flex: 1 1 16rem;
}

@media (max-width: 32rem) {
  .lease-signing__form--tight label,
  .lease-signing__form--tight label:nth-of-type(4) {
    flex: 1 1 100%;
  }
}
.lease-signing__note,
.lease-signing__help {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--bs-tertiary-color);
  line-height: 1.55;
}

.lease-signing__help {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

/* The provider's form renders inside here. Min-height so the page does not
   collapse while the embed script is still loading. */
.lease-signing__embed {
  min-height: 60vh;
  margin: 1.5rem 0;
  /* The document is always on white paper, whatever the page around it. This
     site is dark-themed and the embed inherits `color`, which drew the
     signature and date fields in near-white ink ON the white document. */
  color: #1f1d1a;
}

.lease-signing__embed * {
  color: #1f1d1a;
}

/* The document itself, on a phone. The embed renders the lease at a width that
   is legible in a 46rem column and unreadable in a 22rem one, and there is no
   font control to reach into — the only lever is giving it more room. So on
   narrow screens it breaks out of the page's side padding and uses the full
   viewport, and gets taller so less of it is lost to scrolling. */
@media (max-width: 40rem) {
  .lease-signing__embed {
    margin-left: calc(-1 * clamp(0.75rem, 5vw, 1.25rem));
    margin-right: calc(-1 * clamp(0.75rem, 5vw, 1.25rem));
    min-height: 85vh;
  }
  .lease-signing__embed docuseal-form {
    display: block;
    width: 100%;
  }
}
/* Who is on the lease, and who else lives there — shown before we ask them to
   change it. */
.lease-signing__household {
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 0.9rem 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--warm-pale, rgba(0, 0, 0, 0.04));
  border-radius: 3px;
}

.lease-signing__household dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.15rem;
}

.lease-signing__household dd {
  margin: 0 0 0.7rem;
}

.lease-signing__household dd:last-child {
  margin-bottom: 0;
}

.lease-signing__step--done > h3::after {
  content: " ✓";
  color: #2f7d5c;
}

.lease-signing__embed button,
.lease-signing__embed a {
  color: revert;
}

/* ==========================================================================
   Reading a renter's-insurance policy

   OCR on a real multi-page certificate has measured at three minutes, so this
   wait is genuinely long. A static line of text reads as "nothing happened"
   and gets a second upload; a document being scanned reads as work in
   progress. The page polls itself, so this state ends on its own.
   ========================================================================== */
.lease-signing__processing {
  text-align: center;
  padding: 2.5rem 1.25rem 2rem;
}

.lease-signing__processing h2 {
  margin: 1.75rem 0 0.5rem;
}

.lease-signing__processing p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto 0.5rem;
}

/* The document, drawn rather than illustrated — a page with text lines and a
   beam travelling down it. */
.scan {
  position: relative;
  width: 108px;
  height: 138px;
  margin: 0 auto;
}

.scan__doc {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}

.scan__line {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: var(--bs-tertiary-bg);
}

.scan__line--short {
  width: 58%;
}

/* The beam. `mix-blend-mode` keeps it reading as light passing OVER the page
   rather than a bar drawn on top of it. */
.scan__beam {
  position: absolute;
  left: -6%;
  width: 112%;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(196, 77, 62, 0) 0%, rgba(196, 77, 62, 0.35) 45%, rgba(196, 77, 62, 0.55) 50%, rgba(196, 77, 62, 0.35) 55%, rgba(196, 77, 62, 0) 100%);
  box-shadow: 0 0 14px rgba(196, 77, 62, 0.45);
  animation: scan-sweep 2.1s ease-in-out infinite;
}

@keyframes scan-sweep {
  0% {
    top: -14px;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: 124px;
    opacity: 0;
  }
}
/* Anyone who has asked not to see motion gets a still document and the text,
   which carry the same information. */
@media (prefers-reduced-motion: reduce) {
  .scan__beam {
    animation: none;
    top: 50%;
    opacity: 0.5;
  }
}