/* ============================================================
   MAYFAIR PLACE — Homepage  (matched to v0 build)
   ============================================================ */

/* ---------- Hero ---------- */
.hero { position:relative; height:70vh; min-height:520px; overflow:hidden; }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 70%; }

/* ---------- Hero text section ---------- */
.hero-text { background:var(--cream); text-align:center; padding:60px 48px 12px; }
.hero-text .hero__headline { color:var(--ink); font-size:clamp(20px,2.4vw,34px); font-weight:400; line-height:1.1; letter-spacing:0.01em; margin-bottom:28px; }
.hero-text .hero__sub { color:var(--text); font-size:clamp(15px,1.29vw,19px); font-weight:300; max-width:760px; margin:0 auto 48px; line-height:1.6; }
.hero__actions { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* ---------- Sanctuary intro ---------- */
.sanctuary { text-align:center; padding-top:60px; }
.sanctuary__title { margin-bottom:48px; }
.sanctuary p { max-width:920px; margin:0 auto 28px; }
.sanctuary__tag { margin-top:20px; }

/* ---------- Villas band header ---------- */
.villas-intro { text-align:center; background:var(--taupe-deep); }
.villas-intro__sub { max-width:680px; margin:24px auto 0; }

/* ---------- Feature pairs (image + heading) ---------- */
.feature-pairs { background:var(--taupe-deep); padding-top:0; }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:24px 64px; max-width:var(--max); margin:0 auto; padding:0 48px 80px; align-items:start; }
.feature-col__title { margin-bottom:6px; }
.feature-col__text { margin-bottom:28px; max-width:520px; }
.feature-col__img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.feature-cta { text-align:center; background:var(--taupe-deep); padding-bottom:var(--pad); }

/* ---------- Experience ---------- */
.experience { background:var(--cream); }
.experience__grid { display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:center; }
.experience__title { margin-bottom:28px; }
.experience__list { list-style:none; margin:38px 0; display:flex; flex-direction:column; gap:20px; }
.experience__list li { font-size:16px; color:#6B6B6B; padding-left:26px; position:relative; font-weight:300; }
.experience__list li::before { content:''; position:absolute; left:0; top:11px; width:9px; height:9px; border-radius:50%; background:var(--terracotta); }
.experience__img { width:100%; aspect-ratio:3/4; object-fit:cover; }

/* ---------- Mayfair difference (dark) ---------- */
.difference { background:var(--brown-dark); text-align:center; }
.difference__title { color:var(--cream); }
.difference__sub { color:rgba(249,247,242,0.7); max-width:640px; margin:22px auto 0; }
.difference__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:64px 56px; margin-top:84px; }
.diff-item { text-align:center; grid-column:span 2; }
.diff-item:nth-child(4) { grid-column:2 / 4; }
.diff-item:nth-child(5) { grid-column:4 / 6; }
.diff-item { text-align:center; }
.diff-item__icon { width:78px; height:78px; border-radius:50%; background:rgba(183,154,110,0.18); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; }
.diff-item__icon span { width:26px; height:26px; border-radius:50%; background:var(--terracotta); display:block; }
.diff-item__title { font-family:var(--font-display); font-size:clamp(16px,1.6vw,22px); font-weight:400; color:var(--cream); margin-bottom:16px; }
.diff-item__text { font-size:15.5px; line-height:1.75; color:rgba(249,247,242,0.62); max-width:340px; margin:0 auto; font-weight:300; }

/* ---------- Reviews ---------- */
.reviews { background:var(--cream); }
.reviews__title { text-align:center; margin-bottom:72px; }
.reviews__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.review { background:#FBF8F2; border:1px solid var(--line); padding:44px 38px; display:flex; flex-direction:column; gap:26px; }
.review__stars { display:flex; gap:5px; color:var(--star); font-size:17px; }
.review__text { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:17.5px; line-height:1.65; color:var(--ink); flex:1; }
.review__foot { display:flex; justify-content:space-between; align-items:baseline; padding-top:8px; }
.review__name { font-family:var(--font-display); font-size:18px; color:var(--ink); }
.review__date { font-size:13px; color:rgba(110,104,95,0.8); letter-spacing:0.03em; }

/* ---------- Journey CTA ---------- */
.journey { background:var(--taupe); text-align:center; }
.journey__title { margin-bottom:28px; }
.journey__sub { max-width:720px; margin:0 auto; }
.journey__note { margin-top:24px; font-size:15px; color:var(--text); }
.journey__actions { display:flex; gap:18px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.journey__regards { margin-top:72px; font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--ink); line-height:1.7; }

/* ---------- Video Walkthrough ---------- */
.walkthrough { background: var(--taupe); padding: 110px 0; text-align: center; }
.walkthrough__title { margin-bottom: 22px; }
.walkthrough__sub { max-width: 680px; margin: 0 auto 56px; }
.walkthrough__frame {
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #0e0a07;
  overflow: hidden;
}
.walkthrough__frame iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .feature-row { grid-template-columns:1fr; gap:48px; }
  /* Reorder so each feature reads: heading → text → image */
  .feature-row > *:nth-child(1) { order:1; }
  .feature-row > *:nth-child(3) { order:2; }
  .feature-row > *:nth-child(5) { order:3; }
  .feature-row > *:nth-child(2) { order:4; }
  .feature-row > *:nth-child(4) { order:5; }
  .feature-row > *:nth-child(6) { order:6; }
  .experience__grid { grid-template-columns:1fr; gap:48px; }
  .experience__img { order:-1; aspect-ratio:4/3; }
  .difference__grid { grid-template-columns:1fr; gap:56px; }
  /* Fix span 2 on single-column grid */
  .diff-item { grid-column: span 1 !important; }
  .reviews__grid { grid-template-columns:1fr; }
}
@media (max-width:768px){
  .nav__logo-img { height: 38px; }
  .hero { height:58vh; }
  .hero__actions { flex-direction:column; width:100%; }
  .hero__actions .btn { justify-content:center; }
  .feature-row { padding:0 24px 64px; }
  .walkthrough { padding: 72px 0; }
}