.properties-hub-page {
  --properties-shell: min(1480px, calc(100vw - clamp(44px, 8vw, 144px)));
  background: #070706;
  color: var(--perbra-champagne-text);
}

.properties-hub-page main {
  overflow: hidden;
}

.properties-hub-shell {
  position: relative;
  width: var(--properties-shell);
  margin-inline: auto;
}

.properties-hub-hero {
  position: relative;
  padding: calc(var(--header-height) + clamp(42px, 5vw, 76px)) 0 clamp(76px, 8vw, 118px);
  background:
    radial-gradient(circle at 80% 8%, rgba(165, 138, 82, .14), transparent 27%),
    radial-gradient(circle at 12% 86%, rgba(161, 145, 103, .08), transparent 31%),
    #070706;
}

.properties-hub-hero::before,
.properties-collections::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(213, 198, 164, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 198, 164, .04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.properties-hub-heading {
  margin-bottom: clamp(38px, 4.6vw, 70px);
}

.properties-hub-kicker {
  margin: 0;
  color: var(--perbra-gold-mid);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.properties-hub-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
  gap: clamp(44px, 8vw, 132px);
  align-items: end;
  margin-top: clamp(20px, 2.7vw, 38px);
}

.properties-hub-title-row h1,
.properties-section-heading h2,
.properties-all-inner h2 {
  margin: 0;
  color: transparent;
  background: var(--perbra-heading-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.048em;
}

.properties-hub-title-row h1 {
  max-width: 980px;
  font-size: clamp(64px, 7.7vw, 126px);
  line-height: .82;
}

.properties-hub-title-row > p {
  max-width: 540px;
  margin: 0 0 .28em;
  color: rgba(229, 222, 211, .72);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.82;
}

/* The approved homepage gallery mechanics and geometry, reused unchanged. */
.properties-hub-gallery .project-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none !important;
  scroll-behavior: auto;
  overscroll-behavior-inline: contain;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
}

.properties-hub-gallery .project-viewport::-webkit-scrollbar {
  display: none;
}

.properties-hub-gallery .project-viewport.is-dragging {
  cursor: grabbing;
}

.properties-hub-gallery .project-track {
  display: flex;
  gap: clamp(22px, 1.8vw, 32px);
  width: max-content;
  padding: 3px 2px 30px;
}

.properties-hub-gallery .project-card {
  flex: 0 0 clamp(360px, 27.5vw, 520px);
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: linear-gradient(135deg, rgba(238, 227, 201, .86), rgba(161, 145, 103, .58) 42%, rgba(139, 123, 88, .66) 72%, rgba(213, 198, 164, .78)) 1;
  background: #080706;
  box-shadow: 0 28px 68px rgba(0, 0, 0, .36), 0 0 0 1px rgba(213, 198, 164, .14), 0 0 24px rgba(161, 145, 103, .07);
  transform: none;
}

.properties-hub-gallery .project-card:hover,
.properties-hub-gallery .project-card:focus-within {
  transform: none;
  box-shadow: 0 32px 76px rgba(0, 0, 0, .42), 0 0 0 1px rgba(213, 198, 164, .2), 0 0 28px rgba(161, 145, 103, .1);
}

.properties-hub-gallery .project-card-link,
.properties-hub-gallery .project-card-media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.properties-hub-gallery .project-card-media::before {
  z-index: 1;
  opacity: .22;
}

.properties-hub-gallery .project-card-media::after {
  z-index: 2;
  inset: auto 0 0;
  width: auto;
  height: 58%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(2, 2, 2, .84));
  box-shadow: none;
}

.properties-hub-gallery .project-card-image {
  pointer-events: none;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.properties-slide-caption {
  position: absolute;
  z-index: 3;
  inset: auto clamp(24px, 2.2vw, 38px) clamp(25px, 2.4vw, 42px);
  display: grid;
  color: #f1ede4;
}

.properties-slide-caption small,
.properties-slide-caption > span {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .21em;
  text-transform: uppercase;
}

.properties-slide-caption small {
  margin-bottom: 12px;
  color: #d5c6a4;
}

.properties-slide-caption strong {
  font-family: var(--serif);
  font-size: clamp(36px, 3.25vw, 54px);
  line-height: .91;
  font-weight: 400;
  letter-spacing: -.038em;
}

.properties-slide-caption > span {
  justify-self: start;
  margin-top: 20px;
  padding-top: 11px;
  border-top: 1px solid rgba(238, 227, 201, .46);
  color: rgba(241, 237, 228, .86);
}

.properties-collections {
  position: relative;
  padding: clamp(78px, 8vw, 126px) 0 clamp(86px, 9vw, 140px);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(191, 145, 86, .12), transparent 30%),
    linear-gradient(135deg, #f3eee5 0%, #e5dccd 50%, #f1ebe1 100%);
  color: #211a14;
}

.properties-collections::before {
  opacity: .34;
  background-image:
    linear-gradient(rgba(77, 58, 39, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 58, 39, .055) 1px, transparent 1px);
}

.properties-section-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
  gap: clamp(38px, 8vw, 128px);
  align-items: start;
  margin-bottom: clamp(46px, 6vw, 88px);
}

.properties-section-heading .properties-hub-kicker {
  padding-top: 10px;
  color: #8e7448;
}

.properties-section-heading > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: end;
}

.properties-section-heading h2,
.properties-all-inner h2 {
  font-size: clamp(48px, 5.8vw, 92px);
  line-height: .88;
}

.properties-section-heading > div > p {
  max-width: 500px;
  margin: 0 0 .25em;
  color: rgba(38, 29, 21, .7);
  font-size: 15px;
  line-height: 1.78;
}

.properties-collection-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 42px);
}

.properties-collection-card {
  overflow: hidden;
  border: 1px solid rgba(104, 78, 45, .2);
  background: rgba(248, 244, 237, .75);
  box-shadow: 0 24px 56px rgba(56, 39, 23, .1);
}

.properties-collection-card--wide {
  grid-column: 1 / -1;
}

.properties-collection-card > a {
  display: grid;
  height: 100%;
}

.properties-collection-card--wide > a {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  height: clamp(370px, 29vw, 490px);
}

.properties-collection-card:not(.properties-collection-card--wide) > a {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  height: clamp(360px, 27vw, 455px);
}

.properties-collection-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #17130f;
}

.properties-collection-card:not(.properties-collection-card--wide) .properties-collection-media {
  min-height: 0;
  aspect-ratio: auto;
}

.properties-collection-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(238, 227, 201, .16);
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 34%);
}

.properties-collection-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}

.properties-collection-card:hover .properties-collection-media img,
.properties-collection-card:focus-within .properties-collection-media img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.015);
}

.properties-collection-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(26px, 2.8vw, 46px);
}

.properties-collection-copy > span {
  color: #92784b;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.properties-collection-copy h3 {
  margin: 14px 0 16px;
  color: #2b2119;
  font-family: var(--serif);
  font-size: clamp(38px, 3.25vw, 56px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.042em;
}

.properties-collection-copy p {
  max-width: 510px;
  margin: 0;
  color: rgba(43, 33, 25, .68);
  font-size: 14px;
  line-height: 1.72;
}

.properties-collection-copy strong {
  align-self: flex-start;
  margin-top: clamp(18px, 2vw, 28px);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139, 123, 88, .58);
  color: #51432f;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.properties-all-callout {
  position: relative;
  padding: clamp(76px, 8vw, 122px) 0;
  border-top: 1px solid rgba(213, 198, 164, .18);
  background:
    radial-gradient(circle at 76% 22%, rgba(165, 138, 82, .12), transparent 32%),
    #090807;
}

.properties-all-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .58fr);
  gap: clamp(54px, 9vw, 148px);
  align-items: end;
}

.properties-all-inner .properties-hub-kicker {
  margin-bottom: 25px;
}

.properties-all-inner > div:last-child > p {
  max-width: 510px;
  margin: 0 0 30px;
  color: rgba(229, 222, 211, .7);
  font-size: 15px;
  line-height: 1.78;
}

.properties-gold-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 360px);
  min-height: 64px;
  padding: 0 24px;
  border: 1px solid rgba(213, 198, 164, .62);
  background: var(--perbra-gold-gradient);
  color: #16120d;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .2), 0 0 24px rgba(161, 145, 103, .08);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease;
}

.properties-gold-button:hover,
.properties-gold-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .28), 0 0 28px rgba(161, 145, 103, .14);
}

@media (min-width: 1700px) {
  .properties-hub-gallery .project-card {
    flex-basis: 540px;
  }
}

@media (max-width: 1100px) {
  .properties-hub-title-row,
  .properties-section-heading > div,
  .properties-all-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .properties-hub-title-row > p,
  .properties-section-heading > div > p,
  .properties-all-inner > div:last-child > p {
    max-width: 680px;
  }

  .properties-hub-gallery .project-card {
    flex-basis: min(61vw, 500px);
  }

  .properties-section-heading {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 42px;
  }

  .properties-collection-card--wide > a {
    grid-template-columns: 1.04fr .96fr;
  }
}

@media (max-width: 820px) {
  .properties-hub-page {
    --properties-shell: min(100% - 40px, 720px);
  }

  .properties-hub-hero {
    padding-top: calc(var(--header-height) + 34px);
  }

  .properties-hub-title-row h1 {
    font-size: clamp(58px, 13vw, 92px);
  }

  .properties-hub-gallery .project-card {
    flex-basis: min(72vw, 470px);
  }

  .properties-section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .properties-section-heading .properties-hub-kicker {
    padding-top: 0;
  }

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

  .properties-collection-card--wide {
    grid-column: auto;
  }

  .properties-collection-card--wide > a {
    height: auto;
    grid-template-columns: 1fr;
  }

  .properties-collection-card:not(.properties-collection-card--wide) > a {
    height: auto;
    grid-template-columns: 1fr;
  }

  .properties-collection-card .properties-collection-media,
  .properties-collection-card--wide .properties-collection-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .properties-collection-copy {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .properties-hub-page {
    --properties-shell: calc(100vw - 30px);
  }

  .properties-hub-hero {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 62px;
  }

  .properties-hub-heading {
    margin-bottom: 30px;
  }

  .properties-hub-title-row {
    gap: 22px;
    margin-top: 16px;
  }

  .properties-hub-title-row h1 {
    font-size: clamp(52px, 17vw, 74px);
    line-height: .87;
  }

  .properties-hub-title-row > p {
    font-size: 13.5px;
    line-height: 1.68;
  }

  .properties-hub-gallery .project-track {
    gap: 14px;
    padding-bottom: 20px;
  }

  .properties-hub-gallery .project-card {
    flex-basis: 79vw;
  }

  .properties-slide-caption {
    inset: auto 22px 24px;
  }

  .properties-slide-caption strong {
    font-size: 36px;
  }

  .properties-slide-caption > span {
    margin-top: 15px;
  }

  .properties-collections,
  .properties-all-callout {
    padding-block: 62px;
  }

  .properties-section-heading {
    margin-bottom: 34px;
  }

  .properties-section-heading h2,
  .properties-all-inner h2 {
    font-size: 48px;
    line-height: .91;
  }

  .properties-collection-grid {
    gap: 20px;
  }

  .properties-collection-media,
  .properties-collection-card--wide .properties-collection-media,
  .properties-collection-card:not(.properties-collection-card--wide) .properties-collection-media {
    aspect-ratio: 16 / 9;
  }

  .properties-collection-copy {
    padding: 28px 24px 32px;
  }

  .properties-collection-copy h3 {
    margin: 17px 0 18px;
    font-size: 43px;
  }

  .properties-collection-copy p,
  .properties-all-inner > div:last-child > p {
    font-size: 13.5px;
    line-height: 1.68;
  }

  .properties-gold-button {
    min-height: 58px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .properties-hub-gallery .project-card:hover,
  .properties-hub-gallery .project-card:focus-within {
    box-shadow: 0 28px 68px rgba(0, 0, 0, .36), 0 0 0 1px rgba(213, 198, 164, .14), 0 0 24px rgba(161, 145, 103, .07);
  }

  .properties-hub-gallery .project-card--featured:hover .project-card-image,
  .properties-hub-gallery .project-card--featured:focus-within .project-card-image,
  .properties-collection-card:hover .properties-collection-media img,
  .properties-collection-card:focus-within .properties-collection-media img {
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .properties-hub-gallery .project-viewport {
    scroll-behavior: auto;
  }

  .properties-hub-gallery .project-card-image,
  .properties-collection-media img,
  .properties-gold-button {
    transition: none;
  }
}