/* =========================================================
   Jason Pittelli — Bosley Real Estate
   Brand: antique brass accent + deep navy, ivory paper, Trajan-style serif caps
   ========================================================= */

:root {
  --paper: #f6f4f1;
  --paper-2: #efebe6;
  --white: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --muted: #7a756f;
  --line: rgba(26, 26, 26, 0.12);

  /* The brand's own near-black, taken from the logo. It carries the site:
     headings, buttons, the top bar and the footer. The names stay as they
     were so every existing rule picks the new colour up. */
  --navy: #0c0d0c;
  --navy-2: #1f201e;
  --navy-deep: #0c0d0c;

  /* True navy, kept for the rare accent — the "navy" badge and little else.
     Deliberately not wired into anything else. */
  --accent-navy: #16305c;

  --gold: #8a6a2e; /* deep brass - small caps, links, text on light backgrounds */
  --gold-lt: #dfbe7e; /* light brass - accents on dark backgrounds */
  --gold-solid: #b58e43; /* brass fill - buttons, badges, active states */
  --gold-grad: linear-gradient(180deg, #e2c489 0%, #b58e43 55%, #7e5f27 100%);

  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --serif: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 18px 50px rgba(20, 26, 40, 0.1);
  --shadow-lg: 0 30px 70px rgba(20, 26, 40, 0.16);
  --container: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
sup {
  font-size: 0.5em;
  vertical-align: super;
}

/* Honeypot: a field only a robot fills in. Moved off screen rather than
   set to display:none, which bots look for. This rule has to live here
   and not in a stylesheet that only some pages load — the home page
   does not load blocks.css, and four forms there were showing it. */
.jp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jp-hp input[type="text"] {
  opacity: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.center {
  text-align: center;
}
.section {
  padding: 120px 0;
  position: relative;
}

/* ---------- Type ---------- */
.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--gold-grad);
  display: inline-block;
}
.kicker--light {
  color: #fff;
}
.kicker--light::before {
  background: var(--gold-grad);
}
.sec-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--ink);
}
.sec-lead {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  max-width: 520px;
}
.sec-lead--center {
  margin: 0 auto;
}
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--center .kicker {
  justify-content: center;
}
p {
  margin: 0 0 18px;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 38px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  overflow: hidden;
  transition:
    color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  z-index: 1;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn::after {
  background: var(--navy);
}
.btn--gold {
  background: var(--gold-solid);
  color: var(--navy-deep);
  box-shadow: 0 10px 26px rgba(181, 142, 67, 0.34);
}

.btn--gold:hover {
  color: #fff;
  box-shadow: 0 16px 34px rgba(12, 13, 12, 0.3);
}
.btn--gold::after {
  transform-origin: left;
}
.btn--gold:hover::after {
  transform: scaleX(1);
}
.btn--navy {
  background: var(--navy);
  color: #fff;
}
.btn--navy::after {
  background: var(--gold-solid);
}
.btn--navy:hover {
  color: var(--navy-deep);
}
.btn--navy:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--ghost::after {
  background: #fff;
}
.btn--ghost:hover {
  color: var(--ink);
  border-color: #fff;
}
.btn--ghost:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline::after {
  background: var(--ink);
}
.btn--outline:hover {
  color: #fff;
}
.btn--outline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.btn--sm {
  padding: 12px 24px;
  font-size: 11px;
}
.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}
.link-arrow i {
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  position: relative;
  transition: width 0.35s var(--ease);
}
.link-arrow i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.link-arrow:hover {
  color: var(--gold);
}
.link-arrow:hover i {
  width: 48px;
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition:
    opacity 0.7s var(--ease),
    visibility 0.7s;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.preloader__mark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.preloader__mark .bar {
  width: 7px;
  height: 44px;
  background: var(--gold-grad);
}
.preloader__mark .txt {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.22em;
  color: var(--ink);
}
/* Uploaded logo, shown instead of the bar and wordmark. height:auto lets the
   width cap drive the size — WordPress prints a height attribute that would
   otherwise win. */
.preloader__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(280px, 62vw);
  max-height: min(150px, 22vh);
  object-fit: contain;
}
.preloader__line {
  width: 170px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.preloader__line i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--gold-solid);
  animation: load 1s infinite var(--ease);
}
@keyframes load {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.topbar__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
.topbar__tag {
  margin: 0;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #fff;
}
.topbar__tag span {
  color: #fff;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 26px;
  color: #fff;
}
.topbar__right a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}
.topbar__right a:hover {
  color: var(--gold-lt);
}
.topbar__right svg {
  width: 14px;
  height: 14px;
}
.topbar__social {
  display: flex;
  gap: 14px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.topbar__social svg {
  width: 15px;
  height: 15px;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(246, 244, 241, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition:
    box-shadow 0.4s var(--ease),
    background 0.4s var(--ease);
}
.header.is-stuck {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.96);
}
.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Uploaded logo. Height comes from Site Settings as an inline style; width is
   left to the image so the aspect ratio is never squashed. */
.brand--logo {
  gap: 0;
}
.brand__logo {
  display: block;
  width: auto;
  max-width: min(300px, 42vw);
  object-fit: contain;
  transition: opacity 0.3s var(--ease);
}
.brand--logo:hover .brand__logo {
  opacity: 0.82;
}

/* The footer sits on deep navy and the logo is dark artwork, so it is knocked
   out to white. brightness(0) flattens every colour to black first, then
   invert(1) lifts it to solid white — including the brass "TORONTO", which a
   plain invert would turn a muddy blue. Replace this with a real white logo
   file in Site Settings when one exists. */
.brand--light .brand__logo {
  filter: brightness(0) invert(1);
  opacity: 0.94;
  max-width: min(240px, 100%);
}
@media (max-width: 1024px) {
  .brand__logo {
    max-height: 52px;
  }
}
@media (max-width: 760px) {
  .brand__logo {
    max-height: 44px;
    max-width: 56vw;
  }
}

.brand__bar {
  width: 7px;
  height: 40px;
  background: var(--gold-grad);
  flex: none;
  transition: height 0.4s var(--ease);
}
.brand:hover .brand__bar {
  height: 48px;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__text strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.brand__text em {
  font-family: var(--display);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  color: var(--muted);
  margin-top: 5px;
}
.brand__divider {
  width: 1px;
  height: 34px;
  background: var(--line);
  margin: 0 4px;
}
.brand__agent {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__agent b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--navy);
}
.brand__agent i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-top: 5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav ul {
  display: flex;
  gap: 30px;
}
.nav ul a {
  position: relative;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}
.nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold-solid);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav ul a:hover,
.nav ul a.is-active {
  color: var(--gold);
}
.nav ul a:hover::after,
.nav ul a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: flex-end;
}
.burger span {
  display: block;
  height: 1.6px;
  background: var(--ink);
  transition: 0.35s var(--ease);
}
.burger span:nth-child(1) {
  width: 26px;
}
.burger span:nth-child(2) {
  width: 18px;
}
.burger span:nth-child(3) {
  width: 26px;
}
.burger.is-open span:nth-child(1) {
  transform: translateY(7.6px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
  opacity: 0;
}
.burger.is-open span:nth-child(3) {
  width: 26px;
  transform: translateY(-7.6px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 0 0;
  overflow: hidden;
}
.hero__slides {
  position: absolute;
  inset: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 1.6s var(--ease),
    transform 7s linear;
}
.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 13, 12, 0.88) 0%,
    rgba(12, 13, 12, 0.62) 45%,
    rgba(12, 13, 12, 0.25) 100%
  );
}
.hero__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35),
    transparent 30%,
    rgba(0, 0, 0, 0.45)
  );
}
.hero__in {
  position: relative;
  z-index: 3;
  padding-bottom: 70px;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  color: #fff;
  margin: 0 0 26px;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  max-width: 16ch;
}
.hero__title span {
  display: block;
}
.hero__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-lt);
}
.hero__sub {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  max-width: 600px;
  margin-bottom: 36px;
}
.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__searchwrap {
  position: relative;
  z-index: 3;
}

/* search bar */
.search {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
  gap: 0;
  align-items: stretch;
  /* transform:translateY(46px); */
}
.search__field {
  padding: 20px 26px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.search__field label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.search__field input,
.search__field select {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.search__field input {
  cursor: text;
}
.search__field select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A756F' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>")
    no-repeat right center/12px 12px;
}
/* ---------- The search bar's choosers ----------
   Radio buttons dressed as a dropdown. A native <select> drops open a
   list drawn by the operating system: system font, system blue, no way
   in for any of this. These are ordinary elements, so they can simply
   be styled.

   Closed by default. Without JavaScript nothing could open them, so a
   <noscript> rule in the head opens them all instead — see header.php.
   Doing it that way round means no visitor watches three panels flash
   open and shut while the page finishes loading. */
.search__field--pick {
  position: relative;
  cursor: pointer;
}
.dd__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.dd__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Muted until something is actually chosen, so "Any Price" reads as an
   invitation rather than as an answer. */
.dd:not(.is-set) .dd__value {
  color: var(--muted);
}
.dd__chev {
  display: flex;
  flex: none;
  color: var(--muted);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.dd__chev svg {
  width: 13px;
  height: 13px;
}
.dd.is-open .dd__chev {
  transform: rotate(180deg);
  color: var(--ink);
}
.dd__btn:focus-visible {
  outline: 2px solid var(--gold-solid);
  outline-offset: 4px;
}

.dd__menu {
  position: absolute;
  top: calc(100% - 6px);
  left: 12px;
  right: 12px;
  z-index: 40;
  min-width: 210px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  /* Lifted off the bar rather than outlined, so it reads as sitting
     above the page instead of cutting a hole in it. */
  box-shadow: 0 18px 44px rgba(12, 13, 12, 0.14);
  max-height: 320px;
  overflow-y: auto;
}
.dd__menu {
  display: none;
}
.dd.is-open .dd__menu {
  display: block;
}

.dd__opt {
  display: block;
  position: relative;
  cursor: pointer;
}
.dd__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.dd__opt span {
  display: block;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.dd__opt:hover span {
  background: var(--paper);
}
.dd__opt input:checked + span {
  background: var(--ink);
  color: #fff;
}
/* The keyboard needs to see where it is; the input itself is hidden. */
.dd__opt input:focus-visible + span {
  outline: 2px solid var(--gold-solid);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .dd__menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}
.search__btn {
  background: var(--gold-solid);
  color: var(--navy-deep);
  padding: 0 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease);
}
.search__btn:hover {
  background: var(--navy);
  color: #fff;
}
.search__btn svg {
  width: 17px;
  height: 17px;
}

.hero__dots {
  position: absolute;
  left: 32px;
  bottom: 150px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero__dots button {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition: 0.35s var(--ease);
}
.hero__dots button.is-active {
  background: var(--gold-solid);
  border-color: var(--gold-solid);
  transform: scale(1.35);
}

/* ---------- Stats ---------- */
.stats {
  background: var(--white);
  padding: 110px 0 70px;
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat {
  text-align: center;
  padding: 18px 12px;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--line);
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 48px);
  color: var(--navy);
  line-height: 1;
}
.stat p {
  margin: 14px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Listings ---------- */
.listings {
  background: var(--white);
}
.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: -16px 0 44px;
}
.chip {
  padding: 11px 26px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: 0.35s var(--ease);
}
.chip:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.card.is-hidden {
  display: none;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.1s var(--ease),
    filter 0.6s var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.09);
}
.badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 7px 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
.badge--gold {
  background: var(--gold-solid);
  color: var(--navy-deep);
}
.badge--navy {
  background: var(--accent-navy);
}
.badge--dark {
  background: rgba(26, 26, 26, 0.85);
}
.card__hover {
  position: absolute;
  inset: 0;
  background: rgba(18, 19, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.card__hover span {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transform: translateY(12px);
  transition:
    transform 0.45s var(--ease),
    background 0.35s;
}
.card:hover .card__hover {
  opacity: 1;
}
.card:hover .card__hover span {
  transform: translateY(0);
}
.card__hover span:hover {
  background: var(--gold-solid);
  border-color: var(--gold-solid);
  color: var(--navy-deep);
}
.card__body {
  padding: 28px 28px 26px;
}
.card__price {
  font-family: var(--display);
  font-size: 23px;
  color: var(--gold);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.card__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
  transition: color 0.3s;
}
.card:hover .card__title {
  color: var(--navy);
}
.card__addr {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.card__meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.card__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b58e43;
  font-weight: 600;
}
.card__meta svg {
  width: 16px;
  height: 16px;
  color: #b58e43;
  stroke-width: 2;
}
.listings .center {
  margin-top: 60px;
}

/* ---------- About ---------- */
.about {
  background: var(--paper);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.about__media {
  position: relative;
}
/* height:auto is what lets aspect-ratio govern. WordPress prints width and
   height attributes on every image, and that height would otherwise win and
   stretch the portrait to its full 4:5-ignoring size. */
.about__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.about__frame {
  position: absolute;
  left: -22px;
  bottom: -22px;
  width: 65%;
  height: 65%;
  border: 1px solid var(--gold-solid);
  z-index: 1;
}
.about__badge {
  position: absolute;
  right: -26px;
  top: 44px;
  z-index: 3;
  background: var(--navy);
  color: #fff;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease);
}
.about__media:hover .about__badge {
  transform: translateY(-8px);
}
.about__badge-num {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
}
.about__badge-txt {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}
.about__role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold);
  margin: -8px 0 24px;
}
.about__points {
  margin: 32px 0 36px;
  display: grid;
  gap: 14px;
}
.about__points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  color: var(--ink-soft);
}
.about__points li span {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  background: var(--gold-grad);
  transform: rotate(45deg);
}
.about__cta {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

/* ---------- Services ---------- */
.services {
  background: var(--white);
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.svc {
  position: relative;
  padding: 52px 40px 46px;
  border: 1px solid var(--line);
  background: var(--white);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    background 0.5s var(--ease);
  overflow: hidden;
}
.svc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.svc:hover::before {
  transform: scaleX(1);
}
.svc__icon {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  margin-bottom: 28px;
  color: var(--navy);
  transition:
    background 0.45s var(--ease),
    color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.svc__icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.2;
}
.svc:hover .svc__icon {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: rotate(-6deg);
}
.svc h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
}
.svc p {
  margin-bottom: 26px;
}

/* ---------- Neighbourhoods ---------- */
.areas {
  background: var(--paper);
}
.areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 22px;
}
.area {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.area--tall {
  grid-row: span 2;
}
.area--wide {
  grid-column: span 2;
}
.area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 13, 12, 0) 30%,
    rgba(12, 13, 12, 0.82) 100%
  );
  transition: background 0.5s var(--ease);
}
.area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(181, 142, 67, 0.34);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.area:hover::after {
  opacity: 1;
}
.area__in {
  position: relative;
  z-index: 2;
  padding: 30px 32px;
  width: 100%;
}
.area__in h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.area__in p {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.area__go {
  display: inline-block;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  transition:
    max-height 0.45s var(--ease),
    opacity 0.45s var(--ease),
    margin-top 0.45s var(--ease);
}
.area:hover .area__go {
  max-height: 30px;
  opacity: 1;
  margin-top: 16px;
}

/* ---------- Valuation ---------- */
.valuation {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
  color: #fff;
}
/* The photo comes from the editor's Background field as an inline style. This
   rule keeps the overlay, sizing and fixed attachment, and stays presentable
   on its own when no background image has been chosen. */
.valuation__bg {
  position: absolute;
  inset: -10% 0;
  background: linear-gradient(rgba(12, 13, 12, 0.94), rgba(18, 19, 18, 0.94))
    center/cover fixed;
}
.valuation__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
.valuation__text h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.18;
  margin: 0 0 20px;
  color: #fff;
}
.valuation__text h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-lt);
}
.valuation__text p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  max-width: 520px;
}
.valuation__list {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
.valuation__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.valuation__list li::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--gold-lt);
  transform: rotate(45deg);
  flex: none;
}
.valuation__form {
  background: var(--white);
  padding: 44px 40px;
  box-shadow: var(--shadow-lg);
}
.valuation__form h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 26px;
  letter-spacing: 0.03em;
}
.valuation__note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 16px 0 0;
}

/* Fields */
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  outline: 0;
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(12, 13, 12, 0.1);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #a9a49e;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---------- Testimonials ---------- */
.testi {
  background: var(--white);
}
.testi__box {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.testi__track {
  position: relative;
  min-height: 270px;
}
.testi__item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.testi__item.is-active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
  pointer-events: auto;
}
.stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  color: var(--gold-solid);
  margin-bottom: 26px;
}
.stars svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
}
.testi__item p {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 30px;
}
.testi__item footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.testi__item footer b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--navy);
}
.testi__item footer span {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.testi__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 44px;
}
.testi__nav button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: 0.35s var(--ease);
}
.testi__nav button:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.testi__dots {
  display: flex;
  gap: 9px;
}
.testi__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  transition: 0.3s var(--ease);
}
.testi__dots button.is-active {
  background: var(--gold-solid);
  border-color: var(--gold-solid);
  transform: scale(1.3);
}

/* ---------- Journal ---------- */
.journal {
  background: var(--paper);
}
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.post {
  background: var(--white);
  border: 1px solid var(--line);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.post:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.post__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--paper-2);
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.post:hover .post__media img {
  transform: scale(1.08);
}
.post__body {
  padding: 30px 30px 32px;
}
.post__meta {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.post__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.35;
  margin: 0 0 12px;
}
.post__body h3 a {
  transition: color 0.3s;
}
.post__body h3 a:hover {
  color: var(--gold);
}
.post__body p {
  font-size: 15px;
  margin-bottom: 22px;
}

/* ---------- Contact ---------- */
.contact {
  background: var(--white);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact__list {
  margin: 38px 0 34px;
  display: grid;
  gap: 26px;
}
.contact__list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.contact__list .ci {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: 0.4s var(--ease);
}
.contact__list li:hover .ci {
  background: var(--gold-solid);
  color: var(--navy-deep);
  border-color: var(--gold-solid);
}
.contact__list div {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.9;
}
.contact__list b {
  display: inline-block;
  min-width: 60px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__list a:hover {
  color: var(--gold);
}
.contact__map {
  border: 1px solid var(--line);
  height: 230px;
  overflow: hidden;
  filter: grayscale(1);
  transition: filter 0.5s var(--ease);
}
.contact__map:hover {
  filter: grayscale(0);
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.contact__form {
  background: var(--paper);
  padding: 46px 42px;
  border: 1px solid var(--line);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.62);
  padding-top: 90px;
  font-size: 14.5px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 56px;
  padding-bottom: 64px;
}
.brand--light .brand__text strong {
  color: #fff;
}
.brand--light .brand__text em {
  color: rgba(255, 255, 255, 0.55);
}
.footer__est {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  margin: 22px 0 10px;
}
.footer__tag {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 16px;
}
.footer__lrec {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  line-height: 1.9;
}
.footer__col h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #fff;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.footer__col ul {
  display: grid;
  gap: 13px;
}
.footer__col a {
  transition:
    color 0.3s var(--ease),
    padding-left 0.3s var(--ease);
}
.footer__col a:hover {
  color: var(--gold-lt) !important;
}
.footer__col p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.news {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 18px;
}
.news input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 14px 16px;
  color: #fff;
  font-size: 14px;
}
.news input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.news button {
  width: 56px;
  background: var(--gold-solid);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s var(--ease);
}
.news button:hover {
  background: #fff;
  color: var(--navy-deep);
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}
.footer__bottom p {
  margin: 0;
  color: inherit;
}
.footer__legal a:hover {
  color: var(--gold-lt);
}

/* ---------- Back to top ---------- */
.totop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 800;
  width: 50px;
  height: 50px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: 0.4s var(--ease);
  box-shadow: var(--shadow);
}
.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.totop:hover {
  background: var(--gold-solid);
  color: var(--navy-deep);
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .cards,
  .svc-grid,
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .area--tall {
    grid-row: span 1;
  }
  .about__grid,
  .contact__grid,
  .valuation__in {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .about__badge {
    right: 20px;
  }
  .nav ul {
    gap: 20px;
  }
  .nav ul a {
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 1024px) {
  .topbar__right a span,
  .topbar__tag span {
    display: none;
  }
  .header__in {
    height: 76px;
  }
  .brand__divider,
  .brand__agent {
    display: none;
  }
  .burger {
    display: flex;
  }
  /* The panel drops down from under the header instead of sliding in from
     the right. A fixed element parked off to the side is not clipped by the
     body's overflow-x, which is why the old version left the page scrollable
     sideways on phones. Nothing here moves horizontally. */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100dvh;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 92px 26px 30px;
    transform: translateY(-100%);
    transition:
      transform 0.45s var(--ease),
      visibility 0.45s;
    /* Kept out of the tab order while closed, which transform alone does not do. */
    visibility: hidden;
    box-shadow: 0 24px 60px rgba(12, 13, 12, 0.18);
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .nav ul li {
    border-bottom: 1px solid var(--line);
  }
  .nav ul a {
    display: block;
    padding: 18px 0;
    font-size: 13px;
    letter-spacing: 0.18em;
  }
  .nav ul a::after {
    display: none;
  }
  .nav__cta {
    margin-top: 30px;
    width: 100%;
  }
  .search {
    grid-template-columns: 1fr 1fr;
    transform: none;
  }
  .search__btn {
    grid-column: span 2;
    padding: 20px;
    justify-content: center;
  }
  .search__field {
    border-bottom: 1px solid var(--line);
  }
  .hero__dots {
    display: none;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }
  .stat:nth-child(3)::before {
    display: none;
  }
  .valuation__bg {
    background-attachment: scroll;
  }
}

@media (max-width: 760px) {
  .container {
    padding: 0 20px;
  }
  .section {
    padding: 80px 0;
  }
  .topbar__in {
    height: auto;
    padding: 9px 0;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .topbar__right {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .topbar__social {
    padding-left: 14px;
  }
  .hero {
    min-height: auto;
    padding: 80px 0 0;
  }
  .hero__in {
    padding-bottom: 50px;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
  }
  .cards,
  .svc-grid,
  .posts,
  .areas__grid,
  .two,
  .search {
    grid-template-columns: 1fr;
  }
  .search__btn {
    grid-column: span 1;
  }
  .area--wide {
    grid-column: span 1;
  }
  .sec-head {
    margin-bottom: 40px;
  }
  .about__badge {
    right: 14px;
    top: -60px;
    padding: 18px;
  }
  .about__badge-num {
    font-size: 30px;
  }
  .about__frame {
    display: none;
  }
  .contact__form,
  .valuation__form {
    padding: 32px 24px;
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
  .stats {
    padding: 70px 0 50px;
  }
  .stat::before {
    display: none !important;
  }
  .totop {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Header: search icon and drop-down panel ----------
   The bar already carries a logo, six links and a button. A full search field
   there forces the button onto two lines, so the search is an icon that opens
   a panel below the bar instead. */
.hsearch__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  color: var(--ink);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.hsearch__toggle:hover,
.hsearch__toggle[aria-expanded="true"] {
  border-color: var(--gold-solid);
  color: var(--gold);
}
.hsearch__toggle svg {
  width: 17px;
  height: 17px;
}

.hsearch {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(12, 13, 12, 0.1);
  /* Above the hero, which begins immediately below the sticky bar. */
  z-index: 940;
  padding: 26px 0;
}
.hsearch[hidden] {
  display: none;
}

.hsearch .search--compact {
  display: flex;
  align-items: center;
  max-width: 640px;
  margin-inline: auto;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color 0.3s var(--ease);
}
.hsearch .search--compact:focus-within {
  border-color: var(--gold-solid);
}
.hsearch .search--compact input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.hsearch .search--compact input::placeholder {
  color: var(--muted);
}
.hsearch .search--compact .search__btn {
  flex: none;
  padding: 13px 22px;
  background: var(--gold-solid);
  color: var(--navy);
}
.hsearch .search--compact .search__btn:hover {
  background: var(--navy);
  color: #fff;
}

/* The header is the panel's positioning context. */
.header {
  position: sticky;
}

/* The button must never wrap; the nav gives up gap before it gives up words. */
.nav__cta {
  white-space: nowrap;
  flex: none;
}
.nav {
  gap: 22px;
}
.nav ul {
  gap: 22px;
}
@media (max-width: 1320px) {
  .nav {
    gap: 16px;
  }
  .nav ul {
    gap: 16px;
  }
  .nav ul a {
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }
  .nav__cta {
    padding: 11px 18px;
  }
}

/* ---------- Search band: its own strip under the hero ---------- */
.searchband {
  background: var(--paper);
  padding: 0 0 0;
  position: relative;
  z-index: 5;
}
.searchband .search {
  margin-top: -46px;
}
@media (max-width: 1024px) {
  .searchband {
    padding: 26px 0 0;
  }
  .searchband .search {
    margin-top: 0;
  }
}

/* ---------- Quick filter ----------
   Three buttons that each open their own list. Sits on the same row as the
   property-type chips, so all the narrowing controls read as one group. */
.filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filterbar .filters {
  margin: 0;
}

.qfilter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: opacity 0.2s var(--ease);
}
.qfilter.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.qf {
  position: relative;
}

.qf__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.qf__btn:hover,
.qf.is-open .qf__btn {
  border-color: var(--gold-solid);
}
.qf.is-set .qf__btn {
  border-color: var(--gold-solid);
  background: var(--paper-2);
  color: var(--navy);
}

.qf__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold-solid);
  stroke-width: 1.5;
}
.qf__chev svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  color: var(--muted);
  transition: transform 0.3s var(--ease);
}
.qf.is-open .qf__chev svg {
  transform: rotate(180deg);
}

.qf__menu {
  min-width: 200px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 46px rgba(12, 13, 12, 0.14);
}
/* Only once the script is running does the list become a dropdown; without it
   the choices stay on the page so the form is still usable. */
.qfilter.is-enhanced .qf__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    visibility 0.2s;
}
.qfilter.is-enhanced .qf.is-open .qf__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.qf__opt {
  display: block;
  cursor: pointer;
}
.qf__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qf__opt span {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.qf__opt:hover span {
  background: var(--paper);
  color: var(--ink);
}
.qf__opt input:checked + span {
  background: var(--paper-2);
  color: var(--navy);
  font-weight: 500;
}
.qf__opt input:focus-visible + span {
  outline: 2px solid var(--gold-solid);
  outline-offset: -2px;
}

.qf__go {
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.qf__reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.3s var(--ease);
}
.qf__reset:hover {
  color: var(--navy);
}
.qf__reset[hidden] {
  display: none;
}
.qf__reset svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.qf__count {
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .filterbar {
    gap: 14px;
  }
  .qfilter {
    width: 100%;
  }
  .qf {
    flex: 1 1 calc(50% - 5px);
  }
  .qf__btn {
    width: 100%;
    justify-content: space-between;
  }
  .qf__menu {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Header search panel: sizing and close ---------- */
.hsearch__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}
.hsearch__in .search--compact {
  margin: 0;
  flex: 1 1 auto;
  max-width: 620px;
}

.hsearch__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--muted);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.hsearch__close:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.hsearch__close svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* ---------- Mobile nav: its own close ----------
   The slide-in panel sits above the header, so the burger's own cross is
   unreachable while it is open. */
.nav__close {
  display: none;
  position: absolute;
  top: 24px;
  right: 26px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.nav__close:hover {
  border-color: var(--gold-solid);
  color: var(--gold);
}
.nav__close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

@media (max-width: 1024px) {
  .topbar {
    display: none;
  }
  .footer__col.footer__col--news {
    display: none;
  }
  .nav__close {
    display: inline-flex;
  }
}

/* ---------- Header tools: search icon and burger ----------
   These live outside the nav so they stay in the bar when the nav becomes a
   drop-down panel on small screens. */
.header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* On desktop the burger is hidden and the search icon sits with the nav. */
@media (min-width: 1025px) {
  .header__tools {
    order: 3;
  }
}

@media (max-width: 1024px) {
  /* The panel drops from the top, so its close sits with the other controls
     rather than floating in a corner of a side drawer. */
  .nav__close {
    position: absolute;
    top: 22px;
    right: 26px;
  }
  .nav__cta {
    margin-top: 22px;
  }
  /* The bar has to stay above the panel so the burger is still reachable. */
  .header {
    z-index: 1001;
  }
  .header__in {
    position: relative;
    z-index: 2;
  }
}

/* While the panel is open the page behind it must not scroll. Only overflow-y
   is touched: setting the shorthand would wipe the body's overflow-x rule. */
body.jp-nav-open {
  overflow-y: hidden;
}