/* Page-scoped styles extracted from contact.html. */

/* =====================================================================
   /contact.html page-scoped styles (sanctioned per-page pattern).
   Copy source: Marketing/Website/Contracts_Wireframes/page-contracts/07-contact.md (FROZEN).
   Tokens from site-tokens.css; shared components from site.css.
   Class prefix ct-. Mobile-first (375px up). Zero em/en-dashes or smart
   quotes anywhere; only hyphen, middot, ellipsis, and arrow glyphs.
   ===================================================================== */

/* ---------- Section 1: hero + routing map + path chips ---------- */
.ct-hero { padding-block: var(--s-9) var(--s-7); }
.ct-hero .eyebrow { display: block; margin-bottom: var(--s-4); }
.ct-hero h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.ct-naming {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-4);
}
.ct-lede { max-width: 62ch; }

.ct-routing {
  margin-top: var(--s-7);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.ct-routing-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.ct-route-row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-hair);
}
.ct-route-row:first-of-type { border-top: 0; padding-top: 0; }
.ct-route-row:last-of-type { padding-bottom: 0; }
.ct-route-name { font-weight: var(--weight-semibold); color: var(--ink); }
.ct-route-row p { margin: 0; }
@media (min-width: 720px) {
  .ct-route-row { grid-template-columns: 132px 1fr; gap: var(--s-4); align-items: baseline; }
}

.ct-chips {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .ct-chips { grid-template-columns: repeat(3, 1fr); } }
.ct-chip {
  background: var(--blue-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ct-chip-label {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-deep);
}
.ct-chip-title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--fs-18); color: var(--ink); }
.ct-chip p { margin: 0; font-size: var(--fs-14); }

/* ---------- Section 2: form card + chat cue aside ---------- */
.ct-form-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .ct-form-layout { grid-template-columns: 1.35fr 1fr; } }

.ct-form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}

.ct-form .ct-field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.ct-form .ct-field:last-of-type { margin-bottom: 0; }
.ct-field-row { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .ct-field-row { grid-template-columns: 1fr 1fr; } }
.ct-form label { font-weight: var(--weight-medium); color: var(--ink); font-size: var(--fs-14); }
.ct-label-hint { color: var(--ink-soft); font-weight: var(--weight-regular); }
.ct-form input,
.ct-form select,
.ct-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-16); /* >=16px prevents the iOS focus zoom */
  line-height: var(--lh-default);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.ct-form textarea { min-height: 120px; resize: vertical; }
.ct-form input::placeholder,
.ct-form textarea::placeholder { color: var(--ink-muted); }
.ct-form input:hover,
.ct-form select:hover,
.ct-form textarea:hover { border-color: var(--ink-muted); }
/* Mouse focus: soft ring + blue border. Keyboard focus adds the strong
   outline below so visible focus is guaranteed on every control. */
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.ct-form input:focus-visible,
.ct-form select:focus-visible,
.ct-form textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.ct-data-note { margin-top: var(--s-5); margin-bottom: 0; font-size: var(--fs-13); color: var(--ink-soft); }
.ct-submit { margin-top: var(--s-6); }
.ct-btn-block { width: 100%; justify-content: center; }
.ct-arr { font-weight: var(--weight-semibold); }

/* Attach-chat consent row (contact-submit.js injects it only when a Lucy chat
   session exists in localStorage; styled here so it lands in-theme). */
.field-attach-chat { margin-top: var(--s-5); }
.attach-chat-label { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-14); color: var(--ink); }
.attach-chat-label input { width: auto; margin-top: 3px; }
.attach-chat-note { margin: var(--s-2) 0 0; font-size: var(--fs-12); color: var(--ink-soft); }
.field-error { margin: var(--s-2) 0 0; font-size: var(--fs-13); color: var(--danger-deep); font-weight: var(--weight-medium); }

/* Thank-you / error state: hidden until contact-submit.js sets display:flex. */
.ct-thankyou { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.ct-thankyou h3 { margin: 0; }
.ct-thankyou p { margin: 0; }
.ct-ty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #E4F4ED; color: var(--ok-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: var(--fs-20);
}

.ct-aside { display: grid; gap: var(--s-5); }
.ct-cue { background: var(--blue); border-radius: var(--r-lg); padding: var(--s-6); }
.ct-cue-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--on-ink);
  opacity: 0.82;
  margin-bottom: var(--s-3);
}
.ct-cue h3 { color: var(--on-ink); margin: 0 0 var(--s-3); }
.ct-cue p { color: var(--on-ink-muted); margin: 0 0 var(--s-4); }
.ct-cue .btn { margin-top: 0; }
.ct-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.ct-card h4 { margin: 0 0 var(--s-3); }
.ct-card p { margin: 0; }

/* ---------- Section 3: faster paths ---------- */
.ct-faster-grid {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .ct-faster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ct-faster-grid { grid-template-columns: repeat(4, 1fr); } }
.ct-fp {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.ct-fp:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ct-fp-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ct-fp-title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--fs-18); color: var(--ink); }
.ct-fp-cta { margin-top: auto; padding-top: var(--s-2); font-weight: var(--weight-semibold); color: var(--blue); }

/* ---------- Section 4: FAQ (H3 inside summary inherits summary type) ---------- */
.ct-faq .faq summary h3 { margin: 0; font: inherit; flex: 1; }

/* == CONTACT PAGE CSS END == */