/* Residence pricing, based on the supplied visual reference. */
#homes { background: #493428; color: #f3ebdf; }
#homes > .container { width: var(--page-content-width); }
#homes > .container > .eyebrow { font-size: var(--type-label); margin-bottom: 26px; }
#homes h2 { font-size: var(--type-section); line-height: 1.2; }
#homes h2 em { color: inherit; }
#homes .section-lead { max-width: none; margin-top: 24px; font-size: var(--type-body); }
#homes .residence-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 40px 0 42px;
  border-bottom: 1px solid #826b57;
}
#homes .residence-tabs button {
  min-height: 76px;
  padding: 20px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d8c3ac;
  font-size: var(--type-ui);
  letter-spacing: .015em;
}
#homes .residence-tabs button:hover { background: #ffffff08; }
#homes .residence-tabs button[aria-selected="true"] {
  background: #ddc2a0;
  color: #35291e;
  font-weight: 700;
}
#homes .residence-panel {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(30px, 3.3vw, 62px);
  margin-top: 0;
}
#homes .floorplan-preview { border: 1px solid #cbb69d; background: #f0e8dc; }
#homes .floorplan-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.3;
  padding: 24px;
  object-fit: cover;
  filter: blur(8px);
  opacity: .45;
}
#homes .floorplan-overlay { inset: 0 0 56px; background: #f3ebdf40; padding: 24px; }
#homes .floorplan-overlay .eyebrow {
  margin-bottom: 26px;
  font-size: var(--type-label);
  letter-spacing: .04em;
}
#homes .floorplan-overlay .btn {
  background: #493428;
  color: #f3ebdf;
  padding: 20px 28px;
  font-size: var(--type-ui);
  letter-spacing: .03em;
  gap: 28px;
}
#homes .floorplan-overlay .btn:hover { background: #34251c; }
#homes .floorplan-overlay p { margin-top: 16px; font-size: var(--type-caption); }
#homes .floorplan-preview figcaption {
  margin: 0;
  min-height: 56px;
  padding: 16px 12px;
  background: #e5d7c4;
  color: #453b2c;
  text-align: center;
  font-size: var(--type-caption);
  letter-spacing: .025em;
}
#homes .residence-copy h3 {
  font-size: var(--type-subheading);
  line-height: 1.2;
  letter-spacing: -.035em;
}
#homes .residence-size { margin: 10px 0 0; font-size: var(--type-stat); }
#homes .residence-price {
  width: 100%;
  max-width: 530px;
  margin: 30px 0 26px;
  padding: 12px 28px;
  border-left: 3px solid #ba9466;
  background: #e6cfaf;
  color: #3d2b20;
}
#homes .residence-price > span { margin-bottom: 8px; font-size: var(--type-label); letter-spacing: .06em; }
#homes .residence-price p { gap: 12px; }
#homes .residence-price strong { font-size: var(--type-price); font-weight: 600; }
#homes .residence-price p > span { font-size: var(--type-ui); }
#homes .residence-copy > .btn {
  width: auto;
  padding: 18px 28px;
  background: #ddc2a0;
  color: #38271d;
  font-size: var(--type-ui);
  gap: 28px;
}
#homes .residence-copy > .btn:hover { background: #ecd7bc; }
#homes .residence-panel .btn > span[aria-hidden] { font-size: var(--type-icon); line-height: 1; }
@media (max-width: 820px) {
  #homes > .container { width: var(--page-content-width); }
  #homes > .container > .eyebrow { font-size: var(--type-label); margin-bottom: 20px; }
  #homes .section-lead { font-size: var(--type-body); }
  #homes .residence-tabs { margin: 28px 0; }
  #homes .residence-tabs button { min-height: 60px; font-size: var(--type-ui); padding: 14px 8px; }
  #homes .residence-panel { grid-template-columns: 1fr; gap: 26px; }
  #homes .residence-copy { order: -1; }
  #homes .residence-price { max-width: none; }
}
@media (max-width: 480px) {
  #homes .residence-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #homes .floorplan-preview img { aspect-ratio: 1.25; }
  #homes .floorplan-overlay { padding: 16px; }
  #homes .floorplan-overlay .eyebrow { margin-bottom: 18px; font-size: var(--type-label); }
  #homes .floorplan-overlay .btn { padding: 14px 18px; font-size: var(--type-ui); }
  #homes .floorplan-overlay p { font-size: var(--type-caption); }
  #homes .floorplan-preview figcaption { font-size: var(--type-caption); }
  #homes .residence-price { padding: 20px; }
  #homes .residence-price > span { font-size: var(--type-label); }
}