:root {
  --paper: #f9fafb;
  --paper-2: #f3f4f6;
  --paper-3: #ffffff;
  --ink: #111827;
  --muted: #57606a;
  --line: #e5e7eb;
  --green: #065f46;
  --green-2: #059669;
  --clay: #d97706;
  --terracotta: #ea580c;
  --sea: #0284c7;
  --cream: #ffffff;
  --danger: #ef4444;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.08);
  --radius: 8px;
  --header: 78px;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color-scheme: light;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

/* The page is not hit-testable for the length of the route cross-fade, so any
   click landing in that window is thrown away. The UA default is 250ms, which
   is long enough to swallow a deliberate second click. 140ms still reads as a
   fade and gives the page back much sooner. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  /* Images carry intrinsic width/height attributes so the browser can reserve
     the right space before they load. Without height:auto those attributes
     would be taken literally and an 1800px-tall photo would render 1800px
     tall; with it they act purely as an aspect-ratio hint. Rules further down
     that set an explicit height still win on specificity. */
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

button {
  cursor: pointer;
  padding: 0;
}

.site-shell {
  min-height: 100vh;
  overflow: clip;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header);
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

.header-inner {
  width: min(1180px, calc(100% - 32px));
  height: 66px;
  margin: 0 auto;
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(19, 31, 27, 0.34);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 0 8px 0 1px;
}

.brand-logo {
  height: 52px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
  min-width: 0;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24);
}

.nav-link:hover,
.nav-link.is-active,
.nav-item:focus-within .nav-link {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-shadow: none;
}

.nav-more {
  position: relative;
  display: flex;
}

/* Only ever visible in the burger panel; .header-actions .desktop-cta covers
   the wide layout. See the max-width: 1120px block for the visible state.
   Qualified by .main-nav so it outranks the display on .btn, which is declared
   further down the file and would otherwise win on source order. */
.main-nav .nav-cta {
  display: none;
}

.nav-more-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius);
  padding: 0 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24);
}

.nav-more.is-open .nav-more-toggle,
.nav-more-toggle.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  min-width: 164px;
  display: none;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(250, 247, 239, 0.97);
  color: var(--ink);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto;
  height: 10px;
}

.nav-more.is-open .nav-dropdown {
  display: grid;
}

.nav-dropdown a {
  min-height: 36px;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 0 11px;
  color: #425149;
  font-size: 13px;
  font-weight: 700;
}

.nav-dropdown a:hover,
.nav-dropdown a.is-active {
  background: rgba(37, 77, 60, 0.09);
  color: var(--green);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.language-switcher {
  width: 90px;
  flex: 0 0 90px;
  display: inline-flex;
  height: 44px;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
}

.language-switcher a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.language-switcher a.is-active {
  background: var(--green);
  color: #fff;
}

.site-header .desktop-cta {
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  background: rgba(37, 77, 60, 0.94);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.site-header .desktop-cta span {
  line-height: 1;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(12px);
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s;
}

body.nav-open .menu-toggle span {
  opacity: 0;
}

body.nav-open .menu-toggle::before {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .menu-toggle::after {
  transform: translateY(-6px) rotate(-45deg);
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  max-width: 100%;
  padding: 10px 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  color: var(--ink);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.btn span {
  min-width: 0;
  hyphens: none;
  overflow-wrap: normal;
  text-align: left;
  word-break: normal;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 28px rgba(37, 77, 60, 0.22);
}

.btn-primary:hover {
  background: #1f4233;
}

.btn-secondary {
  background: var(--cream);
  border-color: var(--line);
}

.btn-ghost {
  background: rgba(18, 28, 24, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-ghost:hover {
  background: rgba(18, 28, 24, 0.65);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-small {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 13px;
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.icon::before {
  line-height: 1;
}

.hero {
  min-height: calc(96vh - var(--header));
  display: grid;
  align-items: end;
  position: relative;
  color: #fff;
  isolation: isolate;
  background: #16241f;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 28, 24, 0.84) 0%,
    rgba(18, 28, 24, 0.55) 44%,
    rgba(18, 28, 24, 0.16) 100%
  );
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(245, 240, 232, 1), rgba(245, 240, 232, 0));
  z-index: -1;
}

.hero-inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 84px 0 112px;
}

.hero-content {
  width: min(790px, 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(32px, 4.2vw, 54px);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(28px, 3.6vw, 44px);
}

h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.18;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h4 {
  margin-bottom: 8px;
  font-size: 16px;
}

.lead {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
}

.hero .lead {
  width: min(680px, 100%);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(18px, 2.2vw, 23px);
}

.hero-actions,
.section-actions,
.card-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-actions {
  margin-top: 30px;
}

.hero-actions .btn span,
.form-actions .btn span,
.detail-panel .btn span {
  white-space: nowrap;
}

.hero-proof {
  width: min(1180px, calc(100% - 32px));
  margin: -64px auto 64px;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.proof-item {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-rows: 30px auto;
  align-content: center;
  row-gap: 6px;
  padding: 20px 22px;
  background: var(--cream);
}

.proof-item strong {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  color: var(--green);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.08;
}

.proof-item span {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.34;
}

.section {
  padding: 90px 0;
}

.section-compact {
  padding: 62px 0;
}

.property-insight-grid {
  display: grid;
  gap: 32px;
  margin-top: 62px;
}

.section-band {
  background: var(--cream);
}

.calculator-preview-section {
  background: #eef3f1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.calculator-preview-section .section-header {
  margin-bottom: 0;
}

.section-dark {
  background: var(--green);
  color: #fff;
}

.section-dark .muted,
.section-dark .lead {
  color: rgba(255, 255, 255, 0.72);
}

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.section-header {
  width: min(780px, 100%);
  margin-bottom: 36px;
}

.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 48px;
  align-items: start;
}

.split > * {
  min-width: 0;
}

.split.align-center {
  align-items: center;
}

.contact-split {
  align-items: stretch;
}

.contact-split aside.reveal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.feature-grid,
.scenario-grid,
.blog-grid,
.listing-grid,
.location-grid,
.guide-grid,
.faq-category-grid,
.metric-grid {
  display: grid;
  gap: 18px;
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.feature-card,
.scenario-card,
.listing-card,
.blog-card,
.location-card,
.form-panel,
.map-panel,
.faq-item,
.timeline,
.filter-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.feature-card,
.scenario-card {
  min-width: 0;
  padding: 24px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-body > h3,
.location-body > p,
.location-body > .pill,
.location-body > .spec-list {
  margin-bottom: 0;
  margin-top: 0;
}

.location-body > h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 52px;
}

.location-body > .muted {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 44px;
}

.location-body > p:not(.muted) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 44px;
}

.feature-card h3,
.scenario-card h3,
.location-card h3,
.listing-card h3,
.blog-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}

.feature-card h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.feature-card h3 .icon {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

.location-card .spec-list {
  margin-top: auto !important;
}

.feature-card .icon-box,
.contact-method .icon-box {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(37, 77, 60, 0.1);
  color: var(--green);
}

.detail-panel {
  padding: 42px 32px;
  background: var(--cream);
  border-radius: var(--radius);
}

.detail-panel h3 {
  color: var(--ink) !important;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
}

.detail-panel .check-list {
  display: grid;
  gap: 18px;
}

.muted {
  color: var(--muted);
}

.small {
  color: var(--muted);
  font-size: 13px;
}

.stat-line {
  display: grid;
  gap: 10px;
}

.stat-line li,
.check-list li,
.risk-list li,
.document-list li {
  list-style: none;
  position: relative;
  padding-left: 26px;
  color: #405047;
}

.stat-line,
.check-list,
.risk-list,
.document-list {
  margin: 0;
  padding: 0;
}

.why-list li:not(:last-child) {
  margin-bottom: 12px;
}

.why-list li::first-line {
  font-weight: 600;
}

.stat-line li::before,
.check-list li::before,
.document-list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-2);
}

.risk-list li::before {
  content: "!";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(141, 57, 46, 0.12);
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
}

.media-frame {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

.media-frame img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(20, 31, 26, 0.72);
  color: #fff;
  backdrop-filter: blur(12px);
}

.media-caption span {
  min-width: 0;
}

.scenario-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.scenario-card strong {
  color: var(--green);
  font-family: var(--font-sans);
  font-size: clamp(28px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.12;
}

.scenario-tag,
.pill,
.category-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: flex-start;
  width: auto;
  max-width: 100%;
  min-height: 30px;
  border-radius: var(--radius);
  padding: 6px 11px;
  background: rgba(37, 77, 60, 0.08);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pill.alt {
  background: rgba(168, 102, 66, 0.13);
  color: #7a482d;
}

.disclaimer {
  margin-top: 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--clay);
  background: rgba(168, 102, 66, 0.08);
  color: #5b4b3f;
  font-size: 14px;
  line-height: 1.55;
  max-width: min(780px, 100%);
  text-wrap: pretty;
}

.calculator {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.calculator-header,
.calculator-body {
  padding: 24px;
}

.calculator-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.calculator-header > * {
  min-width: 0;
}

.calculator-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

.scenario-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.scenario-switch button {
  min-height: 38px;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #405047;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.scenario-switch button:last-child {
  border-right: 0;
}

.scenario-switch button.is-active {
  background: var(--green);
  color: #fff;
}

.calculator-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.calculator.is-full .calculator-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
  align-content: start;
}

.field-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.field label,
.checkbox-field span {
  color: #1a231f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.range-value {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.compact-field {
  max-width: 120px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.field input,
.field select,
.field textarea,
.search-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius);
  background: #fff;
  color: #111;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.checkbox-field input[aria-invalid="true"] {
  border-color: #b94035;
  box-shadow: 0 0 0 3px rgba(185, 64, 53, 0.12);
}

.field-error {
  min-height: 18px;
  margin-top: 6px;
  color: #9f332b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.field-error:empty {
  display: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23405047'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

/* The method select only has to fit one word; the number gets the rest. */
.field-pair {
  display: grid;
  grid-template-columns: minmax(0, 156px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.phone-input {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 8px;
}

/* Tighter than a normal select so the flag, code, and chevron all fit. */
.phone-input select {
  padding-left: 10px;
  padding-right: 26px;
  background-position: right 8px center;
}

.input-wrap input {
  padding-right: 64px;
}

.input-wrap span {
  position: absolute;
  right: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.field .input-wrap:has(input[type="range"]) {
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(37, 77, 60, 0.25);
  border-radius: var(--radius);
  outline: none;
  padding: 0;
  border: none;
  margin: 0;
  min-height: 0;
}

.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease;
}

.field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.field input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

.field input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease;
}

.field input[type="range"] + span {
  position: absolute;
  right: 0;
  min-width: 60px;
  text-align: right;
  color: #1d3326;
  font-weight: 800;
  font-size: 15px;
}

.field textarea {
  min-height: 116px;
  padding-top: 12px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus {
  outline: 3px solid rgba(73, 119, 131, 0.32);
  outline-offset: 2px;
}

.btn:focus-visible,
.leaflet-custom-marker:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid rgba(73, 119, 131, 0.32);
  outline-offset: 2px;
}

.btn:focus:not(:focus-visible),
.leaflet-custom-marker:focus:not(:focus-visible),
.faq-question:focus:not(:focus-visible) {
  outline: none;
}

.calculator-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.calculator.is-full .calculator-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculator-assumptions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.calculator-assumptions div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-height: 82px;
  padding: 16px 24px;
  background: var(--cream);
}

.calculator-assumptions span {
  display: block;
  color: #4a5d53;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.calculator-assumptions strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.result-card {
  min-height: 112px;
  padding: 18px 24px;
  min-width: 0;
  background: var(--cream);
}

.result-card span {
  display: block;
  color: #4a5d53;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.calculator.is-full .result-card span {
  font-size: clamp(11px, 0.78vw, 13px);
}

@media (min-width: 1180px) {
  .property-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .property-insight-grid .section-compact {
    padding: 0;
  }

  .property-insight-grid .section-compact > h2 {
    margin-bottom: 24px;
    font-size: clamp(34px, 3vw, 44px);
    line-height: 1.08;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .property-insight-grid .calculator-header,
  .property-insight-grid .calculator-controls {
    display: grid;
    justify-content: stretch;
  }

  .property-insight-grid .calculator-body,
  .property-insight-grid .calculator-assumptions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-insight-grid .calculator-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-insight-grid .compact-field {
    width: 100%;
    max-width: none;
  }
}

.result-card strong {
  display: block;
  margin-top: 6px;
  color: var(--green);
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.result-card:last-child {
  background: #e9f2ee;
}

.result-card:last-child strong {
  color: #173d2a;
}

.chart-wrap {
  padding: 28px 24px 36px;
}

.chart-wrap h3 {
  margin-bottom: 12px;
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr 1px 0.7fr;
  gap: 24px;
  background: #fffef9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 24px 24px;
}

.chart-divider {
  background: var(--line);
  width: 1px;
}

.chart-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chart-section canvas {
  width: 100% !important;
}

.canvas-wrapper {
  position: relative;
  height: 250px;
  width: 100%;
}

.map-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: stretch;
  padding-bottom: 74px;
}

.map-canvas {
  position: sticky;
  top: calc(var(--header, 78px) + 24px);
  align-self: start;
  height: calc(100vh - 120px);
  min-height: 540px;
  max-height: 800px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #dce8e3;
}

.leaflet-map {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border-radius: var(--radius);
}

.leaflet-map.map-active {
  box-shadow: 0 0 0 2px var(--green);
}

.map-touch-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(48, 66, 57, 0.85);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.map-touch-hint.hidden {
  opacity: 0;
}

/* Leaflet zoom control override */
.leaflet-control-zoom {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-soft) !important;
}

.leaflet-control-zoom a {
  width: 42px !important;
  height: 40px !important;
  line-height: 40px !important;
  color: var(--green) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--line) !important;
}

.leaflet-control-zoom a:last-child {
  border-bottom: 0 !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(255, 255, 255, 1) !important;
}

/* Attribution */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  border-radius: 4px 0 0 0 !important;
  padding: 2px 6px !important;
}

.leaflet-control-attribution a {
  color: var(--green) !important;
}

/* Custom Leaflet markers */
.leaflet-marker-wrap {
  background: transparent !important;
  border: none !important;
}

.leaflet-custom-marker {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(29, 40, 35, 0.22);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.leaflet-custom-marker:hover {
  transform: scale(1.12);
}

.leaflet-custom-marker.is-active {
  background: var(--terracotta);
  transform: scale(1.12);
  box-shadow: 0 12px 28px rgba(168, 102, 66, 0.32);
}

.marker-number,
.leaflet-custom-marker i {
  pointer-events: none;
  font-size: 13px;
}

.leaflet-marker-label {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: #304239;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 8px rgba(29, 40, 35, 0.1);
  pointer-events: none;
}

/* Property pins */
.leaflet-pin-wrap {
  background: transparent !important;
  border: none !important;
}

.leaflet-property-pin {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 6px 14px rgba(29, 40, 35, 0.2);
}

.leaflet-property-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(168, 102, 66, 0.3);
  border-radius: 50%;
  animation: pin-pulse 2.5s ease-in-out infinite;
}

@keyframes pin-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.map-panel {
  padding: 36px;
}

.map-panel h3 {
  margin: 16px 0 12px;
  line-height: 1.25;
}

.map-panel p.muted {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.map-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.map-panel dl div {
  display: flex;
  flex-direction: column;
}

.map-panel dl div:last-child {
  grid-column: 1 / -1;
}

.map-panel dl div:last-child dd {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  max-width: 82%;
}

.map-panel dt {
  color: #66756e;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-panel dt .icon {
  color: var(--green);
  font-size: 13px;
  width: 14px;
  height: 14px;
}

.map-panel dd {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

.map-panel p.small {
  color: #66756e;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.gallery-toolbar,
.filters,
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  align-items: center;
}

.gallery-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  flex-shrink: 0;
}

.chip {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  color: #425149;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  flex-shrink: 0;
}

.chip.is-active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 0;
}

.gallery-item-portrait {
  aspect-ratio: 3 / 4;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

.gallery-item span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  border-radius: var(--radius);
  background: rgba(20, 31, 26, 0.72);
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  backdrop-filter: blur(8px);
}

.listing-card,
.blog-card,
.location-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Property, article and location cards act as one big button: the link inside
   is stretched over the whole card, so a click (or tap) anywhere on it
   navigates. Keeping a real anchor as the hit target means the SPA router,
   keyboard focus, middle-click and "copy link address" all keep working
   untouched. */
.card-linked {
  position: relative;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.card-linked .card-stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* .btn:hover lifts itself with a transform, which would turn the link into the
   containing block for the overlay above and shrink it back down to the button
   the moment the pointer entered the card. The card takes over the hover
   feedback instead. */
.card-linked .card-stretch-link:hover {
  transform: none;
}

.card-linked:focus-within {
  border-color: var(--green);
  box-shadow: var(--shadow);
}

/* Gated on a real pointer. A touch browser latches :hover on tap and holds it
   through a drag, so ungated this repainted the border mid-swipe on phones —
   the same class of stray motion the :active press state caused. */
@media (hover: hover) {
  .card-linked:hover {
    border-color: var(--green);
    box-shadow: var(--shadow);
  }
}

.listing-card img,
.blog-card img,
.location-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.listing-body,
.blog-body,
.location-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.location-body {
  gap: 16px;
}

.listing-body h3,
.blog-body h3 {
  margin-top: 14px;
}

.blog-body .btn {
  margin-top: auto;
}

.listing-body .btn,
.blog-body .btn {
  align-self: flex-start;
}

.listing-body .card-actions {
  margin-top: auto;
  padding-top: 18px;
}

.listing-body .card-actions .btn {
  margin-top: 0;
}

.listing-body > .muted {
  display: -webkit-box;
  margin-bottom: 16px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  height: 7.75em;
}

.listing-meta,
.blog-meta,
.spec-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin: 14px 0;
}

.listing-meta {
  height: 106px;
  overflow: hidden;
}

.spec-list span,
.listing-meta span,
.blog-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 9px;
  color: #405047;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.price {
  color: var(--green);
  font-family: var(--font-base);
  font-size: 29px;
  font-weight: 700;
}

.listing-body .price {
  margin-top: 6px;
}

.complex-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.complex-stat {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.52);
  padding: 10px;
}

.complex-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.complex-stat-icon .icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.complex-stat small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.complex-stat strong {
  display: block;
  color: #2d3832;
  font-size: 13px;
  line-height: 1.3;
}

.complex-card-block {
  display: grid;
  gap: 8px;
}

.complex-card-block h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.complex-chip-list,
.complex-amenity-list,
.complex-local-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.complex-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.complex-chip-list li {
  border: 1px solid rgba(37, 77, 60, 0.16);
  border-radius: 999px;
  background: rgba(37, 77, 60, 0.07);
  color: #34473d;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.complex-amenity-list,
.complex-local-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(37, 77, 60, 0.14);
}

.complex-amenity-list li,
.complex-local-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(37, 77, 60, 0.14);
  padding: 13px 0;
  color: #33473e;
}

.complex-amenity-list span,
.complex-local-list span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.complex-amenity-list strong,
.complex-local-list strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.28;
}

.complex-amenity-list .icon,
.complex-local-list .icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}

.complex-availability {
  display: grid;
  gap: 8px;
}

.complex-availability div {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(70px, 0.8fr) minmax(82px, 0.9fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.58);
  padding: 9px 10px;
  color: #405047;
  font-size: 13px;
  line-height: 1.25;
}

.complex-availability strong {
  color: var(--ink);
}

.property-complex-snapshot {
  grid-column: 1 / -1;
}

.complex-snapshot-panel {
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 48px);
  background: linear-gradient(135deg, rgba(37, 77, 60, 0.07), rgba(255, 255, 255, 0) 34%), var(--cream);
}

.complex-snapshot-header {
  max-width: 760px;
}

.complex-snapshot-header h2 {
  margin-bottom: 12px;
  font-size: clamp(32px, 3.1vw, 46px);
  line-height: 1.08;
}

.complex-snapshot-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.complex-metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(37, 77, 60, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
}

.complex-metric {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  gap: 2px 12px;
  align-items: center;
  align-content: center;
  min-width: 0;
  padding: 16px;
}

.complex-metric:nth-child(even) {
  border-left: 1px solid rgba(37, 77, 60, 0.12);
}

.complex-metric:nth-child(n + 3) {
  border-top: 1px solid rgba(37, 77, 60, 0.12);
}

.complex-metric .complex-stat-icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  margin: 0;
}

.complex-metric small {
  grid-area: label;
  color: #66736c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.complex-metric strong {
  grid-area: value;
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.22;
}

.complex-snapshot-showcase {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  border-top: 1px solid rgba(37, 77, 60, 0.14);
  padding-top: clamp(28px, 4vw, 44px);
}

.complex-snapshot-media {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #d9ddd6;
}

.complex-snapshot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.complex-snapshot-media figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(18, 28, 24, 0.7);
  padding: 14px 16px;
  color: #fff;
  backdrop-filter: blur(12px);
}

.complex-snapshot-media figcaption small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.complex-snapshot-media figcaption strong {
  font-size: 16px;
  line-height: 1.25;
}

.complex-snapshot-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

.complex-snapshot-list-panel {
  min-width: 0;
}

.complex-snapshot-list-panel h3,
.complex-snapshot-block h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 24px;
}

.complex-snapshot-block {
  min-width: 0;
  margin-top: 30px;
  border-top: 1px solid rgba(37, 77, 60, 0.14);
  padding-top: 24px;
}

.complex-snapshot-block-wide {
  grid-column: 1 / -1;
}

.complex-snapshot-panel .complex-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.complex-snapshot-panel .complex-availability {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-panel {
  margin-bottom: 24px;
  padding: 18px;
}

.filter-toggle-button {
  display: none;
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--green);
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.filter-toggle-button .icon {
  transition: transform 0.3s ease;
}

.filter-toggle-button.is-open .icon {
  transform: rotate(180deg);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.filter-reset-field {
  align-self: end;
}

.filter-reset-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius);
  background: #fff;
  color: #111;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.filter-reset-button:hover,
.filter-reset-button:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(37, 77, 60, 0.12);
}

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* display: inline-grid above outranks the user agent's [hidden] rule, so the
   badge needs to be told to disappear explicitly. */
.filter-count[hidden] {
  display: none;
}

/* The reset control lives inside .filter-grid, which collapses behind the
   toggle below 860px — so on a phone the count would be hidden exactly when it
   matters, with the panel shut and the results scrolled. The toggle carries its
   own copy. */
.filter-toggle-label {
  display: inline-flex;
  align-items: center;
}

.property-hero {
  background: var(--green);
  color: #fff;
}

.property-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.property-hero-main {
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
}

.property-hero-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-summary {
  align-self: stretch;
  display: grid;
  align-content: center;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.property-summary .eyebrow,
.property-summary .lead {
  color: rgba(255, 255, 255, 0.82);
}

.property-summary .spec-list span {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.sticky-detail {
  position: sticky;
  top: calc(var(--header) + 18px);
}

.floor-plan {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: 10px;
  height: 320px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.floor-room {
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 77, 60, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: #32433a;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.floor-side {
  display: grid;
  gap: 10px;
}

.timeline {
  overflow: hidden;
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
}

.timeline-item:last-child {
  border-bottom: 0;
}

.timeline-item time,
.timeline-item strong {
  color: var(--green);
  font-weight: 850;
}

.timeline-item time {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  letter-spacing: 0;
}

.timeline.is-centered .timeline-item time {
  justify-content: center;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 42px;
}

/* min-width:0 matters on mobile. Under 860px .article-layout collapses to a
   bare `1fr` track, whose implicit min-width:auto floors the column at the
   content's min-content width — so a wide table stretched the article past the
   container and .site-shell's overflow-x:clip silently cut the right-hand
   columns off. Zeroing the floor keeps the column at container width and lets
   .table-scroll do the scrolling it was added for. */
.article-body {
  max-width: 780px;
  min-width: 0;
}

.article-content .article-body {
  margin: 0 auto;
}

.article-consultation-content {
  width: min(780px, 100%);
}

.article-consultation-content .section-heading {
  max-width: 720px;
  margin-bottom: 26px;
}

.article-consultation-section .form-panel {
  width: 100%;
}

.article-body h2 {
  margin-top: 42px;
  font-size: clamp(28px, 3vw, 42px);
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body h3 {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: clamp(20px, 1.6vw, 24px);
}

.article-body p,
.article-body li {
  color: #405047;
  font-size: 18px;
}

.article-body ul,
.article-body ol {
  margin: 18px 0;
  padding-left: 22px;
}

.article-body li {
  margin-bottom: 8px;
}

/* Global `a` is color: inherit / no underline, which makes an inline cross-link
   inside body copy indistinguishable from the sentence around it. Article prose
   is the one place a link has to announce itself. */
.article-body p a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body p a:hover {
  color: var(--green-2);
}

/* Money tables in article copy. The article column is 780px and these run to
   six columns, so the table gets its own scroll container rather than forcing
   the page body to scroll sideways on a phone. */
.article-body .table-scroll {
  margin: 22px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
}

.article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 16px;
}

.article-body th,
.article-body td {
  padding: 11px 16px;
  text-align: left;
  color: #405047;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.article-body th {
  color: var(--ink);
  font-weight: 800;
  background: var(--paper-2);
}

/* Row labels wrap; every other column is numeric and reads better flush right.
   The min-width stops auto table layout from starving the label column down to
   one word per line while the numeric columns sit half empty. */
.article-body th:first-child,
.article-body td:first-child {
  white-space: normal;
  min-width: 148px;
}

.article-body th:not(:first-child),
.article-body td:not(:first-child) {
  text-align: right;
}

.article-body tbody tr:last-child td {
  border-bottom: 0;
  background: var(--paper-2);
}

/* Comparison tables carry sentences, not figures, so they wrap and stay left
   aligned. Their last row is data like any other — no total band. */
.article-body table.table-prose th,
.article-body table.table-prose td,
.article-body table.table-prose th:not(:first-child),
.article-body table.table-prose td:not(:first-child) {
  white-space: normal;
  text-align: left;
  vertical-align: top;
}

.article-body table.table-prose tbody tr:last-child td {
  background: transparent;
}

/* Prose tables wrap, so they need less floor than a nowrap figures table before
   the scroll container takes over on a phone. */
.article-body table.table-prose {
  min-width: 460px;
}

.article-body td strong {
  color: var(--ink);
}

.article-aside {
  position: sticky;
  top: calc(var(--header) + 18px);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  overflow: hidden;
}

.faq-question {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 16px 20px;
  text-align: left;
  font-weight: 850;
}

.faq-question span {
  min-width: 0;
}

.faq-question .icon {
  transition: transform 180ms ease;
}

.faq-item.is-open .faq-question .icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 20px 18px;
  color: #405047;
}

.faq-item.is-open .faq-answer {
  display: block;
}

.form-panel {
  padding: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.checkbox-field {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 16px;
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.checkbox-error {
  grid-column: 2;
  margin-top: -4px;
}

.form-actions {
  margin-top: 18px;
}

.form-error {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(185, 64, 53, 0.28);
  border-radius: var(--radius);
  background: rgba(185, 64, 53, 0.1);
  color: #8e2f28;
  font-weight: 750;
}

.form-actions .btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.honey-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.native-submit-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.form-success {
  display: none;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(62, 115, 92, 0.28);
  border-radius: var(--radius);
  background: rgba(62, 115, 92, 0.1);
  color: var(--green);
  font-weight: 750;
}

.form-panel.is-submitted .form-success {
  display: block;
}

.form-panel.is-submitted form {
  display: none;
}

.contact-methods {
  display: grid;
  gap: 10px;
}

.contact-method {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.contact-method > span:last-child {
  min-width: 0;
}

.contact-method .icon-box {
  margin-bottom: 0;
}

.contact-method .icon-box i[data-icon="whatsapp"] {
  -webkit-text-stroke: 1px currentColor;
}

.contact-method[target="_blank"] {
  position: relative;
}

.contact-method[target="_blank"]::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23254d3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.3;
  transition: opacity 0.2s;
}

.contact-method[target="_blank"]:hover::after {
  opacity: 0.8;
}

.calendar-box {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(37, 77, 60, 0.36);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.64);
  padding: 24px;
  text-align: center;
}

.site-footer {
  background: #17241f;
  color: #fff;
  padding: 58px 0 32px;
}

.site-footer .container {
  width: min(1180px, calc(100% - 64px));
}

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

.footer-grid > div,
.site-footer .brand,
.site-footer .brand-text {
  min-width: 0;
}

.site-footer a,
.site-footer p,
.site-footer li {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}

.site-footer li {
  list-style: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

html:lang(uk) body {
  line-height: 1.58;
}

html:lang(uk) .brand-text strong {
  letter-spacing: 0.04em;
}

@media (min-width: 1121px) {
  html:lang(uk) .nav-link,
  html:lang(uk) .nav-more-toggle {
    padding-inline: 7px;
    font-size: 12px;
  }
}

html:lang(uk) .scenario-switch button {
  padding-inline: 6px;
  font-size: 11px;
}

html:lang(uk) .eyebrow {
  letter-spacing: 0.06em;
}

html:lang(uk) h1,
html:lang(uk) h2,
html:lang(uk) h3,
html:lang(uk) .lead,
html:lang(uk) p,
html:lang(uk) li,
html:lang(uk) .pill,
html:lang(uk) .scenario-tag,
html:lang(uk) .chip {
  hyphens: none;
  overflow-wrap: normal;
}

html:lang(uk) .lead,
html:lang(uk) p,
html:lang(uk) li {
  line-height: 1.6;
}

html:lang(uk) .hero .lead {
  max-width: 760px;
}

html:lang(uk) .section-heading {
  max-width: 800px;
}

html:lang(uk) h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
}

html:lang(uk) h2 {
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.08;
}

html:lang(uk) .btn-small {
  font-size: 12px;
}

html:lang(uk) .hero-actions .btn {
  font-size: 13px;
}

html:lang(uk) .proof-item {
  min-height: 104px;
  padding: 19px 22px;
}

html:lang(uk) .proof-item strong {
  margin-bottom: 0;
  font-size: 23px;
}

html:lang(uk) .proof-item span {
  font-size: 12.75px;
  line-height: 1.32;
}

.sticky-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(216, 202, 186, 0.86);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-cta .btn-secondary {
  background: transparent;
}

@media (max-width: 1024px) {
  .sticky-cta {
    display: none;
  }

  .hide-mobile-prefix {
    display: none;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 28, 24, 0.94);
  backdrop-filter: blur(12px);
}

.lightbox.is-open {
  display: flex;
}

.lightbox figure {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  justify-items: center;
}

.lightbox img,
.lightbox video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1000px, calc(100vw - 48px));
  max-height: 78vh;
  object-fit: contain;
  background: transparent;
}

.lightbox figcaption {
  margin-top: 12px;
  color: #fff;
  text-align: center;
}

.lightbox-error {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  transform: translate(-50%, -50%);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-bottom: 3px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition:
    background 0.2s,
    transform 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.05);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-prev svg,
.lightbox-next svg {
  width: 24px;
  height: 24px;
}

.reveal {
  opacity: 1;
  transform: translateY(18px);
  transition:
    opacity 480ms ease,
    transform 480ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1500px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }

  .main-nav {
    gap: 0;
  }

  .nav-link {
    padding: 0 8px;
    font-size: 13px;
  }
}

@media (max-width: 1120px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
  }

  .main-nav {
    position: fixed;
    top: calc(var(--header) + 8px);
    right: 16px;
    left: 16px;
    z-index: 65;
    display: none;
    width: auto;
    /* 100vh on a phone is the *large* viewport — the height with the URL bar
       hidden — so the last rows of a long menu sat underneath the URL bar and
       moved as it collapsed. dvh tracks what is actually visible right now. */
    max-height: calc(100vh - var(--header) - 24px);
    max-height: calc(100dvh - var(--header) - 24px);
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    justify-self: stretch;
    background: rgba(255, 253, 248, 0.98);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px);
  }

  /* iOS Safari ignores `overflow: hidden` on <body>, which is why the page
     kept scrolling behind the open menu — and because the panel is fixed, it
     hung motionless over moving content and read as detached. Pinning the body
     is the only lock Safari honours. JS holds the scroll offset in `top` and
     hands it back on close. Mobile only: the hamburger does not exist above
     this breakpoint, so the desktop header is untouched. */
  body.nav-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* The header is `position: absolute`, so pinning the body would drag it off
     screen by the saved scroll offset. Fixed while the menu is open keeps the
     close button where the user expects it. */
  body.nav-open .site-header {
    position: fixed;
    top: 0;
    z-index: 80;
  }

  body.nav-open .main-nav {
    display: flex;
  }

  /* Keeps a flick inside a long menu from chaining out to the document. */
  .main-nav {
    overscroll-behavior: contain;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(18, 28, 24, 0.42);
    backdrop-filter: blur(2px);
  }

  .nav-item {
    display: block;
  }

  .nav-link {
    width: 100%;
    border-radius: var(--radius);
    padding: 13px 14px;
    color: #425149;
    text-shadow: none;
    font-size: 16px;
    font-weight: 500;
    /* Without this the browser holds every tap for ~300ms waiting to see if a
       double-tap-zoom is coming, and dispatches the click at the finger's
       final position. Any shift in that window — the panel settling after a
       flick, the URL bar collapsing — lands the click on a neighbouring row.
       `manipulation` opts out of double-tap zoom so the click fires on lift. */
    touch-action: manipulation;
  }

  .nav-link:hover,
  .nav-link.is-active,
  .nav-item:focus-within .nav-link {
    background: rgba(37, 77, 60, 0.09);
    color: var(--green);
  }

  .nav-more {
    display: grid;
  }

  .nav-more-toggle {
    display: none;
  }

  .nav-dropdown {
    position: static;
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-dropdown a {
    min-height: 47px;
    border-radius: var(--radius);
    padding: 13px 14px;
    color: #425149;
    font-size: 16px;
    font-weight: 500;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a.is-active {
    background: rgba(37, 77, 60, 0.09);
    color: var(--green);
  }

  /* The two CTAs hand off here, at the same width the burger takes over. This
     used to happen at 1320px, which left 1121–1320px with no call-to-action at
     all: too narrow for the header button, too wide for the burger. The header
     button fits fine down to here — measured 98px of clearance at 1200px in
     Ukrainian, the longer of the two languages. */
  .header-actions .desktop-cta {
    display: none;
  }

  /* Last item in the burger panel, below the links it sits alongside. The
     solid fill already separates it from the list, so it only needs breathing
     room above — a rule line on a filled button just reads as a stray outline. */
  .main-nav .nav-cta {
    display: inline-flex;
    width: 100%;
    min-height: 47px;
    margin-top: 14px;
    font-size: 15px;
  }

  .menu-toggle {
    display: block;
  }

  .feature-grid,
  .blog-grid,
  .listing-grid,
  .location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    max-width: 640px;
  }

  .calculator.is-full .calculator-body,
  .calculator.is-full .calculator-results,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 860px) {
  .section-header .eyebrow {
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .section-header .eyebrow::before {
    width: 6px;
    opacity: 0.6;
  }

  .section-header h2 {
    margin-bottom: 18px;
  }

  .section-header.center {
    text-align: left;
    margin-inline: 0;
  }

  :root {
    --header: 70px;
  }

  body {
    padding-bottom: 0;
  }

  .header-inner {
    height: 66px;
    margin-top: 8px;
    padding: 0 8px 0 10px;
  }

  .brand-logo {
    height: 56px;
  }

  .hero {
    min-height: calc(88vh - var(--header));
  }

  .hero-inner {
    padding: 104px 0 40px;
  }

  .hero-proof,
  .split,
  .map-section-grid,
  .property-hero-grid,
  .article-layout,
  .footer-grid,
  .calculator-assumptions {
    grid-template-columns: 1fr;
  }

  .map-panel {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .split > .media-frame {
    order: 2;
    margin: 0 auto;
  }

  .feature-grid,
  .scenario-grid,
  .editorial-grid,
  .blog-grid,
  .listing-grid,
  .location-grid,
  .guide-grid,
  .metric-grid,
  .gallery-grid,
  .faq-category-grid {
    gap: 16px;
  }

  .editorial-grid,
  .guide-grid,
  .metric-grid,
  .gallery-grid,
  .faq-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .scenario-card {
    padding: 20px 16px;
    gap: 12px;
  }

  .scenario-card strong {
    font-size: 24px;
    line-height: 1.1;
  }

  .scenario-card p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .calculator-results {
    background: transparent;
    border-top: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .calculator.is-full .calculator-results {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
  }

  .feature-grid > *,
  .scenario-grid > *,
  .editorial-grid > *,
  .blog-grid > *,
  .listing-grid > *,
  .location-grid > *,
  .guide-grid > *,
  .metric-grid > *,
  .gallery-grid > *,
  .faq-category-grid > * {
    min-width: 0;
    height: auto;
  }

  .listing-body > .muted {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: initial;
    line-clamp: initial;
  }

  .listing-meta {
    height: auto;
    overflow: visible;
  }

  .complex-stat-grid,
  .complex-snapshot-layout,
  .complex-snapshot-panel .complex-stat-grid,
  .complex-snapshot-panel .complex-availability,
  .complex-amenity-list,
  .complex-local-list {
    grid-template-columns: 1fr;
  }

  .complex-availability div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mobile-carousel-shell {
    position: relative;
  }

  .mobile-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(221, 224, 226, 0.92);
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.94);
    color: var(--green);
    box-shadow: 0 12px 28px rgba(16, 24, 32, 0.16);
    transform: translateY(-50%);
  }

  .gallery-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    justify-content: flex-start !important;
  }

  .gallery-toolbar::-webkit-scrollbar {
    display: none;
  }

  .gallery-toolbar-divider {
    display: none;
  }

  .gallery-toolbar-group {
    display: contents;
  }

  .mobile-carousel-button .icon {
    width: 20px;
    height: 20px;
  }

  .mobile-carousel-button-prev {
    left: 6px;
  }

  .mobile-carousel-button-prev .icon {
    transform: rotate(180deg);
  }

  .mobile-carousel-button-next {
    right: 6px;
  }

  .mobile-carousel-button:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-carousel-shell.is-at-start .mobile-carousel-button-prev,
  .mobile-carousel-shell.is-at-end .mobile-carousel-button-next {
    opacity: 0;
    pointer-events: none;
  }

  .hero-proof {
    margin-top: -16px;
    margin-bottom: 54px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--radius);
    overflow: hidden;
  }

  .proof-item {
    min-height: 100px;
    padding: 19px;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 26px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .timeline-item:last-child {
    border-bottom: 0;
    border-right: 0;
  }

  .timeline-item time {
    display: block;
    min-height: auto;
    font-size: 28px;
    font-weight: 850;
    line-height: 1;
    margin-bottom: 12px;
  }

  .timeline-item strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .timeline-item p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }

  .property-hero-main {
    min-height: 340px;
  }

  .property-summary {
    align-content: start;
    padding: 26px;
  }

  .section {
    padding: 48px 0;
  }

  .hero + .section {
    padding-top: 24px;
  }

  .detail-panel {
    padding: 32px 24px;
  }

  .calculator-body,
  .calculator.is-full .calculator-body,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-pair {
    grid-template-columns: 1fr;
  }

  .phone-input {
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  }

  .calculator-header {
    display: grid;
  }

  .calculator-controls,
  .compact-field {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .calculator {
    overflow: visible;
  }

  .scenario-switch {
    border-radius: var(--radius);
    width: 100%;
  }

  .filter-toggle-button {
    display: flex;
  }

  .filter-grid {
    grid-template-columns: 1fr;
    display: none;
    margin-top: 16px;
  }

  .filter-grid.is-open {
    display: grid;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .mobile-align-carousel {
    margin-inline: calc(50% - 50vw);
    padding-left: 38px;
    padding-right: 24px;
  }

  .sticky-cta {
    right: 10px;
    left: 10px;
    bottom: 10px;
    justify-content: center;
    border-radius: var(--radius);
  }

  .sticky-cta .btn {
    flex: 1;
    min-width: 0;
    padding-inline: 8px;
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .map-panel {
    padding: 28px 24px;
  }

  .map-panel h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .map-panel p.muted {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .map-panel dl {
    gap: 20px 16px;
    margin: 24px 0;
    padding: 20px 0;
  }

  .map-panel dl div:last-child dd {
    font-size: 14px;
  }

  .map-panel dd {
    font-size: 16px;
  }

  .property-filter-panel {
    margin-inline: -8px;
  }

  .listing-grid,
  .blog-grid,
  .location-grid,
  .gallery-grid {
    --mobile-card-width: min(82vw, 340px);
    --mobile-carousel-side: max(24px, calc((100vw - var(--mobile-card-width)) / 2));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--mobile-card-width);
    grid-template-columns: none !important;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 14px calc(50% - 50vw) 22px;
    padding: 8px var(--mobile-carousel-side) 22px 16px;
    scrollbar-width: none;
  }

  .listing-grid.is-single-item,
  .blog-grid.is-single-item,
  .location-grid.is-single-item,
  .gallery-grid.is-single-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }

  .listing-grid.is-single-item > *,
  .blog-grid.is-single-item > *,
  .location-grid.is-single-item > *,
  .gallery-grid.is-single-item > * {
    width: 100%;
    max-width: min(100%, 380px);
  }

  .listing-grid > *,
  .blog-grid > *,
  .location-grid > *,
  .gallery-grid > * {
    scroll-snap-align: start;
  }

  .gallery-grid > .gallery-item {
    aspect-ratio: 3 / 4;
    min-height: 0;
    overflow: hidden;
  }

  .gallery-grid > .gallery-item.gallery-item-landscape {
    aspect-ratio: 3 / 4;
  }

  .listing-grid::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar,
  .location-grid::-webkit-scrollbar,
  .gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .mobile-carousel-shell:has(.listing-grid) > .mobile-carousel-button,
  .mobile-carousel-shell:has(.blog-grid) > .mobile-carousel-button,
  .mobile-carousel-shell:has(.location-grid) > .mobile-carousel-button {
    display: none;
  }

  .listing-grid .reveal,
  .blog-grid .reveal,
  .location-grid .reveal,
  .gallery-grid .reveal {
    transform: none;
    opacity: 1;
  }

  .listing-grid .listing-card .muted {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.65em;
  }

  /* One tap gesture over the card in view, then it retires. Never intercepts
     the tap it is advertising. Deliberately the only added motion on these
     cards: a :active press state was tried here too, but :active also latches
     on while a finger is dragging the carousel, so every swipe came with the
     card shrinking under it. */
  .card-tap-hint {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    pointer-events: none;
    opacity: 0;
    animation: card-tap-hint-in 340ms ease forwards;
  }

  .card-tap-hint.is-leaving {
    animation: card-tap-hint-out 260ms ease forwards;
  }

  .card-tap-hint-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--green);
    border-radius: 50%;
    opacity: 0;
    animation: card-tap-hint-ring 1600ms ease-out infinite;
  }

  .card-tap-hint .icon {
    position: relative;
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
    color: var(--green);
    filter: drop-shadow(0 2px 6px rgba(20, 31, 26, 0.35));
    animation: card-tap-hint-press 1600ms ease-in-out infinite;
  }

  @keyframes card-tap-hint-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes card-tap-hint-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes card-tap-hint-ring {
    0% {
      opacity: 0;
      transform: scale(0.4);
    }

    18% {
      opacity: 0.5;
    }

    70% {
      opacity: 0;
      transform: scale(1.35);
    }

    100% {
      opacity: 0;
      transform: scale(1.35);
    }
  }

  @keyframes card-tap-hint-press {
    0%,
    70%,
    100% {
      transform: translate(0, 0) scale(1);
    }

    12% {
      transform: translate(-1px, 3px) scale(0.86);
    }

    30% {
      transform: translate(0, 0) scale(1);
    }
  }
}

@media (max-width: 560px) {
  body {
    padding-bottom: 0;
  }

  .leaflet-marker-label {
    left: 34px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 4px rgba(29, 40, 35, 0.08);
  }

  .container,
  .hero-inner,
  .hero-proof {
    width: min(100% - 48px, 1180px);
  }

  .header-inner {
    width: min(100% - 24px, 1180px);
    gap: 8px;
  }

  .brand {
    gap: 8px;
    padding-right: 0;
  }

  .brand-logo {
    height: 42px;
    max-width: 48vw;
    object-fit: contain;
    object-position: left center;
  }

  .header-actions {
    gap: 6px;
  }

  .language-switcher {
    width: 80px;
    flex-basis: 80px;
  }

  .language-switcher a {
    min-width: 40px;
    font-size: 12px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  .sticky-cta {
    display: none;
  }

  .main-nav {
    right: 12px;
    left: 12px;
  }

  .feature-grid,
  .scenario-grid,
  .editorial-grid,
  .guide-grid,
  .metric-grid,
  .faq-category-grid {
    grid-template-columns: 1fr;
  }

  .property-roi-card {
    padding: 24px !important;
    gap: 28px !important;
  }

  .property-roi-metrics,
  .property-roi-graphic {
    min-width: 0 !important;
    width: 100%;
  }

  .property-roi-graphic {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch !important;
  }

  .property-roi-bar {
    height: auto !important;
    min-height: 156px;
    padding: 20px !important;
  }

  .property-roi-bar > div:first-child {
    font-size: clamp(22px, 7vw, 28px) !important;
    overflow-wrap: anywhere;
  }

  .hero-actions {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .hero-actions .btn:not(:only-child) {
    flex: 1;
    min-width: 0;
    padding-inline: 8px;
  }

  .hero-actions .btn span:not(.icon) {
    white-space: nowrap;
    font-size: clamp(10.5px, 2.8vw, 15px);
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }

  .feature-card h3,
  .scenario-card h3,
  .location-card h3,
  .listing-card h3,
  .blog-card h3,
  .complex-snapshot-block h3 {
    font-size: 22px !important;
  }

  .feature-card,
  .scenario-card,
  .location-body,
  .listing-body,
  .blog-body {
    padding: 16px !important;
  }

  .location-body > h3,
  .location-body > .muted,
  .location-body > p:not(.muted) {
    min-height: auto;
    -webkit-line-clamp: none;
    line-clamp: none;
  }

  .detail-panel .check-list {
    gap: 10px;
  }

  .scenario-card strong {
    font-size: 28px;
    line-height: 1.15;
  }

  .proof-item {
    min-height: 96px;
  }

  .map-canvas {
    position: relative;
    top: auto;
    height: 420px;
    min-height: 420px;
  }

  .leaflet-map {
    min-height: 420px;
  }

  .media-caption {
    position: static;
    border-radius: 0;
  }

  .floor-plan {
    grid-template-columns: 1fr;
    height: auto;
  }

  .floor-room {
    min-height: 80px;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .timeline-item:last-child {
    border-bottom: 0;
  }

  .timeline-item time {
    display: block;
    min-height: auto;
    font-size: 26px;
    font-weight: 850;
    line-height: 1;
    margin-bottom: 12px;
  }

  .timeline-item strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .timeline-item p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }

  .chart-wrap {
    padding: 24px 18px 28px;
  }

  .chart-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .chart-divider {
    display: none;
  }
}

@media (max-width: 400px) {
  .brand-text {
    display: none;
  }

  .map-panel dl {
    grid-template-columns: 1fr;
  }
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--green-light, #1f4233);
}

.back-to-top .icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .back-to-top .icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}

/* Property Details Subnavigation & Layout styles */
.property-subnav {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.subnav-links a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.subnav-links a:hover {
  color: var(--green) !important;
}

.property-calculator-grid .calculator {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.property-calculator-grid .calculator-header {
  display: none !important; /* Hide sub-header as we have section header */
}

.property-calculator-grid .calculator-assumptions {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.property-hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  gap: clamp(22px, 3vw, 40px) !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}

.property-hero-main,
.property-summary {
  min-width: 0 !important;
  width: 100%;
}

.property-hero-main {
  flex: none !important;
  height: clamp(430px, 36vw, 560px) !important;
  min-height: 0 !important;
}

.property-summary {
  flex: none !important;
}

.property-hero-actions {
  flex-wrap: wrap;
}

.property-feature-grid,
.property-highlight-grid {
  align-items: stretch;
}

.property-feature-grid .feature-card,
.property-highlight-grid .feature-card {
  min-width: 0;
  height: auto;
}

.property-feature-grid .feature-card h3,
.property-highlight-grid .feature-card h3 {
  max-width: 100%;
  overflow-wrap: break-word;
}

.property-site-plan-frame {
  --site-plan-rotated-width: 56.25%;
  --site-plan-rotated-height: 177.78%;
  background: #fff;
}

.property-site-plan-frame img {
  object-fit: contain;
  background: #fff;
}

.property-site-plan-frame-rotated img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--site-plan-rotated-width);
  height: var(--site-plan-rotated-height);
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

.property-site-plan-frame-rotated:hover img {
  transform: translate(-50%, -50%) rotate(90deg);
}

.property-floor-gallery,
.property-interior-gallery,
.property-interior-side {
  min-width: 0;
}

.property-floor-card img,
.property-interior-main img,
.property-interior-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-section-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.property-section-heading .eyebrow {
  margin: 0 0 8px;
}

.property-section-heading h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}

.property-section-heading p:not(.eyebrow) {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.property-units-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.property-unit-photo {
  min-height: 0;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #d9ddd6;
  cursor: pointer;
}

.property-unit-photo-landscape {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.property-unit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 360ms ease;
}

.property-unit-photo:hover img {
  transform: scale(1.035);
}

.property-timeline-row {
  display: grid;
  grid-template-columns: minmax(250px, 360px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(34px, 4vw, 56px);
}

.property-timeline-row.has-divider {
  border-bottom: 1px solid var(--line);
}

.property-timeline-date {
  color: var(--green);
  font-size: clamp(34px, 3.1vw, 52px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: none;
  word-break: normal;
}

.property-timeline-copy {
  display: flex;
  min-width: 0;
  max-width: 820px;
  flex-direction: column;
  gap: 12px;
}

.property-timeline-copy strong {
  color: var(--green);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 750;
  line-height: 1.2;
}

.property-timeline-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .property-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 28px !important;
  }

  .property-hero-main {
    height: 430px !important;
  }

  .property-summary .lead {
    font-size: 16px !important;
  }

  .property-summary .price {
    font-size: 32px !important;
  }

  .property-subnav .container {
    align-items: center !important;
  }

  .subnav-links {
    display: none !important;
  }

  .complex-snapshot-panel .complex-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .complex-snapshot-panel .complex-availability {
    grid-template-columns: 1fr;
  }

  .complex-snapshot-top {
    grid-template-columns: 1fr;
  }

  .property-units-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .property-timeline-row {
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    padding: 34px 30px;
  }

  .property-timeline-date {
    font-size: clamp(32px, 3.8vw, 46px);
  }
}

@media (min-width: 861px) {
  .property-calculator-grid .calculator {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
  }

  .property-calculator-grid .calculator-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: none !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    padding-top: 0 !important;
  }

  .property-calculator-grid .calculator-assumptions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .property-calculator-grid .calculator-results {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    height: fit-content !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-content: start !important;
  }
}

@media (max-width: 860px) {
  .subnav-links {
    display: none !important;
  }

  .property-hero {
    padding-top: calc(var(--header) + 28px) !important;
    padding-bottom: 34px !important;
  }

  .property-hero-layout {
    grid-template-columns: 1fr;
    gap: 24px !important;
  }

  .property-hero-main {
    height: min(56vh, 380px) !important;
  }

  .property-summary {
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
  }

  .property-summary .lead {
    font-size: 16px !important;
  }

  .property-summary .price {
    font-size: clamp(28px, 7vw, 34px) !important;
  }

  .property-hero-actions .btn {
    flex: 1 1 220px;
  }

  #description .lead {
    text-align: left !important;
  }

  .property-feature-grid,
  .property-highlight-grid {
    grid-template-columns: 1fr !important;
  }

  .property-features-layout {
    gap: 28px !important;
  }

  .property-timeline-row {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    padding: 30px 24px;
  }

  .property-timeline-date {
    font-size: clamp(28px, 7vw, 36px);
  }

  .property-timeline-date.is-now-ready {
    display: none;
  }

  .complex-snapshot-panel {
    padding: 28px 22px;
  }

  .complex-snapshot-showcase {
    grid-template-columns: 1fr;
  }

  .complex-snapshot-media {
    min-height: 360px;
  }

  .complex-snapshot-panel .complex-stat-grid,
  .complex-snapshot-panel .complex-availability {
    grid-template-columns: 1fr;
  }

  .complex-snapshot-header h2 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .property-section-heading {
    text-align: left;
    margin-bottom: 24px;
  }

  .property-units-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .property-calculator-grid .calculator-body,
  .property-calculator-grid .calculator-results {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .property-hero-main {
    height: 320px !important;
  }

  .property-summary {
    min-width: 0 !important;
  }

  .property-summary .spec-list {
    gap: 7px !important;
  }

  .property-summary .spec-list span {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .property-hero-actions {
    flex-direction: column;
    gap: 10px !important;
  }

  .property-hero-actions .btn {
    flex: 0 0 auto !important;
    width: 100%;
    justify-content: center;
  }

  .property-site-plan-frame {
    --site-plan-rotated-width: 75%;
    --site-plan-rotated-height: 133.34%;
    aspect-ratio: 4 / 3 !important;
  }

  .property-floor-gallery {
    grid-template-columns: 1fr !important;
  }

  .property-floor-card {
    aspect-ratio: 4 / 3 !important;
  }

  .property-units-photo-grid {
    --unit-gallery-card: min(82vw, 380px);
    grid-auto-flow: column;
    grid-auto-columns: var(--unit-gallery-card);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 calc(50% - 50vw);
    padding: 4px max(18px, calc((100vw - var(--unit-gallery-card)) / 2)) 16px 16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .property-units-photo-grid::-webkit-scrollbar {
    display: none;
  }

  .property-unit-photo {
    scroll-snap-align: start;
  }

  .property-unit-photo-landscape {
    grid-column: span 1;
    align-self: center;
  }

  .property-highlight-grid {
    --mobile-card-width: min(82vw, 340px);
    --mobile-carousel-side: max(18px, calc((100vw - var(--mobile-card-width)) / 2));
    flex: 1 1 100% !important;
    min-width: 0 !important;
    grid-auto-flow: column;
    grid-auto-columns: var(--mobile-card-width);
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    margin: 0 calc(50% - 50vw) -30px !important;
    padding: 4px var(--mobile-carousel-side) 48px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .property-highlight-grid::-webkit-scrollbar {
    display: none;
  }

  .property-highlight-grid > .feature-card {
    min-height: 174px;
    scroll-snap-align: center;
    padding-left: 44px !important;
    padding-right: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
  }

  .property-features-layout .mobile-carousel-shell {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .property-features-layout .mobile-carousel-button {
    width: 36px;
    height: 36px;
    box-shadow: 0 8px 18px rgba(16, 24, 32, 0.13);
  }

  .property-features-layout .mobile-carousel-button .icon {
    width: 17px;
    height: 17px;
  }

  .property-interior-gallery {
    --mobile-card-width: min(82vw, 340px);
    --mobile-carousel-side: max(24px, calc((100vw - var(--mobile-card-width)) / 2));
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: var(--mobile-card-width);
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 14px calc(50% - 50vw) 22px !important;
    padding: 8px var(--mobile-carousel-side) 22px 16px !important;
    scrollbar-width: none;
  }
  .property-interior-gallery > * {
    scroll-snap-align: start;
  }

  .property-interior-main {
    min-width: 0 !important;
    height: 340px !important;
  }

  .property-interior-side {
    min-width: 0 !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .property-interior-thumb {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .complex-metric-strip,
  .complex-snapshot-lists {
    grid-template-columns: 1fr;
  }

  .complex-metric:nth-child(even) {
    border-left: 0;
  }

  .complex-metric:nth-child(n + 2) {
    border-top: 1px solid rgba(37, 77, 60, 0.12);
  }

  .complex-snapshot-media {
    min-height: 300px;
  }

  .property-timeline-row {
    padding: 28px 22px;
  }
}

@media (max-width: 420px) {
  .property-hero-main {
    height: 292px !important;
  }

  .property-interior-main {
    height: 300px !important;
  }

  .complex-snapshot-panel {
    padding: 24px 18px;
  }

  .complex-snapshot-media {
    min-height: 260px;
  }

  .complex-snapshot-media figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 12px;
  }

  .complex-stat,
  .complex-availability div {
    padding: 10px;
  }
}

.turnstile-field:empty {
  display: none;
}

.turnstile-field:not(:empty) {
  margin: 16px 0 20px;
}