/*!
 * RealtyMan luxury refinement layer.
 *
 * Loaded AFTER the theme stylesheet. Purely presentational: typography scale,
 * contrast-corrected palette, motion, focus states. It never changes text,
 * links, headings or metadata, so search rankings are unaffected.
 *
 * Values follow measured computed styles from Sotheby's, Christie's, Knight
 * Frank, Douglas Elliman and top individual luxury broker sites.
 */

:root {
  /* --- palette (existing ink/cream/gold, corrected for WCAG AA) --- */
  --rm-ink: #0b0b0c;
  --rm-ink-2: #1a1a1d;
  --rm-ink-body: #2d2d30;       /* body text: never pure black */
  --rm-cream: #faf7f2;
  --rm-cream-2: #f2eee6;
  --rm-paper: #ffffff;
  --rm-gold: #b8945f;           /* fills, 1px rules, display type >= 24px */
  --rm-gold-text: #8a6a3e;      /* inline gold text on cream: 4.59:1, passes AA */
  --rm-gold-pale: #d9bf8a;      /* gold on ink: 10.9:1 */
  --rm-line: #e2dbcf;
  --rm-muted: #6b6961;          /* warm taupe, not blue-grey */

  /* --- type scale: display caps at 58px (measured luxury ceiling 46-56) --- */
  --rm-t-eyebrow: 11px;
  --rm-t-body: clamp(16px, 0.6vw + 14.5px, 17.5px);
  --rm-t-lead: clamp(19px, 1.1vw + 15px, 22px);
  --rm-t-h4: clamp(20px, 1.2vw + 16px, 24px);
  --rm-t-h3: clamp(24px, 1.6vw + 18px, 30px);
  --rm-t-h2: clamp(28px, 3vw + 18px, 46px);
  --rm-t-h1: clamp(34px, 4vw + 18px, 58px);

  /* The var() fallbacks matter: --font-cormorant / --font-inter are next/font
     variables that exist only on the React routes. Without a fallback the
     whole font-family declaration is invalid on the static page documents and
     the browser drops to its default serif (Times). */
  --rm-serif: var(--font-cormorant, "Cormorant Garamond"), "Cormorant Garamond",
    "EB Garamond", Georgia, serif;
  --rm-sans: var(--font-inter, Inter), Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;

  --rm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Point the theme's own tokens at the real faces. The theme declared these
   but the webfont never loaded, so everything fell back to -apple-system. */
:root,
.rm2,
.rm-hub {
  --serif: var(--rm-serif);
  --sans: var(--rm-sans);
  --font-serif: var(--rm-serif);
  --font-sans: var(--rm-sans);
}

/* ---------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------- */

html body,
html body .rm2,
html body .rm-hub {
  font-family: var(--rm-sans);
  font-size: var(--rm-t-body);
  line-height: 1.7;
  color: var(--rm-ink-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif display: weight 400 and POSITIVE tracking. Cormorant is a display
   Garamond with thin strokes; negative tracking collides its serifs. */
html body h1,
html body h2,
html body h3,
html body h4,
html body .title,
html body .lx-hero h1,
html body .rm-hub h1,
html body .rm-hub h2,
html body .rm-hub h3 {
  font-family: var(--rm-serif);
  font-weight: 400;
  letter-spacing: 0.012em;
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: balance;
}

html body h1,
html body .lx-hero h1,
html body .rm-hub h1 {
  font-size: var(--rm-t-h1);
  line-height: 1.08;
}

html body h2,
html body .rm-hub h2 {
  font-size: var(--rm-t-h2);
  line-height: 1.14;
}

html body h3,
html body .rm-hub h3 {
  font-size: var(--rm-t-h3);
  line-height: 1.22;
  letter-spacing: 0.008em;
}

html body h4 {
  font-size: var(--rm-t-h4);
  line-height: 1.3;
}

/* Cormorant is unreadable below ~24px: small type stays sans. */
html body h5,
html body h6,
html body .eyebrow,
html body .lx-eyebrow,
html body .card-meta,
html body .lx-details th,
html body .badge-pill,
html body .card-badge,
html body .lx-stats-item .lbl {
  font-family: var(--rm-sans);
}

/* Reading measure. Listing body copy was running to 127 characters. */
html body .article-body p,
html body .article-body li,
html body .lx-section p,
html body .lx-section li,
html body .rm-hub p,
html body .rm-hub li {
  max-width: 68ch;
}

html body .article-body p {
  line-height: 1.75;
}

/* Eyebrow: the signature luxury unit. Tracking ceiling 0.24em. */
html body .eyebrow,
html body .lx-eyebrow,
html body .rm-article-cta__eyebrow,
html body .article-hero__eyebrow {
  font-family: var(--rm-sans);
  font-size: var(--rm-t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  margin-right: -0.2em; /* cancel the trailing tracked space */
}

/* Gold that passes contrast: darker for small text on cream, pale on ink. */
html body .article-body a,
html body .lx-section a:not(.rm-article-cta__btn):not(.lx-card) {
  color: var(--rm-gold-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

html body .article-hero__eyebrow,
html body .rm-article-cta__eyebrow,
html body .lx-stats-item.price .val {
  color: var(--rm-gold-pale);
}

/* ---------------------------------------------------------------
 * Motion. Long durations, small distances, decelerating easing, once only.
 * Transform/opacity only, so no layout thrash and no CLS.
 * ------------------------------------------------------------- */

.rm-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.rm-reveal.rm-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--rm-ease), transform 0.9s var(--rm-ease);
}

/* Stagger, capped at four items so it never reads as a loading spinner. */
.rm-reveal.rm-in:nth-child(2) { transition-delay: 0.07s; }
.rm-reveal.rm-in:nth-child(3) { transition-delay: 0.14s; }
.rm-reveal.rm-in:nth-child(4) { transition-delay: 0.21s; }

/* Slow image scale inside a fixed frame: the most "expensive" cheap effect. */
html body .lx-mosaic a,
html body .lx-card,
html body .rm-card a {
  overflow: hidden;
}

html body .lx-mosaic img,
html body .lx-card img,
html body .rm-card img {
  transition: transform 0.75s var(--rm-ease);
}

html body .lx-mosaic a:hover img,
html body .lx-card:hover img,
html body .rm-card a:hover img {
  transform: scale(1.045);
}

/* Reading column widths.
   globals.css asks for a narrow column on the React routes (.article-body
   820px, .journal-list 900px), but the captured theme's `.rm2 .wrap` sets
   1320px, loads later and has the same specificity, so it silently won. The
   result on every blog post: a 1320px body whose paragraphs were still capped
   at 68ch, so the copy sat stranded against the left edge while headings,
   tables and lists ran the full 1264px beside it. The theme carries its own
   .article-hero and .rm-article-cta widths, but nothing for these two, so
   they have to be restated here, in the last stylesheet the page loads. */
html body .article-body .wrap {
  max-width: 820px;
}

/* The 820px column already sets the measure, so the 68ch cap above only made
   paragraphs stop 13px short of the headings and tables beside them. */
html body .article-body p,
html body .article-body li {
  max-width: none;
}

html body .journal-list .wrap {
  max-width: 1180px;
}

/* Gold rule drawing under a nav link.
   NOT applied to .rm2 .menu a: the theme already draws its own gold rule
   there with ::after at bottom:2px, so adding a ::before at bottom:-6px
   put two parallel gold lines under every header link on hover. */
html body .site-nav a {
  position: relative;
}

html body .site-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--rm-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--rm-ease);
}

html body .site-nav a:hover::before {
  transform: scaleX(1);
}

/* Header condenses on scroll (class set by rm-enhance.js). */
html body header {
  transition: padding 0.45s var(--rm-ease), background-color 0.45s var(--rm-ease),
    border-color 0.45s var(--rm-ease);
}

/* No rule for header.rm-header-condensed on purpose. The theme already draws
   a 1px gold border-bottom on the bar (and, on post pages, sets it
   !important), and the box-shadow that used to live here drew a second
   hairline directly beneath it, so every scrolled page showed a double rule
   under the nav. The condensed state now changes padding only. */

/* Buttons: understated, no gradient, no heavy shadow. */
html body .rm-article-cta__btn,
html body .btn-gold,
html body .nav-cta {
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}

/* Accessibility: a visible focus ring existed nowhere on the site. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible {
  outline: 2px solid var(--rm-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

@keyframes rm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
 * Author card (E-E-A-T signal on every article)
 * ------------------------------------------------------------- */

html body .rm-author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 48px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--rm-line);
  max-width: 68ch;
}

html body .rm-author__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

html body .rm-author__name {
  font-size: 24px;
  line-height: 1.2;
  margin: 6px 0 8px;
}

html body .rm-author__name a {
  text-decoration: none;
  color: var(--rm-ink);
}

html body .rm-author__name a:hover {
  color: var(--rm-gold-text);
}

html body .rm-author__bio {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--rm-ink-body);
}

html body .rm-author__links {
  margin: 0;
  font-size: 14px;
  color: var(--rm-muted);
}

html body .rm-author__links a {
  color: var(--rm-gold-text);
  text-decoration: none;
}

html body .rm-author__links a:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  html body .rm-author {
    flex-direction: column;
    gap: 14px;
  }
}

/* Snapshot markup carries inline negative tracking on hero headings
   (-0.03em). Cormorant's thin strokes collide at negative tracking; the
   measured luxury standard is +0.02em. Inline styles need this specificity. */
html body h1[style],
html body h2[style],
html body h3[style],
html body .title[style],
html body .rm-seo-h1[style] {
  letter-spacing: 0.012em !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------
 * Header
 *
 * Inter is wider than the -apple-system fallback the theme was built
 * against, so nav labels began wrapping mid-phrase ("PROPERTIES IN /
 * CANADA") and the brand lockup broke onto three lines. Nothing here
 * changes link text or order: it only stops the wrapping and tightens
 * the rhythm so the bar reads as one clean line.
 * ------------------------------------------------------------- */

html body .rm2 .nav {
  gap: 20px;
  flex-wrap: nowrap;
}

/* Brand lockup stays on its own two tight lines and never wraps. */
html body .rm2 .brand {
  flex: 0 0 auto;
  gap: 12px;
}

html body .rm2 .brand-text {
  white-space: nowrap;
}

html body .rm2 .brand-name {
  font-family: var(--rm-serif);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

html body .rm2 .brand-sub {
  font-family: var(--rm-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.19em;
  white-space: nowrap;
}

/* Nav: one line, never break a label across lines. */
html body .rm2 .menu {
  gap: clamp(16px, 1.9vw, 30px);
  flex-wrap: nowrap;
  margin-left: auto;
}

html body .rm2 .menu li {
  white-space: nowrap;
}

html body .rm2 .menu a {
  font-family: var(--rm-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  white-space: nowrap;
  line-height: 1;
}

html body .rm2 .nav-utility {
  gap: 12px;
  flex: 0 0 auto;
}

/* CTA: understated outline, never a wrapped two-line block. */
html body .rm2 .nav-cta {
  font-family: var(--rm-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  white-space: nowrap;
  padding: 12px 20px;
  line-height: 1;
}

html body .rm2 .rm-lang-switcher {
  font-family: var(--rm-sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Below the desktop nav breakpoint the theme swaps to a burger; make sure
   nothing from the desktop row leaks in. */
@media (max-width: 1180px) {
  html body .rm2 .menu {
    gap: clamp(12px, 1.5vw, 22px);
  }
  html body .rm2 .menu a {
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }
  html body .rm2 .nav-cta {
    padding: 11px 15px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

/* Cormorant has a small x-height and thin strokes: below ~24px it reads as
   grey mush. Card and list titles sit at 19-21px, so they take the sans face
   (this is what Sotheby's and Josh Flagg do at card level too). */
html body .card-title,
html body .lx-rel-title,
html body .rm-card h3,
html body .lx-card h3,
html body .journal-item h2,
html body .journal-card__title,
html body .foot-col h3,

/* Footer column headers keep their tracked-label treatment. */
html body .foot-col h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The listing hero is now a real <img> (preload-scanner discoverable) rather
   than a CSS background, so it needs the cover behaviour the background
   declaration used to provide. */
html body .lx-hero-img--el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero photograph at full strength. The theme dimmed it to .72, which is the
   fastest way to make expensive property photography look cheap. Legibility
   comes from a bottom scrim instead, so only the text area is darkened. */
html body .lx-hero-img,
html body .lx-hero-img--el {
  opacity: 1;
}

html body .lx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(11, 11, 12, 0.82) 0%,
    rgba(11, 11, 12, 0.45) 32%,
    rgba(11, 11, 12, 0.05) 62%,
    rgba(11, 11, 12, 0) 100%
  );
}

html body .lx-hero-content {
  position: relative;
  z-index: 1;
  background: none;
}

/* ---------------------------------------------------------------
 * Article FAQ (renders the Q&A that the recovered FAQPage schema
 * describes, so structured data always matches visible content)
 * ------------------------------------------------------------- */

html body .rm-faq {
  max-width: 68ch;
  /* Centred by default. This rule was written for the FAQ inside an article,
     where the column already centres it, so "margin: 44px 0 0" was harmless.
     On /mortgage/ the FAQ is a top-level section instead, and a 68ch block
     with no auto margin sat hard against the left edge while every other
     section on the page centred at 52px. */
  margin: 44px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--rm-line);
}

/* Inside an article the FAQ stays flush with the body copy above it. */
html body .article-body .rm-faq,
html body .wrap > .rm-faq {
  margin-left: 0;
  margin-right: 0;
}

html body .rm-faq__title {
  font-size: clamp(24px, 2.2vw + 16px, 32px);
  margin: 0 0 14px;
}

html body .rm-faq__item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rm-line);
}

html body .rm-faq__item:last-child {
  border-bottom: none;
}

/* Questions are visible H3s with the answer directly beneath: the FAQPage
   schema describes exactly this, and nothing is hidden behind a click. The
   margins are set here so the article heading rhythm does not apply. */
html body .rm-faq .rm-faq__q {
  margin: 0 0 8px;
  font-family: var(--rm-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--rm-ink);
}

html body .rm-faq__a {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--rm-ink-body);
}

html body .rm-faq__a p {
  margin: 0 0 0.8em;
}

html body .rm-faq__a p:last-child {
  margin-bottom: 0;
}

/* Lead form feedback (injected by rm-enhance.js after submit) */
html body .rm-form-notice {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--rm-gold);
  background: var(--rm-cream-2);
  font-family: var(--rm-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rm-ink-body);
  border-radius: 2px;
}

html body .rm-form-notice--err {
  border-left-color: #a3402f;
  background: #fbf1ef;
  color: #6d2a1e;
}

/* Fallback action: hands the visitor their enquiry as a ready-to-send email */
html body .rm-form-notice__action {
  color: #6d2a1e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Persistent mobile call bar
 * ------------------------------------------------------------- */

.rm-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  gap: 1px;
  background: var(--rm-line);
  transform: translateY(110%);
  transition: transform 0.45s var(--rm-ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -6px 24px rgba(11, 11, 12, 0.14);
}

.rm-callbar.is-in {
  transform: none;
}

.rm-callbar a {
  flex: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--rm-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rm-callbar__call {
  background: var(--rm-gold);
  color: #fff;
}

.rm-callbar__call svg {
  width: 17px;
  height: 17px;
}

.rm-callbar__msg {
  flex: 0 0 38%;
  background: var(--rm-ink);
  color: var(--rm-gold-pale);
}

@media (min-width: 861px) {
  .rm-callbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-callbar { transition: none; }
}

/* Keep the bar clear of page-bottom content */
@media (max-width: 860px) {
  html body footer { padding-bottom: 78px; }
}

/* ---------------------------------------------------------------
 * Gallery lightbox
 *
 * The theme's rules are all scoped to a `.rm-v2` wrapper that the React
 * listing route does not use, so none of them applied: the overlay rendered
 * inline in the page as a stray close button and a broken image. These are
 * the same visual rules, unscoped.
 * ------------------------------------------------------------- */

html body .lx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 8, 9, 0.95);
}

html body .lx-lightbox.open {
  display: flex;
}

html body .lx-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

html body .lx-lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html body .lx-lightbox button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--rm-gold);
}

html body .lx-lightbox .lx-close {
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  font-size: 26px;
  font-weight: 300;
}

html body .lx-lightbox .lx-prev,
html body .lx-lightbox .lx-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 28px;
  font-weight: 300;
}

html body .lx-lightbox .lx-prev { left: 16px; }
html body .lx-lightbox .lx-next { right: 16px; }

@media (max-width: 640px) {
  html body .lx-lightbox .lx-prev,
  html body .lx-lightbox .lx-next {
    top: auto;
    bottom: 22px;
    transform: none;
    width: 54px;
    height: 54px;
  }
  html body .lx-lightbox .lx-prev { left: 22px; }
  html body .lx-lightbox .lx-next { right: 22px; }
}

/* Dark-scheme reset must not repaint the overlay chrome */
@media (prefers-color-scheme: dark) {
  html body .lx-lightbox,
  html body .lx-lightbox * {
    color: #fff;
  }
}

/* ---------------------------------------------------------------
 * Related posts + journal pagination
 * ------------------------------------------------------------- */

html body .rm-related {
  max-width: 68ch;
  margin: 44px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--rm-line);
}

html body .rm-related__title {
  font-size: clamp(22px, 2vw + 15px, 28px);
  margin: 0 0 14px;
}

html body .rm-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

html body .rm-related__list li {
  border-bottom: 1px solid var(--rm-line);
}

html body .rm-related__list li:last-child {
  border-bottom: none;
}

html body .rm-related__list a {
  display: block;
  padding: 12px 0;
  font-family: var(--rm-sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--rm-ink-body);
  text-decoration: none;
  transition: color 0.25s var(--rm-ease), padding-left 0.25s var(--rm-ease);
}

html body .rm-related__list a:hover {
  color: var(--rm-gold-text);
  padding-left: 6px;
}

html body .rm-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rm-line);
  font-family: var(--rm-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html body .rm-pager a {
  color: var(--rm-gold-text);
  text-decoration: none;
}

html body .rm-pager a:hover {
  color: var(--rm-ink);
}

html body .rm-pager__count {
  color: var(--rm-muted);
  letter-spacing: 0.1em;
}

html body .rm-pager__prev--off,
html body .rm-pager__next--off {
  color: #c2bbb0;
}

/* ---------------------------------------------------------------
 * Listing enquiry form
 *
 * Reuses the theme's .cform styling so it reads as part of the site
 * rather than a bolt-on. Sits inside the dark schedule band, so the
 * fields need the paper background the theme gives them and the
 * labels need to stay legible against it.
 * ------------------------------------------------------------- */
html body .lx-enquire {
  margin: 26px auto 0;
  max-width: 760px;
  text-align: left;
}

html body .lx-enquire__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

html body .lx-enquire__or {
  font-family: var(--rm-sans);
  font-size: 14px;
  color: var(--rm-ink-body);
}

html body .lx-enquire__or a {
  color: var(--rm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  html body .lx-enquire {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }
}

/* ---------------------------------------------------------------
 * Journal card grid (/blog/ and /blog/page/N/)
 *
 * Text cards, by the owner's call: no photo band and no "Blogs" label. Same
 * surface, hairline and radius as the listing cards, a 2px gold rule along
 * the top as the only ornament. Three columns at the 1180px journal width,
 * two on a tablet, one on a phone; the min() keeps a card from ever being
 * wider than the viewport on the narrowest handsets.
 * ------------------------------------------------------------- */
html body .journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 28px;
  margin-top: 4px;
}

html body .journal-card {
  margin: 0;
  background: var(--rm-paper);
  border: 1px solid var(--rm-line);
  border-top: 2px solid var(--rm-gold);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  transition: transform 0.45s var(--rm-ease), border-color 0.45s var(--rm-ease),
    box-shadow 0.45s var(--rm-ease);
}

html body .journal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 148, 95, 0.55);
  border-top-color: var(--rm-gold);
  box-shadow: 0 18px 40px -24px rgba(11, 11, 12, 0.35);
}

html body .journal-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 24px 24px 22px;
  color: inherit;
  text-decoration: none;
}

html body .journal-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rm-sans);
  font-size: var(--rm-t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rm-gold-text);
  margin-bottom: 10px;
}

html body .journal-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

html body .journal-card__title {
  margin: 0 0 12px;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--rm-ink);
  transition: color 0.25s ease;
}

html body .journal-card:hover .journal-card__title {
  color: var(--rm-gold-text);
}

html body .journal-card__desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rm-muted);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html body .journal-card__more {
  margin-top: auto;
  font-family: var(--rm-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-ink-2);
}

@media (max-width: 640px) {
  html body .journal-grid {
    gap: 18px;
  }
  html body .journal-card__link {
    padding: 20px 18px 20px;
  }
}

/* The header is position:fixed and 60-75px tall; the hero's 72px top padding
   put "Reading list." directly underneath it on every device. The article
   hero clears the same header with 200px; this keeps the journal one lighter
   but out from under the bar. */
html body .journal-hero {
  padding: clamp(128px, 14vw, 160px) 0 clamp(48px, 6vw, 72px);
}

/* Mobile call bar text. The theme forces #0b0b0c on every element outside its
   short list of dark containers, and the call bar (injected by rm-enhance.js)
   is not on that list: "WhatsApp" rendered ink on ink, so the right half of
   the bar was a blank black block, and the call side lost its white. Only
   !important outranks that rule. */
html body .rm-callbar__call {
  color: #ffffff !important;
}

html body .rm-callbar__msg {
  color: var(--rm-gold-pale) !important;
}

/* Article rhythm.
   The captured theme zeroes every margin it can reach - `.rm2 p { margin: 0 }`
   and `.rm2 h1..h6 { margin: 0 }` - and those outrank the spacing globals.css
   sets on `.article-body p` / `h2` (same class count, later sheet). Every
   blog post therefore rendered as a wall of text: no gap between paragraphs,
   headings flush against the copy above and below, lists glued to prose. This
   restates the rhythm one level up so it wins on every viewport. */
html body .article-body p {
  margin: 0 0 1.25em;
}

/* The route's own section headings (FAQ, related, author card) carry their
   own spacing; the rhythm below is for headings inside the post body. */
html body .article-body h2:not(.rm-faq__title):not(.rm-related__title):not(.rm-author__name) {
  margin: 2.1em 0 0.65em;
  line-height: 1.15;
}

html body .article-body h3 {
  margin: 1.7em 0 0.55em;
  line-height: 1.2;
}

html body .article-body h4 {
  margin: 1.4em 0 0.5em;
}

html body .article-body h2 + h3,
html body .article-body h3 + h4 {
  margin-top: 0.4em;
}

/* Two classes outrank the element rules above, which is fine here: only the
   very first block loses its top margin. (A generic `.wrap > *` rule was
   tried first and, at the same specificity, silently beat every heading
   margin above it.) */
html body .article-body .wrap > :first-child {
  margin-top: 0;
}

html body .article-body ul,
html body .article-body ol {
  margin: 0 0 1.35em;
  padding-left: 1.35em;
}

html body .article-body li {
  margin: 0 0 0.5em;
}

html body .article-body li > p {
  margin-bottom: 0.4em;
}

html body .article-body blockquote {
  margin: 1.5em 0;
  padding: 0.3em 0 0.3em 1.2em;
  border-left: 3px solid var(--rm-gold);
  color: var(--rm-ink-body);
}

html body .article-body .table-scroll {
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html body .article-body .table-scroll > table {
  margin: 0;
  min-width: 520px;
}

html body .article-body figure {
  margin: 1.6em 0;
}

html body .article-body hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--rm-line);
}

/* ---------------------------------------------------------------
 * Article furniture: breadcrumb, jump list, lead paragraph, author role
 * ------------------------------------------------------------- */
html body .rm-crumbs {
  margin: 0 0 22px;
  font-family: var(--rm-sans);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

html body .rm-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}

html body .rm-crumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
}

html body .rm-crumbs li + li::before {
  content: "/";
  margin: 0 9px;
  color: rgba(184, 148, 95, 0.7);
}

html body .rm-crumbs a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

html body .rm-crumbs a:hover {
  color: var(--rm-gold-pale);
}

html body .rm-crumbs li[aria-current] span {
  display: block;
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.9);
}

html body .article-hero__meta time,
html body .article-hero__meta a {
  color: inherit;
  text-decoration: none;
}

html body .article-hero__meta a:hover {
  color: var(--rm-gold-pale);
}

/* Jump list for long articles (3+ sections). */
html body .rm-toc {
  margin: 0 0 40px;
  padding: 20px 24px 22px;
  background: var(--rm-cream-2);
  border: 1px solid var(--rm-line);
  border-radius: 6px;
}

html body .rm-toc__title {
  margin: 0 0 10px;
  font-family: var(--rm-sans);
  font-size: var(--rm-t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rm-gold-text);
}

html body .rm-toc ol {
  margin: 0;
  padding: 0 0 0 1.3em;
  columns: 2;
  column-gap: 32px;
}

html body .rm-toc li {
  margin: 0 0 6px;
  break-inside: avoid;
  font-family: var(--rm-sans);
  font-size: 15px;
  line-height: 1.5;
}

html body .rm-toc a {
  color: var(--rm-ink-body);
  text-decoration: none;
}

html body .rm-toc a:hover {
  color: var(--rm-gold-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
  html body .rm-toc ol {
    columns: 1;
  }
  html body .rm-crumbs li[aria-current] span {
    max-width: 22ch;
  }
}

/* The body's first block never carries a top margin; its first paragraph
   is the lead and reads a touch larger. */
html body .rm-body > :first-child {
  margin-top: 0;
}

html body .rm-body > p:first-child {
  font-size: var(--rm-t-lead);
  line-height: 1.6;
  color: var(--rm-ink-2);
}

/* Anchored headings land clear of the fixed header. */
html body .rm-body h2[id] {
  scroll-margin-top: 96px;
}

html body .rm-author__role {
  margin: 0 0 8px;
  font-family: var(--rm-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--rm-gold-text);
}

/* Snapshot pages (e.g. /mortgage/) ship their FAQ as <details>/<summary> with
   the same class names; the accordion affordance stays for that shape only. */
html body details.rm-faq__item {
  padding: 0;
}

html body details.rm-faq__item > summary.rm-faq__q {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 15px 34px 15px 0;
  position: relative;
}

html body details.rm-faq__item > summary.rm-faq__q::-webkit-details-marker {
  display: none;
}

html body details.rm-faq__item > summary.rm-faq__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: var(--rm-gold);
}

html body details.rm-faq__item[open] > summary.rm-faq__q::after {
  content: "−";
}

html body details.rm-faq__item > summary.rm-faq__q:hover {
  color: var(--rm-gold-text);
}

html body details.rm-faq__item > .rm-faq__a {
  padding: 0 34px 18px 0;
}

/* The theme paints .rm-faq on a cream-2 panel with no side padding, so the
   questions sat on the panel's edge inside an article. */
html body .article-body .rm-faq {
  padding: 30px 26px 34px;
  border-radius: 6px;
}

@media (max-width: 640px) {
  html body .article-body .rm-faq {
    padding: 26px 18px 28px;
  }
}

/* Closed mobile drawer must not catch taps. The theme (realtyman-2026.css,
   max-width 880px) hides the drawer with opacity 0 + pointer-events none on
   nav, then sets the inner .menu back to pointer-events auto unconditionally,
   so the invisible menu sat over the whole page: tapping a property card on
   the home page opened /mortgage/. Scoped to the open state (2026-09-24). */
@media (max-width: 880px) {
  html body .rm2 .topbar:not(.menu-open) nav,
  html body .rm2 .topbar:not(.menu-open) nav .menu,
  html body .rm2 .topbar:not(.menu-open) nav .menu a {
    pointer-events: none;
    visibility: hidden;
  }
  html body .rm2 .topbar.menu-open nav,
  html body .rm2 .topbar.menu-open nav .menu,
  html body .rm2 .topbar.menu-open nav .menu a {
    pointer-events: auto;
    visibility: visible;
  }
}