/* Area-specific composition uses the approved project typography, gallery and cards. */
.merade-area-hero { min-height: 360px; }
.merade-area-hero .merade-project-summary { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.merade-area-hero .merade-project-context { margin-bottom: 18px; }
.merade-area-details { width: 100%; }
.merade-area-details > div:first-child { grid-column: auto; }
.merade-area-details dd, .merade-area-details > div:first-child dd { font-size: clamp(20px,1.8vw,25px); letter-spacing: -.025em; }
.merade-area-page .merade-area-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; }
.merade-area-page .merade-area-card-link { width: 100%; }
.merade-area-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.merade-area-pagination a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #b7bcc1; border-radius: 6px; text-decoration: none; font-size: 14px; }
.merade-area-pagination a[aria-current] { color: white; background: var(--merade-navy); border-color: var(--merade-navy); }
@media(hover:hover) and (pointer:fine) { .merade-area-pagination a:not([aria-current]):hover { background: var(--merade-surface); } }
@media(max-width:760px) {
 .merade-area-hero { min-height: 0; }
}
@media(max-width:1000px) { .merade-area-page .merade-area-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 .merade-area-page .merade-area-related-grid { grid-template-columns: 1fr; gap: 18px; }
 .merade-area-details { gap: 18px; }
 .merade-area-details dd, .merade-area-details > div:first-child dd { font-size: 20px; }
}
.merade-area-hero .merade-area-details { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; }
@media(max-width:360px) { .merade-area-hero .merade-area-details { grid-template-columns: 1fr; gap: 14px; } }
/* An editorial investment brief, followed by a distinct amenity strip. */
.merade-area-page .merade-area-lists { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
.merade-area-lists > section { margin: 0; min-width: 0; }
.merade-area-investment { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: 36px; padding-block: 48px; border-top: 1px solid #c9c7be; }
.merade-area-investment h2 { max-width: 10ch; }
.merade-area-investment ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 32px; list-style: none; counter-reset: investment; margin: 0; padding: 0; }
.merade-area-investment li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; align-items: start; font-size: 15px; line-height: 1.6; color: #505964; counter-increment: investment; }
.merade-area-investment li::before { content: counter(investment, decimal-leading-zero); color: #9a783e; font: 500 40px/1 var(--merade-font-heading); letter-spacing: -.03em; }
.merade-area-within { padding: 28px; border-radius: 12px; background: white; }
.merade-area-within ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.merade-area-within li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--merade-surface); font-size: 16px; font-weight: 500; line-height: 1.55; }
.merade-area-within .merade-symbol { flex: none; width: 34px; height: 34px; font-size: 34px; overflow: visible; color: #234464; }
@media(max-width:1000px) {
 .merade-area-investment { grid-template-columns: 1fr; gap: 4px; }
 .merade-area-investment h2 { max-width: none; }
 .merade-area-within ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .merade-area-page .merade-area-lists { gap: 28px; margin-top: 28px; }
 .merade-area-investment { padding-block: 36px; }
 .merade-area-investment ol { grid-template-columns: 1fr; gap: 20px; }
 .merade-area-within { padding: 24px 20px; }
 .merade-area-within ul { grid-template-columns: 1fr; gap: 18px; }
 .merade-area-within li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: center; font-size: 15px; }
 .merade-area-within li:not(:has(.merade-symbol)) { grid-template-columns: 1fr; }
}