/* ==========================================================================
   CONTACT US PAGE — styles scoped to /contact-us/ only. Reuses .tech-hero /
   .breadcrumb (tech.css), .section / .btn / .form-field / .form-status
   (styles.css) where those patterns already exist; only genuinely new
   components are defined here.
   ========================================================================== */

/* ===== Three-column main section ===== */
.contact-columns { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr) minmax(0,0.9fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1024px) { .contact-columns { grid-template-columns: 1fr; } }

.contact-col-heading { font-family: var(--font-display); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); margin-bottom: var(--space-5); }

/* ---- Column A: Get In Touch cards ---- */
.contact-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-card { background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); padding: var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-card svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-card h3 { font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); margin-bottom: var(--space-2); }
.contact-card p, .contact-card address { font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: var(--lh-normal); font-style: normal; margin: 0; }
.contact-card a { color: var(--text-on-dark-muted); text-decoration: none; display: block; }
.contact-card a:hover { color: var(--accent); text-decoration: underline; }

/* ---- Column B: Send Us a Message ---- */
.contact-form-lead { font-size: var(--fs-sm); color: var(--text-on-dark-muted); margin-bottom: var(--space-5); }
.contact-form-lead strong { color: var(--white); }
.contact-form .form-field label .required { color: var(--accent); margin-left: 2px; }

/* ---- Column C: Find Us ---- */
.contact-map-wrap { position: relative; width: 100%; padding-top: 75%; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-on-dark); }
.contact-map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-directions { display: inline-flex; margin-top: var(--space-4); width: 100%; justify-content: center; }
/* .btn-outline-light is styled for light card backgrounds elsewhere on the
   site (navy border/text) — this section has a dark background, so by
   default the text was invisible (navy-on-navy) until hover. Scoped fix,
   using the design system's --success green per client request. */
.contact-directions.btn-outline-light { border-color: var(--success); color: var(--success); }
.contact-directions.btn-outline-light:hover { background: var(--success); color: var(--white); }

/* ===== Branch network CTA band ===== */
.contact-branch-cta { text-align: center; }
.contact-branch-cta h2 { margin-bottom: var(--space-3); }
.contact-branch-cta p { color: var(--text-on-dark-muted); margin-bottom: var(--space-6); }

/* ===== Bottom info bar ===== */
.contact-info-bar { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 900px) { .contact-info-bar { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .contact-info-bar { grid-template-columns: 1fr; } }
.contact-info-item { text-align: center; padding: var(--space-5); border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--border-on-dark); }
.contact-info-item strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); margin-bottom: var(--space-2); }
.contact-info-item span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }