/* Shared "Request a quote" inline form section — matches the homepage contact block.
   Scoped under .contact so it never collides with page-level styles. */
.contact { padding: 90px 0; background: rgba(20,22,27,0.6); border-top: 1px solid var(--border-subtle); border-bottom: none; }
.contact .section-head { max-width: 640px; margin: 0 0 48px; text-align: left; }
.contact .section-head h2 { font-size: var(--text-h2); margin-top: 12px; }
.contact .section-head p { color: var(--text-secondary); font-size: var(--text-lead); margin-top: 14px; margin-left: 0; text-wrap: pretty; }
.contact-grid { display: flex; flex-wrap: wrap; gap: 60px; align-items: flex-start; }
.contact-form { flex: 1 1 440px; }
.contact-aside { flex: 1 1 280px; }
.contact .field-label { display: block; margin-bottom: 8px; font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: 0.5px; }
.contact .row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.contact .row > * { flex: 1 1 180px; }
.contact input, .contact textarea { width: 100%; padding: 13px 16px; background: rgba(10,12,16,0.5); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: inherit; font-size: var(--text-sm); }
.contact textarea { line-height: var(--leading-body); resize: vertical; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); }
.contact .svc-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.contact .svc-pills .pill { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 8px 16px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.contact .svc-pills .pill:hover, .contact .svc-pills .pill.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.contact .card { background: var(--bg-card); border: 1px solid var(--border-subtle); }
.contact .steps .step { display: flex; gap: 16px; padding-bottom: 24px; }
.contact .steps .step:last-child { padding-bottom: 0; }
.contact .steps .n { color: var(--accent); font-weight: var(--weight-semibold); font-size: var(--text-lead); min-width: 28px; }
.contact .steps .step h4 { font-weight: var(--weight-medium); margin-bottom: 4px; }
.contact .steps .step p { color: var(--text-secondary); font-size: var(--text-sm); }
.contact-details { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 32px; }
.contact-details > div { flex: 1 1 180px; }
.contact-details strong { color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.contact-details i { color: var(--accent); }
.contact-details .loc-row { display: flex; align-items: center; gap: 14px; }
.contact-details .map-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: color .2s, border-color .2s, transform .2s; }
.contact-details .map-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.contact-details .map-btn i { color: inherit; }
.contact-details .body { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; margin-top: 6px; }

/* Toast (only applies where the page doesn't already define one) */
.toast { position: fixed; bottom: 30px; right: 30px; z-index: 1500; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--charcoal-800); padding: 12px 24px; box-shadow: 0 12px 34px rgba(0,0,0,0.45); opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; pointer-events: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast i { color: var(--charcoal-800); }