.suburb-hero picture { display: contents; }
.suburb-hero h1 { max-width: 820px; }
.suburb-hero .hero-image { object-fit: cover; }
.suburb-hero .hero-image--contain { object-fit: contain; background: #ded7cb; }
.suburb-hero .hero-note { max-width: 760px; }

.suburb-intro { max-width: 800px; }
.suburb-intro .lead { margin-top: 1.25rem; }

.local-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.local-panel { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.4); }
.local-panel h3 { margin-bottom: 1rem; }
.local-panel p:last-child { margin-bottom: 0; }

.first-class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.first-class-step { padding: 1.5rem; border-top: 3px solid var(--green); background: rgba(255,255,255,.05); }
.first-class-step h3 { margin-bottom: .7rem; }
.first-class-step p { margin-bottom: 0; color: #cbc6bd; }

.suburb-contact { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .suburb-hero { display: block; min-height: 0; background: #1a1917; color: white; }
  .suburb-hero::after { display: none; }
  .suburb-hero picture { display: block; }
  .suburb-hero .hero-image { position: relative; width: 100%; height: auto; object-fit: contain; object-position: center; }
  .suburb-hero .hero-content { padding: 2.5rem 0 3.5rem; }
  .suburb-hero h1 { max-width: 12ch; }
  .suburb-hero .lead, .suburb-hero .hero-note { color: #eeeae2; }
  .suburb-hero .hero-note strong { color: white; }
  .suburb-hero .button--light { color: white; background: rgba(18,17,15,.2); border-color: white; }
  .local-grid { grid-template-columns: 1fr; }
  .first-class-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .suburb-hero .hero-image { object-fit: contain; }
}