.page-areas { background: #fcfdf9; }
.areas-hero { min-height: calc(100vh - var(--header-h) - 1px); min-height: calc(100svh - var(--header-h) - 1px); display: flex; align-items: center; padding: 28px 0 40px; border-bottom: 3px solid #a5d4a5; background: linear-gradient(90deg, #0c231bf5, #0c231bd4 45%, #0c231b35), url('../images/mumbai-scrap-yard-hero.png') center / cover; }
.areas-hero .breadcrumbs ol { margin-bottom: 24px; }
.areas-eyebrow { font-size: .7rem; letter-spacing: .13em; font-weight: 600; color: #3f714b; margin-bottom: 14px; }
.areas-hero .areas-eyebrow { color: #c0e4b9; }
.areas-hero h1 { max-width: 24ch; font-family: var(--body); font-size: clamp(2.4rem, 4.5vw, 3.8rem); letter-spacing: -.045em; line-height: 1.06; margin-bottom: 20px; }
.areas-hero h1 > span { color: #a5ebbc; }
.areas-hero .lead { max-width: 53ch; font-size: 1.1rem; line-height: 1.65; color: #dee9df; margin: 0; }
.areas-hero .cta-row { margin-top: 24px; }
.areas-hero .btn { border-radius: 10px; }
.areas-hero .btn-quote { background: #b4e7b6; color: #183522; }
.areas-hero .btn-quote:hover { background: #d1f3d0; }
.areas-hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 24px 0 0; color: #c5dccb; font-size: .85rem; }
.areas-hero-note .icon { color: #a5ebbc; }
.page-areas .section-title { font-family: var(--body); font-size: clamp(1.9rem, 3.3vw, 2.65rem); letter-spacing: -.04em; }
.areas-intro { color: #62715f; font-size: 1rem; max-width: 60ch; margin-bottom: 28px; }
.areas-coverage { background: #edf3e8; }
.coverage-route { border: 1px solid #d6e2cc; background: #fbfdf7; padding: 30px 20px 24px; border-radius: 20px; box-shadow: 0 8px 24px #173a2210; }
.page-areas .station-name { font-family: var(--body); font-size: .95rem; font-weight: 600; }
.page-areas .station-dot { border-color: #295a37; background: #f6fbef; }
.page-areas .station a:hover .station-dot { background: #b8e6a8; }
.page-areas .line-map::before { background: #80aa72; }
.page-areas .area-grid { gap: 22px; }
.page-areas .area-card { display: flex; flex-direction: column; border: 1px solid #dce5d5; padding: 26px; border-radius: 18px; text-decoration: none; color: #173324; box-shadow: 0 4px 16px #173a2205; transition: transform .2s, box-shadow .2s, border-color .2s; }
.page-areas .area-card:hover, .page-areas .area-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px #173a2215; border-color: #85ae79; }
.area-card-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e8f2e1; color: #3b7444; margin-bottom: 20px; }
.area-card-eyebrow { font-size: .62rem; letter-spacing: .11em; color: #627d5c; font-weight: 600; margin-bottom: 8px; }
.page-areas .area-card h3 { font-family: var(--body); font-size: 1.55rem; letter-spacing: -.035em; margin-bottom: 12px; }
.page-areas .area-card p { font-size: .93rem; line-height: 1.75; }
.page-areas .area-card .area-localities { padding: 12px; border-radius: 8px; background: #f3f7ef; color: #59714f; font-size: .8rem; }
.area-card-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; margin-top: auto; border-top: 1px solid #e6ece0; font-weight: 600; font-size: .83rem; color: #33653b; }
.area-card-action > span { font-size: 1.2rem; }
.page-areas .more-link { background: #ecf4e6; padding: 20px 24px; border-radius: 14px; font-size: .95rem; font-weight: 500; }
@media (max-width: 860px) { .coverage-route { padding: 24px; } .page-areas .station a { padding-block: 10px; } }
@media (max-width: 560px) { .areas-hero { background-position: 60% center; padding-block: 24px 32px; } .areas-hero .lead { font-size: 1rem; } .areas-hero-note { font-size: .78rem; } }