/* /contact/ page (Module J). Everything is scoped under .s-contact so it can't affect the shared header,
   footer or other pages. Layout: compact navy title band, then the form card (left) and the
   "other ways to reach us" list (right); one column on phones. No decorative shapes.
   The form reuses /assets/js/landing.js, so the field ids keep their lp- names. */

.s-contact {
  --ct-navy: #0f2350;
  --ct-red: #c81e2c;
  --ct-red-dark: #a81824;
  --ct-paper: #ffffff;
  --ct-cream: #f8f5ef;
  --ct-ink: #18213a;
  --ct-muted: #586079;
  --ct-line: #dcdfe7;
  --ct-tint: #eef1f7;
  --ct-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ct-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--ct-cream);
  color: var(--ct-ink);
  font-family: var(--ct-body);
  font-size: 16px;
  line-height: 1.6;
}
.s-contact *, .s-contact *::before, .s-contact *::after { box-sizing: border-box; }
.s-contact [hidden] { display: none !important; }
.s-contact a { color: var(--ct-navy); text-decoration-color: rgba(200, 30, 44, .55); text-underline-offset: 3px; }
.s-contact a:hover { color: var(--ct-red); }
.s-contact :focus-visible { outline: 3px solid var(--ct-red); outline-offset: 2px; border-radius: 4px; }

.s-contact .ct-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 560px) { .s-contact .ct-wrap { padding-inline: 16px; } }

/* Title band */
.s-contact .ct-band { background: var(--ct-navy); color: #fff; }
.s-contact .ct-band .ct-wrap { padding-block: 44px 40px; }
.s-contact .ct-crumbs { font-size: 13px; color: #b9c3dc; margin: 0 0 12px; }
.s-contact .ct-crumbs a { color: #dfe5f3; }
.s-contact .ct-band h1 { font-family: var(--ct-display); font-weight: 600; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 0 0 10px; color: #fff; letter-spacing: -0.01em; }
.s-contact .ct-lead { margin: 0; max-width: 60ch; color: #dfe5f3; font-size: 18px; }

/* Main grid */
.s-contact .ct-main .ct-wrap { padding-block: 40px 64px; }
.s-contact .ct-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 880px) { .s-contact .ct-grid { grid-template-columns: minmax(0, 1fr); } }

.s-contact h2 { font-family: var(--ct-display); font-weight: 600; font-size: 26px; line-height: 1.2; margin: 0 0 6px; color: var(--ct-navy); }

/* Form card */
.s-contact .ct-card { background: var(--ct-paper); border: 1px solid var(--ct-line); border-radius: 14px; padding: 28px; box-shadow: 0 10px 30px rgba(15, 35, 80, .07); min-width: 0; }
@media (max-width: 560px) { .s-contact .ct-card { padding: 20px 16px; } }
.s-contact .ct-sub { margin: 0 0 20px; color: var(--ct-muted); }
.s-contact .ct-form { display: grid; gap: 16px; }
.s-contact .ct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .s-contact .ct-row { grid-template-columns: minmax(0, 1fr); } }
.s-contact .ct-field { display: grid; gap: 6px; min-width: 0; }
.s-contact .ct-field label { font-weight: 600; font-size: 15px; }
.s-contact .ct-opt-label { font-weight: 400; color: var(--ct-muted); }
.s-contact .ct-field input, .s-contact .ct-field select, .s-contact .ct-field textarea {
  width: 100%; font: inherit; color: var(--ct-ink); background: #fff;
  border: 1px solid #b9c0cf; border-radius: 8px; padding: 11px 12px; min-height: 46px;
}
.s-contact .ct-field textarea { resize: vertical; min-height: 120px; }
.s-contact .ct-field input:focus, .s-contact .ct-field select:focus, .s-contact .ct-field textarea:focus { outline: 2px solid var(--ct-navy); outline-offset: 1px; border-color: var(--ct-navy); }
.s-contact [aria-invalid="true"] { border-color: var(--ct-red) !important; }
.s-contact .ct-err { margin: 0; color: #a3121e; font-size: 14px; }
.s-contact .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.s-contact .ct-btn { justify-self: start; font: inherit; font-weight: 700; font-size: 16px; color: #fff; background: var(--ct-red); border: 0; border-radius: 999px; padding: 13px 28px; cursor: pointer; }
.s-contact .ct-btn:hover { background: var(--ct-red-dark); }
.s-contact .ct-btn:disabled { opacity: .6; cursor: wait; }
@media (max-width: 560px) { .s-contact .ct-btn { justify-self: stretch; } }

.s-contact .ct-fine { margin: 0; font-size: 13px; color: var(--ct-muted); line-height: 1.5; }
.s-contact .ct-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--ct-ink); cursor: pointer; }
.s-contact .ct-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ct-navy); }

/* Messages written by landing.js (it uses lp- class names) */
.s-contact .lp-status:empty { display: none; }
.s-contact .lp-status p { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fdecee; border: 1px solid #f1b7bd; color: #7a0c16; font-size: 14px; }
.s-contact .lp-status a { color: #7a0c16; font-weight: 600; }
.s-contact .lp-thanks h2 { margin: 0 0 10px; }
.s-contact .lp-thanks p { margin: 0 0 14px; }
.s-contact .lp-thanks a { font-weight: 600; }

/* Side list */
.s-contact .ct-side { min-width: 0; }
.s-contact .ct-ways { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.s-contact .ct-ways li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--ct-paper); border: 1px solid var(--ct-line); border-radius: 12px; padding: 16px; }
.s-contact .ct-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--ct-tint); color: var(--ct-navy); display: grid; place-items: center; }
.s-contact .ct-ico svg { width: 22px; height: 22px; }
.s-contact .ct-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ct-muted); }
.s-contact .ct-v { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.s-contact .ct-addr { margin: 2px 0 4px; }
.s-contact .ct-note { margin: 0 0 6px; font-size: 15px; color: var(--ct-muted); }
.s-contact .ct-link { font-weight: 600; font-size: 15px; }
.s-contact .ct-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 15px; font-weight: 600; }