/* =============================================================================
   /contact/ — page layout only.
   Arrangement, nothing else. Every component, colour, length and radius comes
   from core.css; nothing here restyles a component or declares a token.
   ============================================================================= */

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */

/* The provenance and response-time promise sit below the CTA rather than
   inside a collapsed FAQ at the bottom of the page, which is where the old
   site buried the only honest sentence it had about geography. */
.page-contact .contact-facts{
  margin-top: var(--space-12);
  max-width: var(--measure);
}

/* ── 2. Book the call ────────────────────────────────────────────────────── */

.page-contact .book-grid{
  --gap: var(--space-10);
  align-items: start;
}

/* The slot the calendar embed drops into. It holds its own height so swapping
   an iframe in later shifts nothing around it. */
.page-contact .book-embed{
  display: grid;
  align-content: center;
  min-height: 260px;
  margin-block: var(--space-6);
  padding: var(--space-8);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.page-contact .book-embed p{ margin: 0; }

.page-contact .book-detail > * + *{ margin-top: var(--space-6); }
.page-contact .book-note{ max-width: var(--measure-narrow); }

/* ── 4. Form ─────────────────────────────────────────────────────────────── */

/* .grid-2 collapses to one column under 760 on its own. Above 900 the form
   takes the larger share: the reassurance column is support, not a sibling. */
.page-contact .form-layout{
  --gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px){
  .page-contact .form-layout{
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .page-contact .form-aside{
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
  }
}

/* ── 5. Direct routes ────────────────────────────────────────────────────── */

/* The route itself is the last line of each card, so it sits on the baseline
   however long the description above it runs. */
.page-contact #message .card{
  display: flex;
  flex-direction: column;
}
.page-contact #message .card-link{ margin-top: auto; }