.villa-page .site-nav a[aria-current] {
  color: #1d5140;
  text-decoration: underline;
  text-decoration-color: #b88e56;
  text-underline-offset: 7px;
}

.villa-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  min-height: 44px;
  color: #496054;
  font-size: 13px;
  line-height: 1.5;
}

.villa-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.villa-breadcrumb [aria-current] { font-weight: 700; }

.villa-intro {
  padding-block: 9px clamp(31px, 4vw, 54px);
  background:
    radial-gradient(ellipse at 83% 125%, #285746, transparent 56%),
    linear-gradient(115deg, #112f26, #163c31);
  color: #fffdf5;
}

.villa-intro .villa-breadcrumb { color: #e1e9de; }
.villa-intro .eyebrow, .villa-consult .eyebrow { color: var(--gold); }
.villa-intro a:focus-visible, .villa-consult a:focus-visible { outline-color: var(--gold); }

.villa-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 20px clamp(24px, 6vw, 88px);
  margin-top: 15px;
}

.villa-page h1 {
  margin-top: 9px;
  font: 400 clamp(34px, 4.2vw, 59px)/1.24 var(--serif);
  letter-spacing: -.07em;
}

.villa-lead {
  max-width: 550px;
  margin-top: 14px;
  color: #e1ebe2;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -.035em;
}

.villa-intro-facts, .villa-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.villa-intro-facts {
  overflow: hidden;
  border: 1px solid #e0ecde45;
  border-radius: 10px;
  background: #ffffff09;
}

.villa-intro-facts > div, .villa-detail-facts > div { padding: 14px clamp(12px, 1.45vw, 20px); }
.villa-intro-facts > div + div { border-left: 1px solid #e0ecde45; }
.villa-intro-facts dt { color: #dce7de; font-size: 13px; line-height: 1.5; }
.villa-intro-facts dd { margin-top: 4px; color: #f4dcaa; font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -.052em; }

.villa-catalog, .villa-terms { padding-block: clamp(34px, 4vw, 59px); }

.villa-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 9px 24px;
  margin-bottom: 22px;
}

.villa-section-heading h2, .villa-terms h2, .villa-consult h2 { margin-top: 6px; }
.villa-section-heading > p { color: var(--body); font-size: 15px; line-height: 1.6; }

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

.villa-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffef9;
  box-shadow: 0 2px 8px #18382c0a;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.villa-card-photo { aspect-ratio: 16 / 9; overflow: hidden; background: #d7ded4; }
.villa-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.villa-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px 17px 14px; }

.villa-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5d4c31;
  font-size: 12px;
  font-weight: 700;
}

.villa-card-meta span { padding: 3px 5px; border-radius: 4px; background: #f1e8d5; letter-spacing: .035em; }
.villa-card h3 { margin-top: 8px; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.3; letter-spacing: -.07em; }
.villa-card-teaser { flex: 1; margin-top: 7px; color: var(--body); font-size: 14px; line-height: 1.55; }

.villa-card-price { display: grid; gap: 1px; margin-top: 15px; }
.villa-card-price span { color: #56695e; font-size: 12px; }
.villa-card-price strong { color: #1c4f3d; font-size: clamp(21px, 2vw, 27px); letter-spacing: -.055em; }

.villa-card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid #e4e7dd;
  color: #245241;
  font-size: 14px;
  font-weight: 700;
}

@media (hover: hover) {
  .villa-card:hover { border-color: #739182; box-shadow: 0 8px 20px #18382c18; }
  .villa-card:hover img { transform: scale(1.025); }
}

.villa-note { margin-top: 14px; color: #536358; font-size: 13px; line-height: 1.65; }

.villa-detail-top { padding-top: 7px; padding-bottom: clamp(32px, 4.5vw, 62px); }

.villa-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(0, .88fr);
  grid-template-areas: "exterior summary";
  align-items: center;
  gap: clamp(20px, 4vw, 54px);
  margin-top: 11px;
}

.villa-summary { grid-area: summary; }
.villa-summary h1 { font-size: clamp(33px, 4vw, 54px); }
.villa-type { margin-top: 7px; color: #795d32; font-size: 15px; font-weight: 700; }
.villa-summary-copy { margin-top: 14px; color: var(--body); font-size: 16px; line-height: 1.75; letter-spacing: -.025em; }

.villa-detail-facts {
  gap: 10px;
  margin-top: 19px;
}

.villa-detail-facts > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  border: 1px solid #d4ded1;
  border-radius: 8px;
  background: #edf2e9;
}

.villa-detail-facts > div:first-child { border-color: #e7dcc1; background: #f5eedc; }
.villa-detail-facts dt { color: #435b4d; font-size: 13px; line-height: 1.5; }
.villa-detail-facts dd { color: var(--forest); font-size: clamp(21px, 2.55vw, 33px); font-weight: 700; line-height: 1.4; letter-spacing: -.07em; }
.villa-summary-note { margin-top: 9px; color: #536358; font-size: 13px; line-height: 1.55; }
.villa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 15px; margin-top: 16px; }
.villa-button { background: var(--forest); color: #fffef6; }
.villa-button:hover { background: #255747; }

.villa-exterior { grid-area: exterior; min-width: 0; }
.villa-exterior img { width: 100%; height: auto; border-radius: 11px; }
.villa-exterior figcaption { margin-top: 10px; color: var(--body); font-size: 14px; line-height: 1.6; }
.villa-exterior figcaption span { display: inline-block; padding: 3px 8px; border-radius: 4px; background: #e8eee4; color: #295443; font-size: 12px; font-weight: 700; }
.villa-exterior figcaption p { margin-top: 5px; }

.villa-interiors { padding-block: clamp(34px, 4vw, 58px); border-block: 1px solid #dce3d8; background: var(--sage); }
.villa-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.villa-room { overflow: hidden; border: 1px solid #d8dfd4; border-radius: 10px; background: #fffef9; }
.villa-room img { width: 100%; height: auto; background: #e1e4da; }
.villa-room figcaption { padding: 13px 15px 16px; }
.villa-room h3 { font-size: 20px; letter-spacing: -.045em; }
.villa-room p { margin-top: 5px; color: var(--body); font-size: 15px; line-height: 1.6; }

.villa-terms-list { margin-top: 15px; border-top: 1px solid #d7ded3; }
.villa-terms-list > div { display: grid; grid-template-columns: minmax(108px, 1fr) 5fr; gap: 5px 18px; padding-block: 13px; border-bottom: 1px solid #d7ded3; }
.villa-terms-list dt { font-weight: 700; }
.villa-terms-list dd { color: var(--body); font-size: 15px; line-height: 1.65; }
.villa-back { margin-top: 8px; }
.villa-back .icon { transform: rotate(180deg); }

.villa-consult { padding-block: clamp(30px, 4.5vw, 58px); background: var(--evergreen); color: #fffdf5; }
.villa-consult h2 { font-size: clamp(27px, 3vw, 43px); }
.villa-consult-message { margin-top: 8px; color: #dce8df; font-size: 16px; line-height: 1.65; }

@media (max-width: 1119px) {
  .villa-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 830px) {
  .villa-intro-layout { grid-template-columns: minmax(0, 1fr); }
  .villa-intro-facts { max-width: 490px; }
  .villa-detail-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "exterior"; }
  .villa-detail-facts { max-width: 490px; }
}

@media (max-width: 680px) {
  .villa-section-heading { display: grid; }
  .villa-room-grid { grid-template-columns: minmax(0, 1fr); }
  .villa-terms-list > div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .villa-card-grid { grid-template-columns: minmax(0, 1fr); }
  .villa-card-body { padding: 14px 15px; }
  .villa-detail-facts dd { font-size: clamp(21px, 6vw, 29px); }
}