html.i18n-pending body {
  visibility: hidden;
}

:root {
  --ink: #152024;
  --teal: #1f6b66;
  --brass: #b08a4f;
  /* WCAG AA (Israeli standard 5568): #b08a4f is only 2.8:1 on paper and 3.2:1 under white text.
     Text and gold buttons use these instead; --brass stays for decoration (lines, stars). */
  --brass-text: #84652f;   /* 4.7:1 on paper, 5.4:1 under white text */
  --brass-glow: #c9a36a;   /* 6:1 on the dark offer/hero panels */
  --offer: #2f2a24;
  --paper: #f4f0e8;
  --surface: #fffcf7;
  --text: #1a1f1c;
  --muted: #5c6560;
  --line: rgba(21, 32, 36, 0.12);
  --shadow: 0 18px 40px rgba(21, 32, 36, 0.08);
  --header-h: 4.75rem;
  --z-header: 30;
  --z-overlay: 40;
  --z-skip: 50;
  --ease: 180ms ease;
  --font-display: Heebo, "Segoe UI", sans-serif;
  --font-body: Heebo, "Segoe UI", sans-serif;
  --btn-r: 0.85rem;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.05rem;
}

img {
  max-width: 100%;
  display: block;
}

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

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.skip {
  position: absolute;
  right: 1rem;
  top: -4rem;
  z-index: var(--z-skip);
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--btn-r);
}

.skip:focus {
  top: 1rem;
}

.wrap {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.wrap-wide {
  width: min(1320px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Header — identical chrome on every page */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1rem;
  height: var(--header-h);
  min-height: var(--header-h);
  width: 100%;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.85rem;
  overflow: visible;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
  line-height: 0;
}

.logo img {
  height: 44px;
  width: auto;
  max-width: none;
  max-height: 44px;
  object-fit: contain;
  object-position: center;
  box-sizing: content-box;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.25rem;
  min-width: 0;
  overflow: visible;
}

.nav a,
.nav-more > button {
  padding: 0.7rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"],
.nav-more > button:hover,
.nav-more > button[aria-current="page"],
.nav-more > button[aria-expanded="true"] {
  color: var(--ink);
}

.nav-more {
  position: relative;
}

.nav-more > button {
  border: 0;
  background: transparent;
  font: inherit;
}

.nav-more__menu,
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  z-index: 50;
  min-width: 12.5rem;
  padding: 0.4rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.nav-more__menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform: none;
  width: max-content;
  min-width: 11rem;
}

.lang-switch__menu {
  inset-inline-end: 0;
  inset-inline-start: auto;
  max-height: min(22rem, 70dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-more__menu a,
.lang-switch__menu a,
.lang-option {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1rem;
  color: var(--text);
}

.lang-flag {
  width: 1.4rem;
  height: 0.95rem;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(21, 32, 36, 0.14);
  overflow: hidden;
  display: block;
}

.nav-more__menu a:hover,
.lang-switch__menu a:hover,
.nav-more__menu a[aria-current="page"],
.lang-switch__menu a[aria-current="true"],
.lang-option[aria-current="true"] {
  color: var(--teal);
}

.lang-switch {
  position: relative;
}

.lang-switch > button {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--btn-r);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.lang-switch > button:hover,
.lang-switch > button[aria-expanded="true"] {
  color: var(--teal);
}

.lang-switch > button svg {
  width: 20px;
  height: 20px;
  display: none;
}

.sell-reviews {
  margin-top: 1.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.85rem;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.header-phone svg,
.wa-header svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.header-phone svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.wa-header {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #25d366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.wa-header:hover,
.header-phone:hover {
  opacity: 0.72;
}

.wa-header svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--btn-r);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn:hover {
  border-color: var(--ink);
}

.btn-ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.btn-ink:hover {
  background: #0e1619;
  border-color: #0e1619;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-whatsapp {
  background: transparent;
  color: #13793f; /* #1fa855 was 3:1 on the light card; this is 5.4:1 */
  border-color: var(--line);
  font-weight: 600;
}

.btn-whatsapp:hover {
  background: transparent;
  border-color: #1fa855;
}

.header-actions .btn svg,
.lp-actions .btn svg,
.sticky-cta .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-lg {
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--btn-r);
  background: transparent;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Hero */
.hero {
  position: relative;
  z-index: 0;
  min-height: min(92vh, 820px);
  color: #fff;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(21, 32, 36, 0.15) 0%, rgba(21, 32, 36, 0.72) 70%, rgba(21, 32, 36, 0.88) 100%);
}

.hero-copy {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto 4.5rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--brass-text);
  margin-bottom: 0.85rem;
}

.hero .eyebrow {
  color: var(--brass-glow);
  font-size: 1.15rem;
  font-weight: 500;
}

.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.12;
  max-width: 14ch;
  margin-bottom: 1rem;
}

.hero p {
  max-width: 46ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  text-wrap: pretty;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.5rem;
  max-width: 44rem;
}

.hero-actions .btn {
  font-size: 1rem;
  font-weight: 600;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  border-radius: var(--btn-r);
  text-align: center;
  line-height: 1.25;
}

.hero-actions .btn svg {
  width: 20px;
  height: 20px;
}

.hero-actions .btn-hero {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero-actions .btn-hero:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hero-actions .btn-hero-fill {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 10px 22px rgba(8, 12, 14, 0.22);
}

.hero-actions .btn-hero-fill:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.hero-actions .btn-hero-fill svg {
  color: var(--ink);
}

.hero-actions .btn-hero-brass {
  background: var(--brass-text);
  color: #fff;
  border-color: var(--brass-text);
  box-shadow: 0 10px 22px rgba(176, 138, 79, 0.38);
}

.hero-actions .btn-hero-brass:hover {
  background: #9a7543;
  border-color: #9a7543;
  color: #fff;
}

.hero-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  margin-top: 1.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.hero-scope a {
  color: inherit;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
}

.hero-scope a:hover {
  color: #fff;
  text-decoration: underline;
}

.hero-scope span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  margin-inline: 0.45rem;
}

/* Sections */
.section {
  padding: 4.5rem 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.section-head p,
.muted {
  color: var(--muted);
}

.catalog-page {
  padding-top: 2.25rem;
}

.catalog-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.catalog-top h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.catalog-top p {
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.deal-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--surface);
}

.deal-switch a {
  min-height: 44px;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-weight: 500;
}

.deal-switch a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}

.link-more {
  color: var(--teal);
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.link-more:hover {
  text-decoration: underline;
}

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
  transition: box-shadow var(--ease);
}

.card:hover {
  box-shadow: 0 22px 48px rgba(21, 32, 36, 0.14);
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9d2c5;
}

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

/* Homepage property row. The row swipes between properties. The photo
   strip inside a card swipes that property's own pictures. */
.prop-scroller {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  column-gap: 0.35rem;
  align-items: start;
}

.prop-arrow {
  position: relative;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(21, 32, 36, 0.18);
}

.prop-arrow svg { width: 1.25rem; height: 1.25rem; }
.prop-arrow.is-prev { grid-column: 1; }
.prop-arrow.is-next { grid-column: 3; }
.prop-arrow[hidden] { visibility: hidden; }

.prop-row {
  grid-column: 2;
  display: flex;
  gap: 1rem;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.prop-row::-webkit-scrollbar { display: none; }

.prop-row > .card {
  flex: 0 0 min(20rem, 78%);
  scroll-snap-align: start;
  min-width: 0;
}

.card-photos {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.card-photos::-webkit-scrollbar { display: none; }

.card-photos img,
.card-photos .ph-inner {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.card-photos img { pointer-events: none; }

a.card-photos,
a.card-body {
  color: inherit;
  text-decoration: none;
}

.card-photo-count {
  position: absolute;
  bottom: 0.65rem;
  inset-inline-start: 0.65rem;
  z-index: 2;
  direction: ltr;
  background: rgba(21, 32, 36, 0.72);
  color: #fff;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.5rem;
  pointer-events: none;
}

.card-photo-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}

.card-photo-nav svg { width: 1.1rem; height: 1.1rem; }
.card-photo-nav.is-prev { inset-inline-start: 0.5rem; }
.card-photo-nav.is-next { inset-inline-end: 0.5rem; }

.card-more {
  justify-content: center;
  gap: 0.15rem;
  padding: 1.25rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}

.card-more h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }

.card-more a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--teal);
  font-weight: 500;
  font-size: 1rem;
}

@media (min-width: 900px) {
  .prop-row > .card { flex-basis: 19rem; }
}

.badge {
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  padding: 0.3rem 0.55rem;
}

.badge-alt {
  inset-inline-end: auto;
  inset-inline-start: 0.85rem;
  background: var(--teal);
}

.badge-sold {
  background: #4b5563;
}

.card-body {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.card-type {
  font-size: 0.9rem;
  color: var(--teal);
  font-weight: 500;
}

.card-body h3 {
  font-size: 1.25rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.price {
  margin-top: auto;
  padding-top: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sold .card-media img {
  filter: grayscale(1) contrast(0.95);
}

/* Filters */
.filters-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding: 0.55rem 0 1.15rem;
  padding-inline-end: 8rem;
  border-bottom: 1px solid var(--line);
  min-height: 3.5rem;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
}

.filter-pill {
  position: relative;
}

.filter-pill > button {
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  cursor: pointer;
}

.filter-pill > button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.filter-pill.is-on > button,
.filter-pill > button[aria-expanded="true"] {
  border-color: var(--ink);
  background: #fff;
}

.filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 8;
  min-width: 13rem;
  padding: 0.4rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.filter-menu.is-wide {
  min-width: 15.5rem;
  padding: 0.7rem 0.85rem;
}

.filter-menu button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}

.filter-menu button:hover,
.filter-menu button[aria-selected="true"] {
  color: var(--teal);
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0 0.2rem;
  color: var(--text);
  cursor: pointer;
}

.filter-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--teal);
}

.filters-meta {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.filter-clear {
  border: 0;
  background: transparent;
  color: var(--teal);
  min-height: 44px;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.filter-clear:hover {
  text-decoration: underline;
}

.filters select:focus,
.filters input:focus,
.btn:focus-visible,
.nav a:focus-visible,
.icon-btn:focus-visible,
.filter-pill > button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.result-count {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

.market {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.market__open {
  display: flex;
  width: 100%;
  min-height: 44px;
}

.market__body .section-head {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.market__body .section-head p {
  margin: 0;
}

.market__body .result-count {
  margin-bottom: 1rem;
}

.market__more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.market__more .btn {
  min-width: 12rem;
}

/* Trust bar */
.trust {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.trust-row p {
  margin: 0;
}

.trust-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: inherit;
  font-weight: 500;
}

.trust-reviews:hover {
  color: var(--ink);
  text-decoration: underline;
}

.promo {
  padding: 1.15rem 0 0.35rem;
}

.promo[hidden] {
  display: none;
}

.promo-stage {
  position: relative;
  width: min(1320px, calc(100% - 2rem));
  margin-inline: auto;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.15rem;
  background: var(--ink);
  aspect-ratio: 2.35 / 1;
  min-height: 16.5rem;
  max-height: 26rem;
}

.promo-slide {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.promo-slide.is-on {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.promo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 32, 36, 0.86) 0%, rgba(21, 32, 36, 0.28) 48%, rgba(21, 32, 36, 0.1) 100%);
}

.promo-copy {
  position: absolute;
  z-index: 2;
  inset-inline: 1.5rem 5.5rem;
  bottom: 1.35rem;
  max-width: 34rem;
}

.promo-kicker {
  display: inline-block;
  margin: 0 0 0.35rem;
  color: var(--brass-glow);
  font-size: 0.875rem;
  font-weight: 600;
}

.promo-copy h2 {
  margin: 0 0 0.3rem;
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  max-width: 16ch;
}

.promo-line {
  margin: 0 0 0.45rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.promo-price {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.promo-copy .btn {
  min-height: 44px;
  padding-inline: 1.15rem;
  border-radius: var(--btn-r);
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.promo-copy .btn:hover {
  background: var(--brass-text);
  color: #fff;
}

.promo-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.94);
  color: var(--ink);
  transform: translateY(-50%);
  cursor: pointer;
}

.promo-nav svg {
  width: 1.15rem;
  height: 1.15rem;
}

.promo-nav--prev {
  inset-inline-start: 0.75rem;
}

.promo-nav--next {
  inset-inline-end: 0.75rem;
}

.promo-nav:hover {
  background: #fff;
}

html[dir="rtl"] .promo-nav svg {
  transform: scaleX(-1);
}

.promo-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.55rem;
  display: flex;
  gap: 0.15rem;
  transform: translateX(-50%);
}

.promo-dots button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.promo-dots button span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.promo-dots button[aria-current="true"] span {
  width: 1.15rem;
  background: #fff;
}

@media (max-width: 720px) {
  .promo {
    padding: 1rem 0 0.15rem;
  }

  .promo-stage {
    width: calc(100% - 2rem);
    aspect-ratio: 4 / 5;
    min-height: 22rem;
    max-height: none;
  }

  .promo-copy {
    inset-inline: 1rem;
    bottom: 3rem;
  }

  .promo-copy h2 {
    max-width: 14ch;
  }

  .promo-nav {
    top: 34%;
  }

  .promo-nav--prev {
    inset-inline-start: 0.5rem;
  }

  .promo-nav--next {
    inset-inline-end: 0.5rem;
  }
}

.reviews-block {
  padding-top: 0;
  padding-bottom: 2.5rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.reviews-grid blockquote {
  margin: 0;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.reviews-grid p {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.reviews-grid footer {
  color: var(--muted);
  font-size: 0.95rem;
}

.reviews-grid cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

.star-row {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  color: var(--brass);
}

.star-row svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.intent-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.35rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

.intent-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.55rem;
}

.intent-card p {
  margin: 0 0 1.15rem;
  color: var(--muted);
  max-width: 36ch;
  flex: 1;
}

.intent-card .btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  min-height: 48px;
  line-height: 1.3;
  padding-block: 0.7rem;
  border-radius: var(--btn-r);
}

.quotes-head {
  text-align: center;
  margin-bottom: 2rem;
}

.quotes-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 0.45rem;
}

.quotes-head p {
  margin: 0;
  color: var(--muted);
}

.quotes-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.quote-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.quote-row--alt {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12.5rem);
}

.quote-row--alt .quote-who {
  order: 2;
  margin-top: 0;
}

.quote-who {
  margin-top: 1.75rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.quote-who strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.35;
}

.quote-who span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.quote-row blockquote {
  margin: 0;
  padding: 1.4rem 1.4rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

.quote-row .star-row {
  margin-bottom: 0.65rem;
}

.quote-row blockquote p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
}

.quote-row--alt blockquote {
  margin-top: 1.5rem;
}

.gil-notes p {
  margin: 0 0 0.85rem;
  color: var(--text);
}

.home-talk {
  padding-top: 0;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.talk-pin {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.home-talk__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-bottom: 1rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
}

.home-talk__switch button {
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.85rem;
  cursor: pointer;
}

.home-talk__switch button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.home-buyers {
  padding-top: 0;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.home-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem);
  gap: 1.75rem 2rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

.home-lane[hidden] {
  display: none;
}

.home-lane__copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0.2rem 0 0.7rem;
  max-width: 18ch;
}

.home-lane__copy .btn-lg {
  margin: 0.35rem 0 1.25rem;
}

.home-lane__copy .lead {
  max-width: 46ch;
  color: var(--muted);
  margin-bottom: 1rem;
}

.home-lane .inquiry,
.inquiry-offer {
  position: static;
  padding: 1.45rem 1.35rem 1.35rem;
  border: 0;
  border-radius: 1.1rem;
  background: var(--offer);
  color: #fff;
  box-shadow: inset 0 3px 0 var(--brass), 0 16px 32px rgba(47, 42, 36, 0.18);
}

.inquiry-kicker {
  margin: 0 0 0.45rem;
  color: var(--brass-glow);
  font-size: 0.875rem;
  font-weight: 600;
}

.home-lane .inquiry h2,
.inquiry-offer h2 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  max-width: none;
}

.home-lane .inquiry .inquiry-note,
.inquiry-offer .inquiry-note {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.15rem;
}

.home-lane .inquiry label,
.inquiry-offer label {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 500;
}

.home-lane .inquiry .opt,
.inquiry-offer .opt {
  color: rgba(255, 255, 255, 0.55);
}

.home-lane .inquiry .field input:not([type="radio"]):not([type="checkbox"]),
.home-lane .inquiry .field textarea,
.home-lane .inquiry .field select,
.inquiry-offer .field input:not([type="radio"]):not([type="checkbox"]),
.inquiry-offer .field textarea,
.inquiry-offer .field select {
  min-height: 48px;
  border: 0;
  background: #fff;
  color: var(--ink);
}

.home-lane .inquiry .btn,
.inquiry-offer .btn {
  width: 100%;
  min-height: 52px;
  margin-top: 0.2rem;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.home-lane .inquiry .btn:hover,
.inquiry-offer .btn:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.inquiry-trust {
  margin: 0.75rem 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.875rem;
}

.home-lane .inquiry .form-ok,
.inquiry-offer .form-ok {
  color: #d7ece8;
}

.inquiry.is-sent .field,
.inquiry.is-sent .btn,
.inquiry.is-sent .inquiry-note,
.inquiry.is-sent .inquiry-trust,
.inquiry.is-sent .inquiry-kicker {
  display: none;
}

#owners,
#buyers,
#home-form,
#buyers-form {
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.reviews-more {
  margin: 1rem 0 0;
  text-align: center;
}

.reviews-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--teal);
  font-weight: 500;
}

.reviews-more a:hover {
  text-decoration: underline;
}

.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.section-links a {
  color: var(--teal);
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.section-links a:hover {
  text-decoration: underline;
}

.sold-note {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.gil-card {
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  background: var(--paper);
}

.gil-card__who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.gil-photo {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 18%;
  background: #ece8e0;
}

.gil-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.gil-card__who strong {
  display: block;
  font-size: 1.05rem;
}

.gil-card__who span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.gil-work {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.gil-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gil-step;
}

.gil-card li {
  counter-increment: gil-step;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 36px;
  padding: 0.35rem 0;
  font-size: 1rem;
  color: var(--text);
}

.gil-card li::before {
  content: counter(gil-step);
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.stars {
  color: var(--brass);
  letter-spacing: 0.12em;
  margin-inline-end: 0.4rem;
}

.trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c5c0b5;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  grid-template-areas:
    "intro form"
    "body form";
  column-gap: 3.5rem;
  row-gap: 1.75rem;
  align-items: start;
}

.split-intro {
  grid-area: intro;
  min-width: 0;
}

.split-body {
  grid-area: body;
  min-width: 0;
}

.split > .inquiry {
  grid-area: form;
  min-width: 0;
}

.split ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.split li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

/* Listing page — contained gallery, details sit under the photo */
.project-hero {
  background: var(--paper);
}

.project-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(920px, calc(100% - 2rem));
  height: min(52vh, 480px);
  margin: 0 auto;
  background: #1a2226;
}

.project-hero__image {
  width: 100%;
  height: 100%;
  max-height: min(52vh, 480px);
  object-fit: contain;
  cursor: zoom-in;
}

.project-hero__bar {
  display: flex;
  justify-content: flex-start;
  width: min(920px, calc(100% - 2rem));
  margin: 0.75rem auto 0.65rem;
}

.project-hero__tools {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.project-hero__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.project-hero__back:hover {
  border-color: var(--ink);
}

.project-hero__count {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(21, 32, 36, 0.42);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}

.project-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(21, 32, 36, 0.42);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.project-hero__nav:hover {
  background: rgba(21, 32, 36, 0.75);
}

/* RTL: previous sits on the right and the glyph mirrors to point right. Next sits on the left. */
.project-hero__nav--prev { right: 16px; left: auto; }
.project-hero__nav--next { left: 16px; right: auto; }

.project-hero__text {
  width: min(1120px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 1.6rem 0 0.4rem;
  color: var(--ink);
}

.project-hero__place {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.project-hero__text h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  max-width: 22ch;
}

.project-hero__price {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 600;
}

.project-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 20px 0 0;
}

.project-hero__facts dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.project-hero__facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.project-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.btn-hero-fill {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  font-weight: 600;
}

.btn-hero-fill svg {
  color: #25d366;
}

.btn-hero-fill:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-hero-fill:hover svg {
  color: #25d366;
}

.gallery-empty {
  width: 100%;
  height: 100%;
  min-height: min(52vh, 480px);
  display: grid;
  place-items: center;
  background: #e7e0d3;
  color: var(--muted);
}

.lp-body {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.project-page__quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.project-page__quick > div {
  padding: 18px 20px;
  border-inline-start: 1px solid var(--line);
}

.project-page__quick > div:first-child {
  border-inline-start: 0;
}

.project-page__quick span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.project-page__quick strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.facts-head {
  margin: 0 0 1.35rem;
  color: var(--teal);
  text-align: center;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
}

.project-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 168px;
  max-width: 210px;
  min-height: 148px;
  padding: 1.2rem 1rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.fact-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  color: var(--teal);
  background: rgba(31, 107, 102, 0.1);
  border-radius: 50%;
}

.fact-icon svg {
  width: 20px;
  height: 20px;
}

.fact-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.fact-label {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.fact-value {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.listing-lead {
  margin-top: 2.4rem;
  padding: 2rem 1.5rem 1.7rem;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.listing-lead__copy h2 {
  margin-bottom: 0.4rem;
  color: var(--teal);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.listing-lead__copy p {
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
  max-width: 36ch;
}

.listing-lead__ref {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.listing-lead__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  max-width: 640px;
  margin: 1.35rem auto 0;
  text-align: start;
}

.listing-lead__form .field {
  margin-bottom: 0;
}

.listing-lead__form .field-wide,
.listing-lead__foot {
  grid-column: 1 / -1;
}

.listing-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.1rem;
}

.listing-lead .opt {
  color: var(--muted);
  font-weight: 400;
}

.listing-lead input[dir="ltr"] {
  text-align: start;
}

.listing-lead.is-sent .listing-lead__form .field,
.listing-lead.is-sent .listing-lead__form button {
  display: none;
}

.home-owners {
  padding-top: 0;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.home-owners .sell-kinds {
  margin-bottom: 0.5rem;
}

.sell-page h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  margin-bottom: 0.7rem;
  max-width: 16ch;
}

.sell-page .lead {
  max-width: 46ch;
  color: var(--muted);
  margin-bottom: 1rem;
}

.sell-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sell-kinds li {
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.inquiry-note {
  margin: -0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.sell-offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0.5rem 0 0;
}

.sell-offers article {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: start;
}

.sell-offers article:first-child {
  border-top: 1px solid var(--line);
}

.sell-offers h3 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.sell-offers p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.sell-faq {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 0;
}

.sell-faq h2 {
  color: var(--ink);
  text-align: start;
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.sell-faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
}

.sell-faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.sell-faq summary::-webkit-details-marker {
  display: none;
}

.sell-faq details p {
  margin: 0.55rem 0 0.2rem;
  color: var(--muted);
  max-width: 62ch;
}

.contact-details {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.contact-details li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-details a {
  color: var(--ink);
  font-weight: 500;
}

.prose h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 0.7rem;
}

.prose h2 {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}

.prose p,
.prose li {
  color: var(--text);
}

.prose ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.prose li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 1.6rem;
  position: relative;
  z-index: 1;
}

.article-card {
  display: block;
  position: relative;
  z-index: 1;
  padding: 1.2rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

.article-card:hover {
  border-color: var(--teal);
}

.article-card h2 {
  color: var(--ink);
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.article-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.article-card .more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--teal);
  font-size: 0.88rem;
  font-weight: 500;
}

.article-card:hover .more {
  color: var(--ink);
}

.eyebrow a {
  color: inherit;
}

.useful-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 1.4rem;
}

.useful-grid a {
  display: block;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.useful-grid a:hover {
  border-color: var(--teal);
}

.useful-grid strong {
  display: block;
  color: var(--teal);
  margin-bottom: 0.25rem;
}

.useful-grid span {
  color: var(--muted);
  font-size: 0.92rem;
}

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

.services-row a {
  display: block;
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--btn-r);
  background: var(--surface);
  text-align: center;
}

.services-row a:hover {
  border-color: var(--teal);
}

.services-row strong {
  display: block;
  color: var(--teal);
  margin-bottom: 0.3rem;
}

.services-row span {
  color: var(--muted);
  font-size: 0.92rem;
}

.lp-copy {
  max-width: 68ch;
  white-space: pre-wrap;
}

.lp-agent {
  margin: 0;
  font-size: 0.95rem;
}

.lp-agent b { display: block; }
.lp-agent span { color: var(--muted); font-size: 0.85rem; }

.video-box video {
  width: 100%;
  max-height: 420px;
  background: #000;
}

.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: var(--z-overlay);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  gap: 0.5rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 10, 12, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}

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

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.lightbox .lb-close { top: 1rem; left: 1rem; }
.lightbox .lb-prev { right: 1rem; left: auto; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { left: 1rem; right: auto; top: 50%; transform: translateY(-50%); }

.card-media.ph {
  display: grid;
  place-items: center;
  background: #e7e0d3;
  color: var(--muted);
}

.ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem;
  text-align: center;
  min-width: 9.5rem;
  border: 1px solid rgba(176, 138, 79, 0.38);
  background: rgba(255, 252, 247, 0.55);
}

.ph-inner svg {
  width: 2.35rem;
  height: 2.35rem;
  color: var(--brass);
}

.ph-inner span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.gallery-empty .ph-inner {
  min-width: 13rem;
  min-height: 9.5rem;
  padding: 1.75rem 1.85rem;
  gap: 0.9rem;
}

.gallery-empty .ph-inner svg {
  width: 2.85rem;
  height: 2.85rem;
}

.gallery-empty .ph-inner span {
  font-size: 1.05rem;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.25rem;
  margin: 1.2rem 0 0;
}

.spec dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.spec dd {
  margin: 0;
  font-weight: 500;
}

.inquiry {
  background: var(--surface);
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

@media (min-width: 981px) {
  .inquiry {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
  }
}

.inquiry h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,
.field select {
  min-height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.55rem 0.75rem;
}

.field legend {
  padding: 0;
  margin-bottom: 0.15rem;
}

fieldset.field {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
  min-inline-size: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.choice-row label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.choice-row label:has(:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.choice-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.opt {
  color: var(--muted);
  font-weight: 400;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.form-ok {
  display: none;
  color: var(--teal);
  font-weight: 500;
}

.form-ok.is-on {
  display: block;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding: 0 0 2rem;
}

.footer-cta {
  background: var(--paper);
  color: var(--text);
  padding: 2.75rem 0;
  border-top: 1px solid var(--line);
}

.footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer .footer-cta h2 {
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  margin: 0 0 0.4rem;
}

.footer-cta p {
  margin: 0;
  color: var(--muted);
  max-width: 42ch;
}

.footer-cta .btn {
  flex-shrink: 0;
}

.footer-body {
  padding: 3.5rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
  margin-bottom: 0.7rem;
}

.site-footer a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  cursor: pointer;
}

.site-footer a:hover {
  color: #fff;
}

.legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.float-wa {
  position: fixed;
  bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  left: 1.1rem;
  z-index: var(--z-overlay);
  height: 52px;
  padding: 0 1.15rem 0 0.9rem;
  border-radius: 999px;
  background: #25d366;
  color: #053b1a;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  cursor: pointer;
}

.float-wa svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  flex-shrink: 0;
}

.nav-panel {
  display: none;
}

@media (max-width: 980px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
    column-gap: 0.5rem;
    padding-inline-start: 0.65rem;
    padding-inline-end: 0.25rem;
  }

  .header-actions {
    gap: 0;
  }

  .icon-btn {
    border: 0;
    color: var(--ink);
  }

  .icon-btn:hover,
  .icon-btn[aria-expanded="true"] {
    color: var(--teal);
  }

  .hero {
    min-height: min(78vh, 620px);
  }

  .hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.1rem);
    max-width: 15ch;
  }

  .hero-copy {
    margin-bottom: 2.75rem;
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .intent-grid,
  .quote-row,
  .quote-row--alt,
  .home-lane,
  .home-buyers__panel {
    grid-template-columns: 1fr;
  }

  .quote-row--alt .quote-who {
    order: 0;
    margin-top: 0;
  }

  .quote-row .quote-who,
  .quote-row--alt blockquote {
    margin-top: 0;
  }

  .home-buyers .inquiry {
    border-inline-start: 0;
    padding-inline-start: 1.35rem;
    border-top: 0;
    padding-top: 1.45rem;
  }

  .section-head,
  .catalog-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .deal-switch {
    width: 100%;
  }

  .deal-switch a {
    flex: 1;
    justify-content: center;
  }

  .body-listing #main {
    padding-bottom: 5.75rem;
  }

  .nav-panel__langs {
    margin: 0.4rem 0;
    padding: 0.4rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .project-hero__bar,
  .project-hero__stage {
    width: calc(100% - 2rem);
  }

  .project-hero__text {
    width: calc(100% - 2rem);
    margin-inline: auto;
    padding-top: 1.25rem;
  }

  .inquiry {
    padding: 1.25rem;
  }

  .legal {
    font-size: 0.9rem;
  }



  .filters-meta {
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
    order: 2;
  }

  .filters-bar {
    padding-inline-end: 0;
  }

  .split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "form"
      "body";
    gap: 1.5rem;
  }

  .split > .inquiry {
    position: static;
  }

  .home-lane,
  .home-owners__panel,
  .home-buyers__panel {
    grid-template-columns: 1fr;
    padding: 1.15rem 1rem;
    gap: 1.25rem;
  }

  .home-owners .inquiry,
  .home-lane .inquiry {
    border-inline-start: 0;
    padding-inline-start: 1.35rem;
    border-top: 0;
    padding-top: 1.45rem;
  }

  .footer-cta__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-cta .btn {
    width: 100%;
  }

  .reviews-grid,
  .grid,
  .footer-grid,
  .listing-lead__form,
  .sell-offers,
  .article-grid,
  .useful-grid,
  .services-row {
    grid-template-columns: 1fr;
  }

  .float-wa {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }

  .float-wa span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .project-hero__stage,
  .project-hero__image {
    height: min(42vh, 360px);
    max-height: min(42vh, 360px);
  }

  .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; }

  .body-listing .float-wa { display: none; }

  .nav,
  .header-phone {
    display: none;
  }

  .icon-btn {
    display: inline-flex;
  }

  .nav-panel.is-open {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 1rem;
    gap: 0.2rem;
  }

  .nav-panel a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

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

@media (max-width: 720px) {
  .logo img {
    height: 42px;
    max-height: 42px;
  }

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

  .hero {
    min-height: 88vh;
  }

  .hero-copy {
    margin-bottom: 5.25rem;
  }

  .section {
    padding: 3rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* The generic .inquiry rule later in this file was overriding .inquiry-offer,
   which left white text on a near-white card on manage.html and index.html.
   Two classes beat one, so this restores the dark card the white text needs. */
.inquiry.inquiry-offer {
  background: var(--offer);
  color: #fff;
}

/* Footer "areas we work in" menu. The links are plain static HTML inside a
   collapsed <details> on purpose: the footer itself is built by JavaScript,
   and JS-injected links are crawled far less reliably. Collapsed keeps the
   page tidy; the markup is still in the served HTML for search engines. */
.area-links { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem 1.5rem; }
.area-links details { border-top: 1px solid var(--line); padding-top: 1rem; }
.area-links summary {
  cursor: pointer; font-weight: 700; color: var(--ink);
  padding: .4rem 0; list-style: none; font-size: 1rem;
}
.area-links summary::-webkit-details-marker { display: none; }
.area-links summary::after { content: " ▾"; color: var(--brass); }
.area-links details[open] summary::after { content: " ▴"; }
.area-grid {
  display: grid; gap: 1.25rem 2rem; padding: 1rem 0 .25rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.area-col h3 { font-size: .95rem; margin: 0 0 .5rem; color: var(--ink); }
.area-col a {
  display: block; padding: .18rem 0; font-size: .92rem;
  color: #5d574e; text-decoration: none;
}
.area-col a:hover { color: var(--ink); text-decoration: underline; }
.crumbs { font-size: .9rem; color: #6b655c; margin-bottom: .75rem; }
.crumbs a { color: #6b655c; }
.city-siblings { margin-top: 2.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.city-siblings h2 { font-size: 1rem; margin-bottom: .5rem; }
.city-siblings a { display: inline-block; margin: 0 0 .4rem 1rem; font-size: .92rem; color: #5d574e; }
.city-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.bullets { margin: .5rem 0 1.25rem; padding-inline-start: 1.1rem; }
.bullets li { margin-bottom: .35rem; }

/* City landing pages. They used to be a wall of grey text; the band gives the
   page a head, and the listings strip puts real inventory on a page that is
   otherwise only words. The strip deletes itself when that city has none. */
.city-hero {
  background: var(--offer);
  color: #fff;
  padding: 2.6rem 0 2.4rem;
}
.city-hero .crumbs,
.city-hero .crumbs a { color: rgba(255,255,255,.62); }
.city-hero .crumbs a:hover { color: #fff; }
.city-hero .eyebrow { color: var(--brass-glow); font-weight: 600; margin: .6rem 0 .2rem; }
.city-hero h1 { color: #fff; margin: 0 0 .4rem; max-width: 22ch; }
.city-hero__sub { color: rgba(255,255,255,.72); margin: 0 0 1.3rem; }
.city-hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.city-body { padding-top: 2.4rem; }
.city-body .lead { font-size: 1.1rem; line-height: 1.7; }
.city-body h2 { margin-top: 2.1rem; }
.city-body h3 { margin-top: 1.3rem; font-size: 1.02rem; }
.city-listings { margin-top: 2.6rem; }
.city-contact {
  margin-top: 2.6rem; padding: 1.6rem;
  border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface);
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.city-contact h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.city-contact p { margin: 0; color: #5d574e; }
.city-contact__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .city-hero { padding: 2rem 0 1.8rem; }
  .city-contact { flex-direction: column; align-items: stretch; }
}

/* Confirmation after a form is sent. Before this the form just greyed out and
   the visitor was left on a dead screen with nowhere to go. */
.thanks { text-align: center; padding: 1.6rem .5rem .4rem; }
.thanks__mark {
  width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 122, 94, .12); color: #107a5e;
}
.thanks__mark svg { width: 26px; height: 26px; }
.thanks h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.thanks p { margin: 0 auto 1.2rem; max-width: 34ch; color: #5d574e; }
.thanks__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.inquiry-offer .thanks h3 { color: #fff; }
.inquiry-offer .thanks p { color: rgba(255,255,255,.78); }
.inquiry-offer .thanks__mark { background: rgba(255,255,255,.14); color: #fff; }

/* 404. Cloudflare Pages serves this file with a real 404 status, which is what
   stops search engines indexing a missing page as if it were content. */
.notfound { padding: 3rem 0 4rem; text-align: center; }
.notfound h1 { margin: .3rem auto .6rem; max-width: 18ch; }
.notfound__lead { color: #5d574e; max-width: 46ch; margin: 0 auto 1.6rem; }
.notfound__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.notfound__help { color: #5d574e; font-size: .95rem; }

/* Minimum touch target. Several links and icon buttons rendered under 40px on
   a phone, which is below what a finger reliably hits. The inline-flex keeps
   text links from becoming blocks and breaking the sentences they sit in. */
@media (pointer: coarse) {
  a, button, [role="button"], summary, label > input[type="radio"] + span {
    min-height: 40px;
  }
  .site-footer a, .area-col a, .city-siblings a,
  .deal-switch a, .filter-pill button, .crumbs a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  /* Height only. A min-WIDTH here pushed the header 26px past a 390px phone. */
  .lb-close, .lb-prev, .lb-next, .market__open { min-height: 44px; }
  .site-header a, .site-header button { min-height: 0; }
}

/* Office-curated banner strip.
   The frame has a FIXED aspect ratio and every slide is cropped into it with
   object-fit: cover. That is deliberate: the office uploads whatever they
   have — a portrait phone photo, a 2400px render, a clip — and none of it may
   stretch. Cover crops, it never distorts. A tall photo loses its top and
   bottom rather than squashing the building in it. */
.banner { padding: 2.2rem 0 0; }
.banner__track {
  display: grid; gap: .85rem;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 420px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 1.2rem .6rem;
  scrollbar-width: thin;
}
.banner__slide { scroll-snap-align: start; text-decoration: none; color: inherit; }
.banner__frame {
  position: relative;
  aspect-ratio: 4 / 3;          /* one shape for every slide, whatever came in */
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--paper);
}
.banner__media {
  width: 100%; height: 100%;
  object-fit: cover;            /* crop, never squash */
  object-position: 50% 50%;
  display: block;
}
.banner__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.2rem .9rem .75rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  display: grid; gap: .1rem;
}
.banner__caption strong { font-size: 1rem; line-height: 1.3; }
.banner__caption span { font-size: .88rem; color: rgba(255,255,255,.82); }
@media (min-width: 900px) {
  .banner__track { grid-auto-columns: minmax(0, 1fr); overflow: visible; padding-inline: 0; }
  .banner { padding-inline: 1.2rem; max-width: 1180px; margin: 0 auto; }
  .banner__track { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* A clip needs to read as a clip even before it decodes, otherwise the slide
   is just a grey rectangle and looks broken. */
.banner__play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  pointer-events: none;
}
.banner__play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid;
  border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff;
  transform: translateX(-2px);
}
.banner__frame:has(video) { background: #1c1a17; }
/* Free media in the banner is artwork the office made, not a photograph of a
   room: cropping it to fill a very wide frame cuts faces and logos in half.
   Show all of it on the brand ground instead. Listing photos keep cover. */
.promo-slide img.promo-contain { object-fit: contain; background: var(--paper); }
/* An image the office uploads is rarely the banner's shape. Rather than crop
   it (which cut Gil's face off) or leave bars beside it, a blurred, scaled-up
   copy of the same image fills the frame behind the whole, sharp one. The
   colours always match because it IS the image, so any upload looks deliberate
   and nothing is lost. */
.promo-slide .promo-fill {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.12);          /* hides the soft edge the blur creates */
  z-index: 0;
}
.promo-slide img.promo-contain { position: relative; z-index: 1; background: transparent; }
/* Artwork the office designs usually carries its own text — on Gil's poster
   that is the phone number. Our caption and button sat right on top of it.
   The whole slide is already a link, so on artwork they simply step aside. */
.promo-slide.is-art .promo-copy,
.promo-slide.is-art .promo-shade { display: none; }


/* 1. The new logo is a wider lockup than the old one (3.9:1 against 2.9:1), so
   at the header's height it took 44px more than the old file and pushed the
   whole page sideways on a phone. Let it shrink instead of overflowing. */
.logo { min-width: 0; flex-shrink: 1; }
.logo img { max-width: 100%; height: auto; }
@media (max-width: 520px) {
  .logo img { max-height: 34px; width: auto; max-width: 132px; }
}

/* 3. The blurred fill is scaled up 12% to hide its soft edge; the slide must
   clip it, or it reaches past the frame and widens the page. */
.promo-slide, .promo-stage { overflow: hidden; }

/* Safety net only, after fixing the causes above: `clip` rather than `hidden`
   so it cannot break position: sticky on the header. */
html, body { overflow-x: clip; }

/* Legal pages: plain reading column. */
.legal-page { max-width: 760px; padding-top: 2rem; padding-bottom: 3rem; }
.legal-page h2 { margin-top: 1.8rem; font-size: 1.2rem; }
.legal-page p, .legal-page li { line-height: 1.75; }
.form-privacy { font-size: .85rem; color: #6b655c; margin-top: .6rem; }
.inquiry-offer .form-privacy { color: rgba(255,255,255,.7); }
.inquiry-offer .form-privacy a { color: #fff; }
.thanks--failed h3 { color: #a3301f; }

/* Team page (/team) */
.team-head { max-width: 46rem; margin-bottom: 2rem; }
.team-founder { margin-top: 1rem; padding: 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; }
.team-founder h2 { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--ink); }
.team-founder p { margin: 0 0 0.75rem; line-height: 1.8; color: var(--text); }
.team-founder p:last-child { margin-bottom: 0; }
.team-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0.25rem 0 0.75rem; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 980px) {
  .team-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .team-card { width: calc((100% - 2.5rem) / 3); }
}
.team-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem;
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.team-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; background: var(--paper); }
.team-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.team-body h2 { font-size: 1.3rem; margin: 0; }
.team-role { color: var(--brass-text); font-weight: 500; margin: 0.15rem 0 0.7rem; }
.team-info { list-style: none; margin: 0 0 1rem; padding: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.team-info span { unicode-bidi: isolate; overflow-wrap: anywhere; }
.team-acts { display: flex; gap: 0.5rem; margin-top: auto; }
/* quiet round icons; the label stays for screen readers and translation */
.team-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); background: transparent; text-decoration: none;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.team-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.team-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.team-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(31, 107, 102, 0.06); }
.team-btn--wa { color: #1f9d55; }
.team-btn--wa:hover { border-color: #1f9d55; color: #1f9d55; background: rgba(31, 157, 85, 0.07); }
.team-cta {
  margin-top: 2.5rem; padding: 1.5rem; border-radius: 1.1rem; background: var(--offer); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.team-cta h2 { margin: 0; font-size: 1.35rem; color: #fff; }
.team-cta .btn-ink { background: #fff; color: var(--ink); }
@media (min-width: 600px) and (max-width: 979px) { .team-photo { aspect-ratio: 1 / 1; } }
/* phones: photo beside the details, so five people do not take five screens */
@media (max-width: 599px) {
  .team-card { flex-direction: row; align-items: stretch; }
  .team-photo { width: 7rem; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; }
  .team-body { padding: 0.85rem 0.85rem 0.9rem; }
  .team-body h2 { font-size: 1.15rem; }
  .team-role { margin-bottom: 0.4rem; font-size: 0.95rem; }
  .team-info { font-size: 0.9rem; margin-bottom: 0.7rem; }
}
.team-body h2 a { color: inherit; text-decoration: none; }
.team-body h2 a:hover { color: var(--teal); }
.team-photo-link { display: block; }
.team-acts { align-items: center; }
.team-card-link { margin-inline-start: auto; color: var(--teal); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.team-card-link:hover { text-decoration: underline; }
/* the header is drawn by site.js a moment after the HTML; hold its space so
   the page does not jump down 76px (was CLS 0.114 on phones, Google's bar is 0.1) */
.site-header:empty { min-height: calc(var(--header-h) + 1px); }

/* links inside running text must not rely on color alone (WCAG 1.4.1) */
.form-privacy a { text-decoration: underline; text-underline-offset: 2px; }
.inquiry.inquiry-offer .eyebrow, .site-footer .eyebrow { color: var(--brass-glow); }

/* cookie notice: fixed, so it never pushes the page (no layout shift) */
.cookie-bar {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: calc(var(--z-header) + 5);
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  max-width: 44rem; margin-inline: auto; padding: 0.8rem 1rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(21, 32, 36, 0.16); font-size: 0.95rem;
}
.cookie-bar p { margin: 0; flex: 1 1 16rem; line-height: 1.5; }
.cookie-bar a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar .btn { min-height: 44px; padding-inline: 1.4rem; }
@media (max-width: 599px) {
  .cookie-bar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cookie-bar .btn { flex: 1 1 100%; }
}

/* Rounded corners, the way Scoutr's own cards look (owner, 3.11). */
:root { --card-r: 1rem; }
.card { border-radius: var(--card-r); overflow: hidden; }
.card-media { border-radius: var(--card-r) var(--card-r) 0 0; }
.card-more { border-radius: var(--card-r); }
.project-hero__stage { border-radius: var(--card-r); overflow: hidden; }