/* ==========================================================================
   The calm pass, 2026-10-29: the Contact section at the foot of the home page
   (x3web ends with "Get in Touch": a short heading, the ways to reach them on
   the left, a plain form on the right, then the footer). Ours: the kicker, the
   h2, one honest lead, four plain rows with a line icon each, and the form on
   one white surface framed by a hairline. No shadow anywhere (Edgar, today:
   "again the box shadow"); the hairline is the only frame. Loads last on
   new-home.html, folded into new-styles.css on promote.
   ========================================================================== */

/* ------------------------------ The split ------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--gap-split);
  align-items: start;
}
.contact-side .kicker { margin-bottom: var(--s4); }
.contact-side .lead { margin-top: var(--s4); margin-bottom: var(--s6); max-width: 38ch; }

/* ------------------------------ The ways to reach us -------------------- */
/* Four plain rows: a 22px line icon in coral, then the text. No circles, no
   boxes. Each link is a 44px target on its own. */
.contact-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.contact-ways li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-body); color: var(--text); }
.contact-ways svg { width: 24px; height: 24px; flex: none; color: var(--coral); }
.contact-ways a, .contact-ways span { display: inline-flex; align-items: center; min-height: 44px; }
.contact-ways a {
  color: var(--text); font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--speed) var(--ease), text-decoration-color var(--speed) var(--ease);
}
.contact-ways a:hover { color: var(--coral-deep); text-decoration-color: currentColor; }
.contact-ways a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 2px; }
.contact-ways span { color: var(--text-muted); }

/* ------------------------------ The form -------------------------------- */
/* One white surface, a hairline, the card radius, 32px inside (24 on a
   phone). The card wraps the form so the thank-you message that replaces the
   form keeps the surface. */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: none;
}
.contact-form .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.contact-form .field > label { font-weight: 500; font-size: var(--fs-small); color: var(--text); }
.contact-form .field:focus-within > label { color: var(--text); }
/* 16px type and at least 48px tall, so a phone does not zoom; the radius is
   the card's halved; the focus ring is an outline, not a shadow. */
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  min-height: 50px;
  font-size: 1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r-card) / 2);
  box-shadow: none;
  transition: border-color var(--speed) var(--ease);
}
.contact-form .field textarea { min-height: 120px; }
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus {
  border-color: var(--ink);
  box-shadow: none;
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}
.contact-form .field [aria-invalid="true"] { border-color: var(--coral); box-shadow: none; }
.contact-form .btn--wide { margin-top: var(--s2); }
.contact-form .contact-note {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); text-align: center;
}
.contact-form .form-status { margin-top: var(--s4); font-weight: 500; }
.contact-card .form-done { padding: var(--s6) 0; }

/* ------------------------------ Phones ---------------------------------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .contact-side { text-align: center; }
  .contact-side .kicker { justify-content: center; }
  .contact-side .lead { margin-inline: auto; }
  .contact-ways { justify-items: center; }
}
@media (max-width: 600px) {
  .contact-card { padding: 24px; }
  .contact-form .field input,
  .contact-form .field select,
  .contact-form .field textarea { min-height: 52px; font-size: 1rem; }
  .contact-form .field textarea { min-height: 110px; }
  .contact-form .field > label { font-size: var(--fs-small); }
}

/* ------------------------------ Phones, fewer buttons (Edgar 2026-10-30) -- */
/* "Too much buttons": no phone number on a phone, the ways to reach us read
   as one left-aligned list. Home: the Get in touch block goes left. Contact
   page: one WhatsApp button at the top, the side card is plain rows only. */
.ct-wa-line { display: none !important; }
@media (max-width: 600px) {
  .contact-side { text-align: left; }
  .contact-side .kicker { justify-content: flex-start; }
  .contact-side .lead { margin-inline: 0; }
  .contact-ways { justify-items: start; }
  .contact-ways li:has(a[href^="tel"]) { display: none; }

  .ct-quick a[href^="tel"] { display: none; }
  .ct-side .ct-wa { display: none; }
  .ct-lines li:has(a[href^="tel"]) { display: none; }
  .ct-wa-line { display: grid !important; }
  .ct-lines li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); justify-content: start; }
}