/* ==========================================================================
   contact.html-only rules. Everything else (header, footer, buttons, cards,
   hero shell, related-links, back-to-top, global typography, dark-mode
   colors) comes from css/*.css and must not be redefined here.
   Requires the full shared foundation to be loaded first.
   ========================================================================== */

/* ---- hero: page-scoped headline size ----
   The shared h1 scale (base.css/hero.css, clamp 2.75-5.7rem) is tuned for
   shorter headlines and a wide text column; this page's "balanced" 1.28fr
   column wrapped "Schedule a BI consultation." to 2 lines with "consultation."
   orphaned alone. Tried fixing the orphan with a non-breaking space first,
   but joining "BI" and "consultation." into one unbreakable chunk widened
   the H1's min-content enough to reproduce the same grid-distorting bug
   process.html hit (confirmed empirically: grid ratio changed from the
   correct 620.9/485.1px to a skewed 702/404px). Sizing the headline down
   instead avoids that risk entirely and lets it sit on one line at desktop
   widths with no orphan and no grid distortion. */

.hero h1 {
  font-size: clamp(2.4rem, 3.2vw, 3.4rem);
  line-height: 1.15;
}

/* "consultation." (13 characters) is long enough that it lands alone on
   its own line at narrow widths no matter how the rest of the sentence
   wraps. white-space:nowrap on just the last two words - scoped inside a
   mobile-only media query - forces "BI consultation." to move to the next
   line together instead of splitting, without duplicating any text and
   without the grid-distortion risk a sentence-wide   carries at
   wider, multi-column widths (confirmed empirically on this page - see
   the .hero h1 comment above). Inert above 430px since normal wrapping
   already fits the whole sentence on one line there. */
@media (max-width: 430px) {
  .contact-hero-h1-lastwords {
    white-space: nowrap;
  }
}

/* ---- hero summary card: check chips ----
   Shell/icon/heading/copy all come from the shared .hero-card--icon.
   hero-card--icon-lg family (hero.css). The reassurance-chip row below
   is the one genuinely page-specific piece - no other page's hero card
   has it. The shared copy needs slightly more bottom margin here to make
   room for the chip row underneath it. */

.contact-hero-card .hero-card__copy {
  margin-bottom: 20px;
}

.contact-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.contact-checks span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- "choose how to reach me": 2-card grid ----
   Reuses the shared .card-base.icon-card shell; the closing link reuses
   buttons.css's .card-link affordance instead of a page-specific style. */

.contact-option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.contact-option-card {
  display: flex;
  flex-direction: column;
}

.contact-option-card p {
  margin-bottom: auto;
  padding-bottom: 16px;
}

@media (max-width: 900px) {
  .contact-option-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- contact form ----
   Sits in the same section as the choice cards above it (not a separate
   .section--compact) so the two feel like one connected "how to reach me"
   flow instead of two sections' padding stacking into a large gap between
   them. 40px keeps a clear break from the cards without a big jump. */

.contact-form-box {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
}

.contact-form-box h2 {
  text-align: center;
}

.contact-form-box > p {
  max-width: 520px;
  margin: 12px auto 32px;
  color: var(--text-secondary);
  text-align: center;
}

.contact-clean-form {
  display: grid;
  gap: 20px;
}

.contact-clean-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field label {
  color: var(--heading-color);
  font-size: var(--fs-note);
  font-weight: 600;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-muted-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.4;
}

.contact-field textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.contact-clean-form button[type="submit"] {
  justify-self: start;
}

.contact-form-privacy-note {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-note);
  line-height: 1.5;
}

.contact-form-status {
  min-height: 1.4em;
  font-size: var(--fs-note);
  font-weight: 600;
}

.contact-form-status.is-success {
  color: var(--success-color);
}

.contact-form-status.is-error {
  color: var(--error-color);
}

@media (max-width: 640px) {
  .contact-form-box {
    padding: 26px 22px;
  }

  .contact-clean-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-clean-form button[type="submit"] {
    width: 100%;
  }
}

/* ---- "not sure what you need" closing guidance ----
   A single centered link below the section-heading, not another card -
   kept deliberately small so it doesn't read as a second CTA section.
   .card-link is inline-flex (buttons.css), so it needs a centered block
   parent the same way .section-heading already centers its own content. */
.contact-guidance-link {
  margin-top: 4px;
  text-align: center;
}