/* ==========================================================================
   Agilepreneurs: contact.css
   Contact page only. Loads after site.css and leans on its tokens.
   Two-column inquiry layout, form fields, status states.
   Flat rectangles, hairline rules, no shadows, no rounding.
   ========================================================================== */

/* ----------------------------------------------------------------- intro */

.contact-intro { padding: 80px 0 0; }
.contact-intro h1 { max-width: 16ch; margin-bottom: 20px; }

/* ------------------------------------------------------------------ grid */

.contact-band { padding: 56px 0 96px; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* ~60 / 40 */
  gap: 64px;
  align-items: start;
}

/* ------------------------------------------------------------------ form */

#contact-form { scroll-margin-top: 90px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--petrol);
  margin-bottom: 7px;
}

.field .req { color: var(--bronze-deep); margin-left: 2px; }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 180ms var(--ease);
}

/* Keep the site-wide :focus-visible outline; the border deepens as well. */
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--petrol); }

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

/* Honeypot: visually hidden container; humans never see or tab to it. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#contact-form .btn { margin-top: 6px; }
#contact-form .btn:disabled { opacity: 0.6; cursor: default; }

.form-status { margin-top: 18px; font-weight: 500; }
.form-status.ok { color: var(--petrol); }
.form-status.err { color: #8A3B2E; }

/* ----------------------------------------------------------------- aside */

.aside-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-top: 2px solid var(--bronze);
  padding: 30px 28px;
}
.aside-card h3 { margin-bottom: 10px; }
.aside-card p { font-size: 16px; }

.direct-contact { margin-top: 36px; }
.direct-contact h3 { font-size: 18px; margin-bottom: 8px; }
.direct-contact p { font-size: 16px; }
.direct-contact .phone { color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------ responsive */

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

@media (max-width: 760px) {
  .contact-intro { padding: 56px 0 0; }
  .contact-band { padding: 40px 0 72px; }
}