:root {
  --ink: #063545;
  --ink-deep: #002f3f;
  --teal: #174f61;
  --teal-soft: #2b6170;
  --cream: #f7f6f3;
  --mist: #e4e4e2;
  --line: rgba(3, 48, 64, 0.34);
  --gold: #d3a23b;
  --white: #ffffff;
  --black: #0b0f12;
  --shadow: 0 22px 44px rgba(0, 25, 33, 0.25);
  --font-optima: "Optima Local", Optima, Candara, "Segoe UI", Arial, sans-serif;
  --font-sans: "Inter", Arial, Helvetica, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --layout-width: min(1251px, 80vw);
  --section-gap: 64px;
  --section-copy-size: 15.3px;
  --hero-title-size: clamp(34px, 2.48vw, 46px);
  --hero-body-size: 17px;
  --hero-card-width: clamp(120px, 8.8vw, 184px);
  --hero-card-height: clamp(208px, 27.2svh, 288px);
  --hero-card-gap: clamp(22px, 1.6vw, 36px);
  --gallery-gap: 10px;
}

@font-face {
  font-family: "Optima Local";
  src: url("Fonts/Optima Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optima Local";
  src: url("Fonts/OPTIMA_B.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--black);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  overflow-x: hidden;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
  margin-top: auto;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

main,
footer,
section {
  width: 100%;
}

.page-shell {
  width: var(--layout-width);
  margin-inline: auto;
}

.section-pad {
  padding-block: var(--section-gap);
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  padding-top: 62px;
  pointer-events: none;
  transition: padding-top 240ms ease;
}

.site-header.is-scrolled {
  position: fixed;
  z-index: 1000;
  padding-top: 0;
}

.nav-shell {
  width: min(1564px, calc(100% - 176px));
  height: 72px;
  margin-inline: auto;
  padding: 0 42px 0 76px;
  display: grid;
  grid-template-columns: 260px 1fr 72px;
  align-items: center;
  border-radius: 999px;
  background: rgba(4, 51, 65, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 26, 35, 0.28);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  opacity: 1;
}

.brand img {
  width: 140px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: right;
  justify-content: right;
  gap: 54px;
  margin: 0;
  padding: 0 40px;
  list-style: none;
  color: var(--white);
  font-size: 16px;
  font-weight: 100;
}

.desktop-nav a {
  position: relative;
  padding: 26px 0;
  transition: color 0.32s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--gold);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Leasing nav dropdown (desktop): CSS-only, opens on hover or keyboard focus. */
.nav-has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 190px;
  margin: 8px 0 0;
  padding: 10px;
  list-style: none;
  background: var(--white);
  border: 1px solid rgba(12, 51, 64, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 31, 43, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li {
  list-style: none;
}

.nav-dropdown a {
  display: block;
  padding: 7.5px 14px;
  border-radius: 9px;
  color: #17323b;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav-dropdown a::after {
  content: none;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: #edf3f4;
  color: var(--teal);
}

/* Down-facing chevron beside the "Leasing" trigger, reusing the site's
   existing .chevron component (defined above for the search bar filters).
   IMPORTANT: the trigger <a> must stay `display: inline` (its default) so it
   keeps the exact same box/baseline as its plain-text siblings (Buy, Rent,
   Services) inside the shared flex nav — switching it to inline-flex here
   previously broke vertical alignment, pushing "Leasing" down inside the
   pill. Only the chevron itself is sized as inline-block. */
.nav-has-dropdown > a .chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.nav-has-dropdown:hover > a .chevron,
.nav-has-dropdown:focus-within > a .chevron {
  transform: rotate(180deg);
}

.whatsapp {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  transition: color 0.32s ease, transform 0.32s ease;
}

.whatsapp:hover,
.whatsapp:focus-visible {
  color: var(--gold);
  transform: translateY(-1px);
}

.whatsapp svg {
  width: 43px;
  height: 43px;
  fill: currentColor;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  color: var(--white);
  font-family: var(--font-optima);
  isolation: isolate;
  overflow: hidden;
  /* Lets the browser still handle vertical scrolling natively on touch
     devices while script.js's pointer listeners read horizontal swipes
     (see setupHeroSwipe) to move between hero properties. */
  touch-action: pan-y;
}

.hero-bg,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-bg {
  z-index: -3;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 520ms ease, transform 900ms ease;
  will-change: opacity, transform;
}

.hero-bg.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2, 22, 29, 0.72) 0%, rgba(2, 29, 39, 0.5) 42%, rgba(4, 26, 32, 0.16) 76%),
    linear-gradient(180deg, rgba(3, 24, 31, 0.12) 0%, rgba(3, 24, 31, 0.16) 50%, rgba(3, 24, 31, 0.46) 100%);
}

.hero-inner {
  position: relative;
  width: var(--layout-width);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(620px, 1.18fr);
  align-items: center;
  gap: clamp(48px, 4.4vw, 96px);
  margin-inline: auto;
  padding-block: 128px 104px;
}

.hero-copy {
  align-self: center;
  max-width: 560px;
}

.hero-copy h1 {
  margin: 0 0 clamp(18px, 2.3svh, 30px);
  font-family: var(--font-optima);
  font-size: var(--hero-title-size);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
}

.hero-copy h1 span {
  display: block;
  white-space: nowrap;
}

.hero-copy p {
  max-width: 560px;
  margin: 0;
  font-size: var(--hero-body-size);
  line-height: 1.2;
  padding-top: 42px;
}

.hero-showcase {
  position: absolute;
  right: 0;
  bottom: clamp(86px, 10svh, 120px);
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding-bottom: clamp(42px, 5svh, 66px);
  transform: none;
}

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(3, var(--hero-card-width));
  justify-content: end;
  align-items: center;
  gap: var(--hero-card-gap);
  overflow: visible;
}

.hero-tile {
  position: relative;
  width: 100%;
  height: var(--hero-card-height);
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
  opacity: 0.84;
  transform: translateY(0) scale(0.96);
  transform-origin: center;
  transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}

.hero-tile.is-active,
.hero-tile:hover,
.hero-tile:focus-visible {
  z-index: 2;
  opacity: 1;
  transform: translateY(-14px) scale(1.055);
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.46);
}

.hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.hero-tile.is-active img,
.hero-tile:hover img,
.hero-tile:focus-visible img {
  transform: scale(1.05);
}

.hero-property-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(420px, 64%);
  text-align: right;
  text-transform: uppercase;
  transition: opacity 160ms ease, transform 160ms ease;
}

.hero-property-copy.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

.hero-property-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.28vw, 30px);
  line-height: 1;
  font-weight: 900;
}

.hero-property-copy h2 a:hover,
.hero-property-copy h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-property-copy p {
  margin: 0;
  margin-left: auto;
  font-size: clamp(12px, 0.86vw, 16px);
  line-height: 1.25;
  font-weight: 700;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4svh, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  transform: translateX(-50%);
}

.hero-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hero-dot.is-active {
  width: 30px;
  height: 30px;
  border: 6px solid var(--white);
  background: var(--ink);
}

.search-section {
  position: relative;
  z-index: 8;
  padding: calc(var(--section-gap) * 0.8) 0;
  background: var(--white);
  border-bottom: 0;
  box-shadow: none;
}

.search-bar {
  position: relative;
  z-index: 8;
  width: min(1396px, calc(100% - 64px));
  min-height: 53px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, 0.82fr);
  align-items: stretch;
  gap: 0;
  padding: 7px;
  border-radius: 999px;
  background: #dedede;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: visible;
}

.search-filter {
  position: relative;
  min-width: 0;
}

.search-filter:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 62%;
  background: var(--line);
  transform: translateY(-50%);
}

.filter-trigger {
  width: 100%;
  min-height: 39px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(10px, 1.05vw, 20px);
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: clamp(9px, 0.64vw, 12px);
  font-weight: 600;
}

.filter-trigger svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.filter-trigger span:nth-child(2) {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
}

.chevron {
  position: relative;
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.chevron::before,
.chevron::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.chevron::before {
  left: 0;
  transform: rotate(45deg);
}

.chevron::after {
  right: 0;
  transform: rotate(-45deg);
}

.filter-trigger[aria-expanded="true"] .chevron,
.country-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.filter-menu,
.country-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 12px;
  z-index: 40;
  min-width: min(390px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 12px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 38px rgba(0, 32, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.search-filter.is-open .filter-menu,
.country-filter.is-open .country-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-menu button,
.country-menu button {
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 15px;
}

.filter-menu button:hover,
.filter-menu button:focus-visible,
.country-menu button:hover,
.country-menu button:focus-visible {
  background: rgba(6, 53, 69, 0.08);
}

.checklist-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}

.price-range-menu {
  width: min(440px, calc(100vw - 32px));
  padding: 18px;
}

.price-range-fields {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: end;
  gap: 12px;
}

.price-field {
  display: grid;
  gap: 6px;
  color: var(--black);
  font-size: 14px;
  line-height: 1.2;
}

.price-field span {
  white-space: nowrap;
}

.price-field select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(6, 53, 69, 0.16);
  border-radius: 8px;
  color: var(--black);
  background: var(--white);
  font: inherit;
}

.price-field select:focus-visible {
  outline: 2px solid rgba(6, 53, 69, 0.28);
  outline-offset: 2px;
}

.price-range-separator {
  padding-bottom: 11px;
  color: rgba(11, 15, 18, 0.62);
  font-size: 14px;
}

.price-range-menu .clear-selection {
  margin-top: 14px;
  padding-inline: 0;
  color: var(--black);
  font-weight: 400;
  text-decoration: none;
}

.filter-option {
  position: relative;
  min-height: 32px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease;
}

.filter-option:hover,
.filter-option:focus-within {
  background: rgba(6, 53, 69, 0.08);
}

.filter-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(6, 53, 69, 0.72);
  border-radius: 5px;
  background: var(--white);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 6px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.75);
  transition: opacity 120ms ease, transform 120ms ease;
}

.filter-option input:checked + .checkmark {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 4px 12px rgba(6, 53, 69, 0.22);
}

.filter-option input:checked + .checkmark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.filter-option input:focus-visible + .checkmark {
  outline: 2px solid rgba(6, 53, 69, 0.32);
  outline-offset: 2px;
}

.clear-selection {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  margin: 6px 0 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  color: rgba(6, 53, 69, 0.78);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 140ms ease, background 140ms ease;
}

.clear-selection:hover,
.clear-selection:focus-visible {
  color: var(--ink);
  background: rgba(6, 53, 69, 0.08);
}

.search-submit {
  flex: 1 1 198px;
  min-height: 39px;
  border: 0;
  border-radius: 999px;
  color: var(--white);
  background: var(--ink-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.search-submit:hover,
.search-submit:focus-visible,
.pill-button:hover,
.pill-button:focus-visible,
.community-button:hover,
.community-button:focus-visible {
  background: #0b4052;
  box-shadow: 0 14px 28px rgba(0, 48, 64, 0.2);
  transform: translateY(-2px);
}

.properties-section {
  padding-block: 0 var(--section-gap);
  background: var(--white);
  border-top: 0;
}

.property-layout {
  display: grid;
  grid-template-columns: minmax(264px, 0.72fr) minmax(464px, 1.08fr);
  align-items: start;
  gap: clamp(56px, 6vw, 128px);
}

.exclusive-section {
  padding-top: var(--section-gap);
}

.exclusive-layout {
  grid-template-columns: minmax(464px, 1.08fr) minmax(264px, 0.78fr);
  gap: clamp(56px, 5vw, 104px);
}

.section-copy {
  color: var(--black);
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 8px;
  color: var(--black);
  text-transform: uppercase;
  font-size: clamp(15px, 1vw, 22px);
  font-weight: 300;
}

.section-kicker span {
  width: clamp(96px, 11vw, 232px);
  height: 1px;
  background: currentColor;
}

.section-copy h2 {
  margin: 0 0 clamp(34px, 4vw, 72px);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(27px, 1.88vw, 45px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 600;
}

.section-copy p,
.diaspora-copy p,
.community-card p,
.diaspora-card p {
  font-size: var(--section-copy-size);
}

.section-copy p {
  max-width: 100%;
  margin: 0 0 18px;
  line-height: 1.5;
}

.premium-layout .section-copy p {
  max-width: 100%;
}

.pill-button,
.community-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  color: var(--white);
  background: var(--ink-deep);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.pill-button {
  min-width: 250px;
  margin-top: clamp(26px, 4vw, 72px);
}

.section-mobile-button {
  display: none;
}

.property-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gallery-gap);
  align-items: start;
}

.premium-layout .property-gallery,
.exclusive-layout .property-gallery {
  gap: 18px 22px;
}

.image-card,
.community-card,
.diaspora-card,
.feature-tile {
  display: block;
}

.image-card,
.community-card,
.diaspora-card {
  position: relative;
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.image-card:hover,
.image-card:focus-visible,
.image-card:active,
.image-card.is-active,
.community-card:hover,
.community-card:focus-within,
.community-card:active,
.community-card.is-active,
.diaspora-card:hover,
.diaspora-card:focus-visible,
.diaspora-card:active,
.diaspora-card.is-active {
  z-index: 3;
  transform: translateY(-8px);
}

/* Community and international cards sit flush against a clipping horizontal
   scroller, so the extra card scale made the first card's edge get cropped.
   They keep the lift above plus the image zoom below. Only the featured/exclusive
   image-cards — which are in a non-clipping grid — keep the subtle card scale. */
.image-card:hover,
.image-card:focus-visible,
.image-card:active,
.image-card.is-active {
  transform: translateY(-8px) scale(1.025);
}

.image-card span:last-child {
  display: block;
  margin-top: 8px;
  color: var(--black);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1.25;
}

.image-card-tall {
  grid-row: span 2;
  align-self: stretch;
}

.image-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #d7dcdd;
}

.image-card .image-frame {
  aspect-ratio: 1.56 / 1;
}

.image-card-tall .image-frame {
  height: 100%;
  min-height: 560px;
  aspect-ratio: auto;
}

.premium-layout .image-card .image-frame,
.exclusive-layout .image-card .image-frame {
  aspect-ratio: 1.66 / 1;
}

.premium-layout .image-card-tall .image-frame,
.exclusive-layout .image-card-tall .image-frame {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.premium-layout .image-card-tall,
.exclusive-layout .image-card-tall {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.premium-layout .image-card-tall .image-frame,
.exclusive-layout .image-card-tall .image-frame {
  flex: 1 1 auto;
}

/* Exclusive gallery alignment: the tall image (DG JKIA) uses a wider intrinsic
   image than Featured's, which inflated the two grid rows (247px vs the 220px the
   Crestpoint / DG West cards need), pushing the tall image ~26px below the stack.
   Taking the tall image out of flow stops it from sizing the rows, so the rows are
   driven by the regular cards and the tall lines up exactly with the stack —
   matching the Featured grid. */
.exclusive-layout .image-card-tall .image-frame img {
  position: absolute;
  inset: 0;
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.image-card:hover img,
.image-card:focus-visible img,
.image-card:active img,
.image-card.is-active img,
.community-card:hover img,
.community-card:focus-within img,
.community-card:active img,
.community-card.is-active img,
.diaspora-card:hover .diaspora-image > img:first-child,
.diaspora-card:focus-visible .diaspora-image > img:first-child,
.diaspora-card:active .diaspora-image > img:first-child,
.diaspora-card.is-active .diaspora-image > img:first-child,
.feature-tile:hover img,
.feature-tile:focus-visible img {
  transform: scale(1.055);
}

.partners {
  padding-block: var(--section-gap);
  background: var(--teal);
  color: var(--white);
  overflow: hidden;
}

.partners-inner h2 {
  margin: 0 0 36px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
}

.partner-marquee {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
}

.partner-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(96px, 10vw, 220px);
  padding-right: clamp(96px, 10vw, 220px);
  animation: partner-marquee 46s linear infinite;
  will-change: transform;
}

.partner-track img {
  width: auto;
  max-width: 490px;
  height: clamp(76px, 7vw, 140px);
  object-fit: contain;
  opacity: 0.45;
  filter: brightness(0) invert(1);
}

@keyframes partner-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Track holds two identical halves; shifting by exactly one half loops
       seamlessly. padding-right equals one gap so -50% lands pixel-perfect. */
    transform: translate3d(-50%, 0, 0);
  }
}

.wide-copy {
  max-width: none;
}

.wide-copy h2 {
  margin-bottom: 34px;
}

.wide-copy p {
  max-width: none;
}

.community-carousel {
  position: relative;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: start;
  column-gap: 24px;
  --community-arrow-top: 210px;
}

.community-viewport {
  width: 100%;
  overflow: hidden;
}

.community-track {
  display: flex;
  gap: 30px;
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.community-track::-webkit-scrollbar,
.diaspora-grid::-webkit-scrollbar,
.hero-tiles::-webkit-scrollbar,
.property-gallery::-webkit-scrollbar {
  display: none;
}

.community-card {
  flex: 0 0 calc((100% - 90px) / 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.community-card .image-frame {
  aspect-ratio: 0.78 / 1;
}

.community-card h3 {
  margin: 22px 0 12px;
  font-family: "Optima Local", Optima, var(--font-serif);
  font-size: clamp(25px, 1.45vw, 36px);
  line-height: 1.03;
  font-weight: 600;
}

.community-card h3 a {
  transition: color 180ms ease;
}

.community-card h3 a:hover,
.community-card h3 a:focus-visible {
  color: var(--teal);
}

.community-card p {
  margin: 0 0 22px;
  max-width: 300px;
  line-height: 1.38;
}

.community-button {
  align-self: flex-start;
  margin-top: auto;
}

.slider-arrow {
  position: relative;
  width: 48px;
  height: 48px;
  margin-top: calc(var(--community-arrow-top) - 43px);
  border: 0;
  background: transparent;
  color: var(--ink);
  transform: none;
  transition: opacity 180ms ease;
}

.slider-arrow.next {
  margin-left: 0;
  transform: none;
}

.slider-arrow span {
  position: absolute;
  inset: 0;
}

.slider-arrow span::before,
.slider-arrow span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left center;
}

.slider-arrow.prev {
  justify-self: center;
}

.slider-arrow.next {
  justify-self: center;
}

/* Make the next arrow a true mirror of the (known-good) prev arrow: give it prev's
   exact chevron and flip it horizontally. Flipping about the span centre keeps the
   same tidy chevron-inside-box relationship, so the click box lands on the visible
   arrow just like prev — instead of the old geometry that threw it into the margin. */
.slider-arrow.next span {
  transform: scaleX(-1);
}

.slider-arrow:disabled {
  cursor: default;
  opacity: 0.22;
}

.slider-arrow.prev span::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.slider-arrow.prev span::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Same chevron as prev; the scaleX(-1) on `.slider-arrow.next span` flips it to
   point right, keeping the arrow centred in its click box. */
.slider-arrow.next span::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.slider-arrow.next span::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.community-dots,
.diaspora-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.community-dots {
  grid-column: 2;
  margin-top: 56px;
}

.diaspora-dots {
  margin-top: 56px;
}

.community-dot,
.diaspora-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transition: background 180ms ease, transform 180ms ease;
}

.community-dot {
  background: rgba(6, 53, 69, 0.28);
}

.diaspora-dot {
  background: rgba(255, 255, 255, 0.32);
}

.community-dot.is-active {
  background: var(--ink);
  transform: scale(1.35);
}

.diaspora-dot.is-active {
  background: var(--white);
  transform: scale(1.35);
}

.diaspora-section {
  padding-block: var(--section-gap);
  color: var(--white);
  background: var(--teal);
}

.diaspora-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  position: relative;
  z-index: 20;
}

.dark-copy,
.dark-copy .section-kicker,
.dark-copy h2 {
  color: var(--white);
}

.dark-copy h2 {
  margin-bottom: 0;
}

.country-filter {
  position: relative;
  margin-bottom: 12px;
  z-index: 30;
}

.country-trigger {
  width: 252px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  border: 2px solid var(--white);
  border-radius: 999px;
  color: var(--white);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.country-menu {
  right: 0;
  left: auto;
  z-index: 40;
}

.diaspora-copy {
  margin-top: 44px;
}

.diaspora-copy p {
  margin: 0 0 8px;
  line-height: 1.48;
}

.diaspora-grid {
  display: flex;
  gap: 30px;
  margin-top: 36px;
  padding-top: 20px;
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.diaspora-card {
  flex: 0 0 calc((100% - 90px) / 4);
  min-width: 0;
  color: var(--white);
  scroll-snap-align: start;
  transition: opacity 180ms ease, transform 180ms ease;
}

.diaspora-card.is-hidden {
  display: none;
}

.diaspora-image {
  aspect-ratio: 0.73 / 1;
}

.diaspora-image .flag {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.diaspora-card h3 {
  margin: 22px 0 10px;
  font-family: "Optima Local", Optima, var(--font-serif);
  font-size: clamp(24px, 1.5vw, 32px);
  line-height: 1.05;
  font-weight: 500;
}

.diaspora-card .location {
  position: relative;
  display: block;
  margin-bottom: 28px;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 300;
}

.diaspora-card .location::before,
.diaspora-card .location::after {
  content: "";
  position: absolute;
}

.diaspora-card .location::before {
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 4px solid var(--gold);
  border-radius: 50%;
}

.diaspora-card .location::after {
  left: 4px;
  top: 12px;
  width: 9px;
  height: 20px;
  border-radius: 0 0 9px 9px;
  background: var(--gold);
}

.diaspora-card p {
  margin: 0;
  max-width: 310px;
  line-height: 1.38;
}

.content-tiles {
  padding-block: var(--section-gap);
  background: var(--white);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.feature-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 0.72 / 1;
}

.feature-tile > img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feature-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 53, 69, 0.48), rgba(3, 53, 69, 0.68)),
    rgba(3, 53, 69, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.feature-tile:hover::after,
.feature-tile:focus-visible::after {
  opacity: 1;
}

.feature-tile span {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 100%;
  z-index: 2;
  display: block;
  padding: 0 22px;
  color: var(--gold);
  font-family: var(--font-optima);
  font-size: clamp(22.95px, 2.025vw, 39.15px);
  line-height: 1.12;
  font-weight: 500;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 220ms ease;
}

.feature-tile:hover span,
.feature-tile:focus-visible span {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.site-footer {
  padding-block: 41px;
  color: var(--white);
  background: #003546;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.95fr 0.72fr 0.85fr;
  gap: clamp(48px, 6vw, 120px);
}

.site-footer h2,
.footer-subscribe h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
}

.footer-contact address {
  margin: 26px 0 32px;
  color: rgba(255, 255, 255, 0.9);
  font-style: normal;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.45;
}

.footer-contact a {
  font-size: 22px;
  font-weight: 800;
}

.footer-subscribe form {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, 410px) max-content;
  align-items: center;
  gap: 34px;
  margin: 26px 0 26px;
}

.footer-subscribe input,
.footer-subscribe button {
  height: 46px;
  border: 0;
}

.footer-subscribe input {
  min-width: 0;
  padding: 0 26px;
  color: var(--ink);
  background: #d9d9d9;
  font-size: 16px;
  font-style: italic;
}

.footer-subscribe input::placeholder {
  color: #9f9f9f;
}

.footer-subscribe button {
  padding: 0;
  color: var(--white);
  background: transparent;
  font-size: 16px;
  font-weight: 800;
}

.footer-subscribe h3 {
  margin-bottom: 15px;
}

.socials {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials a {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.socials svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.footer-links ul {
  display: grid;
  gap: 7px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
}

.footer-links a {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
}

.reveal {
  --motion-translate-x: 0px;
  --motion-translate-y: 0px;
  --motion-duration: 1.2s;
  --motion-delay: 0.001s;
  --motion-fade-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --motion-glide-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  transform: none;
  backface-visibility: hidden;
}

.reveal.reveal-from-left {
  --motion-translate-x: -150px;
}

.reveal.reveal-from-right {
  --motion-translate-x: 150px;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  animation: motion-fadeIn var(--motion-duration) var(--motion-fade-ease) var(--motion-delay) backwards;
}

.reveal.reveal-from-left.is-visible,
.reveal.reveal-from-right.is-visible {
  animation-name: motion-glideIn;
  animation-timing-function: var(--motion-glide-ease);
}

.wide-copy.reveal,
.diaspora-copy.reveal,
.section-copy.reveal,
.diaspora-head.reveal,
.partners-inner.reveal,
.footer-grid.reveal,
.property-gallery.reveal,
.community-carousel.reveal,
.diaspora-grid.reveal,
.tile-grid.reveal {
  opacity: 1;
  transform: none;
}

.wide-copy.reveal.is-visible,
.diaspora-copy.reveal.is-visible,
.section-copy.reveal.is-visible,
.diaspora-head.reveal.is-visible,
.partners-inner.reveal.is-visible,
.footer-grid.reveal.is-visible,
.property-gallery.reveal.is-visible,
.community-carousel.reveal.is-visible,
.diaspora-grid.reveal.is-visible,
.tile-grid.reveal.is-visible {
  animation: none;
}

.section-copy.reveal .section-kicker,
.section-copy.reveal h2,
.section-copy.reveal p,
.section-copy.reveal .pill-button,
.diaspora-head.reveal .section-kicker,
.diaspora-head.reveal h2,
.diaspora-head.reveal .country-filter,
.diaspora-copy.reveal p,
.partners-inner.reveal h2,
.partners-inner.reveal .partner-marquee,
.footer-grid.reveal > *,
.property-gallery.reveal .image-card .image-frame,
.property-gallery.reveal .image-card span:last-child,
.community-carousel.reveal .community-card .image-frame,
.community-carousel.reveal .community-card h3,
.community-carousel.reveal .community-card p,
.community-carousel.reveal .community-card .community-button,
.diaspora-grid.reveal .diaspora-card .diaspora-image,
.diaspora-grid.reveal .diaspora-card h3,
.diaspora-grid.reveal .diaspora-card .location,
.diaspora-grid.reveal .diaspora-card p,
.tile-grid.reveal .feature-tile {
  --motion-translate-x: 0px;
  --motion-translate-y: 0px;
  opacity: 0;
  transform: none;
  backface-visibility: hidden;
}

.property-gallery.reveal .image-card,
.community-carousel.reveal .community-card,
.diaspora-grid.reveal .diaspora-card,
.tile-grid.reveal .feature-tile {
  --item-delay: 0s;
}

.property-gallery.reveal .image-card:nth-child(4n + 2),
.community-carousel.reveal .community-card:nth-child(4n + 2),
.diaspora-grid.reveal .diaspora-card:nth-child(4n + 2),
.tile-grid.reveal .feature-tile:nth-child(4n + 2) {
  --item-delay: 0.05s;
}

.property-gallery.reveal .image-card:nth-child(4n + 3),
.community-carousel.reveal .community-card:nth-child(4n + 3),
.diaspora-grid.reveal .diaspora-card:nth-child(4n + 3),
.tile-grid.reveal .feature-tile:nth-child(4n + 3) {
  --item-delay: 0.1s;
}

.property-gallery.reveal .image-card:nth-child(4n),
.community-carousel.reveal .community-card:nth-child(4n),
.diaspora-grid.reveal .diaspora-card:nth-child(4n),
.tile-grid.reveal .feature-tile:nth-child(4n) {
  --item-delay: 0.15s;
}

.section-copy.reveal.reveal-from-left h2,
.section-copy.reveal.reveal-from-left p,
.section-copy.reveal.reveal-from-left .pill-button,
.property-gallery.reveal.reveal-from-left .image-card .image-frame {
  --motion-translate-x: -150px;
}

.section-copy.reveal.reveal-from-right h2,
.section-copy.reveal.reveal-from-right p,
.section-copy.reveal.reveal-from-right .pill-button,
.property-gallery.reveal.reveal-from-right .image-card .image-frame {
  --motion-translate-x: 150px;
}

.section-copy.reveal h2,
.diaspora-head.reveal h2,
.partners-inner.reveal .partner-marquee,
.footer-grid.reveal > :nth-child(even),
.community-carousel.reveal .community-card:nth-child(odd) .image-frame,
.diaspora-grid.reveal .diaspora-card:nth-child(odd) .diaspora-image,
.tile-grid.reveal .feature-tile:nth-child(odd) {
  --motion-translate-x: 150px;
}

.section-copy.reveal p,
.section-copy.reveal .pill-button,
.diaspora-head.reveal .country-filter,
.community-carousel.reveal .community-card:nth-child(even) .image-frame,
.diaspora-grid.reveal .diaspora-card:nth-child(even) .diaspora-image,
.tile-grid.reveal .feature-tile:nth-child(even) {
  --motion-translate-x: -150px;
}

.wide-copy.reveal h2,
.wide-copy.reveal p,
.diaspora-copy.reveal p,
.community-carousel.reveal .community-card h3,
.diaspora-grid.reveal .diaspora-card h3 {
  --motion-translate-x: 60px;
}

.community-carousel.reveal .community-card p,
.community-carousel.reveal .community-card .community-button,
.diaspora-grid.reveal .diaspora-card .location,
.diaspora-grid.reveal .diaspora-card p,
.property-gallery.reveal .image-card span:last-child {
  --motion-translate-x: 0px;
}

.section-copy.reveal.is-visible .section-kicker,
.section-copy.reveal.is-visible h2,
.section-copy.reveal.is-visible p,
.section-copy.reveal.is-visible .pill-button,
.diaspora-head.reveal.is-visible .section-kicker,
.diaspora-head.reveal.is-visible h2,
.diaspora-head.reveal.is-visible .country-filter,
.diaspora-copy.reveal.is-visible p,
.partners-inner.reveal.is-visible h2,
.partners-inner.reveal.is-visible .partner-marquee,
.footer-grid.reveal.is-visible > *,
.motion-item-visible .image-frame,
.motion-item-visible span:last-child,
.motion-item-visible h3,
.motion-item-visible p,
.motion-item-visible .community-button,
.motion-item-visible .diaspora-image,
.motion-item-visible .location,
.tile-grid.reveal .motion-item-visible {
  opacity: 1;
  transform: none;
  animation: motion-glideIn var(--motion-duration) var(--motion-glide-ease) var(--motion-delay) backwards;
}

.section-copy.reveal.is-visible .section-kicker,
.diaspora-head.reveal.is-visible .section-kicker,
.section-copy.reveal.is-visible p,
.section-copy.reveal.is-visible .pill-button,
.diaspora-copy.reveal.is-visible p,
.partners-inner.reveal.is-visible h2,
.footer-grid.reveal.is-visible > *,
.motion-item-visible span:last-child,
.motion-item-visible p,
.motion-item-visible .community-button,
.motion-item-visible .location {
  animation-name: motion-fadeIn;
  animation-timing-function: var(--motion-fade-ease);
}

.reveal .section-kicker span {
  --motion-translate-x: 150px;
  --motion-translate-y: 0px;
  opacity: 0;
  transform: none;
  backface-visibility: hidden;
}

.reveal.is-visible .section-kicker span {
  opacity: 1;
  animation: motion-glideIn var(--motion-duration) var(--motion-glide-ease) var(--motion-delay) backwards;
}

.section-copy.reveal h2,
.diaspora-head.reveal h2,
.partners-inner.reveal .partner-marquee,
.property-gallery.reveal .image-card .image-frame,
.community-carousel.reveal .community-card .image-frame,
.diaspora-grid.reveal .diaspora-card .diaspora-image,
.tile-grid.reveal .feature-tile {
  --motion-delay: calc(var(--item-delay, 0s) + 0.001s);
}

.section-copy.reveal p,
.diaspora-copy.reveal p,
.property-gallery.reveal .image-card span:last-child,
.community-carousel.reveal .community-card h3,
.diaspora-grid.reveal .diaspora-card h3 {
  --motion-delay: calc(var(--item-delay, 0s) + 0.09s);
}

.section-copy.reveal .pill-button,
.diaspora-head.reveal .country-filter,
.community-carousel.reveal .community-card p,
.diaspora-grid.reveal .diaspora-card .location {
  --motion-delay: calc(var(--item-delay, 0s) + 0.16s);
}

.community-carousel.reveal .community-card .community-button,
.diaspora-grid.reveal .diaspora-card p {
  --motion-delay: calc(var(--item-delay, 0s) + 0.23s);
}

/* Settled-state fix. The card-grid reveal rules use `.motion-item-visible <child>`
   (specificity 0,2,0), but the matching hidden rules are container-scoped
   (`.community-carousel.reveal .community-card .image-frame`, up to 0,4,0). The
   animation plays regardless of specificity, but once it ends the higher-specificity
   hidden rule would win again and the content would vanish. These selectors mirror
   the hidden rules plus `.motion-item-visible` on the card, so the resting state
   outranks the hidden state. The animation itself is still declared on
   `.motion-item-visible` and is untouched here. */
.property-gallery.reveal .image-card.motion-item-visible .image-frame,
.property-gallery.reveal .image-card.motion-item-visible span:last-child,
.community-carousel.reveal .community-card.motion-item-visible .image-frame,
.community-carousel.reveal .community-card.motion-item-visible h3,
.community-carousel.reveal .community-card.motion-item-visible p,
.community-carousel.reveal .community-card.motion-item-visible .community-button,
.diaspora-grid.reveal .diaspora-card.motion-item-visible .diaspora-image,
.diaspora-grid.reveal .diaspora-card.motion-item-visible h3,
.diaspora-grid.reveal .diaspora-card.motion-item-visible .location,
.diaspora-grid.reveal .diaspora-card.motion-item-visible p,
.tile-grid.reveal .feature-tile.motion-item-visible {
  opacity: 1;
  transform: none;
}

/* Blog / insight / testimonial tiles: take them out of the scroll-reveal path.
   The reveal animation could leave a tile stuck hidden (backwards fill) and left
   the hover name off-centre (its `transform: none` dropped the -50% X centering).
   Keep each tile permanently visible, and keep the name a centred, hover-only
   overlay — winning over the generic .motion-item-visible rules. */
.tile-grid.reveal .feature-tile,
.tile-grid.reveal .feature-tile.motion-item-visible {
  opacity: 1;
  transform: none;
  animation: none;
}

.tile-grid.reveal .feature-tile > img {
  opacity: 1;
  animation: none;
}

.tile-grid.reveal .feature-tile span,
.tile-grid.reveal .feature-tile.motion-item-visible span {
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: none;
}

.tile-grid.reveal .feature-tile:hover span,
.tile-grid.reveal .feature-tile:focus-visible span,
.tile-grid.reveal .feature-tile.motion-item-visible:hover span,
.tile-grid.reveal .feature-tile.motion-item-visible:focus-visible span {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Partners marquee: the logos must span the full width immediately and let the
   continuous loop be the only motion — no blank ribbon, no reveal slide-in.
   The loop lives on `.partner-track`; this only cancels the container's reveal
   entrance so the ribbon is never hidden or offset. The `Our Partners:` heading
   keeps its normal reveal. */
.partners-inner.reveal .partner-marquee,
.partners-inner.reveal.is-visible .partner-marquee {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero .reveal,
.hero .reveal.is-visible {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes motion-fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: var(--comp-opacity, 1);
  }
}

@keyframes motion-floatIn {
  0% {
    opacity: 0;
    animation-timing-function: step-end;
  }

  0.0001% {
    opacity: 0;
    transform: translate3d(var(--motion-translate-x), var(--motion-translate-y), 0) rotate(var(--comp-rotate-z, 0deg));
  }

  100% {
    opacity: var(--comp-opacity, 1);
    transform: translate3d(0, 0, 0) rotate(var(--comp-rotate-z, 0deg));
  }
}

@keyframes motion-glideIn {
  0% {
    opacity: 0;
    animation-timing-function: step-end;
  }

  0.0001% {
    opacity: var(--comp-opacity, 1);
    transform: translate3d(var(--motion-translate-x), var(--motion-translate-y), 0) rotate(var(--comp-rotate-z, 0deg));
  }

  100% {
    opacity: var(--comp-opacity, 1);
    transform: translate3d(0, 0, 0) rotate(var(--comp-rotate-z, 0deg));
  }
}

/* Motion is gated behind `html.motion-ready`, which the head bootstrap in
   index.html adds before first paint — only after confirming IntersectionObserver
   support and no reduced-motion preference. Until then, and for no-JS / unsupported
   browsers / reduced-motion, every reveal element is forced to its final visible
   state so content can never be trapped hidden. This is the glitch/FOUC safety net. */
html:not(.motion-ready) .reveal,
html:not(.motion-ready) .reveal.reveal-from-left,
html:not(.motion-ready) .reveal.reveal-from-right,
html:not(.motion-ready) .reveal.is-visible,
html:not(.motion-ready) .reveal.reveal-from-left.is-visible,
html:not(.motion-ready) .reveal.reveal-from-right.is-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html:not(.motion-ready) .section-copy.reveal .section-kicker,
html:not(.motion-ready) .section-copy.reveal h2,
html:not(.motion-ready) .section-copy.reveal p,
html:not(.motion-ready) .section-copy.reveal .pill-button,
html:not(.motion-ready) .diaspora-head.reveal .section-kicker,
html:not(.motion-ready) .diaspora-head.reveal h2,
html:not(.motion-ready) .diaspora-head.reveal .country-filter,
html:not(.motion-ready) .diaspora-copy.reveal p,
html:not(.motion-ready) .partners-inner.reveal h2,
html:not(.motion-ready) .partners-inner.reveal .partner-marquee,
html:not(.motion-ready) .footer-grid.reveal > *,
html:not(.motion-ready) .property-gallery.reveal .image-card .image-frame,
html:not(.motion-ready) .property-gallery.reveal .image-card span:last-child,
html:not(.motion-ready) .community-carousel.reveal .community-card .image-frame,
html:not(.motion-ready) .community-carousel.reveal .community-card h3,
html:not(.motion-ready) .community-carousel.reveal .community-card p,
html:not(.motion-ready) .community-carousel.reveal .community-card .community-button,
html:not(.motion-ready) .diaspora-grid.reveal .diaspora-card .diaspora-image,
html:not(.motion-ready) .diaspora-grid.reveal .diaspora-card h3,
html:not(.motion-ready) .diaspora-grid.reveal .diaspora-card .location,
html:not(.motion-ready) .diaspora-grid.reveal .diaspora-card p,
html:not(.motion-ready) .tile-grid.reveal .feature-tile,
html:not(.motion-ready) .reveal .section-kicker span,
html:not(.motion-ready) .motion-item-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* The search bar sits above the featured content. Per request, motion begins at
   featured properties, so the search bar stays static even once motion is ready. */
.search-bar.reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1920px) {
  :root {
    --layout-width: 65.1667vw;
    --section-gap: 72px;
    --section-copy-size: 15.3px;
    --hero-title-size: clamp(42px, 2.24vw, 46px);
    --hero-body-size: clamp(16px, 0.98vw, 21px);
    --hero-card-width: clamp(176px, 9.6vw, 224px);
    --hero-card-height: clamp(264px, 24.8svh, 344px);
    --hero-card-gap: clamp(22px, 1.36vw, 34px);
  }

  .nav-shell {
    width: 81.4583vw;
    height: 3.75vw;
    padding: 0 2.1875vw 0 3.9583vw;
    grid-template-columns: 13.5417vw 1fr 3.75vw;
  }

  .brand img {
    width: 7.2917vw;
  }

  .desktop-nav {
    gap: 2.8125vw;
    padding: 0 2.0833vw;
    font-size: 0.8333vw;
  }

  .desktop-nav a {
    padding: 1.3542vw 0;
  }

  .whatsapp {
    width: 2.7083vw;
    height: 2.7083vw;
  }

  .whatsapp svg {
    width: 2.2396vw;
    height: 2.2396vw;
  }

  .hero-inner {
    grid-template-columns: minmax(336px, 0.76fr) minmax(608px, 1.24fr);
    padding-block: clamp(128px, 14svh, 174px) clamp(96px, 9svh, 132px);
  }

  .hero-showcase {
    padding-bottom: clamp(94px, 11svh, 146px);
  }

  .search-bar {
    min-height: 61px;
    padding: 11px;
  }
}

@media (max-width: 1280px) {
  :root {
    --layout-width: 80vw;
    --section-gap: 50px;
    --section-copy-size: 15.3px;
    --hero-title-size: clamp(30px, 3.52vw, 43px);
    --hero-body-size: clamp(14px, 1.32vw, 17px);
    --hero-card-width: clamp(114px, 10.4vw, 148px);
    --hero-card-height: clamp(184px, 21.6svh, 248px);
    --hero-card-gap: 14px;
  }

  .site-header {
    padding-top: 28px;
  }

  .nav-shell {
    width: calc(100% - 44px);
    padding-inline: 42px;
    grid-template-columns: 210px 1fr 58px;
  }

  .desktop-nav {
    gap: 24px;
    padding-inline: 24px;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    grid-template-columns: minmax(300px, 0.78fr) minmax(460px, 1fr);
    gap: 42px;
    padding-block: 106px 86px;
  }

  .hero-showcase {
    padding-bottom: 104px;
  }

  .hero-property-copy {
    width: min(360px, 68%);
  }

  .search-bar {
    border-radius: 36px;
  }

  .search-filter::after {
    display: none;
  }

  .property-layout,
  .exclusive-layout {
    grid-template-columns: minmax(240px, 0.82fr) minmax(416px, 1.1fr);
    gap: 48px;
  }

  .community-carousel {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    column-gap: 18px;
  }

  .slider-arrow.next {
    margin-left: 37px;
    transform: none;
  }

  .community-card,
  .diaspora-card {
    flex-basis: calc((100% - 30px) / 2);
  }

  .footer-grid {
    grid-template-columns: 1fr 1.3fr;
  }
}

@media (max-width: 1180px) {
  .search-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 32px;
    gap: 4px;
    padding: 12px;
  }

  .search-submit {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .filter-trigger {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
    min-height: 44px;
    padding-inline: clamp(12px, 2.1vw, 22px);
    font-size: clamp(11px, 1.15vw, 13px);
  }

  .filter-trigger svg {
    width: 28px;
    height: 28px;
  }

  .search-bar .filter-menu {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 4px 0 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }

  .search-bar .search-filter.is-open .filter-menu {
    display: block;
  }

  .search-bar .search-filter.is-open .checklist-menu,
  .search-bar .search-filter.is-open .community-filter-menu {
    display: grid;
  }

  .price-range-menu {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .site-header {
    padding-top: 22px;
  }

  .nav-shell {
    height: 68px;
    grid-template-columns: 1fr 50px;
    padding: 0 26px 0 34px;
  }

  .brand img {
    width: 110px;
  }

  .desktop-nav,
  .desktop-whatsapp {
    display: none;
  }

  .menu-toggle {
    width: 38px;
    height: 20px;
    display: grid;
    place-items: center;
    gap: 1px;
    border: 0;
    border-radius: 0;
    color: var(--white);
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    background: rgba(0, 22, 30, 0.48);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    pointer-events: auto;
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 100%);
    height: auto;
    max-height: none;
    padding: 24px 30px 22px;
    color: var(--white);
    background: rgba(0, 47, 63, 0.8);
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition: transform 360ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .mobile-menu.is-open .mobile-menu-panel {
    transform: translateX(0);
  }

  .mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .mobile-brand img {
    width: 116px;
  }

  .menu-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: var(--white);
    background: transparent;
  }

  .menu-close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .mobile-nav-list {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 14px;
    font-weight: 100;
    transition: color 0.32s ease;
  }

  .mobile-nav-list a:hover,
  .mobile-nav-list a:focus-visible {
    color: var(--gold);
  }

  .mobile-nav-list a.mobile-whatsapp {
    justify-content: flex-start;
    gap: 5px;
  }

  .mobile-whatsapp svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
  }

  /* Leasing sub-links: always visible, indented, under the "Leasing" row. */
  .mobile-nav-has-sublist > a {
    border-bottom: 0;
    padding-bottom: 8px;
  }

  .mobile-nav-sublist {
    display: grid;
    gap: 0;
    margin: 0 0 4px;
    padding: 0 0 12px 18px;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .mobile-nav-sublist a {
    display: block;
    padding: 10px 0;
    border-bottom: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 400;
    transition: color 0.32s ease;
  }

  .mobile-nav-sublist a:hover,
  .mobile-nav-sublist a:focus-visible {
    color: var(--gold);
  }
}

@media (max-width: 760px) {
  :root {
    --layout-width: 80vw;
    --section-gap: 32px;
    --section-copy-size: 12px;
    --hero-title-size: clamp(22px, 5.28vw, 32px);
    --hero-body-size: clamp(13px, 2.9vw, 14.5px);
    --hero-card-width: clamp(90px, 23.2vw, 131px);
    --hero-card-height: clamp(118px, 30.4vw, 176px);
    --hero-card-gap: 8px;
  }

  .site-header,
  main,
  footer,
  .hero,
  .search-section,
  .properties-section,
  .partners,
  .communities-section,
  .diaspora-section,
  .content-tiles {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    .site-header,
    main,
    footer,
    .hero,
    .search-section,
    .properties-section,
    .partners,
    .communities-section,
    .diaspora-section,
    .content-tiles {
      overflow-x: clip;
    }
  }

  .site-header {
    padding-top: 16px;
  }

  .nav-shell {
    width: calc(100% - 32px);
    height: 64px;
    padding: 0 18px 0 26px;
  }

  .brand img {
    width: 100px;
  }

  .hero {
    height: 100svh;
    min-height: 100svh;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    align-content: start;
    gap: clamp(16px, 2.8svh, 26px);
    padding-block: clamp(98px, 13svh, 132px) calc(66px + env(safe-area-inset-bottom));
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-copy h1 {
    max-width: none;
    margin-bottom: 14px;
    line-height: 1.02;
  }

  .hero-copy p {
    max-width: min(580px, 100%);
    padding-top: 0;
    font-size: var(--hero-body-size);
    line-height: 1.28;
  }

  .hero-showcase {
    align-self: start;
    width: 100%;
    display: grid;
    gap: 12px;
    padding-bottom: 0;
    transform: none;
  }

  .hero-tiles {
    width: 100%;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 4px 8px;
  }

  .hero-tile {
    height: var(--hero-card-height);
    scroll-snap-align: none;
  }

  .hero-tile.is-active,
  .hero-tile:hover,
  .hero-tile:focus-visible {
    transform: translateY(-8px) scale(1.035);
  }

  .hero-property-copy {
    position: static;
    width: 100%;
    text-align: right;
  }

  .hero-property-copy h2 {
    margin-bottom: 5px;
    font-size: clamp(18px, 4.32vw, 24px);
  }

  .hero-property-copy p {
    max-width: 100%;
    font-size: clamp(10px, 2.55vw, 13px);
    line-height: 1.18;
  }

  .hero-dots {
    bottom: calc(22px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .hero-dot {
    width: 9px;
    height: 9px;
  }

  .hero-dot.is-active {
    width: 22px;
    height: 22px;
    border-width: 5px;
  }

  .search-section {
    margin-bottom: -1px;
  }

  .search-bar {
    grid-template-columns: 1fr;
    border-radius: 28px;
    padding: 11px;
    gap: 4px;
  }

  .search-submit {
    grid-column: 1;
    margin-top: 4px;
  }

  .filter-trigger {
    min-height: 43px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .filter-trigger svg {
    width: 28px;
    height: 28px;
  }

  .filter-menu,
  .country-menu {
    left: 0;
    width: 100%;
    min-width: 0;
  }

  .search-bar .filter-menu {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 4px 0 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }

  .search-bar .search-filter.is-open .filter-menu {
    display: block;
  }

  .search-bar .search-filter.is-open .checklist-menu {
    display: grid;
  }

  .price-range-menu {
    width: min(420px, calc(100vw - 32px));
  }

  .checklist-menu {
    grid-template-columns: 1fr;
  }

  .community-filter-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 2px;
    max-height: none;
    overflow: visible;
  }

  .search-bar .search-filter.is-open .community-filter-menu {
    display: grid;
  }

  .community-filter-menu .clear-selection {
    grid-column: 1 / -1;
    position: static;
    margin-top: 8px;
    background: var(--white);
  }

  .property-layout,
  .exclusive-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .exclusive-layout .section-copy {
    order: 1;
  }

  .exclusive-layout .property-gallery {
    order: 2;
  }

  .section-kicker {
    gap: 18px;
    font-size: 12px;
  }

  .section-kicker span {
    width: 108px;
  }

  .section-copy h2 {
    margin-bottom: 24px;
    font-size: clamp(24px, 5.6vw, 34px);
  }

  .section-copy p,
  .premium-layout .section-copy p,
  .exclusive-layout .section-copy p {
    width: 100%;
    max-width: none;
    font-size: var(--section-copy-size);
  }

  .pill-button {
    width: 100%;
    min-width: 0;
    margin-top: 18px;
  }

  .premium-layout > .section-copy .pill-button,
  .exclusive-layout > .section-copy .pill-button {
    display: none;
  }

  .premium-layout > .section-mobile-button,
  .exclusive-layout > .section-mobile-button {
    display: inline-flex;
    order: 3;
  }

  .property-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .image-card,
  .image-card-tall {
    width: 100%;
    grid-row: auto;
    scroll-snap-align: none;
  }

  .image-card:hover,
  .image-card:focus-visible,
  .image-card:active,
  .image-card.is-active,
  .community-card:hover,
  .community-card:focus-within,
  .community-card:active,
  .community-card.is-active,
  .diaspora-card:hover,
  .diaspora-card:focus-visible,
  .diaspora-card:active,
  .diaspora-card.is-active {
    transform: translateY(-4px) scale(1.015);
  }

  .image-card .image-frame,
  .image-card-tall .image-frame,
  .premium-layout .image-card .image-frame,
  .premium-layout .image-card-tall .image-frame,
  .exclusive-layout .image-card .image-frame,
  .exclusive-layout .image-card-tall .image-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.12 / 1;
  }

  .partners-inner h2 {
    margin-bottom: 28px;
  }

  .partner-track {
    gap: 72px;
  }

  .partner-track img {
    height: 58px;
    max-width: 220px;
  }

  .community-carousel {
    margin-top: 14px;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .community-viewport {
    width: 100%;
  }

  .community-card {
    flex-basis: 64%;
  }

  .slider-arrow {
    display: none;
  }

  .community-dots {
    grid-column: 1;
    margin-top: 2px;
  }

  .diaspora-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .country-filter {
    margin-bottom: 0;
  }

  .country-trigger {
    width: 100%;
  }

  .country-menu {
    width: 100%;
  }

  .diaspora-copy {
    margin-top: 28px;
  }

  .diaspora-grid {
    gap: 22px;
    margin-top: 14px;
  }

  .diaspora-card {
    flex-basis: 64%;
  }

  .diaspora-image {
    aspect-ratio: 0.82 / 1;
  }

  .diaspora-card .location {
    margin-bottom: 22px;
  }

  .tile-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .feature-tile {
    aspect-ratio: 1 / 1.08;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .site-footer h2,
  .footer-subscribe h3 {
    font-size: 14px;
  }

  .footer-contact address {
    margin: 26px 0 30px;
    font-size: 13px;
  }

  .footer-contact a {
    font-size: 18px;
  }

  .footer-subscribe form {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 26px 0 30px;
  }

  .footer-subscribe button {
    width: auto;
    height: 42px;
    justify-self: start;
  }

  .footer-links ul {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --layout-width: 80vw;
    --section-gap: 28px;
    --section-copy-size: 12px;
    --hero-title-size: clamp(19px, 5.76vw, 27px);
    --hero-body-size: clamp(12px, 3.15vw, 13.5px);
    --hero-card-width: clamp(78px, 22.4vw, 101px);
    --hero-card-height: clamp(112px, 30vw, 148px);
    --hero-card-gap: 6px;
  }

  .mobile-menu-panel {
    padding: 24px;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    gap: clamp(14px, 2.4svh, 22px);
    padding-block: clamp(168px, 26svh, 238px) calc(58px + env(safe-area-inset-bottom));
  }

  .hero-copy h1 {
    margin-bottom: 12px;
  }

  .hero-copy p {
    max-width: 100%;
  }

  .hero-showcase {
    gap: 10px;
    padding-bottom: 0;
  }

  .hero-property-copy h2 {
    font-size: clamp(16px, 4.4vw, 20px);
  }

  .hero-property-copy p {
    font-size: clamp(10px, 2.8vw, 12px);
  }

  .search-bar {
    border-radius: 24px;
    padding: 10px;
  }

  .filter-trigger {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
    min-height: 42px;
  }

  .price-range-menu {
    width: min(360px, calc(100vw - 32px));
    padding: 16px;
  }

  .price-range-fields {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }

  .price-field {
    font-size: 13px;
  }

  .price-field select {
    padding-inline: 8px;
  }

  .image-card,
  .image-card-tall {
    width: 100%;
    flex-basis: auto;
  }

  .community-card,
  .diaspora-card {
    flex-basis: 67%;
  }

  .section-copy h2 {
    font-size: clamp(22px, 7.2vw, 30px);
  }
}

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

/* Keep the homepage search bar dimensionally identical to the Rent filter. */
@media (max-width: 1280px) {
  .search-bar {
    width: min(1110px, calc(100% - 44px));
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .search-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, 0.82fr);
    gap: 0;
    padding: 7px;
    border-radius: 999px;
  }

  .search-submit {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }

  .filter-trigger {
    min-height: 39px;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 0 clamp(10px, 1.05vw, 20px);
    font-size: clamp(9px, 0.64vw, 12px);
  }

  .filter-trigger svg {
    width: 21px;
    height: 21px;
  }

  .search-bar .filter-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 12px;
    width: auto;
    max-width: calc(100vw - 32px);
    min-width: min(390px, calc(100vw - 32px));
    margin: 0;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  .search-bar .search-filter.is-open .filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .search-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 150px;
    gap: 0;
    padding: 7px;
    border-radius: 999px;
  }

  .search-submit {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .filter-trigger {
    min-height: 39px;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 0 clamp(10px, 1.05vw, 20px);
    font-size: clamp(9px, 0.64vw, 12px);
  }

  .filter-trigger svg {
    width: 21px;
    height: 21px;
  }

  .search-bar .filter-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 12px;
    width: auto;
    max-width: calc(100vw - 32px);
    min-width: min(390px, calc(100vw - 32px));
    margin: 0;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  .search-bar .search-filter.is-open .filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .search-bar {
    width: min(100% - 44px, 560px);
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 7px;
    border-radius: 28px;
  }

  .search-submit {
    grid-column: 1;
    grid-row: auto;
    min-height: 39px;
    margin-top: 4px;
  }

  .filter-trigger {
    min-height: 39px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .filter-trigger svg {
    width: 21px;
    height: 21px;
  }

  .search-bar .filter-menu {
    position: absolute;
    top: 100%;
    right: auto;
    left: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
}

/* Site-wide compact typography, benchmarked against HassConsult. */
body p {
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
}

/* Unified navbar typography and current-page state. Scoped to `> li > a`
   (top-level Buy/Rent/Leasing/Services triggers only) — NOT the plain
   descendant `a`, which would also reach into .nav-dropdown/.mobile-nav-sublist
   and blow the submenu items up to this same bold 16px, stomping their own
   (intentionally smaller/lighter) .nav-dropdown a / .mobile-nav-sublist a
   rules via !important. That collision is what made the Buy/Leasing dropdown
   panels render inconsistently bold/oversized depending on page. */
.site-header .desktop-nav,
.site-header .desktop-nav > li > a,
.site-header .mobile-nav-list,
.site-header .mobile-nav-list > li > a {
  font-family: "Optima Local", OptimaLocal, Optima, Candara, "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.site-header .desktop-nav > li > a[aria-current="page"],
.site-header .mobile-nav-list > li > a[aria-current="page"] {
  color: #d3a23b !important;
}

body main h1:not(.hero *):not(.site-header *) {
  font-size: clamp(30px, 3vw, 38px) !important;
  line-height: 1.12 !important;
}

body main h2:not(.hero *):not(.site-header *) {
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.15 !important;
}

body main h3:not(.hero *):not(.site-header *) {
  font-size: clamp(18px, 1.5vw, 24px) !important;
  line-height: 1.2 !important;
}

.site-footer h2,
.site-footer h3,
.site-footer .footer-subscribe h3 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

.site-footer address,
.site-footer p,
.site-footer a,
.site-footer input,
.site-footer button,
.site-footer .footer-links,
.site-footer .footer-links a,
.site-footer .footer-contact a {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* ============================================================================
   Search results — rendered by property-search.js from data/properties.js
   Width matches .search-bar so results align under the search bar.
   ========================================================================== */
.search-results {
  width: min(1396px, calc(100% - 64px));
  margin: clamp(34px, 4vw, 58px) auto 0;
}

.search-results[hidden] {
  display: none;
}

.search-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid #d3d8da;
}

.search-results-count {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.6vw, 27px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--ink);
}

.search-results-clear {
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.search-results-clear:hover,
.search-results-clear:focus-visible {
  opacity: 0.75;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px);
}

.result-card {
  display: flex;
  flex-direction: column;
}

.result-image {
  display: block;
  width: 100%;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  background: #d7dcdd;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms ease;
}

.result-card:hover .result-image img,
.result-card:focus-within .result-image img {
  transform: scale(1.05);
}

.result-title {
  margin: 14px 0 4px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.12;
  font-weight: 600;
  color: var(--ink);
}

.result-location {
  margin: 0 0 8px;
  font-size: var(--section-copy-size);
  line-height: 1.4;
  color: #58666b;
}

.result-price {
  margin: 0 0 6px;
  font-size: var(--section-copy-size);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-deep);
}

.result-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6d7b80;
}

.result-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 0;
  font-size: var(--section-copy-size);
  color: #58666b;
}

@media (max-width: 1100px) {
  .search-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .search-results-grid { grid-template-columns: 1fr; }
}

/* Keep the results width locked to .search-bar at every breakpoint so the
   results always line up directly under the search bar. */
@media (max-width: 1280px) {
  .search-results { width: min(1110px, calc(100% - 44px)); }
}

@media (max-width: 720px) {
  .search-results { width: min(100% - 44px, 560px); }
}

/* Shared interior-page motion uses the homepage's timing and easing rules. */
html.site-motion-all .reveal.is-visible:not(.reveal-from-left):not(.reveal-from-right):not(.service-detail-content):not(.service-subsection):not(.category-grid):not(.services-grid):not(.footer-grid) {
  --motion-translate-x: 0px;
  --motion-translate-y: 38px;
  --motion-duration: 1.1s;
  animation: motion-floatIn var(--motion-duration) cubic-bezier(0.445, 0.05, 0.55, 0.95) var(--motion-delay, 0.001s) backwards;
}

html.site-motion-all .listing-row > .reveal:nth-child(2) {
  --motion-delay: 0.09s;
}