/* A fallback that occupies exactly the space Poppins will.

   Poppins is 13% wider and 30% taller in the line box than the system
   fallback at the same font-size. So when the web font swapped in, every
   block of text grew and pushed the page down — on search.html the filter bar
   gained 12px and shoved <main> with it, which Lighthouse attributed as a
   0.127 layout shift against a 0.1 budget for the whole page.

   The overrides below stretch the fallback's metrics to match Poppins:
   size-adjust for width, ascent/descent/line-gap for the line box. Measured
   from both fonts at 100px — Poppins 1402x150, Arial 1240x115 — so the
   fallback now renders in the same box and the swap moves nothing.

   This is why the font stack lists it between Poppins and the generics. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 113.13%;
  ascent-override: 92.8%;
  descent-override: 30.9%;
  line-gap-override: 8.8%;
}

/* Real Living — shared chrome for the standalone desktop pages (guide, blog,
   search, listing, city). index.html's desktop gate carries its own copy of
   the nav/footer inside css/app.css's min-width:860px block, because there
   the whole page lives inside #desktop-gate; these pages are ordinary
   documents, so the same components are defined here unscoped.

   Component names mirror movenew.ca (nav-b pill, ink footer, guide article
   layout from the Edmonton Property Assessment guides) in Real Living's brand. */

:root {
  --orange: #ec0712;
  /* One red for the whole site. --orange-deep used to be a darker var(--orange),
     which meant buttons and links read as a different red from the logo
     wordmark and the search button. Both tokens are now the brand red;
     --orange-hover is the only darker shade, reserved for hover states.
     White text on #ec0712 measures 4.56:1, so button labels still clear
     WCAG 2.1 AA. */
  --orange-deep: #ec0712;
  --orange-hover: #c40610;
  /* Red TEXT only — every fill stays #ec0712, the search-button red.
     As small text #ec0712 measures 4.33:1 on #faf9f7 and 4.02:1 on #fdedee,
     both under the 4.5:1 WCAG AA floor; #d40610 clears every background the
     site puts red text on (4.83:1 at worst) and is not tellable apart from
     the brand red at body size. */
  --red-text: #d40610;
  --orange-glow: #ff444d;
  --orange-soft: #fdedee;
  --ink: #1c1c1c;
  --ink-2: #555;
  --ink-3: #737373;
  --charcoal: #4e4f4f;
  --linen: #f2efe9;
  --grid: #e6e4df;
  --surface: #faf9f7;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Poppins", "Poppins Fallback", -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ---------- nav (floating frosted pill) ---------- */

/* ONE page container, used by the nav, the footer and every page shell — the
   homepage included, via css/home.css which aliases these. Every page's left
   and right edges line up because they all resolve to this pair. */
:root { --page-max: 1560px; --page-gutter: 20px; }  /* gutter is per side */
@media (max-width: 900px) { :root { --page-gutter: 16px; } }
@media (max-width: 560px) { :root { --page-gutter: 10px; } }

.dgn-wrap { position: sticky; top: 0; z-index: 50; padding: 10px 0; background: #fff; }
.dgn {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto;
  display: flex; align-items: center; gap: 30px;
  /* 11px, not 13px: the wordmark below is 142px wide and ~4px taller than it
     used to be, so the padding gives that back and the bar keeps its height */
  padding: 11px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--grid);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dgn-logo img { width: 142px; height: auto; display: block; }
.dgn-links { display: flex; gap: 32px; list-style: none; margin-left: auto; align-items: center; }
/* Hover is instant on purpose. These links used to carry
   `transition: color 0.2s ease`, and because the fade runs on the way OUT as
   well as in, sweeping the mouse along the nav left three or four links in
   different stages of orange at once — a wave travelling behind the cursor.
   Nobody asked for it and it read as an animation the nav was performing
   rather than as feedback about where the pointer is. A nav should answer
   "am I on this one" immediately; there is nothing to ease. */
.dgn-links a, .dgn-links > li > button {
  font-family: inherit; font-weight: 500; font-size: 15px; color: var(--charcoal);
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.dgn-links a:hover, .dgn-links > li > button:hover { color: var(--red-text); }
.dgn-drop { position: relative; }
.dgn-drop-btn { display: inline-flex; align-items: center; gap: 6px; }
.dgn-chev {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -2px;
}
.dgn-drop.is-open .dgn-chev { transform: rotate(225deg); margin-top: 3px; }
.dgn-drop-menu {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 200px; list-style: none; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
  padding: 8px; z-index: 45;
}
.dgn-drop.is-open .dgn-drop-menu { display: block; }
.dgn-drop-menu li a {
  display: block; padding: 10px 13px; border-radius: 12px;
  font-weight: 500; font-size: 14px; color: var(--charcoal);
  text-decoration: none; white-space: nowrap;
}
.dgn-drop-menu li a:hover { background: var(--orange-soft); color: var(--ink); }
.dgn-drop-right { left: auto; right: 0; transform: none; }
.dgn-drop-note { padding: 10px 13px; font-size: 12.5px; color: #666; line-height: 1.55; width: 230px; }
.dgn-drop-note strong { color: var(--red-text); }
.dgn-fav {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--charcoal); background: none; border: 0; cursor: pointer;
  text-decoration: none;
}
.dgn-fav:hover { color: var(--red-text); }
.dgn-fav svg { width: 22px; height: 22px; }
#dg-fav-count {
  position: absolute; top: -3px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.dgn-cta {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 15px; color: #fff;
  background: var(--orange-deep); border: 0; border-radius: 999px;
  padding: 8px 8px 8px 22px; min-height: 46px; cursor: pointer; text-decoration: none;
}
/* Was translateY(-2px) with a growing shadow over 0.25s — the button lifted
   off the bar, and the orb inside it rotated 45 degrees at the same time. Two
   moving parts in a nav that is already sticky and translucent. Hover is now
   a colour change and nothing moves. */
.dgn-cta:hover { background: var(--orange-hover); }

/* ---------- action buttons: label always white, always centred ----------
   A prose-link rule inside a content section (.mn-guide-sec p a, specificity
   0,2,1) outranks the plain .dgn-cta selector (0,1,0), so an in-body button
   rendered its label in --orange-deep on an --orange-deep pill: a solid red
   lozenge with invisible text. Every context that can restyle a link is
   named here so the button owns its own colour wherever it is dropped.

   The nav button's padding is deliberately asymmetric (22px left, 8px right)
   because it holds the round orb on its right. An in-body button has no orb,
   so it takes symmetric padding — otherwise the label sits visibly off-centre
   inside the pill. */
.dgn-cta,
.mn-guide-sec p a.dgn-cta,
.mn-guide-sec li a.dgn-cta,
.lp-intro p a.dgn-cta,
.blog-art-main p a.dgn-cta,
.blog-art-main a.dgn-cta {
  color: #fff;
  justify-content: center;
  text-align: center;
  /* prose-link rules also add an underline; a pill button must not carry one */
  text-decoration: none;
}
.mn-guide-sec p a.dgn-cta:hover,
.blog-art-main a.dgn-cta:hover,
.lp-intro a.dgn-cta:hover { color: #fff; background: var(--orange-hover); }

.blog-art-main a.dgn-cta,
.lp-intro a.dgn-cta {
  padding: 12px 26px;
  gap: 0;
}
.dgn-orb {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ink); color: #fff;
}
.dgn-orb svg { width: 15px; height: 15px; }

/* ---------- article / guide layout (EPA guides pattern) ---------- */

.guide { max-width: 900px; margin: 0 auto; padding: 0 20px 80px; }
.guide__crumb { padding: 22px 0 0; font-size: 13px; color: var(--ink-3); }
.guide__crumb a { color: inherit; text-decoration: none; }
.guide__crumb a:hover { color: var(--red-text); }
.guide__tag {
  display: inline-block; margin-top: 22px; background: var(--orange-deep); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px;
}
.guide h1 {
  margin-top: 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -0.02em; max-width: 20ch;
}
.guide__lede { margin-top: 14px; max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); line-height: 1.6; }

.guide__stats {
  margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px);
}
.guide__stats .gstat b {
  display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
  color: var(--orange); letter-spacing: -0.02em;
}
.guide__stats .gstat span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.guide__stats-src { grid-column: 1 / -1; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

.guide__layout {
  margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px; align-items: start;
}
.guide__body h2 { font-size: clamp(20px, 2.2vw, 25px); margin: 34px 0 12px; letter-spacing: -0.01em; }
.guide__body h2:first-child { margin-top: 0; }
.guide__body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.guide__body ul { margin: 0 0 16px 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.guide__body li { margin-bottom: 6px; }
.guide__body strong { color: var(--ink); }
.guide__body a { color: var(--red-text); }
.guide__quote {
  border-left: 3px solid var(--orange); background: var(--orange-soft);
  border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 22px 0;
  font-size: 16px; line-height: 1.55; color: var(--ink);
}

.guide__side { position: sticky; top: 90px; }
.guide__card { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); padding: 22px; }
.guide__card .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.guide__card h3 { font-size: 17px; margin: 8px 0; }
.guide__card p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.5; }
.guide__card .btn {
  display: block; text-align: center; width: 100%; font-size: 13.5px; padding: 12px 16px;
  background: var(--orange-deep); color: #fff; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.guide__card .btn:hover { background: #b93c10; }
.guide__card .btn--ghost {
  background: none; color: var(--ink); border: 1px solid var(--grid); border-radius: 999px; margin-top: 8px;
}
.guide__card .btn--ghost:hover { background: var(--orange-soft); }

.guide__faq { margin-top: 48px; }
.guide__faq h2 { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 18px; }
.guide__faq details { border-top: 1px solid var(--grid); padding: 16px 0; }
.guide__faq details:last-child { border-bottom: 1px solid var(--grid); }
.guide__faq summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.guide__faq summary::after { content: "+"; color: var(--orange); font-size: 19px; flex: none; }
.guide__faq details[open] summary::after { content: "–"; }
.guide__faq summary::-webkit-details-marker { display: none; }
.guide__faq p { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.guide__next { margin-top: 48px; }
.guide__next h2 { font-size: clamp(19px, 2vw, 22px); margin-bottom: 16px; }
/* The plain <ul> of further reading. Left unstyled it took the browser's
   default 40px indent and the default link colours, so it sat inset from
   every other block on the page and rendered visited links purple. */
.guide__next > p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 12px; }
.guide__next ul { list-style: none; margin: 0; padding: 0; }
.guide__next li { position: relative; padding-left: 18px; margin-bottom: 10px; line-height: 1.5; }
.guide__next li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.guide__next li a { color: var(--ink); text-decoration: none; font-weight: 500; }
.guide__next li a:hover { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.guide__nextGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.guide__nextCard {
  display: block; background: var(--surface); border: 1px solid var(--grid);
  border-radius: 14px; padding: 18px; text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.guide__nextCard:hover { border-color: var(--orange); transform: translateY(-2px); }
.guide__nextCard .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.guide__nextCard h3 { font-size: 15.5px; margin: 8px 0 6px; line-height: 1.35; }
.guide__nextCard p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ---------- footer (ink, movenew site-footer) ---------- */

.dg-footer { margin-top: 56px; background: #333; color: rgba(255, 255, 255, 0.75); font-size: 14.5px; }
.dg-footer-inner {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 38px 48px; padding: 38px 0 28px; flex-wrap: wrap;
}
.dg-footer-brand { display: flex; flex-direction: column; gap: 8px; max-width: 260px; }
.dg-footer-logo { width: 122px; height: auto; }
.dg-footer-credit { font-size: 12px; color: rgba(255, 255, 255, 0.58); }
/* The brokerage mark. It is a transparent wireframe outline, inverted to
   white — no plate behind it needed, it sits on the footer the way the black
   original sits on white. Sized to sit under the Real Living wordmark without
   competing with it. */
.dg-footer-brokerage { display: inline-block; margin: 14px 0 4px; line-height: 0; }
.dg-footer-brokerage img { width: 152px; height: auto; display: block; opacity: 0.92; }
.dg-footer-brokerage:hover img { opacity: 1; }
.dg-footer-contact { margin-top: 6px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.dg-footer-contact a { color: inherit; text-decoration: none; }
.dg-footer-contact a:hover { color: #fff; }
.dg-footer-col h2 {
  font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58); margin: 0 0 16px;
}
.dg-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dg-footer-col a {
  color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px;
}
.dg-footer-col a:hover { color: #fff; }
.dg-footer-legal { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; padding-bottom: 22px; }
.dg-footer-legal p { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; margin-bottom: 8px; }
.dg-footer-bottom {
  margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}
.dg-footer-bottom a { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-decoration: underline; }
.dg-footer-bottom a:hover { color: #fff; }

@media (max-width: 820px) {
  .guide__layout { grid-template-columns: 1fr; gap: 28px; }
  .guide__side { order: 3; position: static; }
  .dgn-links { display: none; }
}
@media (max-width: 620px) {
  .guide__stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- property detail (PDP) ----------
   Mirrors movenew.ca's listing page component-for-component (action bar,
   gallery stage + thumbs, spec strip, tabbed panels, sticky side rail) in
   Real Living's brand. The builder-specific pieces of that page — the incentives
   banner and the independent-representation copy — are deliberately absent:
   Real Living is a resale MLS browser, not builder representation. */

.pdp { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin: 0 auto 60px; padding-top: 18px; }
.pdp-loading, .pdp-missing { padding: 70px 0; text-align: center; color: var(--ink-2); }
.pdp-missing h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 10px; color: var(--ink); }
.pdp-missing a { color: var(--red-text); }

.pdp-back {
  display: inline-block; font-weight: 500; font-size: 14.5px;
  color: var(--charcoal); text-decoration: none; margin-bottom: 14px;
}
.pdp-back:hover { color: var(--red-text); }

.pdp-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.pdp-actions-l, .pdp-actions-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pdp-action {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: var(--charcoal);
  background: none; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.pdp-action:hover { background: rgba(51, 51, 51, 0.07); color: var(--ink); }
.pdp-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pdp-fav.is-on { color: var(--red-text); }
.pdp-fav.is-on svg { fill: var(--orange); stroke: var(--orange-deep); }
.pdp-action-ghost { border: 1.5px solid rgba(51, 51, 51, 0.18); padding: 7px 17px; }
.pdp-action-ghost:hover { border-color: var(--ink); background: none; }

.pdp-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: #fff; font-size: 14.5px; border-radius: 999px;
  padding: 10px 21px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.pdp-topinfo { margin-bottom: 16px; }
.pdp-addr { font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.pdp-hood { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; }
.pdp-hood-link { color: var(--red-text); text-decoration: none; border-bottom: 1.5px solid rgba(236, 7, 18, 0.4); }
.pdp-hood-link:hover { border-color: var(--orange-deep); }
.pdp-mls { color: var(--ink-3); font-size: 13px; margin-top: 3px; }

/* ---- photo mosaic: the listing page's first screen ----
   A full-bleed hero used to own it alone, so at 1440×900 the price, the beds
   and the baths all sat below the fold — on a site whose premise is the
   monthly number, and whose traffic is 68% desktop. Two-thirds hero and a 2×2
   beside it shows a home's range in one glance and leaves room for the facts. */
.pdp-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  /* Height, not aspect-ratio: photos that push the price off the screen have
     stopped doing their job. Tied to the viewport so a 900px laptop and a 27"
     monitor both get photos and numbers together. */
  height: clamp(300px, 40vh, 470px);
  margin: 10px 0 0;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  background: var(--grid);
}
.pdp-mosaic.is-thin { grid-template-columns: 1fr; }
.pdp-mosaic.is-thin .pdp-mosaic-grid { display: none; }
.pdp-mosaic-hero, .pdp-mosaic-tile {
  border: 0; padding: 0; cursor: pointer;
  background-color: var(--grid); background-size: cover; background-position: center;
  transition: opacity .18s ease;
}
.pdp-mosaic-hero:hover, .pdp-mosaic-tile:hover { opacity: .9; }
.pdp-mosaic-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
}
/* The count is the point: it tells a buyer the listing is documented before
   they spend a click finding out. */
.pdp-mosaic-more {
  position: absolute; right: 16px; bottom: 16px;
  padding: 10px 18px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px;
  background: #fff; font: 600 14px/1 inherit; color: var(--ink);
  cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.pdp-mosaic-more:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Utilities overlaid on the photo instead of taking a full-width band. */
.pdp-mosaic .pdp-actions {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  gap: 8px; margin: 0; padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.pdp-mosaic .pdp-action { padding: 6px 12px; font-size: 13px; }

.pdp-fold { padding-top: 14px; }
/* The left column now carries the address and the spec row as well as the
   price, which made it wide enough to push "Book a Showing" onto its own line
   under everything — .pdp-head is flex-wrap. The CTA belongs beside the
   property information, so: content flexes, CTA holds its width, no wrap. */
.pdp-fold .pdp-head {
  margin: 0; gap: 40px; align-items: flex-start; flex-wrap: nowrap;
}
.pdp-fold .pdp-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.pdp-fold .pdp-head-cta { flex: 0 0 auto; }
.pdp-fold .pdp-topinfo { margin: 0 0 10px; }
.pdp-fold .pdp-price { margin: 4px 0 2px; }
.pdp-fold .pdp-specs { margin: 14px 0 12px; gap: 8px; }
.pdp-fold .pdp-spec { padding: 10px 12px; }
.pdp-fold .pdp-pre-link { display: inline-block; margin-top: 2px; }
/* Six facts on one line rather than 4+2 with a ragged empty cell — the wrapped
   second row was the last thing crossing the fold at 1440×900. */
@media (min-width: 1200px) {
  .pdp-fold .pdp-specs { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1000px) {
  /* Narrow enough that side by side stops fitting — let it stack again. */
  .pdp-fold .pdp-head { flex-wrap: wrap; gap: 24px; }
  .pdp-fold .pdp-head-cta { width: 100%; }
}
@media (max-width: 760px) {
  /* Mobile keeps what it already does well: one photo, then the numbers. Block
     rather than grid, because with the utilities back in flow they became a
     grid child and left a dead cell beside a squashed hero. */
  .pdp-mosaic { display: block; height: auto; background: none; overflow: visible; }
  .pdp-mosaic-hero { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius, 18px); }
  .pdp-mosaic-grid, .pdp-mosaic-more { display: none; }
  .pdp-mosaic .pdp-actions {
    position: static; flex-wrap: wrap; margin-top: 10px;
    background: none; box-shadow: none; padding: 0;
  }
}

/* gallery */
/* The photo viewer, opened from the mosaic.

   An overlay, not a block in the flow. In the flow it duplicated the mosaic's
   photos further down the page, and the stage took its height from its width —
   so on a wide screen the picture was taller than the window and ran off the
   bottom of the frame. Everything here is sized against the viewport instead,
   so it cannot outgrow the screen no matter how wide the browser is. */
.gal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 56px 20px 20px;
  background: rgba(18, 16, 14, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}
.gal[hidden] { display: none; }
.gal-close {
  position: absolute; top: 14px; right: 18px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 300 26px/1 inherit;
}
.gal-close:hover { background: rgba(255, 255, 255, 0.28); }
.gal-stage {
  position: relative; border-radius: 18px; overflow: hidden; background: transparent;
  /* The stage is only as big as the picture inside it, so the backdrop shows
     around a portrait shot rather than a letterbox of dead colour. */
  display: flex; min-height: 0; max-width: 100%;
}
/* The one rule that keeps it inside the frame: the rail, the padding and the
   close button are all accounted for, so the picture takes whatever is left. */
.gal-main {
  display: block; max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto; object-fit: contain; border-radius: 18px;
}
.gal-tags {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 32px);
}
.gal-tag {
  font-weight: 500; font-size: 13px; color: #fff; background: rgba(20, 24, 16, 0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  padding: 5px 14px; white-space: nowrap;
}
.gal-tag:first-child { background: var(--orange); color: #fff; border-color: transparent; }
.gal-count {
  position: absolute; right: 16px; bottom: 16px; font-size: 13.5px; color: #fff;
  background: rgba(20, 24, 16, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px 14px;
}
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease;
}
.gal-nav:hover { background: #fff; }
.gal-prev { left: 16px; }
.gal-next { right: 16px; }
.gal-thumbs {
  display: flex; gap: 8px; margin: 0; overflow-x: auto; padding-bottom: 5px;
  flex: none; max-width: 100%;
}
.gal-thumbs::-webkit-scrollbar { height: 6px; }
.gal-thumbs::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 999px; }
.gal-thumb {
  flex: none; width: 104px; height: 72px; padding: 0; border: 2px solid transparent;
  border-radius: 12px; overflow: hidden; background: none; cursor: pointer;
  opacity: 0.62; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb:hover { opacity: 1; }
.gal-thumb[aria-current="true"] { opacity: 1; border-color: var(--orange); }

/* headline row — Real Living leads with the monthly payment */
.pdp-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap; margin-bottom: 24px;
}
.pdp-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pdp-badge {
  background: var(--linen); border: 1px solid var(--grid); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; color: var(--charcoal); font-weight: 500;
}
.pdp-badge-live { background: var(--orange-soft); border-color: transparent; color: var(--red-text); font-weight: 600; }
.pdp-monthly { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.pdp-monthly span { color: var(--red-text); }
.pdp-price-sub { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.pdp-assump { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.pdp-head-cta { text-align: right; }
.pdp-head-cta .btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--orange-deep); color: #fff;
  border: 0; border-radius: 999px; padding: 13px 26px; font-family: inherit;
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none;
}
.pdp-head-cta .btn:hover { background: #b93c10; }
.pdp-free { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
/* Secondary to Book a Showing: outlined, so the primary action still leads. */
.pdp-savesearch {
  display: block; width: 100%; margin-top: 14px;
  font-family: inherit; font-weight: 600; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--grid); border-radius: 999px;
  padding: 11px 20px; cursor: pointer;
}
.pdp-savesearch:hover:not([disabled]) { border-color: var(--orange); color: var(--red-text); }
.pdp-savesearch[disabled] { opacity: .6; cursor: default; }
.pdp-savesearch-note { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* spec strip */
.pdp-reduced { display: inline-block; margin-bottom: 4px; font-weight: 600; font-size: 14.5px; color: var(--red-text); }

/* header — mirrors movenew .pdp-head: tags, price, mortgage line with an
   inline Adjust, the price-vs-community sentence, all in the left column;
   the CTA and its note alone on the right. */
.pdp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pdp-tag {
  background: var(--linen); border: 1px solid var(--grid); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; color: var(--charcoal); font-weight: 500;
}
.pdp-tag-live { background: var(--orange-soft); border-color: transparent; color: var(--red-text); font-weight: 600; }
.pdp-tag-days { background: var(--orange-soft); border-color: transparent; }
.pdp-price { font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--red-text); }
.pdp-mort { margin-top: 8px; }
.pdp-mort-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pdp-mort-val { font-size: 17px; font-weight: 600; color: var(--ink); }
.pdp-mort-lab { font-size: 13.5px; color: var(--ink-2); }
.pdp-mort-tweak {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--red-text);
  text-decoration: underline; text-underline-offset: 3px;
}
/* display:flex beats the [hidden] attribute, so without this the "Adjust"
   panel was open on every listing page and the Adjust button did nothing
   visible. */
.pdp-mort-tweaks[hidden] { display: none; }
.pdp-mort-tweaks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pdp-mort-tweaks label { font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.pdp-mort-tweaks input {
  width: 92px; font-family: inherit; font-size: 14px; background: var(--linen);
  border: 1.5px solid transparent; border-radius: 10px; padding: 8px 10px; color: var(--ink);
}
.pdp-mort-tweaks input:focus { outline: none; border-color: var(--orange); background: #fff; }
.pdp-pre-link {
  display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600;
  color: var(--red-text); text-decoration: underline; text-underline-offset: 3px;
}
.pdp-pricing { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); max-width: 52ch; line-height: 1.6; }
.pdp-pricing-stat { font-weight: 700; }
.pdp-pricing-stat.is-above { color: #c0392b; }
.pdp-pricing-stat.is-below { color: #1e8449; }
.pdp-pricing-sold-link { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

/* book a showing */
.pdp-book-sub { color: var(--ink-2); font-size: 13.5px; margin-bottom: 14px; line-height: 1.55; }
.pdp-book-q { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.book-modes { display: grid; gap: 7px; margin-bottom: 12px; }
.book-mode {
  font-family: inherit; font-size: 13.5px; text-align: left; color: var(--ink); background: #fff;
  border: 1.5px solid var(--grid); border-radius: 14px; padding: 10px 14px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.book-mode:hover { border-color: var(--orange); }
.book-mode.is-picked { border-color: var(--orange); background: var(--orange-soft); font-weight: 600; }
.book-text {
  width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  background: #fff; border: 1.5px solid var(--grid); border-radius: 14px;
  padding: 12px 14px; resize: vertical; margin-bottom: 12px;
}
.book-text:focus { outline: none; border-color: var(--orange); }
.pdp-book .btn .dgn-orb { display: none; }

.pdp-nearby { margin-top: 30px; text-align: center; }
.pdp-nearby h3 { font-size: 16px; margin-bottom: 12px; }

.pdp-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--grid); border: 1px solid var(--grid);
  border-radius: 22px; overflow: hidden; margin-bottom: 30px;
}
.pdp-spec { background: #fff; padding: 18px 14px; text-align: center; }
.pdp-spec-v { display: block; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.pdp-spec-k { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }

/* tabs */
.pdp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--grid); margin-bottom: 24px; }
.pdp-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 11px 18px; cursor: pointer; font-family: inherit; font-weight: 500;
  font-size: 15px; color: var(--ink-3); transition: color 0.2s ease, border-color 0.2s ease;
}
.pdp-tab:hover { color: var(--ink); }
.pdp-tab[aria-selected="true"] { color: var(--ink); border-color: var(--orange); }
.pdp-panel { display: none; }
.pdp-panel.is-on { display: block; animation: pdp-panel-in 0.3s ease both; }
@keyframes pdp-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Overview panel blocks — movenew groups details and rooms into cards inside
   the Overview tab (not separate tabs), details under Property / Interior /
   Systems / Parking / Lot & site, rooms grouped by level. */
.pdp-block-card {
  background: #fff; border: 1px solid var(--grid); border-radius: 22px;
  padding: 26px; margin-bottom: 20px;
}
.pdp-block-card h2 { font-size: 21px; margin-bottom: 14px; letter-spacing: -0.01em; }
.pdp-desc p { color: var(--ink-2); white-space: pre-line; font-size: 15.5px; line-height: 1.7; }
.pdp-group { margin-top: 20px; }
.pdp-group:first-of-type { margin-top: 0; }
.pdp-group h3 {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red-text); margin-bottom: 8px; font-weight: 700;
}
.pdp-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 16px; }
.pdp-dl dt, .pdp-dl dd { font-size: 14.5px; padding: 9px 0; border-top: 1px solid var(--grid); }
.pdp-dl dt { color: var(--ink-2); }
.pdp-dl dd { font-weight: 500; }
.pdp-dl dt:first-of-type, .pdp-dl dd:first-of-type { border-top: 0; }
.pdp-roomlist { list-style: none; }
.pdp-roomlist li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--grid);
}
.pdp-roomlist li:first-child { border-top: 0; }
.pdp-room-t { font-weight: 600; font-size: 14.5px; }
.pdp-room-d { color: var(--ink-2); font-size: 14px; }
.pdp-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }

.pdp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.pdp-main h3 { font-size: 17px; margin: 26px 0 10px; }
.pdp-main h3:first-child { margin-top: 0; }
.pdp-main p { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.pdp-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.pdp-detail-grid > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--grid); font-size: 14.5px;
}
.pdp-detail-grid dt { color: var(--ink-2); }
.pdp-detail-grid dd { font-weight: 600; text-align: right; }
.pdp-rooms { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pdp-rooms th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); padding: 0 0 8px; font-weight: 600;
}
.pdp-rooms td { padding: 11px 0; border-top: 1px solid var(--grid); color: var(--ink-2); }
.pdp-rooms td:first-child { font-weight: 600; color: var(--ink); }

.pdp-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.pdp-block { border: 1px solid var(--grid); border-radius: 22px; padding: 22px; background: var(--surface); }
.pdp-block h3 { font-size: 17px; margin-bottom: 8px; }
.pdp-block p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
.pdp-block .btn {
  display: block; width: 100%; text-align: center; padding: 12px 16px; border-radius: 999px;
  background: var(--orange-deep); color: #fff; border: 0; font-family: inherit; font-weight: 600;
  font-size: 14px; cursor: pointer; text-decoration: none;
}
.pdp-block .btn:hover { background: #b93c10; }
.pdp-block .btn--ghost { background: none; color: var(--ink); border: 1px solid var(--grid); margin-top: 8px; }
.pdp-block .btn--ghost:hover { background: var(--orange-soft); }
.pdp-book-desktop {
  display: block; text-align: center; margin-top: 12px; font-size: 12.5px;
  color: var(--ink-3); text-decoration: underline;
}
.pdp-book-desktop:hover { color: var(--red-text); }
.pdp-breakdown { list-style: none; font-size: 13.5px; margin-bottom: 12px; }
.pdp-breakdown li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.pdp-breakdown li:last-child { border-bottom: 0; font-weight: 700; color: var(--ink); }
.pdp-map-canvas { height: 240px; border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.pdp-dirlink { font-size: 13.5px; font-weight: 600; color: var(--red-text); text-decoration: none; }

.pdp-similar { margin: 40px 0 16px; }
.pdp-similar h2 { font-size: clamp(21px, 3vw, 28px); text-align: center; letter-spacing: -0.01em; }
.pdp-similar .tab-blurb { text-align: center; color: var(--ink-2); font-size: 15px; margin: 8px 0 24px; }
.pdp-similar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pdp-similar-grid a { text-decoration: none; color: inherit; }
.pdp-similar-grid .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; background-size: cover; background-position: center; background-color: #eee; }
.pdp-similar-grid .t { margin-top: 9px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-similar-grid .m { margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.pdp-similar-grid .p { margin-top: 3px; font-size: 13.5px; font-weight: 600; }
.pdp-hood-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.pdp-hood-actions a {
  background: var(--linen); border: 1px solid var(--grid); border-radius: 999px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 500; color: var(--charcoal); text-decoration: none;
}
.pdp-hood-actions a:hover { background: var(--orange-soft); color: var(--ink); }

.pdp-legal { margin-top: 34px; }
.pdp-courtesy { font-size: 12px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 940px) {
  .pdp-cols { grid-template-columns: 1fr; gap: 28px; }
  .pdp-side { position: static; }
  .pdp-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-head { flex-direction: column; align-items: flex-start; }
  .pdp-head-cta { text-align: left; }
}

/* ---------- search page (list + map, movenew searchpage pattern) ---------- */

body.search-body { display: flex; flex-direction: column; min-height: 100vh; }
body.search-body .dgn-wrap { position: relative; }

.searchbar-wrap { border-bottom: 1px solid var(--grid); background: #fff; position: sticky; top: 0; z-index: 40; }
/* The search page runs on one container: the nav pill, the filter bar and the
   list/map split all sit on the shared --page-max container, so their left and
   right edges line up with each other and with every other page. The bar also carries the pill's 22px inner padding, so
   the first field starts on the same x as the logo above it. */
/* Says what the row of controls is for. Without it the bar reads as a fresh
   site-wide search rather than as something narrowing the results underneath
   — which matters most on the pages where it now appears below a heading that
   has already committed to a set ("1,422 homes, price reduced"). Shares the
   .searchbar container so its left edge lines up with the first field. */
.searchbar-title {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  margin: 0 auto; padding: 12px 22px 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--red-text);
}
.searchbar {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
  display: flex; align-items: end; flex-wrap: wrap; gap: 14px;
  padding: 14px 22px;
}
/* The title already provides the top padding when it is present. */
.searchbar-title + .searchbar { padding-top: 8px; }

/* The money field asks for a payment OR a price, from one box.

   Shown as two words with "or" between them rather than a select. A select
   hides the second option behind a click nobody makes — the whole point is
   that a visitor should see, without doing anything, that this field can be
   either thing. It sits in the label row, so it costs the bar no width: the
   input below still sets the field's width, and the bar keeps its slack. */
.sb-mode { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.sb-mode-btn {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 0; border: 0; background: none;
  /* #6e6e6e not var(--ink-3): the token is 3.45:1 on white and this is an
     interactive label, which must clear 4.5:1 (WCAG 2.1 AA). */
  color: #6e6e6e; cursor: pointer; border-bottom: 2px solid transparent;
}
.sb-mode-btn:hover { color: var(--ink); }
.sb-mode-btn.is-on { color: var(--red-text); border-bottom-color: var(--red-text); }
.sb-mode-or {
  font-size: 11px; font-weight: 500; text-transform: lowercase;
  color: var(--ink-3);
}

/* Label kept for screen readers — the visible pair above says what the box is. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A select must not be sized by its longest option. "Fort Saskatchewan (147)"
   was widening the Area control to 232px and pushing the bar to a second row —
   the options are readable when open, which is the only time they need to be. */
.sb-field select { max-width: 160px; text-overflow: ellipsis; }


/* Neighbourhood suggestions. Replaces a <datalist> that never opened on iOS,
   so the list is ours to draw, style and debug. */
.sb-field { position: relative; }
.sb-ac {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: 288px; overflow-y: auto;
  background: #fff; border: 1px solid var(--grid); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}
.sb-ac[hidden] { display: none; }
.sb-ac li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  /* 44px of height, because this is the control most likely to be used with a
     thumb and the datalist it replaces was untappable. */
  min-height: 44px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14.5px; line-height: 1.3;
}
.sb-ac li[aria-selected="true"], .sb-ac li:hover { background: var(--orange-soft); }
.sb-ac small { flex: none; font-size: 12px; color: var(--ink-3); }

/* Sort, in the results header where it belongs — it narrows nothing, so it was
   never a filter. Pushed to the right of the count it applies to. */
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.rh-sort { display: flex; align-items: center; gap: 8px; flex: none; }
.rh-sort span { font-size: 13px; color: var(--ink-3); }
.rh-sort select {
  font: inherit; font-size: 13.5px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--grid); border-radius: 10px; background: #fff; color: var(--ink);
}
@media (max-width: 600px) {
  /* Under the count rather than beside it — side by side, the two of them
     squeeze the count into two lines on a phone. */
  .results-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .rh-sort { justify-content: space-between; }
}

/* The same bar inside a page that already has a container — Price Reduced,
   New Today. On search.html the bar is the page's chrome: full-bleed, sticky,
   sitting on its own --page-max container. Dropped inside .lp it would
   re-apply that container within a container and inset itself twice, and a
   sticky element inside a scrolling column of cards is just a bar that
   detaches. So here it is a panel: static, bounded, and as wide as its
   parent. */
.rf-wrap {
  position: static; border: 1px solid var(--grid); border-radius: 18px;
  background: var(--surface); margin-bottom: 26px; overflow: hidden;
}
.rf-wrap .searchbar-title, .rf-wrap .searchbar { width: auto; margin-inline: 0; }
.rf-wrap .searchbar { padding-bottom: 16px; }
.sb-field label { display: block; font-weight: 500; font-size: 11.5px; color: #6f7069; margin-bottom: 4px; }
.sb-field input, .sb-field select {
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--linen);
  border: 1.5px solid transparent; border-radius: 11px; padding: 9px 13px;
  appearance: none; -webkit-appearance: none; min-width: 132px;
}
.sb-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
  padding-right: 30px; cursor: pointer;
}
.sb-field input:focus, .sb-field select:focus { outline: none; border-color: var(--orange); background: #fff; }

/* Min and max share one field, so the bar gains a price floor without
   gaining a whole control's label, gap and 132px minimum. */
.sb-range { display: flex; align-items: center; gap: 6px; }
.sb-range input { min-width: 0; width: 84px; flex: 0 1 auto; }
.sb-range-sep { flex: 0 0 auto; color: var(--ink-3); font-size: 14px; }

/* Neighbourhood and Must have were the two widest controls on the bar at
   176px and 160px. Neither needs it: the hood box holds one name and
   ellipsises, and a select's options are readable when it is open, which is
   the only time they need to be. Narrowing them is what pays for the price
   range staying on one row. */
#rf-hood { min-width: 0; width: 132px; }
#rf-feature { min-width: 0; width: 128px; max-width: 128px; }

.sb-go {
  font-family: inherit; font-weight: 600; font-size: 14px; color: #fff; background: var(--ink);
  border: 0; border-radius: 11px; padding: 10px 22px; cursor: pointer;
}
.sb-go:hover { background: #b93c10; }
.sb-reset {
  font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--red-text);
  background: none; border: 0; cursor: pointer; padding: 10px 4px; text-decoration: underline;
  text-underline-offset: 3px;
}
/* Secondary to Search: outlined rather than filled, so the primary action
   still reads first. */
.sb-save {
  font-family: inherit; font-weight: 600; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--grid); border-radius: 11px;
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
}
.sb-save:hover { border-color: var(--orange); color: var(--red-text); }
.sb-save[disabled] { opacity: .55; cursor: default; }

.searchpage {
  /* same container as the nav and filter bar; the map used to run flush to the
     viewport edge while the list had a gutter, which read as broken padding */
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: 22px; align-items: start;
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
.searchpage-list { padding: 20px 0 40px; }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.results-head h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.results-head .sub { font-size: 13px; color: var(--ink-3); }
/* the “of N in this search” qualifier beside the in-view count */
.results-head .sub-inline { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.rcard { position: relative; }
.rcard a { text-decoration: none; color: inherit; display: block; }
.rcard .ph {
  /* 4:3, the same crop the rest of the estate uses for listing photos. The feed
     hands back everything from 4:3 to panoramas, so the box fixes the shape and
     cover crops to it — otherwise each card is as tall as its own photo. */
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; background-size: cover;
  background-position: center; background-color: #eee; position: relative;
  overflow: hidden;
}
.rcard .badge {
  position: absolute; top: 10px; left: 10px; background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); max-width: 72%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcard .heart { position: absolute; top: 8px; right: 8px; background: none; border: 0; padding: 4px; cursor: pointer; z-index: 2; }
.rcard .heart svg { width: 23px; height: 23px; fill: rgba(20, 20, 20, 0.5); stroke: #fff; stroke-width: 1.6; display: block; }
.rcard .heart.on svg { fill: var(--orange); }
.rcard .t { margin-top: 9px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .m { margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.rcard .p { margin-top: 3px; font-size: 13.5px; font-weight: 600; }
.rcard .p small { font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.rcard.is-hot .ph { outline: 3px solid var(--orange); outline-offset: 2px; }

/* House-ad tiles: search results (js/search-page.js) and the homepage's
   first price band (js/home.js). Same .rcard/.ph/.t/.m/.p slots as a
   listing card, so it is exactly one card shape wide and tall —
   check_cards.py enforces .rcard .ph at 4:3/18px and this reuses that box
   rather than opting out of it.

   Namespaced pd-promo-*, NOT promo-*: a same-named, differently-shaped
   .promo-card/.promo-card-sell/.promo-cta component already exists lower
   in this file (ported from movenew, currently unused in any shipped
   page) and, loading later in the cascade, silently overrode this block's
   padding/flex/color at equal specificity — the dark tile rendering with
   a stray flex layout and clipped text was that collision, not a typo
   here. */
/* SPECIFICITY, part two. The block below is scoped `.pd-promo .ph` rather
   than `.pd-promo-ph`, and that is load-bearing, not style.

   `.rcard .ph` above sets `background-color:#eee` at 0-2-0. A single-class
   `.pd-promo-ph` is 0-1-0 and loses to it, so both tiles rendered as the
   plain grey photo placeholder — which put the dark tile's white heading on
   #eee and made it almost invisible. Same class of collision as the
   .promo-card one documented above; the fix there was renaming, and the
   trap here is that renaming alone was not enough.

   Keep every rule in this block at two classes or more. */
.pd-promo .ph {
  background-image: none;
  /* A saturated ground, not a tint. Both gradients were picked against the
     contrast maths rather than by eye: the LIGHTEST point of each is the
     worst case for white text, and both clear 4.5:1 there — 6.68:1 on the
     course tile, 13.44:1 on the sell tile. The brand orange #ec0712 is only
     3.41:1 against white and is deliberately NOT used as a text ground; it
     stays as the accent on the badge. */
  background: linear-gradient(155deg, #a8330b 0%, #6d2105 100%);
  position: relative; overflow: hidden;
}
.pd-promo-sell .ph {
  background: linear-gradient(155deg, #2b2f36 0%, #0f1113 100%);
}
/* The "bold graphic": one oversized soft disc bleeding off the top-right
   corner, drawn in CSS so the tiles stay at zero extra page weight and
   cannot 404 the way a hotlinked image can. Decorative only — it sits
   behind the text and is never the thing carrying meaning. */
.pd-promo .ph::after {
  content: ""; position: absolute; top: -38%; right: -22%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
              rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.pd-promo-sell .ph::after {
  background: radial-gradient(circle at 32% 32%,
              rgba(236, 7, 18, 0.42), rgba(236, 7, 18, 0) 70%);
}
.pd-promo .pd-promo-ph {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px; height: 100%; position: relative; z-index: 1;
}
.pd-promo .pd-promo-badge {
  align-self: flex-start; background: #fff; color: #8f2c08;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
/* Ink on brand orange is 5.00:1 — the one place #ec0712 can carry text. */
.pd-promo .pd-promo-badge-dark { background: var(--orange); color: var(--ink); }
.pd-promo .pd-promo-body h2 {
  font-size: 17px; font-weight: 700; line-height: 1.2; margin-bottom: 5px;
  letter-spacing: -0.01em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-promo .pd-promo-body p {
  font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-promo .t { color: var(--ink); }
.pd-promo .pd-promo-cta { color: var(--red-text); font-weight: 600; }

.results-more { text-align: center; margin-top: 30px; }
.results-more button {
  background: #fff; border: 1.5px solid var(--grid); border-radius: 999px;
  padding: 12px 28px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.results-more button:hover { background: var(--orange-soft); border-color: var(--orange-soft); }
.results-empty { padding: 50px 0; text-align: center; color: var(--ink-2); }
.results-empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; }

.searchpage-map { position: sticky; top: 96px; height: calc(100vh - 116px); padding: 20px 0 40px; }
.searchmap {
  width: 100%; height: 100%; background: var(--linen);
  border-radius: 16px; overflow: hidden; border: 1px solid var(--grid);
}
.price-pin {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--ink);
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.price-pin.is-fav { border-color: var(--orange); color: var(--red-text); }
.leaflet-popup-content { margin: 10px 12px; font-family: "Poppins", "Poppins Fallback", sans-serif; }
.map-pop img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; }
.map-pop b { display: block; margin-top: 7px; font-size: 13.5px; }
.map-pop span { display: block; font-size: 12px; color: var(--ink-2); }
.map-pop a { display: inline-block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--red-text); }

.search-toggle {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--ink); border-radius: 999px; padding: 5px; display: none; gap: 4px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.search-toggle button {
  background: none; border: 0; color: #fff; font-family: inherit; font-weight: 600;
  font-size: 13.5px; padding: 9px 22px; border-radius: 999px; cursor: pointer;
}
.search-toggle button.is-picked { background: var(--orange-deep); }

@media (max-width: 1000px) {
  .searchpage { grid-template-columns: 1fr; }
  /* The filter bar is one tidy row on desktop, so pinning it costs ~60px and
     keeps the controls to hand. Stacked on a phone it is over 400px of a
     660px viewport, so pinned it sat on top of the results the whole way down
     the page — the filters covering the homes they filtered. Let it scroll
     away; it is a few flicks back up, and the results are the point. */
  .searchbar-wrap { position: static; }
  .searchpage-map { position: fixed; inset: 116px 0 0; height: auto; z-index: 30; display: none; }
  body.map-view .searchpage-map { display: block; }
  body.map-view .searchpage-list { display: none; }
  /* Map view means the map. The filter bar stayed on screen underneath it, so
     on a phone the visitor tapped "Map" and got a screenful of filters with a
     strip of map beneath — the map is the one thing they asked for. Filters
     come back with the List toggle. */
  body.map-view .searchbar-wrap { display: none; }
  /* Nothing above it any more, so the map takes the whole viewport. */
  body.map-view .searchpage-map { inset: 0; }

  /* Map view owns the screen, so the page behind it must stop scrolling.

     Without a lock the body keeps the height of everything still in the layout
     — 1,869px against an 812px viewport — so a flick scrolls the page while
     the map stays pinned, and the footer and toggle slide underneath it.

     The lock itself is applied by js/search-page.js as position:fixed with a
     negative top, not overflow:hidden here. overflow:hidden on html/body does
     not hold on iOS and, applied while the page is scrolled, leaves the
     viewport offset so fixed children render in the wrong place — which is how
     a full-screen map ended up as a strip below the filters. */
  body.map-locked { position: fixed; left: 0; right: 0; width: 100%; }
  .search-toggle { display: flex; }
}

/* ---------- account page ---------- */

.acct { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin: 0 auto 70px; padding-top: 20px; }
.acct-head { margin-bottom: 26px; }
.acct-head h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; }
.acct-head p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; max-width: 56ch; line-height: 1.6; }

/* signed-out: auth card */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.auth-card { border: 1px solid var(--grid); border-radius: 22px; padding: 28px; background: #fff; }
.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grid); margin-bottom: 22px; }
.auth-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; cursor: pointer; font-family: inherit; font-weight: 600;
  font-size: 15px; color: var(--ink-3);
}
.auth-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--orange); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-weight: 500; font-size: 12.5px; color: #6f7069; margin-bottom: 5px; }
.auth-field input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: 12px; padding: 12px 14px;
}
.auth-field input:focus { outline: none; border-color: var(--orange); background: #fff; }
.auth-submit {
  width: 100%; background: var(--orange-deep); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 20px; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.auth-submit:hover { background: #b93c10; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.auth-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border: 1.5px solid var(--grid); border-radius: 999px;
  padding: 12px 20px; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.auth-google:hover { background: var(--surface); }
.auth-google svg { width: 18px; height: 18px; }
.auth-msg { margin-top: 14px; font-size: 13.5px; line-height: 1.5; border-radius: 12px; padding: 11px 14px; }
.auth-msg.err { background: #fdecea; color: #a3271b; }
.auth-msg.ok { background: var(--orange-soft); color: var(--red-text); }
.auth-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.auth-side { border: 1px solid var(--grid); border-radius: 22px; padding: 24px; background: var(--surface); }
.auth-side h3 { font-size: 16px; margin-bottom: 12px; }
.auth-side ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.auth-side li { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; padding-left: 24px; position: relative; }
.auth-side li::before {
  content: "♥"; position: absolute; left: 0; top: 0; color: var(--orange); font-size: 14px;
}

/* signed-in: profile + favourites */
.acct-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--grid); border-radius: 22px; padding: 20px 24px; background: var(--surface);
  margin-bottom: 30px;
}
.acct-who { display: flex; align-items: center; gap: 14px; }
.acct-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 19px; flex: none;
}
.acct-who b { display: block; font-size: 16px; }
.acct-who span { display: block; font-size: 13px; color: var(--ink-3); }
.acct-signout {
  background: none; border: 1.5px solid var(--grid); border-radius: 999px; padding: 10px 20px;
  font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink);
}
.acct-signout:hover { border-color: var(--ink); }
.acct-section h2 { font-size: 21px; letter-spacing: -0.01em; margin-bottom: 4px; }
.acct-section .sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }
.acct-empty { padding: 44px 0; text-align: center; color: var(--ink-2); }
.acct-empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.acct-empty a { color: var(--red-text); font-weight: 600; }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- neighbourhoods index ---------- */

.hoods { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin: 0 auto 70px; padding-top: 20px; }
.hoods-head { margin-bottom: 26px; }
.hoods-head h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; }
.hoods-head p { margin-top: 10px; color: var(--ink-2); font-size: 16px; max-width: 64ch; line-height: 1.65; }
.hoods-filter { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 22px 0 6px; }
.hoods-filter input, .hoods-filter select {
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--linen);
  border: 1.5px solid transparent; border-radius: 12px; padding: 11px 14px; min-width: 200px;
  appearance: none; -webkit-appearance: none;
}
.hoods-filter select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
  padding-right: 34px; cursor: pointer; min-width: 190px;
}
.hoods-filter input:focus, .hoods-filter select:focus { outline: none; border-color: var(--orange); background: #fff; }
.hoods-count { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 18px; }

.hoods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.hood-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--grid); border-radius: 18px; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.hood-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.hood-card .ph { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #eee; }
.hood-card .bd { padding: 14px 16px 16px; }
.hood-card h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hood-card .n { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.hood-card .r { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--red-text); }
.hood-card .r small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.hoods-more { text-align: center; margin-top: 32px; }
.hoods-more button {
  background: #fff; border: 1.5px solid var(--grid); border-radius: 999px;
  padding: 12px 28px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.hoods-more button:hover { background: var(--orange-soft); border-color: var(--orange-soft); }

/* ---------- community + area pages (movenew community-page structure) ---------- */

.shell { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.page-head { padding: 24px 0 8px; }
.page-head .crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.page-head .crumb a { color: inherit; text-decoration: none; }
.page-head .crumb a:hover { color: var(--red-text); }
.page-head h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.1; }
.page-head h1 span { color: var(--red-text); }
.page-head .lede { margin-top: 14px; max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.page-head .head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.page-head .head-actions a {
  background: var(--orange-deep); color: #fff; border-radius: 999px; padding: 11px 22px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.page-head .head-actions a:hover { background: #b93c10; }
.page-head .head-actions a.ghost { background: none; color: var(--ink); border: 1.5px solid var(--grid); }
.page-head .head-actions a.ghost:hover { background: var(--orange-soft); }

.mn-sec { padding: 34px 0 0; }
.mn-sec h2 { font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -0.01em; margin-bottom: 6px; }
.mn-sec .sub { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
.mn-sec p { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; max-width: 72ch; }

.mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--grid); border: 1px solid var(--grid); border-radius: 22px; overflow: hidden; }
.mn-stat { background: #fff; padding: 20px 16px; text-align: center; }
.mn-stat b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--red-text); }
.mn-stat span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }

.mn-bars { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.mn-bar { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 12px; font-size: 14px; }
.mn-bar .lab { color: var(--ink-2); }
.mn-bar .track { background: var(--linen); border-radius: 999px; height: 12px; overflow: hidden; }
.mn-bar .fill { background: var(--orange); height: 100%; border-radius: 999px; }
.mn-bar .n { text-align: right; font-weight: 600; font-size: 13.5px; }

.mn-map { height: 380px; border-radius: 22px; overflow: hidden; border: 1px solid var(--grid); }

.mn-cardrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 20px; }
.mn-compare { width: 100%; border-collapse: collapse; font-size: 14.5px; max-width: 720px; }
.mn-compare th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); padding: 0 0 10px; font-weight: 600;
}
.mn-compare td { padding: 12px 0; border-top: 1px solid var(--grid); }
.mn-compare td:first-child { font-weight: 600; }
.mn-compare td:last-child, .mn-compare th:last-child { text-align: right; }
.mn-compare a { color: var(--red-text); text-decoration: none; }
.mn-compare a:hover { text-decoration: underline; }
.mn-compare tr.is-self td { color: var(--red-text); }

.mn-faq { margin-top: 8px; max-width: 760px; }
.mn-faq details { border-top: 1px solid var(--grid); padding: 16px 0; }
.mn-faq details:last-child { border-bottom: 1px solid var(--grid); }
.mn-faq summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.mn-faq summary::after { content: "+"; color: var(--orange); font-size: 19px; }
.mn-faq details[open] summary::after { content: "–"; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq p { margin-top: 10px; font-size: 14.5px; }

.mn-cta {
  margin: 44px 0 10px; background: var(--orange-soft); border-radius: 24px;
  padding: 36px; text-align: center;
}
.mn-cta h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 8px; }
.mn-cta p { color: var(--ink-2); font-size: 15px; max-width: 54ch; margin: 0 auto 20px; }
.mn-cta a {
  display: inline-block; background: var(--orange-deep); color: #fff; border-radius: 999px;
  padding: 13px 28px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.mn-cta a:hover { background: #b93c10; }

.mn-linklist { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.mn-linklist a {
  display: inline-block; background: var(--linen); border: 1px solid var(--grid);
  border-radius: 999px; padding: 9px 17px; font-size: 13.5px; font-weight: 500;
  color: var(--charcoal); text-decoration: none;
}
.mn-linklist a:hover { background: var(--orange-soft); color: var(--ink); }
.mn-linklist a b { color: var(--ink); }

/* area (quadrant) grid of communities */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.area-tile {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--grid); border-radius: 16px; padding: 18px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-tile:hover { border-color: var(--orange); transform: translateY(-2px); }
.area-tile b { display: block; font-size: 15.5px; }
.area-tile .n { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.area-tile .r { margin-top: 7px; font-size: 14px; font-weight: 600; color: var(--red-text); }

@media (max-width: 860px) {
  .mn-bar { grid-template-columns: 120px 1fr 56px; }
}

/* Edmonton Area mega-menu — wider than a plain dropdown, quadrants in two columns */
.dgn-mega { min-width: 340px; }
.dgn-mega-head { border-bottom: 1px solid var(--grid); margin-bottom: 6px; padding-bottom: 6px; }
.dgn-mega-head a { font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px !important; }
.dgn-mega-grid > span { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.dgn-mega-grid a {
  display: block; padding: 9px 13px; border-radius: 12px; font-weight: 500; font-size: 14px;
  color: var(--charcoal); text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dgn-mega-grid a:hover { background: var(--orange-soft); color: var(--ink); }

/* ---------- property screening report ("what to verify") ---------- */

.pi-banner {
  background: #fff; border: 1px solid var(--grid); border-radius: 22px;
  padding: 24px 26px; margin: 22px 0 6px;
}
.pi-banner-head { margin-bottom: 16px; }
.pi-shield { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--orange-soft);
  color: var(--red-text); display: inline-grid; place-items: center; vertical-align: -6px;
  margin-left: 10px; }
.pi-shield svg { width: 17px; height: 17px; }
.pi-banner-head h2 { font-size: 19px; letter-spacing: -0.01em; }
.pi-banner-head p { margin-top: 2px; font-size: 13.5px; color: var(--ink-2); max-width: 62ch; }
.pi-lock-chip, .pi-open-chip {
  margin-left: auto; flex: none; font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 6px 13px; background: var(--linen); color: var(--charcoal);
}
.pi-open-chip { background: var(--orange-soft); color: var(--red-text); }

.pi-summary { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; max-width: 78ch; }
.pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pi-card { border: 1px solid var(--grid); border-radius: 16px; padding: 16px 18px; }
.pi-card header { margin-bottom: 8px; }
.pi-card h3 { font-size: 15px; margin-top: 7px; letter-spacing: -0.01em; }
.pi-card p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-top: 7px; }
.pi-card .pi-why, .pi-card .pi-next { font-size: 12.5px; }
.pi-card b { color: var(--ink); font-weight: 600; }
.pi-src { display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--red-text); text-decoration: none; }
.pi-src:hover { text-decoration: underline; }
.pi-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 10px;
  background: var(--linen); color: var(--charcoal);
}
.pi-badge-p { background: #fdf3e2; color: #8a5a00; }
.pi-badge-v { background: #e7f2e7; color: #1e6a34; }

.pi-questions { margin-top: 18px; border-top: 1px solid var(--grid); padding-top: 16px; }
.pi-questions h3 { font-size: 14.5px; margin-bottom: 8px; }
.pi-questions ol { padding-left: 20px; }
.pi-questions li { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 4px; }
.pi-fine { margin-top: 12px; font-size: 12px; color: var(--ink-3); line-height: 1.6; max-width: 88ch; }

/* locked state */
.pi-locked { text-align: left; }
.pi-locked-count { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pi-locked-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pi-locked-list li { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.pi-locked-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pi-locked-cta a { font-size: 14px; font-weight: 600; color: var(--red-text);
  text-decoration: underline; text-underline-offset: 3px; background: none;
  padding: 0; border: 0; }
.pi-locked-cta a:hover { color: var(--orange); }
.pi-login { font-size: 13.5px; font-weight: 600; color: var(--red-text);
  text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .pi-grid { grid-template-columns: 1fr; } }

/* ---------- areas index (quadrant cards) ---------- */
.qd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.qd-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--grid); border-radius: 20px; padding: 24px 26px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.qd-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.qd-card h2 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; }
.qd-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 12px; }
.qd-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.qd-stats span { font-size: 12.5px; color: var(--ink-3); }
.qd-stats b { color: var(--red-text); font-size: 14px; margin-right: 3px; }
.qd-go { font-size: 13.5px; font-weight: 600; color: var(--red-text); }

/* ---------- "By Quadrant" flyout submenu inside a dropdown ---------- */
.dgn-sub { position: relative; }
.dgn-sub > button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; padding: 10px 13px; border-radius: 12px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: var(--charcoal);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.dgn-sub > button:hover { background: var(--orange-soft); color: #1c1c1c; }
.dgn-sub-chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); flex: none;
}
.dgn-sub-menu {
  display: none; position: absolute; left: calc(100% + 2px); top: -8px; min-width: 180px;
  list-style: none; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
  padding: 8px; z-index: 46;
}
.dgn-sub:hover > .dgn-sub-menu, .dgn-sub.is-open > .dgn-sub-menu { display: block; }
.dgn-sub-menu li a {
  display: block; padding: 9px 13px; border-radius: 12px; font-weight: 500; font-size: 14px;
  color: var(--charcoal); text-decoration: none; white-space: nowrap;
}
.dgn-sub-menu li a:hover { background: var(--orange-soft); color: #1c1c1c; }
.dgn-sub-menu .dgn-sub-all { border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 4px; }

/* ---------- mobile (subpages share the same burger pattern as index) ---------- */
.dgn-burger {
  display: none; background: none; border: 0; width: 40px; height: 40px;
  border-radius: 12px; cursor: pointer; flex: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.dgn-burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #1c1c1c; transition: transform 0.25s ease; }
.dgn.is-open .dgn-burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
.dgn.is-open .dgn-burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 859px) {
  .dgn-wrap { top: 10px; }
  .dgn { gap: 10px; padding: 9px 12px; width: calc(100% - 20px); position: relative; }
  .dgn-logo img { width: 96px; }
  .dgn-cta { display: none; }
  /* Burger on the right, where a thumb on a phone actually reaches — it used
     to sit immediately after the logo, on the far side from the hand holding
     the device. */
  .dgn-burger { display: flex; margin-left: auto; order: 3; }
  /* The menu stays closed, but Dashboard rides outside it: the account area
     is what returning visitors come back for, and it was the hardest thing on
     the site to reach. The list is still the dropdown when opened. */
  .dgn-links { display: flex; margin-left: auto; gap: 0; order: 2; }
  .dgn-links > li { display: none; }
  .dgn-links > li.dgn-dash { display: block; }
  .dgn-links > li.dgn-dash > a { font-size: 15px; padding: 6px 2px; }
  .dgn.is-open .dgn-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff; border-radius: 20px; padding: 10px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
    margin-left: 0; z-index: 60;
  }
  .dgn.is-open .dgn-links > li { display: block; }
  .dgn.is-open .dgn-links > li > a,
  .dgn.is-open .dgn-links > li > button { display: block; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; font-size: 15px; }
  .dgn-drop-menu, .dgn-sub-menu, .dgn-mega {
    position: static; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0;
  }
  .dgn-mega-grid > span { grid-template-columns: 1fr; }

  .page-head { padding-top: 76px; }
  .pdp { padding-top: 66px; }
  .pdp-head { flex-direction: column; align-items: stretch; gap: 18px; }
  .pdp-head-cta { text-align: left; }
  .pdp-specs { grid-template-columns: repeat(3, 1fr); }
  .pdp-spec-v { font-size: 17px; }
  .pi-banner { padding: 18px 16px; }
  .pi-banner-head { flex-wrap: wrap; }
  .gal-stage { height: 300px; }
  .searchpage-map { min-height: 320px; }
  .mn-map { height: 280px; }
  .book-modes { grid-template-columns: 1fr; }
  .mn-stats { grid-template-columns: repeat(2, 1fr); }
  .mn-compare { font-size: 13px; }
  .dg-footer-inner { padding-left: 20px; padding-right: 20px; }
  .dg-footer-legal { padding-left: 20px; padding-right: 20px; }
}

/* ---------- auth modal + toast (ported from movenew's style.css) ---------- */
.pdp-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: #1c1c1c; color: #fff; font-size: 14.5px; border-radius: 999px;
  padding: 10px 21px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 19px; overflow-y: auto;
}
.modal-card {
  position: relative; width: min(460px, 100%); background: #fff;
  border-radius: 26px; padding: 32px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.modal-x {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0;
  border-radius: 50%; background: none; font-size: 26px; line-height: 1;
  color: var(--ink-3); cursor: pointer;
}
.modal-x:hover { background: var(--linen); color: var(--ink); }
.modal-title { font-size: 24px; margin-bottom: 8px; padding-right: 32px; letter-spacing: -0.01em; }
.modal-sub { color: var(--ink-2); font-size: 15px; margin-bottom: 21px; line-height: 1.55; }
/* A two-paragraph message sets its own inter-paragraph gap; only the last one
   carries the 21px that separates the copy from the button below it. */
.modal-sub + .modal-sub { margin-top: -9px; }
.modal-form label { display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 5px; }
.modal-form input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: 14px;
  padding: 11px 14px; margin-bottom: 14px;
}
.modal-form input:focus { outline: none; border-color: var(--orange); background: #fff; }
.modal-submit {
  width: 100%; justify-content: center; border: 0; cursor: pointer; padding: 13px;
  background: var(--orange-deep); color: #fff; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 15px;
}
.modal-submit:hover { background: #b93c10; }
.modal-fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: #fff; border: 1.5px solid var(--grid); border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.auth-google-btn:hover { border-color: #bbb; }
.auth-google-btn:active { transform: scale(0.98); }
/* Facebook borrows the Google button's box exactly — same height, radius and
   type — so the two stack as one pair rather than competing. Meta's brand
   guidelines allow a white button with the blue mark, which is what keeps
   this from shouting over the page's own palette. */
.auth-facebook-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: #fff; border: 1.5px solid var(--grid); border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.auth-facebook-btn:hover { border-color: #bbb; }
.auth-facebook-btn:active { transform: scale(0.98); }
.auth-google-btn svg, .auth-facebook-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.auth-divider {
  display: flex; align-items: center; gap: 11px; margin: -3px 0 14px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.auth-links { margin: -5px 0 5px; }
.modal-link {
  display: block; width: 100%; text-align: center; background: none; border: 0;
  padding: 6px; margin-top: 5px; font-family: inherit; font-size: 13.5px;
  color: var(--ink-3); cursor: pointer;
}
.modal-link:hover { color: var(--red-text); }
/* Used where the dismiss names what the visitor is declining rather than
   deferring ("I'm ok not to have this info."). Underlined so it reads as the
   deliberate opt-out it is, instead of disappearing as tertiary text. */
.modal-link--underline { text-decoration: underline; text-underline-offset: 2px; }
.modal-done { text-align: center; }
.modal-done h3 { font-size: 21px; margin-bottom: 6px; }
.modal-done p { color: var(--ink-2); font-size: 15px; }
.quiz-error { color: #b3372b; font-size: 14.5px; margin-bottom: 16px; }
.quiz-success-orb {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--orange-soft); font-size: 38px; font-style: normal;
}
/* Sign in/out inside the Dashboard dropdown */
.dgn-drop-menu li button.nav-auth-btn {
  display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 12px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: var(--charcoal);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.dgn-drop-menu li button.nav-auth-btn:hover { background: var(--orange-soft); color: var(--ink); }
/* the divider only makes sense when this sits at the foot of a dropdown */
.dgn-drop-menu #nav-auth-item { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--grid); }


/* ============================================================
   BLOG — ported from movenew's style.css so both sites' articles share
   one structure, retheming lime -> orange and Jost/Hanken -> Poppins.
   Class names are kept identical to movenew's so article markup is
   portable between the two sites.

   @media blocks are preserved as blocks. A first pass flattened them,
   which let the mobile one-column override outrank the desktop
   two-column base rule and collapsed every article's sidebar.
   ============================================================ */
.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: .7rem;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease;
}
.promo-card:hover { transform: translateY(-6px); }
.promo-card-alerts { background: #fff; }
.promo-card-alerts .promo-media {
  position: relative;
  border-radius: calc(22px - 7px);
  overflow: hidden;
}
.promo-card-alerts .promo-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.promo-card-alerts .promo-body { padding: 1rem .6rem .7rem; }
.promo-card .promo-body h3 { font-size: 1.15rem; line-height: 1.25; }
.promo-card .promo-body p { color: var(--ink-3); font-size: .9rem; margin-top: .5rem; line-height: 1.5; }
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-family: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--red-text);
}
.promo-cta svg { width: 13px; height: 13px; }
.promo-card:hover .promo-cta { color: var(--ink); }
.promo-card-sell {
  background: var(--ink);
  color: #fff;
  justify-content: center;
  padding: 1.8rem 1.5rem;
}
.promo-card-sell .promo-eyebrow {
  font-family: inherit;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .8rem;
}
.promo-card-sell .promo-eyebrow .asterisk { color: var(--orange); margin-right: .4em; }
.promo-card-sell h3 { font-size: 1.5rem; line-height: 1.2; color: #fff; }
.promo-card-sell p { color: rgba(255, 255, 255, .72); font-size: .92rem; margin-top: .8rem; line-height: 1.55; }
.promo-card-sell .promo-cta { color: var(--orange); }
.promo-card-sell:hover .promo-cta { color: #fff; }
.crumbs {
  padding-top: 1.5rem;
  padding-bottom: 0;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: .82rem;
  color: var(--ink-3);
}
.crumbs li + li::before {
  content: "›";
  margin-right: .75rem;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--red-text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
.mn-table-wrap {
  
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}
.mn-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: .94rem;
  min-width: 30rem;
}
.mn-table caption {
  caption-side: top;
  text-align: left;
  font-size: .82rem;
  color: var(--ink-3);
  padding-bottom: .6rem;
}
.mn-table th,
.mn-table td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mn-table thead th {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-width: 2px;
}
.mn-table tbody th { font-weight: 500; color: var(--ink); }
.mn-table tbody tr:last-child th,
.mn-table tbody tr:last-child td { border-bottom: 0; }
.mn-table a { color: var(--red-text); }
.mn-faq { display: grid; gap: .75rem; margin-top: 1.5rem; }
.mn-faq details {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 0 1.3rem;
}
.mn-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary h3 {
  margin: 0;
  font-size: clamp(1rem, 1.9vw, 1.12rem);
  font-weight: 600;
  line-height: 1.35;
}
.mn-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.mn-faq details[open] summary::after { transform: rotate(-135deg); }
.mn-faq details > p {
  margin: 0;
  padding: 0 0 1.15rem;
  max-width: 45rem;
  color: var(--ink-3);
}
.mn-sec-head { text-align: center; margin-bottom: var(--mn-head-gap); }
.mn-sec-head h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  margin: 0;
}
.mn-prose {
  
  max-width: 45rem;
  margin-inline: auto;
  text-align: left;
}
.mn-prose > p {
  color: var(--ink-3);
  
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.mn-prose > p:last-child { margin-bottom: 0; }
/* .mn-prose is a container class, so `.mn-prose > p` never matches when the
   class sits on the paragraph itself — which is how the migrated articles
   carry it. Matched to .mn-guide-sec > p rather than to the container's lead
   size: measured against Padster, article body is 17.92px in --ink-2, and the
   container size (19.2px, --ink-3) rendered these paragraphs both larger than
   the surrounding body and at 3.45:1 contrast, which fails WCAG AA. */
p.mn-prose {
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  margin: 0 0 1.15rem;
  max-width: 45rem;
}
.mn-guide-sec p.mn-prose:last-child { margin-bottom: 0; }
.mn-prose strong { color: var(--ink); font-weight: 600; }
.mn-prose .rep-note { color: var(--ink); }
.mn-toc {
  max-width: 45rem;
  margin: clamp(2rem, 5vh, 3.2rem) auto 3rem;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.8rem;
}
.mn-toc-title {
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.mn-toc ol {
  list-style: none;
  display: grid;
  gap: .5rem;
  counter-reset: mn-toc;
}
.mn-toc li { counter-increment: mn-toc; }
.mn-toc a {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
}
.mn-toc a:hover { border-bottom-color: var(--orange); color: var(--red-text); }
.mn-toc a::before {
  content: counter(mn-toc);
  font-family: inherit;
  color: var(--red-text);
  font-weight: 600;
  font-size: .85rem;
  flex: 0 0 1.4rem;
}
.mn-guide-sec {
  max-width: 45rem;
  margin: 0 auto 3.2rem;
  scroll-margin-top: clamp(6rem, 14vh, 8rem);
}
.mn-guide-sec h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  margin-bottom: 1.15rem;
}
.mn-guide-sec > p {
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  margin-bottom: 1.15rem;
}
.mn-guide-sec ul {
  padding-left: 1.2rem;
  margin-bottom: 1.15rem;
  display: grid;
  gap: .55rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.mn-guide-sec p a,
.mn-guide-sec li a {
  color: var(--red-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.mn-guide-sec p a:hover,
.mn-guide-sec li a:hover { color: var(--ink); }
.mn-callout {
  display: flex;
  gap: .9rem;
  max-width: 45rem;
  margin: 1.2rem auto;
  background: var(--amber-tint, #FBF1DF);
  border-radius: var(--radius-sm, 16px);
  padding: 1.1rem 1.3rem;
}
.mn-callout-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--amber, #B8760A);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
}
.mn-callout p {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-2);
}
.mn-callout strong { color: var(--ink); }
.mn-callout a { color: var(--red-text); font-weight: 600; }
.mn-callout--tip { background: var(--orange-soft); }
.mn-callout--tip .mn-callout-icon { background: var(--orange-deep); }
.mn-guide-photo {
  max-width: 45rem;
  margin: 1.4rem auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.mn-guide-photo img { width: 100%; height: auto; display: block; }
.mn-guide-photo figcaption {
  padding: .8rem 1.1rem;
  font-size: .82rem;
  color: var(--ink-3);
  background: #fff;
}
.mn-guide-index-grid {
  max-width: 62rem;
  margin: 1.4rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.mn-guide-index-card {
  display: block;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 1.8rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease;
}
.mn-guide-index-card:hover { transform: translateY(-2px); }
.mn-guide-index-card h3 {
  font-size: 1.2rem;
  margin-bottom: .6rem;
  color: var(--ink);
}
.mn-guide-index-card p {
  font-size: .92rem;
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.mn-guide-index-card span {
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--red-text);
}
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.blog-tag {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.blog-tag:hover { background: var(--orange-soft); color: var(--red-text); }
.blog-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(51, 51, 51, .1);
}
.blog-post-nav > div:last-child { text-align: right; }
.blog-post-nav-label {
  display: block;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.blog-post-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.blog-post-nav a:hover { color: var(--red-text); }
.blog-art-hero {
  background: var(--ink);
  padding-block: 1.4rem clamp(2.2rem, 5vw, 3.2rem);
}
.blog-art-hero .crumbs ol,
.blog-art-hero .crumbs a,
.blog-art-hero .crumbs li + li::before { color: rgba(255, 255, 255, .62); }
.blog-art-hero .crumbs a:hover { color: var(--orange-glow); }
.blog-art-hero .crumbs [aria-current="page"] { color: rgba(255, 255, 255, .92); }
.blog-art-cat {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-glow);
  text-decoration: none;
}
.blog-art-cat:hover { color: #fff; }
.blog-art-hero h1 {
  color: #fff;
  margin-top: .7rem;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  max-width: 28ch;
  text-wrap: balance;
}
.blog-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  margin-top: 1.3rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .68);
}
.blog-art-meta a { color: #fff; text-decoration: none; font-weight: 600; }
.blog-art-meta a:hover { color: var(--orange); }
.blog-art-meta .sep { color: rgba(255, 255, 255, .3); }
.blog-art-figure { margin-top: clamp(-2.2rem, -5vw, -3.2rem); }
.blog-art-figure img {
  width: 100%;
  height: auto;
  /* 1376/768 — the shape every hero file is actually authored at.
     This was 3/1 with object-fit:cover, so the browser threw away 40% of
     each hero's height (20% off the top, 20% off the bottom) on all 64
     articles. On any photo of a person that cropped their head off; it was
     only invisible for landscapes, where the middle band still read as a
     complete picture. If this ratio ever changes, the heroes have to be
     re-rendered to match it — the two must agree. */
  aspect-ratio: 1376 / 768;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
.blog-art-figure figcaption,
.blog-art-inline figcaption {
  margin-top: .6rem;
  font-size: .8rem;
  color: var(--ink-3);
}
.blog-art-figure figcaption a,
.blog-art-inline figcaption a { color: var(--ink-3); }
.blog-art-body { padding-block: clamp(2.2rem, 5vw, 3.2rem); }
.blog-art-grid {
  display: grid;
  grid-template-columns: minmax(0, 45rem) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  /* Cap the pair and centre it. The article column used to take all the
     remaining width while .mn-prose kept its 45rem reading measure inside it,
     so widening the site to 1560px opened a ~270px hole between the end of the
     text and the sidebar. Sizing the column to the measure closes it. */
  max-width: calc(45rem + 300px + 3.5rem);
  margin-inline: auto;
}
.blog-art-sidebar {
  position: sticky;
  top: 2rem;
  display: grid;
  gap: 1.5rem;
}
.blog-sidebar-block {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.5rem;
}
.blog-sidebar-title {
  font-family: inherit;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.blog-sidebar-note {
  font-size: .78rem;
  color: var(--ink-3);
  margin-top: 1rem;
}
.blog-sidebar-list { list-style: none; display: grid; gap: .7rem; }
.blog-sidebar-list--ranked { counter-reset: sidebar-rank; }
.blog-sidebar-list--ranked li { counter-increment: sidebar-rank; }
.blog-sidebar-list--ranked a {
  display: flex;
  gap: .65rem;
  align-items: baseline;
}
.blog-sidebar-list--ranked a::before {
  content: counter(sidebar-rank);
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  color: var(--red-text);
  flex: 0 0 1.1rem;
}
.blog-sidebar-list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .94rem;
}
.blog-sidebar-list a:hover { color: var(--red-text); }
.blog-sidebar-list .count {
  margin-left: auto;
  color: var(--ink-3);
  font-weight: 400;
  font-size: .82rem;
}
.blog-art-inline {
  max-width: 45rem;
  margin: 0 auto 3.2rem;
}
.blog-art-inline img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
}
.blog-answer {
  max-width: 45rem;
  margin: 0 auto 3.2rem;
  background: var(--orange-soft);
  border-radius: 22px;
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.blog-answer-label {
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: .6rem;
}
.blog-answer p {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink);
}
.blog-art-foot {
  max-width: 45rem;
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(51, 51, 51, .1);
}
.blog-art-author {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 22px;
  padding: 1.3rem;
}
.blog-art-author img {
  flex: 0 0 auto;
  width: 10.2rem;
  height: 10.2rem;
  border-radius: 50%;
  object-fit: cover;
}
.blog-art-author h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.blog-art-author p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.blog-art-author p + p { margin-top: .7rem; }
.blog-art-author a { color: var(--red-text); font-weight: 600; }
.blog-art-reviewed {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--ink-3);
}
.blog-related { padding-block: clamp(2.2rem, 5vw, 3.2rem); }
.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.blog-related-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease;
}
.blog-related-card:hover { transform: translateY(-3px); }
.blog-related-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.blog-related-body { padding: 1.1rem 1.2rem 1.3rem; }
.blog-related-body h3 {
  font-size: 1.02rem;
  line-height: 1.25;
  margin-bottom: .4rem;
  color: var(--ink);
}
.blog-related-card:hover h3 { color: var(--red-text); }
.blog-related-body span { font-size: .82rem; color: var(--ink-3); }
/* The whole card is an <a>, so anything inside it that does not set its own
   colour inherits the UA's visited-link purple once the reader has been to the
   target. The blurb had no colour of its own and turned purple on exactly the
   articles someone had already read. */
.blog-related-body p { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.search-seo-block .mn-prose { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mn-linklist {
  max-width: 62rem;
  margin: 0 auto;
  columns: 3 14rem;
  column-gap: 2rem;
}
.mn-linklist { list-style: none; }
.mn-linklist li { break-inside: avoid; margin-bottom: .5rem; }
.mn-linklist a {
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
}
.mn-linklist a:hover { color: var(--red-text); border-bottom-color: var(--orange); }

@media (max-width: 560px) {
  .blog-post-nav { grid-template-columns: 1fr; }
  .blog-post-nav > div:last-child { text-align: left; }
}
@media (max-width: 60rem) {
  /* minmax(0, 1fr), not a bare 1fr. A grid item's automatic minimum width is
     its content's min-content size, and that propagates up through nested
     block descendants to whatever the widest one demands — here, .mn-table's
     min-width: 30rem (480px). .mn-table-wrap's own overflow-x:auto does not
     stop this: that property only zeroes automatic min-sizing on the element
     that is itself the grid item, and the table sits several levels below it
     inside .blog-art-main. So on the 4 posts with a comparison table, the
     single mobile column refused to shrink past 480px and the whole page
     went 480px wide with it — exactly the drift Ryan reported, reproduced by
     checking body.scrollWidth against the four posts carrying <table
     class="mn-table">. minmax(0, 1fr) is the same fix already applied to the
     desktop track above; this rule had simply been written before that
     pattern was adopted. */
  .blog-art-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-art-sidebar { position: static; }
}
@media (max-width: 34rem) {
  .blog-art-author { flex-direction: column; align-items: center; text-align: center; }
  .blog-art-author img { width: 7.5rem; height: 7.5rem; }
}

/* small print under tables and examples — movenew handles this inline */
.mn-fine { font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* Cornerstone-series list in the article sidebar. No counter markers —
   each label already carries its own "Step N", and movenew's --ranked
   class would print the number twice. */
.blog-toc-steps li { padding: 7px 0; border-top: 1px solid var(--grid); font-size: 14px; line-height: 1.45; }
.blog-toc-steps li:first-child { border-top: 0; }
.blog-toc-steps li[aria-current="true"] span { font-weight: 600; color: var(--red-text); }
/* Steps not yet published are plain text rather than links, so the sidebar
   never sends anyone to a 404. Swap to <a> as each article ships. */
.blog-toc-steps li.is-upcoming span { color: var(--ink-3); }
.blog-toc-steps li.is-upcoming span::after { content: " · soon"; font-size: 11.5px; color: var(--orange); }

/* breathing room between the intro and the answer box */
.blog-art-main > .mn-prose:first-child { margin-bottom: 26px; }
.blog-hood-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* In-article CTA. Deliberately NOT movenew's .promo-card, which is a sidebar
   grid component: it carries no max-width and no bottom margin, so in the
   body it broke out of the 45rem text column and sat flush against the next
   heading. This sits inside .mn-guide-sec and inherits that column's width
   and rhythm like every other section. */
.blog-cta {
  background: #1c1c1c; color: #fff; border-radius: 22px;
  padding: clamp(22px, 3vw, 30px);
}
.blog-cta-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-bottom: 8px;
}
.blog-cta h2 { color: #fff; font-size: clamp(19px, 2.4vw, 24px); margin-bottom: 10px; }
.blog-cta p { color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.blog-cta-btn {
  display: inline-block; background: var(--orange-deep); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 12px 24px;
}
.blog-cta-btn:hover { background: #b93c10; }
/* Chart heroes sit on the page rather than bleeding like a photo. */
.blog-art-figure--chart img { border: 1px solid var(--grid); border-radius: 18px; background: #fff; }

/* Landing-page hero band. Unlike an article hero (shown whole, at its natural
   aspect), the landing hero is a backdrop: full shell width but capped in
   height so the page's actual content stays in the first screen on desktop.
   The height tracks the listing gallery's visual weight rather than the
   image's own aspect; object-fit crops symmetrically. */
.landing-hero img {
  height: clamp(220px, 28vw, 380px);
  object-fit: cover;
}

/* In-body charts. Sit inside the 45rem text column like any other figure. */
.blog-body-chart { margin: 22px 0 18px; }
.blog-body-chart img { width: 100%; height: auto; border: 1px solid var(--grid); border-radius: 16px; background: #fff; }
.blog-body-chart figcaption { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
/* Articles not yet published: shown as cards but not clickable, so an index
   or related row never sends anyone to a 404. Swap to <a> as each ships. */
.blog-related-card.is-upcoming { opacity: 0.62; cursor: default; }
.blog-related-card.is-upcoming h3::after { content: " · coming soon"; color: var(--orange); font-weight: 600; font-size: 12.5px; }
.blog-post-nav-soon { color: var(--ink-3); }

/* In-body community links, rendered by js/blog-community-links.js.
   The affordability chart beside these is an <img>, so its community names
   cannot be links; this carries the same ranking as real destinations. Two
   columns on desktop so ten entries do not become a long thin list. */
.blog-hood-link-list {
  list-style: none; margin: 0 0 6px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
}
.blog-hood-link-list li {
  padding: 9px 0; border-top: 1px solid var(--grid); font-size: 14.5px; line-height: 1.4;
}
.blog-hood-link-list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.blog-hood-link-list a:hover { color: var(--red-text); text-decoration: underline; }
.blog-hood-link-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 640px) {
  .blog-hood-link-list { grid-template-columns: 1fr; }
}

/* Price-band links under an affordability section. Same pill vocabulary as
   the hero's browse-by row, so they read as navigation rather than prose. */
.blog-band-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 6px; }
.blog-band-links a {
  display: inline-block; background: var(--linen); color: var(--ink);
  border: 1px solid var(--grid); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 500; text-decoration: none;
}
.blog-band-links a:hover { background: var(--orange-soft); border-color: var(--orange); color: var(--red-text); }

/* ---------- blog sidebar: 90 Days course card ---------- */

.blog-course-card {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, var(--ink) 0%, #2e2e2e 100%);
  border-radius: var(--radius); padding: 22px 22px 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-course-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(0,0,0,.6); }
.blog-course-card .blog-sidebar-title { color: var(--orange-glow); margin-bottom: 6px; }
.blog-course-card h3 { color: #fff; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
.blog-course-card__p { color: #cfcbc5; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.blog-course-card__cta { display: inline-block; font-size: 13px; font-weight: 600; color: var(--orange-glow); }
.blog-course-card:hover .blog-course-card__cta { color: #fff; }

/* ---------------------------------------------------------------
   MORTGAGE DEALS — the pre-approval request card and its form.
   Reuses .guide/.guide__card for the page chassis; only the form
   itself needs styling of its own.
   --------------------------------------------------------------- */
.guide__list { margin: 0 0 18px; padding-left: 20px; }
.guide__list li { margin-bottom: 9px; line-height: 1.6; }
.guide__list li b { font-weight: 600; }

.mtg-card-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
.mtg-row { margin-bottom: 12px; }
.mtg-row label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.mtg-row input, .mtg-row select {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: 11px;
  padding: 10px 13px; appearance: none; -webkit-appearance: none;
}
.mtg-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
  padding-right: 30px; cursor: pointer;
}
.mtg-row input:focus, .mtg-row select:focus { outline: none; border-color: var(--orange); background: #fff; }
.mtg-error { font-size: 12.5px; color: #b3261e; margin: 4px 0 10px; line-height: 1.45; }
.mtg-submit {
  width: 100%; font-family: inherit; font-weight: 600; font-size: 14px; color: #fff;
  background: var(--orange-deep); border: 0; border-radius: 999px; padding: 13px 18px;
  cursor: pointer; transition: background 0.18s ease;
}
.mtg-submit:hover { background: #b93c10; }
.mtg-submit:disabled { opacity: 0.6; cursor: default; }
/* the "no SIN, ever" line — deliberately quiet but always present, because the
   promise matters most to the people most likely to be phished */
.mtg-fine { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; margin-top: 10px; }
.mtg-fine a { color: var(--ink-3); text-decoration: underline; }
.mtg-fine a:hover { color: var(--red-text); }

.contact-agent {
  display: flex; gap: 20px; align-items: flex-start; padding: 20px;
  margin-bottom: 24px; background: var(--surface); border: 1px solid var(--grid);
  border-radius: var(--radius);
}
.contact-agent-photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none;
}
.contact-agent-info h2 { font-size: 19px; margin-bottom: 2px; }
.contact-agent-role { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.contact-agent-contact { font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; }
.contact-agent-contact a { color: var(--red-text); }
.contact-agent-brokerage { display: inline-block; }
.contact-agent-brokerage img { display: block; height: 40px; width: auto; }
.contact-agent-address { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 520px) {
  .contact-agent { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------------------------------------------------------------
   ACCOUNT / DASHBOARD — tabbed panels, compare table, saved searches.
   Same three-tab shape as Move New's account page, in Real Living's own
   palette and type.
   --------------------------------------------------------------- */
/* `hidden` loses to an explicit display value, which is how the signed-in bar
   and the tab counts stayed visible when the script had hidden them. */
.acct-bar[hidden], .account-tab-count[hidden], .acct-table-wrap[hidden],
.acct-empty[hidden], .acct-fine[hidden], .sub[hidden] { display: none; }

.account-tabs {
  display: flex; gap: 26px; border-bottom: 1px solid var(--grid);
  margin: 26px 0 24px; overflow-x: auto; scrollbar-width: none;
}
.account-tabs::-webkit-scrollbar { display: none; }
.account-tab {
  flex: 0 0 auto; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 12px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.account-tab:hover { color: var(--ink); }
.account-tab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--orange); }
.account-tab-count {
  display: inline-block; min-width: 20px; margin-left: 5px; padding: 1px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--red-text);
  background: var(--orange-soft); border-radius: 999px;
}
.account-panel[hidden] { display: none; }

/* a.acct-btn, not just .acct-btn: the site-wide link colour is more specific
   than a bare class, so anchors styled as buttons came out orange-on-orange
   while the <button> versions beside them were white. */
.acct-btn, a.acct-btn {
  display: inline-block; font-family: inherit; font-weight: 600; font-size: 13.5px;
  color: #fff; background: var(--orange-deep); border: 0; border-radius: 999px;
  padding: 11px 22px; cursor: pointer; text-decoration: none; margin-top: 14px;
}
.acct-btn:hover, a.acct-btn:hover { background: #b93c10; color: #fff; }
.acct-btn:hover { background: #b93c10; }
.acct-btn--ghost {
  color: var(--ink); background: none; border: 1.5px solid var(--grid); margin-top: 0;
}
.acct-btn--ghost:hover { background: var(--orange-soft); border-color: var(--orange); }

/* the compare table scrolls inside its own box — nine columns will not fit a
   laptop, and letting the page scroll sideways instead breaks every other row */
.acct-table-wrap { overflow-x: auto; border: 1px solid var(--grid); border-radius: 14px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.acct-table caption { text-align: left; padding: 14px 16px 0; font-size: 13px; color: var(--ink-3); }
.acct-table th, .acct-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.acct-table thead th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); border-bottom: 1px solid var(--grid);
}
.acct-table tbody tr + tr { border-top: 1px solid var(--grid); }
.acct-table tbody th { font-weight: 600; white-space: normal; min-width: 220px; }
.acct-table tbody th a { color: inherit; text-decoration: none; }
.acct-table tbody th a:hover { color: var(--red-text); }
.acct-fine { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 12px; max-width: 70ch; }

.acct-ss-list { display: grid; gap: 12px; }
.acct-ss {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid var(--grid); border-radius: 14px; padding: 16px 18px; background: var(--surface);
}
.acct-ss b { display: block; font-size: 15px; }
.acct-ss span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.acct-ss-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.acct-ss-del {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-3);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.acct-ss-del:hover { color: #b3261e; }

@media (max-width: 560px) {
  .acct-ss { flex-direction: column; align-items: flex-start; }
  .account-tabs { gap: 18px; }
}

/* Sign in / Sign out as a top-level nav item — it used to live inside the
   Dashboard dropdown, which is now a direct link. Styled to match the other
   nav links rather than a menu row. */
.dgn-auth-item { display: flex; align-items: center; }
.dgn-auth-item > .nav-auth-btn {
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer;
  /* a button's baseline sits lower than an anchor's; without this it rides
     ~4px below the other nav links */
  display: block; line-height: 21px;
}
.dgn-auth-item > .nav-auth-btn:hover { color: var(--red-text); }

/* ---------------------------------------------------------------
   NEW TODAY / PRICE REDUCED — the two standing lists.
   --------------------------------------------------------------- */
.lp { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin: 0 auto 70px; padding-top: 20px; }
.lp-crumb { font-size: 13px; color: var(--ink-3); }
.lp-crumb a { color: inherit; text-decoration: none; }
.lp-crumb a:hover { color: var(--red-text); }
.lp-intro { margin: 14px 0 26px; max-width: 68ch; }
.lp-kicker { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; margin-bottom: 8px; }
.lp-intro p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
/* the reduction, not a sticker: the old price sits under the new one */
.lp-was { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }
.badge-cut { background: var(--orange-deep); color: #fff; }

/* ---------------------------------------------------------------
   ABOUT THIS BUILDING — condo name, and behind a free account the
   sold figures for that building (feed/build_condo_data.py).
   --------------------------------------------------------------- */
/* Neighbourhood context, from City of Edmonton open data. Sits between the
   building block and the screening report: what the street is like, after
   what the home is like and before what to check on it. */
.pdp-hoodblock {
  margin: 26px 0; padding: 22px; border: 1px solid var(--grid);
  border-radius: 18px; background: var(--surface);
}
.pdp-hood-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.pdp-hood-head h2 { font-size: 20px; letter-spacing: -0.01em; }
.pdp-hood-badge {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--orange-soft); color: var(--red-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle;
}
.pdp-hood-all { font-size: 13.5px; font-weight: 600; color: var(--red-text); text-decoration: none; }
.pdp-hood-all:hover { text-decoration: underline; }
.pdp-hood-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}
.pdp-hood-stat {
  padding: 12px 14px; border: 1px solid var(--grid); border-radius: 14px; background: #fff;
}
.pdp-hood-stat b { display: block; font-size: 19px; line-height: 1.15; }
.pdp-hood-stat span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.pdp-hood-stat small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); opacity: .85; }
.pdp-hood-note { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pdp-hood-src { margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.pdp-hood-src a { color: inherit; }

.pdp-building {
  margin: 26px 0; padding: 22px; border: 1px solid var(--grid);
  border-radius: 18px; background: var(--surface);
}
.pdp-building-head h2 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 6px; }
.pdp-building-head p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.pdp-bstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 18px;
}
.pdp-bstat { background: #fff; border: 1px solid var(--grid); border-radius: 14px; padding: 14px 16px; }
.pdp-bstat b { display: block; font-size: 22px; letter-spacing: -0.02em; color: var(--red-text); }
.pdp-bstat span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.pdp-bfine { margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 70ch; }
.pdp-building-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }

/* ---------------------------------------------------------------
   CONDO BUILDING PAGES — /condos/ and /condos/<slug>/
   --------------------------------------------------------------- */
.condo { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin: 0 auto 70px; padding-top: 20px; }
.condo-head { margin: 14px 0 24px; }
.condo-head h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; }
.condo-addr { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.condo-addr a { color: var(--red-text); text-decoration: none; }
.condo-addr a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Opening copy, the active-listing summary and the hub links, all written by
   feed/condo_seo.py from the same record as the H1 and schema. The listing
   summary is slightly stronger than the intro because it carries the number
   a buyer is actually looking for. */
.condo-intro { margin-top: 14px; max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.condo-listed { margin-top: 10px; max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.condo-links { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.condo-links a { color: var(--red-text); text-decoration: none; }
.condo-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.condo .results-head h2 { font-size: 19px; letter-spacing: -0.01em; }
.condo-near { margin-top: 34px; }
.condo-near h2 { font-size: 19px; margin-bottom: 12px; }
/* nearby buildings double as the internal links that make this cluster
   crawlable — every page links six others within 2km */
.condo-near-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.condo-near-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--grid); border-radius: 12px; padding: 12px 14px; background: var(--surface);
}
.condo-near-list a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.condo-near-list a:hover { color: var(--red-text); }
.condo-near-list span { font-size: 12.5px; color: var(--ink-3); flex: 0 0 auto; }
.condo-hub-hood { margin-top: 30px; }
.condo-hub-hood h2 { font-size: 18px; margin-bottom: 12px; }
/* Directory rows. The status used to sit on the same line as the name and
   right-aligned, so pairing the two meant travelling the width of the column
   and they read as one run-on phrase. Each row is now a block with the status
   on its own line, and a hairline row of separators is replaced by a filled
   card — vertical rules that thin are unreadable at this density. */
.condo-hub-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.condo-row a {
  display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--grid);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.condo-row a:hover { background: #fff; border-color: var(--orange); }
.condo-row-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.condo-row-state { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; }
/* Green for something to see, red for sold history only. The status also says
   which in words — colour alone fails for the ~8% of men with a red-green
   deficiency, and in print. */
.condo-row.is-active .condo-row-state { color: #2e7d32; }
.condo-row.is-sold .condo-row-state { color: #b3261e; }
/* the building name links through to its own page */
.pdp-building-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--orange-soft); }
.pdp-building-link:hover { color: var(--red-text); border-bottom-color: var(--orange); }
.pdp-building-more { display: inline-block; margin-left: 4px; color: var(--red-text); font-weight: 600; text-decoration: none; }
.pdp-building-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the nearby card's badge is a link to that building, so it needs to sit above
   the card's own anchor rather than inside it */
.rcard .badge-bldg { z-index: 2; text-decoration: none; color: var(--ink); }
.rcard .badge-bldg:hover { background: var(--orange); color: #fff; }
.condo-near-quiet { margin: 22px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
/* the finding, ahead of the figures that evidence it */
.pdp-bctx {
  margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink);
  font-weight: 500; max-width: 68ch;
}

/* the six quadrant links at the top of the hub: bigger targets than a building
   row, because they are the first choice a visitor makes */
.condo-quad-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }
/* Give the anchor its own colour. Both spans inside are explicitly white, so
   this renders identically today — but without it the link had no colour of
   its own, and any text put directly in it would come out as browser-default
   blue on orange: a 2.76 contrast ratio, and the kind of thing nobody notices
   until it ships. */
.condo-quad-list a {
  color: #fff;
  display: block; padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: var(--orange-deep); border: 1px solid var(--orange);
  transition: background 0.15s ease;
}
.condo-quad-list a:hover { background: #b93c10; border-color: var(--orange-deep); }
.condo-quad-name { display: block; font-size: 15.5px; font-weight: 600; color: #fff; }
.condo-quad-n { display: block; margin-top: 2px; font-size: 12.5px; color: #fff; }

/* the civic address, shown only where a complex has several buildings under
   one name and the rows would otherwise be identical */
.condo-row-at { font-weight: 500; color: var(--ink-3); }

/* ---------- community page content blocks ----------
   These pages carried ~127 words: a lede, a row of civic numbers and a list of
   condo names. Thin at 448 pages, and thin pages are the ones Google leaves
   unindexed. The blocks below carry the added content. */
.com-block { margin: 34px 0; }
.com-block h2 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.com-block > p { font-size: 15px; color: var(--ink-2); max-width: 70ch; line-height: 1.55; }

.com-table {
  width: 100%; max-width: 640px; margin-top: 14px;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--grid); border-radius: var(--radius); overflow: hidden;
  font-size: 15px;
}
.com-table th, .com-table td { padding: 11px 14px; text-align: left; }
.com-table thead th {
  background: var(--surface); font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em;
}
.com-table tbody tr + tr td { border-top: 1px solid var(--grid); }
.com-table td b { color: var(--red-text); }

.com-list { margin: 12px 0 0; padding: 0; list-style: none; max-width: 70ch; }
.com-list li {
  position: relative; padding: 7px 0 7px 22px; font-size: 15px; color: var(--ink-2);
  line-height: 1.5;
}
/* A dot rather than a bullet glyph, so the indent matches the rest of the site */
.com-list li::before {
  content: ""; position: absolute; left: 6px; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.com-src { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

.com-faq { margin-top: 16px; max-width: 70ch; }
.com-faq h3 { font-size: 16px; margin-bottom: 4px; }
.com-faq p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 760px) {
  .com-table { font-size: 14px; }
  .com-table th, .com-table td { padding: 9px 10px; }
}

/* Skeleton cards — space held for listings that render from the feed.

   A card grid that appears after paint pushes everything below it down the
   page. On community pages that measured 0.679 CLS, seven times Google's
   threshold. These occupy the exact footprint of the real cards, so nothing
   moves when the real ones arrive. Deliberately quiet: no shimmer animation,
   which on a page this long reads as broken rather than loading. */
.rcard.is-skeleton { pointer-events: none; }
.rcard.is-skeleton .ph { background: var(--grid); }
.rcard.is-skeleton .t,
.rcard.is-skeleton .m,
.rcard.is-skeleton .p {
  background: var(--grid);
  border-radius: 6px;
  color: transparent;
}
.rcard.is-skeleton .t { height: 15px; margin-top: 10px; width: 78%; }
.rcard.is-skeleton .m { height: 13px; margin-top: 7px; width: 52%; }
.rcard.is-skeleton .p { height: 17px; margin-top: 9px; width: 64%; }
@media (prefers-reduced-motion: no-preference) {
  .rcard.is-skeleton { opacity: .75; }
}

/* Who to call, on the notices where the work is a specialist's — a WETT
   certificate and a sewer camera scope are both booked separately from the
   home inspection, so the notice says who books them. */
.pi-contact { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.pi-contact b { color: var(--ink); }


/* ---------- article highlight sections (feed/build_blog_enrich.py) ----------
   Three blocks a reader should be able to find by scanning rather than
   reading: what the market is doing right now, the takeaways, and the
   questions. They are .mn-guide-sec first, so they inherit article rhythm;
   these rules only add the tint and rule that make them scannable. */
.rl-takeaways {
  background: var(--orange-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}
.rl-takeaways h2 { margin-top: 0; }
.rl-takeaways ul { margin-bottom: 0; }
.rl-takeaways li { margin-bottom: .5rem; }

.rl-market {
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  background: var(--surface);
}
.rl-market h2 { margin-top: 0; }
.rl-market .mn-fine { color: var(--ink-2); font-size: .85rem; margin-bottom: 0; }

.rl-faq h3 { font-size: 1.05rem; margin-top: 1.4rem; }
.rl-faq p { margin-top: .4rem; }

.rl-author {
  border-top: 2px solid var(--grid);
  padding-top: 1.2rem;
}
.rl-author h2 { font-size: 1.1rem; }


/* ---------- migrated article content: lists, tables, callouts ----------
   The 52 migrated articles carry a <p> inside every <li>. Those paragraphs
   pick up p.mn-prose's article-body size, which inside a bullet renders far
   larger than the prose around it — the list ends up shouting. Inside a list
   item the paragraph is body text, not a lead paragraph. */
.blog-art-main li p.mn-prose,
.blog-art-main li p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 .4rem;
  max-width: none;
}
.blog-art-main li p:last-child { margin-bottom: 0; }
.blog-art-main li { margin-bottom: .55rem; }

/* Tables came across cramped: header labels wrapping to three lines and cells
   too tight to scan. More room per cell, a header that does not shout, and a
   zebra stripe so the eye holds its row across four columns. */
.blog-art-main .mn-table { font-size: .95rem; }
.blog-art-main .mn-table th,
.blog-art-main .mn-table td {
  padding: .85rem 1rem;
  vertical-align: top;
}
.blog-art-main .mn-table thead th {
  font-size: .74rem;
  line-height: 1.35;
  white-space: normal;
}
.blog-art-main .mn-table tbody tr:nth-child(even) { background: var(--surface); }
.blog-art-main .mn-table tbody td:first-child { font-weight: 600; color: var(--ink); }

/* A table wider than the column scrolls inside its own wrapper rather than
   pushing the page sideways. */
.blog-art-main .mn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
}


/* ---------- Edmonton zone map (feed/build_zone_pages.py) ----------
   An SVG rather than an image map: the zones scale with the page, each one is
   a real link a keyboard can reach, and hover/focus states cost nothing. */
.zone-map-wrap { margin: 1.6rem 0 2rem; }
.zone-map {
  width: 100%;
  height: auto;
  max-height: 78vh;
  display: block;
  margin-inline: auto;
}
.zone-map-wrap figcaption {
  font-size: .82rem;
  color: var(--ink-3);
  margin-top: .7rem;
  text-align: center;
}
.zm-zone path {
  /* Black, not white: the fills are now a heatmap, so adjacent zones can land
     on the same step and a light divider would let them read as one shape. */
  stroke: #1c1c1c;
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill .12s ease;
}
.zm-zone text {
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
/* The two darkest heatmap steps need a light label to stay legible. */
.zm-zone text.zm-on-dark { fill: #fff; }
/* Hover leaves the heatmap value behind deliberately: the point of the
   interaction is "this is the one I am about to click", and a single hover
   colour reads faster than a tint shift the eye has to compare. */
.zm-zone:hover path,
.zm-zone:focus-visible path { fill: var(--ink); }
.zm-zone:hover text,
.zm-zone:focus-visible text { fill: #fff; }
/* The focus ring has to sit on the link, not the path, or it is clipped by
   the SVG's own bounds on the outermost zones. */
.zm-zone:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* The filter bar that heads every zone page. Same controls the search page
   parses, so submitting lands on a real filtered search. */
.zone-search {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .9rem 1rem; margin-bottom: 1.4rem;
  background: var(--surface); border: 1px solid var(--grid);
  border-radius: var(--radius);
}
.zone-search input,
.zone-search select {
  font: inherit; font-size: .95rem; padding: .6rem .8rem;
  border: 1px solid var(--grid); border-radius: 10px; background: #fff;
  min-width: 9rem; flex: 1 1 9rem;
}
.zone-search .dgn-cta { flex: none; padding: 12px 26px; }

.zone-index {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.zone-index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .7rem .9rem; border: 1px solid var(--grid); border-radius: 12px;
  text-decoration: none; color: var(--ink); background: #fff;
}
.zone-index a:hover { border-color: var(--orange); }
.zone-index span { font-size: .82rem; color: var(--ink-3); }

.zone-hoods {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.zone-hoods li { display: flex; justify-content: space-between; gap: .5rem; }
.zone-hood-n { color: var(--ink-3); font-size: .85rem; }

@media (max-width: 640px) {
  .zone-map { max-height: none; }
  .zm-zone text { font-size: 26px; }
}


/* ---------- testimonial quote + mortgage calculator ---------- */
.rl-quote {
  margin: 0; padding: 1.2rem 1.4rem;
  background: var(--orange-soft); border-radius: var(--radius);
  border-left: 4px solid var(--orange);
}
.rl-quote p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }

.rl-calc {
  display: grid; gap: .8rem;
  padding: 1.3rem 1.5rem; margin: 1.4rem 0 1.8rem;
  background: var(--surface); border: 1px solid var(--grid);
  border-radius: var(--radius);
}
.rl-calc-row { display: grid; grid-template-columns: 11rem 1fr auto; gap: .8rem; align-items: center; }
.rl-calc-row label { font-weight: 600; font-size: .95rem; }
.rl-calc input, .rl-calc select {
  font: inherit; padding: .6rem .8rem; border: 1px solid var(--grid);
  border-radius: 10px; background: #fff; width: 100%;
}
.rl-calc-note { color: var(--ink-3); font-size: .9rem; min-width: 3rem; }
.rl-calc-out {
  display: block; padding-top: .9rem; border-top: 1px solid var(--grid);
}
.rl-calc-big { display: block; font-size: 2.1rem; font-weight: 700; color: var(--ink); }
.rl-calc-big small { font-size: 1rem; font-weight: 500; color: var(--ink-3); }
.rl-calc-sub { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .92rem; }
.rl-calc-warn { display: block; margin-top: .4rem; color: var(--orange-hover); font-weight: 600; font-size: .92rem; }
@media (max-width: 560px) {
  .rl-calc-row { grid-template-columns: 1fr; gap: .3rem; }
}


/* ---------- article prose links ----------
   Padster styles .mn-guide-sec p a, but an article's opening paragraphs sit
   before the first <h2> and therefore outside any guide section — so links
   there fell through to the browser default, rendering blue and, once
   visited, purple. Same treatment, applied to the whole article body. */
.blog-art-main p a,
.blog-art-main li a {
  color: var(--red-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.blog-art-main p a:hover,
.blog-art-main li a:hover { color: var(--ink); }
/* Buttons inside prose keep their own colour — see the action-button rules. */
.blog-art-main p a.dgn-cta,
.blog-art-main p a.blog-cta-btn { color: #fff; text-decoration: none; }

/* The callout: Padster's component, in Real Living's palette. Its amber tint
   belongs to Padster's identity; ours takes the brand red-soft the takeaways
   and answer blocks already use, so the article reads as one system. */
.mn-callout {
  background: var(--orange-soft);
}
.mn-callout-icon { background: var(--orange); }


/* Prose links inside a landing-page intro. These sit outside .blog-art-main,
   so the article link rule never reached them and they rendered browser-blue
   (purple once visited). Structural link lists are excluded: their child
   elements already carry the colour, and turning the row red would make a
   directory look like a page of prose links. */
.lp-intro p a:not(.dgn-cta):not(.blog-cta-btn) {
  color: var(--red-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.lp-intro p a:not(.dgn-cta):not(.blog-cta-btn):hover { color: var(--ink); }

/* The neighbourhood list on a zone page reads as a directory, not prose. */
.zone-hoods a { color: var(--ink); text-decoration: none; }
.zone-hoods a:hover { color: var(--red-text); text-decoration: underline; }


/* A callout that replaced a paragraph inside a list item keeps the item's
   bullet, which reads as a stray dot beside the panel. The panel is the
   marker. */
.blog-art-main li:has(> .mn-callout) { list-style: none; margin-left: -1.2rem; }
.blog-art-main .mn-callout { margin-block: 1rem; }


/* Heatmap legend. The colour is a convenience, never the only carrier of the
   number: each zone states its count in its tooltip and accessible name, and
   the index below the map lists every one. */
.zm-legend {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  padding: 0; margin: .9rem 0 0;
  font-size: .84rem; color: var(--ink-2);
}
.zm-legend li { display: flex; align-items: center; gap: .4rem; }
.zm-legend-label { font-weight: 600; color: var(--ink); }
.zm-key {
  width: 1.05rem; height: 1.05rem; border-radius: 4px;
  border: 1px solid #1c1c1c; flex: none;
}


/* A directory grid is not prose. .lp-intro carries a 45rem reading measure,
   which is right for paragraphs and wrong for an index of 40 zones: it
   squeezed them into three columns down the left of a 1240px page. These
   sections run the full width instead, and the grid fills it. */
.lp-wide { max-width: none; }
.lp-wide > h2 { max-width: 45rem; }
.zone-index { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.zone-hoods { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }