.property-top {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  background:var(--ivory);
  color:var(--ink)
}

.gallery-column {
  min-width:0;
  background:#0f1112
}

.main-photo-wrap {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#2c3032
}

.main-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.gallery-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  background:rgba(15,17,18,.78);
  color:#fff;
  font-size:30px;
  line-height:1
}

.gallery-arrow.previous {
  left:18px
}

.gallery-arrow.next {
  right:18px
}

.photo-counter,.photo-label {
  position:absolute;
  bottom:16px;
  padding:5px 9px;
  color:#fff;
  background:rgba(15,17,18,.78);
  font-size:11px;
  letter-spacing:.08em
}

.photo-counter {
  left:16px
}

.photo-label {
  right:16px;
  color:var(--gold-light)
}

.gallery-play-toggle {
  position:absolute;
  z-index:6;
  right:16px;
  top:16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:3px;
  padding:7px 10px;
  color:#fff;
  background:rgba(15,17,18,.78);
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
}

.gallery-play-toggle:hover,
.gallery-play-toggle:focus {
  background:rgba(15,17,18,.96);
  outline:2px solid var(--gold-light);
  outline-offset:2px;
}

.thumbnail-strip {
  display:flex;
  gap:7px;
  padding:9px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.thumbnail {
  flex:0 0 112px;
  padding:0;
  border:2px solid transparent;
  opacity:.72;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
}

.thumbnail img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.thumbnail.active,.thumbnail:focus {
  border-color:var(--gold);
  opacity:1
}

.property-summary {
  padding:clamp(28px,4vw,60px);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.property-summary h1 {
  font-size:clamp(32px,3.1vw,50px);
  margin:0;
  line-height:1.07
}

.status-pill {
  margin:0 0 12px;
  padding:4px 9px;
  border:1px solid #b99a60;
  color:#775a28;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.12em
}

.property-location {
  color:#555;
  margin:10px 0 18px
}

.price {
  font:29px Georgia,serif;
  margin-bottom:10px
}

.quick-facts {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:17px;
  color:#5e5c56;
  font-size:12px
}

.quick-facts span {
  padding:0 12px;
  border-right:1px solid #d4cbbc
}

.quick-facts span:first-child {
  padding-left:0
}

.quick-facts span:last-child {
  border:0
}

.summary-copy {
  color:#4d4c47;
  font-size:14px;
  line-height:1.75;
  margin:0 0 22px
}

.primary-actions {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  gap:10px;
  margin-bottom:20px
}

.primary-actions .button {
  flex:1 1 170px
}

.media-actions {
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px
}

.resource-button {
  min-height:66px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:10px 7px;
  border:1px solid #d7cfc1;
  background:rgba(255,255,255,.38);
  color:#292a29;
  text-transform:uppercase;
  font-size:10px;
  line-height:1.35;
  font-weight:bold
}

.resource-button:hover,.resource-button:focus {
  border-color:var(--gold);
  background:#fffaf0
}

.resource-icon {
  color:#a27c3c;
  font-size:25px
}

.sample-note {
  font-size:10px;
  color:#77736b;
  font-style:italic
}

.section-nav {
  display:flex;
  gap:clamp(18px,4vw,60px);
  padding:0 4.2%;
  border-bottom:1px solid var(--line);
  background:#111416;
  overflow-x:auto
}

.section-nav a {
  flex-shrink:0;
  padding:17px 4px 14px;
  color:#d4d0c8;
  text-decoration:none;
  font-size:12px;
  border-bottom:2px solid transparent
}

.section-nav a:hover,.section-nav a.selected {
  color:#fff;
  border-color:var(--gold)
}

.details-section {
  max-width:1500px;
  margin:auto;
  padding:54px 4.2%;
  display:grid;
  grid-template-columns:1.15fr .9fr 1.1fr;
  gap:clamp(25px,4vw,62px);
  background:var(--charcoal);
  color:var(--ivory)
}

.overview-copy h2 {
  margin:0 0 17px;
  font-size:clamp(27px,2.6vw,38px)
}

.overview-copy p:not(.eyebrow) {
  color:#c9c7c1;
  font-size:13px
}

.highlights-panel {
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:2px 25px
}

.highlight-list {
  list-style:none;
  margin:0;
  padding:0
}

.highlight-list li {
  padding:7px 0;
  color:#e4e0d8;
  font-size:12px
}

.media-preview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-content:start
}

.preview-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gold-light);
  text-align:left
}

.preview-card img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.preview-link {
  font:17px Georgia,serif;
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:5px
}

.video-play {
  position:absolute;
  top:35%;
  left:50%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(18,20,21,.88);
  color:#fff;
  border:1px solid var(--gold)
}

.floorplan-art {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  background:#f2eee5;
  border:8px solid #fff
}

.floorplan-art span {
  position:absolute;
  border:2px solid #333
}

.floorplan-art span:nth-child(1) {
  inset:10% 42% 52% 9%
}

.floorplan-art span:nth-child(2) {
  inset:10% 9% 52% 58%
}

.floorplan-art span:nth-child(3) {
  inset:48% 9% 10% 44%
}

.floorplan-art span:nth-child(4) {
  inset:48% 48% 10% 9%
}

.specifications-section {
  padding:50px 4.2%;
  background:var(--ivory);
  color:#202123
}

.specifications-section .section-heading {
  display:block
}

.specifications-section .section-heading h2 {
  margin:0
}

.spec-grid {
  max-width:1500px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid #d8cfc0;
  border-left:1px solid #d8cfc0
}

.spec-grid div {
  min-height:85px;
  padding:16px;
  border-right:1px solid #d8cfc0;
  border-bottom:1px solid #d8cfc0
}

.spec-grid dt {
  color:#777064;
  font-size:11px;
  font-weight:normal
}

.spec-grid dd {
  margin:7px 0 0;
  font:17px Georgia,serif
}

.location-section {
  padding:45px 4.2%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  max-width:1500px;
  margin:auto;
  background:var(--charcoal);
  color:var(--ivory)
}

.location-section h2 {
  margin:0 0 10px
}

.location-section p:not(.eyebrow) {
  color:#c9c7c1
}

.location-section .button {
  color:#fff
}

.modal-backdrop {
  position:fixed;
  z-index:2000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.82)
}

.modal-backdrop[hidden] {
  display:none
}

.modal-panel {
  position:relative;
  width:min(100%,950px);
  max-height:90vh;
  overflow:auto;
  padding:clamp(22px,4vw,42px);
  background:var(--ivory);
  color:#191a1b
}

.modal-panel h2 {
  margin:0 0 20px;
  font-size:34px
}

.modal-close {
  position:absolute;
  top:10px;
  right:15px;
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  font-size:32px
}

.video-frame {
  min-height:280px;
  display:grid;
  place-items:center;
  padding:25px;
  background:#17191b;
  color:var(--ivory);
  text-align:center
}

.video-frame iframe,.video-frame video {
  width:100%;
  aspect-ratio:16/9;
  border:0
}

.sample-floorplan {
  position:relative;
  width:100%;
  max-width:800px;
  aspect-ratio:4/3;
  margin:18px auto;
  background:#fff;
  border:1px solid #c9c2b5
}

.sample-floorplan span {
  position:absolute;
  display:grid;
  place-items:center;
  border:2px solid #555;
  color:#555
}

.sample-floorplan span:nth-child(1) {
  top:9%;
  left:7%;
  width:40%;
  height:37%
}

.sample-floorplan span:nth-child(2) {
  top:9%;
  right:7%;
  width:40%;
  height:37%
}

.sample-floorplan span:nth-child(3) {
  top:49%;
  left:7%;
  width:24%;
  height:41%
}

.sample-floorplan span:nth-child(4) {
  top:49%;
  right:7%;
  width:24%;
  height:41%
}

@media(max-width:1100px) {
  .property-top {
  grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)
}

.property-summary {
  padding:28px 24px
}

.details-section {
  grid-template-columns:1fr 1fr
}

.media-preview {
  grid-column:1/-1;
  max-width:650px
}

}

@media(max-width:767px) {
  .property-top {
  display:flex;
  flex-direction:column
}

.main-photo-wrap {
  aspect-ratio:4/3
}

.thumbnail-strip {
  gap:5px;
  padding:7px
}

.property-summary {
  padding:28px 5% 25px
}

.property-summary h1 {
  font-size:36px
}

.media-actions {
  gap:6px
}

.resource-button {
  min-height:68px;
  flex-direction:column;
  gap:4px;
  font-size:9px
}

.details-section {
  display:flex;
  flex-direction:column;
  padding:38px 5%;
  gap:26px
}

.highlights-panel {
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0
}

.media-preview {
  grid-column:auto
}

.specifications-section {
  padding:38px 5%
}

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

.location-section {
  align-items:stretch;
  flex-direction:column;
  padding:36px 5%
}

}

/* Main property photo cross-fade layers */
.main-photo-wrap {
  position: relative;
  isolation: isolate;
}

.main-photo.photo-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 550ms ease;
}

.main-photo.photo-layer.is-active {
  opacity: 1;
}

.main-photo-wrap .gallery-arrow,
.main-photo-wrap .photo-counter,
.main-photo-wrap .photo-label {
  z-index: 5;
}

@media (max-width: 480px) {
  .thumbnail { flex-basis: 88px; }
  .gallery-play-toggle { top: 10px; right: 10px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .main-photo.photo-layer {
    transition: none;
  }
  .thumbnail-strip {
    scroll-behavior: auto;
  }
}