/* ============================================================
   CONTACT.CSS - page-specific styles for /contact.
   The form card (.contact-*) and factory card (.nav-card) are
   shared and live in main.css. This file only handles the page
   offset under the fixed nav and the spacing between the two cards.
   ============================================================ */

/* page sits under the fixed nav (top-bar + main-bar) - cream so the
   padding-top offset matches the cream contact section, no grey strip */
.contact-page { padding-top: 124px; background: #f2dcc9; }

/* ---------- hero (light / cream band - same style as /careers) ---------- */
.contact-hero {
  background: #f2dcc9;
  padding: 56px 0 24px; text-align: center;
}
.contact-hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6vw, 72px); line-height: 1.04;
  color: #1f1a1b; margin-bottom: 8px;
}
.contact-hero-subtitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.2;
  color: #1f1a1b; margin-bottom: 20px;
}
.contact-hero-subtitle span { color: var(--gold); }
.contact-hero-lead {
  max-width: 640px; margin: 0 auto; font-size: 17px;
  line-height: 1.8; color: #3a3330;
}

/* form section sits tight under the hero (cream band from main.css); it's the
   last section before the footer, so carry the bottom breathing room here */
.contact-page .contact-section { padding-top: 8px; padding-bottom: 88px; }
/* on the homepage the form card uses margin-top:-40px to overlap the section
   above it; here it would ride up over the hero lead text, so cancel it */
.contact-page .contact-form-wrap { margin-top: 0; }

@media (max-width: 767px) {
  .contact-page { padding-top: 88px; }
  .contact-hero { padding: 40px 0 20px; }
  .contact-page .contact-section { padding-bottom: 64px; }
}