.page-contact { background: #eff4eb; }
.contact-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; }
.contact-hero .breadcrumbs ol { margin-bottom: 24px; }
.contact-eyebrow { font-size: .7rem; letter-spacing: .13em; font-weight: 600; color: #41734b; margin-bottom: 14px; }
.contact-hero .contact-eyebrow { color: #c0e4b9; }
.contact-hero h1 { max-width: 23ch; font-family: var(--body); font-size: clamp(2.3rem, 4.5vw, 3.8rem); line-height: 1.06; letter-spacing: -.045em; margin-bottom: 20px; }
.contact-hero h1 > span { color: #a5ebbc; }
.contact-hero .lead { max-width: 52ch; font-size: 1.1rem; line-height: 1.65; color: #dee9df; margin: 0; }
.contact-hero .cta-row { margin-top: 24px; }
.contact-hero .btn { border-radius: 10px; }
.contact-hero .btn-quote { background: #b4e7b6; color: #183522; }
.contact-hero .btn-quote:hover { background: #d1f3d0; }
.contact-hero-note { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 24px 0 0; color: #c5dccb; font-size: .85rem; }
.contact-hero-note .icon { color: #a5ebbc; }
.page-contact .contact-grid { align-items: start; }
.page-contact .contact-card, .page-contact .contact-form-card { min-width: 0; border-radius: 22px; border: 1px solid #d9e4d2; box-shadow: 0 16px 40px #173a2209; }
.contact-photo { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 24px; }
.page-contact .card-title { font-family: var(--body); font-size: 1.8rem; letter-spacing: -.035em; }
.page-contact .contact-dl div { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; border-color: #e1e9db; padding-block: 14px; }
.page-contact .contact-dl dt { font-size: .8rem; color: #6a7a62; }
.page-contact .contact-dl dd { overflow-wrap: anywhere; font-size: .92rem; line-height: 1.7; }
.page-contact .contact-tip { padding: 16px; background: #eef5e7; color: #5c7053; border-radius: 12px; font-size: .85rem; line-height: 1.7; }
.page-contact .contact-card .btn { border-radius: 10px; }
.page-contact .contact-card .btn-call { background: #1e4930; }
.page-contact .contact-card .btn-call:hover { background: #123520; }
.contact-form-intro { font-size: .95rem; line-height: 1.7; color: #63735a; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #e1e9db; }
.page-contact .form-grid { gap: 20px 16px; }
.page-contact .field label { font-size: .85rem; margin-bottom: 8px; }
.page-contact .field input, .page-contact .field select, .page-contact .field textarea { min-height: 50px; border: 1px solid #cddbc7; border-radius: 9px; background: #fcfdfb; padding: 12px; font-size: .92rem; }
.page-contact .field input:focus, .page-contact .field select:focus, .page-contact .field textarea:focus { border-color: #4a7b44; outline: 2px solid #77996a; outline-offset: 1px; background: #fff; }
.page-contact .field [aria-invalid="true"] { border-color: #b42318; background: #fff8f7; }
.page-contact .field textarea { min-height: 120px; }
.page-contact .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.page-contact .form-actions .btn { border-radius: 10px; font-size: .9rem; white-space: normal; }
.page-contact .form-actions .btn-quote { grid-column: 1 / -1; min-height: 54px; background: #215d35; color: #fff; }
.page-contact .form-actions .btn-quote:hover { background: #174828; }
.page-contact .form-actions .btn-wa { background: #eef5e8; color: #2a653a; border-color: #d9e5d2; }
.page-contact .form-actions .btn-wa:hover { background: #deecd5; }
.page-contact .form-actions .btn-outline { border-color: #d4ded0; color: #37553b; }
.page-contact .form-actions .btn-outline:hover { background: #edf3e8; }
.page-contact .form-note { font-size: .76rem; line-height: 1.7; color: #6a7564; }
@media (max-width: 560px) {
  .contact-hero { padding-block: 24px 32px; background-position: 60% center; }
  .contact-hero .lead { font-size: 1rem; }
  .contact-hero-note { font-size: .78rem; }
  .page-contact .contact-dl div { grid-template-columns: 1fr; gap: 4px; }
  .page-contact .form-actions { grid-template-columns: 1fr; }
}