/* ============================================================================
   contact.css — chapter 10 + footer
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--chapter-gap);
  align-items: start;
}

@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.contact__title { max-width: 14ch; }

.contact__lines {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.contact__line {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact__ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--yellow-500);
  color: var(--navy-900);
}

.contact__ico svg { width: 18px; height: 18px; }

.contact__lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.contact__val {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-lead);
  font-weight: var(--weight-semibold);
  color: var(--page-fg);
}

a.contact__val { width: fit-content; }

a.contact__val { border-bottom: 1px solid transparent; transition: border-color var(--dur-base) ease; }
a.contact__val:hover { border-bottom-color: var(--yellow-500); }

/* -- Form ----------------------------------------------------------------- */

.form {
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  /* The card is white inside a navy chapter — restore the light palette. */
  --page-fg: var(--navy-900);
  --page-body: var(--slate-600);
  --page-muted: var(--slate-500);
  --page-border: var(--slate-200);
  --page-ring: var(--ring);
  color: var(--slate-600);
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: var(--space-2); align-content: start; }

/* Vertical rhythm applies between stacked blocks only. Fields sitting side by
   side inside a .form__row must stay top-aligned, so the rule is scoped to
   direct children of the form. */
.form > * + * { margin-top: var(--space-4); }

.field > label,
.field__legend {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.field input::placeholder,
.field textarea::placeholder { color: #9AA3B2; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px rgba(0, 10, 64, 0.1);
}

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

.field__hint {
  font-size: var(--text-xs);
  color: var(--slate-500);
}

.field--invalid input,
.field--invalid textarea { border-color: var(--danger); }

.field__error {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--danger-strong);
}

/* Service interest — seven checkboxes */

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--slate-600);
  cursor: pointer;
  transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease;
}

.check:hover { border-color: var(--navy-900); }

.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--slate-200);
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.check input::after {
  content: "";
  width: 9px;
  height: 9px;
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
  background: var(--navy-900);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out-power3);
}

.check input:checked {
  background: var(--yellow-500);
  border-color: var(--yellow-500);
}

.check input:checked::after { transform: scale(1); }

.check:has(input:checked) {
  border-color: var(--navy-900);
  background: var(--yellow-100);
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
}

/* -- Submit + status ------------------------------------------------------ */

.form__submit { margin-top: var(--space-6); }

.form__submit .btn { width: 100%; }

.btn[aria-busy="true"] { pointer-events: none; opacity: 0.72; }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0, 10, 64, 0.28);
  border-top-color: var(--navy-900);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
}

.form__status {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.form__status:empty { display: none; }

.form__status[data-state="success"] {
  background: #ECFDF5;
  border: 1px solid var(--success);
  color: #065F46;
}

.form__status[data-state="error"] {
  background: #FEF2F2;
  border: 1px solid var(--danger);
  color: var(--danger-strong);
}

.form__legal {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--slate-500);
}

/* -- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-16) var(--space-10);
  border-top: 1px solid var(--page-border);
}

.footer__grid {
  display: grid;
  gap: var(--chapter-gap);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.footer__blurb {
  margin-top: var(--space-5);
  max-width: 38ch;
  font-size: var(--text-sm);
  color: var(--page-body);
}

.footer__col-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-muted);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__links a { color: var(--page-body); transition: color var(--dur-base) ease; }
.footer__links a:hover { color: var(--yellow-500); }

.footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--page-hairline);
  font-size: var(--text-xs);
  color: var(--page-muted);
}