.detail{display:grid;grid-template-columns:minmax(320px,1fr) 1.4fr;gap:clamp(30px,5vw,80px);margin-top:clamp(34px,4vw,54px);padding-bottom:var(--gap)}
.detail .np{font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.detail h1{font-family:var(--display);font-weight:300;text-transform:uppercase;font-size:clamp(40px,4.6vw,62px);line-height:1.05;margin:8px 0 2px;color:var(--green)}
.detail .en{font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,28px);color:var(--sand)}
.detail .desc{margin-top:20px;font-size:14px;color:#736862}
.detail .desc-en{font-size:13px;color:rgba(12,64,46,.5)}
.detail .btn{margin-top:26px}
.areas{margin-top:38px}
.areas h2{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.areas h2 small{font-weight:400;letter-spacing:.04em;text-transform:none;color:rgba(12,64,46,.5);margin-left:8px}
.arow{display:flex;justify-content:space-between;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-cream);font-size:13px}
.arow:nth-child(even){background:var(--paper)}
.arow .n{color:var(--sand);font-weight:700;min-width:18px}
.arow .lbl b{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.arow .lbl span{color:rgba(12,64,46,.45);font-size:12px}
.arow .val{font-weight:700;color:var(--green)}
.plan-side{background:#fff;padding:clamp(20px,3vw,50px);display:grid;place-content:center}
.plan-side img{max-width:100%;height:auto}
@media(max-width:900px){.detail{grid-template-columns:1fr}}

/* mobile tier (page) */
@media(max-width:1200px){
  .detail{grid-template-columns:1fr;gap:32px;margin-top:28px}
  .detail h1{font-size:clamp(30px,7vw,52px)}
  .plan-side{padding:20px}
}

/* free-text block under the room list (post content) */
.apartment-body{margin-top:34px;color:#5b534f;font-size:15px;line-height:1.8}
.apartment-body p+p{margin-top:14px}

/* status pill beside the storey label */
.detail .unit-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.detail .unit-top .st{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;color:#fff}
.detail .unit-top .st.avail{background:#2f7d5a}
.detail .unit-top .st.res{background:#b8873f}
.detail .unit-top .st.sold{background:#8f4a3c}

/* specification block, same rhythm as the area tables */
.areas.params .val span{color:#9b9089;font-weight:400}
.areas.params .val.price{font-weight:700;color:var(--green);white-space:nowrap}

/* a maisonette lists its rooms storey by storey */
.areas .level{margin:22px 0 6px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.areas .level:first-of-type{margin-top:12px}

/* a sold unit sends people to what is still available */
.detail .sold-note{margin:26px 0 0;font-size:14px;font-weight:700;letter-spacing:.04em;color:#8f4a3c}
.detail .unit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:18px}
.detail .unit-actions .alt-link{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);border-bottom:1px solid currentColor;padding-bottom:3px;transition:.2s}
.detail .unit-actions .alt-link:hover{color:var(--green)}

/* ===== enquiry form for this apartment ===== */
.unit-form{margin-top:clamp(56px,7vw,96px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line-cream)}
.unit-form__in{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,80px);align-items:start}
.unit-form h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.15;text-transform:uppercase;color:var(--green)}
.unit-form__intro p{margin-top:18px;font-size:15px;line-height:1.7;color:#736862;max-width:420px}
.unit-form__agent{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-cream)}
.unit-form__agent b{display:block;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em;color:var(--green)}
.unit-form__agent a{display:block;margin-top:4px;font-size:14px;color:var(--sand)}
.unit-form__agent a:hover{color:var(--green)}
@media(max-width:900px){.unit-form__in{grid-template-columns:1fr}}