/* ============================================================
   UPSIDE PROPERTY — Components
   ============================================================ */

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.92em 1.5em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.24s ease,
    color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.btn__ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__ico { transform: translate(3px, -3px); }
.btn:active { transform: translateY(0); }

/* primary peach */
/* A coloured drop shadow under a button is the single clearest tell of a
   template that has not been looked at. It reads as a starburst sticker
   rather than a control, and on a red button it looks like a warning.
   Removed: the button is a solid accent block, which is enough. A subtle
   neutral shadow on hover is the most lift this needs. */
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.10);
}
.btn--accent:hover {
  --btn-bg: var(--accent-2);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.16);
}
.btn--accent:hover { --btn-bg: var(--accent-2); }

/* dark on light */
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: #262626; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: var(--sh-sm); }
.btn--light:hover { --btn-bg: #f1efec; }

/* ghost / outline */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn--outline:hover { --btn-bg: rgba(10, 10, 10, 0.05); }

.btn--outline-inv {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: var(--line-inv-2);
}
.btn--outline-inv:hover { --btn-bg: rgba(255, 255, 255, 0.1); }

.btn--sm { padding: 0.7em 1.15em; font-size: 0.78rem; }
.btn--lg { padding: 1.06em 1.85em; font-size: 0.9rem; }

/* text link with rule + arrow, e.g. "Explore Properties ↗" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.88rem;
  font-weight: 500;
  color: inherit;
  padding-bottom: 0.32em;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.22s ease, gap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-arrow:hover { opacity: 0.68; gap: 0.9em; }
.link-arrow svg { width: 0.95em; height: 0.95em; flex: none; }

.link-arrow--plain { border-bottom: 0; padding-bottom: 0; opacity: 0.75; }
.link-arrow--plain:hover { opacity: 1; }

/* circular icon button (carousel arrows) */
.ico-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tx);
  flex: none;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease,
    border-color 0.22s ease;
}
.ico-btn svg { width: 17px; height: 17px; }
.ico-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.ico-btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.ico-btn--solid:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.ico-btn--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.ico-btn--inv { border-color: var(--line-inv-2); color: #fff; background: var(--glass-dark); backdrop-filter: blur(8px); }
.ico-btn--inv:hover { background: #fff; color: var(--ink); border-color: #fff; }
.ico-btn--sm { width: 38px; height: 38px; }
.ico-btn--sm svg { width: 14px; height: 14px; }
.ico-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* ============================================================
   Header / pill nav
   ============================================================ */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 70;
  padding: 24px var(--gut);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* interior pages: header floats over the light page hero, then sticks on scroll */
.header:not([data-variant="hero"]).is-stuck {
  position: fixed;
  padding: 12px var(--gut);
  background: rgba(246, 245, 243, 0.88);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(10, 10, 10, 0.05);
}

/* Applied by JS only on the transition into the stuck state, and removed
   first so it can replay. Living on `.is-stuck` directly meant every
   re-add of that class replayed the slide — which, with the scroll handler
   toggling it around the threshold, read as a flicker. */
.header.is-dropped {
  animation: headerDrop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .header.is-dropped { animation: none; }
}

@keyframes headerDrop {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

.header__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* logo lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
/* the client's real logo lockup (intrinsic ratio 320x96, so height drives size) */
.brand__logo {
  display: block;
  height: 54px;
  width: auto;
  flex: none;
}
@media (max-width: 620px) { .brand__logo { height: 40px; } }
.brand__glyph {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand__glyph small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.47rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 2px;
}
.brand__img { height: 40px; width: auto; }

/* the floating pill */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.08);
}

.nav-pill a,
.nav-pill__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tx);
  transition: background 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.nav-pill a:hover { background: rgba(10, 10, 10, 0.06); }
/* the page you are on: a solid button of its own, so it stands out from the bar */
.nav-pill a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(10, 10, 10, 0.18); }
.nav-pill a[aria-current="page"]:hover { background: var(--ink); }

/* dot before active item */
.nav-pill a[aria-current="page"]::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.header__cta { flex: none; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  flex: none;
}
.burger span {
  display: block;
  width: 17px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s ease, background 0.2s ease;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .burger span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* while the drawer is open, hide the light-theme header logo so it does not
   sit unreadably on the dark overlay */
body.nav-open .header .brand { opacity: 0; pointer-events: none; }
.header .brand { transition: opacity 0.25s ease; }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--ink);
  color: #fff;
  padding: 104px var(--gut) 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.32s;
  overflow-y: auto;
}
body.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }

/* primary nav rows only — .drawer__foot links must not inherit this size */
.drawer > a {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-inv);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.drawer > a .idx { color: var(--tx-inv-3); }

.drawer .brand { color: #fff; }
.drawer .brand__glyph small { opacity: 0.55; }

.drawer__foot {
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.drawer__foot .btn { align-self: flex-start; }

.drawer__meta {
  color: var(--tx-inv-2);
  font-size: 0.88rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.drawer__meta a,
.drawer__meta span {
  font-family: var(--f-body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0;
  border: 0;
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.drawer__meta a { color: #fff; }
.drawer__meta a:hover { color: var(--accent); }
.drawer__meta span { color: var(--tx-inv-3); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding: 0; }

.hero__stage {
  position: relative;
  margin: 0 var(--gut);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.30) 0%, rgba(12, 12, 12, 0.03) 34%, rgba(12, 12, 12, 0.52) 100%),
    linear-gradient(90deg, rgba(12, 12, 12, 0.22) 0%, rgba(12, 12, 12, 0) 46%);
}

/* giant wordmark behind the imagery */
.hero__word {
  font-family: var(--f-display);
  font-weight: 700;
  /* Was clamp(3.4rem, 15.2vw, 13.6rem) at soft-light blend. At that size and
     strength the wordmark stopped reading as a brand and started reading as
     a text effect over the photograph — the WordArt look. Smaller and much
     softer, so it sits on the image as a watermark rather than shouting over
     it. The idea is kept; the volume is not. */
  font-size: clamp(3rem, 11vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: clamp(6px, 1.4vh, 20px) 0 0;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.hero__word span { display: inline-block; }

.hero__body {
  margin-top: auto;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 3vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  color: #fff;
  position: relative;
  z-index: 2;
}

.hero__tagline {
  max-width: 34ch;
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.hero__stats {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.hero__stat { min-width: 0; }
.hero__stat b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero__stat span {
  font-size: clamp(0.58rem, 0.8vw, 0.7rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

.hero__kicker {
  position: absolute;
  left: clamp(24px, 3vw, 44px);
  top: clamp(140px, 26vh, 260px);
  z-index: 2;
  color: #fff;
  max-width: 26ch;
}
.hero__kicker .micro { color: rgba(255, 255, 255, 0.7); }

.hero__socials {
  position: absolute;
  right: clamp(24px, 3vw, 44px);
  bottom: clamp(112px, 15vh, 148px);
  z-index: 4;
  display: flex;
  gap: 9px;
}
.hero__socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16, 16, 16, 0.30);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.30);
  transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.hero__socials a svg { width: 15px; height: 15px; color: #fff; }
.hero__socials a:hover { background: #fff; transform: translateY(-2px); }
.hero__socials a:hover svg { color: var(--ink); }

/* hotspot annotations on the hero */
.hotspot {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 250px;
}
.hotspot__dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hotspot__dot::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
.hotspot__card {
  min-width: 0;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  color: #fff;
  font-size: 0.73rem;
  line-height: 1.45;
  max-width: 230px;
}
.hotspot--left { flex-direction: row-reverse; }
.hotspot--left .hotspot__card { text-align: right; }
.hotspot:hover .hotspot__dot { transform: scale(1.16); }

.hotspot__line {
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
  height: 1px;
  transform-origin: left center;
}

/* hero scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  animation: bob 2.6s ease-in-out infinite;
}
.scroll-cue svg { width: 17px; height: 17px; }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* ============================================================
   Section headers
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: end;
}
.sec-head__aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.sec-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.dark .sec-bar { border-color: var(--line-inv); }

/* ============================================================
   Property card (image-fill with overlay meta)
   ============================================================ */
.p-card {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--mist-2);
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.p-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

.p-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-card:hover .p-card__img { transform: scale(1.06); }

.p-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.72) 100%);
}

.p-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.p-card__name {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}
.p-card__price {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
}

.p-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
}
.p-card__specs li { display: flex; align-items: center; gap: 0.4em; }
.p-card__specs li + li::before {
  content: "";
  width: 1px; height: 10px;
  background: rgba(255, 255, 255, 0.3);
  margin-right: 12px;
}
.p-card__specs { row-gap: 2px; }

.p-card__loc {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68);
}
.p-card__loc svg { width: 12px; height: 12px; flex: none; }
/* CMLS IDX rule 6: the listing company, readable on every MLS card. */
.p-card__office {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

/* "Apply for this home" affordance inside a rental card. The whole card is one
   <a>, so this is a styled span driven by a click handler — see rentals.html. */
.p-card__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.p-card:hover .p-card__apply {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .p-card__apply { transition: none; }
}

.p-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.p-card__fav {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.34);
  transition: background 0.22s ease;
}
.p-card__fav svg { width: 15px; height: 15px; color: #fff; }
.p-card__fav:hover { background: rgba(255, 255, 255, 0.4); }
.p-card__fav.is-on svg { fill: var(--accent); color: var(--accent); }

/* grid of cards */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}

/* ============================================================
   Horizontal scroller (featured / insights)
   ============================================================ */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: 22px;
  overflow-x: auto;
  /* never a vertical scroll container: a nested one swallows the page's
     vertical swipes on touch devices */
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* area tiles as a swipe row on phones */
.area-rail { grid-auto-columns: 62vw; gap: 14px; }
.area-rail .area-tile { aspect-ratio: 3 / 3.6; }

/* ============================================================
   Stats
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.stat {
  border: 1px solid var(--line-inv);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-4px); }

.stat__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.stat__note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tx-inv-3);
  margin-top: auto;
}

/* stat tile on a light background */
.stat--flat {
  border-color: var(--line);
  background: none;
  min-height: auto;
  padding: clamp(16px, 1.7vw, 22px);
  gap: 6px;
}
.stat--flat .stat__num {
  color: var(--accent-deep);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}
.stat--flat .stat__label { font-size: 0.88rem; }
.stat--flat .stat__note { color: var(--tx-3); }

/* ============================================================
   Pathway gateway — the four customer paths
   Buy a Home · Sell a Home · Rent a Home · Manage My Property
   ============================================================ */
.gateway {
  background: var(--ink);
  color: var(--tx-inv);
  /* the header is absolutely positioned, so the first section has to clear it.
     header is ~80px on phones, ~102px on desktop, plus breathing room. */
  padding: clamp(104px, 12vw, 130px) 0 clamp(48px, 6vw, 78px);
}

.gateway__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}

.gateway__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 22ch;
}

.gateway__note {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--tx-inv-2);
  max-width: 34ch;
}

.gateway__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 30px);
  min-height: clamp(200px, 22vw, 268px);
  border: 1px solid var(--line-inv);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.path::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 28, 36, 0.18), transparent 68%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.path:hover,
.path:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  border-color: var(--accent);
  transform: translateY(-5px);
}
.path:hover::after, .path:focus-visible::after { opacity: 1; }

.path__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.path__ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--ink);
  flex: none;
}
.path__ico svg { width: 21px; height: 21px; }

.path__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tx-inv-3);
}

.path__label {
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-top: auto;
}

.path__short { display: none; }
.path__desc {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--tx-inv-2);
}

.path__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.path__cta svg { width: 14px; height: 14px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.path:hover .path__cta svg { transform: translate(3px, -3px); }

/* ============================================================
   Service tiles (Why clients trust us)
   ============================================================ */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.services > *:nth-child(2) { margin-top: clamp(28px, 5vw, 68px); }
.services > *:nth-child(3) { margin-top: clamp(12px, 2.2vw, 30px); }

.svc { display: flex; flex-direction: column; gap: 16px; }

.svc__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--mist-2);
}
.svc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc:hover .svc__media img { transform: scale(1.05); }

.svc__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.svc__title { font-weight: 600; font-size: 1.04rem; letter-spacing: -0.015em; }

/* ============================================================
   Insights slider (large image with thumbs)
   ============================================================ */
.insight {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 8.4;
  background: var(--mist-2);
  isolation: isolate;
}
.insight__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.insight__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0) 42%, rgba(10, 10, 10, 0.62) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.34) 0%, rgba(10, 10, 10, 0) 58%);
}
.insight__thumbs {
  position: absolute;
  left: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  display: flex;
  gap: 12px;
  z-index: 3;
}
.insight__thumbs img {
  width: clamp(86px, 11vw, 132px);
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.insight__thumbs img:hover { opacity: 1; transform: translateY(-3px); }
.insight__thumbs img.is-active { opacity: 1; }

.insight__body {
  position: absolute;
  left: clamp(16px, 2.4vw, 30px);
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  margin-left: clamp(180px, 24vw, 290px);
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
}
.insight__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.insight__text { font-size: 0.87rem; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }

.insight__nav {
  position: absolute;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 3;
}
.insight__count { font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); margin-right: 6px; }

/* ============================================================
   Testimonials
   ============================================================ */
.tst-wrap { overflow: hidden; }

.tst-track {
  display: flex;
  gap: 26px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tst {
  flex: 0 0 clamp(560px, 62vw, 880px);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
}
.tst__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3.5;
  background: var(--mist-2);
}
.tst__media img { width: 100%; height: 100%; object-fit: cover; }

.tst__quote { font-size: clamp(0.95rem, 1.35vw, 1.18rem); line-height: 1.62; color: var(--tx); }
.tst__mark {
  font-family: var(--f-serif);
  font-size: 3.4rem;
  line-height: 0.7;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 6px;
}
.tst__who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.tst__who img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.tst__name { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.tst__role { font-size: 0.78rem; color: var(--tx-3); }

.tst__ctl { display: flex; gap: 10px; }

/* ============================================================
   Big CTA
   ============================================================ */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(400px, 56vh, 580px);
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  margin: 0 var(--gut);
}
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.44) 0%, rgba(10, 10, 10, 0.30) 45%, rgba(10, 10, 10, 0.66) 100%);
}
.cta__inner {
  color: #fff;
  padding: clamp(30px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 780px;
}
.cta__title { font-size: clamp(2rem, 4.8vw, 3.9rem); }
.cta__sub { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: var(--tx-inv); padding-top: clamp(48px, 6vw, 76px); }

.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer__links a {
  font-size: 0.95rem;
  color: var(--tx-inv-2);
  transition: color 0.2s ease, transform 0.2s ease;
  width: fit-content;
}
.footer__links a:hover { color: #fff; transform: translateX(3px); }

.footer__mail { font-size: 0.95rem; color: #fff; width: fit-content; }
.footer__mail:hover { color: var(--accent); }

.footer__news {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  padding: clamp(30px, 4vw, 52px) 0;
  margin-top: clamp(34px, 4.5vw, 60px);
  border-top: 1px solid var(--line-inv);
  border-bottom: 1px solid var(--line-inv);
}
.footer__news-form { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.footer__field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-inv-2);
  padding-bottom: 10px;
}
.footer__field input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 0.88rem;
  padding: 4px 0;
  min-width: 0;
}
.footer__field input::placeholder { color: var(--tx-inv-3); }
.footer__field .btn { flex: none; }

/* giant brand wordmark with corner brackets */
.footer__word-wrap {
  position: relative;
  padding: clamp(30px, 5vw, 66px) clamp(10px, 3vw, 54px);
  margin: clamp(20px, 3vw, 34px) 0;
}
.footer__word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3rem, 17.4vw, 15.4rem);
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.bracket {
  position: absolute;
  width: clamp(26px, 3.2vw, 46px);
  height: clamp(26px, 3.2vw, 46px);
  border: 1px solid var(--line-inv-2);
}
.bracket--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bracket--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bracket--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 30px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-inv-3);
}
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: #fff; }

.footer__badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 28px;
}
.footer__badges img { height: 34px; width: auto; opacity: 0.6; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  display: grid;
  place-items: center;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.footer__socials svg { width: 15px; height: 15px; color: var(--tx-inv-2); }
.footer__socials a:hover { background: var(--accent); border-color: var(--accent); }
.footer__socials a:hover svg { color: var(--ink); }

/* ============================================================
   Dot rail (fixed left progress dots)
   ============================================================ */
.rail {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rail button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.18);
  transition: background 0.25s ease, transform 0.25s ease;
  position: relative;
}
.rail button:hover { background: rgba(10, 10, 10, 0.45); transform: scale(1.3); }
.rail button.is-active { background: var(--ink); transform: scale(1.35); }
.rail button::after {
  content: attr(data-label);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rail button:hover::after { opacity: 0.6; }

@media (max-width: 1180px) { .rail { display: none; } }

/* ============================================================
   AI lead assistant (replaces the old passive chat widget)
   ============================================================ */
.ai__bubble {
  position: fixed;
  pointer-events: auto;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  /* Was 56px on a near-black ground. Slightly larger because it is the only
     always-present control on the site and a mouse or thumb should not have
     to find it precisely; green because the black bubble read as a utility
     widget rather than the offer to talk to somebody. */
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.18);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease,
    box-shadow 0.25s ease;
}
.ai__bubble svg { width: 27px; height: 27px; }
/* Darker green rather than a different hue, so the hover still reads as the
   same control. --ok is #2f7d43; this is the same green taken down a step. */
.ai__bubble:hover {
  transform: scale(1.06);
  background: #26663a;
  box-shadow: 0 8px 26px rgba(10, 10, 10, 0.24);
}
/* The unread dot was red on black; on green it needs a light ring that reads
   as a separate object rather than a red notch in the button. */
.ai__dot { border-color: #fff; }
.ai__dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
}

/* The root is a NON-VISUAL positioning shell.
   It deliberately carries no opacity, visibility, transform or pointer-events.
   It used to hide itself when closed, and the launcher button is a CHILD of
   this element — so the button was invisible and could not be clicked until the
   panel had already been opened some other way. The open/closed states now
   apply to the panel only, and the bubble is always present and always
   clickable. */
.ai {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 121;
  width: min(378px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  /* transparent to clicks: only the panel and the bubble should ever take one */
  pointer-events: none;
}

.ai__panel {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
/* The panel is a layout shell that fills the container. Without this rule it took
   no part in the flex sizing, so a long conversation grew past the viewport and
   the message log could not scroll. */
.ai__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  pointer-events: auto;
}

/* The bubble is a sibling of the panel and stays visible either way, so the
   chat can always be reopened with one click. */
.ai__bubble { pointer-events: auto; }

.ai.is-open, .ai:has(.ai__panel.is-open),
.ai.is-open .ai__panel, .ai__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ai__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--ink);
  color: #fff;
  flex: none;
}
.ai__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.82rem;
  flex: none;
}
.ai__id { display: flex; flex-direction: column; line-height: 1.25; }
.ai__id b { font-size: 0.88rem; letter-spacing: -0.01em; }
.ai__id small { font-size: 0.7rem; color: var(--tx-inv-3); }
.ai__close {
  margin-left: auto;
  color: var(--tx-inv-2);
  font-size: 1.35rem;
  line-height: 1;
  padding: 4px 6px;
}
.ai__close:hover { color: #fff; }

.ai__log {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  background: var(--paper);
}
.ai__msg {
  font-size: 0.83rem;
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: 14px;
  max-width: 88%;
  overflow-wrap: anywhere;
}
.ai__msg--bot {
  background: #fff;
  border: 1px solid var(--line);
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
.ai__msg--you, .ai__msg--user {
  background: var(--ink);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.ai__msg em { font-style: italic; opacity: 0.75; }

/* the status line in the header ("Online — ask me anything") */
.ai__id i { font-style: normal; font-size: 0.7rem; color: var(--tx-inv-3); }

/* typing indicator */
.ai__typing p { display: flex; gap: 4px; align-items: center; }
.ai__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tx-3);
  animation: aiDot 1.2s infinite ease-in-out;
}
.ai__typing span:nth-child(2) { animation-delay: 0.15s; }
.ai__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiDot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ---- listing results, built from our own data ---------------------------- */
.ai__cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  max-width: 100%;
}
.ai__card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.ai__card:hover { transform: translateX(2px); border-color: var(--line-2); }
.ai__card-body { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.ai__card-body b { font-size: 0.8rem; grid-column: 1; }
.ai__card-meta { font-size: 0.7rem; color: var(--tx-3); grid-column: 1; }
.ai__card-price {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- inline contact capture --------------------------------------------- */
.ai__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  align-self: stretch;
}
.ai__contact label { display: flex; flex-direction: column; gap: 3px; }
.ai__contact label > span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx-3); }
.ai__contact input[type="text"],
.ai__contact input[type="email"],
.ai__contact input[type="tel"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--paper);
}
.ai__contact input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #fff; }
.ai__consent { flex-direction: row !important; align-items: flex-start; gap: 8px; }
.ai__consent input { margin-top: 2px; flex: none; }
.ai__consent > span { font-size: 0.66rem !important; line-height: 1.5; text-transform: none !important; letter-spacing: 0 !important; color: var(--tx-3) !important; }
.ai__contact .btn { align-self: flex-start; }
.ai__sent { font-size: 0.82rem; color: var(--tx-2); }

.ai__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 16px;
  flex: none;
  border-top: 1px solid var(--line);
  background: #fff;
  max-height: 168px;
  overflow-y: auto;
}
.ai__quick:empty { display: none; }
.ai__chip {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: 0.78rem;
  font-weight: 500;
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: left;
}
.ai__chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* chat input row (the old stacked contact-form variant is superseded) */
.ai__form {
  padding: 11px 13px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  background: #fff;
  flex: none;
}
.ai__form input[name="message"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.84rem;
  background: var(--paper);
}
.ai__form input[name="message"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: #fff;
}
.ai__form button[type="submit"] {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ai__form button[type="submit"]:hover { background: var(--accent-2); transform: scale(1.05); }
.ai__form button[type="submit"] svg { width: 19px; height: 19px; }
.ai__form button[type="submit"]:disabled { opacity: 0.5; cursor: default; transform: none; }

.ai__foot {
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--tx-3);
  padding: 9px 16px 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  flex: none;
}

@media (max-width: 560px) {
  .ai {
    left: 10px;
    right: 10px;
    bottom: 84px;
    width: auto;
    max-height: min(74vh, 560px);
  }
  .ai__bubble { right: 14px; bottom: 14px; width: 62px; height: 62px; }
  .ai__msg { max-width: 94%; }
}

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 116px; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07);
}

/* ---- Field type icons (address / phone) ----
   A small glyph so the two most-confused fields are distinguishable at a
   glance. The icon is absolutely positioned inside .field rather than wrapped
   around the input, because address-lookup.js appends its suggestion list to
   .field and needs the input to stay a direct child. */
.field--icon { position: relative; }

.field__ico {
  position: absolute;
  left: 14px;
  /* sits on the input's vertical centre — the label above it is ignored */
  bottom: 0;
  height: 47px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--tx-3);
  opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
  z-index: 1;
}
.field__ico svg { width: 16px; height: 16px; display: block; }

/* focused or filled: the icon becomes definite */
.field__ico.is-filled { color: var(--ink); opacity: 0.9; }
.field__ico.is-good { color: var(--ok); opacity: 1; }
.field__ico.is-bad { color: var(--warn); opacity: 1; }

/* the input needs room to the left of its text */
.field--icon input,
.field--icon textarea { padding-left: 40px; }

/* a textarea is taller than the input-height offset, so anchor the icon to its
   top instead of its middle */
.field--icon:has(textarea) .field__ico { bottom: auto; top: 16px; height: auto; }

/* keep the icon behind the suggestion list, which overlays the field */
.field--icon .addr-suggest { z-index: 5; }

/* ---- Validation feedback, shared by every form on the site ----
   Green confirms a field is correct. Amber appears only when something really
   needs attention — never red, because red is the brand colour here and would
   read as decoration rather than a warning. */
.field.is-good input,
.field.is-good select,
.field.is-good textarea {
  border-color: var(--ok-line);
  background: var(--ok-tint);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.field.is-good label { color: var(--ok); }

.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea {
  border-color: var(--warn-line);
  background: #fffdfa;
  box-shadow: 0 0 0 3px var(--warn-soft);
}

/* a small inline confirmation under a corrected field */
.field__ok {
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--ok);
  line-height: 1.4;
}
.field__ok:empty { display: none; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23101010' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  padding-right: 38px;
}
.field--inv input,
.field--inv select,
.field--inv textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-inv-2);
  color: #fff;
}
.field--inv input::placeholder, .field--inv textarea::placeholder { color: var(--tx-inv-3); }
.field--inv label { color: var(--tx-inv-3); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field--full { grid-column: 1 / -1; }

.form-note { font-size: 0.72rem; color: var(--tx-3); line-height: 1.55; }

/* pre-filled from a previous form — visible so it never feels like magic.
   Blue, not red: being helpful is not a warning, and red is the brand colour. */
.is-prefilled {
  background: var(--info-tint);
  border-color: var(--info-line);
}
.is-prefilled:focus {
  background: #fff;
  border-color: var(--ink);
}
/* a prefilled field the visitor has already made valid reads green instead */
.field.is-good .is-prefilled,
.is-prefilled.is-good {
  background: var(--ok-tint);
  border-color: var(--ok-line);
}

/* opt-in sign-in control — browsing is open, this is an upsell */
.hdr-signin {
  background: none;
  border: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tx-2);
  cursor: pointer;
  border-radius: 999px;
  transition: color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.hdr-signin:hover { color: var(--tx-1); background: var(--bg-2); }
.hdr-signin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1080px) { .hdr-signin { display: none; } }
/* signed in: the account chip replaces "Sign in", on one line with Book Now */
@media (min-width: 961px) { .header__cta:has(.account) { display: flex; align-items: center; gap: 12px; } }
.header__cta:has(.account) .hdr-signin { display: none; }

/* form failure path (Doc 3): retry + a human contact, never a dead end.
   Amber, not red: this is our problem to fix, not the visitor's mistake. */
.form-fail {
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--warn);
}
.form-fail.is-on { display: flex; }
.form-fail strong { font-size: 0.88rem; }
.form-fail span { color: var(--tx-2); font-size: 0.8rem; }
.form-fail .btn { margin-top: 2px; }

/* Success reads light green — it was brand red, which looked like a warning. */
.form-ok {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--ok-tint);
  border: 1px solid var(--ok-line);
  color: var(--ok);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size: 0.85rem;
  font-weight: 500;
}
.form-ok.is-on { display: flex; }
.form-ok svg { flex: none; }

/* ============================================================
   Instant value range (home-value.html)
   Every appearance of the figure is labelled an estimate, and the
   basis is always visible — see assets/js/value-estimate.js.
   ============================================================ */
.value-block {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--sh-md);
}

.value-result__figure {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 10px 0 8px;
}

.value-result__basis {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--tx-2);
}

.value-result__assumptions {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 0.78rem;
  color: var(--tx-3);
}
.value-result__assumptions summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tx-2);
}
.value-result__assumptions ul {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  line-height: 1.5;
}

/* Honest refusal: no number available, so say why. */
.value-note {
  display: grid;
  gap: 8px;
}
.value-note strong { font-size: 0.95rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .value-block { scroll-behavior: auto; }
}

/* ============================================================
   Scheduling picker (schedule.html)
   ============================================================ */
.sched {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
}
.sched--times { margin-top: 18px; }

.sched__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sched__head .h4 { margin: 0; }
.sched__nav { display: flex; gap: 6px; }
.sched__nav .ico-btn { width: 34px; height: 34px; }

/* ---- days ---- */
.sched__days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sched__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.sched__day:hover { border-color: var(--ink); transform: translateY(-1px); }
.sched__dow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.sched__num { font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--ink); }
.sched__mon { font-size: 0.62rem; color: var(--tx-3); }
.sched__day.is-on {
  border-color: var(--ink);
  background: var(--ink);
}
.sched__day.is-on .sched__dow,
.sched__day.is-on .sched__mon { color: var(--tx-inv-2); }
.sched__day.is-on .sched__num { color: #fff; }

/* ---- times ---- */
.sched__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.sched__slot {
  padding: 11px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.sched__slot:hover { border-color: var(--ink); }
.sched__slot.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* nudge when someone submits without choosing */
.sched__days.is-nudge,
.sched__times.is-nudge {
  animation: sched-nudge 0.42s ease 2;
  outline: 2px solid var(--warn-line);
  outline-offset: 6px;
  border-radius: var(--r-sm);
}
@keyframes sched-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---- chosen slot summary ---- */
.sched__picked {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.sched__picked-ico {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--ok-soft);
  color: var(--ok);
  display: grid;
  place-items: center;
}
.sched__picked-ico svg { width: 18px; height: 18px; }
.sched__picked strong { display: block; font-size: 0.88rem; color: var(--ink); }
.sched__picked span { font-size: 0.78rem; color: var(--tx-2); }

@media (max-width: 560px) {
  .sched { padding: 16px; }
  .sched__days { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .sched__day { padding: 10px 2px; }
  .sched__num { font-size: 1rem; }
  .sched__times { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Filter bar (listings page)
   ============================================================ */
.filters {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 18px;
  position: sticky;
  top: 16px;
  z-index: 40;
}
.filters__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.filters__more {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.filters__result { font-size: 0.82rem; color: var(--tx-2); margin-left: auto; }

.filters__more .micro { flex: none; }
.filters__more .micro:not(:first-child) { margin-left: clamp(10px, 1.6vw, 20px); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: 0.78rem;
  font-weight: 500;
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.empty {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

/* ============================================================
   Property detail
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: 2.05fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  height: clamp(340px, 52vh, 520px);
}
.gallery__main {
  grid-row: span 2;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  background: var(--mist-2);
  cursor: zoom-in;
}
.gallery__thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  background: var(--mist-2);
  cursor: zoom-in;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery__main:hover img, .gallery__thumb:hover img { transform: scale(1.05); }
/* Fewer than three photos (common for new MLS listings): no empty tiles. */
.gallery.gallery--single { grid-template-columns: 1fr; }
.gallery.gallery--single:has(.gallery__thumb) { grid-template-columns: 2.05fr 1fr; }
.gallery.gallery--single .gallery__thumb { grid-row: span 2; }

/* MLS attribution (CMLS IDX rule 6) and the feed disclaimer. */
.p-attrib {
  margin: 12px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--tx-2);
}
.p-attrib b { color: var(--ink); font-weight: 600; }
.p-attrib a { color: inherit; text-decoration: underline; }
.idx-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--tx-2);
}
.idx-disclaimer img { flex: none; width: 34px; height: 34px; opacity: 0.75; }
.idx-disclaimer p { margin: 0; max-width: 90ch; }

.gallery__more {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-list li {
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spec-list b { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.spec-list span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); }

.aside-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 20px;
}
.aside-card__agent { display: flex; align-items: center; gap: 13px; }
.aside-card__agent img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; }
.aside-card__agent b { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.aside-card__agent span { font-size: 0.74rem; color: var(--tx-3); }

.fact-rows { display: flex; flex-direction: column; }
.fact-rows li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.fact-rows li:last-child { border-bottom: 0; }
.fact-rows b { font-weight: 600; text-align: right; }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.phero {
  padding: clamp(120px, 15vh, 168px) 0 clamp(38px, 5vw, 62px);
  background: var(--paper);
}
.phero--dark { background: var(--ink); color: var(--tx-inv); }
.phero__row {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: end;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 20px;
}
.crumbs a:hover { color: var(--ink); }
.phero--dark .crumbs { color: var(--tx-inv-3); }
.phero--dark .crumbs a:hover { color: #fff; }

/* ============================================================
   Text + media split rows
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.4vw, 66px);
  align-items: center;
}
.split--rev .split__media { order: -1; }
.split__media { border-radius: var(--r-lg); overflow: hidden; background: var(--mist-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 4 / 4.4; }
.split__media--wide { aspect-ratio: 4 / 3; }

/* numbered process steps */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.step__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: var(--accent-deep);
  min-width: 2.6em;
}
.step__body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(18px, 2.6vw, 40px); align-items: start; }

/* feature list with check marks */
.ticks { display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; gap: 11px; font-size: 0.88rem; line-height: 1.55; color: var(--tx-2); }
.ticks svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-deep); }
.dark .ticks li, .on-dark .ticks li { color: var(--tx-inv-2); }

/* card grid generic */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.mini-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.mini-card__ico {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.mini-card__ico svg { width: 19px; height: 19px; color: var(--accent-deep); }
.dark .mini-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-inv);
}
.dark .mini-card p { color: var(--tx-inv-2); }

/* area tiles */
.area-tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.area-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.area-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.7) 100%);
}
.area-tile:hover img { transform: scale(1.06); }
.area-tile__body { padding: 20px; color: #fff; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.area-tile__name { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.area-tile__count { font-size: 0.72rem; opacity: 0.75; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.faq__q svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 24px; max-width: 72ch; color: var(--tx-2); font-size: 0.92rem; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.09s; }
[data-reveal][data-delay="2"] { transition-delay: 0.18s; }
[data-reveal][data-delay="3"] { transition-delay: 0.27s; }
[data-reveal][data-delay="4"] { transition-delay: 0.36s; }
[data-reveal][data-delay="5"] { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1120px) {
  .gateway__grid { grid-template-columns: repeat(3, 1fr); }
  .path { min-height: 210px; }
  .services { grid-template-columns: 1fr 1fr; }
  .services > *:nth-child(3) { margin-top: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Keep the first card row clear of the browser's lazy-load buffer on phones.
   Cards sitting just below the fold preload and steal bandwidth from the LCP
   image; this guarantees the hero gets the connection first. */
@media (max-width: 960px) {
  /* ---- scrolling performance on phones ---------------------------------
     Blurred (backdrop-filter) layers force a full-layer recomposite on every
     scroll frame. Replacing them with solid translucent fills keeps the same
     look at a fraction of the cost. */
  .nav-pill,
  .account__btn,
  .burger,
  .hero__socials a,
  .hotspot__card,
  .hotspot__dot,
  .ico-btn--inv,
  .p-card__fav,
  .chat-panel,
  .filters,
  .account__menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-pill { background: rgba(250, 249, 247, 0.96); }
  .account__btn { background: rgba(250, 249, 247, 0.96); }
  .burger { background: rgba(250, 249, 247, 0.96); }
  .hero__socials a { background: rgba(16, 16, 16, 0.62); }
  .hotspot__card { background: rgba(16, 16, 16, 0.55); }
  .hotspot__dot { background: rgba(255, 255, 255, 0.3); }
  .ico-btn--inv { background: rgba(16, 16, 16, 0.6); }
  .p-card__fav { background: rgba(16, 16, 16, 0.45); }

  /* promote only what actually animates, and only while it animates */
  [data-reveal].is-in { will-change: auto; }

  .hero + .section { padding-top: clamp(88px, 12vw, 120px); }

  .header { padding: 18px var(--gut); }
  .nav-pill, .header__cta { display: none; }
  .burger { display: flex; }

  .hero__stage { min-height: min(78vh, 640px); margin: 10px var(--gut) 0; }
  .hero__kicker { position: static; padding: 0 clamp(24px, 3vw, 44px); margin-top: 16px; }
  .hero__word { padding-top: 88px; white-space: normal; text-align: left; padding-left: clamp(24px,3vw,44px); text-align: left; }
  .hero__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    min-width: 0;
  }
  .hero__socials {
    position: static;
    flex-direction: row;
    padding: 0 clamp(24px, 3vw, 44px) 4px;
  }
  .hero__stats { width: 100%; justify-content: space-between; }
  .hotspot { display: none; }

  .sec-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .sec-head__aside { align-items: flex-start; }
  .split, .split--rev .split__media { grid-template-columns: 1fr; order: 0; }
  .split__media { order: 0 !important; }
  .detail-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1.6fr 1fr; height: auto; }
  .gallery__main { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .gallery__thumb { aspect-ratio: 4 / 3; }
  .gallery.gallery--single,
  .gallery.gallery--single:has(.gallery__thumb) { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery.gallery--single .gallery__main { grid-column: auto; }
  .gallery.gallery--single .gallery__thumb { grid-row: auto; aspect-ratio: 16 / 10; }
  .insight__body { margin-left: 0; }
  .insight__thumbs { bottom: auto; top: 16px; }
  .insight__body { bottom: 16px; }
  .insight { aspect-ratio: 4 / 3.6; }
  .insight__nav { bottom: 16px; }
  .tst { flex: 0 0 86vw; grid-template-columns: 1fr; }
  .tst__media { aspect-ratio: 16 / 9; }
  .filters { position: static; }
  .filters__row { grid-template-columns: 1fr 1fr; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .step__body { grid-template-columns: 1fr; gap: 10px; }
    /* minmax(0,1fr), NOT bare 1fr: a bare fr track keeps an auto
       minimum, so it still refuses to go below its content and the
       newsletter paragraph hung 11px off the right edge at 320px. */
    .footer__news { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step__num { min-width: 0; }
}

/* ============================================================
   iOS input zoom
   ------------------------------------------------------------
   iOS Safari auto-zooms the page when a focused text field has a
   font-size below 16px, and it does not reliably zoom back out — the
   visitor ends up stuck on a magnified page. Every field on this site
   was 0.82–0.88rem, so the whole site was affected, not just the chat.

   16px is the documented threshold: at or above it iOS leaves the
   viewport alone. The bump applies only on small screens or coarse
   pointers, and only to text controls, so the desktop design is
   unchanged.

   Note: `maximum-scale=1` / `user-scalable=no` in the viewport meta
   would also stop the zoom, but it removes pinch-zoom for everyone —
   a WCAG 1.4.4 failure. Fixing the font size treats the cause.
   ============================================================ */
@media (max-width: 820px), (pointer: coarse) {
  /* Each selector matches — or exceeds — the specificity of the rule it
     overrides, so these cannot be silently beaten by the design rules
     further up the file. */
  .field input,
  .field select,
  .field textarea,
  .ai__contact input[type="text"],
  .ai__contact input[type="email"],
  .ai__contact input[type="tel"],
  .ai__form input[name="message"],
  .footer__field input,
  .adm-top input[type="search"],
  .filters input,
  .filters select {
    font-size: 1rem;
  }
}

/* ============================================================
   Hero lead capture (selling / buying / rentals / manage-property)
   ------------------------------------------------------------
   The headline runs the full width of the hero with no <br> in it, and
   the capture form sits directly underneath: address, then phone beside
   it. Deliberately above the fold — the visitor can hand over the one
   detail that matters without scrolling.
   ============================================================ */
.hero-lead { display: grid; gap: clamp(18px, 2.4vw, 26px); }

.hero-lead__title {
  max-width: none;      /* "straight across" — never constrained to a column */
}

.hero-lead__form { display: grid; gap: 10px; }

.hero-lead__form .btn { align-self: start; }

.hero-lead__row {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.hero-lead__row .field { min-width: 0; }
.hero-lead__row .btn { height: 48px; white-space: nowrap; }

/* Choose the row explicitly.
   The grid declares three columns (address, phone, button) but the consent
   checkbox is a fourth child sitting between the phone field and the button.
   With auto-placement it landed in the third column — the `auto` track meant
   for the button — and because an `auto` track sizes to its content it took
   1120px. The two `minmax(0, …fr)` input tracks then had nothing left and
   resolved to 0px, so the address and phone fields collapsed to zero width
   and the button wrapped into a zero-width cell and was clipped.

   Measured before the fix, on all four pages that use this form:
   grid-template-columns 0px 0px 1120px, inputs 0px, button 43px.

   Placing each child explicitly removes the ambiguity: fields in columns 1
   and 2, button in column 3, consent spanning the full width on its own
   second row beneath them. Scoped to the desktop breakpoint because below
   860px the row is a single column and these line numbers do not exist. */
@media (min-width: 861px) {
  .hero-lead__row .field:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero-lead__row .field:nth-child(2) { grid-column: 2; grid-row: 1; }
  .hero-lead__row .btn { grid-column: 3; grid-row: 1; }
  .hero-lead__row .auth__check { grid-column: 1 / -1; grid-row: 2; }
}

.hero-lead__meta { display: grid; gap: 14px; }
/* The supporting line should not measure wider than is comfortable to read. */
.hero-lead__meta .lead { max-width: 62ch; }

@media (max-width: 860px) {
  .hero-lead__row { grid-template-columns: 1fr; }
  .hero-lead__row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 700px) {
  .p-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .scroller { grid-auto-columns: 78vw; }
  /* two-up compact tiles: four full-width service blocks cost ~3.6 screens */
  .gateway__grid { grid-template-columns: 1fr; gap: 10px; }
  .path { min-height: 0; padding: 16px; gap: 10px; }
  .path__ico { width: 36px; height: 36px; }
  .path__ico svg { width: 17px; height: 17px; }
  .path__label { font-size: 1rem; }
  .path__desc { font-size: 0.76rem; }
  .services { grid-template-columns: 1fr 1fr; gap: 14px; }
  .services > *:nth-child(2) { margin-top: 0; }
  .svc__media { aspect-ratio: 4 / 3.4; border-radius: var(--r-md); }
  .svc__title { font-size: 0.92rem; }
  .svc .body-sm { font-size: 0.78rem; line-height: 1.5; }
  .sec-bar .micro { display: none; }
  .cards-3, .cards-4, .cards-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 160px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__word { white-space: normal; }
  .filters__row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta { margin: 0 var(--gut); border-radius: var(--r-lg); }
  .phero__row { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}

@media (max-width: 460px) {
  .p-grid { grid-template-columns: 1fr; }
  /* keep stats 2-up: four stacked tiles added ~1.5 screens of scroll on phones */
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { min-height: 140px; }
  .stat__num { font-size: 2.1rem; }
  .hero__stats { gap: 22px; }
}

/* ============================================================
   ADDRESS AUTOCOMPLETE
   ============================================================
   The suggestion list under a property-address field. Styled from
   the same tokens as the rest of the site so a Google result looks
   like it belongs here rather than like a bolted-on widget.
   ============================================================ */

.addr-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* JS caps this to the space actually on screen; the list scrolls inside. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.16);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.addr-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 11px 14px;
  font: inherit;
  border-bottom: 1px solid var(--line);
  transition: background 0.14s ease;
}

.addr-suggest__item:last-child { border-bottom: 0; }

.addr-suggest__item:hover,
.addr-suggest__item.is-active {
  background: var(--accent-soft);
}

/* The touch target matters more than density on a phone. */
@media (hover: none) {
  .addr-suggest__item { padding: 14px; }
}

.addr-suggest__main {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.addr-suggest__sub {
  display: block;
  font-size: 0.76rem;
  color: var(--tx-3);
  line-height: 1.4;
  margin-top: 1px;
}

/* The field is a text input with a list attached; make that visible
   to a screen reader without changing how it looks. */
input[data-addr-ready] { position: relative; }


/* When the field sits near the bottom of the screen the list opens upward
   instead, otherwise it would run off the viewport with nothing reachable. */
.addr-suggest--up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* ============================================================
   CHAT OPTIONS — the row of clickable replies
   ------------------------------------------------------------
   Every bot reply now offers options, so this row is the primary
   way the conversation moves. It has to read as clickable and it
   has to work with a thumb.
   ============================================================ */
.ai__quick {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* The chips are one row that can be swiped; wrapping them into three
     stacked rows would push the text box off a phone screen. */
  scroll-snap-type: x proximity;
}
.ai__quick::-webkit-scrollbar { display: none; }
.ai__quick:empty { display: none; }

.ai__chip {
  flex: none;
  scroll-snap-align: start;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  /* A finger needs 44px. These are the main interaction in the panel. */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ai__chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ai__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .ai__chip { min-height: 44px; font-size: 0.85rem; }
}

/* ============================================================
   QUICK CAPTURE PAGE — paid social landing
   ------------------------------------------------------------
   Redesigned so it reads as a licensed brokerage rather than an
   anonymous form. What makes a lead form look like a scam is
   anonymity: no name, no face, no office, no way to check the
   business exists. So the page leads with all four, using real
   details from the client's own site.

   Nothing here is a manufactured signal — no countdown, no "3
   people viewing", no stock photo, no invented rating count.
   Those are the tells, and adding one would undo the rest.
   ============================================================ */
.quick-hero { padding-top: max(112px, 14vh); padding-bottom: clamp(34px, 5vw, 64px); }

.quick-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(22px, 3.6vw, 52px);
  align-items: start;
}

/* ---------- the trust column ---------- */
.quick-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.quick-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2f9e5f;
  flex: none;
}

.quick-h1 {
  margin: 14px 0 14px;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
}
.quick-lede {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tx-2);
  max-width: 44ch;
}

/* The agent card. A face and a title do more than any badge, which is
   why it sits above the bullet list rather than below it. */
.quick-agent {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(0,0,0,0.04));
  max-width: 420px;
}
.quick-agent img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: none;
  background: var(--paper);
}
.quick-agent b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; }
.quick-agent span { display: block; font-size: 0.78rem; color: var(--tx-3); margin-bottom: 3px; }
.quick-agent a {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.quick-agent a:hover { text-decoration: underline; }

.quick-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.quick-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--tx-2);
}
.quick-points svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: #217a45; }
.quick-points b { color: var(--ink); }

.quick-review { margin: 22px 0 0; font-size: 0.8rem; }
.quick-review a { color: var(--tx-3); }

/* ---------- the form ---------- */
.quick-form { display: flex; flex-direction: column; gap: 13px; }
.quick-opt { font-weight: 400; color: var(--tx-3); font-size: 0.78rem; }

.wizard__title { margin: 0; font-size: 1.22rem; letter-spacing: -0.015em; }
.wizard__sub { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--tx-2); }

/* Reassurance under the submit button: says where the data goes, which is
   the question somebody about to hand over a phone number is asking. */
.wizard__assure {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--tx-3);
}
.wizard__assure svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.wizard__assure a { color: var(--tx-3); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .quick-wrap { grid-template-columns: 1fr; gap: 26px; }
  .quick-lede { max-width: none; }
  .quick-agent { max-width: none; }
  .quick-h1 { font-size: clamp(1.55rem, 6vw, 2rem); }
}

/* ============================================================
   QUICK CAPTURE WIZARD
   ============================================================ */
.wizard { gap: 16px; }

.wizard__steps {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wizard__steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  /* NOT flex:1 — that stretched each item and left the label floating away
     from its own number. The connector rule is what should take up the
     slack, not the item. */
  flex: none;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--tx-3);
}
.wizard__steps li i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard__steps li span {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--line);
  color: var(--tx-2);
  font-weight: 800;
  font-size: 0.72rem;
}
/* The connector between steps, drawn as a rule rather than an element.
   flex:1 here is what distributes the leftover width evenly. */
.wizard__steps li + li::before {
  content: "";
  flex: 1 1 12px;
  min-width: 10px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.wizard__steps li.is-on { color: var(--ink); font-weight: 700; }
.wizard__steps li.is-on span { background: var(--accent); color: #fff; }
.wizard__steps li.is-done span { background: #2f9e5f; color: #fff; }
.wizard__steps li.is-done::before,
.wizard__steps li.is-on::before { background: #2f9e5f; }

.wizard__panel { display: none; flex-direction: column; gap: 13px; }
.wizard__panel.is-on { display: flex; }
.wizard__panel h2 { margin: 0; }
.wizard__panel > p:first-of-type { margin: 0; color: var(--tx-2); }

/* One large button. On a phone this is the only thing to aim at. */
.wizard__btn { justify-content: center; width: 100%; }
.wizard__nav { display: flex; gap: 10px; align-items: stretch; }
.wizard__nav .btn--outline { flex: 0 0 auto; }
.wizard__nav .wizard__btn { flex: 1 1 auto; }

/* Field-level error text. Hidden by default so the form is calm. */
.field__bad {
  display: none;
  margin: 5px 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: #b3261e;
}
.field__bad.is-on { display: block; }
.field.is-bad input,
.field.is-bad select { border-color: #b3261e; }

/* ---------- step 2 choices ---------- */
.choice { display: grid; gap: 9px; }
.choice__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 14px 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.choice__opt:hover { border-color: var(--ink); }
.choice__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The selected state is GREEN, using the project's existing --ok tokens.
   Green reads as confirmed and safe, which is what this page is trying to
   convey; the brand red reads as an alert and made a chosen answer look
   like a warning. The tokens are already contrast-checked (--ok is 5.1:1
   on white) rather than a green picked by eye. */
.choice__opt.is-on {
  border-color: var(--ok);
  background: var(--ok-tint);
  box-shadow: inset 0 0 0 1px var(--ok-line);
}
.choice__ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
}
.choice__opt.is-on .choice__ico { background: var(--ok); color: #fff; }
.choice__ico > svg { width: 19px; height: 19px; }

/* The tick appears only once a tile is chosen. Without `display:none` here
   it rendered as a second icon on every tile — the selector above was
   sizing any svg inside the tile, including this one. */
.choice__tick {
  margin-left: auto;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: var(--ok);
  color: #fff;
}
.choice__tick svg { width: 13px; height: 13px; }
.choice__opt.is-on .choice__tick { display: grid; }
.choice__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__txt b { font-size: 0.92rem; }
.choice__txt i { font-style: normal; font-size: 0.78rem; color: var(--tx-3); }

/* ---------- step 3 ---------- */
.wizard__panel--done { align-items: center; text-align: center; gap: 11px; padding: 12px 0 4px; }
.wizard__tick {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf7ee;
  color: #217a45;
  margin-bottom: 2px;
}
.wizard__tick svg { width: 28px; height: 28px; }

@media (max-width: 480px) {
  /* Labels are too wide for three steps on a narrow screen; the numbered
     circles carry the meaning on their own. */
  .wizard__steps li i { display: none; }
  .wizard__steps li { flex: none; }
  .wizard__steps li + li::before { width: 28px; }
  .choice__opt { padding: 13px; min-height: 64px; }
  .wizard__nav { flex-direction: column-reverse; }
  .wizard__nav .btn--outline { width: 100%; }
}

/* ============================================================
   QUICK PAGE — calming the call to action
   ------------------------------------------------------------
   The accent red is the client's own brand colour, used on every
   page (including the header's Book Now), so it stays. What made
   it read as high-pressure here was everything around it: a heavy
   glow, a glow on hover, and full-width saturation on the largest
   element on the page.

   None of those are brand. Removing them keeps the palette
   recognisable while the button stops shouting.
   ============================================================ */
.quick-form .btn--accent,
.quick-form .btn--accent:hover {
  box-shadow: none;
}
.quick-form .btn--accent {
  /* Slightly darker than the site default at rest: less of a "click me
     now" flare, still unmistakably the primary action. */
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.quick-form .btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* A pressed state, so the button feels like a control rather than an ad. */
.quick-form .btn--accent:active { transform: translateY(1px); }

/* The choice tiles are the real decision on this screen. Giving them a
   crisper resting border lets the eye settle on them rather than on the
   button below. */
.choice__opt { border-color: rgba(10, 10, 10, 0.14); }
.choice__opt.is-on .choice__ico { background: var(--ok); color: #fff; }
.choice__opt.is-on .choice__txt b { color: #1d5c33; }

/* ============================================================
   QUICK PAGE ON A PHONE
   ------------------------------------------------------------
   Measured by rendering the page in a real 390px viewport rather
   than a cropped desktop layout. Two problems showed up:

     1. dead space between the header and the first line of copy,
        because a max() top pad sized for a 900px-tall screen is
        far too generous on a phone
     2. the form did not start until about 880px down, which is
        below the fold. For paid social traffic that is the whole
        ballgame: the thing they came to do was off-screen, behind
        four paragraphs and a credential list.

   So on a phone the credentials compress to a single line ABOVE
   the form — enough to say a real, licensed person is behind it —
   and the full list moves BELOW the form, where it still reassures
   anyone who reads on before typing.
   ============================================================ */
@media (max-width: 640px) {
  .quick-hero { padding-top: 84px; padding-bottom: 30px; }
  .quick-wrap { gap: 18px; }

  .quick-h1 { font-size: 1.45rem; margin: 8px 0 8px; line-height: 1.16; }
  .quick-lede { font-size: 0.88rem; margin-bottom: 14px; }

  /* One compact line: face, name, title, number. */
  .quick-agent { padding: 9px 11px; gap: 10px; margin-bottom: 12px; border-radius: 12px; }
  .quick-agent img { width: 44px; height: 44px; }
  .quick-agent b { font-size: 0.9rem; }
  .quick-agent span { font-size: 0.72rem; margin-bottom: 1px; }
  .quick-agent a { font-size: 0.82rem; }

  /* Measured at 390x844: the form began at 424px and Continue sat at 788px,
     just under the fold. The lede says what the agent card and the form
     already say, so on a phone it is the cheapest thing to drop — that is
     ~50px straight back, which is the difference between seeing the button
     and having to hunt for it. */
  .quick-lede { display: none; }

  /* The full credential list is reassurance, not the pitch, so it reads
     after the form on a small screen. `order` does this without moving
     the markup, so the heading order stays sensible for a screen reader. */
  .quick-wrap { display: flex; flex-direction: column; }
  .quick-intro { display: contents; }
  .quick-eyebrow { order: 1; }
  .quick-h1 { order: 2; }
  .quick-lede { order: 3; }
  .quick-agent { order: 4; }
  .quick-form { order: 5; }
  .quick-points { order: 6; margin-top: 4px; }
  .quick-review { order: 7; }

  .quick-points li { font-size: 0.82rem; }
  .quick-points { gap: 10px; }

  /* Tighten the tiles so the primary button clears the fold rather than
     having its lower edge clipped by a few pixels. */
  .choice { gap: 7px; }
  .choice__opt { padding: 11px 12px; min-height: 58px; }
  .choice__txt i { font-size: 0.74rem; }
  .wizard__title { margin-bottom: -2px; }

  /* The form is the reason they are here. */
  .wizard__title { font-size: 1.12rem; }
  .wizard__sub { font-size: 0.82rem; }
  .wizard__steps { margin-bottom: 2px; }
}

/* Below 400px the step labels are gone already; tighten once more. */
@media (max-width: 400px) {
  .quick-hero { padding-top: 76px; }
  .quick-h1 { font-size: 1.38rem; }
}

/* ============================================================
   Sticky primary action on a phone
   ------------------------------------------------------------
   The Continue button measured 1319px down at the start — the
   visitor had to scroll past four options to act, and the thing
   they came to do was off-screen. On paid traffic that is where
   the lead is lost.

   The button now pins to the bottom of the viewport once it would
   otherwise be below it, with the card's background behind it so
   options scroll underneath cleanly rather than showing through.
   ============================================================ */
@media (max-width: 640px) {
  .quick-form .wizard__btn {
    position: sticky;
    bottom: 0;
    z-index: 3;
    /* A hard edge above the button, so it reads as a bar and not as a
       button that happens to be floating over the options. */
    box-shadow: 0 -10px 16px -4px #fff, 0 0 0 10px #fff;
    margin: 0 -10px;
    width: calc(100% + 20px);
    padding-left: 10px;
    padding-right: 10px;
  }
  .quick-form .wizard__nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
    box-shadow: 0 -10px 16px -4px #fff;
    padding-top: 6px;
  }
  /* Enough room under the last option that the sticky bar never covers it. */
  .quick-form .choice { padding-bottom: 4px; }
}

/* ============================================================
   Split rows on a narrow screen
   ------------------------------------------------------------
   .split is a two-column grid with no responsive rule, and grid
   children default to min-width:auto — so neither column could
   shrink below the width of its own content. At 320px that pushed
   content ~31px past the right edge on contact, and the same
   pattern sat in every other page that uses a split row.

   This is NOT caused by the larger mobile body text: measured at
   both 15px and 17px the overflow at 320px was byte-for-byte
   identical. It was simply never noticed, because 320px is only
   the oldest phones still in use — and they are still in use.
   ============================================================ */
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  /* Without this the single column still refuses to shrink, because a grid
     item's automatic minimum size is its content. */
  .split > * { min-width: 0; }
  .split__media, .split__media--tall, .split__media--wide { aspect-ratio: 4 / 3; }
  .split--rev .split__media { order: 0; }
}

/* The footer newsletter row, which also held a two-column min and could not
   shrink past its content on the narrowest phones. */
@media (max-width: 420px) {
  .footer__news-form { flex-wrap: wrap; }
  /* The FORM is the flex item that refuses to shrink, not its children. As a
     flex item it defaults to min-width:auto, so it held its 313px intrinsic
     width inside a 284px column and hung 11px off the right edge — while the
     children measured min-width 0px and looked innocent. Setting it on the
     children was the wrong target. */
  .footer__news-form { min-width: 0; flex: 1 1 100%; }
  .footer__field { min-width: 0; width: 100%; }
}

/* The track, not the child.
   `.footer__news` is a grid, and its implicit column is `auto` — which sizes
   itself to fit its content. So the column measured 312px inside a 284px
   space and pushed the newsletter paragraph 11px past the right edge on every
   page that has a footer, which is all of them. Setting `min-width: 0` on the
   CHILDREN does not help here, because the problem is the track: an `auto`
   track will always grow to fit content that cannot shrink. The column has to
   be told it may be smaller than its content, which is what minmax(0, 1fr)
   does and what bare `1fr` does not. */
.footer__top > * { min-width: 0; }


/* ---------- assistant teaser (phones) ----------
   Replaces the unasked-for full panel on small screens: one line beside the
   chat button, tap to open, × to never show it again. */
.ai__teaser {
  position: fixed; z-index: 122; pointer-events: auto;
  right: 84px; bottom: max(24px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 104px);
  display: flex; align-items: center; gap: 2px;
  background: #fff; border-radius: 16px 16px 4px 16px;
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.18); border: 1px solid var(--line);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.ai__teaser.is-on { opacity: 1; transform: none; }
.ai__teaser-msg {
  border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 0.82rem/1.35 var(--f-body); color: var(--tx); padding: 10px 4px 10px 13px;
}
.ai__teaser-msg b { color: var(--accent-deep); white-space: nowrap; }
.ai__teaser-x { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: var(--tx-3); padding: 12px 11px; cursor: pointer; align-self: stretch; }
@media (prefers-reduced-motion: reduce) { .ai__teaser { transition: none; } }
@media (max-width: 760px) { .ai__teaser { right: 74px; bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100vw - 90px); } }

/* Property specs: three columns of 18px-padded cells left about 70px of text
   on a phone, so "Bathrooms" and "Residential" broke mid-word. Two columns. */
@media (max-width: 560px) {
  .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-list li { padding: 14px; }
  .spec-list span { letter-spacing: 0.05em; overflow-wrap: normal; word-break: normal; }
}

/* Label/value rows (calculator breakdowns, assumptions, method, specs).
   base.css sets `overflow-wrap: anywhere` on every li so a long email can
   never widen the page — but `anywhere` also lets flex shrink a label to a
   few letters wide, which is why phones showed "Bedro / om floor" and
   "Ra / ng / e". `break-word` still breaks a genuinely long word, without
   shrinking the label below its longest word. When label and value do not
   fit side by side, the value now drops to its own line instead. */
.fact-rows li, .fact-rows li *, .spec-list li, .spec-list li * { overflow-wrap: break-word; word-break: normal; }
.fact-rows li { flex-wrap: wrap; column-gap: 14px; row-gap: 3px; }
.fact-rows li > :first-child { flex: 1 1 9.5em; min-width: 0; }
.fact-rows li > b, .fact-rows li > :last-child:not(:first-child) { flex: 0 1 auto; margin-left: auto; min-width: 0; }

/* Header between the phone drawer (≤960px) and a wide screen: six nav links,
   Sign in and Book Now did not fit at 1024px, so Book Now ran off the edge. */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-pill a, .nav-pill__top { padding: 9px 9px; font-size: 0.74rem; }
  .header__cta .btn { padding-left: 16px; padding-right: 14px; }
}

/* Footer legal links were 14px tall on phones — too small to tap reliably. */
@media (max-width: 760px) {
  .footer__legal a { display: inline-block; padding: 8px 0; }
  .footer__mail { display: inline-block; padding: 6px 0; }
}

/* ---------- Talk to John (header chooser) ---------- */
.talk {
  position: fixed; z-index: 400; width: 300px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(10, 10, 10, .16);
  padding: 10px; transform-origin: top right;
  animation: talk-in .18s cubic-bezier(.2, .8, .2, 1);
}
.talk[hidden] { display: none; }
@keyframes talk-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.talk__head { display: flex; gap: 12px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.talk__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.talk__head b { display: block; font-size: .95rem; }
.talk__head span { display: block; font-size: .78rem; color: rgba(10, 10, 10, .6); margin-top: 2px; }
.talk__opt { display: flex; gap: 12px; align-items: center; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: inherit; }
.talk__opt:hover, .talk__opt:focus-visible { background: var(--paper); outline: none; }
.talk__opt svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.talk__opt b { display: block; font-size: .92rem; font-weight: 600; }
.talk__opt small { display: block; font-size: .78rem; color: rgba(10, 10, 10, .58); margin-top: 1px; }
.talk--sheet {
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; width: auto;
  transform-origin: bottom center; animation-name: talk-up;
}
@keyframes talk-up { from { opacity: 0; transform: translateY(16px); } }
.talk--sheet .talk__opt { padding: 14px 10px; }
@media (prefers-reduced-motion: reduce) { .talk, .talk--sheet { animation: none; } }

/* ---------- Listing page: Your numbers (PCS, rent it out later) ---------- */
.numbers { margin: 4px 0 18px; padding: 16px; border-radius: 16px; background: var(--paper); }
.numbers__rows { list-style: none; margin: 10px 0 0; padding: 0; }
.numbers__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .88rem; border-bottom: 1px solid var(--line); }
.numbers__rows li:last-child { border-bottom: 0; }
.numbers__rows li span { color: rgba(10,10,10,.62); }
.numbers__rows li.is-ok b { color: #1d6b27; }
.numbers__rows li.is-over b { color: #a33a00; }
.numbers__h { margin-top: 16px; font-weight: 600; font-size: .92rem; }
.numbers__big { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; margin-top: 4px; }
.numbers__big small { font-size: .9rem; font-weight: 500; margin-left: 2px; }
.numbers__fine { font-size: .78rem; line-height: 1.5; color: rgba(10,10,10,.6); margin-top: 6px; }
.numbers__link { display: inline; background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.numbers__pick { display: grid; gap: 10px; margin-top: 10px; }
.numbers__pick select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.numbers__pick label { display: flex; gap: 8px; align-items: center; font-size: .88rem; }

/* header heart: saved homes */
.hdr-saved { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 999px; color: var(--tx-1, #0a0a0a); text-decoration: none; font-size: .8rem; font-weight: 700; }
.hdr-saved[hidden] { display: none; }
.hdr-saved svg { width: 18px; height: 18px; color: var(--accent); fill: var(--accent); }
.hdr-saved:hover { background: var(--bg-2, rgba(10,10,10,.05)); }
.header--hero .hdr-saved, [data-variant="hero"] .hdr-saved { color: #fff; }
@media (min-width: 961px) { .header__cta { display: flex; align-items: center; gap: 4px; } }

/* ---------- Saved homes page ---------- */
.saved-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.saved-empty { display: grid; gap: 18px; justify-items: start; padding: 30px 0 10px; }
.saved-compare__scroll { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; }
.saved-compare__table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.saved-compare__table th, .saved-compare__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.saved-compare__table tr:last-child th, .saved-compare__table tr:last-child td { border-bottom: 0; }
.saved-compare__table thead th { font-weight: 700; background: var(--paper); }
.saved-compare__table thead th a { color: inherit; }
.saved-compare__table tbody th { font-weight: 500; color: rgba(10,10,10,.6); white-space: nowrap; width: 1%; }
.saved-compare__table td.is-best { font-weight: 700; }
.saved-compare__table td.is-best::after { content: " ✓"; color: #1d6b27; }
.saved-compare__table .is-ok { color: #1d6b27; font-weight: 600; font-size: .8rem; }
.saved-compare__table .is-over { color: #a33a00; font-weight: 600; font-size: .8rem; }
.saved-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); margin-top: 56px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--paper); }
@media (max-width: 860px) { .saved-ask { grid-template-columns: 1fr; } }

/* ---------- Listing page: What's special, Facts & features, map ---------- */
.pd { max-width: 66ch; }
.pd__h { font-weight: 700; font-size: 1rem; margin-top: 4px; }
.pd__tags { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd__tags li { padding: 7px 13px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; }
.pd__text { margin-top: 18px; position: relative; max-height: 8.4em; overflow: hidden; line-height: 1.68; color: rgba(10,10,10,.78); }
.pd__text p + p { margin-top: .8em; }
.pd__text:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(rgba(255,255,255,0), var(--paper-2, #fff)); pointer-events: none; }
.pd__text.is-open { max-height: none; }
.pd__more { margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pd__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.pd__more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.pf { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pf__g + .pf__g { border-top: 1px solid var(--line); }
.pf__g summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; font-weight: 700; }
.pf__g summary::-webkit-details-marker { display: none; }
.pf__g summary svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.pf__g summary small { margin-left: auto; font-weight: 500; font-size: .78rem; color: rgba(10,10,10,.5); }
.pf__g summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 2px 0 4px; transition: transform .2s; }
.pf__g[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pf__g summary:hover { background: var(--paper); }
.pf__g ul { list-style: disc; margin: 0; padding: 2px 18px 16px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; }
.pf__g li { font-size: .92rem; line-height: 1.45; }
.pf__g li::marker { color: rgba(10,10,10,.35); }
.pf__g li span { color: rgba(10,10,10,.6); }
.pf__g li span::after { content: ": "; }
.pf__g li b { font-weight: 600; }
.pf__all { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); background: var(--paper); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
@media (max-width: 700px) { .pf__g ul { grid-template-columns: 1fr; padding-left: 40px; } }
@media (prefers-reduced-motion: reduce) { .pf__g summary::after { transition: none; } }
.p-map { height: 340px; margin-top: 16px; border-radius: var(--r-md, 16px); overflow: hidden; border: 1px solid var(--line); z-index: 0; }
.p-map[hidden] { display: none; }
.p-map__pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ---------- Listing page, Zillow order ---------- */
.zl > * + * { padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.zl > [hidden] { display: none; }
.zl > .zt { border-top: 0; padding-top: 0; }
.zh { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -.02em; margin: 0 0 14px; }
.zsub { color: rgba(10,10,10,.62); margin: -6px 0 14px; font-size: .95rem; }
.zfine { font-size: .78rem; line-height: 1.5; color: rgba(10,10,10,.55); margin-top: 10px; }
/* "just an estimate" note: small, gray, out of the way */
.znote { margin-top: 10px; font-size: .72rem; line-height: 1.45; color: rgba(10,10,10,.45); }
.znote summary { list-style: none; cursor: pointer; }
.znote summary::-webkit-details-marker { display: none; }
.znote summary span { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.znote[open] summary span { display: none; }
.znote p { margin: 6px 0 0; }
.zest { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 8px; padding: 6px 12px; border-radius: 10px; background: #eef4fd; color: var(--ink); text-decoration: none; font-size: .88rem; }
.zest[hidden] { display: none; }
.zest span { color: var(--accent); font-weight: 700; }
.zt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zt__tile { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--paper); font-size: .95rem; min-height: 64px; }
.zt__tile svg { width: 26px; height: 26px; flex: none; color: rgba(10,10,10,.62); }
.za { margin-top: 18px; font-size: .9rem; color: rgba(10,10,10,.7); display: grid; gap: 4px; }
.za__stats b { color: var(--ink); }
.zbox .ztour__type { display: flex; gap: 8px; margin-bottom: 12px; }
.ztour__days { display: flex; align-items: center; gap: 6px; }
.ztour__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; padding: 2px; }
.ztour__track::-webkit-scrollbar { display: none; }
.ztour__day { flex: 0 0 96px; scroll-snap-align: start; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; display: grid; gap: 2px; text-align: center; }
.ztour__day small { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ztour__day[aria-pressed="true"] { border: 2px solid var(--ink); background: var(--paper); }
.ztour__arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ztour__time { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.ztour__go, .ztour__form { margin-top: 14px; width: 100%; justify-content: center; }
.ztour__form[hidden], .ztour__go[hidden] { display: none; }
.zo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.zo__card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.zo__card a { color: var(--accent); font-weight: 600; font-size: .88rem; }
.zv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zv__card { display: grid; gap: 6px; padding: 18px; border-radius: 12px; background: var(--paper); }
.zv__card span { color: rgba(10,10,10,.62); font-size: .88rem; }
.zv__card b { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; }
.zv__card small { font-size: .8rem; line-height: 1.45; color: rgba(10,10,10,.6); }
.ztable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ztable th, .ztable td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ztable th { font-weight: 700; }
.ztable td small { display: block; color: rgba(10,10,10,.55); font-size: .78rem; margin-top: 2px; }
.zp { display: grid; gap: 14px; }
.zp__head span { display: block; color: rgba(10,10,10,.62); font-size: .9rem; }
.zp__head b { font-family: var(--f-display); font-size: 1.9rem; letter-spacing: -.02em; }
.zp__bar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.zp__bar span { min-width: 4px; }
.zp__legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .85rem; }
.zp__legend li { display: grid; grid-template-columns: 10px auto; column-gap: 6px; align-items: center; }
.zp__legend i { width: 10px; height: 10px; border-radius: 50%; }
.zp__legend b { grid-column: 2; }
.zp__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.zp__inputs label { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; }
.zp__inputs input:not([type=checkbox]), .zp__inputs select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 500; font-size: .95rem; background: #fff; }
.zp__inputs small { font-weight: 500; color: rgba(10,10,10,.55); }
.zp__va { grid-column: 1 / -1; display: flex !important; gap: 8px; align-items: center; }
/* live here / rental switch in the payment calculator */
.zp__use { grid-column: 1 / -1; display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--mist); }
.zp__use button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: 600 .86rem/1 var(--f-body); color: rgba(10,10,10,.62); cursor: pointer; }
.zp__use button[aria-checked="true"] { background: var(--ink); color: #fff; }
/* property taxes: live here vs rental */
.ztax { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ztax__card { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--paper); }
.ztax__card span { color: rgba(10,10,10,.62); font-size: .88rem; }
.ztax__card b { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; }
.ztax__card small { font-size: .8rem; color: rgba(10,10,10,.6); }
.ztax__card.is-rent b { color: var(--accent-2); }
/* rent it out with Upside */
.zr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.zr__t td:last-child { text-align: right; white-space: nowrap; }
.zr__sum td { font-weight: 700; border-top: 2px solid var(--ink); }
.zr__ways { display: grid; gap: 10px; }
.zr__way { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--paper); }
.zr__way span { font-size: .88rem; color: rgba(10,10,10,.62); }
.zr__way b { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; }
.zr__way b.is-up { color: #1d6b3a; }
.zr__way b.is-down { color: var(--accent-2); }
.zr__way small { font-size: .78rem; line-height: 1.4; color: rgba(10,10,10,.6); }
@media (max-width: 700px) { .ztax, .zr { grid-template-columns: 1fr; } }
.zflood { font-size: 1rem; }
.zflood.is-high { color: #a33a00; font-weight: 600; }
.zmap__modes { display: flex; gap: 8px; margin-bottom: 4px; }
.zg { list-style: none; padding: 0; margin: 0; }
.zg li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; align-items: center; }
.zg a { color: var(--accent); font-size: .82rem; font-weight: 600; }
.zs { display: grid; gap: 10px; }
.zs__card { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.zs__card b { font-size: 1.05rem; }
.zs__card span { font-size: .82rem; color: rgba(10,10,10,.58); }
.zn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ze { display: flex; gap: 18px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--paper); }
.ze img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.ze__name { margin: 4px 0 8px; font-weight: 600; }
.ze__pts { margin: 0 0 14px; padding-left: 18px; font-size: .9rem; display: grid; gap: 3px; }
.ze__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.zbar { display: none; }
@media (max-width: 700px) {
  .zt, .zv, .zp__inputs, .zn { grid-template-columns: 1fr; }
  .zt { grid-template-columns: 1fr 1fr; }
  .zt__tile { padding: 12px; font-size: .86rem; }
  .ze { flex-direction: column; }
  .zbar { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
  .zbar .btn { justify-content: center; min-height: 52px; }
  .zbar .btn--accent { flex-direction: column; gap: 0; line-height: 1.15; }
  .zbar small { font-size: .72rem; font-weight: 500; opacity: .85; }
  body.has-zbar { padding-bottom: 84px; }
  body.has-zbar .chat-fab, body.has-zbar [class*="chat-launch"] { bottom: 96px; }
}
.zl, .zl > *, .ztour__days, .ztour__track { min-width: 0; }
.zl { max-width: 100%; }
.zp, .zp__inputs, .zp__inputs label { min-width: 0; }
.zp__inputs input:not([type=checkbox]), .zp__inputs select { width: 100%; min-width: 0; box-sizing: border-box; }
.zp { grid-template-columns: minmax(0, 1fr); }
.zp .btn, .ze .btn { white-space: normal; text-align: center; justify-content: center; }
.zbox .ms-chip, .zmap__modes .ms-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.zbox .ms-chip[aria-pressed="true"], .zmap__modes .ms-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.za__stats { display: flex; flex-wrap: wrap; gap: 0; font-size: 1rem; }
.za__stats > span:not([hidden]) + span:not([hidden])::before { content: "|"; margin: 0 12px; color: rgba(10,10,10,.25); }
.za__stats [hidden] { display: none; }

/* ============================================================
   Sell a Home: one short form (address, email, phone)
   ============================================================ */
.sq { padding-bottom: clamp(48px, 7vw, 96px); }
.sq__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(18px, 3vw, 34px); }
.sq__title { margin: 0; }
.sq__intro .lead { margin-top: 18px; max-width: 46ch; }
.sq__card { display: grid; gap: 16px; padding: clamp(20px, 2.6vw, 30px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 20px); box-shadow: 0 18px 48px rgba(10, 10, 10, 0.08); }
.sq__card .field input { height: 54px; font-size: 1.02rem; }
.sq__consent { font-size: 0.72rem; line-height: 1.45; color: var(--tx-2); }
.sq__go { justify-content: center; width: 100%; height: 56px; font-size: 1.02rem; }
.sq__note { margin: 0; font-size: 0.82rem; color: var(--tx-2); text-align: center; }
.sq__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sq__points { list-style: none; padding: 0; margin: clamp(36px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); border-top: 1px solid var(--line); padding-top: clamp(22px, 3vw, 32px); }
.sq__points li { display: grid; gap: 4px; }
.sq__points b { font-weight: 600; }
.sq__points span { color: var(--tx-2); font-size: 0.92rem; }
@media (max-width: 860px) {
  .sq__wrap { grid-template-columns: 1fr; }
  .sq__points { grid-template-columns: 1fr; }
}

/* an [hidden] empty state stays hidden (display:flex above beat the attribute) */
.empty[hidden] { display: none; }

/* ============================================================
   Rent a Home: search by address, town or ZIP
   ============================================================ */
.rs { display: grid; gap: 12px; }
.rs__box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-pill, 999px); box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06); }
.rs__box:focus-within { border-color: var(--ink); }
.rs__ico { width: 20px; height: 20px; flex: none; color: var(--tx-2); }
.rs__box input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.02rem; color: var(--tx); }
.rs__go { flex: none; height: 48px; border-radius: var(--r-pill, 999px); white-space: nowrap; }
.rs__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rs__clear { margin-left: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.86rem; color: var(--tx); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rs-busy { opacity: 0.45; transition: opacity 0.2s ease; }
@media (max-width: 560px) {
  .rs__box { flex-wrap: wrap; border-radius: 18px; padding: 6px; }
  .rs__ico { margin-left: 10px; }
  .rs__box input { width: calc(100% - 40px); }
  .rs__go { width: 100%; justify-content: center; }
}

/* the home page menu bar: the same solid light bar as every other page,
   not see-through over the photo */
[data-variant="hero"] .nav-pill {
  background: rgba(250, 249, 247, 0.97);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.16);
}

/* Sell page: instant estimate (home-value.js) */
.hv { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: #f6f7f5; border: 1px solid var(--line); transition: opacity .2s ease; }
.hv[hidden] { display: none; }
.form-grid > .hv { grid-column: 1 / -1; }
.hv__range span { white-space: nowrap; }
.hv.is-busy { opacity: .55; }
.hv__k { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); }
.hv__v { margin: 0; font-size: clamp(1.9rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hv__bar { position: relative; height: 8px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, #e3e5e1, #e3e5e1); }
.hv__bar span { position: absolute; top: 0; bottom: 0; left: 25%; width: var(--hv-w, 50%); border-radius: 99px; background: var(--ink); }
.hv__bar span::after { content: ""; position: absolute; left: 50%; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.hv__range { display: flex; justify-content: space-between; margin: 0 25%; font-size: .82rem; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.hv__range span:first-child { transform: translateX(-50%); }
.hv__range span:last-child { transform: translateX(50%); }
.hv__basis { margin: 4px 0 0; font-size: .86rem; color: var(--tx-1, #333); line-height: 1.45; }
.hv__more summary { cursor: pointer; font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hv__fit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.hv__fit label { display: grid; gap: 4px; font-size: .78rem; color: var(--tx-2); }
.hv__fit input, .hv__fit select { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; }
.hv__fine { margin: 2px 0 0; font-size: .72rem; color: var(--tx-2); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .hv { transition: none; } }

/* ---- Video tour on a listing (listing-video.js) ---- */
.lv { display: grid; gap: 14px; }
.lv--many { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lv__item { margin: 0; }
.lv__play, .lv__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--r-md, 14px); overflow: hidden; background: #111; cursor: pointer; }
.lv__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.lv__btn { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(220, 38, 38, .92); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.lv__btn svg { width: 28px; height: 28px; margin-left: 3px; }
.lv__play:active .lv__btn { transform: scale(.94); }
.lv__play:focus-visible { outline: 3px solid var(--accent, #c8102e); outline-offset: 3px; }
@media (hover: hover) { .lv__play:hover img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .lv__play img, .lv__btn { transition: none; } }
.lv__item figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted, #555); line-height: 1.4; }

/* ---- Map / Satellite switch and the listing's price on its map (map-layers.js) ---- */
.mapmode { display: inline-flex; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); overflow: hidden; }
.mapmode button { border: 0; background: #fff; padding: 8px 12px; font: 600 .82rem/1 var(--f-body, system-ui); color: #333; cursor: pointer; }
.mapmode button + button { border-left: 1px solid #e3e3e3; }
.mapmode button[aria-pressed="true"] { background: #1f1f1f; color: #fff; }
.p-map .ms-pin-wrap { background: none; border: 0; }
.p-map .p-map__price {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 8px; background: var(--accent-btn, #c8102e); color: #fff; font: 700 .78rem/1 var(--f-body, system-ui);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); white-space: nowrap;
}
.p-map .p-map__price::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--accent-btn, #c8102e);
}

/* ---- Open houses this week (home page, open-houses.js) ---- */
.oh { background: #fff; padding: clamp(40px, 6vw, 80px) 0; }
/* right under Featured Properties: that section already leaves room */
#featured + .oh { padding-top: 0; }
.oh__in { width: min(1200px, 100% - 32px); margin: 0 auto; }
.oh__head { margin-bottom: 22px; }
.oh__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 6px; }
.oh__sub { margin: 0; color: var(--muted, #5a5a5a); }
.oh__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.oh__card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06); color: inherit; text-decoration: none; min-width: 0; transition: box-shadow .2s ease, transform .2s ease; }
@media (hover: hover) { .oh__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); transform: translateY(-2px); } }
.oh__card:active { transform: scale(.99); }
.oh__photo { position: relative; display: block; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; background: #eee; }
.oh__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.oh__own { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 999px; background: var(--accent-btn, #c8102e); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.oh__when { position: absolute; left: 10px; bottom: 10px; display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: rgba(15, 15, 15, .82); color: #fff; font-size: .82rem; line-height: 1.15; }
.oh__when b { font-size: .92rem; }
.oh__virtual { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: #fff; font-size: .74rem; font-weight: 700; }
.oh__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.oh__price { font-size: 1.15rem; }
.oh__specs, .oh__office { font-size: .86rem; color: var(--muted, #5a5a5a); }
.oh__office { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.oh__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh__also { font-size: .8rem; font-weight: 600; color: var(--accent-2, #b70200); line-height: 1.35; }
.oh__more { margin: 22px auto 0; display: flex; }
@media (prefers-reduced-motion: reduce) { .oh__card { transition: none; } }
.oh__card { position: relative; }
.oh__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; min-width: 0; }
.oh__actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.oh__actions .oh__menu { grid-column: 1 / -1; }
.oh__route { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 10px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: #fff; font: 600 .9rem var(--f-body, system-ui); color: #1f1f1f; cursor: pointer; }
.oh__route svg { width: 18px; height: 18px; flex: none; }
.oh__route[aria-pressed="true"] { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.oh__route:active, .oh__cal:active { transform: scale(.98); }
/* pick a day */
.oh__days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 2px; }
.oh__days::-webkit-scrollbar { display: none; }
.oh__days button { flex: none; height: 38px; padding: 0 16px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: #fff; font: 600 .88rem var(--f-body, system-ui); color: #1f1f1f; cursor: pointer; white-space: nowrap; }
.oh__days button[aria-pressed="true"] { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
/* the route being planned: floats at the bottom of the screen */
.oh-plan {
  position: fixed; z-index: 95; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto;
  display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
  animation: oh-plan-in .25s cubic-bezier(.2, .8, .2, 1);
}
.oh-plan[hidden] { display: none; }
@keyframes oh-plan-in { from { opacity: 0; transform: translate(-50%, 14px); } }
@media (prefers-reduced-motion: reduce) { .oh-plan { animation: none; } }
.oh-plan__head { display: flex; justify-content: space-between; align-items: center; }
.oh-plan__clear { border: 0; background: none; font: 600 .86rem var(--f-body, system-ui); text-decoration: underline; cursor: pointer; color: rgba(10,10,10,.6); }
.oh-plan__warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fdf3e2; color: #6b4300; font-size: .84rem; }
.oh-plan__stops { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: .9rem; }
.oh-plan__stops li b { font-size: .84rem; margin-right: 4px; }
/* the home page's floating "homes fit" bar steps aside while planning */
body.oh-planning .mx-sticky, body.oh-planning [data-mx-sticky] { display: none !important; }
@media (max-width: 700px) {
  .oh-plan { gap: 8px; padding: 14px; border-radius: 14px; max-height: 50vh; }
  .oh-plan__stops { font-size: .86rem; gap: 4px; }
  .oh-plan__btns .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}
.oh-plan__stops li span { color: rgba(10,10,10,.7); }
.oh-plan__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oh-plan__btns .btn { justify-content: center; text-align: center; }
@media (max-width: 420px) { .oh-plan__btns { grid-template-columns: 1fr; } }
.oh__cal { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: #fff; font: 600 .9rem var(--f-body, system-ui); color: #1f1f1f; cursor: pointer; min-height: 44px; }
.oh__cal svg { width: 18px; height: 18px; }
.oh__cal[aria-expanded="true"] { background: #1f1f1f; color: #fff; border-color: #1f1f1f; }
.oh__menu { margin-top: 8px; display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #f5f5f3; }
.oh__menu[hidden] { display: none; }
.oh__menu button { min-height: 44px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); font: 600 .88rem var(--f-body, system-ui); cursor: pointer; text-align: left; padding: 0 12px; }
.oh__menu button:active { transform: scale(.99); }
.oh__remind { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; font-weight: 600; }
.oh__remind select { flex: 1; max-width: 62%; min-height: 40px; border-radius: 9px; border: 1px solid #ddd; background: #fff; font: inherit; font-weight: 500; padding: 0 8px; }
.oh__note { margin: 2px 0 0; font-size: .74rem; color: var(--muted, #666); }