:root {
  --merkle-color-primary: #bf1e2d;
  --merkle-color-primary-deep: #8b1520;
  --merkle-color-secondary: #12110f;
  --merkle-color-background: #f4efe7;
  --merkle-color-surface: #fffdf8;
  --merkle-color-surface-strong: #f8f1e8;
  --merkle-color-text: #231f1a;
  --merkle-color-text-muted: #6c655d;
  --merkle-color-border: rgba(35, 31, 26, 0.12);
  --merkle-color-accent: #c8a56a;
  --merkle-shadow-lg: 0 32px 80px rgba(30, 23, 17, 0.12);
  --merkle-shadow-md: 0 20px 48px rgba(30, 23, 17, 0.1);
  /* Squared editorial aesthetic — cards, hero, media all share zero radius.
     Buttons and pills use --merkle-radius-pill explicitly. */
  --merkle-radius-card: 0;
  --merkle-radius-xl: 0;
  --merkle-radius-lg: 0;
  --merkle-radius-md: 0;
  --merkle-radius-pill: 999px;
  --merkle-space-8: 8px;
  --merkle-space-10: 10px;
  --merkle-space-12: 12px;
  --merkle-space-16: 16px;
  --merkle-space-20: 20px;
  --merkle-space-24: 24px;
  --merkle-space-32: 32px;
  --merkle-space-40: 40px;
  --merkle-space-48: 48px;
  --merkle-space-64: 64px;
  --merkle-space-80: 80px;
  --merkle-space-96: 96px;
}

html {
  scroll-behavior: smooth;
}

body,
body.wp-singular,
body.single-listing,
body.page-template-default,
body.page,
body.archive {
  margin: 0;
  color: var(--merkle-color-text);
  background: var(--merkle-color-background) !important;
  font-family: "Manrope", sans-serif;
}

/* FSE renders <main> wrappers that inherit theme.json background colors.
   Force them transparent so the body's warm cream shows through everywhere. */
.wp-site-blocks,
.wp-block-template-part,
main.wp-block-group,
main.wp-block-post-content {
  background: transparent;
}

body.page-template-page-mortgageCalc {
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 0.95;
}

h2 {
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  line-height: 0.98;
}

h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
}

p {
  margin: 0;
}

a {
  color: var(--merkle-color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--merkle-color-primary-deep);
}

.wp-site-blocks {
  overflow: clip;
}

.wp-block-group main,
main.wp-block-group {
  /* Bottom padding only needs to separate the last content block from
   * the footer's own internal padding-top — anything bigger stacks
   * with the footer margin/padding and produces a gulf of dead space
   * between content and footer (was 80px → ~224px total gap). */
  padding-block: var(--merkle-space-24) var(--merkle-space-32);
}

.wp-element-button,
.wp-block-button__link.wp-element-button,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--merkle-color-primary), var(--merkle-color-primary-deep));
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px rgba(139, 21, 32, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link.wp-element-button:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 20px 36px rgba(139, 21, 32, 0.24);
}

.merkle-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Split into block + inline so child overrides (e.g. `.home
   * .merkle-site-header`) that only need different vertical padding
   * cannot clobber the horizontal gutter via the `padding` shorthand.
   * The inline value is the minimum gutter at every screen size — without
   * it the header content hugs the viewport edge between the mobile
   * breakpoint (782px) and the alignwide max-width (~1400px). */
  padding-block: 16px;
  padding-inline: var(--merkle-space-20);
  background: rgba(251, 248, 242, 0.86);
  border-bottom: 1px solid rgba(35, 31, 26, 0.08);
  backdrop-filter: blur(20px);
}

.merkle-site-header .wp-block-navigation {
  font-size: 0.95rem;
  font-weight: 600;
}

.merkle-site-header .wp-block-buttons {
  margin-left: var(--merkle-space-20);
}

.merkle-site-footer {
  /* margin-top dropped — main.wp-block-group's padding-bottom already
   * separates the last content block from the footer top edge, and
   * the footer's own padding-top below provides visual breathing
   * room before the footer text. The previous 80px margin stacked
   * with everything else into a 200+px gulf. */
  margin-top: 0;
  /* Split into block + inline so the homepage's `.home .merkle-site-footer`
   * override (which only wants different vertical padding) cannot
   * clobber horizontal padding via the `padding` shorthand. The
   * inline value protects mobile from going edge-to-edge. */
  padding-block: var(--merkle-space-48) var(--merkle-space-32);
  padding-inline: var(--merkle-space-20);
  background:
    radial-gradient(circle at top right, rgba(200, 165, 106, 0.18), transparent 32%),
    linear-gradient(180deg, #1b1815 0%, #12110f 100%);
  color: rgba(255, 255, 255, 0.82);
}

.merkle-site-footer a,
.merkle-site-footer .wp-block-heading,
.merkle-site-footer p,
.merkle-site-footer li {
  color: inherit;
}

.merkle-site-footer .custom-logo,
.merkle-site-footer .wp-block-site-logo img {
  /* Crush all colour channels to 0 first, then invert — yields a
   * pure white silhouette with no chroma left to alias. The previous
   * `invert(1) brightness(10)` chain inverted the red logo to cyan
   * and then amplified the cyan-tinted antialiased edges, which is
   * what produced the bluish fringe. */
  filter: brightness(0) invert(1);
}

/* Minimum horizontal gutter for every top-level content wrapper, applied at
 * all screen sizes. Without this, between the mobile breakpoint (782px) and
 * the alignwide max-width (~1400px) these wrappers stretch to fill main and
 * their content sits flush against the viewport edge. The mobile @media
 * block below also sets these wrappers to width:auto + margin:0 so the
 * gutter is visible after alignwide stops constraining width. */
.merkle-home,
.merkle-page-shell,
.merkle-listing-archive,
.merkle-testimonials-page,
.merkle-mortgage-page,
.merkle-page-title {
  padding-left: var(--merkle-space-20);
  padding-right: var(--merkle-space-20);
  box-sizing: border-box;
}

.merkle-home,
.merkle-page-shell {
  display: grid;
  gap: var(--merkle-space-64);
}

.merkle-home__hero,
.merkle-page-shell__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: var(--merkle-space-32);
  align-items: end;
  min-height: min(78svh, 880px);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(21, 16, 12, 0.56), rgba(21, 16, 12, 0.26)),
    var(--merkle-hero-image, linear-gradient(120deg, rgba(191, 30, 45, 0.18), rgba(200, 165, 106, 0.12))) center/cover no-repeat,
    linear-gradient(120deg, rgba(191, 30, 45, 0.12), rgba(200, 165, 106, 0.08));
  box-shadow: var(--merkle-shadow-lg);
}

.merkle-page-shell__hero {
  grid-template-columns: 1fr;
  min-height: auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 241, 232, 0.94)),
    linear-gradient(120deg, rgba(191, 30, 45, 0.12), rgba(200, 165, 106, 0.08));
}

.merkle-home__hero-copy,
.merkle-page-shell__hero {
  align-self: center;
}

.merkle-home__hero-copy h1,
.merkle-home__hero-copy .merkle-home__lede,
.merkle-home__hero-copy .merkle-home__text-link {
  color: #fff;
}

.merkle-home__hero-copy .merkle-home__eyebrow {
  color: #f3d09e;
}

.merkle-home__eyebrow,
.merkle-home__panel-label {
  display: inline-flex;
  align-items: center;
  gap: var(--merkle-space-8);
  margin-bottom: var(--merkle-space-16);
  color: var(--merkle-color-primary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.merkle-home__lede,
.merkle-page-shell__hero p {
  color: var(--merkle-color-text-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.merkle-home__lede {
  margin-top: var(--merkle-space-20);
}

.merkle-page-shell__hero p + p,
.merkle-page-shell__hero h2 + p {
  margin-top: var(--merkle-space-16);
}

.merkle-page-shell__hero .merkle-page-shell__actions {
  margin-top: var(--merkle-space-24);
}

.merkle-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--merkle-space-16);
  margin-top: var(--merkle-space-32);
}

.merkle-home__hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--merkle-space-16);
  margin-top: var(--merkle-space-24);
}

.merkle-home__hero-links a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 700;
}

.merkle-home__hero-links a:hover,
.merkle-home__hero-links a:focus {
  color: #fff;
}

.merkle-home__text-link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 8px;
  color: var(--merkle-color-secondary);
  font-weight: 700;
}

.merkle-home__hero-panel,
.merkle-home__search-shell,
.merkle-page-shell__content,
.merkle-page-shell__support-card,
.merkle-home__calculator-card {
  position: relative;
}

.merkle-home__search-shell {
  padding: var(--merkle-space-24);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 32px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-home__utility-grid,
.merkle-home__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--merkle-space-24);
}

.merkle-home__utility-card,
.merkle-home__guide-card,
.merkle-home__service-copy,
.merkle-home__service-list {
  display: grid;
  gap: var(--merkle-space-16);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-home__utility-card--accent {
  background:
    linear-gradient(135deg, rgba(191, 30, 45, 0.92), rgba(139, 21, 32, 0.92)),
    linear-gradient(120deg, rgba(200, 165, 106, 0.22), rgba(255, 255, 255, 0.08));
}

.merkle-home__utility-card--accent h2,
.merkle-home__utility-card--accent p,
.merkle-home__utility-card--accent .merkle-home__eyebrow {
  color: #fff;
}

.merkle-home__utility-card--accent .wp-element-button {
  background: #fff;
  color: var(--merkle-color-primary-deep);
  box-shadow: none;
}

.merkle-home__guide-grid,
.merkle-home__specialty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--merkle-space-24);
}

.merkle-home__guide-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 241, 232, 0.92)),
    linear-gradient(120deg, rgba(191, 30, 45, 0.08), rgba(200, 165, 106, 0.08));
}

.merkle-home__specialty-link {
  display: grid;
  gap: var(--merkle-space-12);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--merkle-color-secondary);
  box-shadow: var(--merkle-shadow-md);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.merkle-home__specialty-link strong {
  font-size: 1.1rem;
}

.merkle-home__specialty-link span {
  color: var(--merkle-color-text-muted);
}

.merkle-home__specialty-link:hover,
.merkle-home__specialty-link:focus {
  transform: translateY(-3px);
  border-color: rgba(191, 30, 45, 0.24);
  box-shadow: 0 28px 56px rgba(30, 23, 17, 0.14);
}

.merkle-home__service-list {
  align-content: start;
}

.merkle-home__service-item {
  padding-bottom: var(--merkle-space-16);
  border-bottom: 1px solid rgba(35, 31, 26, 0.08);
}

.merkle-home__service-item:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.merkle-home__service-actions {
  margin-top: var(--merkle-space-8);
}

.merkle-home__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--merkle-space-20);
}

.merkle-home__highlights > div,
.merkle-home__highlights > article,
.merkle-testimonial-card {
  padding: var(--merkle-space-24);
  border: 1px solid var(--merkle-color-border);
  border-radius: var(--merkle-radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-home__metric {
  margin-bottom: var(--merkle-space-12);
  color: var(--merkle-color-secondary);
  font-size: 1.05rem;
  font-weight: 800;
}

.merkle-home__highlights p:last-child,
.merkle-testimonial-card p {
  color: var(--merkle-color-text-muted);
}

.merkle-home__section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--merkle-space-24);
  align-items: end;
}

.merkle-home__listing-grid,
.merkle-featured-grid,
.merkle-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--merkle-space-24);
}

.merkle-featured-carousel {
  display: grid;
  gap: var(--merkle-space-20);
}

.merkle-featured-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 32%);
  gap: var(--merkle-space-24);
  overflow-x: auto;
  padding-bottom: var(--merkle-space-8);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.merkle-featured-carousel__track::-webkit-scrollbar {
  display: none;
}

.merkle-featured-carousel__slide {
  scroll-snap-align: start;
}

.merkle-featured-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--merkle-space-12);
}

.merkle-featured-carousel__button {
  min-height: 46px;
  padding: 0 18px;
}

.merkle-featured-grid--expanded {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.merkle-featured-card,
.merkle-listing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--merkle-shadow-md);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.merkle-featured-card:hover,
.merkle-listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(30, 23, 17, 0.16);
}

.merkle-featured-card__media,
.merkle-listing-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, var(--merkle-color-surface-strong) 0%, var(--merkle-color-background) 100%);
}

.merkle-featured-card__media img,
.merkle-listing-card__media img,
.merkle-featured-card__placeholder,
.merkle-listing-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merkle-featured-card__body,
.merkle-listing-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--merkle-space-12);
  padding: var(--merkle-space-24);
}

.merkle-featured-card__eyebrow,
.merkle-listing-card__eyebrow,
.merkle-featured-card__address,
.merkle-listing-card__address {
  color: var(--merkle-color-text-muted);
  font-size: 0.92rem;
}

.merkle-featured-card__price,
.merkle-listing-card__price {
  color: var(--merkle-color-primary);
  font-size: 1.45rem;
  font-weight: 800;
}

.merkle-open-house-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--merkle-space-24);
}

.merkle-open-house-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--merkle-shadow-md);
}

.merkle-open-house-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(180deg, var(--merkle-color-surface-strong) 0%, var(--merkle-color-background) 100%);
}

.merkle-open-house-card__media img,
.merkle-open-house-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merkle-open-house-card__body {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
}

.merkle-open-house-card__eyebrow,
.merkle-open-house-card__address,
.merkle-open-house-card__remarks {
  color: var(--merkle-color-text-muted);
  font-size: 0.92rem;
}

.merkle-open-house-card__schedule {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-size: 1rem;
  font-weight: 800;
}

.merkle-open-house-card__price {
  color: var(--merkle-color-primary);
  font-size: 1.35rem;
  font-weight: 800;
}

.merkle-open-house-card__actions {
  margin-top: auto;
}

.merkle-featured-spotlight,
.merkle-open-house-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: var(--merkle-space-24);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 241, 232, 0.92));
  box-shadow: var(--merkle-shadow-md);
}

.merkle-featured-spotlight__media {
  display: block;
  min-height: 320px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(191, 30, 45, 0.22), rgba(200, 165, 106, 0.2)),
    linear-gradient(180deg, #d8c2b6 0%, #f0e2d6 100%);
}

.merkle-featured-spotlight__media img,
.merkle-featured-spotlight__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.merkle-featured-spotlight__content,
.merkle-open-house-highlight > div:first-child {
  display: grid;
  align-content: center;
  gap: 14px;
}

.merkle-featured-spotlight__price {
  margin: 0;
  color: var(--merkle-color-primary);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800;
}

.merkle-open-house-highlight__schedule {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800;
}

.merkle-featured-spotlight__address {
  margin: 0;
  color: var(--merkle-color-text-muted);
}

.merkle-open-house-highlight__note {
  display: grid;
  align-content: end;
  padding: 18px 0 0;
  color: var(--merkle-color-text-muted);
}

.merkle-open-house-empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: #fff;
}

.merkle-page-shell__support {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: var(--merkle-space-24);
  align-items: start;
}

.merkle-page-shell__support > div:first-child {
  padding: var(--merkle-space-24) 0;
}

.merkle-testimonial-card {
  display: grid;
  gap: var(--merkle-space-16);
}

.merkle-testimonial-card strong {
  color: var(--merkle-color-secondary);
}

.merkle-property-search {
  display: grid;
  gap: var(--merkle-space-24);
}

.merkle-property-search--compact {
  gap: 0;
}

/* Compact variant — used on the homepage hero (archiveOnly=true).
 * The full-archive form lives in a 1200px content area where a 3-col
 * grid works; the homepage panel is roughly half the viewport, so we
 * use an explicit layout that wraps cleanly inside the panel:
 *   Row 1: Location + Property Type (each spanning 2 cols of 4)
 *   Row 2: Min Price · Max Price · Beds · Baths (one col each)
 *   Row 3: Search button (full width)
 * Mobile fallback: single column stack. */
.merkle-property-search--compact .merkle-property-search__form {
  grid-template-columns: 1fr;
}

.merkle-property-search--compact .merkle-property-search__actions {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .merkle-property-search--compact .merkle-property-search__form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .merkle-property-search--compact .merkle-property-search__field--location,
  .merkle-property-search--compact .merkle-property-search__field--property-type {
    grid-column: span 2;
  }
}

.merkle-property-search__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--merkle-space-16);
  padding: var(--merkle-space-20);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  align-items: end;
}

.merkle-property-search__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--merkle-space-24);
}

.merkle-property-search__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  flex-wrap: wrap;
}

.merkle-property-search__view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.merkle-property-search__view-switch--below {
  margin-top: var(--merkle-space-16);
  margin-bottom: var(--merkle-space-16);
}

.merkle-property-search__view-button,
.merkle-property-search__page-button {
  padding: 9px 14px;
  border: 1px solid var(--merkle-color-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--merkle-color-primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.merkle-property-search__view-button.is-active,
.merkle-property-search__page-button.is-active,
.merkle-property-search__view-button:hover,
.merkle-property-search__page-button:hover,
.merkle-property-search__view-button:focus-visible,
.merkle-property-search__page-button:focus-visible {
  background: var(--merkle-color-primary);
  border-color: var(--merkle-color-primary);
  color: #fff;
}

.merkle-property-search__page-button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.merkle-property-search__toolbar-controls {
  display: flex;
  gap: var(--merkle-space-16);
  flex-wrap: wrap;
}

.merkle-property-search__toolbar-field {
  display: grid;
  gap: 8px;
  min-width: 180px;
}

.merkle-property-search__toolbar-field span {
  color: var(--merkle-color-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-property-search__shell--listings {
  display: grid;
  gap: var(--merkle-space-24);
}

.merkle-property-search__shell--map {
  grid-template-columns: 1fr;
  align-items: start;
}

.merkle-property-search__shell--list .merkle-property-search__map-panel {
  display: none;
}

.merkle-property-search__shell--map .merkle-property-search__results,
.merkle-property-search__shell--map .merkle-property-search__pagination,
.merkle-property-search__shell--map .merkle-property-search__sentinel,
.merkle-property-search__shell--map .merkle-property-search__status {
  display: none;
}

.merkle-property-search__map-panel {
  position: sticky;
  top: 110px;
}

.merkle-property-search__map {
  min-height: 70vh;
  border: 1px solid rgba(35, 31, 26, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.merkle-property-search__content-panel {
  display: grid;
  gap: var(--merkle-space-16);
}

.merkle-property-search__summary,
.merkle-property-search__status {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-property-search__status {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 0;
  text-align: center;
}

/* Honor the `hidden` HTML attribute. The default browser style for
 * [hidden] is `display: none` without !important, so the
 * `display: grid` above clobbers it and the "Loading Listings"
 * spinner stays visible after each fetch settles. */
.merkle-property-search__status[hidden] {
  display: none;
}

/* Single-listing description: 75-word cap + "Read more" toggle.
 * Everything renders inline inside one <p>: preview text, an
 * ellipsis span, a hidden remainder span, and the toggle button.
 * Click flips the ellipsis off and the remainder on, so the
 * paragraph reads as if it were un-truncated all along. */
.merkle-listing-description__rest,
.merkle-listing-description__ellipsis {
  /* Inline by default; browser's [hidden] default = display:none
   * handles the toggle. No `display` override on .__rest or
   * .__ellipsis themselves. */
}

/* Toggle is rendered as a plain inline text link rather than a
 * pill button. The global `button` rule near the top of this file
 * paints every <button> as a 52px-tall pill with a red gradient
 * background — we override every relevant property to flatten it
 * into a colored, underlined word that flows with the surrounding
 * paragraph. */
.merkle-listing-description__toggle {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--merkle-color-primary);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.merkle-listing-description__toggle:hover,
.merkle-listing-description__toggle:focus-visible {
  /* Cancel the global button:hover transform/shadow tweaks too. */
  transform: none;
  box-shadow: none;
  background: transparent;
  color: var(--merkle-color-primary-deep, var(--merkle-color-primary));
  text-decoration-thickness: 2px;
}

.merkle-property-search__status::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid rgba(35, 31, 26, 0.14);
  border-top-color: var(--merkle-color-accent);
  border-radius: 999px;
  animation: merkle-spin 0.8s linear infinite;
}

.merkle-property-search__pagination-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.merkle-property-search__sentinel {
  height: 1px;
}

.merkle-property-search__popup {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.merkle-property-search__popup img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.merkle-property-search__popup-type {
  color: var(--merkle-color-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-property-search__field {
  display: grid;
  gap: var(--merkle-space-8);
  min-width: 0;
}

.merkle-property-search__field--location {
  grid-column: 1 / -1;
}

.merkle-property-search__field label {
  color: var(--merkle-color-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-property-search__actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  flex-wrap: wrap;
}

/* Segmented LIST/MAP toggle. Container is the light "track"; the red
   highlight is rendered as a ::before pseudo-element that's positioned
   over the active pill and slides via a transform when the active pill
   changes. Pills are transparent over the track; text crossfades from
   dark (inactive) to white (over the slider) via a color transition. */
.merkle-property-search__view-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 4px;
  background: var(--merkle-color-surface-strong);
  border: 1px solid var(--merkle-color-border);
  border-radius: 999px;
  box-sizing: border-box;
}

/* The sliding red pill. Sized to match a single tab cell exactly:
   half the toggle's content area minus the 4px track padding. */
.merkle-property-search__view-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--merkle-color-primary);
  box-shadow: 0 6px 14px rgba(139, 21, 32, 0.18);
  transition: transform 280ms ease-in-out;
}

/* When the second tab (MAP) is the active one, slide the highlight
   right by exactly one cell-width. Uses :has() to react to the JS
   class swap on the pills. */
.merkle-property-search__view-toggle:has(.merkle-property-search__view-pill[data-view="map"].is-active)::before,
.merkle-property-search__view-toggle:has(.merkle-property-search__view-pill[data-view="map"][aria-selected="true"])::before {
  transform: translateX(100%);
}

.merkle-property-search__view-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--merkle-color-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 160ms ease;
}

.merkle-property-search__view-pill svg {
  flex-shrink: 0;
}

/* Active pill: white text on top of the red slider. The background
   stays transparent — the red comes from the ::before slider above. */
.merkle-property-search__view-pill.is-active,
.merkle-property-search__view-pill[aria-selected="true"] {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.merkle-property-search__view-pill:hover:not(.is-active):not([aria-selected="true"]),
.merkle-property-search__view-pill:focus-visible:not(.is-active):not([aria-selected="true"]) {
  background: transparent !important;
  color: var(--merkle-color-primary) !important;
}

/* Honor users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .merkle-property-search__view-toggle::before {
    transition: none;
  }
}

.merkle-property-search__submit {
  margin-left: auto;
  min-width: 160px;
}

@media (max-width: 640px) {
  .merkle-property-search__actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* Stretch the toggle to fill the actions row so its right edge lines
     up with the rest of the form. Without this the toggle was sized to
     its (inline-flex) content — about 350px — and overflowed the 293px
     content area, pushing the MAP pill past the right edge. */
  .merkle-property-search__view-toggle {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  .merkle-property-search__view-toggle .merkle-property-search__view-pill {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .merkle-property-search__submit {
    margin-left: 0;
    width: 100%;
  }
}

.merkle-property-search__form input,
.merkle-property-search__form select,
.merkle-property-search__form button,
.merkle-mortgage-calculator__form input,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea,
.wpforms-form input,
.wpforms-form select,
.wpforms-form textarea,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(35, 31, 26, 0.1);
  border-radius: 16px;
  background: #fff;
  color: var(--merkle-color-secondary);
  font-family: inherit;
}

.merkle-property-search__form input,
.merkle-property-search__form select {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.merkle-mortgage-calculator__form input {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.merkle-property-search__form input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.merkle-property-search__form input[type="number"]::-webkit-outer-spin-button,
.merkle-property-search__form input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.merkle-property-search__form select {
  padding-right: 40px;
}

.merkle-property-search__form button,
.merkle-mortgage-calculator__form button {
  width: auto;
  align-self: start;
  min-width: 170px;
}

.merkle-listing-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--merkle-color-text-muted);
  font-size: 0.94rem;
  line-height: 1.4;
}

/* Inline pipe separators between stat items: "5 bds | 4 ba | 3,364 sqft
   | House for sale". Drawn with ::before on every span after the first
   so the separator appears in flex flow and respects flex-wrap. */
.merkle-listing-card__stats span:not(:first-child)::before {
  content: "| ";
  margin-right: 8px;
  color: rgba(35, 31, 26, 0.35);
}

/* Address line: dark, plain text. */
.merkle-listing-card__address {
  color: var(--merkle-color-secondary);
}

/* Make the entire card a click target. The card has a single empty
   <a class="merkle-listing-card__overlay"> at the end of its children
   that's absolutely positioned over the whole card. Earlier versions
   used a ::after pseudo-element on the image link — but the mobile
   horizontal-card layout sets the media to position: relative (so the
   absolutely-positioned <img> inside fills it), which made the media
   its own containing block and pinned the ::after to just the 38%-wide
   image column. The dedicated overlay element bypasses that — its
   containing block is the card itself regardless of how the media is
   positioned. Text inside the body remains selectable; pointer events
   on any part of the card hit the overlay and navigate. */
.merkle-listing-card {
  position: relative;
  cursor: pointer;
}

.merkle-listing-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* No visible appearance — the link is a transparent click surface. */
  text-decoration: none;
  border-radius: inherit;
}

/* Visible focus ring for keyboard users — paint an outline around the
   whole card when the overlay link is focused. */
.merkle-listing-card:has(.merkle-listing-card__overlay:focus-visible) {
  outline: 2px solid var(--merkle-color-primary);
  outline-offset: 2px;
}

.merkle-listing-card__cta {
  margin-top: auto;
  align-self: stretch;
}

.merkle-listing-card__schedule {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-size: 1rem;
  font-weight: 800;
}

.merkle-listing-card__remarks {
  color: var(--merkle-color-text-muted);
  font-size: 0.92rem;
}

.merkle-mortgage-calculator {
  display: grid;
  gap: var(--merkle-space-24);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 243, 237, 0.96) 100%);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-mortgage-calculator__intro {
  display: grid;
  gap: var(--merkle-space-8);
}

.merkle-mortgage-calculator__eyebrow,
.merkle-mortgage-calculator__schedule-eyebrow {
  margin: 0;
  color: var(--merkle-color-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.merkle-mortgage-calculator__intro h2,
.merkle-mortgage-calculator__schedule h3 {
  margin: 0;
  color: var(--merkle-color-secondary);
}

.merkle-mortgage-calculator__intro p:last-child {
  margin: 0;
  color: var(--merkle-color-text-muted);
}

.merkle-mortgage-calculator__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--merkle-space-24);
  align-items: start;
}

.merkle-mortgage-calculator__form {
  display: grid;
  gap: var(--merkle-space-20);
}

.merkle-mortgage-calculator__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--merkle-space-16);
}

.merkle-mortgage-calculator__form label {
  display: grid;
  gap: var(--merkle-space-8);
  color: var(--merkle-color-secondary);
  font-size: 0.94rem;
  font-weight: 700;
}

.merkle-mortgage-calculator__actions {
  display: grid;
  gap: var(--merkle-space-12);
  justify-items: start;
}

.merkle-mortgage-calculator__actions button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Specificity bump: `.merkle-mortgage-calculator__form label` is the
 * stacked input/label pattern used by every text field (label on top,
 * input below). Without the form prefix here, that rule wins and the
 * checkbox label gets vertically stacked above the box too. */
.merkle-mortgage-calculator__form label.merkle-mortgage-calculator__checkbox {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--merkle-space-12);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--merkle-color-secondary);
}

.merkle-mortgage-calculator__checkbox input[type="checkbox"] {
  /* DOM order is <input> then <span>label</span>, so the checkbox
   * naturally sits to the left of its label text without an `order`
   * override. */
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--merkle-color-border);
  border-radius: 3px;
  background: #fff;
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: var(--merkle-color-primary);
  cursor: pointer;
}

.merkle-mortgage-calculator__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 999px;
  opacity: 0;
  animation: merkle-spin 0.8s linear infinite;
  transition: opacity 0.18s ease;
}

.merkle-mortgage-calculator.is-loading {
  pointer-events: none;
}

.merkle-mortgage-calculator.is-loading .merkle-mortgage-calculator__layout,
.merkle-mortgage-calculator.is-loading .merkle-mortgage-calculator__schedule {
  opacity: 0.6;
}

.merkle-mortgage-calculator.is-loading .merkle-mortgage-calculator__spinner {
  opacity: 1;
}

.merkle-mortgage-calculator.is-loading .merkle-mortgage-calculator__button-label {
  opacity: 0.92;
}

.merkle-mortgage-calculator__results {
  display: grid;
  gap: var(--merkle-space-12);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--merkle-color-text-muted);
}

.merkle-mortgage-calculator__results-label,
.merkle-mortgage-calculator__results-total {
  margin: 0;
}

.merkle-mortgage-calculator__results-label {
  color: var(--merkle-color-text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-mortgage-calculator__results-total {
  color: var(--merkle-color-secondary);
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 700;
  line-height: 1;
}

.merkle-mortgage-calculator__result-list {
  display: grid;
  gap: var(--merkle-space-10);
}

.merkle-mortgage-calculator__result-list p {
  display: flex;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  margin: 0;
  padding-top: var(--merkle-space-10);
  border-top: 1px solid rgba(35, 31, 26, 0.08);
}

.merkle-mortgage-calculator__result-list strong {
  color: var(--merkle-color-secondary);
}

.merkle-mortgage-calculator__schedule {
  display: grid;
  gap: var(--merkle-space-16);
  padding-top: var(--merkle-space-12);
  border-top: 1px solid rgba(35, 31, 26, 0.08);
}

.merkle-mortgage-calculator__schedule-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  align-items: end;
}

.merkle-mortgage-calculator__schedule-header p:last-child {
  margin: 0;
  color: var(--merkle-color-text-muted);
}

.merkle-mortgage-calculator__table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
}

.merkle-mortgage-calculator__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.merkle-mortgage-calculator__table th,
.merkle-mortgage-calculator__table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(35, 31, 26, 0.08);
}

.merkle-mortgage-calculator__table thead th {
  position: sticky;
  top: 0;
  background: #f7f3ed;
  color: var(--merkle-color-secondary);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merkle-mortgage-calculator__table tfoot th,
.merkle-mortgage-calculator__table tfoot td {
  background: #f1e6d7;
  font-weight: 700;
  border-bottom: 0;
}

.merkle-mortgage-calculator__table tbody tr:last-child td {
  border-bottom: 0;
}

.merkle-mortgage-calculator__table tbody tr:nth-child(even) {
  background: rgba(35, 31, 26, 0.025);
}

@keyframes merkle-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.merkle-page-shell__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

.merkle-page-shell__actions--stack .is-secondary {
  background: rgba(255, 255, 255, 0.72);
  color: var(--merkle-color-primary);
  box-shadow: none;
  outline: 1px solid rgba(191, 30, 45, 0.18);
}

.merkle-mortgage-page {
  /* No grid here — `display: grid` on <main> turns the post-title
   * and post-content into grid items, which broke the title's
   * `margin-inline: auto` centering (the title rendered at its
   * intrinsic ~516px instead of filling the 1200px content frame
   * like every other interior page). The title's own
   * `margin-bottom: var(--merkle-space-24)` already provides the
   * vertical gap to the calculator below. */
}

.merkle-contact-layout {
  display: grid;
  /* Form first (wide column), info second (narrow column). The PHP renders
   * form before info so the source order matches the visual order — and on
   * mobile (single column at <=1200px) the form naturally appears above. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--merkle-space-32);
}

.merkle-contact-card {
  display: grid;
  gap: var(--merkle-space-16);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-contact-card .wpcf7-form-control-wrap {
  display: block;
}

.merkle-contact-card .wpcf7 textarea {
  min-height: 180px;
}

.mls-map-container {
  min-height: 420px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #ece5dd;
}

.merkle-single-listing {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.merkle-listing-media-block {
  display: grid;
  gap: 0;
  margin-bottom: var(--merkle-space-24);
}

.merkle-single-listing .merkle-listing-media-block .wp-block-post-featured-image {
  margin-bottom: var(--merkle-space-20);
}

.merkle-single-listing .merkle-listing-media-block .wp-block-post-featured-image img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
}

.merkle-listing-media-trigger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--merkle-space-12);
  align-items: center;
  margin: 0;
}

/* Compact "View all images" / "View virtual tour" buttons —
   roughly 30% smaller than the global .wp-element-button default. */
.merkle-listing-media-trigger .wp-element-button,
.merkle-listing-media-trigger button,
.merkle-listing-media-trigger a.wp-element-button {
  min-height: 36px !important;
  padding: 0 18px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(139, 21, 32, 0.16) !important;
}

.merkle-listing-media-trigger a.wp-element-button:visited,
.merkle-listing-media-trigger a.wp-element-button:active,
.merkle-listing-media-trigger a.wp-element-button:hover,
.merkle-listing-media-trigger a.wp-element-button:focus {
  color: #fff;
}

.merkle-listing-media-trigger__fallback {
  color: var(--merkle-color-text-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.merkle-listing-price {
  margin: 10px 0 0;
  color: var(--merkle-color-primary);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.merkle-listing-details {
  display: grid;
  gap: var(--merkle-space-20);
  margin-top: var(--merkle-space-32);
}

.merkle-listing-details__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--merkle-space-24);
}

.merkle-listing-details__group {
  display: grid;
  gap: var(--merkle-space-16);
  min-width: 0;
  padding: var(--merkle-space-20);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
}

.merkle-listing-details__group h3 {
  font-size: 1.45rem;
}

.merkle-listing-details__list {
  display: grid;
  gap: var(--merkle-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.merkle-listing-details__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  align-items: baseline;
  padding-bottom: var(--merkle-space-12);
  border-bottom: 1px solid rgba(35, 31, 26, 0.08);
}

.merkle-listing-details__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.merkle-listing-details__label {
  color: var(--merkle-color-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.merkle-listing-details__value {
  color: var(--merkle-color-secondary);
  font-size: 1rem;
  font-weight: 700;
  flex: 1 1 260px;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Multi-item rows (Garage Amenities, Interior Features, etc.) — keep the
   row's label/value side-by-side layout, but stack the items vertically and
   right-align them so they read as a clean attribute column. */
.merkle-listing-details__value-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--merkle-color-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  flex: 1 1 260px;
  min-width: 0;
  text-align: right;
}

.merkle-listing-details__value-list li {
  margin: 0;
  padding: 2px 0;
}

body.merkle-modal-open {
  overflow: hidden;
}

.merkle-media-modal[hidden] {
  display: none;
}

.merkle-media-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.merkle-media-modal__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 14, 22, 0.72);
  backdrop-filter: blur(6px);
}

.merkle-media-modal__dialog {
  position: fixed;
  top: 24px;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(960px, calc(100% - 32px));
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.28);
}

.merkle-media-modal__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  padding: 14px var(--merkle-space-24);
  background: #fff;
  border-bottom: 1px solid var(--merkle-color-border);
}

.merkle-media-modal__controls::before {
  content: "Photo Gallery";
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--merkle-color-secondary);
  letter-spacing: 0.01em;
}

.merkle-media-modal__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--merkle-color-border) !important;
  border-radius: 999px !important;
  background: var(--merkle-color-surface) !important;
  color: var(--merkle-color-secondary) !important;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.merkle-media-modal__close:hover,
.merkle-media-modal__close:focus-visible {
  background: var(--merkle-color-primary) !important;
  border-color: var(--merkle-color-primary) !important;
  color: #fff !important;
}

.merkle-media-modal__body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--merkle-space-24);
}

.merkle-media-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--merkle-space-20);
}

.merkle-media-modal__status {
  margin: 0;
  color: var(--merkle-color-text-muted);
  text-align: center;
}

.merkle-media-modal__item {
  display: grid;
  gap: var(--merkle-space-12);
  margin: 0;
}

.merkle-media-modal__item img,
.merkle-media-modal__item video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  background: #f1ece5;
}

.merkle-media-modal__item figcaption {
  color: var(--merkle-color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.merkle-media-modal__link-card {
  display: grid;
  gap: var(--merkle-space-12);
  align-content: center;
  min-height: 280px;
  padding: var(--merkle-space-24);
  border: 1px solid rgba(35, 31, 26, 0.08);
  border-radius: 18px;
  background: var(--merkle-color-surface);
}

.merkle-no-cache-marker {
  display: none;
}

@media (min-width: 1501px) {
  .merkle-property-search__form {
    grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(130px, 1fr));
  }

  .merkle-property-search__field--location {
    grid-column: auto;
  }
}

@media (max-width: 1200px) {
  .merkle-home__hero,
  .merkle-contact-layout,
  .merkle-page-shell__support {
    grid-template-columns: 1fr;
  }

  .merkle-home__hero {
    min-height: auto;
  }

  .merkle-home__highlights,
  .merkle-home__listing-grid,
  .merkle-featured-grid,
  .merkle-testimonial-grid,
  .merkle-home__guide-grid,
  .merkle-home__specialty-grid,
  .merkle-home__utility-grid,
  .merkle-home__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merkle-property-search__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merkle-property-search__shell--map {
    grid-template-columns: 1fr;
  }

  .merkle-property-search__map-panel {
    position: static;
  }

  .merkle-property-search__map {
    min-height: 420px;
  }

  .merkle-property-search__field--location {
    grid-column: 1 / -1;
  }

  .merkle-featured-carousel__track {
    grid-auto-columns: minmax(300px, 48%);
  }
}

@media (max-width: 782px) {
  main.wp-block-group {
    padding-block: var(--merkle-space-16) var(--merkle-space-64);
  }

  /* Comfortable horizontal breathing room around all main content blocks. */
  .merkle-home,
  .merkle-page-shell,
  .merkle-single-listing,
  .merkle-listing-archive,
  .merkle-testimonials-page,
  .merkle-mortgage-page,
  .merkle-page-title,
  .merkle-site-footer__copyright {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--merkle-space-20);
    padding-right: var(--merkle-space-20);
    box-sizing: border-box;
  }

  .merkle-cta-panel,
  .merkle-listing-cta,
  .merkle-cta-panel--wide,
  .merkle-cta-panel--page {
    margin-left: var(--merkle-space-20);
    margin-right: var(--merkle-space-20);
    width: auto;
  }

  .merkle-site-header {
    padding-left: var(--merkle-space-20);
    padding-right: var(--merkle-space-20);
  }
  /* .merkle-site-footer now applies padding-inline at the base rule
   * (see top of this file), so a mobile-specific override is no
   * longer needed — keeping one would make a future shorthand
   * change to the base rule silently re-introduce the
   * homepage edge-to-edge bug below 782px. */

  /* Mobile header: centered column. Logo on top, hamburger below.
     The phone number is hidden by default and only revealed inside the
     open overlay (see body.has-modal-open rules below). */
  .merkle-site-header .wp-block-group.alignwide,
  .merkle-home__section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--merkle-space-16);
    text-align: center;
  }

  .merkle-site-header .wp-block-group.alignwide > .wp-block-site-logo {
    margin: 0 auto;
  }

  .merkle-site-header .wp-block-group.alignwide > .wp-block-group {
    margin: 0 auto;
    justify-content: center !important;
    width: auto;
  }

  /* The "open hamburger" button — square, borderless, no gradient,
     no drop shadow, no background, no border radius. Default WP SVG
     (which renders only two bars) is hidden in favor of a CSS-drawn
     three-line icon below. The selector is doubled to win specificity
     against WordPress core's own doubled selector and any global button
     gradient set elsewhere in the stylesheet. */
  .merkle-site-header .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
  body .merkle-site-header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--merkle-color-secondary) !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Hide the default 2-line WP hamburger SVG and its inner paths. */
  .merkle-site-header .wp-block-navigation__responsive-container-open svg,
  .merkle-site-header .wp-block-navigation__responsive-container-open svg * {
    display: none !important;
  }

  /* Draw three horizontal bars: one center bar via the pseudo-element,
     plus a top and bottom bar via box-shadow offsets. */
  .merkle-site-header .wp-block-navigation__responsive-container-open::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 0 !important;
    box-shadow:
      0 -7px 0 currentColor,
      0  7px 0 currentColor !important;
  }

  /* Open overlay — full viewport, scrollable, soft cream background.
     Items lay out in normal flow inside the overlay; if their total height
     exceeds the viewport the overlay scrolls (the close X is sticky-pinned
     to the top so it stays accessible).

     The explicit width/height + max-* overrides are defensive against the
     per-block layout CSS WP emits for the navigation block, which was
     resolving the overlay to ~360x165 on mobile despite position:fixed +
     inset:0. 100dvh accounts for the iOS address-bar collapse so the
     overlay still covers the full visible viewport. */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    background: var(--merkle-color-background) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    padding: 0 var(--merkle-space-24) var(--merkle-space-24);
  }

  /* Sticky transparent X — no white pill, no shadow, no border-radius;
     a real "X" drawn with two crossed CSS bars. */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,
  body.has-modal-open .wp-block-navigation__responsive-container-close {
    position: sticky !important;
    top: 0;
    align-self: flex-end;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--merkle-color-background) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    color: var(--merkle-color-primary) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: 5;
  }

  /* Hide the default WP close SVG and draw a red X with pseudo-elements. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg * {
    display: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Menu list — each item is a tall, tappable row. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0;
    width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid var(--merkle-color-border);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    /* WP emits per-block CSS that zeros the link padding for the
       responsive overlay. Force a comfortable tap-target row height
       and center-align the link so every item (with or without a
       submenu) reads with the same vertical/horizontal alignment. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 60px !important;
    padding: 12px 16px !important;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--merkle-color-secondary);
    text-align: center;
    transition: background 160ms ease;
    box-sizing: border-box;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: var(--merkle-color-secondary);
    background: rgba(35, 31, 26, 0.06);
    outline: none;
  }

  /* Parent items with a submenu: anchor the row so the chevron toggle
     can sit absolutely on the right without changing the surrounding
     layout. The link gets right-padding to keep its text clear of the
     toggle's tap target; the submenu flows below in normal block flow. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
    position: relative;
  }

  /* Symmetric horizontal padding (56px each side) so the centered text
     stays visually centered in the row even with the chevron pinned to
     the right edge — without left padding the centered text would
     appear shifted leftward relative to the items that don't have a
     chevron. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }

  /* Reveal the chevron toggle button. WP hides it when the parent has
     class `open-on-hover-click` (the desktop pattern), but on mobile we
     need a tappable target to expand the submenu. Absolute positioning
     pins it to the right edge of the parent <li> so the link's natural
     layout isn't disturbed. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    position: absolute !important;
    top: 0;
    right: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    min-width: 56px !important;
    /* Match the link row's min-height so the chevron sits vertically
       centered on the parent's link row (regardless of whether the
       submenu below is expanded or collapsed). */
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--merkle-color-secondary) !important;
    cursor: pointer;
    transition: background 160ms ease;
    z-index: 1;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
    background: rgba(35, 31, 26, 0.06) !important;
    outline: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    transition: transform 200ms ease;
  }

  /* Rotate the chevron when the submenu is expanded so the affordance
     reads as "tap to collapse" once it's open. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Submenu items expand inline within the overlay (not as a popover) —
     but only after the user taps the chevron. The default state is
     collapsed; the [aria-expanded="true"] sibling selector toggles it
     open. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 0 var(--merkle-space-12) var(--merkle-space-16) !important;
    border-left: 2px solid var(--merkle-color-primary);
    margin: 0 0 var(--merkle-space-8);
    min-width: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    display: block !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    color: var(--merkle-color-primary);
  }

  /* Lock the page underneath while the overlay is open so the user
     doesn't accidentally scroll the listings/feed behind the menu. */
  body.has-modal-open,
  html.has-modal-open {
    overflow: hidden !important;
  }

  /* JS-injected "CLOSE MENU" affordance at the bottom of the overlay so
     users don't have to scroll back to the top to close. Scoped to
     .is-menu-open: the button is appended inside the responsive dialog,
     and the dialog is also rendered inline at landscape (>=600px) when
     the inline nav takes over — without the parent scope the close
     affordance leaked into the landscape inline header. */
  .merkle-nav-close-bottom {
    display: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .merkle-nav-close-bottom {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--merkle-space-8);
    width: 100%;
    margin: var(--merkle-space-24) 0 0 !important;
    padding: var(--merkle-space-16) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--merkle-color-text-muted) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .merkle-nav-close-bottom:hover,
  .wp-block-navigation__responsive-container.is-menu-open .merkle-nav-close-bottom:focus-visible {
    color: var(--merkle-color-primary) !important;
    outline: none;
  }

  /* Up-pointing solid triangle drawn with the CSS border trick. The
     bounding box is symmetric so flex align-items:center aligns the
     triangle's optical center with the "CLOSE MENU" text's centerline. */
  .merkle-nav-close-bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid currentColor;
  }

  /* Remove the top-right red X close button entirely. The bottom
     "CLOSE MENU" affordance is the only close path. The X stays in the
     DOM (so the existing closeOverlay() JS that calls closeBtn.click()
     still dispatches the close action — .click() works on display:none
     elements). Doubled-class selector required to match the specificity
     of the existing rule that styles the X (which uses the same trick
     to beat WP core's doubled-class display rule). */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,
  body.has-modal-open .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
    display: none !important;
  }
}

/* ================================================================
   Desktop nav hover — soft gray fill on hover/active. Text stays in
   the secondary (near-black) brand color in every state.
   ================================================================ */
@media (min-width: 783px) {
  .merkle-site-header .wp-block-navigation .wp-block-navigation-item__content {
    padding: 6px 12px;
    border-radius: 0;
    color: var(--merkle-color-secondary);
    transition: background 160ms ease;
  }

  .merkle-site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
  .merkle-site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
  .merkle-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    background: rgba(35, 31, 26, 0.06);
    color: var(--merkle-color-secondary);
    outline: none;
  }
}

/* WP's wp:navigation overlayMenu="mobile" reveals the inline nav at
   >=600px wide. The merkle hamburger overrides above force display:
   inline-flex inside @media (max-width: 782px), so on iPhone landscape
   widths (667-844px) BOTH the inline nav and the hamburger were
   visible. Hide the hamburger from 600px up to keep them in lockstep.
   The doubled-class selector is required to beat the doubled-class
   override the merkle theme uses to win against WP core's own
   doubled-class display rule. */
@media (min-width: 600px) {
  .merkle-site-header .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
  body .merkle-site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

@media (max-width: 782px) {
  .merkle-home__highlights,
  .merkle-home__listing-grid,
  .merkle-featured-grid,
  .merkle-testimonial-grid,
  .merkle-home__guide-grid,
  .merkle-home__specialty-grid,
  .merkle-home__utility-grid,
  .merkle-home__services,
  .merkle-home__market-grid,
  .merkle-listing-archive__grid,
  .merkle-property-search__results,
  .merkle-property-search__form,
  .merkle-mortgage-calculator__field-grid,
  .merkle-open-house-grid {
    grid-template-columns: 1fr;
  }

  .merkle-mortgage-calculator__layout {
    grid-template-columns: 1fr;
  }

  .merkle-property-search__form button {
    width: 100%;
  }

  .merkle-property-search__toolbar,
  .merkle-property-search__toolbar-controls,
  .merkle-property-search__view-switch {
    display: grid;
    width: 100%;
  }

  /* Stop the property-search subtree from inflating past viewport width.
     Each of these is a grid container or grid item whose default `auto`
     min-width resolves to min-content — and the form's labels + button
     min-widths add up to ~350px, dragging the listings page (and its
     cards) wider than the viewport on phones. min-width:0 lets the grid
     items collapse to their track width instead. */
  .merkle-property-search,
  .merkle-property-search > *,
  .merkle-property-search__form,
  .merkle-property-search__form > *,
  .merkle-property-search__shell,
  .merkle-property-search__shell > *,
  .merkle-property-search__content-panel,
  .merkle-property-search__content-panel > *,
  .merkle-property-search__results,
  .merkle-property-search__results > *,
  .merkle-listing-card,
  .merkle-listing-card__body {
    min-width: 0;
  }

  .merkle-property-search__toolbar-field {
    min-width: 0;
  }

  .merkle-mortgage-calculator__actions,
  .merkle-mortgage-calculator__actions button,
  .merkle-mortgage-calculator__checkbox {
    width: 100%;
  }

  .merkle-mortgage-calculator__result-list p {
    align-items: baseline;
  }

  .merkle-featured-carousel__track {
    grid-auto-columns: 86%;
  }

  .merkle-home__hero,
  .merkle-page-shell__hero {
    padding: 26px;
    border-radius: 28px;
  }

  .merkle-single-listing {
    width: min(100% - 24px, 1280px);
  }

  .merkle-media-modal__dialog {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    width: calc(100% - 20px);
    max-width: 100%;
  }
}

body.home {
  background: #ffffff;
}

.home .wp-site-blocks {
  background: #ffffff;
}

.home .wp-block-post-content,
.home .wp-block-post-content > .merkle-home {
  max-width: none;
  width: 100%;
}

.home .is-layout-constrained > .merkle-home,
.home .is-layout-constrained > .wp-block-post-content,
.home .is-layout-constrained > .wp-block-post-content > .merkle-home {
  max-width: none !important;
  width: 100% !important;
}

.home main.wp-block-group {
  /* Override the top edge only (hero panel sits flush against the
   * header). Bottom padding inherits the base rule so spacing into
   * the footer is consistent with every other page. */
  padding-block-start: 0;
  margin-block-start: 0;
}

.home main.wp-block-group > .wp-block-post-content,
.home main.wp-block-group > .wp-block-post-title,
.home .wp-block-post-content,
.home .wp-block-post-content > *:first-child,
.home .merkle-home,
.home .merkle-home > *:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.home .merkle-site-header {
  position: sticky;
  top: 0;
  /* padding-block only — the base `.merkle-site-header` rule supplies the
   * inline gutter, and a `padding` shorthand here would silently zero it. */
  padding-block: 20px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--merkle-color-border);
  box-shadow: 0 10px 35px rgba(13, 13, 13, 0.06);
}

.home .merkle-site-header .wp-block-group.alignwide {
  gap: 20px;
}

.home .merkle-site-header .wp-block-navigation {
  gap: 20px;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .merkle-site-header .wp-block-button__link.wp-element-button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  color: var(--merkle-color-secondary) !important;
  box-shadow: none !important;
  border: 0 !important;
}

.home .merkle-site-header .wp-block-button.is-style-fill .wp-block-button__link,
.home .merkle-site-header .wp-block-button .wp-block-button__link.wp-element-button,
.home .merkle-site-header .wp-block-buttons .wp-block-button__link.wp-element-button {
  background: transparent !important;
  background-image: none !important;
  color: var(--merkle-color-secondary) !important;
  box-shadow: none !important;
  border: 0 !important;
}

.home .merkle-site-header .wp-block-button__link.wp-element-button:hover,
.home .merkle-site-header .wp-block-button__link.wp-element-button:focus,
.home .merkle-site-header .wp-block-button.is-style-fill .wp-block-button__link:hover,
.home .merkle-site-header .wp-block-button.is-style-fill .wp-block-button__link:focus {
  background: transparent !important;
  background-image: none !important;
  color: var(--merkle-color-secondary) !important;
  transform: none;
  box-shadow: none !important;
}

.merkle-site-header .wp-block-navigation__submenu-icon,
.merkle-site-header .wp-block-navigation-submenu__toggle,
.merkle-site-footer .wp-block-navigation__submenu-icon,
.merkle-site-footer .wp-block-navigation-submenu__toggle {
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: currentColor !important;
}

.merkle-site-header .wp-block-navigation__submenu-icon:hover,
.merkle-site-header .wp-block-navigation__submenu-icon:focus,
.merkle-site-header .wp-block-navigation-submenu__toggle:hover,
.merkle-site-header .wp-block-navigation-submenu__toggle:focus,
.merkle-site-footer .wp-block-navigation__submenu-icon:hover,
.merkle-site-footer .wp-block-navigation__submenu-icon:focus,
.merkle-site-footer .wp-block-navigation-submenu__toggle:hover,
.merkle-site-footer .wp-block-navigation-submenu__toggle:focus {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: currentColor !important;
}

.home .merkle-home {
  gap: 72px;
}

.home .merkle-home__hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 850px);
  align-items: center;
  min-height: min(78svh, 760px);
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 112px min(5vw, 100px) 56px;
  border: 0;
  border-radius: 0;
  background-color: var(--merkle-color-secondary);
  background-image:
    linear-gradient(90deg, rgba(13, 13, 13, 0.72) 0%, rgba(13, 13, 13, 0.36) 42%, rgba(13, 13, 13, 0.3) 100%),
    var(--merkle-hero-image);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  box-shadow: none;
}

.home .merkle-home__hero-copy {
  display: grid;
  gap: 18px;
  max-width: 740px;
  align-self: center;
}

.home .merkle-home__hero-copy h1 {
  max-width: 14ch;
  font-size: clamp(3.4rem, 6vw, 5.9rem);
  line-height: 0.95;
}

.home .merkle-home__hero-copy .merkle-home__lede {
  max-width: 58ch;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.home .merkle-home__hero-panel {
  width: 100%;
  margin-top: 0;
  justify-self: auto;
  align-self: center;
}

.home .merkle-home__search-shell {
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.home .merkle-home__panel-label {
  margin-bottom: 12px;
  color: var(--merkle-color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

.home .merkle-home .merkle-property-search__form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home .merkle-home__hero-links {
  gap: 26px;
  margin-top: 12px;
}

.home .merkle-home__hero-actions {
  margin-top: 8px;
}

.home .merkle-home__hero-actions .wp-element-button {
  min-height: 50px;
  padding-inline: 24px;
}

.home .merkle-home__hero-links a {
  position: relative;
  color: var(--merkle-color-secondary);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home .merkle-home__hero-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #c58e3b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.home .merkle-home__hero-links a:hover::after,
.home .merkle-home__hero-links a:focus::after {
  transform: scaleX(1);
}

.home .merkle-home__intro,
.home .merkle-home__listing-section,
.home .merkle-home__selling,
.home .merkle-home__reviews,
.home .merkle-home__buyers-sellers {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.home .merkle-home__intro,
.home .merkle-home__buyers-sellers {
  display: grid;
  gap: 30px;
}

.home .merkle-home__copy {
  max-width: 760px;
}

.home .merkle-home__copy h2 {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 1;
}

.home .merkle-home__copy p {
  margin-top: 16px;
  color: var(--merkle-color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.home .merkle-home__market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home .merkle-home__market-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 24px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.06) 0%, rgba(13, 13, 13, 0.72) 100%),
    var(--merkle-market-image) center/cover no-repeat;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.home .merkle-home__market-tile:hover,
.home .merkle-home__market-tile:focus {
  transform: translateY(-3px);
  box-shadow: 0 24px 55px rgba(13, 13, 13, 0.16);
  color: #ffffff;
}

.home .merkle-home__market-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 0.95;
}

.home .merkle-home__market-copy {
  display: block;
  max-width: 32ch;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.home .merkle-home__section-head {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--merkle-color-border);
}

.home .merkle-home__section-head h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.home .merkle-home__text-link {
  min-height: 0;
  padding: 0;
  color: var(--merkle-color-secondary);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home .merkle-home__listing-grid,
.home .merkle-featured-grid,
.home .merkle-testimonial-grid {
  margin-top: 26px;
}

.merkle-property-search__results.merkle-home__listing-grid {
  margin-top: 26px;
}

/* Inherit the same constrained width as other interior pages.
   Children (page title, property search) pick up max-width from the
   FSE constrained layout, matching every other interior page. */
.merkle-listing-archive {
  width: auto;
  max-width: none;
}

.merkle-listing-archive .merkle-property-search {
  margin-top: var(--merkle-space-24);
}

.merkle-listing-archive .merkle-property-search__form {
  border-radius: 0;
}

.merkle-listing-archive .merkle-property-search__map {
  border-radius: 0;
}

.merkle-listing-archive .merkle-home__listing-grid .merkle-listing-card__cta {
  min-height: 0;
}

.merkle-home__listing-grid .merkle-listing-card,
.merkle-featured-grid .merkle-listing-card,
.home .merkle-home .merkle-testimonial-card {
  border: 1px solid var(--merkle-color-border);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.merkle-home__listing-grid .merkle-listing-card:hover,
.merkle-featured-grid .merkle-listing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px rgba(13, 13, 13, 0.1);
}

.merkle-home__listing-grid .merkle-listing-card__media,
.merkle-featured-grid .merkle-listing-card__media {
  aspect-ratio: 3 / 2;
}

.merkle-home__listing-grid .merkle-listing-card__body,
.merkle-featured-grid .merkle-listing-card__body,
.home .merkle-home .merkle-testimonial-card {
  gap: 10px;
  padding: 18px;
}

.merkle-home__listing-grid .merkle-listing-card__price,
.merkle-featured-grid .merkle-listing-card__price {
  color: var(--merkle-color-secondary);
  font-size: 1.65rem;
}

.merkle-home__listing-grid .merkle-listing-card__address,
.merkle-featured-grid .merkle-listing-card__stats,
.merkle-featured-grid .merkle-listing-card__address,
.merkle-home__listing-grid .merkle-listing-card__stats {
  color: var(--merkle-color-text-muted);
}

.merkle-home__listing-grid .merkle-listing-card__title,
.merkle-home__listing-grid .merkle-listing-card__title a,
.merkle-featured-grid .merkle-listing-card__title,
.merkle-featured-grid .merkle-listing-card__title a {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1;
}

.merkle-home__listing-grid .merkle-listing-card__cta,
.merkle-featured-grid .merkle-listing-card__cta {
  min-height: 52px;
  margin-top: auto;
}

.home .merkle-home__highlights {
  gap: 18px;
}

.home .merkle-home__highlights > article {
  padding: 26px;
  border: 1px solid var(--merkle-color-border);
  border-radius: 0;
  background: #fbfaf7;
  box-shadow: none;
}

.home .merkle-home__metric {
  margin-bottom: 10px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .merkle-home__guidance {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  /* Full-bleed: explicit 100vw + box-sizing so the parent's 20px inline
   * gutter (.merkle-home) doesn't shrink the section by 40px. The negative
   * margin centers the 100vw box back to the viewport edges. */
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  min-height: 420px;
  margin-inline: calc(50% - 50vw);
  background: var(--merkle-color-secondary);
}

.home .merkle-home__guidance-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(36px, 6vw, 88px);
}

.home .merkle-home__guidance-copy h2,
.home .merkle-home__guidance-copy p,
.home .merkle-home__guidance-copy .merkle-home__eyebrow {
  color: #ffffff;
}

.home .merkle-home__guidance-copy p {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
}

.home .merkle-home__guidance-copy .wp-element-button {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.home .merkle-home__guidance-media {
  min-height: 320px;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.08), rgba(13, 13, 13, 0.08)),
    var(--merkle-guidance-image) center/cover no-repeat;
}

.home .merkle-home__reviews .merkle-home__section-head {
  align-items: end;
}

.home .merkle-home__review-score {
  margin: 0;
  color: var(--merkle-color-secondary);
  font-size: 1.05rem;
  font-weight: 800;
}

.home .merkle-home .merkle-testimonial-card p {
  color: var(--merkle-color-text-muted);
  line-height: 1.7;
}

.home .merkle-home__button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home .merkle-home__button-row .wp-element-button {
  min-height: 46px;
}

/* "View all listings" sits below the New-listings card grid as a
 * centered, full-button CTA — replaces the small uppercase text link
 * that used to live inside the section header. */
.home .merkle-home__listing-section-actions {
  justify-content: center;
  margin-top: var(--merkle-space-32);
}

.home .merkle-site-footer {
  /* Homepage keeps its own background colour, but inherits the
   * normalized vertical spacing from the base rule so every page
   * has the same content-to-footer gap. */
  background: var(--merkle-color-secondary);
}

.home .merkle-site-footer .alignwide {
  row-gap: 28px;
}

.home .merkle-site-footer .wp-block-heading {
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .home .merkle-home__market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .merkle-home__guidance {
    grid-template-columns: 1fr;
  }

  .home .merkle-home__hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 104px 32px 44px;
  }

  .home .merkle-home__hero-panel {
    width: 100%;
    max-width: 620px;
    justify-self: start;
  }

  .home .merkle-home__hero-copy {
    max-width: 760px;
  }

  .home .merkle-home__hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 5.4vw, 4.8rem);
  }
}

/* Tablet-only 2-column layout. Scoped with min-width:783 so it does NOT
   override the mobile (max-width: 782) single-column rules above — those
   live earlier in source, and this query at <=1024 used to win the cascade
   on phones, producing two cramped overflowing columns. */
@media (min-width: 783px) and (max-width: 1024px) {
  .merkle-home__listing-grid,
  .merkle-featured-grid,
  .merkle-listing-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merkle-home__market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merkle-property-search__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 782px) {
  .home .merkle-site-header {
    padding-block: 14px;
  }

  .home .merkle-site-header .wp-block-group.alignwide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }

  .home .merkle-home {
    gap: 56px;
  }

  .home .merkle-home__hero {
    grid-template-columns: 1fr;
    padding: 104px 20px 40px;
  }

  .home .merkle-home__hero-panel {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .home .merkle-home__hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .home .merkle-home__intro,
  .home .merkle-home__listing-section,
  .home .merkle-home__selling,
  .home .merkle-home__reviews,
  .home .merkle-home__buyers-sellers {
    width: min(100% - 24px, 1180px);
  }

  .merkle-featured-spotlight,
  .merkle-open-house-highlight {
    grid-template-columns: 1fr;
  }

  .merkle-listing-archive {
    width: auto;
    max-width: 100%;
  }

  .home .merkle-home__market-grid,
  .home .merkle-home__listing-grid,
  .home .merkle-featured-grid,
  .home .merkle-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .home .merkle-home__section-head {
    gap: 10px;
  }

  .home .merkle-home__button-row {
    display: grid;
  }
}
body.home main#wp--skip-link--target {
  padding-top: 0;
  margin-top: 0;
}

/* Square container and media edges */
.merkle-page-shell__hero,
.merkle-page-shell__content,
.merkle-page-shell__support-card,
.merkle-home__hero-panel,
.merkle-home__search-shell,
.merkle-home__utility-card,
.merkle-home__guide-card,
.merkle-home__service-copy,
.merkle-home__service-list,
.merkle-home__specialty-link,
.merkle-home__highlights > div,
.merkle-home__highlights > article,
.merkle-testimonial-card,
.merkle-featured-spotlight,
.merkle-open-house-highlight,
.merkle-featured-card,
.merkle-listing-card,
.merkle-open-house-card,
.merkle-open-house-empty,
.merkle-mortgage-calculator,
.merkle-contact-card,
.mls-map-container,
.merkle-listing-details__group,
.merkle-media-modal__link-card {
  border-radius: 0;
}

.merkle-featured-card__media,
.merkle-listing-card__media,
.merkle-open-house-card__media,
.merkle-featured-spotlight__media,
.merkle-single-listing .merkle-listing-media-block .wp-block-post-featured-image img,
.merkle-featured-card__media img,
.merkle-listing-card__media img,
.merkle-open-house-card__media img,
.merkle-featured-spotlight__media img,
.merkle-featured-card__placeholder,
.merkle-listing-card__placeholder,
.merkle-open-house-card__placeholder,
.merkle-featured-spotlight__placeholder,
.merkle-media-modal__item img,
.merkle-media-modal__item video {
  border-radius: 0;
}

/* Interior pages: strip the card skin from the intro header so
   page content flows continuously rather than appearing as stacked chunks.
   The page title above already provides top spacing, so the hero only
   needs a small lead-in pad before content. */
.merkle-page-shell {
  gap: var(--merkle-space-48);
}

.merkle-page-shell__hero {
  padding: 0 0 var(--merkle-space-8);
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ================================================================
   Single listing — facts strip, tour CTA, related rail, buttons
   ================================================================ */

.merkle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--merkle-space-8);
  padding: 14px 28px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.merkle-button--primary {
  background: var(--merkle-color-primary);
  color: #fffdf8;
  border-color: var(--merkle-color-primary);
}

.merkle-button--primary:hover,
.merkle-button--primary:focus-visible {
  background: var(--merkle-color-primary-deep);
  border-color: var(--merkle-color-primary-deep);
  color: #fffdf8;
}

.merkle-button--ghost {
  background: transparent;
  color: var(--merkle-color-secondary);
  border-color: var(--merkle-color-border);
}

.merkle-button--ghost:hover,
.merkle-button--ghost:focus-visible {
  border-color: var(--merkle-color-secondary);
}

.merkle-listing-facts {
  margin-top: var(--merkle-space-32);
}

.merkle-listing-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--merkle-space-24);
  list-style: none;
  margin: 0;
  padding: var(--merkle-space-24) var(--merkle-space-32);
  background: var(--merkle-color-surface);
  border-top: 1px solid var(--merkle-color-border);
  border-bottom: 1px solid var(--merkle-color-border);
}

.merkle-listing-facts__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.merkle-listing-facts__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--merkle-color-text-muted);
}

.merkle-listing-facts__value {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--merkle-color-secondary);
}

.merkle-cta-panel,
.merkle-listing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--merkle-space-32);
  align-items: center;
  margin: var(--merkle-space-48) 0;
  padding: var(--merkle-space-40) var(--merkle-space-48);
  background: var(--merkle-color-secondary);
  color: #fffdf8;
  position: relative;
  overflow: hidden;
}

/* Subtle red accent bar on the leading edge — visual rhyme with the brand color */
.merkle-cta-panel::before,
.merkle-listing-cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--merkle-color-primary);
}

.merkle-cta-panel--wide,
.merkle-cta-panel--page {
  margin: var(--merkle-space-64) auto;
  width: min(1180px, calc(100% - 48px));
}

.merkle-cta-panel__eyebrow,
.merkle-listing-cta__eyebrow {
  margin: 0 0 var(--merkle-space-8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--merkle-color-accent);
}

.merkle-cta-panel__title,
.merkle-listing-cta__title {
  margin: 0 0 var(--merkle-space-12);
  color: #fffdf8;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
}

.merkle-cta-panel__detail,
.merkle-listing-cta__detail {
  margin: 0;
  color: rgba(255, 253, 248, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

.merkle-cta-panel__actions,
.merkle-listing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--merkle-space-12);
  justify-content: flex-end;
}

.merkle-cta-panel__actions .merkle-button--ghost,
.merkle-listing-cta__actions .merkle-button--ghost {
  color: #fffdf8;
  border-color: rgba(255, 253, 248, 0.4);
  background: transparent;
}

.merkle-cta-panel__actions .merkle-button--ghost:hover,
.merkle-cta-panel__actions .merkle-button--ghost:focus-visible,
.merkle-listing-cta__actions .merkle-button--ghost:hover,
.merkle-listing-cta__actions .merkle-button--ghost:focus-visible {
  border-color: #fffdf8;
  background: rgba(255, 253, 248, 0.08);
}

@media (max-width: 782px) {
  .merkle-cta-panel,
  .merkle-listing-cta {
    grid-template-columns: 1fr;
    padding: var(--merkle-space-32) var(--merkle-space-24);
  }
  /* Stack CTA buttons vertically and stretch them to fill the panel
   * on mobile so the touch targets span the full container width
   * rather than sitting at their natural intrinsic widths. */
  .merkle-cta-panel__actions,
  .merkle-listing-cta__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .merkle-cta-panel__actions .merkle-button,
  .merkle-listing-cta__actions .merkle-button {
    /* `align-items: stretch` on the flex parent above already
     * stretches each button to the column width. We add
     * box-sizing: border-box so the 28px horizontal padding doesn't
     * push the button past the container (the .merkle-button
     * default is content-box) and centre the label so its inline
     * alignment matches the other buttons. */
    box-sizing: border-box;
    justify-content: center;
  }
}

.merkle-related-listings {
  margin: var(--merkle-space-64) 0 var(--merkle-space-48);
}

.merkle-related-listings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--merkle-space-16);
  margin-bottom: var(--merkle-space-24);
}

.merkle-related-listings__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.merkle-related-listings__more {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--merkle-color-primary);
  text-decoration: none;
}

.merkle-related-listings__more:hover,
.merkle-related-listings__more:focus-visible {
  text-decoration: underline;
}

.merkle-related-listings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--merkle-space-24);
}

@media (max-width: 1024px) {
  .merkle-related-listings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .merkle-related-listings__grid {
    grid-template-columns: 1fr;
  }
}

.merkle-related-listings__card {
  display: flex;
  flex-direction: column;
  background: var(--merkle-color-surface);
  border: 1px solid var(--merkle-color-border);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.merkle-related-listings__card:hover,
.merkle-related-listings__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--merkle-shadow-md);
}

.merkle-related-listings__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--merkle-color-surface-strong);
}

.merkle-related-listings__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merkle-related-listings__placeholder {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--merkle-color-surface-strong), var(--merkle-color-background));
}

.merkle-related-listings__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--merkle-space-20) var(--merkle-space-24);
}

.merkle-related-listings__price {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: var(--merkle-color-secondary);
}

.merkle-related-listings__title {
  font-size: 0.95rem;
  color: var(--merkle-color-text-muted);
}

/* Listing-card placeholder watermark */
.merkle-listing-card__placeholder,
.merkle-featured-card__placeholder,
.merkle-open-house-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--merkle-color-surface-strong), var(--merkle-color-background));
  position: relative;
}

.merkle-listing-card__placeholder::after,
.merkle-featured-card__placeholder::after,
.merkle-open-house-card__placeholder::after {
  content: "MERKLE";
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  color: rgba(35, 31, 26, 0.18);
}

/* ================================================================
   Unified button color — every CTA, submit, and form button is the
   brand red. Overrides any plugin (CF7, Yoast, SiteOrigin) defaults.
   ================================================================ */

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.wpcf7-submit,
form button,
form input[type="submit"],
form input[type="button"],
form button[type="submit"],
.merkle-mortgage-calculator button[type="submit"],
.merkle-property-search__shell button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--merkle-color-primary), var(--merkle-color-primary-deep));
  color: #fff !important;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(139, 21, 32, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.wpcf7-submit:hover,
form button:hover,
form input[type="submit"]:hover,
form input[type="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(139, 21, 32, 0.24);
  background: linear-gradient(135deg, var(--merkle-color-primary-deep), var(--merkle-color-primary));
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible,
.wpcf7-submit:focus-visible {
  outline: 2px solid var(--merkle-color-primary);
  outline-offset: 3px;
}

/* CF7 form fields — give the inputs a consistent, professional skin
   so the contact page looks like the rest of the site. */
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

.wpcf7-form label {
  display: block;
  margin-bottom: var(--merkle-space-16);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--merkle-color-secondary);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  color: var(--merkle-color-text);
  background: #fff;
  border: 1px solid var(--merkle-color-border);
  border-radius: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--merkle-color-primary);
  box-shadow: 0 0 0 3px rgba(191, 30, 45, 0.12);
  outline: none;
}

.wpcf7-form textarea {
  min-height: 180px;
  resize: vertical;
}

.wpcf7-response-output {
  margin-top: var(--merkle-space-16);
  padding: var(--merkle-space-12) var(--merkle-space-16);
  border-left: 3px solid var(--merkle-color-primary);
  background: rgba(191, 30, 45, 0.06);
  font-size: 0.92rem;
}

/* ================================================================
   Contact page layout polish — equalize the two cards so they read
   as a single cohesive composition rather than two stacked panels.
   ================================================================ */

.merkle-page-shell--contact .merkle-page-shell__hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.merkle-page-shell--contact .merkle-page-shell__hero h2,
.merkle-page-shell--testimonials .merkle-page-shell__hero h2,
.merkle-page-shell--open-houses .merkle-page-shell__hero h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 0 var(--merkle-space-16);
  line-height: 1.15;
}

.merkle-contact-layout {
  align-items: stretch;
  margin-top: var(--merkle-space-32);
}

/* Info card — quieter than the previous design: no internal dividers,
 * muted (not red) labels, single body weight, no underline-on-hover
 * borders, no dashed hour rows. Keeps the white surface + subtle border
 * so it reads as a card next to the dark form panel, but the inside
 * relies on whitespace and typography rather than rules to separate
 * sections. */
.merkle-contact-layout .merkle-contact-card--info {
  border-radius: 0;
  background: var(--merkle-color-surface);
  box-shadow: none;
  border: 1px solid var(--merkle-color-border);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--merkle-space-32);
}

.merkle-contact-card__block {
  display: flex;
  flex-direction: column;
  gap: var(--merkle-space-10);
  padding-bottom: 0;
  border-bottom: 0;
}

.merkle-contact-card__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--merkle-color-text-muted);
}

.merkle-contact-card__address {
  margin: 0;
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--merkle-color-secondary);
  font-weight: 500;
}

.merkle-contact-card__map {
  align-self: flex-start;
  margin-top: var(--merkle-space-8);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--merkle-color-primary);
  text-decoration: none;
}

.merkle-contact-card__map:hover,
.merkle-contact-card__map:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--merkle-color-primary-deep);
}

.merkle-contact-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.merkle-contact-card__list li {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--merkle-color-secondary);
  font-weight: 500;
}

.merkle-contact-card__list a {
  color: var(--merkle-color-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 160ms ease;
}

.merkle-contact-card__list a:hover,
.merkle-contact-card__list a:focus-visible {
  color: var(--merkle-color-primary);
}

.merkle-contact-card__list-muted {
  color: var(--merkle-color-text-muted) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

.merkle-contact-card__list--contact li {
  display: flex;
  align-items: baseline;
  gap: var(--merkle-space-12);
}

.merkle-contact-card__tag {
  flex: 0 0 48px;
  color: var(--merkle-color-text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.merkle-contact-card__list--hours {
  gap: 4px;
}

.merkle-contact-card__list--hours li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--merkle-space-12);
  padding: 0;
  border-bottom: 0;
  font-size: 0.95rem;
}

.merkle-contact-card__list--hours li > span:first-child {
  color: var(--merkle-color-text-muted);
  font-weight: 500;
  letter-spacing: 0;
}

.merkle-contact-card__list--hours li > span:last-child {
  color: var(--merkle-color-secondary);
  font-weight: 500;
}

.merkle-contact-card__hours-note {
  margin: 6px 0 0;
  color: var(--merkle-color-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Contact form panel — visually a CTA panel: dark background, red accent
   bar on the leading edge, light typography. Form fields inside adopt
   the rounded white "search-bar" treatment so they pop against the dark. */
.merkle-contact-layout .merkle-contact-card--form {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  background: var(--merkle-color-secondary);
  border: 0;
  color: #fffdf8;
  /* Override the parent flex/gap layout — use block flow with item margins
     so the eyebrow → title → lede grouping reads tightly, like a CTA panel. */
  display: block;
}

.merkle-contact-card--form::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--merkle-color-primary);
}

/* Tight CTA-panel-style grouping for the eyebrow/title/lede. */
.merkle-contact-card--form .merkle-contact-card__label--form {
  margin: 0 0 var(--merkle-space-8);
  color: var(--merkle-color-accent);
  letter-spacing: 0.2em;
}

.merkle-contact-card--form .merkle-contact-card__form-title {
  margin: 0 0 var(--merkle-space-12);
  color: #fffdf8;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
}

.merkle-contact-card--form .merkle-contact-card__form-lede {
  margin: 0 0 var(--merkle-space-24);
  color: rgba(255, 253, 248, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

/* Form field treatment inside the dark panel — mirrors the property
   search inputs (rounded white input, subtle border, accent focus ring). */
.merkle-contact-card--form .merkle-form {
  margin-top: 0;
}

.merkle-contact-card--form .merkle-form__label {
  color: rgba(255, 253, 248, 0.92);
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 800;
}

.merkle-contact-card--form .merkle-form__required {
  color: var(--merkle-color-accent);
}

.merkle-contact-card--form .merkle-form__field input,
.merkle-contact-card--form .merkle-form__field textarea,
.merkle-contact-card--form .merkle-form__field select {
  padding: 14px 16px;
  border: 1px solid rgba(255, 253, 248, 0.16);
  border-radius: 16px;
  background: #fffdf8;
  color: var(--merkle-color-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.merkle-contact-card--form .merkle-form__field input::placeholder,
.merkle-contact-card--form .merkle-form__field textarea::placeholder {
  color: rgba(35, 31, 26, 0.5);
}

.merkle-contact-card--form .merkle-form__field input:focus,
.merkle-contact-card--form .merkle-form__field textarea:focus,
.merkle-contact-card--form .merkle-form__field select:focus {
  outline: none;
  border-color: var(--merkle-color-accent);
  box-shadow: 0 0 0 3px rgba(200, 165, 106, 0.28);
}

.merkle-contact-card--form .merkle-form__field input:invalid:not(:placeholder-shown):not(:focus),
.merkle-contact-card--form .merkle-form__field textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--merkle-color-primary);
}

.merkle-contact-card--form .merkle-form__feedback {
  background: rgba(255, 253, 248, 0.06);
  border-left-color: rgba(255, 253, 248, 0.4);
  color: rgba(255, 253, 248, 0.95);
}

.merkle-contact-card--form .merkle-form__feedback.is-success {
  background: rgba(46, 125, 50, 0.18);
  border-left-color: #7bc47f;
  color: #d8f0d4;
}

.merkle-contact-card--form .merkle-form__feedback.is-error {
  background: rgba(191, 30, 45, 0.18);
  border-left-color: var(--merkle-color-primary);
  color: #ffd7db;
}

@media (max-width: 880px) {
  .merkle-contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Testimonials page experience
   ================================================================ */

.merkle-page-shell--testimonials .merkle-testimonials-page__grid {
  margin-top: var(--merkle-space-32);
}

.merkle-testimonials-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--merkle-space-24);
}

@media (max-width: 1024px) {
  .merkle-testimonials-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .merkle-testimonials-page__grid {
    grid-template-columns: 1fr;
  }
}

.merkle-testimonials-page__card {
  display: flex;
  flex-direction: column;
  gap: var(--merkle-space-20);
  padding: var(--merkle-space-32);
  background: var(--merkle-color-surface);
  border: 1px solid var(--merkle-color-border);
}

.merkle-testimonials-page__quote {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--merkle-color-secondary);
}

.merkle-testimonials-page__name {
  margin: auto 0 0;
  padding-top: var(--merkle-space-16);
  border-top: 1px solid var(--merkle-color-border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--merkle-color-primary);
  text-align: right;
}

.merkle-testimonials-page__empty {
  text-align: center;
  padding: var(--merkle-space-48);
  color: var(--merkle-color-text-muted);
  border: 1px dashed var(--merkle-color-border);
}

/* ================================================================
   Page title (the WordPress post-title rendered as the H1).
   When .screen-reader-text is added it becomes accessible-only.
   ================================================================ */

/* Match the page title width to the constrained post-content's width
   (theme.json contentSize). Mirrors the auto-injected layout rule that
   the engine applies to other direct children of .is-layout-constrained.
   Works for post-title, heading, and query-title block sources. */
.merkle-page-title,
.merkle-page-title.wp-block-post-title,
.merkle-page-title.wp-block-heading,
.merkle-page-title.wp-block-query-title {
  width: auto;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-top: var(--merkle-space-48);
  margin-bottom: var(--merkle-space-24);
  margin-left: auto;
  margin-right: auto;
  /* Block-only padding reset. The shorthand `padding: 0` was here
   * before — but the multi-class selector above has specificity
   * (0,2,0), beating the @media (max-width: 782px) `.merkle-page-title`
   * rule (0,1,0), so the mobile padding-left/right: var(--merkle-space-20)
   * never landed and the title rendered flush against the viewport
   * edge on phones. Splitting to padding-block lets the mobile inline
   * padding take effect. */
  padding-block: 0;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  color: var(--merkle-color-secondary);
  letter-spacing: -0.02em;
}

.merkle-page-title.screen-reader-text,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   Native contact form — replacement for Contact Form 7.
   ================================================================ */

.merkle-form {
  display: flex;
  flex-direction: column;
  gap: var(--merkle-space-20);
  margin-top: var(--merkle-space-16);
}

.merkle-form__honeypot {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.merkle-form__row {
  display: grid;
  gap: var(--merkle-space-16);
}

.merkle-form__row--two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 640px) {
  .merkle-form__row--two {
    grid-template-columns: 1fr;
  }
}

.merkle-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.merkle-form__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--merkle-color-secondary);
}

.merkle-form__required {
  color: var(--merkle-color-primary);
  margin-left: 2px;
}

.merkle-form__field input,
.merkle-form__field textarea,
.merkle-form__field select {
  width: 100%;
  padding: 12px 14px;
  /* border-box so width: 100% includes the padding + border. Without
     this the inputs render wider than their container and any parent
     with overflow: hidden (the contact card panel) clips the right edge. */
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--merkle-color-text);
  background: #fff;
  border: 1px solid var(--merkle-color-border);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.merkle-form__field input:focus,
.merkle-form__field textarea:focus,
.merkle-form__field select:focus {
  outline: none;
  border-color: var(--merkle-color-primary);
  box-shadow: 0 0 0 3px rgba(191, 30, 45, 0.12);
}

.merkle-form__field input:invalid:not(:placeholder-shown):not(:focus),
.merkle-form__field textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--merkle-color-primary);
}

.merkle-form__field textarea {
  min-height: 160px;
  resize: vertical;
}

.merkle-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--merkle-space-16);
  align-items: center;
  margin-top: var(--merkle-space-8);
}

.merkle-form__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--merkle-space-8);
  min-width: 180px;
}

.merkle-form__legal {
  flex: 1 1 240px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--merkle-color-text-muted);
}

.merkle-form__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: merkle-spin 0.8s linear infinite;
}

.merkle-form.is-loading .merkle-form__spinner {
  opacity: 1;
}

.merkle-form.is-loading .merkle-form__submit-label {
  opacity: 0.7;
}

.merkle-form__feedback {
  padding: var(--merkle-space-12) var(--merkle-space-16);
  border-left: 3px solid var(--merkle-color-border);
  background: var(--merkle-color-surface);
  font-size: 0.95rem;
  line-height: 1.5;
}

.merkle-form__feedback.is-success {
  border-left-color: #2e7d32;
  background: rgba(46, 125, 50, 0.06);
  color: #1b4d20;
}

.merkle-form__feedback.is-error {
  border-left-color: var(--merkle-color-primary);
  background: rgba(191, 30, 45, 0.06);
  color: var(--merkle-color-primary-deep);
}

/* ================================================================
   Return-to-top button — fixed bottom-right, fades in after scroll.
   ================================================================ */

.merkle-back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid var(--merkle-color-border) !important;
  border-radius: 999px !important;
  background: var(--merkle-color-surface) !important;
  color: var(--merkle-color-secondary) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.merkle-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.merkle-back-to-top:hover,
.merkle-back-to-top:focus-visible {
  background: var(--merkle-color-primary) !important;
  border-color: var(--merkle-color-primary) !important;
  color: #fff !important;
}

.merkle-back-to-top svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .merkle-back-to-top {
    transition: opacity 100ms linear;
    transform: none;
  }
}

/* ================================================================
   Mobile listing cards — horizontal layout: image left, info right.
   Tablets (>=641px) keep the stacked card layout from above.
   ================================================================ */

@media (max-width: 640px) {
  .merkle-listing-card,
  .merkle-featured-card {
    flex-direction: row !important;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 140px;
  }

  /* Media container: fixed 38% width, full card height. The two-class
     selectors raise specificity so we beat the 3/2 aspect-ratio rule
     declared at .merkle-home__listing-grid .merkle-listing-card__media
     (which iOS Safari was preferring over the flex stretch). */
  .merkle-home__listing-grid .merkle-listing-card__media,
  .merkle-featured-grid .merkle-listing-card__media,
  .merkle-property-search__results .merkle-listing-card__media,
  .merkle-listing-card__media,
  .merkle-featured-card__media {
    flex: 0 0 38%;
    max-width: 38%;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    position: relative;
    overflow: hidden;
  }

  /* Inner img/placeholder fills the container exactly. Absolute
     positioning guarantees full coverage regardless of how the browser
     resolves aspect-ratio vs flex stretch — width stays at 100% of the
     38% container so only height is being adjusted. */
  .merkle-listing-card__media > img,
  .merkle-featured-card__media > img,
  .merkle-listing-card__media > .merkle-listing-card__placeholder,
  .merkle-featured-card__media > .merkle-featured-card__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .merkle-listing-card__body,
  .merkle-featured-card__body {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    padding: var(--merkle-space-16);
  }

  .merkle-listing-card__price,
  .merkle-featured-card__price {
    font-size: 1.15rem;
    margin: 0;
  }

  .merkle-listing-card__title,
  .merkle-featured-card__title {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .merkle-listing-card__address,
  .merkle-featured-card__address {
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .merkle-listing-card__stats,
  .merkle-featured-card__stats {
    gap: 6px 12px;
    font-size: 0.78rem;
  }

  .merkle-listing-card__cta,
  .merkle-featured-card__cta {
    align-self: flex-start;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
    margin-top: auto;
  }
}